@integec/grid-tools/lib/virtualized/virtualizedRenderer.js

Integ Grid Tools

"use strict";

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports["default"] = void 0;

var _react = _interopRequireWildcard(require("react"));

var _reactVirtualized = require("react-virtualized");

var _computeGridProps2 = _interopRequireDefault(require("../computeGridProps"));

var _scrollbarSize = _interopRequireDefault(require("dom-helpers/util/scrollbarSize"));

var _VirtualizedContext = require("./VirtualizedContext");

var _cellRender = require("./cellRender");

var _context = _interopRequireDefault(require("../context"));

function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }

function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj; } else { var newObj = {}; if (obj != null) { for (var key in obj) { if (Object.prototype.hasOwnProperty.call(obj, key)) { var desc = Object.defineProperty && Object.getOwnPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : {}; if (desc.get || desc.set) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } } newObj["default"] = obj; return newObj; } }

function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }

function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { if (i % 2) { var source = arguments[i] != null ? arguments[i] : {}; var ownKeys = Object.keys(source); if (typeof Object.getOwnPropertySymbols === 'function') { ownKeys = ownKeys.concat(Object.getOwnPropertySymbols(source).filter(function (sym) { return Object.getOwnPropertyDescriptor(source, sym).enumerable; })); } ownKeys.forEach(function (key) { _defineProperty(target, key, source[key]); }); } else { Object.defineProperties(target, Object.getOwnPropertyDescriptors(arguments[i])); } } return target; }

function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }

var totalColWidth = function totalColWidth(cols) {
  return cols.map(function (c) {
    return c.width;
  }).reduce(function (c1, c2) {
    return c1 + c2;
  }, 0);
};

var colWidthOf = function colWidthOf(cols) {
  return function (_ref) {
    var index = _ref.index;
    return cols[index].width;
  };
};

var handleSelectionScroll = function handleSelectionScroll(_ref2) {
  var contentGrid = _ref2.contentGrid,
      x2 = _ref2.x2,
      y2 = _ref2.y2,
      previousPosition = _ref2.previousPosition,
      fixedHeaderWidth = _ref2.fixedHeaderWidth;
  var scrollPane = contentGrid && contentGrid._scrollingContainer;
  if (x2 === previousPosition.x2 && y2 === previousPosition.y2) return;

  if (scrollPane != null) {
    var scrollToColumn = x2;
    var scrollToRow = y2;
    var scrollLeft = scrollPane.scrollLeft;

    if (x2 < previousPosition.x2) {
      var offSet = contentGrid.getOffsetForCell({
        alignment: 'start',
        columnIndex: scrollToColumn,
        rowIndex: scrollToRow
      });

      if (scrollLeft > offSet.scrollLeft - fixedHeaderWidth) {
        // scrollPane.scrollLeft = Math.max(offSet.scrollLeft - fixedHeaderWidth, 0)
        var scrollTop = scrollPane.scrollTop;
        contentGrid.scrollToPosition({
          scrollLeft: Math.max(offSet.scrollLeft - fixedHeaderWidth, 0),
          scrollTop: scrollTop
        }); // console.log('need scroll fix')
      } // console.log('scroll towards left')

    } else if (x2 > previousPosition.x2) {
      // console.log('scroll towards right')
      contentGrid.scrollToCell({
        columnIndex: scrollToColumn,
        rowIndex: scrollToRow
      });
    } else {
      // console.log('up and down')
      contentGrid.scrollToCell({
        columnIndex: scrollToColumn,
        rowIndex: scrollToRow
      });
    }
  }

  return null;
}; //
//


var VirtualizedRender = function VirtualizedRender(_ref3) {
  var _ref3$renderOptions = _ref3.renderOptions,
      renderOptions = _ref3$renderOptions === void 0 ? {} : _ref3$renderOptions,
      gridRenderProps = _ref3.gridRenderProps;
  var internalContentGridRef = (0, _react.useRef)();
  var rowHeaderGridRef = (0, _react.useRef)();
  var columnHeaderGridRef = (0, _react.useRef)();
  var positionRef = (0, _react.useRef)();
  var headers = gridRenderProps.headers,
      data = gridRenderProps.data,
      getContainerProps = gridRenderProps.getContainerProps,
      getClipboardHelperProps = gridRenderProps.getClipboardHelperProps;
  var previousColumnWidth = (0, _react.useRef)(totalColWidth(headers));

  var gridContext = _react["default"].useContext(_context["default"]);

  var _gridContext$columnHe = gridContext.columnHeaderProps,
      columnHeaderProps = _gridContext$columnHe === void 0 ? {} : _gridContext$columnHe;
  var style = renderOptions.style,
      className = renderOptions.className,
      _renderOptions$height = renderOptions.height,
      height = _renderOptions$height === void 0 ? 600 : _renderOptions$height,
      _renderOptions$width = renderOptions.width,
      width = _renderOptions$width === void 0 ? 1100 : _renderOptions$width,
      _renderOptions$rowHei = renderOptions.rowHeight,
      rowHeight = _renderOptions$rowHei === void 0 ? 23 : _renderOptions$rowHei,
      _renderOptions$header = renderOptions.headerRowHeight,
      headerRowHeight = _renderOptions$header === void 0 ? columnHeaderProps.headerRowHeight || 60 : _renderOptions$header,
      _renderOptions$fixedC = renderOptions.fixedColCount,
      fixedColCount = _renderOptions$fixedC === void 0 ? 0 : _renderOptions$fixedC,
      autoFixColByKey = renderOptions.autoFixColByKey,
      _renderOptions$cellRe = renderOptions.cellRender,
      cellRender = _renderOptions$cellRe === void 0 ? _cellRender.defaultCellRender : _renderOptions$cellRe,
      _renderOptions$rowHea = renderOptions.rowHeaderRender,
      rowHeaderRender = _renderOptions$rowHea === void 0 ? _cellRender.defaultRowHeaderRender : _renderOptions$rowHea,
      externalContentGridRef = renderOptions.contentGridRef,
      _onScroll = renderOptions.onScroll,
      _renderOptions$getRow = renderOptions.getRowStyle,
      getRowStyle = _renderOptions$getRow === void 0 ? function (_) {
    return {};
  } : _renderOptions$getRow;
  var contentGridRef = externalContentGridRef || internalContentGridRef;

  var _computeGridProps = (0, _computeGridProps2["default"])({
    headers: headers,
    data: data,
    rowHeight: rowHeight,
    width: width,
    height: height,
    scrollBarWidthAdjustment: (0, _scrollbarSize["default"])(),
    scrollBarHeightAdjustment: (0, _scrollbarSize["default"])(),
    fixedColCount: fixedColCount,
    autoFixColByKey: autoFixColByKey,
    headerRowHeight: headerRowHeight
  }),
      scrollY = _computeGridProps.scrollY,
      scrollX = _computeGridProps.scrollX,
      numOfFixedCols = _computeGridProps.numOfFixedCols,
      fixedHeaderWidth = _computeGridProps.fixedHeaderWidth,
      totalWidth = _computeGridProps.totalWidth;

  var dataRender = function dataRender(props) {
    var typeData = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 'nonfixed-data';
    return (0, _cellRender.cellRenderWrapper)()(function (props) {
      return cellRender(_objectSpread({}, props, {
        gridContext: gridContext,
        getRowStyle: getRowStyle,
        typeData: typeData
      }));
    })(props);
  };

  var headerRender = (0, _cellRender.cellRenderWrapper)()(rowHeaderRender);
  var selectionInfo = gridRenderProps && gridRenderProps.getSelectionInfo && gridRenderProps.getSelectionInfo();

  var _ref4 = selectionInfo && selectionInfo.rawPositions ? selectionInfo.rawPositions : {},
      x2 = _ref4.x2,
      y2 = _ref4.y2;

  (0, _react.useEffect)(function () {
    // console.log('pos ref is ', positionRef.current)
    if (positionRef.current != null) {
      // console.log(`transition is ${x2}:${positionRef.current.x2} - ${y2}:${positionRef.current.y2}`)
      handleSelectionScroll({
        contentGrid: contentGridRef.current,
        x2: x2,
        y2: y2,
        fixedHeaderWidth: fixedHeaderWidth,
        previousPosition: positionRef.current
      });
    }

    positionRef.current = {
      x2: x2,
      y2: y2
    };
  }, [contentGridRef.current, fixedHeaderWidth, fixedColCount, x2, y2]);
  (0, _react.useEffect)(function () {
    var currentTotalColumnWidth = totalColWidth(headers);

    if (previousColumnWidth.current !== currentTotalColumnWidth) {
      previousColumnWidth.current = currentTotalColumnWidth;
      contentGridRef.current && contentGridRef.current.recomputeGridSize();
      rowHeaderGridRef.current && rowHeaderGridRef.current.recomputeGridSize();
      numOfFixedCols > 0 && columnHeaderGridRef.current && columnHeaderGridRef.current.recomputeGridSize();
    }
  }, [headers]);
  /** scroll sync listener **/

  var onMainGridScroll = (0, _react.useCallback)(function (scrollInfo) {
    var scrollLeft = scrollInfo.scrollLeft,
        scrollTop = scrollInfo.scrollTop;

    if (rowHeaderGridRef.current != null) {
      rowHeaderGridRef.current.scrollToPosition({
        scrollLeft: scrollLeft,
        scrollTop: 0
      });
    }

    if (columnHeaderGridRef.current != null) {
      columnHeaderGridRef.current.scrollToPosition({
        scrollLeft: 0,
        scrollTop: scrollTop
      });
    }
  }, []);
  return _react["default"].createElement(_VirtualizedContext.Provider, {
    value: gridRenderProps
  }, _react["default"].createElement("div", _extends({
    style: _objectSpread({
      position: 'relative'
    }, style),
    className: className
  }, getContainerProps({
    width: width,
    height: height,
    refKey: 'ref'
  }), {
    tabIndex: "0"
  }), _react["default"].createElement("input", getClipboardHelperProps()), _react["default"].createElement("div", {
    style: {
      position: 'absolute',
      left: "0px",
      top: '0px'
    }
  }, _react["default"].createElement(_reactVirtualized.Grid, {
    style: {
      overflowX: 'hidden',
      overflowY: 'hidden'
    },
    cellRenderer: function cellRenderer(props) {
      return headerRender(props, 'nonfixed-data');
    },
    columnWidth: colWidthOf(headers),
    columnCount: headers.length,
    height: headerRowHeight,
    rowHeight: headerRowHeight,
    rowCount: 1,
    width: width,
    ref: rowHeaderGridRef
  })), _react["default"].createElement("div", {
    style: {
      position: 'absolute',
      left: '0px',
      top: "".concat(headerRowHeight, "px")
    }
  }, _react["default"].createElement(_reactVirtualized.Grid, {
    cellRenderer: function cellRenderer(props) {
      return dataRender(props, 'nonfixed-data');
    },
    columnWidth: colWidthOf(headers),
    columnCount: headers.length,
    height: height - headerRowHeight,
    rowHeight: rowHeight,
    rowCount: data.length,
    width: width + (0, _scrollbarSize["default"])(),
    ref: contentGridRef,
    onScroll: function onScroll(scrollInfo) {
      onMainGridScroll(scrollInfo);

      if (_onScroll != null) {
        _onScroll(scrollInfo);
      }
    }
  })), numOfFixedCols > 0 && _react["default"].createElement("div", {
    style: {
      position: 'absolute',
      left: '0px',
      top: '0px'
    }
  }, _react["default"].createElement(_reactVirtualized.Grid, {
    cellRenderer: function cellRenderer(props) {
      return headerRender(props, 'fixed-data');
    },
    columnWidth: colWidthOf(headers),
    columnCount: numOfFixedCols,
    height: headerRowHeight,
    rowHeight: headerRowHeight,
    rowCount: 1,
    width: fixedHeaderWidth
  })), numOfFixedCols > 0 && _react["default"].createElement("div", {
    style: {
      position: 'absolute',
      left: '0px',
      top: "".concat(headerRowHeight, "px"),
      backgroundColor: 'white',
      borderRight: '1px solid #ccc'
    }
  }, _react["default"].createElement(_reactVirtualized.Grid, {
    style: {
      overflow: 'hidden'
    } // cellRenderer={dataRender}
    ,
    cellRenderer: function cellRenderer(props) {
      return dataRender(props, 'fixed-data');
    },
    columnWidth: colWidthOf(headers),
    columnCount: numOfFixedCols,
    height: height - headerRowHeight - (0, _scrollbarSize["default"])(),
    rowHeight: rowHeight,
    rowCount: data.length,
    width: fixedHeaderWidth,
    ref: columnHeaderGridRef
  })), scrollY && _react["default"].createElement("div", {
    style: {
      // display: 'none',
      position: 'absolute',
      left: "".concat(Math.min(width, totalWidth), "px"),
      width: "".concat((0, _scrollbarSize["default"])() + (scrollX ? 0 : width - totalWidth), "px"),
      height: "".concat(headerRowHeight, "px"),
      top: '0px',
      backgroundColor: columnHeaderProps.backgroundColor,
      borderTop: columnHeaderProps.border || '1px solid #ccc',
      borderRight: columnHeaderProps.border || '1px solid #ccc',
      borderBottom: columnHeaderProps.border || '1px solid #ccc',
      // borderLeft: '1px solid #ccc',
      borderTopRightRadius: '3px'
    }
  })));
};

var virtualizedGridRenderer = function virtualizedGridRenderer(renderOptions) {
  return function (gridRenderProps) {
    return _react["default"].createElement(VirtualizedRender, {
      renderOptions: renderOptions,
      gridRenderProps: gridRenderProps
    });
  };
};

var _default = virtualizedGridRenderer;
exports["default"] = _default;
//# sourceMappingURL=virtualizedRenderer.js.map