playbook_ui 12.25.0.pre.alpha.PLAY733DetailKit761 → 12.25.0.pre.alpha.PLAY818multilevelrebuild773
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/_playbook.scss +0 -1
- data/app/pb_kits/playbook/index.js +0 -1
- data/app/pb_kits/playbook/pb_avatar/docs/_avatar_swift.md +82 -1
- data/app/pb_kits/playbook/pb_docs/kit_example.html.erb +14 -13
- data/app/pb_kits/playbook/pb_form_pill/_form_pill.tsx +3 -2
- data/app/pb_kits/playbook/pb_multi_level_select/_helper_functions.tsx +212 -0
- data/app/pb_kits/playbook/pb_multi_level_select/_multi_level_select.scss +58 -98
- data/app/pb_kits/playbook/pb_multi_level_select/_multi_level_select.tsx +340 -86
- data/app/pb_kits/playbook/pb_multi_level_select/docs/_multi_level_select_default.md +1 -1
- data/app/pb_kits/playbook/pb_multi_level_select/docs/_multi_level_select_return_all_selected.html.erb +1 -0
- data/app/pb_kits/playbook/pb_multi_level_select/multi_level_select.test.jsx +1 -1
- data/app/pb_kits/playbook/playbook-doc.js +0 -2
- data/dist/menu.yml +0 -1
- data/dist/playbook-rails.js +7 -7
- data/lib/playbook/version.rb +1 -1
- metadata +3 -20
- data/app/pb_kits/playbook/pb_detail/_detail.scss +0 -44
- data/app/pb_kits/playbook/pb_detail/_detail.tsx +0 -51
- data/app/pb_kits/playbook/pb_detail/_detail_mixins.scss +0 -29
- data/app/pb_kits/playbook/pb_detail/detail.html.erb +0 -7
- data/app/pb_kits/playbook/pb_detail/detail.rb +0 -23
- data/app/pb_kits/playbook/pb_detail/detail.test.jsx +0 -33
- data/app/pb_kits/playbook/pb_detail/docs/_description.md +0 -1
- data/app/pb_kits/playbook/pb_detail/docs/_detail_bolded.html.erb +0 -33
- data/app/pb_kits/playbook/pb_detail/docs/_detail_bolded.jsx +0 -47
- data/app/pb_kits/playbook/pb_detail/docs/_detail_default.html.erb +0 -28
- data/app/pb_kits/playbook/pb_detail/docs/_detail_default.jsx +0 -43
- data/app/pb_kits/playbook/pb_detail/docs/_detail_default.md +0 -6
- data/app/pb_kits/playbook/pb_detail/docs/_detail_styled.html.erb +0 -22
- data/app/pb_kits/playbook/pb_detail/docs/_detail_styled.jsx +0 -32
- data/app/pb_kits/playbook/pb_detail/docs/example.yml +0 -11
- data/app/pb_kits/playbook/pb_detail/docs/index.js +0 -3
- data/app/pb_kits/playbook/pb_multi_level_select/_multi_select_helper.tsx +0 -31
- data/app/pb_kits/playbook/pb_multi_level_select/helper_functions.ts +0 -87
data/lib/playbook/version.rb
CHANGED
metadata
CHANGED
@@ -1,7 +1,7 @@
|
|
1
1
|
--- !ruby/object:Gem::Specification
|
2
2
|
name: playbook_ui
|
3
3
|
version: !ruby/object:Gem::Version
|
4
|
-
version: 12.25.0.pre.alpha.
|
4
|
+
version: 12.25.0.pre.alpha.PLAY818multilevelrebuild773
|
5
5
|
platform: ruby
|
6
6
|
authors:
|
7
7
|
- Power UX
|
@@ -9,7 +9,7 @@ authors:
|
|
9
9
|
autorequire:
|
10
10
|
bindir: bin
|
11
11
|
cert_chain: []
|
12
|
-
date: 2023-06-
|
12
|
+
date: 2023-06-14 00:00:00.000000000 Z
|
13
13
|
dependencies:
|
14
14
|
- !ruby/object:Gem::Dependency
|
15
15
|
name: actionpack
|
@@ -823,22 +823,6 @@ files:
|
|
823
823
|
- app/pb_kits/playbook/pb_date_year_stacked/docs/_footer.md
|
824
824
|
- app/pb_kits/playbook/pb_date_year_stacked/docs/example.yml
|
825
825
|
- app/pb_kits/playbook/pb_date_year_stacked/docs/index.js
|
826
|
-
- app/pb_kits/playbook/pb_detail/_detail.scss
|
827
|
-
- app/pb_kits/playbook/pb_detail/_detail.tsx
|
828
|
-
- app/pb_kits/playbook/pb_detail/_detail_mixins.scss
|
829
|
-
- app/pb_kits/playbook/pb_detail/detail.html.erb
|
830
|
-
- app/pb_kits/playbook/pb_detail/detail.rb
|
831
|
-
- app/pb_kits/playbook/pb_detail/detail.test.jsx
|
832
|
-
- app/pb_kits/playbook/pb_detail/docs/_description.md
|
833
|
-
- app/pb_kits/playbook/pb_detail/docs/_detail_bolded.html.erb
|
834
|
-
- app/pb_kits/playbook/pb_detail/docs/_detail_bolded.jsx
|
835
|
-
- app/pb_kits/playbook/pb_detail/docs/_detail_default.html.erb
|
836
|
-
- app/pb_kits/playbook/pb_detail/docs/_detail_default.jsx
|
837
|
-
- app/pb_kits/playbook/pb_detail/docs/_detail_default.md
|
838
|
-
- app/pb_kits/playbook/pb_detail/docs/_detail_styled.html.erb
|
839
|
-
- app/pb_kits/playbook/pb_detail/docs/_detail_styled.jsx
|
840
|
-
- app/pb_kits/playbook/pb_detail/docs/example.yml
|
841
|
-
- app/pb_kits/playbook/pb_detail/docs/index.js
|
842
826
|
- app/pb_kits/playbook/pb_dialog/_close_icon.tsx
|
843
827
|
- app/pb_kits/playbook/pb_dialog/_dialog.scss
|
844
828
|
- app/pb_kits/playbook/pb_dialog/_dialog.tsx
|
@@ -1423,9 +1407,9 @@ files:
|
|
1423
1407
|
- app/pb_kits/playbook/pb_message/message.html.erb
|
1424
1408
|
- app/pb_kits/playbook/pb_message/message.rb
|
1425
1409
|
- app/pb_kits/playbook/pb_message/message.test.js
|
1410
|
+
- app/pb_kits/playbook/pb_multi_level_select/_helper_functions.tsx
|
1426
1411
|
- app/pb_kits/playbook/pb_multi_level_select/_multi_level_select.scss
|
1427
1412
|
- app/pb_kits/playbook/pb_multi_level_select/_multi_level_select.tsx
|
1428
|
-
- app/pb_kits/playbook/pb_multi_level_select/_multi_select_helper.tsx
|
1429
1413
|
- app/pb_kits/playbook/pb_multi_level_select/docs/_multi_level_select_default.html.erb
|
1430
1414
|
- app/pb_kits/playbook/pb_multi_level_select/docs/_multi_level_select_default.jsx
|
1431
1415
|
- app/pb_kits/playbook/pb_multi_level_select/docs/_multi_level_select_default.md
|
@@ -1434,7 +1418,6 @@ files:
|
|
1434
1418
|
- app/pb_kits/playbook/pb_multi_level_select/docs/_multi_level_select_return_all_selected.md
|
1435
1419
|
- app/pb_kits/playbook/pb_multi_level_select/docs/example.yml
|
1436
1420
|
- app/pb_kits/playbook/pb_multi_level_select/docs/index.js
|
1437
|
-
- app/pb_kits/playbook/pb_multi_level_select/helper_functions.ts
|
1438
1421
|
- app/pb_kits/playbook/pb_multi_level_select/multi_level_select.html.erb
|
1439
1422
|
- app/pb_kits/playbook/pb_multi_level_select/multi_level_select.rb
|
1440
1423
|
- app/pb_kits/playbook/pb_multi_level_select/multi_level_select.test.jsx
|
@@ -1,44 +0,0 @@
|
|
1
|
-
@import "./detail_mixins";
|
2
|
-
@import "../tokens/titles";
|
3
|
-
@import "../tokens/typography";
|
4
|
-
|
5
|
-
[class^=pb_detail_kit]{
|
6
|
-
@include pb_detail;
|
7
|
-
|
8
|
-
@each $color_name, $color_value in $pb_detail_colors {
|
9
|
-
&[class*=_#{$color_name}] {
|
10
|
-
@include pb_detail($color_value);
|
11
|
-
}
|
12
|
-
}
|
13
|
-
|
14
|
-
@each $dark_color_name, $dark_color_value in $pb_dark_detail_colors{
|
15
|
-
&[class*=_#{$dark_color_name}][class*=dark]{
|
16
|
-
@include pb_detail($dark_color_value)
|
17
|
-
}
|
18
|
-
}
|
19
|
-
|
20
|
-
// Styles
|
21
|
-
b, strong {
|
22
|
-
@include pb_title_4;
|
23
|
-
color: inherit;
|
24
|
-
font-size: $text_small;
|
25
|
-
font-weight: $bold;
|
26
|
-
}
|
27
|
-
|
28
|
-
a {
|
29
|
-
color: $primary;
|
30
|
-
&:hover {
|
31
|
-
cursor: pointer;
|
32
|
-
color: $text_lt_default;
|
33
|
-
}
|
34
|
-
}
|
35
|
-
|
36
|
-
em {
|
37
|
-
font-weight: $bold;
|
38
|
-
}
|
39
|
-
|
40
|
-
small {
|
41
|
-
font-size: $font_smaller;
|
42
|
-
letter-spacing: $lspace_loose;
|
43
|
-
}
|
44
|
-
}
|
@@ -1,51 +0,0 @@
|
|
1
|
-
import React from 'react'
|
2
|
-
import classnames from 'classnames'
|
3
|
-
import { buildAriaProps, buildCss, buildDataProps } from '../utilities/props'
|
4
|
-
import { globalProps, GlobalProps } from '../utilities/globalProps'
|
5
|
-
|
6
|
-
type DetailProps = {
|
7
|
-
aria?: { [key: string]: string },
|
8
|
-
children?: React.ReactChild[] | React.ReactChild,
|
9
|
-
className?: string,
|
10
|
-
color?: 'light' | 'default' | 'lighter' | 'link' | 'error' | 'success',
|
11
|
-
dark?: boolean,
|
12
|
-
data?: { [key: string]: string },
|
13
|
-
id?: string,
|
14
|
-
tag?: 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6' | 'p' | 'span' | 'div',
|
15
|
-
text?: string,
|
16
|
-
} & GlobalProps
|
17
|
-
|
18
|
-
const Detail = (props: DetailProps) => {
|
19
|
-
const {
|
20
|
-
aria = {},
|
21
|
-
children,
|
22
|
-
className,
|
23
|
-
color = 'light',
|
24
|
-
data = {},
|
25
|
-
id = '',
|
26
|
-
tag = 'div',
|
27
|
-
text= ''
|
28
|
-
} = props
|
29
|
-
|
30
|
-
const ariaProps: {[key: string]: any} = buildAriaProps(aria)
|
31
|
-
const dataProps: {[key: string]: any} = buildDataProps(data)
|
32
|
-
const classes = classnames(
|
33
|
-
buildCss('pb_detail_kit', color),
|
34
|
-
globalProps(props),
|
35
|
-
className
|
36
|
-
)
|
37
|
-
const Tag: React.ReactElement | any = `${tag}`
|
38
|
-
|
39
|
-
return (
|
40
|
-
<Tag
|
41
|
-
{...ariaProps}
|
42
|
-
{...dataProps}
|
43
|
-
className={classes}
|
44
|
-
id={id}
|
45
|
-
>
|
46
|
-
{text || children}
|
47
|
-
</Tag>
|
48
|
-
)
|
49
|
-
}
|
50
|
-
|
51
|
-
export default Detail
|
@@ -1,29 +0,0 @@
|
|
1
|
-
@import "../tokens/colors";
|
2
|
-
@import "../tokens/line_height";
|
3
|
-
@import "../tokens/typography";
|
4
|
-
|
5
|
-
$pb_detail_colors: (
|
6
|
-
light: $text_lt_light,
|
7
|
-
default: $text_lt_default,
|
8
|
-
lighter: $text_lt_lighter,
|
9
|
-
link: $primary,
|
10
|
-
error: $error,
|
11
|
-
success: $text_lt_success_sm,
|
12
|
-
);
|
13
|
-
|
14
|
-
$pb_dark_detail_colors: (
|
15
|
-
light: $text_dk_light,
|
16
|
-
default: $text_dk_default,
|
17
|
-
lighter: $text_dk_lighter,
|
18
|
-
link: $primary,
|
19
|
-
error: $error_dark,
|
20
|
-
success: $text_dk_success_sm,
|
21
|
-
);
|
22
|
-
|
23
|
-
@mixin pb_detail($color: $text_lt_light) {
|
24
|
-
line-height: $lh_tight;
|
25
|
-
color: $color;
|
26
|
-
font-size: $text_small;
|
27
|
-
font-weight: $regular;
|
28
|
-
font-family: $font-family-base;
|
29
|
-
}
|
@@ -1,23 +0,0 @@
|
|
1
|
-
# frozen_string_literal: true
|
2
|
-
|
3
|
-
module Playbook
|
4
|
-
module PbDetail
|
5
|
-
class Detail < ::Playbook::KitBase
|
6
|
-
prop :color, type: Playbook::Props::Enum,
|
7
|
-
values: %w[light default lighter link error success],
|
8
|
-
default: "light"
|
9
|
-
prop :tag, type: Playbook::Props::Enum,
|
10
|
-
values: %w[h1 h2 h3 h4 h5 h6 p span div],
|
11
|
-
default: "div"
|
12
|
-
prop :text
|
13
|
-
|
14
|
-
def classname
|
15
|
-
generate_classname("pb_detail_kit", color)
|
16
|
-
end
|
17
|
-
|
18
|
-
def content
|
19
|
-
super.presence || text
|
20
|
-
end
|
21
|
-
end
|
22
|
-
end
|
23
|
-
end
|
@@ -1,33 +0,0 @@
|
|
1
|
-
import React from 'react'
|
2
|
-
import { render, screen } from '../utilities/test-utils'
|
3
|
-
|
4
|
-
import Detail from './_detail'
|
5
|
-
|
6
|
-
test('returns namespaced class name', () => {
|
7
|
-
render(
|
8
|
-
<Detail
|
9
|
-
data={{ testid: 'primary-test' }}
|
10
|
-
text="Test colors"
|
11
|
-
/>
|
12
|
-
)
|
13
|
-
|
14
|
-
const kit = screen.getByTestId('primary-test')
|
15
|
-
expect(kit).toHaveClass('pb_detail_kit_light')
|
16
|
-
})
|
17
|
-
|
18
|
-
test('with colors', () => {
|
19
|
-
['light', 'default', 'lighter', 'link', 'success', 'error'].forEach((color) => {
|
20
|
-
const testId = `colors-test-${color}`
|
21
|
-
|
22
|
-
render(
|
23
|
-
<Detail
|
24
|
-
color={color}
|
25
|
-
data={{ testid: testId }}
|
26
|
-
text="Test colors"
|
27
|
-
/>
|
28
|
-
)
|
29
|
-
|
30
|
-
const kit = screen.getByTestId(testId)
|
31
|
-
expect(kit).toHaveClass(`pb_detail_kit_${color}`)
|
32
|
-
})
|
33
|
-
})
|
@@ -1 +0,0 @@
|
|
1
|
-
Used for tables or designs with large amounts of data or text. This kit's font size is smaller than the `Body` kit and larger than the Caption's kit `subcaption` variant.
|
@@ -1,33 +0,0 @@
|
|
1
|
-
<%= pb_rails("detail") do %>
|
2
|
-
<b>I am a bolded detail kit (Default)</b>
|
3
|
-
<% end %>
|
4
|
-
|
5
|
-
<%= pb_rails("detail", props: {
|
6
|
-
color: "default"
|
7
|
-
}) do %>
|
8
|
-
<b>I am a bolded detail kit (Default as a color)</b>
|
9
|
-
<% end %>
|
10
|
-
|
11
|
-
<%= pb_rails("detail", props: {
|
12
|
-
color: "lighter"
|
13
|
-
}) do %>
|
14
|
-
<b>I am a bolded detail kit (lighter)</b>
|
15
|
-
<% end %>
|
16
|
-
|
17
|
-
<%= pb_rails("detail", props: {
|
18
|
-
color: "link"
|
19
|
-
}) do %>
|
20
|
-
<b>I am a bolded detail kit (link)</b>
|
21
|
-
<% end %>
|
22
|
-
|
23
|
-
<%= pb_rails("detail", props: {
|
24
|
-
color: "error"
|
25
|
-
}) do %>
|
26
|
-
<b>I am a bolded detail kit (Error)</b>
|
27
|
-
<% end %>
|
28
|
-
|
29
|
-
<%= pb_rails("detail", props: {
|
30
|
-
color: "success"
|
31
|
-
}) do %>
|
32
|
-
<b>I am a bolded detail kit (Success)</b>
|
33
|
-
<% end %>
|
@@ -1,47 +0,0 @@
|
|
1
|
-
import React from 'react'
|
2
|
-
import { Detail } from '../..'
|
3
|
-
|
4
|
-
const DetailBolded = (props) => (
|
5
|
-
<div>
|
6
|
-
<Detail {...props}>
|
7
|
-
<b>{"I am a bolded detail kit (Default)"}</b>
|
8
|
-
</Detail>
|
9
|
-
|
10
|
-
<Detail
|
11
|
-
color="default"
|
12
|
-
{...props}
|
13
|
-
>
|
14
|
-
<b>{"I am a bolded detail kit (Default as a color)"}</b>
|
15
|
-
</Detail>
|
16
|
-
|
17
|
-
<Detail
|
18
|
-
color="lighter"
|
19
|
-
{...props}
|
20
|
-
>
|
21
|
-
<b>{"I am a bolded detail kit (Lighter)"}</b>
|
22
|
-
</Detail>
|
23
|
-
|
24
|
-
<Detail
|
25
|
-
color="link"
|
26
|
-
{...props}
|
27
|
-
>
|
28
|
-
<b>{"I am a bolded detail kit (Link)"}</b>
|
29
|
-
</Detail>
|
30
|
-
|
31
|
-
<Detail
|
32
|
-
color="error"
|
33
|
-
{...props}
|
34
|
-
>
|
35
|
-
<b>{"I am a bolded detail kit (Error)"}</b>
|
36
|
-
</Detail>
|
37
|
-
|
38
|
-
<Detail
|
39
|
-
color="success"
|
40
|
-
{...props}
|
41
|
-
>
|
42
|
-
<b>{"I am a bolded detail kit (Success)"}</b>
|
43
|
-
</Detail>
|
44
|
-
</div>
|
45
|
-
)
|
46
|
-
|
47
|
-
export default DetailBolded
|
@@ -1,28 +0,0 @@
|
|
1
|
-
<%= pb_rails("detail", props: {
|
2
|
-
text: "I am a detail kit (Default)"
|
3
|
-
}) %>
|
4
|
-
|
5
|
-
<%= pb_rails("detail", props: {
|
6
|
-
text: "I am a detail kit (Default as a color)",
|
7
|
-
color: "default"
|
8
|
-
}) %>
|
9
|
-
|
10
|
-
<%= pb_rails("detail", props: {
|
11
|
-
text: "I am a detail kit (Lighter)",
|
12
|
-
color: "lighter"
|
13
|
-
}) %>
|
14
|
-
|
15
|
-
<%= pb_rails("detail", props: {
|
16
|
-
text: "I am a detail kit (Link)",
|
17
|
-
color: "link"
|
18
|
-
}) %>
|
19
|
-
|
20
|
-
<%= pb_rails("detail", props: {
|
21
|
-
text: "I am a detail kit (Error)",
|
22
|
-
color: "error"
|
23
|
-
}) %>
|
24
|
-
|
25
|
-
<%= pb_rails("detail", props: {
|
26
|
-
text: "I am a detail kit (Success)",
|
27
|
-
color: "success"
|
28
|
-
}) %>
|
@@ -1,43 +0,0 @@
|
|
1
|
-
import React from 'react'
|
2
|
-
import { Detail } from '../../'
|
3
|
-
|
4
|
-
const DetailDefault = (props) => (
|
5
|
-
<div>
|
6
|
-
<Detail
|
7
|
-
text="I am a detail kit (Default)"
|
8
|
-
{...props}
|
9
|
-
/>
|
10
|
-
|
11
|
-
<Detail
|
12
|
-
color="default"
|
13
|
-
text="I am a detail kit (Default as a color)"
|
14
|
-
{...props}
|
15
|
-
/>
|
16
|
-
|
17
|
-
<Detail
|
18
|
-
color="lighter"
|
19
|
-
text="I am a detail kit (Lighter)"
|
20
|
-
{...props}
|
21
|
-
/>
|
22
|
-
|
23
|
-
<Detail
|
24
|
-
color="link"
|
25
|
-
text="I am a detail kit (Link)"
|
26
|
-
{...props}
|
27
|
-
/>
|
28
|
-
|
29
|
-
<Detail
|
30
|
-
color="error"
|
31
|
-
text="I am a detail kit (Error)"
|
32
|
-
{...props}
|
33
|
-
/>
|
34
|
-
|
35
|
-
<Detail
|
36
|
-
color="success"
|
37
|
-
text="I am a detail kit (Success)"
|
38
|
-
{...props}
|
39
|
-
/>
|
40
|
-
</div>
|
41
|
-
)
|
42
|
-
|
43
|
-
export default DetailDefault
|
@@ -1,6 +0,0 @@
|
|
1
|
-
##### Prop
|
2
|
-
This kit uses the `light` color by default, and can be replaced with colors below:
|
3
|
-
|
4
|
-
- `default` `lighter` `link` `error` `success`
|
5
|
-
|
6
|
-
- These colors are not for standard usage. You can use the `color` prop to make fixes if colors are not appearing properly, but consult your UX team members if you are deciding to implement it.
|
@@ -1,22 +0,0 @@
|
|
1
|
-
<%= pb_rails("detail") do %>
|
2
|
-
<b>This text is using the <%="<b>"%> tag.</b>
|
3
|
-
<br />
|
4
|
-
<br />
|
5
|
-
<strong>This text is using the <%="<strong>"%> tag.</strong>
|
6
|
-
<br />
|
7
|
-
<br />
|
8
|
-
<a>This text is using the <%="<a>"%> tag.</a>
|
9
|
-
<br />
|
10
|
-
<br />
|
11
|
-
<i>This text is using the <%="<i>"%> tag.</i>
|
12
|
-
<br />
|
13
|
-
<br />
|
14
|
-
This <em>word</em> is using an <%="<em>"%> tag.
|
15
|
-
<br />
|
16
|
-
<br />
|
17
|
-
<small>This text is using the <%="<small>"%> tag.</small>
|
18
|
-
<br />
|
19
|
-
<br />
|
20
|
-
<u>This text is using the <%="<u>"%> tag.</u>
|
21
|
-
<br />
|
22
|
-
<% end %>
|
@@ -1,32 +0,0 @@
|
|
1
|
-
import React from 'react'
|
2
|
-
import { Detail } from '../..'
|
3
|
-
|
4
|
-
const DetailStyled = (props) => (
|
5
|
-
<>
|
6
|
-
<Detail {...props}>
|
7
|
-
<b>{"This text is using the <b> tag."}</b>
|
8
|
-
<br />
|
9
|
-
<br />
|
10
|
-
<strong>{"This text is using the <strong> tag."}</strong>
|
11
|
-
<br />
|
12
|
-
<br />
|
13
|
-
<a>{"This text is using the <a> tag."}</a>
|
14
|
-
<br />
|
15
|
-
<br />
|
16
|
-
<i>{"This text is using the <i> tag."}</i>
|
17
|
-
<br />
|
18
|
-
<br />
|
19
|
-
{"This "}<em>{"word"}</em>{" is using an <em> tag."}
|
20
|
-
<br />
|
21
|
-
<br />
|
22
|
-
<small>{"This text is using the <small> tag."}</small>
|
23
|
-
<br />
|
24
|
-
<br />
|
25
|
-
<u>{"This text is using the <u> tag."}</u>
|
26
|
-
<br />
|
27
|
-
<br />
|
28
|
-
</Detail>
|
29
|
-
</>
|
30
|
-
)
|
31
|
-
|
32
|
-
export default DetailStyled
|
@@ -1,31 +0,0 @@
|
|
1
|
-
import React from "react"
|
2
|
-
import DropdownTreeSelect from "react-dropdown-tree-select"
|
3
|
-
import "react-dropdown-tree-select/dist/styles.css"
|
4
|
-
|
5
|
-
type HelperProps = {
|
6
|
-
id?: string
|
7
|
-
treeData?: { [key: string]: string }[]
|
8
|
-
treeMode?: boolean
|
9
|
-
onChange?: any
|
10
|
-
|
11
|
-
}
|
12
|
-
|
13
|
-
const MultiSelectHelper = (props: HelperProps) => {
|
14
|
-
const { id, treeData, onChange, treeMode } = props
|
15
|
-
|
16
|
-
|
17
|
-
return (
|
18
|
-
<DropdownTreeSelect
|
19
|
-
data={treeData}
|
20
|
-
id={id}
|
21
|
-
keepOpenOnSelect
|
22
|
-
keepTreeOnSearch
|
23
|
-
keepChildrenOnSearch
|
24
|
-
onChange={onChange}
|
25
|
-
texts={{ placeholder: "Select..." }}
|
26
|
-
mode={treeMode ? 'hierarchical' : 'multiSelect'}
|
27
|
-
/>
|
28
|
-
)
|
29
|
-
}
|
30
|
-
|
31
|
-
export default MultiSelectHelper
|
@@ -1,87 +0,0 @@
|
|
1
|
-
export const findItemById = (
|
2
|
-
items: { [key: string]: any }[],
|
3
|
-
id: string
|
4
|
-
): any => {
|
5
|
-
for (const item of items) {
|
6
|
-
if (item.id === id) {
|
7
|
-
return item;
|
8
|
-
}
|
9
|
-
if (item.children) {
|
10
|
-
const found = findItemById(item.children, id);
|
11
|
-
if (found) {
|
12
|
-
return found;
|
13
|
-
}
|
14
|
-
}
|
15
|
-
}
|
16
|
-
return null;
|
17
|
-
};
|
18
|
-
|
19
|
-
export const checkIt = (
|
20
|
-
foundItem: { [key: string]: any },
|
21
|
-
selectedItems: any[],
|
22
|
-
setSelectedItems: Function,
|
23
|
-
expand: boolean
|
24
|
-
) => {
|
25
|
-
if (!foundItem) {
|
26
|
-
return;
|
27
|
-
}
|
28
|
-
|
29
|
-
foundItem.checked = true;
|
30
|
-
foundItem.expanded = expand;
|
31
|
-
selectedItems.push(foundItem);
|
32
|
-
|
33
|
-
if (foundItem.children) {
|
34
|
-
foundItem.children.map((x: any) => {
|
35
|
-
checkIt(x, selectedItems, setSelectedItems, expand);
|
36
|
-
});
|
37
|
-
}
|
38
|
-
|
39
|
-
setSelectedItems([...selectedItems]);
|
40
|
-
};
|
41
|
-
|
42
|
-
export const unCheckIt = (
|
43
|
-
foundItem: { [key: string]: any },
|
44
|
-
selectedItems: any,
|
45
|
-
setSelectedItems: any,
|
46
|
-
expand: boolean
|
47
|
-
) => {
|
48
|
-
if (!foundItem) {
|
49
|
-
return;
|
50
|
-
}
|
51
|
-
|
52
|
-
foundItem.checked = false;
|
53
|
-
foundItem.expanded = false;
|
54
|
-
const newSelectedItems = selectedItems.filter(
|
55
|
-
(item: any) => item.id !== foundItem.id
|
56
|
-
);
|
57
|
-
if (foundItem.children) {
|
58
|
-
foundItem.children.map((x: any) => {
|
59
|
-
unCheckIt(x, selectedItems, setSelectedItems, expand);
|
60
|
-
});
|
61
|
-
}
|
62
|
-
setSelectedItems([...newSelectedItems]);
|
63
|
-
};
|
64
|
-
|
65
|
-
|
66
|
-
export const getParentAndAncestorsIds = (itemId:string, items:{ [key: string]: string; }[], ancestors:string[] = []):any => {
|
67
|
-
for (let i = 0; i < items.length; i++) {
|
68
|
-
const item:any = items[i];
|
69
|
-
if (item.id === itemId) {
|
70
|
-
// item found in current level of items array
|
71
|
-
return [...ancestors, item.id];
|
72
|
-
}
|
73
|
-
if (item.children && item.children.length > 0) {
|
74
|
-
// recursively search through children
|
75
|
-
const foundAncestors = getParentAndAncestorsIds(
|
76
|
-
itemId,
|
77
|
-
item.children,
|
78
|
-
[...ancestors, item.id]
|
79
|
-
);
|
80
|
-
if (foundAncestors) {
|
81
|
-
return foundAncestors;
|
82
|
-
}
|
83
|
-
}
|
84
|
-
}
|
85
|
-
// item not found in this level of items array or its children
|
86
|
-
return null;
|
87
|
-
}
|