77 lines
2.0 KiB
JavaScript
77 lines
2.0 KiB
JavaScript
import { Button, Space } from "antd";
|
|
import { useEffect, useState } from "react";
|
|
import HeaderBack from "../HeaderBack";
|
|
|
|
/**
|
|
* 页面布局组件
|
|
*/
|
|
function Page(props) {
|
|
const {
|
|
headerTitle,
|
|
history,
|
|
isShowHeader = true,
|
|
headerPrevious = true,
|
|
isShowFooter = true,
|
|
isShowAllAction = true,
|
|
backButtonText = "关闭",
|
|
contentPadding = "20px",
|
|
customActionButtons,
|
|
extraActionButtons,
|
|
} = props;
|
|
|
|
const [pageWidth, setPageWidth] = useState(window.innerWidth);
|
|
|
|
const getPageWidth = () => {
|
|
const pageDom = document.querySelector("#page");
|
|
if (!pageDom)
|
|
return;
|
|
setPageWidth(pageDom.offsetWidth);
|
|
};
|
|
|
|
useEffect(() => {
|
|
const timer = setTimeout(() => {
|
|
getPageWidth();
|
|
}, 0);
|
|
if (isShowAllAction && isShowFooter) {
|
|
window.addEventListener("resize", getPageWidth);
|
|
}
|
|
|
|
return () => {
|
|
if (isShowAllAction && isShowFooter) {
|
|
window.removeEventListener("resize", getPageWidth);
|
|
}
|
|
clearTimeout(timer);
|
|
};
|
|
}, [isShowAllAction, isShowFooter]);
|
|
|
|
return (
|
|
<div className="page" id="page">
|
|
{(isShowAllAction && isShowHeader) && <HeaderBack title={headerTitle} history={history} previous={headerPrevious} />}
|
|
<div style={{ padding: contentPadding }}>
|
|
{props.children}
|
|
{
|
|
(isShowAllAction && isShowFooter) && (
|
|
<>
|
|
<div style={{ height: "52px" }}></div>
|
|
<div style={{ textAlign: "center", backgroundColor: "rgb(241, 241, 242)", padding: "10px 0", position: "fixed", bottom: "0", width: pageWidth, margin: "0px -20px" }}>
|
|
{customActionButtons || (
|
|
<Space>
|
|
{extraActionButtons}
|
|
<Button onClick={() => history?.goBack?.() || window.history.back()}>
|
|
{backButtonText}
|
|
</Button>
|
|
</Space>
|
|
)}
|
|
</div>
|
|
</>
|
|
)
|
|
}
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
Page.displayName = "Page";
|
|
|
|
export default Page;
|