antd
Version:
An enterprise-class UI design language and React components implementation
131 lines (114 loc) • 4.02 kB
JavaScript
import * as React from 'react';
import classnames from 'classnames';
import { ConfigConsumer } from '../config-provider';
import Icon from '../icon';
import Breadcrumb from '../breadcrumb';
import Avatar from '../avatar';
import TransButton from '../_util/transButton';
import LocaleReceiver from '../locale-provider/LocaleReceiver';
import warning from '../_util/warning';
var renderBack = function renderBack(prefixCls, backIcon, onBack) {
if (!backIcon || !onBack) {
return null;
}
return React.createElement(LocaleReceiver, {
componentName: "PageHeader"
}, function (_ref) {
var back = _ref.back;
return React.createElement("div", {
className: "".concat(prefixCls, "-back")
}, 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 React.createElement(Breadcrumb, breadcrumb);
};
var renderHeader = function renderHeader(breadcrumb, _ref2) {
var backIcon = _ref2.backIcon,
onBack = _ref2.onBack;
// by design,Bread crumbs and back icon can only have one
if (backIcon && onBack) {
if (breadcrumb && breadcrumb.routes) {
warning(false, 'page-header', 'breadcrumbs and back icon can only have one');
}
return null;
}
if (breadcrumb && breadcrumb.routes) {
return renderBreadcrumb(breadcrumb);
}
return null;
};
var renderTitle = function renderTitle(prefixCls, props) {
var title = props.title,
avatar = props.avatar,
subTitle = props.subTitle,
tags = props.tags,
extra = props.extra,
backIcon = props.backIcon,
onBack = props.onBack;
var headingPrefixCls = "".concat(prefixCls, "-heading");
if (title || subTitle || tags || extra) {
var backIconDom = renderBack(prefixCls, backIcon, onBack);
return React.createElement("div", {
className: headingPrefixCls
}, backIconDom, avatar && React.createElement(Avatar, avatar), title && React.createElement("span", {
className: "".concat(headingPrefixCls, "-title")
}, title), subTitle && React.createElement("span", {
className: "".concat(headingPrefixCls, "-sub-title")
}, subTitle), tags && React.createElement("span", {
className: "".concat(headingPrefixCls, "-tags")
}, tags), extra && React.createElement("span", {
className: "".concat(headingPrefixCls, "-extra")
}, extra));
}
return null;
};
var renderFooter = function renderFooter(prefixCls, footer) {
if (footer) {
return React.createElement("div", {
className: "".concat(prefixCls, "-footer")
}, footer);
}
return null;
};
var renderChildren = function renderChildren(prefixCls, children) {
return React.createElement("div", {
className: "".concat(prefixCls, "-content")
}, children);
};
var PageHeader = function PageHeader(props) {
return React.createElement(ConfigConsumer, null, function (_ref3) {
var getPrefixCls = _ref3.getPrefixCls;
var customizePrefixCls = props.prefixCls,
style = props.style,
footer = props.footer,
children = props.children,
breadcrumb = props.breadcrumb,
customizeClassName = props.className;
var prefixCls = getPrefixCls('page-header', customizePrefixCls);
var breadcrumbDom = renderHeader(breadcrumb, props);
var className = classnames(prefixCls, customizeClassName, {
'has-breadcrumb': breadcrumbDom,
'has-footer': footer
});
return React.createElement("div", {
className: className,
style: style
}, breadcrumbDom, renderTitle(prefixCls, props), children && renderChildren(prefixCls, children), renderFooter(prefixCls, footer));
});
};
PageHeader.defaultProps = {
backIcon: React.createElement(Icon, {
type: "arrow-left"
})
};
export default PageHeader;
//# sourceMappingURL=index.js.map