1 | import _defineProperty from "@babel/runtime/helpers/defineProperty";
|
2 | import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
|
3 | import * as React from 'react';
|
4 | import classNames from 'classnames';
|
5 | import ArrowLeftOutlined from '@ant-design/icons/ArrowLeftOutlined';
|
6 | import ArrowRightOutlined from '@ant-design/icons/ArrowRightOutlined';
|
7 | import ResizeObserver from 'rc-resize-observer';
|
8 | import { ConfigConsumer } from '../config-provider';
|
9 | import Breadcrumb from '../breadcrumb';
|
10 | import Avatar from '../avatar';
|
11 | import TransButton from '../_util/transButton';
|
12 | import LocaleReceiver from '../locale-provider/LocaleReceiver';
|
13 |
|
14 | var renderBack = function renderBack(prefixCls, backIcon, onBack) {
|
15 | if (!backIcon || !onBack) {
|
16 | return null;
|
17 | }
|
18 |
|
19 | return React.createElement(LocaleReceiver, {
|
20 | componentName: "PageHeader"
|
21 | }, function (_ref) {
|
22 | var back = _ref.back;
|
23 | return React.createElement("div", {
|
24 | className: "".concat(prefixCls, "-back")
|
25 | }, React.createElement(TransButton, {
|
26 | onClick: function onClick(e) {
|
27 | if (onBack) {
|
28 | onBack(e);
|
29 | }
|
30 | },
|
31 | className: "".concat(prefixCls, "-back-button"),
|
32 | "aria-label": back
|
33 | }, backIcon));
|
34 | });
|
35 | };
|
36 |
|
37 | var renderBreadcrumb = function renderBreadcrumb(breadcrumb) {
|
38 | return React.createElement(Breadcrumb, breadcrumb);
|
39 | };
|
40 |
|
41 | var getBackIcon = function getBackIcon(props) {
|
42 | var direction = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 'ltr';
|
43 |
|
44 | if (props.backIcon !== undefined) {
|
45 | return props.backIcon;
|
46 | }
|
47 |
|
48 | return direction === 'rtl' ? React.createElement(ArrowRightOutlined, null) : React.createElement(ArrowLeftOutlined, null);
|
49 | };
|
50 |
|
51 | var renderTitle = function renderTitle(prefixCls, props) {
|
52 | var direction = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : 'ltr';
|
53 | var title = props.title,
|
54 | avatar = props.avatar,
|
55 | subTitle = props.subTitle,
|
56 | tags = props.tags,
|
57 | extra = props.extra,
|
58 | onBack = props.onBack;
|
59 | var headingPrefixCls = "".concat(prefixCls, "-heading");
|
60 | var hasHeading = title || subTitle || tags || extra;
|
61 |
|
62 | if (!hasHeading) {
|
63 | return null;
|
64 | }
|
65 |
|
66 | var backIcon = getBackIcon(props, direction);
|
67 | var backIconDom = renderBack(prefixCls, backIcon, onBack);
|
68 | var hasTitle = backIconDom || avatar || hasHeading;
|
69 | return React.createElement("div", {
|
70 | className: headingPrefixCls
|
71 | }, hasTitle && React.createElement("div", {
|
72 | className: "".concat(headingPrefixCls, "-left")
|
73 | }, backIconDom, avatar && React.createElement(Avatar, avatar), title && React.createElement("span", {
|
74 | className: "".concat(headingPrefixCls, "-title"),
|
75 | title: typeof title === 'string' ? title : undefined
|
76 | }, title), subTitle && React.createElement("span", {
|
77 | className: "".concat(headingPrefixCls, "-sub-title"),
|
78 | title: typeof subTitle === 'string' ? subTitle : undefined
|
79 | }, subTitle), tags && React.createElement("span", {
|
80 | className: "".concat(headingPrefixCls, "-tags")
|
81 | }, tags)), extra && React.createElement("span", {
|
82 | className: "".concat(headingPrefixCls, "-extra")
|
83 | }, extra));
|
84 | };
|
85 |
|
86 | var renderFooter = function renderFooter(prefixCls, footer) {
|
87 | if (footer) {
|
88 | return React.createElement("div", {
|
89 | className: "".concat(prefixCls, "-footer")
|
90 | }, footer);
|
91 | }
|
92 |
|
93 | return null;
|
94 | };
|
95 |
|
96 | var renderChildren = function renderChildren(prefixCls, children) {
|
97 | return React.createElement("div", {
|
98 | className: "".concat(prefixCls, "-content")
|
99 | }, children);
|
100 | };
|
101 |
|
102 | var PageHeader = function PageHeader(props) {
|
103 | var _React$useState = React.useState(false),
|
104 | _React$useState2 = _slicedToArray(_React$useState, 2),
|
105 | compact = _React$useState2[0],
|
106 | updateCompact = _React$useState2[1];
|
107 |
|
108 | var onResize = function onResize(_ref2) {
|
109 | var width = _ref2.width;
|
110 | updateCompact(width < 768);
|
111 | };
|
112 |
|
113 | return React.createElement(ConfigConsumer, null, function (_ref3) {
|
114 | var _classNames;
|
115 |
|
116 | var getPrefixCls = _ref3.getPrefixCls,
|
117 | pageHeader = _ref3.pageHeader,
|
118 | direction = _ref3.direction;
|
119 | var customizePrefixCls = props.prefixCls,
|
120 | style = props.style,
|
121 | footer = props.footer,
|
122 | children = props.children,
|
123 | breadcrumb = props.breadcrumb,
|
124 | customizeClassName = props.className;
|
125 | var ghost = true;
|
126 |
|
127 | if ('ghost' in props) {
|
128 | ghost = props.ghost;
|
129 | } else if (pageHeader && 'ghost' in pageHeader) {
|
130 | ghost = pageHeader.ghost;
|
131 | }
|
132 |
|
133 | var prefixCls = getPrefixCls('page-header', customizePrefixCls);
|
134 | var breadcrumbDom = breadcrumb && breadcrumb.routes ? renderBreadcrumb(breadcrumb) : null;
|
135 | var className = classNames(prefixCls, customizeClassName, (_classNames = {
|
136 | 'has-breadcrumb': breadcrumbDom,
|
137 | 'has-footer': footer
|
138 | }, _defineProperty(_classNames, "".concat(prefixCls, "-ghost"), ghost), _defineProperty(_classNames, "".concat(prefixCls, "-rtl"), direction === 'rtl'), _defineProperty(_classNames, "".concat(prefixCls, "-compact"), compact), _classNames));
|
139 | return React.createElement(ResizeObserver, {
|
140 | onResize: onResize
|
141 | }, React.createElement("div", {
|
142 | className: className,
|
143 | style: style
|
144 | }, breadcrumbDom, renderTitle(prefixCls, props, direction), children && renderChildren(prefixCls, children), renderFooter(prefixCls, footer)));
|
145 | });
|
146 | };
|
147 |
|
148 | export default PageHeader; |
\ | No newline at end of file |