playbook_ui 12.28.0.pre.alpha.PLAY603datepickerquickpickinputpresetdropdown869 → 12.28.0.pre.alpha.PLAY814removemomentjs871
Sign up to get free protection for your applications and to get access to all the features.
- checksums.yaml +4 -4
- data/app/pb_kits/playbook/pb_date/_date.tsx +7 -8
- data/app/pb_kits/playbook/pb_date_picker/_date_picker.scss +0 -26
- data/app/pb_kits/playbook/pb_date_picker/_date_picker.tsx +95 -102
- data/app/pb_kits/playbook/pb_date_picker/date_picker.html.erb +2 -18
- data/app/pb_kits/playbook/pb_date_picker/date_picker.rb +4 -15
- data/app/pb_kits/playbook/pb_date_picker/date_picker.test.js +1 -84
- data/app/pb_kits/playbook/pb_date_picker/date_picker_helper.ts +4 -38
- data/app/pb_kits/playbook/pb_date_picker/docs/example.yml +0 -4
- data/app/pb_kits/playbook/pb_date_picker/docs/index.js +1 -3
- data/app/pb_kits/playbook/pb_date_picker/sass_partials/_calendar_input_icon.scss +2 -3
- data/app/pb_kits/playbook/pb_date_range_inline/_date_range_inline.tsx +45 -31
- data/app/pb_kits/playbook/pb_date_range_stacked/_date_range_stacked.tsx +5 -3
- data/app/pb_kits/playbook/pb_date_stacked/_date_stacked.tsx +24 -21
- data/app/pb_kits/playbook/pb_date_time/_date_time.tsx +1 -1
- data/app/pb_kits/playbook/pb_date_time/dateTime.test.js +1 -1
- data/app/pb_kits/playbook/pb_date_time_stacked/_date_time_stacked.tsx +2 -2
- data/app/pb_kits/playbook/pb_date_time_stacked/date_time_stacked.test.js +1 -1
- data/app/pb_kits/playbook/pb_date_year_stacked/_date_year_stacked.tsx +6 -8
- data/app/pb_kits/playbook/pb_kit/dateTime.ts +139 -67
- data/app/pb_kits/playbook/pb_label_value/_label_value.tsx +52 -31
- data/app/pb_kits/playbook/pb_message/_message.tsx +25 -25
- data/app/pb_kits/playbook/pb_nav/_item.tsx +1 -1
- data/app/pb_kits/playbook/pb_nav/_subtle_mixin.scss +1 -1
- data/app/pb_kits/playbook/pb_time/_time.tsx +9 -11
- data/app/pb_kits/playbook/pb_time_range_inline/_time_range_inline.tsx +46 -49
- data/app/pb_kits/playbook/pb_time_stacked/_time_stacked.tsx +4 -6
- data/app/pb_kits/playbook/pb_timestamp/_timestamp.tsx +10 -10
- data/app/pb_kits/playbook/pb_weekday_stacked/_weekday_stacked.tsx +8 -11
- data/dist/playbook-rails.js +7 -279
- data/lib/playbook/version.rb +1 -1
- metadata +1 -11
- data/app/pb_kits/playbook/pb_date_picker/docs/_date_picker_quick_pick_rails.html.erb +0 -12
- data/app/pb_kits/playbook/pb_date_picker/docs/_date_picker_quick_pick_rails.md +0 -3
- data/app/pb_kits/playbook/pb_date_picker/docs/_date_picker_quick_pick_range_limit.html.erb +0 -12
- data/app/pb_kits/playbook/pb_date_picker/docs/_date_picker_quick_pick_range_limit.jsx +0 -18
- data/app/pb_kits/playbook/pb_date_picker/docs/_date_picker_quick_pick_range_limit.md +0 -1
- data/app/pb_kits/playbook/pb_date_picker/docs/_date_picker_quick_pick_react.jsx +0 -17
- data/app/pb_kits/playbook/pb_date_picker/docs/_date_picker_quick_pick_react.md +0 -1
- data/app/pb_kits/playbook/pb_date_picker/plugins/quickPick.tsx +0 -185
- data/app/pb_kits/playbook/pb_date_picker/sass_partials/_quick_pick_styles.scss +0 -75
- data/app/pb_kits/playbook/pb_logistic/_logistic.jsx +0 -120
data/lib/playbook/version.rb
CHANGED
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.28.0.pre.alpha.
|
4
|
+
version: 12.28.0.pre.alpha.PLAY814removemomentjs871
|
5
5
|
platform: ruby
|
6
6
|
authors:
|
7
7
|
- Power UX
|
@@ -723,13 +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_rails.html.erb
|
727
|
-
- app/pb_kits/playbook/pb_date_picker/docs/_date_picker_quick_pick_rails.md
|
728
|
-
- app/pb_kits/playbook/pb_date_picker/docs/_date_picker_quick_pick_range_limit.html.erb
|
729
|
-
- app/pb_kits/playbook/pb_date_picker/docs/_date_picker_quick_pick_range_limit.jsx
|
730
|
-
- app/pb_kits/playbook/pb_date_picker/docs/_date_picker_quick_pick_range_limit.md
|
731
|
-
- app/pb_kits/playbook/pb_date_picker/docs/_date_picker_quick_pick_react.jsx
|
732
|
-
- app/pb_kits/playbook/pb_date_picker/docs/_date_picker_quick_pick_react.md
|
733
726
|
- app/pb_kits/playbook/pb_date_picker/docs/_date_picker_range.html.erb
|
734
727
|
- app/pb_kits/playbook/pb_date_picker/docs/_date_picker_range.jsx
|
735
728
|
- app/pb_kits/playbook/pb_date_picker/docs/_date_picker_time.html.erb
|
@@ -744,7 +737,6 @@ files:
|
|
744
737
|
- app/pb_kits/playbook/pb_date_picker/docs/_description.md
|
745
738
|
- app/pb_kits/playbook/pb_date_picker/docs/example.yml
|
746
739
|
- app/pb_kits/playbook/pb_date_picker/docs/index.js
|
747
|
-
- app/pb_kits/playbook/pb_date_picker/plugins/quickPick.tsx
|
748
740
|
- app/pb_kits/playbook/pb_date_picker/plugins/timeSelect.ts
|
749
741
|
- app/pb_kits/playbook/pb_date_picker/sass_partials/_calendar_input_icon.scss
|
750
742
|
- app/pb_kits/playbook/pb_date_picker/sass_partials/_day_styles.scss
|
@@ -754,7 +746,6 @@ files:
|
|
754
746
|
- app/pb_kits/playbook/pb_date_picker/sass_partials/_input_styles.scss
|
755
747
|
- app/pb_kits/playbook/pb_date_picker/sass_partials/_month_and_year_styles.scss
|
756
748
|
- app/pb_kits/playbook/pb_date_picker/sass_partials/_overrides.scss
|
757
|
-
- app/pb_kits/playbook/pb_date_picker/sass_partials/_quick_pick_styles.scss
|
758
749
|
- app/pb_kits/playbook/pb_date_picker/sass_partials/_time_selection_styles.scss
|
759
750
|
- app/pb_kits/playbook/pb_date_picker/sass_partials/_week_styles.scss
|
760
751
|
- app/pb_kits/playbook/pb_date_range_inline/_date_range_inline.scss
|
@@ -1408,7 +1399,6 @@ files:
|
|
1408
1399
|
- app/pb_kits/playbook/pb_loading_inline/loading_inline.html.erb
|
1409
1400
|
- app/pb_kits/playbook/pb_loading_inline/loading_inline.rb
|
1410
1401
|
- app/pb_kits/playbook/pb_loading_inline/loading_inline.test.js
|
1411
|
-
- app/pb_kits/playbook/pb_logistic/_logistic.jsx
|
1412
1402
|
- app/pb_kits/playbook/pb_map/_map.scss
|
1413
1403
|
- app/pb_kits/playbook/pb_map/_map.tsx
|
1414
1404
|
- app/pb_kits/playbook/pb_map/_pb_map_button_mixin.scss
|
@@ -1,12 +0,0 @@
|
|
1
|
-
<%= pb_rails("date_picker", props: {
|
2
|
-
allow_input: true,
|
3
|
-
end_date_id: "quick-pick-end-date",
|
4
|
-
end_date_name: "quick-pick-end-date",
|
5
|
-
mode: "range",
|
6
|
-
picker_id: "date-picker-quick-pick",
|
7
|
-
placeholder: "mm/dd/yyyy to mm/dd/yyyy",
|
8
|
-
selection_type: "quickpick",
|
9
|
-
start_date_id: "quick-pick-start-date",
|
10
|
-
start_date_name: "quick-pick-start-date"
|
11
|
-
}) %>
|
12
|
-
|
@@ -1,3 +0,0 @@
|
|
1
|
-
This date range variant uses hidden inputs to handle start and end dates. While they are not required props, it is advisable to specify a unique `start_date_id`, `start_date_name`, `end_date_id`, and `end_date_name` for each quick pick instance you place in a form and/or on a page.
|
2
|
-
|
3
|
-
Like all other date pickers, the quick pick does require a `picker_id`.
|
@@ -1,12 +0,0 @@
|
|
1
|
-
<%= pb_rails("date_picker", props: {
|
2
|
-
allow_input: true,
|
3
|
-
end_date_id: "range-limit-end-date",
|
4
|
-
end_date_name: "range-limit-end-date",
|
5
|
-
mode: "range",
|
6
|
-
picker_id: "thisRangesEndToday",
|
7
|
-
placeholder: "mm/dd/yyyy to mm/dd/yyyy",
|
8
|
-
selection_type: "quickpick",
|
9
|
-
start_date_id: "range-limit-start-date",
|
10
|
-
start_date_name: "range-limit-start-date",
|
11
|
-
this_ranges_end_today: true
|
12
|
-
}) %>
|
@@ -1,18 +0,0 @@
|
|
1
|
-
import React from 'react'
|
2
|
-
import DatePicker from '../_date_picker'
|
3
|
-
|
4
|
-
const DatePickerQuickPickRangeLimit = (props) => (
|
5
|
-
<>
|
6
|
-
<DatePicker
|
7
|
-
allowInput
|
8
|
-
mode="range"
|
9
|
-
pickerId="thisRangesEndToday"
|
10
|
-
placeholder="mm/dd/yyyy to mm/dd/yyyy"
|
11
|
-
selectionType="quickpick"
|
12
|
-
thisRangesEndToday
|
13
|
-
{...props}
|
14
|
-
/>
|
15
|
-
</>
|
16
|
-
)
|
17
|
-
|
18
|
-
export default DatePickerQuickPickRangeLimit
|
@@ -1 +0,0 @@
|
|
1
|
-
Applying `this_ranges_end_today` (Rails) or `thisRangesEndToday` (React) causes all “This” preset ranges (i.e., this week, this month, this quarter, this year) to use an endDate of today, instead of their natural end date in the future.
|
@@ -1,17 +0,0 @@
|
|
1
|
-
import React from 'react'
|
2
|
-
import DatePicker from '../_date_picker'
|
3
|
-
|
4
|
-
const DatePickerQuickPickReact = (props) => (
|
5
|
-
<>
|
6
|
-
<DatePicker
|
7
|
-
allowInput
|
8
|
-
mode="range"
|
9
|
-
pickerId="date-picker-quick-pick"
|
10
|
-
placeholder="mm/dd/yyyy to mm/dd/yyyy"
|
11
|
-
selectionType="quickpick"
|
12
|
-
{...props}
|
13
|
-
/>
|
14
|
-
</>
|
15
|
-
)
|
16
|
-
|
17
|
-
export default DatePickerQuickPickReact
|
@@ -1 +0,0 @@
|
|
1
|
-
Use the `onChange` handler function to access the startDate and endDate values. Check the [`onChange` example](https://playbook.powerapp.cloud/kits/date_picker/react#onchange) for more information.
|
@@ -1,185 +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<Date>) => {
|
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
|
-
|
107
|
-
if (selectedDates.length > 0 && activeLabel) {
|
108
|
-
// const selected = pluginData.rangesNav.querySelectorAll(".nav-item-link")
|
109
|
-
// selected.forEach(el => {
|
110
|
-
// if (el.innerHTML === activeLabel)
|
111
|
-
// el.classList.add('active')
|
112
|
-
// return
|
113
|
-
// })
|
114
|
-
|
115
|
-
pluginData.rangesButtons[activeLabel].classList.add('active');
|
116
|
-
}
|
117
|
-
}
|
118
|
-
|
119
|
-
const isLabelMatchingSelectedDates = (selectedDates: Array<Date>) => {
|
120
|
-
return activeLabel && selectedDates[0].toDateString() === pluginData.ranges[activeLabel][0].toDateString() &&
|
121
|
-
selectedDates[1].toDateString() === pluginData.ranges[activeLabel][1].toDateString()
|
122
|
-
}
|
123
|
-
|
124
|
-
|
125
|
-
return {
|
126
|
-
// onReady is a hook from flatpickr that runs when calender is in a ready state
|
127
|
-
onReady(selectedDates: Array<Date>) {
|
128
|
-
// 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
|
129
|
-
for (const [label, range] of Object.entries(pluginData.ranges)) {
|
130
|
-
addRangeButton(label).addEventListener('click', function () {
|
131
|
-
|
132
|
-
const start = moment(range[0]).toDate();
|
133
|
-
const end = moment(range[1]).toDate();
|
134
|
-
|
135
|
-
if (!start) {
|
136
|
-
fp.clear();
|
137
|
-
}
|
138
|
-
else {
|
139
|
-
activeLabel = label
|
140
|
-
fp.setDate([start, end], true);
|
141
|
-
fp.close();
|
142
|
-
}
|
143
|
-
});
|
144
|
-
}
|
145
|
-
// conditional to check if there is a dropdown to add it to the calendar container and get it the classes it needs
|
146
|
-
if (pluginData.rangesNav.children.length > 0) {
|
147
|
-
|
148
|
-
fp.calendarContainer.prepend(pluginData.rangesNav);
|
149
|
-
pluginData.rangesNav.classList.add('quick-pick-ul')
|
150
|
-
fp.calendarContainer.classList.add('quick-pick-drop-down');
|
151
|
-
|
152
|
-
/**
|
153
|
-
*
|
154
|
-
* @param {Array} selectedDates
|
155
|
-
*/
|
156
|
-
// function to give the active button the active class
|
157
|
-
selectActiveRangeButton(selectedDates);
|
158
|
-
}
|
159
|
-
},
|
160
|
-
onValueUpdate(selectedDates: Array<Date>) {
|
161
|
-
selectActiveRangeButton(selectedDates)
|
162
|
-
},
|
163
|
-
|
164
|
-
onClose(selectedDates: Array<Date>) {
|
165
|
-
// remove the active class from the button if the selected dates don't match the label
|
166
|
-
if (!isLabelMatchingSelectedDates(selectedDates)) {
|
167
|
-
pluginData.rangesButtons[activeLabel]?.classList.remove('active');
|
168
|
-
activeLabel = ""
|
169
|
-
}
|
170
|
-
|
171
|
-
// set the date to the first date in the array if the user types only one date
|
172
|
-
if (selectedDates.length === 1) {
|
173
|
-
fp.setDate([selectedDates[0], selectedDates[0]], true);
|
174
|
-
}
|
175
|
-
|
176
|
-
// set the input value to the selected dates when the dropdown is closed
|
177
|
-
if (selectedDates.length < 2 && selectedDates.length > 0) {
|
178
|
-
fp.input.placeholder = fp.formatDate(this.selectedDates[0], fp.config.dateFormat);
|
179
|
-
}
|
180
|
-
}
|
181
|
-
};
|
182
|
-
};
|
183
|
-
}
|
184
|
-
|
185
|
-
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
|
-
}
|
@@ -1,120 +0,0 @@
|
|
1
|
-
/* @flow */
|
2
|
-
|
3
|
-
import React from 'react'
|
4
|
-
import classnames from 'classnames'
|
5
|
-
|
6
|
-
import DateTime from '../pb_kit/dateTime'
|
7
|
-
import { buildAriaProps, buildCss, buildDataProps } from '../utilities/props'
|
8
|
-
import { globalProps } from '../utilities/globalProps'
|
9
|
-
|
10
|
-
import Body from '../pb_body/_body'
|
11
|
-
import Caption from '../pb_caption/_caption'
|
12
|
-
import Icon from '../pb_icon/_icon'
|
13
|
-
import Title from '../pb_title/_title'
|
14
|
-
|
15
|
-
const dateString = (value: DateTime) => {
|
16
|
-
const month = value.toMonthNum()
|
17
|
-
const day = value.toDay()
|
18
|
-
|
19
|
-
return ` · ${month}/${day}`
|
20
|
-
}
|
21
|
-
|
22
|
-
type LogisticProps = {
|
23
|
-
aria?: object,
|
24
|
-
className?: string,
|
25
|
-
dark?: boolean,
|
26
|
-
data?: object,
|
27
|
-
date: string,
|
28
|
-
id?: string,
|
29
|
-
link?: string,
|
30
|
-
projectName?: string,
|
31
|
-
projectNumber?: number,
|
32
|
-
}
|
33
|
-
|
34
|
-
const Logistic = (props: LogisticProps) => {
|
35
|
-
const { aria = {},
|
36
|
-
className,
|
37
|
-
dark = false,
|
38
|
-
data = {},
|
39
|
-
date,
|
40
|
-
id,
|
41
|
-
link,
|
42
|
-
projectName,
|
43
|
-
projectNumber } = props
|
44
|
-
|
45
|
-
const ariaProps = buildAriaProps(aria)
|
46
|
-
const dataProps = buildDataProps(data)
|
47
|
-
const formattedDate = new DateTime({ value: date })
|
48
|
-
const classes = classnames(
|
49
|
-
buildCss('pb_logistic_kit', { dark }),
|
50
|
-
globalProps(props),
|
51
|
-
className
|
52
|
-
)
|
53
|
-
|
54
|
-
return (
|
55
|
-
<div
|
56
|
-
{...ariaProps}
|
57
|
-
{...dataProps}
|
58
|
-
className={classes}
|
59
|
-
id={id}
|
60
|
-
>
|
61
|
-
<Body color="light">
|
62
|
-
<Caption text="Project" />
|
63
|
-
<Icon
|
64
|
-
fixedWidth
|
65
|
-
icon="home"
|
66
|
-
/>
|
67
|
-
|
68
|
-
{` ${projectNumber}`}
|
69
|
-
|
70
|
-
<Choose>
|
71
|
-
<When condition={link}>
|
72
|
-
<a
|
73
|
-
className="pb_logistic_kit_links"
|
74
|
-
href={link}
|
75
|
-
>
|
76
|
-
<Choose>
|
77
|
-
<When condition={date}>
|
78
|
-
<Title
|
79
|
-
size={4}
|
80
|
-
tag="span"
|
81
|
-
text={' ' + projectName + dateString(formattedDate)}
|
82
|
-
/>
|
83
|
-
</When>
|
84
|
-
<Otherwise>
|
85
|
-
<Title
|
86
|
-
size={4}
|
87
|
-
tag="span"
|
88
|
-
text={' ' + projectName}
|
89
|
-
/>
|
90
|
-
</Otherwise>
|
91
|
-
</Choose>
|
92
|
-
</a>
|
93
|
-
</When>
|
94
|
-
<Otherwise>
|
95
|
-
<Choose>
|
96
|
-
<When condition={date}>
|
97
|
-
<Title
|
98
|
-
dark={dark}
|
99
|
-
size={4}
|
100
|
-
tag="span"
|
101
|
-
text={' ' + projectName + dateString(formattedDate)}
|
102
|
-
/>
|
103
|
-
</When>
|
104
|
-
<Otherwise>
|
105
|
-
<Title
|
106
|
-
dark={dark}
|
107
|
-
size={4}
|
108
|
-
tag="span"
|
109
|
-
text={' ' + projectName}
|
110
|
-
/>
|
111
|
-
</Otherwise>
|
112
|
-
</Choose>
|
113
|
-
</Otherwise>
|
114
|
-
</Choose>
|
115
|
-
</Body>
|
116
|
-
</div>
|
117
|
-
)
|
118
|
-
}
|
119
|
-
|
120
|
-
export default Logistic
|