@hi-ui/hiui 3.9.0-rc.8 → 4.0.0-beta.1

package/es/tabs/Tabs.js

@@ -1,576 +0,0 @@
-"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 _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
-
-var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));
-
-var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
-
-var _react = _interopRequireWildcard(require("react"));
-
-var _lodash = _interopRequireDefault(require("lodash"));
-
-var _propTypes = _interopRequireDefault(require("prop-types"));
-
-var _classnames = _interopRequireDefault(require("classnames"));
-
-var _icon = _interopRequireDefault(require("../icon"));
-
-var _tooltip = _interopRequireDefault(require("../tooltip"));
-
-var _ItemDropdown = _interopRequireDefault(require("./ItemDropdown"));
-
-var _TabItem = _interopRequireDefault(require("./TabItem"));
-
-var _reactTransitionGroup = require("react-transition-group");
-
-var _context = _interopRequireDefault(require("../context"));
-
-var _useTabItems2 = _interopRequireDefault(require("./hooks/useTabItems"));
-
-var _useTranslate2 = _interopRequireDefault(require("./hooks/useTranslate"));
-
-var noop = function noop() {};
-
-var Tabs = function Tabs(_ref) {
-  var onDrop = _ref.onDrop,
-      onAdd = _ref.onAdd,
-      onDropEnd = _ref.onDropEnd,
-      onDragStart = _ref.onDragStart,
-      defaultActiveId = _ref.defaultActiveId,
-      activeIdProps = _ref.activeId,
-      children = _ref.children,
-      type = _ref.type,
-      placement = _ref.placement,
-      max = _ref.max,
-      canScroll = _ref.canScroll,
-      onDelete = _ref.onDelete,
-      editable = _ref.editable,
-      className = _ref.className,
-      theme = _ref.theme,
-      localeDatas = _ref.localeDatas,
-      prefixCls = _ref.prefixCls,
-      draggable = _ref.draggable,
-      onTabClick = _ref.onTabClick,
-      onBeforeDelete = _ref.onBeforeDelete;
-  var containRef = (0, _react.useRef)(null);
-  var hiddenRef = (0, _react.useRef)(null);
-  var dropdownRef = (0, _react.useRef)(null);
-
-  var _useTranslate = (0, _useTranslate2["default"])({
-    elementRef: containRef,
-    canScroll: canScroll,
-    prefixCls: prefixCls
-  }),
-      leftBtn = _useTranslate.leftBtn,
-      rightBtn = _useTranslate.rightBtn;
-
-  var _useTabItems = (0, _useTabItems2["default"])({
-    children: children,
-    max: max,
-    type: type,
-    placement: placement,
-    canScroll: canScroll
-  }),
-      showTabItems = _useTabItems.showTabItems,
-      hiddenTabItems = _useTabItems.hiddenTabItems,
-      setShowTabItems = _useTabItems.setShowTabItems;
-
-  var _useState = (0, _react.useState)(null),
-      _useState2 = (0, _slicedToArray2["default"])(_useState, 2),
-      focusIndex = _useState2[0],
-      setFocusIndex = _useState2[1];
-
-  var _useState3 = (0, _react.useState)(activeIdProps !== undefined ? activeIdProps : defaultActiveId || showTabItems && showTabItems[0] && showTabItems[0].tabId),
-      _useState4 = (0, _slicedToArray2["default"])(_useState3, 2),
-      activeId = _useState4[0],
-      setActiveId = _useState4[1];
-
-  var _useState5 = (0, _react.useState)(),
-      _useState6 = (0, _slicedToArray2["default"])(_useState5, 2),
-      dragged = _useState6[0],
-      setDragged = _useState6[1];
-
-  var _useState7 = (0, _react.useState)(),
-      _useState8 = (0, _slicedToArray2["default"])(_useState7, 2),
-      over = _useState8[0],
-      setOver = _useState8[1];
-
-  var _useState9 = (0, _react.useState)(),
-      _useState10 = (0, _slicedToArray2["default"])(_useState9, 2),
-      deletetabId = _useState10[0],
-      setDeletetabId = _useState10[1];
-
-  var _useState11 = (0, _react.useState)(editable && type === 'editable'),
-      _useState12 = (0, _slicedToArray2["default"])(_useState11, 2),
-      checkEditable = _useState12[0],
-      setCheckEditable = _useState12[1];
-
-  var latestActiveId = (0, _react.useRef)(activeId);
-  var inkRef = (0, _react.useRef)();
-  var childRef = (0, _react.useRef)();
-  (0, _react.useEffect)(function () {
-    setCheckEditable(editable && type === 'editable');
-  }, [editable, type]);
-  (0, _react.useEffect)(function () {
-    if (deletetabId && latestActiveId.current === activeId) {
-      setActiveId(children[0] && children[0].props.tabId);
-    }
-  }, [deletetabId]);
-  (0, _react.useEffect)(function () {
-    if (activeIdProps !== undefined) {
-      setActiveId(activeIdProps);
-    }
-  }, [activeIdProps]);
-  (0, _react.useLayoutEffect)(function () {
-    var index = showTabItems.findIndex(function (item) {
-      return item.tabId === activeId;
-    });
-    var hideIndex = hiddenTabItems.findIndex(function (item) {
-      return item.tabId === activeId;
-    });
-    latestActiveId.current = index;
-
-    if (index === -1 && hideIndex === -1 && showTabItems.length > 0) {
-      setActiveId(showTabItems[0].tabId);
-    }
-
-    if (type === 'line') {
-      if (index !== -1) {
-        handleRenderActiveLine(index);
-      } else {
-        if (hideIndex !== -1) {
-          handleRenderActiveLine(max);
-        }
-      }
-    }
-  }, [activeId, showTabItems, type]); // 过滤自定义属性
-
-  var omitItem = (0, _react.useCallback)(function (data) {
-    return _lodash["default"].omit(data, ['animation', 'disabled', 'tabDesc']);
-  }, []);
-  (0, _react.useEffect)(function () {
-    if (canScroll && children.length > childRef.current) {
-      var contain = containRef.current;
-      setTimeout(function () {
-        contain.scrollLeft = contain.scrollWidth - contain.clientWidth;
-      }, 0);
-    }
-  }, [children]); // 计算激活状态下选中横线
-
-  var pseudoPosition = (0, _react.useCallback)(function (index) {
-    var parentNode = containRef.current || {};
-    var _parentNode$childNode = parentNode.childNodes,
-        childNodes = _parentNode$childNode === void 0 ? [] : _parentNode$childNode;
-
-    if (childNodes[index]) {
-      var child = childNodes[index];
-
-      var _child$getBoundingCli = child.getBoundingClientRect(),
-          width = _child$getBoundingCli.width;
-
-      var ink = inkRef.current;
-
-      if (placement === 'horizontal' && ink) {
-        var offsetLeft = child.offsetLeft;
-
-        if (index === 0) {
-          ink.style.width = "".concat(width - 17, "px");
-          ink.style.transform = "translateX(".concat(offsetLeft, "px)");
-        } else {
-          ink.style.width = "".concat(width - 34, "px");
-          ink.style.transform = "translateX(".concat(offsetLeft + 17, "px)");
-        }
-      } else {
-        var offsetTop = child.offsetTop;
-        ink.style.transform = "translateY(".concat(offsetTop, "px)");
-      }
-    }
-  }, [containRef, inkRef]);
-  var handleRenderActiveLine = (0, _react.useCallback)(function (index) {
-    pseudoPosition(index);
-    setTimeout(function () {
-      // 前一个transform完成300ms动画后，重新获取最新位置进行计算
-      pseudoPosition(index);
-    }, 400);
-  }, [pseudoPosition]);
-  var addTab = (0, _react.useCallback)(function () {
-    if (editable) {
-      onAdd(children.length + 1);
-      childRef.current = children.length;
-    }
-  }, [children, editable, onAdd]);
-  var deleteTab = (0, _react.useCallback)(function (e, tabId, index, item) {
-    e.stopPropagation();
-    setDeletetabId(tabId);
-
-    if (editable) {
-      if (onBeforeDelete) {
-        var result = onBeforeDelete(item);
-
-        if (result === true) {
-          onDelete(item, index);
-
-          _tooltip["default"].close("tab-".concat(tabId));
-        }
-      } else {
-        onDelete(item, index);
-
-        _tooltip["default"].close("tab-".concat(tabId));
-      }
-    }
-  }, [editable, activeId, onDelete]);
-  var renderTabContent = (0, _react.useCallback)(function (child, index) {
-    var _child$props = child.props,
-        tabId = _child$props.tabId,
-        animation = _child$props.animation;
-    var activeIndex = showTabItems.findIndex(function (item) {
-      return item.tabId === activeId;
-    });
-    return /*#__PURE__*/(0, _react.cloneElement)(child, {
-      show: tabId === activeId,
-      latestActiveIdIndex: latestActiveId.current ? latestActiveId.current : -1,
-      activeIdIndex: activeId ? activeIndex : -1,
-      index: index,
-      animation: animation,
-      placement: placement
-    });
-  }, [activeId, showTabItems]);
-  var dragStart = (0, _react.useCallback)(function (e, item) {
-    if (type === 'card' || type === 'line' || type === 'editable') {
-      setDragged(e.currentTarget);
-      e.currentTarget.classList.add('hi-tabs__item--disabled');
-      onDragStart(omitItem(item));
-    }
-  }, []);
-  var dragEnd = (0, _react.useCallback)(function (e, item) {
-    var items = containRef.current.getElementsByClassName('hi-tabs__item');
-    var clientX = e.clientX;
-    var clientY = e.clientY;
-
-    var _containRef$current$g = containRef.current.getBoundingClientRect(),
-        left = _containRef$current$g.left,
-        right = _containRef$current$g.right,
-        top = _containRef$current$g.top,
-        bottom = _containRef$current$g.bottom;
-
-    if (!(clientX >= left && clientX <= right && clientY <= bottom && clientY >= top)) {
-      for (var i = 0; i < items.length; i++) {
-        items[i].classList.remove('hi-tabs__item--disabled');
-      }
-
-      setOver(null);
-      return;
-    }
-
-    if (type === 'card' || type === 'line' || type === 'editable') {
-      if (!over || !dragged) {
-        return;
-      }
-
-      var data = (0, _toConsumableArray2["default"])(showTabItems);
-      var from = Number(dragged.dataset.id);
-      var to = Number(over.dataset.id);
-      onDropEnd(omitItem(item), omitItem(showTabItems[to]));
-      data.splice(to, 0, data.splice(from, 1)[0]);
-      data = data.map(function (doc, index) {
-        doc.newIndex = index + 1;
-        return doc;
-      });
-      e.currentTarget.classList.remove('hi-tabs__item--disabled');
-      setShowTabItems(data);
-    }
-  }, [over, showTabItems, dragged]);
-  var handleClick = (0, _react.useCallback)(function (tab, e) {
-    if (tab.disabled) {
-      return false;
-    }
-
-    if (activeIdProps === undefined) {
-      setActiveId(tab.tabId);
-    }
-
-    onTabClick(tab.tabId, e);
-  }, [showTabItems]);
-  var dragOver = (0, _react.useCallback)(function (e) {
-    if (type === 'card' || type === 'line' || type === 'editable') {
-      e.preventDefault();
-      e.target = e.target.closest('.hi-tabs__item');
-
-      if (!e.target || !dragged) {
-        return;
-      }
-
-      var taIndex = JSON.parse(e.target.dataset.item).newIndex;
-      var dgIndex = JSON.parse(dragged.dataset.item).newIndex;
-      onDrop(omitItem(showTabItems[taIndex]), omitItem(showTabItems[dgIndex]));
-
-      if (taIndex === dgIndex) {
-        if (!over) return;
-        setOver(e.target);
-        return;
-      }
-
-      setOver(e.target);
-    }
-  }, [over, dragged]);
-  var handleKeyDown = (0, _react.useCallback)(function (e, tabIdx, tabRef, isDropdown) {
-    // ENTER OR SPACE
-    if (e.keyCode === 32 || e.keyCode === 13) {
-      e.preventDefault();
-
-      if (isDropdown) {
-        if (dropdownRef.current.state.visible !== true) {
-          dropdownRef.current.toggle(false);
-        }
-      } else {
-        tabRef.current.click();
-      }
-    }
-
-    if (e.keyCode === 9) {
-      dropdownRef.current.toggle(true);
-    }
-
-    if (!dropdownRef.current || dropdownRef.current.state.visible !== true) {
-      var prevArr = [];
-      var nextArr = []; // concat 的空对象为 “更多” tab
-
-      var items = (0, _toConsumableArray2["default"])(showTabItems);
-
-      if (hiddenTabItems && hiddenTabItems.length > 0) {
-        items = showTabItems.concat({});
-      }
-
-      items.forEach(function (item, idx) {
-        if (!item.disabled) {
-          if (idx < tabIdx) {
-            prevArr.push(idx);
-          }
-
-          if (idx > tabIdx) {
-            nextArr.push(idx);
-          }
-        }
-      });
-      var prev;
-      var next;
-
-      if (prevArr.length > 0) {
-        prev = prevArr[prevArr.length - 1];
-      } else if (prevArr.length === 0 && nextArr.length > 0) {
-        prev = nextArr[nextArr.length - 1];
-      }
-
-      if (nextArr.length > 0) {
-        next = nextArr[0];
-      } else if (nextArr.length === 0 && prevArr.length > 0) {
-        next = prevArr[0];
-      }
-
-      if ([37, 38].includes(e.keyCode)) {
-        e.preventDefault();
-        dropdownRef.current && dropdownRef.current.toggle(true);
-        containRef.current && containRef.current.querySelectorAll('.hi-tabs__item')[prev].focus();
-      }
-
-      if ([39, 40].includes(e.keyCode)) {
-        e.preventDefault();
-        dropdownRef.current && dropdownRef.current.toggle(true);
-        containRef.current && containRef.current.querySelectorAll('.hi-tabs__item')[next].focus();
-      }
-    }
-  }, [showTabItems, containRef.current, dropdownRef.current, hiddenTabItems]);
-  var moveFocus = (0, _react.useCallback)(function (direction) {
-    var newFocusIndex = null;
-
-    if (direction === 'up') {
-      if (focusIndex === null) {
-        newFocusIndex = hiddenTabItems.length - 1;
-      } else {
-        newFocusIndex = focusIndex === 0 ? hiddenTabItems.length - 1 : focusIndex - 1;
-      }
-    } else {
-      if (focusIndex === null) {
-        newFocusIndex = 0;
-      } else {
-        newFocusIndex = focusIndex === hiddenTabItems.length - 1 ? 0 : focusIndex + 1;
-      }
-    }
-
-    setFocusIndex(newFocusIndex);
-  }, [focusIndex, hiddenTabItems]);
-  var handleDropdownKeyDown = (0, _react.useCallback)(function (e) {
-    // ESC
-    if (e.keyCode === 27) {
-      e.preventDefault();
-      dropdownRef.current.toggle(true);
-      setFocusIndex(null);
-    }
-
-    if (dropdownRef.current && dropdownRef.current.state.visible === true) {
-      // UP
-      if (e.keyCode === 38) {
-        e.preventDefault();
-        moveFocus('up');
-      } // DOWN
-
-
-      if (e.keyCode === 40) {
-        e.preventDefault();
-        moveFocus('down');
-      } // ENTER
-
-
-      if (e.keyCode === 13) {
-        e.preventDefault();
-        handleClick(hiddenTabItems[focusIndex], e);
-        dropdownRef.current.toggle(true);
-        setFocusIndex(null);
-      }
-    }
-  }, [dropdownRef.current, focusIndex, moveFocus, handleClick, hiddenTabItems]);
-  var getHeader = (0, _react.useCallback)(function () {
-    return /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, leftBtn, /*#__PURE__*/_react["default"].createElement("div", {
-      className: "".concat(prefixCls, "__header")
-    }, /*#__PURE__*/_react["default"].createElement("div", {
-      className: "".concat(prefixCls, "__nav contain"),
-      onDragOver: dragOver,
-      ref: containRef
-    }, /*#__PURE__*/_react["default"].createElement(_reactTransitionGroup.TransitionGroup, {
-      component: null
-    }, showTabItems.map(function (item, index) {
-      var tabId = item.tabId;
-      return /*#__PURE__*/_react["default"].createElement(_reactTransitionGroup.CSSTransition, {
-        key: tabId,
-        timeout: 200,
-        unmountOnExit: true,
-        onExit: function onExit() {
-          return animateDone(tabId);
-        },
-        classNames: "".concat(prefixCls, "__tab-items")
-      }, /*#__PURE__*/_react["default"].createElement(_TabItem["default"], {
-        key: "".concat(prefixCls, "__item-").concat(index),
-        handleKeyDown: handleKeyDown,
-        index: index,
-        prefixCls: prefixCls,
-        item: item,
-        draggable: draggable,
-        activeId: activeId,
-        type: type,
-        showTabItems: showTabItems,
-        editable: checkEditable,
-        handleClick: handleClick,
-        deleteTab: deleteTab,
-        dragStart: dragStart,
-        dragEnd: dragEnd,
-        canScroll: canScroll
-      }));
-    })), hiddenTabItems.length > 0 && /*#__PURE__*/_react["default"].createElement("div", {
-      className: (0, _classnames["default"])("".concat(prefixCls, "__item"), (0, _defineProperty2["default"])({}, "".concat(prefixCls, "__item--active"), hiddenTabItems.map(function (item) {
-        return item.tabId;
-      }).includes(activeId))),
-      tabIndex: hiddenTabItems.map(function (item) {
-        return item.tabId;
-      }).includes(activeId) ? 0 : -1,
-      ref: hiddenRef,
-      onKeyDown: function onKeyDown(e) {
-        handleKeyDown(e, showTabItems.length, hiddenRef, true);
-        handleDropdownKeyDown(e);
-      }
-    }, /*#__PURE__*/_react["default"].createElement(_ItemDropdown["default"], {
-      active: hiddenTabItems.map(function (item) {
-        return item.tabId;
-      }).includes(activeId),
-      activeId: activeId,
-      theme: theme,
-      localeDatas: localeDatas,
-      defaultActiveId: defaultActiveId,
-      focusIndex: focusIndex,
-      items: hiddenTabItems,
-      ref: dropdownRef,
-      onChoose: function onChoose(item, e) {
-        handleClick(item, e);
-      }
-    })), type === 'line' && /*#__PURE__*/_react["default"].createElement("div", {
-      className: (0, _classnames["default"])("".concat(prefixCls, "--line__ink"), (0, _defineProperty2["default"])({}, "".concat(prefixCls, "--line__ink-disabled"), isActiveEffective)),
-      ref: inkRef
-    })), checkEditable && onAdd && !canScroll && /*#__PURE__*/_react["default"].createElement("div", {
-      className: "".concat(prefixCls, "__add"),
-      onClick: addTab
-    }, /*#__PURE__*/_react["default"].createElement(_icon["default"], {
-      name: "plus"
-    }))), rightBtn);
-  });
-  var tabsClasses = (0, _classnames["default"])(prefixCls, className, "".concat(prefixCls, "--").concat(type), "theme__".concat(theme), (0, _defineProperty2["default"])({}, "".concat(prefixCls, "--").concat(placement), type === 'card' || type === 'line'), (0, _defineProperty2["default"])({}, "".concat(prefixCls, "--scroll"), canScroll));
-
-  var animateDone = function animateDone(tabId) {
-    _tooltip["default"].close("tab-".concat(tabId));
-  }; // 判断选中的元素是否为disabled 状态
-
-
-  var isActiveEffective = false;
-  var arr = showTabItems.filter(function (item) {
-    return item.tabId === activeId;
-  });
-
-  if (arr.length) {
-    isActiveEffective = arr[0].disabled;
-  }
-
-  return /*#__PURE__*/_react["default"].createElement("div", {
-    className: tabsClasses
-  }, canScroll ? /*#__PURE__*/_react["default"].createElement("div", {
-    className: "".concat(prefixCls, "__scroll--outter")
-  }, getHeader()) : getHeader(), /*#__PURE__*/_react["default"].createElement("div", {
-    className: "".concat(prefixCls, "__content")
-  }, _react["default"].Children.map(children, function (item, index) {
-    return item && renderTabContent(item, index);
-  })));
-};
-
-Tabs.propTypes = {
-  type: _propTypes["default"].oneOf(['desc', 'card', 'button', 'editable', 'line']),
-  placement: _propTypes["default"].oneOf(['horizontal', 'vertical']),
-  activeId: _propTypes["default"].oneOfType([_propTypes["default"].string, _propTypes["default"].number]),
-  defaultActiveId: _propTypes["default"].oneOfType([_propTypes["default"].string, _propTypes["default"].number]),
-  max: _propTypes["default"].number,
-  editable: _propTypes["default"].bool,
-  className: _propTypes["default"].string,
-  renderTabBar: _propTypes["default"].func,
-  onTabClick: _propTypes["default"].func,
-  onAdd: _propTypes["default"].func,
-  onDelete: _propTypes["default"].func,
-  onDrop: _propTypes["default"].func,
-  onDropEnd: _propTypes["default"].func,
-  onDragStart: _propTypes["default"].func,
-  draggable: _propTypes["default"].bool
-};
-Tabs.defaultProps = {
-  prefixCls: 'hi-tabs',
-  type: 'card',
-  placement: 'horizontal',
-  className: '',
-  max: 6,
-  editable: true,
-  onTabClick: noop,
-  onBeforeDelete: noop,
-  onDrop: noop,
-  onDropEnd: noop,
-  onDragStart: noop,
-  onDelete: noop,
-  draggable: false
-};
-
-var _default = (0, _context["default"])(Tabs);
-
-exports["default"] = _default;