react-spreadsheet/dist/FloatingRect.js

Simple, customizable yet performant spreadsheet for React

import _objectSpread from "@babel/runtime/helpers/esm/objectSpread2";
import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
import React from "react";
import * as PointSet from "./point-set";
import * as Types from "./types";
import classnames from "classnames";
import { getCellDimensions } from "./util";

var FloatingRect = function FloatingRect(_ref) {
  var _classnames;

  var width = _ref.width,
      height = _ref.height,
      top = _ref.top,
      left = _ref.left,
      className = _ref.className,
      dragging = _ref.dragging,
      hidden = _ref.hidden,
      variant = _ref.variant;
  return /*#__PURE__*/React.createElement("div", {
    className: classnames("Spreadsheet__floating-rect", (_classnames = {}, _defineProperty(_classnames, "Spreadsheet__floating-rect--".concat(variant), variant), _defineProperty(_classnames, "Spreadsheet__floating-rect--dragging", dragging), _defineProperty(_classnames, "Spreadsheet__floating-rect--hidden", hidden), _classnames)),
    style: {
      width: width,
      height: height,
      top: top,
      left: left
    }
  });
};

var getRangeDimensions = function getRangeDimensions(points, state) {
  var _PointSet$reduce = PointSet.reduce(function (acc, point) {
    var isOnEdge = PointSet.onEdge(points, point);
    var dimensions = getCellDimensions(point, state);

    if (dimensions) {
      acc.width = isOnEdge.top ? acc.width + dimensions.width : acc.width;
      acc.height = isOnEdge.left ? acc.height + dimensions.height : acc.height;
      acc.left = isOnEdge.left && isOnEdge.top ? dimensions.left : acc.left;
      acc.top = isOnEdge.left && isOnEdge.top ? dimensions.top : acc.top;
    }

    return acc;
  }, points, {
    left: 0,
    top: 0,
    width: 0,
    height: 0
  }),
      width = _PointSet$reduce.width,
      height = _PointSet$reduce.height,
      left = _PointSet$reduce.left,
      top = _PointSet$reduce.top;

  return {
    left: left,
    top: top,
    width: width,
    height: height
  };
};

export var mapStateToProps = function mapStateToProps(cells) {
  return function (state) {
    return _objectSpread({}, getRangeDimensions(cells, state), {
      hidden: PointSet.size(cells) === 0
    });
  };
};
export default FloatingRect;