playbook_ui 12.24.0 → 12.25.0.pre.alpha.PLAY818multilevelrebuild770

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

@@ -0,0 +1,212 @@
+//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 }[],
+  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]);
+    }
+  }
+};
+
+//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 = (
+  formattedData: { [key: string]: any }[],
+  id: string
+) => {
+  const matched: { [key: string]: any }[] = [];
+  const recursiveSearch = (data: { [key: string]: any }[], term: string) => {
+    for (const item of data) {
+      if (item.id.toLowerCase().includes(term.toLowerCase())) {
+        matched.push(item);
+      }
+
+      if (item.children && item.children.length > 0) {
+        recursiveSearch(item.children, term);
+      }
+    }
+  };
+
+  recursiveSearch(formattedData, id);
+  return matched;
+};
+
+export const findByFilter = (
+  formattedData: { [key: string]: any }[],
+  searchTerm: string
+) => {
+  const matchedItems: { [key: string]: any }[] = [];
+  const recursiveSearch = (data: { [key: string]: any }[], term: string) => {
+    for (const item of data) {
+      if (item.label.toLowerCase().includes(term.toLowerCase())) {
+        matchedItems.push(item);
+      }
+
+      if (item.children) {
+        recursiveSearch(item.children, term);
+      }
+    }
+  };
+
+  recursiveSearch(formattedData, searchTerm);
+  return matchedItems;
+};
+
+//function to get all items with checked = true
+export const getCheckedItems = (
+  data: { [key: string]: any }[]
+): { [key: string]: any }[] => {
+  const checkedItems: { [key: string]: any }[] = [];
+  if (!Array.isArray(data)) {
+    return;
+  }
+  data.forEach((item: { [key: string]: any }) => {
+    if (item.checked) {
+      checkedItems.push(item);
+    }
+    if (item.children && item.children.length > 0) {
+      const childCheckedItems = getCheckedItems(item.children);
+      checkedItems.push(...childCheckedItems);
+    }
+  });
+  return checkedItems;
+};
+
+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);
+      }
+    }
+    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;
+};
+
+export const recursiveReturnOnlyParent = (
+  items: { [key: string]: any },
+  formattedData: { [key: string]: any }[],
+  defaultReturn: { [key: string]: any }[],
+  setDefaultReturn: any
+) => {
+  const parent = filterFormattedDataById(formattedData, items.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(
+        parent[0],
+        formattedData,
+        filteredDefaultReturn,
+        setDefaultReturn
+      );
+    }
+  } 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.includes(item.id)
+  );
+  setDefaultReturn([...filteredDefaultArray, items]);
+};

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

@@ -5,123 +5,78 @@
 @import "../tokens/spacing";
 @import "../tokens/typography";
 @import "../tokens/line_height";
+@import "../tokens/positioning";
 
 .pb_multi_level_select {
   font-family: $font-family-base;
 
-  .search {
-    font-family: $font-family-base;
-  }
+  .wrapper {
+    position: relative;
 
-  .dropdown {
-    width: 100%;
-    .search {
-      border-bottom: none;
+    .toggle_icon {
+      visibility: hidden;
+      .pb_button_content {
+        visibility: hidden !important;
+      }
     }
 
-    .toggle {
-      padding: 0px $space_xs + 1;
-    }
-    .node.tree {
+    .input_wrapper {
+      background-color: $white;
+      cursor: pointer;
+      padding: $space_xs + 4 $space_sm;
+      border: 1px solid #e4e8f0;
+      border-radius: $border_rad_heavier;
       display: flex;
       align-items: center;
-    }
-
-    .node-label {
-      line-height: $lh_tight;
-      color: $text_lt_default;
-      font-size: $text_default;
-      font-weight: $regular;
-      font-family: $font-family-base;
-    }
-
-    .checkbox-item {
-      height: $space_sm;
-      width: $space_sm;
-    }
-
-    .toggle.expanded:after {
-      border-style: solid;
-      border-width: 0.1em 0.1em 0 0;
-      content: "";
-      display: inline-block;
-      height: 0.8em;
-      position: relative;
-      vertical-align: top;
-      width: 0.8em;
-      top: 7px;
-      transform: rotate(135deg);
-      font-size: 0.5em;
-    }
-    .toggle.expanded:hover {
-      background-color: rgba(0, 86, 207, 0.1);
-      border-radius: $border_radius_rounded;
-      &::after {
-        color: $primary;
+      justify-content: space-between;
+      .input_inner_container {
+        max-width: 90%;
       }
-    }
-    .toggle.collapsed:after {
-      border-style: solid;
-      border-width: 0.1em 0.1em 0 0;
-      content: "";
-      display: inline-block;
-      height: 0.8em;
-      right: 0.1em;
-      position: relative;
-      vertical-align: top;
-      width: 0.8em;
-      top: 7px;
-      font-size: 0.5em;
-      transform: rotate(45deg);
-      top: 9px;
-    }
 
-    .toggle.collapsed:hover {
-      background-color: rgba(0, 86, 207, 0.1);
-      border-radius: $border_radius_rounded;
-      &::after {
-        color: $primary;
+      input {
+        border: none;
+        font-family: $font_family_base;
+        padding: $space_xs;
+        &:focus {
+          outline: none;
+        }
       }
     }
+  }
+  .dropdown_menu {
+    position: absolute;
+    z-index: $z_1;
+    width: 100%;
+    padding-left: $space_sm;
+    background-color: $white;
+    padding: $space_sm;
+    border-radius: $border_rad_heavier;
+    border: 1px solid #e4e8f0;
+    max-height: 600px;
+    overflow: auto;
 
-    .tag {
-      height: fit-content;
-      display: inline-flex;
-      justify-content: center;
-      align-items: center;
-      padding: $space_xxs $space_xxs $space_xxs $space_xs;
-      border-radius: $border_radius_xl + 2;
-      background-color: rgba($primary, 0.1);
-      color: $primary;
-      border: none;
-      font-size: $font_smaller;
-      font-weight: $bolder;
+    .dropdown_item {
+      list-style: none;
+      padding-left: 20px;
+      .dropdown_item_checkbox_row {
+        display: flex;
+        align-items: center;
+        .pb_button_kit_link_inline_enabled {
+          color: $charcoal;
+          &:hover {
+            color: $primary;
+          }
+        }
 
-      .tag-remove {
-        color: $primary;
-        padding-left: $space_xs;
-        padding-right: $space_xxs;
       }
     }
   }
-  .react-dropdown-tree-select .dropdown .dropdown-trigger {
-    width: 100%;
-    @include pb_textarea_light;
-  }
-  .react-dropdown-tree-select .dropdown .dropdown-trigger.arrow.bottom:after {
-    content: none;
-  }
-  .react-dropdown-tree-select .dropdown .dropdown-trigger.arrow.top:after {
-    content: none;
-  }
 
-  .react-dropdown-tree-select .dropdown .dropdown-content {
-    width: 100%;
-    border: 1px solid $border_light;
-    border-radius: $border_rad_heavier;
-    box-shadow: $shadow_deeper;
+  .close {
+    display: none;
   }
-  .node.leaf.collapsed {
-    display: block !important;
+
+  .open {
+    display: block;
   }
 }