playbook_ui 12.26.0.pre.alpha.PLAY603datepickerquickpickinputpresetdropdown794 → 12.26.0.pre.alpha.alphafix810

Sign up to get free protection for your applications and to get access to all the features.
@@ -2,5 +2,5 @@
2
2
 
3
3
  module Playbook
4
4
  PREVIOUS_VERSION = "12.26.0"
5
- VERSION = "12.26.0.pre.alpha.PLAY603datepickerquickpickinputpresetdropdown794"
5
+ VERSION = "12.26.0.pre.alpha.alphafix810"
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.26.0.pre.alpha.PLAY603datepickerquickpickinputpresetdropdown794
4
+ version: 12.26.0.pre.alpha.alphafix810
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-06-16 00:00:00.000000000 Z
12
+ date: 2023-06-21 00:00:00.000000000 Z
13
13
  dependencies:
14
14
  - !ruby/object:Gem::Dependency
15
15
  name: actionpack
@@ -723,8 +723,6 @@ files:
723
723
  - app/pb_kits/playbook/pb_date_picker/docs/_date_picker_positions.md
724
724
  - app/pb_kits/playbook/pb_date_picker/docs/_date_picker_positions_element.html.erb
725
725
  - app/pb_kits/playbook/pb_date_picker/docs/_date_picker_positions_element.jsx
726
- - app/pb_kits/playbook/pb_date_picker/docs/_date_picker_quick_pick.html.erb
727
- - app/pb_kits/playbook/pb_date_picker/docs/_date_picker_quick_pick.jsx
728
726
  - app/pb_kits/playbook/pb_date_picker/docs/_date_picker_range.html.erb
729
727
  - app/pb_kits/playbook/pb_date_picker/docs/_date_picker_range.jsx
730
728
  - app/pb_kits/playbook/pb_date_picker/docs/_date_picker_time.html.erb
@@ -739,7 +737,6 @@ files:
739
737
  - app/pb_kits/playbook/pb_date_picker/docs/_description.md
740
738
  - app/pb_kits/playbook/pb_date_picker/docs/example.yml
741
739
  - app/pb_kits/playbook/pb_date_picker/docs/index.js
742
- - app/pb_kits/playbook/pb_date_picker/plugins/quickPick.tsx
743
740
  - app/pb_kits/playbook/pb_date_picker/plugins/timeSelect.ts
744
741
  - app/pb_kits/playbook/pb_date_picker/sass_partials/_calendar_input_icon.scss
745
742
  - app/pb_kits/playbook/pb_date_picker/sass_partials/_day_styles.scss
@@ -749,7 +746,6 @@ files:
749
746
  - app/pb_kits/playbook/pb_date_picker/sass_partials/_input_styles.scss
750
747
  - app/pb_kits/playbook/pb_date_picker/sass_partials/_month_and_year_styles.scss
751
748
  - app/pb_kits/playbook/pb_date_picker/sass_partials/_overrides.scss
752
- - app/pb_kits/playbook/pb_date_picker/sass_partials/_quick_pick_styles.scss
753
749
  - app/pb_kits/playbook/pb_date_picker/sass_partials/_time_selection_styles.scss
754
750
  - app/pb_kits/playbook/pb_date_picker/sass_partials/_week_styles.scss
755
751
  - app/pb_kits/playbook/pb_date_range_inline/_date_range_inline.scss
@@ -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,168 +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
- let activeLabel = ""
23
-
24
- const quickPickPlugin = (thisRangesEndToday: boolean) => {
25
- return function (fp: FpTypes & any): any {
26
- const thisWeekEndDate = thisRangesEndToday ? new Date() : moment().endOf('isoWeek').toDate()
27
- const thisMonthEndDate = thisRangesEndToday ? new Date() : moment().endOf('month').toDate()
28
- const thisQuarterEndDate = thisRangesEndToday ? new Date() : moment().endOf('quarter').toDate()
29
- const thisYearEndDate = thisRangesEndToday ? new Date() : moment().endOf('year').toDate()
30
-
31
- // variable that holds the ranges available
32
- const ranges = {
33
- 'Today': [new Date(), new Date()],
34
- 'Yesterday': [moment().subtract(1, 'days').toDate(), moment().subtract(1, 'days').toDate()],
35
- 'This week': [moment().startOf('isoWeek').toDate(), thisWeekEndDate],
36
- 'This month': [moment().startOf('month').toDate(), thisMonthEndDate],
37
- 'This quarter': [moment().startOf('quarter').toDate(), thisQuarterEndDate],
38
- 'This year': [moment().startOf('year').toDate(), thisYearEndDate],
39
- 'Last week': [
40
- moment().subtract(1, 'week').startOf('isoWeek').toDate(),
41
- moment().subtract(1, 'week').endOf('isoWeek').toDate()
42
- ],
43
- 'Last month': [
44
- moment().subtract(1, 'month').startOf('month').toDate(),
45
- moment().subtract(1, 'month').endOf('month').toDate()
46
- ],
47
- 'Last quarter': [
48
- moment().subtract(1, 'quarter').startOf('quarter').toDate(),
49
- moment().subtract(1, 'quarter').endOf('quarter').toDate()
50
- ],
51
- 'Last year': [
52
- moment().subtract(1, 'year').startOf('year').toDate(),
53
- moment().subtract(1, 'year').endOf('year').toDate()
54
- ]
55
- }
56
- //creating the ul element for the nav dropdown and giving it classnames
57
- const rangesNav = document.createElement('ul');
58
-
59
- // creating the pluginData object that will hold the properties of this plugin
60
- const pluginData: pluginDataType = {
61
- ranges: ranges,
62
- rangesNav: rangesNav,
63
- rangesButtons: [],
64
- };
65
-
66
- /**
67
- * @param {string} label
68
- * @returns HTML Element
69
- */
70
-
71
- //function for creating the range buttons in the nav
72
- const addRangeButton = (label: string) => {
73
-
74
- // creating new elements to mimick selectable card component
75
- const div2 = document.createElement('div');
76
- div2.className = "nav-item-link"
77
- div2.innerHTML = label;
78
-
79
- pluginData.rangesButtons[label] = div2;
80
-
81
- // create li elements inside the dropdown
82
- const item = document.createElement('li');
83
- item.className = "nav-item";
84
-
85
- // append those nav items to the li items
86
- item.appendChild(pluginData.rangesButtons[label]);
87
-
88
- // append the li item to the ul rangeNav prop
89
- pluginData.rangesNav.appendChild(item);
90
-
91
- // return the ranges buton prop
92
- return pluginData.rangesButtons[label];
93
- };
94
-
95
- const selectActiveRangeButton = (selectedDates: Array<string>) => {
96
- const current = pluginData.rangesNav.querySelector('.active');
97
-
98
- if (current) {
99
- current.classList.remove('active');
100
- }
101
- /** conditional statment to extract start and end dates from selectedDates,
102
- * then loop through ranges prop in pluginData
103
- * and check if chosen dates equal to a date in the ranges prop
104
- * if they are equal, add the active class
105
- */
106
- if (selectedDates.length > 0 && activeLabel) {
107
- // const selected = pluginData.rangesNav.querySelectorAll(".nav-item-link")
108
- // selected.forEach(el => {
109
- // if (el.innerHTML === activeLabel)
110
- // el.classList.add('active')
111
- // return
112
- // })
113
-
114
- pluginData.rangesButtons[activeLabel].classList.add('active');
115
- }
116
- }
117
-
118
-
119
- return {
120
- // onReady is a hook from flatpickr that runs when calender is in a ready state
121
- onReady(selectedDates: Array<string>) {
122
- // 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
123
- for (const [label, range] of Object.entries(pluginData.ranges)) {
124
- addRangeButton(label).addEventListener('click', function () {
125
-
126
- const start = moment(range[0]).toDate();
127
- const end = moment(range[1]).toDate();
128
-
129
- if (!start) {
130
- fp.clear();
131
- }
132
- else {
133
- activeLabel = label
134
- fp.setDate([start, end], true);
135
- fp.close();
136
- }
137
- });
138
- }
139
- // conditional to check if there is a dropdown to add it to the calendar container and get it the classes it needs
140
- if (pluginData.rangesNav.children.length > 0) {
141
-
142
- fp.calendarContainer.prepend(pluginData.rangesNav);
143
- pluginData.rangesNav.classList.add('quick-pick-ul')
144
- fp.calendarContainer.classList.add('quick-pick-drop-down');
145
-
146
- /**
147
- *
148
- * @param {Array} selectedDates
149
- */
150
- // function to give the active button the active class
151
- selectActiveRangeButton(selectedDates);
152
- }
153
- },
154
- onValueUpdate(selectedDates: Array<string>) {
155
- selectActiveRangeButton(selectedDates);
156
- },
157
-
158
- onClose(selectedDates: Array<string>) {
159
- // set the input value to the selected dates when the dropdown is closed
160
- if (selectedDates.length < 2 && selectedDates.length > 0) {
161
- fp.input.placeholder = fp.formatDate(this.selectedDates[0], fp.config.dateFormat);
162
- }
163
- }
164
- };
165
- };
166
- }
167
-
168
- export default quickPickPlugin;
@@ -1,75 +0,0 @@
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
- }