feat(shared/hooks): useChildrenWithRefs 可控制cloneElement 参数

mengxinssfd · mengxinssfd · commit 23a120a17ed8 · 2024-05-30T11:05:53.000+08:00
diff --git a/packages/components/src/draggable/utils/drag.ts b/packages/components/src/draggable/utils/drag.ts
@@ -1,83 +1,89 @@
 import { fromEvent, switchMap, takeUntil, filter, merge, map, tap } from 'rxjs';
 import { inRange } from '@tool-pack/basic';
 import type { FN } from '@tool-pack/types';
-import type { RefObject } from 'react';
 
 export function drag(
-  ref: RefObject<HTMLDivElement>,
+  refs: (HTMLElement | undefined)[],
   ghostClassName: string,
   onMove: (prevIndex: number, currIndex: number) => void,
   onUp: (prevIndex: number, currIndex: number) => void,
 ): undefined | FN {
-  const el = ref.current;
-  if (!el) return;
-
-  const mouseDown$ = fromEvent<MouseEvent>(el, 'mousedown');
   const mouseUp$ = fromEvent<MouseEvent>(window, 'mouseup');
   const dragOver$ = fromEvent<DragEvent>(window, 'dragover');
   const dragEnd$ = fromEvent<DragEvent>(window, 'dragend');
   const dragStart$ = fromEvent<DragEvent>(window, 'dragstart');
 
-  const queue$ = mouseDown$.pipe(
-    map(findMouseDownChildIndex),
-    filter((index): boolean => index >= 0),
-    map(
-      (
-        index,
-      ): {
-        readonly chosen: HTMLElement;
-        readonly originIndex: number;
-        index: number;
-      } => {
-        const chosen = getChildrenArray()[index] as HTMLElement;
-        chosen.draggable = true;
-        return { originIndex: index, chosen, index };
-      },
-    ),
-    switchMap((params) =>
-      dragStart$.pipe(
-        tap((e): void => {
-          if (e.dataTransfer) e.dataTransfer.dropEffect = 'move';
-        }),
-        map(() => params),
+  const listen = (el: HTMLElement) => {
+    const mouseDown$ = fromEvent<MouseEvent>(el, 'mousedown');
+    const queue$ = mouseDown$.pipe(
+      map(findMouseDownChildIndex),
+      filter((index): boolean => index >= 0),
+      map(
+        (
+          index,
+        ): {
+          readonly chosen: HTMLElement;
+          readonly originIndex: number;
+          index: number;
+        } => {
+          const chosen = refs[index] as HTMLElement;
+          chosen.draggable = true;
+          return { originIndex: index, chosen, index };
+        },
+      ),
+      switchMap((params) =>
+        dragStart$.pipe(
+          tap((e): void => {
+            if (e.dataTransfer) e.dataTransfer.dropEffect = 'move';
+          }),
+          map(() => params),
+        ),
       ),
-    ),
-    switchMap((params) => {
-      return dragOver$.pipe(
-        tap((e: DragEvent): void => {
-          params.chosen.classList.add(ghostClassName);
-          if (e.dataTransfer) e.dataTransfer.dropEffect = 'move';
-          const currIndex = findDragItemIndex(e);
-          if (currIndex > -1 && currIndex !== params.index) {
-            onMove(params.index, currIndex);
-            params.index = currIndex;
-          }
-          if (mouseInElement(e, el)) e.preventDefault();
-        }),
-        takeUntil(
-          merge(
-            mouseUp$,
-            dragEnd$.pipe(
-              tap((e): void => {
-                const currIndex = findDragItemIndex(e);
-                if (currIndex > -1 && currIndex !== params.originIndex)
-                  onUp(params.index, currIndex);
+      switchMap((params) => {
+        return dragOver$.pipe(
+          tap((e: DragEvent): void => {
+            params.chosen.classList.add(ghostClassName);
+            if (e.dataTransfer) e.dataTransfer.dropEffect = 'move';
+            const currIndex = findDragItemIndex(e);
+            if (currIndex > -1 && currIndex !== params.index) {
+              onMove(params.index, currIndex);
+              params.index = currIndex;
+            }
+            if (mouseInElement(e, el)) e.preventDefault();
+          }),
+          takeUntil(
+            merge(
+              mouseUp$,
+              dragEnd$.pipe(
+                tap((e): void => {
+                  const currIndex = findDragItemIndex(e);
+                  if (currIndex > -1 && currIndex !== params.originIndex)
+                    onUp(params.index, currIndex);
+                }),
+              ),
+            ).pipe(
+              tap((): void => {
+                restoreChosenEl(params.chosen);
               }),
             ),
-          ).pipe(
-            tap((): void => {
-              restoreChosenEl(params.chosen);
-            }),
           ),
-        ),
-      );
-    }),
-  );
+        );
+      }),
+    );
+    const sub = queue$.subscribe();
+
+    return () => {
+      sub.unsubscribe();
+    };
+  };
 
-  const sub = queue$.subscribe();
+  const subs = refs.map<void | FN>((el): void | FN => {
+    if (el) return listen(el);
+  });
 
   return () => {
-    sub.unsubscribe();
+    subs.forEach((s) => s?.());
+    subs.length = 0;
   };
 
   function restoreChosenEl(el: HTMLElement): void {
@@ -87,7 +93,7 @@ export function drag(
   function findMouseDownChildIndex(e: MouseEvent): number {
     const target = e.target as HTMLElement | null;
     if (!target) return -1;
-    return getChildrenArray().findIndex((child) => child.contains(target));
+    return refs.findIndex((child) => child && child.contains(target));
   }
   function mouseInElement(ev: MouseEvent, el: HTMLElement): boolean {
     const { clientX, clientY } = ev;
@@ -98,10 +104,6 @@ export function drag(
     );
   }
   function findDragItemIndex(e: DragEvent): number {
-    return getChildrenArray().findIndex((child) => mouseInElement(e, child));
-  }
-  function getChildrenArray(): HTMLElement[] {
-    if (!el) return [];
-    return Array.from(el.children) as HTMLElement[];
+    return refs.findIndex((child) => child && mouseInElement(e, child));
   }
 }
diff --git a/packages/shared/src/hooks/__tests__/useChildrenWithRefs.test.tsx b/packages/shared/src/hooks/__tests__/useChildrenWithRefs.test.tsx
@@ -36,10 +36,11 @@ describe('useChildrenWithRefs', () => {
     expect(ref.mock.calls[0][0]).toBe(container.firstChild);
   });
   test('app', () => {
-    const obj: { ref: HTMLElement | null; refs: HTMLElement[] } = {
-      ref: null,
-      refs: [],
-    };
+    const obj: { refs: (HTMLElement | undefined)[]; ref: HTMLElement | null } =
+      {
+        ref: null,
+        refs: [],
+      };
     const App = () => {
       const ref = useRef<HTMLDivElement>(null);
       const [children, setChildren] = useState<ReactNode>(
@@ -90,4 +91,14 @@ describe('useChildrenWithRefs', () => {
     expect(obj.refs[0]).toBe(firstChild);
     expect(obj.ref).toBe(firstChild);
   });
+  test('cloneEl', () => {
+    const App = () => {
+      const [children] = useChildrenWithRefs(<div>foo</div>, (element, props) =>
+        cloneElement(element, { ...props, className: 'foo' }),
+      );
+      return children;
+    };
+    const { container } = render(<App />);
+    expect(container.firstChild).toHaveClass('foo');
+  });
 });
diff --git a/packages/shared/src/hooks/useChildrenWithRefs.ts b/packages/shared/src/hooks/useChildrenWithRefs.ts
@@ -1,4 +1,5 @@
 import {
+  JSXElementConstructor,
   isValidElement,
   cloneElement,
   ReactElement,
@@ -12,12 +13,17 @@ import {
  */
 export function useChildrenWithRefs(
   children?: ReactNode,
-): [children: ReactNode, refs: HTMLElement[]] {
+  cloneEl?: (
+    element: ReactElement<any, JSXElementConstructor<any> | string>,
+    props: { ref: (el: HTMLElement) => void },
+  ) => ReactElement,
+): [children: ReactNode, refs: (HTMLElement | undefined)[]] {
   return useMemo(() => {
-    const refs: HTMLElement[] = [];
+    const refs: (HTMLElement | undefined)[] = [];
+    const clone = cloneEl || cloneElement;
     const newChildren = Children.map(children, (child, index) => {
       if (!isValidElement(child)) return child;
-      return cloneElement(child as ReactElement, {
+      return clone(child, {
         ref: (el: HTMLElement) => {
           refs[index] = el;
           // ref 现在是直接放在 ReactElement 上的，props 虽然也有，但取的是 undefined
