playbook_ui 12.14.0.pre.alpha.PLAY603datepickerquickpickinputpresetdropdown456 → 12.14.0.pre.alpha.lightboxcurrentphotoprop460

Sign up to get free protection for your applications and to get access to all the features.
Files changed (24) hide show
  1. checksums.yaml +4 -4
  2. data/app/pb_kits/playbook/pb_date_picker/_date_picker.scss +0 -26
  3. data/app/pb_kits/playbook/pb_date_picker/_date_picker.tsx +96 -99
  4. data/app/pb_kits/playbook/pb_date_picker/date_picker.html.erb +1 -1
  5. data/app/pb_kits/playbook/pb_date_picker/date_picker.rb +1 -60
  6. data/app/pb_kits/playbook/pb_date_picker/date_picker_helper.ts +2 -12
  7. data/app/pb_kits/playbook/pb_date_picker/docs/_date_picker_range.jsx +0 -1
  8. data/app/pb_kits/playbook/pb_date_picker/docs/example.yml +0 -2
  9. data/app/pb_kits/playbook/pb_date_picker/docs/index.js +1 -2
  10. data/app/pb_kits/playbook/pb_lightbox/_lightbox.tsx +6 -1
  11. data/app/pb_kits/playbook/pb_lightbox/docs/_lightbox_current_photo.jsx +115 -0
  12. data/app/pb_kits/playbook/pb_lightbox/docs/_lightbox_current_photo.md +1 -0
  13. data/app/pb_kits/playbook/pb_lightbox/docs/example.yml +1 -0
  14. data/app/pb_kits/playbook/pb_lightbox/docs/index.js +1 -0
  15. data/app/pb_kits/playbook/pb_lightbox/lightbox.test.jsx +2 -2
  16. data/app/pb_kits/playbook/pb_nav/_item.tsx +5 -5
  17. data/app/pb_kits/playbook/pb_nav/_nav.tsx +2 -2
  18. data/app/pb_kits/playbook/pb_nav/_subtle_mixin.scss +1 -1
  19. data/lib/playbook/version.rb +1 -1
  20. metadata +4 -6
  21. data/app/pb_kits/playbook/pb_date_picker/docs/_date_picker_quick_pick.html.erb +0 -8
  22. data/app/pb_kits/playbook/pb_date_picker/docs/_date_picker_quick_pick.jsx +0 -18
  23. data/app/pb_kits/playbook/pb_date_picker/plugins/quickPick.ts +0 -166
  24. data/app/pb_kits/playbook/pb_date_picker/sass_partials/_quick_pick_styles.scss +0 -56
checksums.yaml CHANGED
@@ -1,7 +1,7 @@
1
1
  ---
2
2
  SHA256:
3
- metadata.gz: d134719af99c9b743c91b79eaf9df31ec4f190b0ee63eef43ca0371f45285bae
4
- data.tar.gz: 9548d090839568767077f07961bc410807d7f658c0b9c26bc732192f39f98740
3
+ metadata.gz: ea7957ed8d699800c355f334304b484be3773ec1a0c5c21699f9bccf9b3c0a50
4
+ data.tar.gz: 694efd1b41b1917430963c58e8cffb427bde2351a49a3293bd81c121be47344a
5
5
  SHA512:
6
- metadata.gz: fe57e92aa08c99eba690fe145d67f01f7bdc07bea84a3697445a8231c80a3d1ce10196f4dc9239d147eefa54064334d3f065772b62414218e28d8c0b9befcc76
7
- data.tar.gz: b61b2412844e71772d46587d98803aa254e43e100466345873958cbfe093faa37a7242be2a8b5cd0202a5e1716bd88cb63d8647f63d302d99aafe05f12bdf878
6
+ metadata.gz: e562d349fbb3dda65376d35efc1cef28bf8f1fdcc7e1028c48ee9ec4ff3943963f8286f81d347cdaf545a5d28fb9d7be03bd78324f0e44a1920dd89ff2731597
7
+ data.tar.gz: b8ad8ac157fdbc56d039f4033742cc9707876f15275ab88c5a1a50f7c5b50539916312590a2f1e016b3b84871b16f4a29e577a448cb8733ccab5833eb2661ded
@@ -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 {
@@ -1,4 +1,4 @@
1
- import React, { useEffect} from 'react'
1
+ import React, { useEffect } from 'react'
2
2
  import classnames from 'classnames'
3
3
 
4
4
  import { buildAriaProps, buildCss, buildDataProps } from '../utilities/props'
@@ -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,7 +39,7 @@ 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
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
- })
128
99
  const filteredProps = {...props}
129
100
  delete filteredProps?.position
130
101
 
131
102
  const classes = classnames(
132
103
  buildCss('pb_date_picker_kit'),
133
- // eslint-disable-next-line @typescript-eslint/ban-ts-comment
134
104
  //@ts-ignore
135
105
  globalProps(filteredProps),
136
106
  error ? 'error' : null,
137
107
  className
138
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
+
139
139
  const iconWrapperClass = () => {
140
140
  let base = 'cal_icon_wrapper'
141
141
  if (dark) {
@@ -152,81 +152,78 @@ useEffect(() => {
152
152
 
153
153
  return (
154
154
  <div
155
- {...ariaProps}
156
- {...dataProps}
157
- className={classes}
158
- id={id}
155
+ {...ariaProps}
156
+ {...dataProps}
157
+ className={classes}
158
+ id={id}
159
159
  >
160
160
  <div
161
- {...inputAriaProps}
162
- {...inputDataProps}
163
- className="input_wrapper"
164
- >
161
+ {...inputAriaProps}
162
+ {...inputDataProps}
163
+ className="input_wrapper">
165
164
 
166
165
  <Caption
167
- className="pb_date_picker_kit_label"
168
- text={hideLabel ? null : label}
166
+ className="pb_date_picker_kit_label"
167
+ text={hideLabel ? null : label}
169
168
  />
170
- <>
171
- <div className="date_picker_input_wrapper">
172
- <input
173
- autoComplete="off"
174
- className="date_picker_input"
175
- disabled={disableInput}
176
- id={pickerId}
177
- name={name}
178
- onChange={inputOnChange}
179
- placeholder={placeholder}
180
- value={inputValue}
181
- />
182
169
 
183
- {error &&
184
- <Body
185
- status="negative"
186
- text={error}
187
- variant={null}
188
- />
189
- }
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"
220
+ />
190
221
  </div>
191
-
192
- {!hideIcon &&
193
- <div
194
- className={iconWrapperClass()}
195
- id={`cal-icon-${pickerId}`}
196
- >
197
- <Icon
198
- className="cal_icon"
199
- icon="calendar-alt"
200
- />
201
- </div>
202
- }
203
-
204
- {hideIcon && inLine ?
205
- <div>
206
- <div
207
- className={iconWrapperClass()}
208
- id={`${pickerId}-icon-plus`}
209
- >
210
- <Icon
211
- className="date-picker-plus-icon"
212
- icon="plus"
213
- />
214
- </div>
215
- <div
216
- className={iconWrapperClass()}
217
- id={`${pickerId}-angle-down`}
218
- >
219
- <Icon
220
- className="angle_down_icon"
221
- icon="angle-down"
222
- />
223
- </div>
224
- </div>
225
- : null
226
- }
227
- </>
222
+ </div>
223
+ : null}
228
224
  </div>
229
225
  </div>
230
226
  )
231
227
  }
228
+
232
229
  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 quickpick none],
54
+ values: %w[week month none],
55
55
  default: "none"
56
56
  prop :show_timezone, type: Playbook::Props::Boolean,
57
57
  default: false
@@ -103,65 +103,6 @@ module Playbook
103
103
  class_string += error_class
104
104
  class_string
105
105
  end
106
-
107
- def format_date(date)
108
- date.strftime("%m/%d/%Y")
109
- end
110
-
111
- def date_ranges
112
- [
113
- {
114
- label: "Today",
115
- start_date: format_date(::Date.current),
116
- end_date: format_date(::Date.current),
117
- },
118
- {
119
- label: "Yesterday",
120
- start_date: format_date(::Date.current.yesterday),
121
- end_date: format_date(::Date.current.yesterday),
122
- },
123
- {
124
- label: "This Week",
125
- start_date: format_date(::Date.current.beginning_of_week),
126
- end_date: format_date(::Date.current.end_of_week),
127
- },
128
- {
129
- label: "This Month",
130
- start_date: format_date(::Date.current.beginning_of_month),
131
- end_date: format_date(::Date.current),
132
- },
133
- {
134
- label: "This Quarter",
135
- start_date: format_date(::Date.current.beginning_of_quarter),
136
- end_date: format_date(::Date.current),
137
- },
138
- {
139
- label: "This Year",
140
- start_date: format_date(::Date.current.beginning_of_year),
141
- end_date: format_date(::Date.current),
142
- },
143
- {
144
- label: "Last Week",
145
- start_date: format_date(::Date.current.last_week.beginning_of_week),
146
- end_date: format_date(::Date.current.last_week.end_of_week),
147
- },
148
- {
149
- label: "Last Month",
150
- start_date: format_date(::Date.current.last_month.beginning_of_month),
151
- end_date: format_date(::Date.current.last_month.end_of_month),
152
- },
153
- {
154
- label: "Last Quarter",
155
- start_date: format_date(::Date.current.last_quarter.beginning_of_quarter),
156
- end_date: format_date(::Date.current.last_quarter.end_of_quarter),
157
- },
158
- {
159
- label: "Last Year",
160
- start_date: format_date(::Date.current.last_year.beginning_of_year),
161
- end_date: format_date(::Date.current.last_year.end_of_year),
162
- },
163
- ]
164
- end
165
106
  end
166
107
  end
167
108
  end
@@ -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,8 +19,8 @@ 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
26
  timeCaption?: string,
@@ -91,23 +90,18 @@ const datePickerHelper = (config: DatePickerConfig, scrollContainer: string | HT
91
90
  }
92
91
 
93
92
  const setPlugins = () => {
94
- const pluginList = []
93
+ let pluginList = []
95
94
 
96
95
  // month and week selection
97
96
  if (selectionType === "month" || plugins.length > 0) {
98
97
  pluginList.push(monthSelectPlugin({ shorthand: true, dateFormat: 'F Y', altFormat: 'F Y' }))
99
98
  } else if ( selectionType === "week") {
100
99
  pluginList.push(weekSelect())
101
-
102
- } else if (selectionType === "quickpick") {
103
- //------- QUICKPICK VARIANT PLUGIN -------------//
104
- pluginList.push(quickPickPlugin())
105
100
  }
106
101
 
107
102
  // time selection
108
103
  if (enableTime) pluginList.push(timeSelectPlugin({ caption: timeCaption, showTimezone: showTimezone}))
109
104
 
110
-
111
105
  return pluginList
112
106
  }
113
107
 
@@ -150,9 +144,6 @@ const datePickerHelper = (config: DatePickerConfig, scrollContainer: string | HT
150
144
  },
151
145
  ] : disabledParser(),
152
146
  enableTime,
153
- locale: {
154
- rangeSeparator: ' → '
155
- },
156
147
  maxDate,
157
148
  minDate,
158
149
  mode,
@@ -180,7 +171,6 @@ const datePickerHelper = (config: DatePickerConfig, scrollContainer: string | HT
180
171
  static: staticPosition,
181
172
  })
182
173
 
183
-
184
174
  // ===========================================================
185
175
  // Additional JS Functionality |
186
176
  // ===========================================================
@@ -5,7 +5,6 @@ import DatePicker from '../_date_picker'
5
5
  const DatePickerRange = (props) => (
6
6
  <div>
7
7
  <DatePicker
8
- allowInput
9
8
  defaultDate={[new Date(), new Date().fp_incr(7)]}
10
9
  mode="range"
11
10
  pickerId="date-picker-range"
@@ -21,7 +21,6 @@ examples:
21
21
  - date_picker_week: Week
22
22
  - date_picker_time: Time Selection
23
23
  - date_picker_positions: Custom Positions
24
- - date_picker_quick_pick: Quick Pick
25
24
  - date_picker_positions_element: Custom Position (based on element)
26
25
 
27
26
  react:
@@ -46,5 +45,4 @@ examples:
46
45
  - date_picker_week: Week
47
46
  - date_picker_time: Time Selection
48
47
  - date_picker_positions: Custom Positions
49
- - date_picker_quick_pick: Quick Pick
50
48
  - date_picker_positions_element: Custom Position (based on element)
@@ -19,5 +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 DatePickerQuickPick } from './_date_picker_quick_pick'
23
- export { default as DatePickerOnClose } from './_date_picker_on_close.jsx'
22
+ export { default as DatePickerOnClose } from './_date_picker_on_close.jsx'
@@ -12,6 +12,7 @@ type LightboxType = {
12
12
  aria?: {[key: string]: string},
13
13
  children: React.ReactNode[] | React.ReactNode | string,
14
14
  className?: string,
15
+ currentPhoto?: number,
15
16
  data?: {[key: string]: string | number},
16
17
  description?: string | any,
17
18
  id?: string,
@@ -31,6 +32,7 @@ const Lightbox = (props: LightboxType): React.ReactNode => {
31
32
  aria = {},
32
33
  children,
33
34
  className,
35
+ currentPhoto,
34
36
  data = {},
35
37
  description,
36
38
  id = '',
@@ -45,11 +47,14 @@ const Lightbox = (props: LightboxType): React.ReactNode => {
45
47
  } = props
46
48
 
47
49
  const [activePhoto, setActivePhoto] = useState(initialPhoto)
48
-
49
50
  useEffect(() => {
50
51
  onChange(activePhoto)
51
52
  },[activePhoto])
52
53
 
54
+ useEffect(() => {
55
+ setActivePhoto(currentPhoto)
56
+ },[currentPhoto])
57
+
53
58
  const ariaProps = buildAriaProps(aria)
54
59
  const dataProps = buildDataProps(data)
55
60
  const classes = classnames(
@@ -0,0 +1,115 @@
1
+ /* @flow */
2
+ /* eslint-disable jsx-control-statements/jsx-use-if-tag */
3
+ import React, { useState } from 'react'
4
+ import { Flex, Image, Button } from '../../'
5
+ import Lightbox from '../_lightbox.tsx'
6
+
7
+ const LightboxCurrentPhoto = (props) => {
8
+ const photos = [
9
+ 'https://images.unsplash.com/photo-1638727228877-d2a79ab75e68?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=2668&q=80',
10
+ 'https://images.unsplash.com/photo-1526657782461-9fe13402a841?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1984&q=80',
11
+ 'https://images.unsplash.com/photo-1523057530100-383d7fbc77a1?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=2669&q=80',
12
+ 'https://images.unsplash.com/photo-1638727228877-d2a79ab75e68?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=2668&q=80',
13
+ 'https://images.unsplash.com/photo-1526657782461-9fe13402a841?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1984&q=80',
14
+ 'https://images.unsplash.com/photo-1523057530100-383d7fbc77a1?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=2669&q=80',
15
+ 'https://images.unsplash.com/photo-1638727228877-d2a79ab75e68?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=2668&q=80',
16
+ 'https://images.unsplash.com/photo-1526657782461-9fe13402a841?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1984&q=80',
17
+ 'https://images.unsplash.com/photo-1523057530100-383d7fbc77a1?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=2669&q=80',
18
+ 'https://images.unsplash.com/photo-1638727228877-d2a79ab75e68?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=2668&q=80',
19
+ 'https://images.unsplash.com/photo-1526657782461-9fe13402a841?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1984&q=80',
20
+ 'https://images.unsplash.com/photo-1523057530100-383d7fbc77a1?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=2669&q=80',
21
+ 'https://images.unsplash.com/photo-1638727228877-d2a79ab75e68?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=2668&q=80',
22
+ 'https://images.unsplash.com/photo-1526657782461-9fe13402a841?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1984&q=80',
23
+ 'https://images.unsplash.com/photo-1523057530100-383d7fbc77a1?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=2669&q=80',
24
+ 'https://images.unsplash.com/photo-1638727228877-d2a79ab75e68?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=2668&q=80',
25
+ 'https://images.unsplash.com/photo-1526657782461-9fe13402a841?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1984&q=80',
26
+ 'https://images.unsplash.com/photo-1523057530100-383d7fbc77a1?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=2669&q=80',
27
+ 'https://images.unsplash.com/photo-1523057530100-383d7fbc77a1?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=2669&q=80',
28
+ 'https://images.unsplash.com/photo-1638727228877-d2a79ab75e68?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=2668&q=80',
29
+ 'https://images.unsplash.com/photo-1526657782461-9fe13402a841?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1984&q=80',
30
+ 'https://images.unsplash.com/photo-1523057530100-383d7fbc77a1?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=2669&q=80',
31
+ ]
32
+ const [selectedPhoto, setSelectedPhoto] = useState(0)
33
+ const [light, toggleLight] = useState(false)
34
+ //Setting state with the index of the current slide exposed by the onChange prop
35
+ const [active, setActive] = useState(selectedPhoto)
36
+ //Setting state for the current photo to pass to the kit
37
+ const [currentPhoto, setCurrentPhoto] = useState(active)
38
+
39
+ const handleCloseLightbox = () => {
40
+ toggleLight(!light)
41
+ setSelectedPhoto(null)
42
+ }
43
+
44
+ const onPhotoClick = (photo) => {
45
+ toggleLight(!light)
46
+ setSelectedPhoto(photo)
47
+ }
48
+
49
+ const exampleStyles = {
50
+ width: "100%",
51
+ overflow: "auto"
52
+ }
53
+
54
+ return (
55
+ <div>
56
+ {light ? (
57
+ <>
58
+ <div style={{width: '200px', height: '50px', position: 'fixed', top: 0, right: 0, zIndex: 1000000000000000}}>
59
+ <div style={{position: 'absolute',right: '100px'}}>
60
+ <Button
61
+ onClick={()=> setCurrentPhoto(active > 0 ? active - 1 : 0)}
62
+ >
63
+ Back
64
+ </Button>
65
+ </div>
66
+ <div style={{position: 'absolute', right: 0}}>
67
+ <Button
68
+ onClick={() => setCurrentPhoto(active < photos.length - 1 ? active + 1 : photos.length - 1)}
69
+ >
70
+ Next
71
+ </Button>
72
+ </div>
73
+ </div>
74
+ <Lightbox
75
+ currentPhoto={currentPhoto}
76
+ icon="times"
77
+ initialPhoto={selectedPhoto}
78
+ onChange={(index) => setActive(index)}
79
+ onClose={handleCloseLightbox}
80
+ photos={photos}
81
+ {...props}
82
+ />
83
+ </>
84
+ ) : (
85
+ <div
86
+ className="PhotoViewer"
87
+ style={exampleStyles}
88
+ >
89
+ <Flex>
90
+ {photos.map((photo, index) => {
91
+ return (
92
+ <div
93
+ key={index}
94
+ onClick={() => onPhotoClick(index)}
95
+ >
96
+ <Image
97
+ cursor="pointer"
98
+ marginRight="xl"
99
+ rounded
100
+ size="lg"
101
+ url={photo}
102
+ />
103
+
104
+ <div className="overlay" />
105
+ </div>
106
+ )
107
+ })}
108
+ </Flex>
109
+ </div>
110
+ )}
111
+ </div>
112
+ )
113
+ }
114
+
115
+ export default LightboxCurrentPhoto
@@ -0,0 +1 @@
1
+ The `currentPhoto` prop allows the user to pass a number to the lightbox that will set the current slide by index. This can be leveraged if the user wants to change slides using custom buttons. To do this, the user must also make use of the current slide's index that is exposed by the `onChange` prop.
@@ -5,3 +5,4 @@ examples:
5
5
  - lightbox_multiple: Multiple
6
6
  - lightbox_compound_component: Compound Component
7
7
  - lightbox_custom_header: Custom Header
8
+ - lightbox_current_photo: Current Photo
@@ -2,3 +2,4 @@ export { default as LightboxDefault } from './_lightbox_default.jsx'
2
2
  export { default as LightboxMultiple } from './_lightbox_multiple.jsx'
3
3
  export { default as LightboxCompoundComponent } from './_lightbox_compound_component.jsx'
4
4
  export { default as LightboxCustomHeader } from './_lightbox_custom_header'
5
+ export { default as LightboxCurrentPhoto } from './_lightbox_current_photo'
@@ -35,7 +35,7 @@ test('Shows selected images', () => {
35
35
  data={{ testid: testId }}
36
36
  icon="close"
37
37
  id="test1"
38
- initialPhoto={1}
38
+ initialPhoto={0}
39
39
  onClose={() => {}}
40
40
  photos={TEST_PHOTOS}
41
41
  />
@@ -43,7 +43,7 @@ test('Shows selected images', () => {
43
43
  const kit = screen.getByTestId(testId)
44
44
  const slide = kit.getElementsByClassName('Slide')[0]
45
45
  const image = slide.getElementsByTagName('img')[0]
46
- expect(image).toHaveAttribute('src', TEST_PHOTOS[1])
46
+ expect(image).toHaveAttribute('src', TEST_PHOTOS[0])
47
47
 
48
48
  const thumbnails = kit.getElementsByClassName('Thumbnail')
49
49
 
@@ -13,14 +13,14 @@ type NavItemProps = {
13
13
  children?: React.ReactNode[] | React.ReactNode,
14
14
  className?: string,
15
15
  data?: object,
16
- iconLeft?: string,
17
- iconRight?: string,
16
+ iconLeft: string,
17
+ iconRight: string,
18
18
  id?: string,
19
- imageUrl?: string,
20
- link?: string,
19
+ imageUrl: string,
20
+ link: string,
21
21
  onClick?: React.MouseEventHandler<HTMLElement>,
22
22
  target?: '_blank' | '_self' | '_parent' | '_top',
23
- text?: string,
23
+ text: string,
24
24
  }
25
25
 
26
26
  const NavItem = (props: NavItemProps) => {
@@ -17,8 +17,8 @@ type NavProps = {
17
17
  id?: string,
18
18
  onClick?: React.MouseEventHandler<HTMLElement>,
19
19
  orientation?: "vertical" | "horizontal",
20
- link?: string,
21
- title?: string,
20
+ link: string,
21
+ title: string,
22
22
  variant?: "normal" | "subtle",
23
23
  }
24
24
 
@@ -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.14.0"
5
- VERSION = "12.14.0.pre.alpha.PLAY603datepickerquickpickinputpresetdropdown456"
5
+ VERSION = "12.14.0.pre.alpha.lightboxcurrentphotoprop460"
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.14.0.pre.alpha.PLAY603datepickerquickpickinputpresetdropdown456
4
+ version: 12.14.0.pre.alpha.lightboxcurrentphotoprop460
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-04-10 00:00:00.000000000 Z
12
+ date: 2023-04-11 00:00:00.000000000 Z
13
13
  dependencies:
14
14
  - !ruby/object:Gem::Dependency
15
15
  name: actionpack
@@ -745,8 +745,6 @@ 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
750
748
  - app/pb_kits/playbook/pb_date_picker/docs/_date_picker_range.html.erb
751
749
  - app/pb_kits/playbook/pb_date_picker/docs/_date_picker_range.jsx
752
750
  - app/pb_kits/playbook/pb_date_picker/docs/_date_picker_time.html.erb
@@ -761,7 +759,6 @@ files:
761
759
  - app/pb_kits/playbook/pb_date_picker/docs/_description.md
762
760
  - app/pb_kits/playbook/pb_date_picker/docs/example.yml
763
761
  - app/pb_kits/playbook/pb_date_picker/docs/index.js
764
- - app/pb_kits/playbook/pb_date_picker/plugins/quickPick.ts
765
762
  - app/pb_kits/playbook/pb_date_picker/plugins/timeSelect.ts
766
763
  - app/pb_kits/playbook/pb_date_picker/sass_partials/_calendar_input_icon.scss
767
764
  - app/pb_kits/playbook/pb_date_picker/sass_partials/_day_styles.scss
@@ -771,7 +768,6 @@ files:
771
768
  - app/pb_kits/playbook/pb_date_picker/sass_partials/_input_styles.scss
772
769
  - app/pb_kits/playbook/pb_date_picker/sass_partials/_month_and_year_styles.scss
773
770
  - 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
775
771
  - app/pb_kits/playbook/pb_date_picker/sass_partials/_time_selection_styles.scss
776
772
  - app/pb_kits/playbook/pb_date_picker/sass_partials/_week_styles.scss
777
773
  - app/pb_kits/playbook/pb_date_range_inline/_date_range_inline.scss
@@ -1337,6 +1333,8 @@ files:
1337
1333
  - app/pb_kits/playbook/pb_lightbox/docs/_description.md
1338
1334
  - app/pb_kits/playbook/pb_lightbox/docs/_lightbox_compound_component.jsx
1339
1335
  - app/pb_kits/playbook/pb_lightbox/docs/_lightbox_compound_component.md
1336
+ - app/pb_kits/playbook/pb_lightbox/docs/_lightbox_current_photo.jsx
1337
+ - app/pb_kits/playbook/pb_lightbox/docs/_lightbox_current_photo.md
1340
1338
  - app/pb_kits/playbook/pb_lightbox/docs/_lightbox_custom_header.jsx
1341
1339
  - app/pb_kits/playbook/pb_lightbox/docs/_lightbox_custom_header.md
1342
1340
  - app/pb_kits/playbook/pb_lightbox/docs/_lightbox_default.jsx
@@ -1,8 +0,0 @@
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
-
@@ -1,18 +0,0 @@
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
@@ -1,166 +0,0 @@
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
- // variable that holds the ranges available
26
- const ranges = {
27
- 'Today': [new Date(), new Date()],
28
- 'Yesterday': [moment().subtract(1, 'days').toDate(), moment().subtract(1, 'days').toDate()],
29
- 'This week': [moment().startOf('week').toDate(), moment().endOf('week').toDate()],
30
- 'This month': [moment().startOf('month').toDate(), moment().endOf('month').toDate()],
31
- 'This quarter': [moment().startOf('quarter').toDate(), moment().endOf('quarter').toDate()],
32
- 'This year': [moment().startOf('year').toDate(), moment().endOf('year').toDate()],
33
- 'Last week': [
34
- moment().subtract(1, 'week').startOf('week').toDate(),
35
- moment().subtract(1, 'week').endOf('week').toDate()
36
- ],
37
- 'Last month': [
38
- moment().subtract(1, 'month').startOf('month').toDate(),
39
- moment().subtract(1, 'month').endOf('month').toDate()
40
- ],
41
- 'Last quarter': [
42
- moment().subtract(1, 'quarter').startOf('quarter').toDate(),
43
- moment().subtract(1, 'quarter').endOf('quarter').toDate()
44
- ],
45
- 'Last year': [
46
- moment().subtract(1, 'year').startOf('year').toDate(),
47
- moment().subtract(1, 'year').endOf('year').toDate()
48
- ]
49
- }
50
- //creating the ul element for the nav dropdown and giving it classnames
51
- const rangesNav = document.createElement('ul');
52
-
53
- // creating the pluginData object that will hold the properties of this plugin
54
- const pluginData: pluginDataType = {
55
- ranges: ranges,
56
- rangesNav: rangesNav,
57
- rangesButtons: [],
58
- };
59
-
60
- /**
61
- * @param {string} label
62
- * @returns HTML Element
63
- */
64
-
65
- //funciton for creating the range buttons in the nav
66
- const addRangeButton = (label: string) => {
67
-
68
- // create the button element and add class and text
69
- const button = document.createElement('a');
70
- button.className = "nav-item-link";
71
- const itemLabel = document.createElement('span')
72
- itemLabel.className = "nav-item-text"
73
- itemLabel.innerHTML = label;
74
-
75
- // create li elements inside the dropdown
76
- const item = document.createElement('li');
77
- item.className = "nav-item";
78
-
79
- pluginData.rangesButtons[label] = button;
80
-
81
- // append span text to anchor tag
82
- pluginData.rangesButtons[label].appendChild(itemLabel)
83
-
84
- // append those anchor tags to the li items
85
- item.appendChild(pluginData.rangesButtons[label]);
86
-
87
- // append the li item to the ul rangeNav prop
88
- pluginData.rangesNav.appendChild(item);
89
-
90
- // return the ranges buton prop
91
- return pluginData.rangesButtons[label];
92
- };
93
-
94
- const selectActiveRangeButton = (selectedDates: Array<string>) => {
95
- const current = pluginData.rangesNav.querySelector('.active');
96
-
97
- if (current) {
98
- current.classList.remove('active');
99
- }
100
- /** conditional statment to extract start and end dates from selectedDates,
101
- * then loop through ranges prop in pluginData
102
- * and check if chosen dates equal to a date in the ranges prop
103
- * if they are equal, add the active class
104
- */
105
- if (selectedDates.length > 0) {
106
-
107
- const startDate = moment(selectedDates[0]);
108
- const endDate = selectedDates.length > 1 ? moment(selectedDates[1]) : startDate;
109
-
110
- for (const [label, range] of Object.entries(pluginData.ranges)) {
111
- if (startDate.isSame(moment(range[0]), 'day') && endDate.isSame(moment(range[1]), 'day')) {
112
- pluginData.rangesButtons[label].classList.add('active');
113
- break;
114
- }
115
- }
116
- }
117
-
118
- }
119
-
120
-
121
- return {
122
- // onReady is a hook from flatpickr that runs when calender is in a ready state
123
- onReady(selectedDates: Array<string>) {
124
- // loop through the ranges and create an anchor tag for each range and add an event listiner to set the date when user clicks on a date range
125
- for (const [label, range] of Object.entries(pluginData.ranges)) {
126
- addRangeButton(label).addEventListener('click', function () {
127
-
128
- const start = moment(range[0]).toDate();
129
- const end = moment(range[1]).toDate();
130
-
131
- if (!start) {
132
- fp.clear();
133
- }
134
- else {
135
- fp.setDate([start, end], true);
136
- }
137
-
138
- fp.close();
139
- });
140
- }
141
-
142
- // conditional to check if there is a dropdown to add it to the calendar container and git it the classes it needs
143
- if (pluginData.rangesNav.children.length > 0) {
144
-
145
- fp.calendarContainer.prepend(pluginData.rangesNav);
146
- pluginData.rangesNav.classList.add('quick-pick-ul')
147
- fp.calendarContainer.classList.add('quick-pick-drop-down');
148
-
149
- /**
150
- *
151
- * @param {Array} selectedDates
152
- */
153
-
154
- // function to give the active butto the active class
155
- selectActiveRangeButton(selectedDates);
156
- }
157
-
158
- },
159
- onValueUpdate(selectedDates: Array<string>) {
160
- selectActiveRangeButton(selectedDates);
161
- }
162
- };
163
- };
164
- }
165
-
166
- export default quickPickPlugin;
@@ -1,56 +0,0 @@
1
- @import "../../tokens/animation-curves";
2
- @import "../../tokens/colors";
3
- @import "../../tokens/typography";
4
- @import "../../tokens/titles";
5
-
6
- // used to display dropdown on the left of the calender
7
- .quick-pick-drop-down {
8
- width: auto;
9
- display: grid;
10
- }
11
-
12
- .quick-pick-ul {
13
- padding: 0;
14
- margin: 0;
15
- list-style: none;
16
- }
17
-
18
- .nav-item {
19
- list-style: none;
20
- border-radius: 6px;
21
- border-bottom: 0;
22
- margin: 8px 14px;
23
- }
24
-
25
- .nav-item-link {
26
- text-decoration: none;
27
- display: flex;
28
- align-items: center;
29
- border: none;
30
- padding: 8px 14px;
31
- transition-property: color, background-color;
32
- transition-duration: 0.15s;
33
- transition-timing-function: $bezier;
34
- border-radius: 6px;
35
- line-height: 1.4;
36
- color: $charcoal;
37
- font-size: $font_default;
38
- font-weight: $regular;
39
- &.active {
40
- background-color: rgba($primary, 0.03);
41
- color: $primary;
42
- letter-spacing: normal;
43
- }
44
- @media (hover:hover) {
45
- &:hover {
46
- cursor: pointer;
47
- background-color: rgba($primary, 0.03);
48
- color: $primary;
49
- }
50
- }
51
- }
52
-
53
- // Hide the calendar
54
- .quick-pick-drop-down > .flatpickr-months, .quick-pick-drop-down > .flatpickr-innerContainer {
55
- display: none;
56
- }