playbook_ui 12.26.1.pre.alpha.PLAY603datepickerquickpickinputpresetdropdown831 → 12.26.1.pre.alpha.PLAY860PhoneNumInputOptions836
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/pb_date_picker/_date_picker.scss +0 -26
- data/app/pb_kits/playbook/pb_date_picker/_date_picker.tsx +95 -102
- data/app/pb_kits/playbook/pb_date_picker/date_picker.html.erb +2 -18
- data/app/pb_kits/playbook/pb_date_picker/date_picker.rb +4 -15
- data/app/pb_kits/playbook/pb_date_picker/date_picker.test.js +1 -84
- data/app/pb_kits/playbook/pb_date_picker/date_picker_helper.ts +4 -38
- data/app/pb_kits/playbook/pb_date_picker/docs/example.yml +0 -4
- data/app/pb_kits/playbook/pb_date_picker/docs/index.js +1 -3
- data/app/pb_kits/playbook/pb_date_picker/sass_partials/_calendar_input_icon.scss +2 -3
- data/app/pb_kits/playbook/pb_nav/_item.tsx +1 -1
- data/app/pb_kits/playbook/pb_nav/_subtle_mixin.scss +1 -1
- data/app/pb_kits/playbook/pb_phone_number_input/_phone_number_input.tsx +132 -45
- data/app/pb_kits/playbook/pb_phone_number_input/docs/_phone_number_input_access_input_element.jsx +26 -0
- data/app/pb_kits/playbook/pb_phone_number_input/docs/_phone_number_input_access_input_element.md +3 -0
- data/app/pb_kits/playbook/pb_phone_number_input/docs/_phone_number_input_clear_field.jsx +30 -0
- data/app/pb_kits/playbook/pb_phone_number_input/docs/_phone_number_input_clear_field.md +3 -0
- data/app/pb_kits/playbook/pb_phone_number_input/docs/_phone_number_input_validation.html.erb +14 -0
- data/app/pb_kits/playbook/pb_phone_number_input/docs/_phone_number_input_validation.jsx +60 -0
- data/app/pb_kits/playbook/pb_phone_number_input/docs/example.yml +5 -1
- data/app/pb_kits/playbook/pb_phone_number_input/docs/index.js +3 -0
- data/app/pb_kits/playbook/pb_phone_number_input/phone_number_input.rb +6 -0
- data/app/pb_kits/playbook/pb_phone_number_input/phone_number_input.test.js +110 -62
- data/app/pb_kits/playbook/utilities/object.ts +3 -0
- data/dist/playbook-rails.js +7 -279
- data/lib/playbook/forms/builder/intl_telephone_field.rb +12 -0
- data/lib/playbook/forms/builder.rb +1 -0
- data/lib/playbook/version.rb +1 -1
- metadata +10 -11
- data/app/pb_kits/playbook/pb_date_picker/docs/_date_picker_quick_pick_rails.html.erb +0 -12
- data/app/pb_kits/playbook/pb_date_picker/docs/_date_picker_quick_pick_rails.md +0 -3
- data/app/pb_kits/playbook/pb_date_picker/docs/_date_picker_quick_pick_range_limit.html.erb +0 -12
- data/app/pb_kits/playbook/pb_date_picker/docs/_date_picker_quick_pick_range_limit.jsx +0 -18
- data/app/pb_kits/playbook/pb_date_picker/docs/_date_picker_quick_pick_range_limit.md +0 -1
- data/app/pb_kits/playbook/pb_date_picker/docs/_date_picker_quick_pick_react.jsx +0 -17
- data/app/pb_kits/playbook/pb_date_picker/docs/_date_picker_quick_pick_react.md +0 -1
- data/app/pb_kits/playbook/pb_date_picker/plugins/quickPick.tsx +0 -168
- data/app/pb_kits/playbook/pb_date_picker/sass_partials/_quick_pick_styles.scss +0 -75
checksums.yaml
CHANGED
@@ -1,7 +1,7 @@
|
|
1
1
|
---
|
2
2
|
SHA256:
|
3
|
-
metadata.gz:
|
4
|
-
data.tar.gz:
|
3
|
+
metadata.gz: d29efc1387739988efa50765a736b0388d28d4127c2e757512a060491b1ed873
|
4
|
+
data.tar.gz: f444ac00a01b6ad4c04d4fb1173989c537757b3460336250fb81c501f763ec85
|
5
5
|
SHA512:
|
6
|
-
metadata.gz:
|
7
|
-
data.tar.gz:
|
6
|
+
metadata.gz: 1bafc61037c2a1464d26592a4d341aae0d9897318be213a6cc5e55e1cb8757e063c0ca7b0e220a10148699e9a72a7c41de0390f78c567a5ec0dd5cbfcba45ec2
|
7
|
+
data.tar.gz: 71899073dbfd3874b8e9ac40787bc21529c961561474482599c71b59deb92a78e93985dd52ebd3b63f7b891877f364b073d4763bb84e9c12e22ceb2fa7e25ed3
|
@@ -6,7 +6,6 @@
|
|
6
6
|
@import "./sass_partials/month_and_year_styles";
|
7
7
|
@import "./sass_partials/time_selection_styles";
|
8
8
|
@import "./sass_partials/input_styles";
|
9
|
-
@import "./sass_partials/quick_pick_styles";
|
10
9
|
|
11
10
|
[class^=pb_date_picker_kit] {
|
12
11
|
.input_wrapper {
|
@@ -27,32 +26,7 @@
|
|
27
26
|
@include transition_default;
|
28
27
|
border-color: $primary;
|
29
28
|
}
|
30
|
-
.add-on-card {
|
31
|
-
border-color: $primary;
|
32
|
-
}
|
33
|
-
}
|
34
|
-
|
35
|
-
@media (hover: hover) {
|
36
|
-
&:hover {
|
37
|
-
.add-on-card {
|
38
|
-
cursor: pointer;
|
39
|
-
background-color: rgba($focus_input_light,$opacity_5);
|
40
|
-
}
|
41
|
-
}
|
42
|
-
}
|
43
|
-
.text_input_wrapper_add_on .add-on-icon {
|
44
|
-
color: $text_lt_light
|
45
29
|
}
|
46
|
-
|
47
|
-
.text_input_wrapper_add_on .add-on-right .text_input{
|
48
|
-
cursor: pointer;
|
49
|
-
}
|
50
|
-
|
51
|
-
}
|
52
|
-
|
53
|
-
|
54
|
-
.pb_popover_reference_wrapper {
|
55
|
-
display: unset !important
|
56
30
|
}
|
57
31
|
|
58
32
|
.flatpickr-calendar {
|
@@ -30,7 +30,7 @@ type DatePickerProps = {
|
|
30
30
|
inputAria?: { [key: string]: string },
|
31
31
|
inputData?: { [key: string]: string },
|
32
32
|
inputOnChange?: (e: React.FormEvent<HTMLInputElement>) => void,
|
33
|
-
inputValue?:
|
33
|
+
inputValue?: any,
|
34
34
|
label?: string,
|
35
35
|
maxDate: string,
|
36
36
|
minDate: string,
|
@@ -39,10 +39,9 @@ type DatePickerProps = {
|
|
39
39
|
placeholder?: string,
|
40
40
|
positionElement?: HTMLElement | null,
|
41
41
|
scrollContainer?: string,
|
42
|
-
selectionType?: "month" | "week"
|
42
|
+
selectionType?: "month" | "week",
|
43
43
|
showTimezone?: boolean,
|
44
44
|
staticPosition: boolean,
|
45
|
-
thisRangesEndToday?: boolean,
|
46
45
|
timeFormat?: string,
|
47
46
|
type?: string,
|
48
47
|
yearRange?: number[],
|
@@ -89,7 +88,6 @@ const DatePicker = (props: DatePickerProps): React.ReactElement => {
|
|
89
88
|
selectionType = '',
|
90
89
|
showTimezone = false,
|
91
90
|
staticPosition = true,
|
92
|
-
thisRangesEndToday = false,
|
93
91
|
yearRange = [1900, 2100],
|
94
92
|
} = props
|
95
93
|
|
@@ -98,47 +96,46 @@ const DatePicker = (props: DatePickerProps): React.ReactElement => {
|
|
98
96
|
const inputAriaProps = buildAriaProps(inputAria)
|
99
97
|
const inputDataProps = buildDataProps(inputData)
|
100
98
|
|
101
|
-
useEffect(() => {
|
102
|
-
datePickerHelper({
|
103
|
-
allowInput,
|
104
|
-
defaultDate,
|
105
|
-
disableDate,
|
106
|
-
disableRange,
|
107
|
-
disableWeekdays,
|
108
|
-
enableTime,
|
109
|
-
format,
|
110
|
-
hideIcon,
|
111
|
-
inLine,
|
112
|
-
maxDate,
|
113
|
-
minDate,
|
114
|
-
mode,
|
115
|
-
onChange,
|
116
|
-
onClose,
|
117
|
-
pickerId,
|
118
|
-
plugins,
|
119
|
-
// eslint-disable-next-line @typescript-eslint/ban-ts-comment
|
120
|
-
// @ts-ignore
|
121
|
-
position,
|
122
|
-
positionElement,
|
123
|
-
selectionType,
|
124
|
-
showTimezone,
|
125
|
-
staticPosition,
|
126
|
-
thisRangesEndToday,
|
127
|
-
yearRange,
|
128
|
-
required: false,
|
129
|
-
}, scrollContainer)
|
130
|
-
})
|
131
99
|
const filteredProps = {...props}
|
132
100
|
delete filteredProps?.position
|
133
101
|
|
134
102
|
const classes = classnames(
|
135
103
|
buildCss('pb_date_picker_kit'),
|
136
|
-
// eslint-disable-next-line @typescript-eslint/ban-ts-comment
|
137
104
|
//@ts-ignore
|
138
105
|
globalProps(filteredProps),
|
139
106
|
error ? 'error' : null,
|
140
107
|
className
|
141
108
|
)
|
109
|
+
|
110
|
+
useEffect(() => {
|
111
|
+
datePickerHelper({
|
112
|
+
allowInput,
|
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
|
+
// @ts-ignore
|
129
|
+
position,
|
130
|
+
positionElement,
|
131
|
+
selectionType,
|
132
|
+
showTimezone,
|
133
|
+
staticPosition,
|
134
|
+
yearRange,
|
135
|
+
required: false,
|
136
|
+
}, scrollContainer)
|
137
|
+
})
|
138
|
+
|
142
139
|
const iconWrapperClass = () => {
|
143
140
|
let base = 'cal_icon_wrapper'
|
144
141
|
if (dark) {
|
@@ -153,84 +150,80 @@ useEffect(() => {
|
|
153
150
|
return base
|
154
151
|
}
|
155
152
|
|
156
|
-
|
157
153
|
return (
|
158
154
|
<div
|
159
|
-
|
160
|
-
|
161
|
-
|
162
|
-
|
155
|
+
{...ariaProps}
|
156
|
+
{...dataProps}
|
157
|
+
className={classes}
|
158
|
+
id={id}
|
163
159
|
>
|
164
160
|
<div
|
165
|
-
|
166
|
-
|
167
|
-
|
168
|
-
>
|
161
|
+
{...inputAriaProps}
|
162
|
+
{...inputDataProps}
|
163
|
+
className="input_wrapper">
|
169
164
|
|
170
165
|
<Caption
|
171
|
-
|
172
|
-
|
166
|
+
className="pb_date_picker_kit_label"
|
167
|
+
text={hideLabel ? null : label}
|
173
168
|
/>
|
174
|
-
<>
|
175
|
-
<div className="date_picker_input_wrapper">
|
176
|
-
<input
|
177
|
-
autoComplete="off"
|
178
|
-
className="date_picker_input"
|
179
|
-
disabled={disableInput}
|
180
|
-
id={pickerId}
|
181
|
-
name={name}
|
182
|
-
onChange={inputOnChange}
|
183
|
-
placeholder={placeholder}
|
184
|
-
value={inputValue}
|
185
|
-
/>
|
186
169
|
|
187
|
-
|
188
|
-
|
189
|
-
|
190
|
-
|
191
|
-
|
192
|
-
|
193
|
-
|
194
|
-
|
170
|
+
<div className="date_picker_input_wrapper">
|
171
|
+
<input
|
172
|
+
autoComplete="off"
|
173
|
+
className="date_picker_input"
|
174
|
+
disabled={disableInput}
|
175
|
+
id={pickerId}
|
176
|
+
name={name}
|
177
|
+
onChange={inputOnChange}
|
178
|
+
placeholder={placeholder}
|
179
|
+
value={inputValue}
|
180
|
+
/>
|
181
|
+
|
182
|
+
{error && <Body
|
183
|
+
status="negative"
|
184
|
+
text={error}
|
185
|
+
variant={null}
|
186
|
+
/>
|
187
|
+
}
|
188
|
+
</div>
|
195
189
|
|
196
|
-
|
197
|
-
|
198
|
-
|
199
|
-
|
200
|
-
|
201
|
-
|
202
|
-
|
203
|
-
|
204
|
-
|
205
|
-
|
206
|
-
|
207
|
-
|
208
|
-
|
209
|
-
|
210
|
-
|
211
|
-
|
212
|
-
|
213
|
-
|
214
|
-
|
215
|
-
|
216
|
-
|
217
|
-
|
218
|
-
|
219
|
-
|
220
|
-
|
221
|
-
|
222
|
-
|
223
|
-
|
224
|
-
|
225
|
-
|
226
|
-
|
227
|
-
|
228
|
-
|
229
|
-
|
230
|
-
}
|
231
|
-
</>
|
190
|
+
{!hideIcon &&
|
191
|
+
<div
|
192
|
+
className={iconWrapperClass()}
|
193
|
+
id={`cal-icon-${pickerId}`}
|
194
|
+
>
|
195
|
+
<Icon
|
196
|
+
className="cal_icon"
|
197
|
+
icon="calendar-alt"
|
198
|
+
/>
|
199
|
+
</div>
|
200
|
+
}
|
201
|
+
|
202
|
+
{hideIcon && inLine ?
|
203
|
+
<div>
|
204
|
+
<div
|
205
|
+
className={iconWrapperClass()}
|
206
|
+
id={`${pickerId}-icon-plus`}
|
207
|
+
>
|
208
|
+
<Icon
|
209
|
+
className="date-picker-plus-icon"
|
210
|
+
icon="plus"
|
211
|
+
/>
|
212
|
+
</div>
|
213
|
+
<div
|
214
|
+
className={iconWrapperClass()}
|
215
|
+
id={`${pickerId}-angle-down`}
|
216
|
+
>
|
217
|
+
<Icon
|
218
|
+
className="angle_down_icon"
|
219
|
+
icon="angle-down"
|
220
|
+
/>
|
221
|
+
</div>
|
222
|
+
</div>
|
223
|
+
: null}
|
232
224
|
</div>
|
233
225
|
</div>
|
234
226
|
)
|
235
227
|
}
|
228
|
+
|
236
229
|
export default DatePicker
|
@@ -21,12 +21,6 @@
|
|
21
21
|
required: object.required,
|
22
22
|
}) %>
|
23
23
|
<% end %>
|
24
|
-
|
25
|
-
<% if object.selection_type == "quickpick" %>
|
26
|
-
<input type="hidden" id="<%= "#{object.start_date_id}" %>" name="<%= "#{object.start_date_name}" %>">
|
27
|
-
<input type="hidden" id="<%= "#{object.end_date_id}" %>" name="<%= "#{object.end_date_name}" %>">
|
28
|
-
<% end %>
|
29
|
-
|
30
24
|
<% if !object.hide_icon %>
|
31
25
|
<div
|
32
26
|
class="<%= object.icon_wrapper_class %>"
|
@@ -67,17 +61,7 @@
|
|
67
61
|
|
68
62
|
<%= javascript_tag do %>
|
69
63
|
window.addEventListener("DOMContentLoaded", () => {
|
70
|
-
|
71
|
-
|
72
|
-
if (<%= object.selection_type == "quickpick" %>) {
|
73
|
-
document.getElementById("<%= object.picker_id %>").addEventListener("change", ({ target }) => {
|
74
|
-
const startDate = document.getElementById("<%= object.start_date_id %>")
|
75
|
-
const endDate = document.getElementById("<%= object.end_date_id %>")
|
76
|
-
const splittedValue = target.value.split(" → ")
|
77
|
-
startDate.value = splittedValue[0]
|
78
|
-
endDate.value = splittedValue[1] ? splittedValue[1] : splittedValue[0]
|
79
|
-
})
|
80
|
-
}
|
64
|
+
datePickerHelper(<%= object.date_picker_config %>, "<%= object.scroll_container %>")
|
81
65
|
})
|
82
66
|
<% end %>
|
83
|
-
<% end %>
|
67
|
+
<% end %>
|
@@ -19,10 +19,6 @@ module Playbook
|
|
19
19
|
default: []
|
20
20
|
prop :enable_time, type: Playbook::Props::Boolean,
|
21
21
|
default: false
|
22
|
-
prop :end_date_id, type: Playbook::Props::String,
|
23
|
-
default: "end_date_id"
|
24
|
-
prop :end_date_name, type: Playbook::Props::String,
|
25
|
-
default: "end_date_name"
|
26
22
|
prop :error, type: Playbook::Props::String
|
27
23
|
prop :format, type: Playbook::Props::String,
|
28
24
|
default: "m/d/Y"
|
@@ -47,26 +43,20 @@ module Playbook
|
|
47
43
|
required: true
|
48
44
|
prop :placeholder, type: Playbook::Props::String,
|
49
45
|
default: "Select Date"
|
50
|
-
prop :plugins,
|
51
|
-
|
52
|
-
|
46
|
+
prop :plugins, type: Playbook::Props::Boolean,
|
47
|
+
default: false,
|
48
|
+
deprecated: true
|
53
49
|
prop :position, type: Playbook::Props::String,
|
54
50
|
default: "auto"
|
55
51
|
prop :position_element, type: Playbook::Props::String
|
56
52
|
prop :scroll_container, type: Playbook::Props::String
|
57
53
|
prop :selection_type, type: Playbook::Props::Enum,
|
58
|
-
values: %w[week month
|
54
|
+
values: %w[week month none],
|
59
55
|
default: "none"
|
60
56
|
prop :show_timezone, type: Playbook::Props::Boolean,
|
61
57
|
default: false
|
62
|
-
prop :start_date_id, type: Playbook::Props::String,
|
63
|
-
default: "start_date_id"
|
64
|
-
prop :start_date_name, type: Playbook::Props::String,
|
65
|
-
default: "start_date_name"
|
66
58
|
prop :static_position, type: Playbook::Props::Boolean,
|
67
59
|
default: true
|
68
|
-
prop :this_ranges_end_today, type: Playbook::Props::Boolean,
|
69
|
-
default: false
|
70
60
|
prop :required, type: Playbook::Props::Boolean,
|
71
61
|
default: false
|
72
62
|
prop :year_range, type: Playbook::Props::Array,
|
@@ -98,7 +88,6 @@ module Playbook
|
|
98
88
|
selectionType: selection_type,
|
99
89
|
showTimezone: show_timezone,
|
100
90
|
staticPosition: static_position,
|
101
|
-
thisRangesEndToday: this_ranges_end_today,
|
102
91
|
yearRange: year_range,
|
103
92
|
}.to_json.html_safe
|
104
93
|
end
|
@@ -1,6 +1,5 @@
|
|
1
1
|
/* eslint-disable no-console */
|
2
2
|
import React from 'react'
|
3
|
-
import moment from 'moment'
|
4
3
|
import { fireEvent, render, screen, waitFor, within } from '../utilities/test-utils'
|
5
4
|
|
6
5
|
import DatePicker from './_date_picker'
|
@@ -11,6 +10,7 @@ import { getTimezoneText } from './plugins/timeSelect'
|
|
11
10
|
jest.setSystemTime(new Date('01/01/2020'));
|
12
11
|
const DEFAULT_DATE = new Date()
|
13
12
|
|
13
|
+
|
14
14
|
describe('DatePicker Kit', () => {
|
15
15
|
beforeEach(() => {
|
16
16
|
jest.spyOn(console, 'error').mockImplementation(() => { });
|
@@ -158,87 +158,4 @@ describe('DatePicker Kit', () => {
|
|
158
158
|
expect(input).toHaveValue('01/01/2020 at 12:00 PM')
|
159
159
|
})
|
160
160
|
})
|
161
|
-
test('shows DatePicker QuickPick dropdown and adds correct date to input', async () => {
|
162
|
-
const testId = 'datepicker-quick-pick'
|
163
|
-
render(
|
164
|
-
<DatePicker
|
165
|
-
allowInput
|
166
|
-
data={{ testid: testId }}
|
167
|
-
mode="range"
|
168
|
-
pickerId="date-picker-quick-pick"
|
169
|
-
placeholder="mm/dd/yyyy → mm/dd/yyyy"
|
170
|
-
selectionType="quickpick"
|
171
|
-
/>
|
172
|
-
)
|
173
|
-
|
174
|
-
const kit = screen.getByTestId(testId)
|
175
|
-
const input = within(kit).getByPlaceholderText('mm/dd/yyyy → mm/dd/yyyy')
|
176
|
-
|
177
|
-
fireEvent(
|
178
|
-
input,
|
179
|
-
new MouseEvent('click', {
|
180
|
-
bubbles: true,
|
181
|
-
cancelable: true,
|
182
|
-
}),
|
183
|
-
)
|
184
|
-
const today = within(kit).getByText('Today')
|
185
|
-
const thisYear = within(kit).getByText('This year')
|
186
|
-
await waitFor(() => {
|
187
|
-
expect(today).toBeInTheDocument()
|
188
|
-
expect(thisYear).toBeInTheDocument()
|
189
|
-
})
|
190
|
-
|
191
|
-
fireEvent(
|
192
|
-
thisYear,
|
193
|
-
new MouseEvent('click', {
|
194
|
-
bubbles: true,
|
195
|
-
cancelable: true,
|
196
|
-
}),
|
197
|
-
)
|
198
|
-
|
199
|
-
await waitFor(() => {
|
200
|
-
expect(input).toHaveValue(moment().startOf('year').format('MM/DD/YYYY') + " → " + moment().endOf('year').format('MM/DD/YYYY'))
|
201
|
-
})
|
202
|
-
|
203
|
-
})
|
204
|
-
test('shows DatePicker QuickPick ranges ending today', async () => {
|
205
|
-
const testId = 'datepicker-quick-pick-ends-today'
|
206
|
-
render(
|
207
|
-
<DatePicker
|
208
|
-
allowInput
|
209
|
-
data={{ testid: testId }}
|
210
|
-
mode="range"
|
211
|
-
pickerId="date-picker-quick-pick"
|
212
|
-
placeholder="mm/dd/yyyy → mm/dd/yyyy"
|
213
|
-
selectionType="quickpick"
|
214
|
-
thisRangesEndToday
|
215
|
-
/>
|
216
|
-
)
|
217
|
-
|
218
|
-
const kit = screen.getByTestId(testId)
|
219
|
-
const input = within(kit).getByPlaceholderText('mm/dd/yyyy → mm/dd/yyyy')
|
220
|
-
|
221
|
-
fireEvent(
|
222
|
-
input,
|
223
|
-
new MouseEvent('click', {
|
224
|
-
bubbles: true,
|
225
|
-
cancelable: true,
|
226
|
-
}),
|
227
|
-
)
|
228
|
-
|
229
|
-
const thisYear = within(kit).getByText('This year')
|
230
|
-
|
231
|
-
fireEvent(
|
232
|
-
thisYear,
|
233
|
-
new MouseEvent('click', {
|
234
|
-
bubbles: true,
|
235
|
-
cancelable: true,
|
236
|
-
}),
|
237
|
-
)
|
238
|
-
|
239
|
-
await waitFor(() => {
|
240
|
-
expect(input).toHaveValue(moment().startOf('year').format('MM/DD/YYYY') + " → " + moment().format('MM/DD/YYYY'))
|
241
|
-
})
|
242
|
-
|
243
|
-
})
|
244
161
|
})
|
@@ -3,7 +3,6 @@ import { BaseOptions } from 'flatpickr/dist/types/options'
|
|
3
3
|
import monthSelectPlugin from 'flatpickr/dist/plugins/monthSelect'
|
4
4
|
import weekSelect from "flatpickr/dist/plugins/weekSelect/weekSelect"
|
5
5
|
import timeSelectPlugin from './plugins/timeSelect'
|
6
|
-
import quickPickPlugin from './plugins/quickPick'
|
7
6
|
|
8
7
|
const getPositionElement = (element: string | Element) => {
|
9
8
|
return (typeof element === 'string') ? document.querySelectorAll(element)[0] : element
|
@@ -20,11 +19,10 @@ type DatePickerConfig = {
|
|
20
19
|
hideIcon?: boolean;
|
21
20
|
inLine?: boolean,
|
22
21
|
onChange: (dateStr: string, selectedDates: Date[]) => void,
|
23
|
-
selectionType?: "month" | "week" | "quickpick" | "",
|
24
22
|
onClose: (dateStr: Date[] | string, selectedDates: Date[] | string) => void,
|
23
|
+
selectionType?: "month" | "week" | "",
|
25
24
|
showTimezone?: boolean,
|
26
25
|
staticPosition: boolean,
|
27
|
-
thisRangesEndToday?: boolean,
|
28
26
|
timeCaption?: string,
|
29
27
|
timeFormat?: string,
|
30
28
|
yearRange: number[]
|
@@ -53,7 +51,6 @@ const datePickerHelper = (config: DatePickerConfig, scrollContainer: string | HT
|
|
53
51
|
selectionType,
|
54
52
|
showTimezone,
|
55
53
|
staticPosition = true,
|
56
|
-
thisRangesEndToday = false,
|
57
54
|
timeCaption = 'Select Time',
|
58
55
|
timeFormat = 'at h:i K',
|
59
56
|
yearRange,
|
@@ -92,24 +89,19 @@ const datePickerHelper = (config: DatePickerConfig, scrollContainer: string | HT
|
|
92
89
|
}
|
93
90
|
}
|
94
91
|
|
95
|
-
const setPlugins = (
|
96
|
-
|
92
|
+
const setPlugins = () => {
|
93
|
+
let pluginList = []
|
97
94
|
|
98
95
|
// month and week selection
|
99
96
|
if (selectionType === "month" || plugins.length > 0) {
|
100
97
|
pluginList.push(monthSelectPlugin({ shorthand: true, dateFormat: 'F Y', altFormat: 'F Y' }))
|
101
98
|
} else if ( selectionType === "week") {
|
102
99
|
pluginList.push(weekSelect())
|
103
|
-
|
104
|
-
} else if (selectionType === "quickpick") {
|
105
|
-
//------- QUICKPICK VARIANT PLUGIN -------------//
|
106
|
-
pluginList.push(quickPickPlugin(thisRangesEndToday))
|
107
100
|
}
|
108
101
|
|
109
102
|
// time selection
|
110
103
|
if (enableTime) pluginList.push(timeSelectPlugin({ caption: timeCaption, showTimezone: showTimezone}))
|
111
104
|
|
112
|
-
|
113
105
|
return pluginList
|
114
106
|
}
|
115
107
|
|
@@ -152,9 +144,6 @@ const datePickerHelper = (config: DatePickerConfig, scrollContainer: string | HT
|
|
152
144
|
},
|
153
145
|
] : disabledParser(),
|
154
146
|
enableTime,
|
155
|
-
locale: {
|
156
|
-
rangeSeparator: ' → '
|
157
|
-
},
|
158
147
|
maxDate,
|
159
148
|
minDate,
|
160
149
|
mode,
|
@@ -175,40 +164,17 @@ const datePickerHelper = (config: DatePickerConfig, scrollContainer: string | HT
|
|
175
164
|
onYearChange: [() => {
|
176
165
|
yearChangeHook()
|
177
166
|
}],
|
178
|
-
plugins: setPlugins(
|
167
|
+
plugins: setPlugins(),
|
179
168
|
position,
|
180
169
|
positionElement: getPositionElement(positionElement),
|
181
170
|
prevArrow: '<i class="far fa-angle-left"></i>',
|
182
171
|
static: staticPosition,
|
183
172
|
})
|
184
173
|
|
185
|
-
|
186
174
|
// ===========================================================
|
187
175
|
// Additional JS Functionality |
|
188
176
|
// ===========================================================
|
189
177
|
|
190
|
-
// opens flatpickr instance when calander icon is clicked so we can have a hover state on icon
|
191
|
-
// window.addEventListener("DOMContentLoaded", (event) => {
|
192
|
-
// event.preventDefault();
|
193
|
-
// function attachIconClickHandler() {
|
194
|
-
// const variantArr = document.querySelectorAll(`#cal-icon-${pickerId}`)
|
195
|
-
// if (!variantArr) {
|
196
|
-
// setTimeout(attachIconClickHandler, 100);
|
197
|
-
// return;
|
198
|
-
// }
|
199
|
-
|
200
|
-
// const instance = document.querySelector<HTMLElement & { [x: string]: any }>(`#${pickerId}`)._flatpickr
|
201
|
-
// variantArr.forEach((icon) => {
|
202
|
-
// icon.addEventListener("click", function(event) {
|
203
|
-
// event.preventDefault();
|
204
|
-
// instance.open()
|
205
|
-
// });
|
206
|
-
// })
|
207
|
-
// }
|
208
|
-
|
209
|
-
// attachIconClickHandler();
|
210
|
-
// });
|
211
|
-
|
212
178
|
// Assign dynamically sourced flatpickr instance to variable
|
213
179
|
const picker = document.querySelector<HTMLElement & { [x: string]: any }>(`#${pickerId}`)._flatpickr
|
214
180
|
picker.innerContainer.parentElement.id = `cal-${pickerId}`
|
@@ -8,8 +8,6 @@ examples:
|
|
8
8
|
- date_picker_input: Input Field
|
9
9
|
- date_picker_label: Label
|
10
10
|
- date_picker_range: Range
|
11
|
-
- date_picker_quick_pick_rails: Range (Quick Pick)
|
12
|
-
- date_picker_quick_pick_range_limit: Range (Quick Pick w/ “This” Range limit)
|
13
11
|
- date_picker_format: Format
|
14
12
|
- date_picker_disabled: Disabled Dates
|
15
13
|
- date_picker_min_max: Min Max
|
@@ -35,8 +33,6 @@ examples:
|
|
35
33
|
- date_picker_on_change: onChange
|
36
34
|
- date_picker_on_close: onClose
|
37
35
|
- date_picker_range: Range
|
38
|
-
- date_picker_quick_pick_react: Range (Quick Pick)
|
39
|
-
- date_picker_quick_pick_range_limit: Range (Quick Pick w/ “This” Range limit)
|
40
36
|
- date_picker_format: Format
|
41
37
|
- date_picker_disabled: Disabled Dates
|
42
38
|
- date_picker_min_max: Min Max
|
@@ -19,6 +19,4 @@ export { default as DatePickerWeek } from './_date_picker_week.jsx'
|
|
19
19
|
export { default as DatePickerPositions } from './_date_picker_positions.jsx'
|
20
20
|
export { default as DatePickerPositionsElement } from './_date_picker_positions_element.jsx'
|
21
21
|
export { default as DatePickerAllowInput } from './_date_picker_allow_input'
|
22
|
-
export { default as
|
23
|
-
export { default as DatePickerQuickPickRangeLimit } from './_date_picker_quick_pick_range_limit'
|
24
|
-
export { default as DatePickerOnClose } from './_date_picker_on_close.jsx'
|
22
|
+
export { default as DatePickerOnClose } from './_date_picker_on_close.jsx'
|
@@ -1,4 +1,3 @@
|
|
1
|
-
@import "../../tokens/colors";
|
2
1
|
// Calendar Icon Styles
|
3
2
|
.cal_icon_wrapper {
|
4
3
|
pointer-events: none;
|
@@ -14,8 +13,8 @@
|
|
14
13
|
padding-left: $space_sm - 1;
|
15
14
|
color: $text_lt_light;
|
16
15
|
@media (hover: hover) {
|
17
|
-
&:hover{
|
18
|
-
|
16
|
+
&:hover {
|
17
|
+
cursor: pointer;
|
19
18
|
}
|
20
19
|
}
|
21
20
|
&.dark {
|