index.js 6.3 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126
  1. "use client";
  2. var __rest = this && this.__rest || function (s, e) {
  3. var t = {};
  4. for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0) t[p] = s[p];
  5. if (s != null && typeof Object.getOwnPropertySymbols === "function") for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
  6. if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i])) t[p[i]] = s[p[i]];
  7. }
  8. return t;
  9. };
  10. import * as React from 'react';
  11. import CloseOutlined from "@ant-design/icons/es/icons/CloseOutlined";
  12. import EllipsisOutlined from "@ant-design/icons/es/icons/EllipsisOutlined";
  13. import PlusOutlined from "@ant-design/icons/es/icons/PlusOutlined";
  14. import classNames from 'classnames';
  15. import RcTabs from 'rc-tabs';
  16. import { devUseWarning } from '../_util/warning';
  17. import { ConfigContext } from '../config-provider';
  18. import useCSSVarCls from '../config-provider/hooks/useCSSVarCls';
  19. import useSize from '../config-provider/hooks/useSize';
  20. import useAnimateConfig from './hooks/useAnimateConfig';
  21. import useLegacyItems from './hooks/useLegacyItems';
  22. import useStyle from './style';
  23. import TabPane from './TabPane';
  24. const InternalTabs = /*#__PURE__*/React.forwardRef((props, ref) => {
  25. var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l;
  26. const {
  27. type,
  28. className,
  29. rootClassName,
  30. size: customSize,
  31. onEdit,
  32. hideAdd,
  33. centered,
  34. addIcon,
  35. removeIcon,
  36. moreIcon,
  37. more,
  38. popupClassName,
  39. children,
  40. items,
  41. animated,
  42. style,
  43. indicatorSize,
  44. indicator,
  45. destroyInactiveTabPane,
  46. destroyOnHidden
  47. } = props,
  48. otherProps = __rest(props, ["type", "className", "rootClassName", "size", "onEdit", "hideAdd", "centered", "addIcon", "removeIcon", "moreIcon", "more", "popupClassName", "children", "items", "animated", "style", "indicatorSize", "indicator", "destroyInactiveTabPane", "destroyOnHidden"]);
  49. const {
  50. prefixCls: customizePrefixCls
  51. } = otherProps;
  52. const {
  53. direction,
  54. tabs,
  55. getPrefixCls,
  56. getPopupContainer
  57. } = React.useContext(ConfigContext);
  58. const prefixCls = getPrefixCls('tabs', customizePrefixCls);
  59. const rootCls = useCSSVarCls(prefixCls);
  60. const [wrapCSSVar, hashId, cssVarCls] = useStyle(prefixCls, rootCls);
  61. const tabsRef = React.useRef(null);
  62. React.useImperativeHandle(ref, () => ({
  63. nativeElement: tabsRef.current
  64. }));
  65. let editable;
  66. if (type === 'editable-card') {
  67. editable = {
  68. onEdit: (editType, {
  69. key,
  70. event
  71. }) => {
  72. onEdit === null || onEdit === void 0 ? void 0 : onEdit(editType === 'add' ? event : key, editType);
  73. },
  74. removeIcon: (_a = removeIcon !== null && removeIcon !== void 0 ? removeIcon : tabs === null || tabs === void 0 ? void 0 : tabs.removeIcon) !== null && _a !== void 0 ? _a : /*#__PURE__*/React.createElement(CloseOutlined, null),
  75. addIcon: (addIcon !== null && addIcon !== void 0 ? addIcon : tabs === null || tabs === void 0 ? void 0 : tabs.addIcon) || /*#__PURE__*/React.createElement(PlusOutlined, null),
  76. showAdd: hideAdd !== true
  77. };
  78. }
  79. const rootPrefixCls = getPrefixCls();
  80. if (process.env.NODE_ENV !== 'production') {
  81. const warning = devUseWarning('Tabs');
  82. process.env.NODE_ENV !== "production" ? warning(!('onPrevClick' in props) && !('onNextClick' in props), 'breaking', '`onPrevClick` and `onNextClick` has been removed. Please use `onTabScroll` instead.') : void 0;
  83. process.env.NODE_ENV !== "production" ? warning(!(indicatorSize || (tabs === null || tabs === void 0 ? void 0 : tabs.indicatorSize)), 'deprecated', '`indicatorSize` has been deprecated. Please use `indicator={{ size: ... }}` instead.') : void 0;
  84. warning.deprecated(!('destroyInactiveTabPane' in props || (items === null || items === void 0 ? void 0 : items.some(item => 'destroyInactiveTabPane' in item))), 'destroyInactiveTabPane', 'destroyOnHidden');
  85. }
  86. const size = useSize(customSize);
  87. const mergedItems = useLegacyItems(items, children);
  88. const mergedAnimated = useAnimateConfig(prefixCls, animated);
  89. const mergedStyle = Object.assign(Object.assign({}, tabs === null || tabs === void 0 ? void 0 : tabs.style), style);
  90. const mergedIndicator = {
  91. align: (_b = indicator === null || indicator === void 0 ? void 0 : indicator.align) !== null && _b !== void 0 ? _b : (_c = tabs === null || tabs === void 0 ? void 0 : tabs.indicator) === null || _c === void 0 ? void 0 : _c.align,
  92. size: (_g = (_e = (_d = indicator === null || indicator === void 0 ? void 0 : indicator.size) !== null && _d !== void 0 ? _d : indicatorSize) !== null && _e !== void 0 ? _e : (_f = tabs === null || tabs === void 0 ? void 0 : tabs.indicator) === null || _f === void 0 ? void 0 : _f.size) !== null && _g !== void 0 ? _g : tabs === null || tabs === void 0 ? void 0 : tabs.indicatorSize
  93. };
  94. return wrapCSSVar(/*#__PURE__*/React.createElement(RcTabs, Object.assign({
  95. ref: tabsRef,
  96. direction: direction,
  97. getPopupContainer: getPopupContainer
  98. }, otherProps, {
  99. items: mergedItems,
  100. className: classNames({
  101. [`${prefixCls}-${size}`]: size,
  102. [`${prefixCls}-card`]: ['card', 'editable-card'].includes(type),
  103. [`${prefixCls}-editable-card`]: type === 'editable-card',
  104. [`${prefixCls}-centered`]: centered
  105. }, tabs === null || tabs === void 0 ? void 0 : tabs.className, className, rootClassName, hashId, cssVarCls, rootCls),
  106. popupClassName: classNames(popupClassName, hashId, cssVarCls, rootCls),
  107. style: mergedStyle,
  108. editable: editable,
  109. more: Object.assign({
  110. icon: (_l = (_k = (_j = (_h = tabs === null || tabs === void 0 ? void 0 : tabs.more) === null || _h === void 0 ? void 0 : _h.icon) !== null && _j !== void 0 ? _j : tabs === null || tabs === void 0 ? void 0 : tabs.moreIcon) !== null && _k !== void 0 ? _k : moreIcon) !== null && _l !== void 0 ? _l : /*#__PURE__*/React.createElement(EllipsisOutlined, null),
  111. transitionName: `${rootPrefixCls}-slide-up`
  112. }, more),
  113. prefixCls: prefixCls,
  114. animated: mergedAnimated,
  115. indicator: mergedIndicator,
  116. // TODO: In the future, destroyInactiveTabPane in rc-tabs needs to be upgrade to destroyOnHidden
  117. destroyInactiveTabPane: destroyOnHidden !== null && destroyOnHidden !== void 0 ? destroyOnHidden : destroyInactiveTabPane
  118. })));
  119. });
  120. const Tabs = InternalTabs;
  121. Tabs.TabPane = TabPane;
  122. if (process.env.NODE_ENV !== 'production') {
  123. Tabs.displayName = 'Tabs';
  124. }
  125. export default Tabs;