playbook_ui 12.26.0.pre.alpha.multiselectfixes797 → 12.26.0.pre.alpha.multiselectfixes821

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: bb28619d3962e184fa90f3ae74186c2ae1af998512701e96ac16b4773af46e03
-  data.tar.gz: 1292e10c121acf557424b1182a40d975c3d048beb1671e04953845033778e049
+  metadata.gz: 3921a5868e63be4fc845ce62bf461e9a529105ca767a7bf08a6e59750afd1a7e
+  data.tar.gz: a8fdd12e4f31427f8bafafd74cadb518e8904c91ddf05dd611b511b3b365d415
 SHA512:
-  metadata.gz: 5ca7d7d6b91997cd0cdf8f9f9c1064006b83080c618bb5412f291b21a9c3e973f42001b6fae6b4ddec7e37f19c1dac859c926ac8d4bd987f063ae3e0fb9a373d
-  data.tar.gz: bc47e4d4e8b137a3ac76db1f2c3578295dad61e9dd50a9af8b1b91a27274e14d679749144ca36cc01405971cd3bf728624294b1dde468529abe568a821351eab
+  metadata.gz: 6e18e3d7e15956c2847c3fa8584db5696f19e8e82a1614786c8f7af71587d6a44872efc2f0cd10a62d2400a55ae7d1a0300e3f5437712be859f34a3dcdfa314a
+  data.tar.gz: f1778abccb8f3e4006b3c814b29c8c3a90368f5db3eac1b1875ad67d2164e7a2913c4de4e5f8c84078a70cbd104c84e2122c7cac404dad1c63eb37498377764a

data/app/pb_kits/playbook/pb_multi_level_select/_helper_functions.tsx

@@ -1,58 +1,16 @@
-//function for unchecking items in formattedData
-export const unCheckIt = (
-  formattedData: { [key: string]: any }[],
-  id: string
-) => {
-  formattedData.map((item: { [key: string]: any }) => {
-    if (item.id === id && item.checked) {
-      item.checked = false;
-    }
-    if (item.children && item.children.length > 0) {
-      unCheckIt(item.children, id);
-    }
-    return item;
-  });
-};
-
 //function to retrieve all ancestors of unchecked item and set checked to false
 export const getAncestorsOfUnchecked = (
-  formattedData: { [key: string]: any }[],
+  data: { [key: string]: any }[],
   item: { [key: string]: any }
 ) => {
   if (item.parent_id) {
-    const ancestors = filterFormattedDataById(formattedData, item.parent_id);
-    ancestors[0].checked = false;
-
-    if (ancestors[0].parent_id) {
-      getAncestorsOfUnchecked(formattedData, ancestors[0]);
-    }
+    const ancestor = filterFormattedDataById(data, item.parent_id);
+    ancestor[0].checked = false;
+    ancestor[0].parent_id && getAncestorsOfUnchecked(data, ancestor[0])
   }
+  return data;
 };
-
-//recursively check all child and grandchild items if parent checked
-export const checkedRecursive = (item: { [key: string]: any }) => {
-  if (!item.checked) {
-    item.checked = true;
-  }
-  if (item.children && item.children.length > 0) {
-    item.children.forEach((childItem: { [key: string]: any }) => {
-      checkedRecursive(childItem);
-    });
-  }
-};
-
-//recursively uncheck all child and grandchild items if parent unchecked
-export const unCheckedRecursive = (item: { [key: string]: any }) => {
-  if (item.checked) {
-    item.checked = false;
-  }
-  if (item.children && item.children.length > 0) {
-    item.children.forEach((childItem: { [key: string]: any }) => {
-      unCheckedRecursive(childItem);
-    });
-  }
-};
-
+  
 //function is going over formattedData and returning all objects that match the
 //id of the clicked item from the dropdown
 export const filterFormattedDataById = (
@@ -64,6 +22,7 @@ export const filterFormattedDataById = (
     for (const item of data) {
       if (item.id.toLowerCase() === (term.toLowerCase())) {
         matched.push(item);
+        return
       }
 
       if (item.children && item.children.length > 0) {
@@ -116,116 +75,57 @@ export const getCheckedItems = (
   });
   return checkedItems;
 };
+    
+export const getDefaultCheckedItems = (treeData:{ [key: string]: any }[]) => {
+  const checkedDefault: { [key: string]: any }[] = [];
+
+  const traverseTree = (items:{ [key: string]: any }[]) => {
+    items.forEach((item:{ [key: string]: any }) => {
+      if (item.checked) {
+        if (item.children && item.children.length > 0) {
+          const uncheckedChildren = item.children.filter((child:{ [key: string]: any }) => !child.checked);
+          if (uncheckedChildren.length === 0) {
+            checkedDefault.push(item);
+            return;
+          }
+        } else {
+          const parent = items.find((parentItem:{ [key: string]: any }) => parentItem.id === item.parentId);
+          if (!parent || !parent.checked) {
+            checkedDefault.push(item);
+          }
+        }
+      }
 
-export const getChildIds = (
-  item: { [key: string]: any },
-  defaultArray: { [key: string]: any }[]
-) => {
-  let childIds: string[] = [];
-  item.children.forEach((child: { [key: string]: any }) => {
-    childIds.push(child.id);
-    if (child.children && child.children.length > 0) {
-      const childChildIds = getChildIds(child, defaultArray);
-      childIds.push(...childChildIds);
-    }
-  });
-  return childIds;
-};
-
-export const updateReturnItems = (newChecked: { [key: string]: any }[]) => {
-  const updatedCheckedItems: { [key: string]: any }[] = [];
-  for (const item of newChecked) {
-    if (item.children && item.children.length > 0) {
-      const allChildrenChecked = item.children.every(
-        (child: { [key: string]: any }) => child.checked
-      );
-      if (allChildrenChecked) {
-        updatedCheckedItems.push(item);
+      if (item.children && item.children.length > 0) {
+        traverseTree(item.children);
       }
-    }
-    const childItem = updatedCheckedItems.some((x) => x.id === item?.parent_id);
-    if (!childItem) {
-      updatedCheckedItems.push(item);
-    }
-  }
-  const filteredReturn = updatedCheckedItems.filter((item) => {
-    return !updatedCheckedItems.find(
-      (otherItem) => otherItem.id === item.parent_id
-    );
-  });
-  return filteredReturn;
+    });
+  };
+
+  traverseTree(treeData);
+
+  return checkedDefault;
 };
 
-export const recursiveReturnOnlyParent = (
-  items: { [key: string]: any },
-  formattedData: { [key: string]: any }[],
-  defaultReturn: { [key: string]: any }[],
-  setDefaultReturn: any
+export const recursiveCheckParent = (
+  item: { [key: string]: any },
+  data:any
 ) => {
-  const parent = filterFormattedDataById(formattedData, items.parent_id);
+  if (item.parent_id !== null) {
+  const parent = filterFormattedDataById(data, item.parent_id);
   const allChildrenChecked = parent[0].children.every(
     (child: { [key: string]: any }) => child.checked
   );
   if (allChildrenChecked) {
-    // Only return the parent and remove its children from defaultReturn
     parent[0].checked = true;
-    const filteredDefaultReturn = defaultReturn.filter((item) => {
-      // Remove children of the specific parent
-      if (
-        parent[0].children.find(
-          (child: { [key: string]: any }) => child.id === item.id
-        )
-      ) {
-        return false;
-      }
-    });
-    setDefaultReturn([...filteredDefaultReturn, parent[0]]);
-    // Check if the parent has a parent and its children are all checked
     const parentHasParent = parent[0].parent_id !== null;
     if (parentHasParent) {
-      recursiveReturnOnlyParent(
+      recursiveCheckParent(
         parent[0],
-        formattedData,
-        filteredDefaultReturn,
-        setDefaultReturn
+        data
       );
     }
-  } else {
-    const checkedChildren = parent[0].children.filter(
-      (child: { [key: string]: any }) => child.checked
-    );
-    const updatedDefaultReturn = [...defaultReturn, ...checkedChildren];
-    setDefaultReturn(updatedDefaultReturn);
-  }
-};
-
-export const removeChildrenIfParentChecked = (
-  items: { [key: string]: any },
-  defaultReturn: { [key: string]: any }[],
-  setDefaultReturn: any
-) => {
-  const childIds = getChildIds(items, defaultReturn);
-  const filteredDefaultArray = defaultReturn.filter(
-    (item: { [key: string]: any }) => childIds !== item.id
-  );
-  setDefaultReturn([...filteredDefaultArray, items]);
-};
-
-export const areAllCheckedFalse = (data:any) => {
-  if (!Array.isArray(data)) {
-    return;
-  }
-  for (const item of data) {
-    if (item.checked !== false) {
-      return false; // Return false if any item is not checked: false
-    }
-
-    if (item.children && item.children.length > 0) {
-      if (!areAllCheckedFalse(item.children)) {
-        return false; // Return false if any nested item is not checked: false
-      }
-    }
-  }
-
-  return true; // Return true if all items are checked: false
-};
+}
+}
+return data;
+}

data/app/pb_kits/playbook/pb_multi_level_select/_multi_level_select.tsx

@@ -6,19 +6,15 @@ import Icon from "../pb_icon/_icon";
 import Checkbox from "../pb_checkbox/_checkbox";
 import FormPill from "../pb_form_pill/_form_pill";
 import CircleIconButton from "../pb_circle_icon_button/_circle_icon_button";
+import { cloneDeep } from "lodash";
+
 import {
-  unCheckIt,
   getAncestorsOfUnchecked,
-  unCheckedRecursive,
-  checkedRecursive,
   filterFormattedDataById,
   findByFilter,
   getCheckedItems,
-  updateReturnItems,
-  recursiveReturnOnlyParent,
-  removeChildrenIfParentChecked,
-  getChildIds,
-  areAllCheckedFalse
+  getDefaultCheckedItems,
+  recursiveCheckParent,
 } from "./_helper_functions";
 
 type MultiLevelSelectProps = {
@@ -52,6 +48,8 @@ const MultiLevelSelect = (props: MultiLevelSelectProps) => {
 
   const dropdownRef = useRef(null);
 
+  //state for expanded property
+  const [expanded, setExpanded] = useState([]);
   //state for whether dropdown is open or closed
   const [isClosed, setIsClosed] = useState(true);
   //state from onchange for textinput, to use for filtering to create typeahead
@@ -59,68 +57,103 @@ const MultiLevelSelect = (props: MultiLevelSelectProps) => {
   //this is essentially the return that the user will get when they use the kit
   const [returnedArray, setReturnedArray] = useState([]);
   //formattedData with checked and parent_id added
-  const [formattedData, setFormattedData] = useState(treeData);
-  //toggle chevron in dropdown
-  //@ts-ignore
-  const [isToggled, setIsToggled] = useState<{ [id: number]: boolean }>({}); 
+  const [formattedData, setFormattedData] = useState([]);
   //state for return for default
   const [defaultReturn, setDefaultReturn] = useState([]);
 
   useEffect(() => {
-    let el = document.getElementById(`pb_data_wrapper_${id}`);
-    if (el) {
-      el.setAttribute(
-        "data-tree",
-        JSON.stringify(returnAllSelected ? returnedArray : defaultReturn)
-      );
-    }
-    returnAllSelected
-      ? onSelect(returnedArray)
-      : onSelect(
-          defaultReturn.filter(
-            (item, index, self) =>
-              index === self.findIndex((obj) => obj.id === item.id)
-          )
-        );
-        console.log("RETURN", returnedArray)
-  }, [returnedArray, defaultReturn]);
-
-  useEffect(() => {
-    console.log("TREEDATA", treeData)
-    //Create new formattedData array for use
     setFormattedData(addCheckedAndParentProperty(treeData));
-    //if any items already checked in first render, set return accordingly
-    const initialChecked = getCheckedItems(treeData)
-    console.log("INITIAl CHECKED", initialChecked)
-    const initialUnchecked = areAllCheckedFalse(treeData)
-    console.log("INIITAL UNCHECKED", initialUnchecked)
-    initialChecked && returnAllSelected && setReturnedArray(initialChecked)
-    initialChecked && !returnAllSelected && setDefaultReturn(initialChecked)
-    // initialUnchecked && returnAllSelected && setReturnedArray([])
-    // initialUnchecked && !returnAllSelected && setDefaultReturn([])
-
   }, [treeData]);
 
-  useEffect(()=> {
+  useEffect(() => {
+    if (returnAllSelected) {
+      setReturnedArray(getCheckedItems(formattedData));
+    } else {
+      setDefaultReturn(getDefaultCheckedItems(formattedData));
+    }
+  }, [formattedData]);
+
+  useEffect(() => {
     // Function to handle clicks outside the dropdown
     const handleClickOutside = (event: any) => {
       if (dropdownRef.current && !dropdownRef.current.contains(event.target)) {
         setIsClosed(true);
       }
     };
-        // Attach the event listener
-        window.addEventListener("click", handleClickOutside);
-        // Clean up the event listener on unmount
-        return () => {
-          window.removeEventListener("click", handleClickOutside);
-        };
-  },[])
+    // Attach the event listener
+    window.addEventListener("click", handleClickOutside);
+    // Clean up the event listener on unmount
+    return () => {
+      window.removeEventListener("click", handleClickOutside);
+    };
+  }, []);
+
+  const modifyRecursive = (tree: { [key: string]: any }[], check: boolean) => {
+    if (!Array.isArray(tree)) {
+      return;
+    }
+    return tree.map((item: { [key: string]: any }) => {
+      item.checked = check;
+      item.children = modifyRecursive(item.children, check);
+      return item;
+    });
+  };
+
+  //iterate over tree, find item and set checked or unchecked
+  const modifyValue = (
+    id: string,
+    tree: { [key: string]: any }[],
+    check: boolean
+  ) => {
+    if (!Array.isArray(tree)) {
+      return;
+    }
+    return tree.map((item: any) => {
+      if (item.id != id) item.children = modifyValue(id, item.children, check);
+      else {
+        item.checked = check;
+        item.children = modifyRecursive(item.children, check);
+      }
+
+      return item;
+    });
+  };
+
+  //clone tree, check items + children
+  const checkItem = (item: { [key: string]: any }) => {
+    const tree = cloneDeep(formattedData);
+    if (returnAllSelected) {
+      return modifyValue(item.id, tree, true);
+    } else {
+      const checkedTree = modifyValue(item.id, tree, true);
+      return recursiveCheckParent(item, checkedTree);
+    }
+  };
+
+  //clone tree, uncheck items + children
+  const unCheckItem = (item: { [key: string]: any }) => {
+    const tree = cloneDeep(formattedData);
+    if (returnAllSelected) {
+      return modifyValue(item.id, tree, false);
+    } else {
+      const uncheckedTree = modifyValue(item.id, tree, false);
+      return getAncestorsOfUnchecked(uncheckedTree, item);
+    }
+  };
+
+  //setformattedData with proper properties
+  const changeItem = (item: { [key: string]: any }, check: boolean) => {
+    const tree = check ? checkItem(item) : unCheckItem(item);
+    setFormattedData(tree);
+
+    return tree;
+  };
 
   //function to map over data and add parent_id + depth property to each item
   const addCheckedAndParentProperty = (
     treeData: { [key: string]: any }[],
     parent_id: string = null,
-    depth: number = 0,
+    depth: number = 0
   ) => {
     if (!Array.isArray(treeData)) {
       return;
@@ -132,10 +165,14 @@ const MultiLevelSelect = (props: MultiLevelSelectProps) => {
         depth,
       };
       if (newItem.children && newItem.children.length > 0) {
+        const children =
+          item.checked && !returnAllSelected
+            ? modifyRecursive(item.children, true)
+            : item.children;
         newItem.children = addCheckedAndParentProperty(
-          newItem.children,
+          children,
           newItem.id,
-          depth + 1,
+          depth + 1
         );
       }
       return newItem;
@@ -146,37 +183,13 @@ const MultiLevelSelect = (props: MultiLevelSelectProps) => {
   const handlePillClose = (event: any, clickedItem: { [key: string]: any }) => {
     // prevents the dropdown from closing when clicking on the pill
     event.stopPropagation();
+    const updatedTree = changeItem(clickedItem, false);
     //logic for removing items from returnArray or defaultReturn when pills clicked
     if (returnAllSelected) {
-      if (returnedArray.includes(clickedItem)) {
-        if (clickedItem.children && clickedItem.children.length > 0) {
-          const childrenOfChecked = getChildIds(clickedItem, returnedArray);
-          const updatedFiltered = returnedArray
-            .filter((item) => item !== clickedItem)
-            .filter((item) => !childrenOfChecked.includes(item.id));
-          setReturnedArray(updatedFiltered);
-        } else {
-          const updatedFiltered = returnedArray.filter(
-            (item) => item !== clickedItem
-          );
-          setReturnedArray(updatedFiltered);
-        }
-      }
+      onSelect(getCheckedItems(updatedTree));
     } else {
-      if (defaultReturn.includes(clickedItem)) {
-        getAncestorsOfUnchecked(formattedData, clickedItem);
-        const newChecked = getCheckedItems(formattedData);
-        const filteredReturn = updateReturnItems(newChecked).filter(
-          (item) => item.id !== clickedItem.id
-        );
-        setDefaultReturn(filteredReturn);
-      }
-    }
-    if (clickedItem.children && clickedItem.children.length > 0) {
-      unCheckedRecursive(clickedItem);
+      onSelect(getDefaultCheckedItems(updatedTree));
     }
-    //logic to uncheck clickedItem in formattedData
-    unCheckIt(formattedData, clickedItem.id);
   };
 
   //handle click on input wrapper(entire div with pills, typeahead, etc) so it doesn't close when input or form pill is clicked
@@ -192,95 +205,36 @@ const MultiLevelSelect = (props: MultiLevelSelectProps) => {
   };
 
   //Main function to handle any click inside dropdown
-  const handledropdownItemClick = (e: any) => {
+  const handledropdownItemClick = (e: any, check: boolean) => {
     const clickedItem = e.target.parentNode.id;
     //setting filterItem to "" will clear textinput and clear typeahead
     setFilterItem("");
 
     const filtered = filterFormattedDataById(formattedData, clickedItem);
-    //check and uncheck all children of checked/unchecked parent item
-    if (filtered[0].children && filtered[0].children.length > 0) {
-      if (filtered[0].checked) {
-        filtered[0].children.forEach((item: { [key: string]: any }) => {
-          checkedRecursive(item);
-        });
-      } else if (!filtered[0].checked) {
-        filtered[0].children.forEach((item: { [key: string]: any }) => {
-          unCheckedRecursive(item);
-        });
-      }
-    }
-
-    const checkedItems = getCheckedItems(formattedData);
-
-    //checking and unchecking items for returnAllSelected variant
-    if (returnedArray.includes(filtered[0])) {
-      if (!filtered[0].checked) {
-        if (filtered[0].children && filtered[0].children.length > 0) {
-          const childrenOfChecked = getChildIds(filtered[0], returnedArray);
-          const updatedFiltered = returnedArray
-            .filter((item) => item !== filtered[0])
-            .filter((item) => !childrenOfChecked.includes(item.id));
-
-          setReturnedArray(updatedFiltered);
-        } else {
-          const updatedFiltered = returnedArray.filter(
-            (item) => item !== filtered[0]
-          );
-          setReturnedArray(updatedFiltered);
-        }
-      }
+    const updatedTree = changeItem(filtered[0], check);
+    console.log(updatedTree);
+    if (returnAllSelected) {
+      onSelect(getCheckedItems(updatedTree));
     } else {
-      setReturnedArray(checkedItems);
-    }
-
-    //when item is unchecked for default variant
-    if (!filtered[0].checked && !returnAllSelected) {
-      //uncheck parent and grandparent if any child unchecked
-      getAncestorsOfUnchecked(formattedData, filtered[0]);
-
-      const newChecked = getCheckedItems(formattedData);
-      //get all checked items, and filter to check if all children checked, if yes return only parent
-      const filteredReturn = updateReturnItems(newChecked);
-      setDefaultReturn(filteredReturn);
-    }
-
-    //when item is checked for default variant
-    if (!returnAllSelected && filtered[0].checked) {
-      //if checked item has children
-      if (filtered[0].children && filtered[0].children.length > 0) {
-        removeChildrenIfParentChecked(
-          filtered[0],
-          defaultReturn,
-          setDefaultReturn
-        );
-      }
-
-      //if clicked item has parent_id, find parent and check if all children checked or not
-      if (filtered[0].parent_id !== null) {
-        recursiveReturnOnlyParent(
-          filtered[0],
-          formattedData,
-          defaultReturn,
-          setDefaultReturn
-        );
-      } else {
-        setDefaultReturn([filtered[0]]);
-      }
+      onSelect(getDefaultCheckedItems(updatedTree));
     }
   };
 
+  const isExpanded = (item: any) => expanded.indexOf(item.id) > -1;
+
   //handle click on chevron toggles in dropdown
   const handleToggleClick = (id: string, event: React.MouseEvent) => {
     event.stopPropagation();
-    setIsToggled((prevState: { [id: string]: boolean }) => ({
-      ...prevState,
-      [id]: !prevState[id],
-    }));
     const clickedItem = filterFormattedDataById(formattedData, id);
-
     if (clickedItem) {
-      clickedItem[0].expanded = !clickedItem[0].expanded;
+      let expandedArray = [...expanded];
+      const itemExpanded = isExpanded(clickedItem[0]);
+
+      if (itemExpanded)
+        expandedArray = expandedArray.filter((i) => i != clickedItem[0].id);
+      else expandedArray.push(clickedItem[0].id);
+
+      setExpanded(expandedArray);
     }
   };
 
@@ -292,23 +246,23 @@ const MultiLevelSelect = (props: MultiLevelSelectProps) => {
           items.map((item: { [key: string]: any }) => {
             return (
               <>
-                <li
-                  key={item.id}
-                  className="dropdown_item"
-                  data-name={item.id}
-                >
+                <li key={item.id} className="dropdown_item" data-name={item.id}>
                   <div className="dropdown_item_checkbox_row">
                     <div
-                      key={
-                        item.expanded ? "chevron-down" : "chevron-right"
-                      }
+                      key={isExpanded(item) ? "chevron-down" : "chevron-right"}
                     >
                       <CircleIconButton
                         icon={
-                          item.expanded ? "chevron-down" : "chevron-right"
+                          isExpanded(item) ? "chevron-down" : "chevron-right"
+                        }
+                        className={
+                          item.children && item.children.length > 0
+                            ? ""
+                            : "toggle_icon"
+                        }
+                        onClick={(event: any) =>
+                          handleToggleClick(item.id, event)
                         }
-                        className={item.children && item.children.length > 0 ? "" : "toggle_icon"}
-                        onClick={(event) => handleToggleClick(item.id, event)}
                         variant="link"
                       />
                     </div>
@@ -319,13 +273,12 @@ const MultiLevelSelect = (props: MultiLevelSelectProps) => {
                         name={item.label}
                         value={item.label}
                         onChange={(e) => {
-                          item.checked = !item.checked;
-                          handledropdownItemClick(e);
+                          handledropdownItemClick(e, !item.checked);
                         }}
                       />
                     </Checkbox>
                   </div>
-                  {item.expanded &&
+                  {isExpanded(item) &&
                     item.children &&
                     item.children.length > 0 &&
                     !filterItem && ( // Show children if expanded is true
@@ -350,25 +303,20 @@ const MultiLevelSelect = (props: MultiLevelSelectProps) => {
                     key={index}
                     text={item.label}
                     size="small"
-                    onClick={(event) => handlePillClose(event, item)}
+                    onClick={(event: any) => handlePillClose(event, item)}
                   />
                 ))
               : null}
             {!returnAllSelected &&
               defaultReturn.length !== 0 &&
-              defaultReturn
-                .filter(
-                  (item, index, self) =>
-                    index === self.findIndex((obj) => obj.id === item.id)
-                )
-                .map((item, index) => (
-                  <FormPill
-                    key={index}
-                    text={item.label}
-                    size="small"
-                    onClick={(event) => handlePillClose(event, item)}
-                  />
-                ))}
+              defaultReturn.map((item, index) => (
+                <FormPill
+                  key={index}
+                  text={item.label}
+                  size="small"
+                  onClick={(event: any) => handlePillClose(event, item)}
+                />
+              ))}
             {returnedArray.length !== 0 && returnAllSelected && <br />}
             {defaultReturn.length !== 0 && !returnAllSelected && <br />}
             <input