@vlsergey/react-bootstrap-pagetable
Version:
Complex solution to work with pageable data, including sorting, filtering, actions, changing displayed columns, etc.
33 lines (32 loc) • 2.52 kB
JavaScript
import { __assign, __rest } from "tslib";
import React, { useCallback, useMemo } from 'react';
import { useHistory, useLocation } from 'react-router-dom';
import strToSort from '../sortable/strToSort';
import fetchArgsToUrlParams from './fetchArgsToUrlParams';
import ReactRouterItemFieldCellLinkWrapper from './ReactRouterItemFieldCellLinkWrapper';
import urlParamsToFetchArgs from './urlParamsToFetchArgs';
var withReactRouter = function (Child) {
return function RoutedPageTable(_a) {
var _b = _a.defaultPage, defaultPage = _b === void 0 ? 0 : _b, _c = _a.defaultSize, defaultSize = _c === void 0 ? 10 : _c, defaultSort = _a.defaultSort, _d = _a.itemFieldCellLinkWrapper, itemFieldCellLinkWrapper = _d === void 0 ? ReactRouterItemFieldCellLinkWrapper : _d, itemModel = _a.itemModel, onFetchArgsChange = _a.onFetchArgsChange, urlParamsPrefix = _a.urlParamsPrefix, etcProps = __rest(_a, ["defaultPage", "defaultSize", "defaultSort", "itemFieldCellLinkWrapper", "itemModel", "onFetchArgsChange", "urlParamsPrefix"]);
var history = useHistory();
var location = useLocation();
var defaultFetchArgs = useMemo(function () {
return ({ page: defaultPage, size: defaultSize, sort: strToSort(defaultSort) });
}, [defaultPage, defaultSize, defaultSort]);
var toFetchArgs = useMemo(function () { return function (search) {
return urlParamsToFetchArgs(defaultFetchArgs, itemModel, urlParamsPrefix, new URLSearchParams(search));
}; }, [defaultFetchArgs, itemModel, urlParamsPrefix]);
var handleFetchArgsChange = useCallback(function (fetchArgs) {
var updated = fetchArgsToUrlParams(itemModel, urlParamsPrefix, location.search, fetchArgs);
var newSearch = updated.toString();
if (onFetchArgsChange) {
var newFetchArgs = toFetchArgs(newSearch);
onFetchArgsChange(newFetchArgs);
}
history.replace(location.pathname + "?" + newSearch);
}, [history, itemModel, location.pathname, location.search, onFetchArgsChange, toFetchArgs, urlParamsPrefix]);
var fetchArgs = useMemo(function () { return toFetchArgs(location.search); }, [location.search, toFetchArgs]);
return React.createElement(Child, __assign({}, etcProps, { fetchArgs: fetchArgs, itemFieldCellLinkWrapper: itemFieldCellLinkWrapper, itemModel: itemModel, onFetchArgsChange: handleFetchArgsChange }));
};
};
export default withReactRouter;