Merge pull request #111 from js-tool-pack/draggable-group

DraggableGroup

Author: mengxinssfd

packages/components/src/draggable/Draggable.tsx

@@ -9,7 +9,7 @@ import { useDraggableChildren } from './hooks';
 import type { ReactElement, FC } from 'react';
 import { getClasses } from '@pkg/shared';
 
-export const cls = getClasses('draggable', ['ghost', 'item'], []);
+export const cls = getClasses('draggable', ['ghost', 'item'], ['hidden']);
 const defaultProps = {
   tag: 'div',
   list: [],

packages/components/src/draggable/DraggableGroup.tsx

@@ -0,0 +1,44 @@
+import { createContext, ReactElement, useRef, FC } from 'react';
+import type { DraggableGroupProps } from './draggable.types';
+
+const defaultProps = {} satisfies Partial<DraggableGroupProps>;
+
+/**
+ * 在 dragstart 里生产，在 dragenter 消费，在 drop ｜ dragend 销毁
+ */
+export interface DraggableGroupContextProvider {
+  readonly children: ReactElement;
+  cancel?: (id: symbol) => void;
+  enter?: (id: symbol) => void;
+  drop?: (id: symbol) => void;
+  readonly item: unknown;
+  id: symbol;
+}
+export const draggableContext = createContext<{
+  fromRef: { current: DraggableGroupContextProvider | null };
+  toRef: { current: DraggableGroupContextProvider | null };
+  type: Exclude<DraggableGroupProps['type'], undefined>;
+}>({
+  fromRef: { current: null },
+  toRef: { current: null },
+  type: 'move',
+});
+
+export const DraggableGroup: FC<DraggableGroupProps> = (props) => {
+  const fromRef = useRef(null);
+  const toRef = useRef(null);
+  return (
+    <draggableContext.Provider
+      value={{
+        type: props.type || 'move',
+        fromRef,
+        toRef,
+      }}
+    >
+      {props.children}
+    </draggableContext.Provider>
+  );
+};
+
+DraggableGroup.defaultProps = defaultProps;
+DraggableGroup.displayName = 'DraggableGroup';

packages/components/src/draggable/demo/draggable-group.module.scss

@@ -0,0 +1,23 @@
+.root {
+  :global {
+    .main {
+      display: flex;
+      margin-top: 1rem;
+    }
+    .t-draggable {
+      flex: 1;
+      + .t-draggable {
+        margin-left: 6px;
+      }
+    }
+    .draggable-item {
+      padding: 0 0.5rem;
+      border: 1px solid #e6e6e6;
+      background: #fff1d7;
+      line-height: 32px;
+      &.t-draggable__ghost {
+        background: #f6a306;
+      }
+    }
+  }
+}

packages/components/src/draggable/demo/draggable-group.tsx

@@ -0,0 +1,50 @@
+/**
+ * title: 拖拽组
+ * description: 拖拽组分为两种拖拽方式，'move' 为移动数据，'copy' 为复制数据，默认为 'move'。
+ */
+
+import { DraggableGroup, Draggable, Select } from '@tool-pack/react-ui';
+import styles from './draggable-group.module.scss';
+import React, { useState } from 'react';
+
+const options = [
+  { label: 'move', value: 'move' },
+  { label: 'copy', value: 'copy' },
+];
+
+const App: React.FC = () => {
+  const [type, setType] = useState<'copy' | 'move'>('move');
+  const [state, setState] = React.useState<string[]>(['A', 'B', 'C', 'D']);
+  const [state2, setState2] = React.useState<string[]>(['a', 'b', 'c', 'd']);
+  return (
+    <div className={styles['root']}>
+      <Select
+        attrs={{ style: { display: 'inline-flex' } }}
+        onChange={setType}
+        options={options}
+        value={type}
+        size="small"
+      />
+      <div className="main">
+        <DraggableGroup type={type}>
+          <Draggable onChange={setState} list={state} key="left">
+            {state.map((item) => (
+              <div className="draggable-item" key={item}>
+                {item}
+              </div>
+            ))}
+          </Draggable>
+          <Draggable onChange={setState2} list={state2} key="right">
+            {state2.map((item) => (
+              <div className="draggable-item" key={item}>
+                {item}
+              </div>
+            ))}
+          </Draggable>
+        </DraggableGroup>
+      </div>
+    </div>
+  );
+};
+
+export default App;

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

@@ -1,5 +1,5 @@
 /**
- * title: draggable
+ * title: 禁止拖拽选项
  * description: html 元素设置 draggable 为 false 时不可拖动。
  */
 

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

@@ -1,5 +1,5 @@
 /**
- * title: tag
+ * title: 根标签
  * description: 默认根元素为 div，当 tag 为 null 时 Draggable 组件不提供根元素。
  */
 

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

@@ -1,5 +1,5 @@
 /**
- * title: transition
+ * title: 动画
  * description: 开启 transition 动画。
  */
 

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

@@ -10,3 +10,8 @@ export interface DraggableProps<T = unknown> extends PropsBase<HTMLDivElement> {
 }
 export type DraggableFC = <T>(props: DraggableProps<T>) => ReactElement;
 // export interface DraggableLocale {}
+
+export interface DraggableGroupProps {
+  children: ReactElement[];
+  type?: 'move' | 'copy';
+}