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

Integ Grid Tools

'use strict';

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.defaultColHeaderRenderer = exports.defaultCellRenderer = exports.Cell = exports.ColHeader = undefined;

var _range = require('ramda/src/range');

var _range2 = _interopRequireDefault(_range);

var _isNil = require('ramda/src/isNil');

var _isNil2 = _interopRequireDefault(_isNil);

var _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; };

var _createClass = 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); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }();

var _templateObject = _taggedTemplateLiteral(['\n  flex: 0 0 ', 'px;\n  width: ', 'px;\n  max-width: ', 'px;\n'], ['\n  flex: 0 0 ', 'px;\n  width: ', 'px;\n  max-width: ', 'px;\n']),
    _templateObject2 = _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: center;\n'], ['\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: center;\n']),
    _templateObject3 = _taggedTemplateLiteral(['\n  display: flex;\n  width: ', 'px;\n  ', ' \n  border-bottom: 1px solid #ccc;\n'], ['\n  display: flex;\n  width: ', 'px;\n  ', ' \n  border-bottom: 1px solid #ccc;\n']),
    _templateObject4 = _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'], ['\n  position: absolute;\n  top: ', 'px;\n  left: ', 'px;\n  overflow-x: hidden;\n  overflow-y: ', ';\n  background-color: steelblue;\n  width: ', 'px;\n']),
    _templateObject5 = _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'], ['\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']),
    _templateObject6 = _taggedTemplateLiteral(['\n  position: relative;\n  ', ' \n  ', '\n'], ['\n  position: relative;\n  ', ' \n  ', '\n']);

var _react = require('react');

var _react2 = _interopRequireDefault(_react);

var _styledComponents = require('styled-components');

var _styledComponents2 = _interopRequireDefault(_styledComponents);

var _Grid = require('./Grid');

var _Grid2 = _interopRequireDefault(_Grid);

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

var _computeGridProps2 = require('./computeGridProps');

var _computeGridProps3 = _interopRequireDefault(_computeGridProps2);

var _DefaultPager = require('./DefaultPager');

var _DefaultPager2 = _interopRequireDefault(_DefaultPager);

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

var _CellEditContainer = require('./CellEditContainer');

var _CellEditContainer2 = _interopRequireDefault(_CellEditContainer);

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

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

function _possibleConstructorReturn(self, call) { if (!self) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return call && (typeof call === "object" || typeof call === "function") ? call : self; }

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

function _objectWithoutProperties(obj, keys) { var target = {}; for (var i in obj) { if (keys.indexOf(i) >= 0) continue; if (!Object.prototype.hasOwnProperty.call(obj, i)) continue; target[i] = obj[i]; } return target; }

function _taggedTemplateLiteral(strings, raw) { return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); }

// import { shallowEqualExplain } from 'shallow-equal-explain'

var ColHeader = exports.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 */
var Cell = exports.Cell = _Components.BasicCell.extend(_templateObject2, function (props) {
  return props.width;
}, function (props) {
  return props.width;
});

/* prettier-ignore */
var Row = _styledComponents2.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(_Grid2.default.SyncedScrollPane);

var TableContentContainer = (0, _styledComponents2.default)(_Grid2.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 ? _react2.default.createElement(
    TableContentContainer,
    props,
    children
  ) : children;
};

// const ScrollingPane

var defaultNoDataRender = function defaultNoDataRender(_ref2) {
  var top = _ref2.top,
      width = _ref2.width,
      height = _ref2.height;
  return _react2.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 = function (_React$PureComponent) {
  _inherits(FlexGridRow, _React$PureComponent);

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

    return _possibleConstructorReturn(this, (FlexGridRow.__proto__ || Object.getPrototypeOf(FlexGridRow)).apply(this, arguments));
  }

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

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

  return FlexGridRow;
}(_react2.default.PureComponent);

var PureCell = function (_React$PureComponent2) {
  _inherits(PureCell, _React$PureComponent2);

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

    return _possibleConstructorReturn(this, (PureCell.__proto__ || Object.getPrototypeOf(PureCell)).apply(this, arguments));
  }

  _createClass(PureCell, [{
    key: 'render',
    value: function render() {
      var _props2 = this.props,
          display = _props2.display,
          rest = _objectWithoutProperties(_props2, ['display']);

      return _react2.default.createElement(
        Cell,
        rest,
        ' ',
        display,
        ' '
      );
    }
  }]);

  return PureCell;
}(_react2.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 _react2.default.createElement(PureCell, _extends({ title: value + '', width: width, height: height, display: display }, rest));
};

exports.defaultCellRenderer = defaultCellRenderer;
var defaultPagerRenderer = function defaultPagerRenderer(props) {
  return _react2.default.createElement(_DefaultPager2.default, props);
};

var FlexGridCell = function (_React$PureComponent3) {
  _inherits(FlexGridCell, _React$PureComponent3);

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

    return _possibleConstructorReturn(this, (FlexGridCell.__proto__ || Object.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 _props3 = this.props,
          isEditing = _props3.isEditing,
          _props3$render = _props3.render,
          render = _props3$render === undefined ? defaultCellRenderer : _props3$render,
          editRender = _props3.editRender,
          rest = _objectWithoutProperties(_props3, ['isEditing', 'render', 'editRender']);

      if (isEditing) {
        var computedEditRender = editRender || (rest.header.choices ? _Components.dropdownEditRender : _Components.inputCellEditRender);
        return _react2.default.createElement(_CellEditContainer2.default, _extends({}, rest, { render: computedEditRender }));
      }
      return render(this.props);
    }
  }]);

  return FlexGridCell;
}(_react2.default.PureComponent);

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

  return _react2.default.createElement(
    ColHeader,
    _extends({ width: width }, rest, { sortable: header.sortable }),
    header.display,
    sortOrder === 'asc' ? _react2.default.createElement(
      _Components.SortIndicator,
      null,
      '\u25B2'
    ) : sortOrder === 'desc' ? _react2.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 = function (_React$PureComponent4) {
  _inherits(FlexGridColHeader, _React$PureComponent4);

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

    return _possibleConstructorReturn(this, (FlexGridColHeader.__proto__ || Object.getPrototypeOf(FlexGridColHeader)).apply(this, arguments));
  }

  _createClass(FlexGridColHeader, [{
    key: 'render',
    value: function render() {
      console.log('scroll y is ', this.props.scrollY);

      var _props4 = this.props,
          _props4$render = _props4.render,
          render = _props4$render === undefined ? defaultColHeaderRenderer : _props4$render,
          rest = _objectWithoutProperties(_props4, ['render']);

      return render(rest);
    }
  }]);

  return FlexGridColHeader;
}(_react2.default.PureComponent);

/* prettier-ignore */


var FlexGridContainer = _styledComponents2.default.div(_templateObject6, function (_ref5) {
  var width = _ref5.width;
  return width ? 'width: ' + width + 'px;' : '';
}, function (_ref6) {
  var height = _ref6.height;
  return height ? 'height: ' + height + 'px;' : '';
});

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

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

    var _computeGridProps = (0, _computeGridProps3.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 _react2.default.createElement(
      FlexGridContainer,
      _extends({}, getContainerProps({
        width: containerWidth,
        height: containerHeight,
        refKey: 'innerRef'
      }), {
        style: style,
        className: className,
        tabIndex: '0'
      }),
      _react2.default.createElement('input', getClipboardHelperProps()),
      hasFixedCols && _react2.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 _react2.default.createElement(FlexGridColHeader, _extends({
            render: colHeaderRenderer
          }, getColumnHeaderProps({ index: index, header: header })));
        })
      ),
      _react2.default.createElement(
        FlexGridRow,
        getRowProps({
          isHeader: true,
          headers: dataHeaders,
          width: contentViewPortWidth,
          headerRowHeight: headerRowHeight,
          xOffSet: fixedHeaderWidth,
          scrollY: scrollY,
          scroll: scroll
        }),
        dataHeaders.map(function (header, index) {
          return _react2.default.createElement(FlexGridColHeader, _extends({
            render: colHeaderRenderer
          }, getColumnHeaderProps({ index: index + numOfFixedCols, header: header }), {
            scrollY: scrollY
          }));
        })
      ),
      numOfFixedCols > 0 && data && data.length > 0 && _react2.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 _react2.default.createElement(
            FlexGridRow,
            getRowProps({
              index: rowIndex,
              headers: rowHeaders,
              rowHeight: rowHeight
            }),
            rowHeaders.map(function (header, columnIndex) {
              return _react2.default.createElement(FlexGridCell, _extends({
                render: cellRenderer
              }, getCellProps({
                rowIndex: rowIndex,
                columnIndex: columnIndex,
                header: header,
                data: data
              })));
            })
          );
        })
      ),
      data && data.length > 0 && _react2.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 _react2.default.createElement(
            FlexGridRow,
            getRowProps({
              index: rowIndex,
              headers: dataHeaders,
              rowHeight: rowHeight
            }),
            dataHeaders.map(function (header, columnIndex) {
              return _react2.default.createElement(FlexGridCell, _extends({
                render: cellRenderer
              }, getCellProps({
                rowIndex: rowIndex,
                columnIndex: columnIndex + numOfFixedCols,
                header: header,
                data: data
              })));
            })
          );
        })
      ),
      data && data.length === 0 && noDataRender && noDataRender({
        top: headerRowHeight,
        height: scrollPaneHeight,
        width: containerWidth
      }),
      hasPaging && pagerRenderer(getPagerProps({ style: pagerStyle })),
      renderRowEditor(getRowEditorProps())
    );
  };
};

exports.default = flexGridRenderer;
//# sourceMappingURL=flexRenderer.js.map