rc-collapse - npm Package Compare versions

Comparing version 3.5.2 to 3.6.0

es/Collapse.d.ts

 import React from 'react';
-import type { CollapsePanelProps, CollapseProps } from './interface';
+import type { CollapseProps } from './interface';
 declare const _default: React.ForwardRefExoticComponent<
   CollapseProps & React.RefAttributes<HTMLDivElement>
 > & {
-  Panel: React.ForwardRefExoticComponent<CollapsePanelProps & React.RefAttributes<HTMLDivElement>>;
+  /**
+   * @deprecated use `items` instead, will be removed in `v4.0.0`
+   */
+  Panel: React.ForwardRefExoticComponent<
+    import('./interface').CollapsePanelProps & React.RefAttributes<HTMLDivElement>
+  >;
 };
 export default _default;

es/Collapse.js

@@ -5,5 +5,6 @@ import _slicedToArray from '@babel/runtime/helpers/esm/slicedToArray';
 import classNames from 'classnames';
-import toArray from 'rc-util/es/Children/toArray';
 import useMergedState from 'rc-util/es/hooks/useMergedState';
+import warning from 'rc-util/es/warning';
 import React from 'react';
+import useItems from './hooks/useItems';
 import CollapsePanel from './Panel';
@@ -29,3 +30,3 @@ function getActiveKeysArray(activeKey) {
     className = props.className,
-    rawChildren = props.children,
+    children = props.children,
     collapsible = props.collapsible,
@@ -36,3 +37,4 @@ openMotion = props.openMotion,
     defaultActiveKey = props.defaultActiveKey,
-    _onChange = props.onChange;
+    _onChange = props.onChange,
+    items = props.items;
   var collapseClassName = classNames(prefixCls, className);
@@ -50,3 +52,3 @@ var _useMergedState = useMergedState([], {
     setActiveKey = _useMergedState2[1];
-  var onClickItem = function onClickItem(key) {
+  var onItemClick = function onItemClick(key) {
     return setActiveKey(function () {
@@ -68,56 +70,17 @@ if (accordion) {
   // ======================== Children ========================
-  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,
-      childOnItemClick = _child$props.onItemClick;
-    var isActive = false;
-    if (accordion) {
-      isActive = activeKey[0] === key;
-    } else {
-      isActive = activeKey.indexOf(key) > -1;
-    }
-    var mergeCollapsible =
-      childCollapsible !== null && childCollapsible !== void 0 ? childCollapsible : collapsible;
-    var handleItemClick = function handleItemClick(value) {
-      if (mergeCollapsible === 'disabled') return;
-      onClickItem(value);
-      childOnItemClick === null || childOnItemClick === void 0 ? void 0 : childOnItemClick(value);
-    };
-    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: handleItemClick,
-      expandIcon: expandIcon,
-      collapsible: mergeCollapsible,
-    };
+  warning(
+    !children,
+    '`children` will be removed in next major version. Please use `items` instead.',
+  );
+  var mergedChildren = useItems(items, children, {
+    prefixCls: prefixCls,
+    accordion: accordion,
+    openMotion: openMotion,
+    expandIcon: expandIcon,
+    collapsible: collapsible,
+    destroyInactivePanel: destroyInactivePanel,
+    onItemClick: onItemClick,
+    activeKey: activeKey,
+  });
 
-    // https://github.com/ant-design/ant-design/issues/20479
-    if (typeof child.type === 'string') {
-      return child;
-    }
-    Object.keys(childProps).forEach(function (propName) {
-      if (typeof childProps[propName] === 'undefined') {
-        delete childProps[propName];
-      }
-    });
-    return /*#__PURE__*/ React.cloneElement(child, childProps);
-  };
-  var children = toArray(rawChildren).map(getNewChild);
-
   // ======================== Render ========================
@@ -132,7 +95,10 @@ return /*#__PURE__*/ React.createElement(
     },
-    children,
+    mergedChildren,
   );
 });
 export default Object.assign(Collapse, {
+  /**
+   * @deprecated use `items` instead, will be removed in `v4.0.0`
+   */
   Panel: CollapsePanel,
 });

es/index.d.ts

@@ -5,4 +5,7 @@ /// <reference types="react" />
 export default Collapse;
+/**
+ * @deprecated use `items` instead, will be removed in `v4.0.0`
+ */
 export declare const Panel: import('react').ForwardRefExoticComponent<
   import('./interface').CollapsePanelProps & import('react').RefAttributes<HTMLDivElement>
 >;

es/index.js

 import Collapse from './Collapse';
 export default Collapse;
+
+/**
+ * @deprecated use `items` instead, will be removed in `v4.0.0`
+ */
 var Panel = Collapse.Panel;
 export { Panel };

es/interface.d.ts

 import type { CSSMotionProps } from 'rc-motion';
 import type * as React from 'react';
 export declare type CollapsibleType = 'header' | 'icon' | 'disabled';
+export interface ItemType
+  extends Omit<
+    CollapsePanelProps,
+    'header' | 'prefixCls' | 'panelKey' | 'isActive' | 'accordion' | 'openMotion' | 'expandIcon'
+  > {
+  key?: CollapsePanelProps['panelKey'];
+  label?: CollapsePanelProps['header'];
+  ref?: React.RefObject<HTMLDivElement>;
+}
 export interface CollapseProps {
@@ -17,2 +26,7 @@ prefixCls?: string;
   children?: React.ReactNode;
+  /**
+   * Collapse items content
+   * @since 3.6.0
+   */
+  items?: ItemType[];
 }
@@ -19,0 +33,0 @@ export interface CollapsePanelProps extends React.DOMAttributes<HTMLDivElement> {

lib/Collapse.d.ts

 import React from 'react';
-import type { CollapsePanelProps, CollapseProps } from './interface';
+import type { CollapseProps } from './interface';
 declare const _default: React.ForwardRefExoticComponent<
   CollapseProps & React.RefAttributes<HTMLDivElement>
 > & {
-  Panel: React.ForwardRefExoticComponent<CollapsePanelProps & React.RefAttributes<HTMLDivElement>>;
+  /**
+   * @deprecated use `items` instead, will be removed in `v4.0.0`
+   */
+  Panel: React.ForwardRefExoticComponent<
+    import('./interface').CollapsePanelProps & React.RefAttributes<HTMLDivElement>
+  >;
 };
 export default _default;

lib/Collapse.js

@@ -14,5 +14,6 @@ 'use strict';
 var _classnames = _interopRequireDefault(require('classnames'));
-var _toArray = _interopRequireDefault(require('rc-util/lib/Children/toArray'));
 var _useMergedState3 = _interopRequireDefault(require('rc-util/lib/hooks/useMergedState'));
+var _warning = _interopRequireDefault(require('rc-util/lib/warning'));
 var _react = _interopRequireDefault(require('react'));
+var _useItems = _interopRequireDefault(require('./hooks/useItems'));
 var _Panel = _interopRequireDefault(require('./Panel'));
@@ -38,3 +39,3 @@ function getActiveKeysArray(activeKey) {
     className = props.className,
-    rawChildren = props.children,
+    children = props.children,
     collapsible = props.collapsible,
@@ -45,3 +46,4 @@ openMotion = props.openMotion,
     defaultActiveKey = props.defaultActiveKey,
-    _onChange = props.onChange;
+    _onChange = props.onChange,
+    items = props.items;
   var collapseClassName = (0, _classnames.default)(prefixCls, className);
@@ -59,3 +61,3 @@ var _useMergedState = (0, _useMergedState3.default)([], {
     setActiveKey = _useMergedState2[1];
-  var onClickItem = function onClickItem(key) {
+  var onItemClick = function onItemClick(key) {
     return setActiveKey(function () {
@@ -77,56 +79,15 @@ if (accordion) {
   // ======================== Children ========================
-  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,
-      childOnItemClick = _child$props.onItemClick;
-    var isActive = false;
-    if (accordion) {
-      isActive = activeKey[0] === key;
-    } else {
-      isActive = activeKey.indexOf(key) > -1;
-    }
-    var mergeCollapsible =
-      childCollapsible !== null && childCollapsible !== void 0 ? childCollapsible : collapsible;
-    var handleItemClick = function handleItemClick(value) {
-      if (mergeCollapsible === 'disabled') return;
-      onClickItem(value);
-      childOnItemClick === null || childOnItemClick === void 0 ? void 0 : childOnItemClick(value);
-    };
-    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: handleItemClick,
-      expandIcon: expandIcon,
-      collapsible: mergeCollapsible,
-    };
+  (0,
+  _warning.default)(!children, '`children` will be removed in next major version. Please use `items` instead.');
+  var mergedChildren = (0, _useItems.default)(items, children, {
+    prefixCls: prefixCls,
+    accordion: accordion,
+    openMotion: openMotion,
+    expandIcon: expandIcon,
+    collapsible: collapsible,
+    destroyInactivePanel: destroyInactivePanel,
+    onItemClick: onItemClick,
+    activeKey: activeKey,
+  });
 
-    // https://github.com/ant-design/ant-design/issues/20479
-    if (typeof child.type === 'string') {
-      return child;
-    }
-    Object.keys(childProps).forEach(function (propName) {
-      if (typeof childProps[propName] === 'undefined') {
-        delete childProps[propName];
-      }
-    });
-    return /*#__PURE__*/ _react.default.cloneElement(child, childProps);
-  };
-  var children = (0, _toArray.default)(rawChildren).map(getNewChild);
-
   // ======================== Render ========================
@@ -141,8 +102,11 @@ return /*#__PURE__*/ _react.default.createElement(
     },
-    children,
+    mergedChildren,
   );
 });
 var _default = Object.assign(Collapse, {
+  /**
+   * @deprecated use `items` instead, will be removed in `v4.0.0`
+   */
   Panel: _Panel.default,
 });
 exports.default = _default;

lib/index.d.ts

@@ -5,4 +5,7 @@ /// <reference types="react" />
 export default Collapse;
+/**
+ * @deprecated use `items` instead, will be removed in `v4.0.0`
+ */
 export declare const Panel: import('react').ForwardRefExoticComponent<
   import('./interface').CollapsePanelProps & import('react').RefAttributes<HTMLDivElement>
 >;

lib/index.js

@@ -10,4 +10,7 @@ 'use strict';
 var _default = _Collapse.default;
+/**
+ * @deprecated use `items` instead, will be removed in `v4.0.0`
+ */
 exports.default = _default;
 var Panel = _Collapse.default.Panel;
 exports.Panel = Panel;

lib/interface.d.ts

 import type { CSSMotionProps } from 'rc-motion';
 import type * as React from 'react';
 export declare type CollapsibleType = 'header' | 'icon' | 'disabled';
+export interface ItemType
+  extends Omit<
+    CollapsePanelProps,
+    'header' | 'prefixCls' | 'panelKey' | 'isActive' | 'accordion' | 'openMotion' | 'expandIcon'
+  > {
+  key?: CollapsePanelProps['panelKey'];
+  label?: CollapsePanelProps['header'];
+  ref?: React.RefObject<HTMLDivElement>;
+}
 export interface CollapseProps {
@@ -17,2 +26,7 @@ prefixCls?: string;
   children?: React.ReactNode;
+  /**
+   * Collapse items content
+   * @since 3.6.0
+   */
+  items?: ItemType[];
 }
@@ -19,0 +33,0 @@ export interface CollapsePanelProps extends React.DOMAttributes<HTMLDivElement> {

package.json

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

README.md

@@ -110,2 +110,10 @@ # rc-collapse
       </tr>
+      <tr>
+          <td>items</td>
+          <td>
+            <a href="./src/interface.ts#ItemType">interface.ts#ItemType</a>
+          </td>
+          <th>-</th>
+          <td>collapse items content</td>
+      </tr>
     </tbody>
@@ -120,2 +128,4 @@ </table>
 
+> **deprecated** use `items` instead, will be removed in `v4.0.0`
+
 <table class="table table-bordered table-striped">
@@ -122,0 +132,0 @@ <thead>

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

51789

increased by24.08%

Number of package files

28

increased by16.67%

Lines of code

1268

increased by29.26%

Number of lines in readme file

224

increased by4.67%

No dependency changes