playbook_ui 12.26.0.pre.alpha.multiselectfixes825 → 12.26.0.pre.alpha.railsmultilevelimprovements805

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

@@ -1,31 +1,36 @@
-import React, { useState, useEffect, useRef } from "react";
-import classnames from "classnames";
-import { buildAriaProps, buildCss, buildDataProps } from "../utilities/props";
-import { globalProps, GlobalProps } from "../utilities/globalProps";
-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 React, { useState, useEffect, useRef } from "react"
+import classnames from "classnames"
+import { buildAriaProps, buildCss, buildDataProps } from "../utilities/props"
+import { globalProps, GlobalProps } from "../utilities/globalProps"
+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 {
+  unCheckIt,
   getAncestorsOfUnchecked,
+  unCheckedRecursive,
+  checkedRecursive,
   filterFormattedDataById,
   findByFilter,
   getCheckedItems,
-  getDefaultCheckedItems,
-  recursiveCheckParent,
-} from "./_helper_functions";
+  updateReturnItems,
+  recursiveReturnOnlyParent,
+  removeChildrenIfParentChecked,
+  getChildIds,
+} from "./_helper_functions"
 
 type MultiLevelSelectProps = {
-  aria?: { [key: string]: string };
-  className?: string;
-  data?: { [key: string]: string };
-  id?: string;
-  returnAllSelected?: boolean;
-  treeData?: { [key: string]: string }[];
-  onSelect?: (prop: { [key: string]: any }) => void;
-} & GlobalProps;
+  aria?: { [key: string]: string }
+  className?: string
+  data?: { [key: string]: string }
+  id?: string
+  name?: string
+  returnCompleteData?: boolean
+  returnAllSelected?: boolean
+  treeData?: { [key: string]: string }[]
+  onSelect?: (prop: { [key: string]: any }) => void
+} & GlobalProps
 
 const MultiLevelSelect = (props: MultiLevelSelectProps) => {
   const {
@@ -33,121 +38,100 @@ const MultiLevelSelect = (props: MultiLevelSelectProps) => {
     className,
     data = {},
     id,
+    name,
     returnAllSelected = false,
+    returnCompleteData = false,
     treeData,
     onSelect = () => {},
-  } = props;
+  } = props
 
-  const ariaProps = buildAriaProps(aria);
-  const dataProps = buildDataProps(data);
+  const ariaProps = buildAriaProps(aria)
+  const dataProps = buildDataProps(data)
   const classes = classnames(
     buildCss("pb_multi_level_select"),
     globalProps(props),
     className
-  );
+  )
 
-  const dropdownRef = useRef(null);
+  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);
+  const [isClosed, setIsClosed] = useState(true)
   //state from onchange for textinput, to use for filtering to create typeahead
-  const [filterItem, setFilterItem] = useState("");
+  const [filterItem, setFilterItem] = useState("")
   //this is essentially the return that the user will get when they use the kit
-  const [returnedArray, setReturnedArray] = useState([]);
+  const [returnedArray, setReturnedArray] = useState([])
   //formattedData with checked and parent_id added
-  const [formattedData, setFormattedData] = useState([]);
+  const [formattedData, setFormattedData] = useState(treeData)
+  //toggle chevron in dropdown
+  //@ts-ignore
+  const [isToggled, setIsToggled] = useState<{ [id: number]: boolean }>({})
   //state for return for default
-  const [defaultReturn, setDefaultReturn] = useState([]);
+  const [defaultReturn, setDefaultReturn] = useState([])
 
-  useEffect(() => {
-    setFormattedData(addCheckedAndParentProperty(treeData));
-  }, [treeData]);
+  const [formattedReturn, setFormattedReturn] = useState([])
 
-  useEffect(() => {
-    if (returnAllSelected) {
-      setReturnedArray(getCheckedItems(formattedData));
+  const getSelectedIds = (selectedData: { [key: string]: any }[]) => {
+    return selectedData
+      .map((item) => item.id)
+      .filter((value, index, self) => self.indexOf(value) === index)
+  }
+
+  const getValues = () => {
+   if(returnCompleteData){
+    if(returnAllSelected){
+      return setFormattedReturn(returnedArray)
     } else {
-      setDefaultReturn(getDefaultCheckedItems(formattedData));
+      return setFormattedReturn(defaultReturn) 
+    }
+   } else {
+      if(returnAllSelected){
+        setFormattedReturn(getSelectedIds(returnedArray))
+      } else {
+        setFormattedReturn(getSelectedIds(defaultReturn)) 
+      }
     }
-  }, [formattedData]);
+  }
+
+  const updateHiddenInputValue = (value: any) => {
+    const hiddenInput = document.querySelector(
+      "input#" + id
+    ) as HTMLInputElement
+    if (hiddenInput) {
+      hiddenInput.value = JSON.stringify(value)
+    }
+  }
+
+  useEffect(() => {
+    getValues()
+  }, [returnedArray, defaultReturn])
 
   useEffect(() => {
+    onSelect(formattedReturn)
+    updateHiddenInputValue(formattedReturn)
+  }, [formattedReturn])
+
+  useEffect(() => {
+    //Create new formattedData array for use
+    setFormattedData(addCheckedAndParentProperty(treeData))
     // Function to handle clicks outside the dropdown
     const handleClickOutside = (event: any) => {
       if (dropdownRef.current && !dropdownRef.current.contains(event.target)) {
-        setIsClosed(true);
+        setIsClosed(true)
       }
-    };
+    }
+    //if any items already checked in first render, set return accordingly
+    const initialChecked = getCheckedItems(treeData)
+    initialChecked && returnAllSelected && setReturnedArray(initialChecked)
+    initialChecked && !returnAllSelected && setDefaultReturn(initialChecked)
+
     // Attach the event listener
-    window.addEventListener("click", handleClickOutside);
+    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;
+      window.removeEventListener("click", handleClickOutside)
     }
-    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 = (
@@ -156,87 +140,166 @@ const MultiLevelSelect = (props: MultiLevelSelectProps) => {
     depth: number = 0
   ) => {
     if (!Array.isArray(treeData)) {
-      return;
+      return
     }
     return treeData.map((item: { [key: string]: any } | any) => {
       const newItem = {
         ...item,
         parent_id,
         depth,
-      };
+      }
       if (newItem.children && newItem.children.length > 0) {
-        const children =
-          item.checked && !returnAllSelected
-            ? modifyRecursive(item.children, true)
-            : item.children;
         newItem.children = addCheckedAndParentProperty(
-          children,
+          newItem.children,
           newItem.id,
           depth + 1
-        );
+        )
       }
-      return newItem;
-    });
-  };
+      return newItem
+    })
+  }
 
   //click event for x on form pill
   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);
+    event.stopPropagation()
     //logic for removing items from returnArray or defaultReturn when pills clicked
     if (returnAllSelected) {
-      onSelect(getCheckedItems(updatedTree));
+      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)
+        }
+      }
     } else {
-      onSelect(getDefaultCheckedItems(updatedTree));
+      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)
+    }
+    //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
   const handleInputWrapperClick = (e: any) => {
-    e.stopPropagation();
+    e.stopPropagation()
     if (
       e.target.id === "multiselect_input" ||
       e.target.classList.contains("pb_form_pill_tag")
     ) {
-      return;
+      return
     }
-    setIsClosed(!isClosed);
-  };
+    setIsClosed(!isClosed)
+  }
 
   //Main function to handle any click inside dropdown
-  const handledropdownItemClick = (e: any, check: boolean) => {
-    const clickedItem = e.target.parentNode.id;
+  const handledropdownItemClick = (e: any) => {
+    const clickedItem = e.target.parentNode.id
     //setting filterItem to "" will clear textinput and clear typeahead
-    setFilterItem("");
+    setFilterItem("")
 
-    const filtered = filterFormattedDataById(formattedData, clickedItem);
-    const updatedTree = changeItem(filtered[0], check);
-    console.log(updatedTree);
-    if (returnAllSelected) {
-      onSelect(getCheckedItems(updatedTree));
+    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)
+        }
+      }
     } else {
-      onSelect(getDefaultCheckedItems(updatedTree));
+      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)
     }
-  };
 
-  const isExpanded = (item: any) => expanded.indexOf(item.id) > -1;
+    //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]])
+      }
+    }
+  }
 
   //handle click on chevron toggles in dropdown
   const handleToggleClick = (id: string, event: React.MouseEvent) => {
-    event.stopPropagation();
-    const clickedItem = filterFormattedDataById(formattedData, id);
-    if (clickedItem) {
-      let expandedArray = [...expanded];
-      const itemExpanded = isExpanded(clickedItem[0]);
-
-      if (itemExpanded)
-        expandedArray = expandedArray.filter((i) => i != clickedItem[0].id);
-      else expandedArray.push(clickedItem[0].id);
+    event.stopPropagation()
+    setIsToggled((prevState: { [id: string]: boolean }) => ({
+      ...prevState,
+      [id]: !prevState[id],
+    }))
+    const clickedItem = filterFormattedDataById(formattedData, id)
 
-      setExpanded(expandedArray);
+    if (clickedItem) {
+      clickedItem[0].expanded = !clickedItem[0].expanded
     }
-  };
+  }
 
   //rendering formattedData to UI based on typeahead
   const renderNestedOptions = (items: { [key: string]: any }[]) => {
@@ -246,39 +309,34 @@ const MultiLevelSelect = (props: MultiLevelSelectProps) => {
           items.map((item: { [key: string]: any }) => {
             return (
               <>
-                <li key={item.id} className="dropdown_item" data-name={item.id}>
-                  <div className="dropdown_item_checkbox_row">
-                    <div
-                      key={isExpanded(item) ? "chevron-down" : "chevron-right"}
-                    >
+                <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"}>
                       <CircleIconButton
-                        icon={
-                          isExpanded(item) ? "chevron-down" : "chevron-right"
-                        }
+                        icon={item.expanded ? "chevron-down" : "chevron-right"}
                         className={
                           item.children && item.children.length > 0
                             ? ""
                             : "toggle_icon"
                         }
-                        onClick={(event: any) =>
-                          handleToggleClick(item.id, event)
-                        }
-                        variant="link"
+                        onClick={(event) => handleToggleClick(item.id, event)}
+                        variant='link'
                       />
                     </div>
                     <Checkbox text={item.label} id={item.id}>
                       <input
                         checked={item.checked}
-                        type="checkbox"
+                        type='checkbox'
                         name={item.label}
                         value={item.label}
                         onChange={(e) => {
-                          handledropdownItemClick(e, !item.checked);
+                          item.checked = !item.checked
+                          handledropdownItemClick(e)
                         }}
                       />
                     </Checkbox>
                   </div>
-                  {isExpanded(item) &&
+                  {item.expanded &&
                     item.children &&
                     item.children.length > 0 &&
                     !filterItem && ( // Show children if expanded is true
@@ -286,56 +344,67 @@ const MultiLevelSelect = (props: MultiLevelSelectProps) => {
                     )}
                 </li>
               </>
-            );
+            )
           })}
       </ul>
-    );
-  };
+    )
+  }
 
   return (
     <div {...ariaProps} {...dataProps} className={classes} id={id}>
-      <div ref={dropdownRef} className="wrapper">
-        <div className="input_wrapper" onClick={handleInputWrapperClick}>
-          <div className="input_inner_container">
+      <div ref={dropdownRef} className='wrapper'>
+        <div className='input_wrapper' onClick={handleInputWrapperClick}>
+          <div className='input_inner_container'>
+            <input
+              type='hidden'
+              id={id}
+              name={name}
+              value={JSON.stringify(formattedReturn)}
+            />
             {returnedArray.length !== 0 && returnAllSelected
               ? returnedArray.map((item, index) => (
                   <FormPill
                     key={index}
                     text={item.label}
-                    size="small"
-                    onClick={(event: any) => handlePillClose(event, item)}
+                    size='small'
+                    onClick={(event) => handlePillClose(event, item)}
                   />
                 ))
               : null}
             {!returnAllSelected &&
               defaultReturn.length !== 0 &&
-              defaultReturn.map((item, index) => (
-                <FormPill
-                  key={index}
-                  text={item.label}
-                  size="small"
-                  onClick={(event: any) => handlePillClose(event, item)}
-                />
-              ))}
+              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)}
+                  />
+                ))}
             {returnedArray.length !== 0 && returnAllSelected && <br />}
             {defaultReturn.length !== 0 && !returnAllSelected && <br />}
             <input
-              id="multiselect_input"
+              id='multiselect_input'
               onChange={(e) => {
-                setFilterItem(e.target.value);
+                setFilterItem(e.target.value)
               }}
-              placeholder="Start typing..."
+              placeholder='Start typing...'
               value={filterItem}
               onClick={() => setIsClosed(false)}
             />
           </div>
           {isClosed ? (
-            <div key="chevron-down">
-              <Icon icon="chevron-down" />
+            <div key='chevron-down'>
+              <Icon icon='chevron-down' />
             </div>
           ) : (
-            <div key="chevron-up">
-              <Icon icon="chevron-up" />
+            <div key='chevron-up'>
+              <Icon icon='chevron-up' />
             </div>
           )}
         </div>
@@ -346,7 +415,7 @@ const MultiLevelSelect = (props: MultiLevelSelectProps) => {
         </div>
       </div>
     </div>
-  );
-};
+  )
+}
 
-export default MultiLevelSelect;
+export default MultiLevelSelect

data/app/pb_kits/playbook/pb_multi_level_select/docs/_multi_level_select_default.html.erb

@@ -61,12 +61,12 @@
         ],
       },
     ],
-  }] %>
+}] %>
 
 
 <%= pb_rails("multi_level_select", props: {
     id: "default-multi-level-select",
     tree_data:treeData
-    }) %>
+}) %>
 
 

data/app/pb_kits/playbook/pb_multi_level_select/docs/_multi_level_select_default.jsx

@@ -74,7 +74,7 @@ const MultiLevelSelectDefault = (props) => {
       <MultiLevelSelect
           id="multiselect-default"
           onSelect={(selectedNodes) =>
-          console.log("Selected Items", selectedNodes)
+          console.log("Selected Items (default... with ids only)", selectedNodes)
           }
           treeData={treeData}
           {...props}

data/app/pb_kits/playbook/pb_multi_level_select/docs/_multi_level_select_default.md

@@ -2,4 +2,4 @@ The MultiLevelSelect kit renders a multi leveled select dropdown based on data f
 
 For the React version of the kit, the `onSelect` prop returns an array of all checked items, irrespective of whether it is a parent, child or grandchild. Open the console on this example and check and uncheck checkboxes to see this is action!
 
-For the Rails version, the array of checked items is attached to the DOM in a data attribute titled `data-tree` on the wrapping div around  the MultiLevelSelect.
+By default, the return will be an array of Id's. If you want to return the entire object, you can pass `returnCompleteData` as true. This will return an array of objects. 

data/app/pb_kits/playbook/pb_multi_level_select/docs/_multi_level_select_return_all_selected.html.erb

@@ -64,9 +64,8 @@
     ],
   }] %>
 
-
 <%= pb_rails("multi_level_select", props: {
     id: "parent-persistence-multi-level-select",
     tree_data:treeData,
     return_all_selected: true
-    }) %>
+}) %>

data/app/pb_kits/playbook/pb_multi_level_select/docs/_multi_level_select_return_all_selected.jsx

@@ -74,7 +74,7 @@ const MultiLevelSelectReturnAllSelected = (props) => {
       <MultiLevelSelect
           id="multiselect-parent-persistence"
           onSelect={(selectedNodes) =>
-          console.log("Selected Items", selectedNodes)
+          console.log("Selected Items with Return All Selected Data", selectedNodes)
           }
           returnAllSelected
           treeData={treeData}