polestar-ui-kit/lib/Grid/Grid.js

## Install

"use strict";

require("core-js/modules/es.array.concat");

require("core-js/modules/es.array.filter");

require("core-js/modules/es.array.for-each");

require("core-js/modules/es.array.map");

require("core-js/modules/es.date.to-string");

require("core-js/modules/es.object.get-prototype-of");

require("core-js/modules/es.object.keys");

require("core-js/modules/es.object.set-prototype-of");

require("core-js/modules/es.object.to-string");

require("core-js/modules/es.reflect.construct");

require("core-js/modules/es.regexp.exec");

require("core-js/modules/es.regexp.to-string");

require("core-js/modules/es.string.search");

require("core-js/modules/es.string.split");

require("core-js/modules/web.dom-collections.for-each");

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

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

var _propTypes = _interopRequireDefault(require("prop-types"));

var _agGridReact = require("ag-grid-react");

require("ag-grid-enterprise");

var _classnames = _interopRequireDefault(require("classnames"));

var _request = _interopRequireDefault(require("../helpers/request"));

var _Header = _interopRequireDefault(require("./components/Header"));

var _LoadingOverlay = _interopRequireDefault(require("./components/LoadingOverlay"));

var _NoRowsOverlay = _interopRequireDefault(require("./components/NoRowsOverlay"));

var _PageCountInfo = _interopRequireDefault(require("./components/PageCountInfo"));

var _CheckboxColumn = _interopRequireDefault(require("./components/CheckboxColumn"));

var _CheckboxColumnHeader = _interopRequireDefault(require("./components/CheckboxColumnHeader"));

var _Pagination = _interopRequireDefault(require("../Pagination"));

var _i18n = require("../i18n");

var _editors = require("./editors");

var _renderers = require("./renderers");

var _comparator = _interopRequireDefault(require("./helpers/comparator"));

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

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 _toConsumableArray(arr) { return _arrayWithoutHoles(arr) || _iterableToArray(arr) || _unsupportedIterableToArray(arr) || _nonIterableSpread(); }

function _nonIterableSpread() { throw new TypeError("Invalid attempt to spread non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }

function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }

function _iterableToArray(iter) { if (typeof Symbol !== "undefined" && Symbol.iterator in Object(iter)) return Array.from(iter); }

function _arrayWithoutHoles(arr) { if (Array.isArray(arr)) return _arrayLikeToArray(arr); }

function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) { arr2[i] = arr[i]; } return arr2; }

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) { "@babel/helpers - typeof"; 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 _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 _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = _getPrototypeOf(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = _getPrototypeOf(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return _possibleConstructorReturn(this, result); }; }

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 _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Date.prototype.toString.call(Reflect.construct(Date, [], function () {})); return true; } catch (e) { return false; } }

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

var Grid = function (_React$Component) {
  _inherits(Grid, _React$Component);

  var _super = _createSuper(Grid);

  function Grid(props) {
    var _this;

    _classCallCheck(this, Grid);

    _this = _super.call(this, props);

    _this.onResize = function () {
      var sizeToFit = _this.props.sizeToFit;

      if (sizeToFit) {
        _this.api.sizeColumnsToFit();
      }
    };

    _this.onGridReady = function (params) {
      _this.api = params.api;
      _this.columnApi = params.columnApi;
      var onGridReady = _this.props.onGridReady;

      _this.rowData();

      _this.onResize();

      if (onGridReady) {
        onGridReady(params);
      }
    };

    _this.onRowDataChanged = function (params) {
      var _this$props = _this.props,
          pageable = _this$props.pageable,
          onRowDataChanged = _this$props.onRowDataChanged;

      if (!pageable && _this.gridRef.current) {
        _this.setState({
          totalCount: _this.gridRef.current.api.getDisplayedRowCount()
        });
      }

      if (onRowDataChanged) {
        onRowDataChanged(params);
      }
    };

    _this.onRowDataUpdated = function (params) {
      var _this$props2 = _this.props,
          pageable = _this$props2.pageable,
          onRowDataUpdated = _this$props2.onRowDataUpdated;

      if (!pageable && _this.gridRef.current) {
        _this.setState({
          totalCount: _this.gridRef.current.api.getDisplayedRowCount()
        });
      }

      if (onRowDataUpdated) {
        onRowDataUpdated(params);
      }
    };

    _this.onSortChanged = function (params) {
      var _this$props3 = _this.props,
          pageable = _this$props3.pageable,
          onSortChanged = _this$props3.onSortChanged;

      var orders = _this.api.getSortModel().map(function (model) {
        return _this.convertOrderModel(model);
      });

      if (pageable) {
        _this.rowData();
      }

      if (onSortChanged) {
        onSortChanged(params, orders);
      }
    };

    _this.onFilterChanged = function (params) {
      var onFilterChanged = _this.props.onFilterChanged;
      var filterCount = 0;

      _this.api.forEachNodeAfterFilterAndSort(function (rowNode, index) {
        filterCount = index + 1;
      });

      _this.setState({
        filterCount: filterCount
      });

      if (onFilterChanged) {
        onFilterChanged(params);
      }
    };

    _this.onColumnVisible = function () {
      _this._setStoreColumnState();

      if (_this.props.onColumnVisible) {
        _this.props.onColumnVisible();
      }
    };

    _this.onColumnResized = function (e) {
      if (!e.finished) {
        _this.isResize = true;
      }

      if (e.finished && _this.isResize) {
        _this._setStoreColumnState();

        _this.isResize = false;
      }

      if (_this.props.onColumnResized) {
        _this.props.onColumnResized();
      }
    };

    _this.onPageChange = function (page, pageSize) {
      _this.currentPage = page;

      if (_this.pageSize !== pageSize) {
        _this.pageSize = pageSize;
        _this.api.gridOptionsWrapper.gridOptions.cacheBlockSize = _this.pageSize * 2;
      }

      _this.rowData();

      if (_this.props.onPageChange) {
        _this.props.onPageChange(page, pageSize);
      }
    };

    _this.onSelectionChanged = function (e) {
      var onSelectionChanged = _this.props.onSelectionChanged;
      _this.selectedItems = e.api.getSelectedRows();
      _this.selectedItemCount = e.api.getSelectedNodes().length;

      if (onSelectionChanged) {
        onSelectionChanged(e, _this.selectedItems);
      }
    };

    _this.onRowSelected = function (e) {
      var _this$props4 = _this.props,
          onRowSelected = _this$props4.onRowSelected,
          radioable = _this$props4.radioable;

      if (radioable === true) {
        if (JSON.stringify(_this.selectedRadioData) === JSON.stringify(e.data)) {
          e.node.setSelected(true);
        }

        if (e.node.selected === true) {
          _this.selectedRadioData = e.data;
        }
      }

      if (onRowSelected) {
        if (radioable === true && e.node.selected === true) {
          onRowSelected(e, e.data);
        } else {
          onRowSelected(e, e.data);
        }
      }
    };

    _this.setItems = function (items) {
      _this._setPageCountInfo(items.length, _this.currentPage);

      _this.api.setRowData(items);

      if (_this.props.onLoadComplete) {
        _this.props.onLoadComplete();
      }
    };

    _this.getItems = function () {
      var items = [];

      _this.api.forEachNode(function (rowNode) {
        items.push(rowNode.data);
      });

      return items;
    };

    _this.getSelectedItems = function () {
      return _this.api.getSelectedRows();
    };

    _this.getSelectedItemCount = function () {
      return _this.selectedItemCount;
    };

    _this.getTotalCount = function () {
      return _this.state.totalCount;
    };

    _this.getRowItem = function (rowId) {
      var rowNode = _this.api.getRowNode(rowId);

      return rowNode.data;
    };

    _this.getSearchData = function () {
      return _this.searchData;
    };

    _this.search = function (params) {
      _this.currentPage = 1;
      _this.searchData = params;

      _this.rowData();
    };

    _this.resetSearch = function () {
      _this.searchData = null;
    };

    _this.filter = function (params) {
      var filterModel = _this.convertFilterModel(params);

      _this.api.setFilterModel(filterModel);

      _this.api.onFilterChanged();
    };

    _this.refresh = function () {
      _this.rowData();
    };

    _this.convertOrderModel = function (model) {
      var sortModelKey = _this.props.sortModelKey;
      var obj = {};
      var keys = Object.keys(model);
      keys.forEach(function (key) {
        if (key === 'colId') {
          obj[sortModelKey] = model[key];
        }

        if (key === 'sort') {
          obj.sort = model[key];
          obj.desc = model[key] === 'desc';
        }
      });
      return obj;
    };

    _this.convertFilterModel = function (model) {
      var obj = {};
      var keys = Object.keys(model);
      keys.forEach(function (key) {
        if (model[key]) {
          obj[key] = [model[key]];
        }
      });
      return obj;
    };

    _this.fetchObject = function (pageInfo) {
      var fetchObj;

      if (typeof _this.props.request === 'function') {
        fetchObj = _this.props.request({
          pageInfo: pageInfo,
          searchData: _this.searchData
        });
      } else if (_typeof(_this.props.request) === 'object') {
        var _this$props$request = _this.props.request,
            method = _this$props$request.method,
            url = _this$props$request.url,
            params = _this$props$request.params,
            headers = _this$props$request.headers,
            responseType = _this$props$request.responseType;
        var reqParams = params;

        if (typeof params === 'function') {
          reqParams = params(pageInfo);
        }

        fetchObj = (0, _request["default"])({
          headers: headers,
          method: method,
          url: typeof url === 'function' ? url(pageInfo) : url,
          params: _extends({}, reqParams, _this.searchData, pageInfo),
          responseType: responseType
        });
      }

      return fetchObj;
    };

    _this._setPageCountInfo = function (totalCount, currentPage) {
      if (_this.props.pageable) {
        _this.setState({
          currentPage: currentPage,
          totalCount: totalCount
        });
      } else {
        _this.setState({
          totalCount: totalCount
        });
      }
    };

    _this.responseRows = function (response) {
      var itemsKey = _this.props.itemsKey;
      var rows = response.data;

      if (itemsKey !== null && itemsKey.length > 0) {
        var itemsKeys = itemsKey.split('.');
        itemsKeys.forEach(function (key) {
          rows = rows[key];
        });
      }

      return rows;
    };

    _this.responseRowTotalCount = function (response, rows) {
      var _this$props5 = _this.props,
          pageable = _this$props5.pageable,
          totalCountKey = _this$props5.totalCountKey;
      var totalCount = rows && rows.length || 0;

      if (pageable && totalCountKey !== null && totalCountKey.length > 0) {
        var totalCountKeys = totalCountKey.split('.');
        var responseData = response.data;
        totalCountKeys.forEach(function (key) {
          responseData = responseData[key];
        });
        totalCount = responseData;
      }

      return totalCount;
    };

    _this.rowData = function () {
      if (typeof _this.props.rowData !== 'undefined') return;

      var _assertThisInitialize = _assertThisInitialized(_this),
          currentPage = _assertThisInitialize.currentPage;

      var _this$props6 = _this.props,
          items = _this$props6.items,
          useSetRowData = _this$props6.useSetRowData;

      if (_this.props.request) {
        if (_this.rowModelType === 'infinite') {
          _this.infiniteData();
        } else if (_this.rowModelType === 'serverSide') {
          _this.serverSideData();
        } else if (_this.rowModelType === 'clientSide') {
          _this.clientSideData();
        }
      } else if (items) {
        var length = items.length;

        _this._setPageCountInfo(length, currentPage);

        _this.api.hideOverlay();

        _this.api.setRowData(items);

        if (_this.props.onLoadComplete) {
          _this.props.onLoadComplete();
        }
      } else {
        _this.api.setRowData([]);

        if (useSetRowData === true) {
          _this.api.hideOverlay();

          _this.api.showLoadingOverlay();
        }

        if (_this.props.onLoadComplete) {
          _this.props.onLoadComplete();
        }
      }
    };

    _this.clientSideData = function () {
      var _assertThisInitialize2 = _assertThisInitialized(_this),
          currentPage = _assertThisInitialize2.currentPage,
          pageSize = _assertThisInitialize2.pageSize;

      var orders = _this.api.getSortModel().map(function (model) {
        return _this.convertOrderModel(model);
      });

      var pageInfo = {
        rowIndex: (currentPage - 1) * pageSize,
        pageSize: pageSize,
        orders: orders
      };

      _this.api.showLoadingOverlay();

      _this.fetchObject(pageInfo).then(function (response) {
        var rows = _this.responseRows(response);

        var totalCount = _this.responseRowTotalCount(response, rows);

        _this._setPageCountInfo(totalCount, currentPage);

        _this.api.setRowData(rows);

        _this.api.hideOverlay();

        if (_this.props.onLoadComplete) {
          _this.props.onLoadComplete();
        }
      })["catch"](function (error) {
        _this.api.hideOverlay();

        throw new Error(error);
      });
    };

    _this.serverSideData = function () {
      var dataSource = {
        getRows: function getRows(params) {
          var _assertThisInitialize3 = _assertThisInitialized(_this),
              currentPage = _assertThisInitialize3.currentPage,
              pageSize = _assertThisInitialize3.pageSize;

          var pageInfo = {
            rowIndex: (currentPage - 1) * pageSize,
            pageSize: pageSize,
            orders: params.request.sortModel
          };

          _this.api.showLoadingOverlay();

          _this.fetchObject(pageInfo).then(function (response) {
            var rows = _this.responseRows(response);

            var totalCount = _this.responseRowTotalCount(response, rows);

            var lastRow = rows.length;

            _this._setPageCountInfo(totalCount, _this.currentPage);

            if (rows.length === 0 && lastRow === 0) {
              _this.api.showNoRowsOverlay();
            }

            params.successCallback(rows, lastRow);

            _this.api.hideOverlay();

            if (_this.props.onLoadComplete) {
              _this.props.onLoadComplete();
            }
          })["catch"](function (error) {
            _this.api.hideOverlay();

            throw new Error(error);
          });
        }
      };

      _this.api.setServerSideDatasource(dataSource);
    };

    _this.infiniteData = function () {
      var dataSource = {
        getRows: function getRows(params) {
          var pageInfo = {
            rowIndex: params.startRow - 1,
            pageSize: params.endRow
          };

          _this.api.showLoadingOverlay();

          _this.fetchObject(pageInfo).then(function (response) {
            var rows = _this.responseRows(response);

            var totalCount = _this.responseRowTotalCount(response, rows);

            var lastRow = -1;

            if (params.endRow >= totalCount) {
              lastRow = totalCount;
            }

            _this._setPageCountInfo(totalCount, _this.currentPage);

            if (rows.length === 0 && lastRow === 0) {
              _this.api.showNoRowsOverlay();
            }

            params.successCallback(rows, lastRow);

            _this.api.hideOverlay();

            if (_this.props.onLoadComplete) {
              _this.props.onLoadComplete();
            }
          })["catch"](function (error) {
            _this.api.hideOverlay();

            throw new Error(error);
          });
        }
      };

      _this.api.setDatasource(dataSource);
    };

    _this._onPageClick = function (pagination) {
      _this.onPageChange(pagination.page, pagination.pageSize);
    };

    _this._onPageSizeChange = function (pagination) {
      _this.onPageChange(1, pagination.pageSize);
    };

    _this._setStoreColumnState = function () {
      localStorage.setItem(_this.id, JSON.stringify(_this.columnApi.getColumnState()));
    };

    _this._getStoreColumnState = function () {
      var columnState = localStorage.getItem(_this.id);
      return columnState !== '' ? JSON.parse(columnState) : null;
    };

    _this.headerRef = _react["default"].createRef();
    var frameworkComponents = props.frameworkComponents,
        enableInfinite = props.enableInfinite,
        checkable = props.checkable,
        _radioable = props.radioable,
        _pageable = props.pageable,
        _pageSize = props.pageSize,
        rowModelTypeTemp = props.rowModelTypeTemp;
    _this.state = {
      currentPage: 1,
      totalCount: 0,
      filterCount: 0
    };
    _this.frameworkComponents = _extends({
      loadingOverlay: _LoadingOverlay["default"],
      noRowsOverlay: _NoRowsOverlay["default"],
      inputEditor: _editors.InputEditor,
      idInputEditor: _editors.IDInputEditor,
      passwordInputEditor: _editors.PasswordInputEditor,
      emailInputEditor: _editors.EmailInputEditor,
      ipInputEditor: _editors.IPInputEditor,
      numericInputEditor: _editors.NumericInputEditor,
      phoneInputEditor: _editors.PhoneInputEditor,
      selectEditor: _editors.SelectEditor,
      checkboxEditor: _editors.CheckboxEditor,
      inputNumberEditor: _editors.InputNumberEditor,
      inputEditorRenderer: _renderers.InputEditorRenderer,
      selectEditorRenderer: _renderers.SelectEditorRenderer,
      checkboxEditorRenderer: _renderers.CheckboxEditorRenderer,
      inputNumberEditorRenderer: _renderers.InputNumberEditorRenderer,
      linkRenderer: _renderers.LinkRenderer,
      routeLinkRenderer: _renderers.RouteLinkRenderer,
      checkboxRenderer: _renderers.CheckboxRenderer,
      switchRenderer: _renderers.SwitchRenderer,
      iconRenderer: _renderers.IconRenderer,
      buttonRenderer: _renderers.ButtonRenderer,
      dateRenderer: _renderers.DateRenderer,
      checkboxColumnHeader: _CheckboxColumnHeader["default"]
    }, frameworkComponents);
    var columnDefs = props.columnDefs ? props.columnDefs.map(function (col) {
      if (props.filterable === true && col.filter === false) {
        col.menuTabs = false;
      }

      col.headerTooltip = col.headerName;
      return col;
    }) : [];
    _this.columnDefs = checkable || _radioable ? [_CheckboxColumn["default"]].concat(_toConsumableArray(columnDefs)) : _toConsumableArray(columnDefs);

    if (_radioable) {
      _this.columnDefs[0].headerCheckboxSelection = false;
    }

    if (enableInfinite) {
      _this.rowModelType = 'infinite';
    } else if (_pageable) {
      _this.rowModelType = 'clientSide';
    } else {
      _this.rowModelType = 'clientSide';
    }

    if (rowModelTypeTemp === 'serverSide') {
      _this.rowModelType = 'serverSide';
    }

    _this.isResize = false;
    _this.currentPage = _this.state.currentPage;
    _this.pageSize = _pageSize;
    _this.gridRef = _react["default"].createRef();
    return _this;
  }

  _createClass(Grid, [{
    key: "componentDidMount",
    value: function componentDidMount() {
      window.addEventListener('resize', this.onResize);
    }
  }, {
    key: "render",
    value: function render() {
      var _this$props7 = this.props,
          id = _this$props7.id,
          className = _this$props7.className,
          theme = _this$props7.theme,
          columnDefs = _this$props7.columnDefs,
          header = _this$props7.header,
          footer = _this$props7.footer,
          footerExtraContent = _this$props7.footerExtraContent,
          displayTotalCountOnly = _this$props7.displayTotalCountOnly,
          items = _this$props7.items,
          hScrollBar = _this$props7.hScrollBar,
          width = _this$props7.width,
          height = _this$props7.height,
          enableInfinite = _this$props7.enableInfinite,
          checkable = _this$props7.checkable,
          radioable = _this$props7.radioable,
          pageable = _this$props7.pageable,
          pageSize = _this$props7.pageSize,
          pageGroupSize = _this$props7.pageGroupSize,
          edgePageGroupSize = _this$props7.edgePageGroupSize,
          rowSelection = _this$props7.rowSelection,
          suppressRowClickSelection = _this$props7.suppressRowClickSelection,
          rowModelType = _this$props7.rowModelType,
          filterable = _this$props7.filterable,
          resizable = _this$props7.resizable,
          sortable = _this$props7.sortable,
          showPageSizeAll = _this$props7.showPageSizeAll,
          frameworkComponents = _this$props7.frameworkComponents,
          sizeToFit = _this$props7.sizeToFit,
          headerHeight = _this$props7.headerHeight,
          rowIdKey = _this$props7.rowIdKey,
          rowHeight = _this$props7.rowHeight,
          gridOptions = _this$props7.gridOptions,
          defaultColDef = _this$props7.defaultColDef,
          rest = _objectWithoutProperties(_this$props7, ["id", "className", "theme", "columnDefs", "header", "footer", "footerExtraContent", "displayTotalCountOnly", "items", "hScrollBar", "width", "height", "enableInfinite", "checkable", "radioable", "pageable", "pageSize", "pageGroupSize", "edgePageGroupSize", "rowSelection", "suppressRowClickSelection", "rowModelType", "filterable", "resizable", "sortable", "showPageSizeAll", "frameworkComponents", "sizeToFit", "headerHeight", "rowIdKey", "rowHeight", "gridOptions", "defaultColDef"]);

      var _this$state = this.state,
          currentPage = _this$state.currentPage,
          totalCount = _this$state.totalCount,
          filterCount = _this$state.filterCount;
      var containerStyle = {
        width: width,
        height: height
      };

      if (containerStyle.height === '100%') {
        containerStyle.position = 'absolute';
      }

      var headerEl = header ? _react["default"].createElement(_Header["default"], _extends({
        ref: this.headerRef
      }, header)) : null;
      var getRowNodeId = rowIdKey ? function (data) {
        return data[rowIdKey];
      } : null;
      var paginationEl = pageable ? _react["default"].createElement(_Pagination["default"], {
        currentPage: currentPage,
        totalCount: totalCount,
        pageSize: pageSize,
        pageSizes: [50, 100, 200],
        pageGroupSize: pageGroupSize,
        edgePageGroupSize: edgePageGroupSize,
        showPageSizeAll: showPageSizeAll,
        displayTotalCountOnly: displayTotalCountOnly,
        onClick: this._onPageClick,
        onPageSizeChange: this._onPageSizeChange
      }) : _react["default"].createElement(_PageCountInfo["default"], {
        totalCount: totalCount,
        filterCount: filterCount < totalCount ? filterCount : 0
      });
      return _react["default"].createElement("div", {
        className: "ps-grid"
      }, headerEl, _react["default"].createElement("div", {
        className: "ps-grid-content"
      }, _react["default"].createElement("div", {
        className: (0, _classnames["default"])(theme, className, {
          'ps-grid-radio': radioable
        }, {
          'h-scoll-hidden': !hScrollBar
        }),
        style: containerStyle
      }, _react["default"].createElement(_agGridReact.AgGridReact, _extends({
        ref: this.gridRef,
        defaultColDef: _extends({
          resizable: resizable,
          sortable: sortable,
          menuTabs: filterable && ['filterMenuTab'],
          filter: filterable && 'agTextColumnFilter',
          filterParams: {
            suppressAndOrCondition: true
          },
          comparator: pageable === true ? function () {
            return 0;
          } : _comparator["default"]
        }, defaultColDef)
      }, rest, {
        headerHeight: headerHeight,
        rowHeight: rowHeight,
        columnDefs: this.columnDefs,
        rowModelType: this.rowModelType,
        rowSelection: checkable ? 'multiple' : rowSelection,
        suppressRowClickSelection: checkable || radioable ? true : suppressRowClickSelection,
        frameworkComponents: this.frameworkComponents,
        gridOptions: _extends({
          getRowNodeId: getRowNodeId
        }, gridOptions),
        onSelectionChanged: this.onSelectionChanged,
        onRowSelected: this.onRowSelected,
        onColumnVisible: this.onColumnVisible,
        onColumnResized: this.onColumnResized,
        onColumnEverythingChanged: this.onColumnEverythingChanged,
        onSortChanged: this.onSortChanged,
        onFilterChanged: this.onFilterChanged,
        onGridReady: this.onGridReady,
        onRowDataChanged: this.onRowDataChanged,
        onRowDataUpdated: this.onRowDataUpdated
      })))), typeof footer === 'undefined' ? _react["default"].createElement("div", {
        className: "ps-grid-footer"
      }, paginationEl, footerExtraContent) : footer);
    }
  }]);

  return Grid;
}(_react["default"].Component);

Grid.displayName = 'Grid';
Grid.propTypes = {
  className: _propTypes["default"].string,
  theme: _propTypes["default"].string,
  header: _propTypes["default"].shape({
    title: _propTypes["default"].oneOfType([_propTypes["default"].string, _propTypes["default"].element]),
    customButtons: _propTypes["default"].array,
    onAdd: _propTypes["default"].func,
    onRemove: _propTypes["default"].func,
    onCreate: _propTypes["default"].func,
    onExcel: _propTypes["default"].func,
    onRefresh: _propTypes["default"].func
  }),
  footer: _propTypes["default"].element,
  footerExtraContent: _propTypes["default"].element,
  hScrollBar: _propTypes["default"].oneOf([true, false]),
  width: _propTypes["default"].oneOfType([_propTypes["default"].string, _propTypes["default"].number]),
  height: _propTypes["default"].oneOfType([_propTypes["default"].string, _propTypes["default"].number]),
  checkable: _propTypes["default"].bool,
  radioable: _propTypes["default"].bool,
  pageable: _propTypes["default"].bool,
  pageSize: _propTypes["default"].number,
  pageGroupSize: _propTypes["default"].number,
  edgePageGroupSize: _propTypes["default"].number,
  filterable: _propTypes["default"].bool,
  resizable: _propTypes["default"].bool,
  sortable: _propTypes["default"].bool,
  request: _propTypes["default"].oneOfType([_propTypes["default"].func, _propTypes["default"].shape({
    headers: _propTypes["default"].object,
    url: _propTypes["default"].oneOfType([_propTypes["default"].string, _propTypes["default"].func]),
    method: _propTypes["default"].oneOf(['get', 'post', 'GET', 'POST']),
    params: _propTypes["default"].oneOfType([_propTypes["default"].object, _propTypes["default"].func]),
    responseType: _propTypes["default"].oneOf(['json', 'text'])
  })]),
  itemsKey: _propTypes["default"].string,
  totalCountKey: _propTypes["default"].string,
  rowIdKey: _propTypes["default"].string,
  sortModelKey: _propTypes["default"].string,
  items: _propTypes["default"].array,
  enableInfinite: _propTypes["default"].bool,
  sizeToFit: _propTypes["default"].bool,
  id: _propTypes["default"].string,
  useSetRowData: _propTypes["default"].bool,
  showPageSizeAll: _propTypes["default"].bool,
  displayTotalCountOnly: _propTypes["default"].bool,
  onPageChange: _propTypes["default"].func,
  onLoadComplete: _propTypes["default"].func,
  rowModelTypeTemp: _propTypes["default"].string
};
Grid.defaultProps = {
  columnDefs: [],
  theme: 'ag-theme-alpine',
  headerHeight: 40,
  rowHeight: 34,
  itemsKey: 'data',
  totalCountKey: 'meta.totalCount',
  sortModelKey: 'targetField',
  singleClickEdit: true,
  enableCellTextSelection: true,
  rowSelection: 'single',
  rowDeselection: true,
  suppressContextMenu: true,
  suppressLoadingOverlay: false,
  localeText: {
    noRowsToShow: (0, _i18n.translate)('uikit:kit.grid.no_rows_to_show'),
    equals: (0, _i18n.translate)('uikit:kit.grid.equals'),
    notEqual: (0, _i18n.translate)('uikit:kit.grid.not_equals'),
    lessThan: (0, _i18n.translate)('uikit:kit.grid.less_than'),
    greaterThan: (0, _i18n.translate)('uikit:kit.grid.greater_than'),
    lessThanOrEqual: (0, _i18n.translate)('uikit:kit.grid.less_than_or_equal'),
    greaterThanOrEqual: (0, _i18n.translate)('uikit:kit.grid.greater_than_or_equal'),
    inRange: (0, _i18n.translate)('uikit:kit.grid.in_range'),
    contains: (0, _i18n.translate)('uikit:kit.grid.contains'),
    notContains: (0, _i18n.translate)('uikit:kit.grid.not_contains'),
    startsWith: (0, _i18n.translate)('uikit:kit.grid.starts_with'),
    endsWith: (0, _i18n.translate)('uikit:kit.grid.ends_with')
  },
  cacheBlockSize: 100,
  cacheOverflowSize: 1,
  maxConcurrentDatasourceRequests: 1,
  maxBlocksInCache: 1,
  infiniteInitialRowCount: 1,
  loadingOverlayComponent: 'loadingOverlay',
  noRowsOverlayComponent: 'noRowsOverlay',
  hScrollBar: true,
  width: '100%',
  height: '100%',
  pageable: false,
  pageSize: 50,
  pageGroupSize: 9,
  edgePageGroupSize: 10,
  filterable: false,
  resizable: true,
  sortable: true,
  enableInfinite: false,
  sizeToFit: true,
  useSetRowData: false,
  displayTotalCountOnly: false,
  rowModelTypeTemp: 'clientSide'
};
var _default = Grid;
exports["default"] = _default;