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