playbook_ui 12.17.0 → 12.18.0.pre.alpha.PLAY603datepickerquickpickinputpresetdropdown617

Sign up to get free protection for your applications and to get access to all the features.
Files changed (70) hide show
  1. checksums.yaml +4 -4
  2. data/app/pb_kits/playbook/index.js +1 -1
  3. data/app/pb_kits/playbook/pb_avatar_action_button/avatar_action_button.html.erb +1 -2
  4. data/app/pb_kits/playbook/pb_collapsible/_collapsible.tsx +2 -2
  5. data/app/pb_kits/playbook/pb_date_picker/_date_picker.scss +26 -0
  6. data/app/pb_kits/playbook/pb_date_picker/_date_picker.tsx +99 -95
  7. data/app/pb_kits/playbook/pb_date_picker/date_picker.html.erb +1 -1
  8. data/app/pb_kits/playbook/pb_date_picker/date_picker.rb +1 -1
  9. data/app/pb_kits/playbook/pb_date_picker/date_picker.test.js +44 -1
  10. data/app/pb_kits/playbook/pb_date_picker/date_picker_helper.ts +34 -2
  11. data/app/pb_kits/playbook/pb_date_picker/docs/_date_picker_quick_pick.html.erb +8 -0
  12. data/app/pb_kits/playbook/pb_date_picker/docs/_date_picker_quick_pick.jsx +18 -0
  13. data/app/pb_kits/playbook/pb_date_picker/docs/example.yml +2 -0
  14. data/app/pb_kits/playbook/pb_date_picker/docs/index.js +2 -1
  15. data/app/pb_kits/playbook/pb_date_picker/plugins/quickPick.tsx +161 -0
  16. data/app/pb_kits/playbook/pb_date_picker/sass_partials/_calendar_input_icon.scss +4 -3
  17. data/app/pb_kits/playbook/pb_date_picker/sass_partials/_quick_pick_styles.scss +75 -0
  18. data/app/pb_kits/playbook/pb_docs/kit_api.html.erb +48 -36
  19. data/app/pb_kits/playbook/pb_docs/kit_api.rb +97 -9
  20. data/app/pb_kits/playbook/pb_docs/kit_example.html.erb +1 -1
  21. data/app/pb_kits/playbook/pb_docs/kit_example.rb +9 -5
  22. data/app/pb_kits/playbook/pb_lightbox/_lightbox.tsx +3 -0
  23. data/app/pb_kits/playbook/pb_lightbox/docs/_lightbox_compound_component.jsx +5 -1
  24. data/app/pb_kits/playbook/pb_lightbox/docs/_lightbox_current_photo.jsx +1 -1
  25. data/app/pb_kits/playbook/pb_lightbox/docs/_lightbox_custom_header.jsx +5 -1
  26. data/app/pb_kits/playbook/pb_lightbox/docs/_lightbox_default.jsx +5 -1
  27. data/app/pb_kits/playbook/pb_lightbox/docs/_lightbox_default.md +1 -1
  28. data/app/pb_kits/playbook/pb_lightbox/docs/_lightbox_multiple.jsx +5 -1
  29. data/app/pb_kits/playbook/pb_lightbox/lightbox.test.jsx +5 -1
  30. data/app/pb_kits/playbook/pb_nav/_item.tsx +7 -7
  31. data/app/pb_kits/playbook/pb_nav/_nav.tsx +4 -4
  32. data/app/pb_kits/playbook/pb_nav/_subtle_mixin.scss +1 -1
  33. data/app/pb_kits/playbook/pb_rich_text_editor/TipTap/EditorButton.tsx +49 -0
  34. data/app/pb_kits/playbook/pb_rich_text_editor/TipTap/EditorTypes.ts +9 -0
  35. data/app/pb_kits/playbook/pb_rich_text_editor/TipTap/Toolbar.tsx +62 -0
  36. data/app/pb_kits/playbook/pb_rich_text_editor/TipTap/ToolbarDropdown.tsx +139 -0
  37. data/app/pb_kits/playbook/pb_rich_text_editor/TipTap/ToolbarHistory.tsx +45 -0
  38. data/app/pb_kits/playbook/pb_rich_text_editor/TipTap/ToolbarNodes.tsx +59 -0
  39. data/app/pb_kits/playbook/pb_rich_text_editor/_rich_text_editor.scss +1 -1
  40. data/app/pb_kits/playbook/pb_rich_text_editor/_rich_text_editor.tsx +28 -12
  41. data/app/pb_kits/playbook/pb_rich_text_editor/_tiptap_styles.scss +231 -0
  42. data/app/pb_kits/playbook/pb_rich_text_editor/docs/_description.md +1 -0
  43. data/app/pb_kits/playbook/pb_rich_text_editor/docs/_rich_text_editor_advanced_default.jsx +36 -0
  44. data/app/pb_kits/playbook/pb_rich_text_editor/docs/_rich_text_editor_advanced_default.md +4 -0
  45. data/app/pb_kits/playbook/pb_rich_text_editor/docs/example.yml +1 -0
  46. data/app/pb_kits/playbook/pb_rich_text_editor/docs/index.js +1 -0
  47. data/app/pb_kits/playbook/pb_time_range_inline/_time_range_inline.tsx +185 -0
  48. data/app/pb_kits/playbook/pb_time_range_inline/time_range_inline.test.js +85 -0
  49. data/app/pb_kits/playbook/pb_title/_title.tsx +1 -1
  50. data/app/pb_kits/playbook/pb_title_detail/_title_detail.tsx +45 -0
  51. data/app/pb_kits/playbook/pb_title_detail/title_detail.test.js +71 -0
  52. data/app/pb_kits/playbook/pb_toggle/{_toggle.jsx → _toggle.tsx} +20 -22
  53. data/app/pb_kits/playbook/pb_toggle/toggle.test.js +67 -0
  54. data/app/pb_kits/playbook/pb_tooltip/_tooltip.scss +11 -6
  55. data/app/pb_kits/playbook/pb_tooltip/docs/_tooltip_default.html.erb +4 -4
  56. data/app/pb_kits/playbook/pb_tooltip/docs/_tooltip_with_icon_circle.html.erb +1 -2
  57. data/app/pb_kits/playbook/pb_tooltip/docs/example.yml +0 -1
  58. data/app/pb_kits/playbook/pb_user/_user.tsx +1 -1
  59. data/lib/playbook/markdown/helper.rb +50 -71
  60. data/lib/playbook/markdown.rb +0 -1
  61. data/lib/playbook/number_spacing.rb +10 -10
  62. data/lib/playbook/position.rb +10 -10
  63. data/lib/playbook/spacing.rb +10 -10
  64. data/lib/playbook/version.rb +2 -2
  65. data/lib/playbook/z_index.rb +10 -10
  66. metadata +29 -14
  67. data/app/pb_kits/playbook/pb_time_range_inline/_time_range_inline.jsx +0 -172
  68. data/app/pb_kits/playbook/pb_title_detail/_title_detail.jsx +0 -44
  69. data/app/pb_kits/playbook/pb_tooltip/docs/_tooltip_white.html.erb +0 -9
  70. data/lib/playbook/markdown/template_handler.rb +0 -47
checksums.yaml CHANGED
@@ -1,7 +1,7 @@
1
1
  ---
2
2
  SHA256:
3
- metadata.gz: cd6838e0560cc93f906cf9adc9ca3b2ddf760b04eb217a758de88cf4d55f5921
4
- data.tar.gz: 7fe4be39b88ef061b65beb11d35680d3faf0ffe9eea5696f4cffdb0385eff6a5
3
+ metadata.gz: 102bb0a97a693903b5529db165bc9e772618418347aeeda1bf999c0efdc46121
4
+ data.tar.gz: be8f83ba5c73d4d513039e483dd9b0d83eeb30d6b4462da6dcb8542915ee66dc
5
5
  SHA512:
6
- metadata.gz: 50fb6671787a4142632f88b003d143dc5731ca71e06e8c3cbe94ecf6e4650c803466e79365047133bd9eb43049c0f0731b504ee8d013c73ab03f0cca7794dc46
7
- data.tar.gz: 7965856ed4ff7d6c7197f5bdaead0960549c67673c94da1f659b4d1a65cb2c179c0fa8800900c6323675afb823e06a5ab24d1735d58a7d8fadc28b9cc843e4ac
6
+ metadata.gz: fbf7ffb2694dc1c932df32a956002fd388c55aa8ee6fb2fe5e38d3f909b81c4f6b65a06a5cc8fee481437ed5c7af553a43b8b4d2aba38e0a03c7c7cf5b4bdd24
7
+ data.tar.gz: b178df679610fca701110d377a3e03f308d3fdbde8836d163dbac07d4dc2e6afb219b2f0603c0983558a19aee8f80b41156dec7bf749600c96173078dcef8cfb
@@ -127,4 +127,4 @@ export { default as PbTypeahead } from './pb_typeahead'
127
127
  export { default as dialogHelper } from './pb_dialog/dialogHelper'
128
128
 
129
129
  //Theming
130
- export {default as mapTheme} from './pb_map/pbMapTheme'
130
+ export {default as mapTheme} from './pb_map/pbMapTheme'
@@ -7,8 +7,7 @@
7
7
  <%= pb_rails("tooltip", props: {
8
8
  trigger_element_id: object.tooltip_id,
9
9
  tooltip_id: "tooltip-2",
10
- position: 'top',
11
- dark: true,
10
+ position: 'top'
12
11
  }) do %>
13
12
  <%= object.tooltip_text %>
14
13
  <% end %>
@@ -59,8 +59,8 @@ const Collapsible = ({
59
59
  const dataProps = buildDataProps(data)
60
60
  const classes = classnames(
61
61
  buildCss('pb_collapsible_kit'),
62
- className,
63
- globalProps(props, { padding })
62
+ globalProps(props, { padding }),
63
+ className
64
64
  )
65
65
 
66
66
  return (
@@ -6,6 +6,7 @@
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";
9
10
 
10
11
  [class^=pb_date_picker_kit] {
11
12
  .input_wrapper {
@@ -26,7 +27,32 @@
26
27
  @include transition_default;
27
28
  border-color: $primary;
28
29
  }
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
29
45
  }
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
30
56
  }
31
57
 
32
58
  .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?: any,
33
+ inputValue?: string,
34
34
  label?: string,
35
35
  maxDate: string,
36
36
  minDate: string,
@@ -39,7 +39,7 @@ type DatePickerProps = {
39
39
  placeholder?: string,
40
40
  positionElement?: HTMLElement | null,
41
41
  scrollContainer?: string,
42
- selectionType?: "month" | "week",
42
+ selectionType?: "month" | "week"| "quickpick",
43
43
  showTimezone?: boolean,
44
44
  staticPosition: boolean,
45
45
  timeFormat?: string,
@@ -96,46 +96,46 @@ const DatePicker = (props: DatePickerProps): React.ReactElement => {
96
96
  const inputAriaProps = buildAriaProps(inputAria)
97
97
  const inputDataProps = buildDataProps(inputData)
98
98
 
99
+ useEffect(() => {
100
+ datePickerHelper({
101
+ allowInput,
102
+ defaultDate,
103
+ disableDate,
104
+ disableRange,
105
+ disableWeekdays,
106
+ enableTime,
107
+ format,
108
+ hideIcon,
109
+ inLine,
110
+ maxDate,
111
+ minDate,
112
+ mode,
113
+ onChange,
114
+ onClose,
115
+ pickerId,
116
+ plugins,
117
+ // eslint-disable-next-line @typescript-eslint/ban-ts-comment
118
+ // @ts-ignore
119
+ position,
120
+ positionElement,
121
+ selectionType,
122
+ showTimezone,
123
+ staticPosition,
124
+ yearRange,
125
+ required: false,
126
+ }, scrollContainer)
127
+ })
99
128
  const filteredProps = {...props}
100
129
  delete filteredProps?.position
101
130
 
102
131
  const classes = classnames(
103
132
  buildCss('pb_date_picker_kit'),
133
+ // eslint-disable-next-line @typescript-eslint/ban-ts-comment
104
134
  //@ts-ignore
105
135
  globalProps(filteredProps),
106
136
  error ? 'error' : null,
107
137
  className
108
138
  )
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
-
139
139
  const iconWrapperClass = () => {
140
140
  let base = 'cal_icon_wrapper'
141
141
  if (dark) {
@@ -150,80 +150,84 @@ const DatePicker = (props: DatePickerProps): React.ReactElement => {
150
150
  return base
151
151
  }
152
152
 
153
+
153
154
  return (
154
155
  <div
155
- {...ariaProps}
156
- {...dataProps}
157
- className={classes}
158
- id={id}
156
+ {...ariaProps}
157
+ {...dataProps}
158
+ className={classes}
159
+ id={id}
159
160
  >
160
161
  <div
161
- {...inputAriaProps}
162
- {...inputDataProps}
163
- className="input_wrapper">
162
+ {...inputAriaProps}
163
+ {...inputDataProps}
164
+ className="input_wrapper"
165
+ >
164
166
 
165
167
  <Caption
166
- className="pb_date_picker_kit_label"
167
- text={hideLabel ? null : label}
168
+ className="pb_date_picker_kit_label"
169
+ text={hideLabel ? null : label}
168
170
  />
169
-
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>
189
-
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"
171
+ <>
172
+ <div className="date_picker_input_wrapper">
173
+ <input
174
+ autoComplete="off"
175
+ className="date_picker_input"
176
+ disabled={disableInput}
177
+ id={pickerId}
178
+ name={name}
179
+ onChange={inputOnChange}
180
+ placeholder={placeholder}
181
+ value={inputValue}
220
182
  />
183
+
184
+ {error &&
185
+ <Body
186
+ status="negative"
187
+ text={error}
188
+ variant={null}
189
+ />
190
+ }
221
191
  </div>
222
- </div>
223
- : null}
192
+
193
+ {!hideIcon &&
194
+ <div
195
+ className={iconWrapperClass()}
196
+ id={`cal-icon-${pickerId}`}
197
+ >
198
+ <Icon
199
+ className="cal_icon"
200
+ icon="calendar-alt"
201
+ />
202
+ </div>
203
+ }
204
+
205
+ {hideIcon && inLine ?
206
+ <div>
207
+ <div
208
+ className={iconWrapperClass()}
209
+ id={`${pickerId}-icon-plus`}
210
+ >
211
+ <Icon
212
+ className="date-picker-plus-icon"
213
+ icon="plus"
214
+ />
215
+ </div>
216
+ <div
217
+ className={iconWrapperClass()}
218
+ id={`${pickerId}-angle-down`}
219
+ >
220
+ <Icon
221
+ className="angle_down_icon"
222
+ icon="angle-down"
223
+ />
224
+ </div>
225
+ </div>
226
+ : null
227
+ }
228
+ </>
224
229
  </div>
225
230
  </div>
226
231
  )
227
232
  }
228
-
229
233
  export default DatePicker
@@ -64,4 +64,4 @@
64
64
  datePickerHelper(<%= object.date_picker_config %>, "<%= object.scroll_container %>")
65
65
  })
66
66
  <% end %>
67
- <% end %>
67
+ <% end %>
@@ -51,7 +51,7 @@ module Playbook
51
51
  prop :position_element, type: Playbook::Props::String
52
52
  prop :scroll_container, type: Playbook::Props::String
53
53
  prop :selection_type, type: Playbook::Props::Enum,
54
- values: %w[week month none],
54
+ values: %w[week month quickpick none],
55
55
  default: "none"
56
56
  prop :show_timezone, type: Playbook::Props::Boolean,
57
57
  default: false
@@ -1,5 +1,6 @@
1
1
  /* eslint-disable no-console */
2
2
  import React from 'react'
3
+ import moment from 'moment'
3
4
  import { fireEvent, render, screen, waitFor, within } from '../utilities/test-utils'
4
5
 
5
6
  import DatePicker from './_date_picker'
@@ -10,7 +11,6 @@ import { getTimezoneText } from './plugins/timeSelect'
10
11
  jest.setSystemTime(new Date('01/01/2020'));
11
12
  const DEFAULT_DATE = new Date()
12
13
 
13
-
14
14
  describe('DatePicker Kit', () => {
15
15
  beforeEach(() => {
16
16
  jest.spyOn(console, 'error').mockImplementation(() => { });
@@ -158,4 +158,47 @@ 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().format('MM/DD/YYYY'))
201
+ })
202
+
203
+ })
161
204
  })
@@ -3,6 +3,7 @@ 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'
6
7
 
7
8
  const getPositionElement = (element: string | Element) => {
8
9
  return (typeof element === 'string') ? document.querySelectorAll(element)[0] : element
@@ -19,8 +20,8 @@ type DatePickerConfig = {
19
20
  hideIcon?: boolean;
20
21
  inLine?: boolean,
21
22
  onChange: (dateStr: string, selectedDates: Date[]) => void,
23
+ selectionType?: "month" | "week" | "quickpick" | "",
22
24
  onClose: (dateStr: Date[] | string, selectedDates: Date[] | string) => void,
23
- selectionType?: "month" | "week" | "",
24
25
  showTimezone?: boolean,
25
26
  staticPosition: boolean,
26
27
  timeCaption?: string,
@@ -90,18 +91,23 @@ const datePickerHelper = (config: DatePickerConfig, scrollContainer: string | HT
90
91
  }
91
92
 
92
93
  const setPlugins = () => {
93
- let pluginList = []
94
+ const pluginList = []
94
95
 
95
96
  // month and week selection
96
97
  if (selectionType === "month" || plugins.length > 0) {
97
98
  pluginList.push(monthSelectPlugin({ shorthand: true, dateFormat: 'F Y', altFormat: 'F Y' }))
98
99
  } else if ( selectionType === "week") {
99
100
  pluginList.push(weekSelect())
101
+
102
+ } else if (selectionType === "quickpick") {
103
+ //------- QUICKPICK VARIANT PLUGIN -------------//
104
+ pluginList.push(quickPickPlugin())
100
105
  }
101
106
 
102
107
  // time selection
103
108
  if (enableTime) pluginList.push(timeSelectPlugin({ caption: timeCaption, showTimezone: showTimezone}))
104
109
 
110
+
105
111
  return pluginList
106
112
  }
107
113
 
@@ -144,6 +150,9 @@ const datePickerHelper = (config: DatePickerConfig, scrollContainer: string | HT
144
150
  },
145
151
  ] : disabledParser(),
146
152
  enableTime,
153
+ locale: {
154
+ rangeSeparator: ' → '
155
+ },
147
156
  maxDate,
148
157
  minDate,
149
158
  mode,
@@ -171,10 +180,33 @@ const datePickerHelper = (config: DatePickerConfig, scrollContainer: string | HT
171
180
  static: staticPosition,
172
181
  })
173
182
 
183
+
174
184
  // ===========================================================
175
185
  // Additional JS Functionality |
176
186
  // ===========================================================
177
187
 
188
+ // opens flatpickr instance when calander icon is clicked so we can have a hover state on icon
189
+ window.addEventListener("DOMContentLoaded", (event) => {
190
+ event.preventDefault();
191
+ function attachIconClickHandler() {
192
+ const variantArr = document.querySelectorAll(`#cal-icon-${pickerId}`)
193
+ if (!variantArr) {
194
+ setTimeout(attachIconClickHandler, 100);
195
+ return;
196
+ }
197
+
198
+ const instance = document.querySelector<HTMLElement & { [x: string]: any }>(`#${pickerId}`)._flatpickr
199
+ variantArr.forEach((icon) => {
200
+ icon.addEventListener("click", function(event) {
201
+ event.preventDefault();
202
+ instance.open()
203
+ });
204
+ })
205
+ }
206
+
207
+ attachIconClickHandler();
208
+ });
209
+
178
210
  // Assign dynamically sourced flatpickr instance to variable
179
211
  const picker = document.querySelector<HTMLElement & { [x: string]: any }>(`#${pickerId}`)._flatpickr
180
212
  picker.innerContainer.parentElement.id = `cal-${pickerId}`
@@ -0,0 +1,8 @@
1
+ <%= pb_rails("date_picker", props: {
2
+ allow_input: true,
3
+ mode: "range",
4
+ picker_id: "date-picker-quick-pick",
5
+ placeholder: "mm/dd/yyyy → mm/dd/yyyy",
6
+ selection_type: "quickpick"
7
+ }) %>
8
+
@@ -0,0 +1,18 @@
1
+ import React from 'react'
2
+
3
+ import DatePicker from '../_date_picker'
4
+
5
+ const DatePickerQuickPick = (props) => (
6
+ <div>
7
+ <DatePicker
8
+ allowInput
9
+ mode="range"
10
+ pickerId="date-picker-quick-pick"
11
+ placeholder="mm/dd/yyyy → mm/dd/yyyy"
12
+ selectionType="quickpick"
13
+ {...props}
14
+ />
15
+ </div>
16
+ )
17
+
18
+ export default DatePickerQuickPick
@@ -8,6 +8,7 @@ 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: Range (Quick Pick)
11
12
  - date_picker_format: Format
12
13
  - date_picker_disabled: Disabled Dates
13
14
  - date_picker_min_max: Min Max
@@ -33,6 +34,7 @@ examples:
33
34
  - date_picker_on_change: onChange
34
35
  - date_picker_on_close: onClose
35
36
  - date_picker_range: Range
37
+ - date_picker_quick_pick: Range (Quick Pick)
36
38
  - date_picker_format: Format
37
39
  - date_picker_disabled: Disabled Dates
38
40
  - date_picker_min_max: Min Max
@@ -19,4 +19,5 @@ 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 DatePickerOnClose } from './_date_picker_on_close.jsx'
22
+ export { default as DatePickerQuickPick } from './_date_picker_quick_pick'
23
+ export { default as DatePickerOnClose } from './_date_picker_on_close.jsx'