react-flexigrid/lib/FlexiGridColumnResizeKnobs.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 FlexiGridColumnResizeKnobs = function (_React$Component) {
  _inherits(FlexiGridColumnResizeKnobs, _React$Component);

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

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

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

  FlexiGridColumnResizeKnobs.prototype.renderResizeKnob = function renderResizeKnob(column, leftColumnsWidth, scrollable, isRightFixed, shouldFixLastKnobPos) {
    var _this2 = this;

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

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


    var knobSize = this.props.knobSize % 2 === 1 ? this.props.knobSize : this.props.knobSize + 1;

    var offsetLeft = leftColumnsWidth - (scrollable ? scrollX : 0);
    var left = offsetLeft - Math.ceil(knobSize / 2);
    var top = column.isFirstLeaf && isRightFixed || column.isLastLeaf ? 0 : headerRowHeight * (column.depth - 1);

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

    var data = {
      column: column,
      knobSize: knobSize,
      top: top,
      left: leftColumnsWidth - column.width - (scrollable ? scrollX : 0)
    };

    if (shouldFixLastKnobPos && column.isLastLeaf) {
      style.left += 1;
      data.left += 1;
    }

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

        // When the last scrollable column reach maxScrollX
        if (column.isLastLeaf && offsetLeft === bodyWidth - rightFixedColumnsWidth && rightFixedLeafColumns.length > 0) {
          style.left -= knobSize;
          // Adjust the last scrollable column's resize-knob position when
          // reach the maxScrollX to avoid non-interactive.
          data.adjustKnob = true;
        }
      }

      if (isRightFixed) {
        data.left = bodyWidth - leftFixedColumnsWidth - rightFixedColumnsWidth + (leftColumnsWidth - scrollableColumnsWidth) - column.width;
        data.rtl = true;
        style.left = data.left - Math.ceil(knobSize / 2);
      }
    }

    return React.createElement(
      'div',
      { // eslint-disable-line
        key: column.key,
        style: style,
        className: this.props.prefixCls + '-resize-knob',
        onMouseDown: function onMouseDown(e) {
          _this2.props.onColumnResize(data, e);
        }
      },
      React.createElement('div', {
        className: this.props.prefixCls + '-resize-knob-marker',
        style: { left: Math.floor(knobSize / 2) }
      })
    );
  };

  FlexiGridColumnResizeKnobs.prototype.render = function render() {
    var _this3 = this;

    var _props2 = this.props,
        leftFixedLeafColumns = _props2.leftFixedLeafColumns,
        scrollableLeafColumns = _props2.scrollableLeafColumns,
        rightFixedLeafColumns = _props2.rightFixedLeafColumns,
        showScrollbarX = _props2.showScrollbarX,
        isJustFullfill = _props2.isJustFullfill;


    var shouldFixLastKnobPos = showScrollbarX || isJustFullfill;
    var width = 0;
    return React.createElement(
      'div',
      { className: this.props.prefixCls + '-resize-wrap' },
      leftFixedLeafColumns.map(function (column) {
        width += column.width;
        return _this3.renderResizeKnob(column, width, false, false, shouldFixLastKnobPos && scrollableLeafColumns.length === 0 && rightFixedLeafColumns.length === 0);
      }),
      scrollableLeafColumns.map(function (column) {
        width += column.width;
        return _this3.renderResizeKnob(column, width, true, false, shouldFixLastKnobPos && rightFixedLeafColumns.length === 0);
      }),
      rightFixedLeafColumns.map(function (column) {
        width += column.width;
        return _this3.renderResizeKnob(column, width, false, true, false);
      })
    );
  };

  return FlexiGridColumnResizeKnobs;
}(React.Component);

FlexiGridColumnResizeKnobs.propTypes = {
  prefixCls: PropTypes.string.isRequired,
  headerRowHeight: PropTypes.number.isRequired,
  headerHeight: PropTypes.number.isRequired,
  bodyHeight: PropTypes.number.isRequired,
  bodyWidth: PropTypes.number.isRequired,
  knobSize: PropTypes.number.isRequired,
  scrollX: PropTypes.number.isRequired,
  showScrollbarX: PropTypes.bool.isRequired,
  isJustFullfill: PropTypes.bool.isRequired,
  leftFixedLeafColumns: propTypes.columns.isRequired,
  scrollableLeafColumns: propTypes.columns.isRequired,
  rightFixedLeafColumns: propTypes.columns.isRequired,
  leftFixedColumnsWidth: PropTypes.number.isRequired,
  scrollableColumnsWidth: PropTypes.number.isRequired,
  rightFixedColumnsWidth: PropTypes.number.isRequired,
  onColumnResize: PropTypes.func.isRequired
};
export default FlexiGridColumnResizeKnobs;