Collapse.js 4.9 KB

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