cjd-parkball/src/components/colDndTable/index.js

> 中后台业务组件库，中后台就像公园，进入需要买门票（登录），所以以 Parkball(公园球) 命名，公园内必定捕获！作为一个组件库，提供使用方法文档，方便开发者的调用

import React from 'react'
import { Table, Icon } from 'antd'
import tableDragger from 'table-dragger'
import update from 'immutability-helper'
import store from 'store2'
import { customStoreKey } from '../utilities'
import './index.scss'

const AddIcon = props => (<div className="header__icon">{props.title}<Icon type="drag" /></div>)
/* eslint-disable react/no-multi-comp */
class DragSortingTable extends React.Component {
  constructor (props) {
    super(props)
    const { columns } = props
    this.state = {
      columns: this.getColumnSchema() || columns,
    }
  }

  switchColumn = (draggedIndex, targetIndex) => {
    const { columns } = this.state
    const draggedColumn = columns[draggedIndex]

    this.setState(update(this.state, {
      columns: {
        $splice: [[draggedIndex, 1], [targetIndex, 0, draggedColumn]],
      },
    }))
  }

  getColumnSchema () {
    const { pathname } = document.location
    const key = customStoreKey(this.props, pathname)
    return store.get(key) || 0
  }
  /* eslint-disable class-methods-use-this */
  addDraggableIcon (columns) {
    return columns.map(col => ({
      ...col,
      title: <AddIcon title={col.title} />,
    }))
  }

  componentDidMount () {
    const { mode } = this.props
    const propsMode = mode !== 'row' ? 'column' : 'row'
    const dragger = tableDragger(document.querySelector('.draggable-table table'), {
      mode: propsMode,
    })
    dragger.on('drop', (draggedIndex, targetIndex) => {
      this.switchColumn(draggedIndex, targetIndex)
    })
  }

  componentDidUpdate () {
    const { pathname } = document.location
    const key = customStoreKey(this.props, pathname)
    store.set(key, this.state.columns)
  }

  render () {
    const { dataSource } = this.props
    return (
      <Table
        className="draggable-table"
        columns={this.addDraggableIcon(this.state.columns)}
        dataSource={dataSource}
      />
    )
  }
}

export default DragSortingTable