playbook_ui 14.16.0.pre.alpha.PBNTR881advancedtablefullscreen6884 → 14.16.0.pre.alpha.PBNTR881advancedtablefullscreen6934
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_advanced_table/Utilities/types.ts +1 -1
- data/app/pb_kits/playbook/pb_advanced_table/_advanced_table.scss +2 -2
- data/app/pb_kits/playbook/pb_advanced_table/_advanced_table.tsx +15 -20
- data/app/pb_kits/playbook/pb_advanced_table/advanced_table.test.jsx +4 -4
- data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_fullscreen.jsx +4 -4
- data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_fullscreen.md +1 -1
- data/app/pb_kits/playbook/pb_date_picker/_date_picker.tsx +34 -34
- data/app/pb_kits/playbook/pb_date_picker/date_picker.html.erb +2 -2
- data/app/pb_kits/playbook/pb_date_picker/date_picker_helper.ts +16 -0
- data/app/pb_kits/playbook/pb_date_picker/docs/_date_picker_inline.html.erb +0 -11
- data/app/pb_kits/playbook/pb_date_picker/docs/_date_picker_inline.jsx +0 -7
- data/app/pb_kits/playbook/pb_date_picker/sass_partials/_inline_styles.scss +28 -24
- data/app/pb_kits/playbook/pb_filter/Filter/CurrentFilters.tsx +3 -4
- data/app/pb_kits/playbook/pb_filter/Filter/SortMenu.tsx +2 -3
- data/app/pb_kits/playbook/pb_form/pb_form_validation.js +1 -1
- data/app/pb_kits/playbook/pb_lightbox/hooks/useVisibility.js +1 -1
- data/app/pb_kits/playbook/pb_multi_level_select/_multi_level_select.tsx +2 -1
- data/app/pb_kits/playbook/pb_tooltip/index.js +183 -56
- data/app/pb_kits/playbook/pb_typeahead/index.ts +2 -2
- data/app/pb_kits/playbook/utilities/globalProps.ts +1 -1
- data/app/pb_kits/playbook/utilities/object.test.js +149 -1
- data/app/pb_kits/playbook/utilities/object.ts +124 -42
- data/dist/chunks/{_typeahead-N-EFroAX.js → _typeahead-Djo6qCne.js} +3 -3
- data/dist/chunks/_weekday_stacked-CON3AkXi.js +45 -0
- data/dist/chunks/lib-BGzBzFZX.js +29 -0
- data/dist/chunks/{pb_form_validation-DMajaRt3.js → pb_form_validation-BvNy9Bd6.js} +1 -1
- data/dist/chunks/vendor.js +1 -1
- data/dist/playbook-doc.js +1 -1
- data/dist/playbook-rails-react-bindings.js +1 -1
- data/dist/playbook-rails.js +1 -1
- data/dist/playbook.css +1 -1
- data/lib/playbook/version.rb +1 -1
- metadata +6 -7
- data/app/pb_kits/playbook/pb_tooltip/floating_ui.js +0 -282
- data/dist/chunks/_weekday_stacked-jxFuYoYX.js +0 -45
- data/dist/chunks/lib-Co5y3V4K.js +0 -29
checksums.yaml
CHANGED
@@ -1,7 +1,7 @@
|
|
1
1
|
---
|
2
2
|
SHA256:
|
3
|
-
metadata.gz:
|
4
|
-
data.tar.gz:
|
3
|
+
metadata.gz: 7e6ae8dabe0a1aa24faea68ee263457d677481e8fb49058ef3bf98cb34d13509
|
4
|
+
data.tar.gz: aea28cf93c519443b913371efb9f7e36399b55ead106a9914698077d78df686f
|
5
5
|
SHA512:
|
6
|
-
metadata.gz:
|
7
|
-
data.tar.gz:
|
6
|
+
metadata.gz: da72830c3590d1df9419ecb3d6310ef1513b16186c5bb12fcd42fdb6bca29b293c10f422ca18e618587f384bd618fe3b1487e7b90f8b7d8eaf1960f880a380ab
|
7
|
+
data.tar.gz: d75d70f4ae579220897598329343fa90978182a202efa1c29e46ccf51cdafc9b70a7b08624a89c5cda1b5a729519b5a58b9e2ca340136b87188079d0dea54f22
|
@@ -232,14 +232,14 @@
|
|
232
232
|
}
|
233
233
|
|
234
234
|
// Fullscreen
|
235
|
-
&.advanced-table-
|
235
|
+
&.advanced-table-allow-fullscreen {
|
236
236
|
transition: all 0.3s ease;
|
237
237
|
}
|
238
238
|
|
239
239
|
&.advanced-table-fullscreen {
|
240
240
|
background-color: $border_light;
|
241
241
|
box-sizing: border-box;
|
242
|
-
height:
|
242
|
+
height: 100vh;
|
243
243
|
left: 0;
|
244
244
|
overflow: auto;
|
245
245
|
position: fixed;
|
@@ -58,9 +58,8 @@ type AdvancedTableProps = {
|
|
58
58
|
toggleExpansionIcon?: string | string[]
|
59
59
|
onRowSelectionChange?: (arg: RowSelectionState) => void
|
60
60
|
virtualizedRows?: boolean
|
61
|
-
|
62
|
-
|
63
|
-
getFullscreenControls?: (controls: FullscreenControls) => void
|
61
|
+
allowFullScreen?: boolean
|
62
|
+
fullScreenControl?: (controls: FullscreenControls) => void
|
64
63
|
} & GlobalProps;
|
65
64
|
|
66
65
|
const AdvancedTable = (props: AdvancedTableProps) => {
|
@@ -94,9 +93,8 @@ const AdvancedTable = (props: AdvancedTableProps) => {
|
|
94
93
|
toggleExpansionIcon = "arrows-from-line",
|
95
94
|
onRowSelectionChange,
|
96
95
|
virtualizedRows = false,
|
97
|
-
|
98
|
-
|
99
|
-
getFullscreenControls,
|
96
|
+
allowFullScreen = false,
|
97
|
+
fullScreenControl,
|
100
98
|
} = props;
|
101
99
|
|
102
100
|
// Component refs
|
@@ -165,20 +163,17 @@ const AdvancedTable = (props: AdvancedTableProps) => {
|
|
165
163
|
const [isFullscreen, setIsFullscreen] = useState(false)
|
166
164
|
|
167
165
|
const toggleFullscreen = useCallback(() => {
|
168
|
-
|
169
|
-
|
170
|
-
|
171
|
-
onFullscreenChange?.(newFullscreenState)
|
172
|
-
}, [isFullscreen, onFullscreenChange])
|
166
|
+
setIsFullscreen(prevState => !prevState)
|
167
|
+
}, [])
|
173
168
|
|
174
169
|
useEffect(() => {
|
175
|
-
if (
|
176
|
-
|
170
|
+
if (allowFullScreen && fullScreenControl) {
|
171
|
+
fullScreenControl({
|
177
172
|
toggleFullscreen,
|
178
173
|
isFullscreen
|
179
174
|
})
|
180
175
|
}
|
181
|
-
}, [
|
176
|
+
}, [allowFullScreen, fullScreenControl, toggleFullscreen, isFullscreen])
|
182
177
|
|
183
178
|
const renderFullscreenHeader = () => {
|
184
179
|
if (!isFullscreen) return null
|
@@ -203,7 +198,7 @@ const AdvancedTable = (props: AdvancedTableProps) => {
|
|
203
198
|
borderRadius="none"
|
204
199
|
className="advanced-table-fullscreen-header"
|
205
200
|
{...props}
|
206
|
-
|
201
|
+
>
|
207
202
|
<Flex justify="end">
|
208
203
|
{defaultMinimizeIcon}
|
209
204
|
</Flex>
|
@@ -212,8 +207,8 @@ const AdvancedTable = (props: AdvancedTableProps) => {
|
|
212
207
|
}
|
213
208
|
|
214
209
|
useEffect(() => {
|
215
|
-
if (!
|
216
|
-
|
210
|
+
if (!allowFullScreen) return
|
211
|
+
|
217
212
|
const handleKeyDown = (event: KeyboardEvent) => {
|
218
213
|
if (event.key === 'Escape' && isFullscreen) {
|
219
214
|
event.preventDefault()
|
@@ -224,7 +219,7 @@ const AdvancedTable = (props: AdvancedTableProps) => {
|
|
224
219
|
return () => {
|
225
220
|
document.removeEventListener('keydown', handleKeyDown)
|
226
221
|
}
|
227
|
-
}, [
|
222
|
+
}, [allowFullScreen, toggleFullscreen, isFullscreen])
|
228
223
|
|
229
224
|
// Build CSS classes and props
|
230
225
|
const ariaProps = buildAriaProps(aria);
|
@@ -236,7 +231,7 @@ const AdvancedTable = (props: AdvancedTableProps) => {
|
|
236
231
|
maxHeight ? `advanced-table-max-height-${maxHeight}` : '',
|
237
232
|
{
|
238
233
|
'advanced-table-fullscreen': isFullscreen,
|
239
|
-
'advanced-table-
|
234
|
+
'advanced-table-allow-fullscreen': allowFullScreen
|
240
235
|
},
|
241
236
|
globalProps(props),
|
242
237
|
className
|
@@ -332,7 +327,7 @@ const AdvancedTable = (props: AdvancedTableProps) => {
|
|
332
327
|
</AdvancedTableProvider>
|
333
328
|
|
334
329
|
</div>
|
335
|
-
|
330
|
+
{/* Bottom Pagination */}
|
336
331
|
{pagination && (
|
337
332
|
<TablePagination
|
338
333
|
onChange={onPageChange}
|
@@ -149,7 +149,7 @@ return (
|
|
149
149
|
data={{testid: testId}}
|
150
150
|
sortControl={sortControl}
|
151
151
|
tableData={MOCK_DATA}
|
152
|
-
|
152
|
+
>
|
153
153
|
<AdvancedTable.Header enableSorting />
|
154
154
|
<AdvancedTable.Body />
|
155
155
|
</AdvancedTable>
|
@@ -500,15 +500,15 @@ test("customRenderer prop functions as expected", () => {
|
|
500
500
|
expect(pill).toBeInTheDocument()
|
501
501
|
})
|
502
502
|
|
503
|
-
test("
|
503
|
+
test("allowFullScreen prop adds fullscreen class", () => {
|
504
504
|
render(
|
505
505
|
<AdvancedTable
|
506
|
+
allowFullScreen
|
506
507
|
columnDefinitions={columnDefinitions}
|
507
|
-
fullscreenable
|
508
508
|
tableData={MOCK_DATA}
|
509
509
|
/>
|
510
510
|
)
|
511
511
|
|
512
512
|
const tableContainer = screen.getByRole("table").closest("div")
|
513
|
-
expect(tableContainer).toHaveClass("advanced-table-
|
513
|
+
expect(tableContainer).toHaveClass("advanced-table-allow-fullscreen")
|
514
514
|
})
|
@@ -54,9 +54,9 @@ const AdvancedTableFullscreen = (props) => {
|
|
54
54
|
/>
|
55
55
|
</Flex>
|
56
56
|
<AdvancedTable
|
57
|
+
allowFullScreen
|
57
58
|
columnDefinitions={columnDefinitions}
|
58
|
-
|
59
|
-
getFullscreenControls={({ toggleFullscreen }) => setFullscreenToggleSmall(() => toggleFullscreen)}
|
59
|
+
fullScreenControl={({ toggleFullscreen }) => setFullscreenToggleSmall(() => toggleFullscreen)}
|
60
60
|
tableData={MOCK_DATA}
|
61
61
|
{...props}
|
62
62
|
>
|
@@ -72,9 +72,9 @@ const AdvancedTableFullscreen = (props) => {
|
|
72
72
|
/>
|
73
73
|
</Flex>
|
74
74
|
<AdvancedTable
|
75
|
+
allowFullScreen
|
75
76
|
columnDefinitions={columnDefinitions}
|
76
|
-
|
77
|
-
getFullscreenControls={({ toggleFullscreen }) => setFullscreenToggleLarge(() => toggleFullscreen)}
|
77
|
+
fullScreenControl={({ toggleFullscreen }) => setFullscreenToggleLarge(() => toggleFullscreen)}
|
78
78
|
responsive="none"
|
79
79
|
tableData={PAGINATION_MOCK_DATA}
|
80
80
|
tableProps={tableProps}
|
@@ -1,3 +1,3 @@
|
|
1
|
-
Trigger Fullscreen mode with the `
|
1
|
+
Trigger Fullscreen mode with the `allowFullScreen`and `fullScreenControl` props. `allowFullScreen` is a boolean that enables Fullscreen functionality for an Advanced Table. `fullScreenControl` is a callback function that receives an object containing the table's internal `toggleFullscreen` function, allowing you to store and trigger Fullscreen from the parent component. An external trigger (like a button) must be used to activate Fullscreen mode.
|
2
2
|
|
3
3
|
Exit Fullscreen mode by clicking the minimize top-right-corner icon or by pressing the "Escape" keyboard key.
|
@@ -106,41 +106,41 @@ const DatePicker = (props: DatePickerProps): React.ReactElement => {
|
|
106
106
|
const inputAriaProps = buildAriaProps(inputAria)
|
107
107
|
const inputDataProps = buildDataProps(inputData)
|
108
108
|
|
109
|
-
useEffect(() => {
|
110
|
-
|
111
|
-
|
112
|
-
|
113
|
-
|
114
|
-
|
115
|
-
|
116
|
-
|
117
|
-
|
118
|
-
|
119
|
-
|
120
|
-
|
121
|
-
|
122
|
-
|
123
|
-
|
124
|
-
|
125
|
-
|
126
|
-
|
127
|
-
|
128
|
-
|
129
|
-
|
130
|
-
|
131
|
-
|
132
|
-
|
133
|
-
|
134
|
-
|
135
|
-
|
136
|
-
|
137
|
-
|
138
|
-
|
139
|
-
}, initializeOnce ? [] : undefined)
|
109
|
+
useEffect(() => {
|
110
|
+
datePickerHelper({
|
111
|
+
allowInput,
|
112
|
+
customQuickPickDates,
|
113
|
+
defaultDate,
|
114
|
+
disableDate,
|
115
|
+
disableRange,
|
116
|
+
disableWeekdays,
|
117
|
+
enableTime,
|
118
|
+
format,
|
119
|
+
hideIcon,
|
120
|
+
inLine,
|
121
|
+
maxDate,
|
122
|
+
minDate,
|
123
|
+
mode,
|
124
|
+
onChange,
|
125
|
+
onClose,
|
126
|
+
pickerId,
|
127
|
+
plugins,
|
128
|
+
// eslint-disable-next-line @typescript-eslint/ban-ts-comment
|
129
|
+
// @ts-ignore
|
130
|
+
position,
|
131
|
+
positionElement,
|
132
|
+
selectionType,
|
133
|
+
showTimezone,
|
134
|
+
staticPosition,
|
135
|
+
thisRangesEndToday,
|
136
|
+
yearRange,
|
137
|
+
required: false,
|
138
|
+
}, scrollContainer)
|
139
|
+
}, initializeOnce ? [] : undefined)
|
140
140
|
const filteredProps = {...props}
|
141
141
|
if (filteredProps.marginBottom === undefined) {
|
142
142
|
filteredProps.marginBottom = "sm"
|
143
|
-
}
|
143
|
+
}
|
144
144
|
delete filteredProps?.position
|
145
145
|
|
146
146
|
const classes = classnames(
|
@@ -221,7 +221,7 @@ useEffect(() => {
|
|
221
221
|
{hideIcon && inLine ?
|
222
222
|
<div>
|
223
223
|
<div
|
224
|
-
className={iconWrapperClass()}
|
224
|
+
className={`${iconWrapperClass()} date-picker-inline-icon-plus`}
|
225
225
|
id={`${pickerId}-icon-plus`}
|
226
226
|
>
|
227
227
|
<Icon
|
@@ -230,7 +230,7 @@ useEffect(() => {
|
|
230
230
|
/>
|
231
231
|
</div>
|
232
232
|
<div
|
233
|
-
className={iconWrapperClass()}
|
233
|
+
className={`${iconWrapperClass()} date-picker-inline-angle-down`}
|
234
234
|
id={`${pickerId}-angle-down`}
|
235
235
|
>
|
236
236
|
<Icon
|
@@ -44,7 +44,7 @@
|
|
44
44
|
<% if object.hide_icon && object.inline %>
|
45
45
|
<!-- Plus Icon -->
|
46
46
|
<div
|
47
|
-
class="<%= object.icon_wrapper_class %>"
|
47
|
+
class="<%= object.icon_wrapper_class %> date-picker-inline-icon-plus"
|
48
48
|
id="<%= object.picker_id %>-icon-plus"
|
49
49
|
>
|
50
50
|
<%= pb_rails("icon", props: {
|
@@ -55,7 +55,7 @@
|
|
55
55
|
|
56
56
|
<!-- Angle Down Icon -->
|
57
57
|
<div
|
58
|
-
class="<%= object.icon_wrapper_class %>"
|
58
|
+
class="<%= object.icon_wrapper_class %> date-picker-inline-angle-down"
|
59
59
|
id="<%= object.picker_id %>-angle-down"
|
60
60
|
>
|
61
61
|
<%= pb_rails("icon", props: {
|
@@ -174,6 +174,21 @@ const datePickerHelper = (config: DatePickerConfig, scrollContainer: string | HT
|
|
174
174
|
yearInput.value = fp.currentYear?.toString()
|
175
175
|
}
|
176
176
|
|
177
|
+
const handleDatePickerChange = (fp: Instance, selectedDates: Date[]) => {
|
178
|
+
const inputEl = fp.input
|
179
|
+
|
180
|
+
if (inputEl) {
|
181
|
+
const inlineDatePickerElem = inputEl.closest('.inline-date-picker')
|
182
|
+
if (inlineDatePickerElem) {
|
183
|
+
if (selectedDates && selectedDates.length > 0) {
|
184
|
+
inlineDatePickerElem.classList.add('show-angle-down-icon')
|
185
|
+
} else {
|
186
|
+
inlineDatePickerElem.classList.remove('show-angle-down-icon')
|
187
|
+
}
|
188
|
+
}
|
189
|
+
}
|
190
|
+
}
|
191
|
+
|
177
192
|
// ===========================================================
|
178
193
|
// | Flatpickr initializer w/ config |
|
179
194
|
// ===========================================================
|
@@ -204,6 +219,7 @@ const datePickerHelper = (config: DatePickerConfig, scrollContainer: string | HT
|
|
204
219
|
onClose(selectedDates, dateStr)
|
205
220
|
}],
|
206
221
|
onChange: [(selectedDates, dateStr, fp) => {
|
222
|
+
handleDatePickerChange(fp, selectedDates)
|
207
223
|
yearChangeHook(fp)
|
208
224
|
onChange(dateStr, selectedDates)
|
209
225
|
}],
|
@@ -4,14 +4,3 @@
|
|
4
4
|
inline: true,
|
5
5
|
picker_id: "date-picker-inline"
|
6
6
|
}) %>
|
7
|
-
|
8
|
-
<%= javascript_tag do %>
|
9
|
-
window.addEventListener("DOMContentLoaded", (event) => {
|
10
|
-
const fpInline = document.querySelector("#date-picker-inline")._flatpickr
|
11
|
-
<!-- Display the angle-down icon when a date has been selected -->
|
12
|
-
const showAngleDownHandler = () => {
|
13
|
-
document.querySelector('.inline-date-picker').classList.add('show-angle-down-icon')
|
14
|
-
}
|
15
|
-
fpInline.config.onChange.push(showAngleDownHandler)
|
16
|
-
})
|
17
|
-
<% end %>
|
@@ -3,19 +3,12 @@ import React from 'react'
|
|
3
3
|
import DatePicker from '../_date_picker'
|
4
4
|
|
5
5
|
const DatePickerInline = (props) => {
|
6
|
-
const showAngleDownHandler = (dateSelected) => {
|
7
|
-
if (dateSelected) {
|
8
|
-
document.querySelector('.inline-date-picker').classList.add('show-angle-down-icon')
|
9
|
-
}
|
10
|
-
}
|
11
|
-
|
12
6
|
return (
|
13
7
|
<div>
|
14
8
|
<DatePicker
|
15
9
|
className="inline-date-picker"
|
16
10
|
hideIcon
|
17
11
|
inLine
|
18
|
-
onChange={showAngleDownHandler}
|
19
12
|
pickerId="date-picker-inline"
|
20
13
|
{...props}
|
21
14
|
/>
|
@@ -14,12 +14,12 @@
|
|
14
14
|
opacity: 1;
|
15
15
|
}
|
16
16
|
&:not(:hover) {
|
17
|
-
|
17
|
+
.date-picker-inline-angle-down.cal_icon_wrapper {
|
18
18
|
svg {
|
19
19
|
display: none;
|
20
20
|
}
|
21
21
|
}
|
22
|
-
|
22
|
+
.date-picker-inline-icon-plus.cal_icon_wrapper {
|
23
23
|
svg {
|
24
24
|
color: $slate;
|
25
25
|
display: inline-block;
|
@@ -33,12 +33,12 @@
|
|
33
33
|
[class^="pb_text_input_kit"] .text_input_wrapper .flatpickr-wrapper .text_input .placeholder {
|
34
34
|
color: $primary;
|
35
35
|
}
|
36
|
-
|
36
|
+
.date-picker-inline-angle-down.cal_icon_wrapper {
|
37
37
|
svg {
|
38
38
|
display: none;
|
39
39
|
}
|
40
40
|
}
|
41
|
-
|
41
|
+
.date-picker-inline-icon-plus.cal_icon_wrapper {
|
42
42
|
svg {
|
43
43
|
display: inline-block;
|
44
44
|
color: $primary;
|
@@ -47,32 +47,34 @@
|
|
47
47
|
}
|
48
48
|
&.show-angle-down-icon {
|
49
49
|
&:not(:hover) {
|
50
|
-
|
50
|
+
.date-picker-inline-angle-down.cal_icon_wrapper {
|
51
51
|
svg {
|
52
52
|
display: inline-block;
|
53
53
|
color: $text_lt_light;
|
54
54
|
}
|
55
55
|
}
|
56
|
-
|
56
|
+
.date-picker-inline-icon-plus.cal_icon_wrapper {
|
57
57
|
svg {
|
58
58
|
display: none;
|
59
59
|
}
|
60
60
|
}
|
61
61
|
}
|
62
|
-
|
62
|
+
.date-picker-inline-icon-plus.cal_icon_wrapper {
|
63
63
|
svg {
|
64
64
|
display: none;
|
65
65
|
}
|
66
66
|
}
|
67
|
-
|
67
|
+
.date-picker-inline-angle-down.cal_icon_wrapper {
|
68
68
|
svg {
|
69
69
|
display: inline-block;
|
70
70
|
color: $primary;
|
71
71
|
}
|
72
72
|
}
|
73
73
|
}
|
74
|
-
|
75
|
-
|
74
|
+
.date_picker_input.flatpickr-input,
|
75
|
+
.date_picker_input.flatpickr-input .active,
|
76
|
+
.text_input.flatpickr-input,
|
77
|
+
.text_input.flatpickr-input .active {
|
76
78
|
border: none;
|
77
79
|
padding: 5px 5px 5px 10px;
|
78
80
|
background-color: #FFF;
|
@@ -82,8 +84,8 @@
|
|
82
84
|
box-shadow: none;
|
83
85
|
}
|
84
86
|
}
|
85
|
-
|
86
|
-
|
87
|
+
.date-picker-inline-angle-down.cal_icon_wrapper,
|
88
|
+
.date-picker-inline-icon-plus.cal_icon_wrapper {
|
87
89
|
height: 33px;
|
88
90
|
border: none;
|
89
91
|
}
|
@@ -96,12 +98,12 @@
|
|
96
98
|
[class^=pb_date_picker_kit].dark {
|
97
99
|
&.inline-date-picker {
|
98
100
|
&:not(:hover) {
|
99
|
-
|
101
|
+
.date-picker-inline-angle-down.cal_icon_wrapper {
|
100
102
|
svg {
|
101
103
|
display: none;
|
102
104
|
}
|
103
105
|
}
|
104
|
-
|
106
|
+
.date-picker-inline-icon-plus.cal_icon_wrapper {
|
105
107
|
svg {
|
106
108
|
display: inline-block;
|
107
109
|
color: $white;
|
@@ -115,12 +117,12 @@
|
|
115
117
|
[class^="pb_text_input_kit"] .text_input_wrapper .flatpickr-wrapper .text_input .placeholder {
|
116
118
|
color: $white;
|
117
119
|
}
|
118
|
-
|
120
|
+
.date-picker-inline-angle-down.cal_icon_wrapper {
|
119
121
|
svg {
|
120
122
|
display: none;
|
121
123
|
}
|
122
124
|
}
|
123
|
-
|
125
|
+
.date-picker-inline-icon-plus.cal_icon_wrapper {
|
124
126
|
svg {
|
125
127
|
display: inline-block;
|
126
128
|
color: $white;
|
@@ -129,32 +131,34 @@
|
|
129
131
|
}
|
130
132
|
&.show-angle-down-icon {
|
131
133
|
&:not(:hover) {
|
132
|
-
|
134
|
+
.date-picker-inline-angle-down.cal_icon_wrapper {
|
133
135
|
svg {
|
134
136
|
display: inline-block;
|
135
137
|
color: $white;
|
136
138
|
}
|
137
139
|
}
|
138
|
-
|
140
|
+
.date-picker-inline-icon-plus.cal_icon_wrapper {
|
139
141
|
svg {
|
140
142
|
display: none;
|
141
143
|
}
|
142
144
|
}
|
143
145
|
}
|
144
|
-
|
146
|
+
.date-picker-inline-icon-plus.cal_icon_wrapper {
|
145
147
|
svg {
|
146
148
|
display: none;
|
147
149
|
}
|
148
150
|
}
|
149
|
-
|
151
|
+
.date-picker-inline-angle-down.cal_icon_wrapper {
|
150
152
|
svg {
|
151
153
|
display: inline-block;
|
152
154
|
color: $white;
|
153
155
|
}
|
154
156
|
}
|
155
157
|
}
|
156
|
-
|
157
|
-
|
158
|
+
.date_picker_input.flatpickr-input,
|
159
|
+
.date_picker_input.flatpickr-input .active,
|
160
|
+
.text_input.flatpickr-input,
|
161
|
+
.text_input.flatpickr-input .active {
|
158
162
|
background-color: rgba($white,.10);
|
159
163
|
border: none;
|
160
164
|
padding: 5px 5px 5px 10px;
|
@@ -164,8 +168,8 @@
|
|
164
168
|
box-shadow: none;
|
165
169
|
}
|
166
170
|
}
|
167
|
-
|
168
|
-
|
171
|
+
.date-picker-inline-angle-down.cal_icon_wrapper,
|
172
|
+
.date-picker-inline-icon-plus.cal_icon_wrapper {
|
169
173
|
height: 33px;
|
170
174
|
border: none;
|
171
175
|
}
|
@@ -1,6 +1,5 @@
|
|
1
1
|
import React from 'react'
|
2
|
-
import { map } from '
|
3
|
-
import { isEmpty, omitBy } from '../../utilities/object'
|
2
|
+
import { isEmpty, omitBy, map } from '../../utilities/object'
|
4
3
|
|
5
4
|
import Body from '../../pb_body/_body'
|
6
5
|
import Caption from '../../pb_caption/_caption'
|
@@ -46,12 +45,12 @@ const CurrentFilters = ({ dark, filters }: CurrentFiltersProps): React.ReactElem
|
|
46
45
|
dark={dark}
|
47
46
|
size={4}
|
48
47
|
tag="h4"
|
49
|
-
text={name}
|
48
|
+
text={`${name}`}
|
50
49
|
/> :
|
51
50
|
<div>
|
52
51
|
<Caption
|
53
52
|
dark={dark}
|
54
|
-
text={name}
|
53
|
+
text={`${name}`}
|
55
54
|
/>
|
56
55
|
<Title
|
57
56
|
dark={dark}
|
@@ -1,6 +1,5 @@
|
|
1
1
|
import React, { useState } from 'react'
|
2
|
-
import { map } from
|
3
|
-
import { find, partial } from '../../utilities/object'
|
2
|
+
import { find, partial, map } from '../../utilities/object'
|
4
3
|
|
5
4
|
import Button from '../../pb_button/_button'
|
6
5
|
import Icon from '../../pb_icon/_icon'
|
@@ -27,7 +26,7 @@ const directionIcon = (dir: Direction) => (
|
|
27
26
|
|
28
27
|
const renderOptions = (options: SortOptions, value: SortValue[], handleChange: (arg0: SortValue) => void) => (
|
29
28
|
map(options, (label, name) => {
|
30
|
-
const next = nextValue(value, name)
|
29
|
+
const next = nextValue(value, String(name))
|
31
30
|
return (
|
32
31
|
<ListItem key={`option-${next.name}-${next.dir}`}>
|
33
32
|
<Button
|
@@ -7,11 +7,12 @@ import {
|
|
7
7
|
buildDataProps,
|
8
8
|
buildHtmlProps,
|
9
9
|
} from "../utilities/props";
|
10
|
+
import { cloneDeep } from "../utilities/object";
|
11
|
+
|
10
12
|
import Icon from "../pb_icon/_icon";
|
11
13
|
import FormPill from "../pb_form_pill/_form_pill";
|
12
14
|
import Body from "../pb_body/_body";
|
13
15
|
import Caption from "../pb_caption/_caption";
|
14
|
-
import { cloneDeep } from "lodash";
|
15
16
|
import MultiLevelSelectOptions from "./multi_level_select_options";
|
16
17
|
import MultiLevelSelectContext from "./context";
|
17
18
|
|