302 lines
14 KiB
JavaScript
302 lines
14 KiB
JavaScript
import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
|
|
import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
|
|
import _objectSpread from "@babel/runtime/helpers/esm/objectSpread2";
|
|
import _typeof from "@babel/runtime/helpers/esm/typeof";
|
|
var _excluded = ["title", "content", "pageHeaderRender", "header", "prefixedClassName", "extraContent", "childrenContentStyle", "style", "prefixCls", "hashId", "value", "breadcrumbRender"],
|
|
_excluded2 = ["children", "loading", "className", "style", "footer", "affixProps", "token", "fixedHeader", "breadcrumbRender", "footerToolBarProps", "childrenContentStyle"];
|
|
import { ProConfigProvider, ProProvider } from '@ant-design/pro-provider';
|
|
import { Affix, Breadcrumb, ConfigProvider, Tabs, version } from 'antd';
|
|
import classNames from 'classnames';
|
|
import React, { useContext, useEffect, useMemo } from 'react';
|
|
import { RouteContext } from "../../context/RouteContext";
|
|
import { FooterToolbar } from "../FooterToolbar";
|
|
import { GridContent } from "../GridContent";
|
|
import { PageHeader } from "../PageHeader";
|
|
import { PageLoading } from "../PageLoading";
|
|
import { WaterMark } from "../WaterMark";
|
|
import { useStyle } from "./style";
|
|
import { useStylish } from "./style/stylish";
|
|
import { compareVersions } from '@ant-design/pro-utils';
|
|
import "antd/es/breadcrumb/style";
|
|
import { jsx as _jsx } from "react/jsx-runtime";
|
|
import { jsxs as _jsxs } from "react/jsx-runtime";
|
|
import { Fragment as _Fragment } from "react/jsx-runtime";
|
|
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,
|
|
hashId = _ref.hashId,
|
|
tabBarExtraContent = _ref.tabBarExtraContent,
|
|
tabProps = _ref.tabProps,
|
|
prefixedClassName = _ref.prefixedClassName;
|
|
if (Array.isArray(tabList) || tabBarExtraContent) {
|
|
return /*#__PURE__*/_jsx(Tabs, _objectSpread(_objectSpread({
|
|
className: "".concat(prefixedClassName, "-tabs ").concat(hashId).trim(),
|
|
activeKey: tabActiveKey,
|
|
onChange: function onChange(key) {
|
|
if (onTabChange) {
|
|
onTabChange(key);
|
|
}
|
|
},
|
|
tabBarExtraContent: tabBarExtraContent,
|
|
items: tabList === null || tabList === void 0 ? void 0 : tabList.map(function (item, index) {
|
|
var _item$key;
|
|
return _objectSpread(_objectSpread({
|
|
label: item.tab
|
|
}, item), {}, {
|
|
key: ((_item$key = item.key) === null || _item$key === void 0 ? void 0 : _item$key.toString()) || (index === null || index === void 0 ? void 0 : index.toString())
|
|
});
|
|
})
|
|
}, tabProps), {}, {
|
|
children: compareVersions(version, '4.23.0') < 0 ? tabList === null || tabList === void 0 ? void 0 : tabList.map(function (item, index) {
|
|
return /*#__PURE__*/_jsx(Tabs.TabPane, _objectSpread({
|
|
tab: item.tab
|
|
}, item), item.key || index);
|
|
}) : null
|
|
}));
|
|
}
|
|
return null;
|
|
};
|
|
var renderPageHeader = function renderPageHeader(content, extraContent, prefixedClassName, hashId) {
|
|
if (!content && !extraContent) {
|
|
return null;
|
|
}
|
|
return /*#__PURE__*/_jsx("div", {
|
|
className: "".concat(prefixedClassName, "-detail ").concat(hashId).trim(),
|
|
children: /*#__PURE__*/_jsx("div", {
|
|
className: "".concat(prefixedClassName, "-main ").concat(hashId).trim(),
|
|
children: /*#__PURE__*/_jsxs("div", {
|
|
className: "".concat(prefixedClassName, "-row ").concat(hashId).trim(),
|
|
children: [content && /*#__PURE__*/_jsx("div", {
|
|
className: "".concat(prefixedClassName, "-content ").concat(hashId).trim(),
|
|
children: content
|
|
}), extraContent && /*#__PURE__*/_jsx("div", {
|
|
className: "".concat(prefixedClassName, "-extraContent ").concat(hashId).trim(),
|
|
children: extraContent
|
|
})]
|
|
})
|
|
})
|
|
});
|
|
};
|
|
|
|
/**
|
|
* 配置与面包屑相同，只是增加了自动根据路由计算面包屑的功能。此功能必须要在 ProLayout 中使用。
|
|
*
|
|
* @param props
|
|
* @returns
|
|
*/
|
|
var ProBreadcrumb = function ProBreadcrumb(props) {
|
|
var value = useContext(RouteContext);
|
|
return /*#__PURE__*/_jsx("div", {
|
|
style: {
|
|
height: '100%',
|
|
display: 'flex',
|
|
alignItems: 'center'
|
|
},
|
|
children: /*#__PURE__*/_jsx(Breadcrumb, _objectSpread(_objectSpread(_objectSpread({}, value === null || value === void 0 ? void 0 : value.breadcrumb), value === null || value === void 0 ? void 0 : value.breadcrumbProps), props))
|
|
});
|
|
};
|
|
var memoRenderPageHeader = function memoRenderPageHeader(props) {
|
|
var _breadcrumb$items;
|
|
var title = props.title,
|
|
content = props.content,
|
|
pageHeaderRender = props.pageHeaderRender,
|
|
header = props.header,
|
|
prefixedClassName = props.prefixedClassName,
|
|
extraContent = props.extraContent,
|
|
childrenContentStyle = props.childrenContentStyle,
|
|
style = props.style,
|
|
prefixCls = props.prefixCls,
|
|
hashId = props.hashId,
|
|
value = props.value,
|
|
breadcrumbRender = props.breadcrumbRender,
|
|
restProps = _objectWithoutProperties(props, _excluded);
|
|
var getBreadcrumbRender = function getBreadcrumbRender() {
|
|
if (!breadcrumbRender) {
|
|
return undefined;
|
|
}
|
|
return breadcrumbRender;
|
|
};
|
|
if (pageHeaderRender === false) {
|
|
return null;
|
|
}
|
|
if (pageHeaderRender) {
|
|
return /*#__PURE__*/_jsxs(_Fragment, {
|
|
children: [" ", 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), {}, {
|
|
hashId: hashId,
|
|
breadcrumbRender: breadcrumbRender,
|
|
prefixedClassName: prefixedClassName
|
|
}))
|
|
}, header);
|
|
var _ref2 = pageHeaderProps,
|
|
breadcrumb = _ref2.breadcrumb;
|
|
var noHasBreadCrumb = (!breadcrumb || !(breadcrumb !== null && breadcrumb !== void 0 && breadcrumb.itemRender) && !(breadcrumb !== null && breadcrumb !== void 0 && (_breadcrumb$items = breadcrumb.items) !== null && _breadcrumb$items !== void 0 && _breadcrumb$items.length)) && !breadcrumbRender;
|
|
if (['title', 'subTitle', 'extra', 'tags', 'footer', 'avatar', 'backIcon'].every(function (item) {
|
|
return !pageHeaderProps[item];
|
|
}) && noHasBreadCrumb && !content && !extraContent) {
|
|
return null;
|
|
}
|
|
return /*#__PURE__*/_jsx(PageHeader, _objectSpread(_objectSpread({}, pageHeaderProps), {}, {
|
|
className: "".concat(prefixedClassName, "-warp-page-header ").concat(hashId).trim(),
|
|
breadcrumb: breadcrumbRender === false ? undefined : _objectSpread(_objectSpread({}, pageHeaderProps.breadcrumb), value.breadcrumbProps),
|
|
breadcrumbRender: getBreadcrumbRender(),
|
|
prefixCls: prefixCls,
|
|
children: (header === null || header === void 0 ? void 0 : header.children) || renderPageHeader(content, extraContent, prefixedClassName, hashId)
|
|
}));
|
|
};
|
|
var PageContainerBase = function PageContainerBase(props) {
|
|
var _restProps$header2, _token$layout;
|
|
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,
|
|
propsToken = props.token,
|
|
fixedHeader = props.fixedHeader,
|
|
breadcrumbRender = props.breadcrumbRender,
|
|
footerToolBarProps = props.footerToolBarProps,
|
|
childrenContentStyle = props.childrenContentStyle,
|
|
restProps = _objectWithoutProperties(props, _excluded2);
|
|
var value = useContext(RouteContext);
|
|
/** 告诉 props 是否存在 footerBar */
|
|
useEffect(function () {
|
|
var _value$setHasPageCont;
|
|
if (!value || !(value !== null && value !== void 0 && value.setHasPageContainer)) {
|
|
return function () {};
|
|
}
|
|
value === null || value === void 0 || (_value$setHasPageCont = value.setHasPageContainer) === null || _value$setHasPageCont === void 0 || _value$setHasPageCont.call(value, function (num) {
|
|
return num + 1;
|
|
});
|
|
return function () {
|
|
var _value$setHasPageCont2;
|
|
value === null || value === void 0 || (_value$setHasPageCont2 = value.setHasPageContainer) === null || _value$setHasPageCont2 === void 0 || _value$setHasPageCont2.call(value, function (num) {
|
|
return num - 1;
|
|
});
|
|
};
|
|
// eslint-disable-next-line react-hooks/exhaustive-deps
|
|
}, []);
|
|
var _useContext = useContext(ProProvider),
|
|
token = _useContext.token;
|
|
var _useContext2 = useContext(ConfigProvider.ConfigContext),
|
|
getPrefixCls = _useContext2.getPrefixCls;
|
|
var prefixCls = props.prefixCls || getPrefixCls('pro');
|
|
var basePageContainer = "".concat(prefixCls, "-page-container");
|
|
var _useStyle = useStyle(basePageContainer, propsToken),
|
|
wrapSSR = _useStyle.wrapSSR,
|
|
hashId = _useStyle.hashId;
|
|
var stylish = useStylish("".concat(basePageContainer, ".").concat(basePageContainer, "-stylish"), {
|
|
stylish: props.stylish
|
|
});
|
|
var memoBreadcrumbRender = useMemo(function () {
|
|
var _restProps$header;
|
|
if (breadcrumbRender == false) return false;
|
|
return breadcrumbRender || (restProps === null || restProps === void 0 || (_restProps$header = restProps.header) === null || _restProps$header === void 0 ? void 0 : _restProps$header.breadcrumbRender);
|
|
}, [breadcrumbRender, restProps === null || restProps === void 0 || (_restProps$header2 = restProps.header) === null || _restProps$header2 === void 0 ? void 0 : _restProps$header2.breadcrumbRender]);
|
|
var pageHeaderDom = memoRenderPageHeader(_objectSpread(_objectSpread({}, restProps), {}, {
|
|
breadcrumbRender: memoBreadcrumbRender,
|
|
ghost: true,
|
|
hashId: hashId,
|
|
prefixCls: undefined,
|
|
prefixedClassName: basePageContainer,
|
|
value: value
|
|
}));
|
|
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);
|
|
// 如果传的是loading配置，但spinning传的是false，也不需要显示loading
|
|
return spinProps.spinning ? /*#__PURE__*/_jsx(PageLoading, _objectSpread({}, spinProps)) : null;
|
|
}, [loading]);
|
|
var content = useMemo(function () {
|
|
return children ? /*#__PURE__*/_jsx(_Fragment, {
|
|
children: /*#__PURE__*/_jsx("div", {
|
|
className: classNames(hashId, "".concat(basePageContainer, "-children-container"), _defineProperty({}, "".concat(basePageContainer, "-children-container-no-header"), !pageHeaderDom)),
|
|
style: childrenContentStyle,
|
|
children: children
|
|
})
|
|
}) : null;
|
|
}, [children, basePageContainer, childrenContentStyle, hashId]);
|
|
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__*/_jsx(WaterMark, _objectSpread(_objectSpread({}, waterMarkProps), {}, {
|
|
children: dom
|
|
}));
|
|
}
|
|
return dom;
|
|
}, [props.waterMarkProps, value.waterMarkProps, loadingDom, content]);
|
|
var containerClassName = classNames(basePageContainer, hashId, className, _defineProperty(_defineProperty(_defineProperty({}, "".concat(basePageContainer, "-with-footer"), footer), "".concat(basePageContainer, "-with-affix"), fixedHeader && pageHeaderDom), "".concat(basePageContainer, "-stylish"), !!restProps.stylish));
|
|
return wrapSSR(stylish.wrapSSR( /*#__PURE__*/_jsxs(_Fragment, {
|
|
children: [/*#__PURE__*/_jsxs("div", {
|
|
style: style,
|
|
className: containerClassName,
|
|
children: [fixedHeader && pageHeaderDom ?
|
|
/*#__PURE__*/
|
|
// 在 hasHeader 且 fixedHeader 的情况下，才需要设置高度
|
|
_jsx(Affix, _objectSpread(_objectSpread({
|
|
offsetTop: value.hasHeader && value.fixedHeader ? (_token$layout = token.layout) === null || _token$layout === void 0 || (_token$layout = _token$layout.header) === null || _token$layout === void 0 ? void 0 : _token$layout.heightLayoutHeader : 1
|
|
}, affixProps), {}, {
|
|
className: "".concat(basePageContainer, "-affix ").concat(hashId).trim(),
|
|
children: /*#__PURE__*/_jsx("div", {
|
|
className: "".concat(basePageContainer, "-warp ").concat(hashId).trim(),
|
|
children: pageHeaderDom
|
|
})
|
|
})) : pageHeaderDom, renderContentDom && /*#__PURE__*/_jsx(GridContent, {
|
|
children: renderContentDom
|
|
})]
|
|
}), footer && /*#__PURE__*/_jsx(FooterToolbar, _objectSpread(_objectSpread({
|
|
stylish: restProps.footerStylish,
|
|
prefixCls: prefixCls
|
|
}, footerToolBarProps), {}, {
|
|
children: footer
|
|
}))]
|
|
})));
|
|
};
|
|
var PageContainer = function PageContainer(props) {
|
|
return /*#__PURE__*/_jsx(ProConfigProvider, {
|
|
needDeps: true,
|
|
children: /*#__PURE__*/_jsx(PageContainerBase, _objectSpread({}, props))
|
|
});
|
|
};
|
|
var ProPageHeader = function ProPageHeader(props) {
|
|
var value = useContext(RouteContext);
|
|
return memoRenderPageHeader(_objectSpread(_objectSpread({}, props), {}, {
|
|
hashId: '',
|
|
value: value
|
|
}));
|
|
};
|
|
export { PageContainer, ProBreadcrumb, ProPageHeader }; |