@wordpress/dataviews 1.1.0 → 2.0.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/CHANGELOG.md +27 -5
- package/README.md +33 -30
- package/build/add-filter.js +30 -22
- package/build/add-filter.js.map +1 -1
- package/build/bulk-actions-toolbar.js +187 -0
- package/build/bulk-actions-toolbar.js.map +1 -0
- package/build/bulk-actions.js +75 -62
- package/build/bulk-actions.js.map +1 -1
- package/build/constants.js +17 -10
- package/build/constants.js.map +1 -1
- package/build/dataviews.js +64 -50
- package/build/dataviews.js.map +1 -1
- package/build/filter-and-sort-data-view.js +2 -2
- package/build/filter-and-sort-data-view.js.map +1 -1
- package/build/filter-summary.js +106 -96
- package/build/filter-summary.js.map +1 -1
- package/build/filters.js +18 -17
- package/build/filters.js.map +1 -1
- package/build/index.js.map +1 -1
- package/build/item-actions.js +101 -69
- package/build/item-actions.js.map +1 -1
- package/build/layouts.js.map +1 -1
- package/build/lock-unlock.js.map +1 -1
- package/build/normalize-fields.js.map +1 -1
- package/build/pagination.js +66 -57
- package/build/pagination.js.map +1 -1
- package/build/reset-filters.js +9 -4
- package/build/reset-filters.js.map +1 -1
- package/build/search-widget.js +108 -89
- package/build/search-widget.js.map +1 -1
- package/build/search.js +13 -6
- package/build/search.js.map +1 -1
- package/build/single-selection-checkbox.js +6 -2
- package/build/single-selection-checkbox.js.map +1 -1
- package/build/types.js.map +1 -1
- package/build/utils.js +3 -15
- package/build/utils.js.map +1 -1
- package/build/view-actions.js +168 -120
- package/build/view-actions.js.map +1 -1
- package/build/view-grid.js +119 -106
- package/build/view-grid.js.map +1 -1
- package/build/view-list.js +217 -83
- package/build/view-list.js.map +1 -1
- package/build/view-table.js +227 -199
- package/build/view-table.js.map +1 -1
- package/build-module/add-filter.js +30 -22
- package/build-module/add-filter.js.map +1 -1
- package/build-module/bulk-actions-toolbar.js +182 -0
- package/build-module/bulk-actions-toolbar.js.map +1 -0
- package/build-module/bulk-actions.js +77 -62
- package/build-module/bulk-actions.js.map +1 -1
- package/build-module/constants.js +16 -9
- package/build-module/constants.js.map +1 -1
- package/build-module/dataviews.js +65 -50
- package/build-module/dataviews.js.map +1 -1
- package/build-module/filter-and-sort-data-view.js +2 -2
- package/build-module/filter-and-sort-data-view.js.map +1 -1
- package/build-module/filter-summary.js +107 -97
- package/build-module/filter-summary.js.map +1 -1
- package/build-module/filters.js +18 -17
- package/build-module/filters.js.map +1 -1
- package/build-module/index.js.map +1 -1
- package/build-module/item-actions.js +102 -71
- package/build-module/item-actions.js.map +1 -1
- package/build-module/layouts.js.map +1 -1
- package/build-module/lock-unlock.js.map +1 -1
- package/build-module/normalize-fields.js.map +1 -1
- package/build-module/pagination.js +67 -57
- package/build-module/pagination.js.map +1 -1
- package/build-module/reset-filters.js +9 -4
- package/build-module/reset-filters.js.map +1 -1
- package/build-module/search-widget.js +109 -89
- package/build-module/search-widget.js.map +1 -1
- package/build-module/search.js +13 -6
- package/build-module/search.js.map +1 -1
- package/build-module/single-selection-checkbox.js +6 -2
- package/build-module/single-selection-checkbox.js.map +1 -1
- package/build-module/types.js.map +1 -1
- package/build-module/utils.js +2 -13
- package/build-module/utils.js.map +1 -1
- package/build-module/view-actions.js +170 -121
- package/build-module/view-actions.js.map +1 -1
- package/build-module/view-grid.js +121 -106
- package/build-module/view-grid.js.map +1 -1
- package/build-module/view-list.js +219 -85
- package/build-module/view-list.js.map +1 -1
- package/build-module/view-table.js +230 -201
- package/build-module/view-table.js.map +1 -1
- package/build-style/style-rtl.css +168 -44
- package/build-style/style.css +168 -44
- package/build-types/add-filter.d.ts +11 -0
- package/build-types/add-filter.d.ts.map +1 -0
- package/build-types/bulk-actions-toolbar.d.ts +12 -0
- package/build-types/bulk-actions-toolbar.d.ts.map +1 -0
- package/build-types/bulk-actions.d.ts +14 -0
- package/build-types/bulk-actions.d.ts.map +1 -0
- package/build-types/constants.d.ts +19 -32
- package/build-types/constants.d.ts.map +1 -1
- package/build-types/dataviews.d.ts +22 -0
- package/build-types/dataviews.d.ts.map +1 -0
- package/build-types/filter-and-sort-data-view.d.ts +3 -3
- package/build-types/filter-and-sort-data-view.d.ts.map +1 -1
- package/build-types/filter-summary.d.ts +14 -0
- package/build-types/filter-summary.d.ts.map +1 -0
- package/build-types/filters.d.ts +13 -0
- package/build-types/filters.d.ts.map +1 -0
- package/build-types/index.d.ts +4 -0
- package/build-types/index.d.ts.map +1 -0
- package/build-types/item-actions.d.ts +35 -0
- package/build-types/item-actions.d.ts.map +1 -0
- package/build-types/layouts.d.ts +24 -0
- package/build-types/layouts.d.ts.map +1 -0
- package/build-types/lock-unlock.d.ts +2 -0
- package/build-types/lock-unlock.d.ts.map +1 -0
- package/build-types/normalize-fields.d.ts +2 -2
- package/build-types/normalize-fields.d.ts.map +1 -1
- package/build-types/pagination.d.ts +16 -0
- package/build-types/pagination.d.ts.map +1 -0
- package/build-types/reset-filters.d.ts +13 -0
- package/build-types/reset-filters.d.ts.map +1 -0
- package/build-types/search-widget.d.ts +10 -0
- package/build-types/search-widget.d.ts.map +1 -0
- package/build-types/search.d.ts +13 -0
- package/build-types/search.d.ts.map +1 -0
- package/build-types/single-selection-checkbox.d.ts +17 -0
- package/build-types/single-selection-checkbox.d.ts.map +1 -0
- package/build-types/stories/fixtures.d.ts +114 -0
- package/build-types/stories/fixtures.d.ts.map +1 -0
- package/build-types/stories/index.story.d.ts +15 -0
- package/build-types/stories/index.story.d.ts.map +1 -0
- package/build-types/types.d.ts +221 -21
- package/build-types/types.d.ts.map +1 -1
- package/build-types/utils.d.ts +3 -0
- package/build-types/utils.d.ts.map +1 -0
- package/build-types/view-actions.d.ts +12 -0
- package/build-types/view-actions.d.ts.map +1 -0
- package/build-types/view-grid.d.ts +4 -0
- package/build-types/view-grid.d.ts.map +1 -0
- package/build-types/view-list.d.ts +4 -0
- package/build-types/view-list.d.ts.map +1 -0
- package/build-types/view-table.d.ts +5 -0
- package/build-types/view-table.d.ts.map +1 -0
- package/package.json +12 -13
- package/src/{add-filter.js → add-filter.tsx} +17 -1
- package/src/bulk-actions-toolbar.tsx +272 -0
- package/src/{bulk-actions.js → bulk-actions.tsx} +77 -17
- package/src/constants.ts +12 -5
- package/src/{dataviews.js → dataviews.tsx} +54 -14
- package/src/filter-and-sort-data-view.ts +13 -8
- package/src/{filter-summary.js → filter-summary.tsx} +38 -9
- package/src/{filters.js → filters.tsx} +18 -6
- package/src/{item-actions.js → item-actions.tsx} +119 -30
- package/src/normalize-fields.ts +4 -2
- package/src/{pagination.js → pagination.tsx} +29 -8
- package/src/{reset-filters.js → reset-filters.tsx} +17 -2
- package/src/{search-widget.js → search-widget.tsx} +27 -7
- package/src/{search.js → search.tsx} +22 -5
- package/src/{single-selection-checkbox.js → single-selection-checkbox.tsx} +17 -2
- package/src/style.scss +166 -43
- package/src/types.ts +286 -21
- package/src/{utils.js → utils.ts} +5 -13
- package/src/{view-actions.js → view-actions.tsx} +105 -49
- package/src/{view-grid.js → view-grid.tsx} +31 -18
- package/src/view-list.tsx +410 -0
- package/src/{view-table.js → view-table.tsx} +99 -40
- package/tsconfig.json +3 -4
- package/tsconfig.tsbuildinfo +1 -1
- package/build/dropdown-menu-helper.js +0 -71
- package/build/dropdown-menu-helper.js.map +0 -1
- package/build-module/dropdown-menu-helper.js +0 -64
- package/build-module/dropdown-menu-helper.js.map +0 -1
- package/src/dropdown-menu-helper.js +0 -61
- package/src/view-list.js +0 -207
- /package/src/{index.js → index.ts} +0 -0
- /package/src/{layouts.js → layouts.ts} +0 -0
- /package/src/{lock-unlock.js → lock-unlock.ts} +0 -0
|
@@ -1,8 +1,7 @@
|
|
|
1
|
-
import { createElement, Fragment } from "react";
|
|
2
1
|
/**
|
|
3
2
|
* External dependencies
|
|
4
3
|
*/
|
|
5
|
-
import
|
|
4
|
+
import clsx from 'clsx';
|
|
6
5
|
|
|
7
6
|
/**
|
|
8
7
|
* WordPress dependencies
|
|
@@ -16,6 +15,9 @@ import { __ } from '@wordpress/i18n';
|
|
|
16
15
|
import ItemActions from './item-actions';
|
|
17
16
|
import SingleSelectionCheckbox from './single-selection-checkbox';
|
|
18
17
|
import { useHasAPossibleBulkAction } from './bulk-actions';
|
|
18
|
+
import { jsx as _jsx } from "react/jsx-runtime";
|
|
19
|
+
import { jsxs as _jsxs } from "react/jsx-runtime";
|
|
20
|
+
import { Fragment as _Fragment } from "react/jsx-runtime";
|
|
19
21
|
function GridItem({
|
|
20
22
|
selection,
|
|
21
23
|
data,
|
|
@@ -32,10 +34,9 @@ function GridItem({
|
|
|
32
34
|
const hasBulkAction = useHasAPossibleBulkAction(actions, item);
|
|
33
35
|
const id = getItemId(item);
|
|
34
36
|
const isSelected = selection.includes(id);
|
|
35
|
-
return
|
|
37
|
+
return /*#__PURE__*/_jsxs(VStack, {
|
|
36
38
|
spacing: 0,
|
|
37
|
-
|
|
38
|
-
className: classnames('dataviews-view-grid__card', {
|
|
39
|
+
className: clsx('dataviews-view-grid__card', {
|
|
39
40
|
'is-selected': hasBulkAction && isSelected
|
|
40
41
|
}),
|
|
41
42
|
onClickCapture: event => {
|
|
@@ -57,87 +58,96 @@ function GridItem({
|
|
|
57
58
|
}));
|
|
58
59
|
}
|
|
59
60
|
}
|
|
60
|
-
}
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
|
|
72
|
-
|
|
73
|
-
|
|
74
|
-
|
|
75
|
-
|
|
76
|
-
|
|
77
|
-
|
|
78
|
-
|
|
79
|
-
|
|
80
|
-
|
|
81
|
-
|
|
82
|
-
|
|
83
|
-
|
|
84
|
-
|
|
85
|
-
|
|
86
|
-
|
|
87
|
-
|
|
88
|
-
|
|
89
|
-
|
|
90
|
-
|
|
91
|
-
|
|
92
|
-
const renderedValue = field.render({
|
|
93
|
-
item
|
|
94
|
-
});
|
|
95
|
-
if (!renderedValue) {
|
|
96
|
-
return null;
|
|
97
|
-
}
|
|
98
|
-
return createElement(FlexItem, {
|
|
99
|
-
key: field.id,
|
|
100
|
-
className: 'dataviews-view-grid__field-value'
|
|
101
|
-
}, renderedValue);
|
|
102
|
-
})), !!visibleFields?.length && createElement(VStack, {
|
|
103
|
-
className: "dataviews-view-grid__fields",
|
|
104
|
-
spacing: 3
|
|
105
|
-
}, visibleFields.map(field => {
|
|
106
|
-
const renderedValue = field.render({
|
|
107
|
-
item
|
|
108
|
-
});
|
|
109
|
-
if (!renderedValue) {
|
|
110
|
-
return null;
|
|
111
|
-
}
|
|
112
|
-
return createElement(Flex, {
|
|
113
|
-
className: classnames('dataviews-view-grid__field', columnFields?.includes(field.id) ? 'is-column' : 'is-row'),
|
|
114
|
-
key: field.id,
|
|
115
|
-
gap: 1,
|
|
61
|
+
},
|
|
62
|
+
children: [/*#__PURE__*/_jsx("div", {
|
|
63
|
+
className: "dataviews-view-grid__media",
|
|
64
|
+
children: mediaField?.render({
|
|
65
|
+
item
|
|
66
|
+
})
|
|
67
|
+
}), /*#__PURE__*/_jsxs(HStack, {
|
|
68
|
+
justify: "space-between",
|
|
69
|
+
className: "dataviews-view-grid__title-actions",
|
|
70
|
+
children: [/*#__PURE__*/_jsx(SingleSelectionCheckbox, {
|
|
71
|
+
item: item,
|
|
72
|
+
selection: selection,
|
|
73
|
+
onSelectionChange: onSelectionChange,
|
|
74
|
+
getItemId: getItemId,
|
|
75
|
+
data: data,
|
|
76
|
+
primaryField: primaryField,
|
|
77
|
+
disabled: !hasBulkAction
|
|
78
|
+
}), /*#__PURE__*/_jsx(HStack, {
|
|
79
|
+
className: "dataviews-view-grid__primary-field",
|
|
80
|
+
children: primaryField?.render({
|
|
81
|
+
item
|
|
82
|
+
})
|
|
83
|
+
}), /*#__PURE__*/_jsx(ItemActions, {
|
|
84
|
+
item: item,
|
|
85
|
+
actions: actions,
|
|
86
|
+
isCompact: true
|
|
87
|
+
})]
|
|
88
|
+
}), !!badgeFields?.length && /*#__PURE__*/_jsx(HStack, {
|
|
89
|
+
className: "dataviews-view-grid__badge-fields",
|
|
90
|
+
spacing: 2,
|
|
91
|
+
wrap: true,
|
|
92
|
+
alignment: "top",
|
|
116
93
|
justify: "flex-start",
|
|
117
|
-
|
|
118
|
-
|
|
119
|
-
|
|
120
|
-
|
|
121
|
-
|
|
122
|
-
|
|
123
|
-
|
|
124
|
-
|
|
125
|
-
|
|
126
|
-
|
|
127
|
-
|
|
128
|
-
}
|
|
129
|
-
},
|
|
130
|
-
|
|
94
|
+
children: badgeFields.map(field => {
|
|
95
|
+
const renderedValue = field.render({
|
|
96
|
+
item
|
|
97
|
+
});
|
|
98
|
+
if (!renderedValue) {
|
|
99
|
+
return null;
|
|
100
|
+
}
|
|
101
|
+
return /*#__PURE__*/_jsx(FlexItem, {
|
|
102
|
+
className: "dataviews-view-grid__field-value",
|
|
103
|
+
children: renderedValue
|
|
104
|
+
}, field.id);
|
|
105
|
+
})
|
|
106
|
+
}), !!visibleFields?.length && /*#__PURE__*/_jsx(VStack, {
|
|
107
|
+
className: "dataviews-view-grid__fields",
|
|
108
|
+
spacing: 3,
|
|
109
|
+
children: visibleFields.map(field => {
|
|
110
|
+
const renderedValue = field.render({
|
|
111
|
+
item
|
|
112
|
+
});
|
|
113
|
+
if (!renderedValue) {
|
|
114
|
+
return null;
|
|
115
|
+
}
|
|
116
|
+
return /*#__PURE__*/_jsx(Flex, {
|
|
117
|
+
className: clsx('dataviews-view-grid__field', columnFields?.includes(field.id) ? 'is-column' : 'is-row'),
|
|
118
|
+
gap: 1,
|
|
119
|
+
justify: "flex-start",
|
|
120
|
+
expanded: true,
|
|
121
|
+
style: {
|
|
122
|
+
height: 'auto'
|
|
123
|
+
},
|
|
124
|
+
direction: columnFields?.includes(field.id) ? 'column' : 'row',
|
|
125
|
+
children: /*#__PURE__*/_jsxs(_Fragment, {
|
|
126
|
+
children: [/*#__PURE__*/_jsx(FlexItem, {
|
|
127
|
+
className: "dataviews-view-grid__field-name",
|
|
128
|
+
children: field.header
|
|
129
|
+
}), /*#__PURE__*/_jsx(FlexItem, {
|
|
130
|
+
className: "dataviews-view-grid__field-value",
|
|
131
|
+
style: {
|
|
132
|
+
maxHeight: 'none'
|
|
133
|
+
},
|
|
134
|
+
children: renderedValue
|
|
135
|
+
})]
|
|
136
|
+
})
|
|
137
|
+
}, field.id);
|
|
138
|
+
})
|
|
139
|
+
})]
|
|
140
|
+
}, id);
|
|
131
141
|
}
|
|
132
142
|
export default function ViewGrid({
|
|
143
|
+
actions,
|
|
133
144
|
data,
|
|
134
145
|
fields,
|
|
135
|
-
view,
|
|
136
|
-
actions,
|
|
137
|
-
isLoading,
|
|
138
146
|
getItemId,
|
|
147
|
+
isLoading,
|
|
148
|
+
onSelectionChange,
|
|
139
149
|
selection,
|
|
140
|
-
|
|
150
|
+
view
|
|
141
151
|
}) {
|
|
142
152
|
const mediaField = fields.find(field => field.id === view.layout.mediaField);
|
|
143
153
|
const primaryField = fields.find(field => field.id === view.layout.primaryField);
|
|
@@ -158,32 +168,37 @@ export default function ViewGrid({
|
|
|
158
168
|
badgeFields: []
|
|
159
169
|
});
|
|
160
170
|
const hasData = !!data?.length;
|
|
161
|
-
return
|
|
162
|
-
|
|
163
|
-
|
|
164
|
-
|
|
165
|
-
|
|
166
|
-
|
|
167
|
-
|
|
168
|
-
|
|
169
|
-
|
|
170
|
-
|
|
171
|
-
|
|
172
|
-
|
|
173
|
-
|
|
174
|
-
|
|
175
|
-
|
|
176
|
-
|
|
177
|
-
|
|
178
|
-
|
|
179
|
-
|
|
180
|
-
|
|
181
|
-
|
|
182
|
-
|
|
183
|
-
|
|
184
|
-
|
|
185
|
-
|
|
186
|
-
|
|
187
|
-
|
|
171
|
+
return /*#__PURE__*/_jsxs(_Fragment, {
|
|
172
|
+
children: [hasData && /*#__PURE__*/_jsx(Grid, {
|
|
173
|
+
gap: 8,
|
|
174
|
+
columns: 2,
|
|
175
|
+
alignment: "top",
|
|
176
|
+
className: "dataviews-view-grid",
|
|
177
|
+
"aria-busy": isLoading,
|
|
178
|
+
children: data.map(item => {
|
|
179
|
+
return /*#__PURE__*/_jsx(GridItem, {
|
|
180
|
+
selection: selection,
|
|
181
|
+
data: data,
|
|
182
|
+
onSelectionChange: onSelectionChange,
|
|
183
|
+
getItemId: getItemId,
|
|
184
|
+
item: item,
|
|
185
|
+
actions: actions,
|
|
186
|
+
mediaField: mediaField,
|
|
187
|
+
primaryField: primaryField,
|
|
188
|
+
visibleFields: visibleFields,
|
|
189
|
+
badgeFields: badgeFields,
|
|
190
|
+
columnFields: view.layout.columnFields
|
|
191
|
+
}, getItemId(item));
|
|
192
|
+
})
|
|
193
|
+
}), !hasData && /*#__PURE__*/_jsx("div", {
|
|
194
|
+
className: clsx({
|
|
195
|
+
'dataviews-loading': isLoading,
|
|
196
|
+
'dataviews-no-results': !isLoading
|
|
197
|
+
}),
|
|
198
|
+
children: /*#__PURE__*/_jsx("p", {
|
|
199
|
+
children: isLoading ? /*#__PURE__*/_jsx(Spinner, {}) : __('No results')
|
|
200
|
+
})
|
|
201
|
+
})]
|
|
202
|
+
});
|
|
188
203
|
}
|
|
189
204
|
//# sourceMappingURL=view-grid.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"names":["classnames","__experimentalGrid","Grid","__experimentalHStack","HStack","__experimentalVStack","VStack","Spinner","Flex","FlexItem","__","ItemActions","SingleSelectionCheckbox","useHasAPossibleBulkAction","GridItem","selection","data","onSelectionChange","getItemId","item","actions","mediaField","primaryField","visibleFields","badgeFields","columnFields","hasBulkAction","id","isSelected","includes","createElement","spacing","key","className","onClickCapture","event","ctrlKey","metaKey","stopPropagation","preventDefault","filter","_item","itemId","render","justify","disabled","isCompact","length","wrap","align","map","field","renderedValue","gap","expanded","style","height","direction","Fragment","header","maxHeight","ViewGrid","fields","view","isLoading","find","layout","reduce","accumulator","hiddenFields","push","hasData","columns","alignment"],"sources":["@wordpress/dataviews/src/view-grid.js"],"sourcesContent":["/**\n * External dependencies\n */\nimport classnames from 'classnames';\n\n/**\n * WordPress dependencies\n */\nimport {\n\t__experimentalGrid as Grid,\n\t__experimentalHStack as HStack,\n\t__experimentalVStack as VStack,\n\tSpinner,\n\tFlex,\n\tFlexItem,\n} from '@wordpress/components';\nimport { __ } from '@wordpress/i18n';\n\n/**\n * Internal dependencies\n */\nimport ItemActions from './item-actions';\nimport SingleSelectionCheckbox from './single-selection-checkbox';\n\nimport { useHasAPossibleBulkAction } from './bulk-actions';\n\nfunction GridItem( {\n\tselection,\n\tdata,\n\tonSelectionChange,\n\tgetItemId,\n\titem,\n\tactions,\n\tmediaField,\n\tprimaryField,\n\tvisibleFields,\n\tbadgeFields,\n\tcolumnFields,\n} ) {\n\tconst hasBulkAction = useHasAPossibleBulkAction( actions, item );\n\tconst id = getItemId( item );\n\tconst isSelected = selection.includes( id );\n\treturn (\n\t\t<VStack\n\t\t\tspacing={ 0 }\n\t\t\tkey={ id }\n\t\t\tclassName={ classnames( '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 ( event.ctrlKey || event.metaKey ) {\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\tif ( ! isSelected ) {\n\t\t\t\t\t\tonSelectionChange(\n\t\t\t\t\t\t\tdata.filter( ( _item ) => {\n\t\t\t\t\t\t\t\tconst itemId = getItemId?.( _item );\n\t\t\t\t\t\t\t\treturn (\n\t\t\t\t\t\t\t\t\titemId === id ||\n\t\t\t\t\t\t\t\t\tselection.includes( itemId )\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} else {\n\t\t\t\t\t\tonSelectionChange(\n\t\t\t\t\t\t\tdata.filter( ( _item ) => {\n\t\t\t\t\t\t\t\tconst itemId = getItemId?.( _item );\n\t\t\t\t\t\t\t\treturn (\n\t\t\t\t\t\t\t\t\titemId !== id &&\n\t\t\t\t\t\t\t\t\tselection.includes( itemId )\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}\n\t\t\t} }\n\t\t>\n\t\t\t<div className=\"dataviews-view-grid__media\">\n\t\t\t\t{ mediaField?.render( { item } ) }\n\t\t\t</div>\n\t\t\t<HStack\n\t\t\t\tjustify=\"space-between\"\n\t\t\t\tclassName=\"dataviews-view-grid__title-actions\"\n\t\t\t>\n\t\t\t\t<SingleSelectionCheckbox\n\t\t\t\t\tid={ id }\n\t\t\t\t\titem={ item }\n\t\t\t\t\tselection={ selection }\n\t\t\t\t\tonSelectionChange={ onSelectionChange }\n\t\t\t\t\tgetItemId={ getItemId }\n\t\t\t\t\tdata={ data }\n\t\t\t\t\tprimaryField={ primaryField }\n\t\t\t\t\tdisabled={ ! hasBulkAction }\n\t\t\t\t/>\n\t\t\t\t<HStack className=\"dataviews-view-grid__primary-field\">\n\t\t\t\t\t{ primaryField?.render( { item } ) }\n\t\t\t\t</HStack>\n\t\t\t\t<ItemActions item={ item } actions={ actions } isCompact />\n\t\t\t</HStack>\n\t\t\t{ !! badgeFields?.length && (\n\t\t\t\t<HStack\n\t\t\t\t\tclassName=\"dataviews-view-grid__badge-fields\"\n\t\t\t\t\tspacing={ 2 }\n\t\t\t\t\twrap\n\t\t\t\t\talign=\"top\"\n\t\t\t\t\tjustify=\"flex-start\"\n\t\t\t\t>\n\t\t\t\t\t{ badgeFields.map( ( field ) => {\n\t\t\t\t\t\tconst renderedValue = field.render( {\n\t\t\t\t\t\t\titem,\n\t\t\t\t\t\t} );\n\t\t\t\t\t\tif ( ! renderedValue ) {\n\t\t\t\t\t\t\treturn null;\n\t\t\t\t\t\t}\n\t\t\t\t\t\treturn (\n\t\t\t\t\t\t\t<FlexItem\n\t\t\t\t\t\t\t\tkey={ field.id }\n\t\t\t\t\t\t\t\tclassName={ 'dataviews-view-grid__field-value' }\n\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t{ renderedValue }\n\t\t\t\t\t\t\t</FlexItem>\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{ !! visibleFields?.length && (\n\t\t\t\t<VStack className=\"dataviews-view-grid__fields\" spacing={ 3 }>\n\t\t\t\t\t{ visibleFields.map( ( field ) => {\n\t\t\t\t\t\tconst renderedValue = field.render( {\n\t\t\t\t\t\t\titem,\n\t\t\t\t\t\t} );\n\t\t\t\t\t\tif ( ! renderedValue ) {\n\t\t\t\t\t\t\treturn null;\n\t\t\t\t\t\t}\n\t\t\t\t\t\treturn (\n\t\t\t\t\t\t\t<Flex\n\t\t\t\t\t\t\t\tclassName={ classnames(\n\t\t\t\t\t\t\t\t\t'dataviews-view-grid__field',\n\t\t\t\t\t\t\t\t\tcolumnFields?.includes( field.id )\n\t\t\t\t\t\t\t\t\t\t? 'is-column'\n\t\t\t\t\t\t\t\t\t\t: 'is-row'\n\t\t\t\t\t\t\t\t) }\n\t\t\t\t\t\t\t\tkey={ field.id }\n\t\t\t\t\t\t\t\tgap={ 1 }\n\t\t\t\t\t\t\t\tjustify=\"flex-start\"\n\t\t\t\t\t\t\t\texpanded\n\t\t\t\t\t\t\t\tstyle={ { height: 'auto' } }\n\t\t\t\t\t\t\t\tdirection={\n\t\t\t\t\t\t\t\t\tcolumnFields?.includes( field.id )\n\t\t\t\t\t\t\t\t\t\t? 'column'\n\t\t\t\t\t\t\t\t\t\t: 'row'\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<>\n\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{ field.header }\n\t\t\t\t\t\t\t\t\t</FlexItem>\n\t\t\t\t\t\t\t\t\t<FlexItem\n\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\tstyle={ { maxHeight: 'none' } }\n\t\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t\t{ renderedValue }\n\t\t\t\t\t\t\t\t\t</FlexItem>\n\t\t\t\t\t\t\t\t</>\n\t\t\t\t\t\t\t</Flex>\n\t\t\t\t\t\t);\n\t\t\t\t\t} ) }\n\t\t\t\t</VStack>\n\t\t\t) }\n\t\t</VStack>\n\t);\n}\n\nexport default function ViewGrid( {\n\tdata,\n\tfields,\n\tview,\n\tactions,\n\tisLoading,\n\tgetItemId,\n\tselection,\n\tonSelectionChange,\n} ) {\n\tconst mediaField = fields.find(\n\t\t( field ) => field.id === view.layout.mediaField\n\t);\n\tconst primaryField = fields.find(\n\t\t( field ) => field.id === view.layout.primaryField\n\t);\n\tconst { visibleFields, badgeFields } = fields.reduce(\n\t\t( accumulator, field ) => {\n\t\t\tif (\n\t\t\t\tview.hiddenFields.includes( field.id ) ||\n\t\t\t\t[ view.layout.mediaField, view.layout.primaryField ].includes(\n\t\t\t\t\tfield.id\n\t\t\t\t)\n\t\t\t) {\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( field.id )\n\t\t\t\t? 'badgeFields'\n\t\t\t\t: 'visibleFields';\n\t\t\taccumulator[ key ].push( field );\n\t\t\treturn accumulator;\n\t\t},\n\t\t{ visibleFields: [], badgeFields: [] }\n\t);\n\tconst hasData = !! data?.length;\n\treturn (\n\t\t<>\n\t\t\t{ hasData && (\n\t\t\t\t<Grid\n\t\t\t\t\tgap={ 6 }\n\t\t\t\t\tcolumns={ 2 }\n\t\t\t\t\talignment=\"top\"\n\t\t\t\t\tclassName=\"dataviews-view-grid\"\n\t\t\t\t\taria-busy={ isLoading }\n\t\t\t\t>\n\t\t\t\t\t{ data.map( ( item ) => {\n\t\t\t\t\t\treturn (\n\t\t\t\t\t\t\t<GridItem\n\t\t\t\t\t\t\t\tkey={ getItemId( item ) }\n\t\t\t\t\t\t\t\tselection={ selection }\n\t\t\t\t\t\t\t\tdata={ data }\n\t\t\t\t\t\t\t\tonSelectionChange={ onSelectionChange }\n\t\t\t\t\t\t\t\tgetItemId={ getItemId }\n\t\t\t\t\t\t\t\titem={ item }\n\t\t\t\t\t\t\t\tactions={ actions }\n\t\t\t\t\t\t\t\tmediaField={ mediaField }\n\t\t\t\t\t\t\t\tprimaryField={ primaryField }\n\t\t\t\t\t\t\t\tvisibleFields={ visibleFields }\n\t\t\t\t\t\t\t\tbadgeFields={ badgeFields }\n\t\t\t\t\t\t\t\tcolumnFields={ view.layout.columnFields }\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</Grid>\n\t\t\t) }\n\t\t\t{ ! hasData && (\n\t\t\t\t<div\n\t\t\t\t\tclassName={ classnames( {\n\t\t\t\t\t\t'dataviews-loading': isLoading,\n\t\t\t\t\t\t'dataviews-no-results': ! isLoading,\n\t\t\t\t\t} ) }\n\t\t\t\t>\n\t\t\t\t\t<p>{ isLoading ? <Spinner /> : __( 'No results' ) }</p>\n\t\t\t\t</div>\n\t\t\t) }\n\t\t</>\n\t);\n}\n"],"mappings":"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","ignoreList":[]}
|
|
1
|
+
{"version":3,"names":["clsx","__experimentalGrid","Grid","__experimentalHStack","HStack","__experimentalVStack","VStack","Spinner","Flex","FlexItem","__","ItemActions","SingleSelectionCheckbox","useHasAPossibleBulkAction","jsx","_jsx","jsxs","_jsxs","Fragment","_Fragment","GridItem","selection","data","onSelectionChange","getItemId","item","actions","mediaField","primaryField","visibleFields","badgeFields","columnFields","hasBulkAction","id","isSelected","includes","spacing","className","onClickCapture","event","ctrlKey","metaKey","stopPropagation","preventDefault","filter","_item","itemId","children","render","justify","disabled","isCompact","length","wrap","alignment","map","field","renderedValue","gap","expanded","style","height","direction","header","maxHeight","ViewGrid","fields","isLoading","view","find","layout","reduce","accumulator","hiddenFields","key","push","hasData","columns"],"sources":["@wordpress/dataviews/src/view-grid.tsx"],"sourcesContent":["/**\n * External dependencies\n */\nimport clsx from 'clsx';\n\n/**\n * WordPress dependencies\n */\nimport {\n\t__experimentalGrid as Grid,\n\t__experimentalHStack as HStack,\n\t__experimentalVStack as VStack,\n\tSpinner,\n\tFlex,\n\tFlexItem,\n} from '@wordpress/components';\nimport { __ } from '@wordpress/i18n';\n\n/**\n * Internal dependencies\n */\nimport ItemActions from './item-actions';\nimport SingleSelectionCheckbox from './single-selection-checkbox';\nimport { useHasAPossibleBulkAction } from './bulk-actions';\nimport type { Action, AnyItem, NormalizedField, ViewGridProps } from './types';\n\ninterface GridItemProps< Item extends AnyItem > {\n\tselection: string[];\n\tdata: Item[];\n\tonSelectionChange: ( items: Item[] ) => void;\n\tgetItemId: ( item: Item ) => string;\n\titem: Item;\n\tactions: Action< Item >[];\n\tmediaField?: NormalizedField< Item >;\n\tprimaryField?: NormalizedField< Item >;\n\tvisibleFields: NormalizedField< Item >[];\n\tbadgeFields: NormalizedField< Item >[];\n\tcolumnFields?: string[];\n}\n\nfunction GridItem< Item extends AnyItem >( {\n\tselection,\n\tdata,\n\tonSelectionChange,\n\tgetItemId,\n\titem,\n\tactions,\n\tmediaField,\n\tprimaryField,\n\tvisibleFields,\n\tbadgeFields,\n\tcolumnFields,\n}: GridItemProps< Item > ) {\n\tconst hasBulkAction = useHasAPossibleBulkAction( actions, item );\n\tconst id = getItemId( item );\n\tconst isSelected = selection.includes( id );\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 ( event.ctrlKey || event.metaKey ) {\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\tif ( ! isSelected ) {\n\t\t\t\t\t\tonSelectionChange(\n\t\t\t\t\t\t\tdata.filter( ( _item ) => {\n\t\t\t\t\t\t\t\tconst itemId = getItemId?.( _item );\n\t\t\t\t\t\t\t\treturn (\n\t\t\t\t\t\t\t\t\titemId === id ||\n\t\t\t\t\t\t\t\t\tselection.includes( itemId )\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} else {\n\t\t\t\t\t\tonSelectionChange(\n\t\t\t\t\t\t\tdata.filter( ( _item ) => {\n\t\t\t\t\t\t\t\tconst itemId = getItemId?.( _item );\n\t\t\t\t\t\t\t\treturn (\n\t\t\t\t\t\t\t\t\titemId !== id &&\n\t\t\t\t\t\t\t\t\tselection.includes( itemId )\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}\n\t\t\t} }\n\t\t>\n\t\t\t<div className=\"dataviews-view-grid__media\">\n\t\t\t\t{ mediaField?.render( { item } ) }\n\t\t\t</div>\n\t\t\t<HStack\n\t\t\t\tjustify=\"space-between\"\n\t\t\t\tclassName=\"dataviews-view-grid__title-actions\"\n\t\t\t>\n\t\t\t\t<SingleSelectionCheckbox\n\t\t\t\t\titem={ item }\n\t\t\t\t\tselection={ selection }\n\t\t\t\t\tonSelectionChange={ onSelectionChange }\n\t\t\t\t\tgetItemId={ getItemId }\n\t\t\t\t\tdata={ data }\n\t\t\t\t\tprimaryField={ primaryField }\n\t\t\t\t\tdisabled={ ! hasBulkAction }\n\t\t\t\t/>\n\t\t\t\t<HStack className=\"dataviews-view-grid__primary-field\">\n\t\t\t\t\t{ primaryField?.render( { item } ) }\n\t\t\t\t</HStack>\n\t\t\t\t<ItemActions item={ item } actions={ actions } isCompact />\n\t\t\t</HStack>\n\t\t\t{ !! badgeFields?.length && (\n\t\t\t\t<HStack\n\t\t\t\t\tclassName=\"dataviews-view-grid__badge-fields\"\n\t\t\t\t\tspacing={ 2 }\n\t\t\t\t\twrap\n\t\t\t\t\talignment=\"top\"\n\t\t\t\t\tjustify=\"flex-start\"\n\t\t\t\t>\n\t\t\t\t\t{ badgeFields.map( ( field ) => {\n\t\t\t\t\t\tconst renderedValue = field.render( {\n\t\t\t\t\t\t\titem,\n\t\t\t\t\t\t} );\n\t\t\t\t\t\tif ( ! renderedValue ) {\n\t\t\t\t\t\t\treturn null;\n\t\t\t\t\t\t}\n\t\t\t\t\t\treturn (\n\t\t\t\t\t\t\t<FlexItem\n\t\t\t\t\t\t\t\tkey={ field.id }\n\t\t\t\t\t\t\t\tclassName=\"dataviews-view-grid__field-value\"\n\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t{ renderedValue }\n\t\t\t\t\t\t\t</FlexItem>\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{ !! visibleFields?.length && (\n\t\t\t\t<VStack className=\"dataviews-view-grid__fields\" spacing={ 3 }>\n\t\t\t\t\t{ visibleFields.map( ( field ) => {\n\t\t\t\t\t\tconst renderedValue = field.render( {\n\t\t\t\t\t\t\titem,\n\t\t\t\t\t\t} );\n\t\t\t\t\t\tif ( ! renderedValue ) {\n\t\t\t\t\t\t\treturn null;\n\t\t\t\t\t\t}\n\t\t\t\t\t\treturn (\n\t\t\t\t\t\t\t<Flex\n\t\t\t\t\t\t\t\tclassName={ clsx(\n\t\t\t\t\t\t\t\t\t'dataviews-view-grid__field',\n\t\t\t\t\t\t\t\t\tcolumnFields?.includes( field.id )\n\t\t\t\t\t\t\t\t\t\t? 'is-column'\n\t\t\t\t\t\t\t\t\t\t: 'is-row'\n\t\t\t\t\t\t\t\t) }\n\t\t\t\t\t\t\t\tkey={ field.id }\n\t\t\t\t\t\t\t\tgap={ 1 }\n\t\t\t\t\t\t\t\tjustify=\"flex-start\"\n\t\t\t\t\t\t\t\texpanded\n\t\t\t\t\t\t\t\tstyle={ { height: 'auto' } }\n\t\t\t\t\t\t\t\tdirection={\n\t\t\t\t\t\t\t\t\tcolumnFields?.includes( field.id )\n\t\t\t\t\t\t\t\t\t\t? 'column'\n\t\t\t\t\t\t\t\t\t\t: 'row'\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<>\n\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{ field.header }\n\t\t\t\t\t\t\t\t\t</FlexItem>\n\t\t\t\t\t\t\t\t\t<FlexItem\n\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\tstyle={ { maxHeight: 'none' } }\n\t\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t\t{ renderedValue }\n\t\t\t\t\t\t\t\t\t</FlexItem>\n\t\t\t\t\t\t\t\t</>\n\t\t\t\t\t\t\t</Flex>\n\t\t\t\t\t\t);\n\t\t\t\t\t} ) }\n\t\t\t\t</VStack>\n\t\t\t) }\n\t\t</VStack>\n\t);\n}\n\nexport default function ViewGrid< Item extends AnyItem >( {\n\tactions,\n\tdata,\n\tfields,\n\tgetItemId,\n\tisLoading,\n\tonSelectionChange,\n\tselection,\n\tview,\n}: ViewGridProps< Item > ) {\n\tconst mediaField = fields.find(\n\t\t( field ) => field.id === view.layout.mediaField\n\t);\n\tconst primaryField = fields.find(\n\t\t( field ) => field.id === view.layout.primaryField\n\t);\n\tconst { visibleFields, badgeFields } = fields.reduce(\n\t\t( accumulator: Record< string, NormalizedField< Item >[] >, field ) => {\n\t\t\tif (\n\t\t\t\tview.hiddenFields.includes( field.id ) ||\n\t\t\t\t[ view.layout.mediaField, view.layout.primaryField ].includes(\n\t\t\t\t\tfield.id\n\t\t\t\t)\n\t\t\t) {\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( field.id )\n\t\t\t\t? 'badgeFields'\n\t\t\t\t: 'visibleFields';\n\t\t\taccumulator[ key ].push( field );\n\t\t\treturn accumulator;\n\t\t},\n\t\t{ visibleFields: [], badgeFields: [] }\n\t);\n\tconst hasData = !! data?.length;\n\treturn (\n\t\t<>\n\t\t\t{ hasData && (\n\t\t\t\t<Grid\n\t\t\t\t\tgap={ 8 }\n\t\t\t\t\tcolumns={ 2 }\n\t\t\t\t\talignment=\"top\"\n\t\t\t\t\tclassName=\"dataviews-view-grid\"\n\t\t\t\t\taria-busy={ isLoading }\n\t\t\t\t>\n\t\t\t\t\t{ data.map( ( item ) => {\n\t\t\t\t\t\treturn (\n\t\t\t\t\t\t\t<GridItem\n\t\t\t\t\t\t\t\tkey={ getItemId( item ) }\n\t\t\t\t\t\t\t\tselection={ selection }\n\t\t\t\t\t\t\t\tdata={ data }\n\t\t\t\t\t\t\t\tonSelectionChange={ onSelectionChange }\n\t\t\t\t\t\t\t\tgetItemId={ getItemId }\n\t\t\t\t\t\t\t\titem={ item }\n\t\t\t\t\t\t\t\tactions={ actions }\n\t\t\t\t\t\t\t\tmediaField={ mediaField }\n\t\t\t\t\t\t\t\tprimaryField={ primaryField }\n\t\t\t\t\t\t\t\tvisibleFields={ visibleFields }\n\t\t\t\t\t\t\t\tbadgeFields={ badgeFields }\n\t\t\t\t\t\t\t\tcolumnFields={ view.layout.columnFields }\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</Grid>\n\t\t\t) }\n\t\t\t{ ! hasData && (\n\t\t\t\t<div\n\t\t\t\t\tclassName={ clsx( {\n\t\t\t\t\t\t'dataviews-loading': isLoading,\n\t\t\t\t\t\t'dataviews-no-results': ! isLoading,\n\t\t\t\t\t} ) }\n\t\t\t\t>\n\t\t\t\t\t<p>{ isLoading ? <Spinner /> : __( 'No results' ) }</p>\n\t\t\t\t</div>\n\t\t\t) }\n\t\t</>\n\t);\n}\n"],"mappings":"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","ignoreList":[]}
|