@commercetools-uikit/hooks 15.15.0 → 16.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/dist/commercetools-uikit-hooks.cjs.d.ts +1 -0
- package/dist/commercetools-uikit-hooks.cjs.d.ts.map +1 -0
- package/dist/commercetools-uikit-hooks.cjs.dev.js +154 -168
- package/dist/commercetools-uikit-hooks.cjs.prod.js +154 -168
- package/dist/commercetools-uikit-hooks.esm.js +154 -168
- package/package.json +2 -2
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"commercetools-uikit-hooks.cjs.d.ts","sourceRoot":"","sources":["./declarations/src/index.d.ts"],"names":[],"mappings":"AAAA"}
|
|
@@ -44,15 +44,15 @@ var _reverseInstanceProperty__default = /*#__PURE__*/_interopDefault(_reverseIns
|
|
|
44
44
|
var sortBy__default = /*#__PURE__*/_interopDefault(sortBy);
|
|
45
45
|
var isNil__default = /*#__PURE__*/_interopDefault(isNil);
|
|
46
46
|
|
|
47
|
-
|
|
48
|
-
|
|
47
|
+
const useToggleState = defaultValue => {
|
|
48
|
+
const initialValue = typeof defaultValue === 'boolean' ? defaultValue : true;
|
|
49
49
|
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
50
|
+
const _useState = react.useState(initialValue),
|
|
51
|
+
_useState2 = _slicedToArray(_useState, 2),
|
|
52
|
+
isToggled = _useState2[0],
|
|
53
|
+
setIsToggled = _useState2[1];
|
|
54
54
|
|
|
55
|
-
|
|
55
|
+
const toggle = react.useCallback(forceIsToggled => {
|
|
56
56
|
setIsToggled(typeof forceIsToggled === 'boolean' ? forceIsToggled : !isToggled);
|
|
57
57
|
}, [isToggled, setIsToggled]);
|
|
58
58
|
return [isToggled, toggle];
|
|
@@ -60,9 +60,9 @@ var useToggleState = function useToggleState(defaultValue) {
|
|
|
60
60
|
|
|
61
61
|
var useToggleState$1 = useToggleState;
|
|
62
62
|
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
react.useEffect(
|
|
63
|
+
const usePrevious = value => {
|
|
64
|
+
const ref = react.useRef();
|
|
65
|
+
react.useEffect(() => {
|
|
66
66
|
ref.current = value;
|
|
67
67
|
}, [value]);
|
|
68
68
|
return ref.current;
|
|
@@ -70,17 +70,17 @@ var usePrevious = function usePrevious(value) {
|
|
|
70
70
|
|
|
71
71
|
var usePrevious$1 = usePrevious;
|
|
72
72
|
|
|
73
|
-
|
|
74
|
-
|
|
75
|
-
|
|
76
|
-
|
|
77
|
-
|
|
73
|
+
const useFieldId = (id, createIdFn) => {
|
|
74
|
+
const _useState = react.useState(id || createIdFn()),
|
|
75
|
+
_useState2 = _slicedToArray(_useState, 2),
|
|
76
|
+
internalId = _useState2[0],
|
|
77
|
+
setId = _useState2[1];
|
|
78
78
|
|
|
79
|
-
react.useEffect(
|
|
80
|
-
|
|
81
|
-
id
|
|
79
|
+
react.useEffect(() => {
|
|
80
|
+
const props = {
|
|
81
|
+
id
|
|
82
82
|
};
|
|
83
|
-
|
|
83
|
+
const state = {
|
|
84
84
|
id: internalId
|
|
85
85
|
};
|
|
86
86
|
setId(utils.getFieldId(props, state, createIdFn));
|
|
@@ -90,23 +90,23 @@ var useFieldId = function useFieldId(id, createIdFn) {
|
|
|
90
90
|
|
|
91
91
|
var useFieldId$1 = useFieldId;
|
|
92
92
|
|
|
93
|
-
|
|
93
|
+
let _mutationObserver;
|
|
94
94
|
|
|
95
|
-
|
|
96
|
-
|
|
97
|
-
react.useEffect(
|
|
95
|
+
const useLatest = current => {
|
|
96
|
+
const storedValue = react.useRef(current);
|
|
97
|
+
react.useEffect(() => {
|
|
98
98
|
storedValue.current = current;
|
|
99
99
|
});
|
|
100
100
|
return storedValue;
|
|
101
101
|
};
|
|
102
102
|
|
|
103
103
|
function createMutationObserver() {
|
|
104
|
-
|
|
105
|
-
|
|
106
|
-
|
|
104
|
+
const callbacks = new _Map__default["default"]();
|
|
105
|
+
const observer = new MutationObserver(rafSchd__default["default"]((mutationsList, observer) => {
|
|
106
|
+
const mutationsByTarget = _reduceInstanceProperty__default["default"](mutationsList).call(mutationsList, (_mutationsByTarget, mutation) => {
|
|
107
107
|
var _mutationsByTarget$ge;
|
|
108
108
|
|
|
109
|
-
|
|
109
|
+
const callbacksForTarget = (_mutationsByTarget$ge = _mutationsByTarget.get(mutation.target)) !== null && _mutationsByTarget$ge !== void 0 ? _mutationsByTarget$ge : [];
|
|
110
110
|
callbacksForTarget.push(mutation);
|
|
111
111
|
|
|
112
112
|
_mutationsByTarget.set(mutation.target, callbacksForTarget);
|
|
@@ -114,27 +114,27 @@ function createMutationObserver() {
|
|
|
114
114
|
return _mutationsByTarget;
|
|
115
115
|
}, new _Map__default["default"]());
|
|
116
116
|
|
|
117
|
-
_forEachInstanceProperty__default["default"](mutationsByTarget).call(mutationsByTarget,
|
|
118
|
-
|
|
119
|
-
targetCallbacks === null || targetCallbacks === void 0 ? void 0 : _forEachInstanceProperty__default["default"](targetCallbacks).call(targetCallbacks,
|
|
120
|
-
return cb(mutations, observer);
|
|
121
|
-
});
|
|
117
|
+
_forEachInstanceProperty__default["default"](mutationsByTarget).call(mutationsByTarget, (mutations, target) => {
|
|
118
|
+
const targetCallbacks = callbacks.get(target);
|
|
119
|
+
targetCallbacks === null || targetCallbacks === void 0 ? void 0 : _forEachInstanceProperty__default["default"](targetCallbacks).call(targetCallbacks, cb => cb(mutations, observer));
|
|
122
120
|
});
|
|
123
121
|
}));
|
|
124
122
|
return {
|
|
125
|
-
observer
|
|
126
|
-
|
|
123
|
+
observer,
|
|
124
|
+
|
|
125
|
+
subscribe(target, callback, options) {
|
|
127
126
|
var _callbacks$get;
|
|
128
127
|
|
|
129
128
|
observer.observe(target, options);
|
|
130
|
-
|
|
129
|
+
const targetCallbacks = (_callbacks$get = callbacks.get(target)) !== null && _callbacks$get !== void 0 ? _callbacks$get : [];
|
|
131
130
|
targetCallbacks.push(callback);
|
|
132
131
|
callbacks.set(target, targetCallbacks);
|
|
133
132
|
},
|
|
134
|
-
|
|
133
|
+
|
|
134
|
+
unsubscribe(target, callback) {
|
|
135
135
|
var _callbacks$get2;
|
|
136
136
|
|
|
137
|
-
|
|
137
|
+
const targetCallbacks = (_callbacks$get2 = callbacks.get(target)) !== null && _callbacks$get2 !== void 0 ? _callbacks$get2 : [];
|
|
138
138
|
|
|
139
139
|
if (targetCallbacks.length === 1) {
|
|
140
140
|
observer.disconnect();
|
|
@@ -142,26 +142,25 @@ function createMutationObserver() {
|
|
|
142
142
|
return;
|
|
143
143
|
}
|
|
144
144
|
|
|
145
|
-
|
|
145
|
+
const tcIndex = _indexOfInstanceProperty__default["default"](targetCallbacks).call(targetCallbacks, callback);
|
|
146
146
|
|
|
147
147
|
if (tcIndex !== -1) _spliceInstanceProperty__default["default"](targetCallbacks).call(targetCallbacks, tcIndex, 1);
|
|
148
148
|
callbacks.set(target, targetCallbacks);
|
|
149
149
|
}
|
|
150
|
+
|
|
150
151
|
};
|
|
151
152
|
}
|
|
152
153
|
|
|
153
|
-
|
|
154
|
-
return !_mutationObserver ? _mutationObserver = createMutationObserver() : _mutationObserver;
|
|
155
|
-
};
|
|
154
|
+
const getMutationObserver = () => !_mutationObserver ? _mutationObserver = createMutationObserver() : _mutationObserver;
|
|
156
155
|
|
|
157
156
|
function useMutationObserver(target, callback, options) {
|
|
158
|
-
|
|
159
|
-
|
|
160
|
-
|
|
161
|
-
react.useLayoutEffect(
|
|
162
|
-
|
|
163
|
-
|
|
164
|
-
if (!targetEl) return
|
|
157
|
+
const mutationObserver = getMutationObserver();
|
|
158
|
+
const storedCallback = useLatest(callback);
|
|
159
|
+
const storedOptions = useLatest(options);
|
|
160
|
+
react.useLayoutEffect(() => {
|
|
161
|
+
let didUnsubscribe = false;
|
|
162
|
+
const targetEl = target && 'current' in target ? target.current : target;
|
|
163
|
+
if (!targetEl) return () => {};
|
|
165
164
|
|
|
166
165
|
function cb(mutationsList, observer) {
|
|
167
166
|
if (didUnsubscribe) return;
|
|
@@ -169,7 +168,7 @@ function useMutationObserver(target, callback, options) {
|
|
|
169
168
|
}
|
|
170
169
|
|
|
171
170
|
mutationObserver.subscribe(targetEl, cb, storedOptions.current);
|
|
172
|
-
return
|
|
171
|
+
return () => {
|
|
173
172
|
didUnsubscribe = true;
|
|
174
173
|
mutationObserver.unsubscribe(targetEl, cb);
|
|
175
174
|
};
|
|
@@ -181,41 +180,48 @@ function ownKeys$2(object, enumerableOnly) { var keys = _Object$keys__default["d
|
|
|
181
180
|
|
|
182
181
|
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; }
|
|
183
182
|
|
|
184
|
-
|
|
185
|
-
|
|
186
|
-
|
|
187
|
-
|
|
188
|
-
|
|
189
|
-
|
|
190
|
-
};
|
|
183
|
+
const getInitialState$1 = (keyName, rows) => _reduceInstanceProperty__default["default"](rows).call(rows, (items, currentItem) => {
|
|
184
|
+
// @ts-ignore: index signature is confused as items might contain the initial value.
|
|
185
|
+
const initialValue = currentItem[keyName];
|
|
186
|
+
return _objectSpread$2(_objectSpread$2({}, items), {}, {
|
|
187
|
+
// if there is an initial value: use it, otherwise default to false
|
|
188
|
+
[currentItem.id]: initialValue !== null && initialValue !== void 0 ? initialValue : false
|
|
189
|
+
});
|
|
190
|
+
}, {});
|
|
191
191
|
|
|
192
192
|
function selectionReducer(state, action) {
|
|
193
193
|
switch (action.type) {
|
|
194
194
|
case 'toggle':
|
|
195
|
-
return _objectSpread$2(_objectSpread$2({}, state), {},
|
|
195
|
+
return _objectSpread$2(_objectSpread$2({}, state), {}, {
|
|
196
|
+
[action.payload]: !state[action.payload]
|
|
197
|
+
});
|
|
196
198
|
|
|
197
199
|
case 'select':
|
|
198
|
-
return _objectSpread$2(_objectSpread$2({}, state), {},
|
|
200
|
+
return _objectSpread$2(_objectSpread$2({}, state), {}, {
|
|
201
|
+
[action.payload]: true
|
|
202
|
+
});
|
|
199
203
|
|
|
200
204
|
case 'deselect':
|
|
201
|
-
return _objectSpread$2(_objectSpread$2({}, state), {},
|
|
205
|
+
return _objectSpread$2(_objectSpread$2({}, state), {}, {
|
|
206
|
+
[action.payload]: false
|
|
207
|
+
});
|
|
202
208
|
|
|
203
209
|
case 'selectAll':
|
|
204
210
|
{
|
|
205
211
|
var _context;
|
|
206
212
|
|
|
207
|
-
return _reduceInstanceProperty__default["default"](_context = _Object$keys__default["default"](state)).call(_context,
|
|
208
|
-
|
|
209
|
-
}, {});
|
|
213
|
+
return _reduceInstanceProperty__default["default"](_context = _Object$keys__default["default"](state)).call(_context, (allItems, currentItem) => _objectSpread$2(_objectSpread$2({}, allItems), {}, {
|
|
214
|
+
[currentItem]: true
|
|
215
|
+
}), {});
|
|
210
216
|
}
|
|
211
217
|
|
|
212
218
|
case 'deselectAll':
|
|
213
219
|
{
|
|
214
220
|
var _context2;
|
|
215
221
|
|
|
216
|
-
return _reduceInstanceProperty__default["default"](_context2 = _Object$keys__default["default"](state)).call(_context2,
|
|
217
|
-
|
|
218
|
-
}, {});
|
|
222
|
+
return _reduceInstanceProperty__default["default"](_context2 = _Object$keys__default["default"](state)).call(_context2, (allItems, currentItem) => _objectSpread$2(_objectSpread$2({}, allItems), {}, {
|
|
223
|
+
[currentItem]: false
|
|
224
|
+
}), {});
|
|
219
225
|
}
|
|
220
226
|
|
|
221
227
|
default:
|
|
@@ -223,84 +229,68 @@ function selectionReducer(state, action) {
|
|
|
223
229
|
}
|
|
224
230
|
}
|
|
225
231
|
|
|
226
|
-
|
|
227
|
-
|
|
228
|
-
|
|
229
|
-
|
|
230
|
-
|
|
232
|
+
const useRowSelection = (keyName, rows) => {
|
|
233
|
+
const _useReducer = react.useReducer(selectionReducer, getInitialState$1(keyName, rows)),
|
|
234
|
+
_useReducer2 = _slicedToArray(_useReducer, 2),
|
|
235
|
+
selectionState = _useReducer2[0],
|
|
236
|
+
dispatch = _useReducer2[1];
|
|
231
237
|
|
|
232
238
|
react.useDebugValue(selectionState);
|
|
233
239
|
|
|
234
|
-
|
|
235
|
-
|
|
236
|
-
});
|
|
240
|
+
const selectableRows = _mapInstanceProperty__default["default"](rows).call(rows, item => _objectSpread$2(_objectSpread$2({}, item), {}, {
|
|
241
|
+
[keyName]: selectionState[item.id]
|
|
242
|
+
}));
|
|
237
243
|
|
|
238
|
-
|
|
239
|
-
|
|
240
|
-
|
|
241
|
-
|
|
242
|
-
});
|
|
243
|
-
};
|
|
244
|
+
const toggleRow = id => dispatch({
|
|
245
|
+
type: 'toggle',
|
|
246
|
+
payload: id
|
|
247
|
+
});
|
|
244
248
|
|
|
245
|
-
|
|
246
|
-
|
|
247
|
-
|
|
248
|
-
|
|
249
|
-
});
|
|
250
|
-
};
|
|
249
|
+
const selectRow = id => dispatch({
|
|
250
|
+
type: 'select',
|
|
251
|
+
payload: id
|
|
252
|
+
});
|
|
251
253
|
|
|
252
|
-
|
|
253
|
-
|
|
254
|
-
|
|
255
|
-
|
|
256
|
-
});
|
|
257
|
-
};
|
|
254
|
+
const deselectRow = id => dispatch({
|
|
255
|
+
type: 'deselect',
|
|
256
|
+
payload: id
|
|
257
|
+
});
|
|
258
258
|
|
|
259
|
-
|
|
260
|
-
|
|
261
|
-
|
|
262
|
-
});
|
|
263
|
-
};
|
|
259
|
+
const selectAllRows = () => dispatch({
|
|
260
|
+
type: 'selectAll'
|
|
261
|
+
});
|
|
264
262
|
|
|
265
|
-
|
|
266
|
-
|
|
267
|
-
|
|
268
|
-
});
|
|
269
|
-
};
|
|
263
|
+
const deselectAllRows = () => dispatch({
|
|
264
|
+
type: 'deselectAll'
|
|
265
|
+
});
|
|
270
266
|
|
|
271
|
-
|
|
272
|
-
return selectionState[id];
|
|
273
|
-
};
|
|
267
|
+
const getIsRowSelected = id => selectionState[id];
|
|
274
268
|
|
|
275
|
-
|
|
276
|
-
return _reduceInstanceProperty__default["default"](selectableRows).call(selectableRows, function (count, item) {
|
|
277
|
-
return count + (item[keyName] === true ? 1 : 0);
|
|
278
|
-
}, 0);
|
|
279
|
-
};
|
|
269
|
+
const getNumberOfSelectedRows = () => _reduceInstanceProperty__default["default"](selectableRows).call(selectableRows, (count, item) => count + (item[keyName] === true ? 1 : 0), 0);
|
|
280
270
|
|
|
281
271
|
return {
|
|
282
272
|
rows: selectableRows,
|
|
283
|
-
toggleRow
|
|
284
|
-
selectRow
|
|
285
|
-
deselectRow
|
|
286
|
-
selectAllRows
|
|
287
|
-
deselectAllRows
|
|
288
|
-
getIsRowSelected
|
|
289
|
-
getNumberOfSelectedRows
|
|
273
|
+
toggleRow,
|
|
274
|
+
selectRow,
|
|
275
|
+
deselectRow,
|
|
276
|
+
selectAllRows,
|
|
277
|
+
deselectAllRows,
|
|
278
|
+
getIsRowSelected,
|
|
279
|
+
getNumberOfSelectedRows
|
|
290
280
|
};
|
|
291
281
|
};
|
|
292
282
|
|
|
293
283
|
var useRowSelection$1 = useRowSelection;
|
|
294
284
|
|
|
295
285
|
// we're using lodash sortBy as our default sorting fn
|
|
296
|
-
|
|
297
|
-
|
|
286
|
+
const sortItems = function (items, field, sortDirection) {
|
|
287
|
+
let sortingFunction = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : sortBy__default["default"];
|
|
298
288
|
|
|
299
289
|
if (!field) {
|
|
300
290
|
return items;
|
|
301
291
|
}
|
|
302
292
|
|
|
303
|
-
|
|
293
|
+
const sortedItems = sortingFunction(items, field);
|
|
304
294
|
|
|
305
295
|
if (sortDirection === 'desc') {
|
|
306
296
|
return _reverseInstanceProperty__default["default"](sortedItems).call(sortedItems);
|
|
@@ -309,27 +299,23 @@ var sortItems = function sortItems(items, field, sortDirection) {
|
|
|
309
299
|
return sortedItems;
|
|
310
300
|
};
|
|
311
301
|
|
|
312
|
-
|
|
313
|
-
|
|
314
|
-
|
|
315
|
-
|
|
316
|
-
|
|
317
|
-
};
|
|
318
|
-
};
|
|
302
|
+
const getInitialState = (items, field, sortDirection, sortingFunction) => ({
|
|
303
|
+
items: sortItems(items, field, sortDirection, sortingFunction),
|
|
304
|
+
sortedBy: field,
|
|
305
|
+
sortDirection
|
|
306
|
+
});
|
|
319
307
|
|
|
320
|
-
|
|
321
|
-
|
|
322
|
-
|
|
323
|
-
|
|
324
|
-
|
|
325
|
-
sortState = _useState2[0],
|
|
326
|
-
setSorting = _useState2[1];
|
|
308
|
+
const useSorting = (items, field, sortDirection, sortingFunction) => {
|
|
309
|
+
const _useState = react.useState(() => getInitialState(items, field, sortDirection, sortingFunction)),
|
|
310
|
+
_useState2 = _slicedToArray(_useState, 2),
|
|
311
|
+
sortState = _useState2[0],
|
|
312
|
+
setSorting = _useState2[1];
|
|
327
313
|
|
|
328
314
|
react.useDebugValue(sortState);
|
|
329
315
|
|
|
330
316
|
function onSortChange(fieldKey) {
|
|
331
|
-
|
|
332
|
-
|
|
317
|
+
let nextSortDirection;
|
|
318
|
+
let sortedItems;
|
|
333
319
|
|
|
334
320
|
if (sortState.sortedBy !== fieldKey) {
|
|
335
321
|
// if the intented field is not already sorted, the initial direction is 'asc'
|
|
@@ -353,7 +339,7 @@ var useSorting = function useSorting(items, field, sortDirection, sortingFunctio
|
|
|
353
339
|
items: sortState.items,
|
|
354
340
|
sortedBy: sortState.sortedBy,
|
|
355
341
|
sortDirection: sortState.sortDirection,
|
|
356
|
-
onSortChange
|
|
342
|
+
onSortChange
|
|
357
343
|
};
|
|
358
344
|
};
|
|
359
345
|
|
|
@@ -363,34 +349,34 @@ function ownKeys$1(object, enumerableOnly) { var keys = _Object$keys__default["d
|
|
|
363
349
|
|
|
364
350
|
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; }
|
|
365
351
|
|
|
366
|
-
|
|
367
|
-
|
|
368
|
-
};
|
|
352
|
+
const applyIf$1 = (values, key) => !isNil__default["default"](values[key]) ? {
|
|
353
|
+
[key]: values[key]
|
|
354
|
+
} : {};
|
|
369
355
|
|
|
370
|
-
|
|
356
|
+
const defaultValues$1 = {
|
|
371
357
|
page: 1,
|
|
372
358
|
perPage: 20
|
|
373
359
|
};
|
|
374
360
|
|
|
375
|
-
|
|
376
|
-
|
|
361
|
+
const usePaginationState = function () {
|
|
362
|
+
let initialValues = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
|
|
377
363
|
|
|
378
|
-
|
|
364
|
+
const mergedValues = _objectSpread$1(_objectSpread$1(_objectSpread$1({}, defaultValues$1), applyIf$1(initialValues, 'page')), applyIf$1(initialValues, 'perPage'));
|
|
379
365
|
|
|
380
|
-
|
|
381
|
-
|
|
382
|
-
|
|
383
|
-
|
|
366
|
+
const _useState = react.useState(mergedValues.page),
|
|
367
|
+
_useState2 = _slicedToArray(_useState, 2),
|
|
368
|
+
page = _useState2[0],
|
|
369
|
+
setPage = _useState2[1];
|
|
384
370
|
|
|
385
|
-
|
|
386
|
-
|
|
387
|
-
|
|
388
|
-
|
|
371
|
+
const _useState3 = react.useState(mergedValues.perPage),
|
|
372
|
+
_useState4 = _slicedToArray(_useState3, 2),
|
|
373
|
+
perPage = _useState4[0],
|
|
374
|
+
setPerPage = _useState4[1];
|
|
389
375
|
|
|
390
|
-
|
|
376
|
+
const onPageChange = react.useCallback(nextPage => {
|
|
391
377
|
setPage(nextPage);
|
|
392
378
|
}, [setPage]);
|
|
393
|
-
|
|
379
|
+
const onPerPageChange = react.useCallback(nextPerPage => {
|
|
394
380
|
// side-effect:
|
|
395
381
|
// GIVEN client updates `perPage`,
|
|
396
382
|
// THEN we reset `page` (discards initialValues.page)
|
|
@@ -414,29 +400,29 @@ var usePaginationState$1 = usePaginationState;
|
|
|
414
400
|
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; }
|
|
415
401
|
|
|
416
402
|
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; }
|
|
417
|
-
|
|
403
|
+
const defaultValues = {
|
|
418
404
|
key: 'createdAt',
|
|
419
405
|
order: 'desc'
|
|
420
406
|
};
|
|
421
407
|
|
|
422
|
-
|
|
423
|
-
|
|
424
|
-
};
|
|
408
|
+
const applyIf = (values, key) => !isNil__default["default"](values[key]) ? {
|
|
409
|
+
[key]: values[key]
|
|
410
|
+
} : {};
|
|
425
411
|
|
|
426
|
-
|
|
427
|
-
|
|
412
|
+
const useDataTableSortingState = function () {
|
|
413
|
+
let initialValues = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
|
|
428
414
|
|
|
429
|
-
|
|
415
|
+
const mergedValues = _objectSpread(_objectSpread(_objectSpread({}, defaultValues), applyIf(initialValues, 'key')), applyIf(initialValues, 'order'));
|
|
430
416
|
|
|
431
|
-
|
|
432
|
-
|
|
433
|
-
|
|
434
|
-
|
|
417
|
+
const _useState = react.useState(mergedValues),
|
|
418
|
+
_useState2 = _slicedToArray(_useState, 2),
|
|
419
|
+
sortDefinition = _useState2[0],
|
|
420
|
+
setSortDefinition = _useState2[1];
|
|
435
421
|
|
|
436
|
-
|
|
422
|
+
const onTableSortingChange = react.useCallback((key, order) => {
|
|
437
423
|
setSortDefinition({
|
|
438
|
-
key
|
|
439
|
-
order
|
|
424
|
+
key,
|
|
425
|
+
order
|
|
440
426
|
});
|
|
441
427
|
}, []);
|
|
442
428
|
return {
|
|
@@ -448,7 +434,7 @@ var useDataTableSortingState = function useDataTableSortingState() {
|
|
|
448
434
|
var useDataTableSortingState$1 = useDataTableSortingState;
|
|
449
435
|
|
|
450
436
|
// NOTE: This string will be replaced on build time with the package version.
|
|
451
|
-
var version = "
|
|
437
|
+
var version = "16.0.0";
|
|
452
438
|
|
|
453
439
|
exports.useDataTableSortingState = useDataTableSortingState$1;
|
|
454
440
|
exports.useFieldId = useFieldId$1;
|