mirror/ant-design
1
0
Fork 0
mirror of https://github.com/ant-design/ant-design.git synced 2025-06-11 11:32:52 +08:00
Code Issues Actions 38 Packages Projects Releases Wiki Activity

docs(table): upgrade react-sortable-hoc usage (#33729)

Browse Source 
Co-authored-by: 亦逊 <eason.ym@alibaba-inc.com>
This commit is contained in:
yanm1ng 2022-01-14 18:50:02 +08:00 committed by GitHub
parent f53e615518
commit 54ef44be97
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
1 changed files with 8 additions and 6 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

14
components/table/demo/drag-sorting-handler.md
View File

@ -15,11 +15,11 @@ Alternatively you can implement drag sorting with handler using [react-sortable-
```jsx ```jsx
import { Table } from 'antd'; import { Table } from 'antd';
import { sortableContainer, sortableElement, sortableHandle } from 'react-sortable-hoc'; import { SortableContainer, SortableElement, SortableHandle } from 'react-sortable-hoc';
import { MenuOutlined } from '@ant-design/icons'; import { MenuOutlined } from '@ant-design/icons';
import { arrayMoveImmutable } from 'array-move'; import { arrayMoveImmutable } from 'array-move';
const DragHandle = sortableHandle(() => <MenuOutlined style={{ cursor: 'grab', color: '#999' }} />); const DragHandle = SortableHandle(() => <MenuOutlined style={{ cursor: 'grab', color: '#999' }} />);
const columns = [ const columns = [
{ {
@ -68,8 +68,8 @@ const data = [
}, },
]; ];
const SortableItem = sortableElement(props => <tr {...props} />); const SortableItem = SortableElement(props => <tr {...props} />);
const SortableContainer = sortableContainer(props => <tbody {...props} />); const SortableBody = SortableContainer(props => <tbody {...props} />);
class SortableTable extends React.Component { class SortableTable extends React.Component {
state = { state = {
@ -79,14 +79,16 @@ class SortableTable extends React.Component {
onSortEnd = ({ oldIndex, newIndex }) => { onSortEnd = ({ oldIndex, newIndex }) => {
const { dataSource } = this.state; const { dataSource } = this.state;
if (oldIndex !== newIndex) { if (oldIndex !== newIndex) {
const newData = arrayMoveImmutable([].concat(dataSource), oldIndex, newIndex).filter(el => !!el); const newData = arrayMoveImmutable([].concat(dataSource), oldIndex, newIndex).filter(
el => !!el,
);
console.log('Sorted items: ', newData); console.log('Sorted items: ', newData);
this.setState({ dataSource: newData }); this.setState({ dataSource: newData });
} }
}; };
DraggableContainer = props => ( DraggableContainer = props => (
<SortableContainer <SortableBody
useDragHandle useDragHandle
disableAutoscroll disableAutoscroll
helperClass="row-dragging" helperClass="row-dragging"