linkmore-design/lib/page-header/index.js

🌈 🚀lm组件库。🚀

"use strict";

var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.default = void 0;
var _ArrowLeftOutlined = _interopRequireDefault(require("@ant-design/icons/ArrowLeftOutlined"));
var _ArrowRightOutlined = _interopRequireDefault(require("@ant-design/icons/ArrowRightOutlined"));
var _classnames = _interopRequireDefault(require("classnames"));
var _rcResizeObserver = _interopRequireDefault(require("rc-resize-observer"));
var _useState = _interopRequireDefault(require("rc-util/lib/hooks/useState"));
var React = _interopRequireWildcard(require("react"));
var _avatar = _interopRequireDefault(require("../avatar"));
var _breadcrumb = _interopRequireDefault(require("../breadcrumb"));
var _configProvider = require("../config-provider");
var _LocaleReceiver = _interopRequireDefault(require("../locale-provider/LocaleReceiver"));
var _space = _interopRequireDefault(require("../space"));
var _transButton = _interopRequireDefault(require("../_util/transButton"));
const renderBack = (prefixCls, backIcon, onBack) => {
  if (!backIcon || !onBack) {
    return null;
  }
  return /*#__PURE__*/React.createElement(_LocaleReceiver.default, {
    componentName: "PageHeader"
  }, contextLocale => /*#__PURE__*/React.createElement("div", {
    className: `${prefixCls}-back`
  }, /*#__PURE__*/React.createElement(_transButton.default, {
    onClick: e => {
      onBack?.(e);
    },
    className: `${prefixCls}-back-button`,
    "aria-label": contextLocale.back
  }, backIcon)));
};
const renderBreadcrumb = breadcrumb => /*#__PURE__*/React.createElement(_breadcrumb.default, breadcrumb);
const getBackIcon = (props, direction = 'ltr') => {
  if (props.backIcon !== undefined) {
    return props.backIcon;
  }
  return direction === 'rtl' ? /*#__PURE__*/React.createElement(_ArrowRightOutlined.default, null) : /*#__PURE__*/React.createElement(_ArrowLeftOutlined.default, null);
};
const renderTitle = (prefixCls, props, direction = 'ltr') => {
  const {
    title,
    avatar,
    subTitle,
    tags,
    extra,
    onBack
  } = props;
  const headingPrefixCls = `${prefixCls}-heading`;
  const hasHeading = title || subTitle || tags || extra;
  // If there is nothing, return a null
  if (!hasHeading) {
    return null;
  }
  const backIcon = getBackIcon(props, direction);
  const backIconDom = renderBack(prefixCls, backIcon, onBack);
  const hasTitle = backIconDom || avatar || hasHeading;
  return /*#__PURE__*/React.createElement("div", {
    className: headingPrefixCls
  }, hasTitle && /*#__PURE__*/React.createElement("div", {
    className: `${headingPrefixCls}-left`
  }, backIconDom, avatar && /*#__PURE__*/React.createElement(_avatar.default, avatar), title && /*#__PURE__*/React.createElement("span", {
    className: `${headingPrefixCls}-title`,
    title: typeof title === 'string' ? title : undefined
  }, title), subTitle && /*#__PURE__*/React.createElement("span", {
    className: `${headingPrefixCls}-sub-title`,
    title: typeof subTitle === 'string' ? subTitle : undefined
  }, subTitle), tags && /*#__PURE__*/React.createElement("span", {
    className: `${headingPrefixCls}-tags`
  }, tags)), extra && /*#__PURE__*/React.createElement("span", {
    className: `${headingPrefixCls}-extra`
  }, /*#__PURE__*/React.createElement(_space.default, null, extra)));
};
const renderFooter = (prefixCls, footer) => {
  if (footer) {
    return /*#__PURE__*/React.createElement("div", {
      className: `${prefixCls}-footer`
    }, footer);
  }
  return null;
};
const renderChildren = (prefixCls, children) => /*#__PURE__*/React.createElement("div", {
  className: `${prefixCls}-content`
}, children);
const PageHeader = props => {
  const [compact, updateCompact] = (0, _useState.default)(false);
  const onResize = ({
    width
  }) => {
    updateCompact(width < 768, true);
  };
  return /*#__PURE__*/React.createElement(_configProvider.ConfigConsumer, null, ({
    getPrefixCls,
    pageHeader,
    direction
  }) => {
    const {
      prefixCls: customizePrefixCls,
      style,
      footer,
      children,
      breadcrumb,
      breadcrumbRender,
      className: customizeClassName
    } = props;
    let 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;
    }
    const prefixCls = getPrefixCls('page-header', customizePrefixCls);
    const getDefaultBreadcrumbDom = () => {
      if (breadcrumb?.routes) {
        return renderBreadcrumb(breadcrumb);
      }
      return null;
    };
    const defaultBreadcrumbDom = getDefaultBreadcrumbDom();
    const isBreadcrumbComponent = breadcrumb && 'props' in breadcrumb;
    // support breadcrumbRender function
    const breadcrumbRenderDomFromProps = breadcrumbRender?.(props, defaultBreadcrumbDom) ?? defaultBreadcrumbDom;
    const breadcrumbDom = isBreadcrumbComponent ? breadcrumb : breadcrumbRenderDomFromProps;
    const className = (0, _classnames.default)(prefixCls, customizeClassName, {
      'has-breadcrumb': !!breadcrumbDom,
      'has-footer': !!footer,
      [`${prefixCls}-ghost`]: ghost,
      [`${prefixCls}-rtl`]: direction === 'rtl',
      [`${prefixCls}-compact`]: compact
    });
    return /*#__PURE__*/React.createElement(_rcResizeObserver.default, {
      onResize: onResize
    }, /*#__PURE__*/React.createElement("div", {
      className: className,
      style: style
    }, breadcrumbDom, renderTitle(prefixCls, props, direction), children && renderChildren(prefixCls, children), renderFooter(prefixCls, footer)));
  });
};
var _default = PageHeader;
exports.default = _default;