@tsiky/components-r19 1.2.0 → 1.3.0
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 +1 -1
- package/src/components/DynamicInput/DynamicInput.module.css +125 -126
- package/src/components/DynamicInput/input/assets/SelectInput.module.css +1 -1
- package/src/components/DynamicTable/TableauDynamique.module.css +4 -43
- package/src/components/PeriodSelect/PeriodSelect.module.css +64 -65
- package/src/components/PeriodSelect/PeriodSelect.tsx +48 -42
package/package.json
CHANGED
|
@@ -1,126 +1,125 @@
|
|
|
1
|
-
/* DynamicInput.module.css */
|
|
2
|
-
.container {
|
|
3
|
-
padding: 20px;
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
.
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
border:
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
|
|
72
|
-
|
|
73
|
-
|
|
74
|
-
|
|
75
|
-
|
|
76
|
-
|
|
77
|
-
|
|
78
|
-
|
|
79
|
-
|
|
80
|
-
|
|
81
|
-
|
|
82
|
-
|
|
83
|
-
|
|
84
|
-
|
|
85
|
-
|
|
86
|
-
|
|
87
|
-
|
|
88
|
-
|
|
89
|
-
|
|
90
|
-
|
|
91
|
-
|
|
92
|
-
|
|
93
|
-
|
|
94
|
-
|
|
95
|
-
|
|
96
|
-
|
|
97
|
-
background-
|
|
98
|
-
background-
|
|
99
|
-
background-
|
|
100
|
-
|
|
101
|
-
|
|
102
|
-
|
|
103
|
-
|
|
104
|
-
|
|
105
|
-
|
|
106
|
-
|
|
107
|
-
|
|
108
|
-
|
|
109
|
-
|
|
110
|
-
|
|
111
|
-
|
|
112
|
-
|
|
113
|
-
|
|
114
|
-
|
|
115
|
-
|
|
116
|
-
|
|
117
|
-
outline: 2px
|
|
118
|
-
|
|
119
|
-
|
|
120
|
-
|
|
121
|
-
|
|
122
|
-
|
|
123
|
-
|
|
124
|
-
|
|
125
|
-
|
|
126
|
-
}
|
|
1
|
+
/* DynamicInput.module.css */
|
|
2
|
+
.container {
|
|
3
|
+
padding: 20px;
|
|
4
|
+
border-radius: 8px;
|
|
5
|
+
}
|
|
6
|
+
|
|
7
|
+
.fieldGroup {
|
|
8
|
+
margin-bottom: 1.5rem;
|
|
9
|
+
}
|
|
10
|
+
|
|
11
|
+
.fieldLabel {
|
|
12
|
+
display: block;
|
|
13
|
+
margin-bottom: 0.5rem;
|
|
14
|
+
font-weight: 500;
|
|
15
|
+
color: #212529;
|
|
16
|
+
}
|
|
17
|
+
|
|
18
|
+
.required::after {
|
|
19
|
+
content: ' *';
|
|
20
|
+
color: #dc3545;
|
|
21
|
+
}
|
|
22
|
+
|
|
23
|
+
.fieldInput {
|
|
24
|
+
width: 100%;
|
|
25
|
+
padding: 0.5rem 1rem;
|
|
26
|
+
border: 1px solid #6c757d;
|
|
27
|
+
border-radius: 0.375rem;
|
|
28
|
+
transition:
|
|
29
|
+
border-color 0.15s ease-in-out,
|
|
30
|
+
box-shadow 0.15s ease-in-out;
|
|
31
|
+
line-height: 1.5;
|
|
32
|
+
font-size: 1rem;
|
|
33
|
+
background-color: #f8f9fa;
|
|
34
|
+
}
|
|
35
|
+
|
|
36
|
+
.fieldInput:focus {
|
|
37
|
+
border-color: #0d6efd;
|
|
38
|
+
outline: 0;
|
|
39
|
+
box-shadow: 0 0 0 0.25rem rgba(13, 110, 253, 0.25);
|
|
40
|
+
}
|
|
41
|
+
|
|
42
|
+
.fieldInvalid {
|
|
43
|
+
border-color: #dc3545;
|
|
44
|
+
}
|
|
45
|
+
|
|
46
|
+
.fieldValid {
|
|
47
|
+
border-color: #198754;
|
|
48
|
+
}
|
|
49
|
+
|
|
50
|
+
.fieldError {
|
|
51
|
+
display: block;
|
|
52
|
+
margin-top: 0.25rem;
|
|
53
|
+
font-size: 0.875rem;
|
|
54
|
+
color: #dc3545;
|
|
55
|
+
font-weight: 500;
|
|
56
|
+
}
|
|
57
|
+
|
|
58
|
+
/* Styles spécifiques pour les radios */
|
|
59
|
+
.radioGroup {
|
|
60
|
+
display: flex;
|
|
61
|
+
flex-direction: column;
|
|
62
|
+
gap: 0.5rem;
|
|
63
|
+
background-color: transparent;
|
|
64
|
+
padding: 0;
|
|
65
|
+
}
|
|
66
|
+
|
|
67
|
+
.radioGroup .form-check {
|
|
68
|
+
display: flex;
|
|
69
|
+
align-items: center;
|
|
70
|
+
gap: 0.5rem;
|
|
71
|
+
background-color: transparent;
|
|
72
|
+
margin-bottom: 0;
|
|
73
|
+
}
|
|
74
|
+
|
|
75
|
+
.radioGroup .form-check-label {
|
|
76
|
+
color: #212529;
|
|
77
|
+
}
|
|
78
|
+
|
|
79
|
+
/* Styles pour les checkboxes */
|
|
80
|
+
.checkboxGroup {
|
|
81
|
+
display: flex;
|
|
82
|
+
flex-direction: column;
|
|
83
|
+
gap: 0.5rem;
|
|
84
|
+
}
|
|
85
|
+
|
|
86
|
+
.checkboxGroup .form-check {
|
|
87
|
+
display: flex;
|
|
88
|
+
align-items: center;
|
|
89
|
+
gap: 0.5rem;
|
|
90
|
+
margin-bottom: 0;
|
|
91
|
+
}
|
|
92
|
+
|
|
93
|
+
/* Styles spécifiques pour les selects */
|
|
94
|
+
.selectInput select {
|
|
95
|
+
appearance: none;
|
|
96
|
+
background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpolyline points='6 9 12 15 18 9'%3e%3c/polyline%3e%3c/svg%3e");
|
|
97
|
+
background-repeat: no-repeat;
|
|
98
|
+
background-position: right 0.75rem center;
|
|
99
|
+
background-size: 1rem;
|
|
100
|
+
}
|
|
101
|
+
|
|
102
|
+
/* Styles pour les textareas */
|
|
103
|
+
.textareaInput textarea {
|
|
104
|
+
resize: vertical;
|
|
105
|
+
min-height: 100px;
|
|
106
|
+
}
|
|
107
|
+
|
|
108
|
+
/* Styles pour les champs désactivés */
|
|
109
|
+
.fieldInput:disabled {
|
|
110
|
+
background-color: rgba(0, 0, 0, 0.05);
|
|
111
|
+
cursor: not-allowed;
|
|
112
|
+
}
|
|
113
|
+
|
|
114
|
+
/* Amélioration de l'accessibilité pour le focus */
|
|
115
|
+
.fieldInput:focus-visible {
|
|
116
|
+
outline: 2px solid #0d6efd;
|
|
117
|
+
outline-offset: 2px;
|
|
118
|
+
}
|
|
119
|
+
|
|
120
|
+
/* Styles pour la grille dans AllInputs */
|
|
121
|
+
.gridContainer {
|
|
122
|
+
display: grid;
|
|
123
|
+
gap: 20px;
|
|
124
|
+
grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
|
|
125
|
+
}
|
|
@@ -79,16 +79,13 @@
|
|
|
79
79
|
.headerCell {
|
|
80
80
|
padding: 12px 14px;
|
|
81
81
|
cursor: pointer;
|
|
82
|
-
text-align: left;
|
|
83
82
|
letter-spacing: 0.2px;
|
|
84
83
|
white-space: nowrap;
|
|
85
84
|
font-size: 13px;
|
|
86
|
-
font-weight: 600;
|
|
87
85
|
vertical-align: middle;
|
|
88
|
-
|
|
89
|
-
.
|
|
90
|
-
|
|
91
|
-
font-weight: 900;
|
|
86
|
+
background: transparent;
|
|
87
|
+
border-bottom: 1px solid rgba(230, 233, 239, 0.6);
|
|
88
|
+
text-align: center;
|
|
92
89
|
}
|
|
93
90
|
.table tbody td {
|
|
94
91
|
padding: 10px 14px;
|
|
@@ -157,7 +154,6 @@
|
|
|
157
154
|
border: 1px solid #e5e7eb;
|
|
158
155
|
border-radius: 999px;
|
|
159
156
|
font-size: var(--small-font);
|
|
160
|
-
font-weight: 600;
|
|
161
157
|
cursor: pointer;
|
|
162
158
|
transition: all 0.12s ease-in-out;
|
|
163
159
|
box-shadow: 0 1px 3px rgba(15, 23, 42, 0.03);
|
|
@@ -193,7 +189,6 @@
|
|
|
193
189
|
/* ---------- NOUVELLES RÈGLES POUR LES LABELS DE TRI ---------- */
|
|
194
190
|
.sortItemLabel {
|
|
195
191
|
font-size: 13px;
|
|
196
|
-
font-weight: 600;
|
|
197
192
|
color: #111827;
|
|
198
193
|
white-space: nowrap;
|
|
199
194
|
overflow: hidden;
|
|
@@ -207,7 +202,6 @@
|
|
|
207
202
|
.uppercaseSmall {
|
|
208
203
|
font-size: 11px;
|
|
209
204
|
letter-spacing: 0.4px;
|
|
210
|
-
font-weight: 700;
|
|
211
205
|
line-height: 1;
|
|
212
206
|
}
|
|
213
207
|
|
|
@@ -321,7 +315,6 @@
|
|
|
321
315
|
}
|
|
322
316
|
.filterLabel {
|
|
323
317
|
font-size: var(--xsmall-font);
|
|
324
|
-
font-weight: 600;
|
|
325
318
|
color: #111827;
|
|
326
319
|
}
|
|
327
320
|
.filterInput,
|
|
@@ -347,7 +340,6 @@
|
|
|
347
340
|
align-items: center;
|
|
348
341
|
gap: 8px;
|
|
349
342
|
font-size: 12px;
|
|
350
|
-
font-weight: 600;
|
|
351
343
|
color: #374151;
|
|
352
344
|
background: #f1f5f9;
|
|
353
345
|
border-radius: 18px;
|
|
@@ -366,7 +358,6 @@
|
|
|
366
358
|
border: none;
|
|
367
359
|
padding: 10px 14px;
|
|
368
360
|
border-radius: 10px;
|
|
369
|
-
font-weight: 700;
|
|
370
361
|
cursor: pointer;
|
|
371
362
|
font-size: 13px;
|
|
372
363
|
}
|
|
@@ -378,7 +369,6 @@
|
|
|
378
369
|
border-radius: 10px;
|
|
379
370
|
cursor: pointer;
|
|
380
371
|
font-size: var(--xsmall-font);
|
|
381
|
-
font-weight: 600;
|
|
382
372
|
}
|
|
383
373
|
|
|
384
374
|
@media (max-width: 680px) {
|
|
@@ -426,7 +416,6 @@
|
|
|
426
416
|
justify-content: space-between;
|
|
427
417
|
align-items: center;
|
|
428
418
|
padding: 12px 16px;
|
|
429
|
-
font-weight: 700;
|
|
430
419
|
font-size: var(--xsmall-font);
|
|
431
420
|
color: #374151;
|
|
432
421
|
}
|
|
@@ -473,7 +462,6 @@
|
|
|
473
462
|
display: block;
|
|
474
463
|
line-height: 1;
|
|
475
464
|
font-size: 13px;
|
|
476
|
-
font-weight: 400;
|
|
477
465
|
color: #111827;
|
|
478
466
|
max-width: 100%;
|
|
479
467
|
}
|
|
@@ -503,7 +491,6 @@
|
|
|
503
491
|
|
|
504
492
|
.sortItemLabel {
|
|
505
493
|
font-size: 13px;
|
|
506
|
-
font-weight: 600;
|
|
507
494
|
color: #111827;
|
|
508
495
|
white-space: nowrap;
|
|
509
496
|
overflow: hidden;
|
|
@@ -613,7 +600,6 @@
|
|
|
613
600
|
}
|
|
614
601
|
}
|
|
615
602
|
.sortDropdownHeader {
|
|
616
|
-
font-weight: 700;
|
|
617
603
|
font-size: var(--xsmall-font);
|
|
618
604
|
color: #374151;
|
|
619
605
|
margin-bottom: 8px;
|
|
@@ -702,7 +688,6 @@
|
|
|
702
688
|
align-items: center;
|
|
703
689
|
}
|
|
704
690
|
.pageSizeLabel {
|
|
705
|
-
font-weight: 600;
|
|
706
691
|
color: var(--muted);
|
|
707
692
|
font-size: 13px;
|
|
708
693
|
}
|
|
@@ -757,7 +742,6 @@
|
|
|
757
742
|
.activeButton {
|
|
758
743
|
background: var(--color-primary);
|
|
759
744
|
color: #fff;
|
|
760
|
-
font-weight: 700;
|
|
761
745
|
}
|
|
762
746
|
.disabledButton {
|
|
763
747
|
opacity: 0.45;
|
|
@@ -815,10 +799,8 @@
|
|
|
815
799
|
display: flex;
|
|
816
800
|
align-items: center;
|
|
817
801
|
gap: 6px;
|
|
818
|
-
font-weight: 700;
|
|
819
802
|
}
|
|
820
803
|
.rangeSeparator {
|
|
821
|
-
font-weight: 600;
|
|
822
804
|
color: var(--muted);
|
|
823
805
|
}
|
|
824
806
|
|
|
@@ -1147,7 +1129,6 @@
|
|
|
1147
1129
|
.sortItemLabel,
|
|
1148
1130
|
.sortDropdownHeader span {
|
|
1149
1131
|
font-size: var(--controls-text-size);
|
|
1150
|
-
font-weight: 400;
|
|
1151
1132
|
color: #374151;
|
|
1152
1133
|
}
|
|
1153
1134
|
|
|
@@ -1160,17 +1141,12 @@
|
|
|
1160
1141
|
vertical-align: middle;
|
|
1161
1142
|
}
|
|
1162
1143
|
|
|
1163
|
-
.closeButton {
|
|
1164
|
-
font-weight: 400;
|
|
1165
|
-
}
|
|
1166
|
-
|
|
1167
1144
|
.filterLabel,
|
|
1168
1145
|
.buttonTextCompact,
|
|
1169
1146
|
.countCompact,
|
|
1170
1147
|
.resultCountCompact,
|
|
1171
1148
|
.activeLabelCompact {
|
|
1172
1149
|
font-size: var(--controls-text-size);
|
|
1173
|
-
font-weight: 400;
|
|
1174
1150
|
}
|
|
1175
1151
|
|
|
1176
1152
|
.filtersPanel,
|
|
@@ -1184,14 +1160,9 @@
|
|
|
1184
1160
|
font-size: var(--controls-text-size);
|
|
1185
1161
|
}
|
|
1186
1162
|
|
|
1187
|
-
.activeFilterTag {
|
|
1188
|
-
font-weight: 400;
|
|
1189
|
-
}
|
|
1190
|
-
|
|
1191
1163
|
.applyButton,
|
|
1192
1164
|
.cancelButton {
|
|
1193
1165
|
font-size: var(--controls-text-size);
|
|
1194
|
-
font-weight: 400;
|
|
1195
1166
|
}
|
|
1196
1167
|
|
|
1197
1168
|
@media (max-width: 480px) {
|
|
@@ -1215,14 +1186,12 @@
|
|
|
1215
1186
|
.sortDropdownItem {
|
|
1216
1187
|
min-width: 0;
|
|
1217
1188
|
font-size: var(--small-font);
|
|
1218
|
-
font-weight: 400;
|
|
1219
1189
|
}
|
|
1220
1190
|
|
|
1221
1191
|
.sortDropdownHeader,
|
|
1222
1192
|
.sortItemLabel,
|
|
1223
1193
|
.sortDropdownItem .sortItemLabel {
|
|
1224
1194
|
font-size: var(--small-font);
|
|
1225
|
-
font-weight: 400;
|
|
1226
1195
|
}
|
|
1227
1196
|
|
|
1228
1197
|
.columnSorterLabel {
|
|
@@ -1235,13 +1204,11 @@
|
|
|
1235
1204
|
max-width: 180px;
|
|
1236
1205
|
line-height: 1;
|
|
1237
1206
|
font-size: var(--xsmall-font);
|
|
1238
|
-
font-weight: 600;
|
|
1239
1207
|
text-transform: none;
|
|
1240
1208
|
}
|
|
1241
1209
|
|
|
1242
1210
|
.uppercaseSmall {
|
|
1243
1211
|
font-size: var(--xsmall-font);
|
|
1244
|
-
font-weight: 400;
|
|
1245
1212
|
letter-spacing: 0.4px;
|
|
1246
1213
|
text-transform: uppercase;
|
|
1247
1214
|
line-height: 1;
|
|
@@ -1255,32 +1222,26 @@
|
|
|
1255
1222
|
.sortItemLabel,
|
|
1256
1223
|
.uppercaseSmall {
|
|
1257
1224
|
font-size: var(--xsmall-font);
|
|
1258
|
-
font-weight: 400;
|
|
1259
1225
|
}
|
|
1260
1226
|
}
|
|
1261
1227
|
|
|
1262
|
-
/* ====== Header : centré par défaut & poids normal ====== */
|
|
1263
1228
|
.headerCell {
|
|
1264
1229
|
padding: 12px 14px;
|
|
1265
1230
|
cursor: pointer;
|
|
1266
1231
|
letter-spacing: 0.2px;
|
|
1267
1232
|
white-space: nowrap;
|
|
1268
1233
|
font-size: 13px;
|
|
1269
|
-
font-weight: 400; /* plus de gras */
|
|
1270
1234
|
vertical-align: middle;
|
|
1271
1235
|
background: transparent;
|
|
1272
1236
|
border-bottom: 1px solid rgba(230, 233, 239, 0.6);
|
|
1273
|
-
/* text-align will be set by alignment utility classes */
|
|
1274
1237
|
}
|
|
1275
1238
|
|
|
1276
|
-
/* centre le contenu interne proprement */
|
|
1277
1239
|
.headerContent {
|
|
1278
1240
|
display: flex;
|
|
1279
1241
|
align-items: center;
|
|
1280
|
-
justify-content: center;
|
|
1242
|
+
justify-content: center;
|
|
1281
1243
|
gap: 6px;
|
|
1282
1244
|
font-size: 13px;
|
|
1283
|
-
font-weight: 400;
|
|
1284
1245
|
line-height: 1;
|
|
1285
1246
|
}
|
|
1286
1247
|
|
|
@@ -1,65 +1,64 @@
|
|
|
1
|
-
.container {
|
|
2
|
-
display: flex;
|
|
3
|
-
align-items: center;
|
|
4
|
-
gap: 8px;
|
|
5
|
-
border-radius: 8px;
|
|
6
|
-
height: 100%;
|
|
7
|
-
}
|
|
8
|
-
|
|
9
|
-
.icon {
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
}
|
|
1
|
+
.container {
|
|
2
|
+
display: flex;
|
|
3
|
+
align-items: center;
|
|
4
|
+
gap: 8px;
|
|
5
|
+
border-radius: 8px;
|
|
6
|
+
height: 100%;
|
|
7
|
+
}
|
|
8
|
+
|
|
9
|
+
.icon {
|
|
10
|
+
display: flex;
|
|
11
|
+
flex-wrap: wrap;
|
|
12
|
+
align-items: center;
|
|
13
|
+
gap: 5px;
|
|
14
|
+
}
|
|
15
|
+
|
|
16
|
+
.icon p {
|
|
17
|
+
margin: 0;
|
|
18
|
+
padding: 0;
|
|
19
|
+
line-height: 1; /* évite décalage vertical dû au line-height */
|
|
20
|
+
font-size: 14px;
|
|
21
|
+
}
|
|
22
|
+
|
|
23
|
+
.selectWrapper {
|
|
24
|
+
display: flex;
|
|
25
|
+
align-items: center; /* centre verticalement */
|
|
26
|
+
height: 100%;
|
|
27
|
+
/* margin-top: 10px; */
|
|
28
|
+
width: 20%;
|
|
29
|
+
}
|
|
30
|
+
|
|
31
|
+
/* Large desktop */
|
|
32
|
+
@media (max-width: 1200px) {
|
|
33
|
+
.selectWrapper {
|
|
34
|
+
width: 35%;
|
|
35
|
+
}
|
|
36
|
+
}
|
|
37
|
+
|
|
38
|
+
/* Tablet landscape */
|
|
39
|
+
@media (max-width: 992px) {
|
|
40
|
+
.selectWrapper {
|
|
41
|
+
width: 45%;
|
|
42
|
+
}
|
|
43
|
+
}
|
|
44
|
+
|
|
45
|
+
/* Tablet portrait */
|
|
46
|
+
@media (max-width: 768px) {
|
|
47
|
+
.selectWrapper {
|
|
48
|
+
width: 55%;
|
|
49
|
+
}
|
|
50
|
+
}
|
|
51
|
+
|
|
52
|
+
/* Small mobile */
|
|
53
|
+
@media (max-width: 576px) {
|
|
54
|
+
.selectWrapper {
|
|
55
|
+
width: 70%;
|
|
56
|
+
}
|
|
57
|
+
}
|
|
58
|
+
|
|
59
|
+
/* Extra small mobile */
|
|
60
|
+
@media (max-width: 400px) {
|
|
61
|
+
.selectWrapper {
|
|
62
|
+
width: 85%;
|
|
63
|
+
}
|
|
64
|
+
}
|
|
@@ -1,42 +1,48 @@
|
|
|
1
|
-
import React, { useState } from 'react';
|
|
2
|
-
import styles from './PeriodSelect.module.css';
|
|
3
|
-
import { Calendar } from 'lucide-react';
|
|
4
|
-
import { SelectInput } from '../DynamicInput';
|
|
5
|
-
|
|
6
|
-
export interface Option {
|
|
7
|
-
label: string;
|
|
8
|
-
value: string;
|
|
9
|
-
}
|
|
10
|
-
|
|
11
|
-
interface PeriodSelectProps {
|
|
12
|
-
options: Option[];
|
|
13
|
-
defaultValue?: string;
|
|
14
|
-
onChange?: (value: string) => void;
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
}
|
|
1
|
+
import React, { useState } from 'react';
|
|
2
|
+
import styles from './PeriodSelect.module.css';
|
|
3
|
+
import { Calendar } from 'lucide-react';
|
|
4
|
+
import { SelectInput } from '../DynamicInput';
|
|
5
|
+
|
|
6
|
+
export interface Option {
|
|
7
|
+
label: string;
|
|
8
|
+
value: string;
|
|
9
|
+
}
|
|
10
|
+
|
|
11
|
+
interface PeriodSelectProps {
|
|
12
|
+
options: Option[];
|
|
13
|
+
defaultValue?: string;
|
|
14
|
+
onChange?: (value: string) => void;
|
|
15
|
+
label?: string;
|
|
16
|
+
}
|
|
17
|
+
|
|
18
|
+
export const PeriodSelect: React.FC<PeriodSelectProps> = ({
|
|
19
|
+
options,
|
|
20
|
+
defaultValue,
|
|
21
|
+
onChange,
|
|
22
|
+
label,
|
|
23
|
+
}) => {
|
|
24
|
+
const [value, setValue] = useState(defaultValue || options[0]?.value || '');
|
|
25
|
+
|
|
26
|
+
const handleChange = (val: string) => {
|
|
27
|
+
setValue(val);
|
|
28
|
+
onChange?.(val);
|
|
29
|
+
};
|
|
30
|
+
|
|
31
|
+
return (
|
|
32
|
+
<div className={styles.container}>
|
|
33
|
+
<div className={styles.icon}>
|
|
34
|
+
<Calendar size={18} />
|
|
35
|
+
<p>{label}</p>
|
|
36
|
+
</div>
|
|
37
|
+
|
|
38
|
+
<div className={styles.selectWrapper}>
|
|
39
|
+
<SelectInput
|
|
40
|
+
field={{ name: 'periode', label: '', options }}
|
|
41
|
+
value={value}
|
|
42
|
+
onChange={handleChange}
|
|
43
|
+
onBlur={() => {}}
|
|
44
|
+
/>
|
|
45
|
+
</div>
|
|
46
|
+
</div>
|
|
47
|
+
);
|
|
48
|
+
};
|