choerodon-ui/lib/tabs/TabsWithContext.js

An enterprise-class UI design language and React-based implementation

"use strict";

var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard");

var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports["default"] = 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 _typeof2 = _interopRequireDefault(require("@babel/runtime/helpers/typeof"));

var _react = _interopRequireWildcard(require("react"));

var _classnames2 = _interopRequireDefault(require("classnames"));

var _modalProvider = _interopRequireDefault(require("../../pro/lib/modal-provider"));

var _enum = require("./enum");

var _utils = require("./utils");

var _enum2 = require("../_util/enum");

var _configure = require("../configure");

var _warning = _interopRequireDefault(require("../_util/warning"));

var _TabBar = _interopRequireDefault(require("./TabBar"));

var _icon = _interopRequireDefault(require("../icon"));

var _TabContent = _interopRequireDefault(require("./TabContent"));

var _isFlexSupported = _interopRequireDefault(require("../_util/isFlexSupported"));

var _TabsContext = _interopRequireDefault(require("./TabsContext"));

function isAnimated(animated) {
  return (0, _typeof2["default"])(animated) === 'object';
}

var TabsWithContext = function TabsWithContext(props) {
  var _classnames;

  var tabPosition = props.tabPosition,
      className = props.className,
      destroyInactiveTabPane = props.destroyInactiveTabPane,
      style = props.style,
      size = props.size,
      type = props.type,
      tabBarStyle = props.tabBarStyle,
      _props$inkBarStyle = props.inkBarStyle,
      inkBarStyle = _props$inkBarStyle === void 0 ? (0, _configure.getConfig)('tabsInkBarStyle') : _props$inkBarStyle,
      hideAdd = props.hideAdd,
      _props$animated = props.animated,
      animated = _props$animated === void 0 ? true : _props$animated,
      tabBarGutter = props.tabBarGutter,
      onEdit = props.onEdit,
      tabBarExtraContent = props.tabBarExtraContent,
      hideOnlyGroup = props.hideOnlyGroup,
      customizedCode = props.customizedCode,
      customizable = props.customizable,
      children = props.children,
      propDefaultActiveKey = props.defaultActiveKey,
      setCustomized = props.setCustomized,
      customized = props.customized,
      customizePrefixCls = props.prefixCls,
      propActiveKey = props.activeKey,
      onChange = props.onChange,
      onTabClick = props.onTabClick,
      onPrevClick = props.onPrevClick,
      onNextClick = props.onNextClick,
      keyboard = props.keyboard,
      restProps = (0, _objectWithoutProperties2["default"])(props, ["tabPosition", "className", "destroyInactiveTabPane", "style", "size", "type", "tabBarStyle", "inkBarStyle", "hideAdd", "animated", "tabBarGutter", "onEdit", "tabBarExtraContent", "hideOnlyGroup", "customizedCode", "customizable", "children", "defaultActiveKey", "setCustomized", "customized", "prefixCls", "activeKey", "onChange", "onTabClick", "onPrevClick", "onNextClick", "keyboard"]);
  var hasPropActiveKey = 'activeKey' in props;
  var prefixCls = (0, _configure.getPrefixCls)('tabs', customizePrefixCls);
  var saveCustomized = (0, _react.useCallback)(function (newCustomized) {
    if (customizable) {
      setCustomized(newCustomized);

      if (customizedCode) {
        var customizedSave = (0, _configure.getConfig)('customizedSave');
        customizedSave(customizedCode, newCustomized, 'Tabs');
      }
    }
  }, [customizable, customizedCode]);

  var _useMemo = (0, _react.useMemo)(function () {
    return (0, _utils.normalizePanes)(children, customized);
  }, [children, customized]),
      _useMemo2 = (0, _slicedToArray2["default"])(_useMemo, 2),
      totalPanelsMap = _useMemo2[0],
      groupedPanelsMap = _useMemo2[1];

  var defaultActiveKey = (0, _react.useMemo)(function () {
    var option = {
      activeKey: propActiveKey,
      defaultActiveKey: propDefaultActiveKey
    };
    return (0, _utils.getDefaultActiveKey)(totalPanelsMap, groupedPanelsMap, option);
  }, []);
  var actuallyDefaultActiveKey = (0, _react.useMemo)(function () {
    if (customized) {
      var $defaultActiveKey = customized.defaultActiveKey;

      if ($defaultActiveKey !== undefined) {
        if (onChange && $defaultActiveKey !== defaultActiveKey) {
          onChange($defaultActiveKey);
        }

        return $defaultActiveKey;
      }
    }

    return defaultActiveKey;
  }, [defaultActiveKey]);

  var _useState = (0, _react.useState)(actuallyDefaultActiveKey),
      _useState2 = (0, _slicedToArray2["default"])(_useState, 2),
      activeKey = _useState2[0],
      setActiveKey = _useState2[1];

  var activeGroupKey = (0, _react.useMemo)(function () {
    if (groupedPanelsMap.size) {
      if (activeKey) {
        var _iteratorNormalCompletion = true;
        var _didIteratorError = false;
        var _iteratorError = undefined;

        try {
          for (var _iterator = groupedPanelsMap[Symbol.iterator](), _step; !(_iteratorNormalCompletion = (_step = _iterator.next()).done); _iteratorNormalCompletion = true) {
            var _step$value = (0, _slicedToArray2["default"])(_step.value, 2),
                groupKey = _step$value[0],
                panelsMap = _step$value[1].panelsMap;

            var _iteratorNormalCompletion2 = true;
            var _didIteratorError2 = false;
            var _iteratorError2 = undefined;

            try {
              for (var _iterator2 = panelsMap[Symbol.iterator](), _step2; !(_iteratorNormalCompletion2 = (_step2 = _iterator2.next()).done); _iteratorNormalCompletion2 = true) {
                var _step2$value = (0, _slicedToArray2["default"])(_step2.value, 1),
                    panelKey = _step2$value[0];

                if (panelKey === activeKey) {
                  return groupKey;
                }
              }
            } catch (err) {
              _didIteratorError2 = true;
              _iteratorError2 = err;
            } finally {
              try {
                if (!_iteratorNormalCompletion2 && _iterator2["return"] != null) {
                  _iterator2["return"]();
                }
              } finally {
                if (_didIteratorError2) {
                  throw _iteratorError2;
                }
              }
            }
          }
        } catch (err) {
          _didIteratorError = true;
          _iteratorError = err;
        } finally {
          try {
            if (!_iteratorNormalCompletion && _iterator["return"] != null) {
              _iterator["return"]();
            }
          } finally {
            if (_didIteratorError) {
              throw _iteratorError;
            }
          }
        }
      }

      return (0, _utils.getDefaultGroupKey)(groupedPanelsMap);
    }
  }, [groupedPanelsMap, activeKey]);
  var currentGroup = activeGroupKey && groupedPanelsMap.get(activeGroupKey);
  var currentPanelMap = currentGroup ? currentGroup.panelsMap : totalPanelsMap;
  var changeActiveKey = (0, _react.useCallback)(function (key, byGroup) {
    if (activeKey !== key) {
      if (!byGroup && currentGroup) {
        currentGroup.lastActiveKey = key;
      }

      if (!hasPropActiveKey) {
        setActiveKey(key);
      }

      if (onChange) {
        onChange(key);
      }
    }
  }, [hasPropActiveKey, activeKey, onChange, currentGroup]);
  var value = {
    defaultActiveKey: propDefaultActiveKey,
    actuallyDefaultActiveKey: actuallyDefaultActiveKey,
    propActiveKey: propActiveKey,
    prefixCls: prefixCls,
    keyboard: keyboard,
    tabBarPosition: tabPosition,
    hideOnlyGroup: hideOnlyGroup,
    customizable: customizable,
    customized: customized,
    saveCustomized: saveCustomized,
    activeKey: activeKey,
    activeGroupKey: activeGroupKey,
    changeActiveKey: changeActiveKey,
    groupedPanelsMap: groupedPanelsMap,
    currentPanelMap: currentPanelMap,
    totalPanelsMap: totalPanelsMap,
    onTabClick: onTabClick,
    onPrevClick: onPrevClick,
    onNextClick: onNextClick,
    children: children
  };
  var inkBarAnimated = isAnimated(animated) ? animated.inkBar : animated;
  var tabPaneAnimated = isAnimated(animated) ? animated.tabPane : animated; // card tabs should not have animation

  if (type !== _enum.TabsType.line) {
    tabPaneAnimated = 'animated' in props ? tabPaneAnimated : false;
  }

  var isCard = type === _enum.TabsType.card || type === _enum.TabsType['editable-card'];
  (0, _warning["default"])(!(isCard && (size === _enum2.Size.small || size === _enum2.Size.large)), 'Tabs[type=card|editable-card] doesn\'t have small or large size, it\'s by designed.');
  var createNewTab = (0, _react.useCallback)(function (e) {
    if (onEdit) {
      onEdit(e, 'add');
    }
  }, [onEdit]);
  var removeTab = (0, _react.useCallback)(function (targetKey, e) {
    e.stopPropagation();

    if (!targetKey) {
      return;
    }

    if (onEdit) {
      onEdit(targetKey, 'remove');
    }
  }, [onEdit]);
  (0, _react.useEffect)(function () {
    if (hasPropActiveKey) {
      if (propActiveKey !== activeKey) {
        setActiveKey(propActiveKey);
      }
    } else if (activeKey === undefined || !totalPanelsMap.has(activeKey)) {
      setActiveKey((0, _utils.getDefaultActiveKeyInGroup)(currentPanelMap));
    }
  }, [hasPropActiveKey, propActiveKey, activeKey, totalPanelsMap, currentPanelMap]);
  var cls = (0, _classnames2["default"])(prefixCls, "".concat(prefixCls, "-").concat(tabPosition), "".concat(prefixCls, "-").concat(type), (0, _utils.isVertical)(tabPosition) ? "".concat(prefixCls, "-vertical") : "".concat(prefixCls, "-horizontal"), (_classnames = {}, (0, _defineProperty2["default"])(_classnames, "".concat(prefixCls, "-").concat(size), !!size), (0, _defineProperty2["default"])(_classnames, "".concat(prefixCls, "-card"), isCard), (0, _defineProperty2["default"])(_classnames, "".concat(prefixCls, "-no-animation"), !tabPaneAnimated), (0, _defineProperty2["default"])(_classnames, 'no-flex', !(0, _isFlexSupported["default"])()), _classnames), className);
  var extraContent = !hideAdd && type === _enum.TabsType['editable-card'] ? // Add new tab handler
  _react["default"].createElement("span", {
    key: "tabBarExtraContent"
  }, _react["default"].createElement(_icon["default"], {
    type: "add",
    className: "".concat(prefixCls, "-new-tab"),
    onClick: createNewTab
  }), tabBarExtraContent) : tabBarExtraContent;
  var tabBarProps = {
    inkBarAnimated: inkBarAnimated,
    extraContent: extraContent,
    style: tabBarStyle,
    tabBarGutter: tabBarGutter,
    type: type,
    onRemoveTab: removeTab,
    inkBarStyle: inkBarStyle
  };
  var tabContentProps = {
    animatedWithMargin: true,
    animated: tabPaneAnimated,
    destroyInactiveTabPane: destroyInactiveTabPane
  };
  var contents = [_react["default"].createElement(_TabBar["default"], (0, _extends2["default"])({
    key: "tabBar"
  }, tabBarProps)), _react["default"].createElement(_TabContent["default"], (0, _extends2["default"])({
    key: "tabContent"
  }, tabContentProps))];

  if (tabPosition === _enum.TabsPosition.bottom) {
    contents.reverse();
  }

  var tabs = _react["default"].createElement("div", (0, _extends2["default"])({
    className: cls,
    style: style
  }, (0, _utils.getDataAttr)(restProps)), contents);

  return _react["default"].createElement(_TabsContext["default"].Provider, {
    value: value
  }, customizable ? _react["default"].createElement(_modalProvider["default"], null, tabs) : tabs);
};

TabsWithContext.displayName = 'TabsWithContext';
var _default = TabsWithContext;
exports["default"] = _default;
//# sourceMappingURL=TabsWithContext.js.map