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

Add loader to attribute picker (#1182)

Browse source 
* wip multiselectfield loader

* restyled spinner display

* get rid of redundant debouncer

* wip

* wip multiselectfield loader

* restyled spinner display

* get rid of redundant debouncer

* remove redundant prop

Co-authored-by: Magdalena Markusik <magdalena.markusik@mirumee.com>
This commit is contained in:
SektorDV 2021-07-01 10:20:35 +02:00 committed by GitHub
parent 3bd83c3731
commit 8e1dc4e12d
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
4 changed files with 37 additions and 45 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

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

@ -181,7 +181,7 @@ const MultiAutocompleteSelectFieldComponent: React.FC<MultiAutocompleteSelectFie
fullWidth={true} fullWidth={true}
disabled={disabled} disabled={disabled}
/> />
{isOpen && (!!inputValue || !!choices.length) && ( {isOpen && (
<MultiAutocompleteSelectFieldContent <MultiAutocompleteSelectFieldContent
add={ add={
add && { add && {
@ -249,16 +249,12 @@ const MultiAutocompleteSelectField: React.FC<MultiAutocompleteSelectFieldProps>
if (fetchChoices) { if (fetchChoices) {
return ( return (
<DebounceAutocomplete debounceFn={fetchChoices}>
{debounceFn => (
<MultiAutocompleteSelectFieldComponent <MultiAutocompleteSelectFieldComponent
testId={testId} testId={testId}
choices={choices} choices={choices}
{...props} {...props}
fetchChoices={debounceFn} fetchChoices={fetchChoices}
/> />
)}
</DebounceAutocomplete>
); );
} }

29
src/components/MultiAutocompleteSelectField/MultiAutocompleteSelectFieldContent.tsx
View file

@ -125,7 +125,8 @@ const useStyles = makeStyles(
progress: {}, progress: {},
progressContainer: { progressContainer: {
display: "flex", display: "flex",
justifyContent: "center" justifyContent: "center",
padding: `${theme.spacing(1)}px 0`
}, },
root: { root: {
borderBottomLeftRadius: 8, borderBottomLeftRadius: 8,
@ -173,7 +174,6 @@ const MultiAutocompleteSelectFieldContent: React.FC<MultiAutocompleteSelectField
inputValue, inputValue,
onFetchMore onFetchMore
} = props; } = props;
if (!!add && !!displayCustomValue) { if (!!add && !!displayCustomValue) {
throw new Error("Add and custom value cannot be displayed simultaneously"); throw new Error("Add and custom value cannot be displayed simultaneously");
} }
@ -198,12 +198,12 @@ const MultiAutocompleteSelectFieldContent: React.FC<MultiAutocompleteSelectField
} }
}, [loading]); }, [loading]);
const hasValuesToDisplay =
displayValues.length > 0 || displayCustomValue || choices.length > 0;
return ( return (
<Paper className={classes.root}> <Paper className={classes.root}>
{hasValuesToDisplay && (
<div className={classes.content} ref={anchor}> <div className={classes.content} ref={anchor}>
{choices.length > 0 ||
displayValues.length > 0 ||
displayCustomValue ? (
<> <>
{add && ( {add && (
<MenuItem <MenuItem
@ -298,25 +298,26 @@ const MultiAutocompleteSelectFieldContent: React.FC<MultiAutocompleteSelectField
</MenuItem> </MenuItem>
); );
})} })}
{hasMore && ( </>
<>
<Hr className={classes.hr} />
<div className={classes.progressContainer}>
<CircularProgress className={classes.progress} size={24} />
</div> </div>
</>
)} )}
</> {!loading && !hasValuesToDisplay && (
) : (
<MenuItem <MenuItem
disabled={true} disabled={true}
component="div" component="div"
data-test="multiautocomplete-select-no-options" data-test="multiautocomplete-select-no-options"
> >
<FormattedMessage defaultMessage="No results found" /> <FormattedMessage defaultMessage={"No results found"} />
</MenuItem> </MenuItem>
)} )}
{(hasMore || loading) && (
<>
{hasMore && <Hr className={classes.hr} />}
<div className={classes.progressContainer}>
<CircularProgress className={classes.progress} size={24} />
</div> </div>
</>
)}
{choices.length > maxMenuItems && ( {choices.length > maxMenuItems && (
<div className={classes.arrowContainer}> <div className={classes.arrowContainer}>
<div <div

6
src/components/SingleAutocompleteSelectField/SingleAutocompleteSelectField.tsx
View file

@ -242,15 +242,11 @@ const SingleAutocompleteSelectField: React.FC<SingleAutocompleteSelectFieldProps
if (fetchChoices) { if (fetchChoices) {
return ( return (
<DebounceAutocomplete debounceFn={fetchChoices}>
{debounceFn => (
<SingleAutocompleteSelectFieldComponent <SingleAutocompleteSelectFieldComponent
choices={choices} choices={choices}
{...rest} {...rest}
fetchChoices={debounceFn} fetchChoices={fetchChoices}
/> />
)}
</DebounceAutocomplete>
); );
} }

1
src/utils/handlers/attributeValueSearchHandler.ts
View file

@ -40,7 +40,6 @@ function createAttributeValueSearchHandler(
search(""); search("");
} }
}, [state.id]); }, [state.id]);
return { return {
loadMore, loadMore,
search: handleSearch, search: handleSearch,