feat: use react-drag-listview instead of ReactDnD and support antd dr…

…aggable table (#609)
alibaba · Jan 15, 2020 · 88ce573 · 88ce573
1 parent 1e0adce
commit 88ce573
Show file tree

Hide file tree

Showing 9 changed files with 202 additions and 186 deletions.
diff --git a/docs/Examples/antd/List.md b/docs/Examples/antd/List.md
@@ -187,6 +187,69 @@ const App = () => (
 ReactDOM.render(<App />, document.getElementById('root'))
 ```
 
+# Dragable Table Style
+
+> 数组场景，列表型数组，使用拖拽排序，对于需要做数据对比分析的场景，比较适合，但是它对数据结构
+> 的要求，必须是 ObjectList
+
+#### Demo 示例
+
+```jsx
+import React from 'react'
+import ReactDOM from 'react-dom'
+import {
+  SchemaForm,
+  SchemaMarkupField as Field,
+  FormButtonGroup,
+  Submit,
+  Reset,
+  FormItemGrid,
+  FormCard,
+  FormPath,
+  FormBlock,
+  FormLayout,
+  createFormActions
+} from '@uform/antd'
+import { Button } from 'antd'
+import Printer from '@uform/printer'
+import 'antd/dist/antd.css'
+
+const App = () => (
+  <Printer>
+    <SchemaForm
+      initialValues={{
+        array: [
+          { aa: 'a1', bb: 'b1', cc: 'c1' },
+          { aa: 'a2', bb: 'b2', cc: 'c2' },
+          { aa: 'a3', bb: 'b3', cc: 'c3' }
+        ]
+      }}
+    >
+      <Field
+        title="数组"
+        name="array"
+        maxItems={5}
+        type="array"
+        x-component="table"
+        x-props={{
+          dragable: true,
+          renderMoveUp: () => {},
+          renderMoveDown: () => {},
+          operationsWidth: 100
+        }}
+      >
+        <Field type="object">
+          <Field name="aa" type="string" title="字段1" editable={true} />
+          <Field name="bb" type="string" title="字段2" />
+          <Field name="cc" type="string" title="字段3" />
+        </Field>
+      </Field>
+    </SchemaForm>
+  </Printer>
+)
+ReactDOM.render(<App />, document.getElementById('root'))
+```
+
 # Card Style
 
 > 数组场景，卡片数组，信息层级结构更加清晰的要求，必须是 ObjectList

diff --git a/packages/antd/src/fields/table.tsx b/packages/antd/src/fields/table.tsx
@@ -6,7 +6,7 @@ import {
   Schema
 } from '@uform/react-schema-renderer'
 import { toArr, isFn, isArr, FormPath } from '@uform/shared'
-import { ArrayList } from '@uform/react-shared-components'
+import { ArrayList, DragListView } from '@uform/react-shared-components'
 import { CircleButton, TextButton } from '../components/Button'
 import { Table, Form, Icon } from 'antd'
 import { CompatAntdFormItemProps } from '../compat/FormItem'
@@ -21,6 +21,17 @@ const ArrayComponents = {
   MoveUpIcon: () => <Icon type="up" />
 }
 
+const DragHandler = styled.span`
+  width: 7px;
+  display: inline-block;
+  height: 14px;
+  border: 2px dotted #c5c5c5;
+  border-top: 0;
+  border-bottom: 0;
+  cursor: move;
+  margin-bottom: 24px;
+`
+
 const FormTableField = styled(
   (props: ISchemaFieldComponentProps & { className: string }) => {
     const { value, schema, className, editable, path, mutators } = props
@@ -32,6 +43,7 @@ const FormTableField = styled(
       renderEmpty,
       renderExtraOperations,
       operations,
+      dragable,
       ...componentProps
     } = schema.getExtendsComponentProps() || {}
     const onAdd = () => {
@@ -40,6 +52,9 @@ const FormTableField = styled(
         : schema.items
       mutators.push(items.getEmptyValue())
     }
+    const onMove = (dragIndex, dropIndex) => {
+      mutators.move(dragIndex, dropIndex)
+    }
     const renderColumns = (items: Schema) => {
       return items.mapProperties((props, key) => {
         const itemProps = {
@@ -100,6 +115,24 @@ const FormTableField = styled(
         }
       })
     }
+    if (dragable) {
+      columns.unshift({
+        width: 20,
+        render: () => {
+          return <DragHandler className="drag-handler" />
+        }
+      })
+    }
+    const renderTable = () => {
+      return (
+        <Table
+          {...componentProps}
+          pagination={false}
+          columns={columns}
+          dataSource={toArr(value)}
+        ></Table>
+      )
+    }
     return (
       <div className={className}>
         <ArrayList
@@ -116,12 +149,17 @@ const FormTableField = styled(
             renderEmpty
           }}
         >
-          <Table
-            {...componentProps}
-            pagination={false}
-            columns={columns}
-            dataSource={toArr(value)}
-          ></Table>
+          {dragable ? (
+            <DragListView
+              onDragEnd={onMove}
+              nodeSelector="tr.ant-table-row"
+              ignoreSelector="tr.ant-table-expanded-row"
+            >
+              {renderTable()}
+            </DragListView>
+          ) : (
+            renderTable()
+          )}
           <ArrayList.Addition>
             {({ children }) => {
               return (

diff --git a/packages/next/package.json b/packages/next/package.json
@@ -31,8 +31,6 @@
     "@uform/react-shared-components": "^1.0.0-rc.3",
     "@uform/shared": "^1.0.0-rc.3",
     "classnames": "^2.2.6",
-    "react-dnd": "^10.0.2",
-    "react-dnd-html5-backend": "^10.0.2",
     "react-eva": "^1.0.0-alpha.0",
     "react-stikky": "^0.1.15",
     "rxjs": "^6.5.1",