@integec/grid-tools/lib/flexRenderer.js

Integ Grid Tools

"use strict";

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

var _range2 = _interopRequireDefault(require("ramda/src/range"));

var _isNil2 = _interopRequireDefault(require("ramda/src/isNil"));

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

var _styledComponents = _interopRequireDefault(require("styled-components"));

var _Grid = _interopRequireDefault(require("./Grid"));

var _utils = require("./utils");

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

var _DefaultPager = _interopRequireDefault(require("./DefaultPager"));

var _Components = require("./Components");

var _CellEditContainer = _interopRequireDefault(require("./CellEditContainer"));

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

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

function _templateObject6() {
  var data = _taggedTemplateLiteral(["\n  position: relative;\n  ", " \n  ", "\n"]);

  _templateObject6 = function _templateObject6() {
    return data;
  };

  return data;
}

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 _typeof(obj) { if (typeof Symbol === "function" && typeof Symbol.iterator === "symbol") { _typeof = function _typeof(obj) { return typeof obj; }; } else { _typeof = function _typeof(obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }; } return _typeof(obj); }

function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }

function _defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } }

function _createClass(Constructor, protoProps, staticProps) { if (protoProps) _defineProperties(Constructor.prototype, protoProps); if (staticProps) _defineProperties(Constructor, staticProps); return Constructor; }

function _possibleConstructorReturn(self, call) { if (call && (_typeof(call) === "object" || typeof call === "function")) { return call; } return _assertThisInitialized(self); }

function _assertThisInitialized(self) { if (self === void 0) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return self; }

function _getPrototypeOf(o) { _getPrototypeOf = Object.setPrototypeOf ? Object.getPrototypeOf : function _getPrototypeOf(o) { return o.__proto__ || Object.getPrototypeOf(o); }; return _getPrototypeOf(o); }

function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function"); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, writable: true, configurable: true } }); if (superClass) _setPrototypeOf(subClass, superClass); }

function _setPrototypeOf(o, p) { _setPrototypeOf = Object.setPrototypeOf || function _setPrototypeOf(o, p) { o.__proto__ = p; return o; }; return _setPrototypeOf(o, p); }

function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }

function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }

function _templateObject5() {
  var data = _taggedTemplateLiteral(["\n  position: absolute;\n  left: ", "px;\n  top: ", "px;\n  width: ", "px;\n  height: ", "px;\n  overflow-x: ", ";\n  overflow-y: ", ";\n  & * {\n    box-sizing: border-box;\n  }\n"]);

  _templateObject5 = function _templateObject5() {
    return data;
  };

  return data;
}

function _templateObject4() {
  var data = _taggedTemplateLiteral(["\n  position: absolute;\n  top: ", "px;\n  left: ", "px;\n  overflow-x: hidden;\n  overflow-y: ", ";\n  background-color: steelblue;\n  width: ", "px;\n"]);

  _templateObject4 = function _templateObject4() {
    return data;
  };

  return data;
}

function _templateObject3() {
  var data = _taggedTemplateLiteral(["\n  display: flex;\n  width: ", "px;\n  ", " \n  border-bottom: 1px solid #ccc;\n"]);

  _templateObject3 = function _templateObject3() {
    return data;
  };

  return data;
}

function _templateObject2() {
  var data = _taggedTemplateLiteral(["\n  flex: 0 0 ", "px;\n  width: ", "px;\n  white-space: nowrap;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  /*display: block;*/\n  height: 100%;\n  text-align: ", ";\n"]);

  _templateObject2 = function _templateObject2() {
    return data;
  };

  return data;
}

function _templateObject() {
  var data = _taggedTemplateLiteral(["\n  flex: 0 0 ", "px;\n  width: ", "px;\n  max-width: ", "px;\n"]);

  _templateObject = function _templateObject() {
    return data;
  };

  return data;
}

function _taggedTemplateLiteral(strings, raw) { if (!raw) { raw = strings.slice(0); } return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); }

// import { shallowEqualExplain } from 'shallow-equal-explain'
var ColHeader = _Components.BasicColHeader.extend(_templateObject(), function (props) {
  return props.width;
}, function (props) {
  return props.width;
}, function (props) {
  return props.width;
}); // export const CellContent = styled.div`
//   white-space: nowrap;
//   overflow: hidden;
//   text-overflow: ellipsis;
//   pointer-events: none;
// `

/* prettier-ignore */

/* to have the ellipsis we need dispay block instead of flex */


exports.ColHeader = ColHeader;

var Cell = _Components.BasicCell.extend(_templateObject2(), function (props) {
  return props.width;
}, function (props) {
  return props.width;
}, function (props) {
  return props.alignment || 'center';
});
/* prettier-ignore */


exports.Cell = Cell;

var Row = _styledComponents["default"].div(_templateObject3(), function (props) {
  return props.width;
}, function (props) {
  return props.height ? 'height: ' + props.height + 'px;' : '';
});

var ScrollingHeaderRow = Row.extend(_templateObject4(), function (props) {
  return props.yOffSet || '0';
}, function (props) {
  return props.xOffSet || '0';
}, function (props) {
  return props.scrollY ? 'scroll' : 'hidden';
}, function (props) {
  return props.width;
}).withComponent(_Grid["default"].SyncedScrollPane);
var TableContentContainer = (0, _styledComponents["default"])(_Grid["default"].SyncedScrollPane)(_templateObject5(), function (props) {
  return props.xOffSet || 0;
}, function (props) {
  return props.yOffSet || 0;
}, function (props) {
  return props.width;
}, function (props) {
  return props.height - props.yOffSet;
}, function (props) {
  return props.scrollX ? 'scroll' : 'hidden';
}, function (props) {
  return props.scrollY ? 'scroll' : 'hidden';
});

var TableContent = function TableContent(_ref) {
  var scroll = _ref.scroll,
      children = _ref.children,
      props = _objectWithoutProperties(_ref, ["scroll", "children"]);

  return props.width === 0 ? null : scroll ? _react["default"].createElement(TableContentContainer, props, children) : children;
}; // const ScrollingPane


var defaultNoDataRender = function defaultNoDataRender(_ref2) {
  var top = _ref2.top,
      width = _ref2.width,
      height = _ref2.height;
  return _react["default"].createElement("div", {
    style: {
      position: top > 0 ? 'absolute' : undefined,
      left: '0px',
      top: top,
      height: height + 'px',
      width: width + 'px',
      display: 'flex',
      alignItems: 'center',
      justifyContent: 'center',
      fontSize: '2.5em',
      color: '#999',
      borderLeft: '3px dashed #ddd',
      borderRight: '3px dashed #ddd',
      borderBottom: '3px dashed #ddd',
      borderBottomRightRadius: '6px',
      borderBottomLeftRadius: '6px'
    }
  }, "Data Not Available");
};

var FlexGridRow =
/*#__PURE__*/
function (_React$PureComponent) {
  _inherits(FlexGridRow, _React$PureComponent);

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

    return _possibleConstructorReturn(this, _getPrototypeOf(FlexGridRow).apply(this, arguments));
  }

  _createClass(FlexGridRow, [{
    key: "render",
    value: function render() {
      var _this$props = this.props,
          children = _this$props.children,
          scroll = _this$props.scroll,
          rest = _objectWithoutProperties(_this$props, ["children", "scroll"]);

      return (0, _isNil2["default"])(rest.width) || rest.width === 0 ? null : scroll ? _react["default"].createElement(ScrollingHeaderRow, rest, children) : _react["default"].createElement(Row, rest, children);
    }
  }]);

  return FlexGridRow;
}(_react["default"].PureComponent);

var PureCell =
/*#__PURE__*/
function (_React$PureComponent2) {
  _inherits(PureCell, _React$PureComponent2);

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

    return _possibleConstructorReturn(this, _getPrototypeOf(PureCell).apply(this, arguments));
  }

  _createClass(PureCell, [{
    key: "render",
    value: function render() {
      var _this$props2 = this.props,
          display = _this$props2.display,
          rest = _objectWithoutProperties(_this$props2, ["display"]);

      return _react["default"].createElement(Cell, rest, " ", display, " ");
    }
  }]);

  return PureCell;
}(_react["default"].PureComponent);

var defaultCellRenderer = function defaultCellRenderer(_ref3) {
  var rowIndex = _ref3.rowIndex,
      columnIndex = _ref3.columnIndex,
      header = _ref3.header,
      width = _ref3.width,
      height = _ref3.height,
      data = _ref3.data,
      render = _ref3.render,
      altIndexes = _ref3.altIndexes,
      altBgColor = _ref3.altBgColor,
      rest = _objectWithoutProperties(_ref3, ["rowIndex", "columnIndex", "header", "width", "height", "data", "render", "altIndexes", "altBgColor"]);

  var value = (0, _utils.extractData)({
    header: header,
    rowData: data[rowIndex]
  });
  var display = (0, _utils.formatData)({
    header: header,
    value: value,
    rowData: data[rowIndex]
  });
  /* todo may consider passing down just the hader */
  // moved all this to grid getCellProps
  // const {
  //   fontSize,
  //   fontWeight,
  //   backgroundColor,
  //   hoverSelectionBackgroundColor,
  //   hoverBackgroundColor,
  //   selectionBackgroundColor,
  //   hoverSelectionColor,
  //   hoverColor,
  //   selectionColor,
  //   color,
  // } = header
  // fontSize={fontSize}
  // fontWeight={fontWeight}
  // backgroundColor={backgroundColor || (altIndexes && altIndexes[rowIndex] && altBgColor)}
  // hoverSelectionBackgroundColor={hoverSelectionBackgroundColor}
  // hoverBackgroundColor={hoverBackgroundColor}
  // selectionBackgroundColor={selectionBackgroundColor}
  // hoverSelectionColor={hoverSelectionColor}
  // hoverColor={hoverColor}
  // selectionColor={selectionColor}
  // color={color}

  return _react["default"].createElement(PureCell, _extends({
    title: rest.invalidMessage || value + '',
    width: width,
    height: height,
    display: display
  }, rest));
};

exports.defaultCellRenderer = defaultCellRenderer;

var defaultPagerRenderer = function defaultPagerRenderer(props) {
  return _react["default"].createElement(_DefaultPager["default"], props);
};

var FlexGridCell =
/*#__PURE__*/
function (_React$PureComponent3) {
  _inherits(FlexGridCell, _React$PureComponent3);

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

    return _possibleConstructorReturn(this, _getPrototypeOf(FlexGridCell).apply(this, arguments));
  }

  _createClass(FlexGridCell, [{
    key: "render",
    value: function render() {
      // console.log('rendering cell..')
      // TODO: strip props that are not for editing here
      var _this$props3 = this.props,
          isEditing = _this$props3.isEditing,
          _this$props3$render = _this$props3.render,
          render = _this$props3$render === void 0 ? defaultCellRenderer : _this$props3$render,
          editRender = _this$props3.editRender,
          rest = _objectWithoutProperties(_this$props3, ["isEditing", "render", "editRender"]);

      if (isEditing) {
        var computedEditRender = editRender || (rest.header.choices ? _Components.dropdownEditRender : _Components.inputCellEditRender);
        return _react["default"].createElement(_CellEditContainer["default"], _extends({}, rest, {
          render: computedEditRender
        }));
      }

      return render(this.props);
    }
  }]);

  return FlexGridCell;
}(_react["default"].PureComponent);

var defaultColHeaderRenderer = function defaultColHeaderRenderer(_ref4) {
  var header = _ref4.header,
      sortOrder = _ref4.sortOrder,
      width = _ref4.width,
      rest = _objectWithoutProperties(_ref4, ["header", "sortOrder", "width"]);

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

  return _react["default"].createElement(ColHeader, _extends({
    width: width
  }, rest, gridContext.columnHeaderProps, {
    sortable: header.sortable
  }), header.display, sortOrder === 'asc' ? _react["default"].createElement(_Components.SortIndicator, null, "\u25B2") : sortOrder === 'desc' ? _react["default"].createElement(_Components.SortIndicator, null, "\u25BC") : null);
}; // <SortIndicator className="fa fa-caret-up" aria-hidden="true" />
// <SortIndicator className="fa fa-caret-down" aria-hidden="true" />


exports.defaultColHeaderRenderer = defaultColHeaderRenderer;

var FlexGridColHeader = _react["default"].memo(function (_ref5) {
  var _ref5$render = _ref5.render,
      render = _ref5$render === void 0 ? defaultColHeaderRenderer : _ref5$render,
      rest = _objectWithoutProperties(_ref5, ["render"]);

  return render(rest);
});
/* prettier-ignore */


var FlexGridContainer = _styledComponents["default"].div(_templateObject6(), function (_ref6) {
  var width = _ref6.width;
  return width ? 'width: ' + width + 'px;' : '';
}, function (_ref7) {
  var height = _ref7.height;
  return height ? 'height: ' + height + 'px;' : '';
});

var flexGridRenderer = function flexGridRenderer() {
  var _ref8 = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {},
      style = _ref8.style,
      className = _ref8.className,
      height = _ref8.height,
      width = _ref8.width,
      _ref8$rowHeight = _ref8.rowHeight,
      rowHeight = _ref8$rowHeight === void 0 ? 23 : _ref8$rowHeight,
      headerRowHeight = _ref8.headerRowHeight,
      _ref8$fixedColCount = _ref8.fixedColCount,
      fixedColCount = _ref8$fixedColCount === void 0 ? 0 : _ref8$fixedColCount,
      autoFixColByKey = _ref8.autoFixColByKey,
      cellRenderer = _ref8.cellRenderer,
      editRenderer = _ref8.editRenderer,
      colHeaderRenderer = _ref8.colHeaderRenderer,
      _ref8$pagerRenderer = _ref8.pagerRenderer,
      pagerRenderer = _ref8$pagerRenderer === void 0 ? defaultPagerRenderer : _ref8$pagerRenderer,
      _ref8$pagerHeight = _ref8.pagerHeight,
      pagerHeight = _ref8$pagerHeight === void 0 ? 35 : _ref8$pagerHeight,
      scrollBarHeightAdjustment = _ref8.scrollBarHeightAdjustment,
      scrollBarWidthAdjustment = _ref8.scrollBarWidthAdjustment,
      borderSize = _ref8.borderSize,
      _ref8$noDataRender = _ref8.noDataRender,
      noDataRender = _ref8$noDataRender === void 0 ? defaultNoDataRender : _ref8$noDataRender;

  return function (_ref9) {
    var getColumnHeaderProps = _ref9.getColumnHeaderProps,
        getRowProps = _ref9.getRowProps,
        getCellProps = _ref9.getCellProps,
        getContainerProps = _ref9.getContainerProps,
        getPagerProps = _ref9.getPagerProps,
        getRowEditorProps = _ref9.getRowEditorProps,
        headers = _ref9.headers,
        data = _ref9.data,
        hasPaging = _ref9.hasPaging,
        renderRowEditor = _ref9.renderRowEditor,
        getClipboardHelperProps = _ref9.getClipboardHelperProps;

    var _computeGridProps = (0, _computeGridProps2["default"])({
      headers: headers,
      data: data,
      rowHeight: rowHeight,
      width: width,
      height: height,
      scrollBarWidthAdjustment: scrollBarWidthAdjustment,
      scrollBarHeightAdjustment: scrollBarHeightAdjustment,
      // fixedScrollHeightAdjustment,
      borderSize: borderSize,
      fixedColCount: fixedColCount,
      autoFixColByKey: autoFixColByKey,
      headerRowHeight: headerRowHeight,
      hasPaging: hasPaging,
      pagerHeight: pagerHeight
    }),
        scroll = _computeGridProps.scroll,
        scrollX = _computeGridProps.scrollX,
        scrollY = _computeGridProps.scrollY,
        numOfFixedCols = _computeGridProps.numOfFixedCols,
        rowHeaders = _computeGridProps.rowHeaders,
        dataHeaders = _computeGridProps.dataHeaders,
        containerWidth = _computeGridProps.containerWidth,
        scrollPaneHeight = _computeGridProps.scrollPaneHeight,
        containerHeight = _computeGridProps.containerHeight,
        hasFixedCols = _computeGridProps.hasFixedCols,
        fixedHeaderWidth = _computeGridProps.fixedHeaderWidth,
        contentViewPortWidth = _computeGridProps.contentViewPortWidth;

    var pagerStyle = {
      height: pagerHeight + 'px',
      position: scroll ? 'absolute' : undefined,
      left: scroll ? '0px' : undefined,
      bottom: scroll ? '0px' : undefined,
      width: scroll ? containerWidth + 'px' : undefined
    };
    return _react["default"].createElement(FlexGridContainer, _extends({}, getContainerProps({
      width: containerWidth,
      height: containerHeight,
      refKey: 'innerRef'
    }), {
      style: style,
      className: className,
      tabIndex: "0"
    }), _react["default"].createElement("input", getClipboardHelperProps()), hasFixedCols && _react["default"].createElement(FlexGridRow, getRowProps({
      isHeader: true,
      headers: rowHeaders,
      headerRowHeight: headerRowHeight,
      scroll: scroll // width is ommited because it is auto calced
      // if not supplied

    }), rowHeaders.map(function (header, index) {
      return _react["default"].createElement(FlexGridColHeader, _extends({
        render: colHeaderRenderer
      }, getColumnHeaderProps({
        index: index,
        header: header
      })));
    })), _react["default"].createElement(FlexGridRow, getRowProps({
      isHeader: true,
      headers: dataHeaders,
      width: contentViewPortWidth,
      headerRowHeight: headerRowHeight,
      xOffSet: fixedHeaderWidth,
      scrollY: scrollY,
      scroll: scroll
    }), dataHeaders.map(function (header, index) {
      return _react["default"].createElement(FlexGridColHeader, _extends({
        render: colHeaderRenderer
      }, getColumnHeaderProps({
        index: index + numOfFixedCols,
        header: header
      }), {
        scrollY: scrollY
      }));
    })), numOfFixedCols > 0 && data && data.length > 0 && _react["default"].createElement(TableContent, {
      height: scrollPaneHeight,
      width: fixedHeaderWidth,
      yOffSet: headerRowHeight,
      headers: rowHeaders,
      scroll: scroll,
      scrollX: true,
      vertical: true,
      horizontal: false
    }, (0, _range2["default"])(0, data.length).map(function (rowIndex) {
      return _react["default"].createElement(FlexGridRow, getRowProps({
        index: rowIndex,
        headers: rowHeaders,
        rowHeight: rowHeight
      }), rowHeaders.map(function (header, columnIndex, all) {
        return _react["default"].createElement(FlexGridCell, _extends({
          render: cellRenderer,
          editRender: editRenderer
        }, getCellProps({
          rowIndex: rowIndex,
          columnIndex: columnIndex,
          header: header,
          data: data,
          isLastInRow: all.length === columnIndex + 1
        })));
      }));
    })), data && data.length > 0 && _react["default"].createElement(TableContent, {
      height: scrollPaneHeight,
      width: contentViewPortWidth,
      yOffSet: headerRowHeight,
      headers: dataHeaders,
      scroll: scroll,
      xOffSet: fixedHeaderWidth - 1,
      scrollX: scrollX,
      scrollY: scrollY,
      vertical: true,
      horizontal: true
    }, (0, _range2["default"])(0, data.length).map(function (rowIndex) {
      return _react["default"].createElement(FlexGridRow, getRowProps({
        index: rowIndex,
        headers: dataHeaders,
        rowHeight: rowHeight
      }), dataHeaders.map(function (header, columnIndex, all) {
        return _react["default"].createElement(FlexGridCell, _extends({
          render: cellRenderer,
          editRender: editRenderer
        }, getCellProps({
          rowIndex: rowIndex,
          columnIndex: columnIndex + numOfFixedCols,
          header: header,
          data: data,
          isLastInRow: all.length === columnIndex + 1
        })));
      }));
    })), data && data.length === 0 && noDataRender && noDataRender({
      top: headerRowHeight,
      height: scrollPaneHeight,
      width: containerWidth
    }), hasPaging && pagerRenderer(getPagerProps({
      style: pagerStyle
    })), renderRowEditor(getRowEditorProps()));
  };
};

var _default = flexGridRenderer;
exports["default"] = _default;
//# sourceMappingURL=flexRenderer.js.map