djkato/saleor-dashboard
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Add error state

Browse source
This commit is contained in:
dominik-zeglen 2020-03-06 12:09:55 +01:00
parent 490c4c3023
commit c94ec7eafa
2 changed files with 16 additions and 14 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

7
src/components/MultiAutocompleteSelectField/MultiAutocompleteSelectField.stories.tsx
View file

@ -30,7 +30,7 @@ const Story: React.FC<Partial<
MultiAutocompleteSelectFieldProps & { MultiAutocompleteSelectFieldProps & {
enableLoadMore: boolean; enableLoadMore: boolean;
} }
>> = ({ allowCustomValues, enableLoadMore }) => { >> = ({ enableLoadMore, ...rest }) => {
const { change, data: countries } = useMultiAutocomplete([suggestions[0]]); const { change, data: countries } = useMultiAutocomplete([suggestions[0]]);
return ( return (
@ -49,7 +49,7 @@ const Story: React.FC<Partial<
loading={loading} loading={loading}
hasMore={enableLoadMore ? hasMore : false} hasMore={enableLoadMore ? hasMore : false}
onFetchMore={enableLoadMore ? onFetchMore : undefined} onFetchMore={enableLoadMore ? onFetchMore : undefined}
allowCustomValues={allowCustomValues} {...rest}
/> />
)} )}
</ChoiceProvider> </ChoiceProvider>
@ -84,4 +84,5 @@ storiesOf("Generics / Multiple select with autocomplete", module)
.add("interactive with custom option", () => ( .add("interactive with custom option", () => (
<Story allowCustomValues={true} /> <Story allowCustomValues={true} />
)) ))
.add("interactive with load more", () => <Story enableLoadMore={true} />); .add("interactive with load more", () => <Story enableLoadMore={true} />)
.add("interactive with error", () => <Story error={true} />);

23
src/components/MultiAutocompleteSelectField/MultiAutocompleteSelectField.tsx
View file

@ -59,6 +59,7 @@ export interface MultiAutocompleteSelectFieldProps
extends Partial<FetchMoreProps> { extends Partial<FetchMoreProps> {
allowCustomValues?: boolean; allowCustomValues?: boolean;
displayValues: MultiAutocompleteChoiceType[]; displayValues: MultiAutocompleteChoiceType[];
error?: boolean;
name: string; name: string;
choices: MultiAutocompleteChoiceType[]; choices: MultiAutocompleteChoiceType[];
value: string[]; value: string[];
@ -70,19 +71,16 @@ export interface MultiAutocompleteSelectFieldProps
onChange: (event: React.ChangeEvent<any>) => void; onChange: (event: React.ChangeEvent<any>) => void;
} }
const DebounceAutocomplete: React.ComponentType< const DebounceAutocomplete: React.ComponentType<DebounceProps<
DebounceProps<string> string
> = Debounce; >> = Debounce;
const MultiAutocompleteSelectFieldComponent: React.FC< const MultiAutocompleteSelectFieldComponent: React.FC<MultiAutocompleteSelectFieldProps> = props => {
MultiAutocompleteSelectFieldProps
> = props => {
const { const {
allowCustomValues, allowCustomValues,
choices, choices,
displayValues, displayValues,
error,
hasMore, hasMore,
helperText, helperText,
label, label,
@ -147,6 +145,7 @@ const MultiAutocompleteSelectFieldComponent: React.FC<
id: undefined, id: undefined,
onClick: toggleMenu onClick: toggleMenu
}} }}
error={error}
helperText={helperText} helperText={helperText}
label={label} label={label}
fullWidth={true} fullWidth={true}
@ -191,9 +190,11 @@ const MultiAutocompleteSelectFieldComponent: React.FC<
); );
}; };
const MultiAutocompleteSelectField: React.FC< const MultiAutocompleteSelectField: React.FC<MultiAutocompleteSelectFieldProps> = ({
MultiAutocompleteSelectFieldProps choices,
> = ({ choices, fetchChoices, ...props }) => { fetchChoices,
...props
}) => {
const [query, setQuery] = React.useState(""); const [query, setQuery] = React.useState("");
if (fetchChoices) { if (fetchChoices) {