@wavelengthusaf/components 2.7.3 → 2.8.0

package/dist/cjs/index.cjs

@@ -6114,6 +6114,7 @@ function DefaultPagination({ totalPages, currentPageNumber, siblingCount = 1, bo
     );
   }
 }
+var WavelengthPagination_default = DefaultPagination;
 
 // src/components/TextField/WavelengthTextField.tsx
 
@@ -6247,6 +6248,368 @@ function WavelengthTextField(props) {
   return null;
 }
 
+// src/components/DataTable/WavelengthDataTable.tsx
+
+
+
+var ModalInputDiv = _styledcomponents2.default.div`
+  display: flex;
+  flex-direction: column; /* Corrected this line */
+  gap: 3px;
+  margin: 3px;
+
+  label {
+    align-self: flex-start;
+    color: #c6c7cc;
+  }
+
+  input,
+  select {
+    width: 100%;
+    padding: 12px 20px;
+    margin: 8px 0;
+    box-sizing: border-box;
+    border: none;
+    outline: none;
+    border-bottom: 2px solid #c6c7cc;
+
+    &:hover {
+      border-bottom: 2px solid black;
+    }
+
+    &:focus {
+      border-bottom: 2px solid #8fd8ff;
+    }
+  }
+`;
+var ModalOverlay = _styledcomponents2.default.div`
+  position: fixed;
+  bottom: 19%;
+  right: 15%;
+  width: 100%;
+  height: 100%;
+  background-color: rgba(0, 0, 0, 0);
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  z-index: 1;
+`;
+var ModalWrapper = _styledcomponents2.default.div`
+  background-color: white;
+  border-radius: 8px;
+  padding: 20px;
+  box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
+  position: relative;
+  min-width: 300px;
+  z-index: 1;
+  display: flex;
+  align-items: center;
+`;
+var ModalClose = _styledcomponents2.default.button`
+  position: absolute;
+  top: 10px;
+  right: 10px;
+  font-size: 20px;
+  cursor: pointer;
+  border: none;
+  background: none;
+  z-index: 2;
+`;
+var TableHeadStyle = _styledcomponents2.default.th`
+  position: relative;
+`;
+var KebabMenu = _styledcomponents2.default.div`
+  display: inline-block;
+  position: absolute;
+  right: 0;
+  top: 2px;
+`;
+var KebabIcon = _styledcomponents2.default.div`
+  cursor: pointer;
+  font-size: 20px;
+  padding: 5px;
+
+  &:hover,
+  &:focus {
+    color: #45beff;
+  }
+  &:active {
+    color: #8fd8ff;
+  }
+`;
+var MenuOptions = _styledcomponents2.default.ul`
+  position: absolute;
+  right: 0;
+  top: 100%;
+  background-color: #f9f9f9;
+  min-width: 160px;
+  box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
+  z-index: 1;
+  list-style: none;
+  padding: 0;
+  margin: 0;
+
+  li {
+    padding: 10px;
+    text-decoration: none;
+    display: block;
+    cursor: pointer;
+
+    &:hover {
+      background-color: #ddd;
+    }
+  }
+`;
+var StyledBoxDiv = _styledcomponents2.default.div`
+  background-color: white;
+  width: 700px;
+  height: 480px;
+  position: relative;
+  border-top-left-radius: 10px;
+  border-top-right-radius: 10px;
+`;
+var StyledNavBoxDiv = _styledcomponents2.default.div`
+  background-color: white;
+  width: 700px;
+  display: flex; /* Make parent a flex-container */
+  justify-content: center;
+  border-bottom-left-radius: 10px;
+  border-bottom-right-radius: 10px;
+
+  box-shadow: 0.5px 3px 5px black;
+`;
+var StyledTd = _styledcomponents2.default.td`
+  border-top: 1px solid #c6c7cc;
+  border-bottom: 1px solid #c6c7cc;
+  padding: 10px 15px;
+  vertical-align: middle;
+`;
+var StyledTableTwo = _styledcomponents2.default.table`
+  width: 95%;
+  height: 95%;
+  border-collapse: collapse;
+  background-color: white;
+  color: black;
+
+  margin-left: auto;
+  margin-right: auto;
+
+  th {
+    position: relative; /* Enable absolute positioning of pseudo-elements */
+    padding: 10px 15px;
+
+    /* Create the partial right border */
+    &:not(:last-child):after {
+      content: ""; /* Ensure the pseudo-element is visible */
+      position: absolute;
+      right: 0; /* Position it on the right side of the th */
+      top: 50%; /* Position it in the vertical center */
+      height: 50%; /* Set the height of the border to be half the height of th */
+      border-right: 1px solid #c6c7cc;
+      transform: translateY(-50%); /* Center it vertically */
+    }
+  }
+`;
+var StyledInput = _styledcomponents2.default.input`
+  height: 100%;
+  width: 100%;
+  outline: none;
+  border: none;
+  color: #8fd8ff;
+`;
+var WavelengthDataTable = ({ data, columns, itemsPerPage, totalPages }) => {
+  const [localData, setLocalData] = _react.useState.call(void 0, data || []);
+  const copiedArray = [...data || []];
+  const [editingId, setEditingId] = _react.useState.call(void 0, null);
+  const [editedColumnKey, setEditedColumnKey] = _react.useState.call(void 0, null);
+  const [editedValue, setEditedValue] = _react.useState.call(void 0, "");
+  const [noRowsOpen, setNoRowsOpen] = _react.useState.call(void 0, false);
+  const [isModalOpen, setIsModalOpen] = _react.useState.call(void 0, false);
+  const [searchItem, setSearchItem] = _react.useState.call(void 0, "");
+  const [selectedValue, setSelectedValue] = _react.useState.call(void 0, _optionalChain([columns, 'access', _37 => _37[0], 'optionalAccess', _38 => _38.key]) || "");
+  const [currentPage, setCurrentPage] = _react.useState.call(void 0, 1);
+  const [isOpen, setIsOpen] = _react.useState.call(void 0, false);
+  const [editingMenuKey, setEditingMenuKey] = _react.useState.call(void 0, null);
+  const menuRef = _react.useRef.call(void 0, null);
+  const modalRef = _react.useRef.call(void 0, null);
+  function isNumeric(value) {
+    return /^\d+$/.test(value);
+  }
+  const handleChange = (event) => {
+    setSelectedValue(event.target.value);
+    setLocalData(copiedArray);
+  };
+  _react.useEffect.call(void 0, () => {
+    if (!selectedValue || searchItem === "") {
+      setLocalData(copiedArray);
+      setNoRowsOpen(false);
+      return;
+    }
+    if (isNumeric(searchItem)) {
+      const filteredItems = localData.filter((item) => item[selectedValue].toString().includes(searchItem));
+      setLocalData(filteredItems);
+      if (filteredItems.length === 0) {
+        setNoRowsOpen(true);
+      } else {
+        setNoRowsOpen(false);
+      }
+    } else {
+      const filteredItems = localData.filter((item) => item[selectedValue].toString().toLowerCase().includes(searchItem.toLowerCase()));
+      if (filteredItems.length === 0) {
+        setNoRowsOpen(true);
+      } else {
+        setLocalData(filteredItems);
+        setNoRowsOpen(false);
+      }
+    }
+  }, [selectedValue, searchItem]);
+  const openModal = () => {
+    setIsModalOpen(true);
+  };
+  const closeModal = () => {
+    setIsModalOpen(false);
+  };
+  _react.useEffect.call(void 0, () => {
+    const handleClickOutside = (event) => {
+      if (isModalOpen && modalRef.current && !modalRef.current.contains(event.target)) {
+        closeModal();
+      }
+    };
+    if (isOpen) {
+      document.addEventListener("mousedown", handleClickOutside);
+    }
+    return () => {
+      document.removeEventListener("mousedown", handleClickOutside);
+    };
+  }, [isModalOpen]);
+  const toggleMenu = (key) => {
+    setIsOpen(!isOpen);
+    setEditingMenuKey(key);
+  };
+  const indexOfLastItem = currentPage * itemsPerPage;
+  const indexOfFirstItem = indexOfLastItem - itemsPerPage;
+  const currentPageData = localData.filter((_, index) => index >= indexOfFirstItem && index < indexOfLastItem);
+  const [sortOrder, setSortOrder] = _react.useState.call(void 0, "asc");
+  const handleSort = (column, sortType) => {
+    const sortedItems = [...localData].sort((a, b) => {
+      const valueA = a[column];
+      const valueB = b[column];
+      if (typeof valueA === "string" && typeof valueB === "string") {
+        if (sortType === "asc") {
+          return valueA.localeCompare(valueB);
+        } else {
+          return valueB.localeCompare(valueA);
+        }
+      } else if (typeof valueA === "number" && typeof valueB === "number") {
+        if (sortType === "asc") {
+          return valueA - valueB;
+        } else {
+          return valueB - valueA;
+        }
+      } else {
+        return 0;
+      }
+    });
+    setLocalData(sortedItems);
+    setSortOrder(sortOrder === "asc" ? "desc" : "asc");
+  };
+  const handleEdit = (id, value, columnKey) => {
+    setEditingId(id);
+    setEditedValue(value);
+    setEditedColumnKey(columnKey);
+  };
+  const saveEdit = (id, editedValue2, columnKey) => {
+    setLocalData(localData.map((item) => id === item.id ? { ...item, [columnKey]: editedValue2 } : item));
+    setEditingId(null);
+  };
+  const handleCancel = () => {
+    setEditingId(null);
+  };
+  const headers = columns.map((column, index) => {
+    return /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, TableHeadStyle, { children: [
+      column.title,
+      /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, KebabMenu, { ref: menuRef, children: [
+        /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+          KebabIcon,
+          {
+            title: `KebabIcon-${index}`,
+            onClick: () => {
+              toggleMenu(column.key);
+            },
+            children: "\u22EE"
+          }
+        ),
+        isOpen && editingMenuKey === column.key && /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, MenuOptions, { children: [
+          sortOrder === "asc" ? /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "li", { title: `MenuListASC-${index}`, onClick: () => handleSort(column.key, "asc"), children: [
+            /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "span", { children: "\u2B06" }),
+            " Sort ASC"
+          ] }) : /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "li", { title: `MenuListDES-${index}`, onClick: () => handleSort(column.key, "desc"), children: [
+            /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "span", { children: "\u2B07" }),
+            " Sort DESC"
+          ] }),
+          /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "li", { title: `MenuListFilterButton-${index}`, onClick: openModal, children: [
+            /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "span", { children: "\u23F7" }),
+            " Filter"
+          ] }),
+          isModalOpen && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, ModalOverlay, { children: /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, ModalWrapper, { ref: modalRef, children: [
+            /* @__PURE__ */ _jsxruntime.jsx.call(void 0, ModalClose, { title: `ModalClose-${index}`, onClick: closeModal, children: "\xD7" }),
+            /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, ModalInputDiv, { children: [
+              /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "label", { htmlFor: "filterSelectId", children: "Columns: " }),
+              /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "select", { title: `filterSelect-${index}`, id: "filterSelectId", value: selectedValue, onChange: handleChange, children: columns.map((item) => /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "option", { children: item.key }, item.key)) })
+            ] }),
+            /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, ModalInputDiv, { children: [
+              /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "label", { htmlFor: "filterInputId", children: "Values: " }),
+              /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+                "input",
+                {
+                  title: `Inputfiltertest-${index}`,
+                  id: "filterInputId",
+                  type: isNumeric(searchItem) ? "number" : "text",
+                  value: searchItem,
+                  onKeyDown: (e) => {
+                    if (e.key === "Backspace") {
+                      setLocalData(copiedArray);
+                    }
+                  },
+                  onChange: (e) => setSearchItem(e.target.value)
+                }
+              )
+            ] })
+          ] }) })
+        ] })
+      ] }, index)
+    ] }, `headCell-${index}`);
+  });
+  const rows = !_optionalChain([currentPageData, 'optionalAccess', _39 => _39.length]) || noRowsOpen ? /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "tr", { children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "td", { title: "NoDataRows", colSpan: columns.length, children: "No data" }) }) : _optionalChain([currentPageData, 'optionalAccess', _40 => _40.map, 'call', _41 => _41((item) => /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "tr", { children: columns.map((column, index2) => {
+    return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, StyledTd, { children: editingId === item.id && editedColumnKey === column.key ? /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+      StyledInput,
+      {
+        title: `styledRow-${item.id}-${column.key}-${index2}`,
+        type: "text",
+        value: editedValue,
+        onChange: (e) => setEditedValue(e.target.value),
+        onBlur: () => saveEdit(item.id, editedValue, column.key),
+        onKeyDown: (e) => {
+          if (e.key === "Enter") {
+            saveEdit(item.id, editedValue, column.key);
+          } else if (e.key === "Escape") {
+            handleCancel();
+          }
+        },
+        autoFocus: true
+      }
+    ) : /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "span", { title: `spanRow-${item.id}-${column.key}-${index2}`, onDoubleClick: () => handleEdit(item.id, item[column.key], column.key), children: item[column.key] }) }, index2);
+  }) }, item.id))]);
+  return /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { children: [
+    /* @__PURE__ */ _jsxruntime.jsx.call(void 0, StyledBoxDiv, { title: "StyledBoxDiv", children: /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, StyledTableTwo, { title: "StyledTable", children: [
+      /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "thead", { children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "tr", { children: headers }) }),
+      /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "tbody", { children: rows })
+    ] }) }),
+    /* @__PURE__ */ _jsxruntime.jsx.call(void 0, StyledNavBoxDiv, { children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, WavelengthPagination_default, { totalPages, currentPageNumber: currentPage, onPageChange: setCurrentPage, style: "circular" }) })
+  ] });
+};
+
+
 
 
 
@@ -6293,7 +6656,7 @@ function WavelengthTextField(props) {
 
 
 
-exports.AppLogo = AppLogo; exports.ButtonIcon = ButtonIcon; exports.ButtonMenu = ButtonMenu; exports.DefaultCarousel = DefaultCarousel; exports.DefaultIcon = DefaultIcon; exports.DefaultPagination = DefaultPagination; exports.ManyPlanesComponent = ManyPlanesComponent; exports.NotAvailablePage = NotAvailablePage; exports.SearchTextField = SearchTextField; exports.SliderCardCarousel = SliderCardCarousel; exports.TestSnackbar = TestSnackbar; exports.WavelengthAppTheme = WavelengthAppTheme; exports.WavelengthAutocomplete = WavelengthAutocomplete; exports.WavelengthBanner = WavelengthBanner2; exports.WavelengthBox = WavelengthBox; exports.WavelengthButton = WavelengthButton; exports.WavelengthCommentDisplay = WavelengthCommentDisplay; exports.WavelengthConfirmationModal = WavelengthConfirmationModal; exports.WavelengthContentModal = WavelengthContentModal; exports.WavelengthContentPlaceholder = WavelengthContentPlaceholder; exports.WavelengthDragAndDrop = WavelengthDragAndDrop; exports.WavelengthDropdown = WavelengthDropdown; exports.WavelengthDropdownButton = WavelengthDropdownButton; exports.WavelengthExampleComponent = WavelengthExampleComponent; exports.WavelengthFileDownloader = WavelengthFileDownloader; exports.WavelengthFooter = WavelengthFooter; exports.WavelengthPlaneTrail = WavelengthPlaneTrail; exports.WavelengthPopUpMenu = WavelengthPopUpMenu; exports.WavelengthProgressBar = WavelengthProgressBar; exports.WavelengthSearch = WavelengthSearch; exports.WavelengthSideBar = WavelengthSideBar; exports.WavelengthSlider = WavelengthSlider; exports.WavelengthSnackbar = WavelengthSnackbar; exports.WavelengthSpinningLogo = WavelengthSpinningLogo; exports.WavelengthSpinningOuterCircle = WavelengthSpinningOuterCircle; exports.WavelengthStandardSnackbar = WavelengthStandardSnackbar; exports.WavelengthStyledButton = WavelengthStyledButton; exports.WavelengthTextField = WavelengthTextField; exports.WavelengthTitleBar = WavelengthTitleBar2; exports.add = add; exports.ascendingRange = ascendingRange; exports.concat = concat; exports.findBestStringMatch = findBestStringMatch; exports.range = range; exports.useOutsideClick = useOutsideClick; exports.useThemeContext = useThemeContext;
+exports.AppLogo = AppLogo; exports.ButtonIcon = ButtonIcon; exports.ButtonMenu = ButtonMenu; exports.DefaultCarousel = DefaultCarousel; exports.DefaultIcon = DefaultIcon; exports.DefaultPagination = DefaultPagination; exports.ManyPlanesComponent = ManyPlanesComponent; exports.NotAvailablePage = NotAvailablePage; exports.SearchTextField = SearchTextField; exports.SliderCardCarousel = SliderCardCarousel; exports.TestSnackbar = TestSnackbar; exports.WavelengthAppTheme = WavelengthAppTheme; exports.WavelengthAutocomplete = WavelengthAutocomplete; exports.WavelengthBanner = WavelengthBanner2; exports.WavelengthBox = WavelengthBox; exports.WavelengthButton = WavelengthButton; exports.WavelengthCommentDisplay = WavelengthCommentDisplay; exports.WavelengthConfirmationModal = WavelengthConfirmationModal; exports.WavelengthContentModal = WavelengthContentModal; exports.WavelengthContentPlaceholder = WavelengthContentPlaceholder; exports.WavelengthDataTable = WavelengthDataTable; exports.WavelengthDragAndDrop = WavelengthDragAndDrop; exports.WavelengthDropdown = WavelengthDropdown; exports.WavelengthDropdownButton = WavelengthDropdownButton; exports.WavelengthExampleComponent = WavelengthExampleComponent; exports.WavelengthFileDownloader = WavelengthFileDownloader; exports.WavelengthFooter = WavelengthFooter; exports.WavelengthPlaneTrail = WavelengthPlaneTrail; exports.WavelengthPopUpMenu = WavelengthPopUpMenu; exports.WavelengthProgressBar = WavelengthProgressBar; exports.WavelengthSearch = WavelengthSearch; exports.WavelengthSideBar = WavelengthSideBar; exports.WavelengthSlider = WavelengthSlider; exports.WavelengthSnackbar = WavelengthSnackbar; exports.WavelengthSpinningLogo = WavelengthSpinningLogo; exports.WavelengthSpinningOuterCircle = WavelengthSpinningOuterCircle; exports.WavelengthStandardSnackbar = WavelengthStandardSnackbar; exports.WavelengthStyledButton = WavelengthStyledButton; exports.WavelengthTextField = WavelengthTextField; exports.WavelengthTitleBar = WavelengthTitleBar2; exports.add = add; exports.ascendingRange = ascendingRange; exports.concat = concat; exports.findBestStringMatch = findBestStringMatch; exports.range = range; exports.useOutsideClick = useOutsideClick; exports.useThemeContext = useThemeContext;
 /*! Bundled license information:
 
 react-is/cjs/react-is.production.min.js: