Collapse.js 3.4 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677787980818283848586878889909192939495
  1. import _extends from "@babel/runtime/helpers/esm/extends";
  2. import _toConsumableArray from "@babel/runtime/helpers/esm/toConsumableArray";
  3. import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
  4. import _typeof from "@babel/runtime/helpers/esm/typeof";
  5. import classNames from 'classnames';
  6. import useMergedState from "rc-util/es/hooks/useMergedState";
  7. import warning from "rc-util/es/warning";
  8. import React from 'react';
  9. import useItems from "./hooks/useItems";
  10. import CollapsePanel from "./Panel";
  11. import pickAttrs from "rc-util/es/pickAttrs";
  12. function getActiveKeysArray(activeKey) {
  13. var currentActiveKey = activeKey;
  14. if (!Array.isArray(currentActiveKey)) {
  15. var activeKeyType = _typeof(currentActiveKey);
  16. currentActiveKey = activeKeyType === 'number' || activeKeyType === 'string' ? [currentActiveKey] : [];
  17. }
  18. return currentActiveKey.map(function (key) {
  19. return String(key);
  20. });
  21. }
  22. var Collapse = /*#__PURE__*/React.forwardRef(function (props, ref) {
  23. var _props$prefixCls = props.prefixCls,
  24. prefixCls = _props$prefixCls === void 0 ? 'rc-collapse' : _props$prefixCls,
  25. _props$destroyInactiv = props.destroyInactivePanel,
  26. destroyInactivePanel = _props$destroyInactiv === void 0 ? false : _props$destroyInactiv,
  27. style = props.style,
  28. accordion = props.accordion,
  29. className = props.className,
  30. children = props.children,
  31. collapsible = props.collapsible,
  32. openMotion = props.openMotion,
  33. expandIcon = props.expandIcon,
  34. rawActiveKey = props.activeKey,
  35. defaultActiveKey = props.defaultActiveKey,
  36. _onChange = props.onChange,
  37. items = props.items;
  38. var collapseClassName = classNames(prefixCls, className);
  39. var _useMergedState = useMergedState([], {
  40. value: rawActiveKey,
  41. onChange: function onChange(v) {
  42. return _onChange === null || _onChange === void 0 ? void 0 : _onChange(v);
  43. },
  44. defaultValue: defaultActiveKey,
  45. postState: getActiveKeysArray
  46. }),
  47. _useMergedState2 = _slicedToArray(_useMergedState, 2),
  48. activeKey = _useMergedState2[0],
  49. setActiveKey = _useMergedState2[1];
  50. var onItemClick = function onItemClick(key) {
  51. return setActiveKey(function () {
  52. if (accordion) {
  53. return activeKey[0] === key ? [] : [key];
  54. }
  55. var index = activeKey.indexOf(key);
  56. var isActive = index > -1;
  57. if (isActive) {
  58. return activeKey.filter(function (item) {
  59. return item !== key;
  60. });
  61. }
  62. return [].concat(_toConsumableArray(activeKey), [key]);
  63. });
  64. };
  65. // ======================== Children ========================
  66. warning(!children, '[rc-collapse] `children` will be removed in next major version. Please use `items` instead.');
  67. var mergedChildren = useItems(items, children, {
  68. prefixCls: prefixCls,
  69. accordion: accordion,
  70. openMotion: openMotion,
  71. expandIcon: expandIcon,
  72. collapsible: collapsible,
  73. destroyInactivePanel: destroyInactivePanel,
  74. onItemClick: onItemClick,
  75. activeKey: activeKey
  76. });
  77. // ======================== Render ========================
  78. return /*#__PURE__*/React.createElement("div", _extends({
  79. ref: ref,
  80. className: collapseClassName,
  81. style: style,
  82. role: accordion ? 'tablist' : undefined
  83. }, pickAttrs(props, {
  84. aria: true,
  85. data: true
  86. })), mergedChildren);
  87. });
  88. export default Object.assign(Collapse, {
  89. /**
  90. * @deprecated use `items` instead, will be removed in `v4.0.0`
  91. */
  92. Panel: CollapsePanel
  93. });