@coreui/react-pro 4.1.3 → 4.2.0-beta.1

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.
Files changed (48) hide show
  1. package/README.md +1 -1
  2. package/dist/components/calendar/CCalendar.d.ts +106 -0
  3. package/dist/components/calendar/CCalendar.utils.d.ts +21 -0
  4. package/dist/components/datepicker/CDatePicker.d.ts +13 -0
  5. package/dist/components/daterangepicker/CDateRangePicker.d.ts +65 -0
  6. package/dist/components/dropdown/CDropdown.d.ts +10 -1
  7. package/dist/components/dropdown/CDropdownToggle.d.ts +4 -0
  8. package/dist/components/dropdown/CDropdownToggleCustom.d.ts +15 -0
  9. package/dist/components/picker/CPicker.d.ts +78 -0
  10. package/dist/components/smart-table/CSmartTableInterface.d.ts +0 -9
  11. package/dist/components/timepicker/CTimePicker.d.ts +45 -0
  12. package/dist/components/timepicker/CTimePicker.utils.d.ts +17 -0
  13. package/dist/components/timepicker/CTimePickerRollCol.d.ts +11 -0
  14. package/dist/index.d.ts +5 -1
  15. package/dist/index.es.js +2568 -718
  16. package/dist/index.es.js.map +1 -1
  17. package/dist/index.js +2849 -995
  18. package/dist/index.js.map +1 -1
  19. package/dist/utils/calendar.d.ts +21 -0
  20. package/dist/utils/time.d.ts +17 -0
  21. package/package.json +11 -8
  22. package/src/components/accordion/CAccordionButton.tsx +2 -1
  23. package/src/components/accordion/__tests__/__snapshots__/CAccordionButton.spec.tsx.snap +2 -0
  24. package/src/components/accordion/__tests__/__snapshots__/CAccordionHeader.spec.tsx.snap +2 -0
  25. package/src/components/calendar/CCalendar.tsx +528 -0
  26. package/src/components/calendar/__tests__/CCalendar.spec.tsx +9 -0
  27. package/src/components/calendar/__tests__/__snapshots__/CCalendar.spec.tsx.snap +573 -0
  28. package/src/components/datepicker/CDatePicker.tsx +50 -0
  29. package/src/components/datepicker/__tests__/CDatePicker.spec.tsx +9 -0
  30. package/src/components/datepicker/__tests__/__snapshots__/CDatePicker.spec.tsx.snap +617 -0
  31. package/src/components/daterangepicker/CDateRangePicker.tsx +427 -0
  32. package/src/components/daterangepicker/__tests__/CDateRangePicker.spec.tsx +9 -0
  33. package/src/components/daterangepicker/__tests__/__snapshots__/CDateRangePicker.spec.tsx.snap +1201 -0
  34. package/src/components/dropdown/CDropdown.tsx +19 -24
  35. package/src/components/dropdown/CDropdownMenu.tsx +57 -3
  36. package/src/components/dropdown/CDropdownToggle.tsx +28 -5
  37. package/src/components/picker/CPicker.tsx +207 -0
  38. package/src/components/picker/__tests__/CPicker.spec.tsx +9 -0
  39. package/src/components/picker/__tests__/__snapshots__/CPicker.spec.tsx.snap +23 -0
  40. package/src/components/smart-table/CSmartTable.tsx +44 -96
  41. package/src/components/smart-table/CSmartTableCleaner.tsx +3 -16
  42. package/src/components/smart-table/CSmartTableInterface.tsx +0 -9
  43. package/src/components/timepicker/CTimePicker.tsx +320 -0
  44. package/src/components/timepicker/CTimePickerRollCol.tsx +63 -0
  45. package/src/components/timepicker/__tests__/CTimePicker.spec.tsx +9 -0
  46. package/src/index.ts +8 -0
  47. package/src/utils/calendar.ts +193 -0
  48. package/src/utils/time.ts +58 -0
package/src/components/calendar/__tests__/__snapshots__/CCalendar.spec.tsx.snap ADDED
@@ -0,0 +1,573 @@
1
+ // Jest Snapshot v1, https://goo.gl/fbAQLP
2
+
3
+ exports[`loads and displays CCalendar component 1`] = `
4
+ <div>
5
+ <div
6
+ class="calendar"
7
+ >
8
+ <div
9
+ class="calendar-nav"
10
+ >
11
+ <div
12
+ class="calendar-nav-prev"
13
+ >
14
+ <button
15
+ class="btn btn-transparent btn-sm"
16
+ type="button"
17
+ >
18
+ <span
19
+ class="calendar-nav-icon calendar-nav-icon-double-prev"
20
+ />
21
+ </button>
22
+ <button
23
+ class="btn btn-transparent btn-sm"
24
+ type="button"
25
+ >
26
+ <span
27
+ class="calendar-nav-icon calendar-nav-icon-prev"
28
+ />
29
+ </button>
30
+ </div>
31
+ <div
32
+ class="calendar-nav-date"
33
+ >
34
+ <button
35
+ class="btn btn-transparent btn-sm"
36
+ type="button"
37
+ >
38
+ March
39
+ </button>
40
+ <button
41
+ class="btn btn-transparent btn-sm"
42
+ type="button"
43
+ >
44
+ 2022
45
+ </button>
46
+ </div>
47
+ <div
48
+ class="calendar-nav-next"
49
+ >
50
+ <button
51
+ class="btn btn-transparent btn-sm"
52
+ type="button"
53
+ >
54
+ <span
55
+ class="calendar-nav-icon calendar-nav-icon-next"
56
+ />
57
+ </button>
58
+ <button
59
+ class="btn btn-transparent btn-sm"
60
+ type="button"
61
+ >
62
+ <span
63
+ class="calendar-nav-icon calendar-nav-icon-double-next"
64
+ />
65
+ </button>
66
+ </div>
67
+ </div>
68
+ <table>
69
+ <thead>
70
+ <tr>
71
+ <th
72
+ class="calendar-cell"
73
+ >
74
+ <div
75
+ class="calendar-header-cell-inner"
76
+ >
77
+ Mo
78
+ </div>
79
+ </th>
80
+ <th
81
+ class="calendar-cell"
82
+ >
83
+ <div
84
+ class="calendar-header-cell-inner"
85
+ >
86
+ Tu
87
+ </div>
88
+ </th>
89
+ <th
90
+ class="calendar-cell"
91
+ >
92
+ <div
93
+ class="calendar-header-cell-inner"
94
+ >
95
+ We
96
+ </div>
97
+ </th>
98
+ <th
99
+ class="calendar-cell"
100
+ >
101
+ <div
102
+ class="calendar-header-cell-inner"
103
+ >
104
+ Th
105
+ </div>
106
+ </th>
107
+ <th
108
+ class="calendar-cell"
109
+ >
110
+ <div
111
+ class="calendar-header-cell-inner"
112
+ >
113
+ Fr
114
+ </div>
115
+ </th>
116
+ <th
117
+ class="calendar-cell"
118
+ >
119
+ <div
120
+ class="calendar-header-cell-inner"
121
+ >
122
+ Sa
123
+ </div>
124
+ </th>
125
+ <th
126
+ class="calendar-cell"
127
+ >
128
+ <div
129
+ class="calendar-header-cell-inner"
130
+ >
131
+ Su
132
+ </div>
133
+ </th>
134
+ </tr>
135
+ </thead>
136
+ <tbody>
137
+ <tr>
138
+ <td
139
+ class="calendar-cell previous last"
140
+ title="2/28/2022"
141
+ >
142
+ <div
143
+ class="calendar-cell-inner"
144
+ >
145
+ 28
146
+ </div>
147
+ </td>
148
+ <td
149
+ class="calendar-cell"
150
+ title="3/1/2022"
151
+ >
152
+ <div
153
+ class="calendar-cell-inner"
154
+ >
155
+ 1
156
+ </div>
157
+ </td>
158
+ <td
159
+ class="calendar-cell"
160
+ title="3/2/2022"
161
+ >
162
+ <div
163
+ class="calendar-cell-inner"
164
+ >
165
+ 2
166
+ </div>
167
+ </td>
168
+ <td
169
+ class="calendar-cell"
170
+ title="3/3/2022"
171
+ >
172
+ <div
173
+ class="calendar-cell-inner"
174
+ >
175
+ 3
176
+ </div>
177
+ </td>
178
+ <td
179
+ class="calendar-cell"
180
+ title="3/4/2022"
181
+ >
182
+ <div
183
+ class="calendar-cell-inner"
184
+ >
185
+ 4
186
+ </div>
187
+ </td>
188
+ <td
189
+ class="calendar-cell"
190
+ title="3/5/2022"
191
+ >
192
+ <div
193
+ class="calendar-cell-inner"
194
+ >
195
+ 5
196
+ </div>
197
+ </td>
198
+ <td
199
+ class="calendar-cell"
200
+ title="3/6/2022"
201
+ >
202
+ <div
203
+ class="calendar-cell-inner"
204
+ >
205
+ 6
206
+ </div>
207
+ </td>
208
+ </tr>
209
+ <tr>
210
+ <td
211
+ class="calendar-cell"
212
+ title="3/7/2022"
213
+ >
214
+ <div
215
+ class="calendar-cell-inner"
216
+ >
217
+ 7
218
+ </div>
219
+ </td>
220
+ <td
221
+ class="calendar-cell"
222
+ title="3/8/2022"
223
+ >
224
+ <div
225
+ class="calendar-cell-inner"
226
+ >
227
+ 8
228
+ </div>
229
+ </td>
230
+ <td
231
+ class="calendar-cell"
232
+ title="3/9/2022"
233
+ >
234
+ <div
235
+ class="calendar-cell-inner"
236
+ >
237
+ 9
238
+ </div>
239
+ </td>
240
+ <td
241
+ class="calendar-cell"
242
+ title="3/10/2022"
243
+ >
244
+ <div
245
+ class="calendar-cell-inner"
246
+ >
247
+ 10
248
+ </div>
249
+ </td>
250
+ <td
251
+ class="calendar-cell"
252
+ title="3/11/2022"
253
+ >
254
+ <div
255
+ class="calendar-cell-inner"
256
+ >
257
+ 11
258
+ </div>
259
+ </td>
260
+ <td
261
+ class="calendar-cell"
262
+ title="3/12/2022"
263
+ >
264
+ <div
265
+ class="calendar-cell-inner"
266
+ >
267
+ 12
268
+ </div>
269
+ </td>
270
+ <td
271
+ class="calendar-cell"
272
+ title="3/13/2022"
273
+ >
274
+ <div
275
+ class="calendar-cell-inner"
276
+ >
277
+ 13
278
+ </div>
279
+ </td>
280
+ </tr>
281
+ <tr>
282
+ <td
283
+ class="calendar-cell"
284
+ title="3/14/2022"
285
+ >
286
+ <div
287
+ class="calendar-cell-inner"
288
+ >
289
+ 14
290
+ </div>
291
+ </td>
292
+ <td
293
+ class="calendar-cell"
294
+ title="3/15/2022"
295
+ >
296
+ <div
297
+ class="calendar-cell-inner"
298
+ >
299
+ 15
300
+ </div>
301
+ </td>
302
+ <td
303
+ class="calendar-cell"
304
+ title="3/16/2022"
305
+ >
306
+ <div
307
+ class="calendar-cell-inner"
308
+ >
309
+ 16
310
+ </div>
311
+ </td>
312
+ <td
313
+ class="calendar-cell"
314
+ title="3/17/2022"
315
+ >
316
+ <div
317
+ class="calendar-cell-inner"
318
+ >
319
+ 17
320
+ </div>
321
+ </td>
322
+ <td
323
+ class="calendar-cell"
324
+ title="3/18/2022"
325
+ >
326
+ <div
327
+ class="calendar-cell-inner"
328
+ >
329
+ 18
330
+ </div>
331
+ </td>
332
+ <td
333
+ class="calendar-cell"
334
+ title="3/19/2022"
335
+ >
336
+ <div
337
+ class="calendar-cell-inner"
338
+ >
339
+ 19
340
+ </div>
341
+ </td>
342
+ <td
343
+ class="calendar-cell"
344
+ title="3/20/2022"
345
+ >
346
+ <div
347
+ class="calendar-cell-inner"
348
+ >
349
+ 20
350
+ </div>
351
+ </td>
352
+ </tr>
353
+ <tr>
354
+ <td
355
+ class="calendar-cell"
356
+ title="3/21/2022"
357
+ >
358
+ <div
359
+ class="calendar-cell-inner"
360
+ >
361
+ 21
362
+ </div>
363
+ </td>
364
+ <td
365
+ class="calendar-cell"
366
+ title="3/22/2022"
367
+ >
368
+ <div
369
+ class="calendar-cell-inner"
370
+ >
371
+ 22
372
+ </div>
373
+ </td>
374
+ <td
375
+ class="calendar-cell today"
376
+ title="3/23/2022"
377
+ >
378
+ <div
379
+ class="calendar-cell-inner"
380
+ >
381
+ 23
382
+ </div>
383
+ </td>
384
+ <td
385
+ class="calendar-cell"
386
+ title="3/24/2022"
387
+ >
388
+ <div
389
+ class="calendar-cell-inner"
390
+ >
391
+ 24
392
+ </div>
393
+ </td>
394
+ <td
395
+ class="calendar-cell"
396
+ title="3/25/2022"
397
+ >
398
+ <div
399
+ class="calendar-cell-inner"
400
+ >
401
+ 25
402
+ </div>
403
+ </td>
404
+ <td
405
+ class="calendar-cell"
406
+ title="3/26/2022"
407
+ >
408
+ <div
409
+ class="calendar-cell-inner"
410
+ >
411
+ 26
412
+ </div>
413
+ </td>
414
+ <td
415
+ class="calendar-cell"
416
+ title="3/27/2022"
417
+ >
418
+ <div
419
+ class="calendar-cell-inner"
420
+ >
421
+ 27
422
+ </div>
423
+ </td>
424
+ </tr>
425
+ <tr>
426
+ <td
427
+ class="calendar-cell"
428
+ title="3/28/2022"
429
+ >
430
+ <div
431
+ class="calendar-cell-inner"
432
+ >
433
+ 28
434
+ </div>
435
+ </td>
436
+ <td
437
+ class="calendar-cell"
438
+ title="3/29/2022"
439
+ >
440
+ <div
441
+ class="calendar-cell-inner"
442
+ >
443
+ 29
444
+ </div>
445
+ </td>
446
+ <td
447
+ class="calendar-cell"
448
+ title="3/30/2022"
449
+ >
450
+ <div
451
+ class="calendar-cell-inner"
452
+ >
453
+ 30
454
+ </div>
455
+ </td>
456
+ <td
457
+ class="calendar-cell last"
458
+ title="3/31/2022"
459
+ >
460
+ <div
461
+ class="calendar-cell-inner"
462
+ >
463
+ 31
464
+ </div>
465
+ </td>
466
+ <td
467
+ class="calendar-cell next"
468
+ title="4/1/2022"
469
+ >
470
+ <div
471
+ class="calendar-cell-inner"
472
+ >
473
+ 1
474
+ </div>
475
+ </td>
476
+ <td
477
+ class="calendar-cell next"
478
+ title="4/2/2022"
479
+ >
480
+ <div
481
+ class="calendar-cell-inner"
482
+ >
483
+ 2
484
+ </div>
485
+ </td>
486
+ <td
487
+ class="calendar-cell next"
488
+ title="4/3/2022"
489
+ >
490
+ <div
491
+ class="calendar-cell-inner"
492
+ >
493
+ 3
494
+ </div>
495
+ </td>
496
+ </tr>
497
+ <tr>
498
+ <td
499
+ class="calendar-cell next"
500
+ title="4/4/2022"
501
+ >
502
+ <div
503
+ class="calendar-cell-inner"
504
+ >
505
+ 4
506
+ </div>
507
+ </td>
508
+ <td
509
+ class="calendar-cell next"
510
+ title="4/5/2022"
511
+ >
512
+ <div
513
+ class="calendar-cell-inner"
514
+ >
515
+ 5
516
+ </div>
517
+ </td>
518
+ <td
519
+ class="calendar-cell next"
520
+ title="4/6/2022"
521
+ >
522
+ <div
523
+ class="calendar-cell-inner"
524
+ >
525
+ 6
526
+ </div>
527
+ </td>
528
+ <td
529
+ class="calendar-cell next"
530
+ title="4/7/2022"
531
+ >
532
+ <div
533
+ class="calendar-cell-inner"
534
+ >
535
+ 7
536
+ </div>
537
+ </td>
538
+ <td
539
+ class="calendar-cell next"
540
+ title="4/8/2022"
541
+ >
542
+ <div
543
+ class="calendar-cell-inner"
544
+ >
545
+ 8
546
+ </div>
547
+ </td>
548
+ <td
549
+ class="calendar-cell next"
550
+ title="4/9/2022"
551
+ >
552
+ <div
553
+ class="calendar-cell-inner"
554
+ >
555
+ 9
556
+ </div>
557
+ </td>
558
+ <td
559
+ class="calendar-cell next"
560
+ title="4/10/2022"
561
+ >
562
+ <div
563
+ class="calendar-cell-inner"
564
+ >
565
+ 10
566
+ </div>
567
+ </td>
568
+ </tr>
569
+ </tbody>
570
+ </table>
571
+ </div>
572
+ </div>
573
+ `;
package/src/components/datepicker/CDatePicker.tsx ADDED
@@ -0,0 +1,50 @@
1
+ import React, { forwardRef } from 'react'
2
+ import PropTypes from 'prop-types'
3
+
4
+ import { CDateRangePicker, CDateRangePickerProps } from '../daterangepicker/CDateRangePicker'
5
+
6
+ export interface CDatePickerProps
7
+ extends Omit<
8
+ CDateRangePickerProps,
9
+ | 'calendars'
10
+ | 'endDate'
11
+ | 'range'
12
+ | 'onEndDateChange'
13
+ | 'onStartDateChange'
14
+ | 'ranges'
15
+ | 'selectEndDate'
16
+ | 'startDate'
17
+ > {
18
+ /**
19
+ * Initial selected date.
20
+ */
21
+ date?: Date | string | null
22
+ /**
23
+ * Callback fired when the date changed.
24
+ */
25
+ onDateChange?: (date: Date | null) => void
26
+ }
27
+
28
+ export const CDatePicker = forwardRef<HTMLDivElement | HTMLLIElement, CDatePickerProps>(
29
+ ({ date, onDateChange, placeholder = 'Select date', ...rest }, ref) => {
30
+ return (
31
+ <CDateRangePicker
32
+ calendars={1}
33
+ startDate={date}
34
+ onStartDateChange={onDateChange}
35
+ placeholder={placeholder}
36
+ range={false}
37
+ ref={ref}
38
+ {...rest}
39
+ />
40
+ )
41
+ },
42
+ )
43
+
44
+ CDatePicker.displayName = 'CDatePicker'
45
+
46
+ CDatePicker.propTypes = {
47
+ ...CDateRangePicker.propTypes,
48
+ date: PropTypes.oneOfType([PropTypes.instanceOf(Date), PropTypes.string]),
49
+ onDateChange: PropTypes.func,
50
+ }
package/src/components/datepicker/__tests__/CDatePicker.spec.tsx ADDED
@@ -0,0 +1,9 @@
1
+ import * as React from 'react'
2
+ import { render } from '@testing-library/react'
3
+ import '@testing-library/jest-dom/extend-expect'
4
+ import { CDatePicker } from '../CDatePicker'
5
+
6
+ test('loads and displays CDatePicker component', async () => {
7
+ const { container } = render(<CDatePicker />)
8
+ expect(container).toMatchSnapshot()
9
+ })