groundfloor-react-ui 1.0.7 → 1.0.8
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/components/Button/PrimaryButton.js +63 -34
- package/components/Button/SecondaryButton.js +64 -31
- package/components/Inputs/CheckBoxInput.js +149 -85
- package/components/Inputs/DateSelect.js +274 -227
- package/components/Modal/ModalComp.js +1 -1
- package/dist/index.es.js +445 -438
- package/dist/index.js +454 -447
- package/package.json +1 -1
|
@@ -1,240 +1,257 @@
|
|
|
1
|
-
import React, { useState, useEffect, useRef } from
|
|
1
|
+
import React, { useState, useEffect, useRef } from 'react';
|
|
2
2
|
import DatePicker from 'react-datepicker';
|
|
3
|
-
import 'react-datepicker/dist/react-datepicker.css'
|
|
3
|
+
import 'react-datepicker/dist/react-datepicker.css';
|
|
4
4
|
import PropTypes from 'prop-types';
|
|
5
5
|
import styled from 'styled-components';
|
|
6
6
|
import defaultThemeColor from '../constants/defaultThemeColor';
|
|
7
7
|
|
|
8
|
-
import { Icon } from
|
|
9
|
-
|
|
8
|
+
import { Icon } from '../Icon';
|
|
10
9
|
|
|
11
10
|
const Wrapper = styled.div`
|
|
11
|
+
display: flex;
|
|
12
|
+
cursor: ${({ disabled }) => (disabled ? 'not-allowed' : 'text')};
|
|
12
13
|
|
|
14
|
+
.react-datepicker-wrapper {
|
|
13
15
|
display: flex;
|
|
14
|
-
|
|
16
|
+
}
|
|
15
17
|
|
|
16
|
-
|
|
17
|
-
|
|
18
|
+
.react-datepicker {
|
|
19
|
+
font-size: 14px;
|
|
20
|
+
background-color: ${({ theme }) => theme.bgColor};
|
|
21
|
+
color: #444444;
|
|
22
|
+
border: 1px solid ${({ theme }) => theme.neutral['neutral-5']};
|
|
23
|
+
border-radius: 6.6px;
|
|
24
|
+
display: flex;
|
|
25
|
+
flex-direction: column;
|
|
26
|
+
position: relative;
|
|
27
|
+
}
|
|
18
28
|
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
border-radius: 6.6px;
|
|
27
|
-
display: flex;
|
|
28
|
-
flex-direction: column;
|
|
29
|
-
position: relative;
|
|
29
|
+
.react-datepicker__input-container {
|
|
30
|
+
border: 1px solid ${defaultThemeColor.border};
|
|
31
|
+
border-radius: 4px;
|
|
32
|
+
padding: 6px 12px;
|
|
33
|
+
display: flex;
|
|
34
|
+
align-items: center;
|
|
35
|
+
background-color: ${({ theme }) => theme.bgColor};
|
|
30
36
|
|
|
37
|
+
&:focus-within {
|
|
38
|
+
border: 1px solid ${({ theme }) => theme.variant['primary-1']};
|
|
39
|
+
outline: none;
|
|
31
40
|
}
|
|
32
|
-
|
|
33
|
-
.react-datepicker__input-container{
|
|
34
|
-
border: 1px solid ${defaultThemeColor.border};
|
|
35
|
-
border-radius: 4px;
|
|
36
|
-
padding: 6px 12px;
|
|
37
|
-
display: flex;
|
|
38
|
-
align-items: center;
|
|
39
|
-
background-color: ${({ theme }) => theme.bgColor};
|
|
40
|
-
|
|
41
|
-
&:focus-within {
|
|
42
|
-
border: 1px solid ${({ theme }) => theme.variant['primary-1']};
|
|
43
|
-
outline: none;
|
|
44
|
-
}
|
|
45
|
-
|
|
46
|
-
input {
|
|
47
|
-
border: none;
|
|
48
|
-
outline: none;
|
|
49
|
-
width:100%;
|
|
50
|
-
cursor: ${({ disabled }) => disabled ? 'not-allowed' : 'text'};
|
|
51
41
|
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
display: none;
|
|
58
|
-
}
|
|
59
|
-
}
|
|
60
|
-
|
|
61
|
-
.react-datepicker__month-container {
|
|
62
|
-
display: flex;
|
|
63
|
-
flex-direction: column;
|
|
64
|
-
flex-wrap: wrap;
|
|
65
|
-
align-content: center;
|
|
66
|
-
justify-content: center;
|
|
67
|
-
align-items: center;
|
|
42
|
+
input {
|
|
43
|
+
border: none;
|
|
44
|
+
outline: none;
|
|
45
|
+
width: 100%;
|
|
46
|
+
cursor: ${({ disabled }) => (disabled ? 'not-allowed' : 'text')};
|
|
68
47
|
}
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
|
|
72
|
-
|
|
73
|
-
|
|
74
|
-
|
|
75
|
-
.react-datepicker-year-header,
|
|
76
|
-
.react-datepicker__navigation {
|
|
77
|
-
display: none;
|
|
48
|
+
}
|
|
49
|
+
|
|
50
|
+
.react-datepicker__triangle {
|
|
51
|
+
::before,
|
|
52
|
+
::after {
|
|
53
|
+
display: none;
|
|
78
54
|
}
|
|
79
|
-
|
|
80
|
-
|
|
55
|
+
}
|
|
56
|
+
|
|
57
|
+
.react-datepicker__month-container {
|
|
58
|
+
display: flex;
|
|
59
|
+
flex-direction: column;
|
|
60
|
+
flex-wrap: wrap;
|
|
61
|
+
align-content: center;
|
|
62
|
+
justify-content: center;
|
|
63
|
+
align-items: center;
|
|
64
|
+
}
|
|
65
|
+
.react-datepicker__month-select {
|
|
66
|
+
font-size: 16px;
|
|
67
|
+
border: none;
|
|
68
|
+
}
|
|
69
|
+
.react-datepicker__current-month,
|
|
70
|
+
.react-datepicker-time__header,
|
|
71
|
+
.react-datepicker-year-header,
|
|
72
|
+
.react-datepicker__navigation {
|
|
73
|
+
display: none;
|
|
74
|
+
}
|
|
75
|
+
.react-datepicker__day--outside-month {
|
|
76
|
+
color: #a9b1b8 !important;
|
|
77
|
+
}
|
|
78
|
+
.react-datepicker__header__dropdown,
|
|
79
|
+
.react-datepicker__header__dropdown--select {
|
|
80
|
+
margin-top: 16px;
|
|
81
|
+
margin-bottom: 30px;
|
|
82
|
+
border: none;
|
|
83
|
+
}
|
|
84
|
+
.react-datepicker__header {
|
|
85
|
+
text-align: center;
|
|
86
|
+
border-bottom: none;
|
|
87
|
+
border-top-left-radius: 6.6px;
|
|
88
|
+
border-top-right-radius: 6.6px;
|
|
89
|
+
padding: 0;
|
|
90
|
+
position: relative;
|
|
91
|
+
background-color: ${({ theme }) => theme.bgColor};
|
|
92
|
+
}
|
|
93
|
+
.react-datepicker__year-select {
|
|
94
|
+
border: none;
|
|
95
|
+
|
|
96
|
+
&::focus-visible {
|
|
97
|
+
border: none;
|
|
81
98
|
}
|
|
82
|
-
|
|
83
|
-
|
|
84
|
-
|
|
85
|
-
|
|
99
|
+
}
|
|
100
|
+
.react-datepicker__day {
|
|
101
|
+
cursor: pointer;
|
|
102
|
+
padding: 3px;
|
|
103
|
+
color: ${({ theme }) => theme.textColor};
|
|
104
|
+
}
|
|
105
|
+
.react-datepicker__day--selected,
|
|
106
|
+
.react-datepicker__day--keyboard-selected {
|
|
107
|
+
background: ${({ theme }) => theme.variant['primary-1']};
|
|
108
|
+
border-radius: 2.4px;
|
|
109
|
+
color: ${({ theme }) => theme.bgColor};
|
|
110
|
+
}
|
|
111
|
+
.react-datepicker__day-names,
|
|
112
|
+
.react-datepicker__day-name {
|
|
113
|
+
color: #9d9d9d;
|
|
114
|
+
padding: 3px;
|
|
115
|
+
text-transform: uppercase;
|
|
116
|
+
font-size: 12px !important;
|
|
117
|
+
}
|
|
118
|
+
|
|
119
|
+
.react-datepicker__day-names {
|
|
120
|
+
margin-bottom: -14px;
|
|
121
|
+
}
|
|
122
|
+
|
|
123
|
+
.calender-year {
|
|
124
|
+
select {
|
|
125
|
+
border: none;
|
|
126
|
+
cursor: pointer;
|
|
127
|
+
outline: none;
|
|
128
|
+
font-size: 16px;
|
|
129
|
+
font-weight: bold;
|
|
130
|
+
&:focus {
|
|
131
|
+
outline: none;
|
|
86
132
|
border: none;
|
|
133
|
+
}
|
|
87
134
|
}
|
|
88
|
-
|
|
89
|
-
|
|
90
|
-
|
|
91
|
-
|
|
92
|
-
|
|
93
|
-
|
|
94
|
-
|
|
95
|
-
|
|
96
|
-
|
|
97
|
-
|
|
98
|
-
|
|
99
|
-
|
|
100
|
-
|
|
101
|
-
|
|
102
|
-
}
|
|
103
|
-
}
|
|
104
|
-
.react-datepicker__day {
|
|
105
|
-
cursor: pointer;
|
|
106
|
-
padding: 3px;
|
|
107
|
-
color: ${({ theme }) => theme.textColor}
|
|
108
|
-
}
|
|
109
|
-
.react-datepicker__day--selected,
|
|
110
|
-
.react-datepicker__day--keyboard-selected {
|
|
111
|
-
background: ${({ theme }) => theme.variant['primary-1']};
|
|
112
|
-
border-radius: 2.4px;
|
|
113
|
-
color: ${({ theme }) => theme.bgColor}
|
|
114
|
-
}
|
|
115
|
-
.react-datepicker__day-names ,
|
|
116
|
-
.react-datepicker__day-name {
|
|
117
|
-
color: #9D9D9D;
|
|
118
|
-
padding: 3px;
|
|
119
|
-
text-transform: uppercase;
|
|
120
|
-
font-size: 12px !important;
|
|
121
|
-
}
|
|
122
|
-
|
|
123
|
-
.react-datepicker__day-names{
|
|
124
|
-
margin-bottom: -14px;
|
|
125
|
-
}
|
|
126
|
-
|
|
127
|
-
.calender-year{
|
|
128
|
-
select{
|
|
129
|
-
border: none;
|
|
130
|
-
cursor: pointer;
|
|
131
|
-
outline: none;
|
|
132
|
-
font-size: 16px;
|
|
133
|
-
font-weight:bold ;
|
|
134
|
-
&:focus{
|
|
135
|
-
outline: none;
|
|
136
|
-
border: none;
|
|
137
|
-
}
|
|
138
|
-
}
|
|
139
|
-
}
|
|
135
|
+
}
|
|
136
|
+
.react-datepicker__day-name,
|
|
137
|
+
.react-datepicker__day,
|
|
138
|
+
.react-datepicker__time-name {
|
|
139
|
+
width: 30.2px;
|
|
140
|
+
line-height: 27.2px;
|
|
141
|
+
text-align: center;
|
|
142
|
+
margin: 2.656px;
|
|
143
|
+
}
|
|
144
|
+
|
|
145
|
+
.react-datepicker::before,
|
|
146
|
+
.react-datepicker::after {
|
|
147
|
+
box-sizing: initial !important;
|
|
148
|
+
}
|
|
140
149
|
`;
|
|
141
150
|
|
|
142
151
|
Wrapper.defaultProps = {
|
|
143
|
-
theme: defaultThemeColor
|
|
144
|
-
}
|
|
152
|
+
theme: defaultThemeColor,
|
|
153
|
+
};
|
|
145
154
|
|
|
146
155
|
const CalendarHeaderDiv = styled.div`
|
|
147
|
-
|
|
148
|
-
|
|
149
|
-
|
|
150
|
-
|
|
151
|
-
|
|
152
|
-
|
|
156
|
+
display: flex;
|
|
157
|
+
align-items: flex-start;
|
|
158
|
+
justify-content: center;
|
|
159
|
+
font-size: 16px;
|
|
160
|
+
padding-top: 12px;
|
|
161
|
+
padding-bottom: 15px;
|
|
153
162
|
`;
|
|
154
163
|
|
|
155
164
|
const IconDiv = styled.div`
|
|
156
|
-
|
|
157
|
-
|
|
158
|
-
|
|
165
|
+
display: flex;
|
|
166
|
+
justify-content: center;
|
|
167
|
+
margin-left: 6px;
|
|
159
168
|
`;
|
|
160
169
|
|
|
161
|
-
|
|
162
|
-
const DropDownContainer = styled("div")`
|
|
170
|
+
const DropDownContainer = styled('div')`
|
|
163
171
|
width: inherit;
|
|
164
172
|
`;
|
|
165
173
|
|
|
166
|
-
const DropDownHeader = styled(
|
|
174
|
+
const DropDownHeader = styled('div')`
|
|
167
175
|
display: flex;
|
|
168
176
|
flex-direction: row;
|
|
169
177
|
cursor: pointer;
|
|
170
178
|
`;
|
|
171
179
|
|
|
172
|
-
const DropDownListContainer = styled(
|
|
173
|
-
|
|
174
|
-
|
|
175
|
-
|
|
176
|
-
|
|
177
|
-
|
|
178
|
-
|
|
179
|
-
|
|
180
|
-
|
|
181
|
-
|
|
182
|
-
|
|
180
|
+
const DropDownListContainer = styled('div')`
|
|
181
|
+
margin-top: 8px;
|
|
182
|
+
position: absolute;
|
|
183
|
+
z-index: 100;
|
|
184
|
+
width: inherit;
|
|
185
|
+
margin-left: -20px;
|
|
186
|
+
overflow-y: hidden;
|
|
187
|
+
overflow-x: hidden;
|
|
188
|
+
background: white;
|
|
189
|
+
box-shadow: 0px 6px 20px rgb(56 66 100 / 15%);
|
|
190
|
+
border-radius: 4px;
|
|
183
191
|
`;
|
|
184
192
|
|
|
185
|
-
const DropDownList = styled(
|
|
186
|
-
|
|
187
|
-
|
|
188
|
-
|
|
189
|
-
|
|
190
|
-
|
|
191
|
-
|
|
192
|
-
|
|
193
|
-
|
|
194
|
-
|
|
195
|
-
|
|
196
|
-
|
|
197
|
-
|
|
198
|
-
|
|
199
|
-
|
|
200
|
-
|
|
201
|
-
|
|
202
|
-
|
|
203
|
-
|
|
204
|
-
|
|
205
|
-
|
|
206
|
-
|
|
207
|
-
|
|
208
|
-
|
|
209
|
-
|
|
210
|
-
|
|
211
|
-
|
|
212
|
-
// margin: 5px;
|
|
213
|
-
background-color:${({ theme }) => theme.neutral['neutral-4']};
|
|
214
|
-
border-radius: 10px;
|
|
215
|
-
}
|
|
193
|
+
const DropDownList = styled('ul')`
|
|
194
|
+
list-style: none;
|
|
195
|
+
padding: 0;
|
|
196
|
+
margin: 12px;
|
|
197
|
+
margin-right: 8px;
|
|
198
|
+
padding-bottom: 10px;
|
|
199
|
+
width: 132px;
|
|
200
|
+
height: 178px;
|
|
201
|
+
overflow-y: scroll;
|
|
202
|
+
overflow-x: hidden;
|
|
203
|
+
|
|
204
|
+
::-webkit-scrollbar {
|
|
205
|
+
width: 6px;
|
|
206
|
+
}
|
|
207
|
+
|
|
208
|
+
::-webkit-scrollbar-thumb {
|
|
209
|
+
background-clip: padding-box;
|
|
210
|
+
border-radius: 10px;
|
|
211
|
+
background-color: ${({ theme }) => theme.neutral['neutral-3']};
|
|
212
|
+
}
|
|
213
|
+
|
|
214
|
+
/* Track */
|
|
215
|
+
::-webkit-scrollbar-track {
|
|
216
|
+
// margin: 5px;
|
|
217
|
+
background-color: ${({ theme }) => theme.neutral['neutral-4']};
|
|
218
|
+
border-radius: 10px;
|
|
219
|
+
}
|
|
216
220
|
`;
|
|
217
221
|
DropDownList.defaultProps = {
|
|
218
222
|
theme: defaultThemeColor,
|
|
219
|
-
}
|
|
223
|
+
};
|
|
220
224
|
|
|
221
|
-
const ListItem = styled(
|
|
222
|
-
|
|
223
|
-
|
|
224
|
-
|
|
225
|
-
|
|
226
|
-
|
|
227
|
-
|
|
228
|
-
|
|
229
|
-
|
|
225
|
+
const ListItem = styled('li')`
|
|
226
|
+
text-align: left;
|
|
227
|
+
font-style: normal;
|
|
228
|
+
font-weight: normal;
|
|
229
|
+
font-size: 14px;
|
|
230
|
+
line-height: 17px;
|
|
231
|
+
padding-left: 12px;
|
|
232
|
+
padding-bottom: 12px;
|
|
233
|
+
cursor: pointer;
|
|
230
234
|
`;
|
|
231
235
|
|
|
232
236
|
export const DateSelect = ({ startDate, setStartDate, disabled, ...props }) => {
|
|
233
237
|
const theme = defaultThemeColor;
|
|
234
238
|
|
|
235
|
-
const months = [
|
|
239
|
+
const months = [
|
|
240
|
+
'January',
|
|
241
|
+
'February',
|
|
242
|
+
'March',
|
|
243
|
+
'April',
|
|
244
|
+
'May',
|
|
245
|
+
'June',
|
|
246
|
+
'July',
|
|
247
|
+
'August',
|
|
248
|
+
'September',
|
|
249
|
+
'October',
|
|
250
|
+
'November',
|
|
251
|
+
'December',
|
|
252
|
+
];
|
|
236
253
|
var years = [];
|
|
237
|
-
for (var i = 2010; i <=
|
|
254
|
+
for (var i = 2010; i <= new Date().getFullYear() + 10; i++) {
|
|
238
255
|
years.push(i);
|
|
239
256
|
}
|
|
240
257
|
|
|
@@ -245,58 +262,55 @@ export const DateSelect = ({ startDate, setStartDate, disabled, ...props }) => {
|
|
|
245
262
|
const [hover, setHover] = useState(false);
|
|
246
263
|
const [hoverYear, setHoverYear] = useState(false);
|
|
247
264
|
const [selectedYear, setSelectedYear] = useState(startDate.getFullYear());
|
|
248
|
-
const [selectedMonth, setSelectedMonth] = useState(
|
|
265
|
+
const [selectedMonth, setSelectedMonth] = useState(
|
|
266
|
+
months[startDate.getMonth()]
|
|
267
|
+
);
|
|
249
268
|
|
|
250
269
|
useEffect(() => {
|
|
251
270
|
setSelectedMonth(months[startDate.getMonth()]);
|
|
252
271
|
setSelectedYear(startDate.getFullYear());
|
|
253
|
-
}, [startDate])
|
|
254
|
-
|
|
272
|
+
}, [startDate]);
|
|
255
273
|
|
|
256
274
|
useEffect(() => {
|
|
257
|
-
document.addEventListener(
|
|
275
|
+
document.addEventListener('click', handleClickOutsideMonth, true);
|
|
258
276
|
|
|
259
277
|
return () => {
|
|
260
|
-
document.removeEventListener(
|
|
278
|
+
document.removeEventListener('click', handleClickOutsideMonth, true);
|
|
261
279
|
};
|
|
262
280
|
}, []);
|
|
263
281
|
|
|
264
282
|
const handleClickOutsideMonth = (event) => {
|
|
265
283
|
if (refMonth.current && !refMonth.current.contains(event.target)) {
|
|
266
|
-
setIsOpen(false)
|
|
284
|
+
setIsOpen(false);
|
|
267
285
|
}
|
|
268
286
|
};
|
|
269
287
|
|
|
270
288
|
const handleClickOutsideYear = (event) => {
|
|
271
289
|
if (refYear.current && !refYear.current.contains(event.target)) {
|
|
272
|
-
setIsOpenYear(false)
|
|
290
|
+
setIsOpenYear(false);
|
|
273
291
|
}
|
|
274
292
|
};
|
|
275
293
|
|
|
276
294
|
useEffect(() => {
|
|
277
|
-
document.addEventListener(
|
|
295
|
+
document.addEventListener('click', handleClickOutsideYear, true);
|
|
278
296
|
|
|
279
297
|
return () => {
|
|
280
|
-
document.removeEventListener(
|
|
298
|
+
document.removeEventListener('click', handleClickOutsideYear, true);
|
|
281
299
|
};
|
|
282
300
|
}, []);
|
|
283
301
|
|
|
284
|
-
|
|
285
302
|
return (
|
|
286
303
|
<Wrapper disabled={disabled} {...props}>
|
|
287
304
|
<DatePicker
|
|
288
305
|
selected={startDate}
|
|
306
|
+
dateFormat='dd/MM/yyyy'
|
|
289
307
|
useWeekdaysShort={true}
|
|
290
308
|
onChange={(date) => setStartDate(date)}
|
|
291
309
|
placeholderText={'select date'}
|
|
292
310
|
adjustDateOnChange
|
|
293
311
|
disabled={disabled}
|
|
294
|
-
dropdownMode=
|
|
295
|
-
renderCustomHeader={({
|
|
296
|
-
date,
|
|
297
|
-
changeYear,
|
|
298
|
-
changeMonth,
|
|
299
|
-
}) => {
|
|
312
|
+
dropdownMode='select'
|
|
313
|
+
renderCustomHeader={({ date, changeYear, changeMonth }) => {
|
|
300
314
|
return (
|
|
301
315
|
<CalendarHeaderDiv>
|
|
302
316
|
<div style={{ display: 'flex' }}>
|
|
@@ -304,35 +318,51 @@ export const DateSelect = ({ startDate, setStartDate, disabled, ...props }) => {
|
|
|
304
318
|
<DropDownHeader
|
|
305
319
|
onClick={() => {
|
|
306
320
|
setIsOpen(!isOpen);
|
|
307
|
-
setIsOpenYear(false)
|
|
308
|
-
}}
|
|
321
|
+
setIsOpenYear(false);
|
|
322
|
+
}}
|
|
323
|
+
>
|
|
309
324
|
<span
|
|
310
325
|
onMouseEnter={() => setHover(true)}
|
|
311
326
|
onMouseLeave={() => setHover(false)}
|
|
312
|
-
style={{
|
|
327
|
+
style={{
|
|
328
|
+
color: `${hover ? theme.variant['primary-1'] : theme.textColor
|
|
329
|
+
}`,
|
|
330
|
+
}}
|
|
331
|
+
>
|
|
313
332
|
{months[date.getMonth()]}
|
|
314
333
|
</span>
|
|
315
334
|
<IconDiv>
|
|
316
|
-
<Icon
|
|
335
|
+
<Icon
|
|
336
|
+
icon='triangle-down'
|
|
317
337
|
color={hover ? 'blue' : 'black'}
|
|
318
|
-
size={7}
|
|
338
|
+
size={7}
|
|
339
|
+
/>
|
|
319
340
|
</IconDiv>
|
|
320
341
|
</DropDownHeader>
|
|
321
342
|
{isOpen && (
|
|
322
343
|
<DropDownListContainer>
|
|
323
344
|
<DropDownList onMouseEnter={() => setHover(true)}>
|
|
324
345
|
{months.map((option, index) => (
|
|
325
|
-
<ListItem
|
|
346
|
+
<ListItem
|
|
347
|
+
selectedMonth={selectedMonth}
|
|
326
348
|
onClick={() => {
|
|
327
349
|
setHover(false);
|
|
328
350
|
changeMonth(index);
|
|
329
351
|
setIsOpen(false);
|
|
330
352
|
setSelectedMonth(months[index]);
|
|
331
353
|
}}
|
|
332
|
-
key={Math.random()}
|
|
354
|
+
key={Math.random()}
|
|
355
|
+
>
|
|
333
356
|
<span
|
|
334
|
-
style={{
|
|
335
|
-
|
|
357
|
+
style={{
|
|
358
|
+
color: `${selectedMonth === option
|
|
359
|
+
? theme.variant['primary-1']
|
|
360
|
+
: theme.textColor
|
|
361
|
+
}`,
|
|
362
|
+
}}
|
|
363
|
+
>
|
|
364
|
+
{option}
|
|
365
|
+
</span>
|
|
336
366
|
</ListItem>
|
|
337
367
|
))}
|
|
338
368
|
</DropDownList>
|
|
@@ -344,17 +374,27 @@ export const DateSelect = ({ startDate, setStartDate, disabled, ...props }) => {
|
|
|
344
374
|
style={{ marginLeft: '28px' }}
|
|
345
375
|
onClick={() => {
|
|
346
376
|
setIsOpenYear(!isOpenYear);
|
|
347
|
-
setIsOpen(false)
|
|
348
|
-
}}
|
|
349
|
-
|
|
377
|
+
setIsOpen(false);
|
|
378
|
+
}}
|
|
379
|
+
>
|
|
380
|
+
<span
|
|
381
|
+
onMouseEnter={() => setHoverYear(true)}
|
|
350
382
|
onMouseLeave={() => setHoverYear(false)}
|
|
351
|
-
style={{
|
|
352
|
-
|
|
383
|
+
style={{
|
|
384
|
+
color: `${hoverYear
|
|
385
|
+
? theme.variant['primary-1']
|
|
386
|
+
: theme.textColor
|
|
387
|
+
}`,
|
|
388
|
+
}}
|
|
389
|
+
>
|
|
390
|
+
{date.getFullYear()}
|
|
353
391
|
</span>
|
|
354
392
|
<IconDiv>
|
|
355
|
-
<Icon
|
|
393
|
+
<Icon
|
|
394
|
+
icon='triangle-down'
|
|
356
395
|
color={hoverYear ? 'blue' : 'black'}
|
|
357
|
-
size={7}
|
|
396
|
+
size={7}
|
|
397
|
+
/>
|
|
358
398
|
</IconDiv>
|
|
359
399
|
</DropDownHeader>
|
|
360
400
|
{isOpenYear && (
|
|
@@ -368,9 +408,16 @@ export const DateSelect = ({ startDate, setStartDate, disabled, ...props }) => {
|
|
|
368
408
|
setSelectedYear(option);
|
|
369
409
|
setIsOpenYear(false);
|
|
370
410
|
}}
|
|
371
|
-
key={Math.random()}
|
|
411
|
+
key={Math.random()}
|
|
412
|
+
>
|
|
372
413
|
<span
|
|
373
|
-
style={{
|
|
414
|
+
style={{
|
|
415
|
+
color: `${selectedYear === option
|
|
416
|
+
? theme.variant['primary-1']
|
|
417
|
+
: theme.textColor
|
|
418
|
+
}`,
|
|
419
|
+
}}
|
|
420
|
+
>
|
|
374
421
|
{option}
|
|
375
422
|
</span>
|
|
376
423
|
</ListItem>
|
|
@@ -381,7 +428,7 @@ export const DateSelect = ({ startDate, setStartDate, disabled, ...props }) => {
|
|
|
381
428
|
</DropDownContainer>
|
|
382
429
|
</div>
|
|
383
430
|
</CalendarHeaderDiv>
|
|
384
|
-
)
|
|
431
|
+
);
|
|
385
432
|
}}
|
|
386
433
|
/>
|
|
387
434
|
</Wrapper>
|
|
@@ -400,11 +447,11 @@ DateSelect.propTypes = {
|
|
|
400
447
|
/**
|
|
401
448
|
* Disable property of DateSelect
|
|
402
449
|
*/
|
|
403
|
-
disabled: PropTypes.bool
|
|
404
|
-
}
|
|
450
|
+
disabled: PropTypes.bool,
|
|
451
|
+
};
|
|
405
452
|
|
|
406
453
|
DateSelect.defaultProps = {
|
|
407
454
|
startDate: '',
|
|
408
455
|
setStartDate: () => { },
|
|
409
|
-
disabled: false
|
|
410
|
-
}
|
|
456
|
+
disabled: false,
|
|
457
|
+
};
|