UNPKG

antd

Version:

An enterprise-class UI design language and React components implementation

131 lines (114 loc) 4.02 kB
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