@wordpress/dataviews 13.1.1-next.v.202603161435.0 → 14.1.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 +36 -6
- package/README.md +33 -7
- package/build/components/dataform-controls/array.cjs +2 -0
- package/build/components/dataform-controls/array.cjs.map +2 -2
- package/build/components/dataform-controls/checkbox.cjs +3 -1
- package/build/components/dataform-controls/checkbox.cjs.map +2 -2
- package/build/components/dataform-controls/color.cjs +8 -2
- package/build/components/dataform-controls/color.cjs.map +2 -2
- package/build/components/dataform-controls/date.cjs +31 -9
- package/build/components/dataform-controls/date.cjs.map +3 -3
- package/build/components/dataform-controls/datetime.cjs +17 -6
- package/build/components/dataform-controls/datetime.cjs.map +3 -3
- package/build/components/dataform-controls/password.cjs +4 -1
- package/build/components/dataform-controls/password.cjs.map +2 -2
- package/build/components/dataform-controls/radio.cjs +3 -1
- package/build/components/dataform-controls/radio.cjs.map +2 -2
- package/build/components/dataform-controls/select.cjs +3 -1
- package/build/components/dataform-controls/select.cjs.map +2 -2
- package/build/components/dataform-controls/textarea.cjs +2 -0
- package/build/components/dataform-controls/textarea.cjs.map +2 -2
- package/build/components/dataform-controls/toggle-group.cjs +3 -1
- package/build/components/dataform-controls/toggle-group.cjs.map +2 -2
- package/build/components/dataform-controls/toggle.cjs +3 -1
- package/build/components/dataform-controls/toggle.cjs.map +2 -2
- package/build/components/dataform-controls/utils/relative-date-control.cjs +5 -2
- package/build/components/dataform-controls/utils/relative-date-control.cjs.map +2 -2
- package/build/components/dataform-controls/utils/use-disabled-date-matchers.cjs +48 -0
- package/build/components/dataform-controls/utils/use-disabled-date-matchers.cjs.map +7 -0
- package/build/components/dataform-controls/utils/validated-input.cjs +2 -0
- package/build/components/dataform-controls/utils/validated-input.cjs.map +2 -2
- package/build/components/dataform-controls/utils/validated-number.cjs +3 -1
- package/build/components/dataform-controls/utils/validated-number.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/dataform-layouts/panel/summary-button.cjs +0 -1
- package/build/components/dataform-layouts/panel/summary-button.cjs.map +2 -2
- 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-filters/input-widget.cjs +4 -0
- package/build/components/dataviews-filters/input-widget.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-layouts/grid/composite-grid.cjs +378 -249
- package/build/components/dataviews-layouts/grid/composite-grid.cjs.map +2 -2
- package/build/components/dataviews-layouts/picker-grid/index.cjs +60 -30
- package/build/components/dataviews-layouts/picker-grid/index.cjs.map +2 -2
- package/build/components/dataviews-layouts/picker-table/index.cjs +45 -30
- package/build/components/dataviews-layouts/picker-table/index.cjs.map +2 -2
- package/build/components/dataviews-layouts/table/index.cjs +0 -1
- package/build/components/dataviews-layouts/table/index.cjs.map +2 -2
- 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-pagination/index.cjs +1 -0
- package/build/components/dataviews-pagination/index.cjs.map +2 -2
- 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 +47 -45
- package/build/dataviews/index.cjs.map +3 -3
- package/build/dataviews-picker/index.cjs +41 -33
- package/build/dataviews-picker/index.cjs.map +3 -3
- package/build/field-types/date.cjs +4 -1
- package/build/field-types/date.cjs.map +2 -2
- package/build/field-types/datetime.cjs +4 -1
- package/build/field-types/datetime.cjs.map +2 -2
- package/build/field-types/index.cjs +1 -0
- package/build/field-types/index.cjs.map +2 -2
- package/build/field-types/utils/get-is-valid.cjs +29 -24
- package/build/field-types/utils/get-is-valid.cjs.map +2 -2
- package/build/field-types/utils/is-valid-date-boundary.cjs +64 -0
- package/build/field-types/utils/is-valid-date-boundary.cjs.map +7 -0
- 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/array.mjs +2 -0
- package/build-module/components/dataform-controls/array.mjs.map +2 -2
- package/build-module/components/dataform-controls/checkbox.mjs +3 -1
- package/build-module/components/dataform-controls/checkbox.mjs.map +2 -2
- package/build-module/components/dataform-controls/color.mjs +8 -2
- package/build-module/components/dataform-controls/color.mjs.map +2 -2
- package/build-module/components/dataform-controls/date.mjs +31 -9
- package/build-module/components/dataform-controls/date.mjs.map +2 -2
- package/build-module/components/dataform-controls/datetime.mjs +17 -6
- package/build-module/components/dataform-controls/datetime.mjs.map +2 -2
- package/build-module/components/dataform-controls/password.mjs +4 -1
- package/build-module/components/dataform-controls/password.mjs.map +2 -2
- package/build-module/components/dataform-controls/radio.mjs +3 -1
- package/build-module/components/dataform-controls/radio.mjs.map +2 -2
- package/build-module/components/dataform-controls/select.mjs +3 -1
- package/build-module/components/dataform-controls/select.mjs.map +2 -2
- package/build-module/components/dataform-controls/textarea.mjs +2 -0
- package/build-module/components/dataform-controls/textarea.mjs.map +2 -2
- package/build-module/components/dataform-controls/toggle-group.mjs +3 -1
- package/build-module/components/dataform-controls/toggle-group.mjs.map +2 -2
- package/build-module/components/dataform-controls/toggle.mjs +3 -1
- package/build-module/components/dataform-controls/toggle.mjs.map +2 -2
- package/build-module/components/dataform-controls/utils/relative-date-control.mjs +5 -2
- package/build-module/components/dataform-controls/utils/relative-date-control.mjs.map +2 -2
- package/build-module/components/dataform-controls/utils/use-disabled-date-matchers.mjs +27 -0
- package/build-module/components/dataform-controls/utils/use-disabled-date-matchers.mjs.map +7 -0
- package/build-module/components/dataform-controls/utils/validated-input.mjs +2 -0
- package/build-module/components/dataform-controls/utils/validated-input.mjs.map +2 -2
- package/build-module/components/dataform-controls/utils/validated-number.mjs +3 -1
- package/build-module/components/dataform-controls/utils/validated-number.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/dataform-layouts/panel/summary-button.mjs +0 -1
- package/build-module/components/dataform-layouts/panel/summary-button.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-filters/input-widget.mjs +4 -0
- package/build-module/components/dataviews-filters/input-widget.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-layouts/grid/composite-grid.mjs +387 -250
- package/build-module/components/dataviews-layouts/grid/composite-grid.mjs.map +2 -2
- package/build-module/components/dataviews-layouts/picker-grid/index.mjs +64 -31
- package/build-module/components/dataviews-layouts/picker-grid/index.mjs.map +2 -2
- package/build-module/components/dataviews-layouts/picker-table/index.mjs +45 -30
- package/build-module/components/dataviews-layouts/picker-table/index.mjs.map +2 -2
- package/build-module/components/dataviews-layouts/table/index.mjs +0 -1
- package/build-module/components/dataviews-layouts/table/index.mjs.map +2 -2
- 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-pagination/index.mjs +1 -0
- package/build-module/components/dataviews-pagination/index.mjs.map +2 -2
- 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 +55 -47
- package/build-module/dataviews/index.mjs.map +2 -2
- package/build-module/dataviews-picker/index.mjs +49 -35
- package/build-module/dataviews-picker/index.mjs.map +2 -2
- package/build-module/field-types/date.mjs +4 -1
- package/build-module/field-types/date.mjs.map +2 -2
- package/build-module/field-types/datetime.mjs +4 -1
- package/build-module/field-types/datetime.mjs.map +2 -2
- package/build-module/field-types/index.mjs +1 -0
- package/build-module/field-types/index.mjs.map +2 -2
- package/build-module/field-types/utils/get-is-valid.mjs +29 -24
- package/build-module/field-types/utils/get-is-valid.mjs.map +2 -2
- package/build-module/field-types/utils/is-valid-date-boundary.mjs +38 -0
- package/build-module/field-types/utils/is-valid-date-boundary.mjs.map +7 -0
- 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 +75 -52
- package/build-style/style.css +75 -52
- package/build-types/components/dataform-controls/array.d.ts.map +1 -1
- package/build-types/components/dataform-controls/checkbox.d.ts.map +1 -1
- package/build-types/components/dataform-controls/color.d.ts.map +1 -1
- package/build-types/components/dataform-controls/date.d.ts.map +1 -1
- 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-controls/password.d.ts.map +1 -1
- package/build-types/components/dataform-controls/radio.d.ts.map +1 -1
- package/build-types/components/dataform-controls/select.d.ts.map +1 -1
- package/build-types/components/dataform-controls/textarea.d.ts.map +1 -1
- package/build-types/components/dataform-controls/toggle-group.d.ts.map +1 -1
- package/build-types/components/dataform-controls/toggle.d.ts.map +1 -1
- package/build-types/components/dataform-controls/utils/relative-date-control.d.ts.map +1 -1
- package/build-types/components/dataform-controls/utils/use-disabled-date-matchers.d.ts +16 -0
- package/build-types/components/dataform-controls/utils/use-disabled-date-matchers.d.ts.map +1 -0
- package/build-types/components/dataform-controls/utils/validated-input.d.ts.map +1 -1
- package/build-types/components/dataform-controls/utils/validated-number.d.ts.map +1 -1
- package/build-types/components/dataform-layouts/card/index.d.ts.map +1 -1
- package/build-types/components/dataform-layouts/panel/summary-button.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 +3 -3
- package/build-types/components/dataviews-context/index.d.ts.map +1 -1
- package/build-types/components/dataviews-filters/input-widget.d.ts.map +1 -1
- package/build-types/components/dataviews-footer/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 +6 -6
- 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/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-pagination/index.d.ts.map +1 -1
- package/build-types/components/dataviews-picker-footer/index.d.ts.map +1 -1
- package/build-types/components/dataviews-search/index.d.ts +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/constants.d.ts +2 -2
- package/build-types/dataform/stories/index.story.d.ts +11 -1
- package/build-types/dataform/stories/index.story.d.ts.map +1 -1
- package/build-types/dataform/stories/layout-regular.d.ts +2 -1
- package/build-types/dataform/stories/layout-regular.d.ts.map +1 -1
- package/build-types/dataform/stories/validation.d.ts.map +1 -1
- package/build-types/dataviews/index.d.ts +1 -2
- package/build-types/dataviews/index.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 +11 -0
- 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/with-card.d.ts.map +1 -1
- package/build-types/dataviews-picker/index.d.ts +3 -3
- 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/array.d.ts +1 -1
- package/build-types/field-types/array.d.ts.map +1 -1
- package/build-types/field-types/boolean.d.ts +1 -1
- package/build-types/field-types/boolean.d.ts.map +1 -1
- package/build-types/field-types/color.d.ts +1 -1
- package/build-types/field-types/color.d.ts.map +1 -1
- package/build-types/field-types/date.d.ts +3 -0
- package/build-types/field-types/date.d.ts.map +1 -1
- package/build-types/field-types/datetime.d.ts +3 -0
- package/build-types/field-types/datetime.d.ts.map +1 -1
- package/build-types/field-types/email.d.ts +1 -1
- package/build-types/field-types/email.d.ts.map +1 -1
- package/build-types/field-types/index.d.ts.map +1 -1
- package/build-types/field-types/integer.d.ts +1 -1
- package/build-types/field-types/integer.d.ts.map +1 -1
- package/build-types/field-types/number.d.ts +1 -1
- package/build-types/field-types/number.d.ts.map +1 -1
- package/build-types/field-types/stories/index.story.d.ts +37 -15
- package/build-types/field-types/stories/index.story.d.ts.map +1 -1
- package/build-types/field-types/utils/get-is-valid.d.ts.map +1 -1
- package/build-types/field-types/utils/is-valid-date-boundary.d.ts +7 -0
- package/build-types/field-types/utils/is-valid-date-boundary.d.ts.map +1 -0
- 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 +39 -13
- 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 +3264 -2713
- package/package.json +19 -19
- package/src/components/dataform-controls/array.tsx +2 -0
- package/src/components/dataform-controls/checkbox.tsx +2 -0
- package/src/components/dataform-controls/color.tsx +7 -0
- package/src/components/dataform-controls/date.tsx +30 -4
- package/src/components/dataform-controls/datetime.tsx +36 -11
- package/src/components/dataform-controls/password.tsx +3 -0
- package/src/components/dataform-controls/radio.tsx +2 -0
- package/src/components/dataform-controls/select.tsx +2 -0
- package/src/components/dataform-controls/textarea.tsx +2 -0
- package/src/components/dataform-controls/toggle-group.tsx +2 -0
- package/src/components/dataform-controls/toggle.tsx +2 -0
- package/src/components/dataform-controls/utils/relative-date-control.tsx +3 -0
- package/src/components/dataform-controls/utils/use-disabled-date-matchers.ts +48 -0
- package/src/components/dataform-controls/utils/validated-input.tsx +2 -0
- package/src/components/dataform-controls/utils/validated-number.tsx +2 -0
- package/src/components/dataform-layouts/card/index.tsx +171 -146
- package/src/components/dataform-layouts/card/style.scss +8 -5
- package/src/components/dataform-layouts/panel/style.scss +4 -5
- package/src/components/dataform-layouts/panel/summary-button.tsx +0 -1
- package/src/components/dataviews-bulk-actions/index.tsx +28 -1
- package/src/components/dataviews-context/index.ts +4 -4
- package/src/components/dataviews-filters/input-widget.tsx +4 -0
- package/src/components/dataviews-filters/style.scss +2 -2
- package/src/components/dataviews-footer/index.tsx +1 -6
- package/src/components/dataviews-layouts/activity/style.scss +3 -3
- package/src/components/dataviews-layouts/grid/composite-grid.tsx +433 -284
- package/src/components/dataviews-layouts/grid/style.scss +5 -1
- package/src/components/dataviews-layouts/list/style.scss +1 -1
- package/src/components/dataviews-layouts/picker-grid/index.tsx +49 -15
- package/src/components/dataviews-layouts/picker-grid/style.scss +1 -1
- package/src/components/dataviews-layouts/picker-table/index.tsx +45 -23
- package/src/components/dataviews-layouts/picker-table/style.scss +1 -1
- package/src/components/dataviews-layouts/table/index.tsx +0 -2
- package/src/components/dataviews-layouts/utils/use-infinite-scroll.ts +64 -0
- package/src/components/dataviews-pagination/index.tsx +1 -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/dataform/stories/content.story.tsx +1 -1
- package/src/dataform/stories/data-adapter.tsx +6 -6
- package/src/dataform/stories/index.story.tsx +7 -0
- package/src/dataform/stories/layout-card.tsx +5 -5
- package/src/dataform/stories/layout-details.tsx +5 -5
- package/src/dataform/stories/layout-panel.tsx +9 -9
- package/src/dataform/stories/layout-regular.tsx +31 -10
- package/src/dataform/stories/layout-row.tsx +9 -9
- package/src/dataform/stories/validation.tsx +25 -10
- package/src/dataviews/index.tsx +68 -59
- package/src/dataviews/stories/empty.tsx +4 -4
- package/src/dataviews/stories/fixtures.tsx +288 -0
- package/src/dataviews/stories/free-composition.tsx +14 -13
- package/src/dataviews/stories/index.story.tsx +19 -2
- package/src/dataviews/stories/infinite-scroll.tsx +16 -96
- package/src/dataviews/stories/layout-custom.tsx +1 -1
- package/src/dataviews/stories/layout-grid.tsx +1 -1
- package/src/dataviews/stories/layout-list.tsx +1 -1
- package/src/dataviews/stories/layout-table.tsx +1 -1
- package/src/dataviews/stories/minimal-ui.tsx +1 -1
- package/src/dataviews/stories/with-card.tsx +30 -23
- package/src/dataviews/style.scss +6 -8
- package/src/dataviews/test/dataviews.tsx +94 -15
- package/src/dataviews-picker/index.tsx +57 -41
- package/src/dataviews-picker/stories/fixtures.tsx +270 -0
- package/src/dataviews-picker/stories/index.story.tsx +62 -133
- package/src/dataviews-picker/test/dataviews-picker.tsx +79 -2
- package/src/field-types/date.tsx +3 -0
- package/src/field-types/datetime.tsx +3 -0
- package/src/field-types/index.tsx +4 -0
- package/src/field-types/stories/index.story.tsx +79 -6
- package/src/field-types/test/normalize-fields.ts +44 -0
- package/src/field-types/utils/get-is-valid.ts +44 -31
- package/src/field-types/utils/is-valid-date-boundary.ts +80 -0
- package/src/hooks/index.ts +3 -0
- package/src/hooks/test/use-data.ts +791 -0
- package/src/hooks/test/use-form-validity.ts +479 -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/types/dataviews.ts +17 -1
- package/src/types/field-api.ts +43 -12
- 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
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../src/components/dataform-controls/radio.tsx"],
|
|
4
|
-
"sourcesContent": ["/**\n * WordPress dependencies\n */\nimport { privateApis, Spinner } from '@wordpress/components';\nimport { useCallback } from '@wordpress/element';\n\n/**\n * Internal dependencies\n */\nimport type { DataFormControlProps } from '../../types';\nimport { unlock } from '../../lock-unlock';\nimport getCustomValidity from './utils/get-custom-validity';\nimport useElements from '../../hooks/use-elements';\n\nconst { ValidatedRadioControl } = unlock( privateApis );\n\nexport default function Radio< Item >( {\n\tdata,\n\tfield,\n\tonChange,\n\thideLabelFromVision,\n\tmarkWhenOptional,\n\tvalidity,\n}: DataFormControlProps< Item > ) {\n\tconst { label, description, getValue, setValue, isValid } = field;\n\tconst { elements, isLoading } = useElements( {\n\t\telements: field.elements,\n\t\tgetElements: field.getElements,\n\t} );\n\tconst value = getValue( { item: data } );\n\n\tconst onChangeControl = useCallback(\n\t\t( newValue: string ) =>\n\t\t\tonChange( setValue( { item: data, value: newValue } ) ),\n\t\t[ data, onChange, setValue ]\n\t);\n\n\tif ( isLoading ) {\n\t\treturn <Spinner />;\n\t}\n\n\treturn (\n\t\t<ValidatedRadioControl\n\t\t\trequired={ !! field.isValid?.required }\n\t\t\tmarkWhenOptional={ markWhenOptional }\n\t\t\tcustomValidity={ getCustomValidity( isValid, validity ) }\n\t\t\tlabel={ label }\n\t\t\thelp={ description }\n\t\t\tonChange={ onChangeControl }\n\t\t\toptions={ elements }\n\t\t\tselected={ value }\n\t\t\thideLabelFromVision={ hideLabelFromVision }\n\t\t/>\n\t);\n}\n"],
|
|
5
|
-
"mappings": ";AAGA,SAAS,aAAa,eAAe;AACrC,SAAS,mBAAmB;AAM5B,SAAS,cAAc;AACvB,OAAO,uBAAuB;AAC9B,OAAO,iBAAiB;
|
|
4
|
+
"sourcesContent": ["/**\n * WordPress dependencies\n */\nimport { privateApis, Spinner } from '@wordpress/components';\nimport { useCallback } from '@wordpress/element';\n\n/**\n * Internal dependencies\n */\nimport type { DataFormControlProps } from '../../types';\nimport { unlock } from '../../lock-unlock';\nimport getCustomValidity from './utils/get-custom-validity';\nimport useElements from '../../hooks/use-elements';\n\nconst { ValidatedRadioControl } = unlock( privateApis );\n\nexport default function Radio< Item >( {\n\tdata,\n\tfield,\n\tonChange,\n\thideLabelFromVision,\n\tmarkWhenOptional,\n\tvalidity,\n}: DataFormControlProps< Item > ) {\n\tconst { label, description, getValue, setValue, isValid } = field;\n\tconst disabled = field.isDisabled( { item: data, field } );\n\tconst { elements, isLoading } = useElements( {\n\t\telements: field.elements,\n\t\tgetElements: field.getElements,\n\t} );\n\tconst value = getValue( { item: data } );\n\n\tconst onChangeControl = useCallback(\n\t\t( newValue: string ) =>\n\t\t\tonChange( setValue( { item: data, value: newValue } ) ),\n\t\t[ data, onChange, setValue ]\n\t);\n\n\tif ( isLoading ) {\n\t\treturn <Spinner />;\n\t}\n\n\treturn (\n\t\t<ValidatedRadioControl\n\t\t\trequired={ !! field.isValid?.required }\n\t\t\tmarkWhenOptional={ markWhenOptional }\n\t\t\tcustomValidity={ getCustomValidity( isValid, validity ) }\n\t\t\tlabel={ label }\n\t\t\thelp={ description }\n\t\t\tonChange={ onChangeControl }\n\t\t\toptions={ elements }\n\t\t\tselected={ value }\n\t\t\thideLabelFromVision={ hideLabelFromVision }\n\t\t\tdisabled={ disabled }\n\t\t/>\n\t);\n}\n"],
|
|
5
|
+
"mappings": ";AAGA,SAAS,aAAa,eAAe;AACrC,SAAS,mBAAmB;AAM5B,SAAS,cAAc;AACvB,OAAO,uBAAuB;AAC9B,OAAO,iBAAiB;AA2Bf;AAzBT,IAAM,EAAE,sBAAsB,IAAI,OAAQ,WAAY;AAEvC,SAAR,MAAgC;AAAA,EACtC;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACD,GAAkC;AACjC,QAAM,EAAE,OAAO,aAAa,UAAU,UAAU,QAAQ,IAAI;AAC5D,QAAM,WAAW,MAAM,WAAY,EAAE,MAAM,MAAM,MAAM,CAAE;AACzD,QAAM,EAAE,UAAU,UAAU,IAAI,YAAa;AAAA,IAC5C,UAAU,MAAM;AAAA,IAChB,aAAa,MAAM;AAAA,EACpB,CAAE;AACF,QAAM,QAAQ,SAAU,EAAE,MAAM,KAAK,CAAE;AAEvC,QAAM,kBAAkB;AAAA,IACvB,CAAE,aACD,SAAU,SAAU,EAAE,MAAM,MAAM,OAAO,SAAS,CAAE,CAAE;AAAA,IACvD,CAAE,MAAM,UAAU,QAAS;AAAA,EAC5B;AAEA,MAAK,WAAY;AAChB,WAAO,oBAAC,WAAQ;AAAA,EACjB;AAEA,SACC;AAAA,IAAC;AAAA;AAAA,MACA,UAAW,CAAC,CAAE,MAAM,SAAS;AAAA,MAC7B;AAAA,MACA,gBAAiB,kBAAmB,SAAS,QAAS;AAAA,MACtD;AAAA,MACA,MAAO;AAAA,MACP,UAAW;AAAA,MACX,SAAU;AAAA,MACV,UAAW;AAAA,MACX;AAAA,MACA;AAAA;AAAA,EACD;AAEF;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
|
@@ -15,6 +15,7 @@ function Select({
|
|
|
15
15
|
validity
|
|
16
16
|
}) {
|
|
17
17
|
const { type, label, description, getValue, setValue, isValid } = field;
|
|
18
|
+
const disabled = field.isDisabled({ item: data, field });
|
|
18
19
|
const isMultiple = type === "array";
|
|
19
20
|
const value = getValue({ item: data }) ?? (isMultiple ? [] : "");
|
|
20
21
|
const onChangeControl = useCallback(
|
|
@@ -41,7 +42,8 @@ function Select({
|
|
|
41
42
|
onChange: onChangeControl,
|
|
42
43
|
__next40pxDefaultSize: true,
|
|
43
44
|
hideLabelFromVision,
|
|
44
|
-
multiple: isMultiple
|
|
45
|
+
multiple: isMultiple,
|
|
46
|
+
disabled
|
|
45
47
|
}
|
|
46
48
|
);
|
|
47
49
|
}
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../src/components/dataform-controls/select.tsx"],
|
|
4
|
-
"sourcesContent": ["/**\n * WordPress dependencies\n */\nimport { privateApis, Spinner } from '@wordpress/components';\nimport { useCallback } from '@wordpress/element';\n\n/**\n * Internal dependencies\n */\nimport type { DataFormControlProps } from '../../types';\nimport useElements from '../../hooks/use-elements';\nimport { unlock } from '../../lock-unlock';\nimport getCustomValidity from './utils/get-custom-validity';\n\nconst { ValidatedSelectControl } = unlock( privateApis );\n\nexport default function Select< Item >( {\n\tdata,\n\tfield,\n\tonChange,\n\thideLabelFromVision,\n\tmarkWhenOptional,\n\tvalidity,\n}: DataFormControlProps< Item > ) {\n\tconst { type, label, description, getValue, setValue, isValid } = field;\n\n\tconst isMultiple = type === 'array';\n\tconst value = getValue( { item: data } ) ?? ( isMultiple ? [] : '' );\n\n\tconst onChangeControl = useCallback(\n\t\t( newValue: any ) =>\n\t\t\tonChange( setValue( { item: data, value: newValue } ) ),\n\t\t[ data, onChange, setValue ]\n\t);\n\n\tconst { elements, isLoading } = useElements( {\n\t\telements: field.elements,\n\t\tgetElements: field.getElements,\n\t} );\n\n\tif ( isLoading ) {\n\t\treturn <Spinner />;\n\t}\n\n\treturn (\n\t\t<ValidatedSelectControl\n\t\t\trequired={ !! field.isValid?.required }\n\t\t\tmarkWhenOptional={ markWhenOptional }\n\t\t\tcustomValidity={ getCustomValidity( isValid, validity ) }\n\t\t\tlabel={ label }\n\t\t\tvalue={ value }\n\t\t\thelp={ description }\n\t\t\toptions={ elements }\n\t\t\tonChange={ onChangeControl }\n\t\t\t__next40pxDefaultSize\n\t\t\thideLabelFromVision={ hideLabelFromVision }\n\t\t\tmultiple={ isMultiple }\n\t\t/>\n\t);\n}\n"],
|
|
5
|
-
"mappings": ";AAGA,SAAS,aAAa,eAAe;AACrC,SAAS,mBAAmB;AAM5B,OAAO,iBAAiB;AACxB,SAAS,cAAc;AACvB,OAAO,uBAAuB;
|
|
4
|
+
"sourcesContent": ["/**\n * WordPress dependencies\n */\nimport { privateApis, Spinner } from '@wordpress/components';\nimport { useCallback } from '@wordpress/element';\n\n/**\n * Internal dependencies\n */\nimport type { DataFormControlProps } from '../../types';\nimport useElements from '../../hooks/use-elements';\nimport { unlock } from '../../lock-unlock';\nimport getCustomValidity from './utils/get-custom-validity';\n\nconst { ValidatedSelectControl } = unlock( privateApis );\n\nexport default function Select< Item >( {\n\tdata,\n\tfield,\n\tonChange,\n\thideLabelFromVision,\n\tmarkWhenOptional,\n\tvalidity,\n}: DataFormControlProps< Item > ) {\n\tconst { type, label, description, getValue, setValue, isValid } = field;\n\tconst disabled = field.isDisabled( { item: data, field } );\n\n\tconst isMultiple = type === 'array';\n\tconst value = getValue( { item: data } ) ?? ( isMultiple ? [] : '' );\n\n\tconst onChangeControl = useCallback(\n\t\t( newValue: any ) =>\n\t\t\tonChange( setValue( { item: data, value: newValue } ) ),\n\t\t[ data, onChange, setValue ]\n\t);\n\n\tconst { elements, isLoading } = useElements( {\n\t\telements: field.elements,\n\t\tgetElements: field.getElements,\n\t} );\n\n\tif ( isLoading ) {\n\t\treturn <Spinner />;\n\t}\n\n\treturn (\n\t\t<ValidatedSelectControl\n\t\t\trequired={ !! field.isValid?.required }\n\t\t\tmarkWhenOptional={ markWhenOptional }\n\t\t\tcustomValidity={ getCustomValidity( isValid, validity ) }\n\t\t\tlabel={ label }\n\t\t\tvalue={ value }\n\t\t\thelp={ description }\n\t\t\toptions={ elements }\n\t\t\tonChange={ onChangeControl }\n\t\t\t__next40pxDefaultSize\n\t\t\thideLabelFromVision={ hideLabelFromVision }\n\t\t\tmultiple={ isMultiple }\n\t\t\tdisabled={ disabled }\n\t\t/>\n\t);\n}\n"],
|
|
5
|
+
"mappings": ";AAGA,SAAS,aAAa,eAAe;AACrC,SAAS,mBAAmB;AAM5B,OAAO,iBAAiB;AACxB,SAAS,cAAc;AACvB,OAAO,uBAAuB;AA8BrB;AA5BT,IAAM,EAAE,uBAAuB,IAAI,OAAQ,WAAY;AAExC,SAAR,OAAiC;AAAA,EACvC;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACD,GAAkC;AACjC,QAAM,EAAE,MAAM,OAAO,aAAa,UAAU,UAAU,QAAQ,IAAI;AAClE,QAAM,WAAW,MAAM,WAAY,EAAE,MAAM,MAAM,MAAM,CAAE;AAEzD,QAAM,aAAa,SAAS;AAC5B,QAAM,QAAQ,SAAU,EAAE,MAAM,KAAK,CAAE,MAAO,aAAa,CAAC,IAAI;AAEhE,QAAM,kBAAkB;AAAA,IACvB,CAAE,aACD,SAAU,SAAU,EAAE,MAAM,MAAM,OAAO,SAAS,CAAE,CAAE;AAAA,IACvD,CAAE,MAAM,UAAU,QAAS;AAAA,EAC5B;AAEA,QAAM,EAAE,UAAU,UAAU,IAAI,YAAa;AAAA,IAC5C,UAAU,MAAM;AAAA,IAChB,aAAa,MAAM;AAAA,EACpB,CAAE;AAEF,MAAK,WAAY;AAChB,WAAO,oBAAC,WAAQ;AAAA,EACjB;AAEA,SACC;AAAA,IAAC;AAAA;AAAA,MACA,UAAW,CAAC,CAAE,MAAM,SAAS;AAAA,MAC7B;AAAA,MACA,gBAAiB,kBAAmB,SAAS,QAAS;AAAA,MACtD;AAAA,MACA;AAAA,MACA,MAAO;AAAA,MACP,SAAU;AAAA,MACV,UAAW;AAAA,MACX,uBAAqB;AAAA,MACrB;AAAA,MACA,UAAW;AAAA,MACX;AAAA;AAAA,EACD;AAEF;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
|
@@ -15,6 +15,7 @@ function Textarea({
|
|
|
15
15
|
validity
|
|
16
16
|
}) {
|
|
17
17
|
const { rows = 4 } = config || {};
|
|
18
|
+
const disabled = field.isDisabled({ item: data, field });
|
|
18
19
|
const { label, placeholder, description, setValue, isValid } = field;
|
|
19
20
|
const value = field.getValue({ item: data });
|
|
20
21
|
const onChangeControl = useCallback(
|
|
@@ -33,6 +34,7 @@ function Textarea({
|
|
|
33
34
|
help: description,
|
|
34
35
|
onChange: onChangeControl,
|
|
35
36
|
rows,
|
|
37
|
+
disabled,
|
|
36
38
|
minLength: isValid.minLength ? isValid.minLength.constraint : void 0,
|
|
37
39
|
maxLength: isValid.maxLength ? isValid.maxLength.constraint : void 0,
|
|
38
40
|
__next40pxDefaultSize: true,
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../src/components/dataform-controls/textarea.tsx"],
|
|
4
|
-
"sourcesContent": ["/**\n * WordPress dependencies\n */\nimport { privateApis } from '@wordpress/components';\nimport { useCallback } from '@wordpress/element';\n\n/**\n * Internal dependencies\n */\nimport type { DataFormControlProps } from '../../types';\nimport { unlock } from '../../lock-unlock';\nimport getCustomValidity from './utils/get-custom-validity';\n\nconst { ValidatedTextareaControl } = unlock( privateApis );\n\nexport default function Textarea< Item >( {\n\tdata,\n\tfield,\n\tonChange,\n\thideLabelFromVision,\n\tmarkWhenOptional,\n\tconfig,\n\tvalidity,\n}: DataFormControlProps< Item > ) {\n\tconst { rows = 4 } = config || {};\n\tconst { label, placeholder, description, setValue, isValid } = field;\n\tconst value = field.getValue( { item: data } );\n\n\tconst onChangeControl = useCallback(\n\t\t( newValue: string ) =>\n\t\t\tonChange( setValue( { item: data, value: newValue } ) ),\n\t\t[ data, onChange, setValue ]\n\t);\n\n\treturn (\n\t\t<ValidatedTextareaControl\n\t\t\trequired={ !! isValid.required }\n\t\t\tmarkWhenOptional={ markWhenOptional }\n\t\t\tcustomValidity={ getCustomValidity( isValid, validity ) }\n\t\t\tlabel={ label }\n\t\t\tplaceholder={ placeholder }\n\t\t\tvalue={ value ?? '' }\n\t\t\thelp={ description }\n\t\t\tonChange={ onChangeControl }\n\t\t\trows={ rows }\n\t\t\tminLength={\n\t\t\t\tisValid.minLength ? isValid.minLength.constraint : undefined\n\t\t\t}\n\t\t\tmaxLength={\n\t\t\t\tisValid.maxLength ? isValid.maxLength.constraint : undefined\n\t\t\t}\n\t\t\t__next40pxDefaultSize\n\t\t\thideLabelFromVision={ hideLabelFromVision }\n\t\t/>\n\t);\n}\n"],
|
|
5
|
-
"mappings": ";AAGA,SAAS,mBAAmB;AAC5B,SAAS,mBAAmB;AAM5B,SAAS,cAAc;AACvB,OAAO,uBAAuB;
|
|
4
|
+
"sourcesContent": ["/**\n * WordPress dependencies\n */\nimport { privateApis } from '@wordpress/components';\nimport { useCallback } from '@wordpress/element';\n\n/**\n * Internal dependencies\n */\nimport type { DataFormControlProps } from '../../types';\nimport { unlock } from '../../lock-unlock';\nimport getCustomValidity from './utils/get-custom-validity';\n\nconst { ValidatedTextareaControl } = unlock( privateApis );\n\nexport default function Textarea< Item >( {\n\tdata,\n\tfield,\n\tonChange,\n\thideLabelFromVision,\n\tmarkWhenOptional,\n\tconfig,\n\tvalidity,\n}: DataFormControlProps< Item > ) {\n\tconst { rows = 4 } = config || {};\n\tconst disabled = field.isDisabled( { item: data, field } );\n\tconst { label, placeholder, description, setValue, isValid } = field;\n\tconst value = field.getValue( { item: data } );\n\n\tconst onChangeControl = useCallback(\n\t\t( newValue: string ) =>\n\t\t\tonChange( setValue( { item: data, value: newValue } ) ),\n\t\t[ data, onChange, setValue ]\n\t);\n\n\treturn (\n\t\t<ValidatedTextareaControl\n\t\t\trequired={ !! isValid.required }\n\t\t\tmarkWhenOptional={ markWhenOptional }\n\t\t\tcustomValidity={ getCustomValidity( isValid, validity ) }\n\t\t\tlabel={ label }\n\t\t\tplaceholder={ placeholder }\n\t\t\tvalue={ value ?? '' }\n\t\t\thelp={ description }\n\t\t\tonChange={ onChangeControl }\n\t\t\trows={ rows }\n\t\t\tdisabled={ disabled }\n\t\t\tminLength={\n\t\t\t\tisValid.minLength ? isValid.minLength.constraint : undefined\n\t\t\t}\n\t\t\tmaxLength={\n\t\t\t\tisValid.maxLength ? isValid.maxLength.constraint : undefined\n\t\t\t}\n\t\t\t__next40pxDefaultSize\n\t\t\thideLabelFromVision={ hideLabelFromVision }\n\t\t/>\n\t);\n}\n"],
|
|
5
|
+
"mappings": ";AAGA,SAAS,mBAAmB;AAC5B,SAAS,mBAAmB;AAM5B,SAAS,cAAc;AACvB,OAAO,uBAAuB;AAyB5B;AAvBF,IAAM,EAAE,yBAAyB,IAAI,OAAQ,WAAY;AAE1C,SAAR,SAAmC;AAAA,EACzC;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACD,GAAkC;AACjC,QAAM,EAAE,OAAO,EAAE,IAAI,UAAU,CAAC;AAChC,QAAM,WAAW,MAAM,WAAY,EAAE,MAAM,MAAM,MAAM,CAAE;AACzD,QAAM,EAAE,OAAO,aAAa,aAAa,UAAU,QAAQ,IAAI;AAC/D,QAAM,QAAQ,MAAM,SAAU,EAAE,MAAM,KAAK,CAAE;AAE7C,QAAM,kBAAkB;AAAA,IACvB,CAAE,aACD,SAAU,SAAU,EAAE,MAAM,MAAM,OAAO,SAAS,CAAE,CAAE;AAAA,IACvD,CAAE,MAAM,UAAU,QAAS;AAAA,EAC5B;AAEA,SACC;AAAA,IAAC;AAAA;AAAA,MACA,UAAW,CAAC,CAAE,QAAQ;AAAA,MACtB;AAAA,MACA,gBAAiB,kBAAmB,SAAS,QAAS;AAAA,MACtD;AAAA,MACA;AAAA,MACA,OAAQ,SAAS;AAAA,MACjB,MAAO;AAAA,MACP,UAAW;AAAA,MACX;AAAA,MACA;AAAA,MACA,WACC,QAAQ,YAAY,QAAQ,UAAU,aAAa;AAAA,MAEpD,WACC,QAAQ,YAAY,QAAQ,UAAU,aAAa;AAAA,MAEpD,uBAAqB;AAAA,MACrB;AAAA;AAAA,EACD;AAEF;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
|
@@ -19,6 +19,7 @@ function ToggleGroup({
|
|
|
19
19
|
validity
|
|
20
20
|
}) {
|
|
21
21
|
const { getValue, setValue, isValid } = field;
|
|
22
|
+
const disabled = field.isDisabled({ item: data, field });
|
|
22
23
|
const value = getValue({ item: data });
|
|
23
24
|
const onChangeControl = useCallback(
|
|
24
25
|
(newValue) => onChange(setValue({ item: data, value: newValue })),
|
|
@@ -52,7 +53,8 @@ function ToggleGroup({
|
|
|
52
53
|
ToggleGroupControlOption,
|
|
53
54
|
{
|
|
54
55
|
label: el.label,
|
|
55
|
-
value: el.value
|
|
56
|
+
value: el.value,
|
|
57
|
+
disabled
|
|
56
58
|
},
|
|
57
59
|
el.value
|
|
58
60
|
))
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../src/components/dataform-controls/toggle-group.tsx"],
|
|
4
|
-
"sourcesContent": ["/**\n * WordPress dependencies\n */\nimport {\n\tprivateApis,\n\t__experimentalToggleGroupControlOption as ToggleGroupControlOption,\n\tSpinner,\n} from '@wordpress/components';\nimport { useCallback } from '@wordpress/element';\n\n/**\n * Internal dependencies\n */\nimport type { DataFormControlProps } from '../../types';\nimport { unlock } from '../../lock-unlock';\nimport getCustomValidity from './utils/get-custom-validity';\nimport useElements from '../../hooks/use-elements';\n\nconst { ValidatedToggleGroupControl } = unlock( privateApis );\n\nexport default function ToggleGroup< Item >( {\n\tdata,\n\tfield,\n\tonChange,\n\thideLabelFromVision,\n\tmarkWhenOptional,\n\tvalidity,\n}: DataFormControlProps< Item > ) {\n\tconst { getValue, setValue, isValid } = field;\n\tconst value = getValue( { item: data } );\n\n\tconst onChangeControl = useCallback(\n\t\t( newValue: string | number | undefined ) =>\n\t\t\tonChange( setValue( { item: data, value: newValue } ) ),\n\t\t[ data, onChange, setValue ]\n\t);\n\n\tconst { elements, isLoading } = useElements( {\n\t\telements: field.elements,\n\t\tgetElements: field.getElements,\n\t} );\n\n\tif ( isLoading ) {\n\t\treturn <Spinner />;\n\t}\n\n\tif ( elements.length === 0 ) {\n\t\treturn null;\n\t}\n\n\tconst selectedOption = elements.find( ( el ) => el.value === value );\n\treturn (\n\t\t<ValidatedToggleGroupControl\n\t\t\trequired={ !! field.isValid?.required }\n\t\t\tmarkWhenOptional={ markWhenOptional }\n\t\t\tcustomValidity={ getCustomValidity( isValid, validity ) }\n\t\t\t__next40pxDefaultSize\n\t\t\tisBlock\n\t\t\tlabel={ field.label }\n\t\t\thelp={ selectedOption?.description || field.description }\n\t\t\tonChange={ onChangeControl }\n\t\t\tvalue={ value }\n\t\t\thideLabelFromVision={ hideLabelFromVision }\n\t\t>\n\t\t\t{ elements.map( ( el ) => (\n\t\t\t\t<ToggleGroupControlOption\n\t\t\t\t\tkey={ el.value }\n\t\t\t\t\tlabel={ el.label }\n\t\t\t\t\tvalue={ el.value }\n\t\t\t\t/>\n\t\t\t) ) }\n\t\t</ValidatedToggleGroupControl>\n\t);\n}\n"],
|
|
5
|
-
"mappings": ";AAGA;AAAA,EACC;AAAA,EACA,0CAA0C;AAAA,EAC1C;AAAA,OACM;AACP,SAAS,mBAAmB;AAM5B,SAAS,cAAc;AACvB,OAAO,uBAAuB;AAC9B,OAAO,iBAAiB;
|
|
4
|
+
"sourcesContent": ["/**\n * WordPress dependencies\n */\nimport {\n\tprivateApis,\n\t__experimentalToggleGroupControlOption as ToggleGroupControlOption,\n\tSpinner,\n} from '@wordpress/components';\nimport { useCallback } from '@wordpress/element';\n\n/**\n * Internal dependencies\n */\nimport type { DataFormControlProps } from '../../types';\nimport { unlock } from '../../lock-unlock';\nimport getCustomValidity from './utils/get-custom-validity';\nimport useElements from '../../hooks/use-elements';\n\nconst { ValidatedToggleGroupControl } = unlock( privateApis );\n\nexport default function ToggleGroup< Item >( {\n\tdata,\n\tfield,\n\tonChange,\n\thideLabelFromVision,\n\tmarkWhenOptional,\n\tvalidity,\n}: DataFormControlProps< Item > ) {\n\tconst { getValue, setValue, isValid } = field;\n\tconst disabled = field.isDisabled( { item: data, field } );\n\tconst value = getValue( { item: data } );\n\n\tconst onChangeControl = useCallback(\n\t\t( newValue: string | number | undefined ) =>\n\t\t\tonChange( setValue( { item: data, value: newValue } ) ),\n\t\t[ data, onChange, setValue ]\n\t);\n\n\tconst { elements, isLoading } = useElements( {\n\t\telements: field.elements,\n\t\tgetElements: field.getElements,\n\t} );\n\n\tif ( isLoading ) {\n\t\treturn <Spinner />;\n\t}\n\n\tif ( elements.length === 0 ) {\n\t\treturn null;\n\t}\n\n\tconst selectedOption = elements.find( ( el ) => el.value === value );\n\treturn (\n\t\t<ValidatedToggleGroupControl\n\t\t\trequired={ !! field.isValid?.required }\n\t\t\tmarkWhenOptional={ markWhenOptional }\n\t\t\tcustomValidity={ getCustomValidity( isValid, validity ) }\n\t\t\t__next40pxDefaultSize\n\t\t\tisBlock\n\t\t\tlabel={ field.label }\n\t\t\thelp={ selectedOption?.description || field.description }\n\t\t\tonChange={ onChangeControl }\n\t\t\tvalue={ value }\n\t\t\thideLabelFromVision={ hideLabelFromVision }\n\t\t>\n\t\t\t{ elements.map( ( el ) => (\n\t\t\t\t<ToggleGroupControlOption\n\t\t\t\t\tkey={ el.value }\n\t\t\t\t\tlabel={ el.label }\n\t\t\t\t\tvalue={ el.value }\n\t\t\t\t\tdisabled={ disabled }\n\t\t\t\t/>\n\t\t\t) ) }\n\t\t</ValidatedToggleGroupControl>\n\t);\n}\n"],
|
|
5
|
+
"mappings": ";AAGA;AAAA,EACC;AAAA,EACA,0CAA0C;AAAA,EAC1C;AAAA,OACM;AACP,SAAS,mBAAmB;AAM5B,SAAS,cAAc;AACvB,OAAO,uBAAuB;AAC9B,OAAO,iBAAiB;AA4Bf;AA1BT,IAAM,EAAE,4BAA4B,IAAI,OAAQ,WAAY;AAE7C,SAAR,YAAsC;AAAA,EAC5C;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACD,GAAkC;AACjC,QAAM,EAAE,UAAU,UAAU,QAAQ,IAAI;AACxC,QAAM,WAAW,MAAM,WAAY,EAAE,MAAM,MAAM,MAAM,CAAE;AACzD,QAAM,QAAQ,SAAU,EAAE,MAAM,KAAK,CAAE;AAEvC,QAAM,kBAAkB;AAAA,IACvB,CAAE,aACD,SAAU,SAAU,EAAE,MAAM,MAAM,OAAO,SAAS,CAAE,CAAE;AAAA,IACvD,CAAE,MAAM,UAAU,QAAS;AAAA,EAC5B;AAEA,QAAM,EAAE,UAAU,UAAU,IAAI,YAAa;AAAA,IAC5C,UAAU,MAAM;AAAA,IAChB,aAAa,MAAM;AAAA,EACpB,CAAE;AAEF,MAAK,WAAY;AAChB,WAAO,oBAAC,WAAQ;AAAA,EACjB;AAEA,MAAK,SAAS,WAAW,GAAI;AAC5B,WAAO;AAAA,EACR;AAEA,QAAM,iBAAiB,SAAS,KAAM,CAAE,OAAQ,GAAG,UAAU,KAAM;AACnE,SACC;AAAA,IAAC;AAAA;AAAA,MACA,UAAW,CAAC,CAAE,MAAM,SAAS;AAAA,MAC7B;AAAA,MACA,gBAAiB,kBAAmB,SAAS,QAAS;AAAA,MACtD,uBAAqB;AAAA,MACrB,SAAO;AAAA,MACP,OAAQ,MAAM;AAAA,MACd,MAAO,gBAAgB,eAAe,MAAM;AAAA,MAC5C,UAAW;AAAA,MACX;AAAA,MACA;AAAA,MAEE,mBAAS,IAAK,CAAE,OACjB;AAAA,QAAC;AAAA;AAAA,UAEA,OAAQ,GAAG;AAAA,UACX,OAAQ,GAAG;AAAA,UACX;AAAA;AAAA,QAHM,GAAG;AAAA,MAIV,CACC;AAAA;AAAA,EACH;AAEF;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
|
@@ -14,6 +14,7 @@ function Toggle({
|
|
|
14
14
|
validity
|
|
15
15
|
}) {
|
|
16
16
|
const { label, description, getValue, setValue, isValid } = field;
|
|
17
|
+
const disabled = field.isDisabled({ item: data, field });
|
|
17
18
|
const onChangeControl = useCallback(() => {
|
|
18
19
|
onChange(
|
|
19
20
|
setValue({ item: data, value: !getValue({ item: data }) })
|
|
@@ -29,7 +30,8 @@ function Toggle({
|
|
|
29
30
|
label,
|
|
30
31
|
help: description,
|
|
31
32
|
checked: getValue({ item: data }),
|
|
32
|
-
onChange: onChangeControl
|
|
33
|
+
onChange: onChangeControl,
|
|
34
|
+
disabled
|
|
33
35
|
}
|
|
34
36
|
);
|
|
35
37
|
}
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../src/components/dataform-controls/toggle.tsx"],
|
|
4
|
-
"sourcesContent": ["/**\n * WordPress dependencies\n */\nimport { privateApis } from '@wordpress/components';\nimport { useCallback } from '@wordpress/element';\n\n/**\n * Internal dependencies\n */\nimport type { DataFormControlProps } from '../../types';\nimport { unlock } from '../../lock-unlock';\nimport getCustomValidity from './utils/get-custom-validity';\n\nconst { ValidatedToggleControl } = unlock( privateApis );\n\nexport default function Toggle< Item >( {\n\tfield,\n\tonChange,\n\tdata,\n\thideLabelFromVision,\n\tmarkWhenOptional,\n\tvalidity,\n}: DataFormControlProps< Item > ) {\n\tconst { label, description, getValue, setValue, isValid } = field;\n\n\tconst onChangeControl = useCallback( () => {\n\t\tonChange(\n\t\t\tsetValue( { item: data, value: ! getValue( { item: data } ) } )\n\t\t);\n\t}, [ onChange, setValue, data, getValue ] );\n\n\treturn (\n\t\t<ValidatedToggleControl\n\t\t\trequired={ !! isValid.required }\n\t\t\tmarkWhenOptional={ markWhenOptional }\n\t\t\tcustomValidity={ getCustomValidity( isValid, validity ) }\n\t\t\thidden={ hideLabelFromVision }\n\t\t\tlabel={ label }\n\t\t\thelp={ description }\n\t\t\tchecked={ getValue( { item: data } ) }\n\t\t\tonChange={ onChangeControl }\n\t\t/>\n\t);\n}\n"],
|
|
5
|
-
"mappings": ";AAGA,SAAS,mBAAmB;AAC5B,SAAS,mBAAmB;AAM5B,SAAS,cAAc;AACvB,OAAO,uBAAuB;
|
|
4
|
+
"sourcesContent": ["/**\n * WordPress dependencies\n */\nimport { privateApis } from '@wordpress/components';\nimport { useCallback } from '@wordpress/element';\n\n/**\n * Internal dependencies\n */\nimport type { DataFormControlProps } from '../../types';\nimport { unlock } from '../../lock-unlock';\nimport getCustomValidity from './utils/get-custom-validity';\n\nconst { ValidatedToggleControl } = unlock( privateApis );\n\nexport default function Toggle< Item >( {\n\tfield,\n\tonChange,\n\tdata,\n\thideLabelFromVision,\n\tmarkWhenOptional,\n\tvalidity,\n}: DataFormControlProps< Item > ) {\n\tconst { label, description, getValue, setValue, isValid } = field;\n\tconst disabled = field.isDisabled( { item: data, field } );\n\n\tconst onChangeControl = useCallback( () => {\n\t\tonChange(\n\t\t\tsetValue( { item: data, value: ! getValue( { item: data } ) } )\n\t\t);\n\t}, [ onChange, setValue, data, getValue ] );\n\n\treturn (\n\t\t<ValidatedToggleControl\n\t\t\trequired={ !! isValid.required }\n\t\t\tmarkWhenOptional={ markWhenOptional }\n\t\t\tcustomValidity={ getCustomValidity( isValid, validity ) }\n\t\t\thidden={ hideLabelFromVision }\n\t\t\tlabel={ label }\n\t\t\thelp={ description }\n\t\t\tchecked={ getValue( { item: data } ) }\n\t\t\tonChange={ onChangeControl }\n\t\t\tdisabled={ disabled }\n\t\t/>\n\t);\n}\n"],
|
|
5
|
+
"mappings": ";AAGA,SAAS,mBAAmB;AAC5B,SAAS,mBAAmB;AAM5B,SAAS,cAAc;AACvB,OAAO,uBAAuB;AAsB5B;AApBF,IAAM,EAAE,uBAAuB,IAAI,OAAQ,WAAY;AAExC,SAAR,OAAiC;AAAA,EACvC;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACD,GAAkC;AACjC,QAAM,EAAE,OAAO,aAAa,UAAU,UAAU,QAAQ,IAAI;AAC5D,QAAM,WAAW,MAAM,WAAY,EAAE,MAAM,MAAM,MAAM,CAAE;AAEzD,QAAM,kBAAkB,YAAa,MAAM;AAC1C;AAAA,MACC,SAAU,EAAE,MAAM,MAAM,OAAO,CAAE,SAAU,EAAE,MAAM,KAAK,CAAE,EAAE,CAAE;AAAA,IAC/D;AAAA,EACD,GAAG,CAAE,UAAU,UAAU,MAAM,QAAS,CAAE;AAE1C,SACC;AAAA,IAAC;AAAA;AAAA,MACA,UAAW,CAAC,CAAE,QAAQ;AAAA,MACtB;AAAA,MACA,gBAAiB,kBAAmB,SAAS,QAAS;AAAA,MACtD,QAAS;AAAA,MACT;AAAA,MACA,MAAO;AAAA,MACP,SAAU,SAAU,EAAE,MAAM,KAAK,CAAE;AAAA,MACnC,UAAW;AAAA,MACX;AAAA;AAAA,EACD;AAEF;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
|
@@ -34,6 +34,7 @@ function RelativeDateControl({
|
|
|
34
34
|
}) {
|
|
35
35
|
const options = TIME_UNITS_OPTIONS[operator === OPERATOR_IN_THE_PAST ? "inThePast" : "over"];
|
|
36
36
|
const { id, label, description, getValue, setValue } = field;
|
|
37
|
+
const disabled = field.isDisabled({ item: data, field });
|
|
37
38
|
const fieldValue = getValue({ item: data });
|
|
38
39
|
const { value: relValue = "", unit = options[0].value } = fieldValue && typeof fieldValue === "object" ? fieldValue : {};
|
|
39
40
|
const onChangeValue = useCallback(
|
|
@@ -72,7 +73,8 @@ function RelativeDateControl({
|
|
|
72
73
|
min: 1,
|
|
73
74
|
step: 1,
|
|
74
75
|
value: relValue,
|
|
75
|
-
onChange: onChangeValue
|
|
76
|
+
onChange: onChangeValue,
|
|
77
|
+
disabled
|
|
76
78
|
}
|
|
77
79
|
),
|
|
78
80
|
/* @__PURE__ */ jsx(
|
|
@@ -84,7 +86,8 @@ function RelativeDateControl({
|
|
|
84
86
|
value: unit,
|
|
85
87
|
options,
|
|
86
88
|
onChange: onChangeUnit,
|
|
87
|
-
hideLabelFromVision: true
|
|
89
|
+
hideLabelFromVision: true,
|
|
90
|
+
disabled
|
|
88
91
|
}
|
|
89
92
|
)
|
|
90
93
|
] })
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../src/components/dataform-controls/utils/relative-date-control.tsx"],
|
|
4
|
-
"sourcesContent": ["/**\n * External dependencies\n */\nimport clsx from 'clsx';\n\n/**\n * WordPress dependencies\n */\nimport {\n\tBaseControl,\n\tSelectControl,\n\t__experimentalNumberControl as NumberControl,\n} from '@wordpress/components';\nimport { useCallback } from '@wordpress/element';\nimport { __ } from '@wordpress/i18n';\nimport { Stack } from '@wordpress/ui';\n\n/**\n * Internal dependencies\n */\nimport { OPERATOR_IN_THE_PAST, OPERATOR_OVER } from '../../../constants';\nimport type { DataFormControlProps } from '../../../types';\n\ntype VALID_OPERATORS = 'inThePast' | 'over';\n\ninterface TimeUnitOption {\n\tvalue: string;\n\tlabel: string;\n}\n\nconst TIME_UNITS_OPTIONS: Record< VALID_OPERATORS, TimeUnitOption[] > = {\n\t[ OPERATOR_IN_THE_PAST ]: [\n\t\t{ value: 'days', label: __( 'Days' ) },\n\t\t{ value: 'weeks', label: __( 'Weeks' ) },\n\t\t{ value: 'months', label: __( 'Months' ) },\n\t\t{ value: 'years', label: __( 'Years' ) },\n\t],\n\t[ OPERATOR_OVER ]: [\n\t\t{ value: 'days', label: __( 'Days ago' ) },\n\t\t{ value: 'weeks', label: __( 'Weeks ago' ) },\n\t\t{ value: 'months', label: __( 'Months ago' ) },\n\t\t{ value: 'years', label: __( 'Years ago' ) },\n\t],\n};\n\nexport default function RelativeDateControl< Item >( {\n\tclassName,\n\tdata,\n\tfield,\n\tonChange,\n\thideLabelFromVision,\n\toperator,\n}: DataFormControlProps< Item > & {\n\tclassName: string;\n} ) {\n\tconst options: TimeUnitOption[] =\n\t\tTIME_UNITS_OPTIONS[\n\t\t\toperator === OPERATOR_IN_THE_PAST ? 'inThePast' : 'over'\n\t\t];\n\n\tconst { id, label, description, getValue, setValue } = field;\n\tconst fieldValue = getValue( { item: data } );\n\tconst { value: relValue = '', unit = options[ 0 ].value } =\n\t\tfieldValue && typeof fieldValue === 'object' ? fieldValue : {};\n\n\tconst onChangeValue = useCallback(\n\t\t( newValue: string | undefined ) =>\n\t\t\tonChange(\n\t\t\t\tsetValue( {\n\t\t\t\t\titem: data,\n\t\t\t\t\tvalue: { value: Number( newValue ), unit },\n\t\t\t\t} )\n\t\t\t),\n\t\t[ onChange, setValue, data, unit ]\n\t);\n\n\tconst onChangeUnit = useCallback(\n\t\t( newUnit: string | undefined ) =>\n\t\t\tonChange(\n\t\t\t\tsetValue( {\n\t\t\t\t\titem: data,\n\t\t\t\t\tvalue: { value: relValue, unit: newUnit },\n\t\t\t\t} )\n\t\t\t),\n\t\t[ onChange, setValue, data, relValue ]\n\t);\n\n\treturn (\n\t\t<BaseControl\n\t\t\tid={ id }\n\t\t\tclassName={ clsx( className, 'dataviews-controls__relative-date' ) }\n\t\t\tlabel={ label }\n\t\t\thideLabelFromVision={ hideLabelFromVision }\n\t\t\thelp={ description }\n\t\t>\n\t\t\t<Stack direction=\"row\" gap=\"sm\">\n\t\t\t\t<NumberControl\n\t\t\t\t\t__next40pxDefaultSize\n\t\t\t\t\tclassName=\"dataviews-controls__relative-date-number\"\n\t\t\t\t\tspinControls=\"none\"\n\t\t\t\t\tmin={ 1 }\n\t\t\t\t\tstep={ 1 }\n\t\t\t\t\tvalue={ relValue }\n\t\t\t\t\tonChange={ onChangeValue }\n\t\t\t\t/>\n\t\t\t\t<SelectControl\n\t\t\t\t\tclassName=\"dataviews-controls__relative-date-unit\"\n\t\t\t\t\t__next40pxDefaultSize\n\t\t\t\t\tlabel={ __( 'Unit' ) }\n\t\t\t\t\tvalue={ unit }\n\t\t\t\t\toptions={ options }\n\t\t\t\t\tonChange={ onChangeUnit }\n\t\t\t\t\thideLabelFromVision\n\t\t\t\t/>\n\t\t\t</Stack>\n\t\t</BaseControl>\n\t);\n}\n"],
|
|
5
|
-
"mappings": ";AAGA,OAAO,UAAU;AAKjB;AAAA,EACC;AAAA,EACA;AAAA,EACA,+BAA+B;AAAA,OACzB;AACP,SAAS,mBAAmB;AAC5B,SAAS,UAAU;AACnB,SAAS,aAAa;AAKtB,SAAS,sBAAsB,qBAAqB;
|
|
4
|
+
"sourcesContent": ["/**\n * External dependencies\n */\nimport clsx from 'clsx';\n\n/**\n * WordPress dependencies\n */\nimport {\n\tBaseControl,\n\tSelectControl,\n\t__experimentalNumberControl as NumberControl,\n} from '@wordpress/components';\nimport { useCallback } from '@wordpress/element';\nimport { __ } from '@wordpress/i18n';\nimport { Stack } from '@wordpress/ui';\n\n/**\n * Internal dependencies\n */\nimport { OPERATOR_IN_THE_PAST, OPERATOR_OVER } from '../../../constants';\nimport type { DataFormControlProps } from '../../../types';\n\ntype VALID_OPERATORS = 'inThePast' | 'over';\n\ninterface TimeUnitOption {\n\tvalue: string;\n\tlabel: string;\n}\n\nconst TIME_UNITS_OPTIONS: Record< VALID_OPERATORS, TimeUnitOption[] > = {\n\t[ OPERATOR_IN_THE_PAST ]: [\n\t\t{ value: 'days', label: __( 'Days' ) },\n\t\t{ value: 'weeks', label: __( 'Weeks' ) },\n\t\t{ value: 'months', label: __( 'Months' ) },\n\t\t{ value: 'years', label: __( 'Years' ) },\n\t],\n\t[ OPERATOR_OVER ]: [\n\t\t{ value: 'days', label: __( 'Days ago' ) },\n\t\t{ value: 'weeks', label: __( 'Weeks ago' ) },\n\t\t{ value: 'months', label: __( 'Months ago' ) },\n\t\t{ value: 'years', label: __( 'Years ago' ) },\n\t],\n};\n\nexport default function RelativeDateControl< Item >( {\n\tclassName,\n\tdata,\n\tfield,\n\tonChange,\n\thideLabelFromVision,\n\toperator,\n}: DataFormControlProps< Item > & {\n\tclassName: string;\n} ) {\n\tconst options: TimeUnitOption[] =\n\t\tTIME_UNITS_OPTIONS[\n\t\t\toperator === OPERATOR_IN_THE_PAST ? 'inThePast' : 'over'\n\t\t];\n\n\tconst { id, label, description, getValue, setValue } = field;\n\tconst disabled = field.isDisabled( { item: data, field } );\n\tconst fieldValue = getValue( { item: data } );\n\tconst { value: relValue = '', unit = options[ 0 ].value } =\n\t\tfieldValue && typeof fieldValue === 'object' ? fieldValue : {};\n\n\tconst onChangeValue = useCallback(\n\t\t( newValue: string | undefined ) =>\n\t\t\tonChange(\n\t\t\t\tsetValue( {\n\t\t\t\t\titem: data,\n\t\t\t\t\tvalue: { value: Number( newValue ), unit },\n\t\t\t\t} )\n\t\t\t),\n\t\t[ onChange, setValue, data, unit ]\n\t);\n\n\tconst onChangeUnit = useCallback(\n\t\t( newUnit: string | undefined ) =>\n\t\t\tonChange(\n\t\t\t\tsetValue( {\n\t\t\t\t\titem: data,\n\t\t\t\t\tvalue: { value: relValue, unit: newUnit },\n\t\t\t\t} )\n\t\t\t),\n\t\t[ onChange, setValue, data, relValue ]\n\t);\n\n\treturn (\n\t\t<BaseControl\n\t\t\tid={ id }\n\t\t\tclassName={ clsx( className, 'dataviews-controls__relative-date' ) }\n\t\t\tlabel={ label }\n\t\t\thideLabelFromVision={ hideLabelFromVision }\n\t\t\thelp={ description }\n\t\t>\n\t\t\t<Stack direction=\"row\" gap=\"sm\">\n\t\t\t\t<NumberControl\n\t\t\t\t\t__next40pxDefaultSize\n\t\t\t\t\tclassName=\"dataviews-controls__relative-date-number\"\n\t\t\t\t\tspinControls=\"none\"\n\t\t\t\t\tmin={ 1 }\n\t\t\t\t\tstep={ 1 }\n\t\t\t\t\tvalue={ relValue }\n\t\t\t\t\tonChange={ onChangeValue }\n\t\t\t\t\tdisabled={ disabled }\n\t\t\t\t/>\n\t\t\t\t<SelectControl\n\t\t\t\t\tclassName=\"dataviews-controls__relative-date-unit\"\n\t\t\t\t\t__next40pxDefaultSize\n\t\t\t\t\tlabel={ __( 'Unit' ) }\n\t\t\t\t\tvalue={ unit }\n\t\t\t\t\toptions={ options }\n\t\t\t\t\tonChange={ onChangeUnit }\n\t\t\t\t\thideLabelFromVision\n\t\t\t\t\tdisabled={ disabled }\n\t\t\t\t/>\n\t\t\t</Stack>\n\t\t</BaseControl>\n\t);\n}\n"],
|
|
5
|
+
"mappings": ";AAGA,OAAO,UAAU;AAKjB;AAAA,EACC;AAAA,EACA;AAAA,EACA,+BAA+B;AAAA,OACzB;AACP,SAAS,mBAAmB;AAC5B,SAAS,UAAU;AACnB,SAAS,aAAa;AAKtB,SAAS,sBAAsB,qBAAqB;AA4EjD,SACC,KADD;AAlEH,IAAM,qBAAkE;AAAA,EACvE,CAAE,oBAAqB,GAAG;AAAA,IACzB,EAAE,OAAO,QAAQ,OAAO,GAAI,MAAO,EAAE;AAAA,IACrC,EAAE,OAAO,SAAS,OAAO,GAAI,OAAQ,EAAE;AAAA,IACvC,EAAE,OAAO,UAAU,OAAO,GAAI,QAAS,EAAE;AAAA,IACzC,EAAE,OAAO,SAAS,OAAO,GAAI,OAAQ,EAAE;AAAA,EACxC;AAAA,EACA,CAAE,aAAc,GAAG;AAAA,IAClB,EAAE,OAAO,QAAQ,OAAO,GAAI,UAAW,EAAE;AAAA,IACzC,EAAE,OAAO,SAAS,OAAO,GAAI,WAAY,EAAE;AAAA,IAC3C,EAAE,OAAO,UAAU,OAAO,GAAI,YAAa,EAAE;AAAA,IAC7C,EAAE,OAAO,SAAS,OAAO,GAAI,WAAY,EAAE;AAAA,EAC5C;AACD;AAEe,SAAR,oBAA8C;AAAA,EACpD;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACD,GAEI;AACH,QAAM,UACL,mBACC,aAAa,uBAAuB,cAAc,MACnD;AAED,QAAM,EAAE,IAAI,OAAO,aAAa,UAAU,SAAS,IAAI;AACvD,QAAM,WAAW,MAAM,WAAY,EAAE,MAAM,MAAM,MAAM,CAAE;AACzD,QAAM,aAAa,SAAU,EAAE,MAAM,KAAK,CAAE;AAC5C,QAAM,EAAE,OAAO,WAAW,IAAI,OAAO,QAAS,CAAE,EAAE,MAAM,IACvD,cAAc,OAAO,eAAe,WAAW,aAAa,CAAC;AAE9D,QAAM,gBAAgB;AAAA,IACrB,CAAE,aACD;AAAA,MACC,SAAU;AAAA,QACT,MAAM;AAAA,QACN,OAAO,EAAE,OAAO,OAAQ,QAAS,GAAG,KAAK;AAAA,MAC1C,CAAE;AAAA,IACH;AAAA,IACD,CAAE,UAAU,UAAU,MAAM,IAAK;AAAA,EAClC;AAEA,QAAM,eAAe;AAAA,IACpB,CAAE,YACD;AAAA,MACC,SAAU;AAAA,QACT,MAAM;AAAA,QACN,OAAO,EAAE,OAAO,UAAU,MAAM,QAAQ;AAAA,MACzC,CAAE;AAAA,IACH;AAAA,IACD,CAAE,UAAU,UAAU,MAAM,QAAS;AAAA,EACtC;AAEA,SACC;AAAA,IAAC;AAAA;AAAA,MACA;AAAA,MACA,WAAY,KAAM,WAAW,mCAAoC;AAAA,MACjE;AAAA,MACA;AAAA,MACA,MAAO;AAAA,MAEP,+BAAC,SAAM,WAAU,OAAM,KAAI,MAC1B;AAAA;AAAA,UAAC;AAAA;AAAA,YACA,uBAAqB;AAAA,YACrB,WAAU;AAAA,YACV,cAAa;AAAA,YACb,KAAM;AAAA,YACN,MAAO;AAAA,YACP,OAAQ;AAAA,YACR,UAAW;AAAA,YACX;AAAA;AAAA,QACD;AAAA,QACA;AAAA,UAAC;AAAA;AAAA,YACA,WAAU;AAAA,YACV,uBAAqB;AAAA,YACrB,OAAQ,GAAI,MAAO;AAAA,YACnB,OAAQ;AAAA,YACR;AAAA,YACA,UAAW;AAAA,YACX,qBAAmB;AAAA,YACnB;AAAA;AAAA,QACD;AAAA,SACD;AAAA;AAAA,EACD;AAEF;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
|
@@ -0,0 +1,27 @@
|
|
|
1
|
+
// packages/dataviews/src/components/dataform-controls/utils/use-disabled-date-matchers.ts
|
|
2
|
+
import { useMemo } from "@wordpress/element";
|
|
3
|
+
function useDisabledDateMatchers(isValid, parseDateFn) {
|
|
4
|
+
const minConstraint = typeof isValid.min?.constraint === "string" ? isValid.min.constraint : void 0;
|
|
5
|
+
const maxConstraint = typeof isValid.max?.constraint === "string" ? isValid.max.constraint : void 0;
|
|
6
|
+
const disabledMatchers = useMemo(() => {
|
|
7
|
+
const matchers = [];
|
|
8
|
+
if (minConstraint) {
|
|
9
|
+
const minDate = parseDateFn(minConstraint);
|
|
10
|
+
if (minDate) {
|
|
11
|
+
matchers.push({ before: minDate });
|
|
12
|
+
}
|
|
13
|
+
}
|
|
14
|
+
if (maxConstraint) {
|
|
15
|
+
const maxDate = parseDateFn(maxConstraint);
|
|
16
|
+
if (maxDate) {
|
|
17
|
+
matchers.push({ after: maxDate });
|
|
18
|
+
}
|
|
19
|
+
}
|
|
20
|
+
return matchers.length > 0 ? matchers : void 0;
|
|
21
|
+
}, [minConstraint, maxConstraint, parseDateFn]);
|
|
22
|
+
return { minConstraint, maxConstraint, disabledMatchers };
|
|
23
|
+
}
|
|
24
|
+
export {
|
|
25
|
+
useDisabledDateMatchers as default
|
|
26
|
+
};
|
|
27
|
+
//# sourceMappingURL=use-disabled-date-matchers.mjs.map
|
|
@@ -0,0 +1,7 @@
|
|
|
1
|
+
{
|
|
2
|
+
"version": 3,
|
|
3
|
+
"sources": ["../../../../src/components/dataform-controls/utils/use-disabled-date-matchers.ts"],
|
|
4
|
+
"sourcesContent": ["/**\n * WordPress dependencies\n */\nimport { useMemo } from '@wordpress/element';\n\n/**\n * Internal dependencies\n */\nimport type { NormalizedRules } from '../../../types';\n\ntype DateMatcher = { before: Date } | { after: Date };\n\nexport default function useDisabledDateMatchers< Item >(\n\tisValid: NormalizedRules< Item >,\n\tparseDateFn: ( dateString?: string ) => Date | null\n): {\n\tminConstraint: string | undefined;\n\tmaxConstraint: string | undefined;\n\tdisabledMatchers: DateMatcher[] | undefined;\n} {\n\tconst minConstraint =\n\t\ttypeof isValid.min?.constraint === 'string'\n\t\t\t? isValid.min.constraint\n\t\t\t: undefined;\n\tconst maxConstraint =\n\t\ttypeof isValid.max?.constraint === 'string'\n\t\t\t? isValid.max.constraint\n\t\t\t: undefined;\n\n\tconst disabledMatchers = useMemo( () => {\n\t\tconst matchers: DateMatcher[] = [];\n\t\tif ( minConstraint ) {\n\t\t\tconst minDate = parseDateFn( minConstraint );\n\t\t\tif ( minDate ) {\n\t\t\t\tmatchers.push( { before: minDate } );\n\t\t\t}\n\t\t}\n\t\tif ( maxConstraint ) {\n\t\t\tconst maxDate = parseDateFn( maxConstraint );\n\t\t\tif ( maxDate ) {\n\t\t\t\tmatchers.push( { after: maxDate } );\n\t\t\t}\n\t\t}\n\t\treturn matchers.length > 0 ? matchers : undefined;\n\t}, [ minConstraint, maxConstraint, parseDateFn ] );\n\n\treturn { minConstraint, maxConstraint, disabledMatchers };\n}\n"],
|
|
5
|
+
"mappings": ";AAGA,SAAS,eAAe;AAST,SAAR,wBACN,SACA,aAKC;AACD,QAAM,gBACL,OAAO,QAAQ,KAAK,eAAe,WAChC,QAAQ,IAAI,aACZ;AACJ,QAAM,gBACL,OAAO,QAAQ,KAAK,eAAe,WAChC,QAAQ,IAAI,aACZ;AAEJ,QAAM,mBAAmB,QAAS,MAAM;AACvC,UAAM,WAA0B,CAAC;AACjC,QAAK,eAAgB;AACpB,YAAM,UAAU,YAAa,aAAc;AAC3C,UAAK,SAAU;AACd,iBAAS,KAAM,EAAE,QAAQ,QAAQ,CAAE;AAAA,MACpC;AAAA,IACD;AACA,QAAK,eAAgB;AACpB,YAAM,UAAU,YAAa,aAAc;AAC3C,UAAK,SAAU;AACd,iBAAS,KAAM,EAAE,OAAO,QAAQ,CAAE;AAAA,MACnC;AAAA,IACD;AACA,WAAO,SAAS,SAAS,IAAI,WAAW;AAAA,EACzC,GAAG,CAAE,eAAe,eAAe,WAAY,CAAE;AAEjD,SAAO,EAAE,eAAe,eAAe,iBAAiB;AACzD;",
|
|
6
|
+
"names": []
|
|
7
|
+
}
|
|
@@ -18,6 +18,7 @@ function ValidatedText({
|
|
|
18
18
|
}) {
|
|
19
19
|
const { label, placeholder, description, getValue, setValue, isValid } = field;
|
|
20
20
|
const value = getValue({ item: data });
|
|
21
|
+
const disabled = field.isDisabled({ item: data, field });
|
|
21
22
|
const onChangeControl = useCallback(
|
|
22
23
|
(newValue) => onChange(
|
|
23
24
|
setValue({
|
|
@@ -42,6 +43,7 @@ function ValidatedText({
|
|
|
42
43
|
type,
|
|
43
44
|
prefix,
|
|
44
45
|
suffix,
|
|
46
|
+
disabled,
|
|
45
47
|
pattern: isValid.pattern ? isValid.pattern.constraint : void 0,
|
|
46
48
|
minLength: isValid.minLength ? isValid.minLength.constraint : void 0,
|
|
47
49
|
maxLength: isValid.maxLength ? isValid.maxLength.constraint : void 0,
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../src/components/dataform-controls/utils/validated-input.tsx"],
|
|
4
|
-
"sourcesContent": ["/**\n * WordPress dependencies\n */\nimport { privateApis } from '@wordpress/components';\nimport { useCallback } from '@wordpress/element';\n\n/**\n * Internal dependencies\n */\nimport type { DataFormControlProps } from '../../../types';\nimport { unlock } from '../../../lock-unlock';\nimport getCustomValidity from './get-custom-validity';\n\nconst { ValidatedInputControl } = unlock( privateApis );\n\nexport type DataFormValidatedTextControlProps< Item > =\n\tDataFormControlProps< Item > & {\n\t\t/**\n\t\t * The input type of the control.\n\t\t */\n\t\ttype?: 'text' | 'email' | 'tel' | 'url' | 'password';\n\t\t/**\n\t\t * Optional prefix element to display before the input.\n\t\t */\n\t\tprefix?: React.ReactElement;\n\t\t/**\n\t\t * Optional suffix element to display after the input.\n\t\t */\n\t\tsuffix?: React.ReactElement;\n\t};\n\nexport default function ValidatedText< Item >( {\n\tdata,\n\tfield,\n\tonChange,\n\thideLabelFromVision,\n\tmarkWhenOptional,\n\ttype,\n\tprefix,\n\tsuffix,\n\tvalidity,\n}: DataFormValidatedTextControlProps< Item > ) {\n\tconst { label, placeholder, description, getValue, setValue, isValid } =\n\t\tfield;\n\tconst value = getValue( { item: data } );\n\n\tconst onChangeControl = useCallback(\n\t\t( newValue: string ) =>\n\t\t\tonChange(\n\t\t\t\tsetValue( {\n\t\t\t\t\titem: data,\n\t\t\t\t\tvalue: newValue,\n\t\t\t\t} )\n\t\t\t),\n\t\t[ data, setValue, onChange ]\n\t);\n\n\treturn (\n\t\t<ValidatedInputControl\n\t\t\trequired={ !! isValid.required }\n\t\t\tmarkWhenOptional={ markWhenOptional }\n\t\t\tcustomValidity={ getCustomValidity( isValid, validity ) }\n\t\t\tlabel={ label }\n\t\t\tplaceholder={ placeholder }\n\t\t\tvalue={ value ?? '' }\n\t\t\thelp={ description }\n\t\t\tonChange={ onChangeControl }\n\t\t\thideLabelFromVision={ hideLabelFromVision }\n\t\t\ttype={ type }\n\t\t\tprefix={ prefix }\n\t\t\tsuffix={ suffix }\n\t\t\tpattern={ isValid.pattern ? isValid.pattern.constraint : undefined }\n\t\t\tminLength={\n\t\t\t\tisValid.minLength ? isValid.minLength.constraint : undefined\n\t\t\t}\n\t\t\tmaxLength={\n\t\t\t\tisValid.maxLength ? isValid.maxLength.constraint : undefined\n\t\t\t}\n\t\t\t__next40pxDefaultSize\n\t\t/>\n\t);\n}\n"],
|
|
5
|
-
"mappings": ";AAGA,SAAS,mBAAmB;AAC5B,SAAS,mBAAmB;AAM5B,SAAS,cAAc;AACvB,OAAO,uBAAuB;
|
|
4
|
+
"sourcesContent": ["/**\n * WordPress dependencies\n */\nimport { privateApis } from '@wordpress/components';\nimport { useCallback } from '@wordpress/element';\n\n/**\n * Internal dependencies\n */\nimport type { DataFormControlProps } from '../../../types';\nimport { unlock } from '../../../lock-unlock';\nimport getCustomValidity from './get-custom-validity';\n\nconst { ValidatedInputControl } = unlock( privateApis );\n\nexport type DataFormValidatedTextControlProps< Item > =\n\tDataFormControlProps< Item > & {\n\t\t/**\n\t\t * The input type of the control.\n\t\t */\n\t\ttype?: 'text' | 'email' | 'tel' | 'url' | 'password';\n\t\t/**\n\t\t * Optional prefix element to display before the input.\n\t\t */\n\t\tprefix?: React.ReactElement;\n\t\t/**\n\t\t * Optional suffix element to display after the input.\n\t\t */\n\t\tsuffix?: React.ReactElement;\n\t};\n\nexport default function ValidatedText< Item >( {\n\tdata,\n\tfield,\n\tonChange,\n\thideLabelFromVision,\n\tmarkWhenOptional,\n\ttype,\n\tprefix,\n\tsuffix,\n\tvalidity,\n}: DataFormValidatedTextControlProps< Item > ) {\n\tconst { label, placeholder, description, getValue, setValue, isValid } =\n\t\tfield;\n\tconst value = getValue( { item: data } );\n\tconst disabled = field.isDisabled( { item: data, field } );\n\n\tconst onChangeControl = useCallback(\n\t\t( newValue: string ) =>\n\t\t\tonChange(\n\t\t\t\tsetValue( {\n\t\t\t\t\titem: data,\n\t\t\t\t\tvalue: newValue,\n\t\t\t\t} )\n\t\t\t),\n\t\t[ data, setValue, onChange ]\n\t);\n\n\treturn (\n\t\t<ValidatedInputControl\n\t\t\trequired={ !! isValid.required }\n\t\t\tmarkWhenOptional={ markWhenOptional }\n\t\t\tcustomValidity={ getCustomValidity( isValid, validity ) }\n\t\t\tlabel={ label }\n\t\t\tplaceholder={ placeholder }\n\t\t\tvalue={ value ?? '' }\n\t\t\thelp={ description }\n\t\t\tonChange={ onChangeControl }\n\t\t\thideLabelFromVision={ hideLabelFromVision }\n\t\t\ttype={ type }\n\t\t\tprefix={ prefix }\n\t\t\tsuffix={ suffix }\n\t\t\tdisabled={ disabled }\n\t\t\tpattern={ isValid.pattern ? isValid.pattern.constraint : undefined }\n\t\t\tminLength={\n\t\t\t\tisValid.minLength ? isValid.minLength.constraint : undefined\n\t\t\t}\n\t\t\tmaxLength={\n\t\t\t\tisValid.maxLength ? isValid.maxLength.constraint : undefined\n\t\t\t}\n\t\t\t__next40pxDefaultSize\n\t\t/>\n\t);\n}\n"],
|
|
5
|
+
"mappings": ";AAGA,SAAS,mBAAmB;AAC5B,SAAS,mBAAmB;AAM5B,SAAS,cAAc;AACvB,OAAO,uBAAuB;AAgD5B;AA9CF,IAAM,EAAE,sBAAsB,IAAI,OAAQ,WAAY;AAkBvC,SAAR,cAAwC;AAAA,EAC9C;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACD,GAA+C;AAC9C,QAAM,EAAE,OAAO,aAAa,aAAa,UAAU,UAAU,QAAQ,IACpE;AACD,QAAM,QAAQ,SAAU,EAAE,MAAM,KAAK,CAAE;AACvC,QAAM,WAAW,MAAM,WAAY,EAAE,MAAM,MAAM,MAAM,CAAE;AAEzD,QAAM,kBAAkB;AAAA,IACvB,CAAE,aACD;AAAA,MACC,SAAU;AAAA,QACT,MAAM;AAAA,QACN,OAAO;AAAA,MACR,CAAE;AAAA,IACH;AAAA,IACD,CAAE,MAAM,UAAU,QAAS;AAAA,EAC5B;AAEA,SACC;AAAA,IAAC;AAAA;AAAA,MACA,UAAW,CAAC,CAAE,QAAQ;AAAA,MACtB;AAAA,MACA,gBAAiB,kBAAmB,SAAS,QAAS;AAAA,MACtD;AAAA,MACA;AAAA,MACA,OAAQ,SAAS;AAAA,MACjB,MAAO;AAAA,MACP,UAAW;AAAA,MACX;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA,SAAU,QAAQ,UAAU,QAAQ,QAAQ,aAAa;AAAA,MACzD,WACC,QAAQ,YAAY,QAAQ,UAAU,aAAa;AAAA,MAEpD,WACC,QAAQ,YAAY,QAAQ,UAAU,aAAa;AAAA,MAEpD,uBAAqB;AAAA;AAAA,EACtB;AAEF;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
|
@@ -80,6 +80,7 @@ function ValidatedNumber({
|
|
|
80
80
|
const step = Math.pow(10, Math.abs(decimals) * -1);
|
|
81
81
|
const { label, description, getValue, setValue, isValid } = field;
|
|
82
82
|
const value = getValue({ item: data }) ?? "";
|
|
83
|
+
const disabled = field.isDisabled({ item: data, field });
|
|
83
84
|
const onChangeControl = useCallback(
|
|
84
85
|
(newValue) => {
|
|
85
86
|
onChange(
|
|
@@ -136,7 +137,8 @@ function ValidatedNumber({
|
|
|
136
137
|
hideLabelFromVision,
|
|
137
138
|
step,
|
|
138
139
|
min: isValid.min ? isValid.min.constraint : void 0,
|
|
139
|
-
max: isValid.max ? isValid.max.constraint : void 0
|
|
140
|
+
max: isValid.max ? isValid.max.constraint : void 0,
|
|
141
|
+
disabled
|
|
140
142
|
}
|
|
141
143
|
);
|
|
142
144
|
}
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../src/components/dataform-controls/utils/validated-number.tsx"],
|
|
4
|
-
"sourcesContent": ["/**\n * WordPress dependencies\n */\nimport {\n\tFlex,\n\tBaseControl,\n\t__experimentalNumberControl as NumberControl,\n\tprivateApis,\n} from '@wordpress/components';\nimport { useCallback } from '@wordpress/element';\nimport { __ } from '@wordpress/i18n';\n\n/**\n * Internal dependencies\n */\nimport { OPERATOR_BETWEEN } from '../../../constants';\nimport type { DataFormControlProps, FormatNumber } from '../../../types';\nimport { unlock } from '../../../lock-unlock';\nimport getCustomValidity from './get-custom-validity';\n\nconst { ValidatedNumberControl } = unlock( privateApis );\n\ntype NumberBetween = [ number | string, number | string ];\n\nfunction toNumberOrEmpty( value?: string ) {\n\tif ( value === '' || value === undefined ) {\n\t\treturn '';\n\t}\n\tconst number = Number( value );\n\treturn Number.isFinite( number ) ? number : '';\n}\n\nfunction BetweenControls( {\n\tvalue,\n\tonChange,\n\thideLabelFromVision,\n\tstep,\n}: {\n\tvalue: NumberBetween;\n\tonChange: ( [ min, max ]: NumberBetween ) => void;\n\thideLabelFromVision?: boolean;\n\tstep: number;\n} ) {\n\tconst [ min = '', max = '' ] = value;\n\n\tconst onChangeMin = useCallback(\n\t\t( newValue: string | undefined ) =>\n\t\t\tonChange( [ toNumberOrEmpty( newValue ), max ] ),\n\t\t[ onChange, max ]\n\t);\n\n\tconst onChangeMax = useCallback(\n\t\t( newValue: string | undefined ) =>\n\t\t\tonChange( [ min, toNumberOrEmpty( newValue ) ] ),\n\t\t[ onChange, min ]\n\t);\n\n\treturn (\n\t\t<BaseControl\n\t\t\thelp={ __( 'The max. value must be greater than the min. value.' ) }\n\t\t>\n\t\t\t<Flex direction=\"row\" gap={ 4 }>\n\t\t\t\t<NumberControl\n\t\t\t\t\tlabel={ __( 'Min.' ) }\n\t\t\t\t\tvalue={ min }\n\t\t\t\t\tmax={ max ? Number( max ) - step : undefined }\n\t\t\t\t\tonChange={ onChangeMin }\n\t\t\t\t\t__next40pxDefaultSize\n\t\t\t\t\thideLabelFromVision={ hideLabelFromVision }\n\t\t\t\t\tstep={ step }\n\t\t\t\t/>\n\t\t\t\t<NumberControl\n\t\t\t\t\tlabel={ __( 'Max.' ) }\n\t\t\t\t\tvalue={ max }\n\t\t\t\t\tmin={ min ? Number( min ) + step : undefined }\n\t\t\t\t\tonChange={ onChangeMax }\n\t\t\t\t\t__next40pxDefaultSize\n\t\t\t\t\thideLabelFromVision={ hideLabelFromVision }\n\t\t\t\t\tstep={ step }\n\t\t\t\t/>\n\t\t\t</Flex>\n\t\t</BaseControl>\n\t);\n}\n\nexport default function ValidatedNumber< Item >( {\n\tdata,\n\tfield,\n\tonChange,\n\thideLabelFromVision,\n\tmarkWhenOptional,\n\toperator,\n\tvalidity,\n}: DataFormControlProps< Item > ) {\n\tconst decimals = ( field.format as FormatNumber )?.decimals ?? 0;\n\tconst step = Math.pow( 10, Math.abs( decimals ) * -1 );\n\tconst { label, description, getValue, setValue, isValid } = field;\n\tconst value = getValue( { item: data } ) ?? '';\n\n\tconst onChangeControl = useCallback(\n\t\t( newValue: string | undefined ) => {\n\t\t\tonChange(\n\t\t\t\tsetValue( {\n\t\t\t\t\titem: data,\n\t\t\t\t\t// Do not convert an empty string or undefined to a number,\n\t\t\t\t\t// otherwise there's a mismatch between the UI control (empty)\n\t\t\t\t\t// and the data relied by onChange (0).\n\t\t\t\t\tvalue: [ '', undefined ].includes( newValue )\n\t\t\t\t\t\t? undefined\n\t\t\t\t\t\t: Number( newValue ),\n\t\t\t\t} )\n\t\t\t);\n\t\t},\n\t\t[ data, onChange, setValue ]\n\t);\n\n\tconst onChangeBetweenControls = useCallback(\n\t\t( newValue: NumberBetween ) => {\n\t\t\tonChange(\n\t\t\t\tsetValue( {\n\t\t\t\t\titem: data,\n\t\t\t\t\tvalue: newValue,\n\t\t\t\t} )\n\t\t\t);\n\t\t},\n\t\t[ data, onChange, setValue ]\n\t);\n\n\tif ( operator === OPERATOR_BETWEEN ) {\n\t\tlet valueBetween: NumberBetween = [ '', '' ];\n\t\tif (\n\t\t\tArray.isArray( value ) &&\n\t\t\tvalue.length === 2 &&\n\t\t\tvalue.every(\n\t\t\t\t( element ) => typeof element === 'number' || element === ''\n\t\t\t)\n\t\t) {\n\t\t\tvalueBetween = value as NumberBetween;\n\t\t}\n\t\treturn (\n\t\t\t<BetweenControls\n\t\t\t\tvalue={ valueBetween }\n\t\t\t\tonChange={ onChangeBetweenControls }\n\t\t\t\thideLabelFromVision={ hideLabelFromVision }\n\t\t\t\tstep={ step }\n\t\t\t/>\n\t\t);\n\t}\n\n\treturn (\n\t\t<ValidatedNumberControl\n\t\t\trequired={ !! isValid.required }\n\t\t\tmarkWhenOptional={ markWhenOptional }\n\t\t\tcustomValidity={ getCustomValidity( isValid, validity ) }\n\t\t\tlabel={ label }\n\t\t\thelp={ description }\n\t\t\tvalue={ value }\n\t\t\tonChange={ onChangeControl }\n\t\t\t__next40pxDefaultSize\n\t\t\thideLabelFromVision={ hideLabelFromVision }\n\t\t\tstep={ step }\n\t\t\tmin={ isValid.min ? isValid.min.constraint : undefined }\n\t\t\tmax={ isValid.max ? isValid.max.constraint : undefined }\n\t\t/>\n\t);\n}\n"],
|
|
5
|
-
"mappings": ";AAGA;AAAA,EACC;AAAA,EACA;AAAA,EACA,+BAA+B;AAAA,EAC/B;AAAA,OACM;AACP,SAAS,mBAAmB;AAC5B,SAAS,UAAU;AAKnB,SAAS,wBAAwB;AAEjC,SAAS,cAAc;AACvB,OAAO,uBAAuB;AA2C3B,SACC,KADD;AAzCH,IAAM,EAAE,uBAAuB,IAAI,OAAQ,WAAY;AAIvD,SAAS,gBAAiB,OAAiB;AAC1C,MAAK,UAAU,MAAM,UAAU,QAAY;AAC1C,WAAO;AAAA,EACR;AACA,QAAM,SAAS,OAAQ,KAAM;AAC7B,SAAO,OAAO,SAAU,MAAO,IAAI,SAAS;AAC7C;AAEA,SAAS,gBAAiB;AAAA,EACzB;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACD,GAKI;AACH,QAAM,CAAE,MAAM,IAAI,MAAM,EAAG,IAAI;AAE/B,QAAM,cAAc;AAAA,IACnB,CAAE,aACD,SAAU,CAAE,gBAAiB,QAAS,GAAG,GAAI,CAAE;AAAA,IAChD,CAAE,UAAU,GAAI;AAAA,EACjB;AAEA,QAAM,cAAc;AAAA,IACnB,CAAE,aACD,SAAU,CAAE,KAAK,gBAAiB,QAAS,CAAE,CAAE;AAAA,IAChD,CAAE,UAAU,GAAI;AAAA,EACjB;AAEA,SACC;AAAA,IAAC;AAAA;AAAA,MACA,MAAO,GAAI,qDAAsD;AAAA,MAEjE,+BAAC,QAAK,WAAU,OAAM,KAAM,GAC3B;AAAA;AAAA,UAAC;AAAA;AAAA,YACA,OAAQ,GAAI,MAAO;AAAA,YACnB,OAAQ;AAAA,YACR,KAAM,MAAM,OAAQ,GAAI,IAAI,OAAO;AAAA,YACnC,UAAW;AAAA,YACX,uBAAqB;AAAA,YACrB;AAAA,YACA;AAAA;AAAA,QACD;AAAA,QACA;AAAA,UAAC;AAAA;AAAA,YACA,OAAQ,GAAI,MAAO;AAAA,YACnB,OAAQ;AAAA,YACR,KAAM,MAAM,OAAQ,GAAI,IAAI,OAAO;AAAA,YACnC,UAAW;AAAA,YACX,uBAAqB;AAAA,YACrB;AAAA,YACA;AAAA;AAAA,QACD;AAAA,SACD;AAAA;AAAA,EACD;AAEF;AAEe,SAAR,gBAA0C;AAAA,EAChD;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACD,GAAkC;AACjC,QAAM,WAAa,MAAM,QAA0B,YAAY;AAC/D,QAAM,OAAO,KAAK,IAAK,IAAI,KAAK,IAAK,QAAS,IAAI,EAAG;AACrD,QAAM,EAAE,OAAO,aAAa,UAAU,UAAU,QAAQ,IAAI;AAC5D,QAAM,QAAQ,SAAU,EAAE,MAAM,KAAK,CAAE,KAAK;
|
|
4
|
+
"sourcesContent": ["/**\n * WordPress dependencies\n */\nimport {\n\tFlex,\n\tBaseControl,\n\t__experimentalNumberControl as NumberControl,\n\tprivateApis,\n} from '@wordpress/components';\nimport { useCallback } from '@wordpress/element';\nimport { __ } from '@wordpress/i18n';\n\n/**\n * Internal dependencies\n */\nimport { OPERATOR_BETWEEN } from '../../../constants';\nimport type { DataFormControlProps, FormatNumber } from '../../../types';\nimport { unlock } from '../../../lock-unlock';\nimport getCustomValidity from './get-custom-validity';\n\nconst { ValidatedNumberControl } = unlock( privateApis );\n\ntype NumberBetween = [ number | string, number | string ];\n\nfunction toNumberOrEmpty( value?: string ) {\n\tif ( value === '' || value === undefined ) {\n\t\treturn '';\n\t}\n\tconst number = Number( value );\n\treturn Number.isFinite( number ) ? number : '';\n}\n\nfunction BetweenControls( {\n\tvalue,\n\tonChange,\n\thideLabelFromVision,\n\tstep,\n}: {\n\tvalue: NumberBetween;\n\tonChange: ( [ min, max ]: NumberBetween ) => void;\n\thideLabelFromVision?: boolean;\n\tstep: number;\n} ) {\n\tconst [ min = '', max = '' ] = value;\n\n\tconst onChangeMin = useCallback(\n\t\t( newValue: string | undefined ) =>\n\t\t\tonChange( [ toNumberOrEmpty( newValue ), max ] ),\n\t\t[ onChange, max ]\n\t);\n\n\tconst onChangeMax = useCallback(\n\t\t( newValue: string | undefined ) =>\n\t\t\tonChange( [ min, toNumberOrEmpty( newValue ) ] ),\n\t\t[ onChange, min ]\n\t);\n\n\treturn (\n\t\t<BaseControl\n\t\t\thelp={ __( 'The max. value must be greater than the min. value.' ) }\n\t\t>\n\t\t\t<Flex direction=\"row\" gap={ 4 }>\n\t\t\t\t<NumberControl\n\t\t\t\t\tlabel={ __( 'Min.' ) }\n\t\t\t\t\tvalue={ min }\n\t\t\t\t\tmax={ max ? Number( max ) - step : undefined }\n\t\t\t\t\tonChange={ onChangeMin }\n\t\t\t\t\t__next40pxDefaultSize\n\t\t\t\t\thideLabelFromVision={ hideLabelFromVision }\n\t\t\t\t\tstep={ step }\n\t\t\t\t/>\n\t\t\t\t<NumberControl\n\t\t\t\t\tlabel={ __( 'Max.' ) }\n\t\t\t\t\tvalue={ max }\n\t\t\t\t\tmin={ min ? Number( min ) + step : undefined }\n\t\t\t\t\tonChange={ onChangeMax }\n\t\t\t\t\t__next40pxDefaultSize\n\t\t\t\t\thideLabelFromVision={ hideLabelFromVision }\n\t\t\t\t\tstep={ step }\n\t\t\t\t/>\n\t\t\t</Flex>\n\t\t</BaseControl>\n\t);\n}\n\nexport default function ValidatedNumber< Item >( {\n\tdata,\n\tfield,\n\tonChange,\n\thideLabelFromVision,\n\tmarkWhenOptional,\n\toperator,\n\tvalidity,\n}: DataFormControlProps< Item > ) {\n\tconst decimals = ( field.format as FormatNumber )?.decimals ?? 0;\n\tconst step = Math.pow( 10, Math.abs( decimals ) * -1 );\n\tconst { label, description, getValue, setValue, isValid } = field;\n\tconst value = getValue( { item: data } ) ?? '';\n\tconst disabled = field.isDisabled( { item: data, field } );\n\n\tconst onChangeControl = useCallback(\n\t\t( newValue: string | undefined ) => {\n\t\t\tonChange(\n\t\t\t\tsetValue( {\n\t\t\t\t\titem: data,\n\t\t\t\t\t// Do not convert an empty string or undefined to a number,\n\t\t\t\t\t// otherwise there's a mismatch between the UI control (empty)\n\t\t\t\t\t// and the data relied by onChange (0).\n\t\t\t\t\tvalue: [ '', undefined ].includes( newValue )\n\t\t\t\t\t\t? undefined\n\t\t\t\t\t\t: Number( newValue ),\n\t\t\t\t} )\n\t\t\t);\n\t\t},\n\t\t[ data, onChange, setValue ]\n\t);\n\n\tconst onChangeBetweenControls = useCallback(\n\t\t( newValue: NumberBetween ) => {\n\t\t\tonChange(\n\t\t\t\tsetValue( {\n\t\t\t\t\titem: data,\n\t\t\t\t\tvalue: newValue,\n\t\t\t\t} )\n\t\t\t);\n\t\t},\n\t\t[ data, onChange, setValue ]\n\t);\n\n\tif ( operator === OPERATOR_BETWEEN ) {\n\t\tlet valueBetween: NumberBetween = [ '', '' ];\n\t\tif (\n\t\t\tArray.isArray( value ) &&\n\t\t\tvalue.length === 2 &&\n\t\t\tvalue.every(\n\t\t\t\t( element ) => typeof element === 'number' || element === ''\n\t\t\t)\n\t\t) {\n\t\t\tvalueBetween = value as NumberBetween;\n\t\t}\n\t\treturn (\n\t\t\t<BetweenControls\n\t\t\t\tvalue={ valueBetween }\n\t\t\t\tonChange={ onChangeBetweenControls }\n\t\t\t\thideLabelFromVision={ hideLabelFromVision }\n\t\t\t\tstep={ step }\n\t\t\t/>\n\t\t);\n\t}\n\n\treturn (\n\t\t<ValidatedNumberControl\n\t\t\trequired={ !! isValid.required }\n\t\t\tmarkWhenOptional={ markWhenOptional }\n\t\t\tcustomValidity={ getCustomValidity( isValid, validity ) }\n\t\t\tlabel={ label }\n\t\t\thelp={ description }\n\t\t\tvalue={ value }\n\t\t\tonChange={ onChangeControl }\n\t\t\t__next40pxDefaultSize\n\t\t\thideLabelFromVision={ hideLabelFromVision }\n\t\t\tstep={ step }\n\t\t\tmin={ isValid.min ? isValid.min.constraint : undefined }\n\t\t\tmax={ isValid.max ? isValid.max.constraint : undefined }\n\t\t\tdisabled={ disabled }\n\t\t/>\n\t);\n}\n"],
|
|
5
|
+
"mappings": ";AAGA;AAAA,EACC;AAAA,EACA;AAAA,EACA,+BAA+B;AAAA,EAC/B;AAAA,OACM;AACP,SAAS,mBAAmB;AAC5B,SAAS,UAAU;AAKnB,SAAS,wBAAwB;AAEjC,SAAS,cAAc;AACvB,OAAO,uBAAuB;AA2C3B,SACC,KADD;AAzCH,IAAM,EAAE,uBAAuB,IAAI,OAAQ,WAAY;AAIvD,SAAS,gBAAiB,OAAiB;AAC1C,MAAK,UAAU,MAAM,UAAU,QAAY;AAC1C,WAAO;AAAA,EACR;AACA,QAAM,SAAS,OAAQ,KAAM;AAC7B,SAAO,OAAO,SAAU,MAAO,IAAI,SAAS;AAC7C;AAEA,SAAS,gBAAiB;AAAA,EACzB;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACD,GAKI;AACH,QAAM,CAAE,MAAM,IAAI,MAAM,EAAG,IAAI;AAE/B,QAAM,cAAc;AAAA,IACnB,CAAE,aACD,SAAU,CAAE,gBAAiB,QAAS,GAAG,GAAI,CAAE;AAAA,IAChD,CAAE,UAAU,GAAI;AAAA,EACjB;AAEA,QAAM,cAAc;AAAA,IACnB,CAAE,aACD,SAAU,CAAE,KAAK,gBAAiB,QAAS,CAAE,CAAE;AAAA,IAChD,CAAE,UAAU,GAAI;AAAA,EACjB;AAEA,SACC;AAAA,IAAC;AAAA;AAAA,MACA,MAAO,GAAI,qDAAsD;AAAA,MAEjE,+BAAC,QAAK,WAAU,OAAM,KAAM,GAC3B;AAAA;AAAA,UAAC;AAAA;AAAA,YACA,OAAQ,GAAI,MAAO;AAAA,YACnB,OAAQ;AAAA,YACR,KAAM,MAAM,OAAQ,GAAI,IAAI,OAAO;AAAA,YACnC,UAAW;AAAA,YACX,uBAAqB;AAAA,YACrB;AAAA,YACA;AAAA;AAAA,QACD;AAAA,QACA;AAAA,UAAC;AAAA;AAAA,YACA,OAAQ,GAAI,MAAO;AAAA,YACnB,OAAQ;AAAA,YACR,KAAM,MAAM,OAAQ,GAAI,IAAI,OAAO;AAAA,YACnC,UAAW;AAAA,YACX,uBAAqB;AAAA,YACrB;AAAA,YACA;AAAA;AAAA,QACD;AAAA,SACD;AAAA;AAAA,EACD;AAEF;AAEe,SAAR,gBAA0C;AAAA,EAChD;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACD,GAAkC;AACjC,QAAM,WAAa,MAAM,QAA0B,YAAY;AAC/D,QAAM,OAAO,KAAK,IAAK,IAAI,KAAK,IAAK,QAAS,IAAI,EAAG;AACrD,QAAM,EAAE,OAAO,aAAa,UAAU,UAAU,QAAQ,IAAI;AAC5D,QAAM,QAAQ,SAAU,EAAE,MAAM,KAAK,CAAE,KAAK;AAC5C,QAAM,WAAW,MAAM,WAAY,EAAE,MAAM,MAAM,MAAM,CAAE;AAEzD,QAAM,kBAAkB;AAAA,IACvB,CAAE,aAAkC;AACnC;AAAA,QACC,SAAU;AAAA,UACT,MAAM;AAAA;AAAA;AAAA;AAAA,UAIN,OAAO,CAAE,IAAI,MAAU,EAAE,SAAU,QAAS,IACzC,SACA,OAAQ,QAAS;AAAA,QACrB,CAAE;AAAA,MACH;AAAA,IACD;AAAA,IACA,CAAE,MAAM,UAAU,QAAS;AAAA,EAC5B;AAEA,QAAM,0BAA0B;AAAA,IAC/B,CAAE,aAA6B;AAC9B;AAAA,QACC,SAAU;AAAA,UACT,MAAM;AAAA,UACN,OAAO;AAAA,QACR,CAAE;AAAA,MACH;AAAA,IACD;AAAA,IACA,CAAE,MAAM,UAAU,QAAS;AAAA,EAC5B;AAEA,MAAK,aAAa,kBAAmB;AACpC,QAAI,eAA8B,CAAE,IAAI,EAAG;AAC3C,QACC,MAAM,QAAS,KAAM,KACrB,MAAM,WAAW,KACjB,MAAM;AAAA,MACL,CAAE,YAAa,OAAO,YAAY,YAAY,YAAY;AAAA,IAC3D,GACC;AACD,qBAAe;AAAA,IAChB;AACA,WACC;AAAA,MAAC;AAAA;AAAA,QACA,OAAQ;AAAA,QACR,UAAW;AAAA,QACX;AAAA,QACA;AAAA;AAAA,IACD;AAAA,EAEF;AAEA,SACC;AAAA,IAAC;AAAA;AAAA,MACA,UAAW,CAAC,CAAE,QAAQ;AAAA,MACtB;AAAA,MACA,gBAAiB,kBAAmB,SAAS,QAAS;AAAA,MACtD;AAAA,MACA,MAAO;AAAA,MACP;AAAA,MACA,UAAW;AAAA,MACX,uBAAqB;AAAA,MACrB;AAAA,MACA;AAAA,MACA,KAAM,QAAQ,MAAM,QAAQ,IAAI,aAAa;AAAA,MAC7C,KAAM,QAAQ,MAAM,QAAQ,IAAI,aAAa;AAAA,MAC7C;AAAA;AAAA,EACD;AAEF;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|