Enhancements to pagination navigation (#2063)
* Update macaw to include Paginator changes * Add link support to TablePagination component * Rewrite usePaginator to use context and links instead of onClick * Refactor ProductList to use new usePaginator hook * Add decorator for PaginatorContext in ProductList stories * Refactor AppList to use new usePaginator hook * Refactor AttributeList to use new usePaginator hook * Add missing pagination props for local pagination to AttributeValues * Refactor CategoryList to use new usePaginator hook * Refactor CategoryDetails to use useLocalPaginator and context * Refactor CollectionList to use new usePaginator hook * Refactor CollectionProducts to use new usePaginator hook * Refactor CustomerList to use new usePaginator hook * Refactor VoucherDetailsPage to use PaginationContext * Refactor SaleDetails to use PaginatorContext * Refactor SaleList to use new usePaginator hook * Refactor VoucherList to use new usePaginator hook * Fix type error in paginatorContextValues fixture * Refactor GitfCardList to use new usePaginator hook * Remove unused imports * Refactor MenuList to use new usePaginator hook * Refactor OrderDraftList to use new usePaginator hook * Refactor OrderListPage to use new usePaginator hook * Refactor PageList to use new usePaginator hook * Refactor PageTypeList to use new usePaginator hook * Refactor PermissionGroupList to use new usePaginator hook * Refactor PluginsList to use new usePaginator hook * Refactor ProductTypeList to use new usePaginator hook * Refactor ShippingMethodProducts to use PaginationContext * Refactor ShippingZonesList to use new usePaginator hook * Refactor StaffList to use new usePaginator hook * Fix TS errors * Update TranslationEntities and TranslationFields to use new usePaginator * Refactor WarehouseList to use new usePaginator hook * Fix errors in stories that didn't use PaginationContextDecorator * Mention changes in changelog * Update to latest macaw version, update snapshots
This commit is contained in:
Jonatan Witoszek
GitHub
parent
47ec01dd7c
commit
1a19289e43
110 changed files with 9146 additions and 5793 deletions
|
|
@ -6,6 +6,8 @@ All notable, unreleased changes to this project will be documented in this file.
|
|||
- Added links instead of imperative navigation with onClick - #1969 by @taniotanio7
|
||||
- Fixed clearing attribute values - #2047 by @witoszekdev
|
||||
- Fixed EditorJS integration in RichTextEditor input - #2052 by @witoszekdev
|
||||
- Added links to table pagination buttons - #2063 by @witoszekdev
|
||||
- Using push instead of replace to history stack for pagination navigation - #2063 by @witoszekdev
|
||||
|
||||
## 3.1
|
||||
### PREVIEW FEATURES
|
||||
|
|
|
|||
52
package-lock.json
generated
52
package-lock.json
generated
|
|
@ -2263,6 +2263,38 @@
|
|||
}
|
||||
}
|
||||
},
|
||||
"@floating-ui/core": {
|
||||
"version": "0.7.2",
|
||||
"resolved": "https://registry.npmjs.org/@floating-ui/core/-/core-0.7.2.tgz",
|
||||
"integrity": "sha512-FRVAkSNU/vGXLIsgbggcs70GkXKEOXgBBbNpYPNHSaKsCAMMd00NrjbtKTesxkdv9xm9N3+XiDlcFGY6WnatBg=="
|
||||
},
|
||||
"@floating-ui/dom": {
|
||||
"version": "0.5.2",
|
||||
"resolved": "https://registry.npmjs.org/@floating-ui/dom/-/dom-0.5.2.tgz",
|
||||
"integrity": "sha512-z1DnEa7F3d8Fm/eXSbii8UEGpcjZGkQaYYUI0WpEVgD3vBfebDW8j/3ysusxonuMexoigA+A3b/fYH7sEqiwyg==",
|
||||
"requires": {
|
||||
"@floating-ui/core": "^0.7.2"
|
||||
}
|
||||
},
|
||||
"@floating-ui/react-dom": {
|
||||
"version": "0.7.1",
|
||||
"resolved": "https://registry.npmjs.org/@floating-ui/react-dom/-/react-dom-0.7.1.tgz",
|
||||
"integrity": "sha512-Dd7e8AupUjzcjeGf1g3EItf/QRtEWKF5GGyEs5WA5n3zlHvEgZ4XrZM6ANhUnzgE3pUQAaXkcXLnibgFp1YBRw==",
|
||||
"requires": {
|
||||
"@floating-ui/dom": "^0.5.1",
|
||||
"use-isomorphic-layout-effect": "^1.1.1"
|
||||
}
|
||||
},
|
||||
"@floating-ui/react-dom-interactions": {
|
||||
"version": "0.5.0",
|
||||
"resolved": "https://registry.npmjs.org/@floating-ui/react-dom-interactions/-/react-dom-interactions-0.5.0.tgz",
|
||||
"integrity": "sha512-rfON7mkHjCeogd0BSXPa8GBp1TMxEytJQqGVlCouSUonJ4POqdHsqcxRnCh0yAaGVaL/nB/J1vq28V4RdoLszg==",
|
||||
"requires": {
|
||||
"@floating-ui/react-dom": "^0.7.0",
|
||||
"aria-hidden": "^1.1.3",
|
||||
"use-isomorphic-layout-effect": "^1.1.1"
|
||||
}
|
||||
},
|
||||
"@formatjs/cli": {
|
||||
"version": "4.8.3",
|
||||
"resolved": "https://registry.npmjs.org/@formatjs/cli/-/cli-4.8.3.tgz",
|
||||
|
|
@ -5277,10 +5309,11 @@
|
|||
}
|
||||
},
|
||||
"@saleor/macaw-ui": {
|
||||
"version": "0.5.2",
|
||||
"resolved": "https://registry.npmjs.org/@saleor/macaw-ui/-/macaw-ui-0.5.2.tgz",
|
||||
"integrity": "sha512-fAbIGLnMo9BiVuR6W6MMZUprIutS+f4i1oEG8PX7+WM4rMZbvD204wxvHyx5dXSrU1DhLzDR4MK7dEGK/jykHA==",
|
||||
"version": "0.6.1",
|
||||
"resolved": "https://registry.npmjs.org/@saleor/macaw-ui/-/macaw-ui-0.6.1.tgz",
|
||||
"integrity": "sha512-C7WPbuQQTtDH3MVKg//74rSxUheav7TKubw8VytZsUEBWFSVpuzV8Hw+T6riKYJWOtTfYPNUkJlGi1B257hoQQ==",
|
||||
"requires": {
|
||||
"@floating-ui/react-dom-interactions": "^0.5.0",
|
||||
"clsx": "^1.1.1",
|
||||
"downshift": "^6.1.7",
|
||||
"lodash": "^4.17.21",
|
||||
|
|
@ -8194,6 +8227,14 @@
|
|||
"integrity": "sha1-7L0W+JSbFXGDcRsb2jNPN4QBhas=",
|
||||
"dev": true
|
||||
},
|
||||
"aria-hidden": {
|
||||
"version": "1.1.3",
|
||||
"resolved": "https://registry.npmjs.org/aria-hidden/-/aria-hidden-1.1.3.tgz",
|
||||
"integrity": "sha512-RhVWFtKH5BiGMycI72q2RAFMLQi8JP9bLuQXgR5a8Znp7P5KOIADSJeyfI8PCVxLEp067B2HbP5JIiI/PXIZeA==",
|
||||
"requires": {
|
||||
"tslib": "^1.0.0"
|
||||
}
|
||||
},
|
||||
"arr-diff": {
|
||||
"version": "4.0.0",
|
||||
"resolved": "https://registry.npmjs.org/arr-diff/-/arr-diff-4.0.0.tgz",
|
||||
|
|
@ -30914,6 +30955,11 @@
|
|||
"resolved": "https://registry.npmjs.org/use-force-update/-/use-force-update-1.0.7.tgz",
|
||||
"integrity": "sha512-k5dppYhO+I5X/cd7ildbrzeMZJkWwdAh5adaIk0qKN2euh7J0h2GBGBcB4QZ385eyHHnp7LIygvebdRx3XKdwA=="
|
||||
},
|
||||
"use-isomorphic-layout-effect": {
|
||||
"version": "1.1.2",
|
||||
"resolved": "https://registry.npmjs.org/use-isomorphic-layout-effect/-/use-isomorphic-layout-effect-1.1.2.tgz",
|
||||
"integrity": "sha512-49L8yCO3iGT/ZF9QttjwLF/ZD9Iwto5LnH5LmEdk/6cFmXddqi2ulF0edxTwjj+7mqvpVVGQWvbXZdn32wRSHA=="
|
||||
},
|
||||
"use-react-router": {
|
||||
"version": "1.0.7",
|
||||
"resolved": "https://registry.npmjs.org/use-react-router/-/use-react-router-1.0.7.tgz",
|
||||
|
|
|
|||
|
|
@ -29,7 +29,7 @@
|
|||
"@material-ui/lab": "^4.0.0-alpha.58",
|
||||
"@material-ui/styles": "^4.11.4",
|
||||
"@reach/auto-id": "^0.16.0",
|
||||
"@saleor/macaw-ui": "^0.5.2",
|
||||
"@saleor/macaw-ui": "^0.6.1",
|
||||
"@saleor/sdk": "^0.4.4",
|
||||
"@sentry/react": "^6.0.0",
|
||||
"@types/faker": "^5.1.6",
|
||||
|
|
|
|||
|
|
@ -6,6 +6,7 @@ import {
|
|||
tabPageProps
|
||||
} from "@saleor/fixtures";
|
||||
import Decorator from "@saleor/storybook/Decorator";
|
||||
import { PaginatorContextDecorator } from "@saleor/storybook/PaginatorContextDecorator";
|
||||
import { storiesOf } from "@storybook/react";
|
||||
import React from "react";
|
||||
|
||||
|
|
@ -30,13 +31,12 @@ const props: AppsListPageProps = {
|
|||
onAppInProgressRemove: () => undefined,
|
||||
onAppInstallRetry: () => undefined,
|
||||
onCustomAppRemove: () => undefined,
|
||||
onInstalledAppRemove: () => undefined,
|
||||
onNextPage: () => undefined,
|
||||
onPreviousPage: () => undefined
|
||||
onInstalledAppRemove: () => undefined
|
||||
};
|
||||
|
||||
storiesOf("Views / Apps / Apps list", module)
|
||||
.addDecorator(Decorator)
|
||||
.addDecorator(PaginatorContextDecorator)
|
||||
.add("default", () => <AppsListPage {...props} />)
|
||||
.add("loading", () => (
|
||||
<AppsListPage
|
||||
|
|
|
|||
|
|
@ -11,7 +11,7 @@ import { Button } from "@saleor/components/Button";
|
|||
import CardTitle from "@saleor/components/CardTitle";
|
||||
import { IconButton } from "@saleor/components/IconButton";
|
||||
import { TableButtonWrapper } from "@saleor/components/TableButtonWrapper/TableButtonWrapper";
|
||||
import TablePagination from "@saleor/components/TablePagination";
|
||||
import { TablePaginationWithContext } from "@saleor/components/TablePagination";
|
||||
import TableRowLink from "@saleor/components/TableRowLink";
|
||||
import { AppsListQuery } from "@saleor/graphql";
|
||||
import { DeleteIcon, ResponsiveTable } from "@saleor/macaw-ui";
|
||||
|
|
@ -36,10 +36,7 @@ const InstalledApps: React.FC<InstalledAppsProps> = ({
|
|||
onRemove,
|
||||
settings,
|
||||
disabled,
|
||||
onNextPage,
|
||||
onPreviousPage,
|
||||
onUpdateListSettings,
|
||||
pageInfo,
|
||||
...props
|
||||
}) => {
|
||||
const intl = useIntl();
|
||||
|
|
@ -57,16 +54,10 @@ const InstalledApps: React.FC<InstalledAppsProps> = ({
|
|||
<ResponsiveTable>
|
||||
<TableFooter>
|
||||
<TableRow>
|
||||
<TablePagination
|
||||
<TablePaginationWithContext
|
||||
colSpan={numberOfColumns}
|
||||
settings={settings}
|
||||
hasNextPage={pageInfo && !disabled ? pageInfo.hasNextPage : false}
|
||||
onNextPage={onNextPage}
|
||||
onUpdateListSettings={onUpdateListSettings}
|
||||
hasPreviousPage={
|
||||
pageInfo && !disabled ? pageInfo.hasPreviousPage : false
|
||||
}
|
||||
onPreviousPage={onPreviousPage}
|
||||
/>
|
||||
</TableRow>
|
||||
</TableFooter>
|
||||
|
|
|
|||
|
|
@ -19,7 +19,8 @@ import useLocalStorage from "@saleor/hooks/useLocalStorage";
|
|||
import useNavigator from "@saleor/hooks/useNavigator";
|
||||
import useNotifier from "@saleor/hooks/useNotifier";
|
||||
import usePaginator, {
|
||||
createPaginationState
|
||||
createPaginationState,
|
||||
PaginatorContext
|
||||
} from "@saleor/hooks/usePaginator";
|
||||
import { ListViews } from "@saleor/types";
|
||||
import getAppErrorMessage from "@saleor/utils/errors/app";
|
||||
|
|
@ -62,7 +63,6 @@ export const AppsList: React.FC<AppsListProps> = ({ params }) => {
|
|||
const intl = useIntl();
|
||||
const navigate = useNavigator();
|
||||
const { updateListSettings, settings } = useListSettings(ListViews.APPS_LIST);
|
||||
const paginate = usePaginator();
|
||||
const paginationState = createPaginationState(settings?.rowNumber, params);
|
||||
const queryVariables = {
|
||||
sort: {
|
||||
|
|
@ -95,11 +95,11 @@ export const AppsList: React.FC<AppsListProps> = ({ params }) => {
|
|||
}
|
||||
});
|
||||
|
||||
const { loadNextPage, loadPreviousPage, pageInfo } = paginate(
|
||||
data?.apps?.pageInfo,
|
||||
const paginationValues = usePaginator({
|
||||
pageInfo: data?.apps?.pageInfo,
|
||||
paginationState,
|
||||
params
|
||||
);
|
||||
queryString: params
|
||||
});
|
||||
|
||||
const {
|
||||
data: customAppsData,
|
||||
|
|
@ -278,7 +278,7 @@ export const AppsList: React.FC<AppsListProps> = ({ params }) => {
|
|||
const customApps = customAppsData?.apps?.edges;
|
||||
|
||||
return (
|
||||
<>
|
||||
<PaginatorContext.Provider value={paginationValues}>
|
||||
<AppDeleteDialog
|
||||
confirmButtonState={deleteAppOpts.status}
|
||||
name={getCurrentAppName(
|
||||
|
|
@ -307,9 +307,6 @@ export const AppsList: React.FC<AppsListProps> = ({ params }) => {
|
|||
loadingAppsInProgress={loadingAppsInProgress}
|
||||
disabled={loading || customAppsLoading}
|
||||
settings={settings}
|
||||
pageInfo={pageInfo}
|
||||
onNextPage={loadNextPage}
|
||||
onPreviousPage={loadPreviousPage}
|
||||
onUpdateListSettings={updateListSettings}
|
||||
onAppInstallRetry={onAppInstallRetry}
|
||||
getCustomAppHref={id => customAppUrl(id)}
|
||||
|
|
@ -329,7 +326,7 @@ export const AppsList: React.FC<AppsListProps> = ({ params }) => {
|
|||
})
|
||||
}
|
||||
/>
|
||||
</>
|
||||
</PaginatorContext.Provider>
|
||||
);
|
||||
};
|
||||
|
||||
|
|
|
|||
|
|
@ -8,7 +8,7 @@ import ResponsiveTable from "@saleor/components/ResponsiveTable";
|
|||
import Skeleton from "@saleor/components/Skeleton";
|
||||
import TableCellHeader from "@saleor/components/TableCellHeader";
|
||||
import TableHead from "@saleor/components/TableHead";
|
||||
import TablePagination from "@saleor/components/TablePagination";
|
||||
import { TablePaginationWithContext } from "@saleor/components/TablePagination";
|
||||
import TableRowLink from "@saleor/components/TableRowLink";
|
||||
import { AttributeFragment } from "@saleor/graphql";
|
||||
import { translateBoolean } from "@saleor/intl";
|
||||
|
|
@ -71,9 +71,6 @@ const AttributeList: React.FC<AttributeListProps> = ({
|
|||
attributes,
|
||||
disabled,
|
||||
isChecked,
|
||||
onNextPage,
|
||||
onPreviousPage,
|
||||
pageInfo,
|
||||
selected,
|
||||
sort,
|
||||
toggle,
|
||||
|
|
@ -172,15 +169,7 @@ const AttributeList: React.FC<AttributeListProps> = ({
|
|||
</TableHead>
|
||||
<TableFooter>
|
||||
<TableRow>
|
||||
<TablePagination
|
||||
colSpan={numberOfColumns}
|
||||
hasNextPage={pageInfo && !disabled ? pageInfo.hasNextPage : false}
|
||||
onNextPage={onNextPage}
|
||||
hasPreviousPage={
|
||||
pageInfo && !disabled ? pageInfo.hasPreviousPage : false
|
||||
}
|
||||
onPreviousPage={onPreviousPage}
|
||||
/>
|
||||
<TablePaginationWithContext colSpan={numberOfColumns} />
|
||||
</TableRow>
|
||||
</TableFooter>
|
||||
<TableBody>
|
||||
|
|
|
|||
|
|
@ -20,12 +20,18 @@ import {
|
|||
} from "@saleor/graphql";
|
||||
import { DeleteIcon, IconButton, makeStyles } from "@saleor/macaw-ui";
|
||||
import { renderCollection, stopPropagation } from "@saleor/misc";
|
||||
import { ListProps, RelayToFlat, ReorderAction } from "@saleor/types";
|
||||
import {
|
||||
ListProps,
|
||||
PaginateListProps,
|
||||
RelayToFlat,
|
||||
ReorderAction
|
||||
} from "@saleor/types";
|
||||
import React from "react";
|
||||
import { FormattedMessage, useIntl } from "react-intl";
|
||||
|
||||
export interface AttributeValuesProps
|
||||
extends Pick<ListProps, Exclude<keyof ListProps, "getRowHref">> {
|
||||
extends Pick<ListProps, Exclude<keyof ListProps, "getRowHref">>,
|
||||
PaginateListProps {
|
||||
disabled: boolean;
|
||||
values: RelayToFlat<AttributeValueListFragment>;
|
||||
onValueAdd: () => void;
|
||||
|
|
|
|||
|
|
@ -18,7 +18,8 @@ import {
|
|||
import useNavigator from "@saleor/hooks/useNavigator";
|
||||
import useNotifier from "@saleor/hooks/useNotifier";
|
||||
import usePaginator, {
|
||||
createPaginationState
|
||||
createPaginationState,
|
||||
PaginatorContext
|
||||
} from "@saleor/hooks/usePaginator";
|
||||
import { DeleteIcon, IconButton } from "@saleor/macaw-ui";
|
||||
import createDialogActionHandlers from "@saleor/utils/handlers/dialogActionHandlers";
|
||||
|
|
@ -48,7 +49,6 @@ interface AttributeListProps {
|
|||
|
||||
const AttributeList: React.FC<AttributeListProps> = ({ params }) => {
|
||||
const navigate = useNavigator();
|
||||
const paginate = usePaginator();
|
||||
const notify = useNotifier();
|
||||
const { isSelected, listElements, reset, toggle, toggleAll } = useBulkActions(
|
||||
params.ids
|
||||
|
|
@ -131,16 +131,16 @@ const AttributeList: React.FC<AttributeListProps> = ({ params }) => {
|
|||
handleTabChange(tabs.length + 1);
|
||||
};
|
||||
|
||||
const { loadNextPage, loadPreviousPage, pageInfo } = paginate(
|
||||
maybe(() => data.attributes.pageInfo),
|
||||
const paginationValues = usePaginator({
|
||||
pageInfo: maybe(() => data.attributes.pageInfo),
|
||||
paginationState,
|
||||
params
|
||||
);
|
||||
queryString: params
|
||||
});
|
||||
|
||||
const handleSort = createSortHandler(navigate, attributeListUrl, params);
|
||||
|
||||
return (
|
||||
<>
|
||||
<PaginatorContext.Provider value={paginationValues}>
|
||||
<AttributeListPage
|
||||
attributes={mapEdgesToItems(data?.attributes)}
|
||||
currentTab={currentTab}
|
||||
|
|
@ -150,14 +150,11 @@ const AttributeList: React.FC<AttributeListProps> = ({ params }) => {
|
|||
isChecked={isSelected}
|
||||
onAll={resetFilters}
|
||||
onFilterChange={changeFilters}
|
||||
onNextPage={loadNextPage}
|
||||
onPreviousPage={loadPreviousPage}
|
||||
onSearchChange={handleSearchChange}
|
||||
onSort={handleSort}
|
||||
onTabChange={handleTabChange}
|
||||
onTabDelete={() => openModal("delete-search")}
|
||||
onTabSave={() => openModal("save-search")}
|
||||
pageInfo={pageInfo}
|
||||
selected={listElements.length}
|
||||
sort={getSortParams(params)}
|
||||
tabs={tabs.map(tab => tab.name)}
|
||||
|
|
@ -199,7 +196,7 @@ const AttributeList: React.FC<AttributeListProps> = ({ params }) => {
|
|||
onSubmit={handleTabDelete}
|
||||
tabName={maybe(() => tabs[currentTab - 1].name, "...")}
|
||||
/>
|
||||
</>
|
||||
</PaginatorContext.Provider>
|
||||
);
|
||||
};
|
||||
AttributeList.displayName = "AttributeList";
|
||||
|
|
|
|||
|
|
@ -5,7 +5,7 @@ import ResponsiveTable from "@saleor/components/ResponsiveTable";
|
|||
import Skeleton from "@saleor/components/Skeleton";
|
||||
import TableCellHeader from "@saleor/components/TableCellHeader";
|
||||
import TableHead from "@saleor/components/TableHead";
|
||||
import TablePagination from "@saleor/components/TablePagination";
|
||||
import { TablePaginationWithContext } from "@saleor/components/TablePagination";
|
||||
import TableRowLink from "@saleor/components/TableRowLink";
|
||||
import { CategoryFragment } from "@saleor/graphql";
|
||||
import { makeStyles } from "@saleor/macaw-ui";
|
||||
|
|
@ -58,15 +58,12 @@ const CategoryList: React.FC<CategoryListProps> = props => {
|
|||
disabled,
|
||||
settings,
|
||||
sort,
|
||||
pageInfo,
|
||||
isChecked,
|
||||
isRoot,
|
||||
selected,
|
||||
toggle,
|
||||
toggleAll,
|
||||
toolbar,
|
||||
onNextPage,
|
||||
onPreviousPage,
|
||||
onUpdateListSettings,
|
||||
onSort
|
||||
} = props;
|
||||
|
|
@ -136,16 +133,10 @@ const CategoryList: React.FC<CategoryListProps> = props => {
|
|||
</TableHead>
|
||||
<TableFooter>
|
||||
<TableRow>
|
||||
<TablePagination
|
||||
<TablePaginationWithContext
|
||||
colSpan={numberOfColumns}
|
||||
settings={settings}
|
||||
hasNextPage={pageInfo && !disabled ? pageInfo.hasNextPage : false}
|
||||
onNextPage={onNextPage}
|
||||
onUpdateListSettings={onUpdateListSettings}
|
||||
hasPreviousPage={
|
||||
pageInfo && !disabled ? pageInfo.hasPreviousPage : false
|
||||
}
|
||||
onPreviousPage={onPreviousPage}
|
||||
/>
|
||||
</TableRow>
|
||||
</TableFooter>
|
||||
|
|
|
|||
|
|
@ -36,7 +36,6 @@ export const CategoryListPage: React.FC<CategoryTableProps> = ({
|
|||
disabled,
|
||||
initialSearch,
|
||||
isChecked,
|
||||
pageInfo,
|
||||
selected,
|
||||
settings,
|
||||
tabs,
|
||||
|
|
@ -44,8 +43,6 @@ export const CategoryListPage: React.FC<CategoryTableProps> = ({
|
|||
toggleAll,
|
||||
toolbar,
|
||||
onAll,
|
||||
onNextPage,
|
||||
onPreviousPage,
|
||||
onSearchChange,
|
||||
onTabChange,
|
||||
onTabDelete,
|
||||
|
|
@ -95,14 +92,11 @@ export const CategoryListPage: React.FC<CategoryTableProps> = ({
|
|||
disabled={disabled}
|
||||
isChecked={isChecked}
|
||||
isRoot={true}
|
||||
pageInfo={pageInfo}
|
||||
selected={selected}
|
||||
settings={settings}
|
||||
toggle={toggle}
|
||||
toggleAll={toggleAll}
|
||||
toolbar={toolbar}
|
||||
onNextPage={onNextPage}
|
||||
onPreviousPage={onPreviousPage}
|
||||
onUpdateListSettings={onUpdateListSettings}
|
||||
{...listProps}
|
||||
/>
|
||||
|
|
|
|||
|
|
@ -5,7 +5,7 @@ import Skeleton from "@saleor/components/Skeleton";
|
|||
import TableCellAvatar from "@saleor/components/TableCellAvatar";
|
||||
import { AVATAR_MARGIN } from "@saleor/components/TableCellAvatar/Avatar";
|
||||
import TableHead from "@saleor/components/TableHead";
|
||||
import TablePagination from "@saleor/components/TablePagination";
|
||||
import { TablePaginationWithContext } from "@saleor/components/TablePagination";
|
||||
import TableRowLink from "@saleor/components/TableRowLink";
|
||||
import { CategoryDetailsQuery } from "@saleor/graphql";
|
||||
import { makeStyles } from "@saleor/macaw-ui";
|
||||
|
|
@ -59,14 +59,11 @@ export const CategoryProductList: React.FC<CategoryProductListProps> = props =>
|
|||
const {
|
||||
disabled,
|
||||
isChecked,
|
||||
pageInfo,
|
||||
products,
|
||||
selected,
|
||||
toggle,
|
||||
toggleAll,
|
||||
toolbar,
|
||||
onNextPage,
|
||||
onPreviousPage
|
||||
toolbar
|
||||
} = props;
|
||||
|
||||
const classes = useStyles(props);
|
||||
|
|
@ -100,15 +97,7 @@ export const CategoryProductList: React.FC<CategoryProductListProps> = props =>
|
|||
</TableHead>
|
||||
<TableFooter>
|
||||
<TableRow>
|
||||
<TablePagination
|
||||
colSpan={numberOfColumns}
|
||||
hasNextPage={pageInfo && !disabled ? pageInfo.hasNextPage : false}
|
||||
onNextPage={onNextPage}
|
||||
hasPreviousPage={
|
||||
pageInfo && !disabled ? pageInfo.hasPreviousPage : false
|
||||
}
|
||||
onPreviousPage={onPreviousPage}
|
||||
/>
|
||||
<TablePaginationWithContext colSpan={numberOfColumns} />
|
||||
</TableRow>
|
||||
</TableFooter>
|
||||
<TableBody>
|
||||
|
|
|
|||
|
|
@ -21,9 +21,6 @@ interface CategoryProductsProps extends PageListProps, ListActions {
|
|||
export const CategoryProducts: React.FC<CategoryProductsProps> = ({
|
||||
products,
|
||||
disabled,
|
||||
pageInfo,
|
||||
onNextPage,
|
||||
onPreviousPage,
|
||||
categoryId,
|
||||
categoryName,
|
||||
isChecked,
|
||||
|
|
@ -79,9 +76,6 @@ export const CategoryProducts: React.FC<CategoryProductsProps> = ({
|
|||
<CategoryProductList
|
||||
products={products}
|
||||
disabled={disabled}
|
||||
pageInfo={pageInfo}
|
||||
onNextPage={onNextPage}
|
||||
onPreviousPage={onPreviousPage}
|
||||
selected={selected}
|
||||
isChecked={isChecked}
|
||||
toggle={toggle}
|
||||
|
|
|
|||
|
|
@ -45,17 +45,11 @@ export interface CategoryUpdatePageProps
|
|||
category: CategoryDetailsQuery["category"];
|
||||
products: RelayToFlat<CategoryDetailsQuery["category"]["products"]>;
|
||||
subcategories: RelayToFlat<CategoryDetailsQuery["category"]["children"]>;
|
||||
pageInfo: {
|
||||
hasNextPage: boolean;
|
||||
hasPreviousPage: boolean;
|
||||
};
|
||||
saveButtonBarState: ConfirmButtonTransitionState;
|
||||
addProductHref: string;
|
||||
onImageDelete: () => void;
|
||||
onSubmit: (data: CategoryUpdateData) => SubmitPromise;
|
||||
onImageUpload(file: File);
|
||||
onNextPage();
|
||||
onPreviousPage();
|
||||
onDelete();
|
||||
}
|
||||
|
||||
|
|
@ -69,13 +63,10 @@ export const CategoryUpdatePage: React.FC<CategoryUpdatePageProps> = ({
|
|||
category,
|
||||
disabled,
|
||||
errors,
|
||||
pageInfo,
|
||||
products,
|
||||
saveButtonBarState,
|
||||
subcategories,
|
||||
onDelete,
|
||||
onNextPage,
|
||||
onPreviousPage,
|
||||
onSubmit,
|
||||
onImageDelete,
|
||||
onImageUpload,
|
||||
|
|
@ -191,14 +182,11 @@ export const CategoryUpdatePage: React.FC<CategoryUpdatePageProps> = ({
|
|||
disabled={disabled}
|
||||
isChecked={isChecked}
|
||||
isRoot={false}
|
||||
pageInfo={pageInfo}
|
||||
selected={selected}
|
||||
sort={undefined}
|
||||
toggle={toggle}
|
||||
toggleAll={toggleAll}
|
||||
toolbar={subcategoryListToolbar}
|
||||
onNextPage={onNextPage}
|
||||
onPreviousPage={onPreviousPage}
|
||||
onSort={() => undefined}
|
||||
/>
|
||||
</Card>
|
||||
|
|
@ -209,9 +197,6 @@ export const CategoryUpdatePage: React.FC<CategoryUpdatePageProps> = ({
|
|||
categoryName={category?.name}
|
||||
products={products}
|
||||
disabled={disabled}
|
||||
pageInfo={pageInfo}
|
||||
onNextPage={onNextPage}
|
||||
onPreviousPage={onPreviousPage}
|
||||
toggle={toggle}
|
||||
toggleAll={toggleAll}
|
||||
selected={selected}
|
||||
|
|
|
|||
|
|
@ -21,6 +21,7 @@ import useLocalPaginator, {
|
|||
} from "@saleor/hooks/useLocalPaginator";
|
||||
import useNavigator from "@saleor/hooks/useNavigator";
|
||||
import useNotifier from "@saleor/hooks/useNotifier";
|
||||
import { PaginatorContext } from "@saleor/hooks/usePaginator";
|
||||
import { commonMessages, errorMessages } from "@saleor/intl";
|
||||
import { DeleteIcon, IconButton } from "@saleor/macaw-ui";
|
||||
import createDialogActionHandlers from "@saleor/utils/handlers/dialogActionHandlers";
|
||||
|
|
@ -174,7 +175,7 @@ export const CategoryDetails: React.FC<CategoryDetailsProps> = ({
|
|||
CategoryUrlQueryParams
|
||||
>(navigate, params => categoryUrl(id, params), params);
|
||||
|
||||
const { loadNextPage, loadPreviousPage, pageInfo } = paginate(
|
||||
const { pageInfo, ...paginationFunctions } = paginate(
|
||||
activeTab === CategoryPageTab.categories
|
||||
? maybe(() => data.category.children.pageInfo)
|
||||
: maybe(() => data.category.products.pageInfo),
|
||||
|
|
@ -208,7 +209,7 @@ export const CategoryDetails: React.FC<CategoryDetailsProps> = ({
|
|||
);
|
||||
|
||||
return (
|
||||
<>
|
||||
<PaginatorContext.Provider value={{ ...pageInfo, ...paginationFunctions }}>
|
||||
<WindowTitle title={maybe(() => data.category.name)} />
|
||||
<CategoryUpdatePage
|
||||
categoryId={id}
|
||||
|
|
@ -239,9 +240,6 @@ export const CategoryDetails: React.FC<CategoryDetailsProps> = ({
|
|||
}
|
||||
})
|
||||
}
|
||||
onNextPage={loadNextPage}
|
||||
onPreviousPage={loadPreviousPage}
|
||||
pageInfo={pageInfo}
|
||||
onSubmit={handleSubmit}
|
||||
products={mapEdgesToItems(data?.category?.products)}
|
||||
saveButtonBarState={updateResult.status}
|
||||
|
|
@ -371,7 +369,7 @@ export const CategoryDetails: React.FC<CategoryDetailsProps> = ({
|
|||
/>
|
||||
</DialogContentText>
|
||||
</ActionDialog>
|
||||
</>
|
||||
</PaginatorContext.Provider>
|
||||
);
|
||||
};
|
||||
export default CategoryDetails;
|
||||
|
|
|
|||
|
|
@ -14,7 +14,8 @@ import useListSettings from "@saleor/hooks/useListSettings";
|
|||
import useNavigator from "@saleor/hooks/useNavigator";
|
||||
import { usePaginationReset } from "@saleor/hooks/usePaginationReset";
|
||||
import usePaginator, {
|
||||
createPaginationState
|
||||
createPaginationState,
|
||||
PaginatorContext
|
||||
} from "@saleor/hooks/usePaginator";
|
||||
import { DeleteIcon, IconButton } from "@saleor/macaw-ui";
|
||||
import { maybe } from "@saleor/misc";
|
||||
|
|
@ -49,7 +50,6 @@ interface CategoryListProps {
|
|||
|
||||
export const CategoryList: React.FC<CategoryListProps> = ({ params }) => {
|
||||
const navigate = useNavigator();
|
||||
const paginate = usePaginator();
|
||||
|
||||
const { isSelected, listElements, toggle, toggleAll, reset } = useBulkActions(
|
||||
params.ids
|
||||
|
|
@ -117,11 +117,11 @@ export const CategoryList: React.FC<CategoryListProps> = ({ params }) => {
|
|||
handleTabChange(tabs.length + 1);
|
||||
};
|
||||
|
||||
const { loadNextPage, loadPreviousPage, pageInfo } = paginate(
|
||||
maybe(() => data.categories.pageInfo),
|
||||
const paginationValues = usePaginator({
|
||||
pageInfo: maybe(() => data.categories.pageInfo),
|
||||
paginationState,
|
||||
params
|
||||
);
|
||||
queryString: params
|
||||
});
|
||||
|
||||
const handleCategoryBulkDelete = (data: CategoryBulkDeleteMutation) => {
|
||||
if (data.categoryBulkDelete.errors.length === 0) {
|
||||
|
|
@ -141,7 +141,7 @@ export const CategoryList: React.FC<CategoryListProps> = ({ params }) => {
|
|||
const handleSort = createSortHandler(navigate, categoryListUrl, params);
|
||||
|
||||
return (
|
||||
<>
|
||||
<PaginatorContext.Provider value={paginationValues}>
|
||||
<CategoryListPage
|
||||
categories={mapEdgesToItems(data?.categories)}
|
||||
currentTab={currentTab}
|
||||
|
|
@ -156,10 +156,7 @@ export const CategoryList: React.FC<CategoryListProps> = ({ params }) => {
|
|||
sort={getSortParams(params)}
|
||||
onSort={handleSort}
|
||||
disabled={loading}
|
||||
onNextPage={loadNextPage}
|
||||
onPreviousPage={loadPreviousPage}
|
||||
onUpdateListSettings={updateListSettings}
|
||||
pageInfo={pageInfo}
|
||||
isChecked={isSelected}
|
||||
selected={listElements.length}
|
||||
toggle={toggle}
|
||||
|
|
@ -235,7 +232,7 @@ export const CategoryList: React.FC<CategoryListProps> = ({ params }) => {
|
|||
onSubmit={handleTabDelete}
|
||||
tabName={maybe(() => tabs[currentTab - 1].name, "...")}
|
||||
/>
|
||||
</>
|
||||
</PaginatorContext.Provider>
|
||||
);
|
||||
};
|
||||
export default CategoryList;
|
||||
|
|
|
|||
|
|
@ -14,7 +14,7 @@ import ResponsiveTable from "@saleor/components/ResponsiveTable";
|
|||
import Skeleton from "@saleor/components/Skeleton";
|
||||
import TableCellHeader from "@saleor/components/TableCellHeader";
|
||||
import TableHead from "@saleor/components/TableHead";
|
||||
import TablePagination from "@saleor/components/TablePagination";
|
||||
import { TablePaginationWithContext } from "@saleor/components/TablePagination";
|
||||
import TableRowLink from "@saleor/components/TableRowLink";
|
||||
import TooltipTableCellHeader from "@saleor/components/TooltipTableCellHeader";
|
||||
import { commonTooltipMessages } from "@saleor/components/TooltipTableCellHeader/messages";
|
||||
|
|
@ -73,11 +73,8 @@ const CollectionList: React.FC<CollectionListProps> = props => {
|
|||
disabled,
|
||||
settings,
|
||||
sort,
|
||||
onNextPage,
|
||||
onPreviousPage,
|
||||
onUpdateListSettings,
|
||||
onSort,
|
||||
pageInfo,
|
||||
isChecked,
|
||||
selected,
|
||||
selectedChannelId,
|
||||
|
|
@ -150,16 +147,10 @@ const CollectionList: React.FC<CollectionListProps> = props => {
|
|||
</TableHead>
|
||||
<TableFooter>
|
||||
<TableRow>
|
||||
<TablePagination
|
||||
<TablePaginationWithContext
|
||||
colSpan={numberOfColumns}
|
||||
settings={settings}
|
||||
hasNextPage={pageInfo && !disabled ? pageInfo.hasNextPage : false}
|
||||
onNextPage={onNextPage}
|
||||
onUpdateListSettings={onUpdateListSettings}
|
||||
hasPreviousPage={
|
||||
pageInfo && !disabled ? pageInfo.hasPreviousPage : false
|
||||
}
|
||||
onPreviousPage={onPreviousPage}
|
||||
/>
|
||||
</TableRow>
|
||||
</TableFooter>
|
||||
|
|
|
|||
|
|
@ -15,7 +15,7 @@ import { TableButtonWrapper } from "@saleor/components/TableButtonWrapper/TableB
|
|||
import TableCellAvatar from "@saleor/components/TableCellAvatar";
|
||||
import { AVATAR_MARGIN } from "@saleor/components/TableCellAvatar/Avatar";
|
||||
import TableHead from "@saleor/components/TableHead";
|
||||
import TablePagination from "@saleor/components/TablePagination";
|
||||
import { TablePaginationWithContext } from "@saleor/components/TablePagination";
|
||||
import TableRowLink from "@saleor/components/TableRowLink";
|
||||
import { CollectionDetailsQuery } from "@saleor/graphql";
|
||||
import { DeleteIcon, IconButton, makeStyles } from "@saleor/macaw-ui";
|
||||
|
|
@ -67,10 +67,7 @@ const CollectionProducts: React.FC<CollectionProductsProps> = props => {
|
|||
collection,
|
||||
disabled,
|
||||
onAdd,
|
||||
onNextPage,
|
||||
onPreviousPage,
|
||||
onProductUnassign,
|
||||
pageInfo,
|
||||
isChecked,
|
||||
selected,
|
||||
toggle,
|
||||
|
|
@ -154,13 +151,7 @@ const CollectionProducts: React.FC<CollectionProductsProps> = props => {
|
|||
</TableHead>
|
||||
<TableFooter>
|
||||
<TableRow>
|
||||
<TablePagination
|
||||
colSpan={numberOfColumns}
|
||||
hasNextPage={pageInfo?.hasNextPage}
|
||||
onNextPage={onNextPage}
|
||||
hasPreviousPage={pageInfo?.hasPreviousPage}
|
||||
onPreviousPage={onPreviousPage}
|
||||
/>
|
||||
<TablePaginationWithContext colSpan={numberOfColumns} />
|
||||
</TableRow>
|
||||
</TableFooter>
|
||||
<TableBody>
|
||||
|
|
|
|||
|
|
@ -31,6 +31,7 @@ import useLocalPaginator, {
|
|||
import useLocalStorage from "@saleor/hooks/useLocalStorage";
|
||||
import useNavigator from "@saleor/hooks/useNavigator";
|
||||
import useNotifier from "@saleor/hooks/useNotifier";
|
||||
import { PaginatorContext } from "@saleor/hooks/usePaginator";
|
||||
import { commonMessages, errorMessages } from "@saleor/intl";
|
||||
import useProductSearch from "@saleor/searches/useProductSearch";
|
||||
import { arrayDiff } from "@saleor/utils/arrays";
|
||||
|
|
@ -255,13 +256,13 @@ export const CollectionDetails: React.FC<CollectionDetailsProps> = ({
|
|||
updateCollectionOpts.data?.collectionUpdate.errors
|
||||
);
|
||||
|
||||
const { loadNextPage, loadPreviousPage, pageInfo } = paginate(
|
||||
const { pageInfo, ...paginationValues } = paginate(
|
||||
data?.collection?.products?.pageInfo,
|
||||
paginationState
|
||||
);
|
||||
|
||||
return (
|
||||
<>
|
||||
<PaginatorContext.Provider value={{ ...pageInfo, ...paginationValues }}>
|
||||
<WindowTitle title={data?.collection?.name} />
|
||||
{!!allChannels?.length && (
|
||||
<ChannelsAvailabilityDialog
|
||||
|
|
@ -302,9 +303,6 @@ export const CollectionDetails: React.FC<CollectionDetailsProps> = ({
|
|||
})
|
||||
}
|
||||
onSubmit={handleSubmit}
|
||||
onNextPage={loadNextPage}
|
||||
onPreviousPage={loadPreviousPage}
|
||||
pageInfo={pageInfo}
|
||||
onProductUnassign={(productId, event) => {
|
||||
event.stopPropagation();
|
||||
unassignProduct({
|
||||
|
|
@ -448,7 +446,7 @@ export const CollectionDetails: React.FC<CollectionDetailsProps> = ({
|
|||
/>
|
||||
</DialogContentText>
|
||||
</ActionDialog>
|
||||
</>
|
||||
</PaginatorContext.Provider>
|
||||
);
|
||||
};
|
||||
export default CollectionDetails;
|
||||
|
|
|
|||
|
|
@ -15,7 +15,8 @@ import useNavigator from "@saleor/hooks/useNavigator";
|
|||
import useNotifier from "@saleor/hooks/useNotifier";
|
||||
import { usePaginationReset } from "@saleor/hooks/usePaginationReset";
|
||||
import usePaginator, {
|
||||
createPaginationState
|
||||
createPaginationState,
|
||||
PaginatorContext
|
||||
} from "@saleor/hooks/usePaginator";
|
||||
import { commonMessages } from "@saleor/intl";
|
||||
import { DeleteIcon, IconButton } from "@saleor/macaw-ui";
|
||||
|
|
@ -55,7 +56,6 @@ export const CollectionList: React.FC<CollectionListProps> = ({ params }) => {
|
|||
const navigate = useNavigator();
|
||||
const intl = useIntl();
|
||||
const notify = useNotifier();
|
||||
const paginate = usePaginator();
|
||||
const { isSelected, listElements, reset, toggle, toggleAll } = useBulkActions(
|
||||
params.ids
|
||||
);
|
||||
|
|
@ -159,16 +159,16 @@ export const CollectionList: React.FC<CollectionListProps> = ({ params }) => {
|
|||
handleTabChange(tabs.length + 1);
|
||||
};
|
||||
|
||||
const { loadNextPage, loadPreviousPage, pageInfo } = paginate(
|
||||
maybe(() => data.collections.pageInfo),
|
||||
const paginationValues = usePaginator({
|
||||
pageInfo: maybe(() => data.collections.pageInfo),
|
||||
paginationState,
|
||||
params
|
||||
);
|
||||
queryString: params
|
||||
});
|
||||
|
||||
const handleSort = createSortHandler(navigate, collectionListUrl, params);
|
||||
|
||||
return (
|
||||
<>
|
||||
<PaginatorContext.Provider value={paginationValues}>
|
||||
<CollectionListPage
|
||||
currentTab={currentTab}
|
||||
initialSearch={params.query || ""}
|
||||
|
|
@ -181,11 +181,8 @@ export const CollectionList: React.FC<CollectionListProps> = ({ params }) => {
|
|||
disabled={loading}
|
||||
collections={mapEdgesToItems(data?.collections)}
|
||||
settings={settings}
|
||||
onNextPage={loadNextPage}
|
||||
onPreviousPage={loadPreviousPage}
|
||||
onSort={handleSort}
|
||||
onUpdateListSettings={updateListSettings}
|
||||
pageInfo={pageInfo}
|
||||
sort={getSortParams(params)}
|
||||
toolbar={
|
||||
<IconButton
|
||||
|
|
@ -251,7 +248,7 @@ export const CollectionList: React.FC<CollectionListProps> = ({ params }) => {
|
|||
onSubmit={handleTabDelete}
|
||||
tabName={maybe(() => tabs[currentTab - 1].name, "...")}
|
||||
/>
|
||||
</>
|
||||
</PaginatorContext.Provider>
|
||||
);
|
||||
};
|
||||
export default CollectionList;
|
||||
|
|
|
|||
|
|
@ -1,5 +1,6 @@
|
|||
import Attributes, { AttributesProps } from "@saleor/components/Attributes";
|
||||
import { fetchMoreProps } from "@saleor/fixtures";
|
||||
import { PaginatorContextDecorator } from "@saleor/storybook/PaginatorContextDecorator";
|
||||
import { storiesOf } from "@storybook/react";
|
||||
import React from "react";
|
||||
|
||||
|
|
@ -31,6 +32,7 @@ const props: AttributesProps = {
|
|||
|
||||
storiesOf("Attributes / Attributes", module)
|
||||
.addDecorator(Decorator)
|
||||
.addDecorator(PaginatorContextDecorator)
|
||||
.add("default", () => <Attributes {...props} />)
|
||||
.add("selected", () => (
|
||||
<Attributes {...props} attributes={ATTRIBUTES_SELECTED} />
|
||||
|
|
|
|||
|
|
@ -5,6 +5,7 @@ import {
|
|||
} from "@saleor/macaw-ui";
|
||||
import React from "react";
|
||||
import { defineMessages, useIntl } from "react-intl";
|
||||
import { Link, LinkProps } from "react-router-dom";
|
||||
|
||||
import { ListSettings } from "../../types";
|
||||
|
||||
|
|
@ -22,17 +23,28 @@ const messages = defineMessages({
|
|||
});
|
||||
|
||||
export interface PaginationProps
|
||||
extends Omit<MacawPaginationProps, "labels" | "rowNumber"> {
|
||||
extends Omit<
|
||||
MacawPaginationProps,
|
||||
"labels" | "rowNumber" | "nextIconButtonProps" | "prevIconButtonProps"
|
||||
> {
|
||||
component?: React.ElementType;
|
||||
colSpan?: number;
|
||||
settings?: ListSettings;
|
||||
onUpdateListSettings?: ListSettingsUpdate;
|
||||
prevHref?: string;
|
||||
nextHref?: string;
|
||||
disabled?: boolean;
|
||||
}
|
||||
export const TablePagination: React.FC<PaginationProps> = ({
|
||||
component,
|
||||
colSpan,
|
||||
settings,
|
||||
onUpdateListSettings,
|
||||
nextHref,
|
||||
prevHref,
|
||||
hasNextPage,
|
||||
hasPreviousPage,
|
||||
disabled,
|
||||
...rest
|
||||
}) => {
|
||||
const intl = useIntl();
|
||||
|
|
@ -40,8 +52,10 @@ export const TablePagination: React.FC<PaginationProps> = ({
|
|||
|
||||
return (
|
||||
<Wrapper colSpan={colSpan || 1000}>
|
||||
<Pagination
|
||||
<Pagination<LinkProps>
|
||||
{...rest}
|
||||
hasNextPage={hasNextPage && !disabled}
|
||||
hasPreviousPage={hasPreviousPage && !disabled}
|
||||
labels={{
|
||||
noOfRows: intl.formatMessage(messages.noOfRows)
|
||||
}}
|
||||
|
|
@ -51,6 +65,12 @@ export const TablePagination: React.FC<PaginationProps> = ({
|
|||
? value => onUpdateListSettings("rowNumber", value)
|
||||
: undefined
|
||||
}
|
||||
nextIconButtonProps={
|
||||
nextHref ? { component: Link, to: nextHref } : undefined
|
||||
}
|
||||
prevIconButtonProps={
|
||||
prevHref ? { component: Link, to: prevHref } : undefined
|
||||
}
|
||||
/>
|
||||
</Wrapper>
|
||||
);
|
||||
|
|
|
|||
|
|
@ -0,0 +1,50 @@
|
|||
import { usePaginatorContext } from "@saleor/hooks/usePaginator";
|
||||
import React from "react";
|
||||
|
||||
import TablePagination, { PaginationProps } from "./TablePagination";
|
||||
|
||||
export type TablePaginationWithContextProps = Omit<
|
||||
PaginationProps,
|
||||
| "nextHref"
|
||||
| "prevHref"
|
||||
| "hasNextPage"
|
||||
| "hasPreviousPage"
|
||||
| "onNextPage"
|
||||
| "onPreviousPage"
|
||||
>;
|
||||
export const TablePaginationWithContext = (
|
||||
props: TablePaginationWithContextProps
|
||||
) => {
|
||||
const {
|
||||
hasNextPage,
|
||||
hasPreviousPage,
|
||||
paginatorType,
|
||||
...paginationProps
|
||||
} = usePaginatorContext();
|
||||
|
||||
if (paginatorType === "click") {
|
||||
const { loadNextPage, loadPreviousPage } = paginationProps;
|
||||
|
||||
return (
|
||||
<TablePagination
|
||||
{...props}
|
||||
hasNextPage={hasNextPage}
|
||||
hasPreviousPage={hasPreviousPage}
|
||||
onNextPage={loadNextPage}
|
||||
onPreviousPage={loadPreviousPage}
|
||||
/>
|
||||
);
|
||||
}
|
||||
|
||||
const { prevPageHref, nextPageHref } = paginationProps;
|
||||
|
||||
return (
|
||||
<TablePagination
|
||||
{...props}
|
||||
hasNextPage={hasNextPage}
|
||||
hasPreviousPage={hasPreviousPage}
|
||||
prevHref={prevPageHref}
|
||||
nextHref={nextPageHref}
|
||||
/>
|
||||
);
|
||||
};
|
||||
|
|
@ -1,3 +1,4 @@
|
|||
export { default } from "./TablePagination";
|
||||
export * from "./TablePagination";
|
||||
export * from "./TablePaginationActions";
|
||||
export * from "./TablePaginationWithContext";
|
||||
|
|
|
|||
|
|
@ -8,7 +8,7 @@ import ResponsiveTable from "@saleor/components/ResponsiveTable";
|
|||
import Skeleton from "@saleor/components/Skeleton";
|
||||
import TableCellHeader from "@saleor/components/TableCellHeader";
|
||||
import TableHead from "@saleor/components/TableHead";
|
||||
import TablePagination from "@saleor/components/TablePagination";
|
||||
import { TablePaginationWithContext } from "@saleor/components/TablePagination";
|
||||
import TableRowLink from "@saleor/components/TableRowLink";
|
||||
import { CustomerListUrlSortField, customerUrl } from "@saleor/customers/urls";
|
||||
import { ListCustomersQuery, PermissionEnum } from "@saleor/graphql";
|
||||
|
|
@ -54,9 +54,6 @@ const CustomerList: React.FC<CustomerListProps> = props => {
|
|||
settings,
|
||||
disabled,
|
||||
customers,
|
||||
pageInfo,
|
||||
onNextPage,
|
||||
onPreviousPage,
|
||||
onUpdateListSettings,
|
||||
onSort,
|
||||
toolbar,
|
||||
|
|
@ -129,16 +126,10 @@ const CustomerList: React.FC<CustomerListProps> = props => {
|
|||
</TableHead>
|
||||
<TableFooter>
|
||||
<TableRow>
|
||||
<TablePagination
|
||||
<TablePaginationWithContext
|
||||
colSpan={numberOfColumns}
|
||||
settings={settings}
|
||||
hasNextPage={pageInfo && !disabled ? pageInfo.hasNextPage : false}
|
||||
onNextPage={onNextPage}
|
||||
onUpdateListSettings={onUpdateListSettings}
|
||||
hasPreviousPage={
|
||||
pageInfo && !disabled ? pageInfo.hasPreviousPage : false
|
||||
}
|
||||
onPreviousPage={onPreviousPage}
|
||||
/>
|
||||
</TableRow>
|
||||
</TableFooter>
|
||||
|
|
|
|||
|
|
@ -15,7 +15,8 @@ import useNavigator from "@saleor/hooks/useNavigator";
|
|||
import useNotifier from "@saleor/hooks/useNotifier";
|
||||
import { usePaginationReset } from "@saleor/hooks/usePaginationReset";
|
||||
import usePaginator, {
|
||||
createPaginationState
|
||||
createPaginationState,
|
||||
PaginatorContext
|
||||
} from "@saleor/hooks/usePaginator";
|
||||
import { commonMessages, sectionNames } from "@saleor/intl";
|
||||
import { DeleteIcon, IconButton } from "@saleor/macaw-ui";
|
||||
|
|
@ -54,7 +55,6 @@ interface CustomerListProps {
|
|||
export const CustomerList: React.FC<CustomerListProps> = ({ params }) => {
|
||||
const navigate = useNavigator();
|
||||
const notify = useNotifier();
|
||||
const paginate = usePaginator();
|
||||
const { isSelected, listElements, reset, toggle, toggleAll } = useBulkActions(
|
||||
params.ids
|
||||
);
|
||||
|
|
@ -122,11 +122,11 @@ export const CustomerList: React.FC<CustomerListProps> = ({ params }) => {
|
|||
handleTabChange(tabs.length + 1);
|
||||
};
|
||||
|
||||
const { loadNextPage, loadPreviousPage, pageInfo } = paginate(
|
||||
maybe(() => data.customers.pageInfo),
|
||||
const paginationValues = usePaginator({
|
||||
pageInfo: maybe(() => data.customers.pageInfo),
|
||||
paginationState,
|
||||
params
|
||||
);
|
||||
queryString: params
|
||||
});
|
||||
|
||||
const [
|
||||
bulkRemoveCustomers,
|
||||
|
|
@ -148,7 +148,7 @@ export const CustomerList: React.FC<CustomerListProps> = ({ params }) => {
|
|||
const handleSort = createSortHandler(navigate, customerListUrl, params);
|
||||
|
||||
return (
|
||||
<>
|
||||
<PaginatorContext.Provider value={paginationValues}>
|
||||
<WindowTitle title={intl.formatMessage(sectionNames.customers)} />
|
||||
<CustomerListPage
|
||||
currentTab={currentTab}
|
||||
|
|
@ -164,9 +164,6 @@ export const CustomerList: React.FC<CustomerListProps> = ({ params }) => {
|
|||
customers={mapEdgesToItems(data?.customers)}
|
||||
settings={settings}
|
||||
disabled={loading}
|
||||
pageInfo={pageInfo}
|
||||
onNextPage={loadNextPage}
|
||||
onPreviousPage={loadPreviousPage}
|
||||
onUpdateListSettings={updateListSettings}
|
||||
onSort={handleSort}
|
||||
toolbar={
|
||||
|
|
@ -230,7 +227,7 @@ export const CustomerList: React.FC<CustomerListProps> = ({ params }) => {
|
|||
onSubmit={handleTabDelete}
|
||||
tabName={maybe(() => tabs[currentTab - 1].name, "...")}
|
||||
/>
|
||||
</>
|
||||
</PaginatorContext.Provider>
|
||||
);
|
||||
};
|
||||
export default CustomerList;
|
||||
|
|
|
|||
|
|
@ -13,7 +13,7 @@ import ResponsiveTable from "@saleor/components/ResponsiveTable";
|
|||
import Skeleton from "@saleor/components/Skeleton";
|
||||
import { TableButtonWrapper } from "@saleor/components/TableButtonWrapper/TableButtonWrapper";
|
||||
import TableHead from "@saleor/components/TableHead";
|
||||
import TablePagination from "@saleor/components/TablePagination";
|
||||
import { TablePaginationWithContext } from "@saleor/components/TablePagination";
|
||||
import TableRowLink from "@saleor/components/TableRowLink";
|
||||
import { SaleDetailsFragment, VoucherDetailsFragment } from "@saleor/graphql";
|
||||
import { DeleteIcon, IconButton } from "@saleor/macaw-ui";
|
||||
|
|
@ -38,11 +38,8 @@ const DiscountCategories: React.FC<DiscountCategoriesProps> = props => {
|
|||
const {
|
||||
discount,
|
||||
disabled,
|
||||
pageInfo,
|
||||
onCategoryAssign,
|
||||
onCategoryUnassign,
|
||||
onPreviousPage,
|
||||
onNextPage,
|
||||
toolbar,
|
||||
toggle,
|
||||
toggleAll,
|
||||
|
|
@ -94,15 +91,7 @@ const DiscountCategories: React.FC<DiscountCategoriesProps> = props => {
|
|||
</TableHead>
|
||||
<TableFooter>
|
||||
<TableRow>
|
||||
<TablePagination
|
||||
colSpan={numberOfColumns}
|
||||
hasNextPage={pageInfo && !disabled ? pageInfo.hasNextPage : false}
|
||||
onNextPage={onNextPage}
|
||||
hasPreviousPage={
|
||||
pageInfo && !disabled ? pageInfo.hasPreviousPage : false
|
||||
}
|
||||
onPreviousPage={onPreviousPage}
|
||||
/>
|
||||
<TablePaginationWithContext colSpan={numberOfColumns} />
|
||||
</TableRow>
|
||||
</TableFooter>
|
||||
<TableBody>
|
||||
|
|
|
|||
|
|
@ -13,7 +13,7 @@ import ResponsiveTable from "@saleor/components/ResponsiveTable";
|
|||
import Skeleton from "@saleor/components/Skeleton";
|
||||
import { TableButtonWrapper } from "@saleor/components/TableButtonWrapper/TableButtonWrapper";
|
||||
import TableHead from "@saleor/components/TableHead";
|
||||
import TablePagination from "@saleor/components/TablePagination";
|
||||
import { TablePaginationWithContext } from "@saleor/components/TablePagination";
|
||||
import TableRowLink from "@saleor/components/TableRowLink";
|
||||
import { SaleDetailsFragment, VoucherDetailsFragment } from "@saleor/graphql";
|
||||
import { DeleteIcon, IconButton } from "@saleor/macaw-ui";
|
||||
|
|
@ -38,11 +38,8 @@ const DiscountCollections: React.FC<DiscountCollectionsProps> = props => {
|
|||
const {
|
||||
discount: sale,
|
||||
disabled,
|
||||
pageInfo,
|
||||
onCollectionAssign,
|
||||
onCollectionUnassign,
|
||||
onPreviousPage,
|
||||
onNextPage,
|
||||
isChecked,
|
||||
selected,
|
||||
toggle,
|
||||
|
|
@ -92,15 +89,7 @@ const DiscountCollections: React.FC<DiscountCollectionsProps> = props => {
|
|||
</TableHead>
|
||||
<TableFooter>
|
||||
<TableRow>
|
||||
<TablePagination
|
||||
colSpan={numberOfColumns}
|
||||
hasNextPage={pageInfo && !disabled ? pageInfo.hasNextPage : false}
|
||||
onNextPage={onNextPage}
|
||||
hasPreviousPage={
|
||||
pageInfo && !disabled ? pageInfo.hasPreviousPage : false
|
||||
}
|
||||
onPreviousPage={onPreviousPage}
|
||||
/>
|
||||
<TablePaginationWithContext colSpan={numberOfColumns} />
|
||||
</TableRow>
|
||||
</TableFooter>
|
||||
<TableBody>
|
||||
|
|
|
|||
|
|
@ -14,7 +14,7 @@ import Skeleton from "@saleor/components/Skeleton";
|
|||
import { TableButtonWrapper } from "@saleor/components/TableButtonWrapper/TableButtonWrapper";
|
||||
import TableCellAvatar from "@saleor/components/TableCellAvatar";
|
||||
import TableHead from "@saleor/components/TableHead";
|
||||
import TablePagination from "@saleor/components/TablePagination";
|
||||
import { TablePaginationWithContext } from "@saleor/components/TablePagination";
|
||||
import TableRowLink from "@saleor/components/TableRowLink";
|
||||
import { SaleDetailsFragment, VoucherDetailsFragment } from "@saleor/graphql";
|
||||
import { DeleteIcon, IconButton } from "@saleor/macaw-ui";
|
||||
|
|
@ -41,11 +41,8 @@ const DiscountProducts: React.FC<SaleProductsProps> = props => {
|
|||
const {
|
||||
products,
|
||||
disabled,
|
||||
pageInfo,
|
||||
onPreviousPage,
|
||||
onProductAssign,
|
||||
onProductUnassign,
|
||||
onNextPage,
|
||||
isChecked,
|
||||
selected,
|
||||
toggle,
|
||||
|
|
@ -101,15 +98,7 @@ const DiscountProducts: React.FC<SaleProductsProps> = props => {
|
|||
</TableHead>
|
||||
<TableFooter>
|
||||
<TableRow>
|
||||
<TablePagination
|
||||
colSpan={numberOfColumns}
|
||||
hasNextPage={pageInfo && !disabled ? pageInfo.hasNextPage : false}
|
||||
onNextPage={onNextPage}
|
||||
hasPreviousPage={
|
||||
pageInfo && !disabled ? pageInfo.hasPreviousPage : false
|
||||
}
|
||||
onPreviousPage={onPreviousPage}
|
||||
/>
|
||||
<TablePaginationWithContext colSpan={numberOfColumns} />
|
||||
</TableRow>
|
||||
</TableFooter>
|
||||
<TableBody>
|
||||
|
|
|
|||
|
|
@ -13,7 +13,7 @@ import Skeleton from "@saleor/components/Skeleton";
|
|||
import { TableButtonWrapper } from "@saleor/components/TableButtonWrapper/TableButtonWrapper";
|
||||
import TableCellAvatar from "@saleor/components/TableCellAvatar";
|
||||
import TableHead from "@saleor/components/TableHead";
|
||||
import TablePagination from "@saleor/components/TablePagination";
|
||||
import { TablePaginationWithContext } from "@saleor/components/TablePagination";
|
||||
import TableRowLink from "@saleor/components/TableRowLink";
|
||||
import { SaleDetailsFragment } from "@saleor/graphql";
|
||||
import { DeleteIcon, IconButton } from "@saleor/macaw-ui";
|
||||
|
|
@ -38,11 +38,8 @@ const DiscountVariants: React.FC<SaleVariantsProps> = props => {
|
|||
const {
|
||||
variants,
|
||||
disabled,
|
||||
pageInfo,
|
||||
onPreviousPage,
|
||||
onVariantAssign,
|
||||
onVariantUnassign,
|
||||
onNextPage,
|
||||
isChecked,
|
||||
selected,
|
||||
toggle,
|
||||
|
|
@ -100,15 +97,7 @@ const DiscountVariants: React.FC<SaleVariantsProps> = props => {
|
|||
</TableHead>
|
||||
<TableFooter>
|
||||
<TableRow>
|
||||
<TablePagination
|
||||
colSpan={numberOfColumns}
|
||||
hasNextPage={pageInfo && !disabled ? pageInfo.hasNextPage : false}
|
||||
onNextPage={onNextPage}
|
||||
hasPreviousPage={
|
||||
pageInfo && !disabled ? pageInfo.hasPreviousPage : false
|
||||
}
|
||||
onPreviousPage={onPreviousPage}
|
||||
/>
|
||||
<TablePaginationWithContext colSpan={numberOfColumns} />
|
||||
</TableRow>
|
||||
</TableFooter>
|
||||
<TableBody>
|
||||
|
|
|
|||
|
|
@ -106,7 +106,6 @@ const SaleDetailsPage: React.FC<SaleDetailsPageProps> = ({
|
|||
onSubmit,
|
||||
onTabClick,
|
||||
openChannelsModal,
|
||||
pageInfo,
|
||||
sale,
|
||||
saveButtonBarState,
|
||||
onCategoryAssign,
|
||||
|
|
@ -114,8 +113,6 @@ const SaleDetailsPage: React.FC<SaleDetailsPageProps> = ({
|
|||
onChannelsChange,
|
||||
onCollectionAssign,
|
||||
onCollectionUnassign,
|
||||
onNextPage,
|
||||
onPreviousPage,
|
||||
onProductAssign,
|
||||
onProductUnassign,
|
||||
onVariantAssign,
|
||||
|
|
@ -277,9 +274,6 @@ const SaleDetailsPage: React.FC<SaleDetailsPageProps> = ({
|
|||
disabled={disabled}
|
||||
onCategoryAssign={onCategoryAssign}
|
||||
onCategoryUnassign={onCategoryUnassign}
|
||||
onNextPage={onNextPage}
|
||||
onPreviousPage={onPreviousPage}
|
||||
pageInfo={pageInfo}
|
||||
discount={sale}
|
||||
isChecked={isChecked}
|
||||
selected={selected}
|
||||
|
|
@ -292,9 +286,6 @@ const SaleDetailsPage: React.FC<SaleDetailsPageProps> = ({
|
|||
disabled={disabled}
|
||||
onCollectionAssign={onCollectionAssign}
|
||||
onCollectionUnassign={onCollectionUnassign}
|
||||
onNextPage={onNextPage}
|
||||
onPreviousPage={onPreviousPage}
|
||||
pageInfo={pageInfo}
|
||||
discount={sale}
|
||||
isChecked={isChecked}
|
||||
selected={selected}
|
||||
|
|
@ -305,11 +296,8 @@ const SaleDetailsPage: React.FC<SaleDetailsPageProps> = ({
|
|||
) : activeTab === SaleDetailsPageTab.products ? (
|
||||
<DiscountProducts
|
||||
disabled={disabled}
|
||||
onNextPage={onNextPage}
|
||||
onPreviousPage={onPreviousPage}
|
||||
onProductAssign={onProductAssign}
|
||||
onProductUnassign={onProductUnassign}
|
||||
pageInfo={pageInfo}
|
||||
products={mapEdgesToItems(sale?.products)}
|
||||
isChecked={isChecked}
|
||||
selected={selected}
|
||||
|
|
@ -320,11 +308,8 @@ const SaleDetailsPage: React.FC<SaleDetailsPageProps> = ({
|
|||
) : (
|
||||
<DiscountVariants
|
||||
disabled={disabled}
|
||||
onNextPage={onNextPage}
|
||||
onPreviousPage={onPreviousPage}
|
||||
onVariantAssign={onVariantAssign}
|
||||
onVariantUnassign={onVariantUnassign}
|
||||
pageInfo={pageInfo}
|
||||
variants={mapEdgesToItems(sale?.variants)}
|
||||
isChecked={isChecked}
|
||||
selected={selected}
|
||||
|
|
|
|||
|
|
@ -7,7 +7,7 @@ import ResponsiveTable from "@saleor/components/ResponsiveTable";
|
|||
import Skeleton from "@saleor/components/Skeleton";
|
||||
import TableCellHeader from "@saleor/components/TableCellHeader";
|
||||
import TableHead from "@saleor/components/TableHead";
|
||||
import TablePagination from "@saleor/components/TablePagination";
|
||||
import { TablePaginationWithContext } from "@saleor/components/TablePagination";
|
||||
import TableRowLink from "@saleor/components/TableRowLink";
|
||||
import TooltipTableCellHeader from "@saleor/components/TooltipTableCellHeader";
|
||||
import { commonTooltipMessages } from "@saleor/components/TooltipTableCellHeader/messages";
|
||||
|
|
@ -71,11 +71,8 @@ const SaleList: React.FC<SaleListProps> = props => {
|
|||
const {
|
||||
settings,
|
||||
disabled,
|
||||
onNextPage,
|
||||
onPreviousPage,
|
||||
onUpdateListSettings,
|
||||
onSort,
|
||||
pageInfo,
|
||||
sales,
|
||||
selectedChannelId,
|
||||
isChecked,
|
||||
|
|
@ -174,16 +171,10 @@ const SaleList: React.FC<SaleListProps> = props => {
|
|||
</TableHead>
|
||||
<TableFooter>
|
||||
<TableRow>
|
||||
<TablePagination
|
||||
<TablePaginationWithContext
|
||||
colSpan={numberOfColumns}
|
||||
settings={settings}
|
||||
hasNextPage={pageInfo && !disabled ? pageInfo.hasNextPage : false}
|
||||
onNextPage={onNextPage}
|
||||
onUpdateListSettings={onUpdateListSettings}
|
||||
hasPreviousPage={
|
||||
pageInfo && !disabled ? pageInfo.hasPreviousPage : false
|
||||
}
|
||||
onPreviousPage={onPreviousPage}
|
||||
/>
|
||||
</TableRow>
|
||||
</TableFooter>
|
||||
|
|
|
|||
|
|
@ -109,7 +109,6 @@ const VoucherDetailsPage: React.FC<VoucherDetailsPageProps> = ({
|
|||
channelListings = [],
|
||||
disabled,
|
||||
errors,
|
||||
pageInfo,
|
||||
saveButtonBarState,
|
||||
voucher,
|
||||
onCategoryAssign,
|
||||
|
|
@ -119,8 +118,6 @@ const VoucherDetailsPage: React.FC<VoucherDetailsPageProps> = ({
|
|||
onCountryUnassign,
|
||||
onCollectionAssign,
|
||||
onCollectionUnassign,
|
||||
onNextPage,
|
||||
onPreviousPage,
|
||||
onProductAssign,
|
||||
onProductUnassign,
|
||||
onTabClick,
|
||||
|
|
@ -309,9 +306,6 @@ const VoucherDetailsPage: React.FC<VoucherDetailsPageProps> = ({
|
|||
disabled={disabled}
|
||||
onCategoryAssign={onCategoryAssign}
|
||||
onCategoryUnassign={onCategoryUnassign}
|
||||
onNextPage={onNextPage}
|
||||
onPreviousPage={onPreviousPage}
|
||||
pageInfo={pageInfo}
|
||||
discount={voucher}
|
||||
isChecked={isChecked}
|
||||
selected={selected}
|
||||
|
|
@ -324,9 +318,6 @@ const VoucherDetailsPage: React.FC<VoucherDetailsPageProps> = ({
|
|||
disabled={disabled}
|
||||
onCollectionAssign={onCollectionAssign}
|
||||
onCollectionUnassign={onCollectionUnassign}
|
||||
onNextPage={onNextPage}
|
||||
onPreviousPage={onPreviousPage}
|
||||
pageInfo={pageInfo}
|
||||
discount={voucher}
|
||||
isChecked={isChecked}
|
||||
selected={selected}
|
||||
|
|
@ -337,11 +328,8 @@ const VoucherDetailsPage: React.FC<VoucherDetailsPageProps> = ({
|
|||
) : (
|
||||
<DiscountProducts
|
||||
disabled={disabled}
|
||||
onNextPage={onNextPage}
|
||||
onPreviousPage={onPreviousPage}
|
||||
onProductAssign={onProductAssign}
|
||||
onProductUnassign={onProductUnassign}
|
||||
pageInfo={pageInfo}
|
||||
products={mapEdgesToItems(voucher?.products)}
|
||||
isChecked={isChecked}
|
||||
selected={selected}
|
||||
|
|
|
|||
|
|
@ -7,7 +7,7 @@ import ResponsiveTable from "@saleor/components/ResponsiveTable";
|
|||
import Skeleton from "@saleor/components/Skeleton";
|
||||
import TableCellHeader from "@saleor/components/TableCellHeader";
|
||||
import TableHead from "@saleor/components/TableHead";
|
||||
import TablePagination from "@saleor/components/TablePagination";
|
||||
import { TablePaginationWithContext } from "@saleor/components/TablePagination";
|
||||
import TableRowLink from "@saleor/components/TableRowLink";
|
||||
import TooltipTableCellHeader from "@saleor/components/TooltipTableCellHeader";
|
||||
import { commonTooltipMessages } from "@saleor/components/TooltipTableCellHeader/messages";
|
||||
|
|
@ -88,11 +88,8 @@ const VoucherList: React.FC<VoucherListProps> = props => {
|
|||
const {
|
||||
settings,
|
||||
disabled,
|
||||
onNextPage,
|
||||
onPreviousPage,
|
||||
onUpdateListSettings,
|
||||
onSort,
|
||||
pageInfo,
|
||||
vouchers,
|
||||
isChecked,
|
||||
selected,
|
||||
|
|
@ -228,16 +225,10 @@ const VoucherList: React.FC<VoucherListProps> = props => {
|
|||
</TableHead>
|
||||
<TableFooter>
|
||||
<TableRow>
|
||||
<TablePagination
|
||||
<TablePaginationWithContext
|
||||
colSpan={numberOfColumns}
|
||||
settings={settings}
|
||||
hasNextPage={pageInfo && !disabled ? pageInfo.hasNextPage : false}
|
||||
onNextPage={onNextPage}
|
||||
onUpdateListSettings={onUpdateListSettings}
|
||||
hasPreviousPage={
|
||||
pageInfo && !disabled ? pageInfo.hasPreviousPage : false
|
||||
}
|
||||
onPreviousPage={onPreviousPage}
|
||||
/>
|
||||
</TableRow>
|
||||
</TableFooter>
|
||||
|
|
|
|||
|
|
@ -40,6 +40,7 @@ import useLocalPaginator, {
|
|||
import useLocalStorage from "@saleor/hooks/useLocalStorage";
|
||||
import useNavigator from "@saleor/hooks/useNavigator";
|
||||
import useNotifier from "@saleor/hooks/useNotifier";
|
||||
import { PaginatorContext } from "@saleor/hooks/usePaginator";
|
||||
import { commonMessages, sectionNames } from "@saleor/intl";
|
||||
import { maybe } from "@saleor/misc";
|
||||
import useCategorySearch from "@saleor/searches/useCategorySearch";
|
||||
|
|
@ -251,7 +252,7 @@ export const SaleDetails: React.FC<SaleDetailsProps> = ({ id, params }) => {
|
|||
}
|
||||
});
|
||||
|
||||
const { loadNextPage, loadPreviousPage, pageInfo } = paginate(
|
||||
const { pageInfo, ...paginationValues } = paginate(
|
||||
tabPageInfo,
|
||||
paginationState
|
||||
);
|
||||
|
|
@ -269,7 +270,7 @@ export const SaleDetails: React.FC<SaleDetailsProps> = ({ id, params }) => {
|
|||
);
|
||||
|
||||
return (
|
||||
<>
|
||||
<PaginatorContext.Provider value={{ ...pageInfo, ...paginationValues }}>
|
||||
<WindowTitle title={intl.formatMessage(sectionNames.sales)} />
|
||||
{!!allChannels?.length && (
|
||||
<ChannelsAvailabilityDialog
|
||||
|
|
@ -295,11 +296,8 @@ export const SaleDetails: React.FC<SaleDetailsProps> = ({ id, params }) => {
|
|||
disabled={loading || saleCataloguesRemoveOpts.loading}
|
||||
errors={saleUpdateOpts.data?.saleUpdate.errors || []}
|
||||
selectedChannelId={selectedChannel}
|
||||
pageInfo={pageInfo}
|
||||
openChannelsModal={handleChannelsModalOpen}
|
||||
onChannelsChange={setCurrentChannels}
|
||||
onNextPage={loadNextPage}
|
||||
onPreviousPage={loadPreviousPage}
|
||||
onCategoryAssign={() => openModal("assign-category")}
|
||||
onCollectionAssign={() => openModal("assign-collection")}
|
||||
onCollectionUnassign={collectionId =>
|
||||
|
|
@ -589,7 +587,7 @@ export const SaleDetails: React.FC<SaleDetailsProps> = ({ id, params }) => {
|
|||
/>
|
||||
</DialogContentText>
|
||||
</ActionDialog>
|
||||
</>
|
||||
</PaginatorContext.Provider>
|
||||
);
|
||||
};
|
||||
export default SaleDetails;
|
||||
|
|
|
|||
|
|
@ -13,7 +13,8 @@ import useNavigator from "@saleor/hooks/useNavigator";
|
|||
import useNotifier from "@saleor/hooks/useNotifier";
|
||||
import { usePaginationReset } from "@saleor/hooks/usePaginationReset";
|
||||
import usePaginator, {
|
||||
createPaginationState
|
||||
createPaginationState,
|
||||
PaginatorContext
|
||||
} from "@saleor/hooks/usePaginator";
|
||||
import { commonMessages, sectionNames } from "@saleor/intl";
|
||||
import { DeleteIcon, IconButton } from "@saleor/macaw-ui";
|
||||
|
|
@ -52,7 +53,6 @@ interface SaleListProps {
|
|||
export const SaleList: React.FC<SaleListProps> = ({ params }) => {
|
||||
const navigate = useNavigator();
|
||||
const notify = useNotifier();
|
||||
const paginate = usePaginator();
|
||||
const { isSelected, listElements, reset, toggle, toggleAll } = useBulkActions(
|
||||
params.ids
|
||||
);
|
||||
|
|
@ -141,11 +141,11 @@ export const SaleList: React.FC<SaleListProps> = ({ params }) => {
|
|||
|
||||
const canOpenBulkActionDialog = maybe(() => params.ids.length > 0);
|
||||
|
||||
const { loadNextPage, loadPreviousPage, pageInfo } = paginate(
|
||||
maybe(() => data.sales.pageInfo),
|
||||
const paginationValues = usePaginator({
|
||||
pageInfo: maybe(() => data.sales.pageInfo),
|
||||
paginationState,
|
||||
params
|
||||
);
|
||||
queryString: params
|
||||
});
|
||||
|
||||
const [saleBulkDelete, saleBulkDeleteOpts] = useSaleBulkDeleteMutation({
|
||||
onCompleted: data => {
|
||||
|
|
@ -171,7 +171,7 @@ export const SaleList: React.FC<SaleListProps> = ({ params }) => {
|
|||
});
|
||||
|
||||
return (
|
||||
<>
|
||||
<PaginatorContext.Provider value={paginationValues}>
|
||||
<WindowTitle title={intl.formatMessage(sectionNames.sales)} />
|
||||
<SaleListPage
|
||||
currentTab={currentTab}
|
||||
|
|
@ -187,9 +187,6 @@ export const SaleList: React.FC<SaleListProps> = ({ params }) => {
|
|||
sales={mapEdgesToItems(data?.sales)}
|
||||
settings={settings}
|
||||
disabled={loading}
|
||||
pageInfo={pageInfo}
|
||||
onNextPage={loadNextPage}
|
||||
onPreviousPage={loadPreviousPage}
|
||||
onSort={handleSort}
|
||||
onUpdateListSettings={updateListSettings}
|
||||
isChecked={isSelected}
|
||||
|
|
@ -251,7 +248,7 @@ export const SaleList: React.FC<SaleListProps> = ({ params }) => {
|
|||
onSubmit={handleTabDelete}
|
||||
tabName={maybe(() => tabs[currentTab - 1].name, "...")}
|
||||
/>
|
||||
</>
|
||||
</PaginatorContext.Provider>
|
||||
);
|
||||
};
|
||||
export default SaleList;
|
||||
|
|
|
|||
|
|
@ -40,6 +40,7 @@ import useLocalPaginator, {
|
|||
} from "@saleor/hooks/useLocalPaginator";
|
||||
import useNavigator from "@saleor/hooks/useNavigator";
|
||||
import useNotifier from "@saleor/hooks/useNotifier";
|
||||
import { PaginatorContext } from "@saleor/hooks/usePaginator";
|
||||
import useShop from "@saleor/hooks/useShop";
|
||||
import { commonMessages, sectionNames } from "@saleor/intl";
|
||||
import useCategorySearch from "@saleor/searches/useCategorySearch";
|
||||
|
|
@ -263,13 +264,13 @@ export const VoucherDetails: React.FC<VoucherDetailsProps> = ({
|
|||
}
|
||||
});
|
||||
|
||||
const { loadNextPage, loadPreviousPage, pageInfo } = paginate(
|
||||
const { pageInfo, ...paginationValues } = paginate(
|
||||
tabPageInfo,
|
||||
paginationState
|
||||
);
|
||||
|
||||
return (
|
||||
<>
|
||||
<PaginatorContext.Provider value={{ ...pageInfo, ...paginationValues }}>
|
||||
<WindowTitle title={intl.formatMessage(sectionNames.vouchers)} />
|
||||
{!!allChannels?.length && (
|
||||
<ChannelsAvailabilityDialog
|
||||
|
|
@ -303,9 +304,6 @@ export const VoucherDetails: React.FC<VoucherDetailsProps> = ({
|
|||
...(updateChannelsOpts.data?.voucherChannelListingUpdate.errors || [])
|
||||
]}
|
||||
selectedChannelId={channel?.id}
|
||||
pageInfo={pageInfo}
|
||||
onNextPage={loadNextPage}
|
||||
onPreviousPage={loadPreviousPage}
|
||||
onCategoryAssign={() => openModal("assign-category")}
|
||||
onCollectionAssign={() => openModal("assign-collection")}
|
||||
onCollectionUnassign={collectionId =>
|
||||
|
|
@ -605,7 +603,7 @@ export const VoucherDetails: React.FC<VoucherDetailsProps> = ({
|
|||
/>
|
||||
</DialogContentText>
|
||||
</ActionDialog>
|
||||
</>
|
||||
</PaginatorContext.Provider>
|
||||
);
|
||||
};
|
||||
export default VoucherDetails;
|
||||
|
|
|
|||
|
|
@ -16,7 +16,8 @@ import useNavigator from "@saleor/hooks/useNavigator";
|
|||
import useNotifier from "@saleor/hooks/useNotifier";
|
||||
import { usePaginationReset } from "@saleor/hooks/usePaginationReset";
|
||||
import usePaginator, {
|
||||
createPaginationState
|
||||
createPaginationState,
|
||||
PaginatorContext
|
||||
} from "@saleor/hooks/usePaginator";
|
||||
import { commonMessages, sectionNames } from "@saleor/intl";
|
||||
import { DeleteIcon, IconButton } from "@saleor/macaw-ui";
|
||||
|
|
@ -55,7 +56,6 @@ interface VoucherListProps {
|
|||
export const VoucherList: React.FC<VoucherListProps> = ({ params }) => {
|
||||
const navigate = useNavigator();
|
||||
const notify = useNotifier();
|
||||
const paginate = usePaginator();
|
||||
const { isSelected, listElements, reset, toggle, toggleAll } = useBulkActions(
|
||||
params.ids
|
||||
);
|
||||
|
|
@ -145,11 +145,11 @@ export const VoucherList: React.FC<VoucherListProps> = ({ params }) => {
|
|||
|
||||
const canOpenBulkActionDialog = maybe(() => params.ids.length > 0);
|
||||
|
||||
const { loadNextPage, loadPreviousPage, pageInfo } = paginate(
|
||||
data?.vouchers?.pageInfo,
|
||||
const paginationValues = usePaginator({
|
||||
pageInfo: data?.vouchers?.pageInfo,
|
||||
paginationState,
|
||||
params
|
||||
);
|
||||
queryString: params
|
||||
});
|
||||
|
||||
const [
|
||||
voucherBulkDelete,
|
||||
|
|
@ -178,7 +178,7 @@ export const VoucherList: React.FC<VoucherListProps> = ({ params }) => {
|
|||
const handleSort = createSortHandler(navigate, voucherListUrl, params);
|
||||
|
||||
return (
|
||||
<>
|
||||
<PaginatorContext.Provider value={paginationValues}>
|
||||
<WindowTitle title={intl.formatMessage(sectionNames.vouchers)} />
|
||||
<VoucherListPage
|
||||
currentTab={currentTab}
|
||||
|
|
@ -194,9 +194,6 @@ export const VoucherList: React.FC<VoucherListProps> = ({ params }) => {
|
|||
settings={settings}
|
||||
vouchers={mapEdgesToItems(data?.vouchers)}
|
||||
disabled={loading}
|
||||
pageInfo={pageInfo}
|
||||
onNextPage={loadNextPage}
|
||||
onPreviousPage={loadPreviousPage}
|
||||
onUpdateListSettings={updateListSettings}
|
||||
onSort={handleSort}
|
||||
isChecked={isSelected}
|
||||
|
|
@ -258,7 +255,7 @@ export const VoucherList: React.FC<VoucherListProps> = ({ params }) => {
|
|||
onSubmit={handleTabDelete}
|
||||
tabName={maybe(() => tabs[currentTab - 1].name, "...")}
|
||||
/>
|
||||
</>
|
||||
</PaginatorContext.Provider>
|
||||
);
|
||||
};
|
||||
export default VoucherList;
|
||||
|
|
|
|||
|
|
@ -5,6 +5,7 @@ import {
|
|||
UserDetailsQuery
|
||||
} from "@saleor/graphql";
|
||||
|
||||
import { PaginatorContextValues } from "./hooks/usePaginator";
|
||||
import {
|
||||
FetchMoreProps,
|
||||
FilterPageProps,
|
||||
|
|
@ -303,6 +304,16 @@ export const tabPageProps: TabPageProps = {
|
|||
tabs: ["Tab X"]
|
||||
};
|
||||
|
||||
export const paginatorContextValues: PaginatorContextValues = {
|
||||
endCursor: "",
|
||||
startCursor: "",
|
||||
hasNextPage: false,
|
||||
hasPreviousPage: false,
|
||||
nextPageHref: "",
|
||||
prevPageHref: "",
|
||||
paginatorType: "link"
|
||||
};
|
||||
|
||||
export const searchPageProps: SearchPageProps = {
|
||||
initialSearch: "",
|
||||
onSearchChange: () => undefined
|
||||
|
|
|
|||
|
|
@ -6,8 +6,6 @@ import React from "react";
|
|||
import { useGiftCardList } from "../providers/GiftCardListProvider";
|
||||
|
||||
const GiftCardsListTableFooter: React.FC = () => {
|
||||
const paginate = usePaginator();
|
||||
|
||||
const {
|
||||
settings,
|
||||
updateListSettings,
|
||||
|
|
@ -17,23 +15,20 @@ const GiftCardsListTableFooter: React.FC = () => {
|
|||
numberOfColumns
|
||||
} = useGiftCardList();
|
||||
|
||||
const { loadNextPage, loadPreviousPage, pageInfo } = paginate(
|
||||
apiPageInfo,
|
||||
const paginationValues = usePaginator({
|
||||
pageInfo: apiPageInfo,
|
||||
paginationState,
|
||||
params
|
||||
);
|
||||
queryString: params
|
||||
});
|
||||
|
||||
return (
|
||||
<TableFooter>
|
||||
<TableRow>
|
||||
<TablePagination
|
||||
{...paginationValues}
|
||||
settings={settings}
|
||||
colSpan={numberOfColumns}
|
||||
hasNextPage={pageInfo ? pageInfo.hasNextPage : false}
|
||||
onNextPage={loadNextPage}
|
||||
onUpdateListSettings={updateListSettings}
|
||||
onPreviousPage={loadPreviousPage}
|
||||
hasPreviousPage={pageInfo ? pageInfo.hasPreviousPage : false}
|
||||
/>
|
||||
</TableRow>
|
||||
</TableFooter>
|
||||
|
|
|
|||
|
|
@ -117,6 +117,7 @@ function useLocalPaginator(
|
|||
return {
|
||||
loadNextPage,
|
||||
loadPreviousPage,
|
||||
paginatorType: "click" as const,
|
||||
pageInfo: newPageInfo
|
||||
};
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,7 +1,7 @@
|
|||
import { stringifyQs } from "@saleor/utils/urls";
|
||||
import { createContext, useContext, useMemo } from "react";
|
||||
|
||||
import { Pagination } from "../types";
|
||||
import useNavigator from "./useNavigator";
|
||||
|
||||
export interface PageInfo {
|
||||
endCursor: string;
|
||||
|
|
@ -36,50 +36,105 @@ export function createPaginationState(
|
|||
};
|
||||
}
|
||||
|
||||
function usePaginator() {
|
||||
const navigate = useNavigator();
|
||||
|
||||
function paginate(
|
||||
pageInfo: PageInfo,
|
||||
paginationState: PaginationState,
|
||||
queryString: Pagination
|
||||
) {
|
||||
const loadNextPage = () =>
|
||||
navigate(
|
||||
"?" +
|
||||
stringifyQs({
|
||||
...queryString,
|
||||
after: pageInfo.endCursor,
|
||||
before: undefined
|
||||
}),
|
||||
{ replace: true, resetScroll: true }
|
||||
);
|
||||
|
||||
const loadPreviousPage = () =>
|
||||
navigate(
|
||||
"?" +
|
||||
stringifyQs({
|
||||
...queryString,
|
||||
after: undefined,
|
||||
before: pageInfo.startCursor
|
||||
}),
|
||||
{ replace: true, resetScroll: true }
|
||||
);
|
||||
|
||||
const newPageInfo = pageInfo
|
||||
? {
|
||||
...pageInfo,
|
||||
hasNextPage: !!paginationState.before || pageInfo.hasNextPage,
|
||||
hasPreviousPage: !!paginationState.after || pageInfo.hasPreviousPage
|
||||
}
|
||||
: undefined;
|
||||
|
||||
return {
|
||||
loadNextPage,
|
||||
loadPreviousPage,
|
||||
pageInfo: newPageInfo
|
||||
};
|
||||
}
|
||||
return paginate;
|
||||
interface UsePaginatorArgs {
|
||||
pageInfo: PageInfo;
|
||||
paginationState: PaginationState;
|
||||
queryString: Pagination;
|
||||
}
|
||||
|
||||
function usePaginator({
|
||||
queryString,
|
||||
paginationState,
|
||||
pageInfo
|
||||
}: UsePaginatorArgs) {
|
||||
const newPageInfo = useMemo<PageInfo>(
|
||||
() =>
|
||||
pageInfo
|
||||
? {
|
||||
...pageInfo,
|
||||
hasNextPage: !!paginationState.before || pageInfo.hasNextPage,
|
||||
hasPreviousPage: !!paginationState.after || pageInfo.hasPreviousPage
|
||||
}
|
||||
: undefined,
|
||||
[paginationState, pageInfo]
|
||||
);
|
||||
|
||||
const nextPageHref = useMemo(() => {
|
||||
if (!newPageInfo?.hasNextPage || !pageInfo?.endCursor) {
|
||||
return undefined;
|
||||
}
|
||||
|
||||
return (
|
||||
"?" +
|
||||
stringifyQs({
|
||||
...queryString,
|
||||
after: pageInfo.endCursor,
|
||||
before: undefined
|
||||
})
|
||||
);
|
||||
}, [pageInfo?.endCursor, newPageInfo?.hasNextPage, queryString]);
|
||||
|
||||
const prevPageHref = useMemo(() => {
|
||||
if (!newPageInfo?.hasPreviousPage || !pageInfo?.startCursor) {
|
||||
return undefined;
|
||||
}
|
||||
return (
|
||||
"?" +
|
||||
stringifyQs({
|
||||
...queryString,
|
||||
after: undefined,
|
||||
before: pageInfo.startCursor
|
||||
})
|
||||
);
|
||||
}, [pageInfo?.startCursor, newPageInfo?.hasPreviousPage, queryString]);
|
||||
|
||||
return {
|
||||
nextPageHref,
|
||||
prevPageHref,
|
||||
paginatorType: "link" as const,
|
||||
...newPageInfo
|
||||
};
|
||||
}
|
||||
|
||||
export default usePaginator;
|
||||
|
||||
export interface PaginatorContextValuesCommon {
|
||||
hasNextPage?: boolean;
|
||||
hasPreviousPage?: boolean;
|
||||
endCursor?: string;
|
||||
startCursor?: string;
|
||||
}
|
||||
|
||||
export type PaginatorContextValues = PaginatorContextValuesCommon &
|
||||
(
|
||||
| {
|
||||
paginatorType: "link";
|
||||
nextPageHref?: string;
|
||||
prevPageHref?: string;
|
||||
loadNextPage?: never;
|
||||
loadPreviousPage?: never;
|
||||
}
|
||||
| {
|
||||
paginatorType: "click";
|
||||
nextPageHref?: never;
|
||||
prevPageHref?: never;
|
||||
loadNextPage: () => void;
|
||||
loadPreviousPage: () => void;
|
||||
}
|
||||
);
|
||||
|
||||
export const PaginatorContext = createContext<PaginatorContextValues | null>(
|
||||
null
|
||||
);
|
||||
|
||||
export const usePaginatorContext = () => {
|
||||
const context = useContext(PaginatorContext);
|
||||
|
||||
if (context === null) {
|
||||
throw new Error(
|
||||
"usePaginatorContext must be used within a PaginatorContext.Provider"
|
||||
);
|
||||
}
|
||||
|
||||
return context;
|
||||
};
|
||||
|
|
|
|||
|
|
@ -12,7 +12,7 @@ import Skeleton from "@saleor/components/Skeleton";
|
|||
import { TableButtonWrapper } from "@saleor/components/TableButtonWrapper/TableButtonWrapper";
|
||||
import TableCellHeader from "@saleor/components/TableCellHeader";
|
||||
import TableHead from "@saleor/components/TableHead";
|
||||
import TablePagination from "@saleor/components/TablePagination";
|
||||
import { TablePaginationWithContext } from "@saleor/components/TablePagination";
|
||||
import TableRowLink from "@saleor/components/TableRowLink";
|
||||
import { MenuFragment } from "@saleor/graphql";
|
||||
import { DeleteIcon, makeStyles } from "@saleor/macaw-ui";
|
||||
|
|
@ -64,11 +64,8 @@ const MenuList: React.FC<MenuListProps> = props => {
|
|||
isChecked,
|
||||
menus,
|
||||
onDelete,
|
||||
onNextPage,
|
||||
onPreviousPage,
|
||||
onUpdateListSettings,
|
||||
onSort,
|
||||
pageInfo,
|
||||
selected,
|
||||
sort,
|
||||
toggle,
|
||||
|
|
@ -121,16 +118,10 @@ const MenuList: React.FC<MenuListProps> = props => {
|
|||
</TableHead>
|
||||
<TableFooter>
|
||||
<TableRow>
|
||||
<TablePagination
|
||||
<TablePaginationWithContext
|
||||
colSpan={numberOfColumns}
|
||||
settings={settings}
|
||||
hasNextPage={pageInfo && !disabled ? pageInfo.hasNextPage : false}
|
||||
onNextPage={onNextPage}
|
||||
onUpdateListSettings={onUpdateListSettings}
|
||||
hasPreviousPage={
|
||||
pageInfo && !disabled ? pageInfo.hasPreviousPage : false
|
||||
}
|
||||
onPreviousPage={onPreviousPage}
|
||||
/>
|
||||
</TableRow>
|
||||
</TableFooter>
|
||||
|
|
|
|||
|
|
@ -13,7 +13,8 @@ import useNavigator from "@saleor/hooks/useNavigator";
|
|||
import useNotifier from "@saleor/hooks/useNotifier";
|
||||
import { usePaginationReset } from "@saleor/hooks/usePaginationReset";
|
||||
import usePaginator, {
|
||||
createPaginationState
|
||||
createPaginationState,
|
||||
PaginatorContext
|
||||
} from "@saleor/hooks/usePaginator";
|
||||
import { buttonMessages, commonMessages } from "@saleor/intl";
|
||||
import { getStringOrPlaceholder, maybe } from "@saleor/misc";
|
||||
|
|
@ -36,7 +37,6 @@ interface MenuListProps {
|
|||
const MenuList: React.FC<MenuListProps> = ({ params }) => {
|
||||
const navigate = useNavigator();
|
||||
const notify = useNotifier();
|
||||
const paginate = usePaginator();
|
||||
const { isSelected, listElements, reset, toggle, toggleAll } = useBulkActions(
|
||||
params.ids
|
||||
);
|
||||
|
|
@ -72,11 +72,11 @@ const MenuList: React.FC<MenuListProps> = ({ params }) => {
|
|||
variables: queryVariables
|
||||
});
|
||||
|
||||
const { loadNextPage, loadPreviousPage, pageInfo } = paginate(
|
||||
maybe(() => data.menus.pageInfo),
|
||||
const paginationValues = usePaginator({
|
||||
pageInfo: maybe(() => data.menus.pageInfo),
|
||||
paginationState,
|
||||
params
|
||||
);
|
||||
queryString: params
|
||||
});
|
||||
|
||||
const [menuCreate, menuCreateOpts] = useMenuCreateMutation({
|
||||
onCompleted: data => {
|
||||
|
|
@ -126,7 +126,7 @@ const MenuList: React.FC<MenuListProps> = ({ params }) => {
|
|||
const handleSort = createSortHandler(navigate, menuListUrl, params);
|
||||
|
||||
return (
|
||||
<>
|
||||
<PaginatorContext.Provider value={paginationValues}>
|
||||
<MenuListPage
|
||||
disabled={loading}
|
||||
menus={mapEdgesToItems(data?.menus)}
|
||||
|
|
@ -139,11 +139,8 @@ const MenuList: React.FC<MenuListProps> = ({ params }) => {
|
|||
})
|
||||
)
|
||||
}
|
||||
onNextPage={loadNextPage}
|
||||
onPreviousPage={loadPreviousPage}
|
||||
onUpdateListSettings={updateListSettings}
|
||||
onSort={handleSort}
|
||||
pageInfo={pageInfo}
|
||||
isChecked={isSelected}
|
||||
selected={listElements.length}
|
||||
sort={getSortParams(params)}
|
||||
|
|
@ -242,7 +239,7 @@ const MenuList: React.FC<MenuListProps> = ({ params }) => {
|
|||
/>
|
||||
</DialogContentText>
|
||||
</ActionDialog>
|
||||
</>
|
||||
</PaginatorContext.Provider>
|
||||
);
|
||||
};
|
||||
export default MenuList;
|
||||
|
|
|
|||
|
|
@ -6,7 +6,7 @@ import ResponsiveTable from "@saleor/components/ResponsiveTable";
|
|||
import Skeleton from "@saleor/components/Skeleton";
|
||||
import TableCellHeader from "@saleor/components/TableCellHeader";
|
||||
import TableHead from "@saleor/components/TableHead";
|
||||
import TablePagination from "@saleor/components/TablePagination";
|
||||
import { TablePaginationWithContext } from "@saleor/components/TablePagination";
|
||||
import TableRowLink from "@saleor/components/TableRowLink";
|
||||
import { OrderDraftListQuery } from "@saleor/graphql";
|
||||
import { makeStyles } from "@saleor/macaw-ui";
|
||||
|
|
@ -63,9 +63,6 @@ export const OrderDraftList: React.FC<OrderDraftListProps> = props => {
|
|||
disabled,
|
||||
settings,
|
||||
orders,
|
||||
pageInfo,
|
||||
onPreviousPage,
|
||||
onNextPage,
|
||||
onUpdateListSettings,
|
||||
onSort,
|
||||
isChecked,
|
||||
|
|
@ -148,16 +145,10 @@ export const OrderDraftList: React.FC<OrderDraftListProps> = props => {
|
|||
</TableHead>
|
||||
<TableFooter>
|
||||
<TableRow>
|
||||
<TablePagination
|
||||
<TablePaginationWithContext
|
||||
colSpan={numberOfColumns}
|
||||
settings={settings}
|
||||
hasNextPage={pageInfo && !disabled ? pageInfo.hasNextPage : false}
|
||||
onNextPage={onNextPage}
|
||||
onUpdateListSettings={onUpdateListSettings}
|
||||
hasPreviousPage={
|
||||
pageInfo && !disabled ? pageInfo.hasPreviousPage : false
|
||||
}
|
||||
onPreviousPage={onPreviousPage}
|
||||
/>
|
||||
</TableRow>
|
||||
</TableFooter>
|
||||
|
|
|
|||
|
|
@ -11,7 +11,7 @@ import Money from "@saleor/components/Money";
|
|||
import ResponsiveTable from "@saleor/components/ResponsiveTable";
|
||||
import Skeleton from "@saleor/components/Skeleton";
|
||||
import TableCellHeader from "@saleor/components/TableCellHeader";
|
||||
import TablePagination from "@saleor/components/TablePagination";
|
||||
import { TablePaginationWithContext } from "@saleor/components/TablePagination";
|
||||
import TableRowLink from "@saleor/components/TableRowLink";
|
||||
import { OrderListQuery } from "@saleor/graphql";
|
||||
import { makeStyles, Pill } from "@saleor/macaw-ui";
|
||||
|
|
@ -82,9 +82,6 @@ export const OrderList: React.FC<OrderListProps> = props => {
|
|||
disabled,
|
||||
settings,
|
||||
orders,
|
||||
pageInfo,
|
||||
onPreviousPage,
|
||||
onNextPage,
|
||||
onUpdateListSettings,
|
||||
onSort,
|
||||
sort
|
||||
|
|
@ -183,16 +180,11 @@ export const OrderList: React.FC<OrderListProps> = props => {
|
|||
</TableHead>
|
||||
<TableFooter>
|
||||
<TableRow>
|
||||
<TablePagination
|
||||
<TablePaginationWithContext
|
||||
colSpan={numberOfColumns}
|
||||
settings={settings}
|
||||
hasNextPage={pageInfo && !disabled ? pageInfo.hasNextPage : false}
|
||||
onNextPage={onNextPage}
|
||||
disabled={disabled}
|
||||
onUpdateListSettings={onUpdateListSettings}
|
||||
hasPreviousPage={
|
||||
pageInfo && !disabled ? pageInfo.hasPreviousPage : false
|
||||
}
|
||||
onPreviousPage={onPreviousPage}
|
||||
/>
|
||||
</TableRow>
|
||||
</TableFooter>
|
||||
|
|
|
|||
|
|
@ -18,7 +18,8 @@ import useNavigator from "@saleor/hooks/useNavigator";
|
|||
import useNotifier from "@saleor/hooks/useNotifier";
|
||||
import { usePaginationReset } from "@saleor/hooks/usePaginationReset";
|
||||
import usePaginator, {
|
||||
createPaginationState
|
||||
createPaginationState,
|
||||
PaginatorContext
|
||||
} from "@saleor/hooks/usePaginator";
|
||||
import { DeleteIcon, IconButton } from "@saleor/macaw-ui";
|
||||
import { maybe } from "@saleor/misc";
|
||||
|
|
@ -57,7 +58,6 @@ interface OrderDraftListProps {
|
|||
export const OrderDraftList: React.FC<OrderDraftListProps> = ({ params }) => {
|
||||
const navigate = useNavigator();
|
||||
const notify = useNotifier();
|
||||
const paginate = usePaginator();
|
||||
const { isSelected, listElements, reset, toggle, toggleAll } = useBulkActions(
|
||||
params.ids
|
||||
);
|
||||
|
|
@ -165,11 +165,11 @@ export const OrderDraftList: React.FC<OrderDraftListProps> = ({ params }) => {
|
|||
variables: queryVariables
|
||||
});
|
||||
|
||||
const { loadNextPage, loadPreviousPage, pageInfo } = paginate(
|
||||
maybe(() => data.draftOrders.pageInfo),
|
||||
const paginationValues = usePaginator({
|
||||
pageInfo: maybe(() => data.draftOrders.pageInfo),
|
||||
paginationState,
|
||||
params
|
||||
);
|
||||
queryString: params
|
||||
});
|
||||
|
||||
const handleSort = createSortHandler(navigate, orderDraftListUrl, params);
|
||||
|
||||
|
|
@ -181,7 +181,7 @@ export const OrderDraftList: React.FC<OrderDraftListProps> = ({ params }) => {
|
|||
});
|
||||
|
||||
return (
|
||||
<>
|
||||
<PaginatorContext.Provider value={paginationValues}>
|
||||
<OrderDraftListPage
|
||||
currentTab={currentTab}
|
||||
filterOpts={getFilterOpts(params)}
|
||||
|
|
@ -197,10 +197,7 @@ export const OrderDraftList: React.FC<OrderDraftListProps> = ({ params }) => {
|
|||
disabled={loading}
|
||||
settings={settings}
|
||||
orders={mapEdgesToItems(data?.draftOrders)}
|
||||
pageInfo={pageInfo}
|
||||
onAdd={() => openModal("create-order")}
|
||||
onNextPage={loadNextPage}
|
||||
onPreviousPage={loadPreviousPage}
|
||||
onSort={handleSort}
|
||||
onUpdateListSettings={updateListSettings}
|
||||
isChecked={isSelected}
|
||||
|
|
@ -273,7 +270,7 @@ export const OrderDraftList: React.FC<OrderDraftListProps> = ({ params }) => {
|
|||
})
|
||||
}
|
||||
/>
|
||||
</>
|
||||
</PaginatorContext.Provider>
|
||||
);
|
||||
};
|
||||
|
||||
|
|
|
|||
|
|
@ -14,7 +14,8 @@ import useNavigator from "@saleor/hooks/useNavigator";
|
|||
import useNotifier from "@saleor/hooks/useNotifier";
|
||||
import { usePaginationReset } from "@saleor/hooks/usePaginationReset";
|
||||
import usePaginator, {
|
||||
createPaginationState
|
||||
createPaginationState,
|
||||
PaginatorContext
|
||||
} from "@saleor/hooks/usePaginator";
|
||||
import { getStringOrPlaceholder } from "@saleor/misc";
|
||||
import { ListViews } from "@saleor/types";
|
||||
|
|
@ -53,7 +54,6 @@ interface OrderListProps {
|
|||
export const OrderList: React.FC<OrderListProps> = ({ params }) => {
|
||||
const navigate = useNavigator();
|
||||
const notify = useNotifier();
|
||||
const paginate = usePaginator();
|
||||
const { updateListSettings, settings } = useListSettings(
|
||||
ListViews.ORDER_LIST
|
||||
);
|
||||
|
|
@ -140,16 +140,16 @@ export const OrderList: React.FC<OrderListProps> = ({ params }) => {
|
|||
variables: queryVariables
|
||||
});
|
||||
|
||||
const { loadNextPage, loadPreviousPage, pageInfo } = paginate(
|
||||
data?.orders?.pageInfo,
|
||||
const paginationValues = usePaginator({
|
||||
pageInfo: data?.orders?.pageInfo,
|
||||
paginationState,
|
||||
params
|
||||
);
|
||||
queryString: params
|
||||
});
|
||||
|
||||
const handleSort = createSortHandler(navigate, orderListUrl, params);
|
||||
|
||||
return (
|
||||
<>
|
||||
<PaginatorContext.Provider value={paginationValues}>
|
||||
<OrderListPage
|
||||
settings={settings}
|
||||
currentTab={currentTab}
|
||||
|
|
@ -157,11 +157,8 @@ export const OrderList: React.FC<OrderListProps> = ({ params }) => {
|
|||
filterOpts={getFilterOpts(params, channelOpts)}
|
||||
limits={limitOpts.data?.shop.limits}
|
||||
orders={mapEdgesToItems(data?.orders)}
|
||||
pageInfo={pageInfo}
|
||||
sort={getSortParams(params)}
|
||||
onAdd={() => openModal("create-order")}
|
||||
onNextPage={loadNextPage}
|
||||
onPreviousPage={loadPreviousPage}
|
||||
onUpdateListSettings={updateListSettings}
|
||||
onSort={handleSort}
|
||||
onSearchChange={handleSearchChange}
|
||||
|
|
@ -203,7 +200,7 @@ export const OrderList: React.FC<OrderListProps> = ({ params }) => {
|
|||
}
|
||||
/>
|
||||
)}
|
||||
</>
|
||||
</PaginatorContext.Provider>
|
||||
);
|
||||
};
|
||||
|
||||
|
|
|
|||
|
|
@ -4,7 +4,7 @@ import ResponsiveTable from "@saleor/components/ResponsiveTable";
|
|||
import Skeleton from "@saleor/components/Skeleton";
|
||||
import TableCellHeader from "@saleor/components/TableCellHeader";
|
||||
import TableHead from "@saleor/components/TableHead";
|
||||
import TablePagination from "@saleor/components/TablePagination";
|
||||
import { TablePaginationWithContext } from "@saleor/components/TablePagination";
|
||||
import TableRowLink from "@saleor/components/TableRowLink";
|
||||
import { PageTypeFragment } from "@saleor/graphql";
|
||||
import { makeStyles } from "@saleor/macaw-ui";
|
||||
|
|
@ -39,9 +39,6 @@ const PageTypeList: React.FC<PageTypeListProps> = props => {
|
|||
const {
|
||||
disabled,
|
||||
pageTypes,
|
||||
pageInfo,
|
||||
onNextPage,
|
||||
onPreviousPage,
|
||||
onSort,
|
||||
isChecked,
|
||||
selected,
|
||||
|
|
@ -82,14 +79,9 @@ const PageTypeList: React.FC<PageTypeListProps> = props => {
|
|||
</TableHead>
|
||||
<TableFooter>
|
||||
<TableRow>
|
||||
<TablePagination
|
||||
<TablePaginationWithContext
|
||||
colSpan={numberOfColumns}
|
||||
hasNextPage={pageInfo && !disabled ? pageInfo.hasNextPage : false}
|
||||
onNextPage={onNextPage}
|
||||
hasPreviousPage={
|
||||
pageInfo && !disabled ? pageInfo.hasPreviousPage : false
|
||||
}
|
||||
onPreviousPage={onPreviousPage}
|
||||
disabled={disabled}
|
||||
/>
|
||||
</TableRow>
|
||||
</TableFooter>
|
||||
|
|
|
|||
|
|
@ -1,4 +1,5 @@
|
|||
import { PageTypeListUrlSortField } from "@saleor/pageTypes/urls";
|
||||
import { PaginatorContextDecorator } from "@saleor/storybook/PaginatorContextDecorator";
|
||||
import { storiesOf } from "@storybook/react";
|
||||
import React from "react";
|
||||
|
||||
|
|
@ -28,6 +29,7 @@ const props: PageTypeListPageProps = {
|
|||
|
||||
storiesOf("Views / Page types / Page types list", module)
|
||||
.addDecorator(Decorator)
|
||||
.addDecorator(PaginatorContextDecorator)
|
||||
.add("default", () => <PageTypeListPage {...props} />)
|
||||
.add("loading", () => (
|
||||
<PageTypeListPage {...props} disabled={true} pageTypes={undefined} />
|
||||
|
|
|
|||
|
|
@ -13,7 +13,8 @@ import useNavigator from "@saleor/hooks/useNavigator";
|
|||
import useNotifier from "@saleor/hooks/useNotifier";
|
||||
import { usePaginationReset } from "@saleor/hooks/usePaginationReset";
|
||||
import usePaginator, {
|
||||
createPaginationState
|
||||
createPaginationState,
|
||||
PaginatorContext
|
||||
} from "@saleor/hooks/usePaginator";
|
||||
import { commonMessages } from "@saleor/intl";
|
||||
import { DeleteIcon, IconButton } from "@saleor/macaw-ui";
|
||||
|
|
@ -50,7 +51,6 @@ interface PageTypeListProps {
|
|||
|
||||
export const PageTypeList: React.FC<PageTypeListProps> = ({ params }) => {
|
||||
const navigate = useNavigator();
|
||||
const paginate = usePaginator();
|
||||
const notify = useNotifier();
|
||||
const {
|
||||
isSelected,
|
||||
|
|
@ -119,11 +119,11 @@ export const PageTypeList: React.FC<PageTypeListProps> = ({ params }) => {
|
|||
handleTabChange(tabs.length + 1);
|
||||
};
|
||||
|
||||
const { loadNextPage, loadPreviousPage, pageInfo } = paginate(
|
||||
data?.pageTypes?.pageInfo,
|
||||
const paginationValues = usePaginator({
|
||||
pageInfo: data?.pageTypes?.pageInfo,
|
||||
paginationState,
|
||||
params
|
||||
);
|
||||
queryString: params
|
||||
});
|
||||
|
||||
const handleSort = createSortHandler(navigate, pageTypeListUrl, params);
|
||||
|
||||
|
|
@ -165,7 +165,7 @@ export const PageTypeList: React.FC<PageTypeListProps> = ({ params }) => {
|
|||
const pageTypesData = mapEdgesToItems(data?.pageTypes);
|
||||
|
||||
return (
|
||||
<>
|
||||
<PaginatorContext.Provider value={paginationValues}>
|
||||
<PageTypeListPage
|
||||
currentTab={currentTab}
|
||||
initialSearch={params.query || ""}
|
||||
|
|
@ -177,9 +177,6 @@ export const PageTypeList: React.FC<PageTypeListProps> = ({ params }) => {
|
|||
tabs={tabs.map(tab => tab.name)}
|
||||
disabled={loading}
|
||||
pageTypes={pageTypesData}
|
||||
pageInfo={pageInfo}
|
||||
onNextPage={loadNextPage}
|
||||
onPreviousPage={loadPreviousPage}
|
||||
onSort={handleSort}
|
||||
isChecked={isSelected}
|
||||
selected={selectedPageTypes.length}
|
||||
|
|
@ -224,7 +221,7 @@ export const PageTypeList: React.FC<PageTypeListProps> = ({ params }) => {
|
|||
onSubmit={handleTabDelete}
|
||||
tabName={getStringOrPlaceholder(tabs[currentTab - 1]?.name)}
|
||||
/>
|
||||
</>
|
||||
</PaginatorContext.Provider>
|
||||
);
|
||||
};
|
||||
PageTypeList.displayName = "PageTypeList";
|
||||
|
|
|
|||
|
|
@ -10,7 +10,7 @@ import ResponsiveTable from "@saleor/components/ResponsiveTable";
|
|||
import Skeleton from "@saleor/components/Skeleton";
|
||||
import TableCellHeader from "@saleor/components/TableCellHeader";
|
||||
import TableHead from "@saleor/components/TableHead";
|
||||
import TablePagination from "@saleor/components/TablePagination";
|
||||
import { TablePaginationWithContext } from "@saleor/components/TablePagination";
|
||||
import TableRowLink from "@saleor/components/TableRowLink";
|
||||
import { PageFragment } from "@saleor/graphql";
|
||||
import { makeStyles, Pill } from "@saleor/macaw-ui";
|
||||
|
|
@ -58,11 +58,8 @@ const PageList: React.FC<PageListProps> = props => {
|
|||
settings,
|
||||
pages,
|
||||
disabled,
|
||||
onNextPage,
|
||||
pageInfo,
|
||||
onSort,
|
||||
onUpdateListSettings,
|
||||
onPreviousPage,
|
||||
isChecked,
|
||||
selected,
|
||||
sort,
|
||||
|
|
@ -136,16 +133,11 @@ const PageList: React.FC<PageListProps> = props => {
|
|||
</TableHead>
|
||||
<TableFooter>
|
||||
<TableRow>
|
||||
<TablePagination
|
||||
<TablePaginationWithContext
|
||||
colSpan={numberOfColumns}
|
||||
settings={settings}
|
||||
hasNextPage={pageInfo && !disabled ? pageInfo.hasNextPage : false}
|
||||
onNextPage={onNextPage}
|
||||
disabled={disabled}
|
||||
onUpdateListSettings={onUpdateListSettings}
|
||||
hasPreviousPage={
|
||||
pageInfo && !disabled ? pageInfo.hasPreviousPage : false
|
||||
}
|
||||
onPreviousPage={onPreviousPage}
|
||||
/>
|
||||
</TableRow>
|
||||
</TableFooter>
|
||||
|
|
|
|||
|
|
@ -12,7 +12,8 @@ import useNavigator from "@saleor/hooks/useNavigator";
|
|||
import useNotifier from "@saleor/hooks/useNotifier";
|
||||
import { usePaginationReset } from "@saleor/hooks/usePaginationReset";
|
||||
import usePaginator, {
|
||||
createPaginationState
|
||||
createPaginationState,
|
||||
PaginatorContext
|
||||
} from "@saleor/hooks/usePaginator";
|
||||
import { DeleteIcon, IconButton } from "@saleor/macaw-ui";
|
||||
import { maybe } from "@saleor/misc";
|
||||
|
|
@ -39,7 +40,6 @@ interface PageListProps {
|
|||
export const PageList: React.FC<PageListProps> = ({ params }) => {
|
||||
const navigate = useNavigator();
|
||||
const notify = useNotifier();
|
||||
const paginate = usePaginator();
|
||||
const { isSelected, listElements, reset, toggle, toggleAll } = useBulkActions(
|
||||
params.ids
|
||||
);
|
||||
|
|
@ -65,11 +65,11 @@ export const PageList: React.FC<PageListProps> = ({ params }) => {
|
|||
variables: queryVariables
|
||||
});
|
||||
|
||||
const { loadNextPage, loadPreviousPage, pageInfo } = paginate(
|
||||
maybe(() => data.pages.pageInfo),
|
||||
const paginationValues = usePaginator({
|
||||
pageInfo: maybe(() => data.pages.pageInfo),
|
||||
paginationState,
|
||||
params
|
||||
);
|
||||
queryString: params
|
||||
});
|
||||
|
||||
const [openModal, closeModal] = createDialogActionHandlers<
|
||||
PageListUrlDialog,
|
||||
|
|
@ -115,14 +115,11 @@ export const PageList: React.FC<PageListProps> = ({ params }) => {
|
|||
const handleSort = createSortHandler(navigate, pageListUrl, params);
|
||||
|
||||
return (
|
||||
<>
|
||||
<PaginatorContext.Provider value={paginationValues}>
|
||||
<PageListPage
|
||||
disabled={loading}
|
||||
settings={settings}
|
||||
pages={mapEdgesToItems(data?.pages)}
|
||||
pageInfo={pageInfo}
|
||||
onNextPage={loadNextPage}
|
||||
onPreviousPage={loadPreviousPage}
|
||||
onUpdateListSettings={updateListSettings}
|
||||
onSort={handleSort}
|
||||
actionDialogOpts={{
|
||||
|
|
@ -263,7 +260,7 @@ export const PageList: React.FC<PageListProps> = ({ params }) => {
|
|||
}}
|
||||
/>
|
||||
</ActionDialog>
|
||||
</>
|
||||
</PaginatorContext.Provider>
|
||||
);
|
||||
};
|
||||
|
||||
|
|
|
|||
|
|
@ -9,7 +9,7 @@ import ResponsiveTable from "@saleor/components/ResponsiveTable";
|
|||
import Skeleton from "@saleor/components/Skeleton";
|
||||
import { TableButtonWrapper } from "@saleor/components/TableButtonWrapper/TableButtonWrapper";
|
||||
import TableCellHeader from "@saleor/components/TableCellHeader";
|
||||
import TablePagination from "@saleor/components/TablePagination";
|
||||
import { TablePaginationWithContext } from "@saleor/components/TablePagination";
|
||||
import TableRowLink from "@saleor/components/TableRowLink";
|
||||
import { PermissionGroupFragment } from "@saleor/graphql";
|
||||
import { DeleteIcon, IconButton, makeStyles } from "@saleor/macaw-ui";
|
||||
|
|
@ -65,16 +65,7 @@ interface PermissionGroupListProps
|
|||
}
|
||||
|
||||
const PermissionGroupList: React.FC<PermissionGroupListProps> = props => {
|
||||
const {
|
||||
disabled,
|
||||
permissionGroups,
|
||||
pageInfo,
|
||||
onDelete,
|
||||
onNextPage,
|
||||
onPreviousPage,
|
||||
onSort,
|
||||
sort
|
||||
} = props;
|
||||
const { disabled, permissionGroups, onDelete, onSort, sort } = props;
|
||||
const classes = useStyles(props);
|
||||
|
||||
return (
|
||||
|
|
@ -107,14 +98,9 @@ const PermissionGroupList: React.FC<PermissionGroupListProps> = props => {
|
|||
</TableHead>
|
||||
<TableFooter>
|
||||
<TableRow>
|
||||
<TablePagination
|
||||
<TablePaginationWithContext
|
||||
colSpan={numberOfColumns}
|
||||
hasNextPage={pageInfo && !disabled ? pageInfo.hasNextPage : false}
|
||||
onNextPage={onNextPage}
|
||||
hasPreviousPage={
|
||||
pageInfo && !disabled ? pageInfo.hasPreviousPage : false
|
||||
}
|
||||
onPreviousPage={onPreviousPage}
|
||||
disabled={disabled}
|
||||
/>
|
||||
</TableRow>
|
||||
</TableFooter>
|
||||
|
|
|
|||
|
|
@ -9,6 +9,7 @@ import PermissionGroupListPage, {
|
|||
import { permissionGroups } from "@saleor/permissionGroups/fixtures";
|
||||
import { PermissionGroupListUrlSortField } from "@saleor/permissionGroups/urls";
|
||||
import Decorator from "@saleor/storybook/Decorator";
|
||||
import { PaginatorContextDecorator } from "@saleor/storybook/PaginatorContextDecorator";
|
||||
import { storiesOf } from "@storybook/react";
|
||||
import React from "react";
|
||||
|
||||
|
|
@ -27,6 +28,7 @@ const props: PermissionGroupListPageProps = {
|
|||
|
||||
storiesOf("Views / Permission Groups / Permission Group List", module)
|
||||
.addDecorator(Decorator)
|
||||
.addDecorator(PaginatorContextDecorator)
|
||||
.add("default", () => <PermissionGroupListPage {...props} />)
|
||||
.add("loading", () => (
|
||||
<PermissionGroupListPage
|
||||
|
|
|
|||
|
|
@ -8,7 +8,8 @@ import useNavigator from "@saleor/hooks/useNavigator";
|
|||
import useNotifier from "@saleor/hooks/useNotifier";
|
||||
import { usePaginationReset } from "@saleor/hooks/usePaginationReset";
|
||||
import usePaginator, {
|
||||
createPaginationState
|
||||
createPaginationState,
|
||||
PaginatorContext
|
||||
} from "@saleor/hooks/usePaginator";
|
||||
import { getStringOrPlaceholder } from "@saleor/misc";
|
||||
import PermissionGroupDeleteDialog from "@saleor/permissionGroups/components/PermissionGroupDeleteDialog";
|
||||
|
|
@ -36,7 +37,6 @@ export const PermissionGroupList: React.FC<PermissionGroupListProps> = ({
|
|||
params
|
||||
}) => {
|
||||
const navigate = useNavigator();
|
||||
const paginate = usePaginator();
|
||||
const notify = useNotifier();
|
||||
const intl = useIntl();
|
||||
const { updateListSettings, settings } = useListSettings(
|
||||
|
|
@ -58,11 +58,11 @@ export const PermissionGroupList: React.FC<PermissionGroupListProps> = ({
|
|||
variables: queryVariables
|
||||
});
|
||||
|
||||
const { loadNextPage, loadPreviousPage, pageInfo } = paginate(
|
||||
data?.permissionGroups.pageInfo,
|
||||
const paginationValues = usePaginator({
|
||||
pageInfo: data?.permissionGroups.pageInfo,
|
||||
paginationState,
|
||||
params
|
||||
);
|
||||
queryString: params
|
||||
});
|
||||
|
||||
const handleSort = createSortHandler(
|
||||
navigate,
|
||||
|
|
@ -100,16 +100,13 @@ export const PermissionGroupList: React.FC<PermissionGroupListProps> = ({
|
|||
});
|
||||
|
||||
return (
|
||||
<>
|
||||
<PaginatorContext.Provider value={paginationValues}>
|
||||
<PermissionGroupListPage
|
||||
disabled={loading}
|
||||
settings={settings}
|
||||
pageInfo={pageInfo}
|
||||
sort={getSortParams(params)}
|
||||
permissionGroups={permissionGroups}
|
||||
onDelete={id => openModal("remove", { id })}
|
||||
onNextPage={loadNextPage}
|
||||
onPreviousPage={loadPreviousPage}
|
||||
onUpdateListSettings={updateListSettings}
|
||||
onSort={handleSort}
|
||||
/>
|
||||
|
|
@ -129,7 +126,7 @@ export const PermissionGroupList: React.FC<PermissionGroupListProps> = ({
|
|||
open={params.action === "remove"}
|
||||
onClose={closeModal}
|
||||
/>
|
||||
</>
|
||||
</PaginatorContext.Provider>
|
||||
);
|
||||
};
|
||||
|
||||
|
|
|
|||
|
|
@ -1,7 +1,7 @@
|
|||
import { TableBody, TableCell, TableFooter, TableRow } from "@material-ui/core";
|
||||
import ResponsiveTable from "@saleor/components/ResponsiveTable";
|
||||
import Skeleton from "@saleor/components/Skeleton";
|
||||
import TablePagination from "@saleor/components/TablePagination";
|
||||
import { TablePaginationWithContext } from "@saleor/components/TablePagination";
|
||||
import { PluginBaseFragment } from "@saleor/graphql";
|
||||
import useNavigator from "@saleor/hooks/useNavigator";
|
||||
import { EditIcon, makeStyles } from "@saleor/macaw-ui";
|
||||
|
|
@ -37,12 +37,9 @@ const PluginList: React.FC<PluginListProps> = props => {
|
|||
settings,
|
||||
plugins,
|
||||
disabled,
|
||||
onNextPage,
|
||||
pageInfo,
|
||||
sort,
|
||||
onSort,
|
||||
onUpdateListSettings,
|
||||
onPreviousPage
|
||||
onUpdateListSettings
|
||||
} = props;
|
||||
const classes = useStyles(props);
|
||||
const navigate = useNavigator();
|
||||
|
|
@ -53,16 +50,11 @@ const PluginList: React.FC<PluginListProps> = props => {
|
|||
<PluginListTableHead sort={sort} onSort={onSort} />
|
||||
<TableFooter>
|
||||
<TableRow>
|
||||
<TablePagination
|
||||
<TablePaginationWithContext
|
||||
colSpan={totalColSpan}
|
||||
settings={settings}
|
||||
hasNextPage={pageInfo && !disabled ? pageInfo.hasNextPage : false}
|
||||
onNextPage={onNextPage}
|
||||
onUpdateListSettings={onUpdateListSettings}
|
||||
hasPreviousPage={
|
||||
pageInfo && !disabled ? pageInfo.hasPreviousPage : false
|
||||
}
|
||||
onPreviousPage={onPreviousPage}
|
||||
settings={settings}
|
||||
disabled={disabled}
|
||||
/>
|
||||
</TableRow>
|
||||
</TableFooter>
|
||||
|
|
|
|||
|
|
@ -8,7 +8,8 @@ import useListSettings from "@saleor/hooks/useListSettings";
|
|||
import useNavigator from "@saleor/hooks/useNavigator";
|
||||
import { usePaginationReset } from "@saleor/hooks/usePaginationReset";
|
||||
import usePaginator, {
|
||||
createPaginationState
|
||||
createPaginationState,
|
||||
PaginatorContext
|
||||
} from "@saleor/hooks/usePaginator";
|
||||
import { maybe } from "@saleor/misc";
|
||||
import { ListViews } from "@saleor/types";
|
||||
|
|
@ -43,7 +44,6 @@ interface PluginsListProps {
|
|||
|
||||
export const PluginsList: React.FC<PluginsListProps> = ({ params }) => {
|
||||
const navigate = useNavigator();
|
||||
const paginate = usePaginator();
|
||||
const { updateListSettings, settings } = useListSettings(
|
||||
ListViews.PLUGINS_LIST
|
||||
);
|
||||
|
|
@ -103,11 +103,11 @@ export const PluginsList: React.FC<PluginsListProps> = ({ params }) => {
|
|||
handleTabChange(tabs.length + 1);
|
||||
};
|
||||
|
||||
const { loadNextPage, loadPreviousPage, pageInfo } = paginate(
|
||||
maybe(() => data.plugins.pageInfo),
|
||||
const paginationValues = usePaginator({
|
||||
pageInfo: maybe(() => data.plugins.pageInfo),
|
||||
paginationState,
|
||||
params
|
||||
);
|
||||
queryString: params
|
||||
});
|
||||
|
||||
const handleSort = createSortHandler(navigate, pluginListUrl, params);
|
||||
const channelsSearchWithLoadMoreProps = useChannelsSearchWithLoadMore();
|
||||
|
|
@ -115,7 +115,7 @@ export const PluginsList: React.FC<PluginsListProps> = ({ params }) => {
|
|||
const filterOpts = getFilterOpts(params, channelsSearchWithLoadMoreProps);
|
||||
|
||||
return (
|
||||
<>
|
||||
<PaginatorContext.Provider value={paginationValues}>
|
||||
<PluginsListPage
|
||||
currentTab={currentTab}
|
||||
disabled={loading}
|
||||
|
|
@ -123,14 +123,11 @@ export const PluginsList: React.FC<PluginsListProps> = ({ params }) => {
|
|||
initialSearch={params.query || ""}
|
||||
settings={settings}
|
||||
plugins={mapEdgesToItems(data?.plugins)}
|
||||
pageInfo={pageInfo}
|
||||
sort={getSortParams(params)}
|
||||
tabs={getFilterTabs().map(tab => tab.name)}
|
||||
onAll={resetFilters}
|
||||
onFilterChange={changeFilters}
|
||||
onSearchChange={handleSearchChange}
|
||||
onNextPage={loadNextPage}
|
||||
onPreviousPage={loadPreviousPage}
|
||||
onSort={handleSort}
|
||||
onTabSave={() => openModal("save-search")}
|
||||
onTabDelete={() => openModal("delete-search")}
|
||||
|
|
@ -150,7 +147,7 @@ export const PluginsList: React.FC<PluginsListProps> = ({ params }) => {
|
|||
onSubmit={handleFilterTabDelete}
|
||||
tabName={maybe(() => tabs[currentTab - 1].name, "...")}
|
||||
/>
|
||||
</>
|
||||
</PaginatorContext.Provider>
|
||||
);
|
||||
};
|
||||
|
||||
|
|
|
|||
|
|
@ -10,7 +10,7 @@ import ResponsiveTable from "@saleor/components/ResponsiveTable";
|
|||
import Skeleton from "@saleor/components/Skeleton";
|
||||
import TableCellHeader from "@saleor/components/TableCellHeader";
|
||||
import TableHead from "@saleor/components/TableHead";
|
||||
import TablePagination from "@saleor/components/TablePagination";
|
||||
import { TablePaginationWithContext } from "@saleor/components/TablePagination";
|
||||
import TableRowLink from "@saleor/components/TableRowLink";
|
||||
import { ProductTypeFragment } from "@saleor/graphql";
|
||||
import { makeStyles } from "@saleor/macaw-ui";
|
||||
|
|
@ -61,9 +61,6 @@ const ProductTypeList: React.FC<ProductTypeListProps> = props => {
|
|||
const {
|
||||
disabled,
|
||||
productTypes,
|
||||
pageInfo,
|
||||
onNextPage,
|
||||
onPreviousPage,
|
||||
onSort,
|
||||
isChecked,
|
||||
selected,
|
||||
|
|
@ -127,15 +124,7 @@ const ProductTypeList: React.FC<ProductTypeListProps> = props => {
|
|||
</TableHead>
|
||||
<TableFooter>
|
||||
<TableRow>
|
||||
<TablePagination
|
||||
colSpan={numberOfColumns}
|
||||
hasNextPage={pageInfo && !disabled ? pageInfo.hasNextPage : false}
|
||||
onNextPage={onNextPage}
|
||||
hasPreviousPage={
|
||||
pageInfo && !disabled ? pageInfo.hasPreviousPage : false
|
||||
}
|
||||
onPreviousPage={onPreviousPage}
|
||||
/>
|
||||
<TablePaginationWithContext colSpan={numberOfColumns} />
|
||||
</TableRow>
|
||||
</TableFooter>
|
||||
<TableBody>
|
||||
|
|
|
|||
|
|
@ -12,7 +12,8 @@ import useNavigator from "@saleor/hooks/useNavigator";
|
|||
import useNotifier from "@saleor/hooks/useNotifier";
|
||||
import { usePaginationReset } from "@saleor/hooks/usePaginationReset";
|
||||
import usePaginator, {
|
||||
createPaginationState
|
||||
createPaginationState,
|
||||
PaginatorContext
|
||||
} from "@saleor/hooks/usePaginator";
|
||||
import { commonMessages } from "@saleor/intl";
|
||||
import { DeleteIcon, IconButton } from "@saleor/macaw-ui";
|
||||
|
|
@ -53,7 +54,6 @@ interface ProductTypeListProps {
|
|||
export const ProductTypeList: React.FC<ProductTypeListProps> = ({ params }) => {
|
||||
const navigate = useNavigator();
|
||||
const notify = useNotifier();
|
||||
const paginate = usePaginator();
|
||||
const {
|
||||
isSelected,
|
||||
listElements: selectedProductTypes,
|
||||
|
|
@ -123,11 +123,11 @@ export const ProductTypeList: React.FC<ProductTypeListProps> = ({ params }) => {
|
|||
handleTabChange(tabs.length + 1);
|
||||
};
|
||||
|
||||
const { loadNextPage, loadPreviousPage, pageInfo } = paginate(
|
||||
maybe(() => data.productTypes.pageInfo),
|
||||
const paginationValues = usePaginator({
|
||||
pageInfo: maybe(() => data.productTypes.pageInfo),
|
||||
paginationState,
|
||||
params
|
||||
);
|
||||
queryString: params
|
||||
});
|
||||
|
||||
const handleSort = createSortHandler(navigate, productTypeListUrl, params);
|
||||
|
||||
|
|
@ -169,7 +169,7 @@ export const ProductTypeList: React.FC<ProductTypeListProps> = ({ params }) => {
|
|||
});
|
||||
|
||||
return (
|
||||
<>
|
||||
<PaginatorContext.Provider value={paginationValues}>
|
||||
<ProductTypeListPage
|
||||
currentTab={currentTab}
|
||||
filterOpts={getFilterOpts(params)}
|
||||
|
|
@ -183,9 +183,6 @@ export const ProductTypeList: React.FC<ProductTypeListProps> = ({ params }) => {
|
|||
tabs={tabs.map(tab => tab.name)}
|
||||
disabled={loading}
|
||||
productTypes={productTypesData}
|
||||
pageInfo={pageInfo}
|
||||
onNextPage={loadNextPage}
|
||||
onPreviousPage={loadPreviousPage}
|
||||
onSort={handleSort}
|
||||
isChecked={isSelected}
|
||||
selected={selectedProductTypes.length}
|
||||
|
|
@ -229,7 +226,7 @@ export const ProductTypeList: React.FC<ProductTypeListProps> = ({ params }) => {
|
|||
onSubmit={handleTabDelete}
|
||||
tabName={maybe(() => tabs[currentTab - 1].name, "...")}
|
||||
/>
|
||||
</>
|
||||
</PaginatorContext.Provider>
|
||||
);
|
||||
};
|
||||
ProductTypeList.displayName = "ProductTypeList";
|
||||
|
|
|
|||
|
|
@ -19,7 +19,7 @@ import TableCellAvatar from "@saleor/components/TableCellAvatar";
|
|||
import { AVATAR_MARGIN } from "@saleor/components/TableCellAvatar/Avatar";
|
||||
import TableCellHeader from "@saleor/components/TableCellHeader";
|
||||
import TableHead from "@saleor/components/TableHead";
|
||||
import TablePagination from "@saleor/components/TablePagination";
|
||||
import { TablePaginationWithContext } from "@saleor/components/TablePagination";
|
||||
import TableRowLink from "@saleor/components/TableRowLink";
|
||||
import TooltipTableCellHeader from "@saleor/components/TooltipTableCellHeader";
|
||||
import { commonTooltipMessages } from "@saleor/components/TooltipTableCellHeader/messages";
|
||||
|
|
@ -137,15 +137,12 @@ export const ProductList: React.FC<ProductListProps> = props => {
|
|||
disabled,
|
||||
isChecked,
|
||||
gridAttributes,
|
||||
pageInfo,
|
||||
products,
|
||||
selected,
|
||||
sort,
|
||||
toggle,
|
||||
toggleAll,
|
||||
toolbar,
|
||||
onNextPage,
|
||||
onPreviousPage,
|
||||
onUpdateListSettings,
|
||||
onSort,
|
||||
selectedChannelId,
|
||||
|
|
@ -323,16 +320,10 @@ export const ProductList: React.FC<ProductListProps> = props => {
|
|||
</TableHead>
|
||||
<TableFooter>
|
||||
<TableRow>
|
||||
<TablePagination
|
||||
<TablePaginationWithContext
|
||||
colSpan={numberOfColumns}
|
||||
settings={settings}
|
||||
hasNextPage={pageInfo && !disabled ? pageInfo.hasNextPage : false}
|
||||
onNextPage={onNextPage}
|
||||
onUpdateListSettings={onUpdateListSettings}
|
||||
hasPreviousPage={
|
||||
pageInfo && !disabled ? pageInfo.hasPreviousPage : false
|
||||
}
|
||||
onPreviousPage={onPreviousPage}
|
||||
/>
|
||||
</TableRow>
|
||||
</TableFooter>
|
||||
|
|
|
|||
|
|
@ -1,5 +1,6 @@
|
|||
import { ProductListAttributeFragment } from "@saleor/graphql";
|
||||
import Decorator from "@saleor/storybook/Decorator";
|
||||
import { PaginatorContextDecorator } from "@saleor/storybook/PaginatorContextDecorator";
|
||||
import { storiesOf } from "@storybook/react";
|
||||
import React from "react";
|
||||
|
||||
|
|
@ -85,6 +86,7 @@ const attributes: ProductListAttributeFragment[] = [
|
|||
|
||||
storiesOf("Views / Products / Product list / Attribute display", module)
|
||||
.addDecorator(Decorator)
|
||||
.addDecorator(PaginatorContextDecorator)
|
||||
.add("default", () => (
|
||||
<ProductListAttribute
|
||||
attribute="attribute:3"
|
||||
|
|
|
|||
|
|
@ -34,7 +34,8 @@ import useNavigator from "@saleor/hooks/useNavigator";
|
|||
import useNotifier from "@saleor/hooks/useNotifier";
|
||||
import { usePaginationReset } from "@saleor/hooks/usePaginationReset";
|
||||
import usePaginator, {
|
||||
createPaginationState
|
||||
createPaginationState,
|
||||
PaginatorContext
|
||||
} from "@saleor/hooks/usePaginator";
|
||||
import { commonMessages } from "@saleor/intl";
|
||||
import { DeleteIcon, IconButton } from "@saleor/macaw-ui";
|
||||
|
|
@ -86,7 +87,6 @@ interface ProductListProps {
|
|||
export const ProductList: React.FC<ProductListProps> = ({ params }) => {
|
||||
const navigate = useNavigator();
|
||||
const notify = useNotifier();
|
||||
const paginate = usePaginator();
|
||||
const { queue } = useBackgroundTask();
|
||||
const { isSelected, listElements, reset, toggle, toggleAll } = useBulkActions(
|
||||
params.ids
|
||||
|
|
@ -341,14 +341,14 @@ export const ProductList: React.FC<ProductListProps> = ({ params }) => {
|
|||
channelOpts
|
||||
);
|
||||
|
||||
const { loadNextPage, loadPreviousPage, pageInfo } = paginate(
|
||||
data?.products?.pageInfo,
|
||||
const paginationValues = usePaginator({
|
||||
pageInfo: data?.products?.pageInfo,
|
||||
paginationState,
|
||||
params
|
||||
);
|
||||
queryString: params
|
||||
});
|
||||
|
||||
return (
|
||||
<>
|
||||
<PaginatorContext.Provider value={paginationValues}>
|
||||
<ProductListPage
|
||||
activeAttributeSortId={params.attributeId}
|
||||
sort={{
|
||||
|
|
@ -387,10 +387,7 @@ export const ProductList: React.FC<ProductListProps> = ({ params }) => {
|
|||
products={mapEdgesToItems(data?.products)}
|
||||
onColumnQueryChange={availableInGridAttributesOpts.search}
|
||||
onFetchMore={availableInGridAttributesOpts.loadMore}
|
||||
onNextPage={loadNextPage}
|
||||
onPreviousPage={loadPreviousPage}
|
||||
onUpdateListSettings={updateListSettings}
|
||||
pageInfo={pageInfo}
|
||||
onAll={resetFilters}
|
||||
toolbar={
|
||||
<IconButton
|
||||
|
|
@ -497,7 +494,7 @@ export const ProductList: React.FC<ProductListProps> = ({ params }) => {
|
|||
onSubmit={handleFilterTabDelete}
|
||||
tabName={maybe(() => tabs[currentTab - 1].name, "...")}
|
||||
/>
|
||||
</>
|
||||
</PaginatorContext.Provider>
|
||||
);
|
||||
};
|
||||
export default ProductList;
|
||||
|
|
|
|||
|
|
@ -1,5 +1,6 @@
|
|||
import { shippingZone } from "@saleor/shipping/fixtures";
|
||||
import Decorator from "@saleor/storybook//Decorator";
|
||||
import { PaginatorContextDecorator } from "@saleor/storybook/PaginatorContextDecorator";
|
||||
import { mapEdgesToItems } from "@saleor/utils/maps";
|
||||
import { storiesOf } from "@storybook/react";
|
||||
import React from "react";
|
||||
|
|
@ -15,14 +16,8 @@ const products = mapEdgesToItems(
|
|||
const props: ShippingMethodProductsProps = {
|
||||
disabled: false,
|
||||
isChecked: () => undefined,
|
||||
onNextPage: () => undefined,
|
||||
onPreviousPage: () => undefined,
|
||||
onProductAssign: () => undefined,
|
||||
onProductUnassign: () => undefined,
|
||||
pageInfo: {
|
||||
hasNextPage: false,
|
||||
hasPreviousPage: false
|
||||
},
|
||||
products,
|
||||
selected: products.length,
|
||||
toggle: () => undefined,
|
||||
|
|
@ -32,4 +27,5 @@ const props: ShippingMethodProductsProps = {
|
|||
|
||||
storiesOf("Shipping / ShippingMethodProducts", module)
|
||||
.addDecorator(Decorator)
|
||||
.addDecorator(PaginatorContextDecorator)
|
||||
.add("default", () => <ShippingMethodProducts {...props} />);
|
||||
|
|
|
|||
|
|
@ -13,7 +13,7 @@ import ResponsiveTable from "@saleor/components/ResponsiveTable";
|
|||
import Skeleton from "@saleor/components/Skeleton";
|
||||
import TableCellAvatar from "@saleor/components/TableCellAvatar";
|
||||
import TableHead from "@saleor/components/TableHead";
|
||||
import TablePagination from "@saleor/components/TablePagination";
|
||||
import { TablePaginationWithContext } from "@saleor/components/TablePagination";
|
||||
import { ShippingZoneQuery } from "@saleor/graphql";
|
||||
import { DeleteIcon, IconButton, makeStyles } from "@saleor/macaw-ui";
|
||||
import { renderCollection } from "@saleor/misc";
|
||||
|
|
@ -58,10 +58,7 @@ const numberOfColumns = 3;
|
|||
const ShippingMethodProducts: React.FC<ShippingMethodProductsProps> = props => {
|
||||
const {
|
||||
disabled,
|
||||
pageInfo,
|
||||
products,
|
||||
onNextPage,
|
||||
onPreviousPage,
|
||||
onProductAssign,
|
||||
onProductUnassign,
|
||||
isChecked,
|
||||
|
|
@ -112,16 +109,9 @@ const ShippingMethodProducts: React.FC<ShippingMethodProductsProps> = props => {
|
|||
</TableHead>
|
||||
<TableFooter>
|
||||
<TableRow>
|
||||
<TablePagination
|
||||
<TablePaginationWithContext
|
||||
colSpan={numberOfColumns}
|
||||
hasNextPage={
|
||||
pageInfo && !disabled ? pageInfo.hasNextPage : false
|
||||
}
|
||||
onNextPage={onNextPage}
|
||||
hasPreviousPage={
|
||||
pageInfo && !disabled ? pageInfo.hasPreviousPage : false
|
||||
}
|
||||
onPreviousPage={onPreviousPage}
|
||||
disabled={disabled}
|
||||
/>
|
||||
</TableRow>
|
||||
</TableFooter>
|
||||
|
|
|
|||
|
|
@ -1,6 +1,7 @@
|
|||
import { ShippingMethodTypeEnum } from "@saleor/graphql";
|
||||
import { shippingZone } from "@saleor/shipping/fixtures";
|
||||
import Decorator from "@saleor/storybook//Decorator";
|
||||
import { PaginatorContextDecorator } from "@saleor/storybook/PaginatorContextDecorator";
|
||||
import { storiesOf } from "@storybook/react";
|
||||
import React from "react";
|
||||
|
||||
|
|
@ -47,11 +48,9 @@ const props: ShippingZoneRatesPageProps = {
|
|||
isChecked: () => undefined,
|
||||
onChannelsChange: () => undefined,
|
||||
onDelete: () => undefined,
|
||||
onNextPage: () => undefined,
|
||||
onPostalCodeAssign: () => undefined,
|
||||
onPostalCodeInclusionChange: () => undefined,
|
||||
onPostalCodeUnassign: () => undefined,
|
||||
onPreviousPage: () => undefined,
|
||||
onProductAssign: () => undefined,
|
||||
onProductUnassign: () => undefined,
|
||||
onSubmit: () => undefined,
|
||||
|
|
@ -70,6 +69,7 @@ const props: ShippingZoneRatesPageProps = {
|
|||
|
||||
storiesOf("Views / Shipping / Shipping rate", module)
|
||||
.addDecorator(Decorator)
|
||||
.addDecorator(PaginatorContextDecorator)
|
||||
.add("create price rate", () => <ShippingZoneRatesPage {...props} />)
|
||||
.add("create weight rate", () => (
|
||||
<ShippingZoneRatesPage {...props} variant={ShippingMethodTypeEnum.WEIGHT} />
|
||||
|
|
|
|||
|
|
@ -12,7 +12,7 @@ import ResponsiveTable from "@saleor/components/ResponsiveTable";
|
|||
import Skeleton from "@saleor/components/Skeleton";
|
||||
import { TableButtonWrapper } from "@saleor/components/TableButtonWrapper/TableButtonWrapper";
|
||||
import TableHead from "@saleor/components/TableHead";
|
||||
import TablePagination from "@saleor/components/TablePagination";
|
||||
import { TablePaginationWithContext } from "@saleor/components/TablePagination";
|
||||
import TableRowLink from "@saleor/components/TableRowLink";
|
||||
import { ShippingZoneFragment } from "@saleor/graphql";
|
||||
import { DeleteIcon, IconButton, makeStyles } from "@saleor/macaw-ui";
|
||||
|
|
@ -54,11 +54,8 @@ const ShippingZonesList: React.FC<ShippingZonesListProps> = props => {
|
|||
const {
|
||||
disabled,
|
||||
settings,
|
||||
onNextPage,
|
||||
onPreviousPage,
|
||||
onRemove,
|
||||
onUpdateListSettings,
|
||||
pageInfo,
|
||||
shippingZones,
|
||||
isChecked,
|
||||
selected,
|
||||
|
|
@ -118,16 +115,11 @@ const ShippingZonesList: React.FC<ShippingZonesListProps> = props => {
|
|||
</TableHead>
|
||||
<TableFooter>
|
||||
<TableRow>
|
||||
<TablePagination
|
||||
<TablePaginationWithContext
|
||||
colSpan={numberOfColumns}
|
||||
settings={settings}
|
||||
hasNextPage={pageInfo && !disabled ? pageInfo.hasNextPage : false}
|
||||
onNextPage={onNextPage}
|
||||
disabled={disabled}
|
||||
onUpdateListSettings={onUpdateListSettings}
|
||||
hasPreviousPage={
|
||||
pageInfo && !disabled ? pageInfo.hasPreviousPage : false
|
||||
}
|
||||
onPreviousPage={onPreviousPage}
|
||||
/>
|
||||
</TableRow>
|
||||
</TableFooter>
|
||||
|
|
|
|||
|
|
@ -25,6 +25,7 @@ import useLocalPaginator, {
|
|||
} from "@saleor/hooks/useLocalPaginator";
|
||||
import useNavigator from "@saleor/hooks/useNavigator";
|
||||
import useNotifier from "@saleor/hooks/useNotifier";
|
||||
import { PaginatorContext } from "@saleor/hooks/usePaginator";
|
||||
import { commonMessages, sectionNames } from "@saleor/intl";
|
||||
import {
|
||||
getById,
|
||||
|
|
@ -107,7 +108,7 @@ export const RateUpdate: React.FC<RateUpdateProps> = ({
|
|||
[]
|
||||
);
|
||||
|
||||
const { loadNextPage, loadPreviousPage, pageInfo } = paginate(
|
||||
const { pageInfo, ...paginationValues } = paginate(
|
||||
rate?.excludedProducts.pageInfo,
|
||||
paginationState
|
||||
);
|
||||
|
|
@ -314,7 +315,7 @@ export const RateUpdate: React.FC<RateUpdateProps> = ({
|
|||
};
|
||||
|
||||
return (
|
||||
<>
|
||||
<PaginatorContext.Provider value={{ ...pageInfo, ...paginationValues }}>
|
||||
<WindowTitle title={intl.formatMessage(sectionNames.shipping)} />
|
||||
{!!allChannels?.length && (
|
||||
<ChannelsAvailabilityDialog
|
||||
|
|
@ -397,9 +398,6 @@ export const RateUpdate: React.FC<RateUpdateProps> = ({
|
|||
selected={listElements.length}
|
||||
toggle={toggle}
|
||||
toggleAll={toggleAll}
|
||||
onNextPage={loadNextPage}
|
||||
onPreviousPage={loadPreviousPage}
|
||||
pageInfo={pageInfo}
|
||||
toolbar={
|
||||
<Button onClick={() => openModal("unassign-product")}>
|
||||
<FormattedMessage
|
||||
|
|
@ -420,7 +418,7 @@ export const RateUpdate: React.FC<RateUpdateProps> = ({
|
|||
onSubmit={code => onPostalCodeAssign(code)}
|
||||
open={params.action === "add-range"}
|
||||
/>
|
||||
</>
|
||||
</PaginatorContext.Provider>
|
||||
);
|
||||
};
|
||||
|
||||
|
|
|
|||
|
|
@ -13,7 +13,8 @@ import useNavigator from "@saleor/hooks/useNavigator";
|
|||
import useNotifier from "@saleor/hooks/useNotifier";
|
||||
import { usePaginationReset } from "@saleor/hooks/usePaginationReset";
|
||||
import usePaginator, {
|
||||
createPaginationState
|
||||
createPaginationState,
|
||||
PaginatorContext
|
||||
} from "@saleor/hooks/usePaginator";
|
||||
import useShop from "@saleor/hooks/useShop";
|
||||
import { commonMessages } from "@saleor/intl";
|
||||
|
|
@ -46,7 +47,6 @@ export const ShippingZonesList: React.FC<ShippingZonesListProps> = ({
|
|||
}) => {
|
||||
const navigate = useNavigator();
|
||||
const notify = useNotifier();
|
||||
const paginate = usePaginator();
|
||||
const shop = useShop();
|
||||
const { user } = useUser();
|
||||
const { isSelected, listElements, reset, toggle, toggleAll } = useBulkActions(
|
||||
|
|
@ -126,14 +126,14 @@ export const ShippingZonesList: React.FC<ShippingZonesListProps> = ({
|
|||
}
|
||||
});
|
||||
|
||||
const { loadNextPage, loadPreviousPage, pageInfo } = paginate(
|
||||
maybe(() => data.shippingZones.pageInfo),
|
||||
const paginationValues = usePaginator({
|
||||
pageInfo: maybe(() => data.shippingZones.pageInfo),
|
||||
paginationState,
|
||||
params
|
||||
);
|
||||
queryString: params
|
||||
});
|
||||
|
||||
return (
|
||||
<>
|
||||
<PaginatorContext.Provider value={paginationValues}>
|
||||
<ShippingZonesListPage
|
||||
defaultWeightUnit={shop?.defaultWeightUnit}
|
||||
settings={settings}
|
||||
|
|
@ -143,10 +143,7 @@ export const ShippingZonesList: React.FC<ShippingZonesListProps> = ({
|
|||
updateDefaultWeightUnitOpts.loading
|
||||
}
|
||||
shippingZones={mapEdgesToItems(data?.shippingZones)}
|
||||
pageInfo={pageInfo}
|
||||
onUpdateListSettings={updateListSettings}
|
||||
onNextPage={loadNextPage}
|
||||
onPreviousPage={loadPreviousPage}
|
||||
onRemove={id =>
|
||||
openModal("remove", {
|
||||
id
|
||||
|
|
@ -246,7 +243,7 @@ export const ShippingZonesList: React.FC<ShippingZonesListProps> = ({
|
|||
/>
|
||||
</DialogContentText>
|
||||
</ActionDialog>
|
||||
</>
|
||||
</PaginatorContext.Provider>
|
||||
);
|
||||
};
|
||||
ShippingZonesList.displayName = "ShippingZonesList";
|
||||
|
|
|
|||
|
|
@ -9,7 +9,7 @@ import {
|
|||
import ResponsiveTable from "@saleor/components/ResponsiveTable";
|
||||
import Skeleton from "@saleor/components/Skeleton";
|
||||
import TableCellHeader from "@saleor/components/TableCellHeader";
|
||||
import TablePagination from "@saleor/components/TablePagination";
|
||||
import { TablePaginationWithContext } from "@saleor/components/TablePagination";
|
||||
import TableRowLink from "@saleor/components/TableRowLink";
|
||||
import { StaffListQuery } from "@saleor/graphql";
|
||||
import { makeStyles } from "@saleor/macaw-ui";
|
||||
|
|
@ -82,11 +82,8 @@ const StaffList: React.FC<StaffListProps> = props => {
|
|||
const {
|
||||
settings,
|
||||
disabled,
|
||||
onNextPage,
|
||||
onPreviousPage,
|
||||
onUpdateListSettings,
|
||||
onSort,
|
||||
pageInfo,
|
||||
sort,
|
||||
staffMembers
|
||||
} = props;
|
||||
|
|
@ -132,18 +129,11 @@ const StaffList: React.FC<StaffListProps> = props => {
|
|||
</TableHead>
|
||||
<TableFooter>
|
||||
<TableRow>
|
||||
<TablePagination
|
||||
<TablePaginationWithContext
|
||||
colSpan={numberOfColumns}
|
||||
disabled={disabled}
|
||||
settings={settings}
|
||||
hasNextPage={
|
||||
pageInfo && !disabled ? pageInfo.hasNextPage : undefined
|
||||
}
|
||||
onNextPage={onNextPage}
|
||||
onUpdateListSettings={onUpdateListSettings}
|
||||
hasPreviousPage={
|
||||
pageInfo && !disabled ? pageInfo.hasPreviousPage : undefined
|
||||
}
|
||||
onPreviousPage={onPreviousPage}
|
||||
/>
|
||||
</TableRow>
|
||||
</TableFooter>
|
||||
|
|
|
|||
|
|
@ -11,6 +11,7 @@ import { StaffMemberStatus } from "@saleor/graphql";
|
|||
import { staffMembers } from "@saleor/staff/fixtures";
|
||||
import { StaffListUrlSortField } from "@saleor/staff/urls";
|
||||
import Decorator from "@saleor/storybook/Decorator";
|
||||
import { PaginatorContextDecorator } from "@saleor/storybook/PaginatorContextDecorator";
|
||||
import { storiesOf } from "@storybook/react";
|
||||
import React from "react";
|
||||
|
||||
|
|
@ -39,6 +40,7 @@ const props: StaffListPageProps = {
|
|||
|
||||
storiesOf("Views / Staff / Staff members", module)
|
||||
.addDecorator(Decorator)
|
||||
.addDecorator(PaginatorContextDecorator)
|
||||
.add("default", () => <StaffListPage {...props} />)
|
||||
.add("when loading", () => (
|
||||
<StaffListPage {...props} disabled={true} staffMembers={undefined} />
|
||||
|
|
|
|||
|
|
@ -11,7 +11,8 @@ import useNavigator from "@saleor/hooks/useNavigator";
|
|||
import useNotifier from "@saleor/hooks/useNotifier";
|
||||
import { usePaginationReset } from "@saleor/hooks/usePaginationReset";
|
||||
import usePaginator, {
|
||||
createPaginationState
|
||||
createPaginationState,
|
||||
PaginatorContext
|
||||
} from "@saleor/hooks/usePaginator";
|
||||
import { commonMessages } from "@saleor/intl";
|
||||
import { getStringOrPlaceholder } from "@saleor/misc";
|
||||
|
|
@ -55,7 +56,6 @@ interface StaffListProps {
|
|||
export const StaffList: React.FC<StaffListProps> = ({ params }) => {
|
||||
const navigate = useNavigator();
|
||||
const notify = useNotifier();
|
||||
const paginate = usePaginator();
|
||||
const { updateListSettings, settings } = useListSettings(
|
||||
ListViews.STAFF_MEMBERS_LIST
|
||||
);
|
||||
|
|
@ -94,11 +94,11 @@ export const StaffList: React.FC<StaffListProps> = ({ params }) => {
|
|||
}
|
||||
});
|
||||
|
||||
const { loadNextPage, loadPreviousPage, pageInfo } = paginate(
|
||||
staffQueryData?.staffUsers.pageInfo,
|
||||
const paginationValues = usePaginator({
|
||||
pageInfo: staffQueryData?.staffUsers.pageInfo,
|
||||
paginationState,
|
||||
params
|
||||
);
|
||||
queryString: params
|
||||
});
|
||||
|
||||
const handleSort = createSortHandler(navigate, staffListUrl, params);
|
||||
|
||||
|
|
@ -167,7 +167,7 @@ export const StaffList: React.FC<StaffListProps> = ({ params }) => {
|
|||
});
|
||||
|
||||
return (
|
||||
<>
|
||||
<PaginatorContext.Provider value={paginationValues}>
|
||||
<StaffListPage
|
||||
currentTab={currentTab}
|
||||
filterOpts={getFilterOpts(params)}
|
||||
|
|
@ -182,12 +182,9 @@ export const StaffList: React.FC<StaffListProps> = ({ params }) => {
|
|||
disabled={loading || addStaffMemberData.loading || limitOpts.loading}
|
||||
limits={limitOpts.data?.shop.limits}
|
||||
settings={settings}
|
||||
pageInfo={pageInfo}
|
||||
sort={getSortParams(params)}
|
||||
staffMembers={mapEdgesToItems(staffQueryData?.staffUsers)}
|
||||
onAdd={() => openModal("add")}
|
||||
onNextPage={loadNextPage}
|
||||
onPreviousPage={loadPreviousPage}
|
||||
onUpdateListSettings={updateListSettings}
|
||||
onSort={handleSort}
|
||||
/>
|
||||
|
|
@ -222,7 +219,7 @@ export const StaffList: React.FC<StaffListProps> = ({ params }) => {
|
|||
onSubmit={handleTabDelete}
|
||||
tabName={getStringOrPlaceholder(tabs[currentTab - 1]?.name)}
|
||||
/>
|
||||
</>
|
||||
</PaginatorContext.Provider>
|
||||
);
|
||||
};
|
||||
|
||||
|
|
|
|||
9
src/storybook/PaginatorContextDecorator.tsx
Normal file
9
src/storybook/PaginatorContextDecorator.tsx
Normal file
|
|
@ -0,0 +1,9 @@
|
|||
import { paginatorContextValues } from "@saleor/fixtures";
|
||||
import { PaginatorContext } from "@saleor/hooks/usePaginator";
|
||||
import React from "react";
|
||||
|
||||
export const PaginatorContextDecorator = storyFn => (
|
||||
<PaginatorContext.Provider value={paginatorContextValues}>
|
||||
{storyFn()}
|
||||
</PaginatorContext.Provider>
|
||||
);
|
||||
File diff suppressed because it is too large
Load diff
|
|
@ -11,6 +11,7 @@ import {
|
|||
sortPageProps,
|
||||
tabPageProps
|
||||
} from "@saleor/fixtures";
|
||||
import { PaginatorContextDecorator } from "@saleor/storybook/PaginatorContextDecorator";
|
||||
import { storiesOf } from "@storybook/react";
|
||||
import React from "react";
|
||||
|
||||
|
|
@ -50,6 +51,7 @@ const props: AttributeListPageProps = {
|
|||
|
||||
storiesOf("Views / Attributes / Attribute list", module)
|
||||
.addDecorator(Decorator)
|
||||
.addDecorator(PaginatorContextDecorator)
|
||||
.add("default", () => <AttributeListPage {...props} />)
|
||||
.add("loading", () => (
|
||||
<AttributeListPage {...props} attributes={undefined} disabled={true} />
|
||||
|
|
|
|||
|
|
@ -10,6 +10,7 @@ import {
|
|||
sortPageProps,
|
||||
tabPageProps
|
||||
} from "@saleor/fixtures";
|
||||
import { PaginatorContextDecorator } from "@saleor/storybook/PaginatorContextDecorator";
|
||||
import { storiesOf } from "@storybook/react";
|
||||
import React from "react";
|
||||
|
||||
|
|
@ -31,6 +32,7 @@ const categoryTableProps: CategoryTableProps = {
|
|||
|
||||
storiesOf("Views / Categories / Category list", module)
|
||||
.addDecorator(Decorator)
|
||||
.addDecorator(PaginatorContextDecorator)
|
||||
.add("default", () => <CategoryListPage {...categoryTableProps} />)
|
||||
.add("loading", () => (
|
||||
<CategoryListPage {...categoryTableProps} categories={undefined} />
|
||||
|
|
|
|||
|
|
@ -1,5 +1,6 @@
|
|||
import placeholderImage from "@assets/images/placeholder255x255.png";
|
||||
import { ProductErrorCode } from "@saleor/graphql";
|
||||
import { PaginatorContextDecorator } from "@saleor/storybook/PaginatorContextDecorator";
|
||||
import { mapEdgesToItems } from "@saleor/utils/maps";
|
||||
import { storiesOf } from "@storybook/react";
|
||||
import React from "react";
|
||||
|
|
@ -25,13 +26,7 @@ const updateProps: Omit<CategoryUpdatePageProps, "classes"> = {
|
|||
onDelete: () => undefined,
|
||||
onImageDelete: () => undefined,
|
||||
onImageUpload: () => undefined,
|
||||
onNextPage: undefined,
|
||||
onPreviousPage: undefined,
|
||||
onSubmit: () => undefined,
|
||||
pageInfo: {
|
||||
hasNextPage: true,
|
||||
hasPreviousPage: true
|
||||
},
|
||||
productListToolbar: null,
|
||||
products: mapEdgesToItems(category.products),
|
||||
saveButtonBarState: "default",
|
||||
|
|
@ -42,6 +37,7 @@ const updateProps: Omit<CategoryUpdatePageProps, "classes"> = {
|
|||
|
||||
storiesOf("Views / Categories / Update category", module)
|
||||
.addDecorator(Decorator)
|
||||
.addDecorator(PaginatorContextDecorator)
|
||||
.add("default", () => <CategoryUpdatePage {...updateProps} />)
|
||||
.add("products", () => (
|
||||
<CategoryUpdatePage
|
||||
|
|
|
|||
|
|
@ -2,6 +2,7 @@ import placeholderCollectionImage from "@assets/images/block1.jpg";
|
|||
import placeholderProductImage from "@assets/images/placeholder60x60.png";
|
||||
import { createCollectionChannelsData } from "@saleor/channels/utils";
|
||||
import { CollectionErrorCode } from "@saleor/graphql";
|
||||
import { PaginatorContextDecorator } from "@saleor/storybook/PaginatorContextDecorator";
|
||||
import { storiesOf } from "@storybook/react";
|
||||
import React from "react";
|
||||
|
||||
|
|
@ -40,6 +41,7 @@ const props: Omit<CollectionDetailsPageProps, "classes"> = {
|
|||
|
||||
storiesOf("Views / Collections / Collection detailsCollection details", module)
|
||||
.addDecorator(Decorator)
|
||||
.addDecorator(PaginatorContextDecorator)
|
||||
.add("default", () => <CollectionDetailsPage {...props} />)
|
||||
.add("loading", () => (
|
||||
<CollectionDetailsPage {...props} collection={undefined} disabled={true} />
|
||||
|
|
|
|||
|
|
@ -1,4 +1,5 @@
|
|||
import { CollectionListUrlSortField } from "@saleor/collections/urls";
|
||||
import { PaginatorContextDecorator } from "@saleor/storybook/PaginatorContextDecorator";
|
||||
import { storiesOf } from "@storybook/react";
|
||||
import React from "react";
|
||||
|
||||
|
|
@ -35,6 +36,7 @@ const props: CollectionListPageProps = {
|
|||
|
||||
storiesOf("Views / Collections / Collection list", module)
|
||||
.addDecorator(Decorator)
|
||||
.addDecorator(PaginatorContextDecorator)
|
||||
.add("default", () => <CollectionListPage {...props} />)
|
||||
.add("loading", () => (
|
||||
<CollectionListPage {...props} collections={undefined} disabled={true} />
|
||||
|
|
|
|||
|
|
@ -1,4 +1,5 @@
|
|||
import { CustomerListUrlSortField } from "@saleor/customers/urls";
|
||||
import { PaginatorContextDecorator } from "@saleor/storybook/PaginatorContextDecorator";
|
||||
import { storiesOf } from "@storybook/react";
|
||||
import React from "react";
|
||||
|
||||
|
|
@ -55,6 +56,7 @@ const CustomerListPage = props => (
|
|||
|
||||
storiesOf("Views / Customers / Customer list", module)
|
||||
.addDecorator(Decorator)
|
||||
.addDecorator(PaginatorContextDecorator)
|
||||
.add("default", () => <CustomerListPage {...props} />)
|
||||
.add("loading", () => (
|
||||
<CustomerListPage {...props} disabled={true} customers={undefined} />
|
||||
|
|
|
|||
|
|
@ -1,6 +1,7 @@
|
|||
import { channelsList } from "@saleor/channels/fixtures";
|
||||
import { createSaleChannels } from "@saleor/channels/utils";
|
||||
import { DiscountErrorCode } from "@saleor/graphql";
|
||||
import { PaginatorContextDecorator } from "@saleor/storybook/PaginatorContextDecorator";
|
||||
import { storiesOf } from "@storybook/react";
|
||||
import React from "react";
|
||||
|
||||
|
|
@ -27,8 +28,6 @@ const props: SaleDetailsPageProps = {
|
|||
onChannelsChange: () => undefined,
|
||||
onCollectionAssign: () => undefined,
|
||||
onCollectionUnassign: () => undefined,
|
||||
onNextPage: () => undefined,
|
||||
onPreviousPage: () => undefined,
|
||||
onProductAssign: () => undefined,
|
||||
onProductUnassign: () => undefined,
|
||||
onVariantAssign: () => undefined,
|
||||
|
|
@ -37,10 +36,6 @@ const props: SaleDetailsPageProps = {
|
|||
onSubmit: () => undefined,
|
||||
onTabClick: () => undefined,
|
||||
openChannelsModal: () => undefined,
|
||||
pageInfo: {
|
||||
hasNextPage: true,
|
||||
hasPreviousPage: false
|
||||
},
|
||||
productListToolbar: null,
|
||||
variantListToolbar: null,
|
||||
sale,
|
||||
|
|
@ -51,6 +46,7 @@ const props: SaleDetailsPageProps = {
|
|||
|
||||
storiesOf("Views / Discounts / Sale details", module)
|
||||
.addDecorator(Decorator)
|
||||
.addDecorator(PaginatorContextDecorator)
|
||||
.add("default", () => <SaleDetailsPage {...props} />)
|
||||
.add("loading", () => (
|
||||
<SaleDetailsPage {...props} sale={undefined} disabled={true} />
|
||||
|
|
|
|||
|
|
@ -1,5 +1,6 @@
|
|||
import { SaleListUrlSortField } from "@saleor/discounts/urls";
|
||||
import { DiscountStatusEnum, DiscountValueTypeEnum } from "@saleor/graphql";
|
||||
import { PaginatorContextDecorator } from "@saleor/storybook/PaginatorContextDecorator";
|
||||
import { storiesOf } from "@storybook/react";
|
||||
import React from "react";
|
||||
|
||||
|
|
@ -59,6 +60,7 @@ const props: SaleListPageProps = {
|
|||
|
||||
storiesOf("Views / Discounts / Sale list", module)
|
||||
.addDecorator(Decorator)
|
||||
.addDecorator(PaginatorContextDecorator)
|
||||
.add("default", () => <SaleListPage {...props} />)
|
||||
.add("loading", () => <SaleListPage {...props} sales={undefined} />)
|
||||
.add("no data", () => <SaleListPage {...props} sales={[]} />)
|
||||
|
|
|
|||
|
|
@ -1,6 +1,7 @@
|
|||
import { channelsList } from "@saleor/channels/fixtures";
|
||||
import { createChannelsDataWithDiscountPrice } from "@saleor/channels/utils";
|
||||
import { DiscountErrorCode } from "@saleor/graphql";
|
||||
import { PaginatorContextDecorator } from "@saleor/storybook/PaginatorContextDecorator";
|
||||
import { storiesOf } from "@storybook/react";
|
||||
import React from "react";
|
||||
|
||||
|
|
@ -48,6 +49,7 @@ const props: VoucherDetailsPageProps = {
|
|||
|
||||
storiesOf("Views / Discounts / Voucher details", module)
|
||||
.addDecorator(Decorator)
|
||||
.addDecorator(PaginatorContextDecorator)
|
||||
.add("default", () => <VoucherDetailsPage {...props} />)
|
||||
.add("loading", () => (
|
||||
<VoucherDetailsPage {...props} disabled={true} voucher={undefined} />
|
||||
|
|
|
|||
|
|
@ -1,5 +1,6 @@
|
|||
import { VoucherListUrlSortField } from "@saleor/discounts/urls";
|
||||
import { DiscountStatusEnum, VoucherDiscountType } from "@saleor/graphql";
|
||||
import { PaginatorContextDecorator } from "@saleor/storybook/PaginatorContextDecorator";
|
||||
import { storiesOf } from "@storybook/react";
|
||||
import React from "react";
|
||||
|
||||
|
|
@ -68,6 +69,7 @@ const props: VoucherListPageProps = {
|
|||
|
||||
storiesOf("Views / Discounts / Voucher list", module)
|
||||
.addDecorator(Decorator)
|
||||
.addDecorator(PaginatorContextDecorator)
|
||||
.add("default", () => <VoucherListPage {...props} />)
|
||||
.add("loading", () => <VoucherListPage {...props} vouchers={undefined} />)
|
||||
.add("no data", () => <VoucherListPage {...props} vouchers={[]} />)
|
||||
|
|
|
|||
|
|
@ -1,4 +1,5 @@
|
|||
import { MenuListUrlSortField } from "@saleor/navigation/urls";
|
||||
import { PaginatorContextDecorator } from "@saleor/storybook/PaginatorContextDecorator";
|
||||
import { storiesOf } from "@storybook/react";
|
||||
import React from "react";
|
||||
|
||||
|
|
@ -27,6 +28,7 @@ const props: MenuListPageProps = {
|
|||
|
||||
storiesOf("Views / Navigation / Menu list", module)
|
||||
.addDecorator(Decorator)
|
||||
.addDecorator(PaginatorContextDecorator)
|
||||
.add("default", () => <MenuListPage {...props} />)
|
||||
.add("loading", () => (
|
||||
<MenuListPage {...props} disabled={true} menus={undefined} />
|
||||
|
|
|
|||
|
|
@ -1,4 +1,5 @@
|
|||
import { OrderDraftListUrlSortField } from "@saleor/orders/urls";
|
||||
import { PaginatorContextDecorator } from "@saleor/storybook/PaginatorContextDecorator";
|
||||
import { storiesOf } from "@storybook/react";
|
||||
import React from "react";
|
||||
|
||||
|
|
@ -49,6 +50,7 @@ const props: OrderDraftListPageProps = {
|
|||
|
||||
storiesOf("Views / Orders / Draft order list", module)
|
||||
.addDecorator(Decorator)
|
||||
.addDecorator(PaginatorContextDecorator)
|
||||
.add("default", () => <OrderDraftListPage {...props} />)
|
||||
.add("loading", () => (
|
||||
<OrderDraftListPage {...props} disabled orders={undefined} />
|
||||
|
|
|
|||
|
|
@ -4,6 +4,7 @@ import OrderListPage, {
|
|||
OrderListPageProps
|
||||
} from "@saleor/orders/components/OrderListPage";
|
||||
import { OrderListUrlSortField } from "@saleor/orders/urls";
|
||||
import { PaginatorContextDecorator } from "@saleor/storybook/PaginatorContextDecorator";
|
||||
import { storiesOf } from "@storybook/react";
|
||||
import React from "react";
|
||||
|
||||
|
|
@ -83,6 +84,7 @@ const props: OrderListPageProps = {
|
|||
|
||||
storiesOf("Views / Orders / Order list", module)
|
||||
.addDecorator(Decorator)
|
||||
.addDecorator(PaginatorContextDecorator)
|
||||
.add("default", () => <OrderListPage {...props} />)
|
||||
.add("loading", () => (
|
||||
<OrderListPage
|
||||
|
|
|
|||
|
|
@ -1,4 +1,5 @@
|
|||
import { PageListUrlSortField } from "@saleor/pages/urls";
|
||||
import { PaginatorContextDecorator } from "@saleor/storybook/PaginatorContextDecorator";
|
||||
import { storiesOf } from "@storybook/react";
|
||||
import React from "react";
|
||||
|
||||
|
|
@ -33,6 +34,7 @@ const props: PageListPageProps = {
|
|||
|
||||
storiesOf("Views / Pages / Page list", module)
|
||||
.addDecorator(Decorator)
|
||||
.addDecorator(PaginatorContextDecorator)
|
||||
.add("default", () => <PageListPage {...props} />)
|
||||
.add("loading", () => (
|
||||
<PageListPage {...props} disabled={true} pages={undefined} />
|
||||
|
|
|
|||
|
|
@ -1,5 +1,6 @@
|
|||
import { PluginConfigurationType } from "@saleor/graphql";
|
||||
import { PluginListUrlSortField } from "@saleor/plugins/urls";
|
||||
import { PaginatorContextDecorator } from "@saleor/storybook/PaginatorContextDecorator";
|
||||
import { storiesOf } from "@storybook/react";
|
||||
import React from "react";
|
||||
|
||||
|
|
@ -52,6 +53,7 @@ const props: PluginsListPageProps = {
|
|||
|
||||
storiesOf("Views / Plugins / Plugin list", module)
|
||||
.addDecorator(Decorator)
|
||||
.addDecorator(PaginatorContextDecorator)
|
||||
.add("default", () => <PluginsListPage {...props} />)
|
||||
.add("loading", () => (
|
||||
<PluginsListPage {...props} disabled={true} plugins={undefined} />
|
||||
|
|
|
|||
|
|
@ -1,5 +1,6 @@
|
|||
import { ProductTypeConfigurable, ProductTypeEnum } from "@saleor/graphql";
|
||||
import { ProductTypeListUrlSortField } from "@saleor/productTypes/urls";
|
||||
import { PaginatorContextDecorator } from "@saleor/storybook/PaginatorContextDecorator";
|
||||
import { storiesOf } from "@storybook/react";
|
||||
import React from "react";
|
||||
|
||||
|
|
@ -43,6 +44,7 @@ const props: ProductTypeListPageProps = {
|
|||
|
||||
storiesOf("Views / Product types / Product types list", module)
|
||||
.addDecorator(Decorator)
|
||||
.addDecorator(PaginatorContextDecorator)
|
||||
.add("default", () => <ProductTypeListPage {...props} />)
|
||||
.add("loading", () => (
|
||||
<ProductTypeListPage {...props} disabled={true} productTypes={undefined} />
|
||||
|
|
|
|||
|
|
@ -4,6 +4,7 @@ import { products as productListFixture } from "@saleor/products/fixtures";
|
|||
import { ProductListUrlSortField } from "@saleor/products/urls";
|
||||
import { productListFilterOpts } from "@saleor/products/views/ProductList/fixtures";
|
||||
import { attributes } from "@saleor/productTypes/fixtures";
|
||||
import { PaginatorContextDecorator } from "@saleor/storybook/PaginatorContextDecorator";
|
||||
import { ListViews } from "@saleor/types";
|
||||
import { storiesOf } from "@storybook/react";
|
||||
import React from "react";
|
||||
|
|
@ -57,6 +58,7 @@ const props: ProductListPageProps = {
|
|||
|
||||
storiesOf("Views / Products / Product list", module)
|
||||
.addDecorator(Decorator)
|
||||
.addDecorator(PaginatorContextDecorator)
|
||||
.add("default", () => <ProductListPage {...props} />)
|
||||
.add("loading", () => (
|
||||
<ProductListPage
|
||||
|
|
|
|||
|
|
@ -1,4 +1,5 @@
|
|||
import { WeightUnitsEnum } from "@saleor/graphql";
|
||||
import { PaginatorContextDecorator } from "@saleor/storybook/PaginatorContextDecorator";
|
||||
import { storiesOf } from "@storybook/react";
|
||||
import React from "react";
|
||||
|
||||
|
|
@ -25,6 +26,7 @@ const props: ShippingZonesListPageProps = {
|
|||
|
||||
storiesOf("Views / Shipping / Shipping zones list", module)
|
||||
.addDecorator(Decorator)
|
||||
.addDecorator(PaginatorContextDecorator)
|
||||
.add("default", () => <ShippingZonesListPage {...props} />)
|
||||
.add("loading", () => (
|
||||
<ShippingZonesListPage
|
||||
|
|
|
|||
|
|
@ -1,4 +1,5 @@
|
|||
import { LanguageCodeEnum } from "@saleor/graphql";
|
||||
import { PaginatorContextDecorator } from "@saleor/storybook/PaginatorContextDecorator";
|
||||
import { storiesOf } from "@storybook/react";
|
||||
import React from "react";
|
||||
|
||||
|
|
@ -33,6 +34,7 @@ const props: TranslationsEntitiesListPageProps = {
|
|||
|
||||
storiesOf("Views / Translations / Entity list", module)
|
||||
.addDecorator(Decorator)
|
||||
.addDecorator(PaginatorContextDecorator)
|
||||
.add("default", () => (
|
||||
<TranslationsEntitiesListPage {...props}>
|
||||
<TranslationsEntitiesList
|
||||
|
|
@ -50,12 +52,6 @@ storiesOf("Views / Translations / Entity list", module)
|
|||
}
|
||||
]}
|
||||
getRowHref={() => ""}
|
||||
onNextPage={() => undefined}
|
||||
onPreviousPage={() => undefined}
|
||||
pageInfo={{
|
||||
hasNextPage: true,
|
||||
hasPreviousPage: false
|
||||
}}
|
||||
/>
|
||||
</TranslationsEntitiesListPage>
|
||||
));
|
||||
|
|
|
|||
|
|
@ -5,7 +5,7 @@ import CardTitle from "@saleor/components/CardTitle";
|
|||
import Grid from "@saleor/components/Grid";
|
||||
import Hr from "@saleor/components/Hr";
|
||||
import Skeleton from "@saleor/components/Skeleton";
|
||||
import TablePagination from "@saleor/components/TablePagination";
|
||||
import { TablePaginationWithContext } from "@saleor/components/TablePagination";
|
||||
import { SubmitPromise } from "@saleor/hooks/useForm";
|
||||
import { buttonMessages } from "@saleor/intl";
|
||||
import {
|
||||
|
|
@ -257,20 +257,8 @@ const TranslationFields: React.FC<TranslationFieldsProps> = props => {
|
|||
))}
|
||||
</Grid>
|
||||
{pagination && (
|
||||
<TablePagination
|
||||
<TablePaginationWithContext
|
||||
colSpan={numberOfColumns}
|
||||
hasNextPage={
|
||||
pagination.pageInfo && !disabled
|
||||
? pagination.pageInfo.hasNextPage
|
||||
: false
|
||||
}
|
||||
onNextPage={pagination.onNextPage}
|
||||
hasPreviousPage={
|
||||
pagination.pageInfo && !disabled
|
||||
? pagination.pageInfo.hasPreviousPage
|
||||
: false
|
||||
}
|
||||
onPreviousPage={pagination.onPreviousPage}
|
||||
settings={pagination.settings}
|
||||
onUpdateListSettings={pagination.onUpdateListSettings}
|
||||
component="div"
|
||||
|
|
|
|||
|
|
@ -29,12 +29,6 @@ export interface TranslationsAttributesPageProps
|
|||
data: AttributeTranslationDetailsFragment;
|
||||
settings?: ListSettings;
|
||||
onUpdateListSettings?: ListSettingsUpdate;
|
||||
pageInfo: {
|
||||
hasNextPage: boolean;
|
||||
hasPreviousPage: boolean;
|
||||
};
|
||||
onNextPage: () => void;
|
||||
onPreviousPage: () => void;
|
||||
}
|
||||
|
||||
export const fieldNames = {
|
||||
|
|
@ -55,10 +49,7 @@ const TranslationsAttributesPage: React.FC<TranslationsAttributesPageProps> = ({
|
|||
onEdit,
|
||||
onSubmit,
|
||||
settings,
|
||||
onUpdateListSettings,
|
||||
pageInfo,
|
||||
onNextPage,
|
||||
onPreviousPage
|
||||
onUpdateListSettings
|
||||
}) => {
|
||||
const intl = useIntl();
|
||||
|
||||
|
|
@ -134,10 +125,7 @@ const TranslationsAttributesPage: React.FC<TranslationsAttributesPageProps> = ({
|
|||
richTextResetKey={languageCode}
|
||||
pagination={{
|
||||
settings,
|
||||
onUpdateListSettings,
|
||||
pageInfo,
|
||||
onNextPage,
|
||||
onPreviousPage
|
||||
onUpdateListSettings
|
||||
}}
|
||||
onEdit={onEdit}
|
||||
onDiscard={onDiscard}
|
||||
|
|
|
|||
|
|
@ -7,7 +7,7 @@ import {
|
|||
} from "@material-ui/core";
|
||||
import ResponsiveTable from "@saleor/components/ResponsiveTable";
|
||||
import Skeleton from "@saleor/components/Skeleton";
|
||||
import TablePagination from "@saleor/components/TablePagination";
|
||||
import { TablePaginationWithContext } from "@saleor/components/TablePagination";
|
||||
import TableRowLink from "@saleor/components/TableRowLink";
|
||||
import { makeStyles } from "@saleor/macaw-ui";
|
||||
import classNames from "classnames";
|
||||
|
|
@ -46,14 +46,7 @@ const useStyles = makeStyles(
|
|||
{ name: "TranslationsEntitiesList" }
|
||||
);
|
||||
const TranslationsEntitiesList: React.FC<TranslationsEntitiesListProps> = props => {
|
||||
const {
|
||||
disabled,
|
||||
entities,
|
||||
onNextPage,
|
||||
onPreviousPage,
|
||||
getRowHref,
|
||||
pageInfo
|
||||
} = props;
|
||||
const { disabled, entities, getRowHref } = props;
|
||||
|
||||
const classes = useStyles(props);
|
||||
const intl = useIntl();
|
||||
|
|
@ -79,17 +72,7 @@ const TranslationsEntitiesList: React.FC<TranslationsEntitiesListProps> = props
|
|||
</TableHead>
|
||||
<TableFooter>
|
||||
<TableRow>
|
||||
<TablePagination
|
||||
colSpan={2}
|
||||
hasNextPage={
|
||||
pageInfo && !disabled ? pageInfo.hasNextPage : undefined
|
||||
}
|
||||
onNextPage={onNextPage}
|
||||
hasPreviousPage={
|
||||
pageInfo && !disabled ? pageInfo.hasPreviousPage : undefined
|
||||
}
|
||||
onPreviousPage={onPreviousPage}
|
||||
/>
|
||||
<TablePaginationWithContext colSpan={2} disabled={disabled} />
|
||||
</TableRow>
|
||||
</TableFooter>
|
||||
<TableBody>
|
||||
|
|
|
|||
|
|
@ -1,5 +1,5 @@
|
|||
import { useAttributeTranslationsQuery } from "@saleor/graphql";
|
||||
import usePaginator from "@saleor/hooks/usePaginator";
|
||||
import usePaginator, { PaginatorContext } from "@saleor/hooks/usePaginator";
|
||||
import TranslationsEntitiesList from "@saleor/translations/components/TranslationsEntitiesList";
|
||||
import {
|
||||
languageEntityUrl,
|
||||
|
|
@ -14,41 +14,38 @@ const TranslationsAttributeList: React.FC<TranslationsEntityListProps> = ({
|
|||
params,
|
||||
variables
|
||||
}) => {
|
||||
const paginate = usePaginator();
|
||||
|
||||
const { data, loading } = useAttributeTranslationsQuery({
|
||||
displayLoader: true,
|
||||
variables
|
||||
});
|
||||
|
||||
const { loadNextPage, loadPreviousPage, pageInfo } = paginate(
|
||||
data?.translations?.pageInfo,
|
||||
variables,
|
||||
params
|
||||
);
|
||||
const paginationValues = usePaginator({
|
||||
pageInfo: data?.translations?.pageInfo,
|
||||
paginationState: variables,
|
||||
queryString: params
|
||||
});
|
||||
|
||||
return (
|
||||
<TranslationsEntitiesList
|
||||
disabled={loading}
|
||||
entities={mapEdgesToItems(data?.translations)?.map(
|
||||
node =>
|
||||
node.__typename === "AttributeTranslatableContent" && {
|
||||
completion: null,
|
||||
id: node?.attribute.id,
|
||||
name: node?.attribute.name
|
||||
}
|
||||
)}
|
||||
getRowHref={id =>
|
||||
languageEntityUrl(
|
||||
variables.language,
|
||||
TranslatableEntities.attributes,
|
||||
id
|
||||
)
|
||||
}
|
||||
onNextPage={loadNextPage}
|
||||
onPreviousPage={loadPreviousPage}
|
||||
pageInfo={pageInfo}
|
||||
/>
|
||||
<PaginatorContext.Provider value={paginationValues}>
|
||||
<TranslationsEntitiesList
|
||||
disabled={loading}
|
||||
entities={mapEdgesToItems(data?.translations)?.map(
|
||||
node =>
|
||||
node.__typename === "AttributeTranslatableContent" && {
|
||||
completion: null,
|
||||
id: node?.attribute.id,
|
||||
name: node?.attribute.name
|
||||
}
|
||||
)}
|
||||
getRowHref={id =>
|
||||
languageEntityUrl(
|
||||
variables.language,
|
||||
TranslatableEntities.attributes,
|
||||
id
|
||||
)
|
||||
}
|
||||
/>
|
||||
</PaginatorContext.Provider>
|
||||
);
|
||||
};
|
||||
|
||||
|
|
|
|||
|
|
@ -1,5 +1,5 @@
|
|||
import { useCategoryTranslationsQuery } from "@saleor/graphql";
|
||||
import usePaginator from "@saleor/hooks/usePaginator";
|
||||
import usePaginator, { PaginatorContext } from "@saleor/hooks/usePaginator";
|
||||
import TranslationsEntitiesList from "@saleor/translations/components/TranslationsEntitiesList";
|
||||
import {
|
||||
languageEntityUrl,
|
||||
|
|
@ -15,49 +15,46 @@ const TranslationsCategoryList: React.FC<TranslationsEntityListProps> = ({
|
|||
params,
|
||||
variables
|
||||
}) => {
|
||||
const paginate = usePaginator();
|
||||
|
||||
const { data, loading } = useCategoryTranslationsQuery({
|
||||
displayLoader: true,
|
||||
variables
|
||||
});
|
||||
|
||||
const { loadNextPage, loadPreviousPage, pageInfo } = paginate(
|
||||
data?.translations?.pageInfo,
|
||||
variables,
|
||||
params
|
||||
);
|
||||
const paginationValues = usePaginator({
|
||||
pageInfo: data?.translations?.pageInfo,
|
||||
paginationState: variables,
|
||||
queryString: params
|
||||
});
|
||||
|
||||
return (
|
||||
<TranslationsEntitiesList
|
||||
disabled={loading}
|
||||
entities={mapEdgesToItems(data?.translations)?.map(
|
||||
node =>
|
||||
node.__typename === "CategoryTranslatableContent" && {
|
||||
completion: {
|
||||
current: sumCompleted([
|
||||
node.translation?.description,
|
||||
node.translation?.name,
|
||||
node.translation?.seoDescription,
|
||||
node.translation?.seoTitle
|
||||
]),
|
||||
max: 4
|
||||
},
|
||||
id: node?.category?.id,
|
||||
name: node?.category?.name
|
||||
}
|
||||
)}
|
||||
getRowHref={id =>
|
||||
languageEntityUrl(
|
||||
variables.language,
|
||||
TranslatableEntities.categories,
|
||||
id
|
||||
)
|
||||
}
|
||||
onNextPage={loadNextPage}
|
||||
onPreviousPage={loadPreviousPage}
|
||||
pageInfo={pageInfo}
|
||||
/>
|
||||
<PaginatorContext.Provider value={paginationValues}>
|
||||
<TranslationsEntitiesList
|
||||
disabled={loading}
|
||||
entities={mapEdgesToItems(data?.translations)?.map(
|
||||
node =>
|
||||
node.__typename === "CategoryTranslatableContent" && {
|
||||
completion: {
|
||||
current: sumCompleted([
|
||||
node.translation?.description,
|
||||
node.translation?.name,
|
||||
node.translation?.seoDescription,
|
||||
node.translation?.seoTitle
|
||||
]),
|
||||
max: 4
|
||||
},
|
||||
id: node?.category?.id,
|
||||
name: node?.category?.name
|
||||
}
|
||||
)}
|
||||
getRowHref={id =>
|
||||
languageEntityUrl(
|
||||
variables.language,
|
||||
TranslatableEntities.categories,
|
||||
id
|
||||
)
|
||||
}
|
||||
/>
|
||||
</PaginatorContext.Provider>
|
||||
);
|
||||
};
|
||||
|
||||
|
|
|
|||
|
|
@ -1,5 +1,5 @@
|
|||
import { useCollectionTranslationsQuery } from "@saleor/graphql";
|
||||
import usePaginator from "@saleor/hooks/usePaginator";
|
||||
import usePaginator, { PaginatorContext } from "@saleor/hooks/usePaginator";
|
||||
import TranslationsEntitiesList from "@saleor/translations/components/TranslationsEntitiesList";
|
||||
import {
|
||||
languageEntityUrl,
|
||||
|
|
@ -15,49 +15,46 @@ const TranslationsCollectionList: React.FC<TranslationsEntityListProps> = ({
|
|||
params,
|
||||
variables
|
||||
}) => {
|
||||
const paginate = usePaginator();
|
||||
|
||||
const { data, loading } = useCollectionTranslationsQuery({
|
||||
displayLoader: true,
|
||||
variables
|
||||
});
|
||||
|
||||
const { loadNextPage, loadPreviousPage, pageInfo } = paginate(
|
||||
data?.translations?.pageInfo,
|
||||
variables,
|
||||
params
|
||||
);
|
||||
const paginationValues = usePaginator({
|
||||
pageInfo: data?.translations?.pageInfo,
|
||||
paginationState: variables,
|
||||
queryString: params
|
||||
});
|
||||
|
||||
return (
|
||||
<TranslationsEntitiesList
|
||||
disabled={loading}
|
||||
entities={mapEdgesToItems(data?.translations)?.map(
|
||||
node =>
|
||||
node.__typename === "CollectionTranslatableContent" && {
|
||||
completion: {
|
||||
current: sumCompleted([
|
||||
node.translation?.description,
|
||||
node.translation?.name,
|
||||
node.translation?.seoDescription,
|
||||
node.translation?.seoTitle
|
||||
]),
|
||||
max: 4
|
||||
},
|
||||
id: node.collection.id,
|
||||
name: node.collection.name
|
||||
}
|
||||
)}
|
||||
getRowHref={id =>
|
||||
languageEntityUrl(
|
||||
variables.language,
|
||||
TranslatableEntities.collections,
|
||||
id
|
||||
)
|
||||
}
|
||||
onNextPage={loadNextPage}
|
||||
onPreviousPage={loadPreviousPage}
|
||||
pageInfo={pageInfo}
|
||||
/>
|
||||
<PaginatorContext.Provider value={paginationValues}>
|
||||
<TranslationsEntitiesList
|
||||
disabled={loading}
|
||||
entities={mapEdgesToItems(data?.translations)?.map(
|
||||
node =>
|
||||
node.__typename === "CollectionTranslatableContent" && {
|
||||
completion: {
|
||||
current: sumCompleted([
|
||||
node.translation?.description,
|
||||
node.translation?.name,
|
||||
node.translation?.seoDescription,
|
||||
node.translation?.seoTitle
|
||||
]),
|
||||
max: 4
|
||||
},
|
||||
id: node.collection.id,
|
||||
name: node.collection.name
|
||||
}
|
||||
)}
|
||||
getRowHref={id =>
|
||||
languageEntityUrl(
|
||||
variables.language,
|
||||
TranslatableEntities.collections,
|
||||
id
|
||||
)
|
||||
}
|
||||
/>
|
||||
</PaginatorContext.Provider>
|
||||
);
|
||||
};
|
||||
|
||||
|
|
|
|||
|
|
@ -1,5 +1,5 @@
|
|||
import { usePageTranslationsQuery } from "@saleor/graphql";
|
||||
import usePaginator from "@saleor/hooks/usePaginator";
|
||||
import usePaginator, { PaginatorContext } from "@saleor/hooks/usePaginator";
|
||||
import TranslationsEntitiesList from "@saleor/translations/components/TranslationsEntitiesList";
|
||||
import {
|
||||
languageEntityUrl,
|
||||
|
|
@ -15,45 +15,42 @@ const TranslationsPageList: React.FC<TranslationsEntityListProps> = ({
|
|||
params,
|
||||
variables
|
||||
}) => {
|
||||
const paginate = usePaginator();
|
||||
|
||||
const { data, loading } = usePageTranslationsQuery({
|
||||
displayLoader: true,
|
||||
variables
|
||||
});
|
||||
|
||||
const { loadNextPage, loadPreviousPage, pageInfo } = paginate(
|
||||
data?.translations?.pageInfo,
|
||||
variables,
|
||||
params
|
||||
);
|
||||
const paginationValues = usePaginator({
|
||||
pageInfo: data?.translations?.pageInfo,
|
||||
paginationState: variables,
|
||||
queryString: params
|
||||
});
|
||||
|
||||
return (
|
||||
<TranslationsEntitiesList
|
||||
disabled={loading}
|
||||
entities={mapEdgesToItems(data?.translations)?.map(
|
||||
node =>
|
||||
node.__typename === "PageTranslatableContent" && {
|
||||
completion: {
|
||||
current: sumCompleted([
|
||||
node.translation?.content,
|
||||
node.translation?.seoDescription,
|
||||
node.translation?.seoTitle,
|
||||
node.translation?.title
|
||||
]),
|
||||
max: 4
|
||||
},
|
||||
id: node?.page.id,
|
||||
name: node?.page.title
|
||||
}
|
||||
)}
|
||||
getRowHref={id =>
|
||||
languageEntityUrl(variables.language, TranslatableEntities.pages, id)
|
||||
}
|
||||
onNextPage={loadNextPage}
|
||||
onPreviousPage={loadPreviousPage}
|
||||
pageInfo={pageInfo}
|
||||
/>
|
||||
<PaginatorContext.Provider value={paginationValues}>
|
||||
<TranslationsEntitiesList
|
||||
disabled={loading}
|
||||
entities={mapEdgesToItems(data?.translations)?.map(
|
||||
node =>
|
||||
node.__typename === "PageTranslatableContent" && {
|
||||
completion: {
|
||||
current: sumCompleted([
|
||||
node.translation?.content,
|
||||
node.translation?.seoDescription,
|
||||
node.translation?.seoTitle,
|
||||
node.translation?.title
|
||||
]),
|
||||
max: 4
|
||||
},
|
||||
id: node?.page.id,
|
||||
name: node?.page.title
|
||||
}
|
||||
)}
|
||||
getRowHref={id =>
|
||||
languageEntityUrl(variables.language, TranslatableEntities.pages, id)
|
||||
}
|
||||
/>
|
||||
</PaginatorContext.Provider>
|
||||
);
|
||||
};
|
||||
|
||||
|
|
|
|||
Some files were not shown because too many files have changed in this diff Show more
Loading…
Reference in a new issue