playbook_ui 12.26.1.pre.alpha.railsmultilevelimprovements837 → 12.26.1.pre.alpha.railsmultilevelimprovements842
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_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"].
|