@etsoo/materialui
Version:
TypeScript Material-UI Implementation
62 lines (61 loc) • 3.85 kB
JavaScript
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import { ScrollRestoration } from "@etsoo/react";
import { Utils } from "@etsoo/shared";
import React from "react";
import { Labels } from "../app/Labels";
import { MUGlobal } from "../MUGlobal";
import { PullToRefreshUI } from "../PullToRefreshUI";
import { CommonPage } from "./CommonPage";
import { MessageUtils } from "../messages/MessageUtils";
import { OperationMessageContainer } from "../messages/OperationMessageContainer";
import { ViewContainer } from "../ViewContainer";
import LinearProgress from "@mui/material/LinearProgress";
import Stack from "@mui/material/Stack";
/**
* View page action bar
* @param props Props
* @returns Component
*/
export function ViewPageActionBar(props) {
const { actionPaddings = MUGlobal.pagePaddings, ...rest } = props;
return (_jsx(Stack, { className: "ET-ViewPage-Actions", direction: "row", width: "100%", flexWrap: "wrap", justifyContent: "center", paddingTop: actionPaddings, paddingBottom: actionPaddings, gap: actionPaddings, ...rest }));
}
/**
* View page
* @param props Props
*/
export function ViewPage(props) {
// Destruct
const { actions, children, fields, loadData, paddings = MUGlobal.pagePaddings, spacing, actionPaddings = 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.useState();
// Labels
const labels = Labels.CommonPage;
// Container
const pullContainer = "#page-container";
// Load data
const refresh = React.useCallback(async () => {
const result = await loadData();
// When failed or no data returned, show the loading bar
setData(result);
}, [loadData]);
React.useEffect(() => {
const refreshHandler = async () => {
await refresh();
};
MessageUtils.onRefresh(refreshHandler);
return () => {
MessageUtils.offRefresh(refreshHandler);
};
}, [refresh]);
return (_jsx(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 ? (_jsx(LinearProgress, {})) : (_jsxs(React.Fragment, { children: [operationMessageHandler && (_jsx(OperationMessageContainer, { handler: "id" in operationMessageHandler
? [
operationMessageHandler.types,
refresh,
operationMessageHandler.id
]
: operationMessageHandler })), titleBar && titleBar(data), _jsx(ViewContainer, { data: data, fields: fields, gridRef: gridRef, leftContainer: leftContainer, leftContainerLines: leftContainerLines, leftContainerProps: leftContainerProps, refresh: refresh, spacing: spacing }), actions !== null && (_jsx(ViewPageActionBar, { actionPaddings: actionPaddings, children: Utils.getResult(actions, data, refresh) })), Utils.getResult(children, data, refresh), pullToRefresh && (_jsx(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;
} })), _jsx(ScrollRestoration, {})] })) }));
}