rc-collapse - npm Package Compare versions

Comparing version 3.2.0 to 3.3.0

es/Panel.d.ts

@@ -12,6 +12,8 @@ import * as React from 'react';
     shouldComponentUpdate(nextProps: CollapsePanelProps): boolean;
-    handleItemClick: () => void;
+    onItemClick: () => void;
     handleKeyPress: (e: React.KeyboardEvent) => void;
+    renderIcon: () => JSX.Element;
+    renderTitle: () => JSX.Element;
     render(): JSX.Element;
 }
 export default CollapsePanel;

es/Panel.js

@@ -31,3 +31,3 @@ import _extends from "@babel/runtime/helpers/esm/extends";
 
-    _this.handleItemClick = function () {
+    _this.onItemClick = function () {
       var _this$props = _this.props,
@@ -44,6 +44,37 @@ onItemClick = _this$props.onItemClick,
       if (e.key === 'Enter' || e.keyCode === 13 || e.which === 13) {
-        _this.handleItemClick();
+        _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' ? _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;
@@ -60,30 +91,22 @@ }
     value: function render() {
-      var _classNames,
-          _classNames2,
-          _this2 = this;
+      var _classNames, _classNames2;
 
-      var _this$props2 = this.props,
-          className = _this$props2.className,
-          id = _this$props2.id,
-          style = _this$props2.style,
-          prefixCls = _this$props2.prefixCls,
-          header = _this$props2.header,
-          headerClass = _this$props2.headerClass,
-          children = _this$props2.children,
-          isActive = _this$props2.isActive,
-          showArrow = _this$props2.showArrow,
-          destroyInactivePanel = _this$props2.destroyInactivePanel,
-          accordion = _this$props2.accordion,
-          forceRender = _this$props2.forceRender,
-          openMotion = _this$props2.openMotion,
-          expandIcon = _this$props2.expandIcon,
-          extra = _this$props2.extra,
-          collapsible = _this$props2.collapsible;
+      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;
       var disabled = collapsible === 'disabled';
       var collapsibleHeader = collapsible === 'header';
-      var headerCls = classNames("".concat(prefixCls, "-header"), (_classNames = {}, _defineProperty(_classNames, headerClass, headerClass), _defineProperty(_classNames, "".concat(prefixCls, "-header-collapsible-only"), collapsibleHeader), _classNames));
-      var itemCls = classNames((_classNames2 = {}, _defineProperty(_classNames2, "".concat(prefixCls, "-item"), true), _defineProperty(_classNames2, "".concat(prefixCls, "-item-active"), isActive), _defineProperty(_classNames2, "".concat(prefixCls, "-item-disabled"), disabled), _classNames2), className);
-      var icon = /*#__PURE__*/React.createElement("i", {
-        className: "arrow"
-      });
+      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), _classNames2));
       /** header 节点属性 */
@@ -97,17 +120,4 @@
 
-      if (showArrow && typeof expandIcon === 'function') {
-        icon = expandIcon(this.props);
-      }
-
-      if (collapsibleHeader) {
-        icon = /*#__PURE__*/React.createElement("span", {
-          style: {
-            cursor: 'pointer'
-          },
-          onClick: function onClick() {
-            return _this2.handleItemClick();
-          }
-        }, icon);
-      } else {
-        headerProps.onClick = this.handleItemClick;
+      if (!collapsibleHeader) {
+        headerProps.onClick = this.onItemClick;
         headerProps.role = accordion ? 'tab' : 'button';
@@ -122,6 +132,3 @@ headerProps.tabIndex = disabled ? -1 : 0;
         id: id
-      }, /*#__PURE__*/React.createElement("div", headerProps, showArrow && icon, collapsibleHeader ? /*#__PURE__*/React.createElement("span", {
-        onClick: this.handleItemClick,
-        className: "".concat(prefixCls, "-header-text")
-      }, header) : header, ifExtraExist && /*#__PURE__*/React.createElement("div", {
+      }, /*#__PURE__*/React.createElement("div", headerProps, this.renderIcon(), this.renderTitle(), ifExtraExist && /*#__PURE__*/React.createElement("div", {
         className: "".concat(prefixCls, "-extra")
@@ -128,0 +135,0 @@ }, extra)), /*#__PURE__*/React.createElement(CSSMotion, _extends({

lib/Panel.d.ts

@@ -12,6 +12,8 @@ import * as React from 'react';
     shouldComponentUpdate(nextProps: CollapsePanelProps): boolean;
-    handleItemClick: () => void;
+    onItemClick: () => void;
     handleKeyPress: (e: React.KeyboardEvent) => void;
+    renderIcon: () => JSX.Element;
+    renderTitle: () => JSX.Element;
     render(): JSX.Element;
 }
 export default CollapsePanel;

lib/Panel.js

@@ -51,3 +51,3 @@ "use strict";
 
-    _this.handleItemClick = function () {
+    _this.onItemClick = function () {
       var _this$props = _this.props,
@@ -64,6 +64,37 @@ onItemClick = _this$props.onItemClick,
       if (e.key === 'Enter' || e.keyCode === 13 || e.which === 13) {
-        _this.handleItemClick();
+        _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' ? _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;
@@ -80,30 +111,22 @@ }
     value: function render() {
-      var _classNames,
-          _classNames2,
-          _this2 = this;
+      var _classNames, _classNames2;
 
-      var _this$props2 = this.props,
-          className = _this$props2.className,
-          id = _this$props2.id,
-          style = _this$props2.style,
-          prefixCls = _this$props2.prefixCls,
-          header = _this$props2.header,
-          headerClass = _this$props2.headerClass,
-          children = _this$props2.children,
-          isActive = _this$props2.isActive,
-          showArrow = _this$props2.showArrow,
-          destroyInactivePanel = _this$props2.destroyInactivePanel,
-          accordion = _this$props2.accordion,
-          forceRender = _this$props2.forceRender,
-          openMotion = _this$props2.openMotion,
-          expandIcon = _this$props2.expandIcon,
-          extra = _this$props2.extra,
-          collapsible = _this$props2.collapsible;
+      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;
       var disabled = collapsible === 'disabled';
       var collapsibleHeader = collapsible === 'header';
-      var headerCls = (0, _classnames.default)("".concat(prefixCls, "-header"), (_classNames = {}, (0, _defineProperty2.default)(_classNames, headerClass, headerClass), (0, _defineProperty2.default)(_classNames, "".concat(prefixCls, "-header-collapsible-only"), collapsibleHeader), _classNames));
-      var itemCls = (0, _classnames.default)((_classNames2 = {}, (0, _defineProperty2.default)(_classNames2, "".concat(prefixCls, "-item"), true), (0, _defineProperty2.default)(_classNames2, "".concat(prefixCls, "-item-active"), isActive), (0, _defineProperty2.default)(_classNames2, "".concat(prefixCls, "-item-disabled"), disabled), _classNames2), className);
-      var icon = /*#__PURE__*/React.createElement("i", {
-        className: "arrow"
-      });
+      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), _classNames2));
       /** header 节点属性 */
@@ -117,17 +140,4 @@
 
-      if (showArrow && typeof expandIcon === 'function') {
-        icon = expandIcon(this.props);
-      }
-
-      if (collapsibleHeader) {
-        icon = /*#__PURE__*/React.createElement("span", {
-          style: {
-            cursor: 'pointer'
-          },
-          onClick: function onClick() {
-            return _this2.handleItemClick();
-          }
-        }, icon);
-      } else {
-        headerProps.onClick = this.handleItemClick;
+      if (!collapsibleHeader) {
+        headerProps.onClick = this.onItemClick;
         headerProps.role = accordion ? 'tab' : 'button';
@@ -142,6 +152,3 @@ headerProps.tabIndex = disabled ? -1 : 0;
         id: id
-      }, /*#__PURE__*/React.createElement("div", headerProps, showArrow && icon, collapsibleHeader ? /*#__PURE__*/React.createElement("span", {
-        onClick: this.handleItemClick,
-        className: "".concat(prefixCls, "-header-text")
-      }, header) : header, ifExtraExist && /*#__PURE__*/React.createElement("div", {
+      }, /*#__PURE__*/React.createElement("div", headerProps, this.renderIcon(), this.renderTitle(), ifExtraExist && /*#__PURE__*/React.createElement("div", {
         className: "".concat(prefixCls, "-extra")
@@ -148,0 +155,0 @@ }, extra)), /*#__PURE__*/React.createElement(_rcMotion.default, (0, _extends2.default)({

package.json

 {
   "name": "rc-collapse",
-  "version": "3.2.0",
+  "version": "3.3.0",
   "description": "rc-collapse ui component for react",
@@ -5,0 +5,0 @@ "keywords": [

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

Total package byte prevSize

49050

increased by5.63%

Number of package files

25

increased by4.17%

Lines of code

953

increased by1.28%

No dependency changes