rc-collapse - npm Package Compare versions

Comparing version 3.7.3 to 3.8.0

es/interface.d.ts

@@ -35,3 +35,11 @@ import type { CSSMotionProps } from 'rc-motion';
     className?: string;
+    classNames?: {
+        header?: string;
+        body?: string;
+    };
     style?: object;
+    styles?: {
+        header?: React.CSSProperties;
+        body?: React.CSSProperties;
+    };
     isActive?: boolean;
@@ -38,0 +46,0 @@ openMotion?: CSSMotionProps;

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";
-var _excluded = ["showArrow", "headerClass", "isActive", "onItemClick", "forceRender", "className", "prefixCls", "collapsible", "accordion", "panelKey", "extra", "header", "expandIcon", "openMotion", "destroyInactivePanel", "children"];
+var _excluded = ["showArrow", "headerClass", "isActive", "onItemClick", "forceRender", "className", "classNames", "styles", "prefixCls", "collapsible", "accordion", "panelKey", "extra", "header", "expandIcon", "openMotion", "destroyInactivePanel", "children"];
 import classNames from 'classnames';
@@ -18,2 +18,6 @@ import CSSMotion from 'rc-motion';
     className = props.className,
+    _props$classNames = props.classNames,
+    customizeClassNames = _props$classNames === void 0 ? {} : _props$classNames,
+    _props$styles = props.styles,
+    styles = _props$styles === void 0 ? {} : _props$styles,
     prefixCls = props.prefixCls,
@@ -54,3 +58,3 @@ collapsible = props.collapsible,
   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));
+  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);
 
@@ -62,3 +66,4 @@ // ======================== HeaderProps ========================
     'aria-disabled': disabled,
-    onKeyDown: handleKeyDown
+    onKeyDown: handleKeyDown,
+    style: styles.header
   };
@@ -93,3 +98,5 @@ if (!collapsibleHeader && !collapsibleIcon) {
       className: motionClassName,
+      classNames: customizeClassNames,
       style: motionStyle,
+      styles: styles,
       isActive: isActive,
@@ -96,0 +103,0 @@ forceRender: forceRender,

es/PanelContent.js

@@ -12,3 +12,5 @@ import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
     isActive = props.isActive,
-    role = props.role;
+    role = props.role,
+    customizeClassNames = props.classNames,
+    styles = props.styles;
   var _React$useState = React.useState(isActive || forceRender),
@@ -32,3 +34,4 @@ _React$useState2 = _slicedToArray(_React$useState, 2),
   }, /*#__PURE__*/React.createElement("div", {
-    className: "".concat(prefixCls, "-content-box")
+    className: classnames("".concat(prefixCls, "-content-box"), customizeClassNames === null || customizeClassNames === void 0 ? void 0 : customizeClassNames.body),
+    style: styles === null || styles === void 0 ? void 0 : styles.body
   }, children));
@@ -35,0 +38,0 @@ });

lib/interface.d.ts

@@ -35,3 +35,11 @@ import type { CSSMotionProps } from 'rc-motion';
     className?: string;
+    classNames?: {
+        header?: string;
+        body?: string;
+    };
     style?: object;
+    styles?: {
+        header?: React.CSSProperties;
+        body?: React.CSSProperties;
+    };
     isActive?: boolean;
@@ -38,0 +46,0 @@ openMotion?: CSSMotionProps;

lib/Panel.js

@@ -16,3 +16,3 @@ "use strict";
 var _PanelContent = _interopRequireDefault(require("./PanelContent"));
-var _excluded = ["showArrow", "headerClass", "isActive", "onItemClick", "forceRender", "className", "prefixCls", "collapsible", "accordion", "panelKey", "extra", "header", "expandIcon", "openMotion", "destroyInactivePanel", "children"];
+var _excluded = ["showArrow", "headerClass", "isActive", "onItemClick", "forceRender", "className", "classNames", "styles", "prefixCls", "collapsible", "accordion", "panelKey", "extra", "header", "expandIcon", "openMotion", "destroyInactivePanel", "children"];
 var CollapsePanel = /*#__PURE__*/_react.default.forwardRef(function (props, ref) {
@@ -26,2 +26,6 @@ var _props$showArrow = props.showArrow,
     className = props.className,
+    _props$classNames = props.classNames,
+    customizeClassNames = _props$classNames === void 0 ? {} : _props$classNames,
+    _props$styles = props.styles,
+    styles = _props$styles === void 0 ? {} : _props$styles,
     prefixCls = props.prefixCls,
@@ -62,3 +66,3 @@ collapsible = props.collapsible,
   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));
+  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);
 
@@ -70,3 +74,4 @@ // ======================== HeaderProps ========================
     'aria-disabled': disabled,
-    onKeyDown: handleKeyDown
+    onKeyDown: handleKeyDown,
+    style: styles.header
   };
@@ -101,3 +106,5 @@ if (!collapsibleHeader && !collapsibleIcon) {
       className: motionClassName,
+      classNames: customizeClassNames,
       style: motionStyle,
+      styles: styles,
       isActive: isActive,
@@ -104,0 +111,0 @@ forceRender: forceRender,

lib/PanelContent.js

@@ -19,3 +19,5 @@ "use strict";
     isActive = props.isActive,
-    role = props.role;
+    role = props.role,
+    customizeClassNames = props.classNames,
+    styles = props.styles;
   var _React$useState = _react.default.useState(isActive || forceRender),
@@ -39,3 +41,4 @@ _React$useState2 = (0, _slicedToArray2.default)(_React$useState, 2),
   }, /*#__PURE__*/_react.default.createElement("div", {
-    className: "".concat(prefixCls, "-content-box")
+    className: (0, _classnames2.default)("".concat(prefixCls, "-content-box"), customizeClassNames === null || customizeClassNames === void 0 ? void 0 : customizeClassNames.body),
+    style: styles === null || styles === void 0 ? void 0 : styles.body
   }, children));
@@ -42,0 +45,0 @@ });

package.json

 {
   "name": "rc-collapse",
-  "version": "3.7.3",
+  "version": "3.8.0",
   "description": "rc-collapse ui component for react",
@@ -31,9 +31,12 @@ "keywords": [
   "scripts": {
-    "build": "dumi build",
     "compile": "father build && lessc assets/index.less assets/index.css",
-    "coverage": "npm test -- --coverage",
+    "coverage": "rc-test --coverage",
+    "docs:build": "dumi build",
+    "docs:deploy": "npm run docs:build && gh-pages -d .doc",
     "lint": "eslint src/ --ext .ts,.tsx,.jsx,.js,.md",
-    "prepare": "husky install",
-    "prepublishOnly": "npm run compile && np --yolo --no-publish",
+    "prepare": "husky",
+    "now-build": "npm run docs:build",
+    "prepublishOnly": "npm run compile",
     "prettier": "prettier --write \"**/*.{ts,tsx,js,jsx,json,md}\"",
+    "postpublish": "npm run docs:deploy",
     "start": "dumi dev",
@@ -59,3 +62,3 @@ "test": "rc-test"
     "@types/react-dom": "^18.0.0",
-    "@umijs/fabric": "^3.0.0",
+    "@umijs/fabric": "^4.0.0",
     "dumi": "^2.1.1",
@@ -66,3 +69,3 @@ "eslint": "^8.55.0",
     "father": "^4.1.3",
-    "husky": "^8.0.3",
+    "husky": "^9.0.0",
     "jest": "^29.1.2",
@@ -69,0 +72,0 @@ "less": "^4.2.0",

README.md

@@ -133,3 +133,3 @@ # rc-collapse
         <th style="width: 100px;">name</th>
-        <th style="width: 50px;">type</th>
+        <th style="width: 200px;">type</th>
         <th>default</th>
@@ -165,2 +165,8 @@ <th>description</th>
       <tr>
+        <td>classNames</td>
+        <td>{ header?: string, body?: string }</td>
+        <th></th>
+        <td>Semantic structure className</td>
+      </tr>
+      <tr>
         <td>style</td>
@@ -172,2 +178,8 @@ <td>object</td>
       <tr>
+        <td>styles</td>
+        <td>{ header?: React.CSSProperties, body?: React.CSSProperties }</td>
+        <th></th>
+        <td>Semantic structure styles</td>
+      </tr>
+      <tr>
         <td>openMotion</td>
@@ -209,3 +221,3 @@ <td>object</td>
 
-```jsx
+```tsx | pure
 const App = () => {
@@ -212,0 +224,0 @@ const items: CollapseProps['items'] = [

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

52577

increased by4.05%

Lines of code

1007

increased by3.71%

Number of lines in readme file

271

increased by4.63%

No dependency changes