@wordpress/dataviews 10.2.0 → 10.3.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 +25 -0
- package/README.md +108 -1
- package/build/components/dataform/index.js +6 -2
- package/build/components/dataform/index.js.map +3 -3
- package/build/components/dataform-context/index.js +4 -2
- package/build/components/dataform-context/index.js.map +1 -1
- package/build/components/dataviews/index.js +8 -6
- package/build/components/dataviews/index.js.map +1 -1
- package/build/components/dataviews-bulk-actions/index.js +4 -2
- package/build/components/dataviews-bulk-actions/index.js.map +1 -1
- package/build/components/dataviews-context/index.js +3 -1
- package/build/components/dataviews-context/index.js.map +1 -1
- package/build/components/dataviews-filters/add-filter.js +4 -2
- package/build/components/dataviews-filters/add-filter.js.map +1 -1
- package/build/components/dataviews-filters/filter.js +20 -5
- package/build/components/dataviews-filters/filter.js.map +3 -3
- package/build/components/dataviews-filters/filters-toggled.js +3 -1
- package/build/components/dataviews-filters/filters-toggled.js.map +1 -1
- package/build/components/dataviews-filters/filters.js +3 -1
- package/build/components/dataviews-filters/filters.js.map +1 -1
- package/build/components/dataviews-filters/index.js +2 -0
- package/build/components/dataviews-filters/index.js.map +1 -1
- package/build/components/dataviews-filters/input-widget.js +3 -1
- package/build/components/dataviews-filters/input-widget.js.map +1 -1
- package/build/components/dataviews-filters/reset-filters.js +3 -1
- package/build/components/dataviews-filters/reset-filters.js.map +1 -1
- package/build/components/dataviews-filters/search-widget.js +8 -6
- package/build/components/dataviews-filters/search-widget.js.map +2 -2
- package/build/components/dataviews-filters/toggle.js +3 -1
- package/build/components/dataviews-filters/toggle.js.map +1 -1
- package/build/components/dataviews-filters/use-filters.js +2 -0
- package/build/components/dataviews-filters/use-filters.js.map +1 -1
- package/build/components/dataviews-filters/utils.js +4 -2
- package/build/components/dataviews-filters/utils.js.map +1 -1
- package/build/components/dataviews-footer/index.js +4 -2
- package/build/components/dataviews-footer/index.js.map +1 -1
- package/build/components/dataviews-item-actions/index.js +23 -4
- package/build/components/dataviews-item-actions/index.js.map +2 -2
- package/build/components/dataviews-layout/index.js +3 -1
- package/build/components/dataviews-layout/index.js.map +1 -1
- package/build/components/dataviews-pagination/index.js +3 -1
- package/build/components/dataviews-pagination/index.js.map +1 -1
- package/build/components/dataviews-picker/footer.js +4 -2
- package/build/components/dataviews-picker/footer.js.map +1 -1
- package/build/components/dataviews-picker/index.js +8 -6
- package/build/components/dataviews-picker/index.js.map +1 -1
- package/build/components/dataviews-search/index.js +4 -2
- package/build/components/dataviews-search/index.js.map +1 -1
- package/build/components/dataviews-selection-checkbox/index.js +3 -1
- package/build/components/dataviews-selection-checkbox/index.js.map +1 -1
- package/build/components/dataviews-view-config/index.js +17 -400
- package/build/components/dataviews-view-config/index.js.map +3 -3
- package/build/components/dataviews-view-config/infinite-scroll-toggle.js +3 -1
- package/build/components/dataviews-view-config/infinite-scroll-toggle.js.map +1 -1
- package/build/components/dataviews-view-config/properties-section.js +177 -0
- package/build/components/dataviews-view-config/properties-section.js.map +7 -0
- package/build/constants.js +39 -34
- package/build/constants.js.map +2 -2
- package/build/dataform-controls/array.js +4 -2
- package/build/dataform-controls/array.js.map +1 -1
- package/build/dataform-controls/checkbox.js +4 -2
- package/build/dataform-controls/checkbox.js.map +1 -1
- package/build/dataform-controls/color.js +5 -3
- package/build/dataform-controls/color.js.map +1 -1
- package/build/dataform-controls/date.js +8 -6
- package/build/dataform-controls/date.js.map +1 -1
- package/build/dataform-controls/datetime.js +11 -15
- package/build/dataform-controls/datetime.js.map +3 -3
- package/build/dataform-controls/email.js +3 -1
- package/build/dataform-controls/email.js.map +1 -1
- package/build/dataform-controls/index.js +4 -2
- package/build/dataform-controls/index.js.map +1 -1
- package/build/dataform-controls/integer.js +3 -1
- package/build/dataform-controls/integer.js.map +1 -1
- package/build/dataform-controls/number.js +3 -1
- package/build/dataform-controls/number.js.map +1 -1
- package/build/dataform-controls/password.js +3 -1
- package/build/dataform-controls/password.js.map +1 -1
- package/build/dataform-controls/radio.js +4 -2
- package/build/dataform-controls/radio.js.map +1 -1
- package/build/dataform-controls/select.js +4 -2
- package/build/dataform-controls/select.js.map +1 -1
- package/build/dataform-controls/telephone.js +3 -1
- package/build/dataform-controls/telephone.js.map +1 -1
- package/build/dataform-controls/text.js +3 -1
- package/build/dataform-controls/text.js.map +1 -1
- package/build/dataform-controls/textarea.js +4 -2
- package/build/dataform-controls/textarea.js.map +1 -1
- package/build/dataform-controls/toggle-group.js +4 -2
- package/build/dataform-controls/toggle-group.js.map +1 -1
- package/build/dataform-controls/toggle.js +4 -2
- package/build/dataform-controls/toggle.js.map +1 -1
- package/build/dataform-controls/url.js +3 -1
- package/build/dataform-controls/url.js.map +1 -1
- package/build/dataform-controls/utils/get-custom-validity.js +2 -0
- package/build/dataform-controls/utils/get-custom-validity.js.map +1 -1
- package/build/dataform-controls/utils/relative-date-control.js +4 -2
- package/build/dataform-controls/utils/relative-date-control.js.map +1 -1
- package/build/dataform-controls/utils/validated-input.js +4 -2
- package/build/dataform-controls/utils/validated-input.js.map +1 -1
- package/build/dataform-controls/utils/validated-number.js +4 -2
- package/build/dataform-controls/utils/validated-number.js.map +1 -1
- package/build/dataform-layouts/card/index.js +65 -34
- package/build/dataform-layouts/card/index.js.map +3 -3
- package/build/dataform-layouts/data-form-layout.js +8 -14
- package/build/dataform-layouts/data-form-layout.js.map +3 -3
- package/build/dataform-layouts/details/index.js +78 -0
- package/build/dataform-layouts/details/index.js.map +7 -0
- package/build/dataform-layouts/get-summary-fields.js +3 -1
- package/build/dataform-layouts/get-summary-fields.js.map +1 -1
- package/build/dataform-layouts/index.js +9 -2
- package/build/dataform-layouts/index.js.map +3 -3
- package/build/dataform-layouts/{normalize-form-fields.js → normalize-form.js} +44 -22
- package/build/dataform-layouts/normalize-form.js.map +7 -0
- package/build/dataform-layouts/panel/dropdown.js +9 -8
- package/build/dataform-layouts/panel/dropdown.js.map +2 -2
- package/build/dataform-layouts/panel/index.js +10 -14
- package/build/dataform-layouts/panel/index.js.map +2 -2
- package/build/dataform-layouts/panel/modal.js +9 -8
- package/build/dataform-layouts/panel/modal.js.map +2 -2
- package/build/dataform-layouts/panel/summary-button.js +3 -1
- package/build/dataform-layouts/panel/summary-button.js.map +1 -1
- package/build/dataform-layouts/regular/index.js +8 -10
- package/build/dataform-layouts/regular/index.js.map +2 -2
- package/build/dataform-layouts/row/index.js +10 -33
- package/build/dataform-layouts/row/index.js.map +3 -3
- package/build/dataviews-layouts/grid/index.js +4 -2
- package/build/dataviews-layouts/grid/index.js.map +1 -1
- package/build/dataviews-layouts/grid/preview-size-picker.js +4 -2
- package/build/dataviews-layouts/grid/preview-size-picker.js.map +1 -1
- package/build/dataviews-layouts/index.js +12 -1
- package/build/dataviews-layouts/index.js.map +3 -3
- package/build/dataviews-layouts/list/index.js +6 -6
- package/build/dataviews-layouts/list/index.js.map +2 -2
- package/build/dataviews-layouts/picker-grid/index.js +4 -2
- package/build/dataviews-layouts/picker-grid/index.js.map +1 -1
- package/build/dataviews-layouts/picker-table/index.js +422 -0
- package/build/dataviews-layouts/picker-table/index.js.map +7 -0
- package/build/dataviews-layouts/table/column-header-menu.js +6 -4
- package/build/dataviews-layouts/table/column-header-menu.js.map +2 -2
- package/build/dataviews-layouts/table/column-primary.js +4 -7
- package/build/dataviews-layouts/table/column-primary.js.map +2 -2
- package/build/dataviews-layouts/table/density-picker.js +3 -1
- package/build/dataviews-layouts/table/density-picker.js.map +1 -1
- package/build/dataviews-layouts/table/index.js +48 -2
- package/build/dataviews-layouts/table/index.js.map +2 -2
- package/build/dataviews-layouts/table/use-is-horizontal-scroll-end.js +3 -1
- package/build/dataviews-layouts/table/use-is-horizontal-scroll-end.js.map +1 -1
- package/build/dataviews-layouts/utils/get-data-by-group.js +2 -0
- package/build/dataviews-layouts/utils/get-data-by-group.js.map +1 -1
- package/build/dataviews-layouts/utils/grid-items.js +4 -2
- package/build/dataviews-layouts/utils/grid-items.js.map +1 -1
- package/build/dataviews-layouts/utils/item-click-wrapper.js +3 -1
- package/build/dataviews-layouts/utils/item-click-wrapper.js.map +1 -1
- package/build/dataviews-layouts/utils/preview-size-picker.js +4 -2
- package/build/dataviews-layouts/utils/preview-size-picker.js.map +1 -1
- package/build/field-types/array.js +3 -1
- package/build/field-types/array.js.map +1 -1
- package/build/field-types/boolean.js +3 -1
- package/build/field-types/boolean.js.map +1 -1
- package/build/field-types/color.js +3 -1
- package/build/field-types/color.js.map +1 -1
- package/build/field-types/date.js +4 -2
- package/build/field-types/date.js.map +1 -1
- package/build/field-types/datetime.js +17 -2
- package/build/field-types/datetime.js.map +3 -3
- package/build/field-types/email.js +4 -2
- package/build/field-types/email.js.map +1 -1
- package/build/field-types/index.js +3 -1
- package/build/field-types/index.js.map +1 -1
- package/build/field-types/integer.js +3 -1
- package/build/field-types/integer.js.map +1 -1
- package/build/field-types/media.js +2 -0
- package/build/field-types/media.js.map +1 -1
- package/build/field-types/number.js +3 -1
- package/build/field-types/number.js.map +1 -1
- package/build/field-types/password.js +3 -1
- package/build/field-types/password.js.map +1 -1
- package/build/field-types/telephone.js +3 -1
- package/build/field-types/telephone.js.map +1 -1
- package/build/field-types/text.js +3 -1
- package/build/field-types/text.js.map +1 -1
- package/build/field-types/url.js +3 -1
- package/build/field-types/url.js.map +1 -1
- package/build/{dataform-layouts/is-combined-field.js → field-types/utils/parse-date-time.js} +15 -11
- package/build/field-types/utils/parse-date-time.js.map +7 -0
- package/build/field-types/utils/render-from-elements.js +2 -0
- package/build/field-types/utils/render-from-elements.js.map +1 -1
- package/build/hooks/index.js +2 -0
- package/build/hooks/index.js.map +1 -1
- package/build/hooks/use-elements.js +3 -1
- package/build/hooks/use-elements.js.map +1 -1
- package/build/hooks/use-form-validity.js +425 -321
- package/build/hooks/use-form-validity.js.map +3 -3
- package/build/index.js +2 -0
- package/build/index.js.map +1 -1
- package/build/lock-unlock.js +3 -1
- package/build/lock-unlock.js.map +1 -1
- package/build/types/dataform.js +2 -0
- package/build/types/dataform.js.map +2 -2
- package/build/types/dataviews.js +2 -0
- package/build/types/dataviews.js.map +2 -2
- package/build/types/field-api.js +2 -0
- package/build/types/field-api.js.map +1 -1
- package/build/types/index.js +2 -0
- package/build/types/index.js.map +1 -1
- package/build/types/private.js +2 -0
- package/build/types/private.js.map +1 -1
- package/build/utils/filter-sort-and-paginate.js +3 -1
- package/build/utils/filter-sort-and-paginate.js.map +1 -1
- package/build/utils/has-elements.js +2 -0
- package/build/utils/has-elements.js.map +1 -1
- package/build/utils/normalize-fields.js +4 -2
- package/build/utils/normalize-fields.js.map +1 -1
- package/build-module/components/dataform/index.js +5 -2
- package/build-module/components/dataform/index.js.map +2 -2
- package/build-module/components/dataform-context/index.js +3 -2
- package/build-module/components/dataform-context/index.js.map +1 -1
- package/build-module/components/dataviews/index.js +7 -6
- package/build-module/components/dataviews/index.js.map +1 -1
- package/build-module/components/dataviews-bulk-actions/index.js +3 -2
- package/build-module/components/dataviews-bulk-actions/index.js.map +1 -1
- package/build-module/components/dataviews-context/index.js +2 -1
- package/build-module/components/dataviews-context/index.js.map +1 -1
- package/build-module/components/dataviews-filters/add-filter.js +3 -2
- package/build-module/components/dataviews-filters/add-filter.js.map +1 -1
- package/build-module/components/dataviews-filters/filter.js +19 -5
- package/build-module/components/dataviews-filters/filter.js.map +2 -2
- package/build-module/components/dataviews-filters/filters-toggled.js +2 -1
- package/build-module/components/dataviews-filters/filters-toggled.js.map +1 -1
- package/build-module/components/dataviews-filters/filters.js +2 -1
- package/build-module/components/dataviews-filters/filters.js.map +1 -1
- package/build-module/components/dataviews-filters/index.js +1 -0
- package/build-module/components/dataviews-filters/index.js.map +1 -1
- package/build-module/components/dataviews-filters/input-widget.js +2 -1
- package/build-module/components/dataviews-filters/input-widget.js.map +1 -1
- package/build-module/components/dataviews-filters/reset-filters.js +2 -1
- package/build-module/components/dataviews-filters/reset-filters.js.map +1 -1
- package/build-module/components/dataviews-filters/search-widget.js +7 -6
- package/build-module/components/dataviews-filters/search-widget.js.map +2 -2
- package/build-module/components/dataviews-filters/toggle.js +2 -1
- package/build-module/components/dataviews-filters/toggle.js.map +1 -1
- package/build-module/components/dataviews-filters/use-filters.js +1 -0
- package/build-module/components/dataviews-filters/use-filters.js.map +1 -1
- package/build-module/components/dataviews-filters/utils.js +3 -2
- package/build-module/components/dataviews-filters/utils.js.map +1 -1
- package/build-module/components/dataviews-footer/index.js +3 -2
- package/build-module/components/dataviews-footer/index.js.map +1 -1
- package/build-module/components/dataviews-item-actions/index.js +22 -4
- package/build-module/components/dataviews-item-actions/index.js.map +2 -2
- package/build-module/components/dataviews-layout/index.js +2 -1
- package/build-module/components/dataviews-layout/index.js.map +1 -1
- package/build-module/components/dataviews-pagination/index.js +2 -1
- package/build-module/components/dataviews-pagination/index.js.map +1 -1
- package/build-module/components/dataviews-picker/footer.js +3 -2
- package/build-module/components/dataviews-picker/footer.js.map +1 -1
- package/build-module/components/dataviews-picker/index.js +7 -6
- package/build-module/components/dataviews-picker/index.js.map +1 -1
- package/build-module/components/dataviews-search/index.js +3 -2
- package/build-module/components/dataviews-search/index.js.map +1 -1
- package/build-module/components/dataviews-selection-checkbox/index.js +2 -1
- package/build-module/components/dataviews-selection-checkbox/index.js.map +1 -1
- package/build-module/components/dataviews-view-config/index.js +20 -416
- package/build-module/components/dataviews-view-config/index.js.map +2 -2
- package/build-module/components/dataviews-view-config/infinite-scroll-toggle.js +2 -1
- package/build-module/components/dataviews-view-config/infinite-scroll-toggle.js.map +1 -1
- package/build-module/components/dataviews-view-config/properties-section.js +149 -0
- package/build-module/components/dataviews-view-config/properties-section.js.map +7 -0
- package/build-module/constants.js +37 -34
- package/build-module/constants.js.map +2 -2
- package/build-module/dataform-controls/array.js +3 -2
- package/build-module/dataform-controls/array.js.map +1 -1
- package/build-module/dataform-controls/checkbox.js +3 -2
- package/build-module/dataform-controls/checkbox.js.map +1 -1
- package/build-module/dataform-controls/color.js +4 -3
- package/build-module/dataform-controls/color.js.map +1 -1
- package/build-module/dataform-controls/date.js +7 -6
- package/build-module/dataform-controls/date.js.map +1 -1
- package/build-module/dataform-controls/datetime.js +7 -12
- package/build-module/dataform-controls/datetime.js.map +2 -2
- package/build-module/dataform-controls/email.js +2 -1
- package/build-module/dataform-controls/email.js.map +1 -1
- package/build-module/dataform-controls/index.js +3 -2
- package/build-module/dataform-controls/index.js.map +1 -1
- package/build-module/dataform-controls/integer.js +2 -1
- package/build-module/dataform-controls/integer.js.map +1 -1
- package/build-module/dataform-controls/number.js +2 -1
- package/build-module/dataform-controls/number.js.map +1 -1
- package/build-module/dataform-controls/password.js +2 -1
- package/build-module/dataform-controls/password.js.map +1 -1
- package/build-module/dataform-controls/radio.js +3 -2
- package/build-module/dataform-controls/radio.js.map +1 -1
- package/build-module/dataform-controls/select.js +3 -2
- package/build-module/dataform-controls/select.js.map +1 -1
- package/build-module/dataform-controls/telephone.js +2 -1
- package/build-module/dataform-controls/telephone.js.map +1 -1
- package/build-module/dataform-controls/text.js +2 -1
- package/build-module/dataform-controls/text.js.map +1 -1
- package/build-module/dataform-controls/textarea.js +3 -2
- package/build-module/dataform-controls/textarea.js.map +1 -1
- package/build-module/dataform-controls/toggle-group.js +3 -2
- package/build-module/dataform-controls/toggle-group.js.map +1 -1
- package/build-module/dataform-controls/toggle.js +3 -2
- package/build-module/dataform-controls/toggle.js.map +1 -1
- package/build-module/dataform-controls/url.js +2 -1
- package/build-module/dataform-controls/url.js.map +1 -1
- package/build-module/dataform-controls/utils/get-custom-validity.js +1 -0
- package/build-module/dataform-controls/utils/get-custom-validity.js.map +1 -1
- package/build-module/dataform-controls/utils/relative-date-control.js +3 -2
- package/build-module/dataform-controls/utils/relative-date-control.js.map +1 -1
- package/build-module/dataform-controls/utils/validated-input.js +3 -2
- package/build-module/dataform-controls/utils/validated-input.js.map +1 -1
- package/build-module/dataform-controls/utils/validated-number.js +3 -2
- package/build-module/dataform-controls/utils/validated-number.js.map +1 -1
- package/build-module/dataform-layouts/card/index.js +63 -33
- package/build-module/dataform-layouts/card/index.js.map +3 -3
- package/build-module/dataform-layouts/data-form-layout.js +8 -15
- package/build-module/dataform-layouts/data-form-layout.js.map +2 -2
- package/build-module/dataform-layouts/details/index.js +47 -0
- package/build-module/dataform-layouts/details/index.js.map +7 -0
- package/build-module/dataform-layouts/get-summary-fields.js +2 -1
- package/build-module/dataform-layouts/get-summary-fields.js.map +1 -1
- package/build-module/dataform-layouts/index.js +8 -2
- package/build-module/dataform-layouts/index.js.map +2 -2
- package/build-module/dataform-layouts/{normalize-form-fields.js → normalize-form.js} +39 -17
- package/build-module/dataform-layouts/normalize-form.js.map +7 -0
- package/build-module/dataform-layouts/panel/dropdown.js +7 -7
- package/build-module/dataform-layouts/panel/dropdown.js.map +2 -2
- package/build-module/dataform-layouts/panel/index.js +9 -14
- package/build-module/dataform-layouts/panel/index.js.map +2 -2
- package/build-module/dataform-layouts/panel/modal.js +7 -7
- package/build-module/dataform-layouts/panel/modal.js.map +2 -2
- package/build-module/dataform-layouts/panel/summary-button.js +2 -1
- package/build-module/dataform-layouts/panel/summary-button.js.map +1 -1
- package/build-module/dataform-layouts/regular/index.js +6 -9
- package/build-module/dataform-layouts/regular/index.js.map +2 -2
- package/build-module/dataform-layouts/row/index.js +9 -23
- package/build-module/dataform-layouts/row/index.js.map +2 -2
- package/build-module/dataviews-layouts/grid/index.js +3 -2
- package/build-module/dataviews-layouts/grid/index.js.map +1 -1
- package/build-module/dataviews-layouts/grid/preview-size-picker.js +3 -2
- package/build-module/dataviews-layouts/grid/preview-size-picker.js.map +1 -1
- package/build-module/dataviews-layouts/index.js +13 -2
- package/build-module/dataviews-layouts/index.js.map +2 -2
- package/build-module/dataviews-layouts/list/index.js +5 -6
- package/build-module/dataviews-layouts/list/index.js.map +2 -2
- package/build-module/dataviews-layouts/picker-grid/index.js +3 -2
- package/build-module/dataviews-layouts/picker-grid/index.js.map +1 -1
- package/build-module/dataviews-layouts/picker-table/index.js +397 -0
- package/build-module/dataviews-layouts/picker-table/index.js.map +7 -0
- package/build-module/dataviews-layouts/table/column-header-menu.js +5 -4
- package/build-module/dataviews-layouts/table/column-header-menu.js.map +2 -2
- package/build-module/dataviews-layouts/table/column-primary.js +3 -7
- package/build-module/dataviews-layouts/table/column-primary.js.map +2 -2
- package/build-module/dataviews-layouts/table/density-picker.js +2 -1
- package/build-module/dataviews-layouts/table/density-picker.js.map +1 -1
- package/build-module/dataviews-layouts/table/index.js +48 -3
- package/build-module/dataviews-layouts/table/index.js.map +2 -2
- package/build-module/dataviews-layouts/table/use-is-horizontal-scroll-end.js +2 -1
- package/build-module/dataviews-layouts/table/use-is-horizontal-scroll-end.js.map +1 -1
- package/build-module/dataviews-layouts/utils/get-data-by-group.js +1 -0
- package/build-module/dataviews-layouts/utils/get-data-by-group.js.map +1 -1
- package/build-module/dataviews-layouts/utils/grid-items.js +3 -2
- package/build-module/dataviews-layouts/utils/grid-items.js.map +1 -1
- package/build-module/dataviews-layouts/utils/item-click-wrapper.js +2 -1
- package/build-module/dataviews-layouts/utils/item-click-wrapper.js.map +1 -1
- package/build-module/dataviews-layouts/utils/preview-size-picker.js +3 -2
- package/build-module/dataviews-layouts/utils/preview-size-picker.js.map +1 -1
- package/build-module/field-types/array.js +2 -1
- package/build-module/field-types/array.js.map +1 -1
- package/build-module/field-types/boolean.js +2 -1
- package/build-module/field-types/boolean.js.map +1 -1
- package/build-module/field-types/color.js +2 -1
- package/build-module/field-types/color.js.map +1 -1
- package/build-module/field-types/date.js +3 -2
- package/build-module/field-types/date.js.map +1 -1
- package/build-module/field-types/datetime.js +16 -2
- package/build-module/field-types/datetime.js.map +2 -2
- package/build-module/field-types/email.js +3 -2
- package/build-module/field-types/email.js.map +1 -1
- package/build-module/field-types/index.js +2 -1
- package/build-module/field-types/index.js.map +1 -1
- package/build-module/field-types/integer.js +2 -1
- package/build-module/field-types/integer.js.map +1 -1
- package/build-module/field-types/media.js +1 -0
- package/build-module/field-types/media.js.map +1 -1
- package/build-module/field-types/number.js +2 -1
- package/build-module/field-types/number.js.map +1 -1
- package/build-module/field-types/password.js +2 -1
- package/build-module/field-types/password.js.map +1 -1
- package/build-module/field-types/telephone.js +2 -1
- package/build-module/field-types/telephone.js.map +1 -1
- package/build-module/field-types/text.js +2 -1
- package/build-module/field-types/text.js.map +1 -1
- package/build-module/field-types/url.js +2 -1
- package/build-module/field-types/url.js.map +1 -1
- package/build-module/field-types/utils/parse-date-time.js +14 -0
- package/build-module/field-types/utils/parse-date-time.js.map +7 -0
- package/build-module/field-types/utils/render-from-elements.js +1 -0
- package/build-module/field-types/utils/render-from-elements.js.map +1 -1
- package/build-module/hooks/index.js +1 -0
- package/build-module/hooks/index.js.map +1 -1
- package/build-module/hooks/use-elements.js +2 -1
- package/build-module/hooks/use-elements.js.map +1 -1
- package/build-module/hooks/use-form-validity.js +424 -321
- package/build-module/hooks/use-form-validity.js.map +3 -3
- package/build-module/index.js +1 -0
- package/build-module/index.js.map +1 -1
- package/build-module/lock-unlock.js +2 -1
- package/build-module/lock-unlock.js.map +1 -1
- package/build-module/utils/filter-sort-and-paginate.js +2 -1
- package/build-module/utils/filter-sort-and-paginate.js.map +1 -1
- package/build-module/utils/has-elements.js +1 -0
- package/build-module/utils/has-elements.js.map +1 -1
- package/build-module/utils/normalize-fields.js +3 -2
- package/build-module/utils/normalize-fields.js.map +1 -1
- package/build-style/style-rtl.css +35 -40
- package/build-style/style.css +35 -40
- package/build-types/components/dataform/index.d.ts.map +1 -1
- package/build-types/components/dataviews-filters/filter.d.ts.map +1 -1
- package/build-types/components/dataviews-filters/utils.d.ts.map +1 -1
- package/build-types/components/dataviews-item-actions/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/properties-section.d.ts +4 -0
- package/build-types/components/dataviews-view-config/properties-section.d.ts.map +1 -0
- package/build-types/constants.d.ts +1 -0
- package/build-types/constants.d.ts.map +1 -1
- package/build-types/dataform-controls/datetime.d.ts.map +1 -1
- package/build-types/dataform-layouts/card/index.d.ts +1 -1
- package/build-types/dataform-layouts/card/index.d.ts.map +1 -1
- package/build-types/dataform-layouts/data-form-layout.d.ts +4 -4
- package/build-types/dataform-layouts/data-form-layout.d.ts.map +1 -1
- package/build-types/dataform-layouts/details/index.d.ts +6 -0
- package/build-types/dataform-layouts/details/index.d.ts.map +1 -0
- package/build-types/dataform-layouts/get-summary-fields.d.ts.map +1 -1
- package/build-types/dataform-layouts/index.d.ts +7 -2
- package/build-types/dataform-layouts/index.d.ts.map +1 -1
- package/build-types/dataform-layouts/normalize-form.d.ts +8 -0
- package/build-types/dataform-layouts/normalize-form.d.ts.map +1 -0
- package/build-types/dataform-layouts/panel/dropdown.d.ts +2 -2
- package/build-types/dataform-layouts/panel/dropdown.d.ts.map +1 -1
- package/build-types/dataform-layouts/panel/index.d.ts.map +1 -1
- package/build-types/dataform-layouts/panel/modal.d.ts +2 -2
- package/build-types/dataform-layouts/panel/modal.d.ts.map +1 -1
- package/build-types/dataform-layouts/regular/index.d.ts.map +1 -1
- package/build-types/dataform-layouts/row/index.d.ts.map +1 -1
- package/build-types/dataviews-layouts/index.d.ts +8 -0
- package/build-types/dataviews-layouts/index.d.ts.map +1 -1
- package/build-types/dataviews-layouts/list/index.d.ts.map +1 -1
- package/build-types/dataviews-layouts/picker-table/index.d.ts +4 -0
- package/build-types/dataviews-layouts/picker-table/index.d.ts.map +1 -0
- package/build-types/dataviews-layouts/table/column-header-menu.d.ts +3 -3
- package/build-types/dataviews-layouts/table/column-header-menu.d.ts.map +1 -1
- package/build-types/dataviews-layouts/table/column-primary.d.ts.map +1 -1
- package/build-types/dataviews-layouts/table/index.d.ts.map +1 -1
- package/build-types/field-types/datetime.d.ts +1 -1
- package/build-types/field-types/datetime.d.ts.map +1 -1
- package/build-types/field-types/utils/parse-date-time.d.ts +2 -0
- package/build-types/field-types/utils/parse-date-time.d.ts.map +1 -0
- package/build-types/hooks/use-form-validity.d.ts.map +1 -1
- package/build-types/stories/dataform.story.d.ts +4 -10
- package/build-types/stories/dataform.story.d.ts.map +1 -1
- package/build-types/stories/dataviews-picker.story.d.ts +33 -0
- package/build-types/stories/dataviews-picker.story.d.ts.map +1 -1
- package/build-types/stories/dataviews.fixtures.d.ts.map +1 -1
- package/build-types/stories/dataviews.story.d.ts +7 -1
- package/build-types/stories/dataviews.story.d.ts.map +1 -1
- package/build-types/test/normalize-form.d.ts +2 -0
- package/build-types/test/normalize-form.d.ts.map +1 -0
- package/build-types/types/dataform.d.ts +23 -9
- package/build-types/types/dataform.d.ts.map +1 -1
- package/build-types/types/dataviews.d.ts +23 -2
- package/build-types/types/dataviews.d.ts.map +1 -1
- package/build-wp/index.js +2101 -1673
- package/package.json +15 -15
- package/src/components/dataform/index.tsx +3 -1
- package/src/components/dataviews-filters/filter.tsx +16 -1
- package/src/components/dataviews-item-actions/index.tsx +37 -14
- package/src/components/dataviews-view-config/index.tsx +8 -504
- package/src/components/dataviews-view-config/properties-section.tsx +201 -0
- package/src/components/dataviews-view-config/style.scss +2 -39
- package/src/constants.ts +1 -0
- package/src/dataform-controls/datetime.tsx +3 -10
- package/src/dataform-layouts/card/index.tsx +45 -21
- package/src/dataform-layouts/data-form-layout.tsx +12 -23
- package/src/dataform-layouts/details/index.tsx +71 -0
- package/src/dataform-layouts/details/style.scss +5 -0
- package/src/dataform-layouts/index.tsx +10 -3
- package/src/dataform-layouts/{normalize-form-fields.ts → normalize-form.ts} +45 -23
- package/src/dataform-layouts/panel/dropdown.tsx +10 -13
- package/src/dataform-layouts/panel/index.tsx +9 -24
- package/src/dataform-layouts/panel/modal.tsx +15 -15
- package/src/dataform-layouts/regular/index.tsx +7 -12
- package/src/dataform-layouts/row/index.tsx +13 -26
- package/src/dataviews-layouts/index.ts +10 -0
- package/src/dataviews-layouts/list/index.tsx +2 -5
- package/src/dataviews-layouts/picker-table/index.tsx +487 -0
- package/src/dataviews-layouts/picker-table/style.scss +45 -0
- package/src/dataviews-layouts/table/column-header-menu.tsx +3 -2
- package/src/dataviews-layouts/table/column-primary.tsx +4 -7
- package/src/dataviews-layouts/table/index.tsx +54 -2
- package/src/dataviews-layouts/table/style.scss +6 -1
- package/src/field-types/datetime.tsx +16 -5
- package/src/field-types/utils/parse-date-time.ts +17 -0
- package/src/hooks/use-form-validity.ts +572 -422
- package/src/stories/dataform.story.tsx +586 -454
- package/src/stories/dataviews-picker.story.tsx +166 -38
- package/src/stories/dataviews.fixtures.tsx +4 -1
- package/src/stories/dataviews.story.tsx +10 -2
- package/src/stories/field-types.story.tsx +7 -7
- package/src/style.scss +2 -0
- package/src/test/normalize-form.ts +568 -0
- package/src/test/use-form-validity.ts +318 -33
- package/src/types/dataform.ts +30 -11
- package/src/types/dataviews.ts +36 -2
- package/tsconfig.tsbuildinfo +1 -1
- package/build/dataform-layouts/is-combined-field.js.map +0 -7
- package/build/dataform-layouts/normalize-form-fields.js.map +0 -7
- package/build-module/dataform-layouts/is-combined-field.js +0 -7
- package/build-module/dataform-layouts/is-combined-field.js.map +0 -7
- package/build-module/dataform-layouts/normalize-form-fields.js.map +0 -7
- package/build-types/dataform-layouts/is-combined-field.d.ts +0 -6
- package/build-types/dataform-layouts/is-combined-field.d.ts.map +0 -1
- package/build-types/dataform-layouts/normalize-form-fields.d.ts +0 -19
- package/build-types/dataform-layouts/normalize-form-fields.d.ts.map +0 -1
- package/build-types/test/normalize-form-fields.d.ts +0 -2
- package/build-types/test/normalize-form-fields.d.ts.map +0 -1
- package/src/dataform-layouts/is-combined-field.ts +0 -10
- package/src/test/normalize-form-fields.ts +0 -324
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../src/dataform-layouts/panel/dropdown.tsx"],
|
|
4
|
-
"sourcesContent": ["/**\n * WordPress dependencies\n */\nimport {\n\t__experimentalVStack as VStack,\n\t__experimentalHStack as HStack,\n\t__experimentalHeading as Heading,\n\t__experimentalSpacer as Spacer,\n\tDropdown,\n\tButton,\n} from '@wordpress/components';\nimport { __ } from '@wordpress/i18n';\nimport { useMemo } from '@wordpress/element';\nimport { closeSmall } from '@wordpress/icons';\n\n/**\n * Internal dependencies\n */\nimport type {\n\tFieldValidity,\n\
|
|
5
|
-
"mappings": "
|
|
4
|
+
"sourcesContent": ["/**\n * WordPress dependencies\n */\nimport {\n\t__experimentalVStack as VStack,\n\t__experimentalHStack as HStack,\n\t__experimentalHeading as Heading,\n\t__experimentalSpacer as Spacer,\n\tDropdown,\n\tButton,\n} from '@wordpress/components';\nimport { __ } from '@wordpress/i18n';\nimport { useMemo } from '@wordpress/element';\nimport { closeSmall } from '@wordpress/icons';\n\n/**\n * Internal dependencies\n */\nimport type {\n\tFieldValidity,\n\tNormalizedForm,\n\tNormalizedFormField,\n\tFormValidity,\n\tNormalizedField,\n} from '../../types';\nimport { DataFormLayout } from '../data-form-layout';\nimport { DEFAULT_LAYOUT } from '../normalize-form';\nimport SummaryButton from './summary-button';\n\nfunction DropdownHeader( {\n\ttitle,\n\tonClose,\n}: {\n\ttitle?: string;\n\tonClose: () => void;\n} ) {\n\treturn (\n\t\t<VStack\n\t\t\tclassName=\"dataforms-layouts-panel__dropdown-header\"\n\t\t\tspacing={ 4 }\n\t\t>\n\t\t\t<HStack alignment=\"center\">\n\t\t\t\t{ title && (\n\t\t\t\t\t<Heading level={ 2 } size={ 13 }>\n\t\t\t\t\t\t{ title }\n\t\t\t\t\t</Heading>\n\t\t\t\t) }\n\t\t\t\t<Spacer />\n\t\t\t\t{ onClose && (\n\t\t\t\t\t<Button\n\t\t\t\t\t\tlabel={ __( 'Close' ) }\n\t\t\t\t\t\ticon={ closeSmall }\n\t\t\t\t\t\tonClick={ onClose }\n\t\t\t\t\t\tsize=\"small\"\n\t\t\t\t\t/>\n\t\t\t\t) }\n\t\t\t</HStack>\n\t\t</VStack>\n\t);\n}\n\nfunction PanelDropdown< Item >( {\n\tdata,\n\tfield,\n\tonChange,\n\tvalidity,\n\tlabelPosition = 'side',\n\tsummaryFields,\n\tfieldDefinition,\n\tpopoverAnchor,\n}: {\n\tdata: Item;\n\tfield: NormalizedFormField;\n\tonChange: ( value: any ) => void;\n\tvalidity?: FieldValidity;\n\tlabelPosition: 'side' | 'top' | 'none';\n\tsummaryFields: NormalizedField< Item >[];\n\tfieldDefinition: NormalizedField< Item >;\n\tpopoverAnchor: HTMLElement | null;\n} ) {\n\tconst fieldLabel = !! field.children ? field.label : fieldDefinition?.label;\n\n\tconst form: NormalizedForm = useMemo(\n\t\t() => ( {\n\t\t\tlayout: DEFAULT_LAYOUT,\n\t\t\tfields: !! field.children\n\t\t\t\t? field.children\n\t\t\t\t: // If not explicit children return the field id itself.\n\t\t\t\t [ { id: field.id, layout: DEFAULT_LAYOUT } ],\n\t\t} ),\n\t\t[ field ]\n\t);\n\tconst formValidity = useMemo( (): FormValidity => {\n\t\tif ( validity === undefined ) {\n\t\t\treturn undefined;\n\t\t}\n\n\t\tif ( !! field.children ) {\n\t\t\treturn validity?.children;\n\t\t}\n\n\t\treturn { [ field.id ]: validity };\n\t}, [ validity, field ] );\n\n\t// Memoize popoverProps to avoid returning a new object every time.\n\tconst popoverProps = useMemo(\n\t\t() => ( {\n\t\t\t// Anchor the popover to the middle of the entire row so that it doesn't\n\t\t\t// move around when the label changes.\n\t\t\tanchor: popoverAnchor,\n\t\t\tplacement: 'left-start',\n\t\t\toffset: 36,\n\t\t\tshift: true,\n\t\t} ),\n\t\t[ popoverAnchor ]\n\t);\n\n\treturn (\n\t\t<Dropdown\n\t\t\tcontentClassName=\"dataforms-layouts-panel__field-dropdown\"\n\t\t\tpopoverProps={ popoverProps }\n\t\t\tfocusOnMount\n\t\t\ttoggleProps={ {\n\t\t\t\tsize: 'compact',\n\t\t\t\tvariant: 'tertiary',\n\t\t\t\ttooltipPosition: 'middle left',\n\t\t\t} }\n\t\t\trenderToggle={ ( { isOpen, onToggle } ) => (\n\t\t\t\t<SummaryButton\n\t\t\t\t\tsummaryFields={ summaryFields }\n\t\t\t\t\tdata={ data }\n\t\t\t\t\tlabelPosition={ labelPosition }\n\t\t\t\t\tfieldLabel={ fieldLabel }\n\t\t\t\t\tdisabled={ fieldDefinition.readOnly === true }\n\t\t\t\t\tonClick={ onToggle }\n\t\t\t\t\taria-expanded={ isOpen }\n\t\t\t\t/>\n\t\t\t) }\n\t\t\trenderContent={ ( { onClose } ) => (\n\t\t\t\t<>\n\t\t\t\t\t<DropdownHeader title={ fieldLabel } onClose={ onClose } />\n\t\t\t\t\t<DataFormLayout\n\t\t\t\t\t\tdata={ data }\n\t\t\t\t\t\tform={ form }\n\t\t\t\t\t\tonChange={ onChange }\n\t\t\t\t\t\tvalidity={ formValidity }\n\t\t\t\t\t>\n\t\t\t\t\t\t{ ( FieldLayout, childField, childFieldValidity ) => (\n\t\t\t\t\t\t\t<FieldLayout\n\t\t\t\t\t\t\t\tkey={ childField.id }\n\t\t\t\t\t\t\t\tdata={ data }\n\t\t\t\t\t\t\t\tfield={ childField }\n\t\t\t\t\t\t\t\tonChange={ onChange }\n\t\t\t\t\t\t\t\thideLabelFromVision={\n\t\t\t\t\t\t\t\t\t( form?.fields ?? [] ).length < 2\n\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\tvalidity={ childFieldValidity }\n\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t) }\n\t\t\t\t\t</DataFormLayout>\n\t\t\t\t</>\n\t\t\t) }\n\t\t/>\n\t);\n}\n\nexport default PanelDropdown;\n"],
|
|
5
|
+
"mappings": ";AAGA;AAAA,EACC,wBAAwB;AAAA,EACxB,wBAAwB;AAAA,EACxB,yBAAyB;AAAA,EACzB,wBAAwB;AAAA,EACxB;AAAA,EACA;AAAA,OACM;AACP,SAAS,UAAU;AACnB,SAAS,eAAe;AACxB,SAAS,kBAAkB;AAY3B,SAAS,sBAAsB;AAC/B,SAAS,sBAAsB;AAC/B,OAAO,mBAAmB;AAcvB,SAkGC,UAhGC,KAFF;AAZH,SAAS,eAAgB;AAAA,EACxB;AAAA,EACA;AACD,GAGI;AACH,SACC;AAAA,IAAC;AAAA;AAAA,MACA,WAAU;AAAA,MACV,SAAU;AAAA,MAEV,+BAAC,UAAO,WAAU,UACf;AAAA,iBACD,oBAAC,WAAQ,OAAQ,GAAI,MAAO,IACzB,iBACH;AAAA,QAED,oBAAC,UAAO;AAAA,QACN,WACD;AAAA,UAAC;AAAA;AAAA,YACA,OAAQ,GAAI,OAAQ;AAAA,YACpB,MAAO;AAAA,YACP,SAAU;AAAA,YACV,MAAK;AAAA;AAAA,QACN;AAAA,SAEF;AAAA;AAAA,EACD;AAEF;AAEA,SAAS,cAAuB;AAAA,EAC/B;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,gBAAgB;AAAA,EAChB;AAAA,EACA;AAAA,EACA;AACD,GASI;AACH,QAAM,aAAa,CAAC,CAAE,MAAM,WAAW,MAAM,QAAQ,iBAAiB;AAEtE,QAAM,OAAuB;AAAA,IAC5B,OAAQ;AAAA,MACP,QAAQ;AAAA,MACR,QAAQ,CAAC,CAAE,MAAM,WACd,MAAM;AAAA;AAAA,QAEN,CAAE,EAAE,IAAI,MAAM,IAAI,QAAQ,eAAe,CAAE;AAAA;AAAA,IAC/C;AAAA,IACA,CAAE,KAAM;AAAA,EACT;AACA,QAAM,eAAe,QAAS,MAAoB;AACjD,QAAK,aAAa,QAAY;AAC7B,aAAO;AAAA,IACR;AAEA,QAAK,CAAC,CAAE,MAAM,UAAW;AACxB,aAAO,UAAU;AAAA,IAClB;AAEA,WAAO,EAAE,CAAE,MAAM,EAAG,GAAG,SAAS;AAAA,EACjC,GAAG,CAAE,UAAU,KAAM,CAAE;AAGvB,QAAM,eAAe;AAAA,IACpB,OAAQ;AAAA;AAAA;AAAA,MAGP,QAAQ;AAAA,MACR,WAAW;AAAA,MACX,QAAQ;AAAA,MACR,OAAO;AAAA,IACR;AAAA,IACA,CAAE,aAAc;AAAA,EACjB;AAEA,SACC;AAAA,IAAC;AAAA;AAAA,MACA,kBAAiB;AAAA,MACjB;AAAA,MACA,cAAY;AAAA,MACZ,aAAc;AAAA,QACb,MAAM;AAAA,QACN,SAAS;AAAA,QACT,iBAAiB;AAAA,MAClB;AAAA,MACA,cAAe,CAAE,EAAE,QAAQ,SAAS,MACnC;AAAA,QAAC;AAAA;AAAA,UACA;AAAA,UACA;AAAA,UACA;AAAA,UACA;AAAA,UACA,UAAW,gBAAgB,aAAa;AAAA,UACxC,SAAU;AAAA,UACV,iBAAgB;AAAA;AAAA,MACjB;AAAA,MAED,eAAgB,CAAE,EAAE,QAAQ,MAC3B,iCACC;AAAA,4BAAC,kBAAe,OAAQ,YAAa,SAAoB;AAAA,QACzD;AAAA,UAAC;AAAA;AAAA,YACA;AAAA,YACA;AAAA,YACA;AAAA,YACA,UAAW;AAAA,YAET,WAAE,aAAa,YAAY,uBAC5B;AAAA,cAAC;AAAA;AAAA,gBAEA;AAAA,gBACA,OAAQ;AAAA,gBACR;AAAA,gBACA,sBACG,MAAM,UAAU,CAAC,GAAI,SAAS;AAAA,gBAEjC,UAAW;AAAA;AAAA,cAPL,WAAW;AAAA,YAQlB;AAAA;AAAA,QAEF;AAAA,SACD;AAAA;AAAA,EAEF;AAEF;AAEA,IAAO,mBAAQ;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
|
|
1
|
+
// packages/dataviews/src/dataform-layouts/panel/index.tsx
|
|
2
2
|
import clsx from "clsx";
|
|
3
3
|
import {
|
|
4
4
|
__experimentalVStack as VStack,
|
|
@@ -6,31 +6,29 @@ import {
|
|
|
6
6
|
} from "@wordpress/components";
|
|
7
7
|
import { useState, useContext } from "@wordpress/element";
|
|
8
8
|
import DataFormContext from "../../components/dataform-context";
|
|
9
|
-
import { isCombinedField } from "../is-combined-field";
|
|
10
|
-
import { normalizeLayout } from "../normalize-form-fields";
|
|
11
9
|
import PanelDropdown from "./dropdown";
|
|
12
10
|
import PanelModal from "./modal";
|
|
13
11
|
import { getSummaryFields } from "../get-summary-fields";
|
|
14
|
-
|
|
12
|
+
import { jsx, jsxs } from "react/jsx-runtime";
|
|
13
|
+
var getFieldDefinition = (field, fields) => {
|
|
15
14
|
const fieldDefinition = fields.find((_field) => _field.id === field.id);
|
|
16
15
|
if (!fieldDefinition) {
|
|
17
16
|
return fields.find((_field) => {
|
|
18
|
-
if (
|
|
17
|
+
if (!!field.children) {
|
|
19
18
|
const simpleChildren = field.children.filter(
|
|
20
|
-
(child) =>
|
|
19
|
+
(child) => !child.children
|
|
21
20
|
);
|
|
22
21
|
if (simpleChildren.length === 0) {
|
|
23
22
|
return false;
|
|
24
23
|
}
|
|
25
|
-
|
|
26
|
-
return _field.id === firstChildFieldId;
|
|
24
|
+
return _field.id === simpleChildren[0].id;
|
|
27
25
|
}
|
|
28
26
|
return _field.id === field.id;
|
|
29
27
|
});
|
|
30
28
|
}
|
|
31
29
|
return fieldDefinition;
|
|
32
30
|
};
|
|
33
|
-
|
|
31
|
+
var getFieldDefinitionAndSummaryFields = (layout, field, fields) => {
|
|
34
32
|
const summaryFields = getSummaryFields(layout.summary, fields);
|
|
35
33
|
const fieldDefinition = getFieldDefinition(field, fields);
|
|
36
34
|
if (summaryFields.length === 0) {
|
|
@@ -51,10 +49,7 @@ function FormPanelField({
|
|
|
51
49
|
validity
|
|
52
50
|
}) {
|
|
53
51
|
const { fields } = useContext(DataFormContext);
|
|
54
|
-
const layout =
|
|
55
|
-
...field.layout,
|
|
56
|
-
type: "panel"
|
|
57
|
-
});
|
|
52
|
+
const layout = field.layout;
|
|
58
53
|
const [popoverAnchor, setPopoverAnchor] = useState(
|
|
59
54
|
null
|
|
60
55
|
);
|
|
@@ -67,7 +62,7 @@ function FormPanelField({
|
|
|
67
62
|
"dataforms-layouts-panel__field-label",
|
|
68
63
|
`dataforms-layouts-panel__field-label--label-position-${labelPosition}`
|
|
69
64
|
);
|
|
70
|
-
const fieldLabel =
|
|
65
|
+
const fieldLabel = !!field.children ? field.label : fieldDefinition?.label;
|
|
71
66
|
const renderedControl = layout.openAs === "modal" ? /* @__PURE__ */ jsx(
|
|
72
67
|
PanelModal,
|
|
73
68
|
{
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../src/dataform-layouts/panel/index.tsx"],
|
|
4
|
-
"sourcesContent": ["/**\n * External dependencies\n */\nimport clsx from 'clsx';\n\n/**\n * WordPress dependencies\n */\nimport {\n\t__experimentalVStack as VStack,\n\t__experimentalHStack as HStack,\n} from '@wordpress/components';\nimport { useState, useContext } from '@wordpress/element';\n\n/**\n * Internal dependencies\n */\nimport type {\n\tFieldLayoutProps,\n\
|
|
5
|
-
"mappings": "
|
|
4
|
+
"sourcesContent": ["/**\n * External dependencies\n */\nimport clsx from 'clsx';\n\n/**\n * WordPress dependencies\n */\nimport {\n\t__experimentalVStack as VStack,\n\t__experimentalHStack as HStack,\n} from '@wordpress/components';\nimport { useState, useContext } from '@wordpress/element';\n\n/**\n * Internal dependencies\n */\nimport type {\n\tFieldLayoutProps,\n\tNormalizedField,\n\tNormalizedFormField,\n\tNormalizedPanelLayout,\n} from '../../types';\nimport DataFormContext from '../../components/dataform-context';\nimport PanelDropdown from './dropdown';\nimport PanelModal from './modal';\nimport { getSummaryFields } from '../get-summary-fields';\n\nconst getFieldDefinition = < Item, >(\n\tfield: NormalizedFormField,\n\tfields: NormalizedField< Item >[]\n) => {\n\tconst fieldDefinition = fields.find( ( _field ) => _field.id === field.id );\n\n\tif ( ! fieldDefinition ) {\n\t\treturn fields.find( ( _field ) => {\n\t\t\tif ( !! field.children ) {\n\t\t\t\tconst simpleChildren = field.children.filter(\n\t\t\t\t\t( child ) => ! child.children\n\t\t\t\t);\n\n\t\t\t\tif ( simpleChildren.length === 0 ) {\n\t\t\t\t\treturn false;\n\t\t\t\t}\n\n\t\t\t\treturn _field.id === simpleChildren[ 0 ].id;\n\t\t\t}\n\n\t\t\treturn _field.id === field.id;\n\t\t} );\n\t}\n\n\treturn fieldDefinition;\n};\n\n/**\n * Determines the field definition and summary fields for a panel layout.\n *\n * Summary fields are determined with the following priority:\n * 1. Use layout.summary fields if they exist\n * 2. Fall back to the field definition that matches the form field's id\n * 3. If the form field id doesn't exist, pick the first child field\n * 4. If no field definition is found, return empty summary fields\n *\n * @param layout - The normalized panel layout configuration\n * @param field - The form field to get definition for\n * @param fields - Array of normalized field definitions\n * @return Object containing fieldDefinition and summaryFields\n */\nconst getFieldDefinitionAndSummaryFields = < Item, >(\n\tlayout: NormalizedPanelLayout,\n\tfield: NormalizedFormField,\n\tfields: NormalizedField< Item >[]\n) => {\n\tconst summaryFields = getSummaryFields( layout.summary, fields );\n\tconst fieldDefinition = getFieldDefinition( field, fields );\n\n\tif ( summaryFields.length === 0 ) {\n\t\treturn {\n\t\t\tsummaryFields: fieldDefinition ? [ fieldDefinition ] : [],\n\t\t\tfieldDefinition,\n\t\t};\n\t}\n\n\treturn {\n\t\tsummaryFields,\n\t\tfieldDefinition,\n\t};\n};\n\nexport default function FormPanelField< Item >( {\n\tdata,\n\tfield,\n\tonChange,\n\tvalidity,\n}: FieldLayoutProps< Item > ) {\n\tconst { fields } = useContext( DataFormContext );\n\tconst layout = field.layout as NormalizedPanelLayout;\n\n\t// Use internal state instead of a ref to make sure that the component\n\t// re-renders when the popover's anchor updates.\n\tconst [ popoverAnchor, setPopoverAnchor ] = useState< HTMLElement | null >(\n\t\tnull\n\t);\n\n\tconst { fieldDefinition, summaryFields } =\n\t\tgetFieldDefinitionAndSummaryFields( layout, field, fields );\n\n\tif ( ! fieldDefinition ) {\n\t\treturn null;\n\t}\n\n\tconst labelPosition = layout.labelPosition;\n\tconst labelClassName = clsx(\n\t\t'dataforms-layouts-panel__field-label',\n\t\t`dataforms-layouts-panel__field-label--label-position-${ labelPosition }`\n\t);\n\tconst fieldLabel = !! field.children ? field.label : fieldDefinition?.label;\n\n\tconst renderedControl =\n\t\tlayout.openAs === 'modal' ? (\n\t\t\t<PanelModal\n\t\t\t\tdata={ data }\n\t\t\t\tfield={ field }\n\t\t\t\tonChange={ onChange }\n\t\t\t\tlabelPosition={ labelPosition }\n\t\t\t\tsummaryFields={ summaryFields }\n\t\t\t\tfieldDefinition={ fieldDefinition }\n\t\t\t/>\n\t\t) : (\n\t\t\t<PanelDropdown\n\t\t\t\tdata={ data }\n\t\t\t\tfield={ field }\n\t\t\t\tonChange={ onChange }\n\t\t\t\tvalidity={ validity }\n\t\t\t\tlabelPosition={ labelPosition }\n\t\t\t\tsummaryFields={ summaryFields }\n\t\t\t\tfieldDefinition={ fieldDefinition }\n\t\t\t\tpopoverAnchor={ popoverAnchor }\n\t\t\t/>\n\t\t);\n\n\tif ( labelPosition === 'top' ) {\n\t\treturn (\n\t\t\t<VStack className=\"dataforms-layouts-panel__field\" spacing={ 0 }>\n\t\t\t\t<div\n\t\t\t\t\tclassName={ labelClassName }\n\t\t\t\t\tstyle={ { paddingBottom: 0 } }\n\t\t\t\t>\n\t\t\t\t\t{ fieldLabel }\n\t\t\t\t</div>\n\t\t\t\t<div className=\"dataforms-layouts-panel__field-control\">\n\t\t\t\t\t{ renderedControl }\n\t\t\t\t</div>\n\t\t\t</VStack>\n\t\t);\n\t}\n\n\tif ( labelPosition === 'none' ) {\n\t\treturn (\n\t\t\t<div className=\"dataforms-layouts-panel__field\">\n\t\t\t\t{ renderedControl }\n\t\t\t</div>\n\t\t);\n\t}\n\n\t// Defaults to label position side.\n\treturn (\n\t\t<HStack\n\t\t\tref={ setPopoverAnchor }\n\t\t\tclassName=\"dataforms-layouts-panel__field\"\n\t\t>\n\t\t\t<div className={ labelClassName }>{ fieldLabel }</div>\n\t\t\t<div className=\"dataforms-layouts-panel__field-control\">\n\t\t\t\t{ renderedControl }\n\t\t\t</div>\n\t\t</HStack>\n\t);\n}\n"],
|
|
5
|
+
"mappings": ";AAGA,OAAO,UAAU;AAKjB;AAAA,EACC,wBAAwB;AAAA,EACxB,wBAAwB;AAAA,OAClB;AACP,SAAS,UAAU,kBAAkB;AAWrC,OAAO,qBAAqB;AAC5B,OAAO,mBAAmB;AAC1B,OAAO,gBAAgB;AACvB,SAAS,wBAAwB;AA+F9B,cAuBA,YAvBA;AA7FH,IAAM,qBAAqB,CAC1B,OACA,WACI;AACJ,QAAM,kBAAkB,OAAO,KAAM,CAAE,WAAY,OAAO,OAAO,MAAM,EAAG;AAE1E,MAAK,CAAE,iBAAkB;AACxB,WAAO,OAAO,KAAM,CAAE,WAAY;AACjC,UAAK,CAAC,CAAE,MAAM,UAAW;AACxB,cAAM,iBAAiB,MAAM,SAAS;AAAA,UACrC,CAAE,UAAW,CAAE,MAAM;AAAA,QACtB;AAEA,YAAK,eAAe,WAAW,GAAI;AAClC,iBAAO;AAAA,QACR;AAEA,eAAO,OAAO,OAAO,eAAgB,CAAE,EAAE;AAAA,MAC1C;AAEA,aAAO,OAAO,OAAO,MAAM;AAAA,IAC5B,CAAE;AAAA,EACH;AAEA,SAAO;AACR;AAgBA,IAAM,qCAAqC,CAC1C,QACA,OACA,WACI;AACJ,QAAM,gBAAgB,iBAAkB,OAAO,SAAS,MAAO;AAC/D,QAAM,kBAAkB,mBAAoB,OAAO,MAAO;AAE1D,MAAK,cAAc,WAAW,GAAI;AACjC,WAAO;AAAA,MACN,eAAe,kBAAkB,CAAE,eAAgB,IAAI,CAAC;AAAA,MACxD;AAAA,IACD;AAAA,EACD;AAEA,SAAO;AAAA,IACN;AAAA,IACA;AAAA,EACD;AACD;AAEe,SAAR,eAAyC;AAAA,EAC/C;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACD,GAA8B;AAC7B,QAAM,EAAE,OAAO,IAAI,WAAY,eAAgB;AAC/C,QAAM,SAAS,MAAM;AAIrB,QAAM,CAAE,eAAe,gBAAiB,IAAI;AAAA,IAC3C;AAAA,EACD;AAEA,QAAM,EAAE,iBAAiB,cAAc,IACtC,mCAAoC,QAAQ,OAAO,MAAO;AAE3D,MAAK,CAAE,iBAAkB;AACxB,WAAO;AAAA,EACR;AAEA,QAAM,gBAAgB,OAAO;AAC7B,QAAM,iBAAiB;AAAA,IACtB;AAAA,IACA,wDAAyD,aAAc;AAAA,EACxE;AACA,QAAM,aAAa,CAAC,CAAE,MAAM,WAAW,MAAM,QAAQ,iBAAiB;AAEtE,QAAM,kBACL,OAAO,WAAW,UACjB;AAAA,IAAC;AAAA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA;AAAA,EACD,IAEA;AAAA,IAAC;AAAA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA;AAAA,EACD;AAGF,MAAK,kBAAkB,OAAQ;AAC9B,WACC,qBAAC,UAAO,WAAU,kCAAiC,SAAU,GAC5D;AAAA;AAAA,QAAC;AAAA;AAAA,UACA,WAAY;AAAA,UACZ,OAAQ,EAAE,eAAe,EAAE;AAAA,UAEzB;AAAA;AAAA,MACH;AAAA,MACA,oBAAC,SAAI,WAAU,0CACZ,2BACH;AAAA,OACD;AAAA,EAEF;AAEA,MAAK,kBAAkB,QAAS;AAC/B,WACC,oBAAC,SAAI,WAAU,kCACZ,2BACH;AAAA,EAEF;AAGA,SACC;AAAA,IAAC;AAAA;AAAA,MACA,KAAM;AAAA,MACN,WAAU;AAAA,MAEV;AAAA,4BAAC,SAAI,WAAY,gBAAmB,sBAAY;AAAA,QAChD,oBAAC,SAAI,WAAU,0CACZ,2BACH;AAAA;AAAA;AAAA,EACD;AAEF;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
|
|
1
|
+
// packages/dataviews/src/dataform-layouts/panel/modal.tsx
|
|
2
2
|
import deepMerge from "deepmerge";
|
|
3
3
|
import {
|
|
4
4
|
__experimentalHStack as HStack,
|
|
@@ -9,11 +9,11 @@ import {
|
|
|
9
9
|
import { __ } from "@wordpress/i18n";
|
|
10
10
|
import { useContext, useState, useMemo } from "@wordpress/element";
|
|
11
11
|
import { DataFormLayout } from "../data-form-layout";
|
|
12
|
-
import {
|
|
13
|
-
import { DEFAULT_LAYOUT } from "../normalize-form-fields";
|
|
12
|
+
import { DEFAULT_LAYOUT } from "../normalize-form";
|
|
14
13
|
import SummaryButton from "./summary-button";
|
|
15
14
|
import useFormValidity from "../../hooks/use-form-validity";
|
|
16
15
|
import DataFormContext from "../../components/dataform-context";
|
|
16
|
+
import { Fragment, jsx, jsxs } from "react/jsx-runtime";
|
|
17
17
|
function ModalContent({
|
|
18
18
|
data,
|
|
19
19
|
field,
|
|
@@ -29,9 +29,9 @@ function ModalContent({
|
|
|
29
29
|
const form = useMemo(
|
|
30
30
|
() => ({
|
|
31
31
|
layout: DEFAULT_LAYOUT,
|
|
32
|
-
fields:
|
|
32
|
+
fields: !!field.children ? field.children : (
|
|
33
33
|
// If not explicit children return the field id itself.
|
|
34
|
-
[{ id: field.id }]
|
|
34
|
+
[{ id: field.id, layout: DEFAULT_LAYOUT }]
|
|
35
35
|
)
|
|
36
36
|
}),
|
|
37
37
|
[field]
|
|
@@ -70,7 +70,7 @@ function ModalContent({
|
|
|
70
70
|
data: modalData,
|
|
71
71
|
field: childField,
|
|
72
72
|
onChange: handleOnChange,
|
|
73
|
-
hideLabelFromVision:
|
|
73
|
+
hideLabelFromVision: form.fields.length < 2,
|
|
74
74
|
validity: childFieldValidity
|
|
75
75
|
},
|
|
76
76
|
childField.id
|
|
@@ -118,7 +118,7 @@ function PanelModal({
|
|
|
118
118
|
fieldDefinition
|
|
119
119
|
}) {
|
|
120
120
|
const [isOpen, setIsOpen] = useState(false);
|
|
121
|
-
const fieldLabel =
|
|
121
|
+
const fieldLabel = !!field.children ? field.label : fieldDefinition?.label;
|
|
122
122
|
return /* @__PURE__ */ jsxs(Fragment, { children: [
|
|
123
123
|
/* @__PURE__ */ jsx(
|
|
124
124
|
SummaryButton,
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../src/dataform-layouts/panel/modal.tsx"],
|
|
4
|
-
"sourcesContent": ["/**\n * External dependencies\n */\nimport deepMerge from 'deepmerge';\n\n/**\n * WordPress dependencies\n */\nimport {\n\t__experimentalHStack as HStack,\n\t__experimentalSpacer as Spacer,\n\tButton,\n\tModal,\n} from '@wordpress/components';\nimport { __ } from '@wordpress/i18n';\nimport { useContext, useState, useMemo } from '@wordpress/element';\n\n/**\n * Internal dependencies\n */\nimport type {
|
|
5
|
-
"mappings": "
|
|
4
|
+
"sourcesContent": ["/**\n * External dependencies\n */\nimport deepMerge from 'deepmerge';\n\n/**\n * WordPress dependencies\n */\nimport {\n\t__experimentalHStack as HStack,\n\t__experimentalSpacer as Spacer,\n\tButton,\n\tModal,\n} from '@wordpress/components';\nimport { __ } from '@wordpress/i18n';\nimport { useContext, useState, useMemo } from '@wordpress/element';\n\n/**\n * Internal dependencies\n */\nimport type {\n\tField,\n\tNormalizedForm,\n\tNormalizedFormField,\n\tNormalizedField,\n} from '../../types';\nimport { DataFormLayout } from '../data-form-layout';\nimport { DEFAULT_LAYOUT } from '../normalize-form';\nimport SummaryButton from './summary-button';\nimport useFormValidity from '../../hooks/use-form-validity';\nimport DataFormContext from '../../components/dataform-context';\n\nfunction ModalContent< Item >( {\n\tdata,\n\tfield,\n\tonChange,\n\tfieldLabel,\n\tonClose,\n}: {\n\tdata: Item;\n\tfield: NormalizedFormField;\n\tonChange: ( data: Partial< Item > ) => void;\n\tonClose: () => void;\n\tfieldLabel: string;\n} ) {\n\tconst { fields } = useContext( DataFormContext );\n\tconst [ changes, setChanges ] = useState< Partial< Item > >( {} );\n\tconst modalData = useMemo( () => {\n\t\treturn deepMerge( data, changes );\n\t}, [ data, changes ] );\n\n\tconst form: NormalizedForm = useMemo(\n\t\t() => ( {\n\t\t\tlayout: DEFAULT_LAYOUT,\n\t\t\tfields: !! field.children\n\t\t\t\t? field.children\n\t\t\t\t: // If not explicit children return the field id itself.\n\t\t\t\t [ { id: field.id, layout: DEFAULT_LAYOUT } ],\n\t\t} ),\n\t\t[ field ]\n\t);\n\n\tconst { validity } = useFormValidity(\n\t\tmodalData,\n\t\tfields as Field< any >[],\n\t\tform\n\t);\n\n\tconst onApply = () => {\n\t\tonChange( changes );\n\t\tonClose();\n\t};\n\n\tconst handleOnChange = ( newValue: Partial< Item > ) => {\n\t\tsetChanges( ( prev ) => deepMerge( prev, newValue ) );\n\t};\n\n\treturn (\n\t\t<Modal\n\t\t\tclassName=\"dataforms-layouts-panel__modal\"\n\t\t\tonRequestClose={ onClose }\n\t\t\tisFullScreen={ false }\n\t\t\ttitle={ fieldLabel }\n\t\t\tsize=\"medium\"\n\t\t>\n\t\t\t<DataFormLayout\n\t\t\t\tdata={ modalData }\n\t\t\t\tform={ form }\n\t\t\t\tonChange={ handleOnChange }\n\t\t\t\tvalidity={ validity }\n\t\t\t>\n\t\t\t\t{ ( FieldLayout, childField, childFieldValidity ) => (\n\t\t\t\t\t<FieldLayout\n\t\t\t\t\t\tkey={ childField.id }\n\t\t\t\t\t\tdata={ modalData }\n\t\t\t\t\t\tfield={ childField }\n\t\t\t\t\t\tonChange={ handleOnChange }\n\t\t\t\t\t\thideLabelFromVision={ form.fields.length < 2 }\n\t\t\t\t\t\tvalidity={ childFieldValidity }\n\t\t\t\t\t/>\n\t\t\t\t) }\n\t\t\t</DataFormLayout>\n\t\t\t<HStack\n\t\t\t\tclassName=\"dataforms-layouts-panel__modal-footer\"\n\t\t\t\tspacing={ 3 }\n\t\t\t>\n\t\t\t\t<Spacer />\n\t\t\t\t<Button\n\t\t\t\t\tvariant=\"tertiary\"\n\t\t\t\t\tonClick={ onClose }\n\t\t\t\t\t__next40pxDefaultSize\n\t\t\t\t>\n\t\t\t\t\t{ __( 'Cancel' ) }\n\t\t\t\t</Button>\n\t\t\t\t<Button\n\t\t\t\t\tvariant=\"primary\"\n\t\t\t\t\tonClick={ onApply }\n\t\t\t\t\t__next40pxDefaultSize\n\t\t\t\t>\n\t\t\t\t\t{ __( 'Apply' ) }\n\t\t\t\t</Button>\n\t\t\t</HStack>\n\t\t</Modal>\n\t);\n}\n\nfunction PanelModal< Item >( {\n\tdata,\n\tfield,\n\tonChange,\n\tlabelPosition,\n\tsummaryFields,\n\tfieldDefinition,\n}: {\n\tdata: Item;\n\tfield: NormalizedFormField;\n\tonChange: ( value: any ) => void;\n\tlabelPosition: 'side' | 'top' | 'none';\n\tsummaryFields: NormalizedField< Item >[];\n\tfieldDefinition: NormalizedField< Item >;\n} ) {\n\tconst [ isOpen, setIsOpen ] = useState( false );\n\n\tconst fieldLabel = !! field.children ? field.label : fieldDefinition?.label;\n\n\treturn (\n\t\t<>\n\t\t\t<SummaryButton\n\t\t\t\tsummaryFields={ summaryFields }\n\t\t\t\tdata={ data }\n\t\t\t\tlabelPosition={ labelPosition }\n\t\t\t\tfieldLabel={ fieldLabel }\n\t\t\t\tdisabled={ fieldDefinition.readOnly === true }\n\t\t\t\tonClick={ () => setIsOpen( true ) }\n\t\t\t\taria-expanded={ isOpen }\n\t\t\t/>\n\t\t\t{ isOpen && (\n\t\t\t\t<ModalContent\n\t\t\t\t\tdata={ data }\n\t\t\t\t\tfield={ field }\n\t\t\t\t\tonChange={ onChange }\n\t\t\t\t\tfieldLabel={ fieldLabel ?? '' }\n\t\t\t\t\tonClose={ () => setIsOpen( false ) }\n\t\t\t\t/>\n\t\t\t) }\n\t\t</>\n\t);\n}\n\nexport default PanelModal;\n"],
|
|
5
|
+
"mappings": "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",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
|
@@ -1,6 +1,7 @@
|
|
|
1
|
-
|
|
1
|
+
// packages/dataviews/src/dataform-layouts/panel/summary-button.tsx
|
|
2
2
|
import { Button } from "@wordpress/components";
|
|
3
3
|
import { sprintf, _x } from "@wordpress/i18n";
|
|
4
|
+
import { jsx } from "react/jsx-runtime";
|
|
4
5
|
function SummaryButton({
|
|
5
6
|
summaryFields,
|
|
6
7
|
data,
|
|
@@ -2,6 +2,6 @@
|
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../src/dataform-layouts/panel/summary-button.tsx"],
|
|
4
4
|
"sourcesContent": ["/**\n * WordPress dependencies\n */\nimport { Button } from '@wordpress/components';\nimport { sprintf, _x } from '@wordpress/i18n';\n\n/**\n * Internal dependencies\n */\nimport type { NormalizedField } from '../../types';\n\nfunction SummaryButton< Item >( {\n\tsummaryFields,\n\tdata,\n\tlabelPosition,\n\tfieldLabel,\n\tdisabled,\n\tonClick,\n\t'aria-expanded': ariaExpanded,\n}: {\n\tsummaryFields: NormalizedField< Item >[];\n\tdata: Item;\n\tlabelPosition: 'side' | 'top' | 'none';\n\tfieldLabel?: string;\n\tdisabled?: boolean;\n\tonClick: () => void;\n\t'aria-expanded'?: boolean;\n} ) {\n\treturn (\n\t\t<Button\n\t\t\tclassName=\"dataforms-layouts-panel__summary-button\"\n\t\t\tsize=\"compact\"\n\t\t\tvariant={\n\t\t\t\t[ 'none', 'top' ].includes( labelPosition )\n\t\t\t\t\t? 'link'\n\t\t\t\t\t: 'tertiary'\n\t\t\t}\n\t\t\taria-expanded={ ariaExpanded }\n\t\t\taria-label={ sprintf(\n\t\t\t\t// translators: %s: Field name.\n\t\t\t\t_x( 'Edit %s', 'field' ),\n\t\t\t\tfieldLabel || ''\n\t\t\t) }\n\t\t\tonClick={ onClick }\n\t\t\tdisabled={ disabled }\n\t\t\taccessibleWhenDisabled\n\t\t\tstyle={\n\t\t\t\tsummaryFields.length > 1\n\t\t\t\t\t? {\n\t\t\t\t\t\t\tminHeight: 'auto',\n\t\t\t\t\t\t\theight: 'auto',\n\t\t\t\t\t\t\talignItems: 'flex-start',\n\t\t\t\t\t }\n\t\t\t\t\t: undefined\n\t\t\t}\n\t\t>\n\t\t\t{ summaryFields.length > 1 ? (\n\t\t\t\t<div\n\t\t\t\t\tstyle={ {\n\t\t\t\t\t\tdisplay: 'flex',\n\t\t\t\t\t\tflexDirection: 'column',\n\t\t\t\t\t\talignItems: 'flex-start',\n\t\t\t\t\t\twidth: '100%',\n\t\t\t\t\t\tgap: '2px',\n\t\t\t\t\t} }\n\t\t\t\t>\n\t\t\t\t\t{ summaryFields.map( ( summaryField ) => (\n\t\t\t\t\t\t<div\n\t\t\t\t\t\t\tkey={ summaryField.id }\n\t\t\t\t\t\t\tstyle={ { width: '100%' } }\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t<summaryField.render\n\t\t\t\t\t\t\t\titem={ data }\n\t\t\t\t\t\t\t\tfield={ summaryField }\n\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t</div>\n\t\t\t\t\t) ) }\n\t\t\t\t</div>\n\t\t\t) : (\n\t\t\t\tsummaryFields.map( ( summaryField ) => (\n\t\t\t\t\t<summaryField.render\n\t\t\t\t\t\tkey={ summaryField.id }\n\t\t\t\t\t\titem={ data }\n\t\t\t\t\t\tfield={ summaryField }\n\t\t\t\t\t/>\n\t\t\t\t) )\n\t\t\t) }\n\t\t</Button>\n\t);\n}\n\nexport default SummaryButton;\n"],
|
|
5
|
-
"mappings": "
|
|
5
|
+
"mappings": ";AAGA,SAAS,cAAc;AACvB,SAAS,SAAS,UAAU;AAmErB;AA5DP,SAAS,cAAuB;AAAA,EAC/B;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,iBAAiB;AAClB,GAQI;AACH,SACC;AAAA,IAAC;AAAA;AAAA,MACA,WAAU;AAAA,MACV,MAAK;AAAA,MACL,SACC,CAAE,QAAQ,KAAM,EAAE,SAAU,aAAc,IACvC,SACA;AAAA,MAEJ,iBAAgB;AAAA,MAChB,cAAa;AAAA;AAAA,QAEZ,GAAI,WAAW,OAAQ;AAAA,QACvB,cAAc;AAAA,MACf;AAAA,MACA;AAAA,MACA;AAAA,MACA,wBAAsB;AAAA,MACtB,OACC,cAAc,SAAS,IACpB;AAAA,QACA,WAAW;AAAA,QACX,QAAQ;AAAA,QACR,YAAY;AAAA,MACZ,IACA;AAAA,MAGF,wBAAc,SAAS,IACxB;AAAA,QAAC;AAAA;AAAA,UACA,OAAQ;AAAA,YACP,SAAS;AAAA,YACT,eAAe;AAAA,YACf,YAAY;AAAA,YACZ,OAAO;AAAA,YACP,KAAK;AAAA,UACN;AAAA,UAEE,wBAAc,IAAK,CAAE,iBACtB;AAAA,YAAC;AAAA;AAAA,cAEA,OAAQ,EAAE,OAAO,OAAO;AAAA,cAExB;AAAA,gBAAC,aAAa;AAAA,gBAAb;AAAA,kBACA,MAAO;AAAA,kBACP,OAAQ;AAAA;AAAA,cACT;AAAA;AAAA,YANM,aAAa;AAAA,UAOpB,CACC;AAAA;AAAA,MACH,IAEA,cAAc,IAAK,CAAE,iBACpB;AAAA,QAAC,aAAa;AAAA,QAAb;AAAA,UAEA,MAAO;AAAA,UACP,OAAQ;AAAA;AAAA,QAFF,aAAa;AAAA,MAGpB,CACC;AAAA;AAAA,EAEJ;AAEF;AAEA,IAAO,yBAAQ;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
|
|
1
|
+
// packages/dataviews/src/dataform-layouts/regular/index.tsx
|
|
2
2
|
import clsx from "clsx";
|
|
3
3
|
import { useContext, useMemo } from "@wordpress/element";
|
|
4
4
|
import {
|
|
@@ -10,8 +10,8 @@ import {
|
|
|
10
10
|
} from "@wordpress/components";
|
|
11
11
|
import DataFormContext from "../../components/dataform-context";
|
|
12
12
|
import { DataFormLayout } from "../data-form-layout";
|
|
13
|
-
import {
|
|
14
|
-
import {
|
|
13
|
+
import { DEFAULT_LAYOUT } from "../normalize-form";
|
|
14
|
+
import { Fragment, jsx, jsxs } from "react/jsx-runtime";
|
|
15
15
|
function Header({ title }) {
|
|
16
16
|
return /* @__PURE__ */ jsx(VStack, { className: "dataforms-layouts-regular__header", spacing: 4, children: /* @__PURE__ */ jsxs(HStack, { alignment: "center", children: [
|
|
17
17
|
/* @__PURE__ */ jsx(Heading, { level: 2, size: 13, children: title }),
|
|
@@ -26,14 +26,15 @@ function FormRegularField({
|
|
|
26
26
|
validity
|
|
27
27
|
}) {
|
|
28
28
|
const { fields } = useContext(DataFormContext);
|
|
29
|
+
const layout = field.layout;
|
|
29
30
|
const form = useMemo(
|
|
30
31
|
() => ({
|
|
31
32
|
layout: DEFAULT_LAYOUT,
|
|
32
|
-
fields:
|
|
33
|
+
fields: !!field.children ? field.children : []
|
|
33
34
|
}),
|
|
34
35
|
[field]
|
|
35
36
|
);
|
|
36
|
-
if (
|
|
37
|
+
if (!!field.children) {
|
|
37
38
|
return /* @__PURE__ */ jsxs(Fragment, { children: [
|
|
38
39
|
!hideLabelFromVision && field.label && /* @__PURE__ */ jsx(Header, { title: field.label }),
|
|
39
40
|
/* @__PURE__ */ jsx(
|
|
@@ -47,10 +48,6 @@ function FormRegularField({
|
|
|
47
48
|
)
|
|
48
49
|
] });
|
|
49
50
|
}
|
|
50
|
-
const layout = normalizeLayout({
|
|
51
|
-
...field.layout,
|
|
52
|
-
type: "regular"
|
|
53
|
-
});
|
|
54
51
|
const labelPosition = layout.labelPosition;
|
|
55
52
|
const fieldDefinition = fields.find(
|
|
56
53
|
(fieldDef) => fieldDef.id === field.id
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../src/dataform-layouts/regular/index.tsx"],
|
|
4
|
-
"sourcesContent": ["/**\n * External dependencies\n */\nimport clsx from 'clsx';\n\n/**\n * WordPress dependencies\n */\nimport { useContext, useMemo } from '@wordpress/element';\nimport {\n\t__experimentalHStack as HStack,\n\t__experimentalVStack as VStack,\n\t__experimentalHeading as Heading,\n\t__experimentalSpacer as Spacer,\n\tBaseControl,\n} from '@wordpress/components';\n\n/**\n * Internal dependencies\n */\nimport type {\n\
|
|
5
|
-
"mappings": "
|
|
4
|
+
"sourcesContent": ["/**\n * External dependencies\n */\nimport clsx from 'clsx';\n\n/**\n * WordPress dependencies\n */\nimport { useContext, useMemo } from '@wordpress/element';\nimport {\n\t__experimentalHStack as HStack,\n\t__experimentalVStack as VStack,\n\t__experimentalHeading as Heading,\n\t__experimentalSpacer as Spacer,\n\tBaseControl,\n} from '@wordpress/components';\n\n/**\n * Internal dependencies\n */\nimport type {\n\tFieldLayoutProps,\n\tNormalizedForm,\n\tNormalizedRegularLayout,\n} from '../../types';\nimport DataFormContext from '../../components/dataform-context';\nimport { DataFormLayout } from '../data-form-layout';\nimport { DEFAULT_LAYOUT } from '../normalize-form';\n\nfunction Header( { title }: { title: string } ) {\n\treturn (\n\t\t<VStack className=\"dataforms-layouts-regular__header\" spacing={ 4 }>\n\t\t\t<HStack alignment=\"center\">\n\t\t\t\t<Heading level={ 2 } size={ 13 }>\n\t\t\t\t\t{ title }\n\t\t\t\t</Heading>\n\t\t\t\t<Spacer />\n\t\t\t</HStack>\n\t\t</VStack>\n\t);\n}\n\nexport default function FormRegularField< Item >( {\n\tdata,\n\tfield,\n\tonChange,\n\thideLabelFromVision,\n\tvalidity,\n}: FieldLayoutProps< Item > ) {\n\tconst { fields } = useContext( DataFormContext );\n\tconst layout = field.layout as NormalizedRegularLayout;\n\n\tconst form: NormalizedForm = useMemo(\n\t\t() => ( {\n\t\t\tlayout: DEFAULT_LAYOUT,\n\t\t\tfields: !! field.children ? field.children : [],\n\t\t} ),\n\t\t[ field ]\n\t);\n\n\tif ( !! field.children ) {\n\t\treturn (\n\t\t\t<>\n\t\t\t\t{ ! hideLabelFromVision && field.label && (\n\t\t\t\t\t<Header title={ field.label } />\n\t\t\t\t) }\n\t\t\t\t<DataFormLayout\n\t\t\t\t\tdata={ data }\n\t\t\t\t\tform={ form }\n\t\t\t\t\tonChange={ onChange }\n\t\t\t\t\tvalidity={ validity?.children }\n\t\t\t\t/>\n\t\t\t</>\n\t\t);\n\t}\n\n\tconst labelPosition = layout.labelPosition;\n\tconst fieldDefinition = fields.find(\n\t\t( fieldDef ) => fieldDef.id === field.id\n\t);\n\n\tif ( ! fieldDefinition || ! fieldDefinition.Edit ) {\n\t\treturn null;\n\t}\n\n\tif ( labelPosition === 'side' ) {\n\t\treturn (\n\t\t\t<HStack className=\"dataforms-layouts-regular__field\">\n\t\t\t\t<div\n\t\t\t\t\tclassName={ clsx(\n\t\t\t\t\t\t'dataforms-layouts-regular__field-label',\n\t\t\t\t\t\t`dataforms-layouts-regular__field-label--label-position-${ labelPosition }`\n\t\t\t\t\t) }\n\t\t\t\t>\n\t\t\t\t\t{ fieldDefinition.label }\n\t\t\t\t</div>\n\t\t\t\t<div className=\"dataforms-layouts-regular__field-control\">\n\t\t\t\t\t{ fieldDefinition.readOnly === true ? (\n\t\t\t\t\t\t<fieldDefinition.render\n\t\t\t\t\t\t\titem={ data }\n\t\t\t\t\t\t\tfield={ fieldDefinition }\n\t\t\t\t\t\t/>\n\t\t\t\t\t) : (\n\t\t\t\t\t\t<fieldDefinition.Edit\n\t\t\t\t\t\t\tkey={ fieldDefinition.id }\n\t\t\t\t\t\t\tdata={ data }\n\t\t\t\t\t\t\tfield={ fieldDefinition }\n\t\t\t\t\t\t\tonChange={ onChange }\n\t\t\t\t\t\t\thideLabelFromVision\n\t\t\t\t\t\t\tvalidity={ validity }\n\t\t\t\t\t\t/>\n\t\t\t\t\t) }\n\t\t\t\t</div>\n\t\t\t</HStack>\n\t\t);\n\t}\n\n\treturn (\n\t\t<div className=\"dataforms-layouts-regular__field\">\n\t\t\t{ fieldDefinition.readOnly === true ? (\n\t\t\t\t<>\n\t\t\t\t\t<>\n\t\t\t\t\t\t{ ! hideLabelFromVision && labelPosition !== 'none' && (\n\t\t\t\t\t\t\t<BaseControl.VisualLabel>\n\t\t\t\t\t\t\t\t{ fieldDefinition.label }\n\t\t\t\t\t\t\t</BaseControl.VisualLabel>\n\t\t\t\t\t\t) }\n\t\t\t\t\t\t<fieldDefinition.render\n\t\t\t\t\t\t\titem={ data }\n\t\t\t\t\t\t\tfield={ fieldDefinition }\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\t\t<fieldDefinition.Edit\n\t\t\t\t\tdata={ data }\n\t\t\t\t\tfield={ fieldDefinition }\n\t\t\t\t\tonChange={ onChange }\n\t\t\t\t\thideLabelFromVision={\n\t\t\t\t\t\tlabelPosition === 'none' ? true : hideLabelFromVision\n\t\t\t\t\t}\n\t\t\t\t\tvalidity={ validity }\n\t\t\t\t/>\n\t\t\t) }\n\t\t</div>\n\t);\n}\n"],
|
|
5
|
+
"mappings": ";AAGA,OAAO,UAAU;AAKjB,SAAS,YAAY,eAAe;AACpC;AAAA,EACC,wBAAwB;AAAA,EACxB,wBAAwB;AAAA,EACxB,yBAAyB;AAAA,EACzB,wBAAwB;AAAA,EACxB;AAAA,OACM;AAUP,OAAO,qBAAqB;AAC5B,SAAS,sBAAsB;AAC/B,SAAS,sBAAsB;AAK5B,SA8BA,UA7BC,KADD;AAHH,SAAS,OAAQ,EAAE,MAAM,GAAuB;AAC/C,SACC,oBAAC,UAAO,WAAU,qCAAoC,SAAU,GAC/D,+BAAC,UAAO,WAAU,UACjB;AAAA,wBAAC,WAAQ,OAAQ,GAAI,MAAO,IACzB,iBACH;AAAA,IACA,oBAAC,UAAO;AAAA,KACT,GACD;AAEF;AAEe,SAAR,iBAA2C;AAAA,EACjD;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACD,GAA8B;AAC7B,QAAM,EAAE,OAAO,IAAI,WAAY,eAAgB;AAC/C,QAAM,SAAS,MAAM;AAErB,QAAM,OAAuB;AAAA,IAC5B,OAAQ;AAAA,MACP,QAAQ;AAAA,MACR,QAAQ,CAAC,CAAE,MAAM,WAAW,MAAM,WAAW,CAAC;AAAA,IAC/C;AAAA,IACA,CAAE,KAAM;AAAA,EACT;AAEA,MAAK,CAAC,CAAE,MAAM,UAAW;AACxB,WACC,iCACG;AAAA,OAAE,uBAAuB,MAAM,SAChC,oBAAC,UAAO,OAAQ,MAAM,OAAQ;AAAA,MAE/B;AAAA,QAAC;AAAA;AAAA,UACA;AAAA,UACA;AAAA,UACA;AAAA,UACA,UAAW,UAAU;AAAA;AAAA,MACtB;AAAA,OACD;AAAA,EAEF;AAEA,QAAM,gBAAgB,OAAO;AAC7B,QAAM,kBAAkB,OAAO;AAAA,IAC9B,CAAE,aAAc,SAAS,OAAO,MAAM;AAAA,EACvC;AAEA,MAAK,CAAE,mBAAmB,CAAE,gBAAgB,MAAO;AAClD,WAAO;AAAA,EACR;AAEA,MAAK,kBAAkB,QAAS;AAC/B,WACC,qBAAC,UAAO,WAAU,oCACjB;AAAA;AAAA,QAAC;AAAA;AAAA,UACA,WAAY;AAAA,YACX;AAAA,YACA,0DAA2D,aAAc;AAAA,UAC1E;AAAA,UAEE,0BAAgB;AAAA;AAAA,MACnB;AAAA,MACA,oBAAC,SAAI,WAAU,4CACZ,0BAAgB,aAAa,OAC9B;AAAA,QAAC,gBAAgB;AAAA,QAAhB;AAAA,UACA,MAAO;AAAA,UACP,OAAQ;AAAA;AAAA,MACT,IAEA;AAAA,QAAC,gBAAgB;AAAA,QAAhB;AAAA,UAEA;AAAA,UACA,OAAQ;AAAA,UACR;AAAA,UACA,qBAAmB;AAAA,UACnB;AAAA;AAAA,QALM,gBAAgB;AAAA,MAMvB,GAEF;AAAA,OACD;AAAA,EAEF;AAEA,SACC,oBAAC,SAAI,WAAU,oCACZ,0BAAgB,aAAa,OAC9B,gCACC,2CACG;AAAA,KAAE,uBAAuB,kBAAkB,UAC5C,oBAAC,YAAY,aAAZ,EACE,0BAAgB,OACnB;AAAA,IAED;AAAA,MAAC,gBAAgB;AAAA,MAAhB;AAAA,QACA,MAAO;AAAA,QACP,OAAQ;AAAA;AAAA,IACT;AAAA,KACD,GACD,IAEA;AAAA,IAAC,gBAAgB;AAAA,IAAhB;AAAA,MACA;AAAA,MACA,OAAQ;AAAA,MACR;AAAA,MACA,qBACC,kBAAkB,SAAS,OAAO;AAAA,MAEnC;AAAA;AAAA,EACD,GAEF;AAEF;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
|
@@ -1,23 +1,21 @@
|
|
|
1
|
-
|
|
1
|
+
// packages/dataviews/src/dataform-layouts/row/index.tsx
|
|
2
2
|
import {
|
|
3
3
|
__experimentalHStack as HStack,
|
|
4
4
|
__experimentalSpacer as Spacer,
|
|
5
5
|
__experimentalVStack as VStack,
|
|
6
6
|
__experimentalHeading as Heading
|
|
7
7
|
} from "@wordpress/components";
|
|
8
|
-
import { useContext } from "@wordpress/element";
|
|
9
|
-
import DataFormContext from "../../components/dataform-context";
|
|
10
8
|
import { DataFormLayout } from "../data-form-layout";
|
|
11
|
-
import {
|
|
12
|
-
import { normalizeLayout } from "../normalize-form-fields";
|
|
9
|
+
import { DEFAULT_LAYOUT } from "../normalize-form";
|
|
13
10
|
import { getFormFieldLayout } from "..";
|
|
11
|
+
import { Fragment, jsx, jsxs } from "react/jsx-runtime";
|
|
14
12
|
function Header({ title }) {
|
|
15
13
|
return /* @__PURE__ */ jsx(VStack, { className: "dataforms-layouts-row__header", spacing: 4, children: /* @__PURE__ */ jsxs(HStack, { alignment: "center", children: [
|
|
16
14
|
/* @__PURE__ */ jsx(Heading, { level: 2, size: 13, children: title }),
|
|
17
15
|
/* @__PURE__ */ jsx(Spacer, {})
|
|
18
16
|
] }) });
|
|
19
17
|
}
|
|
20
|
-
|
|
18
|
+
var EMPTY_WRAPPER = ({ children }) => /* @__PURE__ */ jsx(Fragment, { children });
|
|
21
19
|
function FormRowField({
|
|
22
20
|
data,
|
|
23
21
|
field,
|
|
@@ -25,19 +23,11 @@ function FormRowField({
|
|
|
25
23
|
hideLabelFromVision,
|
|
26
24
|
validity
|
|
27
25
|
}) {
|
|
28
|
-
const
|
|
29
|
-
|
|
30
|
-
...field.layout,
|
|
31
|
-
type: "row"
|
|
32
|
-
});
|
|
33
|
-
if (isCombinedField(field)) {
|
|
26
|
+
const layout = field.layout;
|
|
27
|
+
if (!!field.children) {
|
|
34
28
|
const form = {
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
return { id: child };
|
|
38
|
-
}
|
|
39
|
-
return child;
|
|
40
|
-
})
|
|
29
|
+
layout: DEFAULT_LAYOUT,
|
|
30
|
+
fields: field.children
|
|
41
31
|
};
|
|
42
32
|
return /* @__PURE__ */ jsxs("div", { className: "dataforms-layouts-row__field", children: [
|
|
43
33
|
!hideLabelFromVision && field.label && /* @__PURE__ */ jsx(Header, { title: field.label }),
|
|
@@ -71,10 +61,6 @@ function FormRowField({
|
|
|
71
61
|
) })
|
|
72
62
|
] });
|
|
73
63
|
}
|
|
74
|
-
const fieldDefinition = fields.find((f) => f.id === field.id);
|
|
75
|
-
if (!fieldDefinition || !fieldDefinition.Edit) {
|
|
76
|
-
return null;
|
|
77
|
-
}
|
|
78
64
|
const RegularLayout = getFormFieldLayout("regular")?.component;
|
|
79
65
|
if (!RegularLayout) {
|
|
80
66
|
return null;
|
|
@@ -83,7 +69,7 @@ function FormRowField({
|
|
|
83
69
|
RegularLayout,
|
|
84
70
|
{
|
|
85
71
|
data,
|
|
86
|
-
field
|
|
72
|
+
field,
|
|
87
73
|
onChange,
|
|
88
74
|
validity
|
|
89
75
|
}
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../src/dataform-layouts/row/index.tsx"],
|
|
4
|
-
"sourcesContent": ["/**\n * WordPress dependencies\n */\nimport {\n\t__experimentalHStack as HStack,\n\t__experimentalSpacer as Spacer,\n\t__experimentalVStack as VStack,\n\t__experimentalHeading as Heading,\n} from '@wordpress/components';\
|
|
5
|
-
"mappings": "
|
|
4
|
+
"sourcesContent": ["/**\n * WordPress dependencies\n */\nimport {\n\t__experimentalHStack as HStack,\n\t__experimentalSpacer as Spacer,\n\t__experimentalVStack as VStack,\n\t__experimentalHeading as Heading,\n} from '@wordpress/components';\n\n/**\n * Internal dependencies\n */\nimport type {\n\tFieldLayoutProps,\n\tNormalizedForm,\n\tNormalizedLayout,\n\tNormalizedRowLayout,\n} from '../../types';\nimport { DataFormLayout } from '../data-form-layout';\nimport { DEFAULT_LAYOUT } from '../normalize-form';\nimport { getFormFieldLayout } from '..';\n\nfunction Header( { title }: { title: string } ) {\n\treturn (\n\t\t<VStack className=\"dataforms-layouts-row__header\" spacing={ 4 }>\n\t\t\t<HStack alignment=\"center\">\n\t\t\t\t<Heading level={ 2 } size={ 13 }>\n\t\t\t\t\t{ title }\n\t\t\t\t</Heading>\n\t\t\t\t<Spacer />\n\t\t\t</HStack>\n\t\t</VStack>\n\t);\n}\n\nconst EMPTY_WRAPPER = ( { children }: { children: React.ReactNode } ) => (\n\t<>{ children }</>\n);\n\nexport default function FormRowField< Item >( {\n\tdata,\n\tfield,\n\tonChange,\n\thideLabelFromVision,\n\tvalidity,\n}: FieldLayoutProps< Item > ) {\n\tconst layout = field.layout as NormalizedRowLayout;\n\n\tif ( !! field.children ) {\n\t\tconst form: NormalizedForm = {\n\t\t\tlayout: DEFAULT_LAYOUT as NormalizedLayout,\n\t\t\tfields: field.children,\n\t\t};\n\n\t\treturn (\n\t\t\t<div className=\"dataforms-layouts-row__field\">\n\t\t\t\t{ ! hideLabelFromVision && field.label && (\n\t\t\t\t\t<Header title={ field.label } />\n\t\t\t\t) }\n\t\t\t\t<HStack alignment={ layout.alignment } spacing={ 4 }>\n\t\t\t\t\t<DataFormLayout\n\t\t\t\t\t\tdata={ data }\n\t\t\t\t\t\tform={ form }\n\t\t\t\t\t\tonChange={ onChange }\n\t\t\t\t\t\tvalidity={ validity?.children }\n\t\t\t\t\t\tas={ EMPTY_WRAPPER }\n\t\t\t\t\t>\n\t\t\t\t\t\t{ ( FieldLayout, childField, childFieldValidity ) => (\n\t\t\t\t\t\t\t<div\n\t\t\t\t\t\t\t\tkey={ childField.id }\n\t\t\t\t\t\t\t\tclassName=\"dataforms-layouts-row__field-control\"\n\t\t\t\t\t\t\t\tstyle={ layout.styles[ childField.id ] }\n\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t<FieldLayout\n\t\t\t\t\t\t\t\t\tdata={ data }\n\t\t\t\t\t\t\t\t\tfield={ childField }\n\t\t\t\t\t\t\t\t\tonChange={ onChange }\n\t\t\t\t\t\t\t\t\thideLabelFromVision={ hideLabelFromVision }\n\t\t\t\t\t\t\t\t\tvalidity={ childFieldValidity }\n\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t) }\n\t\t\t\t\t</DataFormLayout>\n\t\t\t\t</HStack>\n\t\t\t</div>\n\t\t);\n\t}\n\n\tconst RegularLayout = getFormFieldLayout( 'regular' )?.component;\n\tif ( ! RegularLayout ) {\n\t\treturn null;\n\t}\n\n\treturn (\n\t\t<>\n\t\t\t<div className=\"dataforms-layouts-row__field-control\">\n\t\t\t\t<RegularLayout\n\t\t\t\t\tdata={ data }\n\t\t\t\t\tfield={ field }\n\t\t\t\t\tonChange={ onChange }\n\t\t\t\t\tvalidity={ validity }\n\t\t\t\t/>\n\t\t\t</div>\n\t\t</>\n\t);\n}\n"],
|
|
5
|
+
"mappings": ";AAGA;AAAA,EACC,wBAAwB;AAAA,EACxB,wBAAwB;AAAA,EACxB,wBAAwB;AAAA,EACxB,yBAAyB;AAAA,OACnB;AAWP,SAAS,sBAAsB;AAC/B,SAAS,sBAAsB;AAC/B,SAAS,0BAA0B;AAKhC,SAWF,UAVG,KADD;AAHH,SAAS,OAAQ,EAAE,MAAM,GAAuB;AAC/C,SACC,oBAAC,UAAO,WAAU,iCAAgC,SAAU,GAC3D,+BAAC,UAAO,WAAU,UACjB;AAAA,wBAAC,WAAQ,OAAQ,GAAI,MAAO,IACzB,iBACH;AAAA,IACA,oBAAC,UAAO;AAAA,KACT,GACD;AAEF;AAEA,IAAM,gBAAgB,CAAE,EAAE,SAAS,MAClC,gCAAI,UAAU;AAGA,SAAR,aAAuC;AAAA,EAC7C;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACD,GAA8B;AAC7B,QAAM,SAAS,MAAM;AAErB,MAAK,CAAC,CAAE,MAAM,UAAW;AACxB,UAAM,OAAuB;AAAA,MAC5B,QAAQ;AAAA,MACR,QAAQ,MAAM;AAAA,IACf;AAEA,WACC,qBAAC,SAAI,WAAU,gCACZ;AAAA,OAAE,uBAAuB,MAAM,SAChC,oBAAC,UAAO,OAAQ,MAAM,OAAQ;AAAA,MAE/B,oBAAC,UAAO,WAAY,OAAO,WAAY,SAAU,GAChD;AAAA,QAAC;AAAA;AAAA,UACA;AAAA,UACA;AAAA,UACA;AAAA,UACA,UAAW,UAAU;AAAA,UACrB,IAAK;AAAA,UAEH,WAAE,aAAa,YAAY,uBAC5B;AAAA,YAAC;AAAA;AAAA,cAEA,WAAU;AAAA,cACV,OAAQ,OAAO,OAAQ,WAAW,EAAG;AAAA,cAErC;AAAA,gBAAC;AAAA;AAAA,kBACA;AAAA,kBACA,OAAQ;AAAA,kBACR;AAAA,kBACA;AAAA,kBACA,UAAW;AAAA;AAAA,cACZ;AAAA;AAAA,YAVM,WAAW;AAAA,UAWlB;AAAA;AAAA,MAEF,GACD;AAAA,OACD;AAAA,EAEF;AAEA,QAAM,gBAAgB,mBAAoB,SAAU,GAAG;AACvD,MAAK,CAAE,eAAgB;AACtB,WAAO;AAAA,EACR;AAEA,SACC,gCACC,8BAAC,SAAI,WAAU,wCACd;AAAA,IAAC;AAAA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA;AAAA,EACD,GACD,GACD;AAEF;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
|
|
1
|
+
// packages/dataviews/src/dataviews-layouts/grid/index.tsx
|
|
2
2
|
import clsx from "clsx";
|
|
3
3
|
import {
|
|
4
4
|
__experimentalHStack as HStack,
|
|
@@ -23,8 +23,9 @@ import {
|
|
|
23
23
|
} from "../../components/dataviews-bulk-actions";
|
|
24
24
|
import { ItemClickWrapper } from "../utils/item-click-wrapper";
|
|
25
25
|
import { GridItems } from "../utils/grid-items";
|
|
26
|
-
const { Badge } = unlock(componentsPrivateApis);
|
|
27
26
|
import getDataByGroup from "../utils/get-data-by-group";
|
|
27
|
+
import { Fragment, jsx, jsxs } from "react/jsx-runtime";
|
|
28
|
+
var { Badge } = unlock(componentsPrivateApis);
|
|
28
29
|
function GridItem({
|
|
29
30
|
view,
|
|
30
31
|
selection,
|
|
@@ -2,6 +2,6 @@
|
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../src/dataviews-layouts/grid/index.tsx"],
|
|
4
4
|
"sourcesContent": ["/**\n * External dependencies\n */\nimport clsx from 'clsx';\nimport type { ComponentProps, ReactElement } from 'react';\n\n/**\n * WordPress dependencies\n */\nimport {\n\t__experimentalHStack as HStack,\n\t__experimentalVStack as VStack,\n\tSpinner,\n\tFlex,\n\tFlexItem,\n\tTooltip,\n\tprivateApis as componentsPrivateApis,\n} from '@wordpress/components';\nimport { __, sprintf } from '@wordpress/i18n';\nimport { useInstanceId } from '@wordpress/compose';\nimport { isAppleOS } from '@wordpress/keycodes';\nimport { useContext } from '@wordpress/element';\n\n/**\n * Internal dependencies\n */\nimport { unlock } from '../../lock-unlock';\nimport ItemActions from '../../components/dataviews-item-actions';\nimport DataViewsSelectionCheckbox from '../../components/dataviews-selection-checkbox';\nimport DataViewsContext from '../../components/dataviews-context';\nimport {\n\tuseHasAPossibleBulkAction,\n\tuseSomeItemHasAPossibleBulkAction,\n} from '../../components/dataviews-bulk-actions';\nimport type {\n\tAction,\n\tNormalizedField,\n\tViewGrid as ViewGridType,\n\tViewGridProps,\n} from '../../types';\nimport type { SetSelection } from '../../types/private';\nimport { ItemClickWrapper } from '../utils/item-click-wrapper';\nimport { GridItems } from '../utils/grid-items';\nconst { Badge } = unlock( componentsPrivateApis );\nimport getDataByGroup from '../utils/get-data-by-group';\n\ninterface GridItemProps< Item > {\n\tview: ViewGridType;\n\tselection: string[];\n\tonChangeSelection: SetSelection;\n\tgetItemId: ( item: Item ) => string;\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\titem: Item;\n\tactions: Action< Item >[];\n\ttitleField?: NormalizedField< Item >;\n\tmediaField?: NormalizedField< Item >;\n\tdescriptionField?: NormalizedField< Item >;\n\tregularFields: NormalizedField< Item >[];\n\tbadgeFields: NormalizedField< Item >[];\n\thasBulkActions: boolean;\n\tconfig: {\n\t\tsizes: string;\n\t};\n\tposinset?: number;\n}\n\nfunction GridItem< Item >( {\n\tview,\n\tselection,\n\tonChangeSelection,\n\tonClickItem,\n\tisItemClickable,\n\trenderItemLink,\n\tgetItemId,\n\titem,\n\tactions,\n\tmediaField,\n\ttitleField,\n\tdescriptionField,\n\tregularFields,\n\tbadgeFields,\n\thasBulkActions,\n\tconfig,\n\tposinset,\n}: GridItemProps< Item > ) {\n\tconst {\n\t\tshowTitle = true,\n\t\tshowMedia = true,\n\t\tshowDescription = true,\n\t\tinfiniteScrollEnabled,\n\t} = view;\n\tconst hasBulkAction = useHasAPossibleBulkAction( actions, item );\n\tconst id = getItemId( item );\n\tconst instanceId = useInstanceId( GridItem );\n\tconst isSelected = selection.includes( id );\n\tconst renderedMediaField = mediaField?.render ? (\n\t\t<mediaField.render\n\t\t\titem={ item }\n\t\t\tfield={ mediaField }\n\t\t\tconfig={ config }\n\t\t/>\n\t) : null;\n\tconst renderedTitleField =\n\t\tshowTitle && titleField?.render ? (\n\t\t\t<titleField.render item={ item } field={ titleField } />\n\t\t) : null;\n\tconst shouldRenderMedia = showMedia && renderedMediaField;\n\n\tlet mediaA11yProps;\n\tlet titleA11yProps;\n\tif ( isItemClickable( item ) && onClickItem ) {\n\t\tif ( renderedTitleField ) {\n\t\t\tmediaA11yProps = {\n\t\t\t\t'aria-labelledby': `dataviews-view-grid__title-field-${ instanceId }`,\n\t\t\t};\n\t\t\ttitleA11yProps = {\n\t\t\t\tid: `dataviews-view-grid__title-field-${ instanceId }`,\n\t\t\t};\n\t\t} else {\n\t\t\tmediaA11yProps = {\n\t\t\t\t'aria-label': __( 'Navigate to item' ),\n\t\t\t};\n\t\t}\n\t}\n\tconst { paginationInfo } = useContext( DataViewsContext );\n\n\treturn (\n\t\t<VStack\n\t\t\tspacing={ 0 }\n\t\t\tkey={ id }\n\t\t\tclassName={ clsx( 'dataviews-view-grid__card', {\n\t\t\t\t'is-selected': hasBulkAction && isSelected,\n\t\t\t} ) }\n\t\t\tonClickCapture={ ( event ) => {\n\t\t\t\tif ( isAppleOS() ? event.metaKey : event.ctrlKey ) {\n\t\t\t\t\tevent.stopPropagation();\n\t\t\t\t\tevent.preventDefault();\n\t\t\t\t\tif ( ! hasBulkAction ) {\n\t\t\t\t\t\treturn;\n\t\t\t\t\t}\n\t\t\t\t\tonChangeSelection(\n\t\t\t\t\t\tselection.includes( id )\n\t\t\t\t\t\t\t? selection.filter( ( itemId ) => id !== itemId )\n\t\t\t\t\t\t\t: [ ...selection, id ]\n\t\t\t\t\t);\n\t\t\t\t}\n\t\t\t} }\n\t\t\trole={ infiniteScrollEnabled ? 'article' : undefined }\n\t\t\taria-setsize={\n\t\t\t\tinfiniteScrollEnabled ? paginationInfo.totalItems : undefined\n\t\t\t}\n\t\t\taria-posinset={ posinset }\n\t\t>\n\t\t\t{ shouldRenderMedia && (\n\t\t\t\t<ItemClickWrapper\n\t\t\t\t\titem={ item }\n\t\t\t\t\tisItemClickable={ isItemClickable }\n\t\t\t\t\tonClickItem={ onClickItem }\n\t\t\t\t\trenderItemLink={ renderItemLink }\n\t\t\t\t\tclassName=\"dataviews-view-grid__media\"\n\t\t\t\t\t{ ...mediaA11yProps }\n\t\t\t\t>\n\t\t\t\t\t{ renderedMediaField }\n\t\t\t\t</ItemClickWrapper>\n\t\t\t) }\n\t\t\t{ hasBulkActions && shouldRenderMedia && (\n\t\t\t\t<DataViewsSelectionCheckbox\n\t\t\t\t\titem={ item }\n\t\t\t\t\tselection={ selection }\n\t\t\t\t\tonChangeSelection={ onChangeSelection }\n\t\t\t\t\tgetItemId={ getItemId }\n\t\t\t\t\ttitleField={ titleField }\n\t\t\t\t\tdisabled={ ! hasBulkAction }\n\t\t\t\t/>\n\t\t\t) }\n\t\t\t{ ! showTitle && shouldRenderMedia && !! actions?.length && (\n\t\t\t\t<div className=\"dataviews-view-grid__media-actions\">\n\t\t\t\t\t<ItemActions item={ item } actions={ actions } isCompact />\n\t\t\t\t</div>\n\t\t\t) }\n\t\t\t{ showTitle && (\n\t\t\t\t<HStack\n\t\t\t\t\tjustify=\"space-between\"\n\t\t\t\t\tclassName=\"dataviews-view-grid__title-actions\"\n\t\t\t\t>\n\t\t\t\t\t<ItemClickWrapper\n\t\t\t\t\t\titem={ item }\n\t\t\t\t\t\tisItemClickable={ isItemClickable }\n\t\t\t\t\t\tonClickItem={ onClickItem }\n\t\t\t\t\t\trenderItemLink={ renderItemLink }\n\t\t\t\t\t\tclassName=\"dataviews-view-grid__title-field dataviews-title-field\"\n\t\t\t\t\t\t{ ...titleA11yProps }\n\t\t\t\t\t>\n\t\t\t\t\t\t{ renderedTitleField }\n\t\t\t\t\t</ItemClickWrapper>\n\t\t\t\t\t{ !! actions?.length && (\n\t\t\t\t\t\t<ItemActions\n\t\t\t\t\t\t\titem={ item }\n\t\t\t\t\t\t\tactions={ actions }\n\t\t\t\t\t\t\tisCompact\n\t\t\t\t\t\t/>\n\t\t\t\t\t) }\n\t\t\t\t</HStack>\n\t\t\t) }\n\t\t\t<VStack spacing={ 1 }>\n\t\t\t\t{ showDescription && descriptionField?.render && (\n\t\t\t\t\t<descriptionField.render\n\t\t\t\t\t\titem={ item }\n\t\t\t\t\t\tfield={ descriptionField }\n\t\t\t\t\t/>\n\t\t\t\t) }\n\t\t\t\t{ !! badgeFields?.length && (\n\t\t\t\t\t<HStack\n\t\t\t\t\t\tclassName=\"dataviews-view-grid__badge-fields\"\n\t\t\t\t\t\tspacing={ 2 }\n\t\t\t\t\t\twrap\n\t\t\t\t\t\talignment=\"top\"\n\t\t\t\t\t\tjustify=\"flex-start\"\n\t\t\t\t\t>\n\t\t\t\t\t\t{ badgeFields.map( ( field ) => {\n\t\t\t\t\t\t\treturn (\n\t\t\t\t\t\t\t\t<Badge\n\t\t\t\t\t\t\t\t\tkey={ field.id }\n\t\t\t\t\t\t\t\t\tclassName=\"dataviews-view-grid__field-value\"\n\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t<field.render\n\t\t\t\t\t\t\t\t\t\titem={ item }\n\t\t\t\t\t\t\t\t\t\tfield={ field }\n\t\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t\t</Badge>\n\t\t\t\t\t\t\t);\n\t\t\t\t\t\t} ) }\n\t\t\t\t\t</HStack>\n\t\t\t\t) }\n\t\t\t\t{ !! regularFields?.length && (\n\t\t\t\t\t<VStack\n\t\t\t\t\t\tclassName=\"dataviews-view-grid__fields\"\n\t\t\t\t\t\tspacing={ 1 }\n\t\t\t\t\t>\n\t\t\t\t\t\t{ regularFields.map( ( field ) => {\n\t\t\t\t\t\t\treturn (\n\t\t\t\t\t\t\t\t<Flex\n\t\t\t\t\t\t\t\t\tclassName=\"dataviews-view-grid__field\"\n\t\t\t\t\t\t\t\t\tkey={ field.id }\n\t\t\t\t\t\t\t\t\tgap={ 1 }\n\t\t\t\t\t\t\t\t\tjustify=\"flex-start\"\n\t\t\t\t\t\t\t\t\texpanded\n\t\t\t\t\t\t\t\t\tstyle={ { height: 'auto' } }\n\t\t\t\t\t\t\t\t\tdirection=\"row\"\n\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t<>\n\t\t\t\t\t\t\t\t\t\t<Tooltip text={ field.label }>\n\t\t\t\t\t\t\t\t\t\t\t<FlexItem className=\"dataviews-view-grid__field-name\">\n\t\t\t\t\t\t\t\t\t\t\t\t{ field.header }\n\t\t\t\t\t\t\t\t\t\t\t</FlexItem>\n\t\t\t\t\t\t\t\t\t\t</Tooltip>\n\t\t\t\t\t\t\t\t\t\t<FlexItem\n\t\t\t\t\t\t\t\t\t\t\tclassName=\"dataviews-view-grid__field-value\"\n\t\t\t\t\t\t\t\t\t\t\tstyle={ { maxHeight: 'none' } }\n\t\t\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t\t\t<field.render\n\t\t\t\t\t\t\t\t\t\t\t\titem={ item }\n\t\t\t\t\t\t\t\t\t\t\t\tfield={ field }\n\t\t\t\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t\t\t\t</FlexItem>\n\t\t\t\t\t\t\t\t\t</>\n\t\t\t\t\t\t\t\t</Flex>\n\t\t\t\t\t\t\t);\n\t\t\t\t\t\t} ) }\n\t\t\t\t\t</VStack>\n\t\t\t\t) }\n\t\t\t</VStack>\n\t\t</VStack>\n\t);\n}\n\nfunction ViewGrid< Item >( {\n\tactions,\n\tdata,\n\tfields,\n\tgetItemId,\n\tisLoading,\n\tonChangeSelection,\n\tonClickItem,\n\tisItemClickable,\n\trenderItemLink,\n\tselection,\n\tview,\n\tclassName,\n\tempty,\n}: ViewGridProps< Item > ) {\n\tconst { resizeObserverRef } = useContext( DataViewsContext );\n\tconst titleField = fields.find(\n\t\t( field ) => field.id === view?.titleField\n\t);\n\tconst mediaField = fields.find(\n\t\t( field ) => field.id === view?.mediaField\n\t);\n\tconst descriptionField = fields.find(\n\t\t( field ) => field.id === view?.descriptionField\n\t);\n\tconst otherFields = view.fields ?? [];\n\tconst { regularFields, badgeFields } = otherFields.reduce(\n\t\t(\n\t\t\taccumulator: Record< string, NormalizedField< Item >[] >,\n\t\t\tfieldId\n\t\t) => {\n\t\t\tconst field = fields.find( ( f ) => f.id === fieldId );\n\t\t\tif ( ! field ) {\n\t\t\t\treturn accumulator;\n\t\t\t}\n\t\t\t// If the field is a badge field, add it to the badgeFields array\n\t\t\t// otherwise add it to the rest visibleFields array.\n\t\t\tconst key = view.layout?.badgeFields?.includes( fieldId )\n\t\t\t\t? 'badgeFields'\n\t\t\t\t: 'regularFields';\n\t\t\taccumulator[ key ].push( field );\n\t\t\treturn accumulator;\n\t\t},\n\t\t{ regularFields: [], badgeFields: [] }\n\t);\n\tconst hasData = !! data?.length;\n\tconst hasBulkActions = useSomeItemHasAPossibleBulkAction( actions, data );\n\tconst usedPreviewSize = view.layout?.previewSize;\n\t/*\n\t * This is the maximum width that an image can achieve in the grid. The reasoning is:\n\t * The biggest min image width available is 430px (see /dataviews-layouts/grid/preview-size-picker.tsx).\n\t * Because the grid is responsive, once there is room for another column, the images shrink to accommodate it.\n\t * So each image will never grow past 2*430px plus a little more to account for the gaps.\n\t */\n\tconst size = '900px';\n\n\tconst groupField = view.groupByField\n\t\t? fields.find( ( f ) => f.id === view.groupByField )\n\t\t: null;\n\tconst dataByGroup = groupField ? getDataByGroup( data, groupField ) : null;\n\tconst isInfiniteScroll = view.infiniteScrollEnabled && ! dataByGroup;\n\n\treturn (\n\t\t<>\n\t\t\t{\n\t\t\t\t// Render multiple groups.\n\t\t\t\thasData && groupField && dataByGroup && (\n\t\t\t\t\t<VStack spacing={ 4 }>\n\t\t\t\t\t\t{ Array.from( dataByGroup.entries() ).map(\n\t\t\t\t\t\t\t( [ groupName, groupItems ] ) => (\n\t\t\t\t\t\t\t\t<VStack key={ groupName } spacing={ 2 }>\n\t\t\t\t\t\t\t\t\t<h3 className=\"dataviews-view-grid__group-header\">\n\t\t\t\t\t\t\t\t\t\t{ sprintf(\n\t\t\t\t\t\t\t\t\t\t\t// translators: 1: The label of the field e.g. \"Date\". 2: The value of the field, e.g.: \"May 2022\".\n\t\t\t\t\t\t\t\t\t\t\t__( '%1$s: %2$s' ),\n\t\t\t\t\t\t\t\t\t\t\tgroupField.label,\n\t\t\t\t\t\t\t\t\t\t\tgroupName\n\t\t\t\t\t\t\t\t\t\t) }\n\t\t\t\t\t\t\t\t\t</h3>\n\t\t\t\t\t\t\t\t\t<GridItems\n\t\t\t\t\t\t\t\t\t\tclassName={ clsx(\n\t\t\t\t\t\t\t\t\t\t\t'dataviews-view-grid',\n\t\t\t\t\t\t\t\t\t\t\tclassName\n\t\t\t\t\t\t\t\t\t\t) }\n\t\t\t\t\t\t\t\t\t\tpreviewSize={ usedPreviewSize }\n\t\t\t\t\t\t\t\t\t\taria-busy={ isLoading }\n\t\t\t\t\t\t\t\t\t\tref={ resizeObserverRef }\n\t\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t\t{ groupItems.map( ( item ) => {\n\t\t\t\t\t\t\t\t\t\t\treturn (\n\t\t\t\t\t\t\t\t\t\t\t\t<GridItem\n\t\t\t\t\t\t\t\t\t\t\t\t\tkey={ getItemId( item ) }\n\t\t\t\t\t\t\t\t\t\t\t\t\tview={ view }\n\t\t\t\t\t\t\t\t\t\t\t\t\tselection={ selection }\n\t\t\t\t\t\t\t\t\t\t\t\t\tonChangeSelection={\n\t\t\t\t\t\t\t\t\t\t\t\t\t\tonChangeSelection\n\t\t\t\t\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\t\t\t\t\tonClickItem={ onClickItem }\n\t\t\t\t\t\t\t\t\t\t\t\t\tisItemClickable={\n\t\t\t\t\t\t\t\t\t\t\t\t\t\tisItemClickable\n\t\t\t\t\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\t\t\t\t\trenderItemLink={\n\t\t\t\t\t\t\t\t\t\t\t\t\t\trenderItemLink\n\t\t\t\t\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\t\t\t\t\tgetItemId={ getItemId }\n\t\t\t\t\t\t\t\t\t\t\t\t\titem={ item }\n\t\t\t\t\t\t\t\t\t\t\t\t\tactions={ actions }\n\t\t\t\t\t\t\t\t\t\t\t\t\tmediaField={ mediaField }\n\t\t\t\t\t\t\t\t\t\t\t\t\ttitleField={ titleField }\n\t\t\t\t\t\t\t\t\t\t\t\t\tdescriptionField={\n\t\t\t\t\t\t\t\t\t\t\t\t\t\tdescriptionField\n\t\t\t\t\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\t\t\t\t\tregularFields={\n\t\t\t\t\t\t\t\t\t\t\t\t\t\tregularFields\n\t\t\t\t\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\t\t\t\t\tbadgeFields={ badgeFields }\n\t\t\t\t\t\t\t\t\t\t\t\t\thasBulkActions={\n\t\t\t\t\t\t\t\t\t\t\t\t\t\thasBulkActions\n\t\t\t\t\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\t\t\t\t\tconfig={ {\n\t\t\t\t\t\t\t\t\t\t\t\t\t\tsizes: size,\n\t\t\t\t\t\t\t\t\t\t\t\t\t} }\n\t\t\t\t\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t\t\t\t\t);\n\t\t\t\t\t\t\t\t\t\t} ) }\n\t\t\t\t\t\t\t\t\t</GridItems>\n\t\t\t\t\t\t\t\t</VStack>\n\t\t\t\t\t\t\t)\n\t\t\t\t\t\t) }\n\t\t\t\t\t</VStack>\n\t\t\t\t)\n\t\t\t}\n\n\t\t\t{\n\t\t\t\t// Render a single grid with all data.\n\t\t\t\thasData && ! dataByGroup && (\n\t\t\t\t\t<GridItems\n\t\t\t\t\t\tclassName={ clsx( 'dataviews-view-grid', className ) }\n\t\t\t\t\t\tpreviewSize={ usedPreviewSize }\n\t\t\t\t\t\taria-busy={ isLoading }\n\t\t\t\t\t\tref={ resizeObserverRef }\n\t\t\t\t\t\trole={ isInfiniteScroll ? 'feed' : undefined }\n\t\t\t\t\t>\n\t\t\t\t\t\t{ data.map( ( item, index ) => {\n\t\t\t\t\t\t\treturn (\n\t\t\t\t\t\t\t\t<GridItem\n\t\t\t\t\t\t\t\t\tkey={ getItemId( item ) }\n\t\t\t\t\t\t\t\t\tview={ view }\n\t\t\t\t\t\t\t\t\tselection={ selection }\n\t\t\t\t\t\t\t\t\tonChangeSelection={ onChangeSelection }\n\t\t\t\t\t\t\t\t\tonClickItem={ onClickItem }\n\t\t\t\t\t\t\t\t\tisItemClickable={ isItemClickable }\n\t\t\t\t\t\t\t\t\trenderItemLink={ renderItemLink }\n\t\t\t\t\t\t\t\t\tgetItemId={ getItemId }\n\t\t\t\t\t\t\t\t\titem={ item }\n\t\t\t\t\t\t\t\t\tactions={ actions }\n\t\t\t\t\t\t\t\t\tmediaField={ mediaField }\n\t\t\t\t\t\t\t\t\ttitleField={ titleField }\n\t\t\t\t\t\t\t\t\tdescriptionField={ descriptionField }\n\t\t\t\t\t\t\t\t\tregularFields={ regularFields }\n\t\t\t\t\t\t\t\t\tbadgeFields={ badgeFields }\n\t\t\t\t\t\t\t\t\thasBulkActions={ hasBulkActions }\n\t\t\t\t\t\t\t\t\tconfig={ {\n\t\t\t\t\t\t\t\t\t\tsizes: size,\n\t\t\t\t\t\t\t\t\t} }\n\t\t\t\t\t\t\t\t\tposinset={\n\t\t\t\t\t\t\t\t\t\tisInfiniteScroll ? index + 1 : undefined\n\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t);\n\t\t\t\t\t\t} ) }\n\t\t\t\t\t</GridItems>\n\t\t\t\t)\n\t\t\t}\n\t\t\t{\n\t\t\t\t// Render empty state.\n\t\t\t\t! hasData && (\n\t\t\t\t\t<div\n\t\t\t\t\t\tclassName={ clsx( {\n\t\t\t\t\t\t\t'dataviews-loading': isLoading,\n\t\t\t\t\t\t\t'dataviews-no-results': ! isLoading,\n\t\t\t\t\t\t} ) }\n\t\t\t\t\t>\n\t\t\t\t\t\t{ isLoading ? (\n\t\t\t\t\t\t\t<p>\n\t\t\t\t\t\t\t\t<Spinner />\n\t\t\t\t\t\t\t</p>\n\t\t\t\t\t\t) : (\n\t\t\t\t\t\t\tempty\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\t{ hasData && isLoading && (\n\t\t\t\t<p className=\"dataviews-loading-more\">\n\t\t\t\t\t<Spinner />\n\t\t\t\t</p>\n\t\t\t) }\n\t\t</>\n\t);\n}\n\nexport default ViewGrid;\n"],
|
|
5
|
-
"mappings": "
|
|
5
|
+
"mappings": ";AAGA,OAAO,UAAU;AAMjB;AAAA,EACC,wBAAwB;AAAA,EACxB,wBAAwB;AAAA,EACxB;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,eAAe;AAAA,OACT;AACP,SAAS,IAAI,eAAe;AAC5B,SAAS,qBAAqB;AAC9B,SAAS,iBAAiB;AAC1B,SAAS,kBAAkB;AAK3B,SAAS,cAAc;AACvB,OAAO,iBAAiB;AACxB,OAAO,gCAAgC;AACvC,OAAO,sBAAsB;AAC7B;AAAA,EACC;AAAA,EACA;AAAA,OACM;AAQP,SAAS,wBAAwB;AACjC,SAAS,iBAAiB;AAE1B,OAAO,oBAAoB;AA0DzB,SA0JO,UA1JP,KAqFE,YArFF;AA3DF,IAAM,EAAE,MAAM,IAAI,OAAQ,qBAAsB;AA6BhD,SAAS,SAAkB;AAAA,EAC1B;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACD,GAA2B;AAC1B,QAAM;AAAA,IACL,YAAY;AAAA,IACZ,YAAY;AAAA,IACZ,kBAAkB;AAAA,IAClB;AAAA,EACD,IAAI;AACJ,QAAM,gBAAgB,0BAA2B,SAAS,IAAK;AAC/D,QAAM,KAAK,UAAW,IAAK;AAC3B,QAAM,aAAa,cAAe,QAAS;AAC3C,QAAM,aAAa,UAAU,SAAU,EAAG;AAC1C,QAAM,qBAAqB,YAAY,SACtC;AAAA,IAAC,WAAW;AAAA,IAAX;AAAA,MACA;AAAA,MACA,OAAQ;AAAA,MACR;AAAA;AAAA,EACD,IACG;AACJ,QAAM,qBACL,aAAa,YAAY,SACxB,oBAAC,WAAW,QAAX,EAAkB,MAAc,OAAQ,YAAa,IACnD;AACL,QAAM,oBAAoB,aAAa;AAEvC,MAAI;AACJ,MAAI;AACJ,MAAK,gBAAiB,IAAK,KAAK,aAAc;AAC7C,QAAK,oBAAqB;AACzB,uBAAiB;AAAA,QAChB,mBAAmB,oCAAqC,UAAW;AAAA,MACpE;AACA,uBAAiB;AAAA,QAChB,IAAI,oCAAqC,UAAW;AAAA,MACrD;AAAA,IACD,OAAO;AACN,uBAAiB;AAAA,QAChB,cAAc,GAAI,kBAAmB;AAAA,MACtC;AAAA,IACD;AAAA,EACD;AACA,QAAM,EAAE,eAAe,IAAI,WAAY,gBAAiB;AAExD,SACC;AAAA,IAAC;AAAA;AAAA,MACA,SAAU;AAAA,MAEV,WAAY,KAAM,6BAA6B;AAAA,QAC9C,eAAe,iBAAiB;AAAA,MACjC,CAAE;AAAA,MACF,gBAAiB,CAAE,UAAW;AAC7B,YAAK,UAAU,IAAI,MAAM,UAAU,MAAM,SAAU;AAClD,gBAAM,gBAAgB;AACtB,gBAAM,eAAe;AACrB,cAAK,CAAE,eAAgB;AACtB;AAAA,UACD;AACA;AAAA,YACC,UAAU,SAAU,EAAG,IACpB,UAAU,OAAQ,CAAE,WAAY,OAAO,MAAO,IAC9C,CAAE,GAAG,WAAW,EAAG;AAAA,UACvB;AAAA,QACD;AAAA,MACD;AAAA,MACA,MAAO,wBAAwB,YAAY;AAAA,MAC3C,gBACC,wBAAwB,eAAe,aAAa;AAAA,MAErD,iBAAgB;AAAA,MAEd;AAAA,6BACD;AAAA,UAAC;AAAA;AAAA,YACA;AAAA,YACA;AAAA,YACA;AAAA,YACA;AAAA,YACA,WAAU;AAAA,YACR,GAAG;AAAA,YAEH;AAAA;AAAA,QACH;AAAA,QAEC,kBAAkB,qBACnB;AAAA,UAAC;AAAA;AAAA,YACA;AAAA,YACA;AAAA,YACA;AAAA,YACA;AAAA,YACA;AAAA,YACA,UAAW,CAAE;AAAA;AAAA,QACd;AAAA,QAEC,CAAE,aAAa,qBAAqB,CAAC,CAAE,SAAS,UACjD,oBAAC,SAAI,WAAU,sCACd,8BAAC,eAAY,MAAc,SAAoB,WAAS,MAAC,GAC1D;AAAA,QAEC,aACD;AAAA,UAAC;AAAA;AAAA,YACA,SAAQ;AAAA,YACR,WAAU;AAAA,YAEV;AAAA;AAAA,gBAAC;AAAA;AAAA,kBACA;AAAA,kBACA;AAAA,kBACA;AAAA,kBACA;AAAA,kBACA,WAAU;AAAA,kBACR,GAAG;AAAA,kBAEH;AAAA;AAAA,cACH;AAAA,cACE,CAAC,CAAE,SAAS,UACb;AAAA,gBAAC;AAAA;AAAA,kBACA;AAAA,kBACA;AAAA,kBACA,WAAS;AAAA;AAAA,cACV;AAAA;AAAA;AAAA,QAEF;AAAA,QAED,qBAAC,UAAO,SAAU,GACf;AAAA,6BAAmB,kBAAkB,UACtC;AAAA,YAAC,iBAAiB;AAAA,YAAjB;AAAA,cACA;AAAA,cACA,OAAQ;AAAA;AAAA,UACT;AAAA,UAEC,CAAC,CAAE,aAAa,UACjB;AAAA,YAAC;AAAA;AAAA,cACA,WAAU;AAAA,cACV,SAAU;AAAA,cACV,MAAI;AAAA,cACJ,WAAU;AAAA,cACV,SAAQ;AAAA,cAEN,sBAAY,IAAK,CAAE,UAAW;AAC/B,uBACC;AAAA,kBAAC;AAAA;AAAA,oBAEA,WAAU;AAAA,oBAEV;AAAA,sBAAC,MAAM;AAAA,sBAAN;AAAA,wBACA;AAAA,wBACA;AAAA;AAAA,oBACD;AAAA;AAAA,kBANM,MAAM;AAAA,gBAOb;AAAA,cAEF,CAAE;AAAA;AAAA,UACH;AAAA,UAEC,CAAC,CAAE,eAAe,UACnB;AAAA,YAAC;AAAA;AAAA,cACA,WAAU;AAAA,cACV,SAAU;AAAA,cAER,wBAAc,IAAK,CAAE,UAAW;AACjC,uBACC;AAAA,kBAAC;AAAA;AAAA,oBACA,WAAU;AAAA,oBAEV,KAAM;AAAA,oBACN,SAAQ;AAAA,oBACR,UAAQ;AAAA,oBACR,OAAQ,EAAE,QAAQ,OAAO;AAAA,oBACzB,WAAU;AAAA,oBAEV,2CACC;AAAA,0CAAC,WAAQ,MAAO,MAAM,OACrB,8BAAC,YAAS,WAAU,mCACjB,gBAAM,QACT,GACD;AAAA,sBACA;AAAA,wBAAC;AAAA;AAAA,0BACA,WAAU;AAAA,0BACV,OAAQ,EAAE,WAAW,OAAO;AAAA,0BAE5B;AAAA,4BAAC,MAAM;AAAA,4BAAN;AAAA,8BACA;AAAA,8BACA;AAAA;AAAA,0BACD;AAAA;AAAA,sBACD;AAAA,uBACD;AAAA;AAAA,kBAtBM,MAAM;AAAA,gBAuBb;AAAA,cAEF,CAAE;AAAA;AAAA,UACH;AAAA,WAEF;AAAA;AAAA;AAAA,IA9IM;AAAA,EA+IP;AAEF;AAEA,SAAS,SAAkB;AAAA,EAC1B;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACD,GAA2B;AAC1B,QAAM,EAAE,kBAAkB,IAAI,WAAY,gBAAiB;AAC3D,QAAM,aAAa,OAAO;AAAA,IACzB,CAAE,UAAW,MAAM,OAAO,MAAM;AAAA,EACjC;AACA,QAAM,aAAa,OAAO;AAAA,IACzB,CAAE,UAAW,MAAM,OAAO,MAAM;AAAA,EACjC;AACA,QAAM,mBAAmB,OAAO;AAAA,IAC/B,CAAE,UAAW,MAAM,OAAO,MAAM;AAAA,EACjC;AACA,QAAM,cAAc,KAAK,UAAU,CAAC;AACpC,QAAM,EAAE,eAAe,YAAY,IAAI,YAAY;AAAA,IAClD,CACC,aACA,YACI;AACJ,YAAM,QAAQ,OAAO,KAAM,CAAE,MAAO,EAAE,OAAO,OAAQ;AACrD,UAAK,CAAE,OAAQ;AACd,eAAO;AAAA,MACR;AAGA,YAAM,MAAM,KAAK,QAAQ,aAAa,SAAU,OAAQ,IACrD,gBACA;AACH,kBAAa,GAAI,EAAE,KAAM,KAAM;AAC/B,aAAO;AAAA,IACR;AAAA,IACA,EAAE,eAAe,CAAC,GAAG,aAAa,CAAC,EAAE;AAAA,EACtC;AACA,QAAM,UAAU,CAAC,CAAE,MAAM;AACzB,QAAM,iBAAiB,kCAAmC,SAAS,IAAK;AACxE,QAAM,kBAAkB,KAAK,QAAQ;AAOrC,QAAM,OAAO;AAEb,QAAM,aAAa,KAAK,eACrB,OAAO,KAAM,CAAE,MAAO,EAAE,OAAO,KAAK,YAAa,IACjD;AACH,QAAM,cAAc,aAAa,eAAgB,MAAM,UAAW,IAAI;AACtE,QAAM,mBAAmB,KAAK,yBAAyB,CAAE;AAEzD,SACC;AAAA;AAAA,IAGE;AAAA,iBAAW,cAAc,eACxB,oBAAC,UAAO,SAAU,GACf,gBAAM,KAAM,YAAY,QAAQ,CAAE,EAAE;AAAA,QACrC,CAAE,CAAE,WAAW,UAAW,MACzB,qBAAC,UAAyB,SAAU,GACnC;AAAA,8BAAC,QAAG,WAAU,qCACX;AAAA;AAAA,YAED,GAAI,YAAa;AAAA,YACjB,WAAW;AAAA,YACX;AAAA,UACD,GACD;AAAA,UACA;AAAA,YAAC;AAAA;AAAA,cACA,WAAY;AAAA,gBACX;AAAA,gBACA;AAAA,cACD;AAAA,cACA,aAAc;AAAA,cACd,aAAY;AAAA,cACZ,KAAM;AAAA,cAEJ,qBAAW,IAAK,CAAE,SAAU;AAC7B,uBACC;AAAA,kBAAC;AAAA;AAAA,oBAEA;AAAA,oBACA;AAAA,oBACA;AAAA,oBAGA;AAAA,oBACA;AAAA,oBAGA;AAAA,oBAGA;AAAA,oBACA;AAAA,oBACA;AAAA,oBACA;AAAA,oBACA;AAAA,oBACA;AAAA,oBAGA;AAAA,oBAGA;AAAA,oBACA;AAAA,oBAGA,QAAS;AAAA,sBACR,OAAO;AAAA,oBACR;AAAA;AAAA,kBA9BM,UAAW,IAAK;AAAA,gBA+BvB;AAAA,cAEF,CAAE;AAAA;AAAA,UACH;AAAA,aAvDa,SAwDd;AAAA,MAEF,GACD;AAAA;AAAA,MAMD,WAAW,CAAE,eACZ;AAAA,QAAC;AAAA;AAAA,UACA,WAAY,KAAM,uBAAuB,SAAU;AAAA,UACnD,aAAc;AAAA,UACd,aAAY;AAAA,UACZ,KAAM;AAAA,UACN,MAAO,mBAAmB,SAAS;AAAA,UAEjC,eAAK,IAAK,CAAE,MAAM,UAAW;AAC9B,mBACC;AAAA,cAAC;AAAA;AAAA,gBAEA;AAAA,gBACA;AAAA,gBACA;AAAA,gBACA;AAAA,gBACA;AAAA,gBACA;AAAA,gBACA;AAAA,gBACA;AAAA,gBACA;AAAA,gBACA;AAAA,gBACA;AAAA,gBACA;AAAA,gBACA;AAAA,gBACA;AAAA,gBACA;AAAA,gBACA,QAAS;AAAA,kBACR,OAAO;AAAA,gBACR;AAAA,gBACA,UACC,mBAAmB,QAAQ,IAAI;AAAA;AAAA,cApB1B,UAAW,IAAK;AAAA,YAsBvB;AAAA,UAEF,CAAE;AAAA;AAAA,MACH;AAAA;AAAA,MAKD,CAAE,WACD;AAAA,QAAC;AAAA;AAAA,UACA,WAAY,KAAM;AAAA,YACjB,qBAAqB;AAAA,YACrB,wBAAwB,CAAE;AAAA,UAC3B,CAAE;AAAA,UAEA,sBACD,oBAAC,OACA,8BAAC,WAAQ,GACV,IAEA;AAAA;AAAA,MAEF;AAAA,MAGA,WAAW,aACZ,oBAAC,OAAE,WAAU,0BACZ,8BAAC,WAAQ,GACV;AAAA;AAAA,GAEF;AAEF;AAEA,IAAO,eAAQ;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
|
@@ -1,9 +1,10 @@
|
|
|
1
|
-
|
|
1
|
+
// packages/dataviews/src/dataviews-layouts/grid/preview-size-picker.tsx
|
|
2
2
|
import { RangeControl } from "@wordpress/components";
|
|
3
3
|
import { __ } from "@wordpress/i18n";
|
|
4
4
|
import { useContext } from "@wordpress/element";
|
|
5
5
|
import DataViewsContext from "../../components/dataviews-context";
|
|
6
|
-
|
|
6
|
+
import { jsx } from "react/jsx-runtime";
|
|
7
|
+
var imageSizes = [
|
|
7
8
|
{
|
|
8
9
|
value: 120,
|
|
9
10
|
breakpoint: 1
|
|
@@ -2,6 +2,6 @@
|
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../src/dataviews-layouts/grid/preview-size-picker.tsx"],
|
|
4
4
|
"sourcesContent": ["/**\n * WordPress dependencies\n */\nimport { RangeControl } from '@wordpress/components';\nimport { __ } from '@wordpress/i18n';\nimport { useContext } from '@wordpress/element';\n\n/**\n * Internal dependencies\n */\nimport DataViewsContext from '../../components/dataviews-context';\nimport type { ViewGrid } from '../../types';\n\nconst imageSizes = [\n\t{\n\t\tvalue: 120,\n\t\tbreakpoint: 1,\n\t},\n\t{\n\t\tvalue: 170,\n\t\tbreakpoint: 1,\n\t},\n\t{\n\t\tvalue: 230,\n\t\tbreakpoint: 1,\n\t},\n\t{\n\t\tvalue: 290,\n\t\tbreakpoint: 1112, // at minimum image width, 4 images display at this container size\n\t},\n\t{\n\t\tvalue: 350,\n\t\tbreakpoint: 1636, // at minimum image width, 6 images display at this container size\n\t},\n\t{\n\t\tvalue: 430,\n\t\tbreakpoint: 588, // at minimum image width, 2 images display at this container size\n\t},\n];\n\nexport default function PreviewSizePicker() {\n\tconst context = useContext( DataViewsContext );\n\tconst view = context.view as ViewGrid;\n\n\tconst breakValues = imageSizes.filter( ( size ) => {\n\t\treturn context.containerWidth >= size.breakpoint;\n\t} );\n\n\tconst layoutPreviewSize = view.layout?.previewSize ?? 230; // Default to the third smallest size if no preview size is set.\n\t// If the container has resized and the set preview size is no longer available,\n\t// we reset it to the next smallest size, or the smallest available size.\n\tconst previewSizeToUse =\n\t\tbreakValues\n\t\t\t.map( ( size, index ) => ( { ...size, index } ) )\n\t\t\t.filter( ( size ) => size.value <= layoutPreviewSize )\n\t\t\t.sort( ( a, b ) => b.value - a.value )[ 0 ]?.index ?? 0;\n\n\tconst marks = breakValues.map( ( size, index ) => {\n\t\treturn {\n\t\t\tvalue: index,\n\t\t};\n\t} );\n\n\treturn (\n\t\t<RangeControl\n\t\t\t__nextHasNoMarginBottom\n\t\t\t__next40pxDefaultSize\n\t\t\tshowTooltip={ false }\n\t\t\tlabel={ __( 'Preview size' ) }\n\t\t\tvalue={ previewSizeToUse }\n\t\t\tmin={ 0 }\n\t\t\tmax={ breakValues.length - 1 }\n\t\t\twithInputField={ false }\n\t\t\tonChange={ ( value = 0 ) => {\n\t\t\t\tcontext.onChangeView( {\n\t\t\t\t\t...view,\n\t\t\t\t\tlayout: {\n\t\t\t\t\t\t...view.layout,\n\t\t\t\t\t\tpreviewSize: breakValues[ value ].value,\n\t\t\t\t\t},\n\t\t\t\t} );\n\t\t\t} }\n\t\t\tstep={ 1 }\n\t\t\tmarks={ marks }\n\t\t/>\n\t);\n}\n"],
|
|
5
|
-
"mappings": "
|
|
5
|
+
"mappings": ";AAGA,SAAS,oBAAoB;AAC7B,SAAS,UAAU;AACnB,SAAS,kBAAkB;AAK3B,OAAO,sBAAsB;AAsD3B;AAnDF,IAAM,aAAa;AAAA,EAClB;AAAA,IACC,OAAO;AAAA,IACP,YAAY;AAAA,EACb;AAAA,EACA;AAAA,IACC,OAAO;AAAA,IACP,YAAY;AAAA,EACb;AAAA,EACA;AAAA,IACC,OAAO;AAAA,IACP,YAAY;AAAA,EACb;AAAA,EACA;AAAA,IACC,OAAO;AAAA,IACP,YAAY;AAAA;AAAA,EACb;AAAA,EACA;AAAA,IACC,OAAO;AAAA,IACP,YAAY;AAAA;AAAA,EACb;AAAA,EACA;AAAA,IACC,OAAO;AAAA,IACP,YAAY;AAAA;AAAA,EACb;AACD;AAEe,SAAR,oBAAqC;AAC3C,QAAM,UAAU,WAAY,gBAAiB;AAC7C,QAAM,OAAO,QAAQ;AAErB,QAAM,cAAc,WAAW,OAAQ,CAAE,SAAU;AAClD,WAAO,QAAQ,kBAAkB,KAAK;AAAA,EACvC,CAAE;AAEF,QAAM,oBAAoB,KAAK,QAAQ,eAAe;AAGtD,QAAM,mBACL,YACE,IAAK,CAAE,MAAM,WAAa,EAAE,GAAG,MAAM,MAAM,EAAI,EAC/C,OAAQ,CAAE,SAAU,KAAK,SAAS,iBAAkB,EACpD,KAAM,CAAE,GAAG,MAAO,EAAE,QAAQ,EAAE,KAAM,EAAG,CAAE,GAAG,SAAS;AAExD,QAAM,QAAQ,YAAY,IAAK,CAAE,MAAM,UAAW;AACjD,WAAO;AAAA,MACN,OAAO;AAAA,IACR;AAAA,EACD,CAAE;AAEF,SACC;AAAA,IAAC;AAAA;AAAA,MACA,yBAAuB;AAAA,MACvB,uBAAqB;AAAA,MACrB,aAAc;AAAA,MACd,OAAQ,GAAI,cAAe;AAAA,MAC3B,OAAQ;AAAA,MACR,KAAM;AAAA,MACN,KAAM,YAAY,SAAS;AAAA,MAC3B,gBAAiB;AAAA,MACjB,UAAW,CAAE,QAAQ,MAAO;AAC3B,gBAAQ,aAAc;AAAA,UACrB,GAAG;AAAA,UACH,QAAQ;AAAA,YACP,GAAG,KAAK;AAAA,YACR,aAAa,YAAa,KAAM,EAAE;AAAA,UACnC;AAAA,QACD,CAAE;AAAA,MACH;AAAA,MACA,MAAO;AAAA,MACP;AAAA;AAAA,EACD;AAEF;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|