playbook_ui 11.7.0.pre.alpha.pre.guagechart1 → 11.7.0
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 +1 -1
- data/app/pb_kits/playbook/pb_date_picker/{_date_picker.jsx → _date_picker.tsx} +58 -66
- data/app/pb_kits/playbook/pb_date_picker/{date_picker_helper.js → date_picker_helper.ts} +37 -16
- data/app/pb_kits/playbook/pb_date_picker/plugins/timeSelect.ts +171 -0
- data/app/pb_kits/playbook/pb_date_range_stacked/{_date_range_stacked.jsx → _date_range_stacked.tsx} +5 -6
- data/app/pb_kits/playbook/pb_date_range_stacked/date_range_stacked.test.js +127 -0
- data/app/pb_kits/playbook/pb_date_stacked/_date_stacked.tsx +90 -0
- data/app/pb_kits/playbook/pb_date_stacked/date_stacked.test.js +151 -0
- data/app/pb_kits/playbook/pb_date_stacked/docs/_date_stacked_align.jsx +1 -1
- data/app/pb_kits/playbook/pb_date_stacked/docs/_date_stacked_bold.jsx +1 -1
- data/app/pb_kits/playbook/pb_date_stacked/docs/_date_stacked_default.jsx +1 -1
- data/app/pb_kits/playbook/pb_date_stacked/docs/_date_stacked_not_current_year.jsx +1 -1
- data/app/pb_kits/playbook/pb_date_stacked/docs/_date_stacked_reverse.jsx +1 -1
- data/app/pb_kits/playbook/pb_date_stacked/docs/_date_stacked_sizes.jsx +1 -1
- data/app/pb_kits/playbook/pb_dialog/{_close_icon.jsx → _close_icon.tsx} +1 -3
- data/app/pb_kits/playbook/pb_dialog/_dialog.tsx +217 -0
- data/app/pb_kits/playbook/pb_dialog/_dialog_context.tsx +3 -0
- data/app/pb_kits/playbook/pb_dialog/child_kits/{_dialog_body.jsx → _dialog_body.tsx} +6 -2
- data/app/pb_kits/playbook/pb_dialog/child_kits/{_dialog_footer.jsx → _dialog_footer.tsx} +8 -11
- data/app/pb_kits/playbook/pb_dialog/child_kits/{_dialog_header.jsx → _dialog_header.tsx} +12 -15
- data/app/pb_kits/playbook/pb_lightbox/Carousel/Slides.tsx +33 -0
- data/app/pb_kits/playbook/pb_lightbox/Carousel/Thumbnails.tsx +1 -3
- data/app/pb_kits/playbook/pb_lightbox/Carousel/index.tsx +3 -1
- data/app/pb_kits/playbook/pb_lightbox/{_lightbox_header.tsx → Header/_lightbox_header.tsx} +8 -8
- data/app/pb_kits/playbook/pb_lightbox/{_lightbox_header_icon.tsx → Header/_lightbox_header_icon.tsx} +2 -2
- data/app/pb_kits/playbook/pb_lightbox/_lightbox.tsx +2 -1
- data/app/pb_kits/playbook/pb_lightbox/lightbox.scss +8 -60
- data/app/pb_kits/playbook/pb_section_separator/_section_separator.tsx +5 -5
- data/app/pb_kits/playbook/pb_title/_title.tsx +1 -1
- data/app/pb_kits/playbook/playbook-rails.js +1 -1
- data/app/pb_kits/playbook/tokens/_spacing.scss +2 -0
- data/app/pb_kits/playbook/utilities/_spacing.scss +1 -0
- data/lib/playbook/spacing.rb +1 -1
- data/lib/playbook/version.rb +1 -1
- metadata +19 -17
- data/app/pb_kits/playbook/pb_date_picker/plugins/timeSelect.js +0 -137
- data/app/pb_kits/playbook/pb_date_stacked/_date_stacked.jsx +0 -103
- data/app/pb_kits/playbook/pb_dialog/_dialog.jsx +0 -223
- data/app/pb_kits/playbook/pb_dialog/_dialog_context.jsx +0 -3
checksums.yaml
CHANGED
@@ -1,7 +1,7 @@
|
|
1
1
|
---
|
2
2
|
SHA256:
|
3
|
-
metadata.gz:
|
4
|
-
data.tar.gz:
|
3
|
+
metadata.gz: 50c4e2402a8a42486e55758e888f2aa3d0b68c8b00c64537bcf86572c0d39a3b
|
4
|
+
data.tar.gz: 7cbb4822db32acc06087d381c025c8f1e11ef0685e33e8bc2b66bb90e80eeeed
|
5
5
|
SHA512:
|
6
|
-
metadata.gz:
|
7
|
-
data.tar.gz:
|
6
|
+
metadata.gz: 1e645568ecb8d1ae319c94bc7038f9e7c1dac964fdcca0c256430142813efc4bec63ba172f7522e96766458530ed382499899a6e4e54ee66093d189dbb60b7ab
|
7
|
+
data.tar.gz: c1d7f6db9c77ea3fc3ec9f402f89675caccd4320fb7490ee26df0ab61a43e6dd6ad29a1b9209ac23a33ed6a2239092974949c1689fe2f9931ce899110b9fb30d
|
@@ -115,7 +115,7 @@ export { default as dashboardValueSettings } from './pb_dashboard_value/dashboar
|
|
115
115
|
|
116
116
|
// Other JS/Plugins
|
117
117
|
export { default as pbChart } from './plugins/pb_chart.js'
|
118
|
-
export { default as datePickerHelper } from './pb_date_picker/date_picker_helper
|
118
|
+
export { default as datePickerHelper } from './pb_date_picker/date_picker_helper'
|
119
119
|
export { default as PbPopover } from './pb_popover'
|
120
120
|
export { default as PbTable } from './pb_table'
|
121
121
|
export { default as PbTextarea } from './pb_textarea'
|
@@ -1,10 +1,8 @@
|
|
1
|
-
/* @flow */
|
2
|
-
|
3
1
|
import React, { useEffect } from 'react'
|
4
2
|
import classnames from 'classnames'
|
5
3
|
|
6
4
|
import { buildAriaProps, buildCss, buildDataProps } from '../utilities/props'
|
7
|
-
import { deprecatedProps, globalProps } from '../utilities/globalProps'
|
5
|
+
import { deprecatedProps, globalProps, GlobalProps } from '../utilities/globalProps'
|
8
6
|
|
9
7
|
import datePickerHelper from './date_picker_helper'
|
10
8
|
|
@@ -12,46 +10,42 @@ import Icon from '../pb_icon/_icon'
|
|
12
10
|
import TextInput from '../pb_text_input/_text_input'
|
13
11
|
|
14
12
|
type DatePickerProps = {
|
15
|
-
allowInput?:
|
16
|
-
aria?:
|
17
|
-
className?:
|
18
|
-
dark?:
|
13
|
+
allowInput?: boolean,
|
14
|
+
aria?: {[key: string]: string},
|
15
|
+
className?: string,
|
16
|
+
dark?: boolean,
|
19
17
|
data?: object,
|
20
|
-
defaultDate?:
|
21
|
-
disableDate?:
|
22
|
-
disableInput?:
|
23
|
-
disableRange?:
|
24
|
-
disableWeekdays?:
|
25
|
-
enableTime?:
|
26
|
-
error?:
|
27
|
-
format?:
|
28
|
-
hideIcon?:
|
29
|
-
hideLabel?:
|
30
|
-
id?:
|
31
|
-
inLine?:
|
18
|
+
defaultDate?: string,
|
19
|
+
disableDate?: number[],
|
20
|
+
disableInput?: boolean,
|
21
|
+
disableRange?: number[],
|
22
|
+
disableWeekdays?: number[],
|
23
|
+
enableTime?: boolean,
|
24
|
+
error?: string,
|
25
|
+
format?: string,
|
26
|
+
hideIcon?: boolean,
|
27
|
+
hideLabel?: boolean,
|
28
|
+
id?: string,
|
29
|
+
inLine?: boolean,
|
32
30
|
inputAria?: object,
|
33
31
|
inputData?: object,
|
34
|
-
inputOnChange?: (
|
32
|
+
inputOnChange?: (arg: string) => void,
|
35
33
|
inputValue?: any,
|
36
|
-
label?:
|
37
|
-
maxDate:
|
38
|
-
minDate:
|
39
|
-
|
40
|
-
|
41
|
-
|
42
|
-
pickerId?: String,
|
43
|
-
placeholder?: String,
|
44
|
-
plugins: Boolean,
|
45
|
-
position: String,
|
34
|
+
label?: string,
|
35
|
+
maxDate: string,
|
36
|
+
minDate: string,
|
37
|
+
name: string,
|
38
|
+
pickerId?: ArrayLike<Node> | Node | string,
|
39
|
+
placeholder?: string,
|
46
40
|
positionElement?: HTMLElement | null,
|
47
|
-
scrollContainer?:
|
41
|
+
scrollContainer?: string,
|
48
42
|
selectionType?: "month" | "week",
|
49
|
-
showTimezone?:
|
50
|
-
staticPosition:
|
51
|
-
timeFormat?:
|
52
|
-
type?:
|
53
|
-
yearRange?:
|
54
|
-
}
|
43
|
+
showTimezone?: boolean,
|
44
|
+
staticPosition: boolean,
|
45
|
+
timeFormat?: string,
|
46
|
+
type?: string,
|
47
|
+
yearRange?: number[],
|
48
|
+
} & GlobalProps
|
55
49
|
|
56
50
|
const DatePicker = (props: DatePickerProps) => {
|
57
51
|
if (props.plugins) deprecatedProps('Date Picker', ['plugins'])
|
@@ -128,6 +122,7 @@ const DatePicker = (props: DatePickerProps) => {
|
|
128
122
|
showTimezone,
|
129
123
|
staticPosition,
|
130
124
|
yearRange,
|
125
|
+
required: false,
|
131
126
|
}, scrollContainer)
|
132
127
|
})
|
133
128
|
|
@@ -168,38 +163,35 @@ const DatePicker = (props: DatePickerProps) => {
|
|
168
163
|
value={inputValue}
|
169
164
|
/>
|
170
165
|
|
171
|
-
|
166
|
+
{!hideIcon &&
|
172
167
|
<div
|
173
|
-
|
174
|
-
|
175
|
-
|
176
|
-
|
177
|
-
|
178
|
-
|
179
|
-
|
180
|
-
|
181
|
-
|
168
|
+
className={iconWrapperClass()}
|
169
|
+
id={`cal-icon-${pickerId}`}
|
170
|
+
>
|
171
|
+
<Icon
|
172
|
+
className="cal_icon"
|
173
|
+
icon="calendar-alt"
|
174
|
+
/>
|
175
|
+
</div>
|
176
|
+
}
|
177
|
+
|
182
178
|
|
183
|
-
|
184
|
-
|
185
|
-
|
186
|
-
|
187
|
-
|
188
|
-
|
189
|
-
|
190
|
-
|
191
|
-
|
192
|
-
|
193
|
-
|
194
|
-
className={iconWrapperClass()}
|
195
|
-
id={`${pickerId}-angle-down`}
|
196
|
-
>
|
179
|
+
{ hideIcon && inLine ? <><div
|
180
|
+
className={iconWrapperClass()}
|
181
|
+
id={`${pickerId}-icon-plus`}
|
182
|
+
>
|
183
|
+
<Icon
|
184
|
+
className="date-picker-plus-icon"
|
185
|
+
icon="plus" />
|
186
|
+
</div><div
|
187
|
+
className={iconWrapperClass()}
|
188
|
+
id={`${pickerId}-angle-down`}
|
189
|
+
>
|
197
190
|
<Icon
|
198
|
-
|
199
|
-
|
200
|
-
|
201
|
-
|
202
|
-
</If>
|
191
|
+
className="angle_down_icon"
|
192
|
+
icon="angle-down" />
|
193
|
+
</div></> : null}
|
194
|
+
|
203
195
|
|
204
196
|
</div>
|
205
197
|
</div>
|
@@ -1,13 +1,32 @@
|
|
1
1
|
import flatpickr from 'flatpickr'
|
2
|
+
import { BaseOptions } from 'flatpickr/dist/types/options'
|
2
3
|
import monthSelectPlugin from 'flatpickr/dist/plugins/monthSelect'
|
3
4
|
import weekSelect from "flatpickr/dist/plugins/weekSelect/weekSelect"
|
4
5
|
import timeSelectPlugin from './plugins/timeSelect'
|
5
6
|
|
6
|
-
const getPositionElement = (element) => {
|
7
|
+
const getPositionElement = (element: string | Element) => {
|
7
8
|
return (typeof element === 'string') ? document.querySelectorAll(element)[0] : element
|
8
9
|
}
|
9
10
|
|
10
|
-
|
11
|
+
type DatePickerConfig = {
|
12
|
+
disableDate?: number[],
|
13
|
+
disableRange?: number[],
|
14
|
+
disableWeekdays?: number[],
|
15
|
+
format?: string,
|
16
|
+
pickerId?: ArrayLike<Node> | Node | string,
|
17
|
+
required: boolean,
|
18
|
+
hideIcon?: boolean;
|
19
|
+
inLine?: boolean,
|
20
|
+
onChange: (dateStr: string, selectedDates: Date[]) => void,
|
21
|
+
selectionType?: "month" | "week" | "",
|
22
|
+
showTimezone?: boolean,
|
23
|
+
staticPosition: boolean,
|
24
|
+
timeCaption?: string,
|
25
|
+
timeFormat?: string,
|
26
|
+
yearRange: number[]
|
27
|
+
} & Pick<BaseOptions, "allowInput" | "defaultDate" | "enableTime" | "maxDate" | "minDate" | "mode" | "plugins" | "position" | "positionElement" >
|
28
|
+
|
29
|
+
const datePickerHelper = (config: DatePickerConfig, scrollContainer: string | HTMLElement) => {
|
11
30
|
const {
|
12
31
|
allowInput,
|
13
32
|
defaultDate,
|
@@ -54,9 +73,9 @@ const datePickerHelper = (config, scrollContainer) => {
|
|
54
73
|
}
|
55
74
|
}
|
56
75
|
const calendarResizer = () => {
|
57
|
-
const cal = document.querySelector(`#cal-${pickerId}.open`)
|
76
|
+
const cal = document.querySelector(`#cal-${pickerId}.open`) as HTMLElement
|
58
77
|
const parentInput = cal.parentElement
|
59
|
-
if (cal
|
78
|
+
if (cal?.getBoundingClientRect().right > window.innerWidth) {
|
60
79
|
parentInput.style.display = 'flex'
|
61
80
|
parentInput.style.justifyContent = 'center'
|
62
81
|
}
|
@@ -70,10 +89,10 @@ const datePickerHelper = (config, scrollContainer) => {
|
|
70
89
|
let pluginList = []
|
71
90
|
|
72
91
|
// month and week selection
|
73
|
-
if (selectionType === "month" || plugins
|
92
|
+
if (selectionType === "month" || plugins.length > 0) {
|
74
93
|
pluginList.push(monthSelectPlugin({ shorthand: true, dateFormat: 'F Y', altFormat: 'F Y' }))
|
75
94
|
} else if ( selectionType === "week") {
|
76
|
-
pluginList.push(weekSelect(
|
95
|
+
pluginList.push(weekSelect())
|
77
96
|
}
|
78
97
|
|
79
98
|
// time selection
|
@@ -96,7 +115,9 @@ const datePickerHelper = (config, scrollContainer) => {
|
|
96
115
|
defaultDate: defaultDateGetter(),
|
97
116
|
disable: disableWeekdays && disableWeekdays.length > 0 ? [
|
98
117
|
(date) => {
|
99
|
-
const weekdayObj
|
118
|
+
const weekdayObj: {
|
119
|
+
[day: string]: number
|
120
|
+
} = {
|
100
121
|
Sunday: 0,
|
101
122
|
Monday: 1,
|
102
123
|
Tuesday: 2,
|
@@ -128,7 +149,7 @@ const datePickerHelper = (config, scrollContainer) => {
|
|
128
149
|
}],
|
129
150
|
onClose: [() => {
|
130
151
|
window.removeEventListener('resize', calendarResizer)
|
131
|
-
if (!staticPosition && scrollContainer) detachFromScroll(scrollContainer)
|
152
|
+
if (!staticPosition && scrollContainer) detachFromScroll(scrollContainer as HTMLElement)
|
132
153
|
}],
|
133
154
|
onChange: [(selectedDates, dateStr) => {
|
134
155
|
onChange(dateStr, selectedDates)
|
@@ -148,18 +169,18 @@ const datePickerHelper = (config, scrollContainer) => {
|
|
148
169
|
// ===========================================================
|
149
170
|
|
150
171
|
// Assign dynamically sourced flatpickr instance to variable
|
151
|
-
const picker = document.querySelector(`#${pickerId}`)._flatpickr
|
172
|
+
const picker = document.querySelector<HTMLElement & { [x: string]: any }>(`#${pickerId}`)._flatpickr
|
152
173
|
picker.innerContainer.parentElement.id = `cal-${pickerId}`
|
153
174
|
|
154
175
|
// Attach / detach to / from scroll events
|
155
176
|
const scrollEvent = () => {
|
156
177
|
picker._positionCalendar()
|
157
178
|
}
|
158
|
-
function attachToScroll(scrollParent) {
|
159
|
-
document.querySelectorAll(scrollParent)[0]?.addEventListener("scroll", scrollEvent, { passive: true })
|
179
|
+
function attachToScroll(scrollParent: string | HTMLElement) {
|
180
|
+
document.querySelectorAll(scrollParent as string)[0]?.addEventListener("scroll", scrollEvent, { passive: true })
|
160
181
|
}
|
161
|
-
function detachFromScroll(scrollParent = document.body) {
|
162
|
-
document.querySelectorAll(scrollParent)[0]?.removeEventListener("scroll", scrollEvent)
|
182
|
+
function detachFromScroll(scrollParent: string | HTMLElement = document.body) {
|
183
|
+
document.querySelectorAll(scrollParent as string)[0]?.removeEventListener("scroll", scrollEvent)
|
163
184
|
}
|
164
185
|
|
165
186
|
// replace year selector with dropdown
|
@@ -172,14 +193,14 @@ const datePickerHelper = (config, scrollContainer) => {
|
|
172
193
|
}
|
173
194
|
|
174
195
|
// variablize each dropdown selector
|
175
|
-
const dropdown = document.querySelector(`#year-${pickerId}`)
|
196
|
+
const dropdown = document.querySelector<HTMLElement & { [x: string]: any }>(`#year-${pickerId}`)
|
176
197
|
|
177
198
|
// inject year options into dropdown and assign it the flatpickr's current year value
|
178
199
|
dropdown.innerHTML = years
|
179
200
|
dropdown.value = picker.currentYear
|
180
201
|
|
181
202
|
// whenever a new year is selected from dropdown update flatpickr's current year value
|
182
|
-
dropdown.addEventListener('input', (e) => {
|
203
|
+
dropdown.addEventListener('input', (e: Event & { target: { value: string}}) => {
|
183
204
|
picker.changeYear(Number(e.target.value))
|
184
205
|
})
|
185
206
|
|
@@ -219,7 +240,7 @@ const datePickerHelper = (config, scrollContainer) => {
|
|
219
240
|
}
|
220
241
|
if (required){
|
221
242
|
picker.input.removeAttribute('readonly')
|
222
|
-
picker.input.addEventListener('keydown', (e) => e.preventDefault())
|
243
|
+
picker.input.addEventListener('keydown', (e: Event) => e.preventDefault())
|
223
244
|
picker.input.style.caretColor = 'transparent'
|
224
245
|
picker.input.style.cursor = 'pointer'
|
225
246
|
}
|
@@ -0,0 +1,171 @@
|
|
1
|
+
type FpTypes = {
|
2
|
+
amPM?: { style: { display: string } };
|
3
|
+
selectedDates: string | any[];
|
4
|
+
setDate: (arg0: any, arg1: boolean) => void;
|
5
|
+
input: { id: any };
|
6
|
+
timeContainer?: {
|
7
|
+
classList: { add: (arg0: string) => void };
|
8
|
+
prepend: (arg0: HTMLDivElement) => void;
|
9
|
+
append: (arg0: HTMLDivElement) => void;
|
10
|
+
};
|
11
|
+
minuteElement?: { step: string };
|
12
|
+
_initialDate: {
|
13
|
+
toLocaleDateString: (
|
14
|
+
arg0: string,
|
15
|
+
arg1: { day: string; timeZoneName: string }
|
16
|
+
) => string | any[];
|
17
|
+
};
|
18
|
+
loadedPlugins: string[];
|
19
|
+
};
|
20
|
+
|
21
|
+
export const getTimezoneText = (inputDate: {
|
22
|
+
toLocaleDateString: (
|
23
|
+
arg0: string,
|
24
|
+
arg1: { day: string; timeZoneName: string }
|
25
|
+
) => string | any[];
|
26
|
+
}) => {
|
27
|
+
const tzAbbr = inputDate
|
28
|
+
.toLocaleDateString("en-US", {
|
29
|
+
day: "2-digit",
|
30
|
+
timeZoneName: "short",
|
31
|
+
})
|
32
|
+
.slice(4);
|
33
|
+
const tzText = inputDate
|
34
|
+
.toLocaleDateString("en-US", {
|
35
|
+
day: "2-digit",
|
36
|
+
timeZoneName: "long",
|
37
|
+
})
|
38
|
+
.slice(4);
|
39
|
+
return `${tzAbbr} (${tzText})`;
|
40
|
+
};
|
41
|
+
|
42
|
+
function timeSelectPlugin(props: { caption: string; showTimezone: boolean }) {
|
43
|
+
return function (fp: FpTypes) {
|
44
|
+
const generateMeridiemCard = (text: string) => {
|
45
|
+
const selectableCard = document.createElement("div");
|
46
|
+
selectableCard.className = "pb_selectable_card_kit_enabled";
|
47
|
+
|
48
|
+
const cardInput = document.createElement("input"),
|
49
|
+
cardInputId = `datePicker${text}`;
|
50
|
+
|
51
|
+
cardInput.id = cardInputId;
|
52
|
+
cardInput.name = "datepicker-ampm";
|
53
|
+
cardInput.type = "radio";
|
54
|
+
cardInput.value = text;
|
55
|
+
|
56
|
+
const cardLabel = document.createElement("label"),
|
57
|
+
cardLabelBuffer = document.createElement("div");
|
58
|
+
cardLabel.className = `label-${text.toLowerCase()}`;
|
59
|
+
cardLabel.setAttribute("for", cardInputId);
|
60
|
+
cardLabelBuffer.className = "buffer";
|
61
|
+
cardLabelBuffer.innerHTML = text;
|
62
|
+
|
63
|
+
cardLabel.append(cardLabelBuffer);
|
64
|
+
selectableCard.prepend(cardInput);
|
65
|
+
selectableCard.append(cardLabel);
|
66
|
+
|
67
|
+
return selectableCard;
|
68
|
+
};
|
69
|
+
|
70
|
+
const generateMeridiemToggle = () => {
|
71
|
+
fp.amPM.style.display = "none";
|
72
|
+
const formGroupKit = document.createElement("div");
|
73
|
+
formGroupKit.className = "pb_form_group_kit";
|
74
|
+
|
75
|
+
const amCard = generateMeridiemCard("AM");
|
76
|
+
amCard.addEventListener("click", () => {
|
77
|
+
fp.selectedDates[0].setHours(
|
78
|
+
(fp.selectedDates[0].getHours() % 12) + 12 * 0
|
79
|
+
);
|
80
|
+
fp.setDate(fp.selectedDates[0], true);
|
81
|
+
});
|
82
|
+
|
83
|
+
const pmCard = generateMeridiemCard("PM");
|
84
|
+
pmCard.addEventListener("click", () => {
|
85
|
+
fp.selectedDates[0].setHours(
|
86
|
+
(fp.selectedDates[0].getHours() % 12) + 12 * 1
|
87
|
+
);
|
88
|
+
fp.setDate(fp.selectedDates[0], true);
|
89
|
+
});
|
90
|
+
|
91
|
+
formGroupKit.prepend(amCard);
|
92
|
+
formGroupKit.append(pmCard);
|
93
|
+
|
94
|
+
const meridiemContainer = document.createElement("div");
|
95
|
+
meridiemContainer.className = "meridiem";
|
96
|
+
meridiemContainer.append(formGroupKit);
|
97
|
+
document.querySelector(".pb_time_selection").append(meridiemContainer);
|
98
|
+
};
|
99
|
+
|
100
|
+
const getMeridiem = (dateObj: string | any[]) => {
|
101
|
+
return dateObj[0].getHours() < 12 ? "AM" : "PM";
|
102
|
+
};
|
103
|
+
|
104
|
+
const updateMeridiemToggle = (forceClick: boolean) => {
|
105
|
+
if (!fp.selectedDates.length) return;
|
106
|
+
|
107
|
+
const uncheckedClass = "pb_selectable_card_kit_enabled",
|
108
|
+
checkedClass = "pb_selectable_card_kit_checked_enabled",
|
109
|
+
pickerAM: HTMLElement & { [x: string]: any } =
|
110
|
+
document.getElementById("datePickerAM"),
|
111
|
+
pickerPM: HTMLElement & { [x: string]: any } =
|
112
|
+
document.getElementById("datePickerPM"),
|
113
|
+
meridiem = getMeridiem(fp.selectedDates);
|
114
|
+
|
115
|
+
if (forceClick) {
|
116
|
+
pickerAM.checked = false;
|
117
|
+
pickerPM.checked = false;
|
118
|
+
pickerPM.checked = meridiem === "PM";
|
119
|
+
pickerAM.checked = meridiem === "AM";
|
120
|
+
}
|
121
|
+
|
122
|
+
if (meridiem === "PM") {
|
123
|
+
pickerPM.parentElement.className = checkedClass;
|
124
|
+
pickerAM.parentElement.className = uncheckedClass;
|
125
|
+
} else if (meridiem === "AM") {
|
126
|
+
pickerAM.parentElement.className = checkedClass;
|
127
|
+
pickerPM.parentElement.className = uncheckedClass;
|
128
|
+
}
|
129
|
+
};
|
130
|
+
|
131
|
+
return {
|
132
|
+
onValueUpdate() {
|
133
|
+
updateMeridiemToggle(true);
|
134
|
+
},
|
135
|
+
onReady() {
|
136
|
+
const id = fp.input.id;
|
137
|
+
|
138
|
+
if (!id || !fp?.timeContainer) return;
|
139
|
+
|
140
|
+
fp.timeContainer.classList.add("pb_time_selection");
|
141
|
+
|
142
|
+
// allow single minutes
|
143
|
+
fp.minuteElement.step = "1";
|
144
|
+
|
145
|
+
// add caption text
|
146
|
+
if (props.caption) {
|
147
|
+
const captionContainer = document.createElement("div");
|
148
|
+
captionContainer.className = "pb_caption_kit_md";
|
149
|
+
captionContainer.innerHTML = props?.caption;
|
150
|
+
fp.timeContainer.prepend(captionContainer);
|
151
|
+
}
|
152
|
+
|
153
|
+
// add meridiem toggle
|
154
|
+
generateMeridiemToggle();
|
155
|
+
updateMeridiemToggle(true);
|
156
|
+
|
157
|
+
// add timezone text
|
158
|
+
if (props.showTimezone) {
|
159
|
+
const subcaptionContainer = document.createElement("div");
|
160
|
+
subcaptionContainer.className = "pb_caption_kit_xs";
|
161
|
+
subcaptionContainer.innerHTML = getTimezoneText(fp._initialDate);
|
162
|
+
fp.timeContainer.append(subcaptionContainer);
|
163
|
+
}
|
164
|
+
|
165
|
+
fp.loadedPlugins.push("timeSelectPlugin");
|
166
|
+
},
|
167
|
+
};
|
168
|
+
};
|
169
|
+
}
|
170
|
+
|
171
|
+
export default timeSelectPlugin;
|
data/app/pb_kits/playbook/pb_date_range_stacked/{_date_range_stacked.jsx → _date_range_stacked.tsx}
RENAMED
@@ -1,9 +1,7 @@
|
|
1
|
-
/* @flow */
|
2
|
-
|
3
1
|
import React from 'react'
|
4
2
|
import classnames from 'classnames'
|
5
3
|
|
6
|
-
import { buildCss } from '../utilities/props'
|
4
|
+
import { buildCss, buildDataProps } from '../utilities/props'
|
7
5
|
import { globalProps } from '../utilities/globalProps'
|
8
6
|
|
9
7
|
import Body from '../pb_body/_body'
|
@@ -13,7 +11,7 @@ import DateYearStacked from '../pb_date_year_stacked/_date_year_stacked'
|
|
13
11
|
import Icon from '../pb_icon/_icon'
|
14
12
|
|
15
13
|
type DateRangeStackedProps = {
|
16
|
-
className?: string |
|
14
|
+
className?: string | string[],
|
17
15
|
data?: string,
|
18
16
|
dark?: boolean,
|
19
17
|
endDate: string,
|
@@ -22,15 +20,16 @@ type DateRangeStackedProps = {
|
|
22
20
|
}
|
23
21
|
|
24
22
|
const DateRangeStacked = (props: DateRangeStackedProps) => {
|
25
|
-
const { className, dark = false, endDate, startDate } = props
|
23
|
+
const { className, dark = false, endDate, startDate, data={} } = props
|
26
24
|
const css = classnames(
|
27
25
|
buildCss('pb_date_range_stacked'),
|
28
26
|
globalProps(props),
|
29
27
|
className
|
30
28
|
)
|
29
|
+
const dataProps = buildDataProps(data)
|
31
30
|
|
32
31
|
return (
|
33
|
-
<div className={css}>
|
32
|
+
<div {...dataProps} className={css}>
|
34
33
|
<Flex vertical="center">
|
35
34
|
<FlexItem>
|
36
35
|
<DateYearStacked
|
@@ -0,0 +1,127 @@
|
|
1
|
+
import React from 'react'
|
2
|
+
import { render, screen } from '../utilities/test-utils'
|
3
|
+
|
4
|
+
import DateRangeStacked from './_date_range_stacked'
|
5
|
+
|
6
|
+
jest.useFakeTimers()
|
7
|
+
const testId = "daterangestacked-kit";
|
8
|
+
|
9
|
+
describe("DateRangeStacked Kit", () => {
|
10
|
+
test("renders DateRangeStacked className", () => {
|
11
|
+
render(
|
12
|
+
<DateRangeStacked
|
13
|
+
data={{ testid: testId }}
|
14
|
+
endDate={new Date('20 Mar 2020')}
|
15
|
+
startDate={new Date('18 Jun 2019')}
|
16
|
+
/>
|
17
|
+
)
|
18
|
+
|
19
|
+
const kit = screen.getByTestId(testId)
|
20
|
+
expect(kit).toHaveClass("pb_date_range_stacked")
|
21
|
+
})
|
22
|
+
|
23
|
+
test("renders DateRangeStacked start date container", () => {
|
24
|
+
render(
|
25
|
+
<DateRangeStacked
|
26
|
+
data={{ testid: testId }}
|
27
|
+
endDate={new Date('20 Mar 2020')}
|
28
|
+
startDate={new Date('18 Jun 2019')}
|
29
|
+
/>
|
30
|
+
)
|
31
|
+
|
32
|
+
const kit = screen.getByTestId(testId)
|
33
|
+
const text = kit.querySelector('.pb_date_year_stacked_right')
|
34
|
+
expect(text).toBeInTheDocument()
|
35
|
+
})
|
36
|
+
|
37
|
+
test("renders DateRangeStacked end date container", () => {
|
38
|
+
render(
|
39
|
+
<DateRangeStacked
|
40
|
+
data={{ testid: testId }}
|
41
|
+
endDate={new Date('20 Mar 2020')}
|
42
|
+
startDate={new Date('18 Jun 2019')}
|
43
|
+
/>
|
44
|
+
)
|
45
|
+
|
46
|
+
const kit = screen.getByTestId(testId)
|
47
|
+
const text = kit.querySelector('.pb_date_year_stacked_left')
|
48
|
+
expect(text).toBeInTheDocument()
|
49
|
+
})
|
50
|
+
|
51
|
+
test("renders arrow icon", () => {
|
52
|
+
render(
|
53
|
+
<DateRangeStacked
|
54
|
+
data={{ testid: testId }}
|
55
|
+
endDate={new Date('20 Mar 2020')}
|
56
|
+
startDate={new Date('18 Jun 2019')}
|
57
|
+
/>
|
58
|
+
)
|
59
|
+
|
60
|
+
const kit = screen.getByTestId(testId)
|
61
|
+
const arrowicon = kit.querySelector('.pb_icon_kit.fa-fw.pb_date_range_stacked_arrow')
|
62
|
+
expect(arrowicon).toBeInTheDocument()
|
63
|
+
})
|
64
|
+
|
65
|
+
|
66
|
+
test("renders DateRangeInline start date", () => {
|
67
|
+
render(
|
68
|
+
<DateRangeStacked
|
69
|
+
data={{ testid: testId }}
|
70
|
+
endDate={new Date('20 Mar 2020')}
|
71
|
+
startDate={new Date('18 Jun 2019')}
|
72
|
+
/>
|
73
|
+
|
74
|
+
)
|
75
|
+
|
76
|
+
const kit = screen.getByTestId(testId)
|
77
|
+
const text = kit.querySelector('.pb_date_year_stacked_right>.pb_title_kit_size_4')
|
78
|
+
expect(text.textContent).toEqual("18 JUN")
|
79
|
+
})
|
80
|
+
|
81
|
+
test("renders DateRangeInline start date year", () => {
|
82
|
+
render(
|
83
|
+
<DateRangeStacked
|
84
|
+
data={{ testid: testId }}
|
85
|
+
endDate={new Date('20 Mar 2020')}
|
86
|
+
startDate={new Date('18 Jun 2019')}
|
87
|
+
/>
|
88
|
+
|
89
|
+
)
|
90
|
+
|
91
|
+
const kit = screen.getByTestId(testId)
|
92
|
+
const text = kit.querySelector(".pb_date_year_stacked_right>.pb_body_kit_light")
|
93
|
+
expect(text.textContent).toEqual("2019")
|
94
|
+
})
|
95
|
+
|
96
|
+
test("renders DateRangeInline end date", () => {
|
97
|
+
render(
|
98
|
+
<DateRangeStacked
|
99
|
+
data={{ testid: testId }}
|
100
|
+
endDate={new Date('20 Mar 2020')}
|
101
|
+
startDate={new Date('18 Jun 2019')}
|
102
|
+
/>
|
103
|
+
|
104
|
+
)
|
105
|
+
|
106
|
+
const kit = screen.getByTestId(testId)
|
107
|
+
const text = kit.querySelector('.pb_date_year_stacked_left>.pb_title_kit_size_4')
|
108
|
+
expect(text.textContent).toEqual("20 MAR")
|
109
|
+
})
|
110
|
+
|
111
|
+
test("renders DateRangeInline end date year", () => {
|
112
|
+
render(
|
113
|
+
<DateRangeStacked
|
114
|
+
data={{ testid: testId }}
|
115
|
+
endDate={new Date('20 Mar 2020')}
|
116
|
+
startDate={new Date('18 Jun 2019')}
|
117
|
+
/>
|
118
|
+
|
119
|
+
)
|
120
|
+
|
121
|
+
const kit = screen.getByTestId(testId)
|
122
|
+
const text = kit.querySelector(".pb_date_year_stacked_left>.pb_body_kit_light")
|
123
|
+
expect(text.textContent).toEqual("2020")
|
124
|
+
})
|
125
|
+
|
126
|
+
|
127
|
+
})
|