@etsoo/materialui
Version:
TypeScript Material-UI Implementation
54 lines (53 loc) • 2.73 kB
JavaScript
;
var __importDefault = (this && this.__importDefault) || function (mod) {
return (mod && mod.__esModule) ? mod : { "default": mod };
};
Object.defineProperty(exports, "__esModule", { value: true });
exports.ResponsivePage = ResponsivePage;
const jsx_runtime_1 = require("react/jsx-runtime");
const react_1 = __importDefault(require("react"));
const MUGlobal_1 = require("../MUGlobal");
const ResponsibleContainer_1 = require("../ResponsibleContainer");
const CommonPage_1 = require("./CommonPage");
const OperationMessageContainer_1 = require("../messages/OperationMessageContainer");
/**
* Fixed height list page
* @param props Props
* @returns Component
*/
function ResponsivePage(props) {
// Destruct
const { pageProps = {}, operationMessageHandler, ...rest } = props;
pageProps.paddings ??= MUGlobal_1.MUGlobal.pagePaddings;
const { paddings, fabColumnDirection, ...pageRest } = pageProps;
// State
const [scrollContainer, setScrollContainer] = react_1.default.useState();
const [direction, setDirection] = react_1.default.useState(fabColumnDirection);
// Layout
return ((0, jsx_runtime_1.jsxs)(CommonPage_1.CommonPage, { ...pageRest, paddings: {}, scrollContainer: scrollContainer, fabColumnDirection: direction, children: [operationMessageHandler && ((0, jsx_runtime_1.jsx)(OperationMessageContainer_1.OperationMessageContainer, { handler: operationMessageHandler })), (0, jsx_runtime_1.jsx)(ResponsibleContainer_1.ResponsibleContainer, { paddings: paddings, containerBoxSx: (paddings, hasField, _dataGrid) => {
// Half
const half = typeof paddings == "number"
? paddings / 2
: MUGlobal_1.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 })] }));
}