@etsoo/materialui
Version:
TypeScript Material-UI Implementation
48 lines (47 loc) • 2.3 kB
JavaScript
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import React from "react";
import { MUGlobal } from "../MUGlobal";
import { ResponsibleContainer } from "../ResponsibleContainer";
import { CommonPage } from "./CommonPage";
import { OperationMessageContainer } from "../messages/OperationMessageContainer";
/**
* Fixed height list page
* @param props Props
* @returns Component
*/
export function ResponsivePage(props) {
// Destruct
const { pageProps = {}, operationMessageHandler, ...rest } = props;
pageProps.paddings ??= MUGlobal.pagePaddings;
const { paddings, fabColumnDirection, ...pageRest } = pageProps;
// State
const [scrollContainer, setScrollContainer] = React.useState();
const [direction, setDirection] = React.useState(fabColumnDirection);
// Layout
return (_jsxs(CommonPage, { ...pageRest, paddings: {}, scrollContainer: scrollContainer, fabColumnDirection: direction, children: [operationMessageHandler && (_jsx(OperationMessageContainer, { handler: operationMessageHandler })), _jsx(ResponsibleContainer, { paddings: paddings, containerBoxSx: (paddings, hasField, _dataGrid) => {
// Half
const half = typeof paddings == "number"
? paddings / 2
: MUGlobal.half(paddings);
// .SearchBox keep the same to avoid flick when switching between DataGrid and List
return {
paddingTop: paddings,
"& .SearchBox": {
marginLeft: paddings,
marginRight: paddings,
marginBottom: hasField ? half : 0
},
"& .ListBox": {
marginBottom: paddings
},
"& .DataGridBox": {
marginLeft: paddings,
marginRight: paddings,
marginBottom: paddings
}
};
}, elementReady: (element, isDataGrid) => {
setDirection(!isDataGrid);
setScrollContainer(element);
}, ...rest })] }));
}