playbook_ui 12.30.1.pre.alpha.PLAY906multilevelselectedidsprop912 → 12.30.1.pre.alpha.PLAY906multilevelselectedidsprop917

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 5bb99bff289e00a7d9a4304de6118e54be2349a7d705bd69f07307940b277db5
-  data.tar.gz: 34b932013c8f26a6c25afe95e725fc4bac6f62b323e49e134ab0020a312107f6
+  metadata.gz: 404d26f3703a426ecde67500a1798f2813ae70c028e98ddfdd7e8f8d80105d8c
+  data.tar.gz: 64eb45d4f46d4961bd448ea55a5fae0de8b8a1ee6a30ba4dcd930d8b8062d82a
 SHA512:
-  metadata.gz: 245aac90b727280ef79d58a04569cc93f559d09b5ad2bd1350260c1eea9c4b02030de75e6ec7ff9a7d6751006c0c32bb7be946bc1ad813032d00a5ced8e240e0
-  data.tar.gz: af04cb501838d28a314d6de419fd6a5ca7782ce2f0973f80ba24ca048d82fdbad61041c56d43783f38ec1f77a6b7a56fd5b09eff85528ddab775557d6a0f2a9f
+  metadata.gz: 4d764ae50195612ea62e69302bea613063a6dbc42311320b044a41a198b98de8fd5a018a4eceb9ec703d230cd7a638e62e80bfc91a1dd75f9e8c8dc58f86468f
+  data.tar.gz: efb6027ee7c683ba70cb59aa19410dc1f5d0c488558e40476a21a818b50276781a70d16e5a57a42548062a4cb16f2b5f01508a9f29c0a29fd3372b38ca415bd0

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

@@ -135,7 +135,7 @@ export const recursiveCheckParent = (
   return data;
 };
 
-export const getExpandedItems = (treeData: { [key: string]: string }[]) => {
+export const getExpandedItems = (treeData: { [key: string]: string }[], selectedIds: string[]) => {
   let expandedItems: any[] = [];
 
   const traverse = (items: string | any[], ancestors: any[] = []) => {
@@ -146,6 +146,9 @@ export const getExpandedItems = (treeData: { [key: string]: string }[]) => {
       if (item.expanded) {
         expandedItems.push(item.id);
       }
+      if (selectedIds && selectedIds.length && selectedIds.includes(item.id)) {
+        expandedItems.push(...itemAncestors.map((ancestor) => ancestor.id));
+      }
       if (Array.isArray(item.children)) {
         const hasCheckedChildren = item.children.some(
           (child: { [key: string]: string }) => child.checked

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

@@ -66,7 +66,7 @@ const MultiLevelSelect = (props: MultiLevelSelectProps) => {
   //state for return for default
   const [defaultReturn, setDefaultReturn] = useState([])
   // Get expanded items from treeData.
-  const initialExpandedItems = getExpandedItems(treeData);
+  const initialExpandedItems = getExpandedItems(treeData, selectedIds);
   // Initialize state with expanded items.
   const [expanded, setExpanded] = useState(initialExpandedItems);
 

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

@@ -0,0 +1,76 @@
+<% treeData = [{
+    label: "Power Home Remodeling",
+    value: "Power Home Remodeling",
+    id: "100",
+    expanded: true,
+    children: [
+      {
+        label: "People",
+        value: "People",
+        id: "101",
+        children: [
+          {
+            label: "Talent Acquisition",
+            value: "Talent Acquisition",
+            id: "102",
+          },
+          {
+            label: "Business Affairs",
+            value: "Business Affairs",
+            id: "103",
+            children: [
+              {
+                label: "Initiatives",
+                value: "Initiatives",
+                id: "104",
+              },
+              {
+                label: "Learning & Development",
+                value: "Learning & Development",
+                id: "105",
+              },
+            ],
+          },
+          {
+            label: "People Experience",
+            value: "People Experience",
+            id: "106",
+          },
+        ],
+      },
+      {
+        label: "Contact Center",
+        value: "Contact Center",
+        id: "107",
+        children: [
+          {
+            label: "Appointment Management",
+            value: "Appointment Management",
+            id: "108",
+          },
+          {
+            label: "Customer Service",
+            value: "Customer Service",
+            id: "109",
+          },
+          {
+            label: "Energy",
+            value: "Energy",
+            id: "110",
+          },
+        ],
+      },
+    ],
+}] %>
+
+
+
+
+<%= pb_rails("multi_level_select", props: {
+    id: "multi-level-select-seelcted_ids",
+    name: "my_data_array_selected",
+    return_all_selected: true,
+    selected_ids:["110","102"],
+    tree_data: treeData,
+}) %>
+ 

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

@@ -0,0 +1,88 @@
+import React from "react";
+import MultiLevelSelect from "../_multi_level_select";
+
+const treeData = [
+  {
+    label: "Power Home Remodeling",
+    value: "Power Home Remodeling",
+    id: "powerhome1",
+    expanded: true,
+    children: [
+      {
+        label: "People",
+        value: "People",
+        id: "people1",
+        children: [
+          {
+            label: "Talent Acquisition",
+            value: "Talent Acquisition",
+            id: "talent1",
+          },
+          {
+            label: "Business Affairs",
+            value: "Business Affairs",
+            id: "business1",
+            children: [
+              {
+                label: "Initiatives",
+                value: "Initiatives",
+                id: "initiative1",
+              },
+              {
+                label: "Learning & Development",
+                value: "Learning & Development",
+                id: "development1",
+              },
+            ],
+          },
+          {
+            label: "People Experience",
+            value: "People Experience",
+            id: "experience1",
+          },
+        ],
+      },
+      {
+        label: "Contact Center",
+        value: "Contact Center",
+        id: "contact1",
+        children: [
+          {
+            label: "Appointment Management",
+            value: "Appointment Management",
+            id: "appointment1",
+          },
+          {
+            label: "Customer Service",
+            value: "Customer Service",
+            id: "customer1",
+          },
+          {
+            label: "Energy",
+            value: "Energy",
+            id: "energy1",
+          },
+        ],
+      },
+    ],
+  },
+];
+
+const MultiLevelSelectSelectedIds = (props) => {
+  return (
+    <div>
+      <MultiLevelSelect
+          id="multi-level-select-selected_ids"
+          onSelect={(selectedNodes) =>
+          console.log("Selected Items with Return All Selected Data", selectedNodes)
+          }
+          returnAllSelected
+          selectedIds={["energy1","talent1"]}
+          treeData={treeData}
+          {...props}
+      />
+    </div>
+  );
+};
+
+export default MultiLevelSelectSelectedIds;

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

@@ -0,0 +1,3 @@
+The `selectedIds` prop (`selected_ids` for Rails) allows you to pass in an array of ids that, if present, will mark the corresponding nodes on the treeData as checked on page load. The prop however is optional, and items that include checked:true on the treeData itself will also load checked data.
+
+When an item is marked as checked on page load, the dropdown will expand to show the checked items for easier accessibility. 

data/app/pb_kits/playbook/pb_multi_level_select/docs/example.yml

@@ -2,9 +2,11 @@ examples:
   rails:
   - multi_level_select_default: Default
   - multi_level_select_return_all_selected: Return All Selected
+  - multi_level_select_selected_ids: Selected Ids
   - multi_level_select_with_form: With Form
   
   react:
   - multi_level_select_default: Default
   - multi_level_select_return_all_selected: Return All Selected
+  - multi_level_select_selected_ids: Selected Ids
   

data/app/pb_kits/playbook/pb_multi_level_select/docs/index.js

@@ -1,2 +1,3 @@
 export { default as MultiLevelSelectDefault } from './_multi_level_select_default.jsx'
-export { default as MultiLevelSelectReturnAllSelected } from './_multi_level_select_return_all_selected.jsx'
+export { default as MultiLevelSelectReturnAllSelected } from './_multi_level_select_return_all_selected.jsx'
+export { default as MultiLevelSelectSelectedIds } from "./_multi_level_select_selected_ids.jsx"

data/app/pb_kits/playbook/pb_multi_level_select/multi_level_select.rb

@@ -9,6 +9,8 @@ module Playbook
                        default: []
       prop :return_all_selected, type: Playbook::Props::Boolean,
                                  default: false
+      prop :selected_ids, type: Playbook::Props::Array,
+                          default: []
       prop :input_display, type: Playbook::Props::Enum,
                            values: %w[pills none],
                            default: "pills"
@@ -24,6 +26,7 @@ module Playbook
           name: name,
           treeData: tree_data,
           returnAllSelected: return_all_selected,
+          selectedIds: selected_ids,
         }
       end
     end