feat(components/draggable): 重构并优化 draggable 组件

mengxinssfd · mengxinssfd · commit a6cc91fcf7ad · 2024-05-31T03:51:23.000+08:00
1. 使用 react 事件绑定代替原来的 rxjs 事件绑定
2. 可以指定组件包裹元素类型，也可以让包裹元素为空
3. 列表元素 draggable 为 false 时不可拖拽
diff --git a/packages/components/src/draggable/Draggable.tsx b/packages/components/src/draggable/Draggable.tsx
@@ -1,62 +1,38 @@
-import { useForceUpdate, useForwardRef, getClasses } from '@pkg/shared';
-import type { DraggableProps, DraggableFC } from './draggable.types';
 // import EnUS from './locale/en-US';
-import React, { useEffect, Children, useRef } from 'react';
+import type { DraggableProps, DraggableFC } from './draggable.types';
+import { createElement, forwardRef, FC } from 'react';
 // import { useLocale } from '~/config-provider/useLocale';
 import type { RequiredPart } from '@tool-pack/types';
 import { getClassNames } from '@tool-pack/basic';
-import children from '~/timeline/demo/children';
-import { moveItem, drag } from './utils';
+import { useDraggableChildren } from './hooks';
+import { getClasses } from '@pkg/shared';
 
-const cls = getClasses('draggable', ['ghost'], []);
-const defaultProps = {} satisfies Partial<DraggableProps>;
+export const cls = getClasses('draggable', ['ghost', 'item'], []);
+const defaultProps = {
+  tag: 'div',
+  list: [],
+} satisfies Partial<DraggableProps>;
 
-export const _Draggable: React.FC<DraggableProps> = React.forwardRef<
+export const _Draggable: FC<DraggableProps> = forwardRef<
   HTMLDivElement,
   DraggableProps
->((props, outerRef) => {
+>((props, ref) => {
   // const locale = useLocale('draggable', EnUS);
-  const {
-    children: outerChildren,
-    attrs = {},
-    list = [],
-    onChange,
-  } = props as RequiredPart<DraggableProps, keyof typeof defaultProps>;
-  const ref = useForwardRef(outerRef);
-  const forceUpdate = useForceUpdate();
+  const { attrs = {}, tag } = props as RequiredPart<
+    DraggableProps,
+    keyof typeof defaultProps
+  >;
+  const children = useDraggableChildren(props);
 
-  const childrenRef = useRef<React.ReactNode[]>(
-    Children.toArray(outerChildren),
-  );
-  const listRef = useRef(list);
-
-  useEffect(() => {
-    listRef.current = list;
-    childrenRef.current = Children.toArray(outerChildren);
-    forceUpdate();
-    return drag(
+  if (tag === null) return children;
+  return createElement(
+    tag,
+    {
+      ...attrs,
+      className: getClassNames(cls.root, attrs.className),
       ref,
-      cls.__.ghost,
-      (prevIndex, currIndex) => {
-        moveItem(childrenRef.current, prevIndex, currIndex);
-        moveItem(listRef.current, prevIndex, currIndex);
-        forceUpdate();
-      },
-      (prevIndex, currIndex) => {
-        moveItem(listRef.current, prevIndex, currIndex);
-        onChange?.(listRef.current.slice());
-      },
-    );
-  }, [children, list, ref]);
-
-  return (
-    <div
-      {...attrs}
-      className={getClassNames(cls.root, attrs.className)}
-      ref={ref}
-    >
-      {childrenRef.current}
-    </div>
+    },
+    children,
   );
 });
 
diff --git a/packages/components/src/draggable/__tests__/Draggable.test.tsx b/packages/components/src/draggable/__tests__/Draggable.test.tsx
@@ -26,4 +26,35 @@ describe('Draggable', () => {
     const r = render(<App />);
     expect(r.container.firstChild).toMatchSnapshot();
   });
+  test('tag', () => {
+    expect(
+      (
+        render(
+          <Draggable list={[]}>
+            <span>1</span>
+          </Draggable>,
+        ).container.firstChild as HTMLElement
+      ).tagName,
+    ).toBe('DIV');
+
+    expect(
+      (
+        render(
+          <Draggable tag="section" list={[]}>
+            <span>1</span>
+          </Draggable>,
+        ).container.firstChild as HTMLElement
+      ).tagName,
+    ).toBe('SECTION');
+
+    expect(
+      (
+        render(
+          <Draggable tag={null} list={[]}>
+            <span>1</span>
+          </Draggable>,
+        ).container.firstChild as HTMLElement
+      ).tagName,
+    ).toBe('SPAN');
+  });
 });
diff --git a/packages/components/src/draggable/__tests__/__snapshots__/Draggable.test.tsx.snap b/packages/components/src/draggable/__tests__/__snapshots__/Draggable.test.tsx.snap
@@ -5,7 +5,8 @@ exports[`Draggable base 1`] = `
   class="t-draggable"
 >
   <div
-    class="draggable-item"
+    class="draggable-item t-draggable__item"
+    draggable="true"
   >
     <span>
       1
@@ -21,7 +22,8 @@ exports[`Draggable base 1`] = `
     </span>
   </div>
   <div
-    class="draggable-item"
+    class="draggable-item t-draggable__item"
+    draggable="true"
   >
     <span>
       2
@@ -37,7 +39,8 @@ exports[`Draggable base 1`] = `
     </span>
   </div>
   <div
-    class="draggable-item"
+    class="draggable-item t-draggable__item"
+    draggable="true"
   >
     <span>
       3
diff --git a/packages/components/src/draggable/demo/basic.module.scss b/packages/components/src/draggable/demo/basic.module.scss
@@ -6,7 +6,6 @@
     }
     .t-draggable {
       flex: 1;
-      cursor: move;
     }
     .draggable-item {
       padding: 0 0.5rem;
diff --git a/packages/components/src/draggable/demo/draggable.module.scss b/packages/components/src/draggable/demo/draggable.module.scss
@@ -0,0 +1,24 @@
+.root {
+  :global {
+    .main {
+      display: flex;
+      margin-top: 1rem;
+    }
+    .t-draggable {
+      flex: 1;
+    }
+    .draggable-item {
+      padding: 0 0.5rem;
+      border: 1px solid #e6e6e6;
+      background: #fff1d7;
+      line-height: 32px;
+      &[draggable='false'] {
+        background: #f6f4f0;
+      }
+    }
+    .data {
+      padding: 0 20px;
+      white-space: pre-wrap;
+    }
+  }
+}
diff --git a/packages/components/src/draggable/demo/draggable.tsx b/packages/components/src/draggable/demo/draggable.tsx
@@ -0,0 +1,40 @@
+/**
+ * title: draggable
+ * description: html 元素设置 draggable 为 false 时不可拖动。
+ */
+
+import { Draggable } from '@tool-pack/react-ui';
+import styles from './draggable.module.scss';
+import React from 'react';
+
+const App: React.FC = () => {
+  const [state, setState] = React.useState<{ name: string; id: number }[]>([
+    { name: 'John', id: 1 },
+    { name: 'Joao', id: 2 },
+    { name: 'Jean', id: 3 },
+    { name: 'Gerard', id: 4 },
+  ]);
+  return (
+    <div className={styles['root']}>
+      <div className="main">
+        <Draggable onChange={setState} list={state}>
+          {state.map((item, index) => (
+            <div className="draggable-item" draggable={index > 1} key={item.id}>
+              <span>{index + 1}.</span> <span>{item.name}</span>{' '}
+              <span>{item.id}</span>
+            </div>
+          ))}
+        </Draggable>
+        <div className="data">
+          [
+          {state.map((it) => (
+            <div key={it.id}>{JSON.stringify(it)}</div>
+          ))}
+          ]
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default App;
diff --git a/packages/components/src/draggable/demo/tag.module.scss b/packages/components/src/draggable/demo/tag.module.scss
@@ -0,0 +1,21 @@
+.root {
+  :global {
+    .main {
+      display: flex;
+      margin-top: 1rem;
+    }
+    .draggable-item {
+      padding: 0 0.5rem;
+      border: 1px solid #e6e6e6;
+      background: #fff1d7;
+      line-height: 32px;
+      &[draggable='true'] {
+        cursor: col-resize;
+      }
+    }
+    .data {
+      padding: 0 20px;
+      white-space: pre-wrap;
+    }
+  }
+}
diff --git a/packages/components/src/draggable/demo/tag.tsx b/packages/components/src/draggable/demo/tag.tsx
@@ -0,0 +1,40 @@
+/**
+ * title: tag
+ * description: 默认根元素为 div，当 tag 为 null 时 Draggable 组件不提供根元素。
+ */
+
+import { Draggable } from '@tool-pack/react-ui';
+import styles from './tag.module.scss';
+import React from 'react';
+
+const App: React.FC = () => {
+  const [state, setState] = React.useState<{ name: string; id: number }[]>([
+    { name: 'John', id: 1 },
+    { name: 'Joao', id: 2 },
+    { name: 'Jean', id: 3 },
+    { name: 'Gerard', id: 4 },
+  ]);
+  return (
+    <div className={styles['root']}>
+      <div className="main">
+        <Draggable onChange={setState} list={state} tag={null}>
+          {state.map((item, index) => (
+            <div className="draggable-item" key={item.id}>
+              <span>{index + 1}.</span> <span>{item.name}</span>{' '}
+              <span>{item.id}</span>
+            </div>
+          ))}
+        </Draggable>
+        <div className="data">
+          [
+          {state.map((it) => (
+            <div key={it.id}>{JSON.stringify(it)}</div>
+          ))}
+          ]
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default App;
diff --git a/packages/components/src/draggable/draggable.types.ts b/packages/components/src/draggable/draggable.types.ts
@@ -2,6 +2,7 @@ import type { PropsBase } from '@pkg/shared';
 import type { ReactElement } from 'react';
 
 export interface DraggableProps<T = unknown> extends PropsBase<HTMLDivElement> {
+  tag?: keyof HTMLElementTagNameMap | null;
   onChange?: (list: T[]) => void;
   list: T[];
 }
diff --git a/packages/components/src/draggable/hooks/index.ts b/packages/components/src/draggable/hooks/index.ts
@@ -0,0 +1 @@
+export * from './useDraggableChildren';
diff --git a/packages/components/src/draggable/hooks/useDraggableChildren.ts b/packages/components/src/draggable/hooks/useDraggableChildren.ts
@@ -0,0 +1,99 @@
+import {
+  useChildrenWithRefs,
+  useFollowingRef,
+  useForceUpdate,
+} from '@pkg/shared';
+import { cloneElement, ReactNode, Children, useRef } from 'react';
+import type { DraggableProps } from '../draggable.types';
+import { getClassNames } from '@tool-pack/basic';
+import { moveItem } from '../utils';
+import { cls } from '../Draggable';
+
+export function useDraggableChildren({
+  children: outerChildren,
+  onChange,
+  list,
+}: Pick<DraggableProps, 'children' | 'onChange' | 'list'>): ReactNode {
+  const forceUpdate = useForceUpdate();
+  const childrenRef = useFollowingRef(outerChildren, (v) =>
+    Children.toArray(v),
+  );
+  const listRef = useFollowingRef(list, (v) => v.slice());
+  const chosenRef = useRef<{
+    overIndex: number;
+    index: number;
+    item: any;
+  } | null>(null);
+
+  const [children] = useChildrenWithRefs(
+    childrenRef.current,
+    (el, props, index) => {
+      return cloneElement(el, {
+        // 拖动目标元素事件
+        onDragStart: (e: DragEvent) => {
+          const dataTransfer = e.dataTransfer as DataTransfer;
+          // dataTransfer.setData('text', `draggable:${index}`);
+          dataTransfer.effectAllowed = 'move';
+          chosenRef.current = {
+            item: listRef.current[index],
+            overIndex: index,
+            index,
+          };
+          const el = e.currentTarget as HTMLElement;
+          el.classList.add(cls.__.ghost);
+        },
+        onDragEnd: (e: DragEvent) => {
+          const el = e.currentTarget as HTMLElement;
+          el.classList.remove(cls.__.ghost);
+        },
+        // 接受拖动目标的元素的事件
+        // eslint-disable-next-line perfectionist/sort-objects
+        onDrop: (e: DragEvent) => {
+          // const dataTransfer = e.dataTransfer as DataTransfer;
+          // const di = dataTransfer.getData('text').replace('draggable:', '');
+          //
+          // if (!di) return;
+          // const from = Number(di);
+          // dataTransfer.clearData();
+          //
+          // if (from === index) return;
+          // move(from, index);
+          if (list.some((it, i) => it !== listRef.current[i]))
+            onChange?.(listRef.current.slice());
+          e.preventDefault();
+        },
+        onDragEnter: () => {
+          const chosen = chosenRef.current;
+          if (
+            !chosen ||
+            chosen.overIndex === index ||
+            el.props.draggable === false
+          )
+            return;
+
+          move(chosen.index, index);
+          chosen.overIndex = index;
+          chosen.index = index;
+        },
+        onDragOver(e: DragEvent) {
+          if (el.props.draggable === false) return;
+          e.preventDefault(); // 必须 preventDefault onDrop 才能被触发
+        },
+        className: getClassNames(el.props.className, cls.__.item),
+        draggable: el.props.draggable ?? true,
+        ref: props.ref,
+      });
+    },
+  );
+
+  return children;
+
+  function move(from: number, to: number) {
+    if (from === to) return;
+    const temp = childrenRef.current.slice();
+    moveItem(temp, from, to);
+    childrenRef.current = temp;
+    moveItem(listRef.current, from, to);
+    forceUpdate();
+  }
+}
diff --git a/packages/components/src/draggable/index.scss b/packages/components/src/draggable/index.scss
diff --git a/packages/components/src/draggable/index.ts b/packages/components/src/draggable/index.ts
diff --git a/packages/components/src/draggable/index.zh-CN.md b/packages/components/src/draggable/index.zh-CN.md
diff --git a/packages/components/src/draggable/utils/drag.ts b/packages/components/src/draggable/utils/drag.ts
diff --git a/packages/components/src/draggable/utils/index.ts b/packages/components/src/draggable/utils/index.ts

Original file line number	Diff line number	Diff line change
@@ -5,7 +5,8 @@ exports[`Draggable base 1`] = `
`5`	`5`	`class="t-draggable"`
`6`	`6`	`>`
`7`	`7`	`<div`
`8`		`- class="draggable-item"`
	`8`	`+ class="draggable-item t-draggable__item"`
	`9`	`+ draggable="true"`
`9`	`10`	`>`
`10`	`11`	`<span>`
`11`	`12`	`1`
@@ -21,7 +22,8 @@ exports[`Draggable base 1`] = `
`21`	`22`	`</span>`
`22`	`23`	`</div>`
`23`	`24`	`<div`
`24`		`- class="draggable-item"`
	`25`	`+ class="draggable-item t-draggable__item"`
	`26`	`+ draggable="true"`
`25`	`27`	`>`
`26`	`28`	`<span>`
`27`	`29`	`2`
@@ -37,7 +39,8 @@ exports[`Draggable base 1`] = `
`37`	`39`	`</span>`
`38`	`40`	`</div>`
`39`	`41`	`<div`
`40`		`- class="draggable-item"`
	`42`	`+ class="draggable-item t-draggable__item"`
	`43`	`+ draggable="true"`
`41`	`44`	`>`
`42`	`45`	`<span>`
`43`	`46`	`3`
Original file line number	Diff line number	Diff line change
`@@ -6,7 +6,6 @@`
`6`	`6`	`}`
`7`	`7`	`.t-draggable {`
`8`	`8`	`flex: 1;`
`9`		`- cursor: move;`
`10`	`9`	`}`
`11`	`10`	`.draggable-item {`
`12`	`11`	`padding: 0 0.5rem;`
Original file line number	Diff line number	Diff line change
`@@ -2,6 +2,7 @@ import type { PropsBase } from '@pkg/shared';`
`2`	`2`	`import type { ReactElement } from 'react';`
`3`	`3`
`4`	`4`	`export interface DraggableProps<T = unknown> extends PropsBase<HTMLDivElement> {`
	`5`	`+ tag?: keyof HTMLElementTagNameMap \| null;`
`5`	`6`	`onChange?: (list: T[]) => void;`
`6`	`7`	`list: T[];`
`7`	`8`	`}`
Original file line number	Diff line number	Diff line change
`@@ -0,0 +1 @@`
	`1`	`+export * from './useDraggableChildren';`