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