playbook_ui 12.26.1.pre.alpha.railsmultilevelimprovements837 → 12.26.1.pre.alpha.railsmultilevelimprovements842
Sign up to get free protection for your applications and to get access to all the features.
- checksums.yaml +4 -4
- data/app/pb_kits/playbook/pb_card/docs/_card_background.jsx +4 -5
- data/app/pb_kits/playbook/pb_date_year_stacked/date_year_stacked.test.js +3 -6
- data/app/pb_kits/playbook/pb_dialog/docs/_dialog_full_height.jsx +4 -8
- data/app/pb_kits/playbook/pb_dialog/docs/_dialog_full_height_placement.jsx +4 -8
- data/app/pb_kits/playbook/pb_dialog/docs/_dialog_scrollable.jsx +2 -4
- data/app/pb_kits/playbook/pb_dialog/docs/_dialog_status.jsx +1 -1
- data/app/pb_kits/playbook/pb_filter/filter.test.js +3 -6
- data/app/pb_kits/playbook/pb_form_group/form_group.test.js +1 -2
- data/app/pb_kits/playbook/pb_gauge/docs/_gauge_complex.jsx +1 -1
- data/app/pb_kits/playbook/pb_home_address_street/home_adress_street.test.js +1 -1
- data/app/pb_kits/playbook/pb_icon/icon.test.js +9 -9
- data/app/pb_kits/playbook/pb_icon_stat_value/icon_stat_value.test.js +8 -8
- data/app/pb_kits/playbook/pb_icon_value/icon_value.test.js +5 -5
- data/app/pb_kits/playbook/pb_layout/layout.test.js +4 -8
- data/app/pb_kits/playbook/pb_multi_level_select/_multi_level_select.tsx +8 -39
- data/app/pb_kits/playbook/pb_multi_level_select/docs/_multi_level_select_default.html.erb +12 -18
- data/app/pb_kits/playbook/pb_multi_level_select/docs/_multi_level_select_default.jsx +1 -2
- data/app/pb_kits/playbook/pb_multi_level_select/docs/_multi_level_select_default.md +2 -2
- data/app/pb_kits/playbook/pb_multi_level_select/docs/_multi_level_select_return_all_selected.html.erb +19 -23
- data/app/pb_kits/playbook/pb_multi_level_select/docs/_multi_level_select_return_all_selected.jsx +1 -1
- data/app/pb_kits/playbook/pb_multi_level_select/docs/_multi_level_select_with_form.html.erb +1 -1
- data/app/pb_kits/playbook/pb_multi_level_select/docs/example.yml +0 -2
- data/app/pb_kits/playbook/pb_multi_level_select/docs/index.js +1 -2
- data/app/pb_kits/playbook/pb_passphrase/docs/_passphrase_common.jsx +1 -2
- data/app/pb_kits/playbook/pb_phone_number_input/docs/_phone_number_input_default.jsx +1 -2
- data/app/pb_kits/playbook/pb_popover/popover.test.js +6 -6
- data/app/pb_kits/playbook/pb_selectable_list/selectable_list.test.js +2 -4
- data/dist/playbook-rails.js +5 -5
- data/lib/playbook/version.rb +1 -1
- metadata +2 -4
- data/app/pb_kits/playbook/pb_multi_level_select/docs/_multi_level_select_return_complete_data.html.erb +0 -73
- data/app/pb_kits/playbook/pb_multi_level_select/docs/_multi_level_select_return_complete_data.jsx +0 -87
checksums.yaml
CHANGED
@@ -1,7 +1,7 @@
|
|
1
1
|
---
|
2
2
|
SHA256:
|
3
|
-
metadata.gz:
|
4
|
-
data.tar.gz:
|
3
|
+
metadata.gz: 326f8eff50b791dc21ab3ec0bdb295adef8d14d3957277f4f92d8abdfe445686
|
4
|
+
data.tar.gz: 0a9d5b6672174df0cb045cc3aea6b017d0e30f1a978df27e0529b7f1d3cb3472
|
5
5
|
SHA512:
|
6
|
-
metadata.gz:
|
7
|
-
data.tar.gz:
|
6
|
+
metadata.gz: 1b079256265e6bcdea4576a6930b527b944044f0064936376278147aad59cf1a5b311ba25632ca3878bb50e3fd62a33ccdf17cf805d7dd60eaece7d5d3e640fe
|
7
|
+
data.tar.gz: fa05822858223b65f2a3a2755a1f7fcecea6946d7a1f31ea40a32ad10ebd5b3df128cc3736fdab16b6329ba283e50d201412a8d79c6027745a646d8c6c94ac05
|
@@ -57,7 +57,7 @@ const CardBackground = (props) => {
|
|
57
57
|
background="product_1_background"
|
58
58
|
marginBottom="sm"
|
59
59
|
{...props}
|
60
|
-
|
60
|
+
>
|
61
61
|
<Body
|
62
62
|
dark
|
63
63
|
text="Product 1 Background"
|
@@ -69,12 +69,11 @@ const CardBackground = (props) => {
|
|
69
69
|
<Card
|
70
70
|
background="product_7_highlight"
|
71
71
|
marginBottom="sm"
|
72
|
-
{...props}
|
73
|
-
>
|
72
|
+
{...props} >
|
74
73
|
<Body
|
75
74
|
dark
|
76
|
-
text="Product 7 Highlight"
|
77
|
-
|
75
|
+
text="Product 7 Highlight"
|
76
|
+
/>
|
78
77
|
</Card>
|
79
78
|
|
80
79
|
|
@@ -21,8 +21,7 @@ describe("DateYearStacked Kit", () => {
|
|
21
21
|
render(
|
22
22
|
<DateYearStacked
|
23
23
|
data={{ testid: testId }}
|
24
|
-
date={new Date(Date.now())}
|
25
|
-
/>
|
24
|
+
date={new Date(Date.now())} />
|
26
25
|
);
|
27
26
|
|
28
27
|
const kit = screen.getByTestId(testId);
|
@@ -33,8 +32,7 @@ describe("DateYearStacked Kit", () => {
|
|
33
32
|
render(
|
34
33
|
<DateYearStacked
|
35
34
|
data={{ testid: testId }}
|
36
|
-
date={new Date(Date.now())}
|
37
|
-
/>
|
35
|
+
date={new Date(Date.now())} />
|
38
36
|
);
|
39
37
|
|
40
38
|
const kit = screen.getByTestId(testId);
|
@@ -46,8 +44,7 @@ describe("DateYearStacked Kit", () => {
|
|
46
44
|
render(
|
47
45
|
<DateYearStacked
|
48
46
|
data={{ testid: testId }}
|
49
|
-
date={new Date(Date.now())}
|
50
|
-
/>
|
47
|
+
date={new Date(Date.now())} />
|
51
48
|
);
|
52
49
|
|
53
50
|
const kit = screen.getByTestId(testId);
|
@@ -49,18 +49,15 @@ const DialogFullHeight = () => {
|
|
49
49
|
<Flex wrap>
|
50
50
|
<Button id="sm"
|
51
51
|
marginRight="md"
|
52
|
-
onClick={toggleHeaderSeparatorDialog}
|
53
|
-
>
|
52
|
+
onClick={toggleHeaderSeparatorDialog}>
|
54
53
|
{"Small Dialog"}
|
55
54
|
</Button>
|
56
55
|
<Button marginRight="md"
|
57
|
-
onClick={toggleFooterSeparatorDialog}
|
58
|
-
>
|
56
|
+
onClick={toggleFooterSeparatorDialog}>
|
59
57
|
{"Medium Dialog"}
|
60
58
|
</Button>
|
61
59
|
<Button marginRight="md"
|
62
|
-
onClick={toggleBothSeparatorsDialog}
|
63
|
-
>
|
60
|
+
onClick={toggleBothSeparatorsDialog}>
|
64
61
|
{"Large Dialog"}
|
65
62
|
</Button>
|
66
63
|
</Flex>
|
@@ -92,8 +89,7 @@ const DialogFullHeight = () => {
|
|
92
89
|
<Dialog.Footer>
|
93
90
|
<Button onClick={toggle}>{"Send My Issue"}</Button>
|
94
91
|
<Button onClick={toggle}
|
95
|
-
variant="link"
|
96
|
-
>
|
92
|
+
variant="link">
|
97
93
|
{"Back"}
|
98
94
|
</Button>
|
99
95
|
</Dialog.Footer>
|
@@ -48,18 +48,15 @@ const DialogFullHeightPlacement = () => {
|
|
48
48
|
<Flex wrap>
|
49
49
|
<Button id="sm"
|
50
50
|
marginRight="md"
|
51
|
-
onClick={toggleHeaderSeparatorDialog}
|
52
|
-
>
|
51
|
+
onClick={toggleHeaderSeparatorDialog}>
|
53
52
|
{"Left Dialog"}
|
54
53
|
</Button>
|
55
54
|
<Button marginRight="xl"
|
56
|
-
onClick={toggleFooterSeparatorDialog}
|
57
|
-
>
|
55
|
+
onClick={toggleFooterSeparatorDialog}>
|
58
56
|
{"Center Dialog"}
|
59
57
|
</Button>
|
60
58
|
<Button marginRight="xl"
|
61
|
-
onClick={toggleBothSeparatorsDialog}
|
62
|
-
>
|
59
|
+
onClick={toggleBothSeparatorsDialog}>
|
63
60
|
{"Right Dialog"}
|
64
61
|
</Button>
|
65
62
|
</Flex>
|
@@ -91,8 +88,7 @@ const DialogFullHeightPlacement = () => {
|
|
91
88
|
<Dialog.Footer>
|
92
89
|
<Button onClick={toggle}>{"Send My Issue"}</Button>
|
93
90
|
<Button onClick={toggle}
|
94
|
-
variant="link"
|
95
|
-
>
|
91
|
+
variant="link">
|
96
92
|
{"Back"}
|
97
93
|
</Button>
|
98
94
|
</Dialog.Footer>
|
@@ -16,12 +16,10 @@ const DialogScrollable = () => {
|
|
16
16
|
return (
|
17
17
|
<>
|
18
18
|
<Button marginRight="md"
|
19
|
-
onClick={toggleDialog1}
|
20
|
-
>{'Open Dialog'}
|
19
|
+
onClick={toggleDialog1}>{'Open Dialog'}
|
21
20
|
</Button>
|
22
21
|
<Button marginRight="md"
|
23
|
-
onClick={toggleDialog2}
|
24
|
-
>{'Open Full Height Dialog'}
|
22
|
+
onClick={toggleDialog2}>{'Open Full Height Dialog'}
|
25
23
|
</Button>
|
26
24
|
<Dialog
|
27
25
|
cancelButton="Cancel"
|
@@ -46,15 +46,12 @@ function FilterTest(props) {
|
|
46
46
|
{...props}
|
47
47
|
/>
|
48
48
|
<Flex spacing="between"
|
49
|
-
{...props}
|
50
|
-
>
|
49
|
+
{...props}>
|
51
50
|
<Button text="Apply"
|
52
|
-
{...props}
|
53
|
-
/>
|
51
|
+
{...props} />
|
54
52
|
<Button text="Clear"
|
55
53
|
variant="secondary"
|
56
|
-
{...props}
|
57
|
-
/>
|
54
|
+
{...props} />
|
58
55
|
</Flex>
|
59
56
|
</Filter>
|
60
57
|
);
|
@@ -12,7 +12,7 @@ describe("Icon Kit", () => {
|
|
12
12
|
data={{ testid: testId }}
|
13
13
|
fixedWidth
|
14
14
|
icon="user"
|
15
|
-
|
15
|
+
/>
|
16
16
|
)
|
17
17
|
|
18
18
|
const kit = screen.getByTestId(testId)
|
@@ -27,7 +27,7 @@ describe("Icon Kit", () => {
|
|
27
27
|
fixedWidth
|
28
28
|
icon="user"
|
29
29
|
rotation={rotateProp}
|
30
|
-
|
30
|
+
/>
|
31
31
|
)
|
32
32
|
|
33
33
|
const kit = screen.getByTestId(testId)
|
@@ -44,7 +44,7 @@ describe("Icon Kit", () => {
|
|
44
44
|
fixedWidth
|
45
45
|
flip="horizontal"
|
46
46
|
icon="user"
|
47
|
-
|
47
|
+
/>
|
48
48
|
)
|
49
49
|
|
50
50
|
const kit = screen.getByTestId(testId)
|
@@ -59,7 +59,7 @@ describe("Icon Kit", () => {
|
|
59
59
|
fixedWidth
|
60
60
|
icon="spinner"
|
61
61
|
spin
|
62
|
-
|
62
|
+
/>
|
63
63
|
)
|
64
64
|
|
65
65
|
const kit = screen.getByTestId(testId)
|
@@ -73,7 +73,7 @@ describe("Icon Kit", () => {
|
|
73
73
|
fixedWidth
|
74
74
|
icon="arrow-left"
|
75
75
|
pull="left"
|
76
|
-
|
76
|
+
/>
|
77
77
|
)
|
78
78
|
|
79
79
|
const kit = screen.getByTestId(testId)
|
@@ -87,7 +87,7 @@ describe("Icon Kit", () => {
|
|
87
87
|
fixedWidth
|
88
88
|
icon="arrow-left"
|
89
89
|
pull="left"
|
90
|
-
|
90
|
+
/>
|
91
91
|
)
|
92
92
|
|
93
93
|
const kit = screen.getByTestId(testId)
|
@@ -101,7 +101,7 @@ describe("Icon Kit", () => {
|
|
101
101
|
data={{ testid: testId }}
|
102
102
|
fixedWidth
|
103
103
|
icon="user"
|
104
|
-
|
104
|
+
/>
|
105
105
|
)
|
106
106
|
|
107
107
|
const kit = screen.getByTestId(testId)
|
@@ -128,7 +128,7 @@ describe("Icon Kit", () => {
|
|
128
128
|
data={{ testid: testId }}
|
129
129
|
icon="user"
|
130
130
|
size={sizeProp}
|
131
|
-
|
131
|
+
/>
|
132
132
|
)
|
133
133
|
|
134
134
|
const kit = screen.getByTestId(testId)
|
@@ -145,7 +145,7 @@ describe("Icon Kit", () => {
|
|
145
145
|
fixedWidth
|
146
146
|
fontStyle="fas"
|
147
147
|
icon="user"
|
148
|
-
|
148
|
+
/>
|
149
149
|
)
|
150
150
|
|
151
151
|
const kit = screen.getByTestId(testId)
|
@@ -14,7 +14,7 @@ describe("IconStatValue Kit", () => {
|
|
14
14
|
text="Electric"
|
15
15
|
unit="kw"
|
16
16
|
value={64.18}
|
17
|
-
|
17
|
+
/>
|
18
18
|
)
|
19
19
|
|
20
20
|
const kit = screen.getByTestId(testId)
|
@@ -29,7 +29,7 @@ describe("IconStatValue Kit", () => {
|
|
29
29
|
text="Electric"
|
30
30
|
unit="kw"
|
31
31
|
value={64.18}
|
32
|
-
|
32
|
+
/>
|
33
33
|
)
|
34
34
|
|
35
35
|
const kit = screen.getByTestId(testId)
|
@@ -45,7 +45,7 @@ describe("IconStatValue Kit", () => {
|
|
45
45
|
text="Electric"
|
46
46
|
unit="kw"
|
47
47
|
value={64.18}
|
48
|
-
|
48
|
+
/>
|
49
49
|
)
|
50
50
|
|
51
51
|
const kit = screen.getByTestId(testId)
|
@@ -61,7 +61,7 @@ describe("IconStatValue Kit", () => {
|
|
61
61
|
text="Electric"
|
62
62
|
unit="kw"
|
63
63
|
value={64.18}
|
64
|
-
|
64
|
+
/>
|
65
65
|
)
|
66
66
|
|
67
67
|
const kit = screen.getByTestId(testId)
|
@@ -77,7 +77,7 @@ describe("IconStatValue Kit", () => {
|
|
77
77
|
text="Electric"
|
78
78
|
unit="kw"
|
79
79
|
value={64.18}
|
80
|
-
|
80
|
+
/>
|
81
81
|
)
|
82
82
|
|
83
83
|
const kit = screen.getByTestId(testId)
|
@@ -97,7 +97,7 @@ describe("IconStatValue Kit", () => {
|
|
97
97
|
text="Electric"
|
98
98
|
unit="kw"
|
99
99
|
value={64.18}
|
100
|
-
|
100
|
+
/>
|
101
101
|
)
|
102
102
|
|
103
103
|
const kit = screen.getByTestId(testId)
|
@@ -125,7 +125,7 @@ describe("IconStatValue Kit", () => {
|
|
125
125
|
unit="kw"
|
126
126
|
value={64.18}
|
127
127
|
variant={colorProp}
|
128
|
-
|
128
|
+
/>
|
129
129
|
)
|
130
130
|
|
131
131
|
const kit = screen.getByTestId(testId)
|
@@ -144,7 +144,7 @@ describe("IconStatValue Kit", () => {
|
|
144
144
|
text="Electric"
|
145
145
|
unit="kw"
|
146
146
|
value={64.18}
|
147
|
-
|
147
|
+
/>
|
148
148
|
)
|
149
149
|
|
150
150
|
const kit = screen.getByTestId(testId)
|
@@ -12,7 +12,7 @@ describe("IconValue Kit", () => {
|
|
12
12
|
data={{ testid: testId }}
|
13
13
|
icon="clipboard"
|
14
14
|
text="33-123456"
|
15
|
-
|
15
|
+
/>
|
16
16
|
)
|
17
17
|
|
18
18
|
const kit = screen.getByTestId(testId)
|
@@ -25,7 +25,7 @@ describe("IconValue Kit", () => {
|
|
25
25
|
data={{ testid: testId }}
|
26
26
|
icon="clipboard"
|
27
27
|
text="33-123456"
|
28
|
-
|
28
|
+
/>
|
29
29
|
)
|
30
30
|
|
31
31
|
const kit = screen.getByTestId(testId)
|
@@ -39,7 +39,7 @@ describe("IconValue Kit", () => {
|
|
39
39
|
data={{ testid: testId }}
|
40
40
|
icon="clipboard"
|
41
41
|
text="33-123456"
|
42
|
-
|
42
|
+
/>
|
43
43
|
)
|
44
44
|
|
45
45
|
const kit = screen.getByTestId(testId)
|
@@ -54,7 +54,7 @@ describe("IconValue Kit", () => {
|
|
54
54
|
data={{ testid: testId }}
|
55
55
|
icon="clipboard"
|
56
56
|
text="33-123456"
|
57
|
-
|
57
|
+
/>
|
58
58
|
)
|
59
59
|
|
60
60
|
const kit = screen.getByTestId(testId)
|
@@ -68,7 +68,7 @@ describe("IconValue Kit", () => {
|
|
68
68
|
data={{ testid: testId }}
|
69
69
|
icon="clipboard"
|
70
70
|
text="33-123456"
|
71
|
-
|
71
|
+
/>
|
72
72
|
)
|
73
73
|
|
74
74
|
const kit = screen.getByTestId(testId)
|
@@ -16,8 +16,7 @@ test("render all color variants", () => {
|
|
16
16
|
testValues.forEach((variant) => {
|
17
17
|
const { getByTestId } = render(
|
18
18
|
<LayoutTest data={{ testid: `test-${variant}` }}
|
19
|
-
variant={variant}
|
20
|
-
/>
|
19
|
+
variant={variant} />
|
21
20
|
)
|
22
21
|
expect(getByTestId(`test-${variant}`)).toHaveClass(
|
23
22
|
`pb_layout_kit_sidebar_size_md_left_${
|
@@ -34,8 +33,7 @@ test("render transparent class", () => {
|
|
34
33
|
|
35
34
|
const { getByTestId } = render(
|
36
35
|
<LayoutTest data={{ testid: `test-${id}` }}
|
37
|
-
variant={id}
|
38
|
-
/>
|
36
|
+
variant={id} />
|
39
37
|
)
|
40
38
|
expect(getByTestId(`test-${id}`)).toHaveClass(
|
41
39
|
`pb_layout_kit_sidebar_size_md_left_${id}`
|
@@ -49,8 +47,7 @@ test("render all sizes variants", () => {
|
|
49
47
|
testValues.forEach((size) => {
|
50
48
|
const { getByTestId } = render(
|
51
49
|
<LayoutTest data={{ testid: `test-${size}` }}
|
52
|
-
size={size}
|
53
|
-
/>
|
50
|
+
size={size} />
|
54
51
|
)
|
55
52
|
expect(getByTestId(`test-${size}`)).toHaveClass(
|
56
53
|
`pb_layout_kit_sidebar_size_${size}_left_light`
|
@@ -87,8 +84,7 @@ test("render all layout variants", () => {
|
|
87
84
|
testValues.forEach(({ layout, expected }) => {
|
88
85
|
const { getByTestId } = render(
|
89
86
|
<Layout data={{ testid: `test-${layout}` }}
|
90
|
-
layout={layout}
|
91
|
-
>
|
87
|
+
layout={layout}>
|
92
88
|
<Layout.Body>
|
93
89
|
<Card>{"Card content"}</Card>
|
94
90
|
</Layout.Body>
|
@@ -23,7 +23,6 @@ type MultiLevelSelectProps = {
|
|
23
23
|
data?: { [key: string]: string }
|
24
24
|
id?: string
|
25
25
|
name?: string
|
26
|
-
returnCompleteData?: boolean
|
27
26
|
returnAllSelected?: boolean
|
28
27
|
treeData?: { [key: string]: string }[]
|
29
28
|
onSelect?: (prop: { [key: string]: any }) => void
|
@@ -37,7 +36,6 @@ const MultiLevelSelect = (props: MultiLevelSelectProps) => {
|
|
37
36
|
id,
|
38
37
|
name,
|
39
38
|
returnAllSelected = false,
|
40
|
-
returnCompleteData = false,
|
41
39
|
treeData,
|
42
40
|
onSelect = () => {},
|
43
41
|
} = props
|
@@ -66,42 +64,11 @@ const MultiLevelSelect = (props: MultiLevelSelectProps) => {
|
|
66
64
|
//state for return for default
|
67
65
|
const [defaultReturn, setDefaultReturn] = useState([])
|
68
66
|
|
69
|
-
const [formattedReturn, setFormattedReturn] = useState([])
|
70
|
-
|
71
|
-
const getSelectedIds = (selectedData: { [key: string]: any }[]) => {
|
72
|
-
return selectedData.map((item) => item.id)
|
73
|
-
}
|
74
|
-
|
75
|
-
const getValues = () => {
|
76
|
-
if (returnCompleteData) {
|
77
|
-
if (returnAllSelected) {
|
78
|
-
return setFormattedReturn(returnedArray)
|
79
|
-
} else {
|
80
|
-
return setFormattedReturn(defaultReturn)
|
81
|
-
}
|
82
|
-
} else {
|
83
|
-
if (returnAllSelected) {
|
84
|
-
setFormattedReturn(getSelectedIds(returnedArray))
|
85
|
-
} else {
|
86
|
-
setFormattedReturn(getSelectedIds(defaultReturn))
|
87
|
-
}
|
88
|
-
}
|
89
|
-
}
|
90
|
-
|
91
|
-
|
92
|
-
useEffect(() => {
|
93
|
-
getValues()
|
94
|
-
}, [returnedArray, defaultReturn])
|
95
|
-
|
96
|
-
useEffect(() => {
|
97
|
-
onSelect(formattedReturn)
|
98
|
-
}, [formattedReturn])
|
99
67
|
|
100
68
|
useEffect(() => {
|
101
69
|
setFormattedData(addCheckedAndParentProperty(treeData))
|
102
70
|
}, [treeData])
|
103
71
|
|
104
|
-
|
105
72
|
useEffect(() => {
|
106
73
|
if (returnAllSelected) {
|
107
74
|
setReturnedArray(getCheckedItems(formattedData))
|
@@ -281,8 +248,8 @@ const MultiLevelSelect = (props: MultiLevelSelectProps) => {
|
|
281
248
|
{Array.isArray(items) &&
|
282
249
|
items.map((item: { [key: string]: any }) => {
|
283
250
|
return (
|
284
|
-
|
285
|
-
<li
|
251
|
+
<div key={item.id}>
|
252
|
+
<li className='dropdown_item' data-name={item.id}>
|
286
253
|
<div className='dropdown_item_checkbox_row'>
|
287
254
|
<div
|
288
255
|
key={isExpanded(item) ? "chevron-down" : "chevron-right"}
|
@@ -321,7 +288,7 @@ const MultiLevelSelect = (props: MultiLevelSelectProps) => {
|
|
321
288
|
<div>{renderNestedOptions(item.children)}</div>
|
322
289
|
)}
|
323
290
|
</li>
|
324
|
-
|
291
|
+
</div>
|
325
292
|
)
|
326
293
|
})}
|
327
294
|
</ul>
|
@@ -333,9 +300,11 @@ const MultiLevelSelect = (props: MultiLevelSelectProps) => {
|
|
333
300
|
<div ref={dropdownRef} className='wrapper'>
|
334
301
|
<div className='input_wrapper' onClick={handleInputWrapperClick}>
|
335
302
|
<div className='input_inner_container'>
|
336
|
-
{returnedArray.
|
337
|
-
|
338
|
-
|
303
|
+
{returnedArray.length !== 0 && returnAllSelected
|
304
|
+
? returnedArray.map((item) => (
|
305
|
+
<input type='hidden' name={`${name}[]`} value={item.id} />
|
306
|
+
))
|
307
|
+
: null}
|
339
308
|
|
340
309
|
{returnedArray.length !== 0 && returnAllSelected
|
341
310
|
? returnedArray.map((item, index) => (
|
@@ -1,62 +1,62 @@
|
|
1
1
|
<% treeData = [{
|
2
2
|
label: "Power Home Remodeling",
|
3
3
|
value: "Power Home Remodeling",
|
4
|
-
id: "
|
4
|
+
id: "100",
|
5
5
|
expanded: true,
|
6
6
|
children: [
|
7
7
|
{
|
8
8
|
label: "People",
|
9
9
|
value: "People",
|
10
|
-
id: "
|
10
|
+
id: "101",
|
11
11
|
children: [
|
12
12
|
{
|
13
13
|
label: "Talent Acquisition",
|
14
14
|
value: "Talent Acquisition",
|
15
|
-
id: "
|
15
|
+
id: "102",
|
16
16
|
},
|
17
17
|
{
|
18
18
|
label: "Business Affairs",
|
19
19
|
value: "Business Affairs",
|
20
|
-
id: "
|
20
|
+
id: "103",
|
21
21
|
children: [
|
22
22
|
{
|
23
23
|
label: "Initiatives",
|
24
24
|
value: "Initiatives",
|
25
|
-
id: "
|
25
|
+
id: "104",
|
26
26
|
},
|
27
27
|
{
|
28
28
|
label: "Learning & Development",
|
29
29
|
value: "Learning & Development",
|
30
|
-
id: "
|
30
|
+
id: "105",
|
31
31
|
},
|
32
32
|
],
|
33
33
|
},
|
34
34
|
{
|
35
35
|
label: "People Experience",
|
36
36
|
value: "People Experience",
|
37
|
-
id: "
|
37
|
+
id: "106",
|
38
38
|
},
|
39
39
|
],
|
40
40
|
},
|
41
41
|
{
|
42
42
|
label: "Contact Center",
|
43
43
|
value: "Contact Center",
|
44
|
-
id: "
|
44
|
+
id: "107",
|
45
45
|
children: [
|
46
46
|
{
|
47
47
|
label: "Appointment Management",
|
48
48
|
value: "Appointment Management",
|
49
|
-
id: "
|
49
|
+
id: "108",
|
50
50
|
},
|
51
51
|
{
|
52
52
|
label: "Customer Service",
|
53
53
|
value: "Customer Service",
|
54
|
-
id: "
|
54
|
+
id: "109",
|
55
55
|
},
|
56
56
|
{
|
57
57
|
label: "Energy",
|
58
58
|
value: "Energy",
|
59
|
-
id: "
|
59
|
+
id: "110",
|
60
60
|
},
|
61
61
|
],
|
62
62
|
},
|
@@ -65,14 +65,8 @@
|
|
65
65
|
|
66
66
|
|
67
67
|
|
68
|
-
<%= pb_form_with(scope: :example, url: "", method: :get) do |form| %>
|
69
68
|
<%= pb_rails("multi_level_select", props: {
|
70
|
-
id: "
|
69
|
+
id: "multi-level-select-default-rails",
|
71
70
|
name: "my_array",
|
72
71
|
tree_data: treeData
|
73
72
|
}) %>
|
74
|
-
<%= form.actions do |action| %>
|
75
|
-
<%= action.submit %>
|
76
|
-
<%= action.button props: { type: "reset", text: "Cancel", variant: "secondary" } %>
|
77
|
-
<% end %>
|
78
|
-
<% end %>
|
@@ -75,11 +75,10 @@ const MultiLevelSelectDefault = (props) => {
|
|
75
75
|
id='multiselect-default'
|
76
76
|
onSelect={(selectedNodes) =>
|
77
77
|
console.log(
|
78
|
-
"Selected Items
|
78
|
+
"Selected Items",
|
79
79
|
selectedNodes
|
80
80
|
)
|
81
81
|
}
|
82
|
-
returnAllSelected
|
83
82
|
treeData={treeData}
|
84
83
|
{...props}
|
85
84
|
/>
|
@@ -1,5 +1,5 @@
|
|
1
1
|
The MultiLevelSelect kit renders a multi leveled select dropdown based on data from the user. `treeData` is a required prop that is expected to contain the data in the form of an array of objects. See code snippet for an example data array.
|
2
2
|
|
3
|
-
For the React version of the kit, the `onSelect` prop returns an array of all checked items
|
3
|
+
For the React version of the kit, the `onSelect` prop returns an array of objects. This array contains 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!
|
4
4
|
|
5
|
-
|
5
|
+
For the Rails version of the kit, there is no onselect. The form submits as a array of strings, following the typical rails pattern of utilizing hidden inputs. The strings are the values of the selected items' ids. For example, ["103", "106", "107"].
|