Panel.js 4.7 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273747576777879808182838485868788899091929394
  1. import _objectSpread from "@babel/runtime/helpers/esm/objectSpread2";
  2. import _extends from "@babel/runtime/helpers/esm/extends";
  3. import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
  4. import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
  5. var _excluded = ["showArrow", "headerClass", "isActive", "onItemClick", "forceRender", "className", "classNames", "styles", "prefixCls", "collapsible", "accordion", "panelKey", "extra", "header", "expandIcon", "openMotion", "destroyInactivePanel", "children"];
  6. import classNames from 'classnames';
  7. import CSSMotion from 'rc-motion';
  8. import KeyCode from "rc-util/es/KeyCode";
  9. import React from 'react';
  10. import PanelContent from "./PanelContent";
  11. var CollapsePanel = /*#__PURE__*/React.forwardRef(function (props, ref) {
  12. var _props$showArrow = props.showArrow,
  13. showArrow = _props$showArrow === void 0 ? true : _props$showArrow,
  14. headerClass = props.headerClass,
  15. isActive = props.isActive,
  16. onItemClick = props.onItemClick,
  17. forceRender = props.forceRender,
  18. className = props.className,
  19. _props$classNames = props.classNames,
  20. customizeClassNames = _props$classNames === void 0 ? {} : _props$classNames,
  21. _props$styles = props.styles,
  22. styles = _props$styles === void 0 ? {} : _props$styles,
  23. prefixCls = props.prefixCls,
  24. collapsible = props.collapsible,
  25. accordion = props.accordion,
  26. panelKey = props.panelKey,
  27. extra = props.extra,
  28. header = props.header,
  29. expandIcon = props.expandIcon,
  30. openMotion = props.openMotion,
  31. destroyInactivePanel = props.destroyInactivePanel,
  32. children = props.children,
  33. resetProps = _objectWithoutProperties(props, _excluded);
  34. var disabled = collapsible === 'disabled';
  35. var ifExtraExist = extra !== null && extra !== undefined && typeof extra !== 'boolean';
  36. var collapsibleProps = _defineProperty(_defineProperty(_defineProperty({
  37. onClick: function onClick() {
  38. onItemClick === null || onItemClick === void 0 || onItemClick(panelKey);
  39. },
  40. onKeyDown: function onKeyDown(e) {
  41. if (e.key === 'Enter' || e.keyCode === KeyCode.ENTER || e.which === KeyCode.ENTER) {
  42. onItemClick === null || onItemClick === void 0 || onItemClick(panelKey);
  43. }
  44. },
  45. role: accordion ? 'tab' : 'button'
  46. }, 'aria-expanded', isActive), 'aria-disabled', disabled), "tabIndex", disabled ? -1 : 0);
  47. // ======================== Icon ========================
  48. var iconNodeInner = typeof expandIcon === 'function' ? expandIcon(props) : /*#__PURE__*/React.createElement("i", {
  49. className: "arrow"
  50. });
  51. var iconNode = iconNodeInner && /*#__PURE__*/React.createElement("div", _extends({
  52. className: "".concat(prefixCls, "-expand-icon")
  53. }, ['header', 'icon'].includes(collapsible) ? collapsibleProps : {}), iconNodeInner);
  54. var collapsePanelClassNames = classNames("".concat(prefixCls, "-item"), _defineProperty(_defineProperty({}, "".concat(prefixCls, "-item-active"), isActive), "".concat(prefixCls, "-item-disabled"), disabled), className);
  55. var headerClassName = classNames(headerClass, "".concat(prefixCls, "-header"), _defineProperty({}, "".concat(prefixCls, "-collapsible-").concat(collapsible), !!collapsible), customizeClassNames.header);
  56. // ======================== HeaderProps ========================
  57. var headerProps = _objectSpread({
  58. className: headerClassName,
  59. style: styles.header
  60. }, ['header', 'icon'].includes(collapsible) ? {} : collapsibleProps);
  61. // ======================== Render ========================
  62. return /*#__PURE__*/React.createElement("div", _extends({}, resetProps, {
  63. ref: ref,
  64. className: collapsePanelClassNames
  65. }), /*#__PURE__*/React.createElement("div", headerProps, showArrow && iconNode, /*#__PURE__*/React.createElement("span", _extends({
  66. className: "".concat(prefixCls, "-header-text")
  67. }, collapsible === 'header' ? collapsibleProps : {}), header), ifExtraExist && /*#__PURE__*/React.createElement("div", {
  68. className: "".concat(prefixCls, "-extra")
  69. }, extra)), /*#__PURE__*/React.createElement(CSSMotion, _extends({
  70. visible: isActive,
  71. leavedClassName: "".concat(prefixCls, "-content-hidden")
  72. }, openMotion, {
  73. forceRender: forceRender,
  74. removeOnLeave: destroyInactivePanel
  75. }), function (_ref, motionRef) {
  76. var motionClassName = _ref.className,
  77. motionStyle = _ref.style;
  78. return /*#__PURE__*/React.createElement(PanelContent, {
  79. ref: motionRef,
  80. prefixCls: prefixCls,
  81. className: motionClassName,
  82. classNames: customizeClassNames,
  83. style: motionStyle,
  84. styles: styles,
  85. isActive: isActive,
  86. forceRender: forceRender,
  87. role: accordion ? 'tabpanel' : void 0
  88. }, children);
  89. }));
  90. });
  91. export default CollapsePanel;