qt-public-ui/es/PageHeader/pageHeader.js

新设计规范下业务组件库

import _extends from "@babel/runtime/helpers/esm/extends";
import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
var _excluded = ["tipKey", "tipContent", "menuConfig", "children", "title", "tabBarExtraContent", "defaultShowTips", "className", "goBack", "onTipVisibleChange"];
/* eslint-disable react/no-danger */
import React, { useState } from 'react';
import { useHistory, matchPath } from 'react-router-dom';
import classnames from 'classnames';
import { IconSlim as Icon, Tab } from '..';
import { useLocalStorage, useUpdateEffect } from 'qt-public-hooks';
import { PageHeader as AntPageHeader, Divider } from 'antd';
import { assert } from '../utils';
import './style';
var SHOWN_STORAGE_NAME = 'umui-pageTips-shown';
var getActive = function getActive(path, routers) {
  var activeTab = '';
  routers.some(function (r) {
    var activeMenu = matchPath(path, {
      path: r.to,
      exact: r.exact
    });
    activeMenu && (activeTab = activeMenu.path);
    return !!activeTab;
  });
  return activeTab;
};
export var PageHeader = function PageHeader(props) {
  var _useHistory = useHistory(),
    goBack = _useHistory.goBack,
    push = _useHistory.push,
    location = _useHistory.location;
  var _ref = props,
    tipKey = _ref.tipKey,
    _ref$tipContent = _ref.tipContent,
    tipContent = _ref$tipContent === void 0 ? '' : _ref$tipContent,
    _ref$menuConfig = _ref.menuConfig,
    menuConfig = _ref$menuConfig === void 0 ? [] : _ref$menuConfig,
    children = _ref.children,
    title = _ref.title,
    tabBarExtraContent = _ref.tabBarExtraContent,
    defaultShowTips = _ref.defaultShowTips,
    className = _ref.className,
    goBackProp = _ref.goBack,
    onTipVisibleChange = _ref.onTipVisibleChange,
    antProps = _objectWithoutPropertiesLoose(_ref, _excluded);
  var _useLocalStorage = useLocalStorage(SHOWN_STORAGE_NAME, {}),
    shownStorage = _useLocalStorage[0],
    setShownStorage = _useLocalStorage[1];
  var _useState = useState(function () {
      var _defaultShowTips = !!defaultShowTips;
      if (typeof defaultShowTips === 'number') {
        assert(Number(defaultShowTips) < 0, new RangeError('Number of defaultShowTips must be a non-negative'));
        assert(!tipKey, new RangeError('Numerical defaultShowTips must be used with \'tipKey\' prop'));
        if (shownStorage[tipKey]) {
          _defaultShowTips = shownStorage[tipKey] < defaultShowTips;
        }
      }
      return _defaultShowTips;
    }),
    showTips = _useState[0],
    setShowTips = _useState[1];
  var onTipClose = function onTipClose() {
    setShowTips(false);
    if (typeof defaultShowTips === 'number') {
      var _shownStorage = _extends({}, shownStorage);
      _shownStorage[tipKey] = shownStorage[tipKey] ? shownStorage[tipKey] + 1 : 1;
      setShownStorage(_shownStorage);
    }
  };
  useUpdateEffect(function () {
    onTipVisibleChange && onTipVisibleChange(showTips);
  }, [showTips]);
  var TipContent = /*#__PURE__*/React.createElement("div", {
    className: classnames('umui-tips-content', {
      'umui-hidden': !showTips
    })
  }, typeof tipContent === 'string' ? /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("img", {
    src: "//img.alicdn.com/tfs/TB1L3GHr1L2gK0jSZFmXXc7iXXa-94-108.png"
  }), /*#__PURE__*/React.createElement("div", {
    className: "umui-tips-text",
    dangerouslySetInnerHTML: {
      __html: tipContent
    }
  })) : tipContent, /*#__PURE__*/React.createElement(Icon, {
    className: "umui-tips-content-close",
    type: "umicon-close",
    onClick: onTipClose
  }));
  var pageHeaderProps = _extends({}, antProps);
  if (menuConfig && menuConfig.length > 0) {
    pageHeaderProps.footer = /*#__PURE__*/React.createElement(Tab, {
      tabBarExtraContent: tabBarExtraContent,
      value: getActive(location === null || location === void 0 ? void 0 : location.pathname, menuConfig),
      onChange: function onChange(value) {
        push ? push(value) : window.location.href = value;
      },
      tabs: menuConfig.map(function (menu) {
        return {
          tab: menu.name,
          key: menu.to,
          disabled: menu.disabled
        };
      })
    });
  }
  var onBack = typeof goBackProp === 'function' ? goBackProp : goBack;
  return /*#__PURE__*/React.createElement(AntPageHeader, _extends({
    title: /*#__PURE__*/React.createElement("span", {
      className: "umui-page-header-title"
    }, title, tipContent && /*#__PURE__*/React.createElement(Icon, {
      className: classnames('umui-page-header-tips', {
        active: showTips
      }),
      type: showTips ? 'umicon-tips-open' : 'umicon-tips-close',
      onClick: function onClick() {
        setShowTips(!showTips);
      }
    })),
    className: classnames('umui-page-header', className)
  }, pageHeaderProps, {
    backIcon: !!goBackProp && /*#__PURE__*/React.createElement(Icon, {
      type: "umicon-arrow-left",
      className: "umui-page-header-back"
    }),
    onBack: onBack,
    ghost: false
  }), TipContent, (children || pageHeaderProps.footer) && /*#__PURE__*/React.createElement(Divider, {
    style: {
      margin: '14px 0 0'
    }
  }), children && /*#__PURE__*/React.createElement("div", {
    style: {
      marginTop: 13
    }
  }, children));
};
export default PageHeader;