forstok-ui-lib 5.2.41 → 5.2.44
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/package.json
CHANGED
|
@@ -1,26 +1,4 @@
|
|
|
1
|
-
<?xml version="1.0"
|
|
2
|
-
|
|
3
|
-
"
|
|
4
|
-
|
|
5
|
-
width="100%" height="100%" viewBox="0 0 512.000000 512.000000"
|
|
6
|
-
preserveAspectRatio="xMidYMid meet">
|
|
7
|
-
|
|
8
|
-
<g transform="translate(0.000000,512.000000) scale(0.100000,-0.100000)"
|
|
9
|
-
fill="#000000" stroke="none">
|
|
10
|
-
<path d="M1178 5110 c-41 -12 -86 -48 -106 -83 -12 -24 -18 -65 -22 -157 l-5
|
|
11
|
-
-125 -190 -6 c-218 -6 -276 -18 -400 -82 -57 -30 -101 -63 -155 -117 -84 -85
|
|
12
|
-
-129 -154 -168 -262 l-27 -73 0 -1835 0 -1835 27 -73 c39 -108 84 -178 168
|
|
13
|
-
-262 84 -83 168 -134 290 -172 l75 -23 1895 0 1895 0 75 23 c222 70 385 225
|
|
14
|
-
457 436 l28 81 0 1830 0 1830 -27 73 c-39 108 -84 177 -168 262 -54 54 -98 87
|
|
15
|
-
-155 117 -124 64 -182 76 -400 82 l-190 6 -5 125 c-6 142 -18 175 -78 214 -98
|
|
16
|
-
65 -225 28 -273 -79 -14 -31 -19 -65 -19 -152 l0 -113 -1140 0 -1140 0 0 113
|
|
17
|
-
c0 87 -5 121 -19 152 -39 86 -135 132 -223 105z m-128 -871 c0 -107 3 -126 22
|
|
18
|
-
-161 42 -73 128 -107 213 -83 101 29 135 93 135 255 l0 110 1140 0 1140 0 0
|
|
19
|
-
-110 c0 -77 5 -122 16 -148 59 -142 257 -156 332 -24 19 35 22 54 22 161 l0
|
|
20
|
-
121 173 0 174 0 61 -31 c66 -33 119 -88 149 -155 16 -34 18 -78 21 -351 l3
|
|
21
|
-
-313 -2091 0 -2091 0 3 313 c3 273 5 317 21 351 30 67 83 122 149 155 l61 31
|
|
22
|
-
174 0 173 0 0 -121z m3598 -2371 l-3 -1263 -22 -45 c-34 -68 -75 -112 -134
|
|
23
|
-
-145 l-54 -30 -1875 0 -1875 0 -54 30 c-59 33 -100 77 -134 145 l-22 45 -3
|
|
24
|
-
1263 -2 1262 2090 0 2090 0 -2 -1262z"/>
|
|
25
|
-
</g>
|
|
26
|
-
</svg>
|
|
1
|
+
<?xml version="1.0" encoding="utf-8"?><!-- Uploaded to: SVG Repo, www.svgrepo.com, Generator: SVG Repo Mixer Tools -->
|
|
2
|
+
<svg width="auto" height="auto" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
|
|
3
|
+
<path d="M3 10H21M7 3V5M17 3V5M6.2 21H17.8C18.9201 21 19.4802 21 19.908 20.782C20.2843 20.5903 20.5903 20.2843 20.782 19.908C21 19.4802 21 18.9201 21 17.8V8.2C21 7.07989 21 6.51984 20.782 6.09202C20.5903 5.71569 20.2843 5.40973 19.908 5.21799C19.4802 5 18.9201 5 17.8 5H6.2C5.0799 5 4.51984 5 4.09202 5.21799C3.71569 5.40973 3.40973 5.71569 3.21799 6.09202C3 6.51984 3 7.07989 3 8.2V17.8C3 18.9201 3 19.4802 3.21799 19.908C3.40973 20.2843 3.71569 20.5903 4.09202 20.782C4.51984 21 5.07989 21 6.2 21Z" stroke="#000000" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
|
|
4
|
+
</svg>
|
|
@@ -0,0 +1,229 @@
|
|
|
1
|
+
.DateRangePicker {
|
|
2
|
+
display: inline-block;
|
|
3
|
+
margin-bottom: 10px;
|
|
4
|
+
padding: 0;
|
|
5
|
+
position: relative;
|
|
6
|
+
-webkit-user-select: none;
|
|
7
|
+
-moz-user-select: none;
|
|
8
|
+
-ms-user-select: none;
|
|
9
|
+
user-select: none; }
|
|
10
|
+
.DateRangePicker__Legend {
|
|
11
|
+
color: #52575e;
|
|
12
|
+
font-size: 14px;
|
|
13
|
+
line-height: 16px;
|
|
14
|
+
list-style-type: none;
|
|
15
|
+
margin: 20px 0;
|
|
16
|
+
padding: 0; }
|
|
17
|
+
.DateRangePicker__LegendItem {
|
|
18
|
+
display: inline-block;
|
|
19
|
+
margin: 0 20px; }
|
|
20
|
+
.DateRangePicker__LegendItemColor {
|
|
21
|
+
border-radius: 50%;
|
|
22
|
+
display: inline-block;
|
|
23
|
+
height: 14px;
|
|
24
|
+
margin-right: 6px;
|
|
25
|
+
vertical-align: text-bottom;
|
|
26
|
+
width: 14px;
|
|
27
|
+
border: 1px solid rgba(0, 0, 0, 0.25); }
|
|
28
|
+
.DateRangePicker__LegendItemColor--selection {
|
|
29
|
+
background-color: #ed5434; }
|
|
30
|
+
.DateRangePicker__PaginationArrow {
|
|
31
|
+
border: 0;
|
|
32
|
+
cursor: pointer;
|
|
33
|
+
display: block;
|
|
34
|
+
height: 35px;
|
|
35
|
+
outline: none;
|
|
36
|
+
overflow: hidden;
|
|
37
|
+
padding: 0;
|
|
38
|
+
position: absolute;
|
|
39
|
+
text-align: center;
|
|
40
|
+
top: 0;
|
|
41
|
+
white-space: nowrap;
|
|
42
|
+
width: 35px;
|
|
43
|
+
z-index: 1; }
|
|
44
|
+
.DateRangePicker__PaginationArrow--previous {
|
|
45
|
+
left: 20px; }
|
|
46
|
+
.DateRangePicker__PaginationArrow--next {
|
|
47
|
+
right: 20px; }
|
|
48
|
+
.DateRangePicker__PaginationArrow:hover {
|
|
49
|
+
background-color: #ccc; }
|
|
50
|
+
.DateRangePicker__PaginationArrowIcon {
|
|
51
|
+
border-bottom: 8px solid transparent;
|
|
52
|
+
border-top: 8px solid transparent;
|
|
53
|
+
height: 0;
|
|
54
|
+
position: absolute;
|
|
55
|
+
top: 10px;
|
|
56
|
+
width: 0; }
|
|
57
|
+
.DateRangePicker__PaginationArrowIcon--is-disabled {
|
|
58
|
+
opacity: .25; }
|
|
59
|
+
.DateRangePicker__PaginationArrowIcon--previous {
|
|
60
|
+
border-left: 8px solid transparent;
|
|
61
|
+
border-right: 8px solid #aaa;
|
|
62
|
+
right: 11px; }
|
|
63
|
+
.DateRangePicker__PaginationArrowIcon--next {
|
|
64
|
+
border-left: 8px solid #aaa;
|
|
65
|
+
border-right: 8px solid transparent;
|
|
66
|
+
left: 11px; }
|
|
67
|
+
.DateRangePicker__Month {
|
|
68
|
+
color: #333;
|
|
69
|
+
display: inline-block;
|
|
70
|
+
margin: 0 20px;
|
|
71
|
+
position: relative;
|
|
72
|
+
-webkit-user-select: none;
|
|
73
|
+
-moz-user-select: none;
|
|
74
|
+
-ms-user-select: none;
|
|
75
|
+
user-select: none;
|
|
76
|
+
width: 275px; }
|
|
77
|
+
.DateRangePicker__MonthHeader {
|
|
78
|
+
color: #000;
|
|
79
|
+
font-size: 14px;
|
|
80
|
+
font-weight: bold;
|
|
81
|
+
height: 35px;
|
|
82
|
+
line-height: 35px;
|
|
83
|
+
position: relative;
|
|
84
|
+
text-align: center; }
|
|
85
|
+
.DateRangePicker__MonthHeaderLabel {
|
|
86
|
+
display: inline-block;
|
|
87
|
+
position: relative; }
|
|
88
|
+
.DateRangePicker__MonthHeaderSelect {
|
|
89
|
+
background: #e4e4e4;
|
|
90
|
+
border: 0;
|
|
91
|
+
cursor: pointer;
|
|
92
|
+
display: inline-block;
|
|
93
|
+
height: 100%;
|
|
94
|
+
left: 0;
|
|
95
|
+
margin: 0;
|
|
96
|
+
opacity: 0;
|
|
97
|
+
position: absolute;
|
|
98
|
+
top: 0;
|
|
99
|
+
width: 100%;
|
|
100
|
+
z-index: 5; }
|
|
101
|
+
.DateRangePicker__MonthDates {
|
|
102
|
+
border-bottom: 1px solid #f4f5f6;
|
|
103
|
+
border-collapse: separate;
|
|
104
|
+
border-spacing: 0 1px;
|
|
105
|
+
margin: 0;
|
|
106
|
+
width: 100%; }
|
|
107
|
+
.DateRangePicker__WeekdayHeading, .DateRangePicker__Date {
|
|
108
|
+
font-size: 12px;
|
|
109
|
+
line-height: 1;
|
|
110
|
+
padding: 10px 0;
|
|
111
|
+
text-align: center;
|
|
112
|
+
width: 14.285714285714286%; }
|
|
113
|
+
.DateRangePicker__WeekdayHeading {
|
|
114
|
+
border-bottom: 1px solid #f4f5f6;
|
|
115
|
+
color: #000;
|
|
116
|
+
font-weight: bold; }
|
|
117
|
+
.DateRangePicker__WeekdayHeading abbr[title] {
|
|
118
|
+
border-bottom-width: 0;
|
|
119
|
+
color: #000;
|
|
120
|
+
cursor: pointer;
|
|
121
|
+
font-size: inherit;
|
|
122
|
+
text-decoration: none; }
|
|
123
|
+
.DateRangePicker__Date {
|
|
124
|
+
border: 0 solid #f4f5f6;
|
|
125
|
+
border-right-width: 1px;
|
|
126
|
+
cursor: pointer;
|
|
127
|
+
overflow: hidden;
|
|
128
|
+
position: relative; }
|
|
129
|
+
.DateRangePicker__Date:first-child {
|
|
130
|
+
border-left-width: 1px; }
|
|
131
|
+
.DateRangePicker__Date--weekend {
|
|
132
|
+
background-color: #f6f7f9; }
|
|
133
|
+
.DateRangePicker__Date--otherMonth {
|
|
134
|
+
opacity: .25; }
|
|
135
|
+
.DateRangePicker__Date--is-disabled {
|
|
136
|
+
color: #cdcdd1;
|
|
137
|
+
cursor: default; }
|
|
138
|
+
.DateRangePicker__Date--is-selected {
|
|
139
|
+
color: #fff; }
|
|
140
|
+
.DateRangePicker__Date--is-highlighted {
|
|
141
|
+
color: #333; }
|
|
142
|
+
.DateRangePicker__CalendarDatePeriod {
|
|
143
|
+
bottom: 0;
|
|
144
|
+
position: absolute;
|
|
145
|
+
top: 0; }
|
|
146
|
+
.DateRangePicker__CalendarDatePeriod--am {
|
|
147
|
+
left: 0;
|
|
148
|
+
right: 50%; }
|
|
149
|
+
.DateRangePicker__CalendarDatePeriod--pm {
|
|
150
|
+
left: 50%;
|
|
151
|
+
right: 0; }
|
|
152
|
+
.DateRangePicker__CalendarSelection {
|
|
153
|
+
background-color: #ed5434;
|
|
154
|
+
border: 1px solid #eb401d;
|
|
155
|
+
bottom: 5px;
|
|
156
|
+
left: 0;
|
|
157
|
+
position: absolute;
|
|
158
|
+
right: 0;
|
|
159
|
+
top: 5px; }
|
|
160
|
+
.DateRangePicker__CalendarSelection--inOtherMonth {
|
|
161
|
+
opacity: .5; }
|
|
162
|
+
.DateRangePicker__CalendarSelection--start {
|
|
163
|
+
border-bottom-left-radius: 5px;
|
|
164
|
+
border-right-width: 0;
|
|
165
|
+
border-top-left-radius: 5px;
|
|
166
|
+
left: 5px; }
|
|
167
|
+
.DateRangePicker__CalendarSelection--end {
|
|
168
|
+
border-bottom-right-radius: 5px;
|
|
169
|
+
border-left-width: 0;
|
|
170
|
+
border-top-right-radius: 5px;
|
|
171
|
+
right: 5px; }
|
|
172
|
+
.DateRangePicker__CalendarSelection--segment {
|
|
173
|
+
border-left-width: 0;
|
|
174
|
+
border-right-width: 0; }
|
|
175
|
+
.DateRangePicker__CalendarSelection--single {
|
|
176
|
+
border-radius: 5px;
|
|
177
|
+
left: 5px;
|
|
178
|
+
right: 5px; }
|
|
179
|
+
.DateRangePicker__CalendarSelection--is-pending {
|
|
180
|
+
background-color: rgba(237, 84, 52, 0.75);
|
|
181
|
+
border-width: 0; }
|
|
182
|
+
.DateRangePicker__CalendarHighlight {
|
|
183
|
+
background-color: rgba(255, 255, 255, 0.25);
|
|
184
|
+
border: 1px solid rgba(0, 0, 0, 0.25);
|
|
185
|
+
bottom: 5px;
|
|
186
|
+
left: 0;
|
|
187
|
+
position: absolute;
|
|
188
|
+
right: 0;
|
|
189
|
+
top: 5px; }
|
|
190
|
+
.DateRangePicker__CalendarHighlight--inOtherMonth {
|
|
191
|
+
opacity: .5; }
|
|
192
|
+
.DateRangePicker__CalendarHighlight--start {
|
|
193
|
+
border-bottom-left-radius: 5px;
|
|
194
|
+
border-right-width: 0;
|
|
195
|
+
border-top-left-radius: 5px;
|
|
196
|
+
left: 5px; }
|
|
197
|
+
.DateRangePicker__CalendarHighlight--end {
|
|
198
|
+
border-bottom-right-radius: 5px;
|
|
199
|
+
border-left-width: 0;
|
|
200
|
+
border-top-right-radius: 5px;
|
|
201
|
+
right: 5px; }
|
|
202
|
+
.DateRangePicker__CalendarHighlight--segment {
|
|
203
|
+
border-left-width: 0;
|
|
204
|
+
border-right-width: 0; }
|
|
205
|
+
.DateRangePicker__CalendarHighlight--single {
|
|
206
|
+
background-color: #fff;
|
|
207
|
+
border: 1px solid #eb401d;
|
|
208
|
+
border-radius: 5px;
|
|
209
|
+
left: 5px;
|
|
210
|
+
right: 5px; }
|
|
211
|
+
.DateRangePicker__HalfDateStates {
|
|
212
|
+
bottom: -50px;
|
|
213
|
+
left: -50px;
|
|
214
|
+
position: absolute;
|
|
215
|
+
right: -50px;
|
|
216
|
+
top: -50px;
|
|
217
|
+
transform: rotate(30deg); }
|
|
218
|
+
.DateRangePicker__FullDateStates {
|
|
219
|
+
bottom: 0;
|
|
220
|
+
left: 0;
|
|
221
|
+
position: absolute;
|
|
222
|
+
right: 0;
|
|
223
|
+
top: 0; }
|
|
224
|
+
.DateRangePicker__DateLabel {
|
|
225
|
+
display: block;
|
|
226
|
+
position: relative;
|
|
227
|
+
text-align: center;
|
|
228
|
+
width: 100%;
|
|
229
|
+
z-index: 1; }
|
|
@@ -9,7 +9,7 @@ import CheckboxComponent from '../checkbox';
|
|
|
9
9
|
import ReactPortalComponent from '../portal';
|
|
10
10
|
import TextComponent from '../text';
|
|
11
11
|
import { dateRangeDays, dateRangeStatus } from '../../assets/javascripts/helper';
|
|
12
|
-
import '
|
|
12
|
+
import './daterange.css';
|
|
13
13
|
import './styles.css';
|
|
14
14
|
import { DateRangeContainer, DateRangeControl, DateRangeLabelContainer, DateRangeLabel, DateRangeIndicatorsContainer, DateRangeIndicatorsArrowIconSvg, DateRangeMenuContainer, DateRangeMenu, DateRangeSelection, SelectionDate, DateRangeAside, DateRangePortalContainer, DateRangeIconContainer } from './styles';
|
|
15
15
|
import type { TMouseEvent, TState } from '../../typeds';
|
|
@@ -224,6 +224,7 @@ const DateRangeComponent = ({ mode='default', placeholder, startDate, endDate, r
|
|
|
224
224
|
<SelectionDate data-type='custom' $activated={rangeDateSelected === 'custom'} data-qa-id='daterange-picker-custom'>Custom Range</SelectionDate>
|
|
225
225
|
</DateRangeSelection>
|
|
226
226
|
<DateRangePicker
|
|
227
|
+
bemNamespace='DateRangePicker'
|
|
227
228
|
numberOfCalendars={2}
|
|
228
229
|
onSelect={handleSelect}
|
|
229
230
|
selectionType='range'
|