rc-collapse - npm Package Compare versions

Comparing version 3.8.0 to 3.9.0

es/interface.d.ts

@@ -14,3 +14,3 @@ import type { CSSMotionProps } from 'rc-motion';
     openMotion?: CSSMotionProps;
-    onChange?: (key: React.Key | React.Key[]) => void;
+    onChange?: (key: React.Key[]) => void;
     accordion?: boolean;
@@ -17,0 +17,0 @@ className?: string;

es/Panel.js

@@ -0,1 +1,2 @@
+import _objectSpread from "@babel/runtime/helpers/esm/objectSpread2";
 import _extends from "@babel/runtime/helpers/esm/extends";
@@ -34,40 +35,30 @@ import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
   var disabled = collapsible === 'disabled';
-  var collapsibleHeader = collapsible === 'header';
-  var collapsibleIcon = collapsible === 'icon';
   var ifExtraExist = extra !== null && extra !== undefined && typeof extra !== 'boolean';
-  var handleItemClick = function handleItemClick() {
-    onItemClick === null || onItemClick === void 0 || onItemClick(panelKey);
-  };
-  var handleKeyDown = function handleKeyDown(e) {
-    if (e.key === 'Enter' || e.keyCode === KeyCode.ENTER || e.which === KeyCode.ENTER) {
-      handleItemClick();
-    }
-  };
+  var collapsibleProps = _defineProperty(_defineProperty(_defineProperty({
+    onClick: function onClick() {
+      onItemClick === null || onItemClick === void 0 || onItemClick(panelKey);
+    },
+    onKeyDown: function onKeyDown(e) {
+      if (e.key === 'Enter' || e.keyCode === KeyCode.ENTER || e.which === KeyCode.ENTER) {
+        onItemClick === null || onItemClick === void 0 || onItemClick(panelKey);
+      }
+    },
+    role: accordion ? 'tab' : 'button'
+  }, 'aria-expanded', isActive), 'aria-disabled', disabled), "tabIndex", disabled ? -1 : 0);
 
   // ======================== Icon ========================
-  var iconNode = typeof expandIcon === 'function' ? expandIcon(props) : /*#__PURE__*/React.createElement("i", {
+  var iconNodeInner = typeof expandIcon === 'function' ? expandIcon(props) : /*#__PURE__*/React.createElement("i", {
     className: "arrow"
   });
-  if (iconNode) {
-    iconNode = /*#__PURE__*/React.createElement("div", {
-      className: "".concat(prefixCls, "-expand-icon"),
-      onClick: ['header', 'icon'].includes(collapsible) ? handleItemClick : undefined
-    }, iconNode);
-  }
-  var collapsePanelClassNames = classNames(_defineProperty(_defineProperty(_defineProperty({}, "".concat(prefixCls, "-item"), true), "".concat(prefixCls, "-item-active"), isActive), "".concat(prefixCls, "-item-disabled"), disabled), className);
-  var headerClassName = classNames(headerClass, _defineProperty(_defineProperty(_defineProperty({}, "".concat(prefixCls, "-header"), true), "".concat(prefixCls, "-header-collapsible-only"), collapsibleHeader), "".concat(prefixCls, "-icon-collapsible-only"), collapsibleIcon), customizeClassNames.header);
+  var iconNode = iconNodeInner && /*#__PURE__*/React.createElement("div", _extends({
+    className: "".concat(prefixCls, "-expand-icon")
+  }, ['header', 'icon'].includes(collapsible) ? collapsibleProps : {}), iconNodeInner);
+  var collapsePanelClassNames = classNames("".concat(prefixCls, "-item"), _defineProperty(_defineProperty({}, "".concat(prefixCls, "-item-active"), isActive), "".concat(prefixCls, "-item-disabled"), disabled), className);
+  var headerClassName = classNames(headerClass, "".concat(prefixCls, "-header"), _defineProperty({}, "".concat(prefixCls, "-collapsible-").concat(collapsible), !!collapsible), customizeClassNames.header);
 
   // ======================== HeaderProps ========================
-  var headerProps = {
+  var headerProps = _objectSpread({
     className: headerClassName,
-    'aria-expanded': isActive,
-    'aria-disabled': disabled,
-    onKeyDown: handleKeyDown,
     style: styles.header
-  };
-  if (!collapsibleHeader && !collapsibleIcon) {
-    headerProps.onClick = handleItemClick;
-    headerProps.role = accordion ? 'tab' : 'button';
-    headerProps.tabIndex = disabled ? -1 : 0;
-  }
+  }, ['header', 'icon'].includes(collapsible) ? {} : collapsibleProps);
 
@@ -78,6 +69,5 @@ // ======================== Render ========================
     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", {
+  }), /*#__PURE__*/React.createElement("div", headerProps, showArrow && iconNode, /*#__PURE__*/React.createElement("span", _extends({
+    className: "".concat(prefixCls, "-header-text")
+  }, collapsible === 'header' ? collapsibleProps : {}), header), ifExtraExist && /*#__PURE__*/React.createElement("div", {
     className: "".concat(prefixCls, "-extra")
@@ -84,0 +74,0 @@ }, extra)), /*#__PURE__*/React.createElement(CSSMotion, _extends({

lib/interface.d.ts

@@ -14,3 +14,3 @@ import type { CSSMotionProps } from 'rc-motion';
     openMotion?: CSSMotionProps;
-    onChange?: (key: React.Key | React.Key[]) => void;
+    onChange?: (key: React.Key[]) => void;
     accordion?: boolean;
@@ -17,0 +17,0 @@ className?: string;

lib/Panel.js

@@ -8,2 +8,3 @@ "use strict";
 exports.default = void 0;
+var _objectSpread2 = _interopRequireDefault(require("@babel/runtime/helpers/objectSpread2"));
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
@@ -42,40 +43,30 @@ var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
   var disabled = collapsible === 'disabled';
-  var collapsibleHeader = collapsible === 'header';
-  var collapsibleIcon = collapsible === 'icon';
   var ifExtraExist = extra !== null && extra !== undefined && typeof extra !== 'boolean';
-  var handleItemClick = function handleItemClick() {
-    onItemClick === null || onItemClick === void 0 || onItemClick(panelKey);
-  };
-  var handleKeyDown = function handleKeyDown(e) {
-    if (e.key === 'Enter' || e.keyCode === _KeyCode.default.ENTER || e.which === _KeyCode.default.ENTER) {
-      handleItemClick();
-    }
-  };
+  var collapsibleProps = (0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)({
+    onClick: function onClick() {
+      onItemClick === null || onItemClick === void 0 || onItemClick(panelKey);
+    },
+    onKeyDown: function onKeyDown(e) {
+      if (e.key === 'Enter' || e.keyCode === _KeyCode.default.ENTER || e.which === _KeyCode.default.ENTER) {
+        onItemClick === null || onItemClick === void 0 || onItemClick(panelKey);
+      }
+    },
+    role: accordion ? 'tab' : 'button'
+  }, 'aria-expanded', isActive), 'aria-disabled', disabled), "tabIndex", disabled ? -1 : 0);
 
   // ======================== Icon ========================
-  var iconNode = typeof expandIcon === 'function' ? expandIcon(props) : /*#__PURE__*/_react.default.createElement("i", {
+  var iconNodeInner = typeof expandIcon === 'function' ? expandIcon(props) : /*#__PURE__*/_react.default.createElement("i", {
     className: "arrow"
   });
-  if (iconNode) {
-    iconNode = /*#__PURE__*/_react.default.createElement("div", {
-      className: "".concat(prefixCls, "-expand-icon"),
-      onClick: ['header', 'icon'].includes(collapsible) ? handleItemClick : undefined
-    }, iconNode);
-  }
-  var collapsePanelClassNames = (0, _classnames.default)((0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)({}, "".concat(prefixCls, "-item"), true), "".concat(prefixCls, "-item-active"), isActive), "".concat(prefixCls, "-item-disabled"), disabled), className);
-  var headerClassName = (0, _classnames.default)(headerClass, (0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)({}, "".concat(prefixCls, "-header"), true), "".concat(prefixCls, "-header-collapsible-only"), collapsibleHeader), "".concat(prefixCls, "-icon-collapsible-only"), collapsibleIcon), customizeClassNames.header);
+  var iconNode = iconNodeInner && /*#__PURE__*/_react.default.createElement("div", (0, _extends2.default)({
+    className: "".concat(prefixCls, "-expand-icon")
+  }, ['header', 'icon'].includes(collapsible) ? collapsibleProps : {}), iconNodeInner);
+  var collapsePanelClassNames = (0, _classnames.default)("".concat(prefixCls, "-item"), (0, _defineProperty2.default)((0, _defineProperty2.default)({}, "".concat(prefixCls, "-item-active"), isActive), "".concat(prefixCls, "-item-disabled"), disabled), className);
+  var headerClassName = (0, _classnames.default)(headerClass, "".concat(prefixCls, "-header"), (0, _defineProperty2.default)({}, "".concat(prefixCls, "-collapsible-").concat(collapsible), !!collapsible), customizeClassNames.header);
 
   // ======================== HeaderProps ========================
-  var headerProps = {
+  var headerProps = (0, _objectSpread2.default)({
     className: headerClassName,
-    'aria-expanded': isActive,
-    'aria-disabled': disabled,
-    onKeyDown: handleKeyDown,
     style: styles.header
-  };
-  if (!collapsibleHeader && !collapsibleIcon) {
-    headerProps.onClick = handleItemClick;
-    headerProps.role = accordion ? 'tab' : 'button';
-    headerProps.tabIndex = disabled ? -1 : 0;
-  }
+  }, ['header', 'icon'].includes(collapsible) ? {} : collapsibleProps);
 
@@ -86,6 +77,5 @@ // ======================== Render ========================
     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", {
+  }), /*#__PURE__*/_react.default.createElement("div", headerProps, showArrow && iconNode, /*#__PURE__*/_react.default.createElement("span", (0, _extends2.default)({
+    className: "".concat(prefixCls, "-header-text")
+  }, collapsible === 'header' ? collapsibleProps : {}), header), ifExtraExist && /*#__PURE__*/_react.default.createElement("div", {
     className: "".concat(prefixCls, "-extra")
@@ -92,0 +82,0 @@ }, extra)), /*#__PURE__*/_react.default.createElement(_rcMotion.default, (0, _extends2.default)({

package.json

 {
   "name": "rc-collapse",
-  "version": "3.8.0",
+  "version": "3.9.0",
   "description": "rc-collapse ui component for react",
@@ -38,3 +38,3 @@ "keywords": [
     "now-build": "npm run docs:build",
-    "prepublishOnly": "npm run compile",
+    "prepublishOnly": "npm run compile && np --yolo --no-publish",
     "prettier": "prettier --write \"**/*.{ts,tsx,js,jsx,json,md}\"",
@@ -58,2 +58,3 @@ "postpublish": "npm run docs:deploy",
     "@testing-library/react": "^14.1.2",
+    "@testing-library/user-event": "^14.5.2",
     "@types/classnames": "^2.2.9",
@@ -60,0 +61,0 @@ "@types/jest": "^29.4.0",

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

Worsened metrics

Total package byte prevSize

52402

decreased by-0.33%

Dev dependency count

24

increased by4.35%

Lines of code

984

decreased by-2.28%

No dependency changes