@ant-design/pro-layout
Version:
262 lines (225 loc) • 10.7 kB
JavaScript
import "antd/es/affix/style";
import _Affix from "antd/es/affix";
import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
import "antd/es/config-provider/style";
import _ConfigProvider from "antd/es/config-provider";
import "antd/es/page-header/style";
import _PageHeader from "antd/es/page-header";
import _objectSpread from "@babel/runtime/helpers/esm/objectSpread2";
import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
import "antd/es/breadcrumb/style";
import _Breadcrumb from "antd/es/breadcrumb";
import "antd/es/tabs/style";
import _Tabs from "antd/es/tabs";
import _extends from "@babel/runtime/helpers/esm/extends";
import _typeof from "@babel/runtime/helpers/esm/typeof";
var _excluded = ["title", "content", "pageHeaderRender", "header", "prefixedClassName", "extraContent", "style", "prefixCls", "breadcrumbRender"],
_excluded2 = ["children", "loading", "className", "style", "footer", "affixProps", "ghost", "fixedHeader", "breadcrumbRender"];
import React, { useContext, useMemo } from 'react';
import classNames from 'classnames';
import RouteContext from '../../RouteContext';
import GridContent from '../GridContent';
import FooterToolbar from '../FooterToolbar';
import './index.less';
import PageLoading from '../PageLoading';
import WaterMark from '../WaterMark';
function genLoading(spinProps) {
if (_typeof(spinProps) === 'object') {
return spinProps;
}
return {
spinning: spinProps
};
}
/**
* Render Footer tabList In order to be compatible with the old version of the PageHeader basically
* all the functions are implemented.
*/
var renderFooter = function renderFooter(_ref) {
var tabList = _ref.tabList,
tabActiveKey = _ref.tabActiveKey,
onTabChange = _ref.onTabChange,
tabBarExtraContent = _ref.tabBarExtraContent,
tabProps = _ref.tabProps,
prefixedClassName = _ref.prefixedClassName;
if (Array.isArray(tabList) || tabBarExtraContent) {
return /*#__PURE__*/React.createElement(_Tabs, _extends({
className: "".concat(prefixedClassName, "-tabs"),
activeKey: tabActiveKey,
onChange: function onChange(key) {
if (onTabChange) {
onTabChange(key);
}
},
tabBarExtraContent: tabBarExtraContent
}, tabProps), tabList === null || tabList === void 0 ? void 0 : tabList.map(function (item, index) {
return (
/*#__PURE__*/
// eslint-disable-next-line react/no-array-index-key
React.createElement(_Tabs.TabPane, _extends({}, item, {
tab: item.tab,
key: item.key || index
}))
);
}));
}
return null;
};
var renderPageHeader = function renderPageHeader(content, extraContent, prefixedClassName) {
if (!content && !extraContent) {
return null;
}
return /*#__PURE__*/React.createElement("div", {
className: "".concat(prefixedClassName, "-detail")
}, /*#__PURE__*/React.createElement("div", {
className: "".concat(prefixedClassName, "-main")
}, /*#__PURE__*/React.createElement("div", {
className: "".concat(prefixedClassName, "-row")
}, content && /*#__PURE__*/React.createElement("div", {
className: "".concat(prefixedClassName, "-content")
}, content), extraContent && /*#__PURE__*/React.createElement("div", {
className: "".concat(prefixedClassName, "-extraContent")
}, extraContent))));
};
/**
* 配置与面包屑相同，只是增加了自动根据路由计算面包屑的功能。此功能必须要在 ProLayout 中使用。
*
* @param props
* @returns
*/
var ProBreadcrumb = function ProBreadcrumb(props) {
var value = useContext(RouteContext);
return /*#__PURE__*/React.createElement("div", {
style: {
height: '100%',
display: 'flex',
alignItems: 'center'
}
}, /*#__PURE__*/React.createElement(_Breadcrumb, _extends({}, value === null || value === void 0 ? void 0 : value.breadcrumb, value === null || value === void 0 ? void 0 : value.breadcrumbProps, props)));
};
var ProPageHeader = function ProPageHeader(props) {
var _breadcrumb$routes;
var value = useContext(RouteContext);
var title = props.title,
content = props.content,
pageHeaderRender = props.pageHeaderRender,
header = props.header,
prefixedClassName = props.prefixedClassName,
extraContent = props.extraContent,
style = props.style,
prefixCls = props.prefixCls,
breadcrumbRender = props.breadcrumbRender,
restProps = _objectWithoutProperties(props, _excluded);
var getBreadcrumbRender = useMemo(function () {
if (!breadcrumbRender) {
return undefined;
}
return breadcrumbRender;
}, [breadcrumbRender]);
if (pageHeaderRender === false) {
return null;
}
if (pageHeaderRender) {
return /*#__PURE__*/React.createElement(React.Fragment, null, " ", pageHeaderRender(_objectSpread(_objectSpread({}, props), value)));
}
var pageHeaderTitle = title;
if (!title && title !== false) {
pageHeaderTitle = value.title;
}
var pageHeaderProps = _objectSpread(_objectSpread(_objectSpread({}, value), {}, {
title: pageHeaderTitle
}, restProps), {}, {
footer: renderFooter(_objectSpread(_objectSpread({}, restProps), {}, {
breadcrumbRender: breadcrumbRender,
prefixedClassName: prefixedClassName
}))
}, header);
var breadcrumb = pageHeaderProps.breadcrumb;
var noHasBreadCrumb = (!breadcrumb || !(breadcrumb === null || breadcrumb === void 0 ? void 0 : breadcrumb.itemRender) && !(breadcrumb === null || breadcrumb === void 0 ? void 0 : (_breadcrumb$routes = breadcrumb.routes) === null || _breadcrumb$routes === void 0 ? void 0 : _breadcrumb$routes.length)) && !breadcrumbRender;
if (['title', 'subTitle', 'extra', 'tags', 'footer', 'avatar', 'backIcon'].every(function (item) {
return !pageHeaderProps[item];
}) && noHasBreadCrumb && !content && !extraContent) {
return null;
}
return /*#__PURE__*/React.createElement("div", {
className: "".concat(prefixedClassName, "-warp")
}, /*#__PURE__*/React.createElement(_PageHeader, _extends({}, pageHeaderProps, {
breadcrumb: breadcrumbRender === false ? undefined : _objectSpread(_objectSpread({}, pageHeaderProps.breadcrumb), value.breadcrumbProps),
breadcrumbRender: getBreadcrumbRender,
prefixCls: prefixCls
}), (header === null || header === void 0 ? void 0 : header.children) || renderPageHeader(content, extraContent, prefixedClassName)));
};
var PageContainer = function PageContainer(props) {
var _classNames, _restProps$header2;
var children = props.children,
_props$loading = props.loading,
loading = _props$loading === void 0 ? false : _props$loading,
className = props.className,
style = props.style,
footer = props.footer,
affixProps = props.affixProps,
ghost = props.ghost,
fixedHeader = props.fixedHeader,
breadcrumbRender = props.breadcrumbRender,
restProps = _objectWithoutProperties(props, _excluded2);
var value = useContext(RouteContext);
var _useContext = useContext(_ConfigProvider.ConfigContext),
getPrefixCls = _useContext.getPrefixCls;
var prefixCls = props.prefixCls || getPrefixCls('pro');
var prefixedClassName = "".concat(prefixCls, "-page-container");
var containerClassName = classNames(prefixedClassName, className, (_classNames = {}, _defineProperty(_classNames, "".concat(prefixCls, "-page-container-ghost"), ghost), _defineProperty(_classNames, "".concat(prefixCls, "-page-container-with-footer"), footer), _classNames));
var content = useMemo(function () {
return children ? /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("div", {
className: "".concat(prefixedClassName, "-children-content")
}, children), value.hasFooterToolbar && /*#__PURE__*/React.createElement("div", {
style: {
height: 48,
marginTop: 24
}
})) : null;
}, [children, prefixedClassName, value.hasFooterToolbar]);
var memoBreadcrumbRender = useMemo(function () {
var _restProps$header;
if (breadcrumbRender == false) return false;
return breadcrumbRender || (restProps === null || restProps === void 0 ? void 0 : (_restProps$header = restProps.header) === null || _restProps$header === void 0 ? void 0 : _restProps$header.breadcrumbRender);
}, [breadcrumbRender, restProps === null || restProps === void 0 ? void 0 : (_restProps$header2 = restProps.header) === null || _restProps$header2 === void 0 ? void 0 : _restProps$header2.breadcrumbRender]);
var pageHeaderDom = /*#__PURE__*/React.createElement(ProPageHeader, _extends({}, restProps, {
breadcrumbRender: memoBreadcrumbRender,
ghost: ghost,
prefixCls: undefined,
prefixedClassName: prefixedClassName
}));
var loadingDom = useMemo(function () {
// 当loading时一个合法的ReactNode时，说明用户使用了自定义loading,直接返回改自定义loading
if ( /*#__PURE__*/React.isValidElement(loading)) {
return loading;
} // 当传递过来的是布尔值，并且为false时，说明不需要显示loading,返回null
if (typeof loading === 'boolean' && !loading) {
return null;
} // 如非上述两种情况，那么要么用户传了一个true,要么用户传了loading配置，使用genLoading生成loading配置后返回PageLoading
var spinProps = genLoading(loading);
return /*#__PURE__*/React.createElement(PageLoading, spinProps);
}, [loading]);
var renderContentDom = useMemo(function () {
// 只要loadingDom非空我们就渲染loadingDom,否则渲染内容
var dom = loadingDom || content;
if (props.waterMarkProps || value.waterMarkProps) {
var waterMarkProps = _objectSpread(_objectSpread({}, value.waterMarkProps), props.waterMarkProps);
return /*#__PURE__*/React.createElement(WaterMark, waterMarkProps, dom);
}
return dom;
}, [props.waterMarkProps, value.waterMarkProps, loadingDom, content]);
return /*#__PURE__*/React.createElement("div", {
style: style,
className: containerClassName
}, fixedHeader && pageHeaderDom ?
/*#__PURE__*/
// 在 hasHeader 且 fixedHeader 的情况下，才需要设置高度
React.createElement(_Affix, _extends({
offsetTop: value.hasHeader && value.fixedHeader ? value.headerHeight : 0
}, affixProps), pageHeaderDom) : pageHeaderDom, renderContentDom && /*#__PURE__*/React.createElement(GridContent, null, renderContentDom), footer && /*#__PURE__*/React.createElement(FooterToolbar, {
prefixCls: prefixCls
}, footer));
};
export { ProPageHeader, ProBreadcrumb };
export default PageContainer;