playbook_ui 13.9.0 → 13.10.0.pre.alpha.PLAY1046multilevelsingleselectphase21323

Sign up to get free protection for your applications and to get access to all the features.
@@ -0,0 +1,90 @@
1
+ import React from "react";
2
+ import MultiLevelSelect from "../_multi_level_select";
3
+
4
+ const treeData = [
5
+ {
6
+ label: "Power Home Remodeling",
7
+ value: "Power Home Remodeling",
8
+ id: "powerhome2",
9
+ expanded: true,
10
+ children: [
11
+ {
12
+ label: "People",
13
+ value: "People",
14
+ id: "people2",
15
+ expanded: true,
16
+ hidden: true,
17
+ children: [
18
+ {
19
+ label: "Talent Acquisition",
20
+ value: "Talent Acquisition",
21
+ id: "talent2",
22
+ },
23
+ {
24
+ label: "Business Affairs",
25
+ value: "Business Affairs",
26
+ id: "business2",
27
+ hidden: true,
28
+ children: [
29
+ {
30
+ label: "Initiatives",
31
+ value: "Initiatives",
32
+ id: "initiative2",
33
+ },
34
+ {
35
+ label: "Learning & Development",
36
+ value: "Learning & Development",
37
+ id: "development2",
38
+ },
39
+ ],
40
+ },
41
+ {
42
+ label: "People Experience",
43
+ value: "People Experience",
44
+ id: "experience2",
45
+ },
46
+ ],
47
+ },
48
+ {
49
+ label: "Contact Center",
50
+ value: "Contact Center",
51
+ id: "contact2",
52
+ hidden: true,
53
+ children: [
54
+ {
55
+ label: "Appointment Management",
56
+ value: "Appointment Management",
57
+ id: "appointment2",
58
+ },
59
+ {
60
+ label: "Customer Service",
61
+ value: "Customer Service",
62
+ id: "customer2",
63
+ },
64
+ {
65
+ label: "Energy",
66
+ value: "Energy",
67
+ id: "energy2",
68
+ },
69
+ ],
70
+ },
71
+ ],
72
+ },
73
+ ];
74
+
75
+ const MultiLevelSelectSingle = (props) => {
76
+ return (
77
+ <div>
78
+ <MultiLevelSelect
79
+ id="multiselect-single"
80
+ inputName="Power"
81
+ onSelect={(selectedNode) => console.log("Selected Node", selectedNode)}
82
+ treeData={treeData}
83
+ variant="single"
84
+ {...props}
85
+ />
86
+ </div>
87
+ )
88
+ };
89
+
90
+ export default MultiLevelSelectSingle;
@@ -1,12 +1,13 @@
1
1
  examples:
2
2
  rails:
3
3
  - multi_level_select_default: Default
4
+ - multi_level_select_single: Single Select
4
5
  - multi_level_select_return_all_selected: Return All Selected
5
6
  - multi_level_select_selected_ids: Selected Ids
6
7
  - multi_level_select_with_form: With Form
7
-
8
+
8
9
  react:
9
10
  - multi_level_select_default: Default
11
+ - multi_level_select_single: Single Select
10
12
  - multi_level_select_return_all_selected: Return All Selected
11
13
  - multi_level_select_selected_ids: Selected Ids
12
-
@@ -1,3 +1,4 @@
1
1
  export { default as MultiLevelSelectDefault } from './_multi_level_select_default.jsx'
2
+ export { default as MultiLevelSelectSingle } from './_multi_level_select_single.jsx'
2
3
  export { default as MultiLevelSelectReturnAllSelected } from './_multi_level_select_return_all_selected.jsx'
3
- export { default as MultiLevelSelectSelectedIds } from "./_multi_level_select_selected_ids.jsx"
4
+ export { default as MultiLevelSelectSelectedIds } from "./_multi_level_select_selected_ids.jsx"
@@ -14,6 +14,11 @@ module Playbook
14
14
  prop :input_display, type: Playbook::Props::Enum,
15
15
  values: %w[pills none],
16
16
  default: "pills"
17
+ prop :input_name, type: Playbook::Props::String,
18
+ default: ""
19
+ prop :variant, type: Playbook::Props::Enum,
20
+ values: %w[multi single],
21
+ default: "multi"
17
22
 
18
23
  def classname
19
24
  generate_classname("pb_multi_level_select")
@@ -27,6 +32,8 @@ module Playbook
27
32
  treeData: tree_data,
28
33
  returnAllSelected: return_all_selected,
29
34
  selectedIds: selected_ids,
35
+ input_name: input_name,
36
+ variant: variant,
30
37
  }
31
38
  end
32
39
  end