@commercetools-uikit/hooks 16.0.0 → 16.1.1
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.
|
@@ -46,18 +46,15 @@ var isNil__default = /*#__PURE__*/_interopDefault(isNil);
|
|
|
46
46
|
|
|
47
47
|
const useToggleState = defaultValue => {
|
|
48
48
|
const initialValue = typeof defaultValue === 'boolean' ? defaultValue : true;
|
|
49
|
-
|
|
50
49
|
const _useState = react.useState(initialValue),
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
50
|
+
_useState2 = _slicedToArray(_useState, 2),
|
|
51
|
+
isToggled = _useState2[0],
|
|
52
|
+
setIsToggled = _useState2[1];
|
|
55
53
|
const toggle = react.useCallback(forceIsToggled => {
|
|
56
54
|
setIsToggled(typeof forceIsToggled === 'boolean' ? forceIsToggled : !isToggled);
|
|
57
55
|
}, [isToggled, setIsToggled]);
|
|
58
56
|
return [isToggled, toggle];
|
|
59
57
|
};
|
|
60
|
-
|
|
61
58
|
var useToggleState$1 = useToggleState;
|
|
62
59
|
|
|
63
60
|
const usePrevious = value => {
|
|
@@ -67,15 +64,13 @@ const usePrevious = value => {
|
|
|
67
64
|
}, [value]);
|
|
68
65
|
return ref.current;
|
|
69
66
|
};
|
|
70
|
-
|
|
71
67
|
var usePrevious$1 = usePrevious;
|
|
72
68
|
|
|
73
69
|
const useFieldId = (id, createIdFn) => {
|
|
74
70
|
const _useState = react.useState(id || createIdFn()),
|
|
75
|
-
|
|
76
|
-
|
|
77
|
-
|
|
78
|
-
|
|
71
|
+
_useState2 = _slicedToArray(_useState, 2),
|
|
72
|
+
internalId = _useState2[0],
|
|
73
|
+
setId = _useState2[1];
|
|
79
74
|
react.useEffect(() => {
|
|
80
75
|
const props = {
|
|
81
76
|
id
|
|
@@ -87,11 +82,9 @@ const useFieldId = (id, createIdFn) => {
|
|
|
87
82
|
}, [id, internalId, setId, createIdFn]);
|
|
88
83
|
return internalId;
|
|
89
84
|
};
|
|
90
|
-
|
|
91
85
|
var useFieldId$1 = useFieldId;
|
|
92
86
|
|
|
93
87
|
let _mutationObserver;
|
|
94
|
-
|
|
95
88
|
const useLatest = current => {
|
|
96
89
|
const storedValue = react.useRef(current);
|
|
97
90
|
react.useEffect(() => {
|
|
@@ -99,21 +92,16 @@ const useLatest = current => {
|
|
|
99
92
|
});
|
|
100
93
|
return storedValue;
|
|
101
94
|
};
|
|
102
|
-
|
|
103
95
|
function createMutationObserver() {
|
|
104
96
|
const callbacks = new _Map__default["default"]();
|
|
105
97
|
const observer = new MutationObserver(rafSchd__default["default"]((mutationsList, observer) => {
|
|
106
98
|
const mutationsByTarget = _reduceInstanceProperty__default["default"](mutationsList).call(mutationsList, (_mutationsByTarget, mutation) => {
|
|
107
99
|
var _mutationsByTarget$ge;
|
|
108
|
-
|
|
109
100
|
const callbacksForTarget = (_mutationsByTarget$ge = _mutationsByTarget.get(mutation.target)) !== null && _mutationsByTarget$ge !== void 0 ? _mutationsByTarget$ge : [];
|
|
110
101
|
callbacksForTarget.push(mutation);
|
|
111
|
-
|
|
112
102
|
_mutationsByTarget.set(mutation.target, callbacksForTarget);
|
|
113
|
-
|
|
114
103
|
return _mutationsByTarget;
|
|
115
104
|
}, new _Map__default["default"]());
|
|
116
|
-
|
|
117
105
|
_forEachInstanceProperty__default["default"](mutationsByTarget).call(mutationsByTarget, (mutations, target) => {
|
|
118
106
|
const targetCallbacks = callbacks.get(target);
|
|
119
107
|
targetCallbacks === null || targetCallbacks === void 0 ? void 0 : _forEachInstanceProperty__default["default"](targetCallbacks).call(targetCallbacks, cb => cb(mutations, observer));
|
|
@@ -121,38 +109,28 @@ function createMutationObserver() {
|
|
|
121
109
|
}));
|
|
122
110
|
return {
|
|
123
111
|
observer,
|
|
124
|
-
|
|
125
112
|
subscribe(target, callback, options) {
|
|
126
113
|
var _callbacks$get;
|
|
127
|
-
|
|
128
114
|
observer.observe(target, options);
|
|
129
115
|
const targetCallbacks = (_callbacks$get = callbacks.get(target)) !== null && _callbacks$get !== void 0 ? _callbacks$get : [];
|
|
130
116
|
targetCallbacks.push(callback);
|
|
131
117
|
callbacks.set(target, targetCallbacks);
|
|
132
118
|
},
|
|
133
|
-
|
|
134
119
|
unsubscribe(target, callback) {
|
|
135
120
|
var _callbacks$get2;
|
|
136
|
-
|
|
137
121
|
const targetCallbacks = (_callbacks$get2 = callbacks.get(target)) !== null && _callbacks$get2 !== void 0 ? _callbacks$get2 : [];
|
|
138
|
-
|
|
139
122
|
if (targetCallbacks.length === 1) {
|
|
140
123
|
observer.disconnect();
|
|
141
124
|
callbacks.delete(target);
|
|
142
125
|
return;
|
|
143
126
|
}
|
|
144
|
-
|
|
145
127
|
const tcIndex = _indexOfInstanceProperty__default["default"](targetCallbacks).call(targetCallbacks, callback);
|
|
146
|
-
|
|
147
128
|
if (tcIndex !== -1) _spliceInstanceProperty__default["default"](targetCallbacks).call(targetCallbacks, tcIndex, 1);
|
|
148
129
|
callbacks.set(target, targetCallbacks);
|
|
149
130
|
}
|
|
150
|
-
|
|
151
131
|
};
|
|
152
132
|
}
|
|
153
|
-
|
|
154
133
|
const getMutationObserver = () => !_mutationObserver ? _mutationObserver = createMutationObserver() : _mutationObserver;
|
|
155
|
-
|
|
156
134
|
function useMutationObserver(target, callback, options) {
|
|
157
135
|
const mutationObserver = getMutationObserver();
|
|
158
136
|
const storedCallback = useLatest(callback);
|
|
@@ -161,12 +139,10 @@ function useMutationObserver(target, callback, options) {
|
|
|
161
139
|
let didUnsubscribe = false;
|
|
162
140
|
const targetEl = target && 'current' in target ? target.current : target;
|
|
163
141
|
if (!targetEl) return () => {};
|
|
164
|
-
|
|
165
142
|
function cb(mutationsList, observer) {
|
|
166
143
|
if (didUnsubscribe) return;
|
|
167
144
|
storedCallback.current(mutationsList, observer);
|
|
168
145
|
}
|
|
169
|
-
|
|
170
146
|
mutationObserver.subscribe(targetEl, cb, storedOptions.current);
|
|
171
147
|
return () => {
|
|
172
148
|
didUnsubscribe = true;
|
|
@@ -177,9 +153,7 @@ function useMutationObserver(target, callback, options) {
|
|
|
177
153
|
}
|
|
178
154
|
|
|
179
155
|
function ownKeys$2(object, enumerableOnly) { var keys = _Object$keys__default["default"](object); if (_Object$getOwnPropertySymbols__default["default"]) { var symbols = _Object$getOwnPropertySymbols__default["default"](object); enumerableOnly && (symbols = _filterInstanceProperty__default["default"](symbols).call(symbols, function (sym) { return _Object$getOwnPropertyDescriptor__default["default"](object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
|
|
180
|
-
|
|
181
156
|
function _objectSpread$2(target) { for (var i = 1; i < arguments.length; i++) { var _context3, _context4; var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? _forEachInstanceProperty__default["default"](_context3 = ownKeys$2(Object(source), !0)).call(_context3, function (key) { _defineProperty(target, key, source[key]); }) : _Object$getOwnPropertyDescriptors__default["default"] ? _Object$defineProperties__default["default"](target, _Object$getOwnPropertyDescriptors__default["default"](source)) : _forEachInstanceProperty__default["default"](_context4 = ownKeys$2(Object(source))).call(_context4, function (key) { _Object$defineProperty__default["default"](target, key, _Object$getOwnPropertyDescriptor__default["default"](source, key)); }); } return target; }
|
|
182
|
-
|
|
183
157
|
const getInitialState$1 = (keyName, rows) => _reduceInstanceProperty__default["default"](rows).call(rows, (items, currentItem) => {
|
|
184
158
|
// @ts-ignore: index signature is confused as items might contain the initial value.
|
|
185
159
|
const initialValue = currentItem[keyName];
|
|
@@ -188,86 +162,67 @@ const getInitialState$1 = (keyName, rows) => _reduceInstanceProperty__default["d
|
|
|
188
162
|
[currentItem.id]: initialValue !== null && initialValue !== void 0 ? initialValue : false
|
|
189
163
|
});
|
|
190
164
|
}, {});
|
|
191
|
-
|
|
192
165
|
function selectionReducer(state, action) {
|
|
193
166
|
switch (action.type) {
|
|
194
167
|
case 'toggle':
|
|
195
168
|
return _objectSpread$2(_objectSpread$2({}, state), {}, {
|
|
196
169
|
[action.payload]: !state[action.payload]
|
|
197
170
|
});
|
|
198
|
-
|
|
199
171
|
case 'select':
|
|
200
172
|
return _objectSpread$2(_objectSpread$2({}, state), {}, {
|
|
201
173
|
[action.payload]: true
|
|
202
174
|
});
|
|
203
|
-
|
|
204
175
|
case 'deselect':
|
|
205
176
|
return _objectSpread$2(_objectSpread$2({}, state), {}, {
|
|
206
177
|
[action.payload]: false
|
|
207
178
|
});
|
|
208
|
-
|
|
209
179
|
case 'selectAll':
|
|
210
180
|
{
|
|
211
181
|
var _context;
|
|
212
|
-
|
|
213
182
|
return _reduceInstanceProperty__default["default"](_context = _Object$keys__default["default"](state)).call(_context, (allItems, currentItem) => _objectSpread$2(_objectSpread$2({}, allItems), {}, {
|
|
214
183
|
[currentItem]: true
|
|
215
184
|
}), {});
|
|
216
185
|
}
|
|
217
|
-
|
|
218
186
|
case 'deselectAll':
|
|
219
187
|
{
|
|
220
188
|
var _context2;
|
|
221
|
-
|
|
222
189
|
return _reduceInstanceProperty__default["default"](_context2 = _Object$keys__default["default"](state)).call(_context2, (allItems, currentItem) => _objectSpread$2(_objectSpread$2({}, allItems), {}, {
|
|
223
190
|
[currentItem]: false
|
|
224
191
|
}), {});
|
|
225
192
|
}
|
|
226
|
-
|
|
227
193
|
default:
|
|
228
194
|
return state;
|
|
229
195
|
}
|
|
230
196
|
}
|
|
231
|
-
|
|
232
197
|
const useRowSelection = (keyName, rows) => {
|
|
233
198
|
const _useReducer = react.useReducer(selectionReducer, getInitialState$1(keyName, rows)),
|
|
234
|
-
|
|
235
|
-
|
|
236
|
-
|
|
237
|
-
|
|
199
|
+
_useReducer2 = _slicedToArray(_useReducer, 2),
|
|
200
|
+
selectionState = _useReducer2[0],
|
|
201
|
+
dispatch = _useReducer2[1];
|
|
238
202
|
react.useDebugValue(selectionState);
|
|
239
|
-
|
|
240
203
|
const selectableRows = _mapInstanceProperty__default["default"](rows).call(rows, item => _objectSpread$2(_objectSpread$2({}, item), {}, {
|
|
241
204
|
[keyName]: selectionState[item.id]
|
|
242
205
|
}));
|
|
243
|
-
|
|
244
206
|
const toggleRow = id => dispatch({
|
|
245
207
|
type: 'toggle',
|
|
246
208
|
payload: id
|
|
247
209
|
});
|
|
248
|
-
|
|
249
210
|
const selectRow = id => dispatch({
|
|
250
211
|
type: 'select',
|
|
251
212
|
payload: id
|
|
252
213
|
});
|
|
253
|
-
|
|
254
214
|
const deselectRow = id => dispatch({
|
|
255
215
|
type: 'deselect',
|
|
256
216
|
payload: id
|
|
257
217
|
});
|
|
258
|
-
|
|
259
218
|
const selectAllRows = () => dispatch({
|
|
260
219
|
type: 'selectAll'
|
|
261
220
|
});
|
|
262
|
-
|
|
263
221
|
const deselectAllRows = () => dispatch({
|
|
264
222
|
type: 'deselectAll'
|
|
265
223
|
});
|
|
266
|
-
|
|
267
224
|
const getIsRowSelected = id => selectionState[id];
|
|
268
|
-
|
|
269
225
|
const getNumberOfSelectedRows = () => _reduceInstanceProperty__default["default"](selectableRows).call(selectableRows, (count, item) => count + (item[keyName] === true ? 1 : 0), 0);
|
|
270
|
-
|
|
271
226
|
return {
|
|
272
227
|
rows: selectableRows,
|
|
273
228
|
toggleRow,
|
|
@@ -279,62 +234,49 @@ const useRowSelection = (keyName, rows) => {
|
|
|
279
234
|
getNumberOfSelectedRows
|
|
280
235
|
};
|
|
281
236
|
};
|
|
282
|
-
|
|
283
237
|
var useRowSelection$1 = useRowSelection;
|
|
284
238
|
|
|
285
239
|
// we're using lodash sortBy as our default sorting fn
|
|
286
240
|
const sortItems = function (items, field, sortDirection) {
|
|
287
241
|
let sortingFunction = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : sortBy__default["default"];
|
|
288
|
-
|
|
289
242
|
if (!field) {
|
|
290
243
|
return items;
|
|
291
244
|
}
|
|
292
|
-
|
|
293
245
|
const sortedItems = sortingFunction(items, field);
|
|
294
|
-
|
|
295
246
|
if (sortDirection === 'desc') {
|
|
296
247
|
return _reverseInstanceProperty__default["default"](sortedItems).call(sortedItems);
|
|
297
248
|
}
|
|
298
|
-
|
|
299
249
|
return sortedItems;
|
|
300
250
|
};
|
|
301
|
-
|
|
302
251
|
const getInitialState = (items, field, sortDirection, sortingFunction) => ({
|
|
303
252
|
items: sortItems(items, field, sortDirection, sortingFunction),
|
|
304
253
|
sortedBy: field,
|
|
305
254
|
sortDirection
|
|
306
255
|
});
|
|
307
|
-
|
|
308
256
|
const useSorting = (items, field, sortDirection, sortingFunction) => {
|
|
309
257
|
const _useState = react.useState(() => getInitialState(items, field, sortDirection, sortingFunction)),
|
|
310
|
-
|
|
311
|
-
|
|
312
|
-
|
|
313
|
-
|
|
258
|
+
_useState2 = _slicedToArray(_useState, 2),
|
|
259
|
+
sortState = _useState2[0],
|
|
260
|
+
setSorting = _useState2[1];
|
|
314
261
|
react.useDebugValue(sortState);
|
|
315
|
-
|
|
316
262
|
function onSortChange(fieldKey) {
|
|
317
263
|
let nextSortDirection;
|
|
318
264
|
let sortedItems;
|
|
319
|
-
|
|
320
265
|
if (sortState.sortedBy !== fieldKey) {
|
|
321
266
|
// if the intented field is not already sorted, the initial direction is 'asc'
|
|
322
267
|
nextSortDirection = 'asc';
|
|
323
268
|
sortedItems = sortItems(sortState.items, fieldKey, nextSortDirection);
|
|
324
269
|
} else {
|
|
325
270
|
var _context;
|
|
326
|
-
|
|
327
271
|
nextSortDirection = sortState.sortDirection === 'asc' ? 'desc' : 'asc';
|
|
328
272
|
sortedItems = _reverseInstanceProperty__default["default"](_context = sortState.items).call(_context);
|
|
329
273
|
}
|
|
330
|
-
|
|
331
274
|
setSorting({
|
|
332
275
|
items: sortedItems,
|
|
333
276
|
sortedBy: fieldKey,
|
|
334
277
|
sortDirection: nextSortDirection
|
|
335
278
|
});
|
|
336
279
|
}
|
|
337
|
-
|
|
338
280
|
return {
|
|
339
281
|
items: sortState.items,
|
|
340
282
|
sortedBy: sortState.sortedBy,
|
|
@@ -342,37 +284,28 @@ const useSorting = (items, field, sortDirection, sortingFunction) => {
|
|
|
342
284
|
onSortChange
|
|
343
285
|
};
|
|
344
286
|
};
|
|
345
|
-
|
|
346
287
|
var useSorting$1 = useSorting;
|
|
347
288
|
|
|
348
289
|
function ownKeys$1(object, enumerableOnly) { var keys = _Object$keys__default["default"](object); if (_Object$getOwnPropertySymbols__default["default"]) { var symbols = _Object$getOwnPropertySymbols__default["default"](object); enumerableOnly && (symbols = _filterInstanceProperty__default["default"](symbols).call(symbols, function (sym) { return _Object$getOwnPropertyDescriptor__default["default"](object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
|
|
349
|
-
|
|
350
290
|
function _objectSpread$1(target) { for (var i = 1; i < arguments.length; i++) { var _context, _context2; var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? _forEachInstanceProperty__default["default"](_context = ownKeys$1(Object(source), !0)).call(_context, function (key) { _defineProperty(target, key, source[key]); }) : _Object$getOwnPropertyDescriptors__default["default"] ? _Object$defineProperties__default["default"](target, _Object$getOwnPropertyDescriptors__default["default"](source)) : _forEachInstanceProperty__default["default"](_context2 = ownKeys$1(Object(source))).call(_context2, function (key) { _Object$defineProperty__default["default"](target, key, _Object$getOwnPropertyDescriptor__default["default"](source, key)); }); } return target; }
|
|
351
|
-
|
|
352
291
|
const applyIf$1 = (values, key) => !isNil__default["default"](values[key]) ? {
|
|
353
292
|
[key]: values[key]
|
|
354
293
|
} : {};
|
|
355
|
-
|
|
356
294
|
const defaultValues$1 = {
|
|
357
295
|
page: 1,
|
|
358
296
|
perPage: 20
|
|
359
297
|
};
|
|
360
|
-
|
|
361
298
|
const usePaginationState = function () {
|
|
362
299
|
let initialValues = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
|
|
363
|
-
|
|
364
300
|
const mergedValues = _objectSpread$1(_objectSpread$1(_objectSpread$1({}, defaultValues$1), applyIf$1(initialValues, 'page')), applyIf$1(initialValues, 'perPage'));
|
|
365
|
-
|
|
366
301
|
const _useState = react.useState(mergedValues.page),
|
|
367
|
-
|
|
368
|
-
|
|
369
|
-
|
|
370
|
-
|
|
302
|
+
_useState2 = _slicedToArray(_useState, 2),
|
|
303
|
+
page = _useState2[0],
|
|
304
|
+
setPage = _useState2[1];
|
|
371
305
|
const _useState3 = react.useState(mergedValues.perPage),
|
|
372
|
-
|
|
373
|
-
|
|
374
|
-
|
|
375
|
-
|
|
306
|
+
_useState4 = _slicedToArray(_useState3, 2),
|
|
307
|
+
perPage = _useState4[0],
|
|
308
|
+
setPerPage = _useState4[1];
|
|
376
309
|
const onPageChange = react.useCallback(nextPage => {
|
|
377
310
|
setPage(nextPage);
|
|
378
311
|
}, [setPage]);
|
|
@@ -394,31 +327,24 @@ const usePaginationState = function () {
|
|
|
394
327
|
}
|
|
395
328
|
};
|
|
396
329
|
};
|
|
397
|
-
|
|
398
330
|
var usePaginationState$1 = usePaginationState;
|
|
399
331
|
|
|
400
332
|
function ownKeys(object, enumerableOnly) { var keys = _Object$keys__default["default"](object); if (_Object$getOwnPropertySymbols__default["default"]) { var symbols = _Object$getOwnPropertySymbols__default["default"](object); enumerableOnly && (symbols = _filterInstanceProperty__default["default"](symbols).call(symbols, function (sym) { return _Object$getOwnPropertyDescriptor__default["default"](object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
|
|
401
|
-
|
|
402
333
|
function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var _context, _context2; var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? _forEachInstanceProperty__default["default"](_context = ownKeys(Object(source), !0)).call(_context, function (key) { _defineProperty(target, key, source[key]); }) : _Object$getOwnPropertyDescriptors__default["default"] ? _Object$defineProperties__default["default"](target, _Object$getOwnPropertyDescriptors__default["default"](source)) : _forEachInstanceProperty__default["default"](_context2 = ownKeys(Object(source))).call(_context2, function (key) { _Object$defineProperty__default["default"](target, key, _Object$getOwnPropertyDescriptor__default["default"](source, key)); }); } return target; }
|
|
403
334
|
const defaultValues = {
|
|
404
335
|
key: 'createdAt',
|
|
405
336
|
order: 'desc'
|
|
406
337
|
};
|
|
407
|
-
|
|
408
338
|
const applyIf = (values, key) => !isNil__default["default"](values[key]) ? {
|
|
409
339
|
[key]: values[key]
|
|
410
340
|
} : {};
|
|
411
|
-
|
|
412
341
|
const useDataTableSortingState = function () {
|
|
413
342
|
let initialValues = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
|
|
414
|
-
|
|
415
343
|
const mergedValues = _objectSpread(_objectSpread(_objectSpread({}, defaultValues), applyIf(initialValues, 'key')), applyIf(initialValues, 'order'));
|
|
416
|
-
|
|
417
344
|
const _useState = react.useState(mergedValues),
|
|
418
|
-
|
|
419
|
-
|
|
420
|
-
|
|
421
|
-
|
|
345
|
+
_useState2 = _slicedToArray(_useState, 2),
|
|
346
|
+
sortDefinition = _useState2[0],
|
|
347
|
+
setSortDefinition = _useState2[1];
|
|
422
348
|
const onTableSortingChange = react.useCallback((key, order) => {
|
|
423
349
|
setSortDefinition({
|
|
424
350
|
key,
|
|
@@ -430,11 +356,10 @@ const useDataTableSortingState = function () {
|
|
|
430
356
|
onChange: onTableSortingChange
|
|
431
357
|
};
|
|
432
358
|
};
|
|
433
|
-
|
|
434
359
|
var useDataTableSortingState$1 = useDataTableSortingState;
|
|
435
360
|
|
|
436
361
|
// NOTE: This string will be replaced on build time with the package version.
|
|
437
|
-
var version = "16.
|
|
362
|
+
var version = "16.1.1";
|
|
438
363
|
|
|
439
364
|
exports.useDataTableSortingState = useDataTableSortingState$1;
|
|
440
365
|
exports.useFieldId = useFieldId$1;
|
|
@@ -46,18 +46,15 @@ var isNil__default = /*#__PURE__*/_interopDefault(isNil);
|
|
|
46
46
|
|
|
47
47
|
const useToggleState = defaultValue => {
|
|
48
48
|
const initialValue = typeof defaultValue === 'boolean' ? defaultValue : true;
|
|
49
|
-
|
|
50
49
|
const _useState = react.useState(initialValue),
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
50
|
+
_useState2 = _slicedToArray(_useState, 2),
|
|
51
|
+
isToggled = _useState2[0],
|
|
52
|
+
setIsToggled = _useState2[1];
|
|
55
53
|
const toggle = react.useCallback(forceIsToggled => {
|
|
56
54
|
setIsToggled(typeof forceIsToggled === 'boolean' ? forceIsToggled : !isToggled);
|
|
57
55
|
}, [isToggled, setIsToggled]);
|
|
58
56
|
return [isToggled, toggle];
|
|
59
57
|
};
|
|
60
|
-
|
|
61
58
|
var useToggleState$1 = useToggleState;
|
|
62
59
|
|
|
63
60
|
const usePrevious = value => {
|
|
@@ -67,15 +64,13 @@ const usePrevious = value => {
|
|
|
67
64
|
}, [value]);
|
|
68
65
|
return ref.current;
|
|
69
66
|
};
|
|
70
|
-
|
|
71
67
|
var usePrevious$1 = usePrevious;
|
|
72
68
|
|
|
73
69
|
const useFieldId = (id, createIdFn) => {
|
|
74
70
|
const _useState = react.useState(id || createIdFn()),
|
|
75
|
-
|
|
76
|
-
|
|
77
|
-
|
|
78
|
-
|
|
71
|
+
_useState2 = _slicedToArray(_useState, 2),
|
|
72
|
+
internalId = _useState2[0],
|
|
73
|
+
setId = _useState2[1];
|
|
79
74
|
react.useEffect(() => {
|
|
80
75
|
const props = {
|
|
81
76
|
id
|
|
@@ -87,11 +82,9 @@ const useFieldId = (id, createIdFn) => {
|
|
|
87
82
|
}, [id, internalId, setId, createIdFn]);
|
|
88
83
|
return internalId;
|
|
89
84
|
};
|
|
90
|
-
|
|
91
85
|
var useFieldId$1 = useFieldId;
|
|
92
86
|
|
|
93
87
|
let _mutationObserver;
|
|
94
|
-
|
|
95
88
|
const useLatest = current => {
|
|
96
89
|
const storedValue = react.useRef(current);
|
|
97
90
|
react.useEffect(() => {
|
|
@@ -99,21 +92,16 @@ const useLatest = current => {
|
|
|
99
92
|
});
|
|
100
93
|
return storedValue;
|
|
101
94
|
};
|
|
102
|
-
|
|
103
95
|
function createMutationObserver() {
|
|
104
96
|
const callbacks = new _Map__default["default"]();
|
|
105
97
|
const observer = new MutationObserver(rafSchd__default["default"]((mutationsList, observer) => {
|
|
106
98
|
const mutationsByTarget = _reduceInstanceProperty__default["default"](mutationsList).call(mutationsList, (_mutationsByTarget, mutation) => {
|
|
107
99
|
var _mutationsByTarget$ge;
|
|
108
|
-
|
|
109
100
|
const callbacksForTarget = (_mutationsByTarget$ge = _mutationsByTarget.get(mutation.target)) !== null && _mutationsByTarget$ge !== void 0 ? _mutationsByTarget$ge : [];
|
|
110
101
|
callbacksForTarget.push(mutation);
|
|
111
|
-
|
|
112
102
|
_mutationsByTarget.set(mutation.target, callbacksForTarget);
|
|
113
|
-
|
|
114
103
|
return _mutationsByTarget;
|
|
115
104
|
}, new _Map__default["default"]());
|
|
116
|
-
|
|
117
105
|
_forEachInstanceProperty__default["default"](mutationsByTarget).call(mutationsByTarget, (mutations, target) => {
|
|
118
106
|
const targetCallbacks = callbacks.get(target);
|
|
119
107
|
targetCallbacks === null || targetCallbacks === void 0 ? void 0 : _forEachInstanceProperty__default["default"](targetCallbacks).call(targetCallbacks, cb => cb(mutations, observer));
|
|
@@ -121,38 +109,28 @@ function createMutationObserver() {
|
|
|
121
109
|
}));
|
|
122
110
|
return {
|
|
123
111
|
observer,
|
|
124
|
-
|
|
125
112
|
subscribe(target, callback, options) {
|
|
126
113
|
var _callbacks$get;
|
|
127
|
-
|
|
128
114
|
observer.observe(target, options);
|
|
129
115
|
const targetCallbacks = (_callbacks$get = callbacks.get(target)) !== null && _callbacks$get !== void 0 ? _callbacks$get : [];
|
|
130
116
|
targetCallbacks.push(callback);
|
|
131
117
|
callbacks.set(target, targetCallbacks);
|
|
132
118
|
},
|
|
133
|
-
|
|
134
119
|
unsubscribe(target, callback) {
|
|
135
120
|
var _callbacks$get2;
|
|
136
|
-
|
|
137
121
|
const targetCallbacks = (_callbacks$get2 = callbacks.get(target)) !== null && _callbacks$get2 !== void 0 ? _callbacks$get2 : [];
|
|
138
|
-
|
|
139
122
|
if (targetCallbacks.length === 1) {
|
|
140
123
|
observer.disconnect();
|
|
141
124
|
callbacks.delete(target);
|
|
142
125
|
return;
|
|
143
126
|
}
|
|
144
|
-
|
|
145
127
|
const tcIndex = _indexOfInstanceProperty__default["default"](targetCallbacks).call(targetCallbacks, callback);
|
|
146
|
-
|
|
147
128
|
if (tcIndex !== -1) _spliceInstanceProperty__default["default"](targetCallbacks).call(targetCallbacks, tcIndex, 1);
|
|
148
129
|
callbacks.set(target, targetCallbacks);
|
|
149
130
|
}
|
|
150
|
-
|
|
151
131
|
};
|
|
152
132
|
}
|
|
153
|
-
|
|
154
133
|
const getMutationObserver = () => !_mutationObserver ? _mutationObserver = createMutationObserver() : _mutationObserver;
|
|
155
|
-
|
|
156
134
|
function useMutationObserver(target, callback, options) {
|
|
157
135
|
const mutationObserver = getMutationObserver();
|
|
158
136
|
const storedCallback = useLatest(callback);
|
|
@@ -161,12 +139,10 @@ function useMutationObserver(target, callback, options) {
|
|
|
161
139
|
let didUnsubscribe = false;
|
|
162
140
|
const targetEl = target && 'current' in target ? target.current : target;
|
|
163
141
|
if (!targetEl) return () => {};
|
|
164
|
-
|
|
165
142
|
function cb(mutationsList, observer) {
|
|
166
143
|
if (didUnsubscribe) return;
|
|
167
144
|
storedCallback.current(mutationsList, observer);
|
|
168
145
|
}
|
|
169
|
-
|
|
170
146
|
mutationObserver.subscribe(targetEl, cb, storedOptions.current);
|
|
171
147
|
return () => {
|
|
172
148
|
didUnsubscribe = true;
|
|
@@ -177,9 +153,7 @@ function useMutationObserver(target, callback, options) {
|
|
|
177
153
|
}
|
|
178
154
|
|
|
179
155
|
function ownKeys$2(object, enumerableOnly) { var keys = _Object$keys__default["default"](object); if (_Object$getOwnPropertySymbols__default["default"]) { var symbols = _Object$getOwnPropertySymbols__default["default"](object); enumerableOnly && (symbols = _filterInstanceProperty__default["default"](symbols).call(symbols, function (sym) { return _Object$getOwnPropertyDescriptor__default["default"](object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
|
|
180
|
-
|
|
181
156
|
function _objectSpread$2(target) { for (var i = 1; i < arguments.length; i++) { var _context3, _context4; var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? _forEachInstanceProperty__default["default"](_context3 = ownKeys$2(Object(source), !0)).call(_context3, function (key) { _defineProperty(target, key, source[key]); }) : _Object$getOwnPropertyDescriptors__default["default"] ? _Object$defineProperties__default["default"](target, _Object$getOwnPropertyDescriptors__default["default"](source)) : _forEachInstanceProperty__default["default"](_context4 = ownKeys$2(Object(source))).call(_context4, function (key) { _Object$defineProperty__default["default"](target, key, _Object$getOwnPropertyDescriptor__default["default"](source, key)); }); } return target; }
|
|
182
|
-
|
|
183
157
|
const getInitialState$1 = (keyName, rows) => _reduceInstanceProperty__default["default"](rows).call(rows, (items, currentItem) => {
|
|
184
158
|
// @ts-ignore: index signature is confused as items might contain the initial value.
|
|
185
159
|
const initialValue = currentItem[keyName];
|
|
@@ -188,86 +162,67 @@ const getInitialState$1 = (keyName, rows) => _reduceInstanceProperty__default["d
|
|
|
188
162
|
[currentItem.id]: initialValue !== null && initialValue !== void 0 ? initialValue : false
|
|
189
163
|
});
|
|
190
164
|
}, {});
|
|
191
|
-
|
|
192
165
|
function selectionReducer(state, action) {
|
|
193
166
|
switch (action.type) {
|
|
194
167
|
case 'toggle':
|
|
195
168
|
return _objectSpread$2(_objectSpread$2({}, state), {}, {
|
|
196
169
|
[action.payload]: !state[action.payload]
|
|
197
170
|
});
|
|
198
|
-
|
|
199
171
|
case 'select':
|
|
200
172
|
return _objectSpread$2(_objectSpread$2({}, state), {}, {
|
|
201
173
|
[action.payload]: true
|
|
202
174
|
});
|
|
203
|
-
|
|
204
175
|
case 'deselect':
|
|
205
176
|
return _objectSpread$2(_objectSpread$2({}, state), {}, {
|
|
206
177
|
[action.payload]: false
|
|
207
178
|
});
|
|
208
|
-
|
|
209
179
|
case 'selectAll':
|
|
210
180
|
{
|
|
211
181
|
var _context;
|
|
212
|
-
|
|
213
182
|
return _reduceInstanceProperty__default["default"](_context = _Object$keys__default["default"](state)).call(_context, (allItems, currentItem) => _objectSpread$2(_objectSpread$2({}, allItems), {}, {
|
|
214
183
|
[currentItem]: true
|
|
215
184
|
}), {});
|
|
216
185
|
}
|
|
217
|
-
|
|
218
186
|
case 'deselectAll':
|
|
219
187
|
{
|
|
220
188
|
var _context2;
|
|
221
|
-
|
|
222
189
|
return _reduceInstanceProperty__default["default"](_context2 = _Object$keys__default["default"](state)).call(_context2, (allItems, currentItem) => _objectSpread$2(_objectSpread$2({}, allItems), {}, {
|
|
223
190
|
[currentItem]: false
|
|
224
191
|
}), {});
|
|
225
192
|
}
|
|
226
|
-
|
|
227
193
|
default:
|
|
228
194
|
return state;
|
|
229
195
|
}
|
|
230
196
|
}
|
|
231
|
-
|
|
232
197
|
const useRowSelection = (keyName, rows) => {
|
|
233
198
|
const _useReducer = react.useReducer(selectionReducer, getInitialState$1(keyName, rows)),
|
|
234
|
-
|
|
235
|
-
|
|
236
|
-
|
|
237
|
-
|
|
199
|
+
_useReducer2 = _slicedToArray(_useReducer, 2),
|
|
200
|
+
selectionState = _useReducer2[0],
|
|
201
|
+
dispatch = _useReducer2[1];
|
|
238
202
|
react.useDebugValue(selectionState);
|
|
239
|
-
|
|
240
203
|
const selectableRows = _mapInstanceProperty__default["default"](rows).call(rows, item => _objectSpread$2(_objectSpread$2({}, item), {}, {
|
|
241
204
|
[keyName]: selectionState[item.id]
|
|
242
205
|
}));
|
|
243
|
-
|
|
244
206
|
const toggleRow = id => dispatch({
|
|
245
207
|
type: 'toggle',
|
|
246
208
|
payload: id
|
|
247
209
|
});
|
|
248
|
-
|
|
249
210
|
const selectRow = id => dispatch({
|
|
250
211
|
type: 'select',
|
|
251
212
|
payload: id
|
|
252
213
|
});
|
|
253
|
-
|
|
254
214
|
const deselectRow = id => dispatch({
|
|
255
215
|
type: 'deselect',
|
|
256
216
|
payload: id
|
|
257
217
|
});
|
|
258
|
-
|
|
259
218
|
const selectAllRows = () => dispatch({
|
|
260
219
|
type: 'selectAll'
|
|
261
220
|
});
|
|
262
|
-
|
|
263
221
|
const deselectAllRows = () => dispatch({
|
|
264
222
|
type: 'deselectAll'
|
|
265
223
|
});
|
|
266
|
-
|
|
267
224
|
const getIsRowSelected = id => selectionState[id];
|
|
268
|
-
|
|
269
225
|
const getNumberOfSelectedRows = () => _reduceInstanceProperty__default["default"](selectableRows).call(selectableRows, (count, item) => count + (item[keyName] === true ? 1 : 0), 0);
|
|
270
|
-
|
|
271
226
|
return {
|
|
272
227
|
rows: selectableRows,
|
|
273
228
|
toggleRow,
|
|
@@ -279,62 +234,49 @@ const useRowSelection = (keyName, rows) => {
|
|
|
279
234
|
getNumberOfSelectedRows
|
|
280
235
|
};
|
|
281
236
|
};
|
|
282
|
-
|
|
283
237
|
var useRowSelection$1 = useRowSelection;
|
|
284
238
|
|
|
285
239
|
// we're using lodash sortBy as our default sorting fn
|
|
286
240
|
const sortItems = function (items, field, sortDirection) {
|
|
287
241
|
let sortingFunction = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : sortBy__default["default"];
|
|
288
|
-
|
|
289
242
|
if (!field) {
|
|
290
243
|
return items;
|
|
291
244
|
}
|
|
292
|
-
|
|
293
245
|
const sortedItems = sortingFunction(items, field);
|
|
294
|
-
|
|
295
246
|
if (sortDirection === 'desc') {
|
|
296
247
|
return _reverseInstanceProperty__default["default"](sortedItems).call(sortedItems);
|
|
297
248
|
}
|
|
298
|
-
|
|
299
249
|
return sortedItems;
|
|
300
250
|
};
|
|
301
|
-
|
|
302
251
|
const getInitialState = (items, field, sortDirection, sortingFunction) => ({
|
|
303
252
|
items: sortItems(items, field, sortDirection, sortingFunction),
|
|
304
253
|
sortedBy: field,
|
|
305
254
|
sortDirection
|
|
306
255
|
});
|
|
307
|
-
|
|
308
256
|
const useSorting = (items, field, sortDirection, sortingFunction) => {
|
|
309
257
|
const _useState = react.useState(() => getInitialState(items, field, sortDirection, sortingFunction)),
|
|
310
|
-
|
|
311
|
-
|
|
312
|
-
|
|
313
|
-
|
|
258
|
+
_useState2 = _slicedToArray(_useState, 2),
|
|
259
|
+
sortState = _useState2[0],
|
|
260
|
+
setSorting = _useState2[1];
|
|
314
261
|
react.useDebugValue(sortState);
|
|
315
|
-
|
|
316
262
|
function onSortChange(fieldKey) {
|
|
317
263
|
let nextSortDirection;
|
|
318
264
|
let sortedItems;
|
|
319
|
-
|
|
320
265
|
if (sortState.sortedBy !== fieldKey) {
|
|
321
266
|
// if the intented field is not already sorted, the initial direction is 'asc'
|
|
322
267
|
nextSortDirection = 'asc';
|
|
323
268
|
sortedItems = sortItems(sortState.items, fieldKey, nextSortDirection);
|
|
324
269
|
} else {
|
|
325
270
|
var _context;
|
|
326
|
-
|
|
327
271
|
nextSortDirection = sortState.sortDirection === 'asc' ? 'desc' : 'asc';
|
|
328
272
|
sortedItems = _reverseInstanceProperty__default["default"](_context = sortState.items).call(_context);
|
|
329
273
|
}
|
|
330
|
-
|
|
331
274
|
setSorting({
|
|
332
275
|
items: sortedItems,
|
|
333
276
|
sortedBy: fieldKey,
|
|
334
277
|
sortDirection: nextSortDirection
|
|
335
278
|
});
|
|
336
279
|
}
|
|
337
|
-
|
|
338
280
|
return {
|
|
339
281
|
items: sortState.items,
|
|
340
282
|
sortedBy: sortState.sortedBy,
|
|
@@ -342,37 +284,28 @@ const useSorting = (items, field, sortDirection, sortingFunction) => {
|
|
|
342
284
|
onSortChange
|
|
343
285
|
};
|
|
344
286
|
};
|
|
345
|
-
|
|
346
287
|
var useSorting$1 = useSorting;
|
|
347
288
|
|
|
348
289
|
function ownKeys$1(object, enumerableOnly) { var keys = _Object$keys__default["default"](object); if (_Object$getOwnPropertySymbols__default["default"]) { var symbols = _Object$getOwnPropertySymbols__default["default"](object); enumerableOnly && (symbols = _filterInstanceProperty__default["default"](symbols).call(symbols, function (sym) { return _Object$getOwnPropertyDescriptor__default["default"](object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
|
|
349
|
-
|
|
350
290
|
function _objectSpread$1(target) { for (var i = 1; i < arguments.length; i++) { var _context, _context2; var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? _forEachInstanceProperty__default["default"](_context = ownKeys$1(Object(source), !0)).call(_context, function (key) { _defineProperty(target, key, source[key]); }) : _Object$getOwnPropertyDescriptors__default["default"] ? _Object$defineProperties__default["default"](target, _Object$getOwnPropertyDescriptors__default["default"](source)) : _forEachInstanceProperty__default["default"](_context2 = ownKeys$1(Object(source))).call(_context2, function (key) { _Object$defineProperty__default["default"](target, key, _Object$getOwnPropertyDescriptor__default["default"](source, key)); }); } return target; }
|
|
351
|
-
|
|
352
291
|
const applyIf$1 = (values, key) => !isNil__default["default"](values[key]) ? {
|
|
353
292
|
[key]: values[key]
|
|
354
293
|
} : {};
|
|
355
|
-
|
|
356
294
|
const defaultValues$1 = {
|
|
357
295
|
page: 1,
|
|
358
296
|
perPage: 20
|
|
359
297
|
};
|
|
360
|
-
|
|
361
298
|
const usePaginationState = function () {
|
|
362
299
|
let initialValues = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
|
|
363
|
-
|
|
364
300
|
const mergedValues = _objectSpread$1(_objectSpread$1(_objectSpread$1({}, defaultValues$1), applyIf$1(initialValues, 'page')), applyIf$1(initialValues, 'perPage'));
|
|
365
|
-
|
|
366
301
|
const _useState = react.useState(mergedValues.page),
|
|
367
|
-
|
|
368
|
-
|
|
369
|
-
|
|
370
|
-
|
|
302
|
+
_useState2 = _slicedToArray(_useState, 2),
|
|
303
|
+
page = _useState2[0],
|
|
304
|
+
setPage = _useState2[1];
|
|
371
305
|
const _useState3 = react.useState(mergedValues.perPage),
|
|
372
|
-
|
|
373
|
-
|
|
374
|
-
|
|
375
|
-
|
|
306
|
+
_useState4 = _slicedToArray(_useState3, 2),
|
|
307
|
+
perPage = _useState4[0],
|
|
308
|
+
setPerPage = _useState4[1];
|
|
376
309
|
const onPageChange = react.useCallback(nextPage => {
|
|
377
310
|
setPage(nextPage);
|
|
378
311
|
}, [setPage]);
|
|
@@ -394,31 +327,24 @@ const usePaginationState = function () {
|
|
|
394
327
|
}
|
|
395
328
|
};
|
|
396
329
|
};
|
|
397
|
-
|
|
398
330
|
var usePaginationState$1 = usePaginationState;
|
|
399
331
|
|
|
400
332
|
function ownKeys(object, enumerableOnly) { var keys = _Object$keys__default["default"](object); if (_Object$getOwnPropertySymbols__default["default"]) { var symbols = _Object$getOwnPropertySymbols__default["default"](object); enumerableOnly && (symbols = _filterInstanceProperty__default["default"](symbols).call(symbols, function (sym) { return _Object$getOwnPropertyDescriptor__default["default"](object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
|
|
401
|
-
|
|
402
333
|
function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var _context, _context2; var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? _forEachInstanceProperty__default["default"](_context = ownKeys(Object(source), !0)).call(_context, function (key) { _defineProperty(target, key, source[key]); }) : _Object$getOwnPropertyDescriptors__default["default"] ? _Object$defineProperties__default["default"](target, _Object$getOwnPropertyDescriptors__default["default"](source)) : _forEachInstanceProperty__default["default"](_context2 = ownKeys(Object(source))).call(_context2, function (key) { _Object$defineProperty__default["default"](target, key, _Object$getOwnPropertyDescriptor__default["default"](source, key)); }); } return target; }
|
|
403
334
|
const defaultValues = {
|
|
404
335
|
key: 'createdAt',
|
|
405
336
|
order: 'desc'
|
|
406
337
|
};
|
|
407
|
-
|
|
408
338
|
const applyIf = (values, key) => !isNil__default["default"](values[key]) ? {
|
|
409
339
|
[key]: values[key]
|
|
410
340
|
} : {};
|
|
411
|
-
|
|
412
341
|
const useDataTableSortingState = function () {
|
|
413
342
|
let initialValues = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
|
|
414
|
-
|
|
415
343
|
const mergedValues = _objectSpread(_objectSpread(_objectSpread({}, defaultValues), applyIf(initialValues, 'key')), applyIf(initialValues, 'order'));
|
|
416
|
-
|
|
417
344
|
const _useState = react.useState(mergedValues),
|
|
418
|
-
|
|
419
|
-
|
|
420
|
-
|
|
421
|
-
|
|
345
|
+
_useState2 = _slicedToArray(_useState, 2),
|
|
346
|
+
sortDefinition = _useState2[0],
|
|
347
|
+
setSortDefinition = _useState2[1];
|
|
422
348
|
const onTableSortingChange = react.useCallback((key, order) => {
|
|
423
349
|
setSortDefinition({
|
|
424
350
|
key,
|
|
@@ -430,11 +356,10 @@ const useDataTableSortingState = function () {
|
|
|
430
356
|
onChange: onTableSortingChange
|
|
431
357
|
};
|
|
432
358
|
};
|
|
433
|
-
|
|
434
359
|
var useDataTableSortingState$1 = useDataTableSortingState;
|
|
435
360
|
|
|
436
361
|
// NOTE: This string will be replaced on build time with the package version.
|
|
437
|
-
var version = "16.
|
|
362
|
+
var version = "16.1.1";
|
|
438
363
|
|
|
439
364
|
exports.useDataTableSortingState = useDataTableSortingState$1;
|
|
440
365
|
exports.useFieldId = useFieldId$1;
|
|
@@ -22,18 +22,15 @@ import isNil from 'lodash/isNil';
|
|
|
22
22
|
|
|
23
23
|
const useToggleState = defaultValue => {
|
|
24
24
|
const initialValue = typeof defaultValue === 'boolean' ? defaultValue : true;
|
|
25
|
-
|
|
26
25
|
const _useState = useState(initialValue),
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
26
|
+
_useState2 = _slicedToArray(_useState, 2),
|
|
27
|
+
isToggled = _useState2[0],
|
|
28
|
+
setIsToggled = _useState2[1];
|
|
31
29
|
const toggle = useCallback(forceIsToggled => {
|
|
32
30
|
setIsToggled(typeof forceIsToggled === 'boolean' ? forceIsToggled : !isToggled);
|
|
33
31
|
}, [isToggled, setIsToggled]);
|
|
34
32
|
return [isToggled, toggle];
|
|
35
33
|
};
|
|
36
|
-
|
|
37
34
|
var useToggleState$1 = useToggleState;
|
|
38
35
|
|
|
39
36
|
const usePrevious = value => {
|
|
@@ -43,15 +40,13 @@ const usePrevious = value => {
|
|
|
43
40
|
}, [value]);
|
|
44
41
|
return ref.current;
|
|
45
42
|
};
|
|
46
|
-
|
|
47
43
|
var usePrevious$1 = usePrevious;
|
|
48
44
|
|
|
49
45
|
const useFieldId = (id, createIdFn) => {
|
|
50
46
|
const _useState = useState(id || createIdFn()),
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
47
|
+
_useState2 = _slicedToArray(_useState, 2),
|
|
48
|
+
internalId = _useState2[0],
|
|
49
|
+
setId = _useState2[1];
|
|
55
50
|
useEffect(() => {
|
|
56
51
|
const props = {
|
|
57
52
|
id
|
|
@@ -63,11 +58,9 @@ const useFieldId = (id, createIdFn) => {
|
|
|
63
58
|
}, [id, internalId, setId, createIdFn]);
|
|
64
59
|
return internalId;
|
|
65
60
|
};
|
|
66
|
-
|
|
67
61
|
var useFieldId$1 = useFieldId;
|
|
68
62
|
|
|
69
63
|
let _mutationObserver;
|
|
70
|
-
|
|
71
64
|
const useLatest = current => {
|
|
72
65
|
const storedValue = useRef(current);
|
|
73
66
|
useEffect(() => {
|
|
@@ -75,21 +68,16 @@ const useLatest = current => {
|
|
|
75
68
|
});
|
|
76
69
|
return storedValue;
|
|
77
70
|
};
|
|
78
|
-
|
|
79
71
|
function createMutationObserver() {
|
|
80
72
|
const callbacks = new _Map();
|
|
81
73
|
const observer = new MutationObserver(rafSchd((mutationsList, observer) => {
|
|
82
74
|
const mutationsByTarget = _reduceInstanceProperty(mutationsList).call(mutationsList, (_mutationsByTarget, mutation) => {
|
|
83
75
|
var _mutationsByTarget$ge;
|
|
84
|
-
|
|
85
76
|
const callbacksForTarget = (_mutationsByTarget$ge = _mutationsByTarget.get(mutation.target)) !== null && _mutationsByTarget$ge !== void 0 ? _mutationsByTarget$ge : [];
|
|
86
77
|
callbacksForTarget.push(mutation);
|
|
87
|
-
|
|
88
78
|
_mutationsByTarget.set(mutation.target, callbacksForTarget);
|
|
89
|
-
|
|
90
79
|
return _mutationsByTarget;
|
|
91
80
|
}, new _Map());
|
|
92
|
-
|
|
93
81
|
_forEachInstanceProperty(mutationsByTarget).call(mutationsByTarget, (mutations, target) => {
|
|
94
82
|
const targetCallbacks = callbacks.get(target);
|
|
95
83
|
targetCallbacks === null || targetCallbacks === void 0 ? void 0 : _forEachInstanceProperty(targetCallbacks).call(targetCallbacks, cb => cb(mutations, observer));
|
|
@@ -97,38 +85,28 @@ function createMutationObserver() {
|
|
|
97
85
|
}));
|
|
98
86
|
return {
|
|
99
87
|
observer,
|
|
100
|
-
|
|
101
88
|
subscribe(target, callback, options) {
|
|
102
89
|
var _callbacks$get;
|
|
103
|
-
|
|
104
90
|
observer.observe(target, options);
|
|
105
91
|
const targetCallbacks = (_callbacks$get = callbacks.get(target)) !== null && _callbacks$get !== void 0 ? _callbacks$get : [];
|
|
106
92
|
targetCallbacks.push(callback);
|
|
107
93
|
callbacks.set(target, targetCallbacks);
|
|
108
94
|
},
|
|
109
|
-
|
|
110
95
|
unsubscribe(target, callback) {
|
|
111
96
|
var _callbacks$get2;
|
|
112
|
-
|
|
113
97
|
const targetCallbacks = (_callbacks$get2 = callbacks.get(target)) !== null && _callbacks$get2 !== void 0 ? _callbacks$get2 : [];
|
|
114
|
-
|
|
115
98
|
if (targetCallbacks.length === 1) {
|
|
116
99
|
observer.disconnect();
|
|
117
100
|
callbacks.delete(target);
|
|
118
101
|
return;
|
|
119
102
|
}
|
|
120
|
-
|
|
121
103
|
const tcIndex = _indexOfInstanceProperty(targetCallbacks).call(targetCallbacks, callback);
|
|
122
|
-
|
|
123
104
|
if (tcIndex !== -1) _spliceInstanceProperty(targetCallbacks).call(targetCallbacks, tcIndex, 1);
|
|
124
105
|
callbacks.set(target, targetCallbacks);
|
|
125
106
|
}
|
|
126
|
-
|
|
127
107
|
};
|
|
128
108
|
}
|
|
129
|
-
|
|
130
109
|
const getMutationObserver = () => !_mutationObserver ? _mutationObserver = createMutationObserver() : _mutationObserver;
|
|
131
|
-
|
|
132
110
|
function useMutationObserver(target, callback, options) {
|
|
133
111
|
const mutationObserver = getMutationObserver();
|
|
134
112
|
const storedCallback = useLatest(callback);
|
|
@@ -137,12 +115,10 @@ function useMutationObserver(target, callback, options) {
|
|
|
137
115
|
let didUnsubscribe = false;
|
|
138
116
|
const targetEl = target && 'current' in target ? target.current : target;
|
|
139
117
|
if (!targetEl) return () => {};
|
|
140
|
-
|
|
141
118
|
function cb(mutationsList, observer) {
|
|
142
119
|
if (didUnsubscribe) return;
|
|
143
120
|
storedCallback.current(mutationsList, observer);
|
|
144
121
|
}
|
|
145
|
-
|
|
146
122
|
mutationObserver.subscribe(targetEl, cb, storedOptions.current);
|
|
147
123
|
return () => {
|
|
148
124
|
didUnsubscribe = true;
|
|
@@ -153,9 +129,7 @@ function useMutationObserver(target, callback, options) {
|
|
|
153
129
|
}
|
|
154
130
|
|
|
155
131
|
function ownKeys$2(object, enumerableOnly) { var keys = _Object$keys(object); if (_Object$getOwnPropertySymbols) { var symbols = _Object$getOwnPropertySymbols(object); enumerableOnly && (symbols = _filterInstanceProperty(symbols).call(symbols, function (sym) { return _Object$getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
|
|
156
|
-
|
|
157
132
|
function _objectSpread$2(target) { for (var i = 1; i < arguments.length; i++) { var _context3, _context4; var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? _forEachInstanceProperty(_context3 = ownKeys$2(Object(source), !0)).call(_context3, function (key) { _defineProperty(target, key, source[key]); }) : _Object$getOwnPropertyDescriptors ? _Object$defineProperties(target, _Object$getOwnPropertyDescriptors(source)) : _forEachInstanceProperty(_context4 = ownKeys$2(Object(source))).call(_context4, function (key) { _Object$defineProperty(target, key, _Object$getOwnPropertyDescriptor(source, key)); }); } return target; }
|
|
158
|
-
|
|
159
133
|
const getInitialState$1 = (keyName, rows) => _reduceInstanceProperty(rows).call(rows, (items, currentItem) => {
|
|
160
134
|
// @ts-ignore: index signature is confused as items might contain the initial value.
|
|
161
135
|
const initialValue = currentItem[keyName];
|
|
@@ -164,86 +138,67 @@ const getInitialState$1 = (keyName, rows) => _reduceInstanceProperty(rows).call(
|
|
|
164
138
|
[currentItem.id]: initialValue !== null && initialValue !== void 0 ? initialValue : false
|
|
165
139
|
});
|
|
166
140
|
}, {});
|
|
167
|
-
|
|
168
141
|
function selectionReducer(state, action) {
|
|
169
142
|
switch (action.type) {
|
|
170
143
|
case 'toggle':
|
|
171
144
|
return _objectSpread$2(_objectSpread$2({}, state), {}, {
|
|
172
145
|
[action.payload]: !state[action.payload]
|
|
173
146
|
});
|
|
174
|
-
|
|
175
147
|
case 'select':
|
|
176
148
|
return _objectSpread$2(_objectSpread$2({}, state), {}, {
|
|
177
149
|
[action.payload]: true
|
|
178
150
|
});
|
|
179
|
-
|
|
180
151
|
case 'deselect':
|
|
181
152
|
return _objectSpread$2(_objectSpread$2({}, state), {}, {
|
|
182
153
|
[action.payload]: false
|
|
183
154
|
});
|
|
184
|
-
|
|
185
155
|
case 'selectAll':
|
|
186
156
|
{
|
|
187
157
|
var _context;
|
|
188
|
-
|
|
189
158
|
return _reduceInstanceProperty(_context = _Object$keys(state)).call(_context, (allItems, currentItem) => _objectSpread$2(_objectSpread$2({}, allItems), {}, {
|
|
190
159
|
[currentItem]: true
|
|
191
160
|
}), {});
|
|
192
161
|
}
|
|
193
|
-
|
|
194
162
|
case 'deselectAll':
|
|
195
163
|
{
|
|
196
164
|
var _context2;
|
|
197
|
-
|
|
198
165
|
return _reduceInstanceProperty(_context2 = _Object$keys(state)).call(_context2, (allItems, currentItem) => _objectSpread$2(_objectSpread$2({}, allItems), {}, {
|
|
199
166
|
[currentItem]: false
|
|
200
167
|
}), {});
|
|
201
168
|
}
|
|
202
|
-
|
|
203
169
|
default:
|
|
204
170
|
return state;
|
|
205
171
|
}
|
|
206
172
|
}
|
|
207
|
-
|
|
208
173
|
const useRowSelection = (keyName, rows) => {
|
|
209
174
|
const _useReducer = useReducer(selectionReducer, getInitialState$1(keyName, rows)),
|
|
210
|
-
|
|
211
|
-
|
|
212
|
-
|
|
213
|
-
|
|
175
|
+
_useReducer2 = _slicedToArray(_useReducer, 2),
|
|
176
|
+
selectionState = _useReducer2[0],
|
|
177
|
+
dispatch = _useReducer2[1];
|
|
214
178
|
useDebugValue(selectionState);
|
|
215
|
-
|
|
216
179
|
const selectableRows = _mapInstanceProperty(rows).call(rows, item => _objectSpread$2(_objectSpread$2({}, item), {}, {
|
|
217
180
|
[keyName]: selectionState[item.id]
|
|
218
181
|
}));
|
|
219
|
-
|
|
220
182
|
const toggleRow = id => dispatch({
|
|
221
183
|
type: 'toggle',
|
|
222
184
|
payload: id
|
|
223
185
|
});
|
|
224
|
-
|
|
225
186
|
const selectRow = id => dispatch({
|
|
226
187
|
type: 'select',
|
|
227
188
|
payload: id
|
|
228
189
|
});
|
|
229
|
-
|
|
230
190
|
const deselectRow = id => dispatch({
|
|
231
191
|
type: 'deselect',
|
|
232
192
|
payload: id
|
|
233
193
|
});
|
|
234
|
-
|
|
235
194
|
const selectAllRows = () => dispatch({
|
|
236
195
|
type: 'selectAll'
|
|
237
196
|
});
|
|
238
|
-
|
|
239
197
|
const deselectAllRows = () => dispatch({
|
|
240
198
|
type: 'deselectAll'
|
|
241
199
|
});
|
|
242
|
-
|
|
243
200
|
const getIsRowSelected = id => selectionState[id];
|
|
244
|
-
|
|
245
201
|
const getNumberOfSelectedRows = () => _reduceInstanceProperty(selectableRows).call(selectableRows, (count, item) => count + (item[keyName] === true ? 1 : 0), 0);
|
|
246
|
-
|
|
247
202
|
return {
|
|
248
203
|
rows: selectableRows,
|
|
249
204
|
toggleRow,
|
|
@@ -255,62 +210,49 @@ const useRowSelection = (keyName, rows) => {
|
|
|
255
210
|
getNumberOfSelectedRows
|
|
256
211
|
};
|
|
257
212
|
};
|
|
258
|
-
|
|
259
213
|
var useRowSelection$1 = useRowSelection;
|
|
260
214
|
|
|
261
215
|
// we're using lodash sortBy as our default sorting fn
|
|
262
216
|
const sortItems = function (items, field, sortDirection) {
|
|
263
217
|
let sortingFunction = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : sortBy;
|
|
264
|
-
|
|
265
218
|
if (!field) {
|
|
266
219
|
return items;
|
|
267
220
|
}
|
|
268
|
-
|
|
269
221
|
const sortedItems = sortingFunction(items, field);
|
|
270
|
-
|
|
271
222
|
if (sortDirection === 'desc') {
|
|
272
223
|
return _reverseInstanceProperty(sortedItems).call(sortedItems);
|
|
273
224
|
}
|
|
274
|
-
|
|
275
225
|
return sortedItems;
|
|
276
226
|
};
|
|
277
|
-
|
|
278
227
|
const getInitialState = (items, field, sortDirection, sortingFunction) => ({
|
|
279
228
|
items: sortItems(items, field, sortDirection, sortingFunction),
|
|
280
229
|
sortedBy: field,
|
|
281
230
|
sortDirection
|
|
282
231
|
});
|
|
283
|
-
|
|
284
232
|
const useSorting = (items, field, sortDirection, sortingFunction) => {
|
|
285
233
|
const _useState = useState(() => getInitialState(items, field, sortDirection, sortingFunction)),
|
|
286
|
-
|
|
287
|
-
|
|
288
|
-
|
|
289
|
-
|
|
234
|
+
_useState2 = _slicedToArray(_useState, 2),
|
|
235
|
+
sortState = _useState2[0],
|
|
236
|
+
setSorting = _useState2[1];
|
|
290
237
|
useDebugValue(sortState);
|
|
291
|
-
|
|
292
238
|
function onSortChange(fieldKey) {
|
|
293
239
|
let nextSortDirection;
|
|
294
240
|
let sortedItems;
|
|
295
|
-
|
|
296
241
|
if (sortState.sortedBy !== fieldKey) {
|
|
297
242
|
// if the intented field is not already sorted, the initial direction is 'asc'
|
|
298
243
|
nextSortDirection = 'asc';
|
|
299
244
|
sortedItems = sortItems(sortState.items, fieldKey, nextSortDirection);
|
|
300
245
|
} else {
|
|
301
246
|
var _context;
|
|
302
|
-
|
|
303
247
|
nextSortDirection = sortState.sortDirection === 'asc' ? 'desc' : 'asc';
|
|
304
248
|
sortedItems = _reverseInstanceProperty(_context = sortState.items).call(_context);
|
|
305
249
|
}
|
|
306
|
-
|
|
307
250
|
setSorting({
|
|
308
251
|
items: sortedItems,
|
|
309
252
|
sortedBy: fieldKey,
|
|
310
253
|
sortDirection: nextSortDirection
|
|
311
254
|
});
|
|
312
255
|
}
|
|
313
|
-
|
|
314
256
|
return {
|
|
315
257
|
items: sortState.items,
|
|
316
258
|
sortedBy: sortState.sortedBy,
|
|
@@ -318,37 +260,28 @@ const useSorting = (items, field, sortDirection, sortingFunction) => {
|
|
|
318
260
|
onSortChange
|
|
319
261
|
};
|
|
320
262
|
};
|
|
321
|
-
|
|
322
263
|
var useSorting$1 = useSorting;
|
|
323
264
|
|
|
324
265
|
function ownKeys$1(object, enumerableOnly) { var keys = _Object$keys(object); if (_Object$getOwnPropertySymbols) { var symbols = _Object$getOwnPropertySymbols(object); enumerableOnly && (symbols = _filterInstanceProperty(symbols).call(symbols, function (sym) { return _Object$getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
|
|
325
|
-
|
|
326
266
|
function _objectSpread$1(target) { for (var i = 1; i < arguments.length; i++) { var _context, _context2; var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? _forEachInstanceProperty(_context = ownKeys$1(Object(source), !0)).call(_context, function (key) { _defineProperty(target, key, source[key]); }) : _Object$getOwnPropertyDescriptors ? _Object$defineProperties(target, _Object$getOwnPropertyDescriptors(source)) : _forEachInstanceProperty(_context2 = ownKeys$1(Object(source))).call(_context2, function (key) { _Object$defineProperty(target, key, _Object$getOwnPropertyDescriptor(source, key)); }); } return target; }
|
|
327
|
-
|
|
328
267
|
const applyIf$1 = (values, key) => !isNil(values[key]) ? {
|
|
329
268
|
[key]: values[key]
|
|
330
269
|
} : {};
|
|
331
|
-
|
|
332
270
|
const defaultValues$1 = {
|
|
333
271
|
page: 1,
|
|
334
272
|
perPage: 20
|
|
335
273
|
};
|
|
336
|
-
|
|
337
274
|
const usePaginationState = function () {
|
|
338
275
|
let initialValues = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
|
|
339
|
-
|
|
340
276
|
const mergedValues = _objectSpread$1(_objectSpread$1(_objectSpread$1({}, defaultValues$1), applyIf$1(initialValues, 'page')), applyIf$1(initialValues, 'perPage'));
|
|
341
|
-
|
|
342
277
|
const _useState = useState(mergedValues.page),
|
|
343
|
-
|
|
344
|
-
|
|
345
|
-
|
|
346
|
-
|
|
278
|
+
_useState2 = _slicedToArray(_useState, 2),
|
|
279
|
+
page = _useState2[0],
|
|
280
|
+
setPage = _useState2[1];
|
|
347
281
|
const _useState3 = useState(mergedValues.perPage),
|
|
348
|
-
|
|
349
|
-
|
|
350
|
-
|
|
351
|
-
|
|
282
|
+
_useState4 = _slicedToArray(_useState3, 2),
|
|
283
|
+
perPage = _useState4[0],
|
|
284
|
+
setPerPage = _useState4[1];
|
|
352
285
|
const onPageChange = useCallback(nextPage => {
|
|
353
286
|
setPage(nextPage);
|
|
354
287
|
}, [setPage]);
|
|
@@ -370,31 +303,24 @@ const usePaginationState = function () {
|
|
|
370
303
|
}
|
|
371
304
|
};
|
|
372
305
|
};
|
|
373
|
-
|
|
374
306
|
var usePaginationState$1 = usePaginationState;
|
|
375
307
|
|
|
376
308
|
function ownKeys(object, enumerableOnly) { var keys = _Object$keys(object); if (_Object$getOwnPropertySymbols) { var symbols = _Object$getOwnPropertySymbols(object); enumerableOnly && (symbols = _filterInstanceProperty(symbols).call(symbols, function (sym) { return _Object$getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
|
|
377
|
-
|
|
378
309
|
function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var _context, _context2; var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? _forEachInstanceProperty(_context = ownKeys(Object(source), !0)).call(_context, function (key) { _defineProperty(target, key, source[key]); }) : _Object$getOwnPropertyDescriptors ? _Object$defineProperties(target, _Object$getOwnPropertyDescriptors(source)) : _forEachInstanceProperty(_context2 = ownKeys(Object(source))).call(_context2, function (key) { _Object$defineProperty(target, key, _Object$getOwnPropertyDescriptor(source, key)); }); } return target; }
|
|
379
310
|
const defaultValues = {
|
|
380
311
|
key: 'createdAt',
|
|
381
312
|
order: 'desc'
|
|
382
313
|
};
|
|
383
|
-
|
|
384
314
|
const applyIf = (values, key) => !isNil(values[key]) ? {
|
|
385
315
|
[key]: values[key]
|
|
386
316
|
} : {};
|
|
387
|
-
|
|
388
317
|
const useDataTableSortingState = function () {
|
|
389
318
|
let initialValues = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
|
|
390
|
-
|
|
391
319
|
const mergedValues = _objectSpread(_objectSpread(_objectSpread({}, defaultValues), applyIf(initialValues, 'key')), applyIf(initialValues, 'order'));
|
|
392
|
-
|
|
393
320
|
const _useState = useState(mergedValues),
|
|
394
|
-
|
|
395
|
-
|
|
396
|
-
|
|
397
|
-
|
|
321
|
+
_useState2 = _slicedToArray(_useState, 2),
|
|
322
|
+
sortDefinition = _useState2[0],
|
|
323
|
+
setSortDefinition = _useState2[1];
|
|
398
324
|
const onTableSortingChange = useCallback((key, order) => {
|
|
399
325
|
setSortDefinition({
|
|
400
326
|
key,
|
|
@@ -406,10 +332,9 @@ const useDataTableSortingState = function () {
|
|
|
406
332
|
onChange: onTableSortingChange
|
|
407
333
|
};
|
|
408
334
|
};
|
|
409
|
-
|
|
410
335
|
var useDataTableSortingState$1 = useDataTableSortingState;
|
|
411
336
|
|
|
412
337
|
// NOTE: This string will be replaced on build time with the package version.
|
|
413
|
-
var version = "16.
|
|
338
|
+
var version = "16.1.1";
|
|
414
339
|
|
|
415
340
|
export { useDataTableSortingState$1 as useDataTableSortingState, useFieldId$1 as useFieldId, useMutationObserver, usePaginationState$1 as usePaginationState, usePrevious$1 as usePrevious, useRowSelection$1 as useRowSelection, useSorting$1 as useSorting, useToggleState$1 as useToggleState, version };
|
package/package.json
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@commercetools-uikit/hooks",
|
|
3
3
|
"description": "A collection of React hooks used across some of the UI-Kit components.",
|
|
4
|
-
"version": "16.
|
|
4
|
+
"version": "16.1.1",
|
|
5
5
|
"bugs": "https://github.com/commercetools/ui-kit/issues",
|
|
6
6
|
"repository": {
|
|
7
7
|
"type": "git",
|
|
@@ -21,7 +21,7 @@
|
|
|
21
21
|
"dependencies": {
|
|
22
22
|
"@babel/runtime": "^7.20.13",
|
|
23
23
|
"@babel/runtime-corejs3": "^7.20.13",
|
|
24
|
-
"@commercetools-uikit/utils": "16.
|
|
24
|
+
"@commercetools-uikit/utils": "16.1.1",
|
|
25
25
|
"@types/raf-schd": "^4.0.1",
|
|
26
26
|
"lodash": "4.17.21",
|
|
27
27
|
"raf-schd": "^4.0.3"
|