@wordpress/dataviews 13.1.1-next.v.202603102151.0 → 14.0.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/CHANGELOG.md +18 -1
- package/README.md +19 -3
- package/build/components/dataform-controls/datetime.cjs +8 -4
- package/build/components/dataform-controls/datetime.cjs.map +2 -2
- package/build/components/dataform-layouts/card/index.cjs +132 -128
- package/build/components/dataform-layouts/card/index.cjs.map +3 -3
- package/build/components/dataviews-bulk-actions/index.cjs +28 -5
- package/build/components/dataviews-bulk-actions/index.cjs.map +2 -2
- package/build/components/dataviews-context/index.cjs +2 -2
- package/build/components/dataviews-context/index.cjs.map +2 -2
- package/build/components/dataviews-footer/index.cjs +2 -3
- package/build/components/dataviews-footer/index.cjs.map +2 -2
- package/build/components/dataviews-layout/index.cjs +12 -3
- package/build/components/dataviews-layout/index.cjs.map +2 -2
- package/build/components/dataviews-layouts/grid/composite-grid.cjs +378 -245
- package/build/components/dataviews-layouts/grid/composite-grid.cjs.map +2 -2
- package/build/components/dataviews-layouts/index.cjs +3 -3
- package/build/components/dataviews-layouts/index.cjs.map +3 -3
- package/build/components/dataviews-layouts/picker-grid/index.cjs +76 -32
- package/build/components/dataviews-layouts/picker-grid/index.cjs.map +2 -2
- package/build/components/dataviews-layouts/picker-table/index.cjs +34 -22
- package/build/components/dataviews-layouts/picker-table/index.cjs.map +2 -2
- package/build/components/dataviews-layouts/table/index.cjs +97 -88
- package/build/components/dataviews-layouts/table/index.cjs.map +2 -2
- package/build/components/dataviews-layouts/table/{use-is-horizontal-scroll-end.cjs → use-scroll-state.cjs} +29 -33
- package/build/components/dataviews-layouts/table/use-scroll-state.cjs.map +7 -0
- package/build/components/dataviews-layouts/utils/density-picker.cjs.map +2 -2
- package/build/components/dataviews-layouts/utils/grid-config-options.cjs +45 -0
- package/build/components/dataviews-layouts/utils/grid-config-options.cjs.map +7 -0
- package/build/components/dataviews-layouts/utils/use-infinite-scroll.cjs +62 -0
- package/build/components/dataviews-layouts/utils/use-infinite-scroll.cjs.map +7 -0
- package/build/components/dataviews-picker-footer/index.cjs +23 -4
- package/build/components/dataviews-picker-footer/index.cjs.map +2 -2
- package/build/components/dataviews-search/index.cjs +2 -1
- package/build/components/dataviews-search/index.cjs.map +2 -2
- package/build/components/dataviews-selection-checkbox/index.cjs +3 -2
- package/build/components/dataviews-selection-checkbox/index.cjs.map +2 -2
- package/build/components/dataviews-view-config/index.cjs +0 -2
- package/build/components/dataviews-view-config/index.cjs.map +3 -3
- package/build/components/dataviews-view-config/infinite-scroll-toggle.cjs +0 -3
- package/build/components/dataviews-view-config/infinite-scroll-toggle.cjs.map +2 -2
- package/build/dataviews/index.cjs +38 -34
- package/build/dataviews/index.cjs.map +3 -3
- package/build/dataviews-picker/index.cjs +26 -25
- package/build/dataviews-picker/index.cjs.map +3 -3
- package/build/hooks/index.cjs +11 -2
- package/build/hooks/index.cjs.map +2 -2
- package/build/hooks/use-data.cjs +146 -9
- package/build/hooks/use-data.cjs.map +2 -2
- package/build/hooks/use-infinite-scroll.cjs +208 -0
- package/build/hooks/use-infinite-scroll.cjs.map +7 -0
- package/build/hooks/use-selected-items.cjs +57 -0
- package/build/hooks/use-selected-items.cjs.map +7 -0
- package/build/types/dataviews.cjs.map +1 -1
- package/build/types/field-api.cjs.map +1 -1
- package/build/utils/filter-sort-and-paginate.cjs +5 -1
- package/build/utils/filter-sort-and-paginate.cjs.map +2 -2
- package/build/utils/get-footer-message.cjs +8 -8
- package/build/utils/get-footer-message.cjs.map +2 -2
- package/build-module/components/dataform-controls/datetime.mjs +8 -4
- package/build-module/components/dataform-controls/datetime.mjs.map +2 -2
- package/build-module/components/dataform-layouts/card/index.mjs +132 -133
- package/build-module/components/dataform-layouts/card/index.mjs.map +2 -2
- package/build-module/components/dataviews-bulk-actions/index.mjs +28 -5
- package/build-module/components/dataviews-bulk-actions/index.mjs.map +2 -2
- package/build-module/components/dataviews-context/index.mjs +2 -2
- package/build-module/components/dataviews-context/index.mjs.map +2 -2
- package/build-module/components/dataviews-footer/index.mjs +2 -3
- package/build-module/components/dataviews-footer/index.mjs.map +2 -2
- package/build-module/components/dataviews-layout/index.mjs +12 -3
- package/build-module/components/dataviews-layout/index.mjs.map +2 -2
- package/build-module/components/dataviews-layouts/grid/composite-grid.mjs +387 -246
- package/build-module/components/dataviews-layouts/grid/composite-grid.mjs.map +2 -2
- package/build-module/components/dataviews-layouts/index.mjs +3 -3
- package/build-module/components/dataviews-layouts/index.mjs.map +2 -2
- package/build-module/components/dataviews-layouts/picker-grid/index.mjs +80 -33
- package/build-module/components/dataviews-layouts/picker-grid/index.mjs.map +2 -2
- package/build-module/components/dataviews-layouts/picker-table/index.mjs +34 -22
- package/build-module/components/dataviews-layouts/picker-table/index.mjs.map +2 -2
- package/build-module/components/dataviews-layouts/table/index.mjs +97 -88
- package/build-module/components/dataviews-layouts/table/index.mjs.map +2 -2
- package/build-module/components/dataviews-layouts/table/use-scroll-state.mjs +46 -0
- package/build-module/components/dataviews-layouts/table/use-scroll-state.mjs.map +7 -0
- package/build-module/components/dataviews-layouts/utils/density-picker.mjs.map +2 -2
- package/build-module/components/dataviews-layouts/utils/grid-config-options.mjs +14 -0
- package/build-module/components/dataviews-layouts/utils/grid-config-options.mjs.map +7 -0
- package/build-module/components/dataviews-layouts/utils/use-infinite-scroll.mjs +26 -0
- package/build-module/components/dataviews-layouts/utils/use-infinite-scroll.mjs.map +7 -0
- package/build-module/components/dataviews-picker-footer/index.mjs +23 -4
- package/build-module/components/dataviews-picker-footer/index.mjs.map +2 -2
- package/build-module/components/dataviews-search/index.mjs +2 -1
- package/build-module/components/dataviews-search/index.mjs.map +2 -2
- package/build-module/components/dataviews-selection-checkbox/index.mjs +3 -2
- package/build-module/components/dataviews-selection-checkbox/index.mjs.map +2 -2
- package/build-module/components/dataviews-view-config/index.mjs +0 -2
- package/build-module/components/dataviews-view-config/index.mjs.map +2 -2
- package/build-module/components/dataviews-view-config/infinite-scroll-toggle.mjs +0 -3
- package/build-module/components/dataviews-view-config/infinite-scroll-toggle.mjs.map +2 -2
- package/build-module/dataviews/index.mjs +46 -36
- package/build-module/dataviews/index.mjs.map +2 -2
- package/build-module/dataviews-picker/index.mjs +34 -27
- package/build-module/dataviews-picker/index.mjs.map +2 -2
- package/build-module/hooks/index.mjs +7 -1
- package/build-module/hooks/index.mjs.map +2 -2
- package/build-module/hooks/use-data.mjs +147 -10
- package/build-module/hooks/use-data.mjs.map +2 -2
- package/build-module/hooks/use-infinite-scroll.mjs +188 -0
- package/build-module/hooks/use-infinite-scroll.mjs.map +7 -0
- package/build-module/hooks/use-selected-items.mjs +36 -0
- package/build-module/hooks/use-selected-items.mjs.map +7 -0
- package/build-module/utils/filter-sort-and-paginate.mjs +5 -1
- package/build-module/utils/filter-sort-and-paginate.mjs.map +2 -2
- package/build-module/utils/get-footer-message.mjs +8 -8
- package/build-module/utils/get-footer-message.mjs.map +2 -2
- package/build-style/style-rtl.css +107 -41
- package/build-style/style.css +107 -41
- package/build-types/components/dataform-controls/datetime.d.ts +1 -1
- package/build-types/components/dataform-controls/datetime.d.ts.map +1 -1
- package/build-types/components/dataform-layouts/card/index.d.ts.map +1 -1
- package/build-types/components/dataviews-bulk-actions/index.d.ts +2 -1
- package/build-types/components/dataviews-bulk-actions/index.d.ts.map +1 -1
- package/build-types/components/dataviews-context/index.d.ts +1 -1
- package/build-types/components/dataviews-context/index.d.ts.map +1 -1
- package/build-types/components/dataviews-footer/index.d.ts.map +1 -1
- package/build-types/components/dataviews-layout/index.d.ts.map +1 -1
- package/build-types/components/dataviews-layouts/grid/composite-grid.d.ts.map +1 -1
- package/build-types/components/dataviews-layouts/index.d.ts +3 -3
- package/build-types/components/dataviews-layouts/index.d.ts.map +1 -1
- package/build-types/components/dataviews-layouts/picker-grid/index.d.ts.map +1 -1
- package/build-types/components/dataviews-layouts/picker-table/index.d.ts.map +1 -1
- package/build-types/components/dataviews-layouts/table/index.d.ts.map +1 -1
- package/build-types/components/dataviews-layouts/table/use-scroll-state.d.ts +25 -0
- package/build-types/components/dataviews-layouts/table/use-scroll-state.d.ts.map +1 -0
- package/build-types/components/dataviews-layouts/utils/density-picker.d.ts.map +1 -1
- package/build-types/components/dataviews-layouts/utils/grid-config-options.d.ts +2 -0
- package/build-types/components/dataviews-layouts/utils/grid-config-options.d.ts.map +1 -0
- package/build-types/components/dataviews-layouts/utils/use-infinite-scroll.d.ts +22 -0
- package/build-types/components/dataviews-layouts/utils/use-infinite-scroll.d.ts.map +1 -0
- package/build-types/components/dataviews-picker-footer/index.d.ts.map +1 -1
- package/build-types/components/dataviews-search/index.d.ts.map +1 -1
- package/build-types/components/dataviews-selection-checkbox/index.d.ts.map +1 -1
- package/build-types/components/dataviews-view-config/index.d.ts.map +1 -1
- package/build-types/components/dataviews-view-config/infinite-scroll-toggle.d.ts +1 -1
- package/build-types/components/dataviews-view-config/infinite-scroll-toggle.d.ts.map +1 -1
- package/build-types/dataviews/index.d.ts +0 -1
- package/build-types/dataviews/index.d.ts.map +1 -1
- package/build-types/dataviews/stories/empty.d.ts +1 -2
- package/build-types/dataviews/stories/empty.d.ts.map +1 -1
- package/build-types/dataviews/stories/fixtures.d.ts.map +1 -1
- package/build-types/dataviews/stories/free-composition.d.ts.map +1 -1
- package/build-types/dataviews/stories/index.story.d.ts +18 -10
- package/build-types/dataviews/stories/index.story.d.ts.map +1 -1
- package/build-types/dataviews/stories/infinite-scroll.d.ts.map +1 -1
- package/build-types/dataviews/stories/layout-activity.d.ts.map +1 -1
- package/build-types/dataviews/stories/layout-custom.d.ts +3 -1
- package/build-types/dataviews/stories/layout-custom.d.ts.map +1 -1
- package/build-types/dataviews/stories/layout-grid.d.ts.map +1 -1
- package/build-types/dataviews/stories/layout-list.d.ts.map +1 -1
- package/build-types/dataviews/stories/layout-table.d.ts.map +1 -1
- package/build-types/dataviews/stories/with-card.d.ts +3 -1
- package/build-types/dataviews/stories/with-card.d.ts.map +1 -1
- package/build-types/dataviews-picker/index.d.ts +0 -1
- package/build-types/dataviews-picker/index.d.ts.map +1 -1
- package/build-types/dataviews-picker/stories/fixtures.d.ts.map +1 -1
- package/build-types/dataviews-picker/stories/index.story.d.ts.map +1 -1
- package/build-types/field-types/stories/index.story.d.ts.map +1 -1
- package/build-types/hooks/index.d.ts +3 -0
- package/build-types/hooks/index.d.ts.map +1 -1
- package/build-types/hooks/test/use-data.d.ts +2 -0
- package/build-types/hooks/test/use-data.d.ts.map +1 -0
- package/build-types/hooks/use-data.d.ts +41 -3
- package/build-types/hooks/use-data.d.ts.map +1 -1
- package/build-types/hooks/use-infinite-scroll.d.ts +21 -0
- package/build-types/hooks/use-infinite-scroll.d.ts.map +1 -0
- package/build-types/hooks/use-selected-items.d.ts +19 -0
- package/build-types/hooks/use-selected-items.d.ts.map +1 -0
- package/build-types/types/dataviews.d.ts +15 -1
- package/build-types/types/dataviews.d.ts.map +1 -1
- package/build-types/types/field-api.d.ts +15 -4
- package/build-types/types/field-api.d.ts.map +1 -1
- package/build-types/utils/filter-sort-and-paginate.d.ts.map +1 -1
- package/build-types/utils/get-footer-message.d.ts +3 -2
- package/build-types/utils/get-footer-message.d.ts.map +1 -1
- package/build-wp/index.js +3202 -2761
- package/package.json +19 -19
- package/src/components/dataform-controls/datetime.tsx +19 -11
- package/src/components/dataform-layouts/card/index.tsx +171 -146
- package/src/components/dataform-layouts/card/style.scss +8 -5
- package/src/components/dataviews-bulk-actions/index.tsx +28 -1
- package/src/components/dataviews-context/index.ts +2 -2
- package/src/components/dataviews-footer/index.tsx +1 -6
- package/src/components/dataviews-layout/index.tsx +41 -19
- package/src/components/dataviews-layout/style.scss +8 -0
- package/src/components/dataviews-layouts/grid/composite-grid.tsx +433 -278
- package/src/components/dataviews-layouts/grid/style.scss +22 -2
- package/src/components/dataviews-layouts/index.ts +3 -3
- package/src/components/dataviews-layouts/picker-grid/index.tsx +70 -17
- package/src/components/dataviews-layouts/picker-grid/style.scss +10 -0
- package/src/components/dataviews-layouts/picker-table/index.tsx +42 -22
- package/src/components/dataviews-layouts/table/index.tsx +10 -4
- package/src/components/dataviews-layouts/table/style.scss +13 -0
- package/src/components/dataviews-layouts/table/use-scroll-state.ts +79 -0
- package/src/components/dataviews-layouts/utils/density-picker.tsx +12 -2
- package/src/components/dataviews-layouts/utils/grid-config-options.tsx +14 -0
- package/src/components/dataviews-layouts/utils/grid-items.scss +9 -1
- package/src/components/dataviews-layouts/utils/use-infinite-scroll.ts +64 -0
- package/src/components/dataviews-picker-footer/index.tsx +21 -1
- package/src/components/dataviews-search/index.tsx +2 -1
- package/src/components/dataviews-selection-checkbox/index.tsx +4 -2
- package/src/components/dataviews-view-config/index.tsx +0 -2
- package/src/components/dataviews-view-config/infinite-scroll-toggle.tsx +0 -5
- package/src/dataviews/index.tsx +58 -45
- package/src/dataviews/stories/empty.tsx +1 -3
- package/src/dataviews/stories/fixtures.tsx +288 -0
- package/src/dataviews/stories/free-composition.tsx +44 -45
- package/src/dataviews/stories/index.story.tsx +31 -8
- package/src/dataviews/stories/infinite-scroll.tsx +7 -93
- package/src/dataviews/stories/layout-activity.tsx +1 -0
- package/src/dataviews/stories/layout-custom.tsx +7 -3
- package/src/dataviews/stories/layout-grid.tsx +1 -0
- package/src/dataviews/stories/layout-list.tsx +1 -0
- package/src/dataviews/stories/layout-table.tsx +1 -0
- package/src/dataviews/stories/style.css +0 -5
- package/src/dataviews/stories/with-card.tsx +35 -24
- package/src/dataviews/style.scss +5 -8
- package/src/dataviews/test/dataviews.tsx +54 -1
- package/src/dataviews-picker/index.tsx +41 -35
- package/src/dataviews-picker/stories/fixtures.tsx +270 -0
- package/src/dataviews-picker/stories/index.story.tsx +62 -129
- package/src/field-types/stories/index.story.tsx +12 -0
- package/src/hooks/index.ts +3 -0
- package/src/hooks/test/use-data.ts +791 -0
- package/src/hooks/use-data.ts +288 -21
- package/src/hooks/use-infinite-scroll.ts +304 -0
- package/src/hooks/use-selected-items.ts +72 -0
- package/src/style.scss +1 -0
- package/src/types/dataviews.ts +18 -1
- package/src/types/field-api.ts +16 -3
- package/src/utils/filter-sort-and-paginate.ts +13 -1
- package/src/utils/get-footer-message.ts +12 -9
- package/src/utils/test/filter-sort-and-paginate.js +78 -54
- package/build/components/dataviews-layouts/table/use-is-horizontal-scroll-end.cjs.map +0 -7
- package/build-module/components/dataviews-layouts/table/use-is-horizontal-scroll-end.mjs +0 -50
- package/build-module/components/dataviews-layouts/table/use-is-horizontal-scroll-end.mjs.map +0 -7
- package/build-types/components/dataviews-layouts/table/use-is-horizontal-scroll-end.d.ts +0 -19
- package/build-types/components/dataviews-layouts/table/use-is-horizontal-scroll-end.d.ts.map +0 -1
- package/src/components/dataviews-layouts/table/use-is-horizontal-scroll-end.ts +0 -82
|
@@ -0,0 +1,26 @@
|
|
|
1
|
+
// packages/dataviews/src/components/dataviews-layouts/utils/use-infinite-scroll.ts
|
|
2
|
+
import { useContext, useEffect } from "@wordpress/element";
|
|
3
|
+
import DataViewsContext from "../../dataviews-context/index.mjs";
|
|
4
|
+
function useIntersectionObserver(elementRef, posinset) {
|
|
5
|
+
const { intersectionObserver } = useContext(DataViewsContext);
|
|
6
|
+
useEffect(() => {
|
|
7
|
+
const element = elementRef.current;
|
|
8
|
+
if (!element || posinset === void 0 || !intersectionObserver) {
|
|
9
|
+
return;
|
|
10
|
+
}
|
|
11
|
+
intersectionObserver.observe(element);
|
|
12
|
+
return () => {
|
|
13
|
+
intersectionObserver.unobserve(element);
|
|
14
|
+
};
|
|
15
|
+
}, [elementRef, intersectionObserver, posinset]);
|
|
16
|
+
}
|
|
17
|
+
function usePlaceholdersNeeded(data, isInfiniteScroll, gridColumns) {
|
|
18
|
+
const hasData = !!data?.length;
|
|
19
|
+
const firstItemPosition = hasData && isInfiniteScroll ? data[0].position : void 0;
|
|
20
|
+
return firstItemPosition && gridColumns ? (firstItemPosition - 1) % gridColumns : 0;
|
|
21
|
+
}
|
|
22
|
+
export {
|
|
23
|
+
useIntersectionObserver,
|
|
24
|
+
usePlaceholdersNeeded
|
|
25
|
+
};
|
|
26
|
+
//# sourceMappingURL=use-infinite-scroll.mjs.map
|
|
@@ -0,0 +1,7 @@
|
|
|
1
|
+
{
|
|
2
|
+
"version": 3,
|
|
3
|
+
"sources": ["../../../../src/components/dataviews-layouts/utils/use-infinite-scroll.ts"],
|
|
4
|
+
"sourcesContent": ["/**\n * WordPress dependencies\n */\nimport { useContext, useEffect } from '@wordpress/element';\n\n/**\n * Internal dependencies\n */\nimport DataViewsContext from '../../dataviews-context';\n\n/**\n * Hook to set up an IntersectionObserver for infinite scroll items.\n * Observes the element and triggers the callback when the item becomes visible.\n *\n * @param elementRef - Ref to the DOM element to observe.\n * @param posinset - The position of the item in the set (1-based index).\n */\nexport function useIntersectionObserver(\n\telementRef: React.RefObject< HTMLElement | null >,\n\tposinset: number | undefined\n) {\n\tconst { intersectionObserver } = useContext( DataViewsContext );\n\n\tuseEffect( () => {\n\t\tconst element = elementRef.current;\n\t\tif ( ! element || posinset === undefined || ! intersectionObserver ) {\n\t\t\treturn;\n\t\t}\n\n\t\tintersectionObserver.observe( element );\n\n\t\treturn () => {\n\t\t\tintersectionObserver.unobserve( element );\n\t\t};\n\t}, [ elementRef, intersectionObserver, posinset ] );\n}\n\n/**\n * Hook to calculate the number of placeholder items needed for the first row\n * in an infinite scroll grid layout.\n *\n * When items are loaded starting from a position other than 1, placeholders\n * are needed to maintain proper grid alignment.\n *\n * @param data - The array of data items.\n * @param isInfiniteScroll - Whether infinite scroll is enabled.\n * @param gridColumns - The number of columns in the grid.\n * @return The number of placeholder items needed.\n */\nexport function usePlaceholdersNeeded< Item >(\n\tdata: Item[],\n\tisInfiniteScroll: boolean,\n\tgridColumns: number\n): number {\n\tconst hasData = !! data?.length;\n\tconst firstItemPosition =\n\t\thasData && isInfiniteScroll\n\t\t\t? ( data[ 0 ] as { position?: number } ).position\n\t\t\t: undefined;\n\n\treturn firstItemPosition && gridColumns\n\t\t? ( firstItemPosition - 1 ) % gridColumns\n\t\t: 0;\n}\n"],
|
|
5
|
+
"mappings": ";AAGA,SAAS,YAAY,iBAAiB;AAKtC,OAAO,sBAAsB;AAStB,SAAS,wBACf,YACA,UACC;AACD,QAAM,EAAE,qBAAqB,IAAI,WAAY,gBAAiB;AAE9D,YAAW,MAAM;AAChB,UAAM,UAAU,WAAW;AAC3B,QAAK,CAAE,WAAW,aAAa,UAAa,CAAE,sBAAuB;AACpE;AAAA,IACD;AAEA,yBAAqB,QAAS,OAAQ;AAEtC,WAAO,MAAM;AACZ,2BAAqB,UAAW,OAAQ;AAAA,IACzC;AAAA,EACD,GAAG,CAAE,YAAY,sBAAsB,QAAS,CAAE;AACnD;AAcO,SAAS,sBACf,MACA,kBACA,aACS;AACT,QAAM,UAAU,CAAC,CAAE,MAAM;AACzB,QAAM,oBACL,WAAW,mBACN,KAAM,CAAE,EAA6B,WACvC;AAEJ,SAAO,qBAAqB,eACvB,oBAAoB,KAAM,cAC5B;AACJ;",
|
|
6
|
+
"names": []
|
|
7
|
+
}
|
|
@@ -19,9 +19,25 @@ function BulkSelectionCheckbox({
|
|
|
19
19
|
selectedItems,
|
|
20
20
|
onChangeSelection,
|
|
21
21
|
data,
|
|
22
|
-
getItemId
|
|
22
|
+
getItemId,
|
|
23
|
+
disableSelectAll = false
|
|
23
24
|
}) {
|
|
25
|
+
const hasSelection = selection.length > 0;
|
|
24
26
|
const areAllSelected = selectedItems.length === data.length;
|
|
27
|
+
if (disableSelectAll) {
|
|
28
|
+
return /* @__PURE__ */ jsx(
|
|
29
|
+
CheckboxControl,
|
|
30
|
+
{
|
|
31
|
+
className: "dataviews-view-table-selection-checkbox",
|
|
32
|
+
checked: hasSelection,
|
|
33
|
+
disabled: !hasSelection,
|
|
34
|
+
onChange: () => {
|
|
35
|
+
onChangeSelection([]);
|
|
36
|
+
},
|
|
37
|
+
"aria-label": __("Deselect all")
|
|
38
|
+
}
|
|
39
|
+
);
|
|
40
|
+
}
|
|
25
41
|
return /* @__PURE__ */ jsx(
|
|
26
42
|
CheckboxControl,
|
|
27
43
|
{
|
|
@@ -95,13 +111,15 @@ function DataViewsPickerFooter() {
|
|
|
95
111
|
onChangeSelection,
|
|
96
112
|
getItemId,
|
|
97
113
|
actions = EMPTY_ARRAY,
|
|
98
|
-
paginationInfo
|
|
114
|
+
paginationInfo,
|
|
115
|
+
view
|
|
99
116
|
} = useContext(DataViewsContext);
|
|
100
117
|
const isMultiselect = useIsMultiselectPicker(actions);
|
|
101
118
|
const message = getFooterMessage(
|
|
102
119
|
selection.length,
|
|
103
120
|
data.length,
|
|
104
|
-
paginationInfo.totalItems
|
|
121
|
+
paginationInfo.totalItems,
|
|
122
|
+
!!view.infiniteScrollEnabled
|
|
105
123
|
);
|
|
106
124
|
const selectedItems = useMemo(
|
|
107
125
|
() => data.filter((item) => selection.includes(getItemId(item))),
|
|
@@ -131,7 +149,8 @@ function DataViewsPickerFooter() {
|
|
|
131
149
|
selectedItems,
|
|
132
150
|
onChangeSelection,
|
|
133
151
|
data,
|
|
134
|
-
getItemId
|
|
152
|
+
getItemId,
|
|
153
|
+
disableSelectAll: !!view.infiniteScrollEnabled
|
|
135
154
|
}
|
|
136
155
|
),
|
|
137
156
|
/* @__PURE__ */ jsx("span", { className: "dataviews-bulk-actions-footer__item-count", children: message })
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../src/components/dataviews-picker-footer/index.tsx"],
|
|
4
|
-
"sourcesContent": ["/**\n * WordPress dependencies\n */\nimport { Button, CheckboxControl } from '@wordpress/components';\nimport { useRegistry } from '@wordpress/data';\nimport { useContext, useMemo, useState } from '@wordpress/element';\nimport { Stack } from '@wordpress/ui';\nimport { __ } from '@wordpress/i18n';\n\n/**\n * Internal dependencies\n */\nimport DataViewsPagination from '../dataviews-pagination';\nimport DataViewsContext from '../dataviews-context';\nimport type { SetSelection } from '../../types/private';\nimport type { Action } from '../../types';\nimport getFooterMessage from '../../utils/get-footer-message';\n\nconst EMPTY_ARRAY: [] = [];\n\nexport function useIsMultiselectPicker< Item >(\n\tactions: Action< Item >[] | undefined\n) {\n\treturn useMemo( () => {\n\t\treturn actions?.every( ( action ) => action.supportsBulk );\n\t}, [ actions ] );\n}\n\nfunction BulkSelectionCheckbox< Item >( {\n\tselection,\n\tselectedItems,\n\tonChangeSelection,\n\tdata,\n\tgetItemId,\n}: {\n\tselection: string[];\n\tselectedItems: Item[];\n\tonChangeSelection: SetSelection;\n\tdata: Item[];\n\tgetItemId: ( item: Item ) => string;\n} ) {\n\tconst areAllSelected = selectedItems.length === data.length;\n\n\treturn (\n\t\t<CheckboxControl\n\t\t\tclassName=\"dataviews-view-table-selection-checkbox\"\n\t\t\tchecked={ areAllSelected }\n\t\t\tindeterminate={ ! areAllSelected && !! selectedItems.length }\n\t\t\tonChange={ () => {\n\t\t\t\tif ( areAllSelected ) {\n\t\t\t\t\t// Deselect all - remove the current page from the total selection.\n\t\t\t\t\tonChangeSelection(\n\t\t\t\t\t\tselection.filter(\n\t\t\t\t\t\t\t( id ) =>\n\t\t\t\t\t\t\t\t! data.some(\n\t\t\t\t\t\t\t\t\t( item ) => id === getItemId( item )\n\t\t\t\t\t\t\t\t)\n\t\t\t\t\t\t)\n\t\t\t\t\t);\n\t\t\t\t} else {\n\t\t\t\t\t// Select all - merge the current page into the total selection.\n\t\t\t\t\tconst selectionSet = new Set( [\n\t\t\t\t\t\t...selection,\n\t\t\t\t\t\t...data.map( ( item ) => getItemId( item ) ),\n\t\t\t\t\t] );\n\t\t\t\t\tonChangeSelection( Array.from( selectionSet ) );\n\t\t\t\t}\n\t\t\t} }\n\t\t\taria-label={\n\t\t\t\tareAllSelected ? __( 'Deselect all' ) : __( 'Select all' )\n\t\t\t}\n\t\t/>\n\t);\n}\n\nfunction ActionButtons< Item >( {\n\tactions,\n\titems,\n\tselection,\n}: {\n\tactions: Action< Item >[];\n\titems: Item[];\n\tselection: string[];\n} ) {\n\tconst registry = useRegistry();\n\tconst [ actionInProgress, setActionInProgress ] = useState< string | null >(\n\t\tnull\n\t);\n\n\treturn (\n\t\t<Stack direction=\"row\" gap=\"xs\">\n\t\t\t{ actions.map( ( action ) => {\n\t\t\t\t// Only support actions with callbacks for DataViewsPicker.\n\t\t\t\t// This is because many use cases of the picker will be already within modals.\n\t\t\t\tif ( ! ( 'callback' in action ) ) {\n\t\t\t\t\treturn null;\n\t\t\t\t}\n\n\t\t\t\tconst { id, label, icon, isPrimary, callback } = action;\n\n\t\t\t\tconst _label =\n\t\t\t\t\ttypeof label === 'string' ? label : label( items );\n\t\t\t\tconst variant = isPrimary ? 'primary' : 'tertiary';\n\t\t\t\tconst isInProgress = id === actionInProgress;\n\n\t\t\t\treturn (\n\t\t\t\t\t<Button\n\t\t\t\t\t\tkey={ id }\n\t\t\t\t\t\taccessibleWhenDisabled\n\t\t\t\t\t\ticon={ icon }\n\t\t\t\t\t\tdisabled={ isInProgress || ! selection?.length }\n\t\t\t\t\t\tisBusy={ isInProgress }\n\t\t\t\t\t\tonClick={ async () => {\n\t\t\t\t\t\t\tsetActionInProgress( id );\n\t\t\t\t\t\t\tawait callback( items, {\n\t\t\t\t\t\t\t\tregistry,\n\t\t\t\t\t\t\t} );\n\t\t\t\t\t\t\tsetActionInProgress( null );\n\t\t\t\t\t\t} }\n\t\t\t\t\t\tsize=\"compact\"\n\t\t\t\t\t\tvariant={ variant }\n\t\t\t\t\t>\n\t\t\t\t\t\t{ _label }\n\t\t\t\t\t</Button>\n\t\t\t\t);\n\t\t\t} ) }\n\t\t</Stack>\n\t);\n}\n\nexport function DataViewsPickerFooter() {\n\tconst {\n\t\tdata,\n\t\tselection,\n\t\tonChangeSelection,\n\t\tgetItemId,\n\t\tactions = EMPTY_ARRAY,\n\t\tpaginationInfo,\n\t} = useContext( DataViewsContext );\n\n\tconst isMultiselect = useIsMultiselectPicker( actions );\n\n\tconst message = getFooterMessage(\n\t\tselection.length,\n\t\tdata.length,\n\t\tpaginationInfo.totalItems\n\t);\n\n\tconst selectedItems = useMemo(\n\t\t() =>\n\t\t\tdata.filter( ( item ) => selection.includes( getItemId( item ) ) ),\n\t\t[ selection, getItemId, data ]\n\t);\n\n\treturn (\n\t\t<Stack\n\t\t\tdirection=\"row\"\n\t\t\tjustify=\"space-between\"\n\t\t\talign=\"center\"\n\t\t\tclassName=\"dataviews-footer\"\n\t\t\tgap=\"sm\"\n\t\t>\n\t\t\t<Stack\n\t\t\t\tdirection=\"row\"\n\t\t\t\tclassName=\"dataviews-picker-footer__bulk-selection\"\n\t\t\t\tgap=\"md\"\n\t\t\t\talign=\"center\"\n\t\t\t>\n\t\t\t\t{ isMultiselect && (\n\t\t\t\t\t<BulkSelectionCheckbox\n\t\t\t\t\t\tselection={ selection }\n\t\t\t\t\t\tselectedItems={ selectedItems }\n\t\t\t\t\t\tonChangeSelection={ onChangeSelection }\n\t\t\t\t\t\tdata={ data }\n\t\t\t\t\t\tgetItemId={ getItemId }\n\t\t\t\t\t/>\n\t\t\t\t) }\n\t\t\t\t<span className=\"dataviews-bulk-actions-footer__item-count\">\n\t\t\t\t\t{ message }\n\t\t\t\t</span>\n\t\t\t</Stack>\n\t\t\t<DataViewsPagination />\n\t\t\t{ Boolean( actions?.length ) && (\n\t\t\t\t<div className=\"dataviews-picker-footer__actions\">\n\t\t\t\t\t<ActionButtons\n\t\t\t\t\t\tactions={ actions }\n\t\t\t\t\t\titems={ selectedItems }\n\t\t\t\t\t\tselection={ selection }\n\t\t\t\t\t/>\n\t\t\t\t</div>\n\t\t\t) }\n\t\t</Stack>\n\t);\n}\n"],
|
|
5
|
-
"mappings": ";AAGA,SAAS,QAAQ,uBAAuB;AACxC,SAAS,mBAAmB;AAC5B,SAAS,YAAY,SAAS,gBAAgB;AAC9C,SAAS,aAAa;AACtB,SAAS,UAAU;AAKnB,OAAO,yBAAyB;AAChC,OAAO,sBAAsB;AAG7B,OAAO,sBAAsB;
|
|
4
|
+
"sourcesContent": ["/**\n * WordPress dependencies\n */\nimport { Button, CheckboxControl } from '@wordpress/components';\nimport { useRegistry } from '@wordpress/data';\nimport { useContext, useMemo, useState } from '@wordpress/element';\nimport { Stack } from '@wordpress/ui';\nimport { __ } from '@wordpress/i18n';\n\n/**\n * Internal dependencies\n */\nimport DataViewsPagination from '../dataviews-pagination';\nimport DataViewsContext from '../dataviews-context';\nimport type { SetSelection } from '../../types/private';\nimport type { Action } from '../../types';\nimport getFooterMessage from '../../utils/get-footer-message';\n\nconst EMPTY_ARRAY: [] = [];\n\nexport function useIsMultiselectPicker< Item >(\n\tactions: Action< Item >[] | undefined\n) {\n\treturn useMemo( () => {\n\t\treturn actions?.every( ( action ) => action.supportsBulk );\n\t}, [ actions ] );\n}\n\nfunction BulkSelectionCheckbox< Item >( {\n\tselection,\n\tselectedItems,\n\tonChangeSelection,\n\tdata,\n\tgetItemId,\n\tdisableSelectAll = false,\n}: {\n\tselection: string[];\n\tselectedItems: Item[];\n\tonChangeSelection: SetSelection;\n\tdata: Item[];\n\tgetItemId: ( item: Item ) => string;\n\tdisableSelectAll?: boolean;\n} ) {\n\tconst hasSelection = selection.length > 0;\n\tconst areAllSelected = selectedItems.length === data.length;\n\n\tif ( disableSelectAll ) {\n\t\treturn (\n\t\t\t<CheckboxControl\n\t\t\t\tclassName=\"dataviews-view-table-selection-checkbox\"\n\t\t\t\tchecked={ hasSelection }\n\t\t\t\tdisabled={ ! hasSelection }\n\t\t\t\tonChange={ () => {\n\t\t\t\t\tonChangeSelection( [] );\n\t\t\t\t} }\n\t\t\t\taria-label={ __( 'Deselect all' ) }\n\t\t\t/>\n\t\t);\n\t}\n\n\treturn (\n\t\t<CheckboxControl\n\t\t\tclassName=\"dataviews-view-table-selection-checkbox\"\n\t\t\tchecked={ areAllSelected }\n\t\t\tindeterminate={ ! areAllSelected && !! selectedItems.length }\n\t\t\tonChange={ () => {\n\t\t\t\tif ( areAllSelected ) {\n\t\t\t\t\t// Deselect all - remove the current page from the total selection.\n\t\t\t\t\tonChangeSelection(\n\t\t\t\t\t\tselection.filter(\n\t\t\t\t\t\t\t( id ) =>\n\t\t\t\t\t\t\t\t! data.some(\n\t\t\t\t\t\t\t\t\t( item ) => id === getItemId( item )\n\t\t\t\t\t\t\t\t)\n\t\t\t\t\t\t)\n\t\t\t\t\t);\n\t\t\t\t} else {\n\t\t\t\t\t// Select all - merge the current page into the total selection.\n\t\t\t\t\tconst selectionSet = new Set( [\n\t\t\t\t\t\t...selection,\n\t\t\t\t\t\t...data.map( ( item ) => getItemId( item ) ),\n\t\t\t\t\t] );\n\t\t\t\t\tonChangeSelection( Array.from( selectionSet ) );\n\t\t\t\t}\n\t\t\t} }\n\t\t\taria-label={\n\t\t\t\tareAllSelected ? __( 'Deselect all' ) : __( 'Select all' )\n\t\t\t}\n\t\t/>\n\t);\n}\n\nfunction ActionButtons< Item >( {\n\tactions,\n\titems,\n\tselection,\n}: {\n\tactions: Action< Item >[];\n\titems: Item[];\n\tselection: string[];\n} ) {\n\tconst registry = useRegistry();\n\tconst [ actionInProgress, setActionInProgress ] = useState< string | null >(\n\t\tnull\n\t);\n\n\treturn (\n\t\t<Stack direction=\"row\" gap=\"xs\">\n\t\t\t{ actions.map( ( action ) => {\n\t\t\t\t// Only support actions with callbacks for DataViewsPicker.\n\t\t\t\t// This is because many use cases of the picker will be already within modals.\n\t\t\t\tif ( ! ( 'callback' in action ) ) {\n\t\t\t\t\treturn null;\n\t\t\t\t}\n\n\t\t\t\tconst { id, label, icon, isPrimary, callback } = action;\n\n\t\t\t\tconst _label =\n\t\t\t\t\ttypeof label === 'string' ? label : label( items );\n\t\t\t\tconst variant = isPrimary ? 'primary' : 'tertiary';\n\t\t\t\tconst isInProgress = id === actionInProgress;\n\n\t\t\t\treturn (\n\t\t\t\t\t<Button\n\t\t\t\t\t\tkey={ id }\n\t\t\t\t\t\taccessibleWhenDisabled\n\t\t\t\t\t\ticon={ icon }\n\t\t\t\t\t\tdisabled={ isInProgress || ! selection?.length }\n\t\t\t\t\t\tisBusy={ isInProgress }\n\t\t\t\t\t\tonClick={ async () => {\n\t\t\t\t\t\t\tsetActionInProgress( id );\n\t\t\t\t\t\t\tawait callback( items, {\n\t\t\t\t\t\t\t\tregistry,\n\t\t\t\t\t\t\t} );\n\t\t\t\t\t\t\tsetActionInProgress( null );\n\t\t\t\t\t\t} }\n\t\t\t\t\t\tsize=\"compact\"\n\t\t\t\t\t\tvariant={ variant }\n\t\t\t\t\t>\n\t\t\t\t\t\t{ _label }\n\t\t\t\t\t</Button>\n\t\t\t\t);\n\t\t\t} ) }\n\t\t</Stack>\n\t);\n}\n\nexport function DataViewsPickerFooter() {\n\tconst {\n\t\tdata,\n\t\tselection,\n\t\tonChangeSelection,\n\t\tgetItemId,\n\t\tactions = EMPTY_ARRAY,\n\t\tpaginationInfo,\n\t\tview,\n\t} = useContext( DataViewsContext );\n\n\tconst isMultiselect = useIsMultiselectPicker( actions );\n\n\tconst message = getFooterMessage(\n\t\tselection.length,\n\t\tdata.length,\n\t\tpaginationInfo.totalItems,\n\t\t!! view.infiniteScrollEnabled\n\t);\n\n\tconst selectedItems = useMemo(\n\t\t() =>\n\t\t\tdata.filter( ( item ) => selection.includes( getItemId( item ) ) ),\n\t\t[ selection, getItemId, data ]\n\t);\n\n\treturn (\n\t\t<Stack\n\t\t\tdirection=\"row\"\n\t\t\tjustify=\"space-between\"\n\t\t\talign=\"center\"\n\t\t\tclassName=\"dataviews-footer\"\n\t\t\tgap=\"sm\"\n\t\t>\n\t\t\t<Stack\n\t\t\t\tdirection=\"row\"\n\t\t\t\tclassName=\"dataviews-picker-footer__bulk-selection\"\n\t\t\t\tgap=\"md\"\n\t\t\t\talign=\"center\"\n\t\t\t>\n\t\t\t\t{ isMultiselect && (\n\t\t\t\t\t<BulkSelectionCheckbox\n\t\t\t\t\t\tselection={ selection }\n\t\t\t\t\t\tselectedItems={ selectedItems }\n\t\t\t\t\t\tonChangeSelection={ onChangeSelection }\n\t\t\t\t\t\tdata={ data }\n\t\t\t\t\t\tgetItemId={ getItemId }\n\t\t\t\t\t\tdisableSelectAll={ !! view.infiniteScrollEnabled }\n\t\t\t\t\t/>\n\t\t\t\t) }\n\t\t\t\t<span className=\"dataviews-bulk-actions-footer__item-count\">\n\t\t\t\t\t{ message }\n\t\t\t\t</span>\n\t\t\t</Stack>\n\t\t\t<DataViewsPagination />\n\t\t\t{ Boolean( actions?.length ) && (\n\t\t\t\t<div className=\"dataviews-picker-footer__actions\">\n\t\t\t\t\t<ActionButtons\n\t\t\t\t\t\tactions={ actions }\n\t\t\t\t\t\titems={ selectedItems }\n\t\t\t\t\t\tselection={ selection }\n\t\t\t\t\t/>\n\t\t\t\t</div>\n\t\t\t) }\n\t\t</Stack>\n\t);\n}\n"],
|
|
5
|
+
"mappings": "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",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
|
@@ -25,7 +25,8 @@ var DataViewsSearch = memo(function Search({ label }) {
|
|
|
25
25
|
if (debouncedSearch !== viewRef.current?.search) {
|
|
26
26
|
onChangeViewRef.current({
|
|
27
27
|
...viewRef.current,
|
|
28
|
-
page: 1,
|
|
28
|
+
page: view.page ? 1 : void 0,
|
|
29
|
+
startPosition: view.startPosition ? 1 : void 0,
|
|
29
30
|
search: debouncedSearch
|
|
30
31
|
});
|
|
31
32
|
}
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../src/components/dataviews-search/index.tsx"],
|
|
4
|
-
"sourcesContent": ["/**\n * WordPress dependencies\n */\nimport { __ } from '@wordpress/i18n';\nimport { useEffect, useRef, memo, useContext } from '@wordpress/element';\nimport { SearchControl } from '@wordpress/components';\nimport { useDebouncedInput } from '@wordpress/compose';\n\n/**\n * Internal dependencies\n */\nimport DataViewsContext from '../dataviews-context';\n\ninterface SearchProps {\n\tlabel?: string;\n}\n\nconst DataViewsSearch = memo( function Search( { label }: SearchProps ) {\n\tconst { view, onChangeView } = useContext( DataViewsContext );\n\tconst [ search, setSearch, debouncedSearch ] = useDebouncedInput(\n\t\tview.search\n\t);\n\tuseEffect( () => {\n\t\tif ( view.search !== debouncedSearch ) {\n\t\t\tsetSearch( view.search ?? '' );\n\t\t}\n\t}, [ view.search, setSearch ] );\n\tconst onChangeViewRef = useRef( onChangeView );\n\tconst viewRef = useRef( view );\n\tuseEffect( () => {\n\t\tonChangeViewRef.current = onChangeView;\n\t\tviewRef.current = view;\n\t}, [ onChangeView, view ] );\n\tuseEffect( () => {\n\t\tif ( debouncedSearch !== viewRef.current?.search ) {\n\t\t\tonChangeViewRef.current( {\n\t\t\t\t...viewRef.current,\n\t\t\t\tpage: 1,\n\t\t\t\tsearch: debouncedSearch,\n\t\t\t} );\n\t\t}\n\t}, [ debouncedSearch ] );\n\tconst searchLabel = label || __( 'Search' );\n\treturn (\n\t\t<SearchControl\n\t\t\tclassName=\"dataviews-search\"\n\t\t\tonChange={ setSearch }\n\t\t\tvalue={ search }\n\t\t\tlabel={ searchLabel }\n\t\t\tplaceholder={ searchLabel }\n\t\t\tsize=\"compact\"\n\t\t/>\n\t);\n} );\n\nexport default DataViewsSearch;\n"],
|
|
5
|
-
"mappings": ";AAGA,SAAS,UAAU;AACnB,SAAS,WAAW,QAAQ,MAAM,kBAAkB;AACpD,SAAS,qBAAqB;AAC9B,SAAS,yBAAyB;AAKlC,OAAO,sBAAsB;
|
|
4
|
+
"sourcesContent": ["/**\n * WordPress dependencies\n */\nimport { __ } from '@wordpress/i18n';\nimport { useEffect, useRef, memo, useContext } from '@wordpress/element';\nimport { SearchControl } from '@wordpress/components';\nimport { useDebouncedInput } from '@wordpress/compose';\n\n/**\n * Internal dependencies\n */\nimport DataViewsContext from '../dataviews-context';\n\ninterface SearchProps {\n\tlabel?: string;\n}\n\nconst DataViewsSearch = memo( function Search( { label }: SearchProps ) {\n\tconst { view, onChangeView } = useContext( DataViewsContext );\n\tconst [ search, setSearch, debouncedSearch ] = useDebouncedInput(\n\t\tview.search\n\t);\n\tuseEffect( () => {\n\t\tif ( view.search !== debouncedSearch ) {\n\t\t\tsetSearch( view.search ?? '' );\n\t\t}\n\t}, [ view.search, setSearch ] );\n\tconst onChangeViewRef = useRef( onChangeView );\n\tconst viewRef = useRef( view );\n\tuseEffect( () => {\n\t\tonChangeViewRef.current = onChangeView;\n\t\tviewRef.current = view;\n\t}, [ onChangeView, view ] );\n\tuseEffect( () => {\n\t\tif ( debouncedSearch !== viewRef.current?.search ) {\n\t\t\tonChangeViewRef.current( {\n\t\t\t\t...viewRef.current,\n\t\t\t\tpage: view.page ? 1 : undefined,\n\t\t\t\tstartPosition: view.startPosition ? 1 : undefined,\n\t\t\t\tsearch: debouncedSearch,\n\t\t\t} );\n\t\t}\n\t}, [ debouncedSearch ] );\n\tconst searchLabel = label || __( 'Search' );\n\treturn (\n\t\t<SearchControl\n\t\t\tclassName=\"dataviews-search\"\n\t\t\tonChange={ setSearch }\n\t\t\tvalue={ search }\n\t\t\tlabel={ searchLabel }\n\t\t\tplaceholder={ searchLabel }\n\t\t\tsize=\"compact\"\n\t\t/>\n\t);\n} );\n\nexport default DataViewsSearch;\n"],
|
|
5
|
+
"mappings": ";AAGA,SAAS,UAAU;AACnB,SAAS,WAAW,QAAQ,MAAM,kBAAkB;AACpD,SAAS,qBAAqB;AAC9B,SAAS,yBAAyB;AAKlC,OAAO,sBAAsB;AAkC3B;AA5BF,IAAM,kBAAkB,KAAM,SAAS,OAAQ,EAAE,MAAM,GAAiB;AACvE,QAAM,EAAE,MAAM,aAAa,IAAI,WAAY,gBAAiB;AAC5D,QAAM,CAAE,QAAQ,WAAW,eAAgB,IAAI;AAAA,IAC9C,KAAK;AAAA,EACN;AACA,YAAW,MAAM;AAChB,QAAK,KAAK,WAAW,iBAAkB;AACtC,gBAAW,KAAK,UAAU,EAAG;AAAA,IAC9B;AAAA,EACD,GAAG,CAAE,KAAK,QAAQ,SAAU,CAAE;AAC9B,QAAM,kBAAkB,OAAQ,YAAa;AAC7C,QAAM,UAAU,OAAQ,IAAK;AAC7B,YAAW,MAAM;AAChB,oBAAgB,UAAU;AAC1B,YAAQ,UAAU;AAAA,EACnB,GAAG,CAAE,cAAc,IAAK,CAAE;AAC1B,YAAW,MAAM;AAChB,QAAK,oBAAoB,QAAQ,SAAS,QAAS;AAClD,sBAAgB,QAAS;AAAA,QACxB,GAAG,QAAQ;AAAA,QACX,MAAM,KAAK,OAAO,IAAI;AAAA,QACtB,eAAe,KAAK,gBAAgB,IAAI;AAAA,QACxC,QAAQ;AAAA,MACT,CAAE;AAAA,IACH;AAAA,EACD,GAAG,CAAE,eAAgB,CAAE;AACvB,QAAM,cAAc,SAAS,GAAI,QAAS;AAC1C,SACC;AAAA,IAAC;AAAA;AAAA,MACA,WAAU;AAAA,MACV,UAAW;AAAA,MACX,OAAQ;AAAA,MACR,OAAQ;AAAA,MACR,aAAc;AAAA,MACd,MAAK;AAAA;AAAA,EACN;AAEF,CAAE;AAEF,IAAO,2BAAQ;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
|
@@ -12,7 +12,8 @@ function DataViewsSelectionCheckbox({
|
|
|
12
12
|
...extraProps
|
|
13
13
|
}) {
|
|
14
14
|
const id = getItemId(item);
|
|
15
|
-
const
|
|
15
|
+
const isInSelectionArray = selection.includes(id);
|
|
16
|
+
const checked = !disabled && isInSelectionArray;
|
|
16
17
|
const selectionLabel = titleField?.getValue?.({ item }) || __("(no title)");
|
|
17
18
|
return /* @__PURE__ */ jsx(
|
|
18
19
|
CheckboxControl,
|
|
@@ -26,7 +27,7 @@ function DataViewsSelectionCheckbox({
|
|
|
26
27
|
return;
|
|
27
28
|
}
|
|
28
29
|
onChangeSelection(
|
|
29
|
-
|
|
30
|
+
isInSelectionArray ? selection.filter((itemId) => id !== itemId) : [...selection, id]
|
|
30
31
|
);
|
|
31
32
|
},
|
|
32
33
|
...extraProps
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../src/components/dataviews-selection-checkbox/index.tsx"],
|
|
4
|
-
"sourcesContent": ["/**\n * WordPress dependencies\n */\nimport { CheckboxControl } from '@wordpress/components';\nimport { __ } from '@wordpress/i18n';\n\n/**\n * Internal dependencies\n */\nimport type { SetSelection } from '../../types/private';\nimport type { NormalizedField } from '../../types';\n\ninterface DataViewsSelectionCheckboxProps< Item > {\n\tselection: string[];\n\tonChangeSelection: SetSelection;\n\titem: Item;\n\tgetItemId: ( item: Item ) => string;\n\ttitleField?: NormalizedField< Item >;\n\tdisabled: boolean;\n\ttabIndex?: number;\n}\n\nexport default function DataViewsSelectionCheckbox< Item >( {\n\tselection,\n\tonChangeSelection,\n\titem,\n\tgetItemId,\n\ttitleField,\n\tdisabled,\n\t...extraProps\n}: DataViewsSelectionCheckboxProps< Item > ) {\n\tconst id = getItemId( item );\n\tconst
|
|
5
|
-
"mappings": ";AAGA,SAAS,uBAAuB;AAChC,SAAS,UAAU;
|
|
4
|
+
"sourcesContent": ["/**\n * WordPress dependencies\n */\nimport { CheckboxControl } from '@wordpress/components';\nimport { __ } from '@wordpress/i18n';\n\n/**\n * Internal dependencies\n */\nimport type { SetSelection } from '../../types/private';\nimport type { NormalizedField } from '../../types';\n\ninterface DataViewsSelectionCheckboxProps< Item > {\n\tselection: string[];\n\tonChangeSelection: SetSelection;\n\titem: Item;\n\tgetItemId: ( item: Item ) => string;\n\ttitleField?: NormalizedField< Item >;\n\tdisabled: boolean;\n\ttabIndex?: number;\n}\n\nexport default function DataViewsSelectionCheckbox< Item >( {\n\tselection,\n\tonChangeSelection,\n\titem,\n\tgetItemId,\n\ttitleField,\n\tdisabled,\n\t...extraProps\n}: DataViewsSelectionCheckboxProps< Item > ) {\n\tconst id = getItemId( item );\n\tconst isInSelectionArray = selection.includes( id );\n\tconst checked = ! disabled && isInSelectionArray;\n\n\t// Fallback label to ensure accessibility\n\tconst selectionLabel =\n\t\ttitleField?.getValue?.( { item } ) || __( '(no title)' );\n\n\treturn (\n\t\t<CheckboxControl\n\t\t\tclassName=\"dataviews-selection-checkbox\"\n\t\t\taria-label={ selectionLabel }\n\t\t\taria-disabled={ disabled }\n\t\t\tchecked={ checked }\n\t\t\tonChange={ () => {\n\t\t\t\tif ( disabled ) {\n\t\t\t\t\treturn;\n\t\t\t\t}\n\n\t\t\t\t// Toggle in/out of selection array\n\t\t\t\tonChangeSelection(\n\t\t\t\t\tisInSelectionArray\n\t\t\t\t\t\t? selection.filter( ( itemId ) => id !== itemId )\n\t\t\t\t\t\t: [ ...selection, id ]\n\t\t\t\t);\n\t\t\t} }\n\t\t\t{ ...extraProps }\n\t\t/>\n\t);\n}\n"],
|
|
5
|
+
"mappings": ";AAGA,SAAS,uBAAuB;AAChC,SAAS,UAAU;AAoCjB;AAlBa,SAAR,2BAAqD;AAAA,EAC3D;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,GAAG;AACJ,GAA6C;AAC5C,QAAM,KAAK,UAAW,IAAK;AAC3B,QAAM,qBAAqB,UAAU,SAAU,EAAG;AAClD,QAAM,UAAU,CAAE,YAAY;AAG9B,QAAM,iBACL,YAAY,WAAY,EAAE,KAAK,CAAE,KAAK,GAAI,YAAa;AAExD,SACC;AAAA,IAAC;AAAA;AAAA,MACA,WAAU;AAAA,MACV,cAAa;AAAA,MACb,iBAAgB;AAAA,MAChB;AAAA,MACA,UAAW,MAAM;AAChB,YAAK,UAAW;AACf;AAAA,QACD;AAGA;AAAA,UACC,qBACG,UAAU,OAAQ,CAAE,WAAY,OAAO,MAAO,IAC9C,CAAE,GAAG,WAAW,EAAG;AAAA,QACvB;AAAA,MACD;AAAA,MACE,GAAG;AAAA;AAAA,EACN;AAEF;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
|
@@ -19,7 +19,6 @@ import { Stack } from "@wordpress/ui";
|
|
|
19
19
|
import { SORTING_DIRECTIONS, sortIcons, sortLabels } from "../../constants.mjs";
|
|
20
20
|
import { VIEW_LAYOUTS } from "../dataviews-layouts/index.mjs";
|
|
21
21
|
import DataViewsContext from "../dataviews-context/index.mjs";
|
|
22
|
-
import InfiniteScrollToggle from "./infinite-scroll-toggle.mjs";
|
|
23
22
|
import { PropertiesSection } from "./properties-section.mjs";
|
|
24
23
|
import { unlock } from "../../lock-unlock.mjs";
|
|
25
24
|
import { Fragment, jsx, jsxs } from "react/jsx-runtime";
|
|
@@ -316,7 +315,6 @@ function DataviewsViewConfigDropdown() {
|
|
|
316
315
|
}
|
|
317
316
|
),
|
|
318
317
|
!!activeLayout?.viewConfigOptions && /* @__PURE__ */ jsx(activeLayout.viewConfigOptions, {}),
|
|
319
|
-
/* @__PURE__ */ jsx(InfiniteScrollToggle, {}),
|
|
320
318
|
/* @__PURE__ */ jsx(ItemsPerPageControl, {}),
|
|
321
319
|
/* @__PURE__ */ jsx(PropertiesSection, {})
|
|
322
320
|
] })
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../src/components/dataviews-view-config/index.tsx"],
|
|
4
|
-
"sourcesContent": ["/**\n * External dependencies\n */\nimport type { ChangeEvent } from 'react';\n\n/**\n * WordPress dependencies\n */\nimport {\n\tButton,\n\t__experimentalDropdownContentWrapper as DropdownContentWrapper,\n\tDropdown,\n\t__experimentalToggleGroupControl as ToggleGroupControl,\n\t__experimentalToggleGroupControlOption as ToggleGroupControlOption,\n\t__experimentalToggleGroupControlOptionIcon as ToggleGroupControlOptionIcon,\n\tSelectControl,\n\t__experimentalHeading as Heading,\n\tprivateApis as componentsPrivateApis,\n} from '@wordpress/components';\nimport { __, _x } from '@wordpress/i18n';\nimport { memo, useContext, useMemo } from '@wordpress/element';\nimport { cog } from '@wordpress/icons';\nimport warning from '@wordpress/warning';\nimport { useInstanceId } from '@wordpress/compose';\nimport { Stack } from '@wordpress/ui';\n\n/**\n * Internal dependencies\n */\nimport { SORTING_DIRECTIONS, sortIcons, sortLabels } from '../../constants';\nimport { VIEW_LAYOUTS } from '../dataviews-layouts';\nimport type { View } from '../../types';\nimport DataViewsContext from '../dataviews-context';\nimport InfiniteScrollToggle from './infinite-scroll-toggle';\nimport { PropertiesSection } from './properties-section';\nimport { unlock } from '../../lock-unlock';\n\nconst { Menu } = unlock( componentsPrivateApis );\n\nconst DATAVIEWS_CONFIG_POPOVER_PROPS = {\n\tclassName: 'dataviews-config__popover',\n\tplacement: 'bottom-end',\n\toffset: 9,\n};\n\nexport function ViewTypeMenu() {\n\tconst { view, onChangeView, defaultLayouts } =\n\t\tuseContext( DataViewsContext );\n\tconst availableLayouts = Object.keys( defaultLayouts );\n\tif ( availableLayouts.length <= 1 ) {\n\t\treturn null;\n\t}\n\tconst activeView = VIEW_LAYOUTS.find( ( v ) => view.type === v.type );\n\treturn (\n\t\t<Menu>\n\t\t\t<Menu.TriggerButton\n\t\t\t\trender={\n\t\t\t\t\t<Button\n\t\t\t\t\t\tsize=\"compact\"\n\t\t\t\t\t\ticon={ activeView?.icon }\n\t\t\t\t\t\tlabel={ __( 'Layout' ) }\n\t\t\t\t\t/>\n\t\t\t\t}\n\t\t\t/>\n\t\t\t<Menu.Popover>\n\t\t\t\t{ availableLayouts.map( ( layout ) => {\n\t\t\t\t\tconst config = VIEW_LAYOUTS.find(\n\t\t\t\t\t\t( v ) => v.type === layout\n\t\t\t\t\t);\n\t\t\t\t\tif ( ! config ) {\n\t\t\t\t\t\treturn null;\n\t\t\t\t\t}\n\t\t\t\t\treturn (\n\t\t\t\t\t\t<Menu.RadioItem\n\t\t\t\t\t\t\tkey={ layout }\n\t\t\t\t\t\t\tvalue={ layout }\n\t\t\t\t\t\t\tname=\"view-actions-available-view\"\n\t\t\t\t\t\t\tchecked={ layout === view.type }\n\t\t\t\t\t\t\thideOnClick\n\t\t\t\t\t\t\tonChange={ (\n\t\t\t\t\t\t\t\te: ChangeEvent< HTMLInputElement >\n\t\t\t\t\t\t\t) => {\n\t\t\t\t\t\t\t\tswitch ( e.target.value ) {\n\t\t\t\t\t\t\t\t\tcase 'list':\n\t\t\t\t\t\t\t\t\tcase 'grid':\n\t\t\t\t\t\t\t\t\tcase 'table':\n\t\t\t\t\t\t\t\t\tcase 'pickerGrid':\n\t\t\t\t\t\t\t\t\tcase 'pickerTable':\n\t\t\t\t\t\t\t\t\tcase 'activity':\n\t\t\t\t\t\t\t\t\t\tconst viewWithoutLayout = { ...view };\n\t\t\t\t\t\t\t\t\t\tif ( 'layout' in viewWithoutLayout ) {\n\t\t\t\t\t\t\t\t\t\t\tdelete viewWithoutLayout.layout;\n\t\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\t\treturn onChangeView( {\n\t\t\t\t\t\t\t\t\t\t\t...viewWithoutLayout,\n\t\t\t\t\t\t\t\t\t\t\ttype: e.target.value,\n\t\t\t\t\t\t\t\t\t\t\t...defaultLayouts[ e.target.value ],\n\t\t\t\t\t\t\t\t\t\t} as View );\n\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\twarning( 'Invalid dataview' );\n\t\t\t\t\t\t\t} }\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t<Menu.ItemLabel>{ config.label }</Menu.ItemLabel>\n\t\t\t\t\t\t</Menu.RadioItem>\n\t\t\t\t\t);\n\t\t\t\t} ) }\n\t\t\t</Menu.Popover>\n\t\t</Menu>\n\t);\n}\n\nfunction SortFieldControl() {\n\tconst { view, fields, onChangeView } = useContext( DataViewsContext );\n\tconst orderOptions = useMemo( () => {\n\t\tconst sortableFields = fields.filter(\n\t\t\t( field ) => field.enableSorting !== false\n\t\t);\n\t\treturn sortableFields.map( ( field ) => {\n\t\t\treturn {\n\t\t\t\tlabel: field.label,\n\t\t\t\tvalue: field.id,\n\t\t\t};\n\t\t} );\n\t}, [ fields ] );\n\n\treturn (\n\t\t<SelectControl\n\t\t\t__next40pxDefaultSize\n\t\t\tlabel={ __( 'Sort by' ) }\n\t\t\tvalue={ view.sort?.field }\n\t\t\toptions={ orderOptions }\n\t\t\tonChange={ ( value: string ) => {\n\t\t\t\tonChangeView( {\n\t\t\t\t\t...view,\n\t\t\t\t\tsort: {\n\t\t\t\t\t\tdirection: view?.sort?.direction || 'desc',\n\t\t\t\t\t\tfield: value,\n\t\t\t\t\t},\n\t\t\t\t\tshowLevels: false,\n\t\t\t\t} );\n\t\t\t} }\n\t\t/>\n\t);\n}\n\nfunction SortDirectionControl() {\n\tconst { view, fields, onChangeView } = useContext( DataViewsContext );\n\n\tconst sortableFields = fields.filter(\n\t\t( field ) => field.enableSorting !== false\n\t);\n\tif ( sortableFields.length === 0 ) {\n\t\treturn null;\n\t}\n\n\tlet value = view.sort?.direction;\n\tif ( ! value && view.sort?.field ) {\n\t\tvalue = 'desc';\n\t}\n\treturn (\n\t\t<ToggleGroupControl\n\t\t\tclassName=\"dataviews-view-config__sort-direction\"\n\t\t\t__next40pxDefaultSize\n\t\t\tisBlock\n\t\t\tlabel={ __( 'Order' ) }\n\t\t\tvalue={ value }\n\t\t\tonChange={ ( newDirection ) => {\n\t\t\t\tif ( newDirection === 'asc' || newDirection === 'desc' ) {\n\t\t\t\t\tonChangeView( {\n\t\t\t\t\t\t...view,\n\t\t\t\t\t\tsort: {\n\t\t\t\t\t\t\tdirection: newDirection,\n\t\t\t\t\t\t\tfield:\n\t\t\t\t\t\t\t\tview.sort?.field ||\n\t\t\t\t\t\t\t\t// If there is no field assigned as the sorting field assign the first sortable field.\n\t\t\t\t\t\t\t\tfields.find(\n\t\t\t\t\t\t\t\t\t( field ) => field.enableSorting !== false\n\t\t\t\t\t\t\t\t)?.id ||\n\t\t\t\t\t\t\t\t'',\n\t\t\t\t\t\t},\n\t\t\t\t\t\tshowLevels: false,\n\t\t\t\t\t} );\n\t\t\t\t\treturn;\n\t\t\t\t}\n\t\t\t\twarning( 'Invalid direction' );\n\t\t\t} }\n\t\t>\n\t\t\t{ SORTING_DIRECTIONS.map( ( direction ) => {\n\t\t\t\treturn (\n\t\t\t\t\t<ToggleGroupControlOptionIcon\n\t\t\t\t\t\tkey={ direction }\n\t\t\t\t\t\tvalue={ direction }\n\t\t\t\t\t\ticon={ sortIcons[ direction ] }\n\t\t\t\t\t\tlabel={ sortLabels[ direction ] }\n\t\t\t\t\t/>\n\t\t\t\t);\n\t\t\t} ) }\n\t\t</ToggleGroupControl>\n\t);\n}\n\nfunction ItemsPerPageControl() {\n\tconst { view, config, onChangeView } = useContext( DataViewsContext );\n\tconst { infiniteScrollEnabled } = view;\n\tif (\n\t\t! config ||\n\t\t! config.perPageSizes ||\n\t\tconfig.perPageSizes.length < 2 ||\n\t\tconfig.perPageSizes.length > 6 ||\n\t\tinfiniteScrollEnabled\n\t) {\n\t\treturn null;\n\t}\n\n\treturn (\n\t\t<ToggleGroupControl\n\t\t\t__next40pxDefaultSize\n\t\t\tisBlock\n\t\t\tlabel={ __( 'Items per page' ) }\n\t\t\tvalue={ view.perPage || 10 }\n\t\t\tdisabled={ ! view?.sort?.field }\n\t\t\tonChange={ ( newItemsPerPage ) => {\n\t\t\t\tconst newItemsPerPageNumber =\n\t\t\t\t\ttypeof newItemsPerPage === 'number' ||\n\t\t\t\t\tnewItemsPerPage === undefined\n\t\t\t\t\t\t? newItemsPerPage\n\t\t\t\t\t\t: parseInt( newItemsPerPage, 10 );\n\t\t\t\tonChangeView( {\n\t\t\t\t\t...view,\n\t\t\t\t\tperPage: newItemsPerPageNumber,\n\t\t\t\t\tpage: 1,\n\t\t\t\t} );\n\t\t\t} }\n\t\t>\n\t\t\t{ config.perPageSizes.map( ( value ) => {\n\t\t\t\treturn (\n\t\t\t\t\t<ToggleGroupControlOption\n\t\t\t\t\t\tkey={ value }\n\t\t\t\t\t\tvalue={ value }\n\t\t\t\t\t\tlabel={ value.toString() }\n\t\t\t\t\t/>\n\t\t\t\t);\n\t\t\t} ) }\n\t\t</ToggleGroupControl>\n\t);\n}\n\nfunction ResetViewButton() {\n\tconst { onReset } = useContext( DataViewsContext );\n\n\t// Don't render if no persistence support (onReset is undefined)\n\tif ( onReset === undefined ) {\n\t\treturn null;\n\t}\n\n\tconst isDisabled = onReset === false;\n\n\treturn (\n\t\t<Button\n\t\t\tvariant=\"tertiary\"\n\t\t\tsize=\"compact\"\n\t\t\tdisabled={ isDisabled }\n\t\t\taccessibleWhenDisabled\n\t\t\tclassName=\"dataviews-view-config__reset-button\"\n\t\t\tonClick={ () => {\n\t\t\t\tif ( typeof onReset === 'function' ) {\n\t\t\t\t\tonReset();\n\t\t\t\t}\n\t\t\t} }\n\t\t>\n\t\t\t{ __( 'Reset view' ) }\n\t\t</Button>\n\t);\n}\n\nexport function DataviewsViewConfigDropdown() {\n\tconst { view, onReset } = useContext( DataViewsContext );\n\tconst popoverId = useInstanceId(\n\t\t_DataViewsViewConfig,\n\t\t'dataviews-view-config-dropdown'\n\t);\n\tconst activeLayout = VIEW_LAYOUTS.find(\n\t\t( layout ) => layout.type === view.type\n\t);\n\tconst isModified = typeof onReset === 'function';\n\treturn (\n\t\t<Dropdown\n\t\t\texpandOnMobile\n\t\t\tpopoverProps={ {\n\t\t\t\t...DATAVIEWS_CONFIG_POPOVER_PROPS,\n\t\t\t\tid: popoverId,\n\t\t\t} }\n\t\t\trenderToggle={ ( { onToggle, isOpen } ) => {\n\t\t\t\treturn (\n\t\t\t\t\t<div className=\"dataviews-view-config__toggle-wrapper\">\n\t\t\t\t\t\t<Button\n\t\t\t\t\t\t\tsize=\"compact\"\n\t\t\t\t\t\t\ticon={ cog }\n\t\t\t\t\t\t\tlabel={ _x(\n\t\t\t\t\t\t\t\t'View options',\n\t\t\t\t\t\t\t\t'View is used as a noun'\n\t\t\t\t\t\t\t) }\n\t\t\t\t\t\t\tonClick={ onToggle }\n\t\t\t\t\t\t\taria-expanded={ isOpen ? 'true' : 'false' }\n\t\t\t\t\t\t\taria-controls={ popoverId }\n\t\t\t\t\t\t/>\n\t\t\t\t\t\t{ isModified && (\n\t\t\t\t\t\t\t<span className=\"dataviews-view-config__modified-indicator\" />\n\t\t\t\t\t\t) }\n\t\t\t\t\t</div>\n\t\t\t\t);\n\t\t\t} }\n\t\t\trenderContent={ () => (\n\t\t\t\t<DropdownContentWrapper\n\t\t\t\t\tpaddingSize=\"medium\"\n\t\t\t\t\tclassName=\"dataviews-config__popover-content-wrapper\"\n\t\t\t\t>\n\t\t\t\t\t<Stack\n\t\t\t\t\t\tdirection=\"column\"\n\t\t\t\t\t\tclassName=\"dataviews-view-config\"\n\t\t\t\t\t\tgap=\"xl\"\n\t\t\t\t\t>\n\t\t\t\t\t\t<Stack\n\t\t\t\t\t\t\tdirection=\"row\"\n\t\t\t\t\t\t\tjustify=\"space-between\"\n\t\t\t\t\t\t\talign=\"center\"\n\t\t\t\t\t\t\tclassName=\"dataviews-view-config__header\"\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t<Heading\n\t\t\t\t\t\t\t\tlevel={ 2 }\n\t\t\t\t\t\t\t\tclassName=\"dataviews-settings-section__title\"\n\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t{ __( 'Appearance' ) }\n\t\t\t\t\t\t\t</Heading>\n\t\t\t\t\t\t\t<ResetViewButton />\n\t\t\t\t\t\t</Stack>\n\t\t\t\t\t\t<Stack direction=\"column\" gap=\"lg\">\n\t\t\t\t\t\t\t<Stack\n\t\t\t\t\t\t\t\tdirection=\"row\"\n\t\t\t\t\t\t\t\tgap=\"sm\"\n\t\t\t\t\t\t\t\tclassName=\"dataviews-view-config__sort-controls\"\n\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t<SortFieldControl />\n\t\t\t\t\t\t\t\t<SortDirectionControl />\n\t\t\t\t\t\t\t</Stack>\n\t\t\t\t\t\t\t{ !! activeLayout?.viewConfigOptions && (\n\t\t\t\t\t\t\t\t<activeLayout.viewConfigOptions />\n\t\t\t\t\t\t\t) }\n\t\t\t\t\t\t\t<InfiniteScrollToggle />\n\t\t\t\t\t\t\t<ItemsPerPageControl />\n\t\t\t\t\t\t\t<PropertiesSection />\n\t\t\t\t\t\t</Stack>\n\t\t\t\t\t</Stack>\n\t\t\t\t</DropdownContentWrapper>\n\t\t\t) }\n\t\t/>\n\t);\n}\n\nfunction _DataViewsViewConfig() {\n\treturn (\n\t\t<>\n\t\t\t<ViewTypeMenu />\n\t\t\t<DataviewsViewConfigDropdown />\n\t\t</>\n\t);\n}\n\nconst DataViewsViewConfig = memo( _DataViewsViewConfig );\n\nexport default DataViewsViewConfig;\n"],
|
|
5
|
-
"mappings": ";AAQA;AAAA,EACC;AAAA,EACA,wCAAwC;AAAA,EACxC;AAAA,EACA,oCAAoC;AAAA,EACpC,0CAA0C;AAAA,EAC1C,8CAA8C;AAAA,EAC9C;AAAA,EACA,yBAAyB;AAAA,EACzB,eAAe;AAAA,OACT;AACP,SAAS,IAAI,UAAU;AACvB,SAAS,MAAM,YAAY,eAAe;AAC1C,SAAS,WAAW;AACpB,OAAO,aAAa;AACpB,SAAS,qBAAqB;AAC9B,SAAS,aAAa;AAKtB,SAAS,oBAAoB,WAAW,kBAAkB;AAC1D,SAAS,oBAAoB;AAE7B,OAAO,sBAAsB;AAC7B,
|
|
4
|
+
"sourcesContent": ["/**\n * External dependencies\n */\nimport type { ChangeEvent } from 'react';\n\n/**\n * WordPress dependencies\n */\nimport {\n\tButton,\n\t__experimentalDropdownContentWrapper as DropdownContentWrapper,\n\tDropdown,\n\t__experimentalToggleGroupControl as ToggleGroupControl,\n\t__experimentalToggleGroupControlOption as ToggleGroupControlOption,\n\t__experimentalToggleGroupControlOptionIcon as ToggleGroupControlOptionIcon,\n\tSelectControl,\n\t__experimentalHeading as Heading,\n\tprivateApis as componentsPrivateApis,\n} from '@wordpress/components';\nimport { __, _x } from '@wordpress/i18n';\nimport { memo, useContext, useMemo } from '@wordpress/element';\nimport { cog } from '@wordpress/icons';\nimport warning from '@wordpress/warning';\nimport { useInstanceId } from '@wordpress/compose';\nimport { Stack } from '@wordpress/ui';\n\n/**\n * Internal dependencies\n */\nimport { SORTING_DIRECTIONS, sortIcons, sortLabels } from '../../constants';\nimport { VIEW_LAYOUTS } from '../dataviews-layouts';\nimport type { View } from '../../types';\nimport DataViewsContext from '../dataviews-context';\nimport { PropertiesSection } from './properties-section';\nimport { unlock } from '../../lock-unlock';\n\nconst { Menu } = unlock( componentsPrivateApis );\n\nconst DATAVIEWS_CONFIG_POPOVER_PROPS = {\n\tclassName: 'dataviews-config__popover',\n\tplacement: 'bottom-end',\n\toffset: 9,\n};\n\nexport function ViewTypeMenu() {\n\tconst { view, onChangeView, defaultLayouts } =\n\t\tuseContext( DataViewsContext );\n\tconst availableLayouts = Object.keys( defaultLayouts );\n\tif ( availableLayouts.length <= 1 ) {\n\t\treturn null;\n\t}\n\tconst activeView = VIEW_LAYOUTS.find( ( v ) => view.type === v.type );\n\treturn (\n\t\t<Menu>\n\t\t\t<Menu.TriggerButton\n\t\t\t\trender={\n\t\t\t\t\t<Button\n\t\t\t\t\t\tsize=\"compact\"\n\t\t\t\t\t\ticon={ activeView?.icon }\n\t\t\t\t\t\tlabel={ __( 'Layout' ) }\n\t\t\t\t\t/>\n\t\t\t\t}\n\t\t\t/>\n\t\t\t<Menu.Popover>\n\t\t\t\t{ availableLayouts.map( ( layout ) => {\n\t\t\t\t\tconst config = VIEW_LAYOUTS.find(\n\t\t\t\t\t\t( v ) => v.type === layout\n\t\t\t\t\t);\n\t\t\t\t\tif ( ! config ) {\n\t\t\t\t\t\treturn null;\n\t\t\t\t\t}\n\t\t\t\t\treturn (\n\t\t\t\t\t\t<Menu.RadioItem\n\t\t\t\t\t\t\tkey={ layout }\n\t\t\t\t\t\t\tvalue={ layout }\n\t\t\t\t\t\t\tname=\"view-actions-available-view\"\n\t\t\t\t\t\t\tchecked={ layout === view.type }\n\t\t\t\t\t\t\thideOnClick\n\t\t\t\t\t\t\tonChange={ (\n\t\t\t\t\t\t\t\te: ChangeEvent< HTMLInputElement >\n\t\t\t\t\t\t\t) => {\n\t\t\t\t\t\t\t\tswitch ( e.target.value ) {\n\t\t\t\t\t\t\t\t\tcase 'list':\n\t\t\t\t\t\t\t\t\tcase 'grid':\n\t\t\t\t\t\t\t\t\tcase 'table':\n\t\t\t\t\t\t\t\t\tcase 'pickerGrid':\n\t\t\t\t\t\t\t\t\tcase 'pickerTable':\n\t\t\t\t\t\t\t\t\tcase 'activity':\n\t\t\t\t\t\t\t\t\t\tconst viewWithoutLayout = { ...view };\n\t\t\t\t\t\t\t\t\t\tif ( 'layout' in viewWithoutLayout ) {\n\t\t\t\t\t\t\t\t\t\t\tdelete viewWithoutLayout.layout;\n\t\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\t\treturn onChangeView( {\n\t\t\t\t\t\t\t\t\t\t\t...viewWithoutLayout,\n\t\t\t\t\t\t\t\t\t\t\ttype: e.target.value,\n\t\t\t\t\t\t\t\t\t\t\t...defaultLayouts[ e.target.value ],\n\t\t\t\t\t\t\t\t\t\t} as View );\n\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\twarning( 'Invalid dataview' );\n\t\t\t\t\t\t\t} }\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t<Menu.ItemLabel>{ config.label }</Menu.ItemLabel>\n\t\t\t\t\t\t</Menu.RadioItem>\n\t\t\t\t\t);\n\t\t\t\t} ) }\n\t\t\t</Menu.Popover>\n\t\t</Menu>\n\t);\n}\n\nfunction SortFieldControl() {\n\tconst { view, fields, onChangeView } = useContext( DataViewsContext );\n\tconst orderOptions = useMemo( () => {\n\t\tconst sortableFields = fields.filter(\n\t\t\t( field ) => field.enableSorting !== false\n\t\t);\n\t\treturn sortableFields.map( ( field ) => {\n\t\t\treturn {\n\t\t\t\tlabel: field.label,\n\t\t\t\tvalue: field.id,\n\t\t\t};\n\t\t} );\n\t}, [ fields ] );\n\n\treturn (\n\t\t<SelectControl\n\t\t\t__next40pxDefaultSize\n\t\t\tlabel={ __( 'Sort by' ) }\n\t\t\tvalue={ view.sort?.field }\n\t\t\toptions={ orderOptions }\n\t\t\tonChange={ ( value: string ) => {\n\t\t\t\tonChangeView( {\n\t\t\t\t\t...view,\n\t\t\t\t\tsort: {\n\t\t\t\t\t\tdirection: view?.sort?.direction || 'desc',\n\t\t\t\t\t\tfield: value,\n\t\t\t\t\t},\n\t\t\t\t\tshowLevels: false,\n\t\t\t\t} );\n\t\t\t} }\n\t\t/>\n\t);\n}\n\nfunction SortDirectionControl() {\n\tconst { view, fields, onChangeView } = useContext( DataViewsContext );\n\n\tconst sortableFields = fields.filter(\n\t\t( field ) => field.enableSorting !== false\n\t);\n\tif ( sortableFields.length === 0 ) {\n\t\treturn null;\n\t}\n\n\tlet value = view.sort?.direction;\n\tif ( ! value && view.sort?.field ) {\n\t\tvalue = 'desc';\n\t}\n\treturn (\n\t\t<ToggleGroupControl\n\t\t\tclassName=\"dataviews-view-config__sort-direction\"\n\t\t\t__next40pxDefaultSize\n\t\t\tisBlock\n\t\t\tlabel={ __( 'Order' ) }\n\t\t\tvalue={ value }\n\t\t\tonChange={ ( newDirection ) => {\n\t\t\t\tif ( newDirection === 'asc' || newDirection === 'desc' ) {\n\t\t\t\t\tonChangeView( {\n\t\t\t\t\t\t...view,\n\t\t\t\t\t\tsort: {\n\t\t\t\t\t\t\tdirection: newDirection,\n\t\t\t\t\t\t\tfield:\n\t\t\t\t\t\t\t\tview.sort?.field ||\n\t\t\t\t\t\t\t\t// If there is no field assigned as the sorting field assign the first sortable field.\n\t\t\t\t\t\t\t\tfields.find(\n\t\t\t\t\t\t\t\t\t( field ) => field.enableSorting !== false\n\t\t\t\t\t\t\t\t)?.id ||\n\t\t\t\t\t\t\t\t'',\n\t\t\t\t\t\t},\n\t\t\t\t\t\tshowLevels: false,\n\t\t\t\t\t} );\n\t\t\t\t\treturn;\n\t\t\t\t}\n\t\t\t\twarning( 'Invalid direction' );\n\t\t\t} }\n\t\t>\n\t\t\t{ SORTING_DIRECTIONS.map( ( direction ) => {\n\t\t\t\treturn (\n\t\t\t\t\t<ToggleGroupControlOptionIcon\n\t\t\t\t\t\tkey={ direction }\n\t\t\t\t\t\tvalue={ direction }\n\t\t\t\t\t\ticon={ sortIcons[ direction ] }\n\t\t\t\t\t\tlabel={ sortLabels[ direction ] }\n\t\t\t\t\t/>\n\t\t\t\t);\n\t\t\t} ) }\n\t\t</ToggleGroupControl>\n\t);\n}\n\nfunction ItemsPerPageControl() {\n\tconst { view, config, onChangeView } = useContext( DataViewsContext );\n\tconst { infiniteScrollEnabled } = view;\n\tif (\n\t\t! config ||\n\t\t! config.perPageSizes ||\n\t\tconfig.perPageSizes.length < 2 ||\n\t\tconfig.perPageSizes.length > 6 ||\n\t\tinfiniteScrollEnabled\n\t) {\n\t\treturn null;\n\t}\n\n\treturn (\n\t\t<ToggleGroupControl\n\t\t\t__next40pxDefaultSize\n\t\t\tisBlock\n\t\t\tlabel={ __( 'Items per page' ) }\n\t\t\tvalue={ view.perPage || 10 }\n\t\t\tdisabled={ ! view?.sort?.field }\n\t\t\tonChange={ ( newItemsPerPage ) => {\n\t\t\t\tconst newItemsPerPageNumber =\n\t\t\t\t\ttypeof newItemsPerPage === 'number' ||\n\t\t\t\t\tnewItemsPerPage === undefined\n\t\t\t\t\t\t? newItemsPerPage\n\t\t\t\t\t\t: parseInt( newItemsPerPage, 10 );\n\t\t\t\tonChangeView( {\n\t\t\t\t\t...view,\n\t\t\t\t\tperPage: newItemsPerPageNumber,\n\t\t\t\t\tpage: 1,\n\t\t\t\t} );\n\t\t\t} }\n\t\t>\n\t\t\t{ config.perPageSizes.map( ( value ) => {\n\t\t\t\treturn (\n\t\t\t\t\t<ToggleGroupControlOption\n\t\t\t\t\t\tkey={ value }\n\t\t\t\t\t\tvalue={ value }\n\t\t\t\t\t\tlabel={ value.toString() }\n\t\t\t\t\t/>\n\t\t\t\t);\n\t\t\t} ) }\n\t\t</ToggleGroupControl>\n\t);\n}\n\nfunction ResetViewButton() {\n\tconst { onReset } = useContext( DataViewsContext );\n\n\t// Don't render if no persistence support (onReset is undefined)\n\tif ( onReset === undefined ) {\n\t\treturn null;\n\t}\n\n\tconst isDisabled = onReset === false;\n\n\treturn (\n\t\t<Button\n\t\t\tvariant=\"tertiary\"\n\t\t\tsize=\"compact\"\n\t\t\tdisabled={ isDisabled }\n\t\t\taccessibleWhenDisabled\n\t\t\tclassName=\"dataviews-view-config__reset-button\"\n\t\t\tonClick={ () => {\n\t\t\t\tif ( typeof onReset === 'function' ) {\n\t\t\t\t\tonReset();\n\t\t\t\t}\n\t\t\t} }\n\t\t>\n\t\t\t{ __( 'Reset view' ) }\n\t\t</Button>\n\t);\n}\n\nexport function DataviewsViewConfigDropdown() {\n\tconst { view, onReset } = useContext( DataViewsContext );\n\tconst popoverId = useInstanceId(\n\t\t_DataViewsViewConfig,\n\t\t'dataviews-view-config-dropdown'\n\t);\n\tconst activeLayout = VIEW_LAYOUTS.find(\n\t\t( layout ) => layout.type === view.type\n\t);\n\tconst isModified = typeof onReset === 'function';\n\treturn (\n\t\t<Dropdown\n\t\t\texpandOnMobile\n\t\t\tpopoverProps={ {\n\t\t\t\t...DATAVIEWS_CONFIG_POPOVER_PROPS,\n\t\t\t\tid: popoverId,\n\t\t\t} }\n\t\t\trenderToggle={ ( { onToggle, isOpen } ) => {\n\t\t\t\treturn (\n\t\t\t\t\t<div className=\"dataviews-view-config__toggle-wrapper\">\n\t\t\t\t\t\t<Button\n\t\t\t\t\t\t\tsize=\"compact\"\n\t\t\t\t\t\t\ticon={ cog }\n\t\t\t\t\t\t\tlabel={ _x(\n\t\t\t\t\t\t\t\t'View options',\n\t\t\t\t\t\t\t\t'View is used as a noun'\n\t\t\t\t\t\t\t) }\n\t\t\t\t\t\t\tonClick={ onToggle }\n\t\t\t\t\t\t\taria-expanded={ isOpen ? 'true' : 'false' }\n\t\t\t\t\t\t\taria-controls={ popoverId }\n\t\t\t\t\t\t/>\n\t\t\t\t\t\t{ isModified && (\n\t\t\t\t\t\t\t<span className=\"dataviews-view-config__modified-indicator\" />\n\t\t\t\t\t\t) }\n\t\t\t\t\t</div>\n\t\t\t\t);\n\t\t\t} }\n\t\t\trenderContent={ () => (\n\t\t\t\t<DropdownContentWrapper\n\t\t\t\t\tpaddingSize=\"medium\"\n\t\t\t\t\tclassName=\"dataviews-config__popover-content-wrapper\"\n\t\t\t\t>\n\t\t\t\t\t<Stack\n\t\t\t\t\t\tdirection=\"column\"\n\t\t\t\t\t\tclassName=\"dataviews-view-config\"\n\t\t\t\t\t\tgap=\"xl\"\n\t\t\t\t\t>\n\t\t\t\t\t\t<Stack\n\t\t\t\t\t\t\tdirection=\"row\"\n\t\t\t\t\t\t\tjustify=\"space-between\"\n\t\t\t\t\t\t\talign=\"center\"\n\t\t\t\t\t\t\tclassName=\"dataviews-view-config__header\"\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t<Heading\n\t\t\t\t\t\t\t\tlevel={ 2 }\n\t\t\t\t\t\t\t\tclassName=\"dataviews-settings-section__title\"\n\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t{ __( 'Appearance' ) }\n\t\t\t\t\t\t\t</Heading>\n\t\t\t\t\t\t\t<ResetViewButton />\n\t\t\t\t\t\t</Stack>\n\t\t\t\t\t\t<Stack direction=\"column\" gap=\"lg\">\n\t\t\t\t\t\t\t<Stack\n\t\t\t\t\t\t\t\tdirection=\"row\"\n\t\t\t\t\t\t\t\tgap=\"sm\"\n\t\t\t\t\t\t\t\tclassName=\"dataviews-view-config__sort-controls\"\n\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t<SortFieldControl />\n\t\t\t\t\t\t\t\t<SortDirectionControl />\n\t\t\t\t\t\t\t</Stack>\n\t\t\t\t\t\t\t{ !! activeLayout?.viewConfigOptions && (\n\t\t\t\t\t\t\t\t<activeLayout.viewConfigOptions />\n\t\t\t\t\t\t\t) }\n\t\t\t\t\t\t\t<ItemsPerPageControl />\n\t\t\t\t\t\t\t<PropertiesSection />\n\t\t\t\t\t\t</Stack>\n\t\t\t\t\t</Stack>\n\t\t\t\t</DropdownContentWrapper>\n\t\t\t) }\n\t\t/>\n\t);\n}\n\nfunction _DataViewsViewConfig() {\n\treturn (\n\t\t<>\n\t\t\t<ViewTypeMenu />\n\t\t\t<DataviewsViewConfigDropdown />\n\t\t</>\n\t);\n}\n\nconst DataViewsViewConfig = memo( _DataViewsViewConfig );\n\nexport default DataViewsViewConfig;\n"],
|
|
5
|
+
"mappings": ";AAQA;AAAA,EACC;AAAA,EACA,wCAAwC;AAAA,EACxC;AAAA,EACA,oCAAoC;AAAA,EACpC,0CAA0C;AAAA,EAC1C,8CAA8C;AAAA,EAC9C;AAAA,EACA,yBAAyB;AAAA,EACzB,eAAe;AAAA,OACT;AACP,SAAS,IAAI,UAAU;AACvB,SAAS,MAAM,YAAY,eAAe;AAC1C,SAAS,WAAW;AACpB,OAAO,aAAa;AACpB,SAAS,qBAAqB;AAC9B,SAAS,aAAa;AAKtB,SAAS,oBAAoB,WAAW,kBAAkB;AAC1D,SAAS,oBAAoB;AAE7B,OAAO,sBAAsB;AAC7B,SAAS,yBAAyB;AAClC,SAAS,cAAc;AAmBrB,SAkTA,UA/SG,KAHH;AAjBF,IAAM,EAAE,KAAK,IAAI,OAAQ,qBAAsB;AAE/C,IAAM,iCAAiC;AAAA,EACtC,WAAW;AAAA,EACX,WAAW;AAAA,EACX,QAAQ;AACT;AAEO,SAAS,eAAe;AAC9B,QAAM,EAAE,MAAM,cAAc,eAAe,IAC1C,WAAY,gBAAiB;AAC9B,QAAM,mBAAmB,OAAO,KAAM,cAAe;AACrD,MAAK,iBAAiB,UAAU,GAAI;AACnC,WAAO;AAAA,EACR;AACA,QAAM,aAAa,aAAa,KAAM,CAAE,MAAO,KAAK,SAAS,EAAE,IAAK;AACpE,SACC,qBAAC,QACA;AAAA;AAAA,MAAC,KAAK;AAAA,MAAL;AAAA,QACA,QACC;AAAA,UAAC;AAAA;AAAA,YACA,MAAK;AAAA,YACL,MAAO,YAAY;AAAA,YACnB,OAAQ,GAAI,QAAS;AAAA;AAAA,QACtB;AAAA;AAAA,IAEF;AAAA,IACA,oBAAC,KAAK,SAAL,EACE,2BAAiB,IAAK,CAAE,WAAY;AACrC,YAAM,SAAS,aAAa;AAAA,QAC3B,CAAE,MAAO,EAAE,SAAS;AAAA,MACrB;AACA,UAAK,CAAE,QAAS;AACf,eAAO;AAAA,MACR;AACA,aACC;AAAA,QAAC,KAAK;AAAA,QAAL;AAAA,UAEA,OAAQ;AAAA,UACR,MAAK;AAAA,UACL,SAAU,WAAW,KAAK;AAAA,UAC1B,aAAW;AAAA,UACX,UAAW,CACV,MACI;AACJ,oBAAS,EAAE,OAAO,OAAQ;AAAA,cACzB,KAAK;AAAA,cACL,KAAK;AAAA,cACL,KAAK;AAAA,cACL,KAAK;AAAA,cACL,KAAK;AAAA,cACL,KAAK;AACJ,sBAAM,oBAAoB,EAAE,GAAG,KAAK;AACpC,oBAAK,YAAY,mBAAoB;AACpC,yBAAO,kBAAkB;AAAA,gBAC1B;AACA,uBAAO,aAAc;AAAA,kBACpB,GAAG;AAAA,kBACH,MAAM,EAAE,OAAO;AAAA,kBACf,GAAG,eAAgB,EAAE,OAAO,KAAM;AAAA,gBACnC,CAAU;AAAA,YACZ;AACA,oBAAS,kBAAmB;AAAA,UAC7B;AAAA,UAEA,8BAAC,KAAK,WAAL,EAAiB,iBAAO,OAAO;AAAA;AAAA,QA5B1B;AAAA,MA6BP;AAAA,IAEF,CAAE,GACH;AAAA,KACD;AAEF;AAEA,SAAS,mBAAmB;AAC3B,QAAM,EAAE,MAAM,QAAQ,aAAa,IAAI,WAAY,gBAAiB;AACpE,QAAM,eAAe,QAAS,MAAM;AACnC,UAAM,iBAAiB,OAAO;AAAA,MAC7B,CAAE,UAAW,MAAM,kBAAkB;AAAA,IACtC;AACA,WAAO,eAAe,IAAK,CAAE,UAAW;AACvC,aAAO;AAAA,QACN,OAAO,MAAM;AAAA,QACb,OAAO,MAAM;AAAA,MACd;AAAA,IACD,CAAE;AAAA,EACH,GAAG,CAAE,MAAO,CAAE;AAEd,SACC;AAAA,IAAC;AAAA;AAAA,MACA,uBAAqB;AAAA,MACrB,OAAQ,GAAI,SAAU;AAAA,MACtB,OAAQ,KAAK,MAAM;AAAA,MACnB,SAAU;AAAA,MACV,UAAW,CAAE,UAAmB;AAC/B,qBAAc;AAAA,UACb,GAAG;AAAA,UACH,MAAM;AAAA,YACL,WAAW,MAAM,MAAM,aAAa;AAAA,YACpC,OAAO;AAAA,UACR;AAAA,UACA,YAAY;AAAA,QACb,CAAE;AAAA,MACH;AAAA;AAAA,EACD;AAEF;AAEA,SAAS,uBAAuB;AAC/B,QAAM,EAAE,MAAM,QAAQ,aAAa,IAAI,WAAY,gBAAiB;AAEpE,QAAM,iBAAiB,OAAO;AAAA,IAC7B,CAAE,UAAW,MAAM,kBAAkB;AAAA,EACtC;AACA,MAAK,eAAe,WAAW,GAAI;AAClC,WAAO;AAAA,EACR;AAEA,MAAI,QAAQ,KAAK,MAAM;AACvB,MAAK,CAAE,SAAS,KAAK,MAAM,OAAQ;AAClC,YAAQ;AAAA,EACT;AACA,SACC;AAAA,IAAC;AAAA;AAAA,MACA,WAAU;AAAA,MACV,uBAAqB;AAAA,MACrB,SAAO;AAAA,MACP,OAAQ,GAAI,OAAQ;AAAA,MACpB;AAAA,MACA,UAAW,CAAE,iBAAkB;AAC9B,YAAK,iBAAiB,SAAS,iBAAiB,QAAS;AACxD,uBAAc;AAAA,YACb,GAAG;AAAA,YACH,MAAM;AAAA,cACL,WAAW;AAAA,cACX,OACC,KAAK,MAAM;AAAA,cAEX,OAAO;AAAA,gBACN,CAAE,UAAW,MAAM,kBAAkB;AAAA,cACtC,GAAG,MACH;AAAA,YACF;AAAA,YACA,YAAY;AAAA,UACb,CAAE;AACF;AAAA,QACD;AACA,gBAAS,mBAAoB;AAAA,MAC9B;AAAA,MAEE,6BAAmB,IAAK,CAAE,cAAe;AAC1C,eACC;AAAA,UAAC;AAAA;AAAA,YAEA,OAAQ;AAAA,YACR,MAAO,UAAW,SAAU;AAAA,YAC5B,OAAQ,WAAY,SAAU;AAAA;AAAA,UAHxB;AAAA,QAIP;AAAA,MAEF,CAAE;AAAA;AAAA,EACH;AAEF;AAEA,SAAS,sBAAsB;AAC9B,QAAM,EAAE,MAAM,QAAQ,aAAa,IAAI,WAAY,gBAAiB;AACpE,QAAM,EAAE,sBAAsB,IAAI;AAClC,MACC,CAAE,UACF,CAAE,OAAO,gBACT,OAAO,aAAa,SAAS,KAC7B,OAAO,aAAa,SAAS,KAC7B,uBACC;AACD,WAAO;AAAA,EACR;AAEA,SACC;AAAA,IAAC;AAAA;AAAA,MACA,uBAAqB;AAAA,MACrB,SAAO;AAAA,MACP,OAAQ,GAAI,gBAAiB;AAAA,MAC7B,OAAQ,KAAK,WAAW;AAAA,MACxB,UAAW,CAAE,MAAM,MAAM;AAAA,MACzB,UAAW,CAAE,oBAAqB;AACjC,cAAM,wBACL,OAAO,oBAAoB,YAC3B,oBAAoB,SACjB,kBACA,SAAU,iBAAiB,EAAG;AAClC,qBAAc;AAAA,UACb,GAAG;AAAA,UACH,SAAS;AAAA,UACT,MAAM;AAAA,QACP,CAAE;AAAA,MACH;AAAA,MAEE,iBAAO,aAAa,IAAK,CAAE,UAAW;AACvC,eACC;AAAA,UAAC;AAAA;AAAA,YAEA;AAAA,YACA,OAAQ,MAAM,SAAS;AAAA;AAAA,UAFjB;AAAA,QAGP;AAAA,MAEF,CAAE;AAAA;AAAA,EACH;AAEF;AAEA,SAAS,kBAAkB;AAC1B,QAAM,EAAE,QAAQ,IAAI,WAAY,gBAAiB;AAGjD,MAAK,YAAY,QAAY;AAC5B,WAAO;AAAA,EACR;AAEA,QAAM,aAAa,YAAY;AAE/B,SACC;AAAA,IAAC;AAAA;AAAA,MACA,SAAQ;AAAA,MACR,MAAK;AAAA,MACL,UAAW;AAAA,MACX,wBAAsB;AAAA,MACtB,WAAU;AAAA,MACV,SAAU,MAAM;AACf,YAAK,OAAO,YAAY,YAAa;AACpC,kBAAQ;AAAA,QACT;AAAA,MACD;AAAA,MAEE,aAAI,YAAa;AAAA;AAAA,EACpB;AAEF;AAEO,SAAS,8BAA8B;AAC7C,QAAM,EAAE,MAAM,QAAQ,IAAI,WAAY,gBAAiB;AACvD,QAAM,YAAY;AAAA,IACjB;AAAA,IACA;AAAA,EACD;AACA,QAAM,eAAe,aAAa;AAAA,IACjC,CAAE,WAAY,OAAO,SAAS,KAAK;AAAA,EACpC;AACA,QAAM,aAAa,OAAO,YAAY;AACtC,SACC;AAAA,IAAC;AAAA;AAAA,MACA,gBAAc;AAAA,MACd,cAAe;AAAA,QACd,GAAG;AAAA,QACH,IAAI;AAAA,MACL;AAAA,MACA,cAAe,CAAE,EAAE,UAAU,OAAO,MAAO;AAC1C,eACC,qBAAC,SAAI,WAAU,yCACd;AAAA;AAAA,YAAC;AAAA;AAAA,cACA,MAAK;AAAA,cACL,MAAO;AAAA,cACP,OAAQ;AAAA,gBACP;AAAA,gBACA;AAAA,cACD;AAAA,cACA,SAAU;AAAA,cACV,iBAAgB,SAAS,SAAS;AAAA,cAClC,iBAAgB;AAAA;AAAA,UACjB;AAAA,UACE,cACD,oBAAC,UAAK,WAAU,6CAA4C;AAAA,WAE9D;AAAA,MAEF;AAAA,MACA,eAAgB,MACf;AAAA,QAAC;AAAA;AAAA,UACA,aAAY;AAAA,UACZ,WAAU;AAAA,UAEV;AAAA,YAAC;AAAA;AAAA,cACA,WAAU;AAAA,cACV,WAAU;AAAA,cACV,KAAI;AAAA,cAEJ;AAAA;AAAA,kBAAC;AAAA;AAAA,oBACA,WAAU;AAAA,oBACV,SAAQ;AAAA,oBACR,OAAM;AAAA,oBACN,WAAU;AAAA,oBAEV;AAAA;AAAA,wBAAC;AAAA;AAAA,0BACA,OAAQ;AAAA,0BACR,WAAU;AAAA,0BAER,aAAI,YAAa;AAAA;AAAA,sBACpB;AAAA,sBACA,oBAAC,mBAAgB;AAAA;AAAA;AAAA,gBAClB;AAAA,gBACA,qBAAC,SAAM,WAAU,UAAS,KAAI,MAC7B;AAAA;AAAA,oBAAC;AAAA;AAAA,sBACA,WAAU;AAAA,sBACV,KAAI;AAAA,sBACJ,WAAU;AAAA,sBAEV;AAAA,4CAAC,oBAAiB;AAAA,wBAClB,oBAAC,wBAAqB;AAAA;AAAA;AAAA,kBACvB;AAAA,kBACE,CAAC,CAAE,cAAc,qBAClB,oBAAC,aAAa,mBAAb,EAA+B;AAAA,kBAEjC,oBAAC,uBAAoB;AAAA,kBACrB,oBAAC,qBAAkB;AAAA,mBACpB;AAAA;AAAA;AAAA,UACD;AAAA;AAAA,MACD;AAAA;AAAA,EAEF;AAEF;AAEA,SAAS,uBAAuB;AAC/B,SACC,iCACC;AAAA,wBAAC,gBAAa;AAAA,IACd,oBAAC,+BAA4B;AAAA,KAC9B;AAEF;AAEA,IAAM,sBAAsB,KAAM,oBAAqB;AAEvD,IAAO,gCAAQ;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
|
@@ -8,9 +8,6 @@ function InfiniteScrollToggle() {
|
|
|
8
8
|
const context = useContext(DataViewsContext);
|
|
9
9
|
const { view, onChangeView } = context;
|
|
10
10
|
const infiniteScrollEnabled = view.infiniteScrollEnabled ?? false;
|
|
11
|
-
if (!context.hasInfiniteScrollHandler) {
|
|
12
|
-
return null;
|
|
13
|
-
}
|
|
14
11
|
return /* @__PURE__ */ jsx(
|
|
15
12
|
ToggleControl,
|
|
16
13
|
{
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../src/components/dataviews-view-config/infinite-scroll-toggle.tsx"],
|
|
4
|
-
"sourcesContent": ["/**\n * WordPress dependencies\n */\nimport { ToggleControl } from '@wordpress/components';\nimport { __ } from '@wordpress/i18n';\nimport { useContext } from '@wordpress/element';\n\n/**\n * Internal dependencies\n */\nimport DataViewsContext from '../dataviews-context';\n\nexport default function InfiniteScrollToggle() {\n\tconst context = useContext( DataViewsContext );\n\tconst { view, onChangeView } = context;\n\tconst infiniteScrollEnabled = view.infiniteScrollEnabled ?? false;\n\n\
|
|
5
|
-
"mappings": ";AAGA,SAAS,qBAAqB;AAC9B,SAAS,UAAU;AACnB,SAAS,kBAAkB;AAK3B,OAAO,sBAAsB;
|
|
4
|
+
"sourcesContent": ["/**\n * WordPress dependencies\n */\nimport { ToggleControl } from '@wordpress/components';\nimport { __ } from '@wordpress/i18n';\nimport { useContext } from '@wordpress/element';\n\n/**\n * Internal dependencies\n */\nimport DataViewsContext from '../dataviews-context';\n\nexport default function InfiniteScrollToggle() {\n\tconst context = useContext( DataViewsContext );\n\tconst { view, onChangeView } = context;\n\tconst infiniteScrollEnabled = view.infiniteScrollEnabled ?? false;\n\n\treturn (\n\t\t<ToggleControl\n\t\t\tlabel={ __( 'Enable infinite scroll' ) }\n\t\t\thelp={ __(\n\t\t\t\t'Automatically load more content as you scroll, instead of showing pagination links.'\n\t\t\t) }\n\t\t\tchecked={ infiniteScrollEnabled }\n\t\t\tonChange={ ( newValue ) => {\n\t\t\t\tonChangeView( {\n\t\t\t\t\t...view,\n\t\t\t\t\tinfiniteScrollEnabled: newValue,\n\t\t\t\t} );\n\t\t\t} }\n\t\t/>\n\t);\n}\n"],
|
|
5
|
+
"mappings": ";AAGA,SAAS,qBAAqB;AAC9B,SAAS,UAAU;AACnB,SAAS,kBAAkB;AAK3B,OAAO,sBAAsB;AAQ3B;AANa,SAAR,uBAAwC;AAC9C,QAAM,UAAU,WAAY,gBAAiB;AAC7C,QAAM,EAAE,MAAM,aAAa,IAAI;AAC/B,QAAM,wBAAwB,KAAK,yBAAyB;AAE5D,SACC;AAAA,IAAC;AAAA;AAAA,MACA,OAAQ,GAAI,wBAAyB;AAAA,MACrC,MAAO;AAAA,QACN;AAAA,MACD;AAAA,MACA,SAAU;AAAA,MACV,UAAW,CAAE,aAAc;AAC1B,qBAAc;AAAA,UACb,GAAG;AAAA,UACH,uBAAuB;AAAA,QACxB,CAAE;AAAA,MACH;AAAA;AAAA,EACD;AAEF;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
|
@@ -1,6 +1,13 @@
|
|
|
1
1
|
// packages/dataviews/src/dataviews/index.tsx
|
|
2
|
-
import
|
|
3
|
-
import {
|
|
2
|
+
import clsx from "clsx";
|
|
3
|
+
import {
|
|
4
|
+
useContext,
|
|
5
|
+
useEffect,
|
|
6
|
+
useMemo,
|
|
7
|
+
useRef,
|
|
8
|
+
useState
|
|
9
|
+
} from "@wordpress/element";
|
|
10
|
+
import { useResizeObserver } from "@wordpress/compose";
|
|
4
11
|
import { Stack } from "@wordpress/ui";
|
|
5
12
|
import DataViewsContext from "../components/dataviews-context/index.mjs";
|
|
6
13
|
import { VIEW_LAYOUTS } from "../components/dataviews-layouts/index.mjs";
|
|
@@ -21,6 +28,7 @@ import DataViewsViewConfig, {
|
|
|
21
28
|
} from "../components/dataviews-view-config/index.mjs";
|
|
22
29
|
import normalizeFields from "../field-types/index.mjs";
|
|
23
30
|
import useData from "../hooks/use-data.mjs";
|
|
31
|
+
import { useInfiniteScroll } from "../hooks/use-infinite-scroll.mjs";
|
|
24
32
|
import { Fragment, jsx, jsxs } from "react/jsx-runtime";
|
|
25
33
|
var defaultGetItemId = (item) => item.id;
|
|
26
34
|
var defaultIsItemClickable = () => true;
|
|
@@ -33,6 +41,8 @@ function DefaultUI({
|
|
|
33
41
|
search = true,
|
|
34
42
|
searchLabel = void 0
|
|
35
43
|
}) {
|
|
44
|
+
const { view } = useContext(DataViewsContext);
|
|
45
|
+
const isInfiniteScroll = view.infiniteScrollEnabled;
|
|
36
46
|
return /* @__PURE__ */ jsxs(Fragment, { children: [
|
|
37
47
|
/* @__PURE__ */ jsxs(
|
|
38
48
|
Stack,
|
|
@@ -40,7 +50,9 @@ function DefaultUI({
|
|
|
40
50
|
direction: "row",
|
|
41
51
|
align: "top",
|
|
42
52
|
justify: "space-between",
|
|
43
|
-
className: "dataviews__view-actions",
|
|
53
|
+
className: clsx("dataviews__view-actions", {
|
|
54
|
+
"dataviews__view-actions--infinite-scroll": isInfiniteScroll
|
|
55
|
+
}),
|
|
44
56
|
gap: "xs",
|
|
45
57
|
children: [
|
|
46
58
|
/* @__PURE__ */ jsxs(
|
|
@@ -92,7 +104,22 @@ function DataViews({
|
|
|
92
104
|
empty,
|
|
93
105
|
onReset
|
|
94
106
|
}) {
|
|
95
|
-
const
|
|
107
|
+
const [selectionState, setSelectionState] = useState([]);
|
|
108
|
+
const isUncontrolled = selectionProperty === void 0 || onChangeSelection === void 0;
|
|
109
|
+
const selection = isUncontrolled ? selectionState : selectionProperty;
|
|
110
|
+
const {
|
|
111
|
+
data: displayData,
|
|
112
|
+
paginationInfo: displayPaginationInfo,
|
|
113
|
+
hasInitiallyLoaded,
|
|
114
|
+
setVisibleEntries
|
|
115
|
+
} = useData({
|
|
116
|
+
view,
|
|
117
|
+
data,
|
|
118
|
+
getItemId,
|
|
119
|
+
isLoading,
|
|
120
|
+
selection,
|
|
121
|
+
paginationInfo
|
|
122
|
+
});
|
|
96
123
|
const containerRef = useRef(null);
|
|
97
124
|
const [containerWidth, setContainerWidth] = useState(0);
|
|
98
125
|
const resizeObserverRef = useResizeObserver(
|
|
@@ -103,9 +130,6 @@ function DataViews({
|
|
|
103
130
|
},
|
|
104
131
|
{ box: "border-box" }
|
|
105
132
|
);
|
|
106
|
-
const [selectionState, setSelectionState] = useState([]);
|
|
107
|
-
const isUncontrolled = selectionProperty === void 0 || onChangeSelection === void 0;
|
|
108
|
-
const selection = isUncontrolled ? selectionState : selectionProperty;
|
|
109
133
|
const [openedFilter, setOpenedFilter] = useState(null);
|
|
110
134
|
function setSelectionWithChange(value) {
|
|
111
135
|
const newValue = typeof value === "function" ? value(selection) : value;
|
|
@@ -118,10 +142,13 @@ function DataViews({
|
|
|
118
142
|
}
|
|
119
143
|
const _fields = useMemo(() => normalizeFields(fields), [fields]);
|
|
120
144
|
const _selection = useMemo(() => {
|
|
145
|
+
if (view.infiniteScrollEnabled) {
|
|
146
|
+
return selection;
|
|
147
|
+
}
|
|
121
148
|
return selection.filter(
|
|
122
149
|
(id) => data.some((item) => getItemId(item) === id)
|
|
123
150
|
);
|
|
124
|
-
}, [selection, data, getItemId]);
|
|
151
|
+
}, [selection, data, getItemId, view.infiniteScrollEnabled]);
|
|
125
152
|
const filters = useFilters(_fields, view);
|
|
126
153
|
const hasPrimaryOrLockedFilters = useMemo(
|
|
127
154
|
() => (filters || []).some(
|
|
@@ -132,31 +159,19 @@ function DataViews({
|
|
|
132
159
|
const [isShowingFilter, setIsShowingFilter] = useState(
|
|
133
160
|
hasPrimaryOrLockedFilters
|
|
134
161
|
);
|
|
162
|
+
const { intersectionObserver } = useInfiniteScroll({
|
|
163
|
+
view,
|
|
164
|
+
onChangeView,
|
|
165
|
+
isLoading,
|
|
166
|
+
paginationInfo,
|
|
167
|
+
containerRef,
|
|
168
|
+
setVisibleEntries
|
|
169
|
+
});
|
|
135
170
|
useEffect(() => {
|
|
136
171
|
if (hasPrimaryOrLockedFilters && !isShowingFilter) {
|
|
137
172
|
setIsShowingFilter(true);
|
|
138
173
|
}
|
|
139
174
|
}, [hasPrimaryOrLockedFilters, isShowingFilter]);
|
|
140
|
-
useEffect(() => {
|
|
141
|
-
if (!view.infiniteScrollEnabled || !containerRef.current) {
|
|
142
|
-
return;
|
|
143
|
-
}
|
|
144
|
-
const handleScroll = throttle((event) => {
|
|
145
|
-
const target = event.target;
|
|
146
|
-
const scrollTop = target.scrollTop;
|
|
147
|
-
const scrollHeight = target.scrollHeight;
|
|
148
|
-
const clientHeight = target.clientHeight;
|
|
149
|
-
if (scrollTop + clientHeight >= scrollHeight - 100) {
|
|
150
|
-
infiniteScrollHandler?.();
|
|
151
|
-
}
|
|
152
|
-
}, 100);
|
|
153
|
-
const container = containerRef.current;
|
|
154
|
-
container.addEventListener("scroll", handleScroll);
|
|
155
|
-
return () => {
|
|
156
|
-
container.removeEventListener("scroll", handleScroll);
|
|
157
|
-
handleScroll.cancel();
|
|
158
|
-
};
|
|
159
|
-
}, [infiniteScrollHandler, view.infiniteScrollEnabled]);
|
|
160
175
|
const defaultLayouts = useMemo(
|
|
161
176
|
() => Object.fromEntries(
|
|
162
177
|
Object.entries(defaultLayoutsProperty).filter(
|
|
@@ -169,11 +184,6 @@ function DataViews({
|
|
|
169
184
|
),
|
|
170
185
|
[defaultLayoutsProperty]
|
|
171
186
|
);
|
|
172
|
-
const {
|
|
173
|
-
data: displayData,
|
|
174
|
-
paginationInfo: displayPaginationInfo,
|
|
175
|
-
hasInitiallyLoaded
|
|
176
|
-
} = useData(data, isLoading, paginationInfo);
|
|
177
187
|
if (!defaultLayouts[view.type]) {
|
|
178
188
|
return null;
|
|
179
189
|
}
|
|
@@ -207,10 +217,10 @@ function DataViews({
|
|
|
207
217
|
config,
|
|
208
218
|
empty,
|
|
209
219
|
hasInitiallyLoaded,
|
|
210
|
-
|
|
211
|
-
|
|
220
|
+
onReset,
|
|
221
|
+
intersectionObserver
|
|
212
222
|
},
|
|
213
|
-
children: /* @__PURE__ */ jsx("div", { className: "dataviews-wrapper",
|
|
223
|
+
children: /* @__PURE__ */ jsx("div", { className: "dataviews-wrapper", children: children ?? /* @__PURE__ */ jsx(
|
|
214
224
|
DefaultUI,
|
|
215
225
|
{
|
|
216
226
|
header,
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../src/dataviews/index.tsx"],
|
|
4
|
-
"sourcesContent": ["/**\n * External dependencies\n */\nimport type { ReactNode, ComponentProps, ReactElement } from 'react';\n\n/**\n * WordPress dependencies\n */\nimport {
|
|
5
|
-
"mappings": ";
|
|
4
|
+
"sourcesContent": ["/**\n * External dependencies\n */\nimport type { ReactNode, ComponentProps, ReactElement } from 'react';\nimport clsx from 'clsx';\n\n/**\n * WordPress dependencies\n */\nimport {\n\tuseContext,\n\tuseEffect,\n\tuseMemo,\n\tuseRef,\n\tuseState,\n} from '@wordpress/element';\nimport { useResizeObserver } from '@wordpress/compose';\nimport { Stack } from '@wordpress/ui';\n\n/**\n * Internal dependencies\n */\nimport DataViewsContext from '../components/dataviews-context';\nimport { VIEW_LAYOUTS } from '../components/dataviews-layouts';\nimport {\n\tFilters,\n\tFiltersToggled,\n\tuseFilters,\n\tFiltersToggle,\n} from '../components/dataviews-filters';\nimport DataViewsLayout from '../components/dataviews-layout';\nimport DataViewsFooter from '../components/dataviews-footer';\nimport DataViewsSearch from '../components/dataviews-search';\nimport { BulkActionsFooter } from '../components/dataviews-bulk-actions';\nimport { DataViewsPagination } from '../components/dataviews-pagination';\nimport DataViewsViewConfig, {\n\tDataviewsViewConfigDropdown,\n\tViewTypeMenu,\n} from '../components/dataviews-view-config';\nimport normalizeFields from '../field-types';\nimport useData from '../hooks/use-data';\nimport { useInfiniteScroll } from '../hooks/use-infinite-scroll';\nimport type { Action, Field, View, SupportedLayouts } from '../types';\nimport type { SelectionOrUpdater } from '../types/private';\ntype ItemWithId = { id: string };\n\ntype DataViewsProps< Item > = {\n\tview: View;\n\tonChangeView: ( view: View ) => void;\n\tfields: Field< Item >[];\n\tsearch?: boolean;\n\tsearchLabel?: string;\n\tactions?: Action< Item >[];\n\tdata: Item[];\n\tisLoading?: boolean;\n\tpaginationInfo: {\n\t\ttotalItems: number;\n\t\ttotalPages: number;\n\t};\n\tdefaultLayouts: SupportedLayouts;\n\tselection?: string[];\n\tonChangeSelection?: ( items: string[] ) => void;\n\tonClickItem?: ( item: Item ) => void;\n\trenderItemLink?: (\n\t\tprops: {\n\t\t\titem: Item;\n\t\t} & ComponentProps< 'a' >\n\t) => ReactElement;\n\tisItemClickable?: ( item: Item ) => boolean;\n\theader?: ReactNode;\n\tgetItemLevel?: ( item: Item ) => number;\n\tchildren?: ReactNode;\n\tconfig?: {\n\t\tperPageSizes: number[];\n\t};\n\tempty?: ReactNode;\n\tonReset?: ( () => void ) | false;\n} & ( Item extends ItemWithId\n\t? { getItemId?: ( item: Item ) => string }\n\t: { getItemId: ( item: Item ) => string } );\n\nconst defaultGetItemId = ( item: ItemWithId ) => item.id;\nconst defaultIsItemClickable = () => true;\nconst EMPTY_ARRAY: any[] = [];\n\nconst dataViewsLayouts = VIEW_LAYOUTS.filter(\n\t( viewLayout ) => ! viewLayout.isPicker\n);\n\ntype DefaultUIProps = Pick<\n\tDataViewsProps< any >,\n\t'header' | 'search' | 'searchLabel'\n>;\n\nfunction DefaultUI( {\n\theader,\n\tsearch = true,\n\tsearchLabel = undefined,\n}: DefaultUIProps ) {\n\tconst { view } = useContext( DataViewsContext );\n\tconst isInfiniteScroll = view.infiniteScrollEnabled;\n\treturn (\n\t\t<>\n\t\t\t<Stack\n\t\t\t\tdirection=\"row\"\n\t\t\t\talign=\"top\"\n\t\t\t\tjustify=\"space-between\"\n\t\t\t\tclassName={ clsx( 'dataviews__view-actions', {\n\t\t\t\t\t'dataviews__view-actions--infinite-scroll':\n\t\t\t\t\t\tisInfiniteScroll,\n\t\t\t\t} ) }\n\t\t\t\tgap=\"xs\"\n\t\t\t>\n\t\t\t\t<Stack\n\t\t\t\t\tdirection=\"row\"\n\t\t\t\t\tjustify=\"start\"\n\t\t\t\t\tgap=\"sm\"\n\t\t\t\t\tclassName=\"dataviews__search\"\n\t\t\t\t>\n\t\t\t\t\t{ search && <DataViewsSearch label={ searchLabel } /> }\n\t\t\t\t\t<FiltersToggle />\n\t\t\t\t</Stack>\n\t\t\t\t<Stack direction=\"row\" gap=\"xs\" style={ { flexShrink: 0 } }>\n\t\t\t\t\t<DataViewsViewConfig />\n\t\t\t\t\t{ header }\n\t\t\t\t</Stack>\n\t\t\t</Stack>\n\t\t\t<FiltersToggled className=\"dataviews-filters__container\" />\n\t\t\t<DataViewsLayout />\n\t\t\t<DataViewsFooter />\n\t\t</>\n\t);\n}\n\nfunction DataViews< Item >( {\n\tview,\n\tonChangeView,\n\tfields,\n\tsearch = true,\n\tsearchLabel = undefined,\n\tactions = EMPTY_ARRAY,\n\tdata,\n\tgetItemId = defaultGetItemId,\n\tgetItemLevel,\n\tisLoading = false,\n\tpaginationInfo,\n\tdefaultLayouts: defaultLayoutsProperty,\n\tselection: selectionProperty,\n\tonChangeSelection,\n\tonClickItem,\n\trenderItemLink,\n\tisItemClickable = defaultIsItemClickable,\n\theader,\n\tchildren,\n\tconfig = { perPageSizes: [ 10, 20, 50, 100 ] },\n\tempty,\n\tonReset,\n}: DataViewsProps< Item > ) {\n\tconst [ selectionState, setSelectionState ] = useState< string[] >( [] );\n\tconst isUncontrolled =\n\t\tselectionProperty === undefined || onChangeSelection === undefined;\n\tconst selection = isUncontrolled ? selectionState : selectionProperty;\n\n\t// useData handles both infinite scroll and standard pagination paths,\n\t// preserving previous data while loading and tracking initial load state.\n\tconst {\n\t\tdata: displayData,\n\t\tpaginationInfo: displayPaginationInfo,\n\t\thasInitiallyLoaded,\n\t\tsetVisibleEntries,\n\t} = useData( {\n\t\tview,\n\t\tdata: data as any,\n\t\tgetItemId: getItemId as any,\n\t\tisLoading,\n\t\tselection,\n\t\tpaginationInfo,\n\t} ) as {\n\t\tdata: ( Item & { position?: number } )[];\n\t\tpaginationInfo: { totalItems: number; totalPages: number };\n\t\thasInitiallyLoaded: boolean;\n\t\tsetVisibleEntries?: React.Dispatch< React.SetStateAction< number[] > >;\n\t};\n\tconst containerRef = useRef< HTMLDivElement >( null );\n\tconst [ containerWidth, setContainerWidth ] = useState( 0 );\n\tconst resizeObserverRef = useResizeObserver(\n\t\t( resizeObserverEntries: any ) => {\n\t\t\tsetContainerWidth(\n\t\t\t\tresizeObserverEntries[ 0 ].borderBoxSize[ 0 ].inlineSize\n\t\t\t);\n\t\t},\n\t\t{ box: 'border-box' }\n\t);\n\tconst [ openedFilter, setOpenedFilter ] = useState< string | null >( null );\n\tfunction setSelectionWithChange( value: SelectionOrUpdater ) {\n\t\tconst newValue =\n\t\t\ttypeof value === 'function' ? value( selection ) : value;\n\t\tif ( isUncontrolled ) {\n\t\t\tsetSelectionState( newValue );\n\t\t}\n\t\tif ( onChangeSelection ) {\n\t\t\tonChangeSelection( newValue );\n\t\t}\n\t}\n\tconst _fields = useMemo( () => normalizeFields( fields ), [ fields ] );\n\t// When infinite scroll is enabled, don't filter selection by current data\n\t// because items may be scrolled out of view but still selected.\n\tconst _selection = useMemo( () => {\n\t\tif ( view.infiniteScrollEnabled ) {\n\t\t\treturn selection;\n\t\t}\n\t\treturn selection.filter( ( id ) =>\n\t\t\tdata.some( ( item ) => getItemId( item ) === id )\n\t\t);\n\t}, [ selection, data, getItemId, view.infiniteScrollEnabled ] );\n\n\tconst filters = useFilters( _fields, view );\n\tconst hasPrimaryOrLockedFilters = useMemo(\n\t\t() =>\n\t\t\t( filters || [] ).some(\n\t\t\t\t( filter ) => filter.isPrimary || filter.isLocked\n\t\t\t),\n\t\t[ filters ]\n\t);\n\tconst [ isShowingFilter, setIsShowingFilter ] = useState< boolean >(\n\t\thasPrimaryOrLockedFilters\n\t);\n\n\tconst { intersectionObserver } = useInfiniteScroll( {\n\t\tview,\n\t\tonChangeView,\n\t\tisLoading,\n\t\tpaginationInfo,\n\t\tcontainerRef,\n\t\tsetVisibleEntries,\n\t} );\n\n\tuseEffect( () => {\n\t\tif ( hasPrimaryOrLockedFilters && ! isShowingFilter ) {\n\t\t\tsetIsShowingFilter( true );\n\t\t}\n\t}, [ hasPrimaryOrLockedFilters, isShowingFilter ] );\n\n\t// Filter out DataViewsPicker layouts.\n\tconst defaultLayouts = useMemo(\n\t\t() =>\n\t\t\tObject.fromEntries(\n\t\t\t\tObject.entries( defaultLayoutsProperty ).filter(\n\t\t\t\t\t( [ layoutType ] ) => {\n\t\t\t\t\t\treturn dataViewsLayouts.some(\n\t\t\t\t\t\t\t( viewLayout ) => viewLayout.type === layoutType\n\t\t\t\t\t\t);\n\t\t\t\t\t}\n\t\t\t\t)\n\t\t\t),\n\t\t[ defaultLayoutsProperty ]\n\t);\n\n\tif ( ! defaultLayouts[ view.type ] ) {\n\t\treturn null;\n\t}\n\n\treturn (\n\t\t<DataViewsContext.Provider\n\t\t\tvalue={ {\n\t\t\t\tview,\n\t\t\t\tonChangeView,\n\t\t\t\tfields: _fields,\n\t\t\t\tactions,\n\t\t\t\tdata: displayData,\n\t\t\t\tisLoading,\n\t\t\t\tpaginationInfo: displayPaginationInfo,\n\t\t\t\tselection: _selection,\n\t\t\t\tonChangeSelection: setSelectionWithChange,\n\t\t\t\topenedFilter,\n\t\t\t\tsetOpenedFilter,\n\t\t\t\tgetItemId,\n\t\t\t\tgetItemLevel,\n\t\t\t\tisItemClickable,\n\t\t\t\tonClickItem,\n\t\t\t\trenderItemLink,\n\t\t\t\tcontainerWidth,\n\t\t\t\tcontainerRef,\n\t\t\t\tresizeObserverRef,\n\t\t\t\tdefaultLayouts,\n\t\t\t\tfilters,\n\t\t\t\tisShowingFilter,\n\t\t\t\tsetIsShowingFilter,\n\t\t\t\tconfig,\n\t\t\t\tempty,\n\t\t\t\thasInitiallyLoaded,\n\t\t\t\tonReset,\n\t\t\t\tintersectionObserver,\n\t\t\t} }\n\t\t>\n\t\t\t<div className=\"dataviews-wrapper\">\n\t\t\t\t{ children ?? (\n\t\t\t\t\t<DefaultUI\n\t\t\t\t\t\theader={ header }\n\t\t\t\t\t\tsearch={ search }\n\t\t\t\t\t\tsearchLabel={ searchLabel }\n\t\t\t\t\t/>\n\t\t\t\t) }\n\t\t\t</div>\n\t\t</DataViewsContext.Provider>\n\t);\n}\n\n// Populate the DataViews sub components\nconst DataViewsSubComponents = DataViews as typeof DataViews & {\n\tBulkActionToolbar: typeof BulkActionsFooter;\n\tFilters: typeof Filters;\n\tFiltersToggle: typeof FiltersToggle;\n\tFiltersToggled: typeof FiltersToggled;\n\tLayout: typeof DataViewsLayout;\n\tLayoutSwitcher: typeof ViewTypeMenu;\n\tPagination: typeof DataViewsPagination;\n\tSearch: typeof DataViewsSearch;\n\tViewConfig: typeof DataviewsViewConfigDropdown;\n\tFooter: typeof DataViewsFooter;\n};\n\nDataViewsSubComponents.BulkActionToolbar = BulkActionsFooter;\nDataViewsSubComponents.Filters = Filters;\nDataViewsSubComponents.FiltersToggled = FiltersToggled;\nDataViewsSubComponents.FiltersToggle = FiltersToggle;\nDataViewsSubComponents.Layout = DataViewsLayout;\nDataViewsSubComponents.LayoutSwitcher = ViewTypeMenu;\nDataViewsSubComponents.Pagination = DataViewsPagination;\nDataViewsSubComponents.Search = DataViewsSearch;\nDataViewsSubComponents.ViewConfig = DataviewsViewConfigDropdown;\nDataViewsSubComponents.Footer = DataViewsFooter;\n\nexport default DataViewsSubComponents;\n"],
|
|
5
|
+
"mappings": "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",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|