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

fix product list covering search bar (#1527) (#1577)

Browse source
This commit is contained in:
Michał Droń 2021-11-10 12:54:22 +01:00 committed by GitHub
parent feef026fd0
commit 4f18947dda
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
1 changed files with 93 additions and 93 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

186
src/shipping/components/ShippingMethodProductsAddDialog/ShippingMethodProductsAddDialog.tsx
View file

@ -39,7 +39,11 @@ const useStyles = makeStyles(
paddingLeft: 0
},
content: {
overflowY: "scroll"
overflowY: "scroll",
height: 450
},
searchBar: {
marginBottom: theme.spacing(3)
},
loadMoreLoaderContainer: {
alignItems: "center",
@ -125,104 +129,100 @@ const ShippingMethodProductsAddDialog: React.FC<ShippingMethodProductsAddDialogP
};
return (
<Dialog
onClose={handleClose}
open={open}
classes={{ paper: classes.overflow }}
fullWidth
maxWidth="sm"
>
<Dialog onClose={handleClose} open={open} fullWidth maxWidth="sm">
<DialogTitle>
<FormattedMessage
defaultMessage="Assign Products"
description="dialog header"
/>
</DialogTitle>
<DialogContent className={classes.overflow}>
<TextField
name="query"
value={query}
onChange={onQueryChange}
label={intl.formatMessage({
defaultMessage: "Search Products"
})}
placeholder={intl.formatMessage({
defaultMessage: "Search Products"
})}
fullWidth
InputProps={{
autoComplete: "off",
endAdornment: loading && <CircularProgress size={16} />
}}
/>
</DialogContent>
<DialogContent className={classes.content} id={scrollableTargetId}>
<InfiniteScroll
dataLength={products?.length}
next={onFetchMore}
hasMore={hasMore}
scrollThreshold="100px"
loader={
<div key="loader" className={classes.loadMoreLoaderContainer}>
<CircularProgress size={16} />
</div>
}
scrollableTarget={scrollableTargetId}
>
<ResponsiveTable key="table">
<TableBody>
{renderCollection(
products,
(product, productIndex) => {
const isSelected = selectedProducts.some(
selectedProduct => selectedProduct.id === product.id
);
return (
<React.Fragment
key={product ? product.id : `skeleton-${productIndex}`}
>
<TableRow>
<TableCell
padding="checkbox"
className={classes.productCheckboxCell}
>
{product && (
<Checkbox
checked={isSelected}
disabled={loading}
onChange={() =>
handleProductAssign(
product,
isSelected,
selectedProducts,
setSelectedProducts
)
}
/>
)}
</TableCell>
<TableCellAvatar
className={classes.avatar}
thumbnail={product?.thumbnail?.url}
/>
<TableCell className={classes.colName} colSpan={2}>
{product?.name || <Skeleton />}
</TableCell>
</TableRow>
</React.Fragment>
);
},
() => (
<TableRow>
<TableCell colSpan={4}>
<FormattedMessage defaultMessage="No products matching given query" />
</TableCell>
</TableRow>
)
)}
</TableBody>
</ResponsiveTable>
</InfiniteScroll>
<DialogContent>
<div className={classes.searchBar}>
<TextField
name="query"
value={query}
onChange={onQueryChange}
label={intl.formatMessage({
defaultMessage: "Search Products"
})}
placeholder={intl.formatMessage({
defaultMessage: "Search Products"
})}
fullWidth
InputProps={{
autoComplete: "off",
endAdornment: loading && <CircularProgress size={16} />
}}
/>
</div>
<div className={classes.content} id={scrollableTargetId}>
<InfiniteScroll
dataLength={products?.length}
next={onFetchMore}
hasMore={hasMore}
scrollThreshold="100px"
loader={
<div key="loader" className={classes.loadMoreLoaderContainer}>
<CircularProgress size={16} />
</div>
}
scrollableTarget={scrollableTargetId}
>
<ResponsiveTable key="table">
<TableBody>
{renderCollection(
products,
(product, productIndex) => {
const isSelected = selectedProducts.some(
selectedProduct => selectedProduct.id === product.id
);
return (
<React.Fragment
key={product ? product.id : `skeleton-${productIndex}`}
>
<TableRow>
<TableCell
padding="checkbox"
className={classes.productCheckboxCell}
>
{product && (
<Checkbox
checked={isSelected}
disabled={loading}
onChange={() =>
handleProductAssign(
product,
isSelected,
selectedProducts,
setSelectedProducts
)
}
/>
)}
</TableCell>
<TableCellAvatar
className={classes.avatar}
thumbnail={product?.thumbnail?.url}
/>
<TableCell className={classes.colName} colSpan={2}>
{product?.name || <Skeleton />}
</TableCell>
</TableRow>
</React.Fragment>
);
},
() => (
<TableRow>
<TableCell colSpan={4}>
<FormattedMessage defaultMessage="No products matching given query" />
</TableCell>
</TableRow>
)
)}
</TableBody>
</ResponsiveTable>
</InfiniteScroll>
</div>
</DialogContent>
<DialogActions>
<Button onClick={handleClose}>