rc-collapse - npm Package Compare versions

Comparing version 3.4.2 to 3.5.0

es/Collapse.d.ts

@@ -1,24 +0,8 @@
-import * as React from 'react';
+/// <reference types="react" />
+import CollapsePanel from './Panel';
 import type { CollapseProps } from './interface';
-import CollapsePanel from './Panel';
-export interface CollapseState {
-    activeKey: React.Key[];
-}
-declare class Collapse extends React.Component<CollapseProps, CollapseState> {
-    static defaultProps: {
-        prefixCls: string;
-        onChange(): void;
-        accordion: boolean;
-        destroyInactivePanel: boolean;
-    };
-    static Panel: typeof CollapsePanel;
-    constructor(props: CollapseProps);
-    shouldComponentUpdate(nextProps: CollapseProps, nextState: CollapseState): boolean;
-    onClickItem: (key: React.Key) => void;
-    static getDerivedStateFromProps(nextProps: CollapseProps): Partial<CollapseState>;
-    getNewChild: (child: React.ReactElement, index: number) => React.ReactElement<any, string | React.JSXElementConstructor<any>>;
-    getItems: () => React.ReactElement<any, string | React.JSXElementConstructor<any>>[];
-    setActiveKey: (activeKey: React.Key[]) => void;
-    render(): JSX.Element;
-}
-export default Collapse;
+declare function Collapse(props: CollapseProps): JSX.Element;
+declare const _default: typeof Collapse & {
+    Panel: typeof CollapsePanel;
+};
+export default _default;

es/Collapse.js

@@ -1,15 +0,9 @@
-import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
 import _toConsumableArray from "@babel/runtime/helpers/esm/toConsumableArray";
-import _classCallCheck from "@babel/runtime/helpers/esm/classCallCheck";
-import _createClass from "@babel/runtime/helpers/esm/createClass";
-import _inherits from "@babel/runtime/helpers/esm/inherits";
-import _createSuper from "@babel/runtime/helpers/esm/createSuper";
+import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
 import _typeof from "@babel/runtime/helpers/esm/typeof";
-
-/* eslint-disable react/prop-types */
+import React from 'react';
 import classNames from 'classnames';
 import toArray from "rc-util/es/Children/toArray";
-import * as React from 'react';
-import shallowEqual from 'shallowequal';
-import CollapsePanel from './Panel';
+import useMergedState from "rc-util/es/hooks/useMergedState";
+import CollapsePanel from "./Panel";
 
@@ -30,163 +24,107 @@ function getActiveKeysArray(activeKey) {
 
-var Collapse = /*#__PURE__*/function (_React$Component) {
-  _inherits(Collapse, _React$Component);
+function Collapse(props) {
+  var _props$prefixCls = props.prefixCls,
+      prefixCls = _props$prefixCls === void 0 ? 'rc-collapse' : _props$prefixCls,
+      _props$destroyInactiv = props.destroyInactivePanel,
+      destroyInactivePanel = _props$destroyInactiv === void 0 ? false : _props$destroyInactiv,
+      style = props.style,
+      accordion = props.accordion,
+      className = props.className,
+      rawChildren = props.children,
+      collapsible = props.collapsible,
+      openMotion = props.openMotion,
+      expandIcon = props.expandIcon,
+      rawActiveKey = props.activeKey,
+      defaultActiveKey = props.defaultActiveKey,
+      _onChange = props.onChange;
+  var collapseClassName = classNames(prefixCls, className);
 
-  var _super = _createSuper(Collapse);
+  var _useMergedState = useMergedState([], {
+    value: rawActiveKey,
+    onChange: function onChange(v) {
+      return _onChange === null || _onChange === void 0 ? void 0 : _onChange(v);
+    },
+    defaultValue: defaultActiveKey,
+    postState: getActiveKeysArray
+  }),
+      _useMergedState2 = _slicedToArray(_useMergedState, 2),
+      activeKey = _useMergedState2[0],
+      setActiveKey = _useMergedState2[1];
 
-  function Collapse(_props) {
-    var _this;
-
-    _classCallCheck(this, Collapse);
-
-    _this = _super.call(this, _props);
-
-    _this.onClickItem = function (key) {
-      var activeKey = _this.state.activeKey;
-
-      if (_this.props.accordion) {
-        activeKey = activeKey[0] === key ? [] : [key];
-      } else {
-        activeKey = _toConsumableArray(activeKey);
-        var index = activeKey.indexOf(key);
-        var isActive = index > -1;
-
-        if (isActive) {
-          // remove active state
-          activeKey.splice(index, 1);
-        } else {
-          activeKey.push(key);
-        }
-      }
-
-      _this.setActiveKey(activeKey);
-    };
-
-    _this.getNewChild = function (child, index) {
-      if (!child) return null;
-      var activeKey = _this.state.activeKey;
-      var _this$props = _this.props,
-          prefixCls = _this$props.prefixCls,
-          openMotion = _this$props.openMotion,
-          accordion = _this$props.accordion,
-          rootDestroyInactivePanel = _this$props.destroyInactivePanel,
-          expandIcon = _this$props.expandIcon,
-          collapsible = _this$props.collapsible; // If there is no key provide, use the panel order as default key
-
-      var key = child.key || String(index);
-      var _child$props = child.props,
-          header = _child$props.header,
-          headerClass = _child$props.headerClass,
-          destroyInactivePanel = _child$props.destroyInactivePanel,
-          childCollapsible = _child$props.collapsible;
-      var isActive = false;
-
+  var onClickItem = function onClickItem(key) {
+    return setActiveKey(function () {
       if (accordion) {
-        isActive = activeKey[0] === key;
-      } else {
-        isActive = activeKey.indexOf(key) > -1;
+        return activeKey[0] === key ? [] : [key];
       }
 
-      var mergeCollapsible = childCollapsible !== null && childCollapsible !== void 0 ? childCollapsible : collapsible;
-      var props = {
-        key: key,
-        panelKey: key,
-        header: header,
-        headerClass: headerClass,
-        isActive: isActive,
-        prefixCls: prefixCls,
-        destroyInactivePanel: destroyInactivePanel !== null && destroyInactivePanel !== void 0 ? destroyInactivePanel : rootDestroyInactivePanel,
-        openMotion: openMotion,
-        accordion: accordion,
-        children: child.props.children,
-        onItemClick: mergeCollapsible === 'disabled' ? null : _this.onClickItem,
-        expandIcon: expandIcon,
-        collapsible: mergeCollapsible
-      }; // https://github.com/ant-design/ant-design/issues/20479
+      var index = activeKey.indexOf(key);
+      var isActive = index > -1;
 
-      if (typeof child.type === 'string') {
-        return child;
+      if (isActive) {
+        return activeKey.filter(function (item) {
+          return item !== key;
+        });
       }
 
-      Object.keys(props).forEach(function (propName) {
-        if (typeof props[propName] === 'undefined') {
-          delete props[propName];
-        }
-      });
-      return /*#__PURE__*/React.cloneElement(child, props);
-    };
+      return [].concat(_toConsumableArray(activeKey), [key]);
+    });
+  }; // ======================== Children ========================
 
-    _this.getItems = function () {
-      var children = _this.props.children;
-      return toArray(children).map(_this.getNewChild);
-    };
 
-    _this.setActiveKey = function (activeKey) {
-      if (!('activeKey' in _this.props)) {
-        _this.setState({
-          activeKey: activeKey
-        });
-      }
+  var getNewChild = function getNewChild(child, index) {
+    if (!child) return null;
+    var key = child.key || String(index);
+    var _child$props = child.props,
+        header = _child$props.header,
+        headerClass = _child$props.headerClass,
+        childDestroyInactivePanel = _child$props.destroyInactivePanel,
+        childCollapsible = _child$props.collapsible;
+    var isActive = false;
 
-      _this.props.onChange(_this.props.accordion ? activeKey[0] : activeKey);
-    };
-
-    var _activeKey = _props.activeKey,
-        defaultActiveKey = _props.defaultActiveKey;
-    var currentActiveKey = defaultActiveKey;
-
-    if ('activeKey' in _props) {
-      currentActiveKey = _activeKey;
+    if (accordion) {
+      isActive = activeKey[0] === key;
+    } else {
+      isActive = activeKey.indexOf(key) > -1;
     }
 
-    _this.state = {
-      activeKey: getActiveKeysArray(currentActiveKey)
-    };
-    return _this;
-  }
+    var mergeCollapsible = childCollapsible !== null && childCollapsible !== void 0 ? childCollapsible : collapsible;
+    var childProps = {
+      key: key,
+      panelKey: key,
+      header: header,
+      headerClass: headerClass,
+      isActive: isActive,
+      prefixCls: prefixCls,
+      destroyInactivePanel: childDestroyInactivePanel !== null && childDestroyInactivePanel !== void 0 ? childDestroyInactivePanel : destroyInactivePanel,
+      openMotion: openMotion,
+      accordion: accordion,
+      children: child.props.children,
+      onItemClick: mergeCollapsible === 'disabled' ? null : onClickItem,
+      expandIcon: expandIcon,
+      collapsible: mergeCollapsible
+    }; // https://github.com/ant-design/ant-design/issues/20479
 
-  _createClass(Collapse, [{
-    key: "shouldComponentUpdate",
-    value: function shouldComponentUpdate(nextProps, nextState) {
-      return !shallowEqual(this.props, nextProps) || !shallowEqual(this.state, nextState);
+    if (typeof child.type === 'string') {
+      return child;
     }
-  }, {
-    key: "render",
-    value: function render() {
-      var _classNames;
 
-      var _this$props2 = this.props,
-          prefixCls = _this$props2.prefixCls,
-          className = _this$props2.className,
-          style = _this$props2.style,
-          accordion = _this$props2.accordion;
-      var collapseClassName = classNames((_classNames = {}, _defineProperty(_classNames, prefixCls, true), _defineProperty(_classNames, className, !!className), _classNames));
-      return /*#__PURE__*/React.createElement("div", {
-        className: collapseClassName,
-        style: style,
-        role: accordion ? 'tablist' : null
-      }, this.getItems());
-    }
-  }], [{
-    key: "getDerivedStateFromProps",
-    value: function getDerivedStateFromProps(nextProps) {
-      var newState = {};
-
-      if ('activeKey' in nextProps) {
-        newState.activeKey = getActiveKeysArray(nextProps.activeKey);
+    Object.keys(childProps).forEach(function (propName) {
+      if (typeof childProps[propName] === 'undefined') {
+        delete childProps[propName];
       }
+    });
+    return /*#__PURE__*/React.cloneElement(child, childProps);
+  };
 
-      return newState;
-    }
-  }]);
+  var children = toArray(rawChildren).map(getNewChild); // ======================== Render ========================
 
-  return Collapse;
-}(React.Component);
+  return /*#__PURE__*/React.createElement("div", {
+    className: collapseClassName,
+    style: style,
+    role: accordion ? 'tablist' : undefined
+  }, children);
+}
 
-Collapse.defaultProps = {
-  prefixCls: 'rc-collapse',
-  onChange: function onChange() {},
-  accordion: false,
-  destroyInactivePanel: false
-};
-Collapse.Panel = CollapsePanel;
-export default Collapse;
+export default Object.assign(Collapse, {
+  Panel: CollapsePanel
+});

es/index.js

@@ -1,4 +0,4 @@
-import Collapse from './Collapse';
+import Collapse from "./Collapse";
 export default Collapse;
 var Panel = Collapse.Panel;
 export { Panel };

es/Panel.d.ts

@@ -1,18 +0,4 @@
-import * as React from 'react';
+/// <reference types="react" />
 import type { CollapsePanelProps } from './interface';
-declare class CollapsePanel extends React.Component<CollapsePanelProps, any> {
-    static defaultProps: {
-        showArrow: boolean;
-        isActive: boolean;
-        onItemClick(): void;
-        headerClass: string;
-        forceRender: boolean;
-    };
-    shouldComponentUpdate(nextProps: CollapsePanelProps): boolean;
-    onItemClick: () => void;
-    handleKeyPress: (e: React.KeyboardEvent) => void;
-    renderIcon: () => JSX.Element;
-    renderTitle: () => JSX.Element;
-    render(): JSX.Element;
-}
+declare function CollapsePanel(props: CollapsePanelProps): JSX.Element;
 export default CollapsePanel;

es/Panel.js

 import _extends from "@babel/runtime/helpers/esm/extends";
 import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
 import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
-import _classCallCheck from "@babel/runtime/helpers/esm/classCallCheck";
-import _createClass from "@babel/runtime/helpers/esm/createClass";
-import _inherits from "@babel/runtime/helpers/esm/inherits";
-import _createSuper from "@babel/runtime/helpers/esm/createSuper";
-var _excluded = ["className", "id", "style", "prefixCls", "headerClass", "children", "isActive", "destroyInactivePanel", "accordion", "forceRender", "openMotion", "extra", "collapsible"];
-
-/* eslint-disable react/prop-types */
+var _excluded = ["showArrow", "headerClass", "isActive", "onItemClick", "forceRender", "className", "style", "prefixCls", "collapsible", "accordion", "panelKey", "extra", "header", "expandIcon", "openMotion", "destroyInactivePanel", "children"];
+import React from 'react';
 import classNames from 'classnames';
+import KeyCode from "rc-util/es/KeyCode";
 import CSSMotion from 'rc-motion';
-import * as React from 'react';
-import shallowEqual from 'shallowequal';
-import PanelContent from './PanelContent';
+import PanelContent from "./PanelContent";
 
-var CollapsePanel = /*#__PURE__*/function (_React$Component) {
-  _inherits(CollapsePanel, _React$Component);
+function CollapsePanel(props) {
+  var _classNames, _classNames2;
 
-  var _super = _createSuper(CollapsePanel);
+  var _props$showArrow = props.showArrow,
+      showArrow = _props$showArrow === void 0 ? true : _props$showArrow,
+      headerClass = props.headerClass,
+      isActive = props.isActive,
+      onItemClick = props.onItemClick,
+      forceRender = props.forceRender,
+      className = props.className,
+      style = props.style,
+      prefixCls = props.prefixCls,
+      collapsible = props.collapsible,
+      accordion = props.accordion,
+      panelKey = props.panelKey,
+      extra = props.extra,
+      header = props.header,
+      expandIcon = props.expandIcon,
+      openMotion = props.openMotion,
+      destroyInactivePanel = props.destroyInactivePanel,
+      children = props.children,
+      resetProps = _objectWithoutProperties(props, _excluded);
 
-  function CollapsePanel() {
-    var _this;
+  var disabled = collapsible === 'disabled';
+  var collapsibleHeader = collapsible === 'header';
+  var collapsibleIcon = collapsible === 'icon';
+  var ifExtraExist = extra !== null && extra !== undefined && typeof extra !== 'boolean';
 
-    _classCallCheck(this, CollapsePanel);
+  var handleItemClick = function handleItemClick() {
+    onItemClick === null || onItemClick === void 0 ? void 0 : onItemClick(panelKey);
+  };
 
-    for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
-      args[_key] = arguments[_key];
+  var handleKeyPress = function handleKeyPress(e) {
+    if (e.key === 'Enter' || e.keyCode === KeyCode.ENTER || e.which === KeyCode.ENTER) {
+      handleItemClick();
     }
+  }; // ======================== Icon ========================
 
-    _this = _super.call.apply(_super, [this].concat(args));
 
-    _this.onItemClick = function () {
-      var _this$props = _this.props,
-          onItemClick = _this$props.onItemClick,
-          panelKey = _this$props.panelKey;
+  var iconNode = typeof expandIcon === 'function' ? expandIcon(props) : /*#__PURE__*/React.createElement("i", {
+    className: "arrow"
+  });
 
-      if (typeof onItemClick === 'function') {
-        onItemClick(panelKey);
-      }
-    };
-
-    _this.handleKeyPress = function (e) {
-      if (e.key === 'Enter' || e.keyCode === 13 || e.which === 13) {
-        _this.onItemClick();
-      }
-    };
-
-    _this.renderIcon = function () {
-      var _this$props2 = _this.props,
-          showArrow = _this$props2.showArrow,
-          expandIcon = _this$props2.expandIcon,
-          prefixCls = _this$props2.prefixCls,
-          collapsible = _this$props2.collapsible;
-
-      if (!showArrow) {
-        return null;
-      }
-
-      var iconNode = typeof expandIcon === 'function' ? expandIcon(_this.props) : /*#__PURE__*/React.createElement("i", {
-        className: "arrow"
-      });
-      return iconNode && /*#__PURE__*/React.createElement("div", {
-        className: "".concat(prefixCls, "-expand-icon"),
-        onClick: collapsible === 'header' || collapsible === 'icon' ? _this.onItemClick : null
-      }, iconNode);
-    };
-
-    _this.renderTitle = function () {
-      var _this$props3 = _this.props,
-          header = _this$props3.header,
-          prefixCls = _this$props3.prefixCls,
-          collapsible = _this$props3.collapsible;
-      return /*#__PURE__*/React.createElement("span", {
-        className: "".concat(prefixCls, "-header-text"),
-        onClick: collapsible === 'header' ? _this.onItemClick : null
-      }, header);
-    };
-
-    return _this;
+  if (iconNode) {
+    iconNode = /*#__PURE__*/React.createElement("div", {
+      className: "".concat(prefixCls, "-expand-icon"),
+      onClick: ['header', 'icon'].includes(collapsible) ? handleItemClick : undefined
+    }, iconNode);
   }
 
-  _createClass(CollapsePanel, [{
-    key: "shouldComponentUpdate",
-    value: function shouldComponentUpdate(nextProps) {
-      return !shallowEqual(this.props, nextProps);
-    }
-  }, {
-    key: "render",
-    value: function render() {
-      var _classNames, _classNames2;
+  var collapsePanelClassNames = classNames((_classNames = {}, _defineProperty(_classNames, "".concat(prefixCls, "-item"), true), _defineProperty(_classNames, "".concat(prefixCls, "-item-active"), isActive), _defineProperty(_classNames, "".concat(prefixCls, "-item-disabled"), disabled), _classNames), className);
+  var headerClassName = classNames((_classNames2 = {}, _defineProperty(_classNames2, "".concat(prefixCls, "-header"), true), _defineProperty(_classNames2, "headerClass", headerClass), _defineProperty(_classNames2, "".concat(prefixCls, "-header-collapsible-only"), collapsibleHeader), _defineProperty(_classNames2, "".concat(prefixCls, "-icon-collapsible-only"), collapsibleIcon), _classNames2)); // ======================== HeaderProps ========================
 
-      var _this$props4 = this.props,
-          className = _this$props4.className,
-          id = _this$props4.id,
-          style = _this$props4.style,
-          prefixCls = _this$props4.prefixCls,
-          headerClass = _this$props4.headerClass,
-          children = _this$props4.children,
-          isActive = _this$props4.isActive,
-          destroyInactivePanel = _this$props4.destroyInactivePanel,
-          accordion = _this$props4.accordion,
-          forceRender = _this$props4.forceRender,
-          openMotion = _this$props4.openMotion,
-          extra = _this$props4.extra,
-          collapsible = _this$props4.collapsible,
-          rest = _objectWithoutProperties(_this$props4, _excluded);
+  var headerProps = {
+    className: headerClassName,
+    'aria-expanded': isActive,
+    'aria-disabled': disabled,
+    onKeyPress: handleKeyPress
+  };
 
-      var disabled = collapsible === 'disabled';
-      var collapsibleHeader = collapsible === 'header';
-      var collapsibleIcon = collapsible === 'icon';
-      var itemCls = classNames((_classNames = {}, _defineProperty(_classNames, "".concat(prefixCls, "-item"), true), _defineProperty(_classNames, "".concat(prefixCls, "-item-active"), isActive), _defineProperty(_classNames, "".concat(prefixCls, "-item-disabled"), disabled), _classNames), className);
-      var headerCls = classNames("".concat(prefixCls, "-header"), (_classNames2 = {}, _defineProperty(_classNames2, headerClass, headerClass), _defineProperty(_classNames2, "".concat(prefixCls, "-header-collapsible-only"), collapsibleHeader), _defineProperty(_classNames2, "".concat(prefixCls, "-icon-collapsible-only"), collapsibleIcon), _classNames2));
-      /** header 节点属性 */
+  if (!collapsibleHeader && !collapsibleIcon) {
+    headerProps.onClick = handleItemClick;
+    headerProps.role = accordion ? 'tab' : 'button';
+    headerProps.tabIndex = disabled ? -1 : 0;
+  } // ======================== Render ========================
 
-      var headerProps = {
-        className: headerCls,
-        'aria-expanded': isActive,
-        'aria-disabled': disabled,
-        onKeyPress: this.handleKeyPress
-      };
 
-      if (!collapsibleHeader && !collapsibleIcon) {
-        headerProps.onClick = this.onItemClick;
-        headerProps.role = accordion ? 'tab' : 'button';
-        headerProps.tabIndex = disabled ? -1 : 0;
-      }
+  return /*#__PURE__*/React.createElement("div", _extends({}, resetProps, {
+    className: collapsePanelClassNames
+  }), /*#__PURE__*/React.createElement("div", headerProps, showArrow && iconNode, /*#__PURE__*/React.createElement("span", {
+    className: "".concat(prefixCls, "-header-text"),
+    onClick: collapsible === 'header' ? handleItemClick : undefined
+  }, header), ifExtraExist && /*#__PURE__*/React.createElement("div", {
+    className: "".concat(prefixCls, "-extra")
+  }, extra)), /*#__PURE__*/React.createElement(CSSMotion, _extends({
+    visible: isActive,
+    leavedClassName: "".concat(prefixCls, "-content-hidden")
+  }, openMotion, {
+    forceRender: forceRender,
+    removeOnLeave: destroyInactivePanel
+  }), function (_ref, ref) {
+    var motionClassName = _ref.className,
+        motionStyle = _ref.style;
+    return /*#__PURE__*/React.createElement(PanelContent, {
+      ref: ref,
+      prefixCls: prefixCls,
+      className: motionClassName,
+      style: motionStyle,
+      isActive: isActive,
+      forceRender: forceRender,
+      role: accordion ? 'tabpanel' : void 0
+    }, children);
+  }));
+}
 
-      var ifExtraExist = extra !== null && extra !== undefined && typeof extra !== 'boolean'; // https://github.com/ant-design/ant-design/pull/37419#issuecomment-1238812797
-
-      delete rest.header;
-      delete rest.panelKey;
-      delete rest.onItemClick;
-      delete rest.showArrow;
-      delete rest.expandIcon;
-      return /*#__PURE__*/React.createElement("div", _extends({}, rest, {
-        className: itemCls,
-        style: style,
-        id: id
-      }), /*#__PURE__*/React.createElement("div", headerProps, this.renderIcon(), this.renderTitle(), ifExtraExist && /*#__PURE__*/React.createElement("div", {
-        className: "".concat(prefixCls, "-extra")
-      }, extra)), /*#__PURE__*/React.createElement(CSSMotion, _extends({
-        visible: isActive,
-        leavedClassName: "".concat(prefixCls, "-content-hidden")
-      }, openMotion, {
-        forceRender: forceRender,
-        removeOnLeave: destroyInactivePanel
-      }), function (_ref, ref) {
-        var motionClassName = _ref.className,
-            motionStyle = _ref.style;
-        return /*#__PURE__*/React.createElement(PanelContent, {
-          ref: ref,
-          prefixCls: prefixCls,
-          className: motionClassName,
-          style: motionStyle,
-          isActive: isActive,
-          forceRender: forceRender,
-          role: accordion ? 'tabpanel' : null
-        }, children);
-      }));
-    }
-  }]);
-
-  return CollapsePanel;
-}(React.Component);
-
-CollapsePanel.defaultProps = {
-  showArrow: true,
-  isActive: false,
-  onItemClick: function onItemClick() {},
-  headerClass: '',
-  forceRender: false
-};
 export default CollapsePanel;

es/PanelContent.d.ts

@@ -1,3 +0,3 @@
-import * as React from 'react';
-import { CollapsePanelProps } from './interface';
+import React from 'react';
+import type { CollapsePanelProps } from './interface';
 declare const PanelContent: React.ForwardRefExoticComponent<CollapsePanelProps & {
@@ -4,0 +4,0 @@ children: React.ReactNode;

es/PanelContent.js

 import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
 import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
-
-/* eslint-disable no-underscore-dangle */
-
-/* eslint-disable react/prop-types */
-import * as React from 'react';
+import React from 'react';
 import classnames from 'classnames';
@@ -9,0 +5,0 @@ var PanelContent = /*#__PURE__*/React.forwardRef(function (props, ref) {

lib/Collapse.d.ts

@@ -1,24 +0,8 @@
-import * as React from 'react';
+/// <reference types="react" />
+import CollapsePanel from './Panel';
 import type { CollapseProps } from './interface';
-import CollapsePanel from './Panel';
-export interface CollapseState {
-    activeKey: React.Key[];
-}
-declare class Collapse extends React.Component<CollapseProps, CollapseState> {
-    static defaultProps: {
-        prefixCls: string;
-        onChange(): void;
-        accordion: boolean;
-        destroyInactivePanel: boolean;
-    };
-    static Panel: typeof CollapsePanel;
-    constructor(props: CollapseProps);
-    shouldComponentUpdate(nextProps: CollapseProps, nextState: CollapseState): boolean;
-    onClickItem: (key: React.Key) => void;
-    static getDerivedStateFromProps(nextProps: CollapseProps): Partial<CollapseState>;
-    getNewChild: (child: React.ReactElement, index: number) => React.ReactElement<any, string | React.JSXElementConstructor<any>>;
-    getItems: () => React.ReactElement<any, string | React.JSXElementConstructor<any>>[];
-    setActiveKey: (activeKey: React.Key[]) => void;
-    render(): JSX.Element;
-}
-export default Collapse;
+declare function Collapse(props: CollapseProps): JSX.Element;
+declare const _default: typeof Collapse & {
+    Panel: typeof CollapsePanel;
+};
+export default _default;

lib/Collapse.js

@@ -5,4 +5,2 @@ "use strict";
 
-var _typeof3 = require("@babel/runtime/helpers/typeof");
-
 Object.defineProperty(exports, "__esModule", {
@@ -13,16 +11,10 @@ value: true
 
-var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
-
 var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));
 
-var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
 
-var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/createClass"));
+var _typeof2 = _interopRequireDefault(require("@babel/runtime/helpers/typeof"));
 
-var _inherits2 = _interopRequireDefault(require("@babel/runtime/helpers/inherits"));
+var _react = _interopRequireDefault(require("react"));
 
-var _createSuper2 = _interopRequireDefault(require("@babel/runtime/helpers/createSuper"));
-
-var _typeof2 = _interopRequireDefault(require("@babel/runtime/helpers/typeof"));
-
 var _classnames = _interopRequireDefault(require("classnames"));
@@ -32,13 +24,6 @@
 
-var React = _interopRequireWildcard(require("react"));
+var _useMergedState3 = _interopRequireDefault(require("rc-util/lib/hooks/useMergedState"));
 
-var _shallowequal = _interopRequireDefault(require("shallowequal"));
-
 var _Panel = _interopRequireDefault(require("./Panel"));
 
-function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
-
-function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof3(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
-
-/* eslint-disable react/prop-types */
 function getActiveKeysArray(activeKey) {
@@ -57,162 +42,109 @@ var currentActiveKey = activeKey;
 
-var Collapse = /*#__PURE__*/function (_React$Component) {
-  (0, _inherits2.default)(Collapse, _React$Component);
+function Collapse(props) {
+  var _props$prefixCls = props.prefixCls,
+      prefixCls = _props$prefixCls === void 0 ? 'rc-collapse' : _props$prefixCls,
+      _props$destroyInactiv = props.destroyInactivePanel,
+      destroyInactivePanel = _props$destroyInactiv === void 0 ? false : _props$destroyInactiv,
+      style = props.style,
+      accordion = props.accordion,
+      className = props.className,
+      rawChildren = props.children,
+      collapsible = props.collapsible,
+      openMotion = props.openMotion,
+      expandIcon = props.expandIcon,
+      rawActiveKey = props.activeKey,
+      defaultActiveKey = props.defaultActiveKey,
+      _onChange = props.onChange;
+  var collapseClassName = (0, _classnames.default)(prefixCls, className);
 
-  var _super = (0, _createSuper2.default)(Collapse);
+  var _useMergedState = (0, _useMergedState3.default)([], {
+    value: rawActiveKey,
+    onChange: function onChange(v) {
+      return _onChange === null || _onChange === void 0 ? void 0 : _onChange(v);
+    },
+    defaultValue: defaultActiveKey,
+    postState: getActiveKeysArray
+  }),
+      _useMergedState2 = (0, _slicedToArray2.default)(_useMergedState, 2),
+      activeKey = _useMergedState2[0],
+      setActiveKey = _useMergedState2[1];
 
-  function Collapse(_props) {
-    var _this;
-
-    (0, _classCallCheck2.default)(this, Collapse);
-    _this = _super.call(this, _props);
-
-    _this.onClickItem = function (key) {
-      var activeKey = _this.state.activeKey;
-
-      if (_this.props.accordion) {
-        activeKey = activeKey[0] === key ? [] : [key];
-      } else {
-        activeKey = (0, _toConsumableArray2.default)(activeKey);
-        var index = activeKey.indexOf(key);
-        var isActive = index > -1;
-
-        if (isActive) {
-          // remove active state
-          activeKey.splice(index, 1);
-        } else {
-          activeKey.push(key);
-        }
-      }
-
-      _this.setActiveKey(activeKey);
-    };
-
-    _this.getNewChild = function (child, index) {
-      if (!child) return null;
-      var activeKey = _this.state.activeKey;
-      var _this$props = _this.props,
-          prefixCls = _this$props.prefixCls,
-          openMotion = _this$props.openMotion,
-          accordion = _this$props.accordion,
-          rootDestroyInactivePanel = _this$props.destroyInactivePanel,
-          expandIcon = _this$props.expandIcon,
-          collapsible = _this$props.collapsible; // If there is no key provide, use the panel order as default key
-
-      var key = child.key || String(index);
-      var _child$props = child.props,
-          header = _child$props.header,
-          headerClass = _child$props.headerClass,
-          destroyInactivePanel = _child$props.destroyInactivePanel,
-          childCollapsible = _child$props.collapsible;
-      var isActive = false;
-
+  var onClickItem = function onClickItem(key) {
+    return setActiveKey(function () {
       if (accordion) {
-        isActive = activeKey[0] === key;
-      } else {
-        isActive = activeKey.indexOf(key) > -1;
+        return activeKey[0] === key ? [] : [key];
       }
 
-      var mergeCollapsible = childCollapsible !== null && childCollapsible !== void 0 ? childCollapsible : collapsible;
-      var props = {
-        key: key,
-        panelKey: key,
-        header: header,
-        headerClass: headerClass,
-        isActive: isActive,
-        prefixCls: prefixCls,
-        destroyInactivePanel: destroyInactivePanel !== null && destroyInactivePanel !== void 0 ? destroyInactivePanel : rootDestroyInactivePanel,
-        openMotion: openMotion,
-        accordion: accordion,
-        children: child.props.children,
-        onItemClick: mergeCollapsible === 'disabled' ? null : _this.onClickItem,
-        expandIcon: expandIcon,
-        collapsible: mergeCollapsible
-      }; // https://github.com/ant-design/ant-design/issues/20479
+      var index = activeKey.indexOf(key);
+      var isActive = index > -1;
 
-      if (typeof child.type === 'string') {
-        return child;
+      if (isActive) {
+        return activeKey.filter(function (item) {
+          return item !== key;
+        });
       }
 
-      Object.keys(props).forEach(function (propName) {
-        if (typeof props[propName] === 'undefined') {
-          delete props[propName];
-        }
-      });
-      return /*#__PURE__*/React.cloneElement(child, props);
-    };
+      return [].concat((0, _toConsumableArray2.default)(activeKey), [key]);
+    });
+  }; // ======================== Children ========================
 
-    _this.getItems = function () {
-      var children = _this.props.children;
-      return (0, _toArray.default)(children).map(_this.getNewChild);
-    };
 
-    _this.setActiveKey = function (activeKey) {
-      if (!('activeKey' in _this.props)) {
-        _this.setState({
-          activeKey: activeKey
-        });
-      }
+  var getNewChild = function getNewChild(child, index) {
+    if (!child) return null;
+    var key = child.key || String(index);
+    var _child$props = child.props,
+        header = _child$props.header,
+        headerClass = _child$props.headerClass,
+        childDestroyInactivePanel = _child$props.destroyInactivePanel,
+        childCollapsible = _child$props.collapsible;
+    var isActive = false;
 
-      _this.props.onChange(_this.props.accordion ? activeKey[0] : activeKey);
-    };
+    if (accordion) {
+      isActive = activeKey[0] === key;
+    } else {
+      isActive = activeKey.indexOf(key) > -1;
+    }
 
-    var _activeKey = _props.activeKey,
-        defaultActiveKey = _props.defaultActiveKey;
-    var currentActiveKey = defaultActiveKey;
+    var mergeCollapsible = childCollapsible !== null && childCollapsible !== void 0 ? childCollapsible : collapsible;
+    var childProps = {
+      key: key,
+      panelKey: key,
+      header: header,
+      headerClass: headerClass,
+      isActive: isActive,
+      prefixCls: prefixCls,
+      destroyInactivePanel: childDestroyInactivePanel !== null && childDestroyInactivePanel !== void 0 ? childDestroyInactivePanel : destroyInactivePanel,
+      openMotion: openMotion,
+      accordion: accordion,
+      children: child.props.children,
+      onItemClick: mergeCollapsible === 'disabled' ? null : onClickItem,
+      expandIcon: expandIcon,
+      collapsible: mergeCollapsible
+    }; // https://github.com/ant-design/ant-design/issues/20479
 
-    if ('activeKey' in _props) {
-      currentActiveKey = _activeKey;
+    if (typeof child.type === 'string') {
+      return child;
     }
 
-    _this.state = {
-      activeKey: getActiveKeysArray(currentActiveKey)
-    };
-    return _this;
-  }
+    Object.keys(childProps).forEach(function (propName) {
+      if (typeof childProps[propName] === 'undefined') {
+        delete childProps[propName];
+      }
+    });
+    return /*#__PURE__*/_react.default.cloneElement(child, childProps);
+  };
 
-  (0, _createClass2.default)(Collapse, [{
-    key: "shouldComponentUpdate",
-    value: function shouldComponentUpdate(nextProps, nextState) {
-      return !(0, _shallowequal.default)(this.props, nextProps) || !(0, _shallowequal.default)(this.state, nextState);
-    }
-  }, {
-    key: "render",
-    value: function render() {
-      var _classNames;
+  var children = (0, _toArray.default)(rawChildren).map(getNewChild); // ======================== Render ========================
 
-      var _this$props2 = this.props,
-          prefixCls = _this$props2.prefixCls,
-          className = _this$props2.className,
-          style = _this$props2.style,
-          accordion = _this$props2.accordion;
-      var collapseClassName = (0, _classnames.default)((_classNames = {}, (0, _defineProperty2.default)(_classNames, prefixCls, true), (0, _defineProperty2.default)(_classNames, className, !!className), _classNames));
-      return /*#__PURE__*/React.createElement("div", {
-        className: collapseClassName,
-        style: style,
-        role: accordion ? 'tablist' : null
-      }, this.getItems());
-    }
-  }], [{
-    key: "getDerivedStateFromProps",
-    value: function getDerivedStateFromProps(nextProps) {
-      var newState = {};
+  return /*#__PURE__*/_react.default.createElement("div", {
+    className: collapseClassName,
+    style: style,
+    role: accordion ? 'tablist' : undefined
+  }, children);
+}
 
-      if ('activeKey' in nextProps) {
-        newState.activeKey = getActiveKeysArray(nextProps.activeKey);
-      }
+var _default = Object.assign(Collapse, {
+  Panel: _Panel.default
+});
 
-      return newState;
-    }
-  }]);
-  return Collapse;
-}(React.Component);
-
-Collapse.defaultProps = {
-  prefixCls: 'rc-collapse',
-  onChange: function onChange() {},
-  accordion: false,
-  destroyInactivePanel: false
-};
-Collapse.Panel = _Panel.default;
-var _default = Collapse;
 exports.default = _default;

lib/Panel.d.ts

@@ -1,18 +0,4 @@
-import * as React from 'react';
+/// <reference types="react" />
 import type { CollapsePanelProps } from './interface';
-declare class CollapsePanel extends React.Component<CollapsePanelProps, any> {
-    static defaultProps: {
-        showArrow: boolean;
-        isActive: boolean;
-        onItemClick(): void;
-        headerClass: string;
-        forceRender: boolean;
-    };
-    shouldComponentUpdate(nextProps: CollapsePanelProps): boolean;
-    onItemClick: () => void;
-    handleKeyPress: (e: React.KeyboardEvent) => void;
-    renderIcon: () => JSX.Element;
-    renderTitle: () => JSX.Element;
-    render(): JSX.Element;
-}
+declare function CollapsePanel(props: CollapsePanelProps): JSX.Element;
 export default CollapsePanel;

lib/Panel.js

@@ -5,4 +5,2 @@ "use strict";
 
-var _typeof = require("@babel/runtime/helpers/typeof");
-
 Object.defineProperty(exports, "__esModule", {
@@ -19,182 +17,109 @@ value: true
 
-var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));
+var _react = _interopRequireDefault(require("react"));
 
-var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/createClass"));
+var _classnames = _interopRequireDefault(require("classnames"));
 
-var _inherits2 = _interopRequireDefault(require("@babel/runtime/helpers/inherits"));
+var _KeyCode = _interopRequireDefault(require("rc-util/lib/KeyCode"));
 
-var _createSuper2 = _interopRequireDefault(require("@babel/runtime/helpers/createSuper"));
-
-var _classnames = _interopRequireDefault(require("classnames"));
-
 var _rcMotion = _interopRequireDefault(require("rc-motion"));
 
-var React = _interopRequireWildcard(require("react"));
-
-var _shallowequal = _interopRequireDefault(require("shallowequal"));
-
 var _PanelContent = _interopRequireDefault(require("./PanelContent"));
 
-var _excluded = ["className", "id", "style", "prefixCls", "headerClass", "children", "isActive", "destroyInactivePanel", "accordion", "forceRender", "openMotion", "extra", "collapsible"];
+var _excluded = ["showArrow", "headerClass", "isActive", "onItemClick", "forceRender", "className", "style", "prefixCls", "collapsible", "accordion", "panelKey", "extra", "header", "expandIcon", "openMotion", "destroyInactivePanel", "children"];
 
-function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+function CollapsePanel(props) {
+  var _classNames, _classNames2;
 
-function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+  var _props$showArrow = props.showArrow,
+      showArrow = _props$showArrow === void 0 ? true : _props$showArrow,
+      headerClass = props.headerClass,
+      isActive = props.isActive,
+      onItemClick = props.onItemClick,
+      forceRender = props.forceRender,
+      className = props.className,
+      style = props.style,
+      prefixCls = props.prefixCls,
+      collapsible = props.collapsible,
+      accordion = props.accordion,
+      panelKey = props.panelKey,
+      extra = props.extra,
+      header = props.header,
+      expandIcon = props.expandIcon,
+      openMotion = props.openMotion,
+      destroyInactivePanel = props.destroyInactivePanel,
+      children = props.children,
+      resetProps = (0, _objectWithoutProperties2.default)(props, _excluded);
+  var disabled = collapsible === 'disabled';
+  var collapsibleHeader = collapsible === 'header';
+  var collapsibleIcon = collapsible === 'icon';
+  var ifExtraExist = extra !== null && extra !== undefined && typeof extra !== 'boolean';
 
-var CollapsePanel = /*#__PURE__*/function (_React$Component) {
-  (0, _inherits2.default)(CollapsePanel, _React$Component);
+  var handleItemClick = function handleItemClick() {
+    onItemClick === null || onItemClick === void 0 ? void 0 : onItemClick(panelKey);
+  };
 
-  var _super = (0, _createSuper2.default)(CollapsePanel);
-
-  function CollapsePanel() {
-    var _this;
-
-    (0, _classCallCheck2.default)(this, CollapsePanel);
-
-    for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
-      args[_key] = arguments[_key];
+  var handleKeyPress = function handleKeyPress(e) {
+    if (e.key === 'Enter' || e.keyCode === _KeyCode.default.ENTER || e.which === _KeyCode.default.ENTER) {
+      handleItemClick();
     }
+  }; // ======================== Icon ========================
 
-    _this = _super.call.apply(_super, [this].concat(args));
 
-    _this.onItemClick = function () {
-      var _this$props = _this.props,
-          onItemClick = _this$props.onItemClick,
-          panelKey = _this$props.panelKey;
+  var iconNode = typeof expandIcon === 'function' ? expandIcon(props) : /*#__PURE__*/_react.default.createElement("i", {
+    className: "arrow"
+  });
 
-      if (typeof onItemClick === 'function') {
-        onItemClick(panelKey);
-      }
-    };
-
-    _this.handleKeyPress = function (e) {
-      if (e.key === 'Enter' || e.keyCode === 13 || e.which === 13) {
-        _this.onItemClick();
-      }
-    };
-
-    _this.renderIcon = function () {
-      var _this$props2 = _this.props,
-          showArrow = _this$props2.showArrow,
-          expandIcon = _this$props2.expandIcon,
-          prefixCls = _this$props2.prefixCls,
-          collapsible = _this$props2.collapsible;
-
-      if (!showArrow) {
-        return null;
-      }
-
-      var iconNode = typeof expandIcon === 'function' ? expandIcon(_this.props) : /*#__PURE__*/React.createElement("i", {
-        className: "arrow"
-      });
-      return iconNode && /*#__PURE__*/React.createElement("div", {
-        className: "".concat(prefixCls, "-expand-icon"),
-        onClick: collapsible === 'header' || collapsible === 'icon' ? _this.onItemClick : null
-      }, iconNode);
-    };
-
-    _this.renderTitle = function () {
-      var _this$props3 = _this.props,
-          header = _this$props3.header,
-          prefixCls = _this$props3.prefixCls,
-          collapsible = _this$props3.collapsible;
-      return /*#__PURE__*/React.createElement("span", {
-        className: "".concat(prefixCls, "-header-text"),
-        onClick: collapsible === 'header' ? _this.onItemClick : null
-      }, header);
-    };
-
-    return _this;
+  if (iconNode) {
+    iconNode = /*#__PURE__*/_react.default.createElement("div", {
+      className: "".concat(prefixCls, "-expand-icon"),
+      onClick: ['header', 'icon'].includes(collapsible) ? handleItemClick : undefined
+    }, iconNode);
   }
 
-  (0, _createClass2.default)(CollapsePanel, [{
-    key: "shouldComponentUpdate",
-    value: function shouldComponentUpdate(nextProps) {
-      return !(0, _shallowequal.default)(this.props, nextProps);
-    }
-  }, {
-    key: "render",
-    value: function render() {
-      var _classNames, _classNames2;
+  var collapsePanelClassNames = (0, _classnames.default)((_classNames = {}, (0, _defineProperty2.default)(_classNames, "".concat(prefixCls, "-item"), true), (0, _defineProperty2.default)(_classNames, "".concat(prefixCls, "-item-active"), isActive), (0, _defineProperty2.default)(_classNames, "".concat(prefixCls, "-item-disabled"), disabled), _classNames), className);
+  var headerClassName = (0, _classnames.default)((_classNames2 = {}, (0, _defineProperty2.default)(_classNames2, "".concat(prefixCls, "-header"), true), (0, _defineProperty2.default)(_classNames2, "headerClass", headerClass), (0, _defineProperty2.default)(_classNames2, "".concat(prefixCls, "-header-collapsible-only"), collapsibleHeader), (0, _defineProperty2.default)(_classNames2, "".concat(prefixCls, "-icon-collapsible-only"), collapsibleIcon), _classNames2)); // ======================== HeaderProps ========================
 
-      var _this$props4 = this.props,
-          className = _this$props4.className,
-          id = _this$props4.id,
-          style = _this$props4.style,
-          prefixCls = _this$props4.prefixCls,
-          headerClass = _this$props4.headerClass,
-          children = _this$props4.children,
-          isActive = _this$props4.isActive,
-          destroyInactivePanel = _this$props4.destroyInactivePanel,
-          accordion = _this$props4.accordion,
-          forceRender = _this$props4.forceRender,
-          openMotion = _this$props4.openMotion,
-          extra = _this$props4.extra,
-          collapsible = _this$props4.collapsible,
-          rest = (0, _objectWithoutProperties2.default)(_this$props4, _excluded);
-      var disabled = collapsible === 'disabled';
-      var collapsibleHeader = collapsible === 'header';
-      var collapsibleIcon = collapsible === 'icon';
-      var itemCls = (0, _classnames.default)((_classNames = {}, (0, _defineProperty2.default)(_classNames, "".concat(prefixCls, "-item"), true), (0, _defineProperty2.default)(_classNames, "".concat(prefixCls, "-item-active"), isActive), (0, _defineProperty2.default)(_classNames, "".concat(prefixCls, "-item-disabled"), disabled), _classNames), className);
-      var headerCls = (0, _classnames.default)("".concat(prefixCls, "-header"), (_classNames2 = {}, (0, _defineProperty2.default)(_classNames2, headerClass, headerClass), (0, _defineProperty2.default)(_classNames2, "".concat(prefixCls, "-header-collapsible-only"), collapsibleHeader), (0, _defineProperty2.default)(_classNames2, "".concat(prefixCls, "-icon-collapsible-only"), collapsibleIcon), _classNames2));
-      /** header 节点属性 */
+  var headerProps = {
+    className: headerClassName,
+    'aria-expanded': isActive,
+    'aria-disabled': disabled,
+    onKeyPress: handleKeyPress
+  };
 
-      var headerProps = {
-        className: headerCls,
-        'aria-expanded': isActive,
-        'aria-disabled': disabled,
-        onKeyPress: this.handleKeyPress
-      };
+  if (!collapsibleHeader && !collapsibleIcon) {
+    headerProps.onClick = handleItemClick;
+    headerProps.role = accordion ? 'tab' : 'button';
+    headerProps.tabIndex = disabled ? -1 : 0;
+  } // ======================== Render ========================
 
-      if (!collapsibleHeader && !collapsibleIcon) {
-        headerProps.onClick = this.onItemClick;
-        headerProps.role = accordion ? 'tab' : 'button';
-        headerProps.tabIndex = disabled ? -1 : 0;
-      }
 
-      var ifExtraExist = extra !== null && extra !== undefined && typeof extra !== 'boolean'; // https://github.com/ant-design/ant-design/pull/37419#issuecomment-1238812797
+  return /*#__PURE__*/_react.default.createElement("div", (0, _extends2.default)({}, resetProps, {
+    className: collapsePanelClassNames
+  }), /*#__PURE__*/_react.default.createElement("div", headerProps, showArrow && iconNode, /*#__PURE__*/_react.default.createElement("span", {
+    className: "".concat(prefixCls, "-header-text"),
+    onClick: collapsible === 'header' ? handleItemClick : undefined
+  }, header), ifExtraExist && /*#__PURE__*/_react.default.createElement("div", {
+    className: "".concat(prefixCls, "-extra")
+  }, extra)), /*#__PURE__*/_react.default.createElement(_rcMotion.default, (0, _extends2.default)({
+    visible: isActive,
+    leavedClassName: "".concat(prefixCls, "-content-hidden")
+  }, openMotion, {
+    forceRender: forceRender,
+    removeOnLeave: destroyInactivePanel
+  }), function (_ref, ref) {
+    var motionClassName = _ref.className,
+        motionStyle = _ref.style;
+    return /*#__PURE__*/_react.default.createElement(_PanelContent.default, {
+      ref: ref,
+      prefixCls: prefixCls,
+      className: motionClassName,
+      style: motionStyle,
+      isActive: isActive,
+      forceRender: forceRender,
+      role: accordion ? 'tabpanel' : void 0
+    }, children);
+  }));
+}
 
-      delete rest.header;
-      delete rest.panelKey;
-      delete rest.onItemClick;
-      delete rest.showArrow;
-      delete rest.expandIcon;
-      return /*#__PURE__*/React.createElement("div", (0, _extends2.default)({}, rest, {
-        className: itemCls,
-        style: style,
-        id: id
-      }), /*#__PURE__*/React.createElement("div", headerProps, this.renderIcon(), this.renderTitle(), ifExtraExist && /*#__PURE__*/React.createElement("div", {
-        className: "".concat(prefixCls, "-extra")
-      }, extra)), /*#__PURE__*/React.createElement(_rcMotion.default, (0, _extends2.default)({
-        visible: isActive,
-        leavedClassName: "".concat(prefixCls, "-content-hidden")
-      }, openMotion, {
-        forceRender: forceRender,
-        removeOnLeave: destroyInactivePanel
-      }), function (_ref, ref) {
-        var motionClassName = _ref.className,
-            motionStyle = _ref.style;
-        return /*#__PURE__*/React.createElement(_PanelContent.default, {
-          ref: ref,
-          prefixCls: prefixCls,
-          className: motionClassName,
-          style: motionStyle,
-          isActive: isActive,
-          forceRender: forceRender,
-          role: accordion ? 'tabpanel' : null
-        }, children);
-      }));
-    }
-  }]);
-  return CollapsePanel;
-}(React.Component);
-
-CollapsePanel.defaultProps = {
-  showArrow: true,
-  isActive: false,
-  onItemClick: function onItemClick() {},
-  headerClass: '',
-  forceRender: false
-};
 var _default = CollapsePanel;
 exports.default = _default;

lib/PanelContent.d.ts

@@ -1,3 +0,3 @@
-import * as React from 'react';
-import { CollapsePanelProps } from './interface';
+import React from 'react';
+import type { CollapsePanelProps } from './interface';
 declare const PanelContent: React.ForwardRefExoticComponent<CollapsePanelProps & {
@@ -4,0 +4,0 @@ children: React.ReactNode;

lib/PanelContent.js

@@ -5,4 +5,2 @@ "use strict";
 
-var _typeof = require("@babel/runtime/helpers/typeof");
-
 Object.defineProperty(exports, "__esModule", {
@@ -17,14 +15,7 @@ value: true
 
-var React = _interopRequireWildcard(require("react"));
+var _react = _interopRequireDefault(require("react"));
 
 var _classnames2 = _interopRequireDefault(require("classnames"));
 
-function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
-
-function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
-
-/* eslint-disable no-underscore-dangle */
-
-/* eslint-disable react/prop-types */
-var PanelContent = /*#__PURE__*/React.forwardRef(function (props, ref) {
+var PanelContent = /*#__PURE__*/_react.default.forwardRef(function (props, ref) {
   var _classnames;
@@ -40,3 +31,3 @@
 
-  var _React$useState = React.useState(isActive || forceRender),
+  var _React$useState = _react.default.useState(isActive || forceRender),
       _React$useState2 = (0, _slicedToArray2.default)(_React$useState, 2),
@@ -46,3 +37,3 @@ rendered = _React$useState2[0],
 
-  React.useEffect(function () {
+  _react.default.useEffect(function () {
     if (forceRender || isActive) {
@@ -57,3 +48,3 @@ setRendered(true);
 
-  return /*#__PURE__*/React.createElement("div", {
+  return /*#__PURE__*/_react.default.createElement("div", {
     ref: ref,
@@ -63,8 +54,9 @@ className: (0, _classnames2.default)("".concat(prefixCls, "-content"), (_classnames = {}, (0, _defineProperty2.default)(_classnames, "".concat(prefixCls, "-content-active"), isActive), (0, _defineProperty2.default)(_classnames, "".concat(prefixCls, "-content-inactive"), !isActive), _classnames), className),
     role: role
-  }, /*#__PURE__*/React.createElement("div", {
+  }, /*#__PURE__*/_react.default.createElement("div", {
     className: "".concat(prefixCls, "-content-box")
   }, children));
 });
+
 PanelContent.displayName = 'PanelContent';
 var _default = PanelContent;
 exports.default = _default;

package.json

 {
   "name": "rc-collapse",
-  "version": "3.4.2",
+  "version": "3.5.0",
   "description": "rc-collapse ui component for react",
@@ -14,2 +14,5 @@ "keywords": [
   "homepage": "http://github.com/react-component/collapse",
+  "bugs": {
+    "url": "http://github.com/react-component/collapse/issues"
+  },
   "repository": {
@@ -19,6 +22,6 @@ "type": "git",
   },
-  "bugs": {
-    "url": "http://github.com/react-component/collapse/issues"
-  },
   "license": "MIT",
+  "main": "./lib/index",
+  "module": "./es/index",
+  "typings": "es/index.d.ts",
   "files": [
@@ -29,47 +32,39 @@ "lib",
   ],
-  "main": "./lib/index",
-  "module": "./es/index",
   "scripts": {
-    "start": "dumi dev",
     "build": "dumi build",
     "compile": "father build && lessc assets/index.less assets/index.css",
-    "gh-pages": "npm run build && father doc deploy",
+    "coverage": "npm test -- --coverage",
+    "lint": "eslint src/ --ext .ts,.tsx,.jsx,.js,.md",
     "prepublishOnly": "npm run compile && np --yolo --no-publish",
-    "postpublish": "npm run gh-pages",
-    "lint": "eslint src/ --ext .ts,.tsx,.jsx,.js,.md",
     "prettier": "prettier --write \"**/*.{ts,tsx,js,jsx,json,md}\"",
-    "test": "father test",
-    "coverage": "father test --coverage"
+    "start": "dumi dev",
+    "test": "rc-test"
   },
+  "dependencies": {
+    "@babel/runtime": "^7.10.1",
+    "classnames": "2.x",
+    "rc-motion": "^2.3.4",
+    "rc-util": "^5.27.0"
+  },
   "devDependencies": {
+    "@rc-component/father-plugin": "^1.0.1",
+    "@testing-library/jest-dom": "^5.16.5",
+    "@testing-library/react": "^13.4.0",
     "@types/classnames": "^2.2.9",
-    "@types/enzyme": "^3.10.6",
     "@types/jest": "^26.0.0",
     "@types/react": "^18.0.0",
     "@types/react-dom": "^18.0.0",
-    "@types/shallowequal": "^1.1.1",
     "@umijs/fabric": "^2.0.0",
-    "cross-env": "^7.0.0",
-    "dumi": "^1.1.4",
-    "enzyme": "^3.1.1",
-    "enzyme-adapter-react-16": "^1.0.1",
-    "enzyme-to-json": "^3.1.2",
+    "dumi": "^2.1.1",
     "eslint": "^7.11.0",
-    "father": "^2.22.0",
-    "glob": "^7.1.6",
-    "jest": "^26.6.0",
+    "father": "^4.1.3",
+    "jest": "^29.1.2",
     "less": "^3.12.2",
     "np": "^6.0.0",
     "prettier": "^2.1.2",
-    "react": "^16.9.0",
-    "react-dom": "^16.9.0",
+    "rc-test": "^7.0.14",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0",
     "typescript": "^4.0.2"
   },
-  "dependencies": {
-    "@babel/runtime": "^7.10.1",
-    "classnames": "2.x",
-    "rc-motion": "^2.3.4",
-    "rc-util": "^5.2.1",
-    "shallowequal": "^1.1.0"
-  },
   "peerDependencies": {
@@ -76,0 +71,0 @@ "react": ">=16.9.0",

README.md

 # rc-collapse
----
 
 rc-collapse ui component for react
 
-[![NPM version][npm-image]][npm-url]
-[![build status][github-actions-image]][github-actions-url]
-[![Test coverage][coveralls-image]][coveralls-url]
-[![npm download][download-image]][download-url]
-[![Dependencies](https://img.shields.io/david/react-component/collapse.svg?style=flat-square)](https://david-dm.org/react-component/collapse)
-[![DevDependencies](https://img.shields.io/david/dev/react-component/collapse.svg?style=flat-square)](https://david-dm.org/react-component/collapse?type=dev)
+[![NPM version][npm-image]][npm-url] [![build status][github-actions-image]][github-actions-url] [![Test coverage][codecov-image]][codecov-url] [![npm download][download-image]][download-url]
 
@@ -17,25 +11,11 @@ [npm-image]: http://img.shields.io/npm/v/rc-collapse.svg?style=flat-square
 [github-actions-url]: https://github.com/react-component/collapse/actions
-[coveralls-image]: https://img.shields.io/coveralls/react-component/collapse.svg?style=flat-square
-[coveralls-url]: https://coveralls.io/r/react-component/collapse?branch=master
+[codecov-image]: https://img.shields.io/codecov/c/github/react-component/collapse/master.svg?style=flat-square
+[codecov-url]: https://app.codecov.io/gh/react-component/collapse
 [download-image]: https://img.shields.io/npm/dm/rc-collapse.svg?style=flat-square
 [download-url]: https://npmjs.org/package/rc-collapse
 
-## Development
+## Live Demo
 
-```
-npm install
-npm start
-```
+http://react-component.github.io/collapse/
 
-## Example
-
-http://localhost:8000/examples/
-
-online example: http://react-component.github.io/collapse/
-
-
-## Features
-
-* support ie8,ie8+,chrome,firefox,safari
-
 ## Install
@@ -54,17 +34,21 @@
 
-var collapse = (
+var App = (
   <Collapse accordion={true}>
-    <Panel header="hello" headerClass="my-header-class">this is panel content</Panel>
+    <Panel header="hello" headerClass="my-header-class">
+      this is panel content
+    </Panel>
     <Panel header="title2">this is panel content2 or other</Panel>
   </Collapse>
 );
-ReactDOM.render(collapse, container);
+ReactDOM.render(App, container);
 ```
 
+## Features
+
+- support ie8,ie8+,chrome,firefox,safari
+
 ## API
 
-### Collapse
+### Collapse props
 
-#### props:
-
 <table class="table table-bordered table-striped">
@@ -131,12 +115,8 @@ <thead>
 
-If `accordion` is null or false, every panel can open.  Opening another panel will not close any of the other panels.
-`activeKey` should be an string, if passing an array (the first item in the array will be used).
+If `accordion` is null or false, every panel can open. Opening another panel will not close any of the other panels. `activeKey` should be an string, if passing an array (the first item in the array will be used).
 
-If `accordion` is true, only one panel can be open.  Opening another panel will cause the previously opened panel to close.
-`activeKey` should be an string, if passing an array (the first item in the array will be used).
+If `accordion` is true, only one panel can be open. Opening another panel will cause the previously opened panel to close. `activeKey` should be an string, if passing an array (the first item in the array will be used).
 
-### Collapse.Panel
+### Collapse.Panel props
 
-#### props
-
 <table class="table table-bordered table-striped">
@@ -215,7 +195,13 @@ <thead>
 
+## Development
+
+```bash
+npm install
+npm start
+```
+
 ## Test Case
 
-```
+```bash
 npm test
-npm run chrome-test
 ```
@@ -225,10 +211,8 @@
 
+```bash
+npm test -- --coverage
 ```
-npm run coverage
-```
 
-open coverage/ dir
-
 ## License
 
 rc-collapse is released under the MIT license.

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Dependency count

6

decreased by-14.29%

Dev dependency count

19

decreased by-13.64%

Worsened metrics

Total package byte prevSize

38829

decreased by-26.72%

Lines of code

712

decreased by-29.29%

Number of lines in readme file

214

decreased by-6.96%

Dependency changes

• - Removedshallowequal@^1.1.0

• - Removedshallowequal@1.1.0(transitive)

• Updatedrc-util@^5.27.0