@etsoo/materialui
Version:
TypeScript Material-UI Implementation
69 lines (68 loc) • 4.59 kB
JavaScript
;
var __importDefault = (this && this.__importDefault) || function (mod) {
return (mod && mod.__esModule) ? mod : { "default": mod };
};
Object.defineProperty(exports, "__esModule", { value: true });
exports.ViewPageActionBar = ViewPageActionBar;
exports.ViewPage = ViewPage;
const jsx_runtime_1 = require("react/jsx-runtime");
const react_1 = require("@etsoo/react");
const shared_1 = require("@etsoo/shared");
const react_2 = __importDefault(require("react"));
const Labels_1 = require("../app/Labels");
const MUGlobal_1 = require("../MUGlobal");
const PullToRefreshUI_1 = require("../PullToRefreshUI");
const CommonPage_1 = require("./CommonPage");
const MessageUtils_1 = require("../messages/MessageUtils");
const OperationMessageContainer_1 = require("../messages/OperationMessageContainer");
const ViewContainer_1 = require("../ViewContainer");
const LinearProgress_1 = __importDefault(require("@mui/material/LinearProgress"));
const Stack_1 = __importDefault(require("@mui/material/Stack"));
/**
* View page action bar
* @param props Props
* @returns Component
*/
function ViewPageActionBar(props) {
const { actionPaddings = MUGlobal_1.MUGlobal.pagePaddings, ...rest } = props;
return ((0, jsx_runtime_1.jsx)(Stack_1.default, { className: "ET-ViewPage-Actions", direction: "row", width: "100%", flexWrap: "wrap", justifyContent: "center", paddingTop: actionPaddings, paddingBottom: actionPaddings, gap: actionPaddings, ...rest }));
}
/**
* View page
* @param props Props
*/
function ViewPage(props) {
// Destruct
const { actions, children, fields, loadData, paddings = MUGlobal_1.MUGlobal.pagePaddings, spacing, actionPaddings = MUGlobal_1.MUGlobal.pagePaddings, supportRefresh = true, fabColumnDirection = true, fabTop = true, supportBack = true, pullToRefresh = true, gridRef, operationMessageHandler, titleBar, leftContainer, leftContainerLines, leftContainerProps, ...rest } = props;
// Data
const [data, setData] = react_2.default.useState();
// Labels
const labels = Labels_1.Labels.CommonPage;
// Container
const pullContainer = "#page-container";
// Load data
const refresh = react_2.default.useCallback(async () => {
const result = await loadData();
// When failed or no data returned, show the loading bar
setData(result);
}, [loadData]);
react_2.default.useEffect(() => {
const refreshHandler = async () => {
await refresh();
};
MessageUtils_1.MessageUtils.onRefresh(refreshHandler);
return () => {
MessageUtils_1.MessageUtils.offRefresh(refreshHandler);
};
}, [refresh]);
return ((0, jsx_runtime_1.jsx)(CommonPage_1.CommonPage, { paddings: paddings, onRefresh: supportRefresh ? refresh : undefined, onUpdate: supportRefresh ? undefined : refresh, className: "ET-ViewPage", ...rest, scrollContainer: globalThis, fabColumnDirection: fabColumnDirection, fabTop: fabTop, supportBack: supportBack, children: data == null ? ((0, jsx_runtime_1.jsx)(LinearProgress_1.default, {})) : ((0, jsx_runtime_1.jsxs)(react_2.default.Fragment, { children: [operationMessageHandler && ((0, jsx_runtime_1.jsx)(OperationMessageContainer_1.OperationMessageContainer, { handler: "id" in operationMessageHandler
? [
operationMessageHandler.types,
refresh,
operationMessageHandler.id
]
: operationMessageHandler })), titleBar && titleBar(data), (0, jsx_runtime_1.jsx)(ViewContainer_1.ViewContainer, { data: data, fields: fields, gridRef: gridRef, leftContainer: leftContainer, leftContainerLines: leftContainerLines, leftContainerProps: leftContainerProps, refresh: refresh, spacing: spacing }), actions !== null && ((0, jsx_runtime_1.jsx)(ViewPageActionBar, { actionPaddings: actionPaddings, children: shared_1.Utils.getResult(actions, data, refresh) })), shared_1.Utils.getResult(children, data, refresh), pullToRefresh && ((0, jsx_runtime_1.jsx)(PullToRefreshUI_1.PullToRefreshUI, { mainElement: pullContainer, triggerElement: pullContainer, instructionsPullToRefresh: labels.pullToRefresh, instructionsReleaseToRefresh: labels.releaseToRefresh, instructionsRefreshing: labels.refreshing, onRefresh: refresh, shouldPullToRefresh: () => {
const container = document.querySelector(pullContainer);
return !container?.scrollTop;
} })), (0, jsx_runtime_1.jsx)(react_1.ScrollRestoration, {})] })) }));
}