styled-hook-form
Version:
React form library for styled-components based on grommet and react-hook-form
218 lines (217 loc) • 12 kB
JavaScript
"use strict";
var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
if (k2 === undefined) k2 = k;
Object.defineProperty(o, k2, { enumerable: true, get: function() { return m[k]; } });
}) : (function(o, m, k, k2) {
if (k2 === undefined) k2 = k;
o[k2] = m[k];
}));
var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
Object.defineProperty(o, "default", { enumerable: true, value: v });
}) : function(o, v) {
o["default"] = v;
});
var __importStar = (this && this.__importStar) || function (mod) {
if (mod && mod.__esModule) return mod;
var result = {};
if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
__setModuleDefault(result, mod);
return result;
};
var __rest = (this && this.__rest) || function (s, e) {
var t = {};
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
t[p] = s[p];
if (s != null && typeof Object.getOwnPropertySymbols === "function")
for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
t[p[i]] = s[p[i]];
}
return t;
};
var __importDefault = (this && this.__importDefault) || function (mod) {
return (mod && mod.__esModule) ? mod : { "default": mod };
};
Object.defineProperty(exports, "__esModule", { value: true });
exports.DataTable = void 0;
const react_1 = require("react");
const jsx_runtime_1 = require("react/jsx-runtime");
const context_1 = require("../../../context");
const grommet_1 = require("grommet");
const loader_1 = __importDefault(require("./loader"));
const react_2 = __importStar(require("react"));
const data_context_1 = require("./data-context");
const paged_data_source_1 = require("../../utils/paged-data-source");
const data_table_wrap_1 = __importDefault(require("./data-table-wrap"));
const DEFAULT_PAGE = 1;
const DEFAULT_PAGE_SIZE = 50;
const DataTable = (props) => {
let { data, paginate, primaryKey, wrap } = props;
let tableContext = data_context_1.useDataTableContext();
let contextOptions = react_2.useMemo(() => {
var _a;
return ({
data,
pageSize: (_a = paginate === null || paginate === void 0 ? void 0 : paginate.pageSize) !== null && _a !== void 0 ? _a : Number.MAX_VALUE,
primaryKey: primaryKey,
orderDir: "desc",
orderParam: primaryKey,
});
}, [paginate === null || paginate === void 0 ? void 0 : paginate.pageSize, primaryKey, data]);
let alreadyContextDefined = tableContext.state.syncKey !== 0;
const childrenWrap = react_2.default.cloneElement(wrap !== null && wrap !== void 0 ? wrap : jsx_runtime_1.jsx(grommet_1.Box, {}, void 0), {}, jsx_runtime_1.jsx(DataTableImpl, Object.assign({}, props), void 0));
const children = react_2.default.createElement(!alreadyContextDefined ? data_context_1.DataTableContextProvider : react_2.Fragment, !alreadyContextDefined ? { options: contextOptions } : {}, childrenWrap);
react_2.useEffect(() => {
if (alreadyContextDefined) {
tableContext.dispatch({ type: "merge-value", payload: contextOptions });
}
// eslint-disable-next-line react-hooks/exhaustive-deps
}, [alreadyContextDefined, contextOptions]);
return children;
};
exports.DataTable = DataTable;
const DataTableImpl = (props) => {
var _a, _b, _c;
let { request, requestParams, mockResponse, ssr: perSsr, data: dataProp, columns, onRequest, onResponse, onRequestError, requestParamsConfig: reqParams, paginate, toolbar } = props, rest = __rest(props, ["request", "requestParams", "mockResponse", "ssr", "data", "columns", "onRequest", "onResponse", "onRequestError", "requestParamsConfig", "paginate", "toolbar"]);
let { state: { currentPage = (_a = paginate === null || paginate === void 0 ? void 0 : paginate.currentPage) !== null && _a !== void 0 ? _a : DEFAULT_PAGE, pageSize, totalRecords: globalTotalRecords, data: globalData, syncKey, orderDir, orderParam, }, dispatch, } = data_context_1.useDataTableContext();
let defaultPaging = {
enabled: false,
pageSize: DEFAULT_PAGE_SIZE,
currentPage,
};
let requestParamsConfig = Object.assign(Object.assign({}, DataTable.defaultProps.requestParamsConfig), reqParams);
let { config: { ssr: globalSSR }, } = context_1.useFormBuilderContext();
let ssrEnabled = perSsr !== undefined ? perSsr : globalSSR;
let internalReqParams = react_2.useMemo(() => {
return Object.assign({}, requestParams);
}, [requestParams]);
let { error, refresh: refreshCurrentPage, loading, nextPage, hasMore, } = paged_data_source_1.usePagedData({
request,
params: internalReqParams,
orderDir: orderDir,
orderProp: orderParam,
orderDirParamName: requestParamsConfig.orderDirParamName,
orderPropParamName: requestParamsConfig.orderPropParamName,
listPropName: requestParamsConfig.listPropName,
pageParamName: requestParamsConfig.pageNumParamName,
pageSizeParamName: requestParamsConfig.pageSizeParamName,
pageSize,
page: currentPage,
totalPropName: requestParamsConfig.totalPropName,
onRequest: (data, headers) => {
return onRequest ? onRequest(data, headers) : data;
},
onResponse: (_data, _, headers) => {
var _a;
dispatch({
type: "merge-value",
payload: {
totalRecords: _data[requestParamsConfig.totalPropName],
},
});
let cdata = onResponse ? onResponse(_data, headers) : _data;
const dataList = cdata[(_a = reqParams === null || reqParams === void 0 ? void 0 : reqParams.listPropName) !== null && _a !== void 0 ? _a : "list"];
if ((paginate === null || paginate === void 0 ? void 0 : paginate.type) === "infinite-scroll") {
dispatch({
type: "set-data",
payload: [...(globalData || []), ...dataList],
});
}
else {
dispatch({
type: "set-data",
payload: dataList,
});
}
return cdata;
},
mockResponse,
});
react_2.useEffect(() => {
if (error && onRequestError) {
onRequestError(error);
}
// eslint-disable-next-line react-hooks/exhaustive-deps
}, [error]);
react_2.useEffect(() => {
var _a;
dispatch({
type: "merge-value",
payload: { currentPage: (_a = paginate === null || paginate === void 0 ? void 0 : paginate.currentPage) !== null && _a !== void 0 ? _a : 1 },
});
}, [dispatch, paginate === null || paginate === void 0 ? void 0 : paginate.currentPage]);
react_2.useEffect(() => {
dispatch({
type: "set-order",
payload: { param: props.primaryKey, dir: "desc" },
});
}, [dispatch, props.primaryKey]);
const handleSort = (_sort) => {
dispatch({
type: "set-order",
payload: { param: _sort.property, dir: _sort.direction },
});
};
let [totalRecords, setTotalRecords] = react_2.useState(defaultPaging.pageSize);
react_2.useEffect(() => {
setTotalRecords(globalTotalRecords);
}, [globalTotalRecords]);
react_2.useEffect(() => {
refreshCurrentPage();
// eslint-disable-next-line react-hooks/exhaustive-deps
}, [syncKey]);
react_2.useEffect(() => {
if (dataProp) {
dispatch({ type: "set-data", payload: dataProp });
}
}, [dataProp, dispatch]);
const sortValue = react_2.useMemo(() => ({
direction: orderDir,
property: orderParam,
external: request ? true : false,
}), [orderDir, orderParam, request]);
const btnPagingEnabled = paginate && (paginate.type === "button-based" || !paginate.type);
const isInfiniteScroll = (paginate === null || paginate === void 0 ? void 0 : paginate.type) === "infinite-scroll";
const defaultPageSizeOptions = [pageSize, 10, 20, 50, 100];
const pageSizeOptions = Array.from(new Set((paginate === null || paginate === void 0 ? void 0 : paginate.pageSizeOptions) || defaultPageSizeOptions));
const PaginationView = btnPagingEnabled ? (jsx_runtime_1.jsxs(grommet_1.Box, Object.assign({ direction: "row", align: "center", fill: "horizontal" }, { children: [react_1.createElement(grommet_1.Pagination, Object.assign({ onChange: (e) => {
dispatch({
type: "merge-value",
payload: { currentPage: e.page },
});
} }, defaultPaging, paginate === null || paginate === void 0 ? void 0 : paginate.pagerOptions, { step: pageSize, numberItems: totalRecords, page: currentPage, key: currentPage })),
(paginate === null || paginate === void 0 ? void 0 : paginate.showPageSizeOptions) && (jsx_runtime_1.jsx(grommet_1.Box, Object.assign({ width: "6em" }, { children: jsx_runtime_1.jsx(grommet_1.Select
//@ts-ignore
, {
//@ts-ignore
value: pageSize, options: pageSizeOptions, onChange: (e) => {
dispatch({
type: "merge-value",
payload: { pageSize: parseInt(e.target.value) },
});
} }, void 0) }), void 0))] }), void 0)) : null;
const pagerPosition = btnPagingEnabled
? (paginate === null || paginate === void 0 ? void 0 : paginate.pagerPosition) || "bottom"
: "none";
const handleMoreData = () => {
if ((paginate === null || paginate === void 0 ? void 0 : paginate.type) === "infinite-scroll" && hasMore) {
nextPage();
}
};
return (jsx_runtime_1.jsxs(jsx_runtime_1.Fragment, { children: [toolbar && jsx_runtime_1.jsx(grommet_1.Box, { children: toolbar }, void 0),
jsx_runtime_1.jsxs(grommet_1.Box, Object.assign({ fill: true }, { children: [globalData && (jsx_runtime_1.jsxs(grommet_1.Box, { children: [loading && (jsx_runtime_1.jsx(grommet_1.Layer, Object.assign({ position: "center", modal: false }, { children: jsx_runtime_1.jsx(grommet_1.Box, Object.assign({ pad: "large", round: "small", background: "light-3" }, { children: jsx_runtime_1.jsx(grommet_1.Spinner, { size: "medium" }, void 0) }), void 0) }), void 0)), btnPagingEnabled &&
(pagerPosition === "top" || pagerPosition === "both") &&
PaginationView, jsx_runtime_1.jsx(data_table_wrap_1.default, Object.assign({ isInfiniteScroll: isInfiniteScroll, fill: "horizontal" }, { children: jsx_runtime_1.jsx(grommet_1.DataTable, Object.assign({}, rest, { columns: columns, data: globalData, paginate: false, sort: sortValue, onSort: handleSort, onMore: isInfiniteScroll ? handleMoreData : undefined, step: (_c = (_b = paginate === null || paginate === void 0 ? void 0 : paginate.pageSize) !== null && _b !== void 0 ? _b : props.step) !== null && _c !== void 0 ? _c : Number.MAX_VALUE }), void 0) }), void 0), btnPagingEnabled &&
(pagerPosition === "bottom" || pagerPosition === "both") &&
PaginationView] }, void 0)),
(!ssrEnabled || !globalData) && jsx_runtime_1.jsx(loader_1.default, {}, void 0)] }), void 0)] }, void 0));
};
DataTable.defaultProps = {
requestParamsConfig: {
pageSizeParamName: "pageSize",
pageNumParamName: "page",
orderDirParamName: "orderDir",
orderPropParamName: "orderBy",
totalPropName: "total",
},
};