@agilemotion/oui-react-js 0.1.0

package/dist/components/DataGrid.js

@@ -0,0 +1,1013 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.DataGrid = exports.MULTI_SELECT_CHECKBOX_COL_WIDTH = void 0;
+
+var _react = _interopRequireDefault(require("react"));
+
+var _styles = require("@material-ui/core/styles");
+
+var _reactSuperResponsiveTable = require("react-super-responsive-table");
+
+require("react-super-responsive-table/dist/SuperResponsiveTableStyle.css");
+
+var _Checkbox = _interopRequireDefault(require("@material-ui/core/Checkbox"));
+
+var _Utils = _interopRequireDefault(require("../Utils"));
+
+require("./DataGrid.css");
+
+var _RestUtils = require("../RestUtils");
+
+var _DataGridFilter = _interopRequireDefault(require("./DataGridFilter"));
+
+var _DataGridHeading = _interopRequireDefault(require("./DataGridHeading"));
+
+var _TableCellContent = _interopRequireDefault(require("./TableCellContent"));
+
+var _TablePagination = _interopRequireDefault(require("@material-ui/core/TablePagination"));
+
+var _colors = require("material-ui/styles/colors");
+
+var _Event = _interopRequireDefault(require("../event/Event"));
+
+var _Observable = _interopRequireDefault(require("../event/Observable"));
+
+var _EventType = _interopRequireDefault(require("../event/EventType"));
+
+var _Grid = _interopRequireDefault(require("@material-ui/core/Grid"));
+
+var _Button = _interopRequireDefault(require("@material-ui/core/Button"));
+
+var _mobx = require("mobx");
+
+var $ = _interopRequireWildcard(require("jquery"));
+
+var _Alert = _interopRequireDefault(require("react-bootstrap/Alert"));
+
+var _ApplicationContext = _interopRequireDefault(require("../ApplicationContext"));
+
+function _getRequireWildcardCache() { if (typeof WeakMap !== "function") return null; var cache = new WeakMap(); _getRequireWildcardCache = function _getRequireWildcardCache() { return cache; }; return cache; }
+
+function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+function _createForOfIteratorHelper(o, allowArrayLike) { var it; if (typeof Symbol === "undefined" || o[Symbol.iterator] == null) { if (Array.isArray(o) || (it = _unsupportedIterableToArray(o)) || allowArrayLike && o && typeof o.length === "number") { if (it) o = it; var i = 0; var F = function F() {}; return { s: F, n: function n() { if (i >= o.length) return { done: true }; return { done: false, value: o[i++] }; }, e: function e(_e2) { throw _e2; }, f: F }; } throw new TypeError("Invalid attempt to iterate non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); } var normalCompletion = true, didErr = false, err; return { s: function s() { it = o[Symbol.iterator](); }, n: function n() { var step = it.next(); normalCompletion = step.done; return step; }, e: function e(_e3) { didErr = true; err = _e3; }, f: function f() { try { if (!normalCompletion && it.return != null) it.return(); } finally { if (didErr) throw err; } } }; }
+
+function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
+
+function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure 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 _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 _iterableToArrayLimit(arr, i) { if (typeof Symbol === "undefined" || !(Symbol.iterator in Object(arr))) return; var _arr = []; var _n = true; var _d = false; var _e = undefined; try { for (var _i = arr[Symbol.iterator](), _s; !(_n = (_s = _i.next()).done); _n = true) { _arr.push(_s.value); if (i && _arr.length === i) break; } } catch (err) { _d = true; _e = err; } finally { try { if (!_n && _i["return"] != null) _i["return"](); } finally { if (_d) throw _e; } } return _arr; }
+
+function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
+
+const MULTI_SELECT_CHECKBOX_COL_WIDTH = 64;
+exports.MULTI_SELECT_CHECKBOX_COL_WIDTH = MULTI_SELECT_CHECKBOX_COL_WIDTH;
+
+function evaluateTableCellWidth(multiSelect, column, columnCount) {
+  let width = column.attributes['width'];
+  return multiSelect === true ? "calc(" + (typeof width !== 'undefined' ? width : 100 / columnCount + "%") + " - " + MULTI_SELECT_CHECKBOX_COL_WIDTH / columnCount + "px)" : typeof width !== 'undefined' ? width : 100 / columnCount + "%";
+}
+
+function desc(a, b, orderBy) {
+  if (b[orderBy] < a[orderBy]) {
+    return -1;
+  }
+
+  if (b[orderBy] > a[orderBy]) {
+    return 1;
+  }
+
+  return 0;
+}
+
+function stableSort(array, cmp) {
+  const stabilizedThis = array.map((el, index) => [el, index]);
+  stabilizedThis.sort((a, b) => {
+    const order = cmp(a[0], b[0]);
+    if (order !== 0) return order;
+    return a[1] - b[1];
+  });
+  return stabilizedThis.map(el => el[0]);
+}
+
+function getSorting(order, orderBy) {
+  return order === 'desc' ? (a, b) => desc(a, b, orderBy) : (a, b) => -desc(a, b, orderBy);
+}
+
+const useStyles = (0, _styles.makeStyles)(theme => ({
+  root: {
+    width: '100%',
+    marginTop: theme.spacing(3)
+  },
+  paper: {
+    width: '100%',
+    height: '100%',
+    position: 'relative',
+    zIndex: '0'
+  },
+  scrollPadding: {
+    padding: '8px !important'
+  },
+  noScrollPadding: {
+    padding: '0 !important',
+    width: '1px !important'
+  },
+  tableBody: {
+    display: 'block',
+    overflowY: 'auto'
+  },
+  tableSelected: {
+    backgroundColor: _colors.grey300,
+    "&:hover": {
+      background: "#f1f1f1"
+    }
+  },
+  tableRow: {
+    "&:hover": {
+      background: "#f1f1f1"
+    }
+  },
+  tableWrapper: {
+    height: '100%'
+  },
+  table: {
+    height: '100%'
+  },
+  visuallyHidden: {
+    border: 0,
+    clip: 'rect(0 0 0 0)',
+    height: 1,
+    margin: -1,
+    padding: 0,
+    position: 'absolute',
+    top: 20,
+    width: 1
+  }
+}));
+
+const DataGrid = /*#__PURE__*/_react.default.memo( /*#__PURE__*/_react.default.forwardRef((props, ref) => {
+  const classes = useStyles();
+
+  const _React$useState = _react.default.useState('desc'),
+        _React$useState2 = _slicedToArray(_React$useState, 2),
+        order = _React$useState2[0],
+        setOrder = _React$useState2[1];
+
+  const _React$useState3 = _react.default.useState(null),
+        _React$useState4 = _slicedToArray(_React$useState3, 2),
+        config = _React$useState4[0],
+        setConfig = _React$useState4[1];
+
+  const _React$useState5 = _react.default.useState('id'),
+        _React$useState6 = _slicedToArray(_React$useState5, 2),
+        orderBy = _React$useState6[0],
+        setOrderBy = _React$useState6[1];
+
+  const _React$useState7 = _react.default.useState([]),
+        _React$useState8 = _slicedToArray(_React$useState7, 2),
+        selected = _React$useState8[0],
+        setSelected = _React$useState8[1];
+
+  const _React$useState9 = _react.default.useState(0),
+        _React$useState10 = _slicedToArray(_React$useState9, 2),
+        totalNumberOfRows = _React$useState10[0],
+        setTotalNumberOfRows = _React$useState10[1];
+
+  const _React$useState11 = _react.default.useState({}),
+        _React$useState12 = _slicedToArray(_React$useState11, 1),
+        criteria = _React$useState12[0];
+
+  const _React$useState13 = _react.default.useState(0),
+        _React$useState14 = _slicedToArray(_React$useState13, 2),
+        page = _React$useState14[0],
+        setPage = _React$useState14[1];
+
+  const _React$useState15 = _react.default.useState(!_Utils.default.isNull(props.rows) ? props.rows : []),
+        _React$useState16 = _slicedToArray(_React$useState15, 2),
+        rows = _React$useState16[0],
+        setRows = _React$useState16[1];
+
+  const _React$useState17 = _react.default.useState([]),
+        _React$useState18 = _slicedToArray(_React$useState17, 2),
+        deletedRows = _React$useState18[0],
+        setDeletedRows = _React$useState18[1];
+
+  const _React$useState19 = _react.default.useState(false),
+        _React$useState20 = _slicedToArray(_React$useState19, 2),
+        editable = _React$useState20[0],
+        setEditable = _React$useState20[1];
+
+  const _React$useState21 = _react.default.useState(0),
+        _React$useState22 = _slicedToArray(_React$useState21, 2),
+        scrollWidth = _React$useState22[0],
+        setScrollWidth = _React$useState22[1];
+
+  const _React$useState23 = _react.default.useState([15, 30, 45, 60, 75]),
+        _React$useState24 = _slicedToArray(_React$useState23, 1),
+        rowsPerPageOptions = _React$useState24[0];
+
+  const _React$useState25 = _react.default.useState(props.config.pageSize),
+        _React$useState26 = _slicedToArray(_React$useState25, 2),
+        rowsPerPage = _React$useState26[0],
+        setRowsPerPage = _React$useState26[1];
+
+  const _React$useState27 = _react.default.useState([]),
+        _React$useState28 = _slicedToArray(_React$useState27, 1),
+        cells = _React$useState28[0];
+
+  const actionsToolbar = props.actionsToolbar;
+
+  const _React$useState29 = _react.default.useState({}),
+        _React$useState30 = _slicedToArray(_React$useState29, 1),
+        headingHandle = _React$useState30[0];
+
+  const _React$useState31 = _react.default.useState({}),
+        _React$useState32 = _slicedToArray(_React$useState31, 1),
+        filterHandle = _React$useState32[0];
+
+  const rowCount = _react.default.useRef(-1);
+
+  const loadingRef = _react.default.useRef(true);
+
+  let noteKey = 0;
+
+  const api = () => {
+    return {
+      get id() {
+        return props.config.id;
+      },
+
+      get criteria() {
+        criteria.parameters = isFilterable() ? filterHandle.api.getParameters() : [];
+        criteria.pageSize = rowsPerPage;
+        return criteria;
+      },
+
+      get selection() {
+        let selectedRows = [];
+
+        for (let i = 0; i < selected.length; i++) {
+          for (let j = 0; j < rows.length; j++) {
+            if (selected[i] === rows[j].id) {
+              selectedRows.push(rows[j]);
+            }
+          }
+        }
+
+        return selectedRows;
+      },
+
+      get columnDataBindings() {
+        let columnNames = [];
+
+        for (let i = 0; i < config.columns.length; i++) {
+          let column = config.columns[i];
+          columnNames.push(!_Utils.default.isNull(column.dataBinding) ? column.dataBinding : column.id);
+        }
+
+        return columnNames;
+      },
+
+      getChildren: () => {
+        if (!_Utils.default.isNull(headingHandle.api)) {
+          return headingHandle.api.getChildren();
+        }
+      },
+      loadData: actionConfig => {
+        _search();
+      },
+      deleteSelectedRows: () => {
+        // TODO : dispose from observer
+        let newRows = rows.filter(row => {
+          return !isSelected(row.id);
+        });
+        setDeletedRows(getSelectedRows(selected));
+        rows.splice(0, rows.length);
+
+        var _iterator = _createForOfIteratorHelper(newRows),
+            _step;
+
+        try {
+          for (_iterator.s(); !(_step = _iterator.n()).done;) {
+            const newRow = _step.value;
+            rows.push(newRow);
+          }
+        } catch (err) {
+          _iterator.e(err);
+        } finally {
+          _iterator.f();
+        }
+
+        setSelected([]);
+
+        if (!_Utils.default.isNull(props.onSelectionChange)) {
+          props.onSelectionChange([]);
+        }
+
+        updateScrollBarPadding();
+        rowCount.current = rows.length;
+        valueChangeCallback(rows);
+        return rows;
+      },
+      clear: () => {
+        // TODO : dispose from observer
+        setRows([]);
+      },
+      addRows: newRows => {
+        var _iterator2 = _createForOfIteratorHelper(newRows),
+            _step2;
+
+        try {
+          for (_iterator2.s(); !(_step2 = _iterator2.n()).done;) {
+            const newRow = _step2.value;
+            rows.push(observeRow(newRow));
+          }
+        } catch (err) {
+          _iterator2.e(err);
+        } finally {
+          _iterator2.f();
+        }
+
+        let newSelection = [];
+
+        var _iterator3 = _createForOfIteratorHelper(newRows),
+            _step3;
+
+        try {
+          for (_iterator3.s(); !(_step3 = _iterator3.n()).done;) {
+            const newRow = _step3.value;
+            newSelection.push(newRow.id);
+          }
+        } catch (err) {
+          _iterator3.e(err);
+        } finally {
+          _iterator3.f();
+        }
+
+        setSelected(newSelection);
+
+        if (!_Utils.default.isNull(props.onSelectionChange)) {
+          props.onSelectionChange(newRows);
+        }
+
+        updateScrollBarPadding();
+        rowCount.current = rows.length;
+        valueChangeCallback(rows);
+        return rows;
+      },
+
+      get numberOfPages() {
+        return totalNumberOfRows / rowsPerPage;
+      },
+
+      get rows() {
+        return rows;
+      },
+
+      search: () => {
+        _search();
+      }
+    };
+  };
+
+  function updateScrollBarPadding() {
+    var tbody = document.getElementById('mainTableBody');
+
+    if (tbody !== null && typeof tbody !== 'undefined') {
+      setScrollWidth(tbody.offsetWidth - tbody.clientWidth);
+    }
+  }
+
+  window.onresize = function onresize() {
+    updateScrollBarPadding();
+  };
+
+  const handleRequestSort = (event, property) => {
+    const isDesc = orderBy === property && order === 'desc';
+    setOrder(isDesc ? 'asc' : 'desc');
+    setOrderBy(property);
+  };
+
+  function handleSelectAllClick(event) {
+    if (event.target.checked) {
+      const newSelecteds = rows.map(n => n.name);
+      setSelected(newSelecteds);
+      props.onSelectionChange(newSelecteds);
+    } else {
+      setSelected([]);
+      props.onSelectionChange([]);
+    }
+
+    _ApplicationContext.default.enableFormMarkers(true);
+  }
+
+  function getSelectedRows(selected) {
+    let selectedRows = [];
+
+    for (var i = 0; i < rows.length; i++) {
+      let row = rows[i];
+
+      for (var j = 0; j < selected.length; j++) {
+        if (row.id === selected[j]) {
+          selectedRows.push(row);
+        }
+      }
+    }
+
+    return selectedRows;
+  }
+
+  function doHandleClick(event, id) {
+    _ApplicationContext.default.enableFormMarkers(true);
+
+    const selectedIndex = -1;
+    selected.indexOf(id);
+    let newSelected = [];
+
+    if (props.multiSelect === true) {
+      if (selectedIndex === -1) {
+        newSelected = newSelected.concat(selected, id);
+      } else if (selectedIndex === 0) {
+        newSelected = newSelected.concat(selected.slice(1));
+      } else if (selectedIndex === selected.length - 1) {
+        newSelected = newSelected.concat(selected.slice(0, -1));
+      } else if (selectedIndex > 0) {
+        newSelected = newSelected.concat(selected.slice(0, selectedIndex), selected.slice(selectedIndex + 1));
+      }
+    } else {
+      newSelected.push(id);
+    }
+
+    let selectedRows = getSelectedRows(newSelected);
+    setSelected(newSelected);
+
+    if (!_Utils.default.isNull(props.onSelectionChange)) {
+      props.onSelectionChange(selectedRows);
+    }
+  }
+
+  function fireSelectionEvent() {
+    if (!_Utils.default.isNull(config) && (!_Utils.default.isNull(headingHandle) || config.gridType === 'TILE')) {
+      let event = new _Event.default(props.handle, props.viewId, getSelectedRows(selected));
+
+      _Observable.default.fireEvent(_EventType.default.SELECTION_CHANGE, event);
+    }
+  }
+
+  function handleClick(event, id) {
+    if (!_Utils.default.isNull(props.onCellSelectionChange)) {
+      return;
+    }
+
+    doHandleClick(event, id);
+  }
+
+  function handleCellClick(event, id, column) {
+    if (column.fieldType !== "document") {
+      // TODO : Evaluate if this call is necessary
+      doHandleClick(event, id);
+    }
+
+    if (!_Utils.default.isNull(props.onCellSelectionChange)) {
+      props.onCellSelectionChange(id, column);
+    }
+  }
+
+  function handleChangePage(event, newPage) {
+    criteria.currentPage = newPage + 1;
+    setPage(newPage);
+
+    _search();
+  }
+
+  function handleChangeRowsPerPage(event) {
+    setRowsPerPage(rowsPerPage => event.target.value);
+    setPage(0);
+  }
+
+  const observeRow = row => {
+    let observableRow = (0, _mobx.observable)(row);
+    (0, _mobx.observe)(observableRow, change => {
+      let newValue = change.newValue;
+      let oldValue = change.oldValue;
+
+      if (newValue !== oldValue) {
+        refreshCell(row.id, change.name);
+      }
+    });
+    return observableRow;
+  };
+
+  function processData(data, conf) {
+    setTotalNumberOfRows(data.totalNumberOfRecords);
+    let tableRows = [];
+    let records = data.records;
+
+    for (let i = 0; i < records.length; i++) {
+      if (!_Utils.default.isNull(records[i].map)) {
+        tableRows.push(observeRow(records[i].map));
+      } else {
+        tableRows.push(observeRow(records[i]));
+      }
+    }
+
+    setRows(tableRows);
+  }
+
+  const _search = () => {
+    let conf = config;
+
+    if (_Utils.default.isNull(conf)) {
+      conf = _Utils.default.parseConfig(props.config, props.viewId);
+    }
+
+    if (!_Utils.default.isNull(conf.dataService)) {
+      let method = conf.dataService.type === 'remoteObjectProxy' ? _RestUtils.invokeRpc : _RestUtils.invokeRest;
+      method(conf.dataService, props.handle, props.viewId, result => {
+        let data = conf.dataService.type === 'remoteObjectProxy' ? result.data : result;
+        processData(data, conf);
+      }, e => {
+        console.error(e);
+
+        _Utils.default.publishSystemErrorMessage(props.viewId);
+      });
+    } else {
+      props.loadCompleteHandler(conf.id);
+    }
+  };
+
+  _react.default.useEffect(() => {
+    if (!_Utils.default.isNull(config)) {
+      criteria.currentPage = 1;
+
+      _search();
+    }
+  }, [rowsPerPage]);
+
+  _react.default.useEffect(() => {
+    props.handle.api = api();
+
+    if (_Utils.default.isNull(config)) {
+      let parsedConfig = _Utils.default.parseConfig(props.config, props.viewId);
+
+      setConfig(parsedConfig);
+      let eventHandlingConfig = _Utils.default.isNull(parsedConfig.eventHandlingConfig) ? {} : parsedConfig.eventHandlingConfig;
+      eventHandlingConfig.subscriptions = _Utils.default.isNull(eventHandlingConfig.subscriptions) ? [] : eventHandlingConfig.subscriptions;
+
+      let autoLoadData = _Utils.default.getComponentAttribute(parsedConfig, 'autoLoadData', null);
+
+      if (autoLoadData === null || autoLoadData === true) {
+        let subscription = {
+          publisher: props.viewId,
+          eventType: _EventType.default.COMPONENT_LOAD,
+          actions: [{
+            actionType: "loadData"
+          }]
+        };
+        eventHandlingConfig.subscriptions.push(subscription);
+      }
+
+      _Observable.default.addSubscriptions(eventHandlingConfig, props.handle, props.viewId);
+
+      _Observable.default.addSystemSubscriptions(parsedConfig);
+
+      let isEditable = false;
+
+      for (let i = 0; i < parsedConfig.columns.length; i++) {
+        let column = parsedConfig.columns[i];
+
+        if (!isEditable && column.attributes['editable'] === true) {
+          isEditable = true;
+          setEditable(true);
+        }
+
+        column.width = evaluateTableCellWidth(props.selectionMode === 'MULTIPLE', column, parsedConfig.columns.length);
+
+        if (!_Utils.default.isNull(column.attributes) && column.attributes['editable'] === true && _Utils.default.isNull(column.editor)) {
+          let defaultEditor = {};
+          defaultEditor.fieldType = 'TEXT_FIELD';
+          defaultEditor.id = column.id + 'Editor';
+          column.editor = defaultEditor;
+        }
+      }
+    }
+  });
+
+  _react.default.useEffect(() => {
+    if (!_Utils.default.isNull(config)) {
+      criteria.currentPage = 1;
+      criteria.dataQueryName = config.dataQueryName;
+
+      if (!_Utils.default.isNull(props.loadCompleteHandler) && loadingRef.current === true) {
+        props.loadCompleteHandler(config.id);
+      }
+    }
+  }, [config]);
+
+  _react.default.useEffect(() => {
+    if (!_Utils.default.isNull(props.data)) {
+      let conf = config;
+
+      if (_Utils.default.isNull(conf)) {
+        conf = _Utils.default.parseConfig(props.config, props.viewId);
+      }
+
+      processData(props.data, conf);
+    }
+  }, [props.data]);
+
+  function addRowFocusListener(row) {
+    $("#ROW-" + row.id).focusout(function () {
+      let newSelected = [];
+
+      var _iterator4 = _createForOfIteratorHelper(selected),
+          _step4;
+
+      try {
+        for (_iterator4.s(); !(_step4 = _iterator4.n()).done;) {
+          const selectedElement = _step4.value;
+
+          if (selectedElement !== row.id) {
+            newSelected.push(selectedElement);
+          }
+        }
+      } catch (err) {
+        _iterator4.e(err);
+      } finally {
+        _iterator4.f();
+      }
+
+      setSelected(newSelected);
+    });
+  }
+
+  _react.default.useEffect(() => {
+    if (editable) {
+      var _iterator5 = _createForOfIteratorHelper(rows),
+          _step5;
+
+      try {
+        for (_iterator5.s(); !(_step5 = _iterator5.n()).done;) {// TODO : Fix the focus loss behavior
+          //addRowFocusListener(row);
+
+          const row = _step5.value;
+        }
+      } catch (err) {
+        _iterator5.e(err);
+      } finally {
+        _iterator5.f();
+      }
+    }
+  });
+
+  _react.default.useEffect(() => {
+    updateScrollBarPadding();
+
+    _Observable.default.processSystemGeneratedSubscriptions(props.config.id);
+
+    rowCount.current = rows.length;
+  }, [rows]);
+
+  _react.default.useEffect(() => {
+    if (!_Utils.default.isNull(deletedRows) && deletedRows.length > 0) {
+      let event = new _Event.default(props.handle, props.viewId, deletedRows);
+
+      _Observable.default.fireEvent(_EventType.default.ROW_DELETED, event);
+
+      setDeletedRows(null);
+    }
+
+    rowCount.current = rows.length;
+  }, [deletedRows]);
+
+  _react.default.useEffect(() => {
+    if (!_Utils.default.isNull(props.rows)) {
+      let rowValues = [];
+
+      var _iterator6 = _createForOfIteratorHelper(props.rows),
+          _step6;
+
+      try {
+        for (_iterator6.s(); !(_step6 = _iterator6.n()).done;) {
+          const row = _step6.value;
+          rowValues.push(observeRow(row));
+        }
+      } catch (err) {
+        _iterator6.e(err);
+      } finally {
+        _iterator6.f();
+      }
+
+      setRows(rowValues);
+    }
+  }, [props.rows]);
+
+  _react.default.useEffect(() => {
+    fireSelectionEvent();
+  }, [selected]);
+
+  const isSelected = id => selected.indexOf(id) !== -1;
+
+  const editorChangeHandler = (rowId, field, value) => {
+    var _iterator7 = _createForOfIteratorHelper(rows),
+        _step7;
+
+    try {
+      for (_iterator7.s(); !(_step7 = _iterator7.n()).done;) {
+        const row = _step7.value;
+
+        if (row.id === rowId) {
+          row[field] = value;
+          break;
+        }
+      }
+    } catch (err) {
+      _iterator7.e(err);
+    } finally {
+      _iterator7.f();
+    }
+
+    valueChangeCallback(rows);
+  };
+
+  const isFilterable = () => {
+    for (let i = 0; i < props.config.columns.length; i++) {
+      let column = props.config.columns[i];
+
+      if (column.attributes['filterable'] === true) {
+        return true;
+      }
+    }
+
+    return false;
+  };
+
+  const createCell = (row, columnName, cellHandle) => {
+    let rowCells = null;
+
+    var _iterator8 = _createForOfIteratorHelper(cells),
+        _step8;
+
+    try {
+      for (_iterator8.s(); !(_step8 = _iterator8.n()).done;) {
+        const cellsEntry = _step8.value;
+
+        if (cellsEntry.rowId === row.id) {
+          rowCells = cellsEntry;
+          break;
+        }
+      }
+    } catch (err) {
+      _iterator8.e(err);
+    } finally {
+      _iterator8.f();
+    }
+
+    if (_Utils.default.isNull(rowCells) || rowCells.length === 0) {
+      rowCells = {};
+      rowCells.rowId = row.id;
+      cells.push(rowCells);
+    }
+
+    rowCells[columnName] = cellHandle;
+  };
+
+  const refreshCell = (rowId, columnName) => {
+    let rowCells = null;
+
+    var _iterator9 = _createForOfIteratorHelper(cells),
+        _step9;
+
+    try {
+      for (_iterator9.s(); !(_step9 = _iterator9.n()).done;) {
+        const cell = _step9.value;
+
+        if (cell.rowId === rowId) {
+          rowCells = cell;
+          break;
+        }
+      }
+    } catch (err) {
+      _iterator9.e(err);
+    } finally {
+      _iterator9.f();
+    }
+
+    if (!_Utils.default.isNull(rowCells)) {
+      let cell = rowCells[columnName];
+
+      if (!_Utils.default.isNull(cell)) {
+        cell.api.refresh();
+      }
+    }
+  };
+
+  const valueChangeCallback = valueRows => {
+    if (!_Utils.default.isNull(props.valueChangeHandler)) {
+      let invalidRows = valueRows.filter(row => {
+        return !_Utils.default.isNull(row.errors) && row.errors.length > 0;
+      });
+
+      if (invalidRows.length > 0) {
+        props.valueChangeHandler(null);
+      } else {
+        props.valueChangeHandler(valueRows);
+      }
+    }
+  };
+
+  function getTileLabel(row) {
+    let counter = 0;
+    return /*#__PURE__*/_react.default.createElement("span", null, config.columns.map(column => !column.attributes.hidden ? /*#__PURE__*/_react.default.createElement("span", {
+      key: counter++
+    }, row[!_Utils.default.isNull(column.dataBinding) ? column.dataBinding : column.id], /*#__PURE__*/_react.default.createElement("br", null)) : null));
+  }
+
+  function renderTile(row, key) {
+    return /*#__PURE__*/_react.default.createElement(_Grid.default, {
+      item: true,
+      xs: true,
+      style: {
+        height: '200px',
+        minWidth: '200px'
+      },
+      key: key
+    }, /*#__PURE__*/_react.default.createElement(_Button.default, {
+      variant: "contained",
+      color: "secondary",
+      style: {
+        width: '100%',
+        height: '100%'
+      },
+      onClick: event => doHandleClick(event, row.id)
+    }, getTileLabel(row)));
+  }
+
+  function renderTiles() {
+    return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, stableSort(rows, getSorting(order, orderBy)).map((row, index) => {
+      const isItemSelected = isSelected(row.id);
+      const labelId = "enhanced-table-checkbox-".concat(index);
+      row.index = index;
+      return renderTile(row, index);
+    }));
+  }
+
+  return /*#__PURE__*/_react.default.createElement("div", {
+    ref: ref,
+    style: (_Utils.default.isNull(props.hasBorder) || props.hasBorder === true) && !_Utils.default.isNull(config) ? {
+      margin: '32px',
+      border: '1px solid #e2e2e2',
+      borderRadius: '4px'
+    } : props.style
+  }, !_Utils.default.isNull(props.config.notes) ? props.config.notes.map(note => {
+    return /*#__PURE__*/_react.default.createElement("div", {
+      key: noteKey++
+    }, /*#__PURE__*/_react.default.createElement(_Alert.default, {
+      variant: note.messageType === 'WARN' ? 'warning' : note.messageType === 'INFO' ? '' : 'danger',
+      show: true
+    }, /*#__PURE__*/_react.default.createElement("p", {
+      style: {
+        color: 'rgba(255, 255, 255, 0.8)'
+      }
+    }, note.message)));
+  }) : null, rowsPerPageOptions.includes(props.config.pageSize) && !_Utils.default.isNull(config) ? config.gridType === 'TILE' ? /*#__PURE__*/_react.default.createElement("div", {
+    style: {
+      margin: "0 0 8px 8px"
+    }
+  }, /*#__PURE__*/_react.default.createElement("div", null, isFilterable() ? /*#__PURE__*/_react.default.createElement(_DataGridFilter.default, {
+    ref: /*#__PURE__*/_react.default.createRef(),
+    handle: filterHandle,
+    config: props.config,
+    filterWrapperClass: props.filterWrapperClass,
+    scrollWidth: scrollWidth,
+    onFilterSubmit: _search,
+    onRequestSort: handleRequestSort
+  }) : null), /*#__PURE__*/_react.default.createElement("div", {
+    className: classes.root
+  }, /*#__PURE__*/_react.default.createElement(_Grid.default, {
+    container: true,
+    spacing: 1
+  }, /*#__PURE__*/_react.default.createElement(_Grid.default, {
+    container: true,
+    item: true,
+    xs: 12,
+    spacing: 1
+  }, renderTiles())))) : /*#__PURE__*/_react.default.createElement("div", null, /*#__PURE__*/_react.default.createElement("div", {
+    className: "responsive-table",
+    style: {
+      height: props.height
+    }
+  }, /*#__PURE__*/_react.default.createElement(_reactSuperResponsiveTable.Table, {
+    className: "ouiTable",
+    cellSpacing: "0",
+    "aria-labelledby": "tableTitle",
+    style: {
+      width: '100%'
+    }
+  }, isFilterable() ? /*#__PURE__*/_react.default.createElement(_DataGridFilter.default, {
+    handle: filterHandle,
+    ref: /*#__PURE__*/_react.default.createRef(),
+    config: config,
+    filterWrapperClass: props.filterWrapperClass,
+    scrollWidth: scrollWidth,
+    onFilterSubmit: _search,
+    onRequestSort: handleRequestSort
+  }) : null, /*#__PURE__*/_react.default.createElement(_DataGridHeading.default, {
+    ref: /*#__PURE__*/_react.default.createRef(),
+    handle: headingHandle,
+    config: config,
+    numSelected: selected.length,
+    scrollWidth: scrollWidth,
+    onSelectAllClick: handleSelectAllClick,
+    onRequestSort: handleRequestSort,
+    rowCount: totalNumberOfRows
+  }), /*#__PURE__*/_react.default.createElement(_reactSuperResponsiveTable.Tbody, {
+    className: classes.tableBody,
+    style: {
+      maxHeight: _Utils.default.isNull(props.bodyMaxHeight) ? props.bodyMaxHeight : "42vh"
+    },
+    id: "mainTableBody"
+  }, stableSort(rows, getSorting(order, orderBy)).map((row, index) => {
+    const isItemSelected = isSelected(row.id);
+    const labelId = "enhanced-table-checkbox-".concat(index);
+    row.index = index;
+    let counter = 0;
+    return /*#__PURE__*/_react.default.createElement(_reactSuperResponsiveTable.Tr, {
+      style: {
+        display: 'flex',
+        flexWrap: 'wrap'
+      },
+      onClick: event => handleClick(event, row.id),
+      role: "checkbox",
+      "aria-checked": isItemSelected,
+      tabIndex: -1,
+      key: row.id,
+      id: 'ROW-' + row.id,
+      selected: isItemSelected,
+      className: isItemSelected ? classes.tableSelected : classes.tableRow
+    }, config.selectionMode === 'MULTIPLE' ? /*#__PURE__*/_react.default.createElement(_reactSuperResponsiveTable.Td, {
+      padding: "checkbox",
+      width: MULTI_SELECT_CHECKBOX_COL_WIDTH + "px",
+      className: "selectCell"
+    }, /*#__PURE__*/_react.default.createElement(_Checkbox.default, {
+      checked: isItemSelected,
+      inputProps: {
+        'aria-labelledby': labelId
+      }
+    })) : null, config.columns.map(column => column.attributes['hidden'] === true ? null : counter++ === config.columns.length - 1 && actionsToolbar !== null && typeof actionsToolbar !== "undefined" ? /*#__PURE__*/_react.default.createElement(_reactSuperResponsiveTable.Td, {
+      style: {
+        width: column.width
+      },
+      align: "left",
+      className: isItemSelected && !_Utils.default.isNull(props.form) && !_Utils.default.isNull(column.editor) ? "editCell" : null,
+      key: column.id
+    }, "Row action toolbar not supported") : /*#__PURE__*/_react.default.createElement(_reactSuperResponsiveTable.Td, {
+      style: {
+        width: column.width
+      },
+      align: "left",
+      className: isItemSelected && !_Utils.default.isNull(props.form) && !_Utils.default.isNull(column.editor) ? "editCell" : null,
+      key: column.id,
+      onClick: event => handleCellClick(event, row.id, column)
+    }, /*#__PURE__*/_react.default.createElement(_TableCellContent.default, {
+      viewId: props.viewId,
+      form: props.form,
+      formValues: props.formValues,
+      editor: column.editor,
+      ref: /*#__PURE__*/_react.default.createRef(),
+      refCallback: createCell,
+      selected: isItemSelected,
+      validator: column.validator,
+      valueChangeHandler: editorChangeHandler,
+      columnConfig: column,
+      dataBinding: !_Utils.default.isNull(column.dataBinding) ? column.dataBinding : column.id,
+      row: row,
+      contentType: column.fieldType
+    }))));
+  })))), _Utils.default.isNull(props.pagination) || props.pagination === true ? /*#__PURE__*/_react.default.createElement(_TablePagination.default, {
+    rowsPerPageOptions: rowsPerPageOptions,
+    component: "div",
+    count: totalNumberOfRows,
+    rowsPerPage: rowsPerPage,
+    page: page,
+    backIconButtonProps: {
+      'aria-label': 'previous page'
+    },
+    nextIconButtonProps: {
+      'aria-label': 'next page'
+    },
+    onChangePage: handleChangePage,
+    onChangeRowsPerPage: handleChangeRowsPerPage
+  }) : null) : null);
+}));
+
+exports.DataGrid = DataGrid;