playbook_ui 12.22.0.pre.alpha.PBNTR12checkingemptyfilters686 → 12.22.0.pre.alpha.PLAY603datepickerquickpickinputpresetdropdown696

Sign up to get free protection for your applications and to get access to all the features.
checksums.yaml CHANGED
@@ -1,7 +1,7 @@
1
1
  ---
2
2
  SHA256:
3
- metadata.gz: '050709c25af1935687c3472973acb4fe9e7b3e811a0edcf35fb4f01c3d27193c'
4
- data.tar.gz: dc4f357e487599331949afd8e95e4ce80285c5223c21cb67c5072af31840bd9d
3
+ metadata.gz: cbeb306a3f433c511667f520a2f89147890f10893e29018cc2d6757303d2ee55
4
+ data.tar.gz: 45db21211ea17a52f649883426d334a1b9c97f2da4cd04cbc96666bbbfff350f
5
5
  SHA512:
6
- metadata.gz: a9347203cd3f428e866317f66251b82bce4794a6376e9fe4028000a7c91aefdceb34a0d4856ce2ccae64f3ed783bbbda8ec4a16ea4e798a9d0a3c54e765a254d
7
- data.tar.gz: 8468890749d6669fe3d560741d272de73464c93effe2e7f86301ddd654fbbe7c5601d7b1d3b438363c0bd0278940c8eeea51686b1509bc518c08c9f5930df0cd
6
+ metadata.gz: 0c0d7747525466b3260c3e0b329b88605cc7c9230eba2bef1d9c517300c75f8910000ead8ed539f17d0e22ad62a7f474cf2d3da2ce0a55dc3ffaea82d3e0056f
7
+ data.tar.gz: b12eaf8435d50825ec37bdaa382c7b49e51bdff3187fdb7bb81c829f72413d70cd46694f96b40685aa4025b26608f8797a1acc0d8c6a9432067dc01919e1aec1
@@ -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
@@ -61,7 +61,8 @@
61
61
 
62
62
  <%= javascript_tag do %>
63
63
  window.addEventListener("DOMContentLoaded", () => {
64
- datePickerHelper(<%= object.date_picker_config %>, "<%= object.scroll_container %>")
64
+ datePickerHelper(<%= object.date_picker_config %>, "<%= object.scroll_container %>")
65
65
  })
66
+
66
67
  <% end %>
67
- <% end %>
68
+ <% 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'
@@ -0,0 +1,166 @@
1
+ import moment from 'moment'
2
+
3
+ type FpTypes = {
4
+ setDate: (arg0: any, arg1: boolean) => void,
5
+ config: { [key: string]: string },
6
+ clear: (arg0: boolean, arg1: boolean) => void,
7
+ close: () => void,
8
+ calendarContainer?: {
9
+ classList: { add: (arg0: string) => void };
10
+ prepend: (arg0: HTMLDivElement) => void;
11
+ append: (arg0: HTMLDivElement) => void;
12
+ },
13
+ loadedPlugins: string[],
14
+ };
15
+
16
+ type pluginDataType = {
17
+ ranges: { [key: string]: Date[] },
18
+ rangesNav: HTMLUListElement,
19
+ rangesButtons: [] | any,
20
+ }
21
+
22
+ const quickPickPlugin = () => {
23
+ return function (fp: FpTypes & any): any {
24
+
25
+ let activeLabel = ""
26
+
27
+ // variable that holds the ranges available
28
+ const ranges = {
29
+ 'Today': [new Date(), new Date()],
30
+ 'Yesterday': [moment().subtract(1, 'days').toDate(), moment().subtract(1, 'days').toDate()],
31
+ 'This week': [moment().startOf('week').toDate(), moment().endOf('week').toDate()],
32
+ 'This month': [moment().startOf('month').toDate(), new Date()],
33
+ 'This quarter': [moment().startOf('quarter').toDate(), new Date()],
34
+ 'This year': [moment().startOf('year').toDate(), new Date()],
35
+ 'Last week': [
36
+ moment().subtract(1, 'week').startOf('week').toDate(),
37
+ moment().subtract(1, 'week').endOf('week').toDate()
38
+ ],
39
+ 'Last month': [
40
+ moment().subtract(1, 'month').startOf('month').toDate(),
41
+ moment().subtract(1, 'month').endOf('month').toDate()
42
+ ],
43
+ 'Last quarter': [
44
+ moment().subtract(1, 'quarter').startOf('quarter').toDate(),
45
+ moment().subtract(1, 'quarter').endOf('quarter').toDate()
46
+ ],
47
+ 'Last year': [
48
+ moment().subtract(1, 'year').startOf('year').toDate(),
49
+ moment().subtract(1, 'year').endOf('year').toDate()
50
+ ]
51
+ }
52
+ //creating the ul element for the nav dropdown and giving it classnames
53
+ const rangesNav = document.createElement('ul');
54
+
55
+ // creating the pluginData object that will hold the properties of this plugin
56
+ const pluginData: pluginDataType = {
57
+ ranges: ranges,
58
+ rangesNav: rangesNav,
59
+ rangesButtons: [],
60
+ };
61
+
62
+ /**
63
+ * @param {string} label
64
+ * @returns HTML Element
65
+ */
66
+
67
+ //function for creating the range buttons in the nav
68
+ const addRangeButton = (label: string) => {
69
+
70
+ // creating new elements to mimick selectable card component
71
+ const div2 = document.createElement('div');
72
+ div2.className = "nav-item-link"
73
+ div2.innerHTML = label;
74
+
75
+ pluginData.rangesButtons[label] = div2;
76
+
77
+ // create li elements inside the dropdown
78
+ const item = document.createElement('li');
79
+ item.className = "nav-item";
80
+
81
+ // append those nav items to the li items
82
+ item.appendChild(pluginData.rangesButtons[label]);
83
+
84
+ // append the li item to the ul rangeNav prop
85
+ pluginData.rangesNav.appendChild(item);
86
+
87
+ // return the ranges buton prop
88
+ return pluginData.rangesButtons[label];
89
+ };
90
+
91
+ const selectActiveRangeButton = (selectedDates: Array<string>) => {
92
+ const current = pluginData.rangesNav.querySelector('.active');
93
+
94
+ if (current) {
95
+ current.classList.remove('active');
96
+ }
97
+ /** conditional statment to extract start and end dates from selectedDates,
98
+ * then loop through ranges prop in pluginData
99
+ * and check if chosen dates equal to a date in the ranges prop
100
+ * if they are equal, add the active class
101
+ */
102
+ if (selectedDates.length > 0 && activeLabel) {
103
+ // const selected = pluginData.rangesNav.querySelectorAll(".nav-item-link")
104
+ // selected.forEach(el => {
105
+ // if (el.innerHTML === activeLabel)
106
+ // el.classList.add('active')
107
+ // return
108
+ // })
109
+
110
+ pluginData.rangesButtons[activeLabel].classList.add('active');
111
+ }
112
+ }
113
+
114
+
115
+ return {
116
+ // onReady is a hook from flatpickr that runs when calender is in a ready state
117
+ onReady(selectedDates: Array<string>) {
118
+ // loop through the ranges and create an anchor tag for each range and add an event listener to set the date when user clicks on a date range
119
+ for (const [label, range] of Object.entries(pluginData.ranges)) {
120
+ addRangeButton(label).addEventListener('click', function () {
121
+
122
+ const start = moment(range[0]).toDate();
123
+ const end = moment(range[1]).toDate();
124
+
125
+ if (!start) {
126
+ fp.clear();
127
+ }
128
+ else {
129
+ activeLabel = label
130
+ fp.setDate([start, end], true);
131
+ fp.close();
132
+ }
133
+
134
+ });
135
+ }
136
+ // conditional to check if there is a dropdown to add it to the calendar container and get it the classes it needs
137
+ if (pluginData.rangesNav.children.length > 0) {
138
+
139
+ fp.calendarContainer.prepend(pluginData.rangesNav);
140
+ pluginData.rangesNav.classList.add('quick-pick-ul')
141
+ fp.calendarContainer.classList.add('quick-pick-drop-down');
142
+
143
+ /**
144
+ *
145
+ * @param {Array} selectedDates
146
+ */
147
+ // function to give the active button the active class
148
+ selectActiveRangeButton(selectedDates);
149
+ }
150
+
151
+ },
152
+ onValueUpdate(selectedDates: Array<string>) {
153
+ selectActiveRangeButton(selectedDates);
154
+ },
155
+
156
+ onClose(selectedDates: Array<string>) {
157
+ // set the input value to the selected dates when the dropdown is closed
158
+ if (selectedDates.length < 2 && selectedDates.length > 0) {
159
+ fp.input.placeholder = fp.formatDate(this.selectedDates[0], fp.config.dateFormat);
160
+ }
161
+ }
162
+ };
163
+ };
164
+ }
165
+
166
+ export default quickPickPlugin;
@@ -1,3 +1,4 @@
1
+ @import "../../tokens/colors";
1
2
  // Calendar Icon Styles
2
3
  .cal_icon_wrapper {
3
4
  pointer-events: none;
@@ -13,8 +14,8 @@
13
14
  padding-left: $space_sm - 1;
14
15
  color: $text_lt_light;
15
16
  @media (hover: hover) {
16
- &:hover {
17
- cursor: pointer;
17
+ &:hover{
18
+ background-color: rgba($focus_input_light,$opacity_5);
18
19
  }
19
20
  }
20
21
  &.dark {
@@ -0,0 +1,75 @@
1
+ @import "../../tokens/animation-curves";
2
+ @import "../../tokens/colors";
3
+ @import "../../tokens/typography";
4
+ @import "../../tokens/titles";
5
+ @import "../../tokens/spacing";
6
+
7
+ $pb_card_border_width: 1px;
8
+ $pb_card_border_radius: $border_rad_heavier;
9
+
10
+ // used to display dropdown on the left of the calender
11
+ .quick-pick-drop-down {
12
+ width: auto;
13
+ display: grid;
14
+ }
15
+
16
+ .quick-pick-ul {
17
+ padding: $space_xs 0px;
18
+ margin: 0;
19
+ list-style: none;
20
+ }
21
+
22
+ .nav-item {
23
+ list-style: none;
24
+ border-radius: 6px;
25
+ border-bottom: 0;
26
+ margin: $space_xs $space_sm;
27
+ }
28
+
29
+ .nav-item-link {
30
+ text-decoration: none;
31
+ border-width: $pb_card_border_width;
32
+ border-style: solid;
33
+ border-color: $border_light;
34
+ border-radius: $pb_card_border_radius;
35
+ padding: $space_xs 14px;
36
+ transition-property: color, background-color;
37
+ transition-duration: 0.15s;
38
+ transition-timing-function: $bezier;
39
+ line-height: 1.4;
40
+ color: $charcoal;
41
+ font-size: $font_default;
42
+ font-weight: $regular;
43
+ &.active {
44
+ border-width: 2px;
45
+ border-color: $primary;
46
+ }
47
+ @media (hover:hover) {
48
+ &:hover {
49
+ cursor: pointer;
50
+ box-shadow: $shadow-deep;
51
+ border-color: $slate;
52
+ }
53
+ }
54
+ }
55
+
56
+ // Hide the calendar
57
+ .quick-pick-drop-down > .flatpickr-months, .quick-pick-drop-down > .flatpickr-innerContainer {
58
+ display: none;
59
+ }
60
+
61
+ @media only screen and (max-width: 767px) {
62
+ .quick-pick-ul {
63
+ padding: $space_xs $space_xs;
64
+ display: grid;
65
+ grid-template-columns: 1fr 1fr;
66
+ }
67
+
68
+ .nav-item {
69
+ margin: $space_xxs $space_xs;
70
+ }
71
+
72
+ .nav-item-link {
73
+ padding: $space_xs $space_xxs;
74
+ }
75
+ }
@@ -27,7 +27,7 @@ const CurrentFilters = ({ dark, filters }: CurrentFiltersProps): React.ReactElem
27
27
  color="light"
28
28
  paddingLeft="xs"
29
29
  size={4}
30
- tag="span"
30
+ tag="h4"
31
31
  text="No Filter Selected"
32
32
  />
33
33
  </div>
@@ -9,23 +9,22 @@
9
9
  <div class="maskContainer">
10
10
  <div class="filters">
11
11
  <div class="left_gradient"></div>
12
- <% if object.filters&.none? { |filter| filter[:name].present? } %>
13
- <div>
14
- <%= pb_rails("body", props: {
15
- color: "light",
16
- padding_left: "xs",
17
- size: 4,
18
- tag:"span",
19
- text: "No Filter Selected"
20
- }) %>
21
- </div>
22
- <% end %>
23
- <% object.filters&.each do |filter| %>
24
- <% if filter[:name].present? %>
25
- <div class="filter">
26
- <%= pb_rails("caption", props: { text: filter[:name]}) %>
27
- <%= pb_rails("title", props: { size: 4, tag:"h4", text: filter[:value]}) %>
12
+ <% object.filters.each do |filter| %>
13
+ <% if filter[:name] == "" %>
14
+ <div>
15
+ <%= pb_rails("body", props: {
16
+ color: "light",
17
+ padding_left: "xs",
18
+ size: 4,
19
+ tag:"h4",
20
+ text: "No Filter Selected"
21
+ }) %>
28
22
  </div>
23
+ <% else %>
24
+ <div class="filter">
25
+ <%= pb_rails("caption", props: { text: filter[:name]}) %>
26
+ <%= pb_rails("title", props: { size: 4, tag:"h4", text: filter[:value]}) %>
27
+ </div>
29
28
  <% end %>
30
29
  <% end %>
31
30
  <div class="right_gradient"></div>
@@ -87,7 +87,7 @@ const NavItem = (props: NavItemProps) => {
87
87
  <span className="pb_nav_list_item_text">
88
88
  {text || children}
89
89
  </span>
90
-
90
+
91
91
  {iconRight &&
92
92
  <div
93
93
  className="pb_nav_list_item_icon_section"
@@ -44,7 +44,7 @@
44
44
  &[class*=_active] [class*=_link] {
45
45
  @include pb_title_4;
46
46
  color: $primary;
47
- letter-spacing: normal;
47
+ letter-spacing: normal;
48
48
  }
49
49
  }
50
50
  }
@@ -2,5 +2,5 @@
2
2
 
3
3
  module Playbook
4
4
  PREVIOUS_VERSION = "12.22.0"
5
- VERSION = "12.22.0.pre.alpha.PBNTR12checkingemptyfilters686"
5
+ VERSION = "12.22.0.pre.alpha.PLAY603datepickerquickpickinputpresetdropdown696"
6
6
  end
metadata CHANGED
@@ -1,7 +1,7 @@
1
1
  --- !ruby/object:Gem::Specification
2
2
  name: playbook_ui
3
3
  version: !ruby/object:Gem::Version
4
- version: 12.22.0.pre.alpha.PBNTR12checkingemptyfilters686
4
+ version: 12.22.0.pre.alpha.PLAY603datepickerquickpickinputpresetdropdown696
5
5
  platform: ruby
6
6
  authors:
7
7
  - Power UX
@@ -9,7 +9,7 @@ authors:
9
9
  autorequire:
10
10
  bindir: bin
11
11
  cert_chain: []
12
- date: 2023-05-19 00:00:00.000000000 Z
12
+ date: 2023-05-23 00:00:00.000000000 Z
13
13
  dependencies:
14
14
  - !ruby/object:Gem::Dependency
15
15
  name: actionpack
@@ -745,6 +745,8 @@ files:
745
745
  - app/pb_kits/playbook/pb_date_picker/docs/_date_picker_positions.md
746
746
  - app/pb_kits/playbook/pb_date_picker/docs/_date_picker_positions_element.html.erb
747
747
  - app/pb_kits/playbook/pb_date_picker/docs/_date_picker_positions_element.jsx
748
+ - app/pb_kits/playbook/pb_date_picker/docs/_date_picker_quick_pick.html.erb
749
+ - app/pb_kits/playbook/pb_date_picker/docs/_date_picker_quick_pick.jsx
748
750
  - app/pb_kits/playbook/pb_date_picker/docs/_date_picker_range.html.erb
749
751
  - app/pb_kits/playbook/pb_date_picker/docs/_date_picker_range.jsx
750
752
  - app/pb_kits/playbook/pb_date_picker/docs/_date_picker_time.html.erb
@@ -759,6 +761,7 @@ files:
759
761
  - app/pb_kits/playbook/pb_date_picker/docs/_description.md
760
762
  - app/pb_kits/playbook/pb_date_picker/docs/example.yml
761
763
  - app/pb_kits/playbook/pb_date_picker/docs/index.js
764
+ - app/pb_kits/playbook/pb_date_picker/plugins/quickPick.tsx
762
765
  - app/pb_kits/playbook/pb_date_picker/plugins/timeSelect.ts
763
766
  - app/pb_kits/playbook/pb_date_picker/sass_partials/_calendar_input_icon.scss
764
767
  - app/pb_kits/playbook/pb_date_picker/sass_partials/_day_styles.scss
@@ -768,6 +771,7 @@ files:
768
771
  - app/pb_kits/playbook/pb_date_picker/sass_partials/_input_styles.scss
769
772
  - app/pb_kits/playbook/pb_date_picker/sass_partials/_month_and_year_styles.scss
770
773
  - app/pb_kits/playbook/pb_date_picker/sass_partials/_overrides.scss
774
+ - app/pb_kits/playbook/pb_date_picker/sass_partials/_quick_pick_styles.scss
771
775
  - app/pb_kits/playbook/pb_date_picker/sass_partials/_time_selection_styles.scss
772
776
  - app/pb_kits/playbook/pb_date_picker/sass_partials/_week_styles.scss
773
777
  - app/pb_kits/playbook/pb_date_range_inline/_date_range_inline.scss