@ultraviolet/ui 1.88.0 → 1.89.0

package/dist/components/List/ListContext.js

@@ -1,5 +1,5 @@
 import { jsx } from "@emotion/react/jsx-runtime";
-import { createContext, useState, useRef, useCallback, useMemo, useEffect, useContext } from "react";
+import { useContext, createContext, useState, useCallback, useMemo, useEffect } from "react";
 const ListContext = createContext(void 0);
 const checkStateOfCheckboxs = (ids) => {
   const selectableRowCount = Object.keys(ids).length;
@@ -22,9 +22,9 @@ const ListProvider = ({
 }) => {
   const [expandedRowIds, setExpandedRowIds] = useState({});
   const [selectedRowIds, setSelectedRowIds] = useState({});
-  const [lastCheckedIndex, setLastCheckedIndex] = useState(null);
-  const [inRange, setInRange] = useState(/* @__PURE__ */ new Set([]));
-  const refList = useRef(/* @__PURE__ */ new Map());
+  const [lastCheckedCheckbox, setLastCheckedCheckbox] = useState();
+  const [inRange, setInRange] = useState([]);
+  const [refList, setRefList] = useState([]);
   const registerExpandableRow = useCallback((rowId, expanded = false) => {
     setExpandedRowIds((current) => ({
       ...current,
@@ -100,77 +100,79 @@ const ListProvider = ({
   }, [allRowSelectValue, unselectAll, selectAll]);
   const subscribeHandler = useCallback(() => {
     const handlers = [];
-    if (refList.current) {
-      const handleHover = (checkbox, event) => {
-        const isShiftPressed = event.shiftKey;
-        const isHoverActive = isShiftPressed && lastCheckedIndex !== null && !checkbox.disabled;
-        if (isHoverActive) {
-          setInRange((prev) => /* @__PURE__ */ new Set([...prev, checkbox.value]));
-        }
-        if (!lastCheckedIndex && !checkbox.disabled) {
-          setLastCheckedIndex(checkbox.value);
-        }
-      };
-      const handleClickRange = (checkbox) => {
-        const shouldShiftEvent = inRange.size > 0;
-        const isClickInsideRange = inRange.has(checkbox.value);
-        if (shouldShiftEvent && isClickInsideRange) {
-          let checkboxRows = {};
-          refList.current.forEach((value2, key) => {
-            if (inRange.has(key)) {
-              checkboxRows = {
-                ...checkboxRows,
-                // handle the conflict event ( click and onChange in the same time on the last checkbox click)
-                [key]: key === checkbox.value ? !value2.checked : value2.checked
-              };
+    const updatedRefList = [...new Set(refList.filter((checkbox) => document.contains(checkbox.current) && checkbox.current))];
+    setRefList(updatedRefList);
+    const handleHover = (index, isShiftPressed, leaving) => {
+      const newRange = [];
+      if (lastCheckedCheckbox) {
+        const targetCheckbox = updatedRefList.find((checkbox) => checkbox.current?.value === lastCheckedCheckbox);
+        if (isShiftPressed && targetCheckbox && !leaving) {
+          const lastCheckedIndex = updatedRefList.indexOf(targetCheckbox);
+          const start = Math.min(lastCheckedIndex, index) - (Math.min(lastCheckedIndex, index) === index ? 1 : 0);
+          const end = Math.max(lastCheckedIndex, index);
+          updatedRefList.forEach((checkbox, i) => {
+            if (!checkbox.current?.disabled && i > start && i < end) {
+              newRange.push(checkbox.current?.value);
             }
           });
-          const state = checkStateOfCheckboxs(checkboxRows);
-          const checkboxIds = Object.keys(checkboxRows);
-          if (state === true) {
-            selectRows(checkboxIds, false);
-          }
-          if ([false, "indeterminate"].includes(state)) {
-            selectRows(checkboxIds, true);
-          }
         }
-        setTimeout(() => {
-          setInRange(/* @__PURE__ */ new Set([]));
-          setLastCheckedIndex(checkbox.value);
-        }, 1);
-      };
-      const handleOnChange = (checkbox) => {
-        const shouldHandleEvent = inRange.size === 0;
-        if (shouldHandleEvent) {
-          selectRows([checkbox.value], !checkbox.checked);
+      }
+      setInRange(newRange);
+    };
+    const handleClickRange = (currentCheckbox, index, isShiftPressed) => {
+      if (isShiftPressed) {
+        const checkboxesInRange = [];
+        const targetCheckbox = updatedRefList.find((checkbox) => checkbox.current?.value === lastCheckedCheckbox);
+        const lastCheckedIndex = targetCheckbox ? updatedRefList.indexOf(targetCheckbox) : void 0;
+        if (lastCheckedIndex !== void 0) {
+          const start = Math.min(lastCheckedIndex, index) - (Math.min(lastCheckedIndex, index) === index ? 1 : 0);
+          const end = Math.max(lastCheckedIndex, index);
+          updatedRefList.forEach((checkbox, key) => {
+            if (start < key && key <= end) {
+              if (!checkbox.current?.disabled) {
+                checkboxesInRange.push(checkbox.current?.value);
+              }
+            }
+          });
+          selectRows(checkboxesInRange, currentCheckbox.checked);
+          setLastCheckedCheckbox(currentCheckbox.value);
         }
-        setLastCheckedIndex(checkbox.value);
+      } else if (index === 0) setLastCheckedCheckbox(void 0);
+      setTimeout(() => {
+        setInRange([]);
+        setLastCheckedCheckbox(currentCheckbox.value);
+      }, 1);
+    };
+    refList.forEach((checkbox, index) => {
+      const clickHandler = function clickHandler2(event) {
+        handleClickRange(this, index, event.shiftKey);
       };
-      refList.current.forEach((checkbox) => {
-        const clickHandler = (event) => {
-          handleClickRange(event.currentTarget);
-        };
-        const hoverHandler = (event) => {
-          handleHover(event.currentTarget, event);
-        };
-        const changeHandler = (event) => {
-          handleOnChange(event.currentTarget);
-        };
-        checkbox.addEventListener("change", changeHandler);
-        checkbox.addEventListener("click", clickHandler);
-        checkbox.addEventListener("mouseover", hoverHandler);
+      const hoverEnteringHandler = (event) => handleHover(index, event.shiftKey, false);
+      const hoverLeavingHandler = (event) => handleHover(index, event.shiftKey, true);
+      if (checkbox.current) {
+        checkbox.current.addEventListener("click", clickHandler);
+        checkbox.current.addEventListener("mousemove", hoverEnteringHandler);
+        checkbox.current.addEventListener("mouseout", hoverLeavingHandler);
         handlers.push(() => {
-          checkbox.removeEventListener("change", changeHandler);
-          checkbox.removeEventListener("click", clickHandler);
-          checkbox.removeEventListener("mouseover", hoverHandler);
+          if (checkbox.current) {
+            checkbox.current.removeEventListener("click", clickHandler);
+            checkbox.current.removeEventListener("mouseout", hoverEnteringHandler);
+            checkbox.current.removeEventListener("mousemove", hoverLeavingHandler);
+          }
         });
-      });
-    }
+      }
+    });
     return () => {
       handlers.forEach((cleanup) => cleanup());
     };
-  }, [inRange, lastCheckedIndex, selectRows]);
-  useEffect(subscribeHandler, [subscribeHandler]);
+  }, [lastCheckedCheckbox, selectRows]);
+  useEffect(() => {
+    subscribeHandler();
+  }, [subscribeHandler]);
+  const handleOnChange = useCallback((value2, checked) => {
+    selectRows([value2], !checked);
+    setLastCheckedCheckbox(value2);
+  }, [selectRows]);
   const value = useMemo(() => ({
     allRowSelectValue,
     selectAllHandler,
@@ -181,7 +183,6 @@ const ListProvider = ({
     expandedRowIds,
     expandRow,
     inRange,
-    mapCheckbox: refList.current,
     registerExpandableRow,
     registerSelectableRow,
     selectable,
@@ -189,8 +190,11 @@ const ListProvider = ({
     selectedRowIds,
     selectRow,
     unselectAll,
-    unselectRow
-  }), [allRowSelectValue, selectAllHandler, subscribeHandler, collapseRow, columns, expandButton, expandedRowIds, expandRow, inRange, refList, registerExpandableRow, registerSelectableRow, selectable, selectAll, selectedRowIds, selectRow, unselectAll, unselectRow]);
+    unselectRow,
+    refList,
+    setRefList,
+    handleOnChange
+  }), [allRowSelectValue, selectAllHandler, subscribeHandler, collapseRow, columns, expandButton, expandedRowIds, expandRow, inRange, refList, registerExpandableRow, registerSelectableRow, selectable, selectAll, selectedRowIds, selectRow, unselectAll, unselectRow, handleOnChange]);
   return /* @__PURE__ */ jsx(ListContext.Provider, { value, children });
 };
 const useListContext = () => {