@commercetools-uikit/hooks
Version:
A collection of React hooks used across some of the UI-Kit components.
373 lines (358 loc) • 18.6 kB
JavaScript
;
Object.defineProperty(exports, '__esModule', { value: true });
var _Map = require('@babel/runtime-corejs3/core-js-stable/map');
var _reduceInstanceProperty = require('@babel/runtime-corejs3/core-js-stable/instance/reduce');
var _forEachInstanceProperty = require('@babel/runtime-corejs3/core-js-stable/instance/for-each');
var _indexOfInstanceProperty = require('@babel/runtime-corejs3/core-js-stable/instance/index-of');
var _spliceInstanceProperty = require('@babel/runtime-corejs3/core-js-stable/instance/splice');
var react = require('react');
var rafSchd = require('raf-schd');
var _slicedToArray = require('@babel/runtime-corejs3/helpers/slicedToArray');
var utils = require('@commercetools-uikit/utils');
var _Object$getOwnPropertySymbols = require('@babel/runtime-corejs3/core-js-stable/object/get-own-property-symbols');
var _filterInstanceProperty = require('@babel/runtime-corejs3/core-js-stable/instance/filter');
var _Object$getOwnPropertyDescriptor = require('@babel/runtime-corejs3/core-js-stable/object/get-own-property-descriptor');
var _Object$getOwnPropertyDescriptors = require('@babel/runtime-corejs3/core-js-stable/object/get-own-property-descriptors');
var _Object$defineProperties = require('@babel/runtime-corejs3/core-js-stable/object/define-properties');
var _Object$defineProperty = require('@babel/runtime-corejs3/core-js-stable/object/define-property');
var _defineProperty = require('@babel/runtime-corejs3/helpers/defineProperty');
var _Object$keys = require('@babel/runtime-corejs3/core-js-stable/object/keys');
var _mapInstanceProperty = require('@babel/runtime-corejs3/core-js-stable/instance/map');
var _reverseInstanceProperty = require('@babel/runtime-corejs3/core-js-stable/instance/reverse');
var sortBy = require('lodash/sortBy');
var isNil = require('lodash/isNil');
function _interopDefault (e) { return e && e.__esModule ? e : { 'default': e }; }
var _Map__default = /*#__PURE__*/_interopDefault(_Map);
var _reduceInstanceProperty__default = /*#__PURE__*/_interopDefault(_reduceInstanceProperty);
var _forEachInstanceProperty__default = /*#__PURE__*/_interopDefault(_forEachInstanceProperty);
var _indexOfInstanceProperty__default = /*#__PURE__*/_interopDefault(_indexOfInstanceProperty);
var _spliceInstanceProperty__default = /*#__PURE__*/_interopDefault(_spliceInstanceProperty);
var rafSchd__default = /*#__PURE__*/_interopDefault(rafSchd);
var _Object$getOwnPropertySymbols__default = /*#__PURE__*/_interopDefault(_Object$getOwnPropertySymbols);
var _filterInstanceProperty__default = /*#__PURE__*/_interopDefault(_filterInstanceProperty);
var _Object$getOwnPropertyDescriptor__default = /*#__PURE__*/_interopDefault(_Object$getOwnPropertyDescriptor);
var _Object$getOwnPropertyDescriptors__default = /*#__PURE__*/_interopDefault(_Object$getOwnPropertyDescriptors);
var _Object$defineProperties__default = /*#__PURE__*/_interopDefault(_Object$defineProperties);
var _Object$defineProperty__default = /*#__PURE__*/_interopDefault(_Object$defineProperty);
var _Object$keys__default = /*#__PURE__*/_interopDefault(_Object$keys);
var _mapInstanceProperty__default = /*#__PURE__*/_interopDefault(_mapInstanceProperty);
var _reverseInstanceProperty__default = /*#__PURE__*/_interopDefault(_reverseInstanceProperty);
var sortBy__default = /*#__PURE__*/_interopDefault(sortBy);
var isNil__default = /*#__PURE__*/_interopDefault(isNil);
const useToggleState = defaultValue => {
const initialValue = typeof defaultValue === 'boolean' ? defaultValue : true;
const _useState = react.useState(initialValue),
_useState2 = _slicedToArray(_useState, 2),
isToggled = _useState2[0],
setIsToggled = _useState2[1];
const toggle = react.useCallback(forceIsToggled => {
setIsToggled(typeof forceIsToggled === 'boolean' ? forceIsToggled : !isToggled);
}, [isToggled, setIsToggled]);
return [isToggled, toggle];
};
var useToggleState$1 = useToggleState;
const usePrevious = value => {
const ref = react.useRef(null);
react.useEffect(() => {
ref.current = value;
}, [value]);
return ref.current;
};
var usePrevious$1 = usePrevious;
const useFieldId = (id, createIdFn) => {
const _useState = react.useState(id || createIdFn()),
_useState2 = _slicedToArray(_useState, 2),
internalId = _useState2[0],
setId = _useState2[1];
react.useEffect(() => {
const props = {
id
};
const state = {
id: internalId
};
setId(utils.getFieldId(props, state, createIdFn));
}, [id, internalId, setId, createIdFn]);
return internalId;
};
var useFieldId$1 = useFieldId;
let _mutationObserver;
const useLatest = current => {
const storedValue = react.useRef(current);
react.useEffect(() => {
storedValue.current = current;
});
return storedValue;
};
function createMutationObserver() {
const callbacks = new _Map__default["default"]();
const observer = new MutationObserver(rafSchd__default["default"]((mutationsList, observer) => {
const mutationsByTarget = _reduceInstanceProperty__default["default"](mutationsList).call(mutationsList, (_mutationsByTarget, mutation) => {
var _mutationsByTarget$ge;
const callbacksForTarget = (_mutationsByTarget$ge = _mutationsByTarget.get(mutation.target)) !== null && _mutationsByTarget$ge !== void 0 ? _mutationsByTarget$ge : [];
callbacksForTarget.push(mutation);
_mutationsByTarget.set(mutation.target, callbacksForTarget);
return _mutationsByTarget;
}, new _Map__default["default"]());
_forEachInstanceProperty__default["default"](mutationsByTarget).call(mutationsByTarget, (mutations, target) => {
const targetCallbacks = callbacks.get(target);
targetCallbacks === null || targetCallbacks === void 0 || _forEachInstanceProperty__default["default"](targetCallbacks).call(targetCallbacks, cb => cb(mutations, observer));
});
}));
return {
observer,
subscribe(target, callback, options) {
var _callbacks$get;
observer.observe(target, options);
const targetCallbacks = (_callbacks$get = callbacks.get(target)) !== null && _callbacks$get !== void 0 ? _callbacks$get : [];
targetCallbacks.push(callback);
callbacks.set(target, targetCallbacks);
},
unsubscribe(target, callback) {
var _callbacks$get2;
const targetCallbacks = (_callbacks$get2 = callbacks.get(target)) !== null && _callbacks$get2 !== void 0 ? _callbacks$get2 : [];
if (targetCallbacks.length === 1) {
observer.disconnect();
callbacks.delete(target);
return;
}
const tcIndex = _indexOfInstanceProperty__default["default"](targetCallbacks).call(targetCallbacks, callback);
if (tcIndex !== -1) _spliceInstanceProperty__default["default"](targetCallbacks).call(targetCallbacks, tcIndex, 1);
callbacks.set(target, targetCallbacks);
}
};
}
const getMutationObserver = () => !_mutationObserver ? _mutationObserver = createMutationObserver() : _mutationObserver;
function useMutationObserver(target, callback, options) {
const mutationObserver = getMutationObserver();
const storedCallback = useLatest(callback);
const storedOptions = useLatest(options);
react.useLayoutEffect(() => {
let didUnsubscribe = false;
const targetEl = target && 'current' in target ? target.current : target;
if (!targetEl) return () => {};
function cb(mutationsList, observer) {
if (didUnsubscribe) return;
storedCallback.current(mutationsList, observer);
}
mutationObserver.subscribe(targetEl, cb, storedOptions.current);
return () => {
didUnsubscribe = true;
mutationObserver.unsubscribe(targetEl, cb);
};
}, [target, mutationObserver, storedCallback, storedOptions]);
return mutationObserver.observer;
}
function ownKeys$2(e, r) { var t = _Object$keys__default["default"](e); if (_Object$getOwnPropertySymbols__default["default"]) { var o = _Object$getOwnPropertySymbols__default["default"](e); r && (o = _filterInstanceProperty__default["default"](o).call(o, function (r) { return _Object$getOwnPropertyDescriptor__default["default"](e, r).enumerable; })), t.push.apply(t, o); } return t; }
function _objectSpread$2(e) { for (var r = 1; r < arguments.length; r++) { var _context3, _context4; var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? _forEachInstanceProperty__default["default"](_context3 = ownKeys$2(Object(t), !0)).call(_context3, function (r) { _defineProperty(e, r, t[r]); }) : _Object$getOwnPropertyDescriptors__default["default"] ? _Object$defineProperties__default["default"](e, _Object$getOwnPropertyDescriptors__default["default"](t)) : _forEachInstanceProperty__default["default"](_context4 = ownKeys$2(Object(t))).call(_context4, function (r) { _Object$defineProperty__default["default"](e, r, _Object$getOwnPropertyDescriptor__default["default"](t, r)); }); } return e; }
const getInitialState$1 = (keyName, rows) => _reduceInstanceProperty__default["default"](rows).call(rows, (items, currentItem) => {
// @ts-ignore: index signature is confused as items might contain the initial value.
const initialValue = currentItem[keyName];
return _objectSpread$2(_objectSpread$2({}, items), {}, {
// if there is an initial value: use it, otherwise default to false
[currentItem.id]: initialValue !== null && initialValue !== void 0 ? initialValue : false
});
}, {});
function selectionReducer(state, action) {
switch (action.type) {
case 'toggle':
return _objectSpread$2(_objectSpread$2({}, state), {}, {
[action.payload]: !state[action.payload]
});
case 'select':
return _objectSpread$2(_objectSpread$2({}, state), {}, {
[action.payload]: true
});
case 'deselect':
return _objectSpread$2(_objectSpread$2({}, state), {}, {
[action.payload]: false
});
case 'selectAll':
{
var _context;
return _reduceInstanceProperty__default["default"](_context = _Object$keys__default["default"](state)).call(_context, (allItems, currentItem) => _objectSpread$2(_objectSpread$2({}, allItems), {}, {
[currentItem]: true
}), {});
}
case 'deselectAll':
{
var _context2;
return _reduceInstanceProperty__default["default"](_context2 = _Object$keys__default["default"](state)).call(_context2, (allItems, currentItem) => _objectSpread$2(_objectSpread$2({}, allItems), {}, {
[currentItem]: false
}), {});
}
default:
return state;
}
}
const useRowSelection = (keyName, rows) => {
const _useReducer = react.useReducer(selectionReducer, getInitialState$1(keyName, rows)),
_useReducer2 = _slicedToArray(_useReducer, 2),
selectionState = _useReducer2[0],
dispatch = _useReducer2[1];
react.useDebugValue(selectionState);
const selectableRows = _mapInstanceProperty__default["default"](rows).call(rows, item => _objectSpread$2(_objectSpread$2({}, item), {}, {
[keyName]: selectionState[item.id]
}));
const toggleRow = id => dispatch({
type: 'toggle',
payload: id
});
const selectRow = id => dispatch({
type: 'select',
payload: id
});
const deselectRow = id => dispatch({
type: 'deselect',
payload: id
});
const selectAllRows = () => dispatch({
type: 'selectAll'
});
const deselectAllRows = () => dispatch({
type: 'deselectAll'
});
const getIsRowSelected = id => selectionState[id];
const getNumberOfSelectedRows = () => _reduceInstanceProperty__default["default"](selectableRows).call(selectableRows, (count, item) => count + (item[keyName] === true ? 1 : 0), 0);
return {
rows: selectableRows,
toggleRow,
selectRow,
deselectRow,
selectAllRows,
deselectAllRows,
getIsRowSelected,
getNumberOfSelectedRows
};
};
var useRowSelection$1 = useRowSelection;
// we're using lodash sortBy as our default sorting fn
const sortItems = function (items, field, sortDirection) {
let sortingFunction = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : sortBy__default["default"];
if (!field) {
return items;
}
const sortedItems = sortingFunction(items, field);
if (sortDirection === 'desc') {
return _reverseInstanceProperty__default["default"](sortedItems).call(sortedItems);
}
return sortedItems;
};
const getInitialState = (items, field, sortDirection, sortingFunction) => ({
items: sortItems(items, field, sortDirection, sortingFunction),
sortedBy: field,
sortDirection
});
const useSorting = (items, field, sortDirection, sortingFunction) => {
const _useState = react.useState(() => getInitialState(items, field, sortDirection, sortingFunction)),
_useState2 = _slicedToArray(_useState, 2),
sortState = _useState2[0],
setSorting = _useState2[1];
react.useDebugValue(sortState);
function onSortChange(fieldKey) {
let nextSortDirection;
let sortedItems;
if (sortState.sortedBy !== fieldKey) {
// if the intented field is not already sorted, the initial direction is 'asc'
nextSortDirection = 'asc';
sortedItems = sortItems(sortState.items, fieldKey, nextSortDirection);
} else {
var _context;
nextSortDirection = sortState.sortDirection === 'asc' ? 'desc' : 'asc';
sortedItems = _reverseInstanceProperty__default["default"](_context = sortState.items).call(_context);
}
setSorting({
items: sortedItems,
sortedBy: fieldKey,
sortDirection: nextSortDirection
});
}
return {
items: sortState.items,
sortedBy: sortState.sortedBy,
sortDirection: sortState.sortDirection,
onSortChange
};
};
var useSorting$1 = useSorting;
function ownKeys$1(e, r) { var t = _Object$keys__default["default"](e); if (_Object$getOwnPropertySymbols__default["default"]) { var o = _Object$getOwnPropertySymbols__default["default"](e); r && (o = _filterInstanceProperty__default["default"](o).call(o, function (r) { return _Object$getOwnPropertyDescriptor__default["default"](e, r).enumerable; })), t.push.apply(t, o); } return t; }
function _objectSpread$1(e) { for (var r = 1; r < arguments.length; r++) { var _context, _context2; var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? _forEachInstanceProperty__default["default"](_context = ownKeys$1(Object(t), !0)).call(_context, function (r) { _defineProperty(e, r, t[r]); }) : _Object$getOwnPropertyDescriptors__default["default"] ? _Object$defineProperties__default["default"](e, _Object$getOwnPropertyDescriptors__default["default"](t)) : _forEachInstanceProperty__default["default"](_context2 = ownKeys$1(Object(t))).call(_context2, function (r) { _Object$defineProperty__default["default"](e, r, _Object$getOwnPropertyDescriptor__default["default"](t, r)); }); } return e; }
const applyIf$1 = (values, key) => !isNil__default["default"](values[key]) ? {
[key]: values[key]
} : {};
const defaultValues$1 = {
page: 1,
perPage: 20
};
const usePaginationState = function () {
let initialValues = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
const mergedValues = _objectSpread$1(_objectSpread$1(_objectSpread$1({}, defaultValues$1), applyIf$1(initialValues, 'page')), applyIf$1(initialValues, 'perPage'));
const _useState = react.useState(mergedValues.page),
_useState2 = _slicedToArray(_useState, 2),
page = _useState2[0],
setPage = _useState2[1];
const _useState3 = react.useState(mergedValues.perPage),
_useState4 = _slicedToArray(_useState3, 2),
perPage = _useState4[0],
setPerPage = _useState4[1];
const onPageChange = react.useCallback(nextPage => {
setPage(nextPage);
}, [setPage]);
const onPerPageChange = react.useCallback(nextPerPage => {
// side-effect:
// GIVEN client updates `perPage`,
// THEN we reset `page` (discards initialValues.page)
setPage(1);
setPerPage(nextPerPage);
}, [setPerPage, setPage]);
return {
page: {
value: page,
onChange: onPageChange
},
perPage: {
value: perPage,
onChange: onPerPageChange
}
};
};
var usePaginationState$1 = usePaginationState;
function ownKeys(e, r) { var t = _Object$keys__default["default"](e); if (_Object$getOwnPropertySymbols__default["default"]) { var o = _Object$getOwnPropertySymbols__default["default"](e); r && (o = _filterInstanceProperty__default["default"](o).call(o, function (r) { return _Object$getOwnPropertyDescriptor__default["default"](e, r).enumerable; })), t.push.apply(t, o); } return t; }
function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var _context, _context2; var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? _forEachInstanceProperty__default["default"](_context = ownKeys(Object(t), !0)).call(_context, function (r) { _defineProperty(e, r, t[r]); }) : _Object$getOwnPropertyDescriptors__default["default"] ? _Object$defineProperties__default["default"](e, _Object$getOwnPropertyDescriptors__default["default"](t)) : _forEachInstanceProperty__default["default"](_context2 = ownKeys(Object(t))).call(_context2, function (r) { _Object$defineProperty__default["default"](e, r, _Object$getOwnPropertyDescriptor__default["default"](t, r)); }); } return e; }
const defaultValues = {
key: 'createdAt',
order: 'desc'
};
const applyIf = (values, key) => !isNil__default["default"](values[key]) ? {
[key]: values[key]
} : {};
const useDataTableSortingState = function () {
let initialValues = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
const mergedValues = _objectSpread(_objectSpread(_objectSpread({}, defaultValues), applyIf(initialValues, 'key')), applyIf(initialValues, 'order'));
const _useState = react.useState(mergedValues),
_useState2 = _slicedToArray(_useState, 2),
sortDefinition = _useState2[0],
setSortDefinition = _useState2[1];
const onTableSortingChange = react.useCallback((key, order) => {
setSortDefinition({
key,
order
});
}, []);
return {
value: sortDefinition,
onChange: onTableSortingChange
};
};
var useDataTableSortingState$1 = useDataTableSortingState;
// NOTE: This string will be replaced on build time with the package version.
var version = "20.3.0";
exports.useDataTableSortingState = useDataTableSortingState$1;
exports.useFieldId = useFieldId$1;
exports.useMutationObserver = useMutationObserver;
exports.usePaginationState = usePaginationState$1;
exports.usePrevious = usePrevious$1;
exports.useRowSelection = useRowSelection$1;
exports.useSorting = useSorting$1;
exports.useToggleState = useToggleState$1;
exports.version = version;