@activecollab/components 1.0.414 → 2.0.0

package/dist/esm/components/Tables/DataTable.js

@@ -1,83 +1,80 @@
-import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
-import _extends from "@babel/runtime/helpers/esm/extends";
-var _excluded = ["header", "rows", "className", "sortBy", "sortDirection", "onSortCallback", "theadClass", "noResultsCallback", "groupBy", "groupHead", "isCollapsible", "emptyValue", "loading", "loadingRows"];
-import React, { useCallback, useState, useEffect, useRef, useMemo, Fragment } from "react";
-import classNames from "classnames";
-import { Table, Tbody, Thead } from "./Table";
-import CollapseExpandSingleIcon from "../Icons/collection/CollapseExpandSingle";
-import ExpandAllIcon from "../Icons/collection/ExpandAll";
-import CollapseAllIcon from "../Icons/collection/CollapseAll";
-import SortIcon from "../Icons/collection/SortIcon";
-import { StyledDataTable } from "./Styles";
-import { LinearLoader } from "../Loaders";
-export var SortDirection;
-(function (SortDirection) {
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.SortDirection = exports.DataTable = void 0;
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/extends"));
+var _react = _interopRequireWildcard(require("react"));
+var _classnames = _interopRequireDefault(require("classnames"));
+var _Table = require("./Table");
+var _CollapseExpandSingle = _interopRequireDefault(require("../Icons/collection/CollapseExpandSingle"));
+var _ExpandAll = _interopRequireDefault(require("../Icons/collection/ExpandAll"));
+var _CollapseAll = _interopRequireDefault(require("../Icons/collection/CollapseAll"));
+var _SortIcon = _interopRequireDefault(require("../Icons/collection/SortIcon"));
+var _Styles = require("./Styles");
+var _Loaders = require("../Loaders");
+function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
+function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
+let SortDirection = exports.SortDirection = /*#__PURE__*/function (SortDirection) {
   SortDirection["None"] = "none";
   SortDirection["Asc"] = "asc";
   SortDirection["Desc"] = "desc";
-})(SortDirection || (SortDirection = {}));
-var groupByKey = function groupByKey(items, key) {
+  return SortDirection;
+}({});
+const groupByKey = (items, key) => {
   if (items[0] instanceof Array) {
     items = items[0];
   }
-  return items.reduce(function (result, item) {
-    var _extends2;
-    return _extends({}, result, (_extends2 = {}, _extends2[item[key] !== null ? " " + item[key] : item[key]] = [].concat(result[item[key] !== null ? " " + item[key] : item[key]] || [], [item]), _extends2));
+  return items.reduce((result, item) => {
+    return {
+      ...result,
+      [item[key] !== null ? " " + item[key] : item[key]]: [...(result[item[key] !== null ? " " + item[key] : item[key]] || []), item]
+    };
   }, {});
 };
-var initialCollapsed = function initialCollapsed(rows, groupBy) {
+const initialCollapsed = (rows, groupBy) => {
   if (groupBy) {
-    var groupedData = groupByKey(rows, groupBy);
-    var keys = Object.keys(groupedData);
-    var collapsedKeys = {};
-    keys.forEach(function (key) {
+    const groupedData = groupByKey(rows, groupBy);
+    const keys = Object.keys(groupedData);
+    const collapsedKeys = {};
+    keys.forEach(key => {
       collapsedKeys[key] = true;
     });
     return collapsedKeys;
   }
   return {};
 };
-export var DataTable = function DataTable(_ref) {
-  var header = _ref.header,
-    _ref$rows = _ref.rows,
-    rows = _ref$rows === void 0 ? [] : _ref$rows,
-    className = _ref.className,
-    sortBy = _ref.sortBy,
-    _ref$sortDirection = _ref.sortDirection,
-    sortDirection = _ref$sortDirection === void 0 ? SortDirection.None : _ref$sortDirection,
-    onSortCallback = _ref.onSortCallback,
-    theadClass = _ref.theadClass,
-    noResultsCallback = _ref.noResultsCallback,
-    groupBy = _ref.groupBy,
-    _ref$groupHead = _ref.groupHead,
-    groupHead = _ref$groupHead === void 0 ? function () {
-      return null;
-    } : _ref$groupHead,
-    isCollapsible = _ref.isCollapsible,
-    emptyValue = _ref.emptyValue,
-    loading = _ref.loading,
-    _ref$loadingRows = _ref.loadingRows,
-    loadingRows = _ref$loadingRows === void 0 ? 7 : _ref$loadingRows,
-    args = _objectWithoutPropertiesLoose(_ref, _excluded);
-  var _useState = useState(sortDirection),
-    columnDirection = _useState[0],
-    setColumnDirection = _useState[1];
-  var _useState2 = useState(sortBy),
-    active = _useState2[0],
-    setActive = _useState2[1];
-  var _useState3 = useState(),
-    hovered = _useState3[0],
-    setHovered = _useState3[1];
-  var _useState4 = useState(function () {
-      return initialCollapsed(rows, groupBy);
-    }),
-    collapsed = _useState4[0],
-    setCollapsed = _useState4[1];
-  var sort = function sort(sortByKey, direction, rowsData) {
+const DataTable = _ref => {
+  let {
+    header,
+    rows = [],
+    className,
+    sortBy,
+    sortDirection = SortDirection.None,
+    onSortCallback,
+    theadClass,
+    noResultsCallback,
+    groupBy,
+    groupHead = () => null,
+    isCollapsible,
+    emptyValue,
+    loading,
+    loadingRows = 7,
+    ...args
+  } = _ref;
+  const [columnDirection, setColumnDirection] = (0, _react.useState)(sortDirection);
+  const [active, setActive] = (0, _react.useState)(sortBy);
+  const [hovered, setHovered] = (0, _react.useState)();
+  const [collapsed, setCollapsed] = (0, _react.useState)(() => {
+    return initialCollapsed(rows, groupBy);
+  });
+  const sort = (sortByKey, direction, rowsData) => {
     if (direction === SortDirection.None) {
       return rowsData;
     }
-    if (rowsData instanceof Array) return rowsData.sort(function (a, b) {
+    if (rowsData instanceof Array) return rowsData.sort((a, b) => {
       if (direction === SortDirection.Asc) {
         if (a[sortByKey] === null) {
           return 1;
@@ -98,8 +95,8 @@ export var DataTable = function DataTable(_ref) {
         }
         return b[sortByKey] - a[sortByKey];
       }
-      var first = a[sortByKey].toString();
-      var second = b[sortByKey].toString();
+      const first = a[sortByKey].toString();
+      const second = b[sortByKey].toString();
       if (direction === SortDirection.Asc) {
         return first.localeCompare(second);
       }
@@ -107,7 +104,7 @@ export var DataTable = function DataTable(_ref) {
     });
     return {};
   };
-  var initialData = useCallback(function () {
+  const initialData = (0, _react.useCallback)(() => {
     if (sortBy && !groupBy) {
       return sort(sortBy, sortDirection, rows);
     }
@@ -120,10 +117,8 @@ export var DataTable = function DataTable(_ref) {
     }
     return rows;
   }, [groupBy, rows, sortBy, sortDirection]);
-  var _useState5 = useState(initialData),
-    data = _useState5[0],
-    setData = _useState5[1];
-  var getNextSortDirection = function getNextSortDirection(previousDirection, sameColumn) {
+  const [data, setData] = (0, _react.useState)(initialData);
+  const getNextSortDirection = (previousDirection, sameColumn) => {
     if (!sameColumn) {
       return SortDirection.Asc;
     }
@@ -132,16 +127,18 @@ export var DataTable = function DataTable(_ref) {
     }
     return SortDirection.Asc;
   };
-  var sortColumn = useCallback(function (event) {
-    var index = event.currentTarget.dataset.index;
+  const sortColumn = (0, _react.useCallback)(event => {
+    const index = event.currentTarget.dataset.index;
     if (index && header[index] && header[index].sortable) {
-      var direction = getNextSortDirection(columnDirection, header[index].key === active);
+      const direction = getNextSortDirection(columnDirection, header[index].key === active);
       setActive(header[index].key);
       setColumnDirection(direction);
       if (groupBy) {
-        var grouped = _extends({}, data);
+        let grouped = {
+          ...data
+        };
         if (groupBy !== header[index].key) {
-          Object.keys(grouped).map(function (key) {
+          Object.keys(grouped).map(key => {
             grouped[key] = sort(header[index].key, direction, grouped[key]);
           });
         } else {
@@ -160,57 +157,57 @@ export var DataTable = function DataTable(_ref) {
     }
     return null;
   }, [setData, data, columnDirection, setColumnDirection, header, active, setActive, onSortCallback, groupBy, rows]);
-  var cellMouseOver = useCallback(function (e) {
+  const cellMouseOver = (0, _react.useCallback)(e => {
     if (e.target instanceof HTMLElement) {
       if (e.target.dataset.key) {
         setHovered(e.target.dataset.key);
       }
     }
   }, []);
-  var cellMouseOut = useCallback(function () {
+  const cellMouseOut = (0, _react.useCallback)(() => {
     setHovered(null);
   }, []);
-  useEffect(function () {
+  (0, _react.useEffect)(() => {
     setData(initialData());
     setCollapsed(initialCollapsed(rows, groupBy));
   }, [rows, groupBy, initialData]);
-  var renderNoResults = useCallback(function () {
-    return /*#__PURE__*/React.createElement("tr", null, /*#__PURE__*/React.createElement("td", {
+  const renderNoResults = (0, _react.useCallback)(() => {
+    return /*#__PURE__*/_react.default.createElement("tr", null, /*#__PURE__*/_react.default.createElement("td", {
       colSpan: header.length,
-      className: classNames({
+      className: (0, _classnames.default)({
         "text-center": !noResultsCallback
       })
     }, noResultsCallback ? noResultsCallback() : "There is no data."));
   }, [header, noResultsCallback]);
-  var tableRef = useRef(null);
-  var overlayStyles = function overlayStyles() {
+  const tableRef = (0, _react.useRef)(null);
+  const overlayStyles = () => {
     if (tableRef.current) {
       return tableRef.current.clientHeight + 5;
     }
   };
-  var renderCell = useCallback(function (h, row, colIndex) {
+  const renderCell = (0, _react.useCallback)((h, row, colIndex) => {
     if (h.renderCallback) {
       return h.renderCallback(row, h.key, colIndex);
     }
     if (row[h.key] === null && emptyValue) {
-      return /*#__PURE__*/React.createElement("i", {
+      return /*#__PURE__*/_react.default.createElement("i", {
         className: "opacity-75"
       }, emptyValue[h.key]);
     }
     return row[h.key];
   }, [emptyValue]);
-  var renderRow = useCallback(function (row, rowIndex) {
-    return /*#__PURE__*/React.createElement("tr", {
+  const renderRow = (0, _react.useCallback)((row, rowIndex) => {
+    return /*#__PURE__*/_react.default.createElement("tr", {
       key: rowIndex,
       "data-index": rowIndex,
       "data-direction": "asc",
       className: "c-table__row",
       onMouseOver: cellMouseOver,
       onMouseLeave: cellMouseOut
-    }, header.map(function (h, colIndex) {
-      return /*#__PURE__*/React.createElement("td", {
+    }, header.map((h, colIndex) => {
+      return /*#__PURE__*/_react.default.createElement("td", {
         key: colIndex,
-        className: classNames("c-table__cell c-data-table__item", {
+        className: (0, _classnames.default)(`c-table__cell c-data-table__item`, {
           hovered: hovered === h.key
         }),
         "data-key": h.key,
@@ -218,118 +215,124 @@ export var DataTable = function DataTable(_ref) {
       }, renderCell(h, row, colIndex));
     }));
   }, [cellMouseOut, cellMouseOver, header, hovered, renderCell]);
-  var toggleCollapse = useCallback(function (event) {
-    var collapseKey = event.currentTarget.dataset.groupkey;
-    setCollapsed(function (prevState) {
-      var newState = _extends({}, prevState);
+  const toggleCollapse = (0, _react.useCallback)(event => {
+    const collapseKey = event.currentTarget.dataset.groupkey;
+    setCollapsed(prevState => {
+      const newState = {
+        ...prevState
+      };
       newState[collapseKey] = !prevState[collapseKey];
       return newState;
     });
   }, []);
-  var renderPlaceholders = useMemo(function () {
-    var placeholders = Array(loadingRows).fill({}).map(function (_, index) {
-      return /*#__PURE__*/React.createElement("tr", {
+  const renderPlaceholders = (0, _react.useMemo)(() => {
+    const placeholders = Array(loadingRows).fill({}).map((_, index) => {
+      return /*#__PURE__*/_react.default.createElement("tr", {
         key: index,
         className: "c-table__row",
         onMouseOver: cellMouseOver,
         onMouseLeave: cellMouseOut
-      }, header.map(function (col, colIndex) {
-        return /*#__PURE__*/React.createElement("td", {
+      }, header.map((col, colIndex) => {
+        return /*#__PURE__*/_react.default.createElement("td", {
           key: colIndex,
-          className: classNames("c-table__cell c-data-table__item", {
+          className: (0, _classnames.default)(`c-table__cell c-data-table__item`, {
             hovered: hovered === col.key
           }),
           "data-key": col.key
-        }, /*#__PURE__*/React.createElement(LinearLoader, null));
+        }, /*#__PURE__*/_react.default.createElement(_Loaders.LinearLoader, null));
       }));
     });
-    return /*#__PURE__*/React.createElement(Tbody, null, placeholders);
+    return /*#__PURE__*/_react.default.createElement(_Table.Tbody, null, placeholders);
   }, [cellMouseOut, cellMouseOver, header, hovered, loadingRows]);
-  var renderRows = useMemo(function () {
+  const renderRows = (0, _react.useMemo)(() => {
     if (data && data instanceof Array && data.length > 0 || typeof data === "object" && Object.keys(data).length > 0) {
       if (groupBy) {
-        var keys = Object.keys(data);
-        return keys.map(function (key, i) {
-          return /*#__PURE__*/React.createElement(Fragment, {
+        const keys = Object.keys(data);
+        return keys.map((key, i) => {
+          return /*#__PURE__*/_react.default.createElement(_react.Fragment, {
             key: key
-          }, isCollapsible && /*#__PURE__*/React.createElement(Tbody, {
+          }, isCollapsible && /*#__PURE__*/_react.default.createElement(_Table.Tbody, {
             className: "c-table__collapse_body"
-          }, /*#__PURE__*/React.createElement("tr", null, /*#__PURE__*/React.createElement("td", {
+          }, /*#__PURE__*/_react.default.createElement("tr", null, /*#__PURE__*/_react.default.createElement("td", {
             "data-groupkey": key,
             onClick: toggleCollapse,
             className: "c-table__body__icon c-table--toggle-collapsed"
-          }, /*#__PURE__*/React.createElement(CollapseExpandSingleIcon, {
-            className: classNames({
+          }, /*#__PURE__*/_react.default.createElement(_CollapseExpandSingle.default, {
+            className: (0, _classnames.default)({
               "c-table__collapse_icon--expanded": !collapsed[key],
               "c-table__collapse_icon--collapsed": collapsed[key]
             })
-          })))), /*#__PURE__*/React.createElement(Tbody, {
-            className: classNames("c-table__grouped__head", "head_" + i, {
+          })))), /*#__PURE__*/_react.default.createElement(_Table.Tbody, {
+            className: (0, _classnames.default)("c-table__grouped__head", `head_${i}`, {
               "c-table__grouped__head--expanded": isCollapsible && !collapsed[key],
               "c-table__grouped__head--collapsed": isCollapsible && collapsed[key],
               last: i === keys.length - 1,
               first: i === 0
             })
-          }, groupHead(data[key], keys[i] !== "null" ? keys[i].trim() : null)), /*#__PURE__*/React.createElement(Tbody, {
-            className: classNames("c-table__group c-table_group_" + i, {
+          }, groupHead(data[key], keys[i] !== "null" ? keys[i].trim() : null)), /*#__PURE__*/_react.default.createElement(_Table.Tbody, {
+            className: (0, _classnames.default)(`c-table__group c-table_group_${i}`, {
               hidden: collapsed[key]
             })
-          }, data[key].map(function (row, index) {
+          }, data[key].map((row, index) => {
             return renderRow(row, index);
           })));
         });
       }
-      return /*#__PURE__*/React.createElement(Tbody, null, data instanceof Array && data.map(function (row, rowIndex) {
+      return /*#__PURE__*/_react.default.createElement(_Table.Tbody, null, data instanceof Array && data.map((row, rowIndex) => {
         return renderRow(row, rowIndex);
       }));
     }
     return renderNoResults();
   }, [data, groupBy, renderRow, groupHead, collapsed, isCollapsible, renderNoResults, toggleCollapse]);
-  var allGroupsCollapsed = useMemo(function () {
-    return Object.keys(collapsed).every(function (key) {
+  const allGroupsCollapsed = (0, _react.useMemo)(() => {
+    return Object.keys(collapsed).every(key => {
       return collapsed[key];
     });
   }, [collapsed]);
-  var hasCollapsed = useMemo(function () {
-    return Object.keys(collapsed).some(function (key) {
+  const hasCollapsed = (0, _react.useMemo)(() => {
+    return Object.keys(collapsed).some(key => {
       return collapsed[key];
     });
   }, [collapsed]);
-  var toggleAllCollapsed = useCallback(function () {
+  const toggleAllCollapsed = (0, _react.useCallback)(() => {
     if (hasCollapsed) {
-      setCollapsed(function (prevState) {
-        var newState = _extends({}, prevState);
-        Object.keys(newState).forEach(function (key) {
+      setCollapsed(prevState => {
+        const newState = {
+          ...prevState
+        };
+        Object.keys(newState).forEach(key => {
           newState[key] = false;
         });
         return newState;
       });
     } else {
-      setCollapsed(function (prevState) {
-        var newState = _extends({}, prevState);
-        Object.keys(newState).forEach(function (key) {
+      setCollapsed(prevState => {
+        const newState = {
+          ...prevState
+        };
+        Object.keys(newState).forEach(key => {
           newState[key] = true;
         });
         return newState;
       });
     }
   }, [hasCollapsed]);
-  return /*#__PURE__*/React.createElement(StyledDataTable, _extends({
-    as: Table,
+  return /*#__PURE__*/_react.default.createElement(_Styles.StyledDataTable, (0, _extends2.default)({
+    as: _Table.Table,
     innerRef: tableRef,
-    className: classNames("c-data-table", className, {
+    className: (0, _classnames.default)("c-data-table", className, {
       "c-table__grouped": groupBy,
       "c-table__collapsible": isCollapsible,
       "padding-b-0": groupBy && collapsed[Object.keys(data).slice(-1)[0]]
     })
-  }, args), /*#__PURE__*/React.createElement(Thead, {
+  }, args), /*#__PURE__*/_react.default.createElement(_Table.Thead, {
     className: theadClass
-  }, header.length > 0 && /*#__PURE__*/React.createElement("tr", {
+  }, header.length > 0 && /*#__PURE__*/_react.default.createElement("tr", {
     className: "c-table__row"
-  }, header.map(function (h, index) {
-    return /*#__PURE__*/React.createElement("th", {
+  }, header.map((h, index) => {
+    return /*#__PURE__*/_react.default.createElement("th", {
       key: h.key,
-      className: classNames("c-table__cell", {
+      className: (0, _classnames.default)(`c-table__cell`, {
         "c-table__cell--hovered": hovered === h.key,
         "c-table__head--hidden": groupBy && allGroupsCollapsed && h.hideCollapsed
       }),
@@ -337,31 +340,31 @@ export var DataTable = function DataTable(_ref) {
       onMouseLeave: cellMouseOut,
       "data-key": h.key,
       style: h.style
-    }, isCollapsible && groupBy && index === 0 && /*#__PURE__*/React.createElement("span", {
+    }, isCollapsible && groupBy && index === 0 && /*#__PURE__*/_react.default.createElement("span", {
       className: "c-table__head__icon-wrapper",
       onClick: toggleAllCollapsed,
       "data-test": "toggle-collapse"
-    }, hasCollapsed ? /*#__PURE__*/React.createElement(ExpandAllIcon, {
+    }, hasCollapsed ? /*#__PURE__*/_react.default.createElement(_ExpandAll.default, {
       className: "c-table__head__icon-wrapper__icon"
-    }) : /*#__PURE__*/React.createElement(CollapseAllIcon, {
+    }) : /*#__PURE__*/_react.default.createElement(_CollapseAll.default, {
       className: "c-table__head__icon-wrapper__icon"
-    })), hovered === h.key && /*#__PURE__*/React.createElement("div", {
+    })), hovered === h.key && /*#__PURE__*/_react.default.createElement("div", {
       className: "c-table__overlay",
       style: {
-        height: overlayStyles() + "px"
+        height: overlayStyles() + `px`
       }
-    }), /*#__PURE__*/React.createElement("div", {
+    }), /*#__PURE__*/_react.default.createElement("div", {
       onClick: sortColumn,
       "data-index": index,
-      className: classNames("c-table__icon-wrapper", {
+      className: (0, _classnames.default)("c-table__icon-wrapper", {
         "cursor-pointer": h.sortable === true
       })
-    }, /*#__PURE__*/React.createElement("span", {
+    }, /*#__PURE__*/_react.default.createElement("span", {
       className: "c-table__label"
-    }, h.label), h.sortable && /*#__PURE__*/React.createElement(SortIcon, {
+    }, h.label), h.sortable && /*#__PURE__*/_react.default.createElement(_SortIcon.default, {
       width: "10px",
       height: "10px",
-      className: classNames("c-table__icon", {
+      className: (0, _classnames.default)("c-table__icon", {
         "c-table__icon--inactive": h.key !== active,
         "c-table__icon--active": h.key === active,
         "c-table__icon--asc": columnDirection === SortDirection.Asc && h.key === active,
@@ -370,5 +373,6 @@ export var DataTable = function DataTable(_ref) {
     })));
   }))), loading ? renderPlaceholders : renderRows);
 };
+exports.DataTable = DataTable;
 DataTable.displayName = "DataTable";
 //# sourceMappingURL=DataTable.js.map