bee-table/src/lib/dragColumn.js

Table ui component for react

import React, { Component } from "react";
import PropTypes from "prop-types";
const prefix = 'u';
/**
 * 参数: 列拖拽
 * @param {*} Table
 */

export default function dragColumn(Table) {

  return class DragColumn extends Component {

    static propTypes = {
      columns: PropTypes.any,
      data: PropTypes.any,
      onDragEnd: PropTypes.func,
      dragborder: PropTypes.bool,
      draggable: PropTypes.bool,
    }

    constructor(props) {
      super(props);
      this.state = {
        columns:this.setColumOrderByIndex(props.columns)
      };
    }

    componentWillReceiveProps(nextProps){
      if(nextProps.columns != this.props.columns){
        this.setState({
          columns:this.setColumOrderByIndex(nextProps.columns)
        })
      }
    }

    setColumOrderByIndex = (_column)=>{
      _column.forEach((da,i) => {
          da.dragIndex = i;
          da.drgHover = false;
      });
      return _column;
    }

    recursion(obj, data={}){
        for(let key in obj){
            if( typeof obj[key] == 'object' && Object.keys(obj[key].length>0 )){
                data[key] = recursion(obj[key])
            }else{
                data[key] = obj[key]
            }
        }
        return data
    }
    //拖拽交互列后触发
    onDragEnd=(event,data)=>{
      let {dragSource,dragTarget} = data;
      let {columns} = this.state;
      let sourceIndex = -1,targetIndex = -1;

      sourceIndex =  columns.findIndex((da,i)=>da.key == dragSource.key);
      targetIndex = columns.findIndex((da,i)=>da.key == dragTarget.key);
      // 向前移动
     if(targetIndex < sourceIndex){
      targetIndex = targetIndex + 1;
     }
      columns.splice(
        targetIndex,
        0,
       columns.splice(sourceIndex, 1)[0]
      );
      let sortedColumns = [];
      columns.forEach((da,i)=>{
        sortedColumns.push(Object.assign({},da));
      });
      this.setState({
        columns:sortedColumns
      });
      if(this.props.onDragEnd){
        this.props.onDragEnd(event,data,sortedColumns);
      }
    }

    getTarget=(evt)=>{
        return evt.target || evt.srcElement;
    }

    render() {
      const {
          data,
          dragborder,
          draggable,
          className,
          ...others
      } = this.props;
      return (
          <Table
              {...others}
              columns={this.state.columns}
              data={data}
              ref={el => this.table = el}
              className={`${className} ${prefix}-table-drag-border`}
              onDragEnd={this.onDragEnd}
              draggable={draggable}
              dragborder={dragborder}
          />)
    }
  };
}