playbook_ui 13.10.0.pre.alpha.PLAY1046multilevelsingleselectphase21323 → 13.10.0.pre.alpha.PLAY1046multilevelsingleselectphase21328
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- checksums.yaml +4 -4
- data/app/pb_kits/playbook/pb_multi_level_select/_multi_level_select.tsx +3 -1
- data/app/pb_kits/playbook/pb_multi_level_select/docs/_multi_level_select_single.html.erb +0 -3
- data/app/pb_kits/playbook/pb_multi_level_select/docs/_multi_level_select_single.jsx +0 -3
- data/app/pb_kits/playbook/pb_multi_level_select/docs/_multi_level_select_single_children_only.html.erb +74 -0
- data/app/pb_kits/playbook/pb_multi_level_select/docs/_multi_level_select_single_children_only.jsx +88 -0
- data/app/pb_kits/playbook/pb_multi_level_select/docs/example.yml +2 -0
- data/app/pb_kits/playbook/pb_multi_level_select/docs/index.js +1 -0
- data/app/pb_kits/playbook/pb_multi_level_select/multi_level_select.rb +3 -0
- data/dist/playbook-rails.js +4 -4
- data/lib/playbook/version.rb +1 -1
- metadata +3 -1
checksums.yaml
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
---
|
|
2
2
|
SHA256:
|
|
3
|
-
metadata.gz:
|
|
4
|
-
data.tar.gz:
|
|
3
|
+
metadata.gz: f0644f1e685425faa2c4f2955e8631573bcafd8c9ec64b504c15e2a59aeb1e45
|
|
4
|
+
data.tar.gz: 35d0cb4e4f59b4eb099fedd73819c0fe450e766b0d7d25fe5cf5e53fc043b5dc
|
|
5
5
|
SHA512:
|
|
6
|
-
metadata.gz:
|
|
7
|
-
data.tar.gz:
|
|
6
|
+
metadata.gz: 73813bea1c749e60cacf7c60f886326ed297bf05842bad59be1af460c981a97104948bc49d45d9df25e079c1506956ea8f87b21ace412b8bd1762363a9e43fe1
|
|
7
|
+
data.tar.gz: 368f7b2a0e4edba51e0ba7699cf3f54ed859bb0ee810d3814f1e125c71a737b3cc2827499eed7c192b971404589ad2c0c707fa842fd088d16a96bbdf8d4511df
|
|
@@ -31,6 +31,7 @@ type MultiLevelSelectProps = {
|
|
|
31
31
|
treeData?: { [key: string]: string }[]
|
|
32
32
|
onSelect?: (prop: { [key: string]: any }) => void
|
|
33
33
|
selectedIds?: string[]
|
|
34
|
+
ultimateChildrenOnly?: boolean
|
|
34
35
|
variant?: "multi" | "single"
|
|
35
36
|
} & GlobalProps
|
|
36
37
|
|
|
@@ -47,6 +48,7 @@ const MultiLevelSelect = (props: MultiLevelSelectProps) => {
|
|
|
47
48
|
treeData,
|
|
48
49
|
onSelect = () => null,
|
|
49
50
|
selectedIds,
|
|
51
|
+
ultimateChildrenOnly = false,
|
|
50
52
|
variant = "multi"
|
|
51
53
|
} = props
|
|
52
54
|
|
|
@@ -378,7 +380,7 @@ const MultiLevelSelect = (props: MultiLevelSelectProps) => {
|
|
|
378
380
|
{ variant === "single" ? (
|
|
379
381
|
<Radio
|
|
380
382
|
checked={item.checked}
|
|
381
|
-
class={item.
|
|
383
|
+
class={ultimateChildrenOnly ? item.children ? "singleHidden" : "" : null}
|
|
382
384
|
id={`${item.id}-${item.label}`}
|
|
383
385
|
label={item.label}
|
|
384
386
|
name={inputName}
|
|
@@ -9,7 +9,6 @@
|
|
|
9
9
|
value: "People",
|
|
10
10
|
id: "201",
|
|
11
11
|
expanded: true,
|
|
12
|
-
hidden: true,
|
|
13
12
|
children: [
|
|
14
13
|
{
|
|
15
14
|
label: "Talent Acquisition",
|
|
@@ -20,7 +19,6 @@
|
|
|
20
19
|
label: "Business Affairs",
|
|
21
20
|
value: "Business Affairs",
|
|
22
21
|
id: "203",
|
|
23
|
-
hidden: true,
|
|
24
22
|
children: [
|
|
25
23
|
{
|
|
26
24
|
label: "Initiatives",
|
|
@@ -45,7 +43,6 @@
|
|
|
45
43
|
label: "Contact Center",
|
|
46
44
|
value: "Contact Center",
|
|
47
45
|
id: "207",
|
|
48
|
-
hidden: true,
|
|
49
46
|
children: [
|
|
50
47
|
{
|
|
51
48
|
label: "Appointment Management",
|
|
@@ -13,7 +13,6 @@ const treeData = [
|
|
|
13
13
|
value: "People",
|
|
14
14
|
id: "people2",
|
|
15
15
|
expanded: true,
|
|
16
|
-
hidden: true,
|
|
17
16
|
children: [
|
|
18
17
|
{
|
|
19
18
|
label: "Talent Acquisition",
|
|
@@ -24,7 +23,6 @@ const treeData = [
|
|
|
24
23
|
label: "Business Affairs",
|
|
25
24
|
value: "Business Affairs",
|
|
26
25
|
id: "business2",
|
|
27
|
-
hidden: true,
|
|
28
26
|
children: [
|
|
29
27
|
{
|
|
30
28
|
label: "Initiatives",
|
|
@@ -49,7 +47,6 @@ const treeData = [
|
|
|
49
47
|
label: "Contact Center",
|
|
50
48
|
value: "Contact Center",
|
|
51
49
|
id: "contact2",
|
|
52
|
-
hidden: true,
|
|
53
50
|
children: [
|
|
54
51
|
{
|
|
55
52
|
label: "Appointment Management",
|
|
@@ -0,0 +1,74 @@
|
|
|
1
|
+
<% treeData = [{
|
|
2
|
+
label: "Power Home Remodeling",
|
|
3
|
+
value: "Power Home Remodeling",
|
|
4
|
+
id: "300",
|
|
5
|
+
expanded: true,
|
|
6
|
+
children: [
|
|
7
|
+
{
|
|
8
|
+
label: "People",
|
|
9
|
+
value: "People",
|
|
10
|
+
id: "301",
|
|
11
|
+
expanded: true,
|
|
12
|
+
children: [
|
|
13
|
+
{
|
|
14
|
+
label: "Talent Acquisition",
|
|
15
|
+
value: "Talent Acquisition",
|
|
16
|
+
id: "302",
|
|
17
|
+
},
|
|
18
|
+
{
|
|
19
|
+
label: "Business Affairs",
|
|
20
|
+
value: "Business Affairs",
|
|
21
|
+
id: "303",
|
|
22
|
+
children: [
|
|
23
|
+
{
|
|
24
|
+
label: "Initiatives",
|
|
25
|
+
value: "Initiatives",
|
|
26
|
+
id: "304",
|
|
27
|
+
},
|
|
28
|
+
{
|
|
29
|
+
label: "Learning & Development",
|
|
30
|
+
value: "Learning & Development",
|
|
31
|
+
id: "305",
|
|
32
|
+
},
|
|
33
|
+
],
|
|
34
|
+
},
|
|
35
|
+
{
|
|
36
|
+
label: "People Experience",
|
|
37
|
+
value: "People Experience",
|
|
38
|
+
id: "306",
|
|
39
|
+
},
|
|
40
|
+
],
|
|
41
|
+
},
|
|
42
|
+
{
|
|
43
|
+
label: "Contact Center",
|
|
44
|
+
value: "Contact Center",
|
|
45
|
+
id: "307",
|
|
46
|
+
children: [
|
|
47
|
+
{
|
|
48
|
+
label: "Appointment Management",
|
|
49
|
+
value: "Appointment Management",
|
|
50
|
+
id: "308",
|
|
51
|
+
},
|
|
52
|
+
{
|
|
53
|
+
label: "Customer Service",
|
|
54
|
+
value: "Customer Service",
|
|
55
|
+
id: "309",
|
|
56
|
+
},
|
|
57
|
+
{
|
|
58
|
+
label: "Energy",
|
|
59
|
+
value: "Energy",
|
|
60
|
+
id: "310",
|
|
61
|
+
},
|
|
62
|
+
],
|
|
63
|
+
},
|
|
64
|
+
],
|
|
65
|
+
}] %>
|
|
66
|
+
|
|
67
|
+
<%= pb_rails("multi_level_select", props: {
|
|
68
|
+
id: "multi-level-select-single-children-only-rails",
|
|
69
|
+
name: "my_single_children_only_select_array",
|
|
70
|
+
tree_data: treeData,
|
|
71
|
+
input_name: "PowerChildren",
|
|
72
|
+
ultimate_children_only: true,
|
|
73
|
+
variant: "single"
|
|
74
|
+
}) %>
|
data/app/pb_kits/playbook/pb_multi_level_select/docs/_multi_level_select_single_children_only.jsx
ADDED
|
@@ -0,0 +1,88 @@
|
|
|
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: "powerhome3",
|
|
9
|
+
expanded: true,
|
|
10
|
+
children: [
|
|
11
|
+
{
|
|
12
|
+
label: "People",
|
|
13
|
+
value: "People",
|
|
14
|
+
id: "people3",
|
|
15
|
+
expanded: true,
|
|
16
|
+
children: [
|
|
17
|
+
{
|
|
18
|
+
label: "Talent Acquisition",
|
|
19
|
+
value: "Talent Acquisition",
|
|
20
|
+
id: "talent3",
|
|
21
|
+
},
|
|
22
|
+
{
|
|
23
|
+
label: "Business Affairs",
|
|
24
|
+
value: "Business Affairs",
|
|
25
|
+
id: "business3",
|
|
26
|
+
children: [
|
|
27
|
+
{
|
|
28
|
+
label: "Initiatives",
|
|
29
|
+
value: "Initiatives",
|
|
30
|
+
id: "initiative3",
|
|
31
|
+
},
|
|
32
|
+
{
|
|
33
|
+
label: "Learning & Development",
|
|
34
|
+
value: "Learning & Development",
|
|
35
|
+
id: "development3",
|
|
36
|
+
},
|
|
37
|
+
],
|
|
38
|
+
},
|
|
39
|
+
{
|
|
40
|
+
label: "People Experience",
|
|
41
|
+
value: "People Experience",
|
|
42
|
+
id: "experience3",
|
|
43
|
+
},
|
|
44
|
+
],
|
|
45
|
+
},
|
|
46
|
+
{
|
|
47
|
+
label: "Contact Center",
|
|
48
|
+
value: "Contact Center",
|
|
49
|
+
id: "contact3",
|
|
50
|
+
children: [
|
|
51
|
+
{
|
|
52
|
+
label: "Appointment Management",
|
|
53
|
+
value: "Appointment Management",
|
|
54
|
+
id: "appointment3",
|
|
55
|
+
},
|
|
56
|
+
{
|
|
57
|
+
label: "Customer Service",
|
|
58
|
+
value: "Customer Service",
|
|
59
|
+
id: "customer3",
|
|
60
|
+
},
|
|
61
|
+
{
|
|
62
|
+
label: "Energy",
|
|
63
|
+
value: "Energy",
|
|
64
|
+
id: "energy3",
|
|
65
|
+
},
|
|
66
|
+
],
|
|
67
|
+
},
|
|
68
|
+
],
|
|
69
|
+
},
|
|
70
|
+
];
|
|
71
|
+
|
|
72
|
+
const MultiLevelSelectSingleChildrenOnly = (props) => {
|
|
73
|
+
return (
|
|
74
|
+
<div>
|
|
75
|
+
<MultiLevelSelect
|
|
76
|
+
id="multiselect-single-children-only"
|
|
77
|
+
inputName="PowerChildren"
|
|
78
|
+
onSelect={(selectedNode) => console.log("Selected Node", selectedNode)}
|
|
79
|
+
treeData={treeData}
|
|
80
|
+
ultimateChildrenOnly
|
|
81
|
+
variant="single"
|
|
82
|
+
{...props}
|
|
83
|
+
/>
|
|
84
|
+
</div>
|
|
85
|
+
)
|
|
86
|
+
};
|
|
87
|
+
|
|
88
|
+
export default MultiLevelSelectSingleChildrenOnly;
|
|
@@ -2,6 +2,7 @@ examples:
|
|
|
2
2
|
rails:
|
|
3
3
|
- multi_level_select_default: Default
|
|
4
4
|
- multi_level_select_single: Single Select
|
|
5
|
+
- multi_level_select_single_children_only: Single Select Ultimate Children Only
|
|
5
6
|
- multi_level_select_return_all_selected: Return All Selected
|
|
6
7
|
- multi_level_select_selected_ids: Selected Ids
|
|
7
8
|
- multi_level_select_with_form: With Form
|
|
@@ -9,5 +10,6 @@ examples:
|
|
|
9
10
|
react:
|
|
10
11
|
- multi_level_select_default: Default
|
|
11
12
|
- multi_level_select_single: Single Select
|
|
13
|
+
- multi_level_select_single_children_only: Single Select Ultimate Children Only
|
|
12
14
|
- multi_level_select_return_all_selected: Return All Selected
|
|
13
15
|
- multi_level_select_selected_ids: Selected Ids
|
|
@@ -1,4 +1,5 @@
|
|
|
1
1
|
export { default as MultiLevelSelectDefault } from './_multi_level_select_default.jsx'
|
|
2
2
|
export { default as MultiLevelSelectSingle } from './_multi_level_select_single.jsx'
|
|
3
|
+
export { default as MultiLevelSelectSingleChildrenOnly } from './_multi_level_select_single_children_only.jsx'
|
|
3
4
|
export { default as MultiLevelSelectReturnAllSelected } from './_multi_level_select_return_all_selected.jsx'
|
|
4
5
|
export { default as MultiLevelSelectSelectedIds } from "./_multi_level_select_selected_ids.jsx"
|
|
@@ -16,6 +16,8 @@ module Playbook
|
|
|
16
16
|
default: "pills"
|
|
17
17
|
prop :input_name, type: Playbook::Props::String,
|
|
18
18
|
default: ""
|
|
19
|
+
prop :ultimate_children_only, type: Playbook::Props::Boolean,
|
|
20
|
+
default: false
|
|
19
21
|
prop :variant, type: Playbook::Props::Enum,
|
|
20
22
|
values: %w[multi single],
|
|
21
23
|
default: "multi"
|
|
@@ -33,6 +35,7 @@ module Playbook
|
|
|
33
35
|
returnAllSelected: return_all_selected,
|
|
34
36
|
selectedIds: selected_ids,
|
|
35
37
|
input_name: input_name,
|
|
38
|
+
ultimateChildrenOnly: ultimate_children_only,
|
|
36
39
|
variant: variant,
|
|
37
40
|
}
|
|
38
41
|
end
|