preact-arco-design/es/Tabs/tabs.js

Arco Design React UI Library.

var __assign = this && this.__assign || function () {
  __assign = Object.assign || function (t) {
    for (var s, i = 1, n = arguments.length; i < n; i++) {
      s = arguments[i];

      for (var p in s) {
        if (Object.prototype.hasOwnProperty.call(s, p)) t[p] = s[p];
      }
    }

    return t;
  };

  return __assign.apply(this, arguments);
};

var __rest = this && this.__rest || function (s, e) {
  var t = {};

  for (var p in s) {
    if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0) t[p] = s[p];
  }

  if (s != null && typeof Object.getOwnPropertySymbols === "function") for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
    if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i])) t[p[i]] = s[p[i]];
  }
  return t;
};

var __read = this && this.__read || function (o, n) {
  var m = typeof Symbol === "function" && o[Symbol.iterator];
  if (!m) return o;
  var i = m.call(o),
      r,
      ar = [],
      e;

  try {
    while ((n === void 0 || n-- > 0) && !(r = i.next()).done) {
      ar.push(r.value);
    }
  } catch (error) {
    e = {
      error: error
    };
  } finally {
    try {
      if (r && !r.done && (m = i["return"])) m.call(i);
    } finally {
      if (e) throw e.error;
    }
  }

  return ar;
};

import React, { useRef, useImperativeHandle, useContext, useMemo } from "preact/compat";
import cs from "../_util/classNames";
import TabPane from "./tab-pane";
import TabHeader from "./tab-header/index";
import TabContent from "./tab-content";
import omit from "../_util/omit";
import { ConfigContext } from "../ConfigProvider";
import { isFunction, isObject } from "../_util/is";
import useMergeValue from "../_util/hooks/useMergeValue";
import useMergeProps from "../_util/hooks/useMergeProps";
var sizeList = ['mini', 'small', 'default', 'large'];
var __ARCO_TABS_SEED_INDEX = 0;

var getPaneChildren = function getPaneChildren(props) {
  var children = props.children;
  var paneChildren = [];
  React.Children.forEach(children, function (child) {
    if (child && child.type && child.type.isTabPane) {
      paneChildren.push(child);
    }
  });
  return paneChildren;
};

var getTabPaneAnimation = function getTabPaneAnimation(props) {
  var direction = props.direction,
      tabPosition = props.tabPosition,
      animation = props.animation;

  if (direction === 'vertical' || tabPosition === 'left' || tabPosition === 'right') {
    return false;
  }

  if (isObject(animation)) {
    return 'tabPane' in animation ? animation.tabPane : false;
  }

  return animation;
};

var defaultProps = {
  tabPosition: 'top',
  type: 'line',
  overflow: 'scroll',
  showAddButton: true,
  lazyload: true,
  headerPadding: true,
  scrollPosition: 'auto'
};
export var TabsContext = React.createContext({});

function Tabs(baseProps, ref) {
  var _a;

  var _b = useContext(ConfigContext),
      getPrefixCls = _b.getPrefixCls,
      ctxSize = _b.size,
      componentConfig = _b.componentConfig,
      rtl = _b.rtl;

  var props = useMergeProps(baseProps, defaultProps, componentConfig === null || componentConfig === void 0 ? void 0 : componentConfig.Tabs);
  var paneChildren = getPaneChildren(props);
  var tabsRef = useRef();

  var _c = __read(useMergeValue(paneChildren[0] && paneChildren[0].key, {
    defaultValue: 'defaultActiveTab' in props ? props.defaultActiveTab : undefined,
    value: 'activeTab' in props ? props.activeTab : undefined
  }), 2),
      activeTab = _c[0],
      setActiveTab = _c[1];

  var prefixCls = getPrefixCls('tabs');
  var size = props.size || (sizeList.indexOf(ctxSize) > -1 ? ctxSize : 'default');

  var animation = props.animation,
      className = props.className,
      direction = props.direction,
      style = props.style,
      type = props.type,
      justify = props.justify,
      destroyOnHide = props.destroyOnHide,
      lazyload = props.lazyload,
      onChange = props.onChange,
      _onClickTab = props.onClickTab,
      onDeleteTab = props.onDeleteTab,
      renderTabHeader = props.renderTabHeader,
      rest = __rest(props, ["animation", "className", "direction", "style", "type", "justify", "destroyOnHide", "lazyload", "onChange", "onClickTab", "onDeleteTab", "renderTabHeader"]);

  var idPrefix = useMemo(function () {
    return "".concat(prefixCls, "-").concat(__ARCO_TABS_SEED_INDEX++, "-");
  }, []);
  var tabPosition = direction === 'vertical' ? 'left' : props.tabPosition;
  var tabHeaderProps = {
    animation: isObject(animation) && 'inkBar' in animation ? animation.inkBar : true,
    activeTab: activeTab,
    tabPosition: tabPosition,
    direction: ['left', 'right'].indexOf(tabPosition) > -1 ? 'vertical' : 'horizontal',
    paneChildren: paneChildren,
    onClickTab: function onClickTab(key) {
      isFunction(_onClickTab) && _onClickTab(key);

      if (key !== activeTab) {
        if (!('activeTab' in props)) {
          setActiveTab(key);
        }

        isFunction(onChange) && onChange(key);
      }
    },
    onDeleteTab: onDeleteTab,
    prefixCls: prefixCls
  };
  useImperativeHandle(ref, function () {
    return tabsRef;
  }, []);
  var TabContentDom = React.createElement(TabContent, {
    direction: ['left', 'right'].indexOf(tabPosition) > -1 ? 'vertical' : 'horizontal',
    animation: getTabPaneAnimation(props),
    activeTab: activeTab,
    paneChildren: paneChildren,
    prefixCls: prefixCls,
    destroyOnHide: destroyOnHide,
    lazyload: lazyload
  });
  return React.createElement("div", __assign({}, omit(rest, ['headerPadding', 'tabPosition', 'defaultActiveTab', 'showAddButton', 'extra', 'onAddTab', 'activeTab', 'overflow', 'editable', 'renderTabTitle', 'addButton', 'deleteButton', 'icons', 'children', 'size', 'type', 'scrollPosition', 'offsetAlign']), {
    style: style,
    className: cs(prefixCls, "".concat(prefixCls, "-").concat(['left', 'right'].indexOf(tabPosition) > -1 ? 'vertical' : 'horizontal'), "".concat(prefixCls, "-").concat(type), "".concat(prefixCls, "-").concat(tabPosition), "".concat(prefixCls, "-size-").concat(size), (_a = {}, _a["".concat(prefixCls, "-justify")] = justify, _a["".concat(prefixCls, "-rtl")] = rtl, _a), className),
    ref: tabsRef
  }), React.createElement(TabsContext.Provider, {
    value: __assign(__assign({}, tabHeaderProps), {
      getIdPrefix: function getIdPrefix(suffix) {
        return {
          tab: "".concat(idPrefix, "tab-").concat(suffix),
          tabpane: "".concat(idPrefix, "panel-").concat(suffix)
        };
      }
    })
  }, tabPosition === 'bottom' && TabContentDom, isFunction(renderTabHeader) ? renderTabHeader(__assign(__assign(__assign({}, omit(props, ['children', 'style', 'className'])), {
    size: size
  }), tabHeaderProps), TabHeader) : React.createElement(TabHeader, __assign({}, omit(props, ['children', 'style', 'className']), {
    size: size
  })), tabPosition !== 'bottom' && TabContentDom));
}

var ForwardRefTabs = React.forwardRef(Tabs);
var TabsComponent = ForwardRefTabs;
TabsComponent.displayName = 'Tabs';
TabsComponent.TabPane = TabPane;
export default TabsComponent;