react-flexigrid/lib/FlexiGridColumnResizeHandler.js

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

import _Number$MAX_SAFE_INTEGER from 'babel-runtime/core-js/number/max-safe-integer';
import _extends from 'babel-runtime/helpers/extends';
import _classCallCheck from 'babel-runtime/helpers/classCallCheck';
import _possibleConstructorReturn from 'babel-runtime/helpers/possibleConstructorReturn';
import _inherits from 'babel-runtime/helpers/inherits';
/* eslint-disable react/require-default-props */
import React from 'react';
import classNames from 'classnames';
import PropTypes from 'prop-types';
import propTypes from './struct/propTypes';
import MouseMoveTracker from './dom/MouseMoveTracker';
import { clamp, shallowEqual, cancelAnimationFrame, requestAnimationFrame } from './utils';

var miniColumnWidth = 4;

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

  function FlexiGridColumnResizeHandler(props) {
    _classCallCheck(this, FlexiGridColumnResizeHandler);

    var _this = _possibleConstructorReturn(this, _React$Component.call(this, props));

    _this.onColumnResizing = function (deltaX) {
      var rtl = _this.props.rtl;

      var state = _this.cache || _this.state;

      var newWidth = state.cursorDelta + (rtl ? -deltaX : deltaX);
      var newFixedWidth = clamp(newWidth, _this.props.minWidth || miniColumnWidth, _this.props.maxWidth);
      var left = state.left - (_this.props.rtl ? newFixedWidth - state.width : 0);

      _this.cache = {
        left: left,
        width: newFixedWidth,
        cursorDelta: newWidth
      };
    };

    _this.onColumnResized = function () {
      cancelAnimationFrame(_this.frameId);
      _this.cache = null;
      _this.frameId = null;
      _this.animating = false;

      _this.mouseMoveTracker.release();
      if (_this.props.onColumnResized) {
        _this.props.onColumnResized(_this.state.width, _this.props.columnKey);
      }
    };

    _this.updateState = function () {
      if (_this.animating) {
        _this.frameId = requestAnimationFrame(_this.updateState);
      }

      if (_this.cache) {
        _this.setState(_this.cache);
        if (_this.props.onColumnResizing) {
          _this.props.onColumnResizing(_this.cache.width, _this.props.columnKey);
        }
      }
    };

    _this.state = {
      width: 0,
      cursorDelta: 0
    };
    _this.cache = null;
    _this.animating = false;
    return _this;
  }

  FlexiGridColumnResizeHandler.prototype.componentDidMount = function componentDidMount() {
    this.mouseMoveTracker = new MouseMoveTracker(document.body, this.onColumnResizing, this.onColumnResized);
  };

  FlexiGridColumnResizeHandler.prototype.componentWillReceiveProps = function componentWillReceiveProps(props) {
    if (props.initialEvent && !this.mouseMoveTracker.isDragging()) {
      this.mouseMoveTracker.capture(props.initialEvent);
      this.setState({
        left: props.offsetLeft - (props.rtl ? 1 : 0),
        width: props.initialWidth,
        cursorDelta: props.initialWidth
      });

      this.cache = null;
      this.animating = true;
      this.frameId = requestAnimationFrame(this.updateState);
    }
  };

  FlexiGridColumnResizeHandler.prototype.shouldComponentUpdate = function shouldComponentUpdate(nextProps, nextState) {
    return !shallowEqual(this.props, nextProps) || !shallowEqual(this.state, nextState);
  };

  FlexiGridColumnResizeHandler.prototype.componentWillUnmount = function componentWillUnmount() {
    this.mouseMoveTracker.release();
    this.mouseMoveTracker = null;
  };

  FlexiGridColumnResizeHandler.prototype.render = function render() {
    var _props = this.props,
        prefixCls = _props.prefixCls,
        rtl = _props.rtl,
        visible = _props.visible,
        height = _props.height,
        offsetTop = _props.offsetTop,
        knobSize = _props.knobSize,
        adjustKnob = _props.adjustKnob;
    var _state = this.state,
        width = _state.width,
        left = _state.left;

    var className = classNames(prefixCls + '-resize-handler', {
      visible: visible
    });

    var wrapStyle = {
      width: width,
      left: left,
      height: height - offsetTop,
      top: offsetTop
    };
    var lineStyle = {
      height: wrapStyle.height,
      top: 0
    };
    var innerStyle = _extends({}, lineStyle, {
      width: knobSize,
      right: -Math.ceil(knobSize / 2)
    });

    if (rtl) {
      lineStyle.left = 0;
      innerStyle.left = -Math.ceil(knobSize / 2);
    } else {
      lineStyle.right = adjustKnob ? knobSize : 0;
      innerStyle.right = (adjustKnob ? knobSize : 0) - Math.ceil(knobSize / 2);
    }

    return React.createElement(
      'div',
      { className: className, style: wrapStyle },
      React.createElement('div', {
        className: 'knob-marker',
        style: lineStyle
      }),
      React.createElement('div', {
        className: 'mouse-area',
        style: innerStyle
      })
    );
  };

  return FlexiGridColumnResizeHandler;
}(React.Component);

FlexiGridColumnResizeHandler.propTypes = {
  prefixCls: PropTypes.string,
  rtl: PropTypes.bool,
  visible: PropTypes.bool,
  height: PropTypes.number,
  offsetLeft: PropTypes.number,
  offsetTop: PropTypes.number,
  initialWidth: PropTypes.number,
  minWidth: PropTypes.number,
  maxWidth: PropTypes.number,
  knobSize: PropTypes.number,
  adjustKnob: PropTypes.bool,
  initialEvent: propTypes.domEvent,
  columnKey: propTypes.columnKey,
  onColumnResizing: PropTypes.func,
  onColumnResized: PropTypes.func
};
FlexiGridColumnResizeHandler.defaultProps = {
  rtl: false,
  visible: false,
  adjustKnob: false,
  height: 0,
  offsetLeft: 0,
  offsetTop: 0,
  initialWidth: 0,
  minWidth: miniColumnWidth,
  maxWidth: _Number$MAX_SAFE_INTEGER,
  knobSize: 0,
  initialEvent: null
};
export default FlexiGridColumnResizeHandler;