feat: update target-container demo

Author: forestxieCode

.dumi/global.less

@@ -4,6 +4,8 @@
   --vp-c-divider: #e2e2e3;
   --vp-c-bg: #ffffff;
   --vp-c-text-1: rgba(60, 60, 67);
+  --vp-c-text-2: rgba(60, 60, 67, .78);
+  --vp-c-bg-soft: #f6f6f7;
 }
 
 
@@ -68,3 +70,35 @@ input[type='number'] {
 .dumi-default-previewer-demo .demo-actions .demo-platforms {
   visibility: hidden;
 }
+
+.dumi-default-previewer-demo table{
+  display: table;
+  width: 100%;
+  font-size: 15px;
+  border-collapse: collapse;
+  margin: 20px 0;
+  overflow-x: auto;
+}
+
+.dumi-default-previewer-demo th {
+  text-align: left;
+  font-size: 14px;
+  font-weight: 600;
+  color: var(--vp-c-text-2);
+  background-color: var(--vp-c-bg-soft);
+}
+
+.dumi-default-previewer-demo tr {
+  background-color: var(--vp-c-bg);
+  border-top: 1px solid var(--vp-c-divider);
+  transition: background-color .5s;
+}
+
+.dumi-default-previewer-demo tr:nth-child(2n) {
+  background-color: var(--vp-c-bg-soft);
+}
+
+.dumi-default-previewer-demo th, .dumi-default-previewer-demo td {
+  border: 1px solid var(--vp-c-divider);
+  padding: 8px 16px;
+}

README.md

@@ -16,7 +16,7 @@ We have encapsulated a variety of usages for this, you can use components, funct
 
 ## Solve pain points
 
-In `Sortablejs` official `React` components in the past, the drag-and-drop list is implemented by using the component as a direct child element of the list. When we use some component libraries, if there is no slot for the root element of the list in the component library , it is difficult for us to implement a drag list, vue-draggable-plus perfectly solves this problem, it allows you to use a drag list on any element, we can use the selector of the specified element to get the root element of the list, and then Use the root element of the list as `container` of `Sortablejs`, for details, refer to [specify target container](/src/target-container/).
+In `Sortablejs` official `React` components in the past, the drag-and-drop list is implemented by using the component as a direct child element of the list. When we use some component libraries, if there is no slot for the root element of the list in the component library , it is difficult for us to implement a drag list, react-draggable-plus perfectly solves this problem, it allows you to use a drag list on any element, we can use the selector of the specified element to get the root element of the list, and then Use the root element of the list as `container` of `Sortablejs`, for details, refer to [specify target container](https://forestxiecode.github.io/react-draggable-plus/components/target-container).
 
 
 ## Install

src/core/compoents.tsx

@@ -1,11 +1,12 @@
 import React, { useImperativeHandle, useRef } from 'react'
 import { useDraggable, UseDraggableOptions, UseDraggableReturn } from './useDraggable'
+import { RefOrElement } from './types'
 
 export interface IDraggableProps extends UseDraggableOptions<any> {
   list: any[]
   setList: (list: any[]) => void
   tag?: string
-  target?: string
+  target?: RefOrElement
   children?: React.ReactNode;
   className?: string
 }
@@ -17,7 +18,7 @@ export interface IDraggable extends UseDraggableReturn {
 const ReactDraggable: React.ForwardRefRenderFunction<IDraggable, IDraggableProps> = (props, ref) => {
   const { list= [], setList, className, ...options } = props
   const target = useRef(null);
-  const draggable = useDraggable((props?.target || target) as string, list, setList, options)
+  const draggable = useDraggable(props?.target || target, list, setList, options)
   useImperativeHandle(ref, () => ({
     el: target.current,
     ...draggable,

src/core/types/index.ts

@@ -4,5 +4,4 @@ export type RefOrValue<T> = T
 export type RefOrElement<T = HTMLElement> =
   | T
   | React.MutableRefObject<any>
-  | string
 export type Fn = (...args: any[]) => any

src/target-container/ATable.tsx

@@ -0,0 +1,25 @@
+import React, { forwardRef } from 'react';
+
+const ATable = (props, ref) => {
+  return (
+    <table>
+      <thead>
+        <tr>
+          <th>Id</th>
+          <th>Name</th>
+        </tr>
+      </thead>
+      <tbody ref={ref}>
+        {props?.list?.map((item) => {
+          return (
+            <tr key={item.name} className="cursor-move">
+              <td>{item.id}</td>
+              <td>{item.name}</td>
+            </tr>
+          );
+        })}
+      </tbody>
+    </table>
+  );
+};
+export default forwardRef(ATable);

src/target-container/demo.tsx

@@ -0,0 +1,40 @@
+import React, { useRef, useState } from 'react';
+import { ReactDraggablePlus } from 'react-draggable-plus';
+import PreviewList from 'react-draggable-plus/builtins/PreviewList';
+import ATable from './ATable';
+
+const Demo = () => {
+  const [list, setList] = useState([
+    {
+      name: 'Joao',
+      id: 1,
+    },
+    {
+      name: 'Jean',
+      id: 2,
+    },
+    {
+      name: 'Johanna',
+      id: 3,
+    },
+    {
+      name: 'Juan',
+      id: 4,
+    },
+  ]);
+  const atEl = useRef(null)
+  return (
+    <div>
+      <div>
+        <ReactDraggablePlus list={list} setList={setList} animation={150} target={atEl}>
+          <ATable list={list} ref={atEl}></ATable>
+        </ReactDraggablePlus>
+      </div>
+      <div className="flex justify-between">
+        <PreviewList list={list} />
+      </div>
+    </div>
+  );
+};
+
+export default Demo;

src/target-container/function.tsx

@@ -0,0 +1,38 @@
+import React, { useRef, useState } from 'react';
+import { useDraggable } from 'react-draggable-plus';
+import PreviewList from 'react-draggable-plus/builtins/PreviewList';
+import ATable from './ATable';
+
+const Function = () => {
+  const [list, setList] = useState([
+    {
+      name: 'Joao',
+      id: 1,
+    },
+    {
+      name: 'Jean',
+      id: 2,
+    },
+    {
+      name: 'Johanna',
+      id: 3,
+    },
+    {
+      name: 'Juan',
+      id: 4,
+    },
+  ]);
+  const atEl = useRef(null);
+  useDraggable(atEl, list, setList);
+
+  return (
+    <div>
+      <ATable list={list} ref={atEl}></ATable>
+      <div className="flex justify-between">
+        <PreviewList list={list} />
+      </div>
+    </div>
+  );
+};
+
+export default Function;

src/target-container/index.en-US.md

@@ -0,0 +1,61 @@
+--- 
+title: Specify the target container
+nav:
+  title: 演示
+  order: 5
+toc: content
+---
+
+# Specify the target container
+
+Since many components that need to be dragged are not our immediate child elements in our usual use, we need to specify a target container to complete the drag function. We can specify the target container through the `target` attribute.
+
+Here we take the third-party component as an example, assuming `a-table` is a third-party component
+
+### ATable.tsx
+
+```ts
+import React, { forwardRef } from 'react';
+
+const ATable = (props, ref) => {
+  return (
+    <table>
+      <thead>
+        <tr>
+          <th>Id</th>
+          <th>Name</th>
+        </tr>
+      </thead>
+      <tbody ref={ref}>
+        {props?.list?.map((item) => {
+          return (
+            <tr key={item.name} className="cursor-move">
+              <td>{item.id}</td>
+              <td>{item.name}</td>
+            </tr>
+          );
+        })}
+      </tbody>
+    </table>
+  );
+};
+
+export default forwardRef(ATable);
+```
+
+## Component Usage
+
+<code src="./demo.tsx"
+title="Use components to manipulate target containers"
+description="Locate the ref element specified by target">
+</code>
+
+## Function Usage
+
+<code src="./function.tsx"
+title="Use function to manipulate target containers"
+description="Locate the ref element specified by target">
+</code>
+
+
+

src/target-container/index.zh-CN.md

@@ -0,0 +1,61 @@
+--- 
+title: 指定目标容器
+nav:
+  title: 演示
+  order: 5
+toc: content
+---
+
+# 指定目标容器
+
+由于我们平时使用的过程中，很多需要拖拽的组件并非我们的直系子元素，所以我们需要指定一个目标容器，来完成拖拽的功能，我们可以通过 `target` 属性来指定目标容器。
+
+此处我们以第三方组件为例，假设`a-table`为第三方组件
+
+### ATable.tsx
+
+```ts
+import React, { forwardRef } from 'react';
+
+const ATable = (props, ref) => {
+  return (
+    <table>
+      <thead>
+        <tr>
+          <th>Id</th>
+          <th>Name</th>
+        </tr>
+      </thead>
+      <tbody ref={ref}>
+        {props?.list?.map((item) => {
+          return (
+            <tr key={item.name} className="cursor-move">
+              <td>{item.id}</td>
+              <td>{item.name}</td>
+            </tr>
+          );
+        })}
+      </tbody>
+    </table>
+  );
+};
+
+export default forwardRef(ATable);
+```
+
+## 组件使用
+
+<code src="./demo.tsx"
+title="使用组件操作目标容器"
+description="找到target指定的ref元素">
+</code>
+
+## 函数使用
+
+<code src="./function.tsx"
+title="使用function操作目标容器"
+description="找到target指定的ref元素">
+</code>
+
+
+