@agilemotion/oui-react-js 1.3.0 → 1.3.2

package/dist/components/signatures/ResponsiveTable.js

@@ -0,0 +1,568 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = EnhancedTable;
+
+var _react = _interopRequireDefault(require("react"));
+
+var _propTypes = _interopRequireDefault(require("prop-types"));
+
+var _styles = require("@material-ui/core/styles");
+
+var _reactSuperResponsiveTable = require("react-super-responsive-table");
+
+require("react-super-responsive-table/dist/SuperResponsiveTableStyle.css");
+
+var _TablePagination = _interopRequireDefault(require("@material-ui/core/TablePagination"));
+
+var _TableSortLabel = _interopRequireDefault(require("@material-ui/core/TableSortLabel"));
+
+var _Toolbar = _interopRequireDefault(require("./Toolbar"));
+
+var _Paper = _interopRequireDefault(require("@material-ui/core/Paper"));
+
+var _Checkbox = _interopRequireDefault(require("@material-ui/core/Checkbox"));
+
+var _ViewUtils = _interopRequireDefault(require("./ViewUtils"));
+
+require("./ResponsiveTable.css");
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+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 utils = new _ViewUtils.default();
+const MULTI_SELECT_CHECKBOX_COL_WIDTH = 64;
+
+function evaluateTableCellWidth(multiSelect, headCell, headCellCount) {
+  return multiSelect === true ? "calc(" + (typeof headCell.widthRatio !== 'undefined' ? 100 * headCell.widthRatio + "%" : 100 / headCellCount + "%") + " - " + MULTI_SELECT_CHECKBOX_COL_WIDTH / headCellCount + "px)" : typeof headCell.widthRatio !== 'undefined' ? 100 * headCell.widthRatio + "%" : 100 / headCellCount + "%";
+}
+
+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);
+}
+
+function EnhancedTableHead(props) {
+  const classes = props.classes,
+        onSelectAllClick = props.onSelectAllClick,
+        order = props.order,
+        orderBy = props.orderBy,
+        numSelected = props.numSelected,
+        rowCount = props.rowCount,
+        onRequestSort = props.onRequestSort,
+        headCells = props.headCells;
+
+  const createSortHandler = property => event => {
+    onRequestSort(event, property);
+  };
+
+  return /*#__PURE__*/_react.default.createElement(_reactSuperResponsiveTable.Thead, {
+    className: classes.tableHead,
+    style: {
+      width: "calc(100% - " + props.scrollWidth + "px)"
+    }
+  }, /*#__PURE__*/_react.default.createElement(_reactSuperResponsiveTable.Tr, {
+    style: {
+      display: 'flex',
+      flexWrap: 'wrap'
+    }
+  }, props.multiSelect === true ? /*#__PURE__*/_react.default.createElement(_reactSuperResponsiveTable.Th, {
+    padding: "checkbox",
+    width: MULTI_SELECT_CHECKBOX_COL_WIDTH + "px",
+    className: "selectCell"
+  }, /*#__PURE__*/_react.default.createElement(_Checkbox.default, {
+    indeterminate: numSelected > 0 && numSelected < rowCount,
+    checked: numSelected === rowCount,
+    onChange: onSelectAllClick,
+    inputProps: {
+      'aria-label': 'select all'
+    }
+  })) : null, headCells.map(headCell => /*#__PURE__*/_react.default.createElement(_reactSuperResponsiveTable.Th, {
+    key: headCell.id,
+    align: headCell.numeric === true ? 'right' : 'left',
+    padding: headCell.disablePadding ? 'none' : 'default',
+    sortDirection: orderBy === headCell.id ? order : false,
+    className: classes.tableHeaderCell,
+    style: {
+      width: headCell.width
+    }
+  }, /*#__PURE__*/_react.default.createElement(_TableSortLabel.default, {
+    active: orderBy === headCell.id,
+    direction: order,
+    onClick: createSortHandler(headCell.id)
+  }, headCell.label, orderBy === headCell.id ? /*#__PURE__*/_react.default.createElement("span", {
+    className: classes.visuallyHidden
+  }, order === 'desc' ? 'sorted descending' : 'sorted ascending') : null)))));
+}
+
+EnhancedTableHead.propTypes = {
+  classes: _propTypes.default.object.isRequired,
+  numSelected: _propTypes.default.number.isRequired,
+  onRequestSort: _propTypes.default.func.isRequired,
+  onSelectAllClick: _propTypes.default.func.isRequired,
+  order: _propTypes.default.oneOf(['asc', 'desc']).isRequired,
+  orderBy: _propTypes.default.string.isRequired,
+  rowCount: _propTypes.default.number.isRequired
+};
+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'
+  },
+  tableHeaderCell: {
+    overflow: 'inherit',
+    textAlign: 'left !important'
+  },
+  tableHead: {
+    fontSize: '14px !important',
+    display: 'block',
+    overflow: 'inherit'
+  },
+  tableSelected: {
+    backgroundColor: '#e1e1e1'
+  },
+  tableRow: {},
+  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
+  }
+}));
+
+function EnhancedTable(props) {
+  const utils = new _ViewUtils.default();
+  const classes = useStyles();
+
+  const _React$useState = _react.default.useState('asc'),
+        _React$useState2 = _slicedToArray(_React$useState, 2),
+        order = _React$useState2[0],
+        setOrder = _React$useState2[1];
+
+  const _React$useState3 = _react.default.useState('id'),
+        _React$useState4 = _slicedToArray(_React$useState3, 2),
+        orderBy = _React$useState4[0],
+        setOrderBy = _React$useState4[1];
+
+  const _React$useState5 = _react.default.useState([]),
+        _React$useState6 = _slicedToArray(_React$useState5, 2),
+        selected = _React$useState6[0],
+        setSelected = _React$useState6[1];
+
+  const _React$useState7 = _react.default.useState(0),
+        _React$useState8 = _slicedToArray(_React$useState7, 2),
+        totalNumberOfRows = _React$useState8[0],
+        setTotalNumberOfRows = _React$useState8[1];
+
+  const _React$useState9 = _react.default.useState(""),
+        _React$useState10 = _slicedToArray(_React$useState9, 2),
+        selectedRow = _React$useState10[0],
+        setSelectedRow = _React$useState10[1];
+
+  const _React$useState11 = _react.default.useState(0),
+        _React$useState12 = _slicedToArray(_React$useState11, 2),
+        page = _React$useState12[0],
+        setPage = _React$useState12[1];
+
+  const _React$useState13 = _react.default.useState(!utils.isNull(props.rows) ? props.rows : []),
+        _React$useState14 = _slicedToArray(_React$useState13, 2),
+        rows = _React$useState14[0],
+        setRows = _React$useState14[1];
+
+  const _React$useState15 = _react.default.useState(0),
+        _React$useState16 = _slicedToArray(_React$useState15, 2),
+        scrollWidth = _React$useState16[0],
+        setScrollWidth = _React$useState16[1];
+
+  const _React$useState17 = _react.default.useState(true),
+        _React$useState18 = _slicedToArray(_React$useState17, 2),
+        dense = _React$useState18[0],
+        setDense = _React$useState18[1];
+
+  const _React$useState19 = _react.default.useState(utils.isNull(props.autoFetchData) || props.autoFetchData === true),
+        _React$useState20 = _slicedToArray(_React$useState19, 2),
+        fetchEnabled = _React$useState20[0],
+        setFetchEnabled = _React$useState20[1];
+
+  const _React$useState21 = _react.default.useState(10),
+        _React$useState22 = _slicedToArray(_React$useState21, 2),
+        rowsPerPage = _React$useState22[0],
+        setRowsPerPage = _React$useState22[1];
+
+  const headCells = props.headCells;
+  const actionsToolbar = props.actionsToolbar;
+
+  const _React$useState23 = _react.default.useState(props.searchParameters),
+        _React$useState24 = _slicedToArray(_React$useState23, 2),
+        searchParameters = _React$useState24[0],
+        setSearchParameters = _React$useState24[1];
+
+  for (let i = 0; i < props.headCells.length; i++) {
+    let headCell = props.headCells[i];
+    headCell.width = evaluateTableCellWidth(props.multiSelect, headCell, props.headCells.length);
+  }
+
+  _react.default.useEffect(() => {
+    if (!utils.isNull(props.rows)) {
+      setRows(props.rows);
+    }
+  }, [props.rows]);
+
+  _react.default.useEffect(() => {
+    if (fetchEnabled && !utils.isNull(props.searchParameters) && !utils.isNull(props.dataUrl)) {
+      setSearchParameters(props.searchParameters);
+      utils.invokeUrl(props.dataUrl, JSON.stringify(utils.getRequest(page + 1, rowsPerPage, props.searchParameters, props.paged)), data => {
+        var result;
+
+        if (typeof data === "string") {
+          result = JSON.parse(data);
+        } else {
+          result = data;
+        }
+
+        if (!utils.isNull(result)) {
+          setRows(result.records);
+          setTotalNumberOfRows(result.totalNumberOfRecords);
+
+          if (!utils.isNull(props.onDataArrive)) {
+            props.onDataArrive(result);
+          }
+
+          updateScrollBarPadding();
+        }
+      }, null);
+    }
+
+    setFetchEnabled(true);
+  }, [props.searchParameters]);
+
+  _react.default.useEffect(() => {
+    updateScrollBarPadding();
+  }, [rows]);
+
+  function updateScrollBarPadding() {
+    var tbody = document.getElementById('mainTableBody');
+
+    if (tbody !== null && typeof tbody !== 'undefined') {
+      setScrollWidth(tbody.offsetWidth - tbody.clientWidth);
+    }
+  }
+
+  window.onresize = function onresize() {
+    updateScrollBarPadding();
+  };
+
+  function getRequestJson(currentPage, curretRowsPerPage, paged) {
+    return utils.getRequest(currentPage, curretRowsPerPage, searchParameters, paged);
+  }
+
+  function 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);
+      return;
+    }
+
+    setSelected([]);
+    props.onSelectionChange([]);
+  }
+
+  function doHandleClick(event, id) {
+    const selectedIndex = 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 = [];
+
+    for (var i = 0; i < rows.length; i++) {
+      let row = rows[i];
+
+      for (var j = 0; j < newSelected.length; j++) {
+        if (row.map.id === newSelected[j]) {
+          selectedRows.push(row);
+        }
+      }
+    }
+
+    setSelected(newSelected);
+
+    if (!utils.isNull(props.onSelectionChange)) {
+      props.onSelectionChange(selectedRows);
+    }
+
+    setSelectedRow(id);
+  }
+
+  function handleClick(event, id) {
+    if (!utils.isNull(props.onCellSelectionChange)) {
+      return;
+    }
+
+    doHandleClick(event, id);
+  }
+
+  function handleCellClick(event, id, headCell) {
+    if (headCell.contentType !== "document") {
+      // TODO : Evaluate if this call is necessary
+      doHandleClick(event, id);
+    }
+
+    if (!utils.isNull(props.onCellSelectionChange)) {
+      props.onCellSelectionChange(id, headCell);
+    }
+  }
+
+  function handleChangePage(event, newPage) {
+    utils.invokeUrl(props.dataUrl + "?request=" + getRequestJson(newPage + 1, rowsPerPage, true), data => {
+      setRows(data.Data);
+      setPage(newPage);
+
+      if (!utils.isNull(props.onDataArrive)) {
+        props.onDataArrive(data);
+      }
+    }, null);
+  }
+
+  function handleChangeRowsPerPage(event) {
+    var curretRowsPerPage = +event.target.value;
+    utils.invokeUrl(props.dataUrl + "?request=" + getRequestJson(1, curretRowsPerPage, true), result => {
+      setRows(result.Data);
+      setRowsPerPage(curretRowsPerPage);
+      setPage(0);
+
+      if (!utils.isNull(props.onDataArrive)) {
+        props.onDataArrive(result);
+      }
+
+      updateScrollBarPadding();
+    }, null);
+  }
+
+  function handleChangeDense(event) {
+    setDense(event.target.checked);
+    updateScrollBarPadding();
+  }
+
+  const isSelected = id => selected.indexOf(id) !== -1;
+
+  return /*#__PURE__*/_react.default.createElement("div", null, /*#__PURE__*/_react.default.createElement(_Paper.default, {
+    className: classes.paper
+  }, /*#__PURE__*/_react.default.createElement("div", {
+    className: "responsive-table",
+    style: {
+      height: props.height
+    }
+  }, /*#__PURE__*/_react.default.createElement(_reactSuperResponsiveTable.Table, {
+    className: "table table-hover",
+    cellspacing: "0",
+    "aria-labelledby": "tableTitle",
+    size: dense ? 'small' : 'medium',
+    style: {
+      width: '100%'
+    }
+  }, /*#__PURE__*/_react.default.createElement(EnhancedTableHead, {
+    classes: classes,
+    numSelected: selected.length,
+    scrollWidth: scrollWidth,
+    order: order,
+    orderBy: orderBy,
+    onSelectAllClick: handleSelectAllClick,
+    onRequestSort: handleRequestSort,
+    rowCount: totalNumberOfRows,
+    headCells: headCells,
+    multiSelect: props.multiSelect
+  }), !utils.isNull(rows) ? /*#__PURE__*/_react.default.createElement(_reactSuperResponsiveTable.Tbody, {
+    className: classes.tableBody,
+    style: {
+      maxHeight: utils.isNull(props.bodyMaxHeight) ? props.bodyMaxHeight : "42vh"
+    },
+    id: "mainTableBody"
+  }, stableSort(rows, getSorting(order, orderBy)).map((row, index) => {
+    const isItemSelected = isSelected(row.map.id);
+    const labelId = "enhanced-table-checkbox-".concat(index);
+    let counter = 0;
+    return /*#__PURE__*/_react.default.createElement(_reactSuperResponsiveTable.Tr, {
+      style: {
+        display: 'flex',
+        flexWrap: 'wrap'
+      },
+      hover: true,
+      onClick: event => handleClick(event, row.map.id),
+      role: "checkbox",
+      "aria-checked": isItemSelected,
+      tabIndex: -1,
+      key: row.map.id,
+      selected: isItemSelected,
+      className: selectedRow === row.map.id ? classes.tableSelected : classes.tableRow
+    }, props.multiSelect === true ? /*#__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, headCells.map(headCell => counter++ === headCells.length - 1 && actionsToolbar !== null && typeof actionsToolbar !== "undefined" ? /*#__PURE__*/_react.default.createElement(_reactSuperResponsiveTable.Td, {
+      style: {
+        width: headCell.width
+      },
+      align: "left",
+      key: headCell.id
+    }, /*#__PURE__*/_react.default.createElement(_Toolbar.default, {
+      highlight: false,
+      title: "",
+      buttonClickHandler: buttonId => props.buttonClickHandler(buttonId),
+      config: actionsToolbar
+    })) : headCell.numeric === true ? /*#__PURE__*/_react.default.createElement(_reactSuperResponsiveTable.Td, {
+      style: {
+        width: headCell.width
+      },
+      align: "right",
+      key: headCell.id,
+      onClick: event => handleCellClick(event, row.map.id, headCell)
+    }, /*#__PURE__*/_react.default.createElement(TableCellContent, {
+      contentValue: row.map[headCell.id],
+      contentType: headCell.contentType
+    })) : /*#__PURE__*/_react.default.createElement(_reactSuperResponsiveTable.Td, {
+      style: {
+        width: headCell.width
+      },
+      align: "left",
+      key: headCell.id,
+      onClick: event => handleCellClick(event, row.map.id, headCell)
+    }, /*#__PURE__*/_react.default.createElement(TableCellContent, {
+      contentValue: row.map[headCell.id],
+      contentType: headCell.contentType
+    }))));
+  })) : null)), props.paged === false ? "" : /*#__PURE__*/_react.default.createElement(_TablePagination.default, {
+    rowsPerPageOptions: [5, 10, 25],
+    component: "div",
+    count: totalNumberOfRows,
+    rowsPerPage: rowsPerPage,
+    page: page,
+    backIconButtonProps: {
+      'aria-label': 'previous page'
+    },
+    nextIconButtonProps: {
+      'aria-label': 'next page'
+    },
+    onChangePage: handleChangePage,
+    onChangeRowsPerPage: handleChangeRowsPerPage
+  })));
+}
+
+class TableCellContent extends _react.default.Component {
+  constructor(props) {
+    super(props);
+    this.state = {
+      contentValue: props.contentValue ? props.contentValue : null,
+      contentType: props.contentType,
+      className: props.className
+    };
+  }
+
+  render() {
+    let displayValue;
+    const linkStyle = {
+      cursor: 'pointer',
+      textDecoration: 'underline'
+    };
+
+    if (this.state.contentType !== 'undefined') {
+      if (this.state.contentType === 'document') {
+        displayValue = /*#__PURE__*/_react.default.createElement("span", {
+          style: linkStyle
+        }, this.state.contentValue);
+      } else {
+        displayValue = this.state.contentValue;
+      }
+    } else {
+      displayValue = this.state.contentValue;
+    }
+
+    return displayValue;
+  }
+
+}