feat(components): 新增 Draggable 拖拽组件

Author: mengxinssfd

internal/playground/src/router.tsx

@@ -181,6 +181,11 @@ export const baseRouter = [
     name: 'virtual-list 虚拟列表',
     path: '/virtual-list',
   },
+  {
+    element: getDemos(import.meta.glob('~/draggable/demo/*.tsx')),
+    name: 'draggable 拖拽',
+    path: '/draggable',
+  },
   /* {import insert target} */
 ];
 

packages/components/src/draggable/Draggable.tsx

@@ -0,0 +1,66 @@
+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 { 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';
+
+const cls = getClasses('draggable', ['ghost'], []);
+const defaultProps = {} satisfies Partial<DraggableProps>;
+
+export const _Draggable: React.FC<DraggableProps> = React.forwardRef<
+  HTMLDivElement,
+  DraggableProps
+>((props, outerRef) => {
+  // 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 childrenRef = useRef<React.ReactNode[]>(
+    Children.toArray(outerChildren),
+  );
+  const listRef = useRef(list);
+
+  useEffect(() => {
+    listRef.current = list;
+    childrenRef.current = Children.toArray(outerChildren);
+    forceUpdate();
+    return drag(
+      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>
+  );
+});
+
+_Draggable.defaultProps = defaultProps;
+_Draggable.displayName = 'Draggable';
+
+export const Draggable = _Draggable as DraggableFC;

packages/components/src/draggable/__tests__/Draggable.test.tsx

@@ -0,0 +1,29 @@
+import { render } from '@testing-library/react';
+import { testAttrs } from '~/testAttrs';
+import { useState } from 'react';
+import { Draggable } from '..';
+
+describe('Draggable', () => {
+  testAttrs(Draggable);
+  test('base', () => {
+    const App = () => {
+      const [state, setState] = useState<{ name: string; id: number }[]>([
+        { name: 'John', id: 1 },
+        { name: 'Joao', id: 2 },
+        { name: 'Jean', id: 3 },
+      ]);
+      return (
+        <Draggable onChange={setState} list={state}>
+          {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>
+      );
+    };
+    const r = render(<App />);
+    expect(r.container.firstChild).toMatchSnapshot();
+  });
+});

packages/components/src/draggable/__tests__/__snapshots__/Draggable.test.tsx.snap

@@ -0,0 +1,56 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Draggable base 1`] = `
+<div
+  class="t-draggable"
+>
+  <div
+    class="draggable-item"
+  >
+    <span>
+      1
+      .
+    </span>
+     
+    <span>
+      John
+    </span>
+     
+    <span>
+      1
+    </span>
+  </div>
+  <div
+    class="draggable-item"
+  >
+    <span>
+      2
+      .
+    </span>
+     
+    <span>
+      Joao
+    </span>
+     
+    <span>
+      2
+    </span>
+  </div>
+  <div
+    class="draggable-item"
+  >
+    <span>
+      3
+      .
+    </span>
+     
+    <span>
+      Jean
+    </span>
+     
+    <span>
+      3
+    </span>
+  </div>
+</div>
+`;

packages/components/src/draggable/demo/basic.module.scss

@@ -0,0 +1,22 @@
+.root {
+  :global {
+    .main {
+      display: flex;
+      margin-top: 1rem;
+    }
+    .t-draggable {
+      flex: 1;
+      cursor: move;
+    }
+    .draggable-item {
+      padding: 0 0.5rem;
+      border: 1px solid #e6e6e6;
+      background: #fff1d7;
+      line-height: 32px;
+    }
+    .data {
+      padding: 0 20px;
+      white-space: pre-wrap;
+    }
+  }
+}

packages/components/src/draggable/demo/basic.tsx

@@ -0,0 +1,54 @@
+/**
+ * title: 基础用法
+ * description: Draggable 基础用法。
+ */
+
+import { ButtonGroup, Draggable, Button } from '@tool-pack/react-ui';
+import styles from './basic.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']}>
+      <ButtonGroup>
+        <Button
+          onClick={() => {
+            const id = state.length + 1;
+            setState([...state, { name: 'anyone', id }]);
+          }}
+          type="primary"
+        >
+          添加
+        </Button>
+        <Button onClick={() => setState(state.slice(0, -1))} type="success">
+          删减
+        </Button>
+      </ButtonGroup>
+      <div className="main">
+        <Draggable onChange={setState} list={state}>
+          {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;

packages/components/src/draggable/draggable.types.ts

@@ -0,0 +1,9 @@
+import type { PropsBase } from '@pkg/shared';
+import type { ReactElement } from 'react';
+
+export interface DraggableProps<T = unknown> extends PropsBase<HTMLDivElement> {
+  onChange?: (list: T[]) => void;
+  list: T[];
+}
+export type DraggableFC = <T>(props: DraggableProps<T>) => ReactElement;
+// export interface DraggableLocale {}

packages/components/src/draggable/index.scss

@@ -0,0 +1,11 @@
+@use '../namespace' as Name;
+
+$r: Name.$draggable;
+
+.#{$r} {
+  position: relative;
+  &__ghost {
+    opacity: 0.7;
+    transform: translateZ(0);
+  }
+}

packages/components/src/draggable/index.ts

@@ -0,0 +1,2 @@
+export type { DraggableProps } from './draggable.types';
+export * from './Draggable';

packages/components/src/draggable/index.zh-CN.md

@@ -0,0 +1,28 @@
+---
+category: Components
+title: Draggable 拖拽
+atomId: Draggable
+demo:
+  cols: 2
+group:
+  title: 通用
+---
+
+Draggable 拖拽。
+
+## 代码演示
+
+<!-- prettier-ignore -->
+<code src="./demo/basic.tsx"></code>
+
+## API
+
+Draggable 的属性说明如下：
+
+| 属性     | 说明           | 类型                                            | 默认值 | 版本 |
+| -------- | -------------- | ----------------------------------------------- | ------ | ---- |
+| list     | 列表对应的数组 | any[]                                           | --     | --   |
+| onChange | 列表改动回调   | (list: T[]) => void                             | --     | --   |
+| attrs    | html 标签属性  | Partial\<React.HTMLAttributes\<HTMLDivElement>> | --     | --   |
+
+其他说明。