react-flexigrid/lib/FlexiGridColumnReorderKnobs.js

A React table component designed to allow presenting millions of rows of data.

import _classCallCheck from 'babel-runtime/helpers/classCallCheck';
import _possibleConstructorReturn from 'babel-runtime/helpers/possibleConstructorReturn';
import _inherits from 'babel-runtime/helpers/inherits';
import React from 'react';
import PropTypes from 'prop-types';
import propTypes from './struct/propTypes';
import { shallowEqual } from './utils';

var FlexiGridColumnReorderKnobs = function (_React$Component) {
  _inherits(FlexiGridColumnReorderKnobs, _React$Component);

  function FlexiGridColumnReorderKnobs() {
    _classCallCheck(this, FlexiGridColumnReorderKnobs);

    return _possibleConstructorReturn(this, _React$Component.apply(this, arguments));
  }

  FlexiGridColumnReorderKnobs.prototype.shouldComponentUpdate = function shouldComponentUpdate(nextProps) {
    return !shallowEqual(this.props, nextProps);
  };

  FlexiGridColumnReorderKnobs.prototype.buildReorderKnob = function buildReorderKnob(column, leftColumnsWidth, scrollable, isRightFixedColumn) {
    var _this2 = this;

    if (column.reorderable === false) {
      return null;
    }

    var _props = this.props,
        knobSize = _props.knobSize,
        headerRowHeight = _props.headerRowHeight,
        headerHeight = _props.headerHeight,
        bodyWidth = _props.bodyWidth,
        scrollX = _props.scrollX,
        showScrollbarX = _props.showScrollbarX,
        leftFixedColumnsWidth = _props.leftFixedColumnsWidth,
        scrollableColumnsWidth = _props.scrollableColumnsWidth,
        rightFixedColumnsWidth = _props.rightFixedColumnsWidth;


    var hasChildren = column.children && column.children.length > 0;
    var top = headerRowHeight * (column.depth - 1);
    var left = leftColumnsWidth - (scrollable ? scrollX : 0);
    var height = (hasChildren ? headerRowHeight : headerHeight - top) - 1;

    var style = {
      top: top,
      left: left,
      width: knobSize,
      height: height,
      zIndex: scrollable ? 0 : 1
    };

    var data = {
      column: column,
      knobSize: knobSize
    };

    if (showScrollbarX) {
      if (scrollable) {
        if (left < leftFixedColumnsWidth || left > bodyWidth - rightFixedColumnsWidth - knobSize) {
          style.display = 'none';
        }
      }

      if (isRightFixedColumn) {
        style.left = bodyWidth - leftFixedColumnsWidth - rightFixedColumnsWidth + (leftColumnsWidth - scrollableColumnsWidth);
      }
    }

    var key = column.key || leftColumnsWidth + '-' + column.depth;

    return React.createElement('div', { // eslint-disable-line
      key: 'reorder-knob-for-' + key,
      className: this.props.prefixCls + '-reorder-knob',
      style: style,
      onMouseDown: function onMouseDown(e) {
        _this2.props.onColumnReorder(data, e);
      }
    });
  };

  FlexiGridColumnReorderKnobs.prototype.buildReorderKnobs = function buildReorderKnobs(columns, leftColumnsWidth, scrollable, isRightFixed) {
    var _this3 = this;

    var width = leftColumnsWidth;
    var knobs = [];

    columns.forEach(function (column) {
      knobs.push(_this3.buildReorderKnob(column, width, scrollable, isRightFixed));
      if (column.children && column.children.length) {
        knobs.push.apply(knobs, _this3.buildReorderKnobs(column.children, width, scrollable, isRightFixed));
      }
      width += column.width;
    });

    return knobs;
  };

  FlexiGridColumnReorderKnobs.prototype.render = function render() {
    var _props2 = this.props,
        leftFixedColumns = _props2.leftFixedColumns,
        scrollableColumns = _props2.scrollableColumns,
        rightFixedColumns = _props2.rightFixedColumns,
        leftFixedColumnsWidth = _props2.leftFixedColumnsWidth,
        scrollableColumnsWidth = _props2.scrollableColumnsWidth;

    var knobs = [].concat(this.buildReorderKnobs(leftFixedColumns, 0, false, false), this.buildReorderKnobs(scrollableColumns, leftFixedColumnsWidth, true, false), this.buildReorderKnobs(rightFixedColumns, leftFixedColumnsWidth + scrollableColumnsWidth, false, true));

    return React.createElement(
      'div',
      { className: this.props.prefixCls + '-reorder-wrap' },
      knobs
    );
  };

  return FlexiGridColumnReorderKnobs;
}(React.Component);

FlexiGridColumnReorderKnobs.propTypes = {
  prefixCls: PropTypes.string.isRequired,
  knobSize: PropTypes.number.isRequired,
  headerHeight: PropTypes.number.isRequired,
  headerRowHeight: PropTypes.number.isRequired,
  bodyWidth: PropTypes.number.isRequired,
  scrollX: PropTypes.number.isRequired,
  showScrollbarX: PropTypes.bool.isRequired,
  leftFixedColumns: propTypes.columns.isRequired,
  scrollableColumns: propTypes.columns.isRequired,
  rightFixedColumns: propTypes.columns.isRequired,
  leftFixedColumnsWidth: PropTypes.number.isRequired,
  scrollableColumnsWidth: PropTypes.number.isRequired,
  rightFixedColumnsWidth: PropTypes.number.isRequired,
  onColumnReorder: PropTypes.func.isRequired
};
export default FlexiGridColumnReorderKnobs;