@terraware/web-components 3.5.12-rc.7 → 3.5.12

package/components/table/index.js

@@ -0,0 +1,346 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = EnhancedTable;
+exports.isTopBarButton = void 0;
+exports.tableSort = tableSort;
+var _react = _interopRequireWildcard(require("react"));
+var _core = require("@dnd-kit/core");
+var _sortable = require("@dnd-kit/sortable");
+var _material = require("@mui/material");
+var _utils = require("../../utils");
+var _Checkbox = require("../Checkbox");
+var _EnhancedTableToolbarV = _interopRequireDefault(require("./EnhancedTableToolbarV2"));
+var _TableCellRenderer = _interopRequireDefault(require("./TableCellRenderer"));
+var _TableHeader = _interopRequireDefault(require("./TableHeader"));
+var _density = require("./density");
+var _sort = require("./sort");
+// Only the text related props need to be passed in by the implementer, and extra data is passed to the caller
+
+const isTopBarButton = input => {
+  const castInput = input;
+  return !!(castInput.buttonType && castInput.onButtonClick);
+};
+exports.isTopBarButton = isTopBarButton;
+function EnhancedTable(_ref) {
+  let {
+    id,
+    columns,
+    rows,
+    order: _order = 'asc',
+    orderBy: _orderBy,
+    Renderer = _TableCellRenderer.default,
+    onSelect,
+    DetailsRenderer,
+    sortComparator = _sort.descendingComparator,
+    sortHandler,
+    isInactive,
+    isPresorted,
+    onReorderEnd,
+    isClickable,
+    emptyTableMessage,
+    showCheckbox,
+    showTopBar,
+    topBarButtons,
+    selectedRows,
+    setSelectedRows,
+    controlledOnSelect,
+    reloadData,
+    stickyHeader = true,
+    hideHeader,
+    booleanFalseText,
+    booleanTrueText,
+    editText,
+    renderNumSelectedText,
+    renderPaginationText,
+    enhancedTopBarSelectionConfig,
+    density = 'comfortable',
+    tableComments
+  } = _ref;
+  const theme = (0, _material.useTheme)();
+  const [order, setOrder] = _react.default.useState(_order);
+  const [orderBy, setOrderBy] = _react.default.useState(_orderBy);
+  const [maxItemsPerPage] = (0, _react.useState)(100);
+  const [itemsToSkip, setItemsToSkip] = (0, _react.useState)(0);
+  const {
+    isMobile
+  } = (0, _utils.useDeviceInfo)();
+  const [displayColumnKeyNames, setDisplayColumnKeyNames] = (0, _react.useState)();
+  const [displayColumnsIndexed, setDisplayColumnsIndexed] = (0, _react.useState)();
+  const [displayColumnDetails, setDisplayColumnDetails] = (0, _react.useState)();
+  (0, _react.useEffect)(() => {
+    const columnsKeyNames = columns.map(col => col.key);
+    const columnsIndexed = columns.reduce((acum, value) => {
+      acum[value.key] = value;
+      return acum;
+    }, {});
+    setDisplayColumnKeyNames(columnsKeyNames);
+    setDisplayColumnsIndexed(columnsIndexed);
+  }, [columns]);
+  (0, _react.useEffect)(() => {
+    if (displayColumnKeyNames && displayColumnsIndexed) {
+      const columnsDetails = displayColumnKeyNames.map(key => {
+        const detail = {
+          ...displayColumnsIndexed[key]
+        };
+        return detail;
+      });
+      setDisplayColumnDetails(columnsDetails);
+    }
+  }, [displayColumnKeyNames, displayColumnsIndexed]);
+  (0, _react.useEffect)(() => {
+    if (setSelectedRows && rows.length >= 0) {
+      setSelectedRows(currentlySelectedRows => {
+        const emptyArray = [];
+        if (rows.length || currentlySelectedRows.length > rows.length) {
+          return emptyArray;
+        }
+        return currentlySelectedRows;
+      });
+    }
+  }, [rows, setSelectedRows]);
+  (0, _react.useEffect)(() => {
+    // this is not most elegant but we want to do this if table was sorted by some column in a presorted table
+    // but we don't know when the data changes, hence this useEffect on the data size
+    if (isPresorted) {
+      // we want to set page back to 1 if the data changes on presorted lists,
+      // this is because the data was reset due to some sort behavior refetching new data
+      handleChangePage({}, 1);
+    }
+  }, [rows]);
+  const handleRequestSort = (event, property) => {
+    const isAsc = orderBy === property && order === 'asc';
+    const newOrder = isAsc ? 'desc' : 'asc';
+    setOrder(newOrder);
+    setOrderBy(property);
+    if (sortHandler) {
+      sortHandler(newOrder, property);
+    }
+  };
+  const hasEditColumn = columns.filter(c => c.type === 'edit').length > 0;
+  const isSelected = row => {
+    return selectedRows && selectedRows.indexOf(row) !== -1;
+  };
+  const handleSelectAllClick = event => {
+    if (setSelectedRows) {
+      if (event.target.checked) {
+        setSelectedRows(rows);
+        return;
+      } else {
+        setSelectedRows([]);
+      }
+    }
+  };
+  const handleClick = (event, row) => {
+    if (setSelectedRows && selectedRows) {
+      const selectedIndex = selectedRows.indexOf(row);
+      let newSelected = [];
+      if (selectedIndex === -1) {
+        newSelected = newSelected.concat(selectedRows, row);
+      } else if (selectedIndex === 0) {
+        newSelected = newSelected.concat(selectedRows.slice(1));
+      } else if (selectedIndex === selectedRows.length - 1) {
+        newSelected = newSelected.concat(selectedRows.slice(0, -1));
+      } else if (selectedIndex > 0) {
+        newSelected = newSelected.concat(selectedRows.slice(0, selectedIndex), selectedRows.slice(selectedIndex + 1));
+      }
+      setSelectedRows(newSelected);
+    }
+  };
+  const handleChangePage = (event, newPage) => {
+    setItemsToSkip(maxItemsPerPage * (newPage - 1));
+  };
+  function columnsToHeadCells(columnsR) {
+    return columnsR.map(c => ({
+      id: c.key,
+      disablePadding: true,
+      label: typeof c.name === 'string' ? c.name.toUpperCase() : c.name,
+      sx: [{
+        paddingY: (0, _density.getTableCellPaddingY)(density)
+      }, ...(Array.isArray(c.sx) ? c.sx : [c.sx])],
+      tooltipTitle: c.tooltipTitle
+    }));
+  }
+  const [headCells, setHeadCells] = _react.default.useState();
+  _react.default.useEffect(() => {
+    if (displayColumnDetails) {
+      setHeadCells(columnsToHeadCells(displayColumnDetails));
+    }
+  }, [displayColumnDetails]);
+  const sensors = (0, _core.useSensors)((0, _core.useSensor)(_core.MouseSensor), (0, _core.useSensor)(_core.TouchSensor), (0, _core.useSensor)(_core.KeyboardSensor, {
+    coordinateGetter: _sortable.sortableKeyboardCoordinates
+  }));
+  const onReorderEndHandler = (0, _react.useCallback)(_ref2 => {
+    let {
+      oldIndex,
+      newIndex
+    } = _ref2;
+    if (displayColumnKeyNames) {
+      if (newIndex !== 0 && oldIndex !== 0) {
+        const newOrder = [...displayColumnKeyNames];
+        const moved = newOrder.splice(oldIndex, 1);
+        newOrder.splice(newIndex, 0, moved[0]);
+        setDisplayColumnKeyNames(newOrder);
+        if (onReorderEnd) {
+          onReorderEnd(newOrder);
+        }
+      }
+    }
+  }, [displayColumnKeyNames, setDisplayColumnKeyNames, onReorderEnd]);
+  function handleDragEnd(event) {
+    if (headCells) {
+      const {
+        active,
+        over
+      } = event;
+      if (active && over && active.id !== over.id && onReorderEndHandler) {
+        const oldIndex = headCells.findIndex(item => item.id === active.id);
+        const newIndex = headCells.findIndex(item => item.id === over.id);
+        onReorderEndHandler({
+          oldIndex,
+          newIndex
+        });
+      }
+    }
+  }
+  const pagesCount = Math.ceil(rows.length / maxItemsPerPage);
+  return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, showTopBar && /*#__PURE__*/_react.default.createElement(_EnhancedTableToolbarV.default, {
+    selectedRowsCount: (selectedRows === null || selectedRows === void 0 ? void 0 : selectedRows.length) || 0,
+    pagesCount: pagesCount,
+    renderNumSelectedText: renderNumSelectedText,
+    rowsCount: rows.length,
+    topBarButtons: topBarButtons,
+    topBarSelectionConfig: enhancedTopBarSelectionConfig ? {
+      ...enhancedTopBarSelectionConfig,
+      handleSelectAll: () => setSelectedRows && setSelectedRows(rows),
+      handleSelectNone: () => setSelectedRows && setSelectedRows([])
+    } : undefined
+  }), /*#__PURE__*/_react.default.createElement(_material.TableContainer, {
+    id: id
+  }, /*#__PURE__*/_react.default.createElement(_core.DndContext, {
+    sensors: sensors,
+    onDragEnd: handleDragEnd
+  }, /*#__PURE__*/_react.default.createElement(_material.Table, {
+    stickyHeader: stickyHeader,
+    "aria-labelledby": "tableTitle",
+    size: "medium",
+    "aria-label": "enhanced table",
+    sx: {
+      borderCollapse: 'initial'
+    }
+  }, !hideHeader && /*#__PURE__*/_react.default.createElement(_TableHeader.default, {
+    order: order,
+    orderBy: orderBy,
+    onRequestSort: handleRequestSort,
+    columns: displayColumnDetails !== null && displayColumnDetails !== void 0 ? displayColumnDetails : [],
+    onReorderEnd: onReorderEndHandler,
+    numSelected: showCheckbox ? selectedRows === null || selectedRows === void 0 ? void 0 : selectedRows.length : undefined,
+    onSelectAllClick: showCheckbox ? handleSelectAllClick : undefined,
+    rowCount: showCheckbox ? rows === null || rows === void 0 ? void 0 : rows.length : undefined,
+    density: density
+  }), /*#__PURE__*/_react.default.createElement(_material.TableBody, null, rows.length < 1 && emptyTableMessage && /*#__PURE__*/_react.default.createElement(_material.TableRow, null, /*#__PURE__*/_react.default.createElement(_material.TableCell, {
+    colSpan: columns.length + 1,
+    align: "center"
+  }, /*#__PURE__*/_react.default.createElement("p", null, emptyTableMessage))), rows && (isPresorted ? rows : (0, _sort.stableSort)(rows, (0, _sort.getComparator)(order, orderBy, sortComparator))).slice(itemsToSkip, itemsToSkip + maxItemsPerPage).map((row, index) => {
+    const onClick = onSelect && !controlledOnSelect ? () => onSelect(row) : undefined;
+    const isItemSelected = isSelected(row);
+    return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, {
+      key: index
+    }, /*#__PURE__*/_react.default.createElement(_material.TableRow, {
+      id: "row".concat(index + 1),
+      hover: true,
+      onClick: e => {
+        e.stopPropagation();
+        if (onClick && !hasEditColumn && (isClickable ? isClickable(row) : true)) {
+          onClick();
+        }
+        if (!onClick && !hasEditColumn && (isClickable ? isClickable(row) : true)) {
+          handleClick(e, row);
+        }
+      },
+      selected: isItemSelected,
+      "aria-checked": isItemSelected,
+      sx: {
+        ...(isInactive && isInactive(row) ? {
+          backgroundColor: theme.palette.neutral[50]
+        } : {}),
+        height: (0, _density.getTableRowHeight)(density),
+        '&.MuiTableRow-root.Mui-selected': {
+          backgroundColor: theme.palette.TwClrBgSelectedTertiary
+        },
+        '&:nth-of-type(odd)': {
+          backgroundColor: theme.palette.TwClrBgSecondary
+        },
+        '&:hover': {
+          backgroundColor: theme.palette.TwClrBgSecondaryHover
+        }
+      }
+    }, showCheckbox && /*#__PURE__*/_react.default.createElement(_material.TableCell, {
+      padding: "checkbox",
+      sx: {
+        '&.MuiTableCell-root': {
+          borderBottom: "1px solid ".concat(theme.palette.TwClrBgSecondary)
+        }
+      }
+    }, /*#__PURE__*/_react.default.createElement(_material.Checkbox, {
+      disableRipple: true,
+      sx: (0, _Checkbox.CheckboxStyle)(theme),
+      color: "primary",
+      checked: isItemSelected,
+      onClick: e => !isClickable || !isClickable(row) ? handleClick(e, row) : null
+    })), displayColumnDetails && displayColumnDetails.map(c => /*#__PURE__*/_react.default.createElement(Renderer, {
+      index: index + 1,
+      key: c.key,
+      row: row,
+      column: c,
+      value: row[c.key],
+      onRowClick: onSelect && controlledOnSelect ? newValue => onSelect(row, c.key, newValue) : onClick,
+      reloadData: reloadData,
+      booleanFalseText: booleanFalseText,
+      booleanTrueText: booleanTrueText,
+      editText: editText,
+      sx: {
+        paddingY: (0, _density.getTableCellPaddingY)(density)
+      }
+    }))), DetailsRenderer && /*#__PURE__*/_react.default.createElement(DetailsRenderer, {
+      index: index,
+      row: row
+    }));
+  }))))), tableComments && /*#__PURE__*/_react.default.createElement(_material.Typography, {
+    fontWeight: 400,
+    fontSize: "14px",
+    color: theme.palette.TwClrTxtSecondary,
+    marginTop: 2
+  }, tableComments), renderPaginationText && /*#__PURE__*/_react.default.createElement(_material.Box, {
+    display: "flex",
+    alignItems: "center",
+    justifyContent: "flex-end",
+    paddingTop: "24px"
+  }, rows.length ? itemsToSkip + maxItemsPerPage < rows.length ? /*#__PURE__*/_react.default.createElement(_material.Typography, {
+    paddingRight: "24px",
+    fontSize: "14px"
+  }, renderPaginationText(itemsToSkip + 1, itemsToSkip + maxItemsPerPage, rows.length)) : /*#__PURE__*/_react.default.createElement(_material.Typography, {
+    paddingRight: "24px",
+    fontSize: "14px"
+  }, renderPaginationText(itemsToSkip + 1, rows.length, rows.length)) : /*#__PURE__*/_react.default.createElement(_material.Typography, {
+    paddingRight: "24px",
+    fontSize: "14px"
+  }, renderPaginationText(0, 0, 0)), /*#__PURE__*/_react.default.createElement(_material.Pagination, {
+    count: pagesCount,
+    page: itemsToSkip / maxItemsPerPage + 1,
+    shape: "rounded",
+    onChange: handleChangePage,
+    siblingCount: isMobile ? 0 : 1,
+    size: 'small'
+  })));
+}
+function tableSort(ignore, array, comparator) {
+  if (ignore) {
+    return array;
+  }
+  return (0, _sort.stableSort)(array, comparator);
+}

package/components/table/sort.js

@@ -0,0 +1,72 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.descendingComparator = descendingComparator;
+exports.getComparator = getComparator;
+exports.stableSort = stableSort;
+function descendingComparator(a, b, orderBy, order) {
+  var _b$orderBy, _a$orderBy;
+  // first attempt to parse into a numeric value and compare
+  const numCompare = descendingNumComparator(a, b, orderBy);
+  if (numCompare !== null) {
+    if (numCompare === 0) {
+      return numCompare;
+    } else {
+      return order === 'desc' ? numCompare * -1 : numCompare;
+    }
+  }
+
+  // if non-numeric, compare using the javascript built-in compare for this type
+  const bValue = (_b$orderBy = b[orderBy]) !== null && _b$orderBy !== void 0 ? _b$orderBy : '';
+  const aValue = (_a$orderBy = a[orderBy]) !== null && _a$orderBy !== void 0 ? _a$orderBy : '';
+
+  // blank values at the end always (any order)
+  if (isEmptyValue(aValue.toString()) && isEmptyValue(bValue.toString())) {
+    return 0;
+  }
+  if (isEmptyValue(aValue.toString())) {
+    return 1;
+  }
+  if (isEmptyValue(bValue.toString())) {
+    return -1;
+  }
+  if (bValue < aValue) {
+    return order === 'desc' ? -1 : 1;
+  }
+  if (bValue > aValue) {
+    return order === 'desc' ? 1 : -1;
+  }
+  return 0;
+}
+function isEmptyValue(value) {
+  if (value === '' || value === null || (value === null || value === void 0 ? void 0 : value.toString().trim()) === '' || value === undefined) {
+    return true;
+  } else {
+    return false;
+  }
+}
+function descendingNumComparator(a, b, orderBy) {
+  var _a$orderBy2, _b$orderBy2;
+  const aNumValue = Number((_a$orderBy2 = a[orderBy]) !== null && _a$orderBy2 !== void 0 ? _a$orderBy2 : '0.0');
+  const bNumValue = Number((_b$orderBy2 = b[orderBy]) !== null && _b$orderBy2 !== void 0 ? _b$orderBy2 : '0.0');
+  if (!isNaN(aNumValue) && !isNaN(bNumValue)) {
+    return bNumValue - aNumValue;
+  }
+  return null;
+}
+function getComparator(order, orderBy, sorting) {
+  return (a, b) => sorting(a, b, orderBy, order);
+}
+function stableSort(array, comparator) {
+  const stabilizedThis = array.map((el, index) => [el, index]);
+  stabilizedThis.sort((a, b) => {
+    const order = comparator(a[0], b[0]);
+    if (order !== 0) {
+      return order;
+    }
+    return a[1] - b[1];
+  });
+  return stabilizedThis.map(el => el[0]);
+}

package/components/table/sort.test.js

@@ -0,0 +1,37 @@
+"use strict";
+
+var _sort = require("./sort");
+const rowA = {
+  string1: 'foo',
+  string2: 'same',
+  number1: '1050',
+  number2: '150',
+  number3: '1.100'
+};
+const rowB = {
+  string1: 'barbaz',
+  string2: 'same',
+  number1: '1099',
+  number2: '21.001',
+  number3: '1.1'
+};
+test('compare unequal string fields', () => {
+  const cmp = (0, _sort.descendingComparator)(rowA, rowB, 'string1', 'desc');
+  expect(cmp).toEqual(-1);
+});
+test('compare equal string fields', () => {
+  const cmp = (0, _sort.descendingComparator)(rowA, rowB, 'string2', 'desc');
+  expect(cmp).toEqual(0);
+});
+test('compare unequal number fields with same whole number digits', () => {
+  const cmp = (0, _sort.descendingComparator)(rowA, rowB, 'number1', 'desc');
+  expect(Math.sign(cmp)).toEqual(-1);
+});
+test('compare unequal number fields with differing whole number digits', () => {
+  const cmp = (0, _sort.descendingComparator)(rowA, rowB, 'number2', 'desc');
+  expect(Math.sign(cmp)).toEqual(1);
+});
+test('compare equal number fields', () => {
+  const cmp = (0, _sort.descendingComparator)(rowA, rowB, 'number3', 'desc');
+  expect(Math.sign(cmp)).toEqual(0);
+});

package/components/table/types.js

@@ -0,0 +1,5 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});

package/components/types/index.js

@@ -0,0 +1,5 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});

package/index.css

@@ -0,0 +1,11 @@
+body {
+  margin: 0;
+  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu', 'Cantarell', 'Fira Sans',
+    'Droid Sans', 'Helvetica Neue', sans-serif;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+
+code {
+  font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New', monospace;
+}