playbook_ui 12.26.1.pre.alpha.PLAY603datepickerquickpickinputpresetdropdown831 → 12.26.1.pre.alpha.railsmultilevelimprovements835

Sign up to get free protection for your applications and to get access to all the features.
Files changed (57) hide show
  1. checksums.yaml +4 -4
  2. data/app/pb_kits/playbook/pb_card/docs/_card_background.jsx +5 -4
  3. data/app/pb_kits/playbook/pb_date_picker/_date_picker.scss +0 -26
  4. data/app/pb_kits/playbook/pb_date_picker/_date_picker.tsx +95 -102
  5. data/app/pb_kits/playbook/pb_date_picker/date_picker.html.erb +2 -18
  6. data/app/pb_kits/playbook/pb_date_picker/date_picker.rb +4 -15
  7. data/app/pb_kits/playbook/pb_date_picker/date_picker.test.js +1 -84
  8. data/app/pb_kits/playbook/pb_date_picker/date_picker_helper.ts +4 -38
  9. data/app/pb_kits/playbook/pb_date_picker/docs/example.yml +0 -4
  10. data/app/pb_kits/playbook/pb_date_picker/docs/index.js +1 -3
  11. data/app/pb_kits/playbook/pb_date_picker/sass_partials/_calendar_input_icon.scss +2 -3
  12. data/app/pb_kits/playbook/pb_date_year_stacked/date_year_stacked.test.js +6 -3
  13. data/app/pb_kits/playbook/pb_dialog/docs/_dialog_full_height.jsx +8 -4
  14. data/app/pb_kits/playbook/pb_dialog/docs/_dialog_full_height_placement.jsx +8 -4
  15. data/app/pb_kits/playbook/pb_dialog/docs/_dialog_scrollable.jsx +4 -2
  16. data/app/pb_kits/playbook/pb_dialog/docs/_dialog_status.jsx +1 -1
  17. data/app/pb_kits/playbook/pb_filter/filter.test.js +6 -3
  18. data/app/pb_kits/playbook/pb_form_group/form_group.test.js +2 -1
  19. data/app/pb_kits/playbook/pb_gauge/docs/_gauge_complex.jsx +1 -1
  20. data/app/pb_kits/playbook/pb_home_address_street/home_adress_street.test.js +1 -1
  21. data/app/pb_kits/playbook/pb_icon/icon.test.js +9 -9
  22. data/app/pb_kits/playbook/pb_icon_stat_value/icon_stat_value.test.js +8 -8
  23. data/app/pb_kits/playbook/pb_icon_value/icon_value.test.js +5 -5
  24. data/app/pb_kits/playbook/pb_layout/layout.test.js +8 -4
  25. data/app/pb_kits/playbook/pb_multi_level_select/_multi_level_select.tsx +163 -123
  26. data/app/pb_kits/playbook/pb_multi_level_select/docs/_multi_level_select_default.html.erb +14 -6
  27. data/app/pb_kits/playbook/pb_multi_level_select/docs/_multi_level_select_default.jsx +8 -4
  28. data/app/pb_kits/playbook/pb_multi_level_select/docs/_multi_level_select_default.md +1 -1
  29. data/app/pb_kits/playbook/pb_multi_level_select/docs/_multi_level_select_return_all_selected.html.erb +14 -7
  30. data/app/pb_kits/playbook/pb_multi_level_select/docs/_multi_level_select_return_all_selected.jsx +1 -1
  31. data/app/pb_kits/playbook/pb_multi_level_select/docs/_multi_level_select_return_complete_data.html.erb +73 -0
  32. data/app/pb_kits/playbook/pb_multi_level_select/docs/_multi_level_select_return_complete_data.jsx +87 -0
  33. data/app/pb_kits/playbook/pb_multi_level_select/docs/_multi_level_select_with_form.html.erb +72 -0
  34. data/app/pb_kits/playbook/pb_multi_level_select/docs/example.yml +3 -0
  35. data/app/pb_kits/playbook/pb_multi_level_select/docs/index.js +2 -1
  36. data/app/pb_kits/playbook/pb_multi_level_select/multi_level_select.html.erb +7 -3
  37. data/app/pb_kits/playbook/pb_multi_level_select/multi_level_select.rb +6 -0
  38. data/app/pb_kits/playbook/pb_nav/_item.tsx +1 -1
  39. data/app/pb_kits/playbook/pb_nav/_subtle_mixin.scss +1 -1
  40. data/app/pb_kits/playbook/pb_passphrase/docs/_passphrase_common.jsx +2 -1
  41. data/app/pb_kits/playbook/pb_phone_number_input/docs/_phone_number_input_default.jsx +2 -1
  42. data/app/pb_kits/playbook/pb_popover/popover.test.js +6 -6
  43. data/app/pb_kits/playbook/pb_selectable_list/selectable_list.test.js +4 -2
  44. data/dist/playbook-rails.js +7 -279
  45. data/lib/playbook/forms/builder/multi_level_select_field.rb +12 -0
  46. data/lib/playbook/forms/builder.rb +1 -0
  47. data/lib/playbook/version.rb +1 -1
  48. metadata +6 -11
  49. data/app/pb_kits/playbook/pb_date_picker/docs/_date_picker_quick_pick_rails.html.erb +0 -12
  50. data/app/pb_kits/playbook/pb_date_picker/docs/_date_picker_quick_pick_rails.md +0 -3
  51. data/app/pb_kits/playbook/pb_date_picker/docs/_date_picker_quick_pick_range_limit.html.erb +0 -12
  52. data/app/pb_kits/playbook/pb_date_picker/docs/_date_picker_quick_pick_range_limit.jsx +0 -18
  53. data/app/pb_kits/playbook/pb_date_picker/docs/_date_picker_quick_pick_range_limit.md +0 -1
  54. data/app/pb_kits/playbook/pb_date_picker/docs/_date_picker_quick_pick_react.jsx +0 -17
  55. data/app/pb_kits/playbook/pb_date_picker/docs/_date_picker_quick_pick_react.md +0 -1
  56. data/app/pb_kits/playbook/pb_date_picker/plugins/quickPick.tsx +0 -168
  57. 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: 64a2a354bbc83b538372e2d6c2fce8ef6cc717dab74cb0ff5c6e4703fdd39a34
4
- data.tar.gz: e4978419bb744d0f5638c2d172fa9e63dec96d46de9387db50a8286ec615bbe2
3
+ metadata.gz: 4b8393ab43cfea1ee6fca52882ebec02b26a56889dcbe66dde6cb4982fd4ca3b
4
+ data.tar.gz: 394cb5663f1b83ed4e055db0a05beecc702b8a6d3d63dfdc444b0e86f1421db5
5
5
  SHA512:
6
- metadata.gz: b7311804701a200d8c822d1658f8b085973a8eb277d7b4f5180c18c27334a5bb7be3da262e80d8b07db62ea2caa6bc88bc5ee8dcdc237b78c24eac8897cdf6b4
7
- data.tar.gz: b178b398c5b61d199f6fab3589d3b8a4e311ac7ea404c8ff045983691eb6713335164243068db66b55d887e25b4bc45efa83421326f211baa8270789ffd30fde
6
+ metadata.gz: 7d8b5e97bc020258bf1a121dc75354a688d9984104b1c4fbefbe6a3bfe68bc201fc3729dc7360399c25d42d369d8cf37de19712954a949879d714c7437929317
7
+ data.tar.gz: e3388a6075cbb920bc57e006d408db4242586f516d64c9fbb8c7980e0517ede4c8277c82ae3499b2afdee9603f7db3d9bb01ff796acab984f170df4f0cfb0b9a
@@ -57,7 +57,7 @@ const CardBackground = (props) => {
57
57
  background="product_1_background"
58
58
  marginBottom="sm"
59
59
  {...props}
60
- >
60
+ >
61
61
  <Body
62
62
  dark
63
63
  text="Product 1 Background"
@@ -69,11 +69,12 @@ const CardBackground = (props) => {
69
69
  <Card
70
70
  background="product_7_highlight"
71
71
  marginBottom="sm"
72
- {...props} >
72
+ {...props}
73
+ >
73
74
  <Body
74
75
  dark
75
- text="Product 7 Highlight"
76
- />
76
+ text="Product 7 Highlight"
77
+ />
77
78
  </Card>
78
79
 
79
80
 
@@ -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?: string,
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"| "quickpick",
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
- {...ariaProps}
160
- {...dataProps}
161
- className={classes}
162
- id={id}
155
+ {...ariaProps}
156
+ {...dataProps}
157
+ className={classes}
158
+ id={id}
163
159
  >
164
160
  <div
165
- {...inputAriaProps}
166
- {...inputDataProps}
167
- className="input_wrapper"
168
- >
161
+ {...inputAriaProps}
162
+ {...inputDataProps}
163
+ className="input_wrapper">
169
164
 
170
165
  <Caption
171
- className="pb_date_picker_kit_label"
172
- text={hideLabel ? null : label}
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
- {error &&
188
- <Body
189
- status="negative"
190
- text={error}
191
- variant={null}
192
- />
193
- }
194
- </div>
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
- {!hideIcon &&
197
- <div
198
- className={iconWrapperClass()}
199
- id={`cal-icon-${pickerId}`}
200
- >
201
- <Icon
202
- className="cal_icon"
203
- icon="calendar-alt"
204
- />
205
- </div>
206
- }
207
-
208
- {hideIcon && inLine ?
209
- <div>
210
- <div
211
- className={iconWrapperClass()}
212
- id={`${pickerId}-icon-plus`}
213
- >
214
- <Icon
215
- className="date-picker-plus-icon"
216
- icon="plus"
217
- />
218
- </div>
219
- <div
220
- className={iconWrapperClass()}
221
- id={`${pickerId}-angle-down`}
222
- >
223
- <Icon
224
- className="angle_down_icon"
225
- icon="angle-down"
226
- />
227
- </div>
228
- </div>
229
- : null
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
- datePickerHelper(<%= object.date_picker_config %>, "<%= object.scroll_container %>")
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, type: Playbook::Props::Boolean,
51
- default: false,
52
- deprecated: true
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 quickpick none],
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 = (thisRangesEndToday: boolean) => {
96
- const pluginList = []
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(thisRangesEndToday),
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 DatePickerQuickPickReact } from './_date_picker_quick_pick_react'
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
- background-color: rgba($focus_input_light,$opacity_5);
16
+ &:hover {
17
+ cursor: pointer;
19
18
  }
20
19
  }
21
20
  &.dark {