Collapse.js 5.6 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126
  1. "use strict";
  2. "use client";
  3. var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
  4. var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
  5. Object.defineProperty(exports, "__esModule", {
  6. value: true
  7. });
  8. exports.default = void 0;
  9. var React = _interopRequireWildcard(require("react"));
  10. var _RightOutlined = _interopRequireDefault(require("@ant-design/icons/RightOutlined"));
  11. var _classnames = _interopRequireDefault(require("classnames"));
  12. var _rcCollapse = _interopRequireDefault(require("rc-collapse"));
  13. var _toArray = _interopRequireDefault(require("rc-util/lib/Children/toArray"));
  14. var _omit = _interopRequireDefault(require("rc-util/lib/omit"));
  15. var _motion = _interopRequireDefault(require("../_util/motion"));
  16. var _reactNode = require("../_util/reactNode");
  17. var _warning = require("../_util/warning");
  18. var _context = require("../config-provider/context");
  19. var _useSize = _interopRequireDefault(require("../config-provider/hooks/useSize"));
  20. var _CollapsePanel = _interopRequireDefault(require("./CollapsePanel"));
  21. var _style = _interopRequireDefault(require("./style"));
  22. const Collapse = /*#__PURE__*/React.forwardRef((props, ref) => {
  23. const {
  24. getPrefixCls,
  25. direction,
  26. expandIcon: contextExpandIcon,
  27. className: contextClassName,
  28. style: contextStyle
  29. } = (0, _context.useComponentConfig)('collapse');
  30. const {
  31. prefixCls: customizePrefixCls,
  32. className,
  33. rootClassName,
  34. style,
  35. bordered = true,
  36. ghost,
  37. size: customizeSize,
  38. expandIconPosition = 'start',
  39. children,
  40. destroyInactivePanel,
  41. destroyOnHidden,
  42. expandIcon
  43. } = props;
  44. const mergedSize = (0, _useSize.default)(ctx => {
  45. var _a;
  46. return (_a = customizeSize !== null && customizeSize !== void 0 ? customizeSize : ctx) !== null && _a !== void 0 ? _a : 'middle';
  47. });
  48. const prefixCls = getPrefixCls('collapse', customizePrefixCls);
  49. const rootPrefixCls = getPrefixCls();
  50. const [wrapCSSVar, hashId, cssVarCls] = (0, _style.default)(prefixCls);
  51. if (process.env.NODE_ENV !== 'production') {
  52. const warning = (0, _warning.devUseWarning)('Collapse');
  53. // Warning if use legacy type `expandIconPosition`
  54. process.env.NODE_ENV !== "production" ? warning(expandIconPosition !== 'left' && expandIconPosition !== 'right', 'deprecated', '`expandIconPosition` with `left` or `right` is deprecated. Please use `start` or `end` instead.') : void 0;
  55. warning.deprecated(!('destroyInactivePanel' in props), 'destroyInactivePanel', 'destroyOnHidden');
  56. }
  57. // Align with logic position
  58. const mergedExpandIconPosition = React.useMemo(() => {
  59. if (expandIconPosition === 'left') {
  60. return 'start';
  61. }
  62. return expandIconPosition === 'right' ? 'end' : expandIconPosition;
  63. }, [expandIconPosition]);
  64. const mergedExpandIcon = expandIcon !== null && expandIcon !== void 0 ? expandIcon : contextExpandIcon;
  65. const renderExpandIcon = React.useCallback((panelProps = {}) => {
  66. const icon = typeof mergedExpandIcon === 'function' ? mergedExpandIcon(panelProps) : (/*#__PURE__*/React.createElement(_RightOutlined.default, {
  67. rotate: panelProps.isActive ? direction === 'rtl' ? -90 : 90 : undefined,
  68. "aria-label": panelProps.isActive ? 'expanded' : 'collapsed'
  69. }));
  70. return (0, _reactNode.cloneElement)(icon, () => {
  71. var _a;
  72. return {
  73. className: (0, _classnames.default)((_a = icon.props) === null || _a === void 0 ? void 0 : _a.className, `${prefixCls}-arrow`)
  74. };
  75. });
  76. }, [mergedExpandIcon, prefixCls, direction]);
  77. const collapseClassName = (0, _classnames.default)(`${prefixCls}-icon-position-${mergedExpandIconPosition}`, {
  78. [`${prefixCls}-borderless`]: !bordered,
  79. [`${prefixCls}-rtl`]: direction === 'rtl',
  80. [`${prefixCls}-ghost`]: !!ghost,
  81. [`${prefixCls}-${mergedSize}`]: mergedSize !== 'middle'
  82. }, contextClassName, className, rootClassName, hashId, cssVarCls);
  83. const openMotion = React.useMemo(() => Object.assign(Object.assign({}, (0, _motion.default)(rootPrefixCls)), {
  84. motionAppear: false,
  85. leavedClassName: `${prefixCls}-content-hidden`
  86. }), [rootPrefixCls, prefixCls]);
  87. const items = React.useMemo(() => {
  88. if (!children) {
  89. return null;
  90. }
  91. return (0, _toArray.default)(children).map((child, index) => {
  92. var _a, _b;
  93. const childProps = child.props;
  94. if (childProps === null || childProps === void 0 ? void 0 : childProps.disabled) {
  95. const key = (_a = child.key) !== null && _a !== void 0 ? _a : String(index);
  96. const mergedChildProps = Object.assign(Object.assign({}, (0, _omit.default)(child.props, ['disabled'])), {
  97. key,
  98. collapsible: (_b = childProps.collapsible) !== null && _b !== void 0 ? _b : 'disabled'
  99. });
  100. return (0, _reactNode.cloneElement)(child, mergedChildProps);
  101. }
  102. return child;
  103. });
  104. }, [children]);
  105. return wrapCSSVar(
  106. /*#__PURE__*/
  107. // @ts-ignore
  108. React.createElement(_rcCollapse.default, Object.assign({
  109. ref: ref,
  110. openMotion: openMotion
  111. }, (0, _omit.default)(props, ['rootClassName']), {
  112. expandIcon: renderExpandIcon,
  113. prefixCls: prefixCls,
  114. className: collapseClassName,
  115. style: Object.assign(Object.assign({}, contextStyle), style),
  116. // TODO: In the future, destroyInactivePanel in rc-collapse needs to be upgrade to destroyOnHidden
  117. destroyInactivePanel: destroyOnHidden !== null && destroyOnHidden !== void 0 ? destroyOnHidden : destroyInactivePanel
  118. }), items));
  119. });
  120. if (process.env.NODE_ENV !== 'production') {
  121. Collapse.displayName = 'Collapse';
  122. }
  123. var _default = exports.default = Object.assign(Collapse, {
  124. Panel: _CollapsePanel.default
  125. });