react-tbl/dist/resizer.js

A lightweight & easy to use react table implementation.

import _toConsumableArray from "@babel/runtime/helpers/esm/toConsumableArray";
import React, { useEffect, useContext } from 'react';
import { ReactTblContext, ResizerComponent } from './common';

var Resizer = function Resizer(_ref) {
  var id = _ref.id,
      color = _ref.color;

  var _useContext = useContext(ReactTblContext),
      table = _useContext.table;

  var columnMinWidth = parseInt(table === null || table === void 0 ? void 0 : table.columnMinWidth, 10) || 100;
  var currTh;
  var nextTh;
  var currTds = [];
  var nextTds = [];
  var currWidth;
  var nextWidth;
  var pageX;
  var thRef = React.useRef();
  useEffect(function () {
    thRef.current.addEventListener('mousedown', onMouseDown);
    document.addEventListener('mousemove', onMouseMove);
    document.addEventListener('mouseup', onMouseUp);
    return function () {
      thRef.current.removeEventListener('mousedown', onMouseDown);
      document.removeEventListener('mousemove', onMouseMove);
      document.removeEventListener('mouseup', onMouseUp);
    };
  }, []);

  var onMouseDown = function onMouseDown(e) {
    currTds = document.querySelectorAll("[id^=td_".concat(id, "]"));
    nextTds = document.querySelectorAll("[id^=td_".concat(id + 1, "]"));
    currTh = e.target.parentElement;
    nextTh = currTh.nextElementSibling;
    pageX = e.pageX;
    if (currTh) currWidth = currTh.offsetWidth;
    if (nextTh) nextWidth = nextTh.offsetWidth;
  };

  var onMouseUp = function onMouseUp() {
    currTh = undefined;
    currTds = [];
    nextTh = undefined;
    nextTds = [];
    pageX = undefined;
    currWidth = undefined;
    nextWidth = undefined;
  };

  var onMouseMove = function onMouseMove(e) {
    if (currTh) {
      var _nextTds, _currTds;

      var diffX = e.pageX - pageX;
      var getCurrRunningWidth = currTh.offsetWidth;
      var getNextRunningWidth = nextTh.offsetWidth;

      if (getNextRunningWidth >= columnMinWidth && getCurrRunningWidth >= columnMinWidth && nextTh && ((_nextTds = nextTds) === null || _nextTds === void 0 ? void 0 : _nextTds.length) > 0 && currTh && ((_currTds = currTds) === null || _currTds === void 0 ? void 0 : _currTds.length) > 0) {
        [].concat(_toConsumableArray(currTds), [currTh]).forEach(function (elem) {
          var width = currWidth + diffX + 'px';
          elem.style.flexBasis = width;
        });
        [].concat(_toConsumableArray(nextTds), [nextTh]).forEach(function (elem) {
          var width = nextWidth - diffX + 'px';
          elem.style.flexBasis = width;
        });
      }
    }
  };

  return /*#__PURE__*/React.createElement(ResizerComponent, {
    ref: thRef,
    onClick: function onClick(e) {
      return e.stopPropagation();
    },
    color: color
  });
};

export default Resizer;