@6thquake/react-material/es/Table/TreeTable/Head.js

React components that implement Google's Material Design.

import _extends from "@babel/runtime/helpers/extends";
import React from 'react';
import Table from '..';
import TableCell from './Cell';
import TableHead from '../../TableHead';
import TableRow from '../../TableRow';
import HeadCell from './HeadCell';
import DragHeadCell from './DragHeadCell';
import withDragAndDrop from '../../DragAndDrop/withDragAndDrop';
import TableSortLabel from '../../TableSortLabel';
import { Resizable } from 'react-resizable';
import { withStyles } from '../../styles';
import { debounce } from '../../utils/throttle';

const styles = theme => ({
  root: {},
  layoutFixed: {
    tableLayout: 'fixed'
  },
  tableCell: {
    position: 'relative',
    '@global .react-resizable-handle': {
      position: 'absolute',
      width: 20,
      height: 20,
      bottom: 0,
      right: 0,
      background: "url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA2IDYiIHN0eWxlPSJiYWNrZ3JvdW5kLWNvbG9yOiNmZmZmZmYwMCIgeD0iMHB4IiB5PSIwcHgiIHdpZHRoPSI2cHgiIGhlaWdodD0iNnB4Ij48ZyBvcGFjaXR5PSIwLjMwMiI+PHBhdGggZD0iTSA2IDYgTCAwIDYgTCAwIDQuMiBMIDQgNC4yIEwgNC4yIDQuMiBMIDQuMiAwIEwgNiAwIEwgNiA2IEwgNiA2IFoiIGZpbGw9IiMwMDAwMDAiLz48L2c+PC9zdmc+')",
      'background-position': 'bottom right',
      padding: '0 3px 3px 0',
      'background-repeat': 'no-repeat',
      'background-origin': 'content-box',
      'box-sizing': 'border-box',
      cursor: 'se-resize'
    }
  }
});

const colStyle = {
  // width: 150,
  minWidth: 100
};
/**
 * @ignore - internal component.
 */

class Head extends React.Component {
  constructor(props) {
    super(props);
    this.dragIndex = {
      targetIndex: '',
      sourceIndex: ''
    };

    this.handleResizeStart = () => {
      // this.undragable = true
      this.setState({
        undragable: true
      });
    };

    this.handleDragStop = () => {
      this.setState({
        undragable: false
      });
    };

    this.handleResize = (...args) => (e, {
      size
    }) => {
      // resize宽度范围
      if (size.width <= 80 || size.width >= 500) {
        return;
      }

      const {
        onResize
      } = this.props;
      onResize && onResize(...args, size); // this.throttleResize(...args,size)
    };

    this.resize = (...args) => {
      const {
        onResize
      } = this.props;
      onResize && onResize(...args);
    };

    this.handleChangeOrder = (sort, column) => e => {
      const {
        onSort
      } = this.props;
      onSort && onSort(sort, column);
    };

    this.handleDoubleClick = e => {
      e.stopPropagation();
    };

    this.renderTableHeadCell = (column, index) => {
      const {
        classes,
        onDragStart,
        onDragEnd,
        resizable,
        dragable,
        baseLength,
        onColumnFixChange,
        disableClickToFixColumn,
        TableCellProps
      } = this.props;
      const {
        sorts
      } = this.props;
      const {
        title,
        key,
        sortable,
        renderTitle
      } = column;
      let sort = {
        key,
        order: '',
        orderList: ['', 'asc', 'desc'],
        index: 0
      };
      sorts.map(item => {
        if (item.key === column.key) {
          sort = item;
        }
      });
      const titleNode = typeof renderTitle === 'function' ? renderTitle(column) : title;
      const content = sortable ? React.createElement(TableSortLabel, {
        active: sort.order,
        direction: sort.order,
        onClick: this.handleChangeOrder(sort, column),
        onDoubleClick: this.handleDoubleClick
      }, titleNode) : titleNode || '';
      const cell = React.createElement(TableCell, {
        numeric: column.numeric,
        sortDirection: true,
        onDragStart: onDragStart,
        onDragEnd: onDragEnd,
        index: index + baseLength,
        onColumnFixChange: onColumnFixChange,
        disableClickToFixColumn: disableClickToFixColumn,
        component: dragable && !this.state.undragable ? DragHeadCell : HeadCell,
        className: classes.tableCell,
        key: column.key || column.title,
        fixed: column.fixed,
        TableCellProps: TableCellProps
      }, content);
      const C = resizable || column.resizable ? React.createElement(Resizable, {
        key: column.key || column.title,
        onResizeStart: this.handleResizeStart,
        onResizeStop: this.handleDragStop,
        width: column.width,
        height: 0,
        onResize: this.handleResize(index, column) // axis = {'x'}
        // minConstraints={[50, 500]}

      }, cell) : cell;
      return C;
    };

    this.state = {
      undragable: false
    };
  }

  componentDidMount() {// this.throttleResize = debounce(this.resize, 1000)
  }

  render() {
    const {
      classes,
      columns,
      onDragStart,
      onDragEnd,
      resizable,
      headRef,
      headRowHeight,
      TableRowProps
    } = this.props;
    const rowStyle = {
      height: headRowHeight
    };
    return React.createElement("div", {
      className: classes.root
    }, React.createElement(Table, {
      innerRef: headRef,
      classes: {
        root: classes.layoutFixed
      },
      className: classes.table
    }, React.createElement("colgroup", null, columns.map(item => {
      return React.createElement("col", {
        key: item.key || item.title,
        width: item.width,
        style: colStyle
      });
    })), React.createElement(TableHead, null, React.createElement(TableRow, _extends({
      style: rowStyle
    }, TableRowProps), columns.map((column, index) => {
      return this.renderTableHeadCell(column, index);
    })))));
  }

} // export default withDragAndDrop()(AbundantCrossTabulation);


export default withStyles(styles)(withDragAndDrop()(Head));