tdesign-react/lib/tabs/Tabs.js

TDesign Component for React

/**
 * tdesign v1.11.6
 * (c) 2025 tdesign
 * @license MIT
 */

import { _ as _slicedToArray } from '../_chunks/dep-889449c8.js';
import { _ as _defineProperty } from '../_chunks/dep-fb209a0c.js';
import React, { useEffect } from 'react';
import classNames from 'classnames';
import forwardRefWithStatics from '../_util/forwardRefWithStatics.js';
import TabNav from './TabNav.js';
import { useTabClass } from './useTabClass.js';
import TabPanel from './TabPanel.js';
import { tabsDefaultProps } from './defaultProps.js';
import useDragSorter from '../hooks/useDragSorter.js';
import useDefaultProps from '../hooks/useDefaultProps.js';
import '../_chunks/dep-901cf2d8.js';
import '../_chunks/dep-9a3c539e.js';
import 'hoist-non-react-statics';
import 'tdesign-icons-react';
import 'lodash-es';
import '../_util/noop.js';
import './TabNavItem.js';
import '../hooks/useRipple.js';
import '../hooks/useConfig.js';
import '../config-provider/ConfigContext.js';
import '../_chunks/dep-14e7d402.js';
import '../_chunks/dep-72ba05e7.js';
import 'dayjs';
import '../hooks/useAnimation.js';
import '../_util/setStyle.js';
import '../_util/dom.js';
import 'raf';
import '../_util/easing.js';
import '../hooks/useDomRefCallback.js';
import '../hooks/useGlobalIcon.js';
import './TabBar.js';
import '../hooks/useMutationObserver.js';
import '../hooks/useLatest.js';
import '../hooks/useResizeObserver.js';
import '../_util/parseTNode.js';
import '../_chunks/dep-fad5d621.js';
import '../hooks/useEventCallback.js';

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) { _defineProperty(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 Tabs = forwardRefWithStatics(function (originalProps, ref) {
  var props = useDefaultProps(originalProps, tabsDefaultProps);
  var defaultValue = props.defaultValue,
    children = props.children,
    list = props.list,
    placement = props.placement,
    tabValue = props.value,
    dragSort = props.dragSort,
    className = props.className,
    style = props.style,
    onRemove = props.onRemove,
    onChange = props.onChange;
  var _useTabClass = useTabClass(),
    tdTabsClassPrefix = _useTabClass.tdTabsClassPrefix,
    tdTabsClassGenerator = _useTabClass.tdTabsClassGenerator,
    tdClassGenerator = _useTabClass.tdClassGenerator;
  var targetClassNameRegExpStr = "^".concat(tdTabsClassPrefix, "(__nav-item|__nav-item-wrapper|__nav-item-text-wrapper)");
  var _useDragSorter = useDragSorter(_objectSpread(_objectSpread({}, props), {}, {
      sortOnDraggable: dragSort,
      onDragOverCheck: {
        x: true,
        targetClassNameRegExp: new RegExp(targetClassNameRegExpStr)
      }
    })),
    getDragProps = _useDragSorter.getDragProps;
  var memoChildren = React.useMemo(function () {
    if (!list || list.length === 0) {
      return children;
    }
    return list.map(function (panelProps) {
      return /* @__PURE__ */React.createElement(TabPanel, _objectSpread({
        key: panelProps.value
      }, panelProps));
    });
  }, [children, list]);
  var itemList = React.Children.map(memoChildren, function (child) {
    if (child && child.type === TabPanel) {
      return child.props;
    }
    return null;
  });
  var _React$useState = React.useState(function () {
      return defaultValue === void 0 && Array.isArray(itemList) && itemList.length !== 0 ? itemList[0].value : defaultValue;
    }),
    _React$useState2 = _slicedToArray(_React$useState, 2),
    value = _React$useState2[0],
    setValue = _React$useState2[1];
  useEffect(function () {
    if (tabValue !== void 0) {
      setValue(tabValue);
    }
  }, [tabValue]);
  var handleChange = React.useCallback(function (v) {
    if (tabValue === void 0) {
      setValue(v);
    }
    onChange === null || onChange === void 0 || onChange(v);
  }, [tabValue, onChange]);
  var handleClickTab = React.useCallback(function (v) {
    if (tabValue === void 0) {
      setValue(v);
    }
  }, [tabValue]);
  var headerNode = React.useMemo(function () {
    return /* @__PURE__ */React.createElement("div", {
      className: classNames(tdTabsClassGenerator("header"), tdClassGenerator("is-".concat(placement)))
    }, /* @__PURE__ */React.createElement(TabNav, _objectSpread(_objectSpread({}, props), {}, {
      getDragProps: getDragProps,
      activeValue: value,
      onRemove: onRemove,
      itemList: itemList,
      tabClick: handleClickTab,
      onChange: handleChange
    })));
  }, [props, getDragProps, value, onRemove, itemList, handleClickTab, handleChange, placement, tdTabsClassGenerator, tdClassGenerator]);
  return /* @__PURE__ */React.createElement("div", {
    ref: ref,
    className: classNames(tdTabsClassPrefix, className),
    style: style
  }, placement !== "bottom" ? headerNode : null, /* @__PURE__ */React.createElement("div", {
    className: classNames(tdTabsClassGenerator("content"), tdClassGenerator("is-".concat(placement)))
  }, React.Children.map(memoChildren, function (child) {
    if (child && child.type === TabPanel) {
      return /* @__PURE__ */React.createElement(TabPanel, _objectSpread(_objectSpread({}, child.props), {}, {
        isActive: child.props.value === value
      }));
    }
    return null;
  })), placement === "bottom" ? headerNode : null);
}, {
  TabPanel: TabPanel
});
Tabs.displayName = "Tabs";

export { Tabs as default };
//# sourceMappingURL=Tabs.js.map