playbook_ui 11.4.0.pre.alpha.rubytheme2 → 11.5.0.pre.alpha.pre.rubocop

Sign up to get free protection for your applications and to get access to all the features.
Files changed (50) hide show
  1. checksums.yaml +4 -4
  2. data/app/pb_kits/playbook/pb_button/button.test.js +6 -8
  3. data/app/pb_kits/playbook/pb_date_picker/_date_picker.jsx +13 -1
  4. data/app/pb_kits/playbook/pb_date_picker/_date_picker.scss +24 -19
  5. data/app/pb_kits/playbook/pb_date_picker/date_picker.html.erb +1 -1
  6. data/app/pb_kits/playbook/pb_date_picker/date_picker.rb +8 -0
  7. data/app/pb_kits/playbook/pb_date_picker/date_picker_helper.js +25 -3
  8. data/app/pb_kits/playbook/pb_date_picker/docs/_date_picker_positions.html.erb +44 -0
  9. data/app/pb_kits/playbook/pb_date_picker/docs/_date_picker_positions.jsx +60 -0
  10. data/app/pb_kits/playbook/pb_date_picker/docs/_date_picker_positions.md +9 -0
  11. data/app/pb_kits/playbook/pb_date_picker/docs/_date_picker_positions_element.html.erb +33 -0
  12. data/app/pb_kits/playbook/pb_date_picker/docs/_date_picker_positions_element.jsx +67 -0
  13. data/app/pb_kits/playbook/pb_date_picker/docs/example.yml +4 -0
  14. data/app/pb_kits/playbook/pb_date_picker/docs/index.js +2 -0
  15. data/app/pb_kits/playbook/pb_date_picker/sass_partials/_overrides.scss +4 -4
  16. data/app/pb_kits/playbook/pb_date_range_inline/_date_range_inline.tsx +142 -0
  17. data/app/pb_kits/playbook/pb_date_range_inline/date_range_inline.test.js +116 -0
  18. data/app/pb_kits/playbook/pb_date_range_inline/docs/_date_range_inline_default.jsx +1 -1
  19. data/app/pb_kits/playbook/pb_date_year_stacked/{_date_year_stacked.jsx → _date_year_stacked.tsx} +6 -6
  20. data/app/pb_kits/playbook/pb_date_year_stacked/date_year_stacked.test.js +67 -0
  21. data/app/pb_kits/playbook/pb_file_upload/{_file_upload.jsx → _file_upload.tsx} +6 -10
  22. data/app/pb_kits/playbook/pb_form_group/{_form_group.jsx → _form_group.tsx} +1 -4
  23. data/app/pb_kits/playbook/pb_form_group/form_group.test.js +17 -0
  24. data/app/pb_kits/playbook/pb_layout/{_layout.jsx → _layout.tsx} +13 -19
  25. data/app/pb_kits/playbook/pb_layout/layout.test.js +98 -0
  26. data/app/pb_kits/playbook/pb_lightbox/lightbox.test.jsx +23 -15
  27. data/app/pb_kits/playbook/pb_timestamp/_timestamp.jsx +5 -2
  28. data/app/pb_kits/playbook/pb_timestamp/docs/_timestamp_elapsed.html.erb +9 -0
  29. data/app/pb_kits/playbook/pb_timestamp/docs/_timestamp_elapsed.jsx +10 -0
  30. data/app/pb_kits/playbook/pb_timestamp/timestamp.rb +4 -1
  31. data/app/pb_kits/playbook/pb_timestamp/timestamp.test.js +164 -0
  32. data/app/pb_kits/playbook/pb_tooltip/_tooltip.tsx +0 -4
  33. data/app/pb_kits/playbook/pb_tooltip/tooltip.test.jsx +11 -8
  34. data/app/pb_kits/playbook/utilities/_flexbox.scss +11 -11
  35. data/app/pb_kits/playbook/utilities/{_align_content.scss → flexbox_global_props/_align_content.scss} +0 -0
  36. data/app/pb_kits/playbook/utilities/{_align_items.scss → flexbox_global_props/_align_items.scss} +0 -0
  37. data/app/pb_kits/playbook/utilities/{_align_self.scss → flexbox_global_props/_align_self.scss} +0 -0
  38. data/app/pb_kits/playbook/utilities/{_flex.scss → flexbox_global_props/_flex.scss} +0 -0
  39. data/app/pb_kits/playbook/utilities/{_flex_direction.scss → flexbox_global_props/_flex_direction.scss} +0 -0
  40. data/app/pb_kits/playbook/utilities/{_flex_grow.scss → flexbox_global_props/_flex_grow.scss} +0 -0
  41. data/app/pb_kits/playbook/utilities/{_flex_shrink.scss → flexbox_global_props/_flex_shrink.scss} +0 -0
  42. data/app/pb_kits/playbook/utilities/{_flex_wrap.scss → flexbox_global_props/_flex_wrap.scss} +0 -0
  43. data/app/pb_kits/playbook/utilities/{_justify_content.scss → flexbox_global_props/_justify_content.scss} +0 -0
  44. data/app/pb_kits/playbook/utilities/{_justify_self.scss → flexbox_global_props/_justify_self.scss} +0 -0
  45. data/app/pb_kits/playbook/utilities/{_order.scss → flexbox_global_props/_order.scss} +0 -0
  46. data/app/pb_kits/playbook/utilities/props.ts +1 -1
  47. data/app/pb_kits/playbook/utilities/test-utils.js +2 -3
  48. data/lib/playbook/version.rb +2 -2
  49. metadata +29 -19
  50. data/app/pb_kits/playbook/pb_date_range_inline/_date_range_inline.jsx +0 -155
checksums.yaml CHANGED
@@ -1,7 +1,7 @@
1
1
  ---
2
2
  SHA256:
3
- metadata.gz: 4588ffa583d51e7d40fc8b940c73f9f4c7974b6b41a48f54710731d0384ac8b5
4
- data.tar.gz: c7e3117147c0781ea722b0bdf21ec6aab13913c541b3f321bcb34f536ef97f9c
3
+ metadata.gz: b473c5e8dd9d01f5b4e75db5793f628b8d55f9c18ae639cebf8ee32e9d3b2121
4
+ data.tar.gz: f6d6ce71ebb98cddfa83dbae696c74daebe4a2d649b1346a2f6b27de36eb90e6
5
5
  SHA512:
6
- metadata.gz: a83acea1e3f805eb475bec6c969a56e601685bb070b7c573c45754cab2e479d4d1af981c6f5b583ffc92c5aeef64d79bf3f6d8cde071122464195d2981d9c144
7
- data.tar.gz: 0c7d567043af8af75fbf70757e72f49322c3ac1b05cb3a4505bb03679c505261f2a46df2504e593119ae5609b3831827774dfb2bac9c09e43ef4659bf8d86d66
6
+ metadata.gz: 6b7db376eaa03ebc0141d1f639f206e6950230836ddf01097f33c97f2aa725aea662070ee9c27599741c4ebf7faf14a8d1a06aaefa6b7263eebbc2b584e4df6e
7
+ data.tar.gz: e2bd227f75e56cec7a26049e106663e6cb18ff68fd14cc5157eb5da36554d09417a433f3ca25e56f132730ac41e2d5104dc530a28e6f2d8f42807428b71d7fa9
@@ -11,14 +11,12 @@ const htmlType = 'submit',
11
11
 
12
12
  test('passes type, text, and value props to button', () => {
13
13
  render(
14
- <>
15
- <Button
16
- data={{ testid: 'primary-test' }}
17
- htmlType={htmlType}
18
- text={text}
19
- value={value}
20
- />
21
- </>
14
+ <Button
15
+ data={{ testid: 'primary-test' }}
16
+ htmlType={htmlType}
17
+ text={text}
18
+ value={value}
19
+ />
22
20
  )
23
21
 
24
22
  const kit = screen.getByTestId('primary-test')
@@ -42,12 +42,17 @@ type DatePickerProps = {
42
42
  pickerId?: String,
43
43
  placeholder?: String,
44
44
  plugins: Boolean,
45
+ position: String,
46
+ positionElement?: HTMLElement | null,
47
+ scrollContainer?: String,
45
48
  selectionType?: "month" | "week",
46
49
  showTimezone?: Boolean,
50
+ staticPosition: Boolean,
47
51
  timeFormat?: String,
48
52
  type?: String,
49
53
  yearRange?: Array,
50
54
  }
55
+
51
56
  const DatePicker = (props: DatePickerProps) => {
52
57
  if (props.plugins) deprecatedProps('Date Picker', ['plugins'])
53
58
 
@@ -82,8 +87,12 @@ const DatePicker = (props: DatePickerProps) => {
82
87
  pickerId,
83
88
  placeholder = 'Select Date',
84
89
  plugins = false,
90
+ position,
91
+ positionElement,
92
+ scrollContainer,
85
93
  selectionType = '',
86
94
  showTimezone = false,
95
+ staticPosition = true,
87
96
  yearRange = [ 1900, 2100 ],
88
97
  } = props
89
98
 
@@ -113,10 +122,13 @@ const DatePicker = (props: DatePickerProps) => {
113
122
  onChange,
114
123
  pickerId,
115
124
  plugins,
125
+ position,
126
+ positionElement,
116
127
  selectionType,
117
128
  showTimezone,
129
+ staticPosition,
118
130
  yearRange,
119
- })
131
+ }, scrollContainer)
120
132
  })
121
133
 
122
134
  const iconWrapperClass = () => {
@@ -12,34 +12,39 @@
12
12
  .input_wrapper {
13
13
  margin-bottom: $space_sm;
14
14
  position: relative;
15
- @import "./sass_partials/calendar_input_icon";
16
- @import "./sass_partials/day_styles";
17
- @import "./sass_partials/header_styles";
18
- @import "./sass_partials/overrides";
19
15
 
20
16
  .flatpickr-wrapper {
21
17
  display: block;
22
- .text_input.flatpickr-input {
23
- text-overflow: ellipsis;
24
- padding-right: $space_xl + 10 !important;
25
- }
26
- // Calendar Shadow and Border
27
- .flatpickr-calendar {
28
- box-shadow: $shadow_deeper;
29
- border: 1px solid $border_light;
30
- }
31
- // Hide Caret
32
- .flatpickr-calendar:before,
33
- .flatpickr-calendar:after {
34
- content: none;
35
- }
36
18
  }
19
+
20
+ @import "./sass_partials/calendar_input_icon";
37
21
  }
38
22
 
39
- &:focus,:focus-within{
23
+ &:focus, :focus-within {
40
24
  div.cal_icon_wrapper, input.text_input{
41
25
  @include transition_default;
42
26
  border-color: $primary;
43
27
  }
44
28
  }
45
29
  }
30
+
31
+ .flatpickr-calendar {
32
+ @import "./sass_partials/day_styles";
33
+ @import "./sass_partials/header_styles";
34
+ @import "./sass_partials/overrides";
35
+
36
+ .text_input.flatpickr-input {
37
+ text-overflow: ellipsis;
38
+ padding-right: $space_xl + 10 !important;
39
+ }
40
+ // Calendar Shadow and Border
41
+ .flatpickr-calendar {
42
+ box-shadow: $shadow_deeper;
43
+ border: 1px solid $border_light;
44
+ }
45
+ // Hide Caret
46
+ &:before,
47
+ &:after {
48
+ content: none;
49
+ }
50
+ }
@@ -61,7 +61,7 @@
61
61
 
62
62
  <%= javascript_tag do %>
63
63
  window.addEventListener("DOMContentLoaded", () => {
64
- datePickerHelper(<%= object.date_picker_config %>)
64
+ datePickerHelper(<%= object.date_picker_config %>, "<%= object.scroll_container %>")
65
65
  })
66
66
  <% end %>
67
67
  <% end %>
@@ -46,11 +46,16 @@ module Playbook
46
46
  prop :plugins, type: Playbook::Props::Boolean,
47
47
  default: false,
48
48
  deprecated: true
49
+ prop :position, type: Playbook::Props::String
50
+ prop :position_element, type: Playbook::Props::String
51
+ prop :scroll_container, type: Playbook::Props::String
49
52
  prop :selection_type, type: Playbook::Props::Enum,
50
53
  values: %w[week month none],
51
54
  default: "none"
52
55
  prop :show_timezone, type: Playbook::Props::Boolean,
53
56
  default: false
57
+ prop :static_position, type: Playbook::Props::Boolean,
58
+ default: true
54
59
  prop :required, type: Playbook::Props::Boolean,
55
60
  default: false
56
61
  prop :year_range, type: Playbook::Props::Array,
@@ -76,9 +81,12 @@ module Playbook
76
81
  mode: mode,
77
82
  pickerId: picker_id,
78
83
  plugins: plugins,
84
+ position: position,
85
+ positionElement: position_element,
79
86
  required: required,
80
87
  selectionType: selection_type,
81
88
  showTimezone: show_timezone,
89
+ staticPosition: static_position,
82
90
  yearRange: year_range,
83
91
  }.to_json.html_safe
84
92
  end
@@ -3,7 +3,11 @@ import monthSelectPlugin from 'flatpickr/dist/plugins/monthSelect'
3
3
  import weekSelect from "flatpickr/dist/plugins/weekSelect/weekSelect"
4
4
  import timeSelectPlugin from './plugins/timeSelect'
5
5
 
6
- const datePickerHelper = (config) => {
6
+ const getPositionElement = (element) => {
7
+ return (typeof element === 'string') ? document.querySelectorAll(element)[0] : element
8
+ }
9
+
10
+ const datePickerHelper = (config, scrollContainer) => {
7
11
  const {
8
12
  allowInput,
9
13
  defaultDate,
@@ -18,9 +22,12 @@ const datePickerHelper = (config) => {
18
22
  onChange = () => {},
19
23
  pickerId,
20
24
  plugins,
25
+ position = "auto",
26
+ positionElement,
21
27
  required,
22
28
  selectionType,
23
29
  showTimezone,
30
+ staticPosition = true,
24
31
  timeCaption = 'Select Time',
25
32
  timeFormat = 'at h:i K',
26
33
  yearRange,
@@ -117,19 +124,23 @@ const datePickerHelper = (config) => {
117
124
  onOpen: [() => {
118
125
  calendarResizer()
119
126
  window.addEventListener('resize', calendarResizer)
127
+ if (!staticPosition && scrollContainer) attachToScroll(scrollContainer)
120
128
  }],
121
129
  onClose: [() => {
122
130
  window.removeEventListener('resize', calendarResizer)
131
+ if (!staticPosition && scrollContainer) detachFromScroll(scrollContainer)
123
132
  }],
124
133
  onChange: [(selectedDates, dateStr) => {
125
- onChange(dateStr, selectedDates)
134
+ onChange(dateStr, selectedDates)
126
135
  }],
127
136
  onYearChange: [() => {
128
137
  yearChangeHook()
129
138
  }],
130
139
  plugins: setPlugins(),
140
+ position,
141
+ positionElement: getPositionElement(positionElement),
131
142
  prevArrow: '<i class="far fa-angle-left"></i>',
132
- static: true,
143
+ static: staticPosition,
133
144
  })
134
145
 
135
146
  // ===========================================================
@@ -140,6 +151,17 @@ const datePickerHelper = (config) => {
140
151
  const picker = document.querySelector(`#${pickerId}`)._flatpickr
141
152
  picker.innerContainer.parentElement.id = `cal-${pickerId}`
142
153
 
154
+ // Attach / detach to / from scroll events
155
+ const scrollEvent = () => {
156
+ picker._positionCalendar()
157
+ }
158
+ function attachToScroll(scrollParent) {
159
+ document.querySelectorAll(scrollParent)[0]?.addEventListener("scroll", scrollEvent, { passive: true })
160
+ }
161
+ function detachFromScroll(scrollParent = document.body) {
162
+ document.querySelectorAll(scrollParent)[0]?.removeEventListener("scroll", scrollEvent)
163
+ }
164
+
143
165
  // replace year selector with dropdown
144
166
  picker.yearElements[0].parentElement.innerHTML = `<select class="numInput cur-year" type="number" tabIndex="-1" aria-label="Year" id="year-${pickerId}"></select>`
145
167
 
@@ -0,0 +1,44 @@
1
+ <%= pb_rails("flex") do %>
2
+ <%= pb_rails("flex/flex_item", props: {fixed_size: "50%"}) do %>
3
+ <%= pb_rails("date_picker", props: {
4
+ label: "Datepicker (opens on the right)",
5
+ picker_id: "date-picker-positions1",
6
+ position: "auto right",
7
+ scroll_container: ".pb--page--content--main",
8
+ static_position: false
9
+ }) %>
10
+ <% end %>
11
+ <% end %>
12
+ <%= pb_rails("flex") do %>
13
+ <%= pb_rails("flex/flex_item", props: {fixed_size: "50%"}) do %>
14
+ <%= pb_rails("date_picker", props: {
15
+ label: "Datepicker (opens on the left)",
16
+ picker_id: "date-picker-positions2",
17
+ position: "auto left",
18
+ scroll_container: ".pb--page--content--main",
19
+ static_position: false
20
+ }) %>
21
+ <% end %>
22
+ <% end %>
23
+ <%= pb_rails("flex") do %>
24
+ <%= pb_rails("flex/flex_item", props: {fixed_size: "50%"}) do %>
25
+ <%= pb_rails("date_picker", props: {
26
+ label: "Datepicker (opens above on the left)",
27
+ picker_id: "date-picker-positions3",
28
+ position: "above left",
29
+ scroll_container: ".pb--page--content--main",
30
+ static_position: false
31
+ }) %>
32
+ <% end %>
33
+ <% end %>
34
+ <%= pb_rails("flex") do %>
35
+ <%= pb_rails("flex/flex_item", props: {fixed_size: "50%"}) do %>
36
+ <%= pb_rails("date_picker", props: {
37
+ label: "Datepicker (opens below on the right)",
38
+ picker_id: "date-picker-positions4",
39
+ position: "below right",
40
+ scroll_container: ".pb--page--content--main",
41
+ static_position: false
42
+ }) %>
43
+ <% end %>
44
+ <% end %>
@@ -0,0 +1,60 @@
1
+ import React from 'react'
2
+
3
+ import Flex from '../../pb_flex/_flex'
4
+ import FlexItem from '../../pb_flex/_flex_item'
5
+ import DatePicker from '../_date_picker'
6
+
7
+ const DatePickerPositions = (props) => (
8
+ <React.Fragment>
9
+ <Flex>
10
+ <FlexItem fixedSize="50%">
11
+ <DatePicker
12
+ label="Datepicker (opens on the right)"
13
+ pickerId="date-picker-positions1"
14
+ position="auto right"
15
+ scrollContainer=".pb--page--content--main"
16
+ staticPosition={false}
17
+ {...props}
18
+ />
19
+ </FlexItem>
20
+ </Flex>
21
+ <Flex>
22
+ <FlexItem fixedSize="50%">
23
+ <DatePicker
24
+ label="Datepicker (opens on the left)"
25
+ pickerId="date-picker-positions2"
26
+ position="auto left"
27
+ scrollContainer=".pb--page--content--main"
28
+ staticPosition={false}
29
+ {...props}
30
+ />
31
+ </FlexItem>
32
+ </Flex>
33
+ <Flex>
34
+ <FlexItem fixedSize="50%">
35
+ <DatePicker
36
+ label="Datepicker (opens above on the left)"
37
+ pickerId="date-picker-positions3"
38
+ position="above left"
39
+ scrollContainer=".pb--page--content--main"
40
+ staticPosition={false}
41
+ {...props}
42
+ />
43
+ </FlexItem>
44
+ </Flex>
45
+ <Flex>
46
+ <FlexItem fixedSize="50%">
47
+ <DatePicker
48
+ label="Datepicker (opens below on the right)"
49
+ pickerId="date-picker-positions4"
50
+ position="below right"
51
+ scrollContainer=".pb--page--content--main"
52
+ staticPosition={false}
53
+ {...props}
54
+ />
55
+ </FlexItem>
56
+ </Flex>
57
+ </React.Fragment>
58
+ )
59
+
60
+ export default DatePickerPositions
@@ -0,0 +1,9 @@
1
+ Datepicker supports `position` options from [Flatpickr Options Documentation](https://flatpickr.js.org/options/). There are multiple positioning options to choose from.
2
+
3
+ **Note:** In order for the above prop to work properly, you must also send `staticPosition={false}` to your Datepicker kit instance.
4
+
5
+ #### Affix Datepicker Upon Scrolling
6
+
7
+ Upon adding `static={false}` to the date picker, you will notice that the date picker detaches from the input field while scrolling. This is a known Flatpickr nuance. By adding the `scrollContainer` prop, you can tell the date picker which DOM container it should watch for scroll events. In this example, you can see that `scrollContainer=".pb--page--content--main"` is being passed in order to keep the date picker correctly positioned on page scroll.
8
+
9
+ **Useage:** `scrollContainer: .validQuerySelectorHere`
@@ -0,0 +1,33 @@
1
+ <%= pb_rails("card", props: {id: "position-element", margin_bottom: "md"}) do %>
2
+ <%= pb_rails("body") do %>👋 Datepicker will position from here based on ID.<% end %>
3
+ <% end %>
4
+
5
+ <%= pb_rails("flex") do %>
6
+ <%= pb_rails("flex/flex_item", props: {fixed_size: "50%"}) do %>
7
+ <%= pb_rails("date_picker", props: {
8
+ label: "Datepicker (opens on the right)",
9
+ picker_id: "date-picker-position-element",
10
+ position: "auto right",
11
+ position_element: "#position-element",
12
+ scroll_container: ".pb--page--content--main",
13
+ static_position: false
14
+ }) %>
15
+ <% end %>
16
+ <% end %>
17
+
18
+ <%= pb_rails("card", props: {classname: "position-element", margin_bottom: "md"}) do %>
19
+ <%= pb_rails("body") do %>👋 Datepicker will position from here based on class name.<% end %>
20
+ <% end %>
21
+
22
+ <%= pb_rails("flex") do %>
23
+ <%= pb_rails("flex/flex_item", props: {fixed_size: "50%"}) do %>
24
+ <%= pb_rails("date_picker", props: {
25
+ label: "Datepicker (opens on the right)",
26
+ picker_id: "date-picker-position-element2",
27
+ position: "auto right",
28
+ position_element: ".position-element",
29
+ scroll_container: ".pb--page--content--main",
30
+ static_position: false
31
+ }) %>
32
+ <% end %>
33
+ <% end %>
@@ -0,0 +1,67 @@
1
+ import React, { useRef, useEffect, useState } from 'react'
2
+
3
+ import Card from '../../pb_card/_card'
4
+ import Flex from '../../pb_flex/_flex'
5
+ import FlexItem from '../../pb_flex/_flex_item'
6
+ import DatePicker from '../_date_picker'
7
+
8
+ const DatePickerPositionsElement = (props) => {
9
+ const cardRefTop = useRef(null),
10
+ cardRefBtm = useRef(null)
11
+
12
+ const [cardTop, setCardTop] = useState()
13
+ const [cardBtm, setCardBtm] = useState()
14
+
15
+ useEffect(() => {
16
+ setCardTop(cardRefTop.current)
17
+ setCardBtm(cardRefBtm.current)
18
+ }, [cardTop, cardBtm])
19
+
20
+ return (
21
+ <React.Fragment>
22
+ <div ref={cardRefTop}>
23
+ <Card
24
+ marginBottom="md"
25
+ >
26
+ {'👋 Datepicker will position from here based on ID.'}
27
+ </Card>
28
+ </div>
29
+ <Flex>
30
+ <FlexItem fixedSize="50%">
31
+ <DatePicker
32
+ label="Datepicker (opens on the right)"
33
+ pickerId="date-picker-position-element"
34
+ position="auto right"
35
+ positionElement={cardTop}
36
+ scrollContainer=".pb--page--content--main"
37
+ staticPosition={false}
38
+ {...props}
39
+ />
40
+ </FlexItem>
41
+ </Flex>
42
+
43
+ <div ref={cardRefBtm}>
44
+ <Card
45
+ marginBottom="md"
46
+ >
47
+ {'👋 Datepicker will position from here based on class name.'}
48
+ </Card>
49
+ </div>
50
+ <Flex>
51
+ <FlexItem fixedSize="50%">
52
+ <DatePicker
53
+ label="Datepicker (opens on the right)"
54
+ pickerId="date-picker-position-element2"
55
+ position="auto right"
56
+ positionElement={cardBtm}
57
+ scrollContainer=".pb--page--content--main"
58
+ staticPosition={false}
59
+ {...props}
60
+ />
61
+ </FlexItem>
62
+ </Flex>
63
+ </React.Fragment>
64
+ )
65
+ }
66
+
67
+ export default DatePickerPositionsElement
@@ -19,6 +19,8 @@ examples:
19
19
  - date_picker_month_and_year: Month & Year Only
20
20
  - date_picker_week: Week
21
21
  - date_picker_time: Time Selection
22
+ - date_picker_positions: Custom Positions
23
+ - date_picker_positions_element: Custom Position (based on element)
22
24
 
23
25
 
24
26
  react:
@@ -40,3 +42,5 @@ examples:
40
42
  - date_picker_month_and_year: Month & Year Only
41
43
  - date_picker_week: Week
42
44
  - date_picker_time: Time Selection
45
+ - date_picker_positions: Custom Positions
46
+ - date_picker_positions_element: Custom Position (based on element)
@@ -16,3 +16,5 @@ export { default as DatePickerInline } from './_date_picker_inline.jsx'
16
16
  export { default as DatePickerMonthAndYear } from './_date_picker_month_and_year.jsx'
17
17
  export { default as DatePickerTime } from './_date_picker_time.jsx'
18
18
  export { default as DatePickerWeek } from './_date_picker_week.jsx'
19
+ export { default as DatePickerPositions } from './_date_picker_positions.jsx'
20
+ export { default as DatePickerPositionsElement } from './_date_picker_positions_element.jsx'
@@ -1,15 +1,15 @@
1
1
  @media (min-width: 500px) {
2
2
  .flatpickr-calendar {
3
3
  padding: $space_xs;
4
- width: 323.88px
4
+ // width: 323.88px;
5
5
  }
6
6
  .dayContainer {
7
7
  width: 315.88px
8
8
  }
9
9
  .flatpickr-months {
10
- margin-left: -$space_xs;
11
- margin-top: -$space_xs;
12
- width: 323.88px;
10
+ margin-left: $space_xs / 4;
11
+ margin-top: $space_xs / 3;
12
+ // width: 323.88px;
13
13
  }
14
14
  }
15
15
  @media (max-width: 499px) {
@@ -0,0 +1,142 @@
1
+ import React from "react";
2
+ import classnames from "classnames";
3
+
4
+ import { globalProps } from "../utilities/globalProps";
5
+ import { buildCss, buildDataProps } from "../utilities/props";
6
+ import DateTime from "../pb_kit/dateTime";
7
+
8
+ import Body from "../pb_body/_body";
9
+ import Caption from "../pb_caption/_caption";
10
+ import Icon from "../pb_icon/_icon";
11
+
12
+ type DateRangeInlineProps = {
13
+ className?: string;
14
+ id?: string;
15
+ data?: string;
16
+ align?: "left" | "center" | "vertical";
17
+ size?: "sm" | "xs";
18
+ dark?: boolean;
19
+ icon?: boolean;
20
+ startDate?: Date;
21
+ endDate?: Date;
22
+ };
23
+
24
+ const dateTimestamp = (dateValue: Date | string, includeYear: boolean) => {
25
+ const date = new DateTime({ value: dateValue });
26
+ if (includeYear) {
27
+ return `${date.toMonth()} ${date.toDay()}, ${date.toYear()}`;
28
+ } else {
29
+ return `${date.toMonth()} ${date.toDay()}`;
30
+ }
31
+ };
32
+
33
+ const dateTimeIso = (dateValue: Date | string) => {
34
+ const date = new DateTime({ value: dateValue });
35
+ return date.toIso();
36
+ };
37
+
38
+ const DateRangeInline = (props: DateRangeInlineProps) => {
39
+ const {
40
+ icon = false,
41
+ dark = false,
42
+ size = "sm",
43
+ align = "left",
44
+ data = {},
45
+ startDate,
46
+ endDate,
47
+ className,
48
+ } = props;
49
+
50
+ const iconContent = () => {
51
+ return (
52
+ <>
53
+ {icon && (
54
+ <>
55
+ <Body color="light" key={Math.random()} tag="span">
56
+ <Icon
57
+ className="pb_date_range_inline_icon"
58
+ dark={dark}
59
+ fixedWidth
60
+ icon="calendar-alt"
61
+ size={size}
62
+ tag="span"
63
+ />
64
+ </Body>
65
+ </>
66
+ )}
67
+ </>
68
+ );
69
+ };
70
+
71
+ const dateInCurrentYear = () => {
72
+ const currentDate = new Date();
73
+ return (
74
+ startDate.getFullYear() == endDate.getFullYear() &&
75
+ startDate.getFullYear() == currentDate.getFullYear()
76
+ );
77
+ };
78
+
79
+ const dateRangeClasses = buildCss("pb_date_range_inline_kit", align);
80
+ const dataProps = buildDataProps(data)
81
+ const renderTime = (date: Date | string) => {
82
+ return (
83
+ <time dateTime={dateTimeIso(date)}>
84
+ {dateInCurrentYear() ? (
85
+ <>{` ${dateTimestamp(date, false)} `}</>
86
+ ) : (
87
+ <>{` ${dateTimestamp(date, true)} `}</>
88
+ )}
89
+ </time>
90
+ );
91
+ };
92
+
93
+ return (
94
+ <div
95
+ {...dataProps}
96
+ className={classnames(dateRangeClasses, globalProps(props), className)}
97
+ >
98
+ <div className="pb_date_range_inline_wrapper">
99
+ {size == "xs" && (
100
+ <>
101
+ {iconContent()}
102
+ <Caption dark={dark} tag="span">
103
+ {renderTime(startDate)}
104
+ </Caption>
105
+ <Caption dark={dark} tag="span">
106
+ <Icon
107
+ className="pb_date_range_inline_arrow"
108
+ fixedWidth
109
+ icon="long-arrow-right"
110
+ />
111
+ </Caption>
112
+ <Caption dark={dark} tag="span">
113
+ {renderTime(endDate)}
114
+ </Caption>
115
+ </>
116
+ )}
117
+
118
+ {size == "sm" && (
119
+ <>
120
+ {iconContent()}
121
+ <Body dark={dark} tag="span">
122
+ {renderTime(startDate)}
123
+ </Body>
124
+ <Body color="light" dark={dark} tag="span">
125
+ <Icon
126
+ className="pb_date_range_inline_arrow"
127
+ dark={dark}
128
+ fixedWidth
129
+ icon="long-arrow-right"
130
+ />
131
+ </Body>
132
+ <Body dark={dark} tag="span">
133
+ {renderTime(endDate)}
134
+ </Body>
135
+ </>
136
+ )}
137
+ </div>
138
+ </div>
139
+ );
140
+ };
141
+
142
+ export default DateRangeInline;