@etsoo/materialui
Version:
TypeScript Material-UI Implementation
87 lines (86 loc) • 3.93 kB
JavaScript
;
var __importDefault = (this && this.__importDefault) || function (mod) {
return (mod && mod.__esModule) ? mod : { "default": mod };
};
Object.defineProperty(exports, "__esModule", { value: true });
exports.DataGridPage = DataGridPage;
const jsx_runtime_1 = require("react/jsx-runtime");
const react_1 = require("@etsoo/react");
const react_2 = __importDefault(require("react"));
const DataGridEx_1 = require("../DataGridEx");
const MUGlobal_1 = require("../MUGlobal");
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"));
/**
* DataGrid page
* @param props Props
* @returns Component
*/
function DataGridPage(props) {
// Destruct
const { adjustHeight, fields, fieldTemplate, height, loadData, mRef, sizeReadyMiliseconds = 100, pageProps = {}, cacheKey, cacheMinutes = 15, searchBarTop, ...rest } = props;
pageProps.paddings ??= MUGlobal_1.MUGlobal.pagePaddings;
// States
const [states, setStates] = react_2.default.useReducer((currentState, newState) => {
return { ...currentState, ...newState };
}, {
height
});
const refs = (0, react_1.useCombinedRefs)(mRef, (ref) => {
if (ref == null)
return;
states.ref = ref;
if (ref.element)
setStates({ element: ref.element });
//setStates({ ref });
});
// On submit callback
const onSubmit = (data, _reset) => {
setStates({ data });
};
const localLoadData = (props, lastItem) => {
return loadData(GridUtils_1.GridUtils.createLoader(props, fieldTemplate, cacheKey, false), lastItem);
};
// Search data
const searchData = (0, react_1.useSearchParamsWithCache)(cacheKey);
// Watch container
const { dimensions } = (0, react_1.useDimensions)(1, undefined, sizeReadyMiliseconds);
const rect = dimensions[0][2];
react_2.default.useEffect(() => {
if (rect != null && rect.height > 50 && height == null) {
let gridHeight = document.documentElement.clientHeight -
Math.round(rect.top + rect.height + 1);
const style = window.getComputedStyle(dimensions[0][1]);
const paddingBottom = parseFloat(style.paddingBottom);
if (!isNaN(paddingBottom))
gridHeight -= paddingBottom;
if (adjustHeight != null)
gridHeight -=
typeof adjustHeight === "number"
? adjustHeight
: adjustHeight(gridHeight, rect);
if (gridHeight !== states.height)
setStates({ height: gridHeight });
}
}, [rect]);
const list = react_2.default.useMemo(() => {
const gridHeight = states.height;
if (gridHeight == null)
return;
return ((0, jsx_runtime_1.jsx)(DataGridEx_1.DataGridEx, { autoLoad: false, height: gridHeight, loadData: localLoadData, mRef: refs, ...rest }));
}, [states.height]);
const { ref, data } = states;
react_2.default.useEffect(() => {
if (ref == null || data == null)
return;
ref.reset({ data });
}, [ref, data]);
const f = typeof fields == "function" ? fields(searchData ?? {}) : fields;
// Layout
return ((0, jsx_runtime_1.jsx)(CommonPage_1.CommonPage, { ...pageProps, scrollContainer: states.element, 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 })) }), list] }) }));
}