playbook_ui 12.28.0.pre.alpha.PLAY837MapCustomButton868 → 12.28.0.pre.alpha.PLAY863multilevelv2876
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/index.js +0 -1
- data/app/pb_kits/playbook/pb_map/_map.scss +1 -16
- data/app/pb_kits/playbook/pb_map/_map.tsx +26 -9
- data/app/pb_kits/playbook/pb_map/docs/example.yml +0 -1
- data/app/pb_kits/playbook/pb_map/docs/index.js +0 -1
- data/app/pb_kits/playbook/pb_multi_level_select/_helper_functions.tsx +56 -27
- data/app/pb_kits/playbook/pb_multi_level_select/_multi_level_select.scss +1 -1
- data/app/pb_kits/playbook/pb_multi_level_select/_multi_level_select.tsx +10 -27
- data/app/pb_kits/playbook/pb_multi_level_select/multi_level_select.rb +4 -0
- data/dist/playbook-rails.js +5 -5
- data/lib/playbook/version.rb +1 -1
- metadata +2 -6
- data/app/pb_kits/playbook/pb_map/_map_controls.tsx +0 -47
- data/app/pb_kits/playbook/pb_map/_map_custom_button.tsx +0 -18
- data/app/pb_kits/playbook/pb_map/docs/_map_with_custom_button.jsx +0 -83
- data/app/pb_kits/playbook/pb_map/docs/_map_with_custom_button.md +0 -1
checksums.yaml
CHANGED
@@ -1,7 +1,7 @@
|
|
1
1
|
---
|
2
2
|
SHA256:
|
3
|
-
metadata.gz:
|
4
|
-
data.tar.gz:
|
3
|
+
metadata.gz: 55221ced6a088f8d7167b9180d791f0f02b6b911d90b0d756ac066d012b3f531
|
4
|
+
data.tar.gz: fde86de0417d16dc0a83c3031a8f6042169ae175d06782ea2b8f89a203a7924b
|
5
5
|
SHA512:
|
6
|
-
metadata.gz:
|
7
|
-
data.tar.gz:
|
6
|
+
metadata.gz: 5747d799fc1f11a2183825606fc53f87b0a8bf1de3ff9ce1410dcd54746784f5486d465b14a7fa4f33390a54c518c8037461aac104b615c19fe59373c93ceff6
|
7
|
+
data.tar.gz: 5ce8f70fc8c1790e384632c85114bb2d893fc0453821f4d3c5dbf35af241967103ce83ebbae3bf6d64db5d6f34fe70fd35595f11ef11054c1cfbbaaf61eb7167
|
@@ -60,7 +60,6 @@ export { default as List } from './pb_list/_list'
|
|
60
60
|
export { default as ListItem } from './pb_list/_list_item'
|
61
61
|
export { default as LoadingInline } from './pb_loading_inline/_loading_inline'
|
62
62
|
export { default as Map} from './pb_map/_map'
|
63
|
-
export { default as MapCustomButton } from './pb_map/_map_custom_button'
|
64
63
|
export { default as Message } from './pb_message/_message'
|
65
64
|
export { default as MultiLevelSelect} from './pb_multi_level_select/_multi_level_select'
|
66
65
|
export { default as MultipleUsers } from './pb_multiple_users/_multiple_users'
|
@@ -5,21 +5,6 @@
|
|
5
5
|
@import "./_pb_map_button_mixin.scss";
|
6
6
|
|
7
7
|
[class*="pb_map"] {
|
8
|
-
.pb_map-custom-button {
|
9
|
-
@include pb_map_button;
|
10
|
-
position: relative;
|
11
|
-
margin-top: $space_xs;
|
12
|
-
box-shadow: $shadow_deep;
|
13
|
-
.pb_icon_kit {
|
14
|
-
width: $space_sm - 2;
|
15
|
-
height: $space_sm;
|
16
|
-
}
|
17
|
-
|
18
|
-
.pb_button_content {
|
19
|
-
height: $space_sm;
|
20
|
-
}
|
21
|
-
}
|
22
|
-
|
23
8
|
.mapboxgl-map,
|
24
9
|
.maplibregl-map {
|
25
10
|
font-family: $font_family_base !important;
|
@@ -200,7 +185,7 @@
|
|
200
185
|
}
|
201
186
|
.map-zoom-in-button,
|
202
187
|
.map-zoom-out-button,
|
203
|
-
.map-flyto-button
|
188
|
+
.map-flyto-button {
|
204
189
|
@include pb_map_button_dark;
|
205
190
|
}
|
206
191
|
|
@@ -3,7 +3,9 @@ import classnames from 'classnames'
|
|
3
3
|
import { buildAriaProps, buildCss, buildDataProps } from '../utilities/props'
|
4
4
|
import { globalProps, GlobalProps } from '../utilities/globalProps'
|
5
5
|
|
6
|
-
import
|
6
|
+
import Flex from "../pb_flex/_flex"
|
7
|
+
import Icon from '../pb_icon/_icon'
|
8
|
+
import Button from '../pb_button/_button'
|
7
9
|
|
8
10
|
type MapProps = {
|
9
11
|
aria?: { [key: string]: string },
|
@@ -45,13 +47,29 @@ const Map = (props: MapProps) => {
|
|
45
47
|
>
|
46
48
|
{
|
47
49
|
zoomBtns ? (
|
48
|
-
<
|
49
|
-
|
50
|
-
|
51
|
-
|
52
|
-
|
53
|
-
|
54
|
-
|
50
|
+
<Flex className="custom-nav-control" orientation='column'>
|
51
|
+
<div className="custom-nav-control-zoom">
|
52
|
+
<Button className='map-zoom-in-button'
|
53
|
+
onClick={zoomInClick}
|
54
|
+
>
|
55
|
+
<Icon icon="plus"/>
|
56
|
+
</Button>
|
57
|
+
<Button className='map-zoom-out-button'
|
58
|
+
onClick={zoomOutClick}
|
59
|
+
>
|
60
|
+
<Icon icon="minus"/>
|
61
|
+
</Button>
|
62
|
+
</div>
|
63
|
+
{
|
64
|
+
flyTo ? (
|
65
|
+
<Button className='map-flyto-button'
|
66
|
+
onClick={flyToClick}
|
67
|
+
>
|
68
|
+
<Icon icon="eye"/>
|
69
|
+
</Button>
|
70
|
+
) : null
|
71
|
+
}
|
72
|
+
</Flex>
|
55
73
|
) : null
|
56
74
|
}
|
57
75
|
{children}
|
@@ -59,5 +77,4 @@ const Map = (props: MapProps) => {
|
|
59
77
|
)
|
60
78
|
}
|
61
79
|
|
62
|
-
Map.Controls = MapControls
|
63
80
|
export default Map
|
@@ -6,11 +6,11 @@ export const getAncestorsOfUnchecked = (
|
|
6
6
|
if (item.parent_id) {
|
7
7
|
const ancestor = filterFormattedDataById(data, item.parent_id);
|
8
8
|
ancestor[0].checked = false;
|
9
|
-
ancestor[0].parent_id && getAncestorsOfUnchecked(data, ancestor[0])
|
9
|
+
ancestor[0].parent_id && getAncestorsOfUnchecked(data, ancestor[0]);
|
10
10
|
}
|
11
11
|
return data;
|
12
12
|
};
|
13
|
-
|
13
|
+
|
14
14
|
//function is going over formattedData and returning all objects that match the
|
15
15
|
//id of the clicked item from the dropdown
|
16
16
|
export const filterFormattedDataById = (
|
@@ -20,9 +20,9 @@ export const filterFormattedDataById = (
|
|
20
20
|
const matched: { [key: string]: any }[] = [];
|
21
21
|
const recursiveSearch = (data: { [key: string]: any }[], term: string) => {
|
22
22
|
for (const item of data) {
|
23
|
-
if (item.id.toLowerCase() ===
|
23
|
+
if (item.id.toLowerCase() === term.toLowerCase()) {
|
24
24
|
matched.push(item);
|
25
|
-
return
|
25
|
+
return;
|
26
26
|
}
|
27
27
|
|
28
28
|
if (item.children && item.children.length > 0) {
|
@@ -75,24 +75,29 @@ export const getCheckedItems = (
|
|
75
75
|
});
|
76
76
|
return checkedItems;
|
77
77
|
};
|
78
|
-
|
79
|
-
export const getDefaultCheckedItems = (treeData:{ [key: string]: any }[]) => {
|
78
|
+
|
79
|
+
export const getDefaultCheckedItems = (treeData: { [key: string]: any }[]) => {
|
80
80
|
const checkedDefault: { [key: string]: any }[] = [];
|
81
81
|
|
82
|
-
const traverseTree = (items:{ [key: string]: any }[]) => {
|
82
|
+
const traverseTree = (items: { [key: string]: any }[]) => {
|
83
83
|
if (!Array.isArray(items)) {
|
84
84
|
return;
|
85
85
|
}
|
86
|
-
items.forEach((item:{ [key: string]: any }) => {
|
86
|
+
items.forEach((item: { [key: string]: any }) => {
|
87
87
|
if (item.checked) {
|
88
88
|
if (item.children && item.children.length > 0) {
|
89
|
-
const uncheckedChildren = item.children.filter(
|
89
|
+
const uncheckedChildren = item.children.filter(
|
90
|
+
(child: { [key: string]: any }) => !child.checked
|
91
|
+
);
|
90
92
|
if (uncheckedChildren.length === 0) {
|
91
93
|
checkedDefault.push(item);
|
92
94
|
return;
|
93
95
|
}
|
94
96
|
} else {
|
95
|
-
const parent = items.find(
|
97
|
+
const parent = items.find(
|
98
|
+
(parentItem: { [key: string]: any }) =>
|
99
|
+
parentItem.id === item.parentId
|
100
|
+
);
|
96
101
|
if (!parent || !parent.checked) {
|
97
102
|
checkedDefault.push(item);
|
98
103
|
}
|
@@ -112,23 +117,47 @@ export const getDefaultCheckedItems = (treeData:{ [key: string]: any }[]) => {
|
|
112
117
|
|
113
118
|
export const recursiveCheckParent = (
|
114
119
|
item: { [key: string]: any },
|
115
|
-
data:any
|
120
|
+
data: any
|
116
121
|
) => {
|
117
122
|
if (item.parent_id !== null) {
|
118
|
-
|
119
|
-
|
120
|
-
|
121
|
-
|
122
|
-
|
123
|
-
|
124
|
-
|
125
|
-
|
126
|
-
|
127
|
-
|
128
|
-
|
129
|
-
|
123
|
+
const parent = filterFormattedDataById(data, item.parent_id);
|
124
|
+
const allChildrenChecked = parent[0].children.every(
|
125
|
+
(child: { [key: string]: any }) => child.checked
|
126
|
+
);
|
127
|
+
if (allChildrenChecked) {
|
128
|
+
parent[0].checked = true;
|
129
|
+
const parentHasParent = parent[0].parent_id !== null;
|
130
|
+
if (parentHasParent) {
|
131
|
+
recursiveCheckParent(parent[0], data);
|
132
|
+
}
|
133
|
+
}
|
134
|
+
}
|
135
|
+
return data;
|
136
|
+
};
|
137
|
+
|
138
|
+
export const getExpandedItems = (treeData: { [key: string]: string }[]) => {
|
139
|
+
let expandedItems: any[] = [];
|
140
|
+
|
141
|
+
const traverse = (items: string | any[], ancestors: any[] = []) => {
|
142
|
+
for (let i = 0; i < items.length; i++) {
|
143
|
+
const item = items[i];
|
144
|
+
const itemAncestors = [...ancestors, item];
|
145
|
+
|
146
|
+
if (item.expanded) {
|
147
|
+
expandedItems.push(item.id);
|
148
|
+
}
|
149
|
+
if (Array.isArray(item.children)) {
|
150
|
+
const hasCheckedChildren = item.children.some(
|
151
|
+
(child: { [key: string]: string }) => child.checked
|
152
|
+
);
|
153
|
+
if (hasCheckedChildren) {
|
154
|
+
expandedItems.push(...itemAncestors.map((ancestor) => ancestor.id));
|
155
|
+
}
|
156
|
+
traverse(item.children, itemAncestors);
|
157
|
+
}
|
130
158
|
}
|
131
|
-
}
|
132
|
-
|
133
|
-
|
134
|
-
|
159
|
+
};
|
160
|
+
|
161
|
+
traverse(treeData);
|
162
|
+
return expandedItems;
|
163
|
+
};
|
@@ -15,6 +15,7 @@ import {
|
|
15
15
|
getCheckedItems,
|
16
16
|
getDefaultCheckedItems,
|
17
17
|
recursiveCheckParent,
|
18
|
+
getExpandedItems,
|
18
19
|
} from "./_helper_functions"
|
19
20
|
|
20
21
|
type MultiLevelSelectProps = {
|
@@ -22,6 +23,7 @@ type MultiLevelSelectProps = {
|
|
22
23
|
className?: string
|
23
24
|
data?: { [key: string]: string }
|
24
25
|
id?: string
|
26
|
+
inputDisplay?: "pills" | "none"
|
25
27
|
name?: string
|
26
28
|
returnAllSelected?: boolean
|
27
29
|
treeData?: { [key: string]: string }[]
|
@@ -34,6 +36,7 @@ const MultiLevelSelect = (props: MultiLevelSelectProps) => {
|
|
34
36
|
className,
|
35
37
|
data = {},
|
36
38
|
id,
|
39
|
+
inputDisplay = "pills",
|
37
40
|
name,
|
38
41
|
returnAllSelected = false,
|
39
42
|
treeData,
|
@@ -50,26 +53,6 @@ const MultiLevelSelect = (props: MultiLevelSelectProps) => {
|
|
50
53
|
|
51
54
|
const dropdownRef = useRef(null)
|
52
55
|
|
53
|
-
|
54
|
-
const getExpandedItems = (treeData: { [key: string]: string }[]) => {
|
55
|
-
let expandedItems: any[] = [];
|
56
|
-
|
57
|
-
const traverse = (items: string | any[]) => {
|
58
|
-
for (let i = 0; i < items.length; i++) {
|
59
|
-
const item = items[i];
|
60
|
-
if (item.expanded) {
|
61
|
-
expandedItems.push(item.id);
|
62
|
-
}
|
63
|
-
if (Array.isArray(item.children)) {
|
64
|
-
traverse(item.children);
|
65
|
-
}
|
66
|
-
}
|
67
|
-
}
|
68
|
-
|
69
|
-
traverse(treeData);
|
70
|
-
return expandedItems;
|
71
|
-
}
|
72
|
-
|
73
56
|
//state for whether dropdown is open or closed
|
74
57
|
const [isClosed, setIsClosed] = useState(true)
|
75
58
|
//state from onchange for textinput, to use for filtering to create typeahead
|
@@ -174,8 +157,6 @@ const MultiLevelSelect = (props: MultiLevelSelectProps) => {
|
|
174
157
|
return tree
|
175
158
|
}
|
176
159
|
|
177
|
-
|
178
|
-
|
179
160
|
//function to map over data and add parent_id + depth property to each item
|
180
161
|
const addCheckedAndParentProperty = (
|
181
162
|
treeData: { [key: string]: any }[],
|
@@ -331,7 +312,7 @@ const MultiLevelSelect = (props: MultiLevelSelectProps) => {
|
|
331
312
|
))
|
332
313
|
: null}
|
333
314
|
|
334
|
-
{returnedArray.length !== 0 && returnAllSelected
|
315
|
+
{returnedArray.length !== 0 && inputDisplay === "pills" && returnAllSelected
|
335
316
|
? returnedArray.map((item, index) => (
|
336
317
|
<FormPill
|
337
318
|
key={index}
|
@@ -342,7 +323,7 @@ const MultiLevelSelect = (props: MultiLevelSelectProps) => {
|
|
342
323
|
))
|
343
324
|
: null}
|
344
325
|
{!returnAllSelected &&
|
345
|
-
defaultReturn.length !== 0 &&
|
326
|
+
defaultReturn.length !== 0 && inputDisplay === "pills" ?
|
346
327
|
defaultReturn.map((item, index) => (
|
347
328
|
<FormPill
|
348
329
|
key={index}
|
@@ -350,9 +331,11 @@ const MultiLevelSelect = (props: MultiLevelSelectProps) => {
|
|
350
331
|
size='small'
|
351
332
|
onClick={(event: any) => handlePillClose(event, item)}
|
352
333
|
/>
|
353
|
-
))
|
354
|
-
|
355
|
-
|
334
|
+
))
|
335
|
+
: null
|
336
|
+
}
|
337
|
+
{returnedArray.length !== 0 && returnAllSelected && inputDisplay === "pills" && <br />}
|
338
|
+
{defaultReturn.length !== 0 && !returnAllSelected && inputDisplay === "pills" && <br />}
|
356
339
|
<input
|
357
340
|
id='multiselect_input'
|
358
341
|
onChange={(e) => {
|
@@ -9,6 +9,9 @@ module Playbook
|
|
9
9
|
default: []
|
10
10
|
prop :return_all_selected, type: Playbook::Props::Boolean,
|
11
11
|
default: false
|
12
|
+
prop :input_display, type: Playbook::Props::Enum,
|
13
|
+
values: %w[pills none],
|
14
|
+
default: "pills"
|
12
15
|
|
13
16
|
def classname
|
14
17
|
generate_classname("pb_multi_level_select")
|
@@ -17,6 +20,7 @@ module Playbook
|
|
17
20
|
def multi_level_select_options
|
18
21
|
{
|
19
22
|
id: id,
|
23
|
+
inputDisplay: input_display,
|
20
24
|
name: name,
|
21
25
|
treeData: tree_data,
|
22
26
|
returnAllSelected: return_all_selected,
|