playbook_ui 13.16.0.pre.alpha.PBNTR184betaflaginmenuyml2085 → 13.16.0.pre.alpha.PLAY11641991
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 +12 -14
- data/app/pb_kits/playbook/index.js +1 -2
- data/app/pb_kits/playbook/pb_flex/_flex.tsx +1 -1
- data/app/pb_kits/playbook/pb_icon/_icon.tsx +28 -16
- data/app/pb_kits/playbook/pb_icon/docs/_icon_custom.html.erb +5 -11
- data/app/pb_kits/playbook/pb_icon/docs/_icon_custom.jsx +44 -18
- data/app/pb_kits/playbook/pb_icon/docs/_icon_custom.md +7 -12
- data/app/pb_kits/playbook/pb_icon/icon.html.erb +6 -4
- data/app/pb_kits/playbook/pb_icon/icon.rb +10 -10
- data/app/pb_kits/playbook/pb_label_value/_label_value.tsx +1 -1
- data/app/pb_kits/playbook/pb_layout/_layout.tsx +1 -2
- data/app/pb_kits/playbook/pb_layout/layout.test.js +4 -8
- data/app/pb_kits/playbook/pb_legend/_legend.tsx +6 -6
- data/app/pb_kits/playbook/pb_lightbox/Carousel/Slides.tsx +4 -4
- data/app/pb_kits/playbook/pb_lightbox/Carousel/Thumbnail.tsx +1 -1
- data/app/pb_kits/playbook/pb_lightbox/Carousel/index.tsx +3 -3
- data/app/pb_kits/playbook/pb_lightbox/Header/_lightbox_header.tsx +22 -30
- data/app/pb_kits/playbook/pb_lightbox/_lightbox.tsx +5 -5
- data/app/pb_kits/playbook/pb_line_graph/_line_graph.tsx +4 -4
- data/app/pb_kits/playbook/pb_list/_list.tsx +15 -15
- data/app/pb_kits/playbook/pb_list/_list_item.tsx +1 -1
- data/app/pb_kits/playbook/pb_loading_inline/_loading_inline.tsx +9 -9
- data/app/pb_kits/playbook/pb_map/_map.tsx +8 -8
- data/app/pb_kits/playbook/pb_map/_map_controls.tsx +7 -15
- data/app/pb_kits/playbook/pb_map/_map_custom_button.tsx +2 -4
- data/app/pb_kits/playbook/pb_message/_message.tsx +1 -1
- data/app/pb_kits/playbook/pb_message/_message_mention.tsx +6 -6
- data/app/pb_kits/playbook/pb_multi_level_select/_multi_level_select.tsx +42 -46
- data/app/pb_kits/playbook/pb_multiple_users_stacked/_multiple_users_stacked.tsx +20 -20
- data/app/pb_kits/playbook/pb_nav/_item.tsx +47 -56
- data/app/pb_kits/playbook/pb_nav/_nav.tsx +15 -15
- data/app/pb_kits/playbook/pb_table/_table.tsx +29 -29
- data/app/pb_kits/playbook/pb_typeahead/_typeahead.scss +1 -1
- data/app/pb_kits/playbook/pb_typeahead/docs/_typeahead_with_highlight.jsx +2 -4
- data/app/pb_kits/playbook/playbook-doc.js +0 -2
- data/app/pb_kits/playbook/utilities/globalProps.ts +1 -1
- data/dist/menu.yml +3 -105
- data/dist/playbook-rails.js +6 -14
- data/lib/playbook/version.rb +1 -1
- metadata +2 -29
- data/app/pb_kits/playbook/pb_advanced_table/Components/CollapsibleTrail.tsx +0 -30
- data/app/pb_kits/playbook/pb_advanced_table/Components/CustomCell.tsx +0 -62
- data/app/pb_kits/playbook/pb_advanced_table/Components/LoadingCell.tsx +0 -5
- data/app/pb_kits/playbook/pb_advanced_table/Components/SortIconButton.tsx +0 -30
- data/app/pb_kits/playbook/pb_advanced_table/Components/SubRowHeaderRow.tsx +0 -61
- data/app/pb_kits/playbook/pb_advanced_table/Components/TableHeaderCell.tsx +0 -128
- data/app/pb_kits/playbook/pb_advanced_table/Components/ToggleIconButton.tsx +0 -28
- data/app/pb_kits/playbook/pb_advanced_table/Context/AdvancedTableContext.tsx +0 -5
- data/app/pb_kits/playbook/pb_advanced_table/README.md +0 -288
- data/app/pb_kits/playbook/pb_advanced_table/SubKits/TableBody.tsx +0 -95
- data/app/pb_kits/playbook/pb_advanced_table/SubKits/TableHeader.tsx +0 -51
- data/app/pb_kits/playbook/pb_advanced_table/Utilities/BrowserCheck.tsx +0 -5
- data/app/pb_kits/playbook/pb_advanced_table/Utilities/ExpansionControlHelpers.tsx +0 -63
- data/app/pb_kits/playbook/pb_advanced_table/Utilities/IconHelpers.tsx +0 -8
- data/app/pb_kits/playbook/pb_advanced_table/Utilities/types.ts +0 -8
- data/app/pb_kits/playbook/pb_advanced_table/_advanced_table.scss +0 -98
- data/app/pb_kits/playbook/pb_advanced_table/_advanced_table.tsx +0 -245
- data/app/pb_kits/playbook/pb_advanced_table/advanced_table.test.jsx +0 -56
- data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_default.jsx +0 -49
- data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_default.md +0 -13
- data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_sort.jsx +0 -57
- data/app/pb_kits/playbook/pb_advanced_table/docs/_description.md +0 -1
- data/app/pb_kits/playbook/pb_advanced_table/docs/_mock_data.js +0 -278
- data/app/pb_kits/playbook/pb_advanced_table/docs/example.yml +0 -6
- data/app/pb_kits/playbook/pb_advanced_table/docs/index.js +0 -2
- data/app/pb_kits/playbook/pb_advanced_table/scss_partials/_loading.scss +0 -71
- data/app/pb_kits/playbook/pb_advanced_table/scss_partials/_pseudo_states.scss +0 -12
@@ -19,7 +19,7 @@ type LightboxType = {
|
|
19
19
|
id?: string,
|
20
20
|
photos: [],
|
21
21
|
initialPhoto?: number,
|
22
|
-
onChange?: (index: number)=>
|
22
|
+
onChange?: (index: number)=> {},
|
23
23
|
onClickRight?: () => void,
|
24
24
|
onClose?: () => void,
|
25
25
|
icon: string,
|
@@ -40,7 +40,7 @@ const Lightbox = (props: LightboxType): React.ReactNode => {
|
|
40
40
|
id = '',
|
41
41
|
initialPhoto = 0,
|
42
42
|
photos,
|
43
|
-
onChange = ()
|
43
|
+
onChange = ()=>{},
|
44
44
|
onClose,
|
45
45
|
onClickRight,
|
46
46
|
icon = 'times',
|
@@ -107,18 +107,18 @@ const Lightbox = (props: LightboxType): React.ReactNode => {
|
|
107
107
|
<div className="carousel">
|
108
108
|
<Lightbox.Header
|
109
109
|
icon={icon}
|
110
|
-
navRight={navRight}
|
111
|
-
onClickRight={onClickRight}
|
112
110
|
onClose={onClose}
|
111
|
+
onClickRight={onClickRight}
|
113
112
|
text={description}
|
113
|
+
navRight={navRight}
|
114
114
|
title={title}
|
115
115
|
/>
|
116
116
|
{children}
|
117
117
|
<Carousel
|
118
|
+
setIndex={setActivePhoto}
|
118
119
|
currentIndex={activePhoto}
|
119
120
|
onChange={handleOnSlide}
|
120
121
|
photos={photosMap}
|
121
|
-
setIndex={setActivePhoto}
|
122
122
|
/>
|
123
123
|
</div>
|
124
124
|
</div>
|
@@ -12,7 +12,7 @@ import mapColors from "../pb_dashboard/pbChartsColorsHelper";
|
|
12
12
|
type LineGraphProps = {
|
13
13
|
align?: "left" | "right" | "center";
|
14
14
|
axisTitle?: string;
|
15
|
-
dark?:
|
15
|
+
dark?: Boolean;
|
16
16
|
xAxisCategories: [];
|
17
17
|
yAxisMin: number;
|
18
18
|
yAxisMax: number;
|
@@ -138,15 +138,15 @@ const LineGraph = ({
|
|
138
138
|
|
139
139
|
return (
|
140
140
|
<HighchartsReact
|
141
|
-
|
141
|
+
containerProps={{
|
142
142
|
className: classnames(globalProps(props), className),
|
143
143
|
id: id,
|
144
144
|
...ariaProps,
|
145
145
|
...dataProps,
|
146
146
|
...htmlProps
|
147
147
|
}}
|
148
|
-
|
149
|
-
|
148
|
+
highcharts={Highcharts}
|
149
|
+
options={options}
|
150
150
|
/>
|
151
151
|
);
|
152
152
|
};
|
@@ -9,7 +9,7 @@ type ListProps = {
|
|
9
9
|
className?: string;
|
10
10
|
children: React.ReactNode[] | React.ReactNode;
|
11
11
|
dark?: boolean;
|
12
|
-
data?:
|
12
|
+
data?: object;
|
13
13
|
htmlOptions?: {[key: string]: string | number | boolean | (() => void)},
|
14
14
|
id?: string;
|
15
15
|
layout?: "" | "left" | "right";
|
@@ -72,25 +72,25 @@ const List = (props: ListProps) => {
|
|
72
72
|
<div className={classes}>
|
73
73
|
{ordered ? (
|
74
74
|
<ol
|
75
|
-
|
76
|
-
|
77
|
-
|
78
|
-
|
79
|
-
|
80
|
-
|
81
|
-
|
75
|
+
{...ariaProps}
|
76
|
+
{...dataProps}
|
77
|
+
{...htmlProps}
|
78
|
+
className={className}
|
79
|
+
id={id}
|
80
|
+
role={role}
|
81
|
+
tabIndex={tabIndex}
|
82
82
|
>
|
83
83
|
{childrenWithProps}
|
84
84
|
</ol>
|
85
85
|
) : (
|
86
86
|
<ul
|
87
|
-
|
88
|
-
|
89
|
-
|
90
|
-
|
91
|
-
|
92
|
-
|
93
|
-
|
87
|
+
{...ariaProps}
|
88
|
+
{...dataProps}
|
89
|
+
{...htmlProps}
|
90
|
+
className={className}
|
91
|
+
id={id}
|
92
|
+
role={role}
|
93
|
+
tabIndex={tabIndex}
|
94
94
|
>
|
95
95
|
{childrenWithProps}
|
96
96
|
</ul>
|
@@ -7,7 +7,7 @@ type ListItemProps = {
|
|
7
7
|
aria?: { [key: string]: string },
|
8
8
|
children: React.ReactNode[] | React.ReactNode,
|
9
9
|
className?: string,
|
10
|
-
data?:
|
10
|
+
data?: object,
|
11
11
|
htmlOptions?: {[key: string]: string | number | boolean | (() => void)},
|
12
12
|
id?: string,
|
13
13
|
tabIndex?: number,
|
@@ -37,18 +37,18 @@ const LoadingInline = (props: LoadingInlineProps) => {
|
|
37
37
|
|
38
38
|
return (
|
39
39
|
<div
|
40
|
-
|
41
|
-
|
42
|
-
|
43
|
-
|
44
|
-
|
40
|
+
{...ariaProps}
|
41
|
+
{...dataProps}
|
42
|
+
{...htmlProps}
|
43
|
+
className={classes}
|
44
|
+
id={id}
|
45
45
|
>
|
46
46
|
<Body color="light">
|
47
47
|
<Icon
|
48
|
-
|
49
|
-
|
50
|
-
|
51
|
-
|
48
|
+
aria={{ label: 'loading icon' }}
|
49
|
+
fixedWidth
|
50
|
+
icon="spinner"
|
51
|
+
pulse
|
52
52
|
/>
|
53
53
|
{' Loading'}
|
54
54
|
</Body>
|
@@ -14,9 +14,9 @@ type MapProps = {
|
|
14
14
|
id?: string,
|
15
15
|
zoomBtns?: boolean,
|
16
16
|
flyTo?: boolean,
|
17
|
-
zoomInClick?: () =>
|
18
|
-
zoomOutClick?: () =>
|
19
|
-
flyToClick?: () =>
|
17
|
+
zoomInClick?: () => {},
|
18
|
+
zoomOutClick?: () => {},
|
19
|
+
flyToClick?: () => {},
|
20
20
|
} & GlobalProps
|
21
21
|
|
22
22
|
const Map = (props: MapProps) => {
|
@@ -51,11 +51,11 @@ const Map = (props: MapProps) => {
|
|
51
51
|
{
|
52
52
|
zoomBtns ? (
|
53
53
|
<Map.Controls
|
54
|
-
|
55
|
-
|
56
|
-
|
57
|
-
|
58
|
-
|
54
|
+
flyTo={flyTo}
|
55
|
+
flyToClick={flyToClick}
|
56
|
+
zoomBtns={zoomBtns}
|
57
|
+
zoomInClick={zoomInClick}
|
58
|
+
zoomOutClick={zoomOutClick}
|
59
59
|
/>
|
60
60
|
) : null
|
61
61
|
}
|
@@ -6,9 +6,9 @@ import Flex from "../pb_flex/_flex";
|
|
6
6
|
type MapControlTypes = {
|
7
7
|
zoomBtns?: boolean,
|
8
8
|
flyTo?: boolean,
|
9
|
-
zoomInClick?: () =>
|
10
|
-
zoomOutClick?: () =>
|
11
|
-
flyToClick?: () =>
|
9
|
+
zoomInClick?: () => {},
|
10
|
+
zoomOutClick?: () => {},
|
11
|
+
flyToClick?: () => {},
|
12
12
|
children?: React.ReactNode | React.ReactNode[]
|
13
13
|
}
|
14
14
|
|
@@ -21,27 +21,19 @@ const MapControls = ({
|
|
21
21
|
children,
|
22
22
|
}: MapControlTypes) => {
|
23
23
|
return (
|
24
|
-
<Flex className="custom-nav-control"
|
25
|
-
orientation="column"
|
26
|
-
>
|
24
|
+
<Flex className="custom-nav-control" orientation="column">
|
27
25
|
{zoomBtns ? (
|
28
26
|
<>
|
29
27
|
<div className="custom-nav-control-zoom">
|
30
|
-
<Button className="map-zoom-in-button"
|
31
|
-
onClick={zoomInClick}
|
32
|
-
>
|
28
|
+
<Button className="map-zoom-in-button" onClick={zoomInClick}>
|
33
29
|
<Icon icon="plus" />
|
34
30
|
</Button>
|
35
|
-
<Button className="map-zoom-out-button"
|
36
|
-
onClick={zoomOutClick}
|
37
|
-
>
|
31
|
+
<Button className="map-zoom-out-button" onClick={zoomOutClick}>
|
38
32
|
<Icon icon="minus" />
|
39
33
|
</Button>
|
40
34
|
</div>
|
41
35
|
{flyTo ? (
|
42
|
-
<Button className="map-flyto-button"
|
43
|
-
onClick={flyToClick}
|
44
|
-
>
|
36
|
+
<Button className="map-flyto-button" onClick={flyToClick}>
|
45
37
|
<Icon icon="eye" />
|
46
38
|
</Button>
|
47
39
|
) : null}
|
@@ -3,15 +3,13 @@ import Button from "../pb_button/_button";
|
|
3
3
|
import Icon from "../pb_icon/_icon";
|
4
4
|
|
5
5
|
type MapCustomButtonTypes = {
|
6
|
-
onClick?: () =>
|
6
|
+
onClick?: () => {};
|
7
7
|
icon?: string;
|
8
8
|
};
|
9
9
|
|
10
10
|
const MapCustomButton = ({ onClick, icon }: MapCustomButtonTypes) => {
|
11
11
|
return (
|
12
|
-
<Button className="pb_map-custom-button"
|
13
|
-
onClick={onClick}
|
14
|
-
>
|
12
|
+
<Button className="pb_map-custom-button" onClick={onClick}>
|
15
13
|
<Icon icon={icon} />
|
16
14
|
</Button>
|
17
15
|
);
|
@@ -20,7 +20,7 @@ type MessageProps = {
|
|
20
20
|
avatarUrl?: string,
|
21
21
|
children?: React.ReactChild[] | React.ReactChild,
|
22
22
|
className?: string,
|
23
|
-
data?:
|
23
|
+
data?: object,
|
24
24
|
htmlOptions?: {[key: string]: string | number | boolean | (() => void)},
|
25
25
|
id?: string,
|
26
26
|
label?: string,
|
@@ -7,7 +7,7 @@ type MessageMentionProps = {
|
|
7
7
|
aria: { [key: string]: string },
|
8
8
|
children?: React.ReactChild[] | React.ReactChild,
|
9
9
|
className?: string,
|
10
|
-
data?:
|
10
|
+
data?: object,
|
11
11
|
htmlOptions?: {[key: string]: string | number | boolean | (() => void)},
|
12
12
|
id?: string,
|
13
13
|
variant: 'user' | 'self',
|
@@ -34,11 +34,11 @@ const MessageMention = (props: MessageMentionProps) => {
|
|
34
34
|
|
35
35
|
return (
|
36
36
|
<div
|
37
|
-
|
38
|
-
|
39
|
-
|
40
|
-
|
41
|
-
|
37
|
+
{...ariaProps}
|
38
|
+
{...dataProps}
|
39
|
+
{...htmlProps}
|
40
|
+
className={classes}
|
41
|
+
id={id}
|
42
42
|
>
|
43
43
|
{children}
|
44
44
|
</div>
|
@@ -86,50 +86,6 @@ const MultiLevelSelect = (props: MultiLevelSelectProps) => {
|
|
86
86
|
item: []
|
87
87
|
})
|
88
88
|
|
89
|
-
const modifyRecursive = (tree: { [key: string]: any }[], check: boolean) => {
|
90
|
-
if (!Array.isArray(tree)) {
|
91
|
-
return
|
92
|
-
}
|
93
|
-
return tree.map((item: { [key: string]: any }) => {
|
94
|
-
item.checked = check
|
95
|
-
item.children = modifyRecursive(item.children, check)
|
96
|
-
return item
|
97
|
-
})
|
98
|
-
}
|
99
|
-
|
100
|
-
// Function to map over data and add parent_id + depth property to each item
|
101
|
-
const addCheckedAndParentProperty = (
|
102
|
-
treeData: { [key: string]: any }[],
|
103
|
-
selectedIds: string[],
|
104
|
-
parent_id: string = null,
|
105
|
-
depth = 0,
|
106
|
-
) => {
|
107
|
-
if (!Array.isArray(treeData)) {
|
108
|
-
return
|
109
|
-
}
|
110
|
-
return treeData.map((item: { [key: string]: any } | any) => {
|
111
|
-
const newItem = {
|
112
|
-
...item,
|
113
|
-
checked: Boolean(selectedIds && selectedIds.length && selectedIds.includes(item.id)),
|
114
|
-
parent_id,
|
115
|
-
depth,
|
116
|
-
}
|
117
|
-
if (newItem.children && newItem.children.length > 0) {
|
118
|
-
const children =
|
119
|
-
item.checked && !returnAllSelected
|
120
|
-
? modifyRecursive(item.children, true)
|
121
|
-
: item.children
|
122
|
-
newItem.children = addCheckedAndParentProperty(
|
123
|
-
children,
|
124
|
-
selectedIds,
|
125
|
-
newItem.id,
|
126
|
-
depth + 1
|
127
|
-
)
|
128
|
-
}
|
129
|
-
return newItem
|
130
|
-
})
|
131
|
-
}
|
132
|
-
|
133
89
|
useEffect(() => {
|
134
90
|
const formattedData = addCheckedAndParentProperty(
|
135
91
|
treeData,
|
@@ -183,7 +139,16 @@ const MultiLevelSelect = (props: MultiLevelSelectProps) => {
|
|
183
139
|
}
|
184
140
|
}, [])
|
185
141
|
|
186
|
-
|
142
|
+
const modifyRecursive = (tree: { [key: string]: any }[], check: boolean) => {
|
143
|
+
if (!Array.isArray(tree)) {
|
144
|
+
return
|
145
|
+
}
|
146
|
+
return tree.map((item: { [key: string]: any }) => {
|
147
|
+
item.checked = check
|
148
|
+
item.children = modifyRecursive(item.children, check)
|
149
|
+
return item
|
150
|
+
})
|
151
|
+
}
|
187
152
|
|
188
153
|
// Iterate over tree, find item and set checked or unchecked
|
189
154
|
const modifyValue = (
|
@@ -241,7 +206,38 @@ const MultiLevelSelect = (props: MultiLevelSelectProps) => {
|
|
241
206
|
return tree
|
242
207
|
}
|
243
208
|
|
244
|
-
|
209
|
+
// Function to map over data and add parent_id + depth property to each item
|
210
|
+
const addCheckedAndParentProperty = (
|
211
|
+
treeData: { [key: string]: any }[],
|
212
|
+
selectedIds: string[],
|
213
|
+
parent_id: string = null,
|
214
|
+
depth = 0,
|
215
|
+
) => {
|
216
|
+
if (!Array.isArray(treeData)) {
|
217
|
+
return
|
218
|
+
}
|
219
|
+
return treeData.map((item: { [key: string]: any } | any) => {
|
220
|
+
const newItem = {
|
221
|
+
...item,
|
222
|
+
checked: Boolean(selectedIds && selectedIds.length && selectedIds.includes(item.id)),
|
223
|
+
parent_id,
|
224
|
+
depth,
|
225
|
+
}
|
226
|
+
if (newItem.children && newItem.children.length > 0) {
|
227
|
+
const children =
|
228
|
+
item.checked && !returnAllSelected
|
229
|
+
? modifyRecursive(item.children, true)
|
230
|
+
: item.children
|
231
|
+
newItem.children = addCheckedAndParentProperty(
|
232
|
+
children,
|
233
|
+
selectedIds,
|
234
|
+
newItem.id,
|
235
|
+
depth + 1
|
236
|
+
)
|
237
|
+
}
|
238
|
+
return newItem
|
239
|
+
})
|
240
|
+
}
|
245
241
|
|
246
242
|
// Click event for x on form pill
|
247
243
|
const handlePillClose = (event: any, clickedItem: { [key: string]: any }) => {
|
@@ -44,11 +44,11 @@ const MultipleUsersStacked = (props: MultipleUsersStackedProps) => {
|
|
44
44
|
return users.slice(0, 1).map((userObject, index) => {
|
45
45
|
return (
|
46
46
|
<Avatar
|
47
|
-
|
48
|
-
|
49
|
-
|
50
|
-
|
51
|
-
|
47
|
+
{...userObject}
|
48
|
+
className="pb_multiple_users_stacked_item"
|
49
|
+
dark={dark}
|
50
|
+
key={index}
|
51
|
+
size="xs"
|
52
52
|
/>
|
53
53
|
)
|
54
54
|
})
|
@@ -59,11 +59,11 @@ const MultipleUsersStacked = (props: MultipleUsersStackedProps) => {
|
|
59
59
|
return users.slice(1, 2).map((userObject, index) => {
|
60
60
|
return (
|
61
61
|
<Avatar
|
62
|
-
|
63
|
-
|
64
|
-
|
65
|
-
|
66
|
-
|
62
|
+
{...userObject}
|
63
|
+
className="pb_multiple_users_stacked_item second_item"
|
64
|
+
dark={dark}
|
65
|
+
key={index}
|
66
|
+
size="xs"
|
67
67
|
/>
|
68
68
|
)
|
69
69
|
})
|
@@ -74,11 +74,11 @@ const MultipleUsersStacked = (props: MultipleUsersStackedProps) => {
|
|
74
74
|
if (moreThanTwo === true) {
|
75
75
|
return (
|
76
76
|
<Badge
|
77
|
-
|
78
|
-
|
79
|
-
|
80
|
-
|
81
|
-
|
77
|
+
className="pb_multiple_users_stacked_item second_item"
|
78
|
+
dark={dark}
|
79
|
+
rounded
|
80
|
+
text={`+${users.length - displayCount()}`}
|
81
|
+
variant="primary"
|
82
82
|
/>
|
83
83
|
)
|
84
84
|
}
|
@@ -86,11 +86,11 @@ const MultipleUsersStacked = (props: MultipleUsersStackedProps) => {
|
|
86
86
|
|
87
87
|
return (
|
88
88
|
<div
|
89
|
-
|
90
|
-
|
91
|
-
|
92
|
-
|
93
|
-
|
89
|
+
{...ariaProps}
|
90
|
+
{...dataProps}
|
91
|
+
{...htmlProps}
|
92
|
+
className={classes}
|
93
|
+
id={id}
|
94
94
|
>
|
95
95
|
{firstUser()}
|
96
96
|
{secondUser()}
|
@@ -18,7 +18,7 @@ type NavItemProps = {
|
|
18
18
|
children?: React.ReactNode[] | React.ReactNode;
|
19
19
|
className?: string;
|
20
20
|
collapsible?: boolean;
|
21
|
-
data?:
|
21
|
+
data?: object;
|
22
22
|
dark?: boolean;
|
23
23
|
fontSize?: "normal" | "small";
|
24
24
|
htmlOptions?: {[key: string]: string | number | boolean | (() => void)},
|
@@ -76,7 +76,7 @@ const NavItem = (props: NavItemProps) => {
|
|
76
76
|
id,
|
77
77
|
imageUrl,
|
78
78
|
link,
|
79
|
-
onClick,
|
79
|
+
onClick = () => {},
|
80
80
|
target = "_self",
|
81
81
|
text = "",
|
82
82
|
collapsibleTrail,
|
@@ -205,49 +205,46 @@ const { filteredPadding, filteredMargin } = filterItemSpacing(itemSpacing);
|
|
205
205
|
{collapsible ? (
|
206
206
|
<>
|
207
207
|
<Collapsible
|
208
|
-
|
209
|
-
|
210
|
-
|
211
|
-
|
212
|
-
|
213
|
-
|
214
|
-
|
208
|
+
className={collapsibleClasses}
|
209
|
+
icon={iconRight && iconRight}
|
210
|
+
iconSize="xs"
|
211
|
+
id={id}
|
212
|
+
collapsed={collapsed}
|
213
|
+
onIconClick={onIconRightClick}
|
214
|
+
onClick={onClick}
|
215
215
|
>
|
216
216
|
<Collapsible.Main
|
217
|
-
|
218
|
-
|
219
|
-
>
|
217
|
+
className={globalProps({ ...finalItemSpacing })}
|
218
|
+
dark={dark}>
|
220
219
|
<Tag
|
221
|
-
|
222
|
-
|
223
|
-
|
224
|
-
|
225
|
-
|
226
|
-
|
227
|
-
|
220
|
+
{...ariaProps}
|
221
|
+
{...dataProps}
|
222
|
+
{...htmlProps}
|
223
|
+
className={classes}
|
224
|
+
id={id}
|
225
|
+
href={link}
|
226
|
+
target={target}
|
228
227
|
>
|
229
228
|
{imageUrl && (
|
230
229
|
<div
|
231
|
-
|
232
|
-
|
233
|
-
|
230
|
+
className="pb_nav_list_item_icon_section_collapsible"
|
231
|
+
key={imageUrl}
|
232
|
+
onClick={(e) => handleIconClick(e)}
|
234
233
|
>
|
235
|
-
<Image className="pb_nav_img_wrapper"
|
236
|
-
url={imageUrl}
|
237
|
-
/>
|
234
|
+
<Image className="pb_nav_img_wrapper" url={imageUrl} />
|
238
235
|
</div>
|
239
236
|
)}
|
240
237
|
|
241
238
|
{iconLeft && (
|
242
239
|
<div
|
243
|
-
|
244
|
-
|
245
|
-
|
240
|
+
className="pb_nav_list_item_icon_section_collapsible"
|
241
|
+
key={iconLeft}
|
242
|
+
onClick={(e) => handleIconClick(e)}
|
246
243
|
>
|
247
244
|
<Icon
|
248
|
-
|
249
|
-
|
250
|
-
|
245
|
+
className="pb_nav_list_item_icon_left_collapsible"
|
246
|
+
fixedWidth
|
247
|
+
icon={iconLeft}
|
251
248
|
/>
|
252
249
|
</div>
|
253
250
|
)}
|
@@ -261,33 +258,27 @@ const { filteredPadding, filteredMargin } = filterItemSpacing(itemSpacing);
|
|
261
258
|
</>
|
262
259
|
) : (
|
263
260
|
<Tag
|
264
|
-
|
265
|
-
|
266
|
-
|
267
|
-
|
268
|
-
|
269
|
-
|
270
|
-
|
271
|
-
|
261
|
+
{...ariaProps}
|
262
|
+
{...dataProps}
|
263
|
+
{...htmlProps}
|
264
|
+
className={classes}
|
265
|
+
id={id}
|
266
|
+
href={link}
|
267
|
+
onClick={onClick}
|
268
|
+
target={target}
|
272
269
|
>
|
273
270
|
{imageUrl && (
|
274
|
-
<div className="pb_nav_list_item_icon_section"
|
275
|
-
|
276
|
-
>
|
277
|
-
<Image className="pb_nav_img_wrapper"
|
278
|
-
url={imageUrl}
|
279
|
-
/>
|
271
|
+
<div className="pb_nav_list_item_icon_section" key={imageUrl}>
|
272
|
+
<Image className="pb_nav_img_wrapper" url={imageUrl} />
|
280
273
|
</div>
|
281
274
|
)}
|
282
275
|
|
283
276
|
{iconLeft && (
|
284
|
-
<div className="pb_nav_list_item_icon_section"
|
285
|
-
key={iconLeft}
|
286
|
-
>
|
277
|
+
<div className="pb_nav_list_item_icon_section" key={iconLeft}>
|
287
278
|
<Icon
|
288
|
-
|
289
|
-
|
290
|
-
|
279
|
+
className="pb_nav_list_item_icon_left"
|
280
|
+
fixedWidth
|
281
|
+
icon={iconLeft}
|
291
282
|
/>
|
292
283
|
</div>
|
293
284
|
)}
|
@@ -296,13 +287,13 @@ const { filteredPadding, filteredMargin } = filterItemSpacing(itemSpacing);
|
|
296
287
|
|
297
288
|
{iconRight && (
|
298
289
|
<div
|
299
|
-
|
300
|
-
|
290
|
+
className="pb_nav_list_item_icon_section"
|
291
|
+
key={iconRight as string}
|
301
292
|
>
|
302
293
|
<Icon
|
303
|
-
|
304
|
-
|
305
|
-
|
294
|
+
className="pb_nav_list_item_icon_right"
|
295
|
+
fixedWidth
|
296
|
+
icon={iconRight as string}
|
306
297
|
/>
|
307
298
|
</div>
|
308
299
|
)}
|