@etsoo/materialui
Version:
TypeScript Material-UI Implementation
54 lines (53 loc) • 2.26 kB
JavaScript
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import { useCombinedRefs, useDimensions, useSearchParamsWithCache } from "@etsoo/react";
import React from "react";
import { MUGlobal } from "../MUGlobal";
import { ScrollerListEx } from "../ScrollerListEx";
import { SearchBar } from "../SearchBar";
import { CommonPage } from "./CommonPage";
import { GridUtils } from "../GridUtils";
import Stack from "@mui/material/Stack";
import Box from "@mui/material/Box";
/**
* List page
* @param props Props
* @returns Component
*/
export function ListPage(props) {
// Destruct
const { fields, fieldTemplate, loadData, mRef, pageProps = {}, cacheKey, cacheMinutes = 15, sizeReadyMiliseconds = 0, searchBarTop, ...rest } = props;
pageProps.paddings ??= MUGlobal.pagePaddings;
// States
const [states] = React.useState({});
const refs = useCombinedRefs(mRef, (ref) => {
if (ref == null)
return;
const first = states.ref == null;
states.ref = ref;
if (first)
reset();
});
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.createLoader(props, fieldTemplate, cacheKey, false), lastItem);
};
// Watch container
const { dimensions } = useDimensions(1, undefined, sizeReadyMiliseconds);
const rect = dimensions[0][2];
// Search data
const searchData = useSearchParamsWithCache(cacheKey);
const f = typeof fields == "function" ? fields(searchData ?? {}) : fields;
// Layout
return (_jsx(CommonPage, { ...pageProps, scrollContainer: globalThis, children: _jsxs(Stack, { children: [_jsx(Box, { ref: dimensions[0][0], sx: {
paddingBottom: pageProps.paddings
}, children: rect && rect.width > 100 && (_jsx(SearchBar, { fields: f, onSubmit: onSubmit, top: searchBarTop, width: rect.width })) }), _jsx(ScrollerListEx, { autoLoad: false, loadData: localLoadData, mRef: refs, ...rest })] }) }));
}