@wordpress/dataviews 0.2.0

package/build/view-table.js

@@ -0,0 +1,286 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _react = require("react");
+var _i18n = require("@wordpress/i18n");
+var _compose = require("@wordpress/compose");
+var _icons = require("@wordpress/icons");
+var _components = require("@wordpress/components");
+var _element = require("@wordpress/element");
+var _lockUnlock = require("./lock-unlock");
+var _itemActions = _interopRequireDefault(require("./item-actions"));
+var _constants = require("./constants");
+/**
+ * WordPress dependencies
+ */
+
+/**
+ * Internal dependencies
+ */
+
+const {
+  DropdownMenuV2: DropdownMenu,
+  DropdownMenuGroupV2: DropdownMenuGroup,
+  DropdownMenuItemV2: DropdownMenuItem,
+  DropdownMenuSeparatorV2: DropdownMenuSeparator,
+  DropdownSubMenuV2: DropdownSubMenu,
+  DropdownSubMenuTriggerV2: DropdownSubMenuTrigger
+} = (0, _lockUnlock.unlock)(_components.privateApis);
+const sortingItemsInfo = {
+  asc: {
+    icon: _icons.arrowUp,
+    label: (0, _i18n.__)('Sort ascending')
+  },
+  desc: {
+    icon: _icons.arrowDown,
+    label: (0, _i18n.__)('Sort descending')
+  }
+};
+const sortIcons = {
+  asc: _icons.chevronUp,
+  desc: _icons.chevronDown
+};
+function HeaderMenu({
+  field,
+  view,
+  onChangeView
+}) {
+  const isSortable = field.enableSorting !== false;
+  const isHidable = field.enableHiding !== false;
+  if (!isSortable && !isHidable) {
+    return field.header;
+  }
+  const isSorted = view.sort?.field === field.id;
+  let filter, filterInView;
+  const otherFilters = [];
+  if (field.type === _constants.ENUMERATION_TYPE) {
+    let columnOperators = field.filterBy?.operators;
+    if (!columnOperators || !Array.isArray(columnOperators)) {
+      columnOperators = [_constants.OPERATOR_IN, _constants.OPERATOR_NOT_IN];
+    }
+    const operators = columnOperators.filter(operator => [_constants.OPERATOR_IN, _constants.OPERATOR_NOT_IN].includes(operator));
+    if (operators.length >= 0) {
+      filter = {
+        field: field.id,
+        operators,
+        elements: field.elements || []
+      };
+      filterInView = {
+        field: filter.field,
+        operator: filter.operators[0],
+        value: undefined
+      };
+    }
+  }
+  const isFilterable = !!filter;
+  if (isFilterable) {
+    const columnFilters = view.filters;
+    columnFilters.forEach(columnFilter => {
+      if (columnFilter.field === filter.field) {
+        filterInView = {
+          ...columnFilter
+        };
+      } else {
+        otherFilters.push(columnFilter);
+      }
+    });
+  }
+  return (0, _react.createElement)(DropdownMenu, {
+    align: "start",
+    trigger: (0, _react.createElement)(_components.Button, {
+      icon: isSorted && sortIcons[view.sort.direction],
+      iconPosition: "right",
+      text: field.header,
+      style: {
+        padding: 0
+      },
+      size: "compact"
+    })
+  }, (0, _react.createElement)(WithSeparators, null, isSortable && (0, _react.createElement)(DropdownMenuGroup, null, Object.entries(sortingItemsInfo).map(([direction, info]) => {
+    const isActive = isSorted && view.sort.direction === direction;
+    return (0, _react.createElement)(DropdownMenuItem, {
+      key: direction,
+      role: "menuitemradio",
+      "aria-checked": isActive,
+      prefix: (0, _react.createElement)(_components.Icon, {
+        icon: info.icon
+      }),
+      suffix: isActive && (0, _react.createElement)(_components.Icon, {
+        icon: _icons.check
+      }),
+      onSelect: event => {
+        event.preventDefault();
+        onChangeView({
+          ...view,
+          sort: {
+            field: field.id,
+            direction
+          }
+        });
+      }
+    }, info.label);
+  })), isHidable && (0, _react.createElement)(DropdownMenuItem, {
+    role: "menuitemradio",
+    "aria-checked": false,
+    prefix: (0, _react.createElement)(_components.Icon, {
+      icon: _icons.unseen
+    }),
+    onSelect: event => {
+      event.preventDefault();
+      onChangeView({
+        ...view,
+        hiddenFields: view.hiddenFields.concat(field.id)
+      });
+    }
+  }, (0, _i18n.__)('Hide')), isFilterable && (0, _react.createElement)(DropdownMenuGroup, null, (0, _react.createElement)(DropdownSubMenu, {
+    key: filter.field,
+    trigger: (0, _react.createElement)(DropdownSubMenuTrigger, {
+      prefix: (0, _react.createElement)(_components.Icon, {
+        icon: _icons.funnel
+      }),
+      suffix: (0, _react.createElement)(_components.Icon, {
+        icon: _icons.chevronRightSmall
+      })
+    }, (0, _i18n.__)('Filter by'))
+  }, (0, _react.createElement)(WithSeparators, null, (0, _react.createElement)(DropdownMenuGroup, null, filter.elements.map(element => {
+    let isActive = false;
+    if (filterInView) {
+      // Intentionally use loose comparison, so it does type conversion.
+      // This covers the case where a top-level filter for the same field converts a number into a string.
+      /* eslint-disable eqeqeq */
+      isActive = element.value == filterInView.value;
+      /* eslint-enable eqeqeq */
+    }
+
+    return (0, _react.createElement)(DropdownMenuItem, {
+      key: element.value,
+      role: "menuitemradio",
+      "aria-checked": isActive,
+      prefix: isActive && (0, _react.createElement)(_components.Icon, {
+        icon: _icons.check
+      }),
+      onSelect: () => {
+        onChangeView({
+          ...view,
+          filters: [...otherFilters, {
+            field: filter.field,
+            operator: filterInView?.operator,
+            value: isActive ? undefined : element.value
+          }]
+        });
+      }
+    }, element.label);
+  })), filter.operators.length > 1 && (0, _react.createElement)(DropdownSubMenu, {
+    trigger: (0, _react.createElement)(DropdownSubMenuTrigger, {
+      suffix: (0, _react.createElement)(_element.Fragment, null, filterInView.operator === _constants.OPERATOR_IN ? (0, _i18n.__)('Is') : (0, _i18n.__)('Is not'), (0, _react.createElement)(_components.Icon, {
+        icon: _icons.chevronRightSmall
+      }), ' ')
+    }, (0, _i18n.__)('Conditions'))
+  }, (0, _react.createElement)(DropdownMenuItem, {
+    key: "in-filter",
+    role: "menuitemradio",
+    "aria-checked": filterInView?.operator === _constants.OPERATOR_IN,
+    prefix: filterInView?.operator === _constants.OPERATOR_IN && (0, _react.createElement)(_components.Icon, {
+      icon: _icons.check
+    }),
+    onSelect: () => onChangeView({
+      ...view,
+      filters: [...otherFilters, {
+        field: filter.field,
+        operator: _constants.OPERATOR_IN,
+        value: filterInView?.value
+      }]
+    })
+  }, (0, _i18n.__)('Is')), (0, _react.createElement)(DropdownMenuItem, {
+    key: "not-in-filter",
+    role: "menuitemradio",
+    "aria-checked": filterInView?.operator === _constants.OPERATOR_NOT_IN,
+    prefix: filterInView?.operator === _constants.OPERATOR_NOT_IN && (0, _react.createElement)(_components.Icon, {
+      icon: _icons.check
+    }),
+    onSelect: () => onChangeView({
+      ...view,
+      filters: [...otherFilters, {
+        field: filter.field,
+        operator: _constants.OPERATOR_NOT_IN,
+        value: filterInView?.value
+      }]
+    })
+  }, (0, _i18n.__)('Is not'))))))));
+}
+function WithSeparators({
+  children
+}) {
+  return _element.Children.toArray(children).filter(Boolean).map((child, i) => (0, _react.createElement)(_element.Fragment, {
+    key: i
+  }, i > 0 && (0, _react.createElement)(DropdownMenuSeparator, null), child));
+}
+function ViewTable({
+  view,
+  onChangeView,
+  fields,
+  actions,
+  data,
+  getItemId,
+  isLoading = false,
+  deferredRendering
+}) {
+  const visibleFields = fields.filter(field => !view.hiddenFields.includes(field.id) && ![view.layout.mediaField, view.layout.primaryField].includes(field.id));
+  const shownData = (0, _compose.useAsyncList)(data);
+  const usedData = deferredRendering ? shownData : data;
+  const hasData = !!usedData?.length;
+  if (isLoading) {
+    // TODO:Add spinner or progress bar..
+    return (0, _react.createElement)("div", {
+      className: "dataviews-loading"
+    }, (0, _react.createElement)("h3", null, (0, _i18n.__)('Loading')));
+  }
+  const sortValues = {
+    asc: 'ascending',
+    desc: 'descending'
+  };
+  return (0, _react.createElement)("div", {
+    className: "dataviews-table-view-wrapper"
+  }, hasData && (0, _react.createElement)("table", {
+    className: "dataviews-table-view"
+  }, (0, _react.createElement)("thead", null, (0, _react.createElement)("tr", null, visibleFields.map(field => (0, _react.createElement)("th", {
+    key: field.id,
+    style: {
+      width: field.width || undefined,
+      minWidth: field.minWidth || undefined,
+      maxWidth: field.maxWidth || undefined
+    },
+    "data-field-id": field.id,
+    "aria-sort": view.sort?.field === field.id && sortValues[view.sort.direction],
+    scope: "col"
+  }, (0, _react.createElement)(HeaderMenu, {
+    field: field,
+    view: view,
+    onChangeView: onChangeView
+  }))), !!actions?.length && (0, _react.createElement)("th", {
+    "data-field-id": "actions"
+  }, (0, _i18n.__)('Actions')))), (0, _react.createElement)("tbody", null, usedData.map((item, index) => (0, _react.createElement)("tr", {
+    key: getItemId?.(item) || index
+  }, visibleFields.map(field => (0, _react.createElement)("td", {
+    key: field.id,
+    style: {
+      width: field.width || undefined,
+      minWidth: field.minWidth || undefined,
+      maxWidth: field.maxWidth || undefined
+    }
+  }, field.render({
+    item
+  }))), !!actions?.length && (0, _react.createElement)("td", null, (0, _react.createElement)(_itemActions.default, {
+    item: item,
+    actions: actions
+  })))))), !hasData && (0, _react.createElement)("div", {
+    className: "dataviews-no-results"
+  }, (0, _react.createElement)("p", null, (0, _i18n.__)('No results'))));
+}
+var _default = ViewTable;
+exports.default = _default;
+//# sourceMappingURL=view-table.js.map

package/build/view-table.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["_i18n","require","_compose","_icons","_components","_element","_lockUnlock","_itemActions","_interopRequireDefault","_constants","DropdownMenuV2","DropdownMenu","DropdownMenuGroupV2","DropdownMenuGroup","DropdownMenuItemV2","DropdownMenuItem","DropdownMenuSeparatorV2","DropdownMenuSeparator","DropdownSubMenuV2","DropdownSubMenu","DropdownSubMenuTriggerV2","DropdownSubMenuTrigger","unlock","componentsPrivateApis","sortingItemsInfo","asc","icon","arrowUp","label","__","desc","arrowDown","sortIcons","chevronUp","chevronDown","HeaderMenu","field","view","onChangeView","isSortable","enableSorting","isHidable","enableHiding","header","isSorted","sort","id","filter","filterInView","otherFilters","type","ENUMERATION_TYPE","columnOperators","filterBy","operators","Array","isArray","OPERATOR_IN","OPERATOR_NOT_IN","operator","includes","length","elements","value","undefined","isFilterable","columnFilters","filters","forEach","columnFilter","push","_react","createElement","align","trigger","Button","direction","iconPosition","text","style","padding","size","WithSeparators","Object","entries","map","info","isActive","key","role","prefix","Icon","suffix","check","onSelect","event","preventDefault","unseen","hiddenFields","concat","funnel","chevronRightSmall","element","Fragment","children","Children","toArray","Boolean","child","i","ViewTable","fields","actions","data","getItemId","isLoading","deferredRendering","visibleFields","layout","mediaField","primaryField","shownData","useAsyncList","usedData","hasData","className","sortValues","width","minWidth","maxWidth","scope","item","index","render","default","_default","exports"],"sources":["@wordpress/dataviews/src/view-table.js"],"sourcesContent":["/**\n * WordPress dependencies\n */\nimport { __ } from '@wordpress/i18n';\nimport { useAsyncList } from '@wordpress/compose';\nimport {\n\tchevronDown,\n\tchevronUp,\n\tunseen,\n\tcheck,\n\tarrowUp,\n\tarrowDown,\n\tchevronRightSmall,\n\tfunnel,\n} from '@wordpress/icons';\nimport {\n\tButton,\n\tIcon,\n\tprivateApis as componentsPrivateApis,\n} from '@wordpress/components';\nimport { Children, Fragment } from '@wordpress/element';\n\n/**\n * Internal dependencies\n */\nimport { unlock } from './lock-unlock';\nimport ItemActions from './item-actions';\nimport { ENUMERATION_TYPE, OPERATOR_IN, OPERATOR_NOT_IN } from './constants';\n\nconst {\n\tDropdownMenuV2: DropdownMenu,\n\tDropdownMenuGroupV2: DropdownMenuGroup,\n\tDropdownMenuItemV2: DropdownMenuItem,\n\tDropdownMenuSeparatorV2: DropdownMenuSeparator,\n\tDropdownSubMenuV2: DropdownSubMenu,\n\tDropdownSubMenuTriggerV2: DropdownSubMenuTrigger,\n} = unlock( componentsPrivateApis );\n\nconst sortingItemsInfo = {\n\tasc: { icon: arrowUp, label: __( 'Sort ascending' ) },\n\tdesc: { icon: arrowDown, label: __( 'Sort descending' ) },\n};\nconst sortIcons = { asc: chevronUp, desc: chevronDown };\n\nfunction HeaderMenu( { field, view, onChangeView } ) {\n\tconst isSortable = field.enableSorting !== false;\n\tconst isHidable = field.enableHiding !== false;\n\tif ( ! isSortable && ! isHidable ) {\n\t\treturn field.header;\n\t}\n\tconst isSorted = view.sort?.field === field.id;\n\tlet filter, filterInView;\n\tconst otherFilters = [];\n\tif ( field.type === ENUMERATION_TYPE ) {\n\t\tlet columnOperators = field.filterBy?.operators;\n\t\tif ( ! columnOperators || ! Array.isArray( columnOperators ) ) {\n\t\t\tcolumnOperators = [ OPERATOR_IN, OPERATOR_NOT_IN ];\n\t\t}\n\t\tconst operators = columnOperators.filter( ( operator ) =>\n\t\t\t[ OPERATOR_IN, OPERATOR_NOT_IN ].includes( operator )\n\t\t);\n\t\tif ( operators.length >= 0 ) {\n\t\t\tfilter = {\n\t\t\t\tfield: field.id,\n\t\t\t\toperators,\n\t\t\t\telements: field.elements || [],\n\t\t\t};\n\t\t\tfilterInView = {\n\t\t\t\tfield: filter.field,\n\t\t\t\toperator: filter.operators[ 0 ],\n\t\t\t\tvalue: undefined,\n\t\t\t};\n\t\t}\n\t}\n\tconst isFilterable = !! filter;\n\n\tif ( isFilterable ) {\n\t\tconst columnFilters = view.filters;\n\t\tcolumnFilters.forEach( ( columnFilter ) => {\n\t\t\tif ( columnFilter.field === filter.field ) {\n\t\t\t\tfilterInView = {\n\t\t\t\t\t...columnFilter,\n\t\t\t\t};\n\t\t\t} else {\n\t\t\t\totherFilters.push( columnFilter );\n\t\t\t}\n\t\t} );\n\t}\n\treturn (\n\t\t<DropdownMenu\n\t\t\talign=\"start\"\n\t\t\ttrigger={\n\t\t\t\t<Button\n\t\t\t\t\ticon={ isSorted && sortIcons[ view.sort.direction ] }\n\t\t\t\t\ticonPosition=\"right\"\n\t\t\t\t\ttext={ field.header }\n\t\t\t\t\tstyle={ { padding: 0 } }\n\t\t\t\t\tsize=\"compact\"\n\t\t\t\t/>\n\t\t\t}\n\t\t>\n\t\t\t<WithSeparators>\n\t\t\t\t{ isSortable && (\n\t\t\t\t\t<DropdownMenuGroup>\n\t\t\t\t\t\t{ Object.entries( sortingItemsInfo ).map(\n\t\t\t\t\t\t\t( [ direction, info ] ) => {\n\t\t\t\t\t\t\t\tconst isActive =\n\t\t\t\t\t\t\t\t\tisSorted &&\n\t\t\t\t\t\t\t\t\tview.sort.direction === direction;\n\t\t\t\t\t\t\t\treturn (\n\t\t\t\t\t\t\t\t\t<DropdownMenuItem\n\t\t\t\t\t\t\t\t\t\tkey={ direction }\n\t\t\t\t\t\t\t\t\t\trole=\"menuitemradio\"\n\t\t\t\t\t\t\t\t\t\taria-checked={ isActive }\n\t\t\t\t\t\t\t\t\t\tprefix={ <Icon icon={ info.icon } /> }\n\t\t\t\t\t\t\t\t\t\tsuffix={\n\t\t\t\t\t\t\t\t\t\t\tisActive && <Icon icon={ check } />\n\t\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\t\tonSelect={ ( event ) => {\n\t\t\t\t\t\t\t\t\t\t\tevent.preventDefault();\n\t\t\t\t\t\t\t\t\t\t\tonChangeView( {\n\t\t\t\t\t\t\t\t\t\t\t\t...view,\n\t\t\t\t\t\t\t\t\t\t\t\tsort: {\n\t\t\t\t\t\t\t\t\t\t\t\t\tfield: field.id,\n\t\t\t\t\t\t\t\t\t\t\t\t\tdirection,\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>\n\t\t\t\t\t\t\t\t\t\t{ info.label }\n\t\t\t\t\t\t\t\t\t</DropdownMenuItem>\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</DropdownMenuGroup>\n\t\t\t\t) }\n\t\t\t\t{ isHidable && (\n\t\t\t\t\t<DropdownMenuItem\n\t\t\t\t\t\trole=\"menuitemradio\"\n\t\t\t\t\t\taria-checked={ false }\n\t\t\t\t\t\tprefix={ <Icon icon={ unseen } /> }\n\t\t\t\t\t\tonSelect={ ( event ) => {\n\t\t\t\t\t\t\tevent.preventDefault();\n\t\t\t\t\t\t\tonChangeView( {\n\t\t\t\t\t\t\t\t...view,\n\t\t\t\t\t\t\t\thiddenFields: view.hiddenFields.concat(\n\t\t\t\t\t\t\t\t\tfield.id\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>\n\t\t\t\t\t\t{ __( 'Hide' ) }\n\t\t\t\t\t</DropdownMenuItem>\n\t\t\t\t) }\n\t\t\t\t{ isFilterable && (\n\t\t\t\t\t<DropdownMenuGroup>\n\t\t\t\t\t\t<DropdownSubMenu\n\t\t\t\t\t\t\tkey={ filter.field }\n\t\t\t\t\t\t\ttrigger={\n\t\t\t\t\t\t\t\t<DropdownSubMenuTrigger\n\t\t\t\t\t\t\t\t\tprefix={ <Icon icon={ funnel } /> }\n\t\t\t\t\t\t\t\t\tsuffix={\n\t\t\t\t\t\t\t\t\t\t<Icon icon={ chevronRightSmall } />\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\t\t{ __( 'Filter by' ) }\n\t\t\t\t\t\t\t\t</DropdownSubMenuTrigger>\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t<WithSeparators>\n\t\t\t\t\t\t\t\t<DropdownMenuGroup>\n\t\t\t\t\t\t\t\t\t{ filter.elements.map( ( element ) => {\n\t\t\t\t\t\t\t\t\t\tlet isActive = false;\n\t\t\t\t\t\t\t\t\t\tif ( filterInView ) {\n\t\t\t\t\t\t\t\t\t\t\t// Intentionally use loose comparison, so it does type conversion.\n\t\t\t\t\t\t\t\t\t\t\t// This covers the case where a top-level filter for the same field converts a number into a string.\n\t\t\t\t\t\t\t\t\t\t\t/* eslint-disable eqeqeq */\n\t\t\t\t\t\t\t\t\t\t\tisActive =\n\t\t\t\t\t\t\t\t\t\t\t\telement.value ==\n\t\t\t\t\t\t\t\t\t\t\t\tfilterInView.value;\n\t\t\t\t\t\t\t\t\t\t\t/* eslint-enable eqeqeq */\n\t\t\t\t\t\t\t\t\t\t}\n\n\t\t\t\t\t\t\t\t\t\treturn (\n\t\t\t\t\t\t\t\t\t\t\t<DropdownMenuItem\n\t\t\t\t\t\t\t\t\t\t\t\tkey={ element.value }\n\t\t\t\t\t\t\t\t\t\t\t\trole=\"menuitemradio\"\n\t\t\t\t\t\t\t\t\t\t\t\taria-checked={ isActive }\n\t\t\t\t\t\t\t\t\t\t\t\tprefix={\n\t\t\t\t\t\t\t\t\t\t\t\t\tisActive && (\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t<Icon icon={ check } />\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\tonSelect={ () => {\n\t\t\t\t\t\t\t\t\t\t\t\t\tonChangeView( {\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t...view,\n\t\t\t\t\t\t\t\t\t\t\t\t\t\tfilters: [\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t...otherFilters,\n\t\t\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\t\t\t\tfield: filter.field,\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\toperator:\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\tfilterInView?.operator,\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\tvalue: isActive\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t? undefined\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t: element.value,\n\t\t\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\t\t],\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\t\t{ element.label }\n\t\t\t\t\t\t\t\t\t\t\t</DropdownMenuItem>\n\t\t\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</DropdownMenuGroup>\n\t\t\t\t\t\t\t\t{ filter.operators.length > 1 && (\n\t\t\t\t\t\t\t\t\t<DropdownSubMenu\n\t\t\t\t\t\t\t\t\t\ttrigger={\n\t\t\t\t\t\t\t\t\t\t\t<DropdownSubMenuTrigger\n\t\t\t\t\t\t\t\t\t\t\t\tsuffix={\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\t\t{ filterInView.operator ===\n\t\t\t\t\t\t\t\t\t\t\t\t\t\tOPERATOR_IN\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t? __( 'Is' )\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t: __( 'Is not' ) }\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t<Icon\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\ticon={\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\tchevronRightSmall\n\t\t\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\t\t/>{ ' ' }\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\t\t{ __( 'Conditions' ) }\n\t\t\t\t\t\t\t\t\t\t\t</DropdownSubMenuTrigger>\n\t\t\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<DropdownMenuItem\n\t\t\t\t\t\t\t\t\t\t\tkey=\"in-filter\"\n\t\t\t\t\t\t\t\t\t\t\trole=\"menuitemradio\"\n\t\t\t\t\t\t\t\t\t\t\taria-checked={\n\t\t\t\t\t\t\t\t\t\t\t\tfilterInView?.operator ===\n\t\t\t\t\t\t\t\t\t\t\t\tOPERATOR_IN\n\t\t\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\t\t\tprefix={\n\t\t\t\t\t\t\t\t\t\t\t\tfilterInView?.operator ===\n\t\t\t\t\t\t\t\t\t\t\t\t\tOPERATOR_IN && (\n\t\t\t\t\t\t\t\t\t\t\t\t\t<Icon icon={ check } />\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\tonSelect={ () =>\n\t\t\t\t\t\t\t\t\t\t\t\tonChangeView( {\n\t\t\t\t\t\t\t\t\t\t\t\t\t...view,\n\t\t\t\t\t\t\t\t\t\t\t\t\tfilters: [\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t...otherFilters,\n\t\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\t\t\tfield: filter.field,\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\toperator:\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\tOPERATOR_IN,\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\tvalue: filterInView?.value,\n\t\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\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\t\t{ __( 'Is' ) }\n\t\t\t\t\t\t\t\t\t\t</DropdownMenuItem>\n\t\t\t\t\t\t\t\t\t\t<DropdownMenuItem\n\t\t\t\t\t\t\t\t\t\t\tkey=\"not-in-filter\"\n\t\t\t\t\t\t\t\t\t\t\trole=\"menuitemradio\"\n\t\t\t\t\t\t\t\t\t\t\taria-checked={\n\t\t\t\t\t\t\t\t\t\t\t\tfilterInView?.operator ===\n\t\t\t\t\t\t\t\t\t\t\t\tOPERATOR_NOT_IN\n\t\t\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\t\t\tprefix={\n\t\t\t\t\t\t\t\t\t\t\t\tfilterInView?.operator ===\n\t\t\t\t\t\t\t\t\t\t\t\t\tOPERATOR_NOT_IN && (\n\t\t\t\t\t\t\t\t\t\t\t\t\t<Icon icon={ check } />\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\tonSelect={ () =>\n\t\t\t\t\t\t\t\t\t\t\t\tonChangeView( {\n\t\t\t\t\t\t\t\t\t\t\t\t\t...view,\n\t\t\t\t\t\t\t\t\t\t\t\t\tfilters: [\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t...otherFilters,\n\t\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\t\t\tfield: filter.field,\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\toperator:\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\tOPERATOR_NOT_IN,\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\tvalue: filterInView?.value,\n\t\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\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\t\t{ __( 'Is not' ) }\n\t\t\t\t\t\t\t\t\t\t</DropdownMenuItem>\n\t\t\t\t\t\t\t\t\t</DropdownSubMenu>\n\t\t\t\t\t\t\t\t) }\n\t\t\t\t\t\t\t</WithSeparators>\n\t\t\t\t\t\t</DropdownSubMenu>\n\t\t\t\t\t</DropdownMenuGroup>\n\t\t\t\t) }\n\t\t\t</WithSeparators>\n\t\t</DropdownMenu>\n\t);\n}\n\nfunction WithSeparators( { children } ) {\n\treturn Children.toArray( children )\n\t\t.filter( Boolean )\n\t\t.map( ( child, i ) => (\n\t\t\t<Fragment key={ i }>\n\t\t\t\t{ i > 0 && <DropdownMenuSeparator /> }\n\t\t\t\t{ child }\n\t\t\t</Fragment>\n\t\t) );\n}\n\nfunction ViewTable( {\n\tview,\n\tonChangeView,\n\tfields,\n\tactions,\n\tdata,\n\tgetItemId,\n\tisLoading = false,\n\tdeferredRendering,\n} ) {\n\tconst visibleFields = fields.filter(\n\t\t( field ) =>\n\t\t\t! view.hiddenFields.includes( field.id ) &&\n\t\t\t! [ view.layout.mediaField, view.layout.primaryField ].includes(\n\t\t\t\tfield.id\n\t\t\t)\n\t);\n\tconst shownData = useAsyncList( data );\n\tconst usedData = deferredRendering ? shownData : data;\n\tconst hasData = !! usedData?.length;\n\tif ( isLoading ) {\n\t\t// TODO:Add spinner or progress bar..\n\t\treturn (\n\t\t\t<div className=\"dataviews-loading\">\n\t\t\t\t<h3>{ __( 'Loading' ) }</h3>\n\t\t\t</div>\n\t\t);\n\t}\n\tconst sortValues = { asc: 'ascending', desc: 'descending' };\n\treturn (\n\t\t<div className=\"dataviews-table-view-wrapper\">\n\t\t\t{ hasData && (\n\t\t\t\t<table className=\"dataviews-table-view\">\n\t\t\t\t\t<thead>\n\t\t\t\t\t\t<tr>\n\t\t\t\t\t\t\t{ visibleFields.map( ( field ) => (\n\t\t\t\t\t\t\t\t<th\n\t\t\t\t\t\t\t\t\tkey={ field.id }\n\t\t\t\t\t\t\t\t\tstyle={ {\n\t\t\t\t\t\t\t\t\t\twidth: field.width || undefined,\n\t\t\t\t\t\t\t\t\t\tminWidth: field.minWidth || undefined,\n\t\t\t\t\t\t\t\t\t\tmaxWidth: field.maxWidth || undefined,\n\t\t\t\t\t\t\t\t\t} }\n\t\t\t\t\t\t\t\t\tdata-field-id={ field.id }\n\t\t\t\t\t\t\t\t\taria-sort={\n\t\t\t\t\t\t\t\t\t\tview.sort?.field === field.id &&\n\t\t\t\t\t\t\t\t\t\tsortValues[ view.sort.direction ]\n\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\tscope=\"col\"\n\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t<HeaderMenu\n\t\t\t\t\t\t\t\t\t\tfield={ field }\n\t\t\t\t\t\t\t\t\t\tview={ view }\n\t\t\t\t\t\t\t\t\t\tonChangeView={ onChangeView }\n\t\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t\t</th>\n\t\t\t\t\t\t\t) ) }\n\t\t\t\t\t\t\t{ !! actions?.length && (\n\t\t\t\t\t\t\t\t<th data-field-id=\"actions\">\n\t\t\t\t\t\t\t\t\t{ __( 'Actions' ) }\n\t\t\t\t\t\t\t\t</th>\n\t\t\t\t\t\t\t) }\n\t\t\t\t\t\t</tr>\n\t\t\t\t\t</thead>\n\t\t\t\t\t<tbody>\n\t\t\t\t\t\t{ usedData.map( ( item, index ) => (\n\t\t\t\t\t\t\t<tr key={ getItemId?.( item ) || index }>\n\t\t\t\t\t\t\t\t{ visibleFields.map( ( field ) => (\n\t\t\t\t\t\t\t\t\t<td\n\t\t\t\t\t\t\t\t\t\tkey={ field.id }\n\t\t\t\t\t\t\t\t\t\tstyle={ {\n\t\t\t\t\t\t\t\t\t\t\twidth: field.width || undefined,\n\t\t\t\t\t\t\t\t\t\t\tminWidth:\n\t\t\t\t\t\t\t\t\t\t\t\tfield.minWidth || undefined,\n\t\t\t\t\t\t\t\t\t\t\tmaxWidth:\n\t\t\t\t\t\t\t\t\t\t\t\tfield.maxWidth || undefined,\n\t\t\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{ field.render( {\n\t\t\t\t\t\t\t\t\t\t\titem,\n\t\t\t\t\t\t\t\t\t\t} ) }\n\t\t\t\t\t\t\t\t\t</td>\n\t\t\t\t\t\t\t\t) ) }\n\t\t\t\t\t\t\t\t{ !! actions?.length && (\n\t\t\t\t\t\t\t\t\t<td>\n\t\t\t\t\t\t\t\t\t\t<ItemActions\n\t\t\t\t\t\t\t\t\t\t\titem={ item }\n\t\t\t\t\t\t\t\t\t\t\tactions={ actions }\n\t\t\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t\t\t</td>\n\t\t\t\t\t\t\t\t) }\n\t\t\t\t\t\t\t</tr>\n\t\t\t\t\t\t) ) }\n\t\t\t\t\t</tbody>\n\t\t\t\t</table>\n\t\t\t) }\n\t\t\t{ ! hasData && (\n\t\t\t\t<div className=\"dataviews-no-results\">\n\t\t\t\t\t<p>{ __( 'No results' ) }</p>\n\t\t\t\t</div>\n\t\t\t) }\n\t\t</div>\n\t);\n}\n\nexport default ViewTable;\n"],"mappings":"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"}

package/build-module/add-filter.js

@@ -0,0 +1,83 @@
+import { createElement } from "react";
+/**
+ * WordPress dependencies
+ */
+import { privateApis as componentsPrivateApis, Button, Icon } from '@wordpress/components';
+import { chevronRightSmall, plus } from '@wordpress/icons';
+import { __ } from '@wordpress/i18n';
+
+/**
+ * Internal dependencies
+ */
+import { unlock } from './lock-unlock';
+import { ENUMERATION_TYPE, OPERATOR_IN } from './constants';
+const {
+  DropdownMenuV2: DropdownMenu,
+  DropdownSubMenuV2: DropdownSubMenu,
+  DropdownSubMenuTriggerV2: DropdownSubMenuTrigger,
+  DropdownMenuItemV2: DropdownMenuItem
+} = unlock(componentsPrivateApis);
+export default function AddFilter({
+  fields,
+  view,
+  onChangeView
+}) {
+  const filters = [];
+  fields.forEach(field => {
+    if (!field.type) {
+      return;
+    }
+    switch (field.type) {
+      case ENUMERATION_TYPE:
+        filters.push({
+          field: field.id,
+          name: field.header,
+          elements: field.elements || [],
+          isVisible: view.filters.some(f => f.field === field.id)
+        });
+    }
+  });
+  if (filters.length === 0) {
+    return null;
+  }
+  return createElement(DropdownMenu, {
+    label: __('Add filter'),
+    trigger: createElement(Button, {
+      disabled: filters.length === view.filters?.length,
+      __experimentalIsFocusable: true,
+      variant: "tertiary",
+      size: "compact"
+    }, createElement(Icon, {
+      icon: plus,
+      style: {
+        flexShrink: 0
+      }
+    }), __('Add filter'))
+  }, filters.map(filter => {
+    if (filter.isVisible) {
+      return null;
+    }
+    return createElement(DropdownSubMenu, {
+      key: filter.field,
+      trigger: createElement(DropdownSubMenuTrigger, {
+        suffix: createElement(Icon, {
+          icon: chevronRightSmall
+        })
+      }, filter.name)
+    }, filter.elements.map(element => createElement(DropdownMenuItem, {
+      key: element.value,
+      onSelect: () => {
+        onChangeView(currentView => ({
+          ...currentView,
+          page: 1,
+          filters: [...currentView.filters, {
+            field: filter.field,
+            operator: OPERATOR_IN,
+            value: element.value
+          }]
+        }));
+      }
+    }, element.label)));
+  }));
+}
+//# sourceMappingURL=add-filter.js.map

package/build-module/add-filter.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["privateApis","componentsPrivateApis","Button","Icon","chevronRightSmall","plus","__","unlock","ENUMERATION_TYPE","OPERATOR_IN","DropdownMenuV2","DropdownMenu","DropdownSubMenuV2","DropdownSubMenu","DropdownSubMenuTriggerV2","DropdownSubMenuTrigger","DropdownMenuItemV2","DropdownMenuItem","AddFilter","fields","view","onChangeView","filters","forEach","field","type","push","id","name","header","elements","isVisible","some","f","length","createElement","label","trigger","disabled","__experimentalIsFocusable","variant","size","icon","style","flexShrink","map","filter","key","suffix","element","value","onSelect","currentView","page","operator"],"sources":["@wordpress/dataviews/src/add-filter.js"],"sourcesContent":["/**\n * WordPress dependencies\n */\nimport {\n\tprivateApis as componentsPrivateApis,\n\tButton,\n\tIcon,\n} from '@wordpress/components';\nimport { chevronRightSmall, plus } from '@wordpress/icons';\nimport { __ } from '@wordpress/i18n';\n\n/**\n * Internal dependencies\n */\nimport { unlock } from './lock-unlock';\nimport { ENUMERATION_TYPE, OPERATOR_IN } from './constants';\n\nconst {\n\tDropdownMenuV2: DropdownMenu,\n\tDropdownSubMenuV2: DropdownSubMenu,\n\tDropdownSubMenuTriggerV2: DropdownSubMenuTrigger,\n\tDropdownMenuItemV2: DropdownMenuItem,\n} = unlock( componentsPrivateApis );\n\nexport default function AddFilter( { fields, view, onChangeView } ) {\n\tconst filters = [];\n\tfields.forEach( ( field ) => {\n\t\tif ( ! field.type ) {\n\t\t\treturn;\n\t\t}\n\n\t\tswitch ( field.type ) {\n\t\t\tcase ENUMERATION_TYPE:\n\t\t\t\tfilters.push( {\n\t\t\t\t\tfield: field.id,\n\t\t\t\t\tname: field.header,\n\t\t\t\t\telements: field.elements || [],\n\t\t\t\t\tisVisible: view.filters.some(\n\t\t\t\t\t\t( f ) => f.field === field.id\n\t\t\t\t\t),\n\t\t\t\t} );\n\t\t}\n\t} );\n\n\tif ( filters.length === 0 ) {\n\t\treturn null;\n\t}\n\n\treturn (\n\t\t<DropdownMenu\n\t\t\tlabel={ __( 'Add filter' ) }\n\t\t\ttrigger={\n\t\t\t\t<Button\n\t\t\t\t\tdisabled={ filters.length === view.filters?.length }\n\t\t\t\t\t__experimentalIsFocusable\n\t\t\t\t\tvariant=\"tertiary\"\n\t\t\t\t\tsize=\"compact\"\n\t\t\t\t>\n\t\t\t\t\t<Icon icon={ plus } style={ { flexShrink: 0 } } />\n\t\t\t\t\t{ __( 'Add filter' ) }\n\t\t\t\t</Button>\n\t\t\t}\n\t\t>\n\t\t\t{ filters.map( ( filter ) => {\n\t\t\t\tif ( filter.isVisible ) {\n\t\t\t\t\treturn null;\n\t\t\t\t}\n\n\t\t\t\treturn (\n\t\t\t\t\t<DropdownSubMenu\n\t\t\t\t\t\tkey={ filter.field }\n\t\t\t\t\t\ttrigger={\n\t\t\t\t\t\t\t<DropdownSubMenuTrigger\n\t\t\t\t\t\t\t\tsuffix={ <Icon icon={ chevronRightSmall } /> }\n\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t{ filter.name }\n\t\t\t\t\t\t\t</DropdownSubMenuTrigger>\n\t\t\t\t\t\t}\n\t\t\t\t\t>\n\t\t\t\t\t\t{ filter.elements.map( ( element ) => (\n\t\t\t\t\t\t\t<DropdownMenuItem\n\t\t\t\t\t\t\t\tkey={ element.value }\n\t\t\t\t\t\t\t\tonSelect={ () => {\n\t\t\t\t\t\t\t\t\tonChangeView( ( currentView ) => ( {\n\t\t\t\t\t\t\t\t\t\t...currentView,\n\t\t\t\t\t\t\t\t\t\tpage: 1,\n\t\t\t\t\t\t\t\t\t\tfilters: [\n\t\t\t\t\t\t\t\t\t\t\t...currentView.filters,\n\t\t\t\t\t\t\t\t\t\t\t{\n\t\t\t\t\t\t\t\t\t\t\t\tfield: filter.field,\n\t\t\t\t\t\t\t\t\t\t\t\toperator: OPERATOR_IN,\n\t\t\t\t\t\t\t\t\t\t\t\tvalue: element.value,\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} ) );\n\t\t\t\t\t\t\t\t} }\n\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t{ element.label }\n\t\t\t\t\t\t\t</DropdownMenuItem>\n\t\t\t\t\t\t) ) }\n\t\t\t\t\t</DropdownSubMenu>\n\t\t\t\t);\n\t\t\t} ) }\n\t\t</DropdownMenu>\n\t);\n}\n"],"mappings":"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"}

package/build-module/constants.js

@@ -0,0 +1,41 @@
+/**
+ * WordPress dependencies
+ */
+import { __, isRTL } from '@wordpress/i18n';
+import { blockTable, category, formatListBullets, formatListBulletsRTL } from '@wordpress/icons';
+
+/**
+ * Internal dependencies
+ */
+import ViewTable from './view-table';
+import ViewGrid from './view-grid';
+import ViewList from './view-list';
+
+// Field types.
+export const ENUMERATION_TYPE = 'enumeration';
+
+// Filter operators.
+export const OPERATOR_IN = 'in';
+export const OPERATOR_NOT_IN = 'notIn';
+
+// View layouts.
+export const LAYOUT_TABLE = 'table';
+export const LAYOUT_GRID = 'grid';
+export const LAYOUT_LIST = 'list';
+export const VIEW_LAYOUTS = [{
+  type: LAYOUT_TABLE,
+  label: __('Table'),
+  component: ViewTable,
+  icon: blockTable
+}, {
+  type: LAYOUT_GRID,
+  label: __('Grid'),
+  component: ViewGrid,
+  icon: category
+}, {
+  type: LAYOUT_LIST,
+  label: __('List'),
+  component: ViewList,
+  icon: isRTL() ? formatListBulletsRTL : formatListBullets
+}];
+//# sourceMappingURL=constants.js.map

package/build-module/constants.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["__","isRTL","blockTable","category","formatListBullets","formatListBulletsRTL","ViewTable","ViewGrid","ViewList","ENUMERATION_TYPE","OPERATOR_IN","OPERATOR_NOT_IN","LAYOUT_TABLE","LAYOUT_GRID","LAYOUT_LIST","VIEW_LAYOUTS","type","label","component","icon"],"sources":["@wordpress/dataviews/src/constants.js"],"sourcesContent":["/**\n * WordPress dependencies\n */\nimport { __, isRTL } from '@wordpress/i18n';\nimport {\n\tblockTable,\n\tcategory,\n\tformatListBullets,\n\tformatListBulletsRTL,\n} from '@wordpress/icons';\n\n/**\n * Internal dependencies\n */\nimport ViewTable from './view-table';\nimport ViewGrid from './view-grid';\nimport ViewList from './view-list';\n\n// Field types.\nexport const ENUMERATION_TYPE = 'enumeration';\n\n// Filter operators.\nexport const OPERATOR_IN = 'in';\nexport const OPERATOR_NOT_IN = 'notIn';\n\n// View layouts.\nexport const LAYOUT_TABLE = 'table';\nexport const LAYOUT_GRID = 'grid';\nexport const LAYOUT_LIST = 'list';\n\nexport const VIEW_LAYOUTS = [\n\t{\n\t\ttype: LAYOUT_TABLE,\n\t\tlabel: __( 'Table' ),\n\t\tcomponent: ViewTable,\n\t\ticon: blockTable,\n\t},\n\t{\n\t\ttype: LAYOUT_GRID,\n\t\tlabel: __( 'Grid' ),\n\t\tcomponent: ViewGrid,\n\t\ticon: category,\n\t},\n\t{\n\t\ttype: LAYOUT_LIST,\n\t\tlabel: __( 'List' ),\n\t\tcomponent: ViewList,\n\t\ticon: isRTL() ? formatListBulletsRTL : formatListBullets,\n\t},\n];\n"],"mappings":"AAAA;AACA;AACA;AACA,SAASA,EAAE,EAAEC,KAAK,QAAQ,iBAAiB;AAC3C,SACCC,UAAU,EACVC,QAAQ,EACRC,iBAAiB,EACjBC,oBAAoB,QACd,kBAAkB;;AAEzB;AACA;AACA;AACA,OAAOC,SAAS,MAAM,cAAc;AACpC,OAAOC,QAAQ,MAAM,aAAa;AAClC,OAAOC,QAAQ,MAAM,aAAa;;AAElC;AACA,OAAO,MAAMC,gBAAgB,GAAG,aAAa;;AAE7C;AACA,OAAO,MAAMC,WAAW,GAAG,IAAI;AAC/B,OAAO,MAAMC,eAAe,GAAG,OAAO;;AAEtC;AACA,OAAO,MAAMC,YAAY,GAAG,OAAO;AACnC,OAAO,MAAMC,WAAW,GAAG,MAAM;AACjC,OAAO,MAAMC,WAAW,GAAG,MAAM;AAEjC,OAAO,MAAMC,YAAY,GAAG,CAC3B;EACCC,IAAI,EAAEJ,YAAY;EAClBK,KAAK,EAAEjB,EAAE,CAAE,OAAQ,CAAC;EACpBkB,SAAS,EAAEZ,SAAS;EACpBa,IAAI,EAAEjB;AACP,CAAC,EACD;EACCc,IAAI,EAAEH,WAAW;EACjBI,KAAK,EAAEjB,EAAE,CAAE,MAAO,CAAC;EACnBkB,SAAS,EAAEX,QAAQ;EACnBY,IAAI,EAAEhB;AACP,CAAC,EACD;EACCa,IAAI,EAAEF,WAAW;EACjBG,KAAK,EAAEjB,EAAE,CAAE,MAAO,CAAC;EACnBkB,SAAS,EAAEV,QAAQ;EACnBW,IAAI,EAAElB,KAAK,CAAC,CAAC,GAAGI,oBAAoB,GAAGD;AACxC,CAAC,CACD"}

package/build-module/dataviews.js

@@ -0,0 +1,85 @@
+import { createElement } from "react";
+/**
+ * WordPress dependencies
+ */
+import { __experimentalVStack as VStack, __experimentalHStack as HStack } from '@wordpress/components';
+import { useMemo, useState } from '@wordpress/element';
+
+/**
+ * Internal dependencies
+ */
+import Pagination from './pagination';
+import ViewActions from './view-actions';
+import Filters from './filters';
+import Search from './search';
+import { VIEW_LAYOUTS } from './constants';
+export default function DataViews({
+  view,
+  onChangeView,
+  fields,
+  search = true,
+  searchLabel = undefined,
+  actions,
+  data,
+  getItemId,
+  isLoading = false,
+  paginationInfo,
+  supportedLayouts,
+  onSelectionChange,
+  deferredRendering
+}) {
+  const [selection, setSelection] = useState([]);
+  const onSetSelection = items => {
+    setSelection(items.map(item => item.id));
+    onSelectionChange(items);
+  };
+  const ViewComponent = VIEW_LAYOUTS.find(v => v.type === view.type).component;
+  const _fields = useMemo(() => {
+    return fields.map(field => ({
+      ...field,
+      render: field.render || field.getValue
+    }));
+  }, [fields]);
+  return createElement("div", {
+    className: "dataviews-wrapper"
+  }, createElement(VStack, {
+    spacing: 0,
+    justify: "flex-start"
+  }, createElement(HStack, {
+    alignment: "flex-start",
+    className: "dataviews__filters-view-actions"
+  }, createElement(HStack, {
+    justify: "start",
+    wrap: true
+  }, search && createElement(Search, {
+    label: searchLabel,
+    view: view,
+    onChangeView: onChangeView
+  }), createElement(Filters, {
+    fields: fields,
+    view: view,
+    onChangeView: onChangeView
+  })), createElement(ViewActions, {
+    fields: fields,
+    view: view,
+    onChangeView: onChangeView,
+    supportedLayouts: supportedLayouts
+  })), createElement(ViewComponent, {
+    fields: _fields,
+    view: view,
+    onChangeView: onChangeView,
+    paginationInfo: paginationInfo,
+    actions: actions,
+    data: data,
+    getItemId: getItemId,
+    isLoading: isLoading,
+    onSelectionChange: onSetSelection,
+    selection: selection,
+    deferredRendering: deferredRendering
+  }), createElement(Pagination, {
+    view: view,
+    onChangeView: onChangeView,
+    paginationInfo: paginationInfo
+  })));
+}
+//# sourceMappingURL=dataviews.js.map

package/build-module/dataviews.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["__experimentalVStack","VStack","__experimentalHStack","HStack","useMemo","useState","Pagination","ViewActions","Filters","Search","VIEW_LAYOUTS","DataViews","view","onChangeView","fields","search","searchLabel","undefined","actions","data","getItemId","isLoading","paginationInfo","supportedLayouts","onSelectionChange","deferredRendering","selection","setSelection","onSetSelection","items","map","item","id","ViewComponent","find","v","type","component","_fields","field","render","getValue","createElement","className","spacing","justify","alignment","wrap","label"],"sources":["@wordpress/dataviews/src/dataviews.js"],"sourcesContent":["/**\n * WordPress dependencies\n */\nimport {\n\t__experimentalVStack as VStack,\n\t__experimentalHStack as HStack,\n} from '@wordpress/components';\nimport { useMemo, useState } from '@wordpress/element';\n\n/**\n * Internal dependencies\n */\nimport Pagination from './pagination';\nimport ViewActions from './view-actions';\nimport Filters from './filters';\nimport Search from './search';\nimport { VIEW_LAYOUTS } from './constants';\n\nexport default function DataViews( {\n\tview,\n\tonChangeView,\n\tfields,\n\tsearch = true,\n\tsearchLabel = undefined,\n\tactions,\n\tdata,\n\tgetItemId,\n\tisLoading = false,\n\tpaginationInfo,\n\tsupportedLayouts,\n\tonSelectionChange,\n\tdeferredRendering,\n} ) {\n\tconst [ selection, setSelection ] = useState( [] );\n\n\tconst onSetSelection = ( items ) => {\n\t\tsetSelection( items.map( ( item ) => item.id ) );\n\t\tonSelectionChange( items );\n\t};\n\n\tconst ViewComponent = VIEW_LAYOUTS.find(\n\t\t( v ) => v.type === view.type\n\t).component;\n\tconst _fields = useMemo( () => {\n\t\treturn fields.map( ( field ) => ( {\n\t\t\t...field,\n\t\t\trender: field.render || field.getValue,\n\t\t} ) );\n\t}, [ fields ] );\n\treturn (\n\t\t<div className=\"dataviews-wrapper\">\n\t\t\t<VStack spacing={ 0 } justify=\"flex-start\">\n\t\t\t\t<HStack\n\t\t\t\t\talignment=\"flex-start\"\n\t\t\t\t\tclassName=\"dataviews__filters-view-actions\"\n\t\t\t\t>\n\t\t\t\t\t<HStack justify=\"start\" wrap>\n\t\t\t\t\t\t{ search && (\n\t\t\t\t\t\t\t<Search\n\t\t\t\t\t\t\t\tlabel={ searchLabel }\n\t\t\t\t\t\t\t\tview={ view }\n\t\t\t\t\t\t\t\tonChangeView={ onChangeView }\n\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t) }\n\t\t\t\t\t\t<Filters\n\t\t\t\t\t\t\tfields={ fields }\n\t\t\t\t\t\t\tview={ view }\n\t\t\t\t\t\t\tonChangeView={ onChangeView }\n\t\t\t\t\t\t/>\n\t\t\t\t\t</HStack>\n\t\t\t\t\t<ViewActions\n\t\t\t\t\t\tfields={ fields }\n\t\t\t\t\t\tview={ view }\n\t\t\t\t\t\tonChangeView={ onChangeView }\n\t\t\t\t\t\tsupportedLayouts={ supportedLayouts }\n\t\t\t\t\t/>\n\t\t\t\t</HStack>\n\t\t\t\t<ViewComponent\n\t\t\t\t\tfields={ _fields }\n\t\t\t\t\tview={ view }\n\t\t\t\t\tonChangeView={ onChangeView }\n\t\t\t\t\tpaginationInfo={ paginationInfo }\n\t\t\t\t\tactions={ actions }\n\t\t\t\t\tdata={ data }\n\t\t\t\t\tgetItemId={ getItemId }\n\t\t\t\t\tisLoading={ isLoading }\n\t\t\t\t\tonSelectionChange={ onSetSelection }\n\t\t\t\t\tselection={ selection }\n\t\t\t\t\tdeferredRendering={ deferredRendering }\n\t\t\t\t/>\n\t\t\t\t<Pagination\n\t\t\t\t\tview={ view }\n\t\t\t\t\tonChangeView={ onChangeView }\n\t\t\t\t\tpaginationInfo={ paginationInfo }\n\t\t\t\t/>\n\t\t\t</VStack>\n\t\t</div>\n\t);\n}\n"],"mappings":"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"}