feat(Table): dragable table with react-dnd

docs/table/demo/dragable.md

@@ -0,0 +1,215 @@
+
+# 拖拽排序
+
+- order: 24
+
+可拖拽的表格。拖拽功能的实现依赖[email protected] 及[email protected]， 它要求react react-dom 版本高于16.3.x
+
+:::lang=en-us
+# Simple
+
+- order: 24
+
+Dragable table with sort. It requires [email protected], [email protected], [email protected] and [email protected]
+:::
+
+---
+
+````jsx
+import { Table } from '@alifd/next';
+import { DragDropContext, DragSource, DropTarget } from 'react-dnd';
+import HTML5Backend from 'react-dnd-html5-backend';
+import classnames from 'classnames';
+
+const { SelectionRow } = Table;
+
+let dragingIndex = -1;
+
+function MyRow (props) {
+    const {
+        isDragging,
+        isOver,
+        connectDragSource,
+        connectDropTarget,
+        moveRow,
+        className,
+        ...others
+    } = props;
+
+    const opacity = isDragging ? 0 : 1;
+    const style = { ...others.style, cursor: 'move' };
+
+    const cls = classnames({
+        [className]: className,
+        'drop-over-upward': isOver && others.index < dragingIndex,
+        'drop-over-downward': isOver && others.index > dragingIndex,
+    });
+
+    return <SelectionRow {...others}
+        style={{ ...style, ...{ opacity } }}
+        className={cls}
+        wrapper={(row) => connectDragSource(connectDropTarget(row))} />
+}
+
+const NewRow = DropTarget(
+    'row',
+    {
+        drop(props, monitor) {
+            const dragIndex = monitor.getItem().index;
+            const hoverIndex = props.index;
+
+            if (dragIndex === hoverIndex) {
+                return;
+            }
+
+            props.moveRow(dragIndex, hoverIndex);
+            monitor.getItem().index = hoverIndex;
+        },
+    },
+    (connect, monitor) => ({
+        connectDropTarget: connect.dropTarget(),
+        isOver: monitor.isOver(),
+    }),
+)(
+    DragSource(
+        'row',
+        {
+            beginDrag: props => {
+                dragingIndex = props.index;
+                return {
+                    id: props.record[props.primaryKey],
+                    index: props.rowIndex,
+                };
+            },
+        },
+        (connect, monitor) => ({
+            connectDragSource: connect.dragSource(),
+            isDragging: monitor.isDragging(),
+        }),
+    )(MyRow),
+);
+
+class InnerTable extends React.Component {
+
+  constructor(props) {
+    super(props);
+    this.state = {
+      dataSource: [...props.dataSource],
+    };
+  }
+
+  componentWillReceiveProps(nextProps) {
+    if (nextProps.dataSource && JSON.stringify(nextProps.dataSource) !==
+      JSON.stringify(this.state.dataSource)) {
+      this.setState({ dataSource: [...nextProps.dataSource] });
+    }
+  }
+
+  moveRow = (dragIndex, hoverIndex) => {
+    let { onSort } = this.props;
+    const dragRow = this.state.dataSource[dragIndex];
+    let dataSource = [...this.state.dataSource];
+    dataSource.splice(dragIndex, 1);
+    dataSource.splice(hoverIndex, 0, dragRow);
+    this.setState({
+      dataSource,
+    });
+
+    onSort && onSort(this.state.dataSource);
+  };
+
+  render() {
+
+    let { excludeProvider, ...restProps } = this.props;
+    const tableProps = {
+        ...restProps,
+        dataSource: this.state.dataSource,
+        rowProps: (props, index) => ({
+            index,
+            moveRow: this.moveRow,
+        }),
+        components: {
+            Row: NewRow
+        },
+    };
+
+    return <Table {...tableProps} />;
+  }
+}
+
+
+class SortableTable extends React.Component {
+    render() {
+        const ComponentName =  DragDropContext(HTML5Backend)(InnerTable);
+        return <ComponentName {...this.props} />;
+    }
+}
+
+
+
+const result = [{
+    id: '001',
+    time: 1951,
+    title: {name: 'The Old Man and the Sea'},
+}, {
+    id: '002',
+    time: 1925,
+    title: {name: 'the great gatsby'},
+}, {
+    id: '003',
+    time: 1719,
+    title: {name: 'The adventures of Robinson Crusoe'},
+}];
+
+class Demo extends React.Component {
+    constructor(props) {
+        super(props);
+
+        this.state = {
+            dataSource: result,
+        };
+    }
+
+    onRemove = (id) => {
+        const {dataSource} = this.state;
+        let index = -1;
+        dataSource.forEach((item, i) => {
+            if (item.id === id) {
+                index = i;
+            }
+        });
+        if (index !== -1) {
+            dataSource.splice(index, 1);
+            this.setState({
+                dataSource
+            });
+        }
+    }
+
+    renderOper = (value, index, record) => {
+        return <a onClick={this.onRemove.bind(this, record.id)}>Remove({record.id})</a>;
+    };
+    render() {
+        return (<div>
+            <SortableTable dataSource={this.state.dataSource}>
+                <Table.Column title="Id" dataIndex="id" width={100} lock/>
+                <Table.Column title="Title" dataIndex="title.name" width={400} />
+                <Table.Column title="Time" dataIndex="time" width={300}/>
+                <Table.Column title="operate" cell={this.renderOper} width={300} lock="right"/>
+            </SortableTable>
+        </div>);
+    }
+}
+
+
+ReactDOM.render(<Demo />, mountNode);
+````
+````css
+.drop-over-downward{
+  border-bottom: 2px dashed #3080fe;
+}
+
+.drop-over-upward{
+  border-top: 2px dashed #3080fe;
+}
+````

package.json

@@ -76,7 +76,6 @@
     "shallow-element-equals": "^1.0.1"
   },
   "devDependencies": {
-    "@types/react": "^16.8.13",
     "@alifd/api-extractor": "^3.4.0",
     "@alifd/babel-preset-next": "^2.0.0",
     "@alifd/doc-parser": "^1.0.0",
@@ -88,6 +87,7 @@
     "@no-repeat/sass-tracker": "^0.0.10",
     "@no-repeat/sassdoc-parser": "^0.0.11",
     "@octokit/rest": "^15.15.1",
+    "@types/react": "^16.8.13",
     "autoprefixer": "^7.1.4",
     "axe-core": "^3.2.0",
     "babel-core": "^6.26.0",
@@ -157,6 +157,8 @@
     "react-copy-to-clipboard": "^5.0.1",
     "react-cropper": "^1.0.0",
     "react-dev-utils": "^4.2.1",
+    "react-dnd": "^7.0.0",
+    "react-dnd-html5-backend": "^7.0.0",
     "react-dom": "^16.0.0",
     "react-redux": "^5.0.7",
     "react-router": "^4.3.1",

scripts/server/tpls/demo.ejs

@@ -40,8 +40,8 @@
     }
 </script>
 <script src="//shadow.elemecdn.com/npm/[email protected]/dist/polyfill.min.js"></script>
-<script src="//shadow.elemecdn.com/npm/react@16.0.0/umd/react.development.js"></script>
-<script src="//shadow.elemecdn.com/npm/react-dom@16.0.0/umd/react-dom.development.js"></script>
+<script src="//shadow.elemecdn.com/npm/react@16.8.3/umd/react.development.js"></script>
+<script src="//shadow.elemecdn.com/npm/react-dom@16.8.3/umd/react-dom.development.js"></script>
 <script src="//shadow.elemecdn.com/npm/[email protected]/min/moment-with-locales.js"></script>
 <script>
     window.mountNode = document.getElementById('mount-node');

src/table/base/row.jsx

@@ -25,6 +25,7 @@ export default class Row extends React.Component {
         cellRef: PropTypes.func,
         colGroup: PropTypes.object,
         locale: PropTypes.object,
+        wrapper: PropTypes.func,
     };
 
     static defaultProps = {
@@ -38,6 +39,7 @@ export default class Row extends React.Component {
         onMouseLeave: noop,
         cellRef: noop,
         colGroup: {},
+        wrapper: row => row,
     };
 
     static contextTypes = {
@@ -194,13 +196,15 @@ export default class Row extends React.Component {
             locale,
             expandedIndexSimulate,
             rtl,
+            wrapper,
             ...others
         } = this.props;
         const cls = classnames({
             [`${prefix}table-row`]: true,
             [className]: className,
         });
-        return (
+
+        const tr = (
             <tr
                 className={cls}
                 role="row"
@@ -213,5 +217,7 @@ export default class Row extends React.Component {
                 {children}
             </tr>
         );
+
+        return wrapper(tr);
     }
 }