react-flexigrid/lib/FlexiGridSortKnobs.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 classnames from 'classnames';
import propTypes from './struct/propTypes';
import { shallowEqual } from './utils';

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

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

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

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

  FlexiGridSortKnobs.prototype.renderKnob = function renderKnob(column, leftColumnsWidth, scrollable, isRightFixedColumn) {
    if (column.sortable === false) {
      return null;
    }

    var _props = this.props,
        sortType = _props.sortType,
        sortColumnKey = _props.sortColumnKey,
        onSort = _props.onSort,
        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 left = leftColumnsWidth + column.width - (scrollable ? scrollX : 0);
    var top = headerRowHeight * (column.depth - 1);

    top += (headerHeight - top) / 2;

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

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

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

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

    return React.createElement(
      'div',
      {
        key: 'sort-knob-for-' + key,
        className: this.props.prefixCls + '-sort-knob',
        style: style
      },
      React.createElement('i', { // eslint-disable-line
        className: classnames('sort-asc', { on: column.key === sortColumnKey && sortType === 'asc' }),
        onClick: function onClick() {
          return onSort(column, 'asc');
        }
      }),
      React.createElement('i', { // eslint-disable-line
        className: classnames('sort-desc', { on: column.key === sortColumnKey && sortType === 'desc' }),
        onClick: function onClick() {
          return onSort(column, 'desc');
        }
      })
    );
  };

  FlexiGridSortKnobs.prototype.renderKnobs = function renderKnobs(columns, leftColumnsWidth, scrollable, isRightFixed) {
    var _this2 = this;

    var width = leftColumnsWidth;
    var knobs = [];

    columns.forEach(function (column) {
      if (column.children) {
        knobs.push.apply(knobs, _this2.renderKnobs(column.children, width, scrollable, isRightFixed));
      } else {
        knobs.push(_this2.renderKnob(column, width, scrollable, isRightFixed));
      }
      width += column.width;
    });

    return knobs;
  };

  FlexiGridSortKnobs.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.renderKnobs(leftFixedColumns, 0, false, false), this.renderKnobs(scrollableColumns, leftFixedColumnsWidth, true, false), this.renderKnobs(rightFixedColumns, leftFixedColumnsWidth + scrollableColumnsWidth, false, true));

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

  return FlexiGridSortKnobs;
}(React.Component);

FlexiGridSortKnobs.propTypes = {
  prefixCls: PropTypes.string.isRequired,
  headerRowHeight: PropTypes.number.isRequired,
  headerHeight: PropTypes.number.isRequired,
  bodyWidth: PropTypes.number.isRequired,
  knobSize: 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,
  onSort: PropTypes.func.isRequired
};
export default FlexiGridSortKnobs;