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 CHANGED
@@ -1,7 +1,7 @@
1
1
  ---
2
2
  SHA256:
3
- metadata.gz: a11d84418c9c01374cd74d38a154f76d034ff440cd3a8580ffdace764232279e
4
- data.tar.gz: fbf756271614a013e06861498022157b2a6c585f7402a6d14c2c1a34052745cd
3
+ metadata.gz: 55221ced6a088f8d7167b9180d791f0f02b6b911d90b0d756ac066d012b3f531
4
+ data.tar.gz: fde86de0417d16dc0a83c3031a8f6042169ae175d06782ea2b8f89a203a7924b
5
5
  SHA512:
6
- metadata.gz: 366d06de731005646685950b3bd763a791716076d22bb077265dee3ed18727fb7d6eefdc5063e1cb02b4246fee19cf8d692260294fd2c91c422cff8fec7dc0d6
7
- data.tar.gz: ca19bd5db001368a141c1fa553313170d5fdc6ec1badb596160027f9c105cb97f7e117f9c3915b8cd039d7e8c0014dac4ba816a93e6f3cdbb90cbdb7860f6cd2
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, .pb_map-custom-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 MapControls from './_map_controls';
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
- <Map.Controls
49
- flyTo={flyTo}
50
- flyToClick={flyToClick}
51
- zoomBtns={zoomBtns}
52
- zoomInClick={zoomInClick}
53
- zoomOutClick={zoomOutClick}
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
@@ -4,4 +4,3 @@ examples:
4
4
  react:
5
5
  - map_default: Default
6
6
  - map_with_plugin: Map With Polygon Draw Plugin
7
- - map_with_custom_button: Map With Custom Button
@@ -1,3 +1,2 @@
1
1
  export { default as MapDefault } from './_map_default.jsx'
2
2
  export { default as MapWithPlugin } from './_map_with_plugin.jsx'
3
- export {default as MapWithCustomButton} from './_map_with_custom_button.jsx'
@@ -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() === (term.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((child:{ [key: string]: any }) => !child.checked);
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((parentItem:{ [key: string]: any }) => parentItem.id === item.parentId);
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
- const parent = filterFormattedDataById(data, item.parent_id);
119
- const allChildrenChecked = parent[0].children.every(
120
- (child: { [key: string]: any }) => child.checked
121
- );
122
- if (allChildrenChecked) {
123
- parent[0].checked = true;
124
- const parentHasParent = parent[0].parent_id !== null;
125
- if (parentHasParent) {
126
- recursiveCheckParent(
127
- parent[0],
128
- data
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
- return data;
134
- }
159
+ };
160
+
161
+ traverse(treeData);
162
+ return expandedItems;
163
+ };
@@ -23,7 +23,7 @@
23
23
  .input_wrapper {
24
24
  background-color: $white;
25
25
  cursor: pointer;
26
- padding: $space_xs + 4 $space_sm;
26
+ padding: $space_xxs + 2 $space_sm;
27
27
  border: 1px solid #e4e8f0;
28
28
  border-radius: $border_rad_heavier;
29
29
  display: flex;
@@ -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
- {returnedArray.length !== 0 && returnAllSelected && <br />}
355
- {defaultReturn.length !== 0 && !returnAllSelected && <br />}
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,