tdesign-react/lib/tabs/Tabs.js

TDesign Component for React

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

import { _ as _defineProperty } from '../_chunks/dep-cb0a3966.js';
import { _ as _slicedToArray } from '../_chunks/dep-48805ab8.js';
import React 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 useControlled from '../hooks/useControlled.js';
import '../_chunks/dep-eca3a3de.js';
import '../_chunks/dep-026a4c6b.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 '../_chunks/dep-c48e2ca1.js';
import '../hooks/useConfig.js';
import '../config-provider/ConfigContext.js';
import '../_chunks/dep-f97636ce.js';
import '../_chunks/dep-9dbbf468.js';
import 'dayjs';
import '../hooks/useAnimation.js';
import '../_chunks/dep-3a09424a.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 '../hooks/useLayoutEffect.js';
import '../_util/parseTNode.js';
import '../_chunks/dep-b908e1fe.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 children = props.children,
    list = props.list,
    placement = props.placement,
    dragSort = props.dragSort,
    className = props.className,
    style = props.style,
    onRemove = props.onRemove;
  var _useControlled = useControlled(props, "value", props.onChange),
    _useControlled2 = _slicedToArray(_useControlled, 2),
    value = _useControlled2[0],
    onChange = _useControlled2[1];
  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 handleChange = React.useCallback(function (v) {
    onChange === null || onChange === void 0 || onChange(v);
  }, [onChange]);
  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,
      onChange: handleChange
    })));
  }, [props, getDragProps, value, onRemove, itemList, 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