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

新设计规范下业务组件库

"use strict";

var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
var _typeof = require("@babel/runtime/helpers/typeof");
Object.defineProperty(exports, "__esModule", {
  value: true
});
exports["default"] = exports.PageHeader = void 0;
var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
var _react = _interopRequireWildcard(require("react"));
var _reactRouterDom = require("react-router-dom");
var _classnames = _interopRequireDefault(require("classnames"));
var _ = require("..");
var _qtPublicHooks = require("qt-public-hooks");
var _antd = require("antd");
var _utils = require("../utils");
require("./style");
var _excluded = ["tipKey", "tipContent", "menuConfig", "children", "title", "tabBarExtraContent", "defaultShowTips", "className", "goBack", "onTipVisibleChange"];
/* eslint-disable react/no-danger */
function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof(e) && "function" != typeof e) return { "default": e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n["default"] = e, t && t.set(e, n), n; }
function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { (0, _defineProperty2["default"])(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
var SHOWN_STORAGE_NAME = 'umui-pageTips-shown';
var getActive = function getActive(path, routers) {
  var activeTab = '';
  routers.some(function (r) {
    var activeMenu = (0, _reactRouterDom.matchPath)(path, {
      path: r.to,
      exact: r.exact
    });
    activeMenu && (activeTab = activeMenu.path);
    return !!activeTab;
  });
  return activeTab;
};
var PageHeader = exports.PageHeader = function PageHeader(props) {
  var _useHistory = (0, _reactRouterDom.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 = (0, _objectWithoutProperties2["default"])(_ref, _excluded);
  var _useLocalStorage = (0, _qtPublicHooks.useLocalStorage)(SHOWN_STORAGE_NAME, {}),
    _useLocalStorage2 = (0, _slicedToArray2["default"])(_useLocalStorage, 2),
    shownStorage = _useLocalStorage2[0],
    setShownStorage = _useLocalStorage2[1];
  var _useState = (0, _react.useState)(function () {
      var _defaultShowTips = !!defaultShowTips;
      if (typeof defaultShowTips === 'number') {
        (0, _utils.assert)(Number(defaultShowTips) < 0, new RangeError('Number of defaultShowTips must be a non-negative'));
        (0, _utils.assert)(!tipKey, new RangeError('Numerical defaultShowTips must be used with \'tipKey\' prop'));
        if (shownStorage[tipKey]) {
          _defaultShowTips = shownStorage[tipKey] < defaultShowTips;
        }
      }
      return _defaultShowTips;
    }),
    _useState2 = (0, _slicedToArray2["default"])(_useState, 2),
    showTips = _useState2[0],
    setShowTips = _useState2[1];
  var onTipClose = function onTipClose() {
    setShowTips(false);
    if (typeof defaultShowTips === 'number') {
      var _shownStorage = _objectSpread({}, shownStorage);
      _shownStorage[tipKey] = shownStorage[tipKey] ? shownStorage[tipKey] + 1 : 1;
      setShownStorage(_shownStorage);
    }
  };
  (0, _qtPublicHooks.useUpdateEffect)(function () {
    onTipVisibleChange && onTipVisibleChange(showTips);
  }, [showTips]);
  var TipContent = /*#__PURE__*/_react["default"].createElement("div", {
    className: (0, _classnames["default"])('umui-tips-content', {
      'umui-hidden': !showTips
    })
  }, typeof tipContent === 'string' ? /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, /*#__PURE__*/_react["default"].createElement("img", {
    src: "//img.alicdn.com/tfs/TB1L3GHr1L2gK0jSZFmXXc7iXXa-94-108.png"
  }), /*#__PURE__*/_react["default"].createElement("div", {
    className: "umui-tips-text",
    dangerouslySetInnerHTML: {
      __html: tipContent
    }
  })) : tipContent, /*#__PURE__*/_react["default"].createElement(_.IconSlim, {
    className: "umui-tips-content-close",
    type: "umicon-close",
    onClick: onTipClose
  }));
  var pageHeaderProps = _objectSpread({}, antProps);
  if (menuConfig && menuConfig.length > 0) {
    pageHeaderProps.footer = /*#__PURE__*/_react["default"].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["default"].createElement(_antd.PageHeader, (0, _extends2["default"])({
    title: /*#__PURE__*/_react["default"].createElement("span", {
      className: "umui-page-header-title"
    }, title, tipContent && /*#__PURE__*/_react["default"].createElement(_.IconSlim, {
      className: (0, _classnames["default"])('umui-page-header-tips', {
        active: showTips
      }),
      type: showTips ? 'umicon-tips-open' : 'umicon-tips-close',
      onClick: function onClick() {
        setShowTips(!showTips);
      }
    })),
    className: (0, _classnames["default"])('umui-page-header', className)
  }, pageHeaderProps, {
    backIcon: !!goBackProp && /*#__PURE__*/_react["default"].createElement(_.IconSlim, {
      type: "umicon-arrow-left",
      className: "umui-page-header-back"
    }),
    onBack: onBack,
    ghost: false
  }), TipContent, (children || pageHeaderProps.footer) && /*#__PURE__*/_react["default"].createElement(_antd.Divider, {
    style: {
      margin: '14px 0 0'
    }
  }), children && /*#__PURE__*/_react["default"].createElement("div", {
    style: {
      marginTop: 13
    }
  }, children));
};
var _default = exports["default"] = PageHeader;