ra-core
Version:
Core components of react-admin, a frontend Framework for building admin applications on top of REST services, using ES6, React
237 lines • 8.01 kB
JavaScript
;
var __importDefault = (this && this.__importDefault) || function (mod) {
return (mod && mod.__esModule) ? mod : { "default": mod };
};
Object.defineProperty(exports, "__esModule", { value: true });
exports.getNumberOrDefault = exports.hasCustomParams = exports.getQuery = exports.validQueryParams = exports.useReferenceParams = void 0;
const react_1 = require("react");
const debounce_js_1 = __importDefault(require("lodash/debounce.js"));
const removeEmpty_1 = __importDefault(require("../../util/removeEmpty.cjs"));
const list_1 = require("../list/index.cjs");
/**
* Get the reference inputs parameters (page, sort, filters) and modifiers.
*
* @returns {Array} A tuple [parameters, modifiers].
* Destructure as [
* { page, perPage, sort, order, filter, filterValues, displayedFilters, requestSignature },
* { setFilters, hideFilter, showFilter, setPage, setPerPage, setSort }
* ]
*
* @example
*
* const [referenceParams, referenceParamsActions] = useReferenceParams({
* resource: 'posts',
* filterDefaultValues: {
* published: true
* },
* sort: {
* field: 'published_at',
* order: 'DESC'
* },
* perPage: 25
* });
*
* const {
* page,
* perPage,
* sort,
* order,
* filter,
* filterValues,
* displayedFilters,
* requestSignature
* } = referenceParams;
*
* const {
* setFilters,
* hideFilter,
* showFilter,
* setPage,
* setPerPage,
* setSort,
* } = referenceParamsActions;
*/
const useReferenceParams = ({ resource, filter, sort = defaultSort, page = 1, perPage = 10, debounce = 500, }) => {
const [params, setParams] = (0, react_1.useState)(defaultParams);
const tempParams = (0, react_1.useRef)();
const requestSignature = [
resource,
JSON.stringify(params),
JSON.stringify(filter),
JSON.stringify(sort),
page,
perPage,
];
const query = (0, react_1.useMemo)(() => (0, exports.getQuery)({
params: params,
filterDefaultValues: filter,
sort,
page,
perPage,
}), requestSignature // eslint-disable-line react-hooks/exhaustive-deps
);
const changeParams = (0, react_1.useCallback)(action => {
if (!tempParams.current) {
// no other changeParams action dispatched this tick
const newTempParams = (0, list_1.queryReducer)(query, action);
tempParams.current = newTempParams;
// schedule side effects for next tick
setTimeout(() => {
setParams(newTempParams);
tempParams.current = undefined;
}, 0);
}
else {
// side effects already scheduled, just change the params
tempParams.current = (0, list_1.queryReducer)(tempParams.current, action);
}
}, requestSignature); // eslint-disable-line react-hooks/exhaustive-deps
const setSort = (0, react_1.useCallback)((sort) => changeParams({
type: list_1.SET_SORT,
payload: sort,
}), requestSignature // eslint-disable-line react-hooks/exhaustive-deps
);
const setPage = (0, react_1.useCallback)((newPage) => changeParams({ type: list_1.SET_PAGE, payload: newPage }), requestSignature // eslint-disable-line react-hooks/exhaustive-deps
);
const setPerPage = (0, react_1.useCallback)((newPerPage) => changeParams({ type: list_1.SET_PER_PAGE, payload: newPerPage }), requestSignature // eslint-disable-line react-hooks/exhaustive-deps
);
const filterValues = query.filter || emptyObject;
const displayedFilterValues = query.displayedFilters || emptyObject;
const debouncedSetFilters = (0, react_1.useRef)((0, debounce_js_1.default)((filter, displayedFilters = undefined) => {
changeParams({
type: list_1.SET_FILTER,
payload: {
filter: (0, removeEmpty_1.default)(filter),
displayedFilters,
},
});
}, debounce));
(0, react_1.useEffect)(() => {
return () => {
// eslint-disable-next-line react-hooks/exhaustive-deps
debouncedSetFilters.current.cancel();
};
}, []);
const setFilters = (0, react_1.useCallback)((filter, displayedFilters = undefined, debounce = false) => {
debounce
? debouncedSetFilters.current(filter, displayedFilters)
: changeParams({
type: list_1.SET_FILTER,
payload: {
filter: (0, removeEmpty_1.default)(filter),
displayedFilters,
},
});
}, requestSignature // eslint-disable-line react-hooks/exhaustive-deps
);
const hideFilter = (0, react_1.useCallback)((filterName) => {
changeParams({
type: list_1.HIDE_FILTER,
payload: filterName,
});
}, requestSignature); // eslint-disable-line react-hooks/exhaustive-deps
const showFilter = (0, react_1.useCallback)((filterName, defaultValue) => {
changeParams({
type: list_1.SHOW_FILTER,
payload: {
filterName,
defaultValue,
},
});
}, requestSignature); // eslint-disable-line react-hooks/exhaustive-deps
return [
{
filterValues,
requestSignature,
...query,
displayedFilters: displayedFilterValues,
},
{
changeParams,
setPage,
setPerPage,
setSort,
setFilters,
hideFilter,
showFilter,
},
];
};
exports.useReferenceParams = useReferenceParams;
exports.validQueryParams = [
'page',
'perPage',
'sort',
'order',
'filter',
'displayedFilters',
];
/**
* Merge list params from 2 different sources:
* - the params stored in the local state
* - the props passed to the List component (including the filter defaultValues)
*/
const getQuery = ({ params, filterDefaultValues, sort, page, perPage, }) => {
const query = (0, exports.hasCustomParams)(params)
? { ...params }
: { filter: filterDefaultValues || {} };
if (!query.sort) {
query.sort = sort.field;
query.order = sort.order;
}
if (query.page == null) {
query.page = page;
}
if (query.perPage == null) {
query.perPage = perPage;
}
if (query.page == null) {
query.page = 1;
}
return {
...query,
page: (0, exports.getNumberOrDefault)(query.page, 1),
perPage: (0, exports.getNumberOrDefault)(query.perPage, 10),
};
};
exports.getQuery = getQuery;
/**
* Check if user has already set custom sort, page, or filters for this list
*
* User params come from the Redux store as the params props. By default,
* this object is:
*
* { filter: {}, order: null, page: 1, perPage: null, sort: null }
*
* To check if the user has custom params, we must compare the params
* to these initial values.
*
* @param {Object} params
*/
const hasCustomParams = (params) => {
return (params &&
params.filter &&
(Object.keys(params.filter).length > 0 ||
params.order != null ||
params.page !== 1 ||
params.perPage != null ||
params.sort != null));
};
exports.hasCustomParams = hasCustomParams;
const getNumberOrDefault = (possibleNumber, defaultValue) => {
if (typeof possibleNumber === 'undefined') {
return defaultValue;
}
const parsedNumber = typeof possibleNumber === 'string'
? parseInt(possibleNumber, 10)
: possibleNumber;
return isNaN(parsedNumber) ? defaultValue : parsedNumber;
};
exports.getNumberOrDefault = getNumberOrDefault;
const emptyObject = {};
const defaultSort = {
field: 'id',
order: list_1.SORT_ASC,
};
const defaultParams = {};
//# sourceMappingURL=useReferenceParams.js.map