@cainiaofe/cn-ui-m
Version:
49 lines (48 loc) • 2.1 kB
JavaScript
import * as React from 'react';
import classNames from 'classnames';
import { getComponentName } from '@cainiaofe/cn-ui-common';
import { CnPageFooter } from "../cn-page-footer";
import { withNativeProps } from "../../utils/with-native-props";
import { getWindowData } from "../../utils/get-window-data";
import Div100vh from './height';
import { CnPageHeader } from './view/cn-page-header';
function autoAddPageLayout() {
try {
document.documentElement.classList.add('cn-ui-m-page-layout');
}
catch (e) {
console.error(e);
}
}
/**
* @category 组件
* 页面容器
*/
export var CnPage = function (props) {
autoAddPageLayout();
var children = props.children, noPadding = props.noPadding, _a = props.footer, footerProps = _a === void 0 ? null : _a;
var footer = React.useMemo(function () {
if (!footerProps)
return null;
if (getComponentName(footerProps) === 'CnPageFooter')
return footerProps;
return React.createElement(CnPageFooter, null, footerProps);
}, [footerProps]);
var hasCnTab = React.useMemo(function () {
return React.Children.toArray(children).some(function (child) {
return getComponentName(child) === 'CnTab';
});
}, [children]);
// @ts-ignore 忽略 data 属性校验，内部使用
var hideHeader = props['data-hideHeader'];
return (React.createElement(Div100vh, { className: classNames(CN_UI_HASH_CLASS_NAME, 'cn-ui-m-page') },
props.header,
withNativeProps(props, React.createElement("div", { className: "cn-ui-m-page-body", "data-testid": "cn-page-body" },
hideHeader ? null : getWindowData('__CNUI_shellHeader') || null,
React.createElement(CnPageHeader, { action: props.action }),
React.createElement("div", { className: classNames('cn-ui-m-page-content', {
'cn-ui-m-page-content-with-padding': !noPadding && !hasCnTab,
}) }, children))),
footer,
React.createElement("div", { className: "cn-ui-m-page-footer-placeholder" })));
};