@etsoo/materialui
Version:
TypeScript Material-UI Implementation
88 lines (87 loc) • 4.01 kB
JavaScript
;
var __importDefault = (this && this.__importDefault) || function (mod) {
return (mod && mod.__esModule) ? mod : { "default": mod };
};
Object.defineProperty(exports, "__esModule", { value: true });
exports.ListPage = ListPage;
const jsx_runtime_1 = require("react/jsx-runtime");
const react_1 = require("@etsoo/react");
const react_2 = __importDefault(require("react"));
const MUGlobal_1 = require("../MUGlobal");
const ScrollerListEx_1 = require("../ScrollerListEx");
const SearchBar_1 = require("../SearchBar");
const CommonPage_1 = require("./CommonPage");
const GridUtils_1 = require("../GridUtils");
const Stack_1 = __importDefault(require("@mui/material/Stack"));
const Box_1 = __importDefault(require("@mui/material/Box"));
/**
* List page
* @param props Props
* @returns Component
*/
function ListPage(props) {
// Destruct
const { fields, fieldTemplate, loadData, mRef, pageProps = {}, cacheKey, cacheMinutes = 15, sizeReadyMiliseconds = 0, searchBarTop, ...rest } = props;
pageProps.paddings ??= MUGlobal_1.MUGlobal.pagePaddings;
// States
const [states] = react_2.default.useState({});
const refs = (0, react_1.useCombinedRefs)(mRef, (ref) => {
if (ref == null)
return;
const first = states.ref == null;
states.ref = ref;
if (first)
reset();
});
const initLoadedRef = react_2.default.useRef();
const reset = () => {
if (states.data == null || states.ref == null)
return;
states.ref.reset({ data: states.data });
};
// On submit callback
const onSubmit = (data, _reset) => {
states.data = data;
reset();
};
const localLoadData = (props, lastItem) => {
return loadData(GridUtils_1.GridUtils.createLoader(props, fieldTemplate, cacheKey, false), lastItem);
};
// Watch container
const { dimensions } = (0, react_1.useDimensions)(1, undefined, sizeReadyMiliseconds);
const rect = dimensions[0][2];
// Search data
const searchData = (0, react_1.useSearchParamsWithCache)(cacheKey);
const onInitLoad = (ref) => {
// Avoid repeatedly load from cache
if (initLoadedRef.current || !cacheKey)
return undefined;
// Cache data
const cacheData = GridUtils_1.GridUtils.getCacheData(cacheKey, cacheMinutes);
if (cacheData) {
const { rows, state } = cacheData;
GridUtils_1.GridUtils.mergeSearchData(state, searchData);
// Scroll position
const scrollData = sessionStorage.getItem(`${cacheKey}-scroll`);
if (scrollData) {
const { scrollOffset } = JSON.parse(scrollData);
globalThis.setTimeout(() => ref.scrollTo(scrollOffset), 0);
}
// Update flag value
initLoadedRef.current = true;
// Return cached rows and state
return [rows, state];
}
return undefined;
};
const onListScroll = (props) => {
if (!cacheKey || !initLoadedRef.current)
return;
sessionStorage.setItem(`${cacheKey}-scroll`, JSON.stringify(props));
};
const f = typeof fields == "function" ? fields(searchData ?? {}) : fields;
// Layout
return ((0, jsx_runtime_1.jsx)(CommonPage_1.CommonPage, { ...pageProps, scrollContainer: globalThis, children: (0, jsx_runtime_1.jsxs)(Stack_1.default, { children: [(0, jsx_runtime_1.jsx)(Box_1.default, { ref: dimensions[0][0], sx: {
paddingBottom: pageProps.paddings
}, children: rect && rect.width > 100 && ((0, jsx_runtime_1.jsx)(SearchBar_1.SearchBar, { fields: f, onSubmit: onSubmit, top: searchBarTop, width: rect.width })) }), (0, jsx_runtime_1.jsx)(ScrollerListEx_1.ScrollerListEx, { autoLoad: false, loadData: localLoadData, onUpdateRows: GridUtils_1.GridUtils.getUpdateRowsHandler(cacheKey), onInitLoad: onInitLoad, onScroll: onListScroll, mRef: refs, ...rest })] }) }));
}