Merge pull request #793 from mirumee/lush-collection-load-more
Add missing infinite scroll to searches
This commit is contained in:
commit
27bc372ac5
12 changed files with 412 additions and 415 deletions
|
@ -55,6 +55,7 @@ All notable, unreleased changes to this project will be documented in this file.
|
||||||
- Add manage product types and attributes permission - #768 by @orzechdev
|
- Add manage product types and attributes permission - #768 by @orzechdev
|
||||||
- Fix isPublished and isAvailable behaviour for products, collections and pages - #780 by @mmarkusik
|
- Fix isPublished and isAvailable behaviour for products, collections and pages - #780 by @mmarkusik
|
||||||
- Add metadata editor to page views - #782 by @dominik-zeglen
|
- Add metadata editor to page views - #782 by @dominik-zeglen
|
||||||
|
- Add missing infinite scroll to searches - #793 by @dominik-zeglen
|
||||||
|
|
||||||
## 2.10.1
|
## 2.10.1
|
||||||
|
|
||||||
|
|
|
@ -1400,23 +1400,15 @@
|
||||||
"context": "section header",
|
"context": "section header",
|
||||||
"string": "App Status"
|
"string": "App Status"
|
||||||
},
|
},
|
||||||
"src_dot_components_dot_AssignCategoryDialog_dot_1305061437": {
|
"src_dot_components_dot_AssignCategoryDialog_dot_3125506097": {
|
||||||
"string": "Search Categories"
|
|
||||||
},
|
|
||||||
"src_dot_components_dot_AssignCategoryDialog_dot_190977792": {
|
|
||||||
"context": "dialog header",
|
"context": "dialog header",
|
||||||
"string": "Assign Categories"
|
"string": "Assign Category"
|
||||||
},
|
},
|
||||||
"src_dot_components_dot_AssignCategoryDialog_dot_3690273268": {
|
"src_dot_components_dot_AssignCategoryDialog_dot_3690273268": {
|
||||||
"string": "Search by category name, etc..."
|
"string": "Search by category name, etc..."
|
||||||
},
|
},
|
||||||
"src_dot_components_dot_AssignCategoryDialog_dot_3973677075": {
|
"src_dot_components_dot_AssignCategoryDialog_dot_3841025483": {
|
||||||
"context": "button",
|
"string": "Search Category"
|
||||||
"string": "Assign categories"
|
|
||||||
},
|
|
||||||
"src_dot_components_dot_AssignCollectionDialog_dot_1035511604": {
|
|
||||||
"context": "button",
|
|
||||||
"string": "Assign collections"
|
|
||||||
},
|
},
|
||||||
"src_dot_components_dot_AssignCollectionDialog_dot_2605414502": {
|
"src_dot_components_dot_AssignCollectionDialog_dot_2605414502": {
|
||||||
"string": "Search by collection name, etc..."
|
"string": "Search by collection name, etc..."
|
||||||
|
@ -1428,6 +1420,10 @@
|
||||||
"src_dot_components_dot_AssignCollectionDialog_dot_4057224233": {
|
"src_dot_components_dot_AssignCollectionDialog_dot_4057224233": {
|
||||||
"string": "Search Collection"
|
"string": "Search Collection"
|
||||||
},
|
},
|
||||||
|
"src_dot_components_dot_AssignContainerDialog_dot_1731102929": {
|
||||||
|
"context": "button",
|
||||||
|
"string": "Assign"
|
||||||
|
},
|
||||||
"src_dot_components_dot_AssignProductDialog_dot_2100305525": {
|
"src_dot_components_dot_AssignProductDialog_dot_2100305525": {
|
||||||
"context": "button",
|
"context": "button",
|
||||||
"string": "Assign products"
|
"string": "Assign products"
|
||||||
|
|
|
@ -60,7 +60,7 @@ export const CollectionDetails: React.FC<CollectionDetailsProps> = ({
|
||||||
);
|
);
|
||||||
const paginate = usePaginator();
|
const paginate = usePaginator();
|
||||||
const intl = useIntl();
|
const intl = useIntl();
|
||||||
const { search, result } = useProductSearch({
|
const { search, loadMore, result } = useProductSearch({
|
||||||
variables: DEFAULT_INITIAL_SEARCH_DATA
|
variables: DEFAULT_INITIAL_SEARCH_DATA
|
||||||
});
|
});
|
||||||
const [updateMetadata] = useMetadataUpdate({});
|
const [updateMetadata] = useMetadataUpdate({});
|
||||||
|
@ -296,8 +296,10 @@ export const CollectionDetails: React.FC<CollectionDetailsProps> = ({
|
||||||
/>
|
/>
|
||||||
<AssignProductDialog
|
<AssignProductDialog
|
||||||
confirmButtonState={assignProductOpts.status}
|
confirmButtonState={assignProductOpts.status}
|
||||||
|
hasMore={result.data?.search?.pageInfo.hasNextPage}
|
||||||
open={params.action === "assign"}
|
open={params.action === "assign"}
|
||||||
onFetch={search}
|
onFetch={search}
|
||||||
|
onFetchMore={loadMore}
|
||||||
loading={result.loading}
|
loading={result.loading}
|
||||||
onClose={closeModal}
|
onClose={closeModal}
|
||||||
onSubmit={products =>
|
onSubmit={products =>
|
||||||
|
|
|
@ -1,185 +1,41 @@
|
||||||
import Button from "@material-ui/core/Button";
|
|
||||||
import CircularProgress from "@material-ui/core/CircularProgress";
|
|
||||||
import Dialog from "@material-ui/core/Dialog";
|
|
||||||
import DialogActions from "@material-ui/core/DialogActions";
|
|
||||||
import DialogContent from "@material-ui/core/DialogContent";
|
|
||||||
import DialogTitle from "@material-ui/core/DialogTitle";
|
|
||||||
import { makeStyles } from "@material-ui/core/styles";
|
|
||||||
import TableBody from "@material-ui/core/TableBody";
|
|
||||||
import TableCell from "@material-ui/core/TableCell";
|
|
||||||
import TableRow from "@material-ui/core/TableRow";
|
|
||||||
import TextField from "@material-ui/core/TextField";
|
|
||||||
import ConfirmButton, {
|
|
||||||
ConfirmButtonTransitionState
|
|
||||||
} from "@saleor/components/ConfirmButton";
|
|
||||||
import FormSpacer from "@saleor/components/FormSpacer";
|
|
||||||
import ResponsiveTable from "@saleor/components/ResponsiveTable";
|
|
||||||
import useSearchQuery from "@saleor/hooks/useSearchQuery";
|
|
||||||
import { buttonMessages } from "@saleor/intl";
|
|
||||||
import { SearchCategories_search_edges_node } from "@saleor/searches/types/SearchCategories";
|
import { SearchCategories_search_edges_node } from "@saleor/searches/types/SearchCategories";
|
||||||
import React from "react";
|
import React from "react";
|
||||||
import { FormattedMessage, useIntl } from "react-intl";
|
import { useIntl } from "react-intl";
|
||||||
|
|
||||||
import Checkbox from "../Checkbox";
|
import AssignContainerDialog, {
|
||||||
|
AssignContainerDialogProps
|
||||||
|
} from "../AssignContainerDialog";
|
||||||
|
|
||||||
export interface FormData {
|
interface AssignCategoryDialogProps
|
||||||
|
extends Omit<AssignContainerDialogProps, "containers" | "title" | "search"> {
|
||||||
categories: SearchCategories_search_edges_node[];
|
categories: SearchCategories_search_edges_node[];
|
||||||
query: string;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
const useStyles = makeStyles(
|
const AssignCategoryDialog: React.FC<AssignCategoryDialogProps> = ({
|
||||||
{
|
categories,
|
||||||
avatar: {
|
...rest
|
||||||
"&:first-child": {
|
}) => {
|
||||||
paddingLeft: 0
|
|
||||||
}
|
|
||||||
},
|
|
||||||
checkboxCell: {
|
|
||||||
paddingLeft: 0
|
|
||||||
},
|
|
||||||
overflow: {
|
|
||||||
overflowY: "visible"
|
|
||||||
},
|
|
||||||
wideCell: {
|
|
||||||
width: "100%"
|
|
||||||
}
|
|
||||||
},
|
|
||||||
{ name: "AssignCategoryDialog" }
|
|
||||||
);
|
|
||||||
|
|
||||||
interface AssignCategoriesDialogProps {
|
|
||||||
categories: SearchCategories_search_edges_node[];
|
|
||||||
confirmButtonState: ConfirmButtonTransitionState;
|
|
||||||
open: boolean;
|
|
||||||
loading: boolean;
|
|
||||||
onClose: () => void;
|
|
||||||
onFetch: (value: string) => void;
|
|
||||||
onSubmit: (data: SearchCategories_search_edges_node[]) => void;
|
|
||||||
}
|
|
||||||
|
|
||||||
function handleCategoryAssign(
|
|
||||||
product: SearchCategories_search_edges_node,
|
|
||||||
isSelected: boolean,
|
|
||||||
selectedCategories: SearchCategories_search_edges_node[],
|
|
||||||
setSelectedCategories: (data: SearchCategories_search_edges_node[]) => void
|
|
||||||
) {
|
|
||||||
if (isSelected) {
|
|
||||||
setSelectedCategories(
|
|
||||||
selectedCategories.filter(
|
|
||||||
selectedProduct => selectedProduct.id !== product.id
|
|
||||||
)
|
|
||||||
);
|
|
||||||
} else {
|
|
||||||
setSelectedCategories([...selectedCategories, product]);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
const AssignCategoriesDialog: React.FC<AssignCategoriesDialogProps> = props => {
|
|
||||||
const {
|
|
||||||
confirmButtonState,
|
|
||||||
open,
|
|
||||||
loading,
|
|
||||||
categories: categories,
|
|
||||||
onClose,
|
|
||||||
onFetch,
|
|
||||||
onSubmit
|
|
||||||
} = props;
|
|
||||||
const classes = useStyles(props);
|
|
||||||
|
|
||||||
const intl = useIntl();
|
const intl = useIntl();
|
||||||
const [query, onQueryChange] = useSearchQuery(onFetch);
|
|
||||||
const [selectedCategories, setSelectedCategories] = React.useState<
|
|
||||||
SearchCategories_search_edges_node[]
|
|
||||||
>([]);
|
|
||||||
|
|
||||||
const handleSubmit = () => onSubmit(selectedCategories);
|
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<Dialog
|
<AssignContainerDialog
|
||||||
open={open}
|
containers={categories}
|
||||||
onClose={onClose}
|
search={{
|
||||||
classes={{ paper: classes.overflow }}
|
label: intl.formatMessage({
|
||||||
fullWidth
|
defaultMessage: "Search Category"
|
||||||
maxWidth="sm"
|
}),
|
||||||
>
|
placeholder: intl.formatMessage({
|
||||||
<DialogTitle>
|
|
||||||
<FormattedMessage
|
|
||||||
defaultMessage="Assign Categories"
|
|
||||||
description="dialog header"
|
|
||||||
/>
|
|
||||||
</DialogTitle>
|
|
||||||
<DialogContent className={classes.overflow}>
|
|
||||||
<TextField
|
|
||||||
name="query"
|
|
||||||
value={query}
|
|
||||||
onChange={onQueryChange}
|
|
||||||
label={intl.formatMessage({
|
|
||||||
defaultMessage: "Search Categories"
|
|
||||||
})}
|
|
||||||
placeholder={intl.formatMessage({
|
|
||||||
defaultMessage: "Search by category name, etc..."
|
defaultMessage: "Search by category name, etc..."
|
||||||
})}
|
})
|
||||||
fullWidth
|
|
||||||
InputProps={{
|
|
||||||
autoComplete: "off",
|
|
||||||
endAdornment: loading && <CircularProgress size={16} />
|
|
||||||
}}
|
}}
|
||||||
/>
|
title={intl.formatMessage({
|
||||||
<FormSpacer />
|
defaultMessage: "Assign Category",
|
||||||
<ResponsiveTable>
|
description: "dialog header"
|
||||||
<TableBody>
|
|
||||||
{categories &&
|
|
||||||
categories.map(category => {
|
|
||||||
const isSelected = !!selectedCategories.find(
|
|
||||||
selectedCategories => selectedCategories.id === category.id
|
|
||||||
);
|
|
||||||
|
|
||||||
return (
|
|
||||||
<TableRow key={category.id}>
|
|
||||||
<TableCell
|
|
||||||
padding="checkbox"
|
|
||||||
className={classes.checkboxCell}
|
|
||||||
>
|
|
||||||
<Checkbox
|
|
||||||
checked={isSelected}
|
|
||||||
onChange={() =>
|
|
||||||
handleCategoryAssign(
|
|
||||||
category,
|
|
||||||
isSelected,
|
|
||||||
selectedCategories,
|
|
||||||
setSelectedCategories
|
|
||||||
)
|
|
||||||
}
|
|
||||||
/>
|
|
||||||
</TableCell>
|
|
||||||
<TableCell className={classes.wideCell}>
|
|
||||||
{category.name}
|
|
||||||
</TableCell>
|
|
||||||
</TableRow>
|
|
||||||
);
|
|
||||||
})}
|
})}
|
||||||
</TableBody>
|
{...rest}
|
||||||
</ResponsiveTable>
|
|
||||||
</DialogContent>
|
|
||||||
<DialogActions>
|
|
||||||
<Button onClick={onClose}>
|
|
||||||
<FormattedMessage {...buttonMessages.back} />
|
|
||||||
</Button>
|
|
||||||
<ConfirmButton
|
|
||||||
transitionState={confirmButtonState}
|
|
||||||
color="primary"
|
|
||||||
variant="contained"
|
|
||||||
type="submit"
|
|
||||||
onClick={handleSubmit}
|
|
||||||
>
|
|
||||||
<FormattedMessage
|
|
||||||
defaultMessage="Assign categories"
|
|
||||||
description="button"
|
|
||||||
/>
|
/>
|
||||||
</ConfirmButton>
|
|
||||||
</DialogActions>
|
|
||||||
</Dialog>
|
|
||||||
);
|
);
|
||||||
};
|
};
|
||||||
AssignCategoriesDialog.displayName = "AssignCategoriesDialog";
|
|
||||||
export default AssignCategoriesDialog;
|
AssignCategoryDialog.displayName = "AssignCategoryDialog";
|
||||||
|
export default AssignCategoryDialog;
|
||||||
|
|
|
@ -1,185 +1,41 @@
|
||||||
import Button from "@material-ui/core/Button";
|
|
||||||
import CircularProgress from "@material-ui/core/CircularProgress";
|
|
||||||
import Dialog from "@material-ui/core/Dialog";
|
|
||||||
import DialogActions from "@material-ui/core/DialogActions";
|
|
||||||
import DialogContent from "@material-ui/core/DialogContent";
|
|
||||||
import DialogTitle from "@material-ui/core/DialogTitle";
|
|
||||||
import { makeStyles } from "@material-ui/core/styles";
|
|
||||||
import TableBody from "@material-ui/core/TableBody";
|
|
||||||
import TableCell from "@material-ui/core/TableCell";
|
|
||||||
import TableRow from "@material-ui/core/TableRow";
|
|
||||||
import TextField from "@material-ui/core/TextField";
|
|
||||||
import ResponsiveTable from "@saleor/components/ResponsiveTable";
|
|
||||||
import useSearchQuery from "@saleor/hooks/useSearchQuery";
|
|
||||||
import { buttonMessages } from "@saleor/intl";
|
|
||||||
import { SearchCollections_search_edges_node } from "@saleor/searches/types/SearchCollections";
|
import { SearchCollections_search_edges_node } from "@saleor/searches/types/SearchCollections";
|
||||||
import React from "react";
|
import React from "react";
|
||||||
import { FormattedMessage, useIntl } from "react-intl";
|
import { useIntl } from "react-intl";
|
||||||
|
|
||||||
import Checkbox from "../Checkbox";
|
import AssignContainerDialog, {
|
||||||
import ConfirmButton, {
|
AssignContainerDialogProps
|
||||||
ConfirmButtonTransitionState
|
} from "../AssignContainerDialog";
|
||||||
} from "../ConfirmButton/ConfirmButton";
|
|
||||||
import FormSpacer from "../FormSpacer";
|
|
||||||
|
|
||||||
export interface FormData {
|
interface AssignCollectionDialogProps
|
||||||
|
extends Omit<AssignContainerDialogProps, "containers" | "title" | "search"> {
|
||||||
collections: SearchCollections_search_edges_node[];
|
collections: SearchCollections_search_edges_node[];
|
||||||
query: string;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
const useStyles = makeStyles(
|
const AssignCollectionDialog: React.FC<AssignCollectionDialogProps> = ({
|
||||||
{
|
|
||||||
avatar: {
|
|
||||||
"&:first-child": {
|
|
||||||
paddingLeft: 0
|
|
||||||
}
|
|
||||||
},
|
|
||||||
checkboxCell: {
|
|
||||||
paddingLeft: 0
|
|
||||||
},
|
|
||||||
overflow: {
|
|
||||||
overflowY: "visible"
|
|
||||||
},
|
|
||||||
wideCell: {
|
|
||||||
width: "100%"
|
|
||||||
}
|
|
||||||
},
|
|
||||||
{ name: "AssignCollectionDialog" }
|
|
||||||
);
|
|
||||||
|
|
||||||
interface AssignCollectionDialogProps {
|
|
||||||
collections: SearchCollections_search_edges_node[];
|
|
||||||
confirmButtonState: ConfirmButtonTransitionState;
|
|
||||||
open: boolean;
|
|
||||||
loading: boolean;
|
|
||||||
onClose: () => void;
|
|
||||||
onFetch: (value: string) => void;
|
|
||||||
onSubmit: (data: SearchCollections_search_edges_node[]) => void;
|
|
||||||
}
|
|
||||||
|
|
||||||
function handleCollectionAssign(
|
|
||||||
product: SearchCollections_search_edges_node,
|
|
||||||
isSelected: boolean,
|
|
||||||
selectedCollections: SearchCollections_search_edges_node[],
|
|
||||||
setSelectedCollections: (data: SearchCollections_search_edges_node[]) => void
|
|
||||||
) {
|
|
||||||
if (isSelected) {
|
|
||||||
setSelectedCollections(
|
|
||||||
selectedCollections.filter(
|
|
||||||
selectedProduct => selectedProduct.id !== product.id
|
|
||||||
)
|
|
||||||
);
|
|
||||||
} else {
|
|
||||||
setSelectedCollections([...selectedCollections, product]);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
const AssignCollectionDialog: React.FC<AssignCollectionDialogProps> = props => {
|
|
||||||
const {
|
|
||||||
confirmButtonState,
|
|
||||||
open,
|
|
||||||
loading,
|
|
||||||
collections,
|
collections,
|
||||||
onClose,
|
...rest
|
||||||
onFetch,
|
}) => {
|
||||||
onSubmit
|
|
||||||
} = props;
|
|
||||||
const classes = useStyles(props);
|
|
||||||
|
|
||||||
const intl = useIntl();
|
const intl = useIntl();
|
||||||
const [query, onQueryChange] = useSearchQuery(onFetch);
|
|
||||||
const [selectedCollections, setSelectedCollections] = React.useState<
|
|
||||||
SearchCollections_search_edges_node[]
|
|
||||||
>([]);
|
|
||||||
|
|
||||||
const handleSubmit = () => onSubmit(selectedCollections);
|
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<Dialog
|
<AssignContainerDialog
|
||||||
onClose={onClose}
|
containers={collections}
|
||||||
open={open}
|
search={{
|
||||||
classes={{ paper: classes.overflow }}
|
label: intl.formatMessage({
|
||||||
fullWidth
|
|
||||||
maxWidth="sm"
|
|
||||||
>
|
|
||||||
<DialogTitle>
|
|
||||||
<FormattedMessage
|
|
||||||
defaultMessage="Assign Collection"
|
|
||||||
description="dialog header"
|
|
||||||
/>
|
|
||||||
</DialogTitle>
|
|
||||||
<DialogContent className={classes.overflow}>
|
|
||||||
<TextField
|
|
||||||
name="query"
|
|
||||||
value={query}
|
|
||||||
onChange={onQueryChange}
|
|
||||||
label={intl.formatMessage({
|
|
||||||
defaultMessage: "Search Collection"
|
defaultMessage: "Search Collection"
|
||||||
})}
|
}),
|
||||||
placeholder={intl.formatMessage({
|
placeholder: intl.formatMessage({
|
||||||
defaultMessage: "Search by collection name, etc..."
|
defaultMessage: "Search by collection name, etc..."
|
||||||
})}
|
})
|
||||||
fullWidth
|
|
||||||
InputProps={{
|
|
||||||
autoComplete: "off",
|
|
||||||
endAdornment: loading && <CircularProgress size={16} />
|
|
||||||
}}
|
}}
|
||||||
/>
|
title={intl.formatMessage({
|
||||||
<FormSpacer />
|
defaultMessage: "Assign Collection",
|
||||||
<ResponsiveTable>
|
description: "dialog header"
|
||||||
<TableBody>
|
|
||||||
{collections &&
|
|
||||||
collections.map(collection => {
|
|
||||||
const isSelected = !!selectedCollections.find(
|
|
||||||
selectedCollection => selectedCollection.id === collection.id
|
|
||||||
);
|
|
||||||
|
|
||||||
return (
|
|
||||||
<TableRow key={collection.id}>
|
|
||||||
<TableCell
|
|
||||||
padding="checkbox"
|
|
||||||
className={classes.checkboxCell}
|
|
||||||
>
|
|
||||||
<Checkbox
|
|
||||||
checked={isSelected}
|
|
||||||
onChange={() =>
|
|
||||||
handleCollectionAssign(
|
|
||||||
collection,
|
|
||||||
isSelected,
|
|
||||||
selectedCollections,
|
|
||||||
setSelectedCollections
|
|
||||||
)
|
|
||||||
}
|
|
||||||
/>
|
|
||||||
</TableCell>
|
|
||||||
<TableCell className={classes.wideCell}>
|
|
||||||
{collection.name}
|
|
||||||
</TableCell>
|
|
||||||
</TableRow>
|
|
||||||
);
|
|
||||||
})}
|
})}
|
||||||
</TableBody>
|
{...rest}
|
||||||
</ResponsiveTable>
|
|
||||||
</DialogContent>
|
|
||||||
<DialogActions>
|
|
||||||
<Button onClick={onClose}>
|
|
||||||
<FormattedMessage {...buttonMessages.back} />
|
|
||||||
</Button>
|
|
||||||
<ConfirmButton
|
|
||||||
transitionState={confirmButtonState}
|
|
||||||
color="primary"
|
|
||||||
variant="contained"
|
|
||||||
type="submit"
|
|
||||||
onClick={handleSubmit}
|
|
||||||
>
|
|
||||||
<FormattedMessage
|
|
||||||
defaultMessage="Assign collections"
|
|
||||||
description="button"
|
|
||||||
/>
|
/>
|
||||||
</ConfirmButton>
|
|
||||||
</DialogActions>
|
|
||||||
</Dialog>
|
|
||||||
);
|
);
|
||||||
};
|
};
|
||||||
|
|
||||||
AssignCollectionDialog.displayName = "AssignCollectionDialog";
|
AssignCollectionDialog.displayName = "AssignCollectionDialog";
|
||||||
export default AssignCollectionDialog;
|
export default AssignCollectionDialog;
|
||||||
|
|
204
src/components/AssignContainerDialog/AssignContainerDialog.tsx
Normal file
204
src/components/AssignContainerDialog/AssignContainerDialog.tsx
Normal file
|
@ -0,0 +1,204 @@
|
||||||
|
import Button from "@material-ui/core/Button";
|
||||||
|
import CircularProgress from "@material-ui/core/CircularProgress";
|
||||||
|
import Dialog from "@material-ui/core/Dialog";
|
||||||
|
import DialogActions from "@material-ui/core/DialogActions";
|
||||||
|
import DialogContent from "@material-ui/core/DialogContent";
|
||||||
|
import DialogTitle from "@material-ui/core/DialogTitle";
|
||||||
|
import { makeStyles } from "@material-ui/core/styles";
|
||||||
|
import TableBody from "@material-ui/core/TableBody";
|
||||||
|
import TableCell from "@material-ui/core/TableCell";
|
||||||
|
import TableRow from "@material-ui/core/TableRow";
|
||||||
|
import TextField from "@material-ui/core/TextField";
|
||||||
|
import ResponsiveTable from "@saleor/components/ResponsiveTable";
|
||||||
|
import useSearchQuery from "@saleor/hooks/useSearchQuery";
|
||||||
|
import { buttonMessages } from "@saleor/intl";
|
||||||
|
import useScrollableDialogStyle from "@saleor/styles/useScrollableDialogStyle";
|
||||||
|
import { FetchMoreProps, Node } from "@saleor/types";
|
||||||
|
import React from "react";
|
||||||
|
import InfiniteScroll from "react-infinite-scroller";
|
||||||
|
import { FormattedMessage } from "react-intl";
|
||||||
|
|
||||||
|
import Checkbox from "../Checkbox";
|
||||||
|
import ConfirmButton, {
|
||||||
|
ConfirmButtonTransitionState
|
||||||
|
} from "../ConfirmButton/ConfirmButton";
|
||||||
|
import FormSpacer from "../FormSpacer";
|
||||||
|
|
||||||
|
export interface FormData {
|
||||||
|
containers: string[];
|
||||||
|
query: string;
|
||||||
|
}
|
||||||
|
|
||||||
|
const useStyles = makeStyles(
|
||||||
|
{
|
||||||
|
avatar: {
|
||||||
|
"&:first-child": {
|
||||||
|
paddingLeft: 0
|
||||||
|
}
|
||||||
|
},
|
||||||
|
checkboxCell: {
|
||||||
|
paddingLeft: 0
|
||||||
|
},
|
||||||
|
wideCell: {
|
||||||
|
width: "100%"
|
||||||
|
}
|
||||||
|
},
|
||||||
|
{ name: "AssignContainerDialog" }
|
||||||
|
);
|
||||||
|
|
||||||
|
interface Container extends Node {
|
||||||
|
name: string;
|
||||||
|
}
|
||||||
|
export interface AssignContainerDialogProps extends FetchMoreProps {
|
||||||
|
confirmButtonState: ConfirmButtonTransitionState;
|
||||||
|
containers: Container[];
|
||||||
|
loading: boolean;
|
||||||
|
open: boolean;
|
||||||
|
search: Record<"label" | "placeholder", string>;
|
||||||
|
title: string;
|
||||||
|
onClose: () => void;
|
||||||
|
onFetch: (value: string) => void;
|
||||||
|
onSubmit: (data: string[]) => void;
|
||||||
|
}
|
||||||
|
|
||||||
|
function handleContainerAssign(
|
||||||
|
containerId: string,
|
||||||
|
isSelected: boolean,
|
||||||
|
selectedContainers: string[],
|
||||||
|
setSelectedContainers: (data: string[]) => void
|
||||||
|
) {
|
||||||
|
if (isSelected) {
|
||||||
|
setSelectedContainers(
|
||||||
|
selectedContainers.filter(
|
||||||
|
selectedContainer => selectedContainer !== containerId
|
||||||
|
)
|
||||||
|
);
|
||||||
|
} else {
|
||||||
|
setSelectedContainers([...selectedContainers, containerId]);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
const AssignContainerDialog: React.FC<AssignContainerDialogProps> = props => {
|
||||||
|
const {
|
||||||
|
confirmButtonState,
|
||||||
|
containers,
|
||||||
|
hasMore,
|
||||||
|
loading,
|
||||||
|
open,
|
||||||
|
search,
|
||||||
|
title,
|
||||||
|
onClose,
|
||||||
|
onFetch,
|
||||||
|
onFetchMore,
|
||||||
|
onSubmit
|
||||||
|
} = props;
|
||||||
|
const classes = useStyles(props);
|
||||||
|
const scrollableDialogClasses = useScrollableDialogStyle({});
|
||||||
|
|
||||||
|
const [query, onQueryChange] = useSearchQuery(onFetch);
|
||||||
|
const [selectedContainers, setSelectedContainers] = React.useState<string[]>(
|
||||||
|
[]
|
||||||
|
);
|
||||||
|
const container = React.useRef<HTMLDivElement>();
|
||||||
|
|
||||||
|
const handleSubmit = () => onSubmit(selectedContainers);
|
||||||
|
|
||||||
|
const containerHeight = container.current?.scrollHeight - 130;
|
||||||
|
|
||||||
|
return (
|
||||||
|
<Dialog
|
||||||
|
onClose={onClose}
|
||||||
|
open={open}
|
||||||
|
classes={{ paper: scrollableDialogClasses.dialog }}
|
||||||
|
fullWidth
|
||||||
|
maxWidth="sm"
|
||||||
|
>
|
||||||
|
<DialogTitle>{title}</DialogTitle>
|
||||||
|
<DialogContent
|
||||||
|
className={scrollableDialogClasses.content}
|
||||||
|
ref={container}
|
||||||
|
>
|
||||||
|
<TextField
|
||||||
|
name="query"
|
||||||
|
value={query}
|
||||||
|
onChange={onQueryChange}
|
||||||
|
label={search.label}
|
||||||
|
placeholder={search.placeholder}
|
||||||
|
fullWidth
|
||||||
|
InputProps={{
|
||||||
|
autoComplete: "off",
|
||||||
|
endAdornment: loading && <CircularProgress size={16} />
|
||||||
|
}}
|
||||||
|
/>
|
||||||
|
<FormSpacer />
|
||||||
|
<div
|
||||||
|
className={scrollableDialogClasses.scrollArea}
|
||||||
|
style={{ height: containerHeight }}
|
||||||
|
>
|
||||||
|
<InfiniteScroll
|
||||||
|
pageStart={0}
|
||||||
|
loadMore={onFetchMore}
|
||||||
|
hasMore={hasMore}
|
||||||
|
useWindow={false}
|
||||||
|
loader={
|
||||||
|
<div className={scrollableDialogClasses.loadMoreLoaderContainer}>
|
||||||
|
<CircularProgress size={16} />
|
||||||
|
</div>
|
||||||
|
}
|
||||||
|
threshold={10}
|
||||||
|
>
|
||||||
|
<ResponsiveTable>
|
||||||
|
<TableBody>
|
||||||
|
{containers?.map(container => {
|
||||||
|
const isSelected = !!selectedContainers.find(
|
||||||
|
selectedContainer => selectedContainer === container.id
|
||||||
|
);
|
||||||
|
|
||||||
|
return (
|
||||||
|
<TableRow key={container.id}>
|
||||||
|
<TableCell
|
||||||
|
padding="checkbox"
|
||||||
|
className={classes.checkboxCell}
|
||||||
|
>
|
||||||
|
<Checkbox
|
||||||
|
checked={isSelected}
|
||||||
|
onChange={() =>
|
||||||
|
handleContainerAssign(
|
||||||
|
container.id,
|
||||||
|
isSelected,
|
||||||
|
selectedContainers,
|
||||||
|
setSelectedContainers
|
||||||
|
)
|
||||||
|
}
|
||||||
|
/>
|
||||||
|
</TableCell>
|
||||||
|
<TableCell className={classes.wideCell}>
|
||||||
|
{container.name}
|
||||||
|
</TableCell>
|
||||||
|
</TableRow>
|
||||||
|
);
|
||||||
|
})}
|
||||||
|
</TableBody>
|
||||||
|
</ResponsiveTable>
|
||||||
|
</InfiniteScroll>
|
||||||
|
</div>
|
||||||
|
</DialogContent>
|
||||||
|
<DialogActions>
|
||||||
|
<Button onClick={onClose}>
|
||||||
|
<FormattedMessage {...buttonMessages.back} />
|
||||||
|
</Button>
|
||||||
|
<ConfirmButton
|
||||||
|
transitionState={confirmButtonState}
|
||||||
|
color="primary"
|
||||||
|
variant="contained"
|
||||||
|
type="submit"
|
||||||
|
onClick={handleSubmit}
|
||||||
|
>
|
||||||
|
<FormattedMessage defaultMessage="Assign" description="button" />
|
||||||
|
</ConfirmButton>
|
||||||
|
</DialogActions>
|
||||||
|
</Dialog>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
AssignContainerDialog.displayName = "AssignContainerDialog";
|
||||||
|
export default AssignContainerDialog;
|
2
src/components/AssignContainerDialog/index.ts
Normal file
2
src/components/AssignContainerDialog/index.ts
Normal file
|
@ -0,0 +1,2 @@
|
||||||
|
export * from "./AssignContainerDialog";
|
||||||
|
export { default } from "./AssignContainerDialog";
|
|
@ -19,7 +19,10 @@ import useSearchQuery from "@saleor/hooks/useSearchQuery";
|
||||||
import { buttonMessages } from "@saleor/intl";
|
import { buttonMessages } from "@saleor/intl";
|
||||||
import { maybe } from "@saleor/misc";
|
import { maybe } from "@saleor/misc";
|
||||||
import { SearchProducts_search_edges_node } from "@saleor/searches/types/SearchProducts";
|
import { SearchProducts_search_edges_node } from "@saleor/searches/types/SearchProducts";
|
||||||
|
import useScrollableDialogStyle from "@saleor/styles/useScrollableDialogStyle";
|
||||||
|
import { FetchMoreProps } from "@saleor/types";
|
||||||
import React from "react";
|
import React from "react";
|
||||||
|
import InfiniteScroll from "react-infinite-scroller";
|
||||||
import { FormattedMessage, useIntl } from "react-intl";
|
import { FormattedMessage, useIntl } from "react-intl";
|
||||||
|
|
||||||
import Checkbox from "../Checkbox";
|
import Checkbox from "../Checkbox";
|
||||||
|
@ -43,18 +46,12 @@ const useStyles = makeStyles(
|
||||||
},
|
},
|
||||||
colName: {
|
colName: {
|
||||||
paddingLeft: 0
|
paddingLeft: 0
|
||||||
},
|
|
||||||
overflow: {
|
|
||||||
overflowY: "visible"
|
|
||||||
},
|
|
||||||
scrollArea: {
|
|
||||||
overflowY: "scroll"
|
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
{ name: "AssignProductDialog" }
|
{ name: "AssignProductDialog" }
|
||||||
);
|
);
|
||||||
|
|
||||||
export interface AssignProductDialogProps {
|
export interface AssignProductDialogProps extends FetchMoreProps {
|
||||||
confirmButtonState: ConfirmButtonTransitionState;
|
confirmButtonState: ConfirmButtonTransitionState;
|
||||||
open: boolean;
|
open: boolean;
|
||||||
products: SearchProducts_search_edges_node[];
|
products: SearchProducts_search_edges_node[];
|
||||||
|
@ -84,28 +81,34 @@ function handleProductAssign(
|
||||||
const AssignProductDialog: React.FC<AssignProductDialogProps> = props => {
|
const AssignProductDialog: React.FC<AssignProductDialogProps> = props => {
|
||||||
const {
|
const {
|
||||||
confirmButtonState,
|
confirmButtonState,
|
||||||
|
hasMore,
|
||||||
open,
|
open,
|
||||||
loading,
|
loading,
|
||||||
products,
|
products,
|
||||||
onClose,
|
onClose,
|
||||||
onFetch,
|
onFetch,
|
||||||
|
onFetchMore,
|
||||||
onSubmit
|
onSubmit
|
||||||
} = props;
|
} = props;
|
||||||
const classes = useStyles(props);
|
const classes = useStyles(props);
|
||||||
|
const scrollableDialogClasses = useScrollableDialogStyle({});
|
||||||
|
|
||||||
const intl = useIntl();
|
const intl = useIntl();
|
||||||
const [query, onQueryChange] = useSearchQuery(onFetch);
|
const [query, onQueryChange] = useSearchQuery(onFetch);
|
||||||
const [selectedProducts, setSelectedProducts] = React.useState<
|
const [selectedProducts, setSelectedProducts] = React.useState<
|
||||||
SearchProducts_search_edges_node[]
|
SearchProducts_search_edges_node[]
|
||||||
>([]);
|
>([]);
|
||||||
|
const container = React.useRef<HTMLDivElement>();
|
||||||
|
|
||||||
const handleSubmit = () => onSubmit(selectedProducts);
|
const handleSubmit = () => onSubmit(selectedProducts);
|
||||||
|
|
||||||
|
const containerHeight = container.current?.scrollHeight - 130;
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<Dialog
|
<Dialog
|
||||||
onClose={onClose}
|
onClose={onClose}
|
||||||
open={open}
|
open={open}
|
||||||
classes={{ paper: classes.overflow }}
|
classes={{ paper: scrollableDialogClasses.dialog }}
|
||||||
fullWidth
|
fullWidth
|
||||||
maxWidth="sm"
|
maxWidth="sm"
|
||||||
>
|
>
|
||||||
|
@ -115,7 +118,10 @@ const AssignProductDialog: React.FC<AssignProductDialogProps> = props => {
|
||||||
description="dialog header"
|
description="dialog header"
|
||||||
/>
|
/>
|
||||||
</DialogTitle>
|
</DialogTitle>
|
||||||
<DialogContent>
|
<DialogContent
|
||||||
|
className={scrollableDialogClasses.content}
|
||||||
|
ref={container}
|
||||||
|
>
|
||||||
<TextField
|
<TextField
|
||||||
name="query"
|
name="query"
|
||||||
value={query}
|
value={query}
|
||||||
|
@ -134,8 +140,23 @@ const AssignProductDialog: React.FC<AssignProductDialogProps> = props => {
|
||||||
}}
|
}}
|
||||||
/>
|
/>
|
||||||
<FormSpacer />
|
<FormSpacer />
|
||||||
<div className={classes.scrollArea}>
|
<div
|
||||||
<ResponsiveTable>
|
className={scrollableDialogClasses.scrollArea}
|
||||||
|
style={{ height: containerHeight }}
|
||||||
|
>
|
||||||
|
<InfiniteScroll
|
||||||
|
pageStart={0}
|
||||||
|
loadMore={onFetchMore}
|
||||||
|
hasMore={hasMore}
|
||||||
|
useWindow={false}
|
||||||
|
loader={
|
||||||
|
<div className={scrollableDialogClasses.loadMoreLoaderContainer}>
|
||||||
|
<CircularProgress size={16} />
|
||||||
|
</div>
|
||||||
|
}
|
||||||
|
threshold={10}
|
||||||
|
>
|
||||||
|
<ResponsiveTable key="table">
|
||||||
<TableBody>
|
<TableBody>
|
||||||
{products &&
|
{products &&
|
||||||
products.map(product => {
|
products.map(product => {
|
||||||
|
@ -173,6 +194,7 @@ const AssignProductDialog: React.FC<AssignProductDialogProps> = props => {
|
||||||
})}
|
})}
|
||||||
</TableBody>
|
</TableBody>
|
||||||
</ResponsiveTable>
|
</ResponsiveTable>
|
||||||
|
</InfiniteScroll>
|
||||||
</div>
|
</div>
|
||||||
</DialogContent>
|
</DialogContent>
|
||||||
<DialogActions>
|
<DialogActions>
|
||||||
|
|
|
@ -69,18 +69,21 @@ export const SaleDetails: React.FC<SaleDetailsProps> = ({ id, params }) => {
|
||||||
);
|
);
|
||||||
const intl = useIntl();
|
const intl = useIntl();
|
||||||
const {
|
const {
|
||||||
|
loadMore: loadMoreCategories,
|
||||||
search: searchCategories,
|
search: searchCategories,
|
||||||
result: searchCategoriesOpts
|
result: searchCategoriesOpts
|
||||||
} = useCategorySearch({
|
} = useCategorySearch({
|
||||||
variables: DEFAULT_INITIAL_SEARCH_DATA
|
variables: DEFAULT_INITIAL_SEARCH_DATA
|
||||||
});
|
});
|
||||||
const {
|
const {
|
||||||
|
loadMore: loadMoreCollections,
|
||||||
search: searchCollections,
|
search: searchCollections,
|
||||||
result: searchCollectionsOpts
|
result: searchCollectionsOpts
|
||||||
} = useCollectionSearch({
|
} = useCollectionSearch({
|
||||||
variables: DEFAULT_INITIAL_SEARCH_DATA
|
variables: DEFAULT_INITIAL_SEARCH_DATA
|
||||||
});
|
});
|
||||||
const {
|
const {
|
||||||
|
loadMore: loadMoreProducts,
|
||||||
search: searchProducts,
|
search: searchProducts,
|
||||||
result: searchProductsOpts
|
result: searchProductsOpts
|
||||||
} = useProductSearch({
|
} = useProductSearch({
|
||||||
|
@ -327,8 +330,13 @@ export const SaleDetails: React.FC<SaleDetailsProps> = ({ id, params }) => {
|
||||||
/>
|
/>
|
||||||
<AssignProductDialog
|
<AssignProductDialog
|
||||||
confirmButtonState={saleCataloguesAddOpts.status}
|
confirmButtonState={saleCataloguesAddOpts.status}
|
||||||
|
hasMore={
|
||||||
|
searchProductsOpts.data?.search.pageInfo
|
||||||
|
.hasNextPage
|
||||||
|
}
|
||||||
open={params.action === "assign-product"}
|
open={params.action === "assign-product"}
|
||||||
onFetch={searchProducts}
|
onFetch={searchProducts}
|
||||||
|
onFetchMore={loadMoreProducts}
|
||||||
loading={searchProductsOpts.loading}
|
loading={searchProductsOpts.loading}
|
||||||
onClose={closeModal}
|
onClose={closeModal}
|
||||||
onSubmit={products =>
|
onSubmit={products =>
|
||||||
|
@ -361,8 +369,13 @@ export const SaleDetails: React.FC<SaleDetailsProps> = ({ id, params }) => {
|
||||||
)
|
)
|
||||||
)}
|
)}
|
||||||
confirmButtonState={saleCataloguesAddOpts.status}
|
confirmButtonState={saleCataloguesAddOpts.status}
|
||||||
|
hasMore={
|
||||||
|
searchCategoriesOpts.data?.search.pageInfo
|
||||||
|
.hasNextPage
|
||||||
|
}
|
||||||
open={params.action === "assign-category"}
|
open={params.action === "assign-category"}
|
||||||
onFetch={searchCategories}
|
onFetch={searchCategories}
|
||||||
|
onFetchMore={loadMoreCategories}
|
||||||
loading={searchCategoriesOpts.loading}
|
loading={searchCategoriesOpts.loading}
|
||||||
onClose={closeModal}
|
onClose={closeModal}
|
||||||
onSubmit={categories =>
|
onSubmit={categories =>
|
||||||
|
@ -371,9 +384,7 @@ export const SaleDetails: React.FC<SaleDetailsProps> = ({ id, params }) => {
|
||||||
...paginationState,
|
...paginationState,
|
||||||
id,
|
id,
|
||||||
input: {
|
input: {
|
||||||
categories: categories.map(
|
categories
|
||||||
product => product.id
|
|
||||||
)
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
})
|
})
|
||||||
|
@ -388,8 +399,13 @@ export const SaleDetails: React.FC<SaleDetailsProps> = ({ id, params }) => {
|
||||||
)
|
)
|
||||||
)}
|
)}
|
||||||
confirmButtonState={saleCataloguesAddOpts.status}
|
confirmButtonState={saleCataloguesAddOpts.status}
|
||||||
|
hasMore={
|
||||||
|
searchCollectionsOpts.data?.search.pageInfo
|
||||||
|
.hasNextPage
|
||||||
|
}
|
||||||
open={params.action === "assign-collection"}
|
open={params.action === "assign-collection"}
|
||||||
onFetch={searchCollections}
|
onFetch={searchCollections}
|
||||||
|
onFetchMore={loadMoreCollections}
|
||||||
loading={searchCollectionsOpts.loading}
|
loading={searchCollectionsOpts.loading}
|
||||||
onClose={closeModal}
|
onClose={closeModal}
|
||||||
onSubmit={collections =>
|
onSubmit={collections =>
|
||||||
|
@ -398,9 +414,7 @@ export const SaleDetails: React.FC<SaleDetailsProps> = ({ id, params }) => {
|
||||||
...paginationState,
|
...paginationState,
|
||||||
id,
|
id,
|
||||||
input: {
|
input: {
|
||||||
collections: collections.map(
|
collections
|
||||||
product => product.id
|
|
||||||
)
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
})
|
})
|
||||||
|
|
|
@ -71,18 +71,21 @@ export const VoucherDetails: React.FC<VoucherDetailsProps> = ({
|
||||||
);
|
);
|
||||||
const intl = useIntl();
|
const intl = useIntl();
|
||||||
const {
|
const {
|
||||||
|
loadMore: loadMoreCategories,
|
||||||
search: searchCategories,
|
search: searchCategories,
|
||||||
result: searchCategoriesOpts
|
result: searchCategoriesOpts
|
||||||
} = useCategorySearch({
|
} = useCategorySearch({
|
||||||
variables: DEFAULT_INITIAL_SEARCH_DATA
|
variables: DEFAULT_INITIAL_SEARCH_DATA
|
||||||
});
|
});
|
||||||
const {
|
const {
|
||||||
|
loadMore: loadMoreCollections,
|
||||||
search: searchCollections,
|
search: searchCollections,
|
||||||
result: searchCollectionsOpts
|
result: searchCollectionsOpts
|
||||||
} = useCollectionSearch({
|
} = useCollectionSearch({
|
||||||
variables: DEFAULT_INITIAL_SEARCH_DATA
|
variables: DEFAULT_INITIAL_SEARCH_DATA
|
||||||
});
|
});
|
||||||
const {
|
const {
|
||||||
|
loadMore: loadMoreProducts,
|
||||||
search: searchProducts,
|
search: searchProducts,
|
||||||
result: searchProductsOpts
|
result: searchProductsOpts
|
||||||
} = useProductSearch({
|
} = useProductSearch({
|
||||||
|
@ -407,8 +410,13 @@ export const VoucherDetails: React.FC<VoucherDetailsProps> = ({
|
||||||
confirmButtonState={
|
confirmButtonState={
|
||||||
voucherCataloguesAddOpts.status
|
voucherCataloguesAddOpts.status
|
||||||
}
|
}
|
||||||
|
hasMore={
|
||||||
|
searchCategoriesOpts.data?.search.pageInfo
|
||||||
|
.hasNextPage
|
||||||
|
}
|
||||||
open={params.action === "assign-category"}
|
open={params.action === "assign-category"}
|
||||||
onFetch={searchCategories}
|
onFetch={searchCategories}
|
||||||
|
onFetchMore={loadMoreCategories}
|
||||||
loading={searchCategoriesOpts.loading}
|
loading={searchCategoriesOpts.loading}
|
||||||
onClose={closeModal}
|
onClose={closeModal}
|
||||||
onSubmit={categories =>
|
onSubmit={categories =>
|
||||||
|
@ -417,9 +425,7 @@ export const VoucherDetails: React.FC<VoucherDetailsProps> = ({
|
||||||
...paginationState,
|
...paginationState,
|
||||||
id,
|
id,
|
||||||
input: {
|
input: {
|
||||||
categories: categories.map(
|
categories
|
||||||
product => product.id
|
|
||||||
)
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
})
|
})
|
||||||
|
@ -436,8 +442,13 @@ export const VoucherDetails: React.FC<VoucherDetailsProps> = ({
|
||||||
confirmButtonState={
|
confirmButtonState={
|
||||||
voucherCataloguesAddOpts.status
|
voucherCataloguesAddOpts.status
|
||||||
}
|
}
|
||||||
|
hasMore={
|
||||||
|
searchCollectionsOpts.data?.search.pageInfo
|
||||||
|
.hasNextPage
|
||||||
|
}
|
||||||
open={params.action === "assign-collection"}
|
open={params.action === "assign-collection"}
|
||||||
onFetch={searchCollections}
|
onFetch={searchCollections}
|
||||||
|
onFetchMore={loadMoreCollections}
|
||||||
loading={searchCollectionsOpts.loading}
|
loading={searchCollectionsOpts.loading}
|
||||||
onClose={closeModal}
|
onClose={closeModal}
|
||||||
onSubmit={collections =>
|
onSubmit={collections =>
|
||||||
|
@ -446,9 +457,7 @@ export const VoucherDetails: React.FC<VoucherDetailsProps> = ({
|
||||||
...paginationState,
|
...paginationState,
|
||||||
id,
|
id,
|
||||||
input: {
|
input: {
|
||||||
collections: collections.map(
|
collections
|
||||||
product => product.id
|
|
||||||
)
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
})
|
})
|
||||||
|
@ -481,8 +490,13 @@ export const VoucherDetails: React.FC<VoucherDetailsProps> = ({
|
||||||
confirmButtonState={
|
confirmButtonState={
|
||||||
voucherCataloguesAddOpts.status
|
voucherCataloguesAddOpts.status
|
||||||
}
|
}
|
||||||
|
hasMore={
|
||||||
|
searchProductsOpts.data?.search.pageInfo
|
||||||
|
.hasNextPage
|
||||||
|
}
|
||||||
open={params.action === "assign-product"}
|
open={params.action === "assign-product"}
|
||||||
onFetch={searchProducts}
|
onFetch={searchProducts}
|
||||||
|
onFetchMore={loadMoreProducts}
|
||||||
loading={searchProductsOpts.loading}
|
loading={searchProductsOpts.loading}
|
||||||
onClose={closeModal}
|
onClose={closeModal}
|
||||||
onSubmit={products =>
|
onSubmit={products =>
|
||||||
|
|
|
@ -2,6 +2,7 @@ import placeholderImage from "@assets/images/placeholder60x60.png";
|
||||||
import AssignProductDialog, {
|
import AssignProductDialog, {
|
||||||
AssignProductDialogProps
|
AssignProductDialogProps
|
||||||
} from "@saleor/components/AssignProductDialog";
|
} from "@saleor/components/AssignProductDialog";
|
||||||
|
import { fetchMoreProps } from "@saleor/fixtures";
|
||||||
import { products } from "@saleor/products/fixtures";
|
import { products } from "@saleor/products/fixtures";
|
||||||
import { storiesOf } from "@storybook/react";
|
import { storiesOf } from "@storybook/react";
|
||||||
import React from "react";
|
import React from "react";
|
||||||
|
@ -9,6 +10,7 @@ import React from "react";
|
||||||
import Decorator from "../../Decorator";
|
import Decorator from "../../Decorator";
|
||||||
|
|
||||||
const props: AssignProductDialogProps = {
|
const props: AssignProductDialogProps = {
|
||||||
|
...fetchMoreProps,
|
||||||
confirmButtonState: "default",
|
confirmButtonState: "default",
|
||||||
loading: false,
|
loading: false,
|
||||||
onClose: () => undefined,
|
onClose: () => undefined,
|
||||||
|
|
28
src/styles/useScrollableDialogStyle.ts
Normal file
28
src/styles/useScrollableDialogStyle.ts
Normal file
|
@ -0,0 +1,28 @@
|
||||||
|
import makeStyles from "@material-ui/core/styles/makeStyles";
|
||||||
|
|
||||||
|
const useScrollableDialogStyle = makeStyles(
|
||||||
|
theme => ({
|
||||||
|
content: {
|
||||||
|
overflowY: "hidden"
|
||||||
|
},
|
||||||
|
dialog: {
|
||||||
|
height: "calc(100% - 64px)",
|
||||||
|
maxHeight: 700
|
||||||
|
},
|
||||||
|
loadMoreLoaderContainer: {
|
||||||
|
alignItems: "center",
|
||||||
|
display: "flex",
|
||||||
|
height: theme.spacing(3),
|
||||||
|
justifyContent: "center",
|
||||||
|
marginTop: theme.spacing(3)
|
||||||
|
},
|
||||||
|
scrollArea: {
|
||||||
|
overflowY: "scroll"
|
||||||
|
}
|
||||||
|
}),
|
||||||
|
{
|
||||||
|
name: "ScrollableDialog"
|
||||||
|
}
|
||||||
|
);
|
||||||
|
|
||||||
|
export default useScrollableDialogStyle;
|
Loading…
Reference in a new issue