1 | "use strict";
|
2 |
|
3 | var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
|
4 |
|
5 | var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard");
|
6 |
|
7 | Object.defineProperty(exports, "__esModule", {
|
8 | value: true
|
9 | });
|
10 | exports.default = exports.ProPageHeader = exports.ProBreadcrumb = void 0;
|
11 |
|
12 | require("antd/es/affix/style");
|
13 |
|
14 | var _affix = _interopRequireDefault(require("antd/es/affix"));
|
15 |
|
16 | var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
|
17 |
|
18 | require("antd/es/config-provider/style");
|
19 |
|
20 | var _configProvider = _interopRequireDefault(require("antd/es/config-provider"));
|
21 |
|
22 | require("antd/es/page-header/style");
|
23 |
|
24 | var _pageHeader = _interopRequireDefault(require("antd/es/page-header"));
|
25 |
|
26 | var _objectSpread2 = _interopRequireDefault(require("@babel/runtime/helpers/objectSpread2"));
|
27 |
|
28 | var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
|
29 |
|
30 | require("antd/es/breadcrumb/style");
|
31 |
|
32 | var _breadcrumb = _interopRequireDefault(require("antd/es/breadcrumb"));
|
33 |
|
34 | require("antd/es/tabs/style");
|
35 |
|
36 | var _tabs = _interopRequireDefault(require("antd/es/tabs"));
|
37 |
|
38 | var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
|
39 |
|
40 | var _typeof2 = _interopRequireDefault(require("@babel/runtime/helpers/typeof"));
|
41 |
|
42 | var _react = _interopRequireWildcard(require("react"));
|
43 |
|
44 | var _classnames = _interopRequireDefault(require("classnames"));
|
45 |
|
46 | var _RouteContext = _interopRequireDefault(require("../../RouteContext"));
|
47 |
|
48 | var _GridContent = _interopRequireDefault(require("../GridContent"));
|
49 |
|
50 | var _FooterToolbar = _interopRequireDefault(require("../FooterToolbar"));
|
51 |
|
52 | require("./index.less");
|
53 |
|
54 | var _PageLoading = _interopRequireDefault(require("../PageLoading"));
|
55 |
|
56 | var _WaterMark = _interopRequireDefault(require("../WaterMark"));
|
57 |
|
58 | var _excluded = ["title", "content", "pageHeaderRender", "header", "prefixedClassName", "extraContent", "style", "prefixCls", "breadcrumbRender"],
|
59 | _excluded2 = ["children", "loading", "className", "style", "footer", "affixProps", "ghost", "fixedHeader", "breadcrumbRender"];
|
60 |
|
61 | function genLoading(spinProps) {
|
62 | if ((0, _typeof2.default)(spinProps) === 'object') {
|
63 | return spinProps;
|
64 | }
|
65 |
|
66 | return {
|
67 | spinning: spinProps
|
68 | };
|
69 | }
|
70 |
|
71 |
|
72 |
|
73 |
|
74 |
|
75 |
|
76 | var renderFooter = function renderFooter(_ref) {
|
77 | var tabList = _ref.tabList,
|
78 | tabActiveKey = _ref.tabActiveKey,
|
79 | onTabChange = _ref.onTabChange,
|
80 | tabBarExtraContent = _ref.tabBarExtraContent,
|
81 | tabProps = _ref.tabProps,
|
82 | prefixedClassName = _ref.prefixedClassName;
|
83 |
|
84 | if (Array.isArray(tabList) || tabBarExtraContent) {
|
85 | return _react.default.createElement(_tabs.default, (0, _extends2.default)({
|
86 | className: "".concat(prefixedClassName, "-tabs"),
|
87 | activeKey: tabActiveKey,
|
88 | onChange: function onChange(key) {
|
89 | if (onTabChange) {
|
90 | onTabChange(key);
|
91 | }
|
92 | },
|
93 | tabBarExtraContent: tabBarExtraContent
|
94 | }, tabProps), tabList === null || tabList === void 0 ? void 0 : tabList.map(function (item, index) {
|
95 | return (
|
96 |
|
97 |
|
98 | _react.default.createElement(_tabs.default.TabPane, (0, _extends2.default)({}, item, {
|
99 | tab: item.tab,
|
100 | key: item.key || index
|
101 | }))
|
102 | );
|
103 | }));
|
104 | }
|
105 |
|
106 | return null;
|
107 | };
|
108 |
|
109 | var renderPageHeader = function renderPageHeader(content, extraContent, prefixedClassName) {
|
110 | if (!content && !extraContent) {
|
111 | return null;
|
112 | }
|
113 |
|
114 | return _react.default.createElement("div", {
|
115 | className: "".concat(prefixedClassName, "-detail")
|
116 | }, _react.default.createElement("div", {
|
117 | className: "".concat(prefixedClassName, "-main")
|
118 | }, _react.default.createElement("div", {
|
119 | className: "".concat(prefixedClassName, "-row")
|
120 | }, content && _react.default.createElement("div", {
|
121 | className: "".concat(prefixedClassName, "-content")
|
122 | }, content), extraContent && _react.default.createElement("div", {
|
123 | className: "".concat(prefixedClassName, "-extraContent")
|
124 | }, extraContent))));
|
125 | };
|
126 |
|
127 |
|
128 |
|
129 |
|
130 |
|
131 |
|
132 |
|
133 |
|
134 | var ProBreadcrumb = function ProBreadcrumb(props) {
|
135 | var value = (0, _react.useContext)(_RouteContext.default);
|
136 | return _react.default.createElement("div", {
|
137 | style: {
|
138 | height: '100%',
|
139 | display: 'flex',
|
140 | alignItems: 'center'
|
141 | }
|
142 | }, _react.default.createElement(_breadcrumb.default, (0, _extends2.default)({}, value === null || value === void 0 ? void 0 : value.breadcrumb, value === null || value === void 0 ? void 0 : value.breadcrumbProps, props)));
|
143 | };
|
144 |
|
145 | exports.ProBreadcrumb = ProBreadcrumb;
|
146 |
|
147 | var ProPageHeader = function ProPageHeader(props) {
|
148 | var _breadcrumb$routes;
|
149 |
|
150 | var value = (0, _react.useContext)(_RouteContext.default);
|
151 | var title = props.title,
|
152 | content = props.content,
|
153 | pageHeaderRender = props.pageHeaderRender,
|
154 | header = props.header,
|
155 | prefixedClassName = props.prefixedClassName,
|
156 | extraContent = props.extraContent,
|
157 | style = props.style,
|
158 | prefixCls = props.prefixCls,
|
159 | breadcrumbRender = props.breadcrumbRender,
|
160 | restProps = (0, _objectWithoutProperties2.default)(props, _excluded);
|
161 | var getBreadcrumbRender = (0, _react.useMemo)(function () {
|
162 | if (!breadcrumbRender) {
|
163 | return undefined;
|
164 | }
|
165 |
|
166 | return breadcrumbRender;
|
167 | }, [breadcrumbRender]);
|
168 |
|
169 | if (pageHeaderRender === false) {
|
170 | return null;
|
171 | }
|
172 |
|
173 | if (pageHeaderRender) {
|
174 | return _react.default.createElement(_react.default.Fragment, null, " ", pageHeaderRender((0, _objectSpread2.default)((0, _objectSpread2.default)({}, props), value)));
|
175 | }
|
176 |
|
177 | var pageHeaderTitle = title;
|
178 |
|
179 | if (!title && title !== false) {
|
180 | pageHeaderTitle = value.title;
|
181 | }
|
182 |
|
183 | var pageHeaderProps = (0, _objectSpread2.default)((0, _objectSpread2.default)((0, _objectSpread2.default)({}, value), {}, {
|
184 | title: pageHeaderTitle
|
185 | }, restProps), {}, {
|
186 | footer: renderFooter((0, _objectSpread2.default)((0, _objectSpread2.default)({}, restProps), {}, {
|
187 | breadcrumbRender: breadcrumbRender,
|
188 | prefixedClassName: prefixedClassName
|
189 | }))
|
190 | }, header);
|
191 | var breadcrumb = pageHeaderProps.breadcrumb;
|
192 | 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;
|
193 |
|
194 | if (['title', 'subTitle', 'extra', 'tags', 'footer', 'avatar', 'backIcon'].every(function (item) {
|
195 | return !pageHeaderProps[item];
|
196 | }) && noHasBreadCrumb && !content && !extraContent) {
|
197 | return null;
|
198 | }
|
199 |
|
200 | return _react.default.createElement("div", {
|
201 | className: "".concat(prefixedClassName, "-warp")
|
202 | }, _react.default.createElement(_pageHeader.default, (0, _extends2.default)({}, pageHeaderProps, {
|
203 | breadcrumb: breadcrumbRender === false ? undefined : (0, _objectSpread2.default)((0, _objectSpread2.default)({}, pageHeaderProps.breadcrumb), value.breadcrumbProps),
|
204 | breadcrumbRender: getBreadcrumbRender,
|
205 | prefixCls: prefixCls
|
206 | }), (header === null || header === void 0 ? void 0 : header.children) || renderPageHeader(content, extraContent, prefixedClassName)));
|
207 | };
|
208 |
|
209 | exports.ProPageHeader = ProPageHeader;
|
210 |
|
211 | var PageContainer = function PageContainer(props) {
|
212 | var _classNames, _restProps$header2;
|
213 |
|
214 | var children = props.children,
|
215 | _props$loading = props.loading,
|
216 | loading = _props$loading === void 0 ? false : _props$loading,
|
217 | className = props.className,
|
218 | style = props.style,
|
219 | footer = props.footer,
|
220 | affixProps = props.affixProps,
|
221 | ghost = props.ghost,
|
222 | fixedHeader = props.fixedHeader,
|
223 | breadcrumbRender = props.breadcrumbRender,
|
224 | restProps = (0, _objectWithoutProperties2.default)(props, _excluded2);
|
225 | var value = (0, _react.useContext)(_RouteContext.default);
|
226 |
|
227 | var _useContext = (0, _react.useContext)(_configProvider.default.ConfigContext),
|
228 | getPrefixCls = _useContext.getPrefixCls;
|
229 |
|
230 | var prefixCls = props.prefixCls || getPrefixCls('pro');
|
231 | var prefixedClassName = "".concat(prefixCls, "-page-container");
|
232 | var containerClassName = (0, _classnames.default)(prefixedClassName, className, (_classNames = {}, (0, _defineProperty2.default)(_classNames, "".concat(prefixCls, "-page-container-ghost"), ghost), (0, _defineProperty2.default)(_classNames, "".concat(prefixCls, "-page-container-with-footer"), footer), _classNames));
|
233 | var content = (0, _react.useMemo)(function () {
|
234 | return children ? _react.default.createElement(_react.default.Fragment, null, _react.default.createElement("div", {
|
235 | className: "".concat(prefixedClassName, "-children-content")
|
236 | }, children), value.hasFooterToolbar && _react.default.createElement("div", {
|
237 | style: {
|
238 | height: 48,
|
239 | marginTop: 24
|
240 | }
|
241 | })) : null;
|
242 | }, [children, prefixedClassName, value.hasFooterToolbar]);
|
243 | var memoBreadcrumbRender = (0, _react.useMemo)(function () {
|
244 | var _restProps$header;
|
245 |
|
246 | if (breadcrumbRender == false) return false;
|
247 | return breadcrumbRender || (restProps === null || restProps === void 0 ? void 0 : (_restProps$header = restProps.header) === null || _restProps$header === void 0 ? void 0 : _restProps$header.breadcrumbRender);
|
248 | }, [breadcrumbRender, restProps === null || restProps === void 0 ? void 0 : (_restProps$header2 = restProps.header) === null || _restProps$header2 === void 0 ? void 0 : _restProps$header2.breadcrumbRender]);
|
249 |
|
250 | var pageHeaderDom = _react.default.createElement(ProPageHeader, (0, _extends2.default)({}, restProps, {
|
251 | breadcrumbRender: memoBreadcrumbRender,
|
252 | ghost: ghost,
|
253 | prefixCls: undefined,
|
254 | prefixedClassName: prefixedClassName
|
255 | }));
|
256 |
|
257 | var loadingDom = (0, _react.useMemo)(function () {
|
258 |
|
259 | if ( _react.default.isValidElement(loading)) {
|
260 | return loading;
|
261 | }
|
262 |
|
263 |
|
264 | if (typeof loading === 'boolean' && !loading) {
|
265 | return null;
|
266 | }
|
267 |
|
268 |
|
269 | var spinProps = genLoading(loading);
|
270 | return _react.default.createElement(_PageLoading.default, spinProps);
|
271 | }, [loading]);
|
272 | var renderContentDom = (0, _react.useMemo)(function () {
|
273 |
|
274 | var dom = loadingDom || content;
|
275 |
|
276 | if (props.waterMarkProps || value.waterMarkProps) {
|
277 | var waterMarkProps = (0, _objectSpread2.default)((0, _objectSpread2.default)({}, value.waterMarkProps), props.waterMarkProps);
|
278 | return _react.default.createElement(_WaterMark.default, waterMarkProps, dom);
|
279 | }
|
280 |
|
281 | return dom;
|
282 | }, [props.waterMarkProps, value.waterMarkProps, loadingDom, content]);
|
283 | return _react.default.createElement("div", {
|
284 | style: style,
|
285 | className: containerClassName
|
286 | }, fixedHeader && pageHeaderDom ?
|
287 |
|
288 |
|
289 | _react.default.createElement(_affix.default, (0, _extends2.default)({
|
290 | offsetTop: value.hasHeader && value.fixedHeader ? value.headerHeight : 0
|
291 | }, affixProps), pageHeaderDom) : pageHeaderDom, renderContentDom && _react.default.createElement(_GridContent.default, null, renderContentDom), footer && _react.default.createElement(_FooterToolbar.default, {
|
292 | prefixCls: prefixCls
|
293 | }, footer));
|
294 | };
|
295 |
|
296 | var _default = PageContainer;
|
297 | exports.default = _default; |
\ | No newline at end of file |