refactor: extraction hook

Wxh16144-forks · Apr 14, 2023 · 59a9d5f · 59a9d5f
1 parent bad3635
commit 59a9d5f
Show file tree

Hide file tree

Showing 2 changed files with 33 additions and 59 deletions.
diff --git a/src/Collapse.tsx b/src/Collapse.tsx
@@ -1,9 +1,9 @@
 import classNames from 'classnames';
-import toArray from 'rc-util/lib/Children/toArray';
 import useMergedState from 'rc-util/lib/hooks/useMergedState';
 import warning from 'rc-util/lib/warning';
 import React from 'react';
-import type { CollapsePanelProps, CollapseProps, CollapsibleType, ItemType } from './interface';
+import useItems from './hooks/useItems';
+import type { CollapsePanelProps, CollapseProps, CollapsibleType } from './interface';
 import CollapsePanel from './Panel';
 
 function getActiveKeysArray(activeKey: React.Key | React.Key[]) {
@@ -23,7 +23,7 @@ const Collapse = React.forwardRef<HTMLDivElement, CollapseProps>((props, ref) =>
     style,
     accordion,
     className,
-    children: rawChildren,
+    children,
     collapsible,
     openMotion,
     expandIcon,
@@ -59,7 +59,7 @@ const Collapse = React.forwardRef<HTMLDivElement, CollapseProps>((props, ref) =>
 
   // ======================== Children ========================
   warning(
-    !rawChildren,
+    !children,
     '`children` will be removed in next major version. Please use `items` instead.',
   );
 
@@ -121,61 +121,9 @@ const Collapse = React.forwardRef<HTMLDivElement, CollapseProps>((props, ref) =>
     return React.cloneElement(child, childProps);
   };
 
-  // eslint-disable-next-line @typescript-eslint/no-shadow
-  const convertItemsToNodes = (items: ItemType[]) =>
-    items.map((item, index) => {
-      const {
-        children,
-        label,
-        key: rawKey,
-        collapsible: rawCollapsible,
-        onItemClick: rawOnItemClick,
-        destroyInactivePanel: rawDestroyInactivePanel,
-        ...restProps
-      } = item;
-
-      // You may be puzzled why you want to convert them all into strings, me too.
-      // Maybe: https://github.com/react-component/collapse/blob/aac303a8b6ff30e35060b4f8fecde6f4556fcbe2/src/Collapse.tsx#L15
-      const key = String(rawKey ?? index);
-      const mergeCollapsible = rawCollapsible ?? collapsible;
-      const mergeDestroyInactivePanel = rawDestroyInactivePanel ?? destroyInactivePanel;
-
-      const handleItemClick = (value: React.Key) => {
-        if (mergeCollapsible === 'disabled') return;
-        onClickItem(value);
-        rawOnItemClick?.(value);
-      };
-
-      let isActive = false;
-      if (accordion) {
-        isActive = activeKey[0] === key;
-      } else {
-        isActive = activeKey.indexOf(key) > -1;
-      }
-
-      return (
-        <CollapsePanel
-          {...restProps}
-          prefixCls={prefixCls}
-          key={key}
-          panelKey={key}
-          isActive={isActive}
-          accordion={accordion}
-          openMotion={openMotion}
-          expandIcon={expandIcon}
-          header={label}
-          collapsible={mergeCollapsible}
-          onItemClick={handleItemClick}
-          destroyInactivePanel={mergeDestroyInactivePanel}
-        >
-          {children}
-        </CollapsePanel>
-      );
-    });
+  const mergedChildren = useItems(items, children);
 
-  const children = Array.isArray(items)
-    ? convertItemsToNodes(items)
-    : toArray(rawChildren).map(getNewChild);
+  const childNodes = mergedChildren.map(getNewChild);
 
   // ======================== Render ========================
   return (
@@ -185,7 +133,7 @@ const Collapse = React.forwardRef<HTMLDivElement, CollapseProps>((props, ref) =>
       style={style}
       role={accordion ? 'tablist' : undefined}
     >
-      {children}
+      {childNodes}
     </div>
   );
 });

diff --git a/src/hooks/useItems.tsx b/src/hooks/useItems.tsx
@@ -0,0 +1,26 @@
+import toArray from 'rc-util/lib/Children/toArray';
+import React from 'react';
+import type { CollapsePanelProps, ItemType } from '../interface';
+import CollapsePanel from '../Panel';
+
+const convertItemsToNodes = (items: ItemType[]) =>
+  items.map((item, index) => {
+    const { label, key: rawKey, ...restProps } = item;
+
+    const key = String(rawKey ?? index);
+
+    return <CollapsePanel {...restProps} key={key} panelKey={key} header={label} />;
+  });
+
+function useItems(
+  items?: ItemType[],
+  rawChildren?: React.ReactNode,
+): React.ReactElement<CollapsePanelProps>[] {
+  if (Array.isArray(items)) {
+    return convertItemsToNodes(items);
+  }
+
+  return toArray(rawChildren);
+}
+
+export default useItems;