@progress/kendo-themes-html 5.8.2-dev.6 → 5.9.1-dev.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.
Files changed (73) hide show
  1. package/dist/action-sheet/tests/action-sheet-data-table.js +945 -0
  2. package/dist/action-sheet/tests/action-sheet-data-table.js.map +7 -0
  3. package/dist/action-sheet/tests/action-sheet-date-time-selector.js +112 -80
  4. package/dist/action-sheet/tests/action-sheet-date-time-selector.js.map +4 -4
  5. package/dist/action-sheet/tests/action-sheet-time-selector.js +121 -81
  6. package/dist/action-sheet/tests/action-sheet-time-selector.js.map +4 -4
  7. package/dist/calendar/tests/calendar-classic-jquery.js +5 -5
  8. package/dist/calendar/tests/calendar-classic-jquery.js.map +1 -1
  9. package/dist/calendar/tests/calendar-infinite-rtl.js +7 -7
  10. package/dist/calendar/tests/calendar-infinite-rtl.js.map +2 -2
  11. package/dist/calendar/tests/calendar-infinite.js +7 -7
  12. package/dist/calendar/tests/calendar-infinite.js.map +1 -1
  13. package/dist/calendar/tests/calendar-modern-size.js +895 -0
  14. package/dist/calendar/tests/calendar-modern-size.js.map +7 -0
  15. package/dist/coloreditor/tests/coloreditor-focused-colorgradient.js +684 -0
  16. package/dist/coloreditor/tests/coloreditor-focused-colorgradient.js.map +7 -0
  17. package/dist/datetime-selector/tests/datetime-selector.js +142 -138
  18. package/dist/datetime-selector/tests/datetime-selector.js.map +4 -4
  19. package/dist/form/tests/form-field-dateinputs-angular.js.map +2 -2
  20. package/dist/form/tests/form-field-dateinputs-react.js.map +2 -2
  21. package/dist/grid/tests/grid-editing-custom-editor.js.map +2 -2
  22. package/dist/grid/tests/grid-filter-row.js.map +2 -2
  23. package/dist/icon/tests/icons.js +1 -0
  24. package/dist/icon/tests/icons.js.map +2 -2
  25. package/dist/index.js +218 -172
  26. package/dist/index.js.map +4 -4
  27. package/dist/scheduler/tests/scheduler-edit-dialog.js.map +2 -2
  28. package/dist/time-selector/tests/time-selector.js +200 -397
  29. package/dist/time-selector/tests/time-selector.js.map +4 -4
  30. package/dist/time-selector/time-selector-column.js +108 -0
  31. package/dist/time-selector/time-selector-column.js.map +7 -0
  32. package/dist/time-selector/time-selector-fast-selection.js +255 -0
  33. package/dist/time-selector/time-selector-fast-selection.js.map +7 -0
  34. package/dist/time-selector/time-selector-header.js +65 -0
  35. package/dist/time-selector/time-selector-header.js.map +7 -0
  36. package/dist/time-selector/time-selector.js +138 -99
  37. package/dist/time-selector/time-selector.js.map +4 -4
  38. package/dist/timedurationpicker/tests/timedurationpicker-expanded.js +718 -0
  39. package/dist/timedurationpicker/tests/timedurationpicker-expanded.js.map +7 -0
  40. package/dist/timedurationpicker/tests/timedurationpicker.js +576 -0
  41. package/dist/timedurationpicker/tests/timedurationpicker.js.map +7 -0
  42. package/dist/timedurationpicker/timedurationpicker.js +494 -0
  43. package/dist/timedurationpicker/timedurationpicker.js.map +7 -0
  44. package/dist/timepicker/tests/timepicker-adaptive.js +128 -83
  45. package/dist/timepicker/tests/timepicker-adaptive.js.map +4 -4
  46. package/dist/timepicker/tests/timepicker-flat.js.map +2 -2
  47. package/dist/timepicker/tests/timepicker-outline.js.map +2 -2
  48. package/dist/timepicker/tests/timepicker.js.map +2 -2
  49. package/dist/timepicker/timepicker.js.map +2 -2
  50. package/package.json +2 -2
  51. package/src/action-sheet/tests/action-sheet-data-table.tsx +203 -0
  52. package/src/action-sheet/tests/action-sheet-date-time-selector.tsx +7 -3
  53. package/src/action-sheet/tests/action-sheet-time-selector.tsx +12 -3
  54. package/src/calendar/tests/calendar-classic-jquery.tsx +5 -5
  55. package/src/calendar/tests/calendar-infinite-rtl.tsx +7 -7
  56. package/src/calendar/tests/calendar-infinite.tsx +7 -7
  57. package/src/calendar/tests/calendar-modern-size.tsx +39 -0
  58. package/src/coloreditor/tests/coloreditor-focused-colorgradient.tsx +107 -0
  59. package/src/datetime-selector/tests/datetime-selector.tsx +6 -150
  60. package/src/icon/tests/icons.tsx +1 -0
  61. package/src/index.ts +1 -0
  62. package/src/time-selector/index.ts +3 -0
  63. package/src/time-selector/tests/time-selector.tsx +30 -407
  64. package/src/time-selector/time-selector-column.tsx +82 -0
  65. package/src/time-selector/time-selector-fast-selection.tsx +36 -0
  66. package/src/time-selector/time-selector-header.tsx +40 -0
  67. package/src/time-selector/time-selector.tsx +41 -63
  68. package/src/timedurationpicker/index.ts +1 -0
  69. package/src/timedurationpicker/tests/timedurationpicker-expanded.tsx +59 -0
  70. package/src/timedurationpicker/tests/timedurationpicker.tsx +81 -0
  71. package/src/timedurationpicker/timedurationpicker.tsx +83 -0
  72. package/src/timepicker/tests/timepicker-adaptive.tsx +19 -10
  73. package/src/timepicker/timepicker.tsx +0 -1
package/src/time-selector/tests/time-selector.tsx CHANGED
@@ -1,7 +1,9 @@
1
1
  import React from 'react';
2
2
  import ReactDOM from 'react-dom/client';
3
- import { ActionButtons } from '../../action-buttons';
3
+ import { TimeSelector } from '../time-selector';
4
4
  import { Button } from '../../button';
5
+ import { ActionButtons } from '../../action-buttons';
6
+ import { TimeSelectorHeader } from '../time-selector-header';
5
7
 
6
8
  const root = ReactDOM.createRoot(
7
9
  document.getElementById('app') as HTMLElement
@@ -20,433 +22,54 @@ root.render(
20
22
  <>
21
23
  <style>{style}</style>
22
24
  <div id="test-area" className="k-d-grid k-grid-cols-3">
23
-
24
- <span>HH:mm:ss:fff tt</span>
25
+ <span>HH:mm:ss:SSS tt</span>
25
26
  <span>HH:mm:ss tt</span>
26
27
  <span>HH</span>
27
-
28
28
  <section>
29
29
  <div className="k-animation-container">
30
30
  <div className="k-popup k-reset">
31
- <div className="k-timeselector">
32
- <div className="k-time-header">
33
- <span className="k-title"> 13:14:07:189 PM </span>
31
+ <TimeSelector columns={[ "HH", "mm", "ss", "SSS", "tt" ]} focusedColumn="HH" header={(
32
+ <TimeSelectorHeader title="13:14:07:189 PM">
34
33
  <Button fillMode="flat" className="k-time-now">Now</Button>
35
- </div>
36
- <div className="k-time-list-container">
37
- <span className="k-time-highlight"></span>
38
- <div className="k-time-list-wrapper k-focus">
39
- <span className="k-title">hour</span>
40
- <div className="k-time-list">
41
- <div className="k-time-container k-content k-scrollable">
42
- <ul className="k-reset" style={{ transform: "translateY(97px)" }}>
43
- <li className="k-item">
44
- <span>00</span>
45
- </li>
46
- <li className="k-item">
47
- <span>01</span>
48
- </li>
49
- <li className="k-item">
50
- <span>02</span>
51
- </li>
52
- <li className="k-item">
53
- <span>03</span>
54
- </li>
55
- <li className="k-item">
56
- <span>04</span>
57
- </li>
58
- <li className="k-item">
59
- <span>05</span>
60
- </li>
61
- <li className="k-item">
62
- <span>06</span>
63
- </li>
64
- <li className="k-item">
65
- <span>07</span>
66
- </li>
67
- <li className="k-item">
68
- <span>08</span>
69
- </li>
70
- <li className="k-item">
71
- <span>09</span>
72
- </li>
73
- </ul>
74
- <div className="k-scrollable-placeholder"></div>
75
- </div>
76
- </div>
77
- </div>
78
- <div className="k-time-separator">:</div>
79
- <div className="k-time-list-wrapper">
80
- <span className="k-title">minute</span>
81
- <div className="k-time-list">
82
- <div className="k-time-container k-content k-scrollable">
83
- <ul className="k-reset" style={{ transform: "translateY(97px)" }}>
84
- <li className="k-item">
85
- <span>00</span>
86
- </li>
87
- <li className="k-item">
88
- <span>01</span>
89
- </li>
90
- <li className="k-item">
91
- <span>02</span>
92
- </li>
93
- <li className="k-item">
94
- <span>03</span>
95
- </li>
96
- <li className="k-item">
97
- <span>04</span>
98
- </li>
99
- <li className="k-item">
100
- <span>05</span>
101
- </li>
102
- <li className="k-item">
103
- <span>06</span>
104
- </li>
105
- <li className="k-item">
106
- <span>07</span>
107
- </li>
108
- <li className="k-item">
109
- <span>08</span>
110
- </li>
111
- <li className="k-item">
112
- <span>09</span>
113
- </li>
114
- </ul>
115
- <div className="k-scrollable-placeholder"></div>
116
- </div>
117
- </div>
118
- </div>
119
- <div className="k-time-separator">:</div>
120
- <div className="k-time-list-wrapper">
121
- <span className="k-title">second</span>
122
- <div className="k-time-list">
123
- <div className="k-time-container k-content k-scrollable">
124
- <ul className="k-reset" style={{ transform: "translateY(97px)" }}>
125
- <li className="k-item">
126
- <span>00</span>
127
- </li>
128
- <li className="k-item">
129
- <span>01</span>
130
- </li>
131
- <li className="k-item">
132
- <span>02</span>
133
- </li>
134
- <li className="k-item">
135
- <span>03</span>
136
- </li>
137
- <li className="k-item">
138
- <span>04</span>
139
- </li>
140
- <li className="k-item">
141
- <span>05</span>
142
- </li>
143
- <li className="k-item">
144
- <span>06</span>
145
- </li>
146
- <li className="k-item">
147
- <span>07</span>
148
- </li>
149
- <li className="k-item">
150
- <span>08</span>
151
- </li>
152
- <li className="k-item">
153
- <span>09</span>
154
- </li>
155
- </ul>
156
- <div className="k-scrollable-placeholder"></div>
157
- </div>
158
- </div>
159
- </div><div className="k-time-separator">:</div>
160
- <div className="k-time-list-wrapper">
161
- <span className="k-title">millisecond</span>
162
- <div className="k-time-list">
163
- <div className="k-time-container k-content k-scrollable" >
164
- <ul className="k-reset" style={{ transform: "translateY(97px)" }}>
165
- <li className="k-item">
166
- <span>000</span>
167
- </li>
168
- <li className="k-item">
169
- <span>001</span>
170
- </li>
171
- <li className="k-item">
172
- <span>002</span>
173
- </li>
174
- <li className="k-item">
175
- <span>003</span>
176
- </li>
177
- <li className="k-item">
178
- <span>004</span>
179
- </li>
180
- <li className="k-item">
181
- <span>005</span>
182
- </li>
183
- <li className="k-item">
184
- <span>006</span>
185
- </li>
186
- <li className="k-item">
187
- <span>007</span>
188
- </li>
189
- <li className="k-item">
190
- <span>008</span>
191
- </li>
192
- <li className="k-item">
193
- <span>009</span>
194
- </li>
195
- </ul>
196
- <div className="k-scrollable-placeholder"></div>
197
- </div>
198
- </div>
199
- </div>
200
- <div className="k-time-separator"></div>
201
- <div className="k-time-list-wrapper">
202
- <span className="k-title">AM/PM</span>
203
- <div className="k-time-list">
204
- <div className="k-time-container k-content k-scrollable">
205
- <ul className="k-reset" style={{ transform: "translateY(97px)" }}>
206
- <li className="k-item">
207
- <span>AM</span>
208
- </li>
209
- <li className="k-item">
210
- <span>PM</span>
211
- </li>
212
- </ul>
213
- <div className="k-scrollable-placeholder"></div>
214
- </div>
215
- </div>
216
- </div>
217
- </div>
218
- <ActionButtons alignment="stretched" className="k-time-footer">
219
- <Button className="k-time-cancel">Cancel</Button>
220
- <Button themeColor="primary" className="k-time-accept">Set</Button>
221
- </ActionButtons>
222
- </div>
34
+ </TimeSelectorHeader>
35
+ )}/>
36
+ <ActionButtons alignment="stretched" className="k-time-footer">
37
+ <Button className="k-time-cancel">Cancel</Button>
38
+ <Button themeColor="primary" className="k-time-accept">Set</Button>
39
+ </ActionButtons>
223
40
  </div>
224
41
  </div>
225
42
  </section>
226
-
227
43
  <section>
228
44
  <div className="k-animation-container">
229
45
  <div className="k-popup k-reset">
230
- <div className="k-timeselector k-reset">
231
- <div className="k-time-part">
232
- <div className="k-time-header">
233
- <span className="k-title">10:00:00 AM</span>
234
- <Button fillMode="flat" className="k-time-now">Now</Button>
235
- </div>
236
- <div className="k-time-list-container">
237
- <span className="k-time-highlight"></span>
238
- <div className="k-time-list-wrapper">
239
- <span className="k-title">Hour</span>
240
- <div className="k-time-list">
241
- <div className="k-content k-scrollable k-time-container">
242
- <ul className="k-reset" style={{ transform: "translateY(97px)" }}>
243
- <li className="k-item">
244
- <span>0</span>
245
- </li>
246
- <li className="k-item">
247
- <span>1</span>
248
- </li>
249
- <li className="k-item">
250
- <span>2</span>
251
- </li>
252
- <li className="k-item">
253
- <span>3</span>
254
- </li>
255
- <li className="k-item">
256
- <span>4</span>
257
- </li>
258
- <li className="k-item">
259
- <span>5</span>
260
- </li>
261
- <li className="k-item">
262
- <span>6</span>
263
- </li>
264
- <li className="k-item">
265
- <span>7</span>
266
- </li>
267
- <li className="k-item">
268
- <span>8</span>
269
- </li>
270
- <li className="k-item">
271
- <span>9</span>
272
- </li>
273
- </ul>
274
- <div className="k-scrollable-placeholder"></div>
275
- </div>
276
- </div>
277
- </div>
278
- <div className="k-time-separator">:</div>
279
- <div className="k-time-list-wrapper k-focus">
280
- <span className="k-title">Minute</span>
281
- <div className="k-time-list">
282
- <div className="k-content k-scrollable k-time-container">
283
- <ul className="k-reset" style={{ transform: "translateY(97px)" }}>
284
- <li className="k-item">
285
- <span>0</span>
286
- </li>
287
- <li className="k-item">
288
- <span>1</span>
289
- </li>
290
- <li className="k-item">
291
- <span>2</span>
292
- </li>
293
- <li className="k-item">
294
- <span>3</span>
295
- </li>
296
- <li className="k-item">
297
- <span>4</span>
298
- </li>
299
- <li className="k-item">
300
- <span>5</span>
301
- </li>
302
- <li className="k-item">
303
- <span>6</span>
304
- </li>
305
- <li className="k-item">
306
- <span>7</span>
307
- </li>
308
- <li className="k-item">
309
- <span>8</span>
310
- </li>
311
- <li className="k-item">
312
- <span>9</span>
313
- </li>
314
- </ul>
315
- <div className="k-scrollable-placeholder"></div>
316
- </div>
317
- </div>
318
- </div>
319
- <div className="k-time-separator">:</div>
320
- <div className="k-time-list-wrapper">
321
- <span className="k-title">Second</span>
322
- <div className="k-time-list">
323
- <div className="k-content k-scrollable k-time-container">
324
- <ul className="k-reset" style={{ transform: "translateY(97px)" }}>
325
- <li className="k-item">
326
- <span>0</span>
327
- </li>
328
- <li className="k-item">
329
- <span>1</span>
330
- </li>
331
- <li className="k-item">
332
- <span>2</span>
333
- </li>
334
- <li className="k-item">
335
- <span>3</span>
336
- </li>
337
- <li className="k-item">
338
- <span>4</span>
339
- </li>
340
- <li className="k-item">
341
- <span>5</span>
342
- </li>
343
- <li className="k-item">
344
- <span>6</span>
345
- </li>
346
- <li className="k-item">
347
- <span>7</span>
348
- </li>
349
- <li className="k-item">
350
- <span>8</span>
351
- </li>
352
- <li className="k-item">
353
- <span>9</span>
354
- </li>
355
- </ul>
356
- <div className="k-scrollable-placeholder"></div>
357
- </div>
358
- </div>
359
- </div>
360
- <div className="k-time-separator">:</div>
361
- <div className="k-time-list-wrapper">
362
- <span className="k-title">AM/PM</span>
363
- <div className="k-time-list">
364
- <div className="k-content k-scrollable k-time-container">
365
- <ul className="k-reset" style={{ transform: "translateY(97px)" }}>
366
- <li className="k-item">
367
- <span>AM</span>
368
- </li>
369
- <li className="k-item">
370
- <span>PM</span>
371
- </li>
372
- </ul>
373
- <div className="k-scrollable-placeholder"></div>
374
- </div>
375
- </div>
376
- </div>
377
- </div>
378
- </div>
379
- <ActionButtons alignment="stretched" className="k-time-footer">
380
- <Button className="k-time-cancel">Cancel</Button>
381
- <Button themeColor="primary" className="k-time-accept">Set</Button>
382
- </ActionButtons>
383
- </div>
46
+ <TimeSelector columns={[ "HH", "mm", "ss", "tt" ]} focusedColumn="mm" header={(
47
+ <TimeSelectorHeader title="10:00:00 AM">
48
+ <Button fillMode="flat" className="k-time-now">Now</Button>
49
+ </TimeSelectorHeader>
50
+ )}/>
51
+ <ActionButtons alignment="stretched" className="k-time-footer">
52
+ <Button className="k-time-cancel">Cancel</Button>
53
+ <Button themeColor="primary" className="k-time-accept">Set</Button>
54
+ </ActionButtons>
384
55
  </div>
385
56
  </div>
386
57
  </section>
387
-
388
58
  <section>
389
59
  <div className="k-animation-container">
390
60
  <div className="k-popup k-reset">
391
- <div className="k-timeselector">
392
- <div className="k-time-part">
393
- <div className="k-time-header">
394
- <span className="k-title">10</span>
395
- <Button fillMode="flat" className="k-time-now">Now</Button>
396
- </div>
397
- <div className="k-time-list-container">
398
- <span className="k-time-highlight"></span>
399
- <div className="k-time-list-wrapper">
400
- <span className="k-title">Hour</span>
401
- <div className="k-time-list">
402
- <div className="k-content k-scrollable k-time-container">
403
- <ul className="k-reset" style={{ transform: "translateY(97px)" }}>
404
- <li className="k-item">
405
- <span>0</span>
406
- </li>
407
- <li className="k-item">
408
- <span>1</span>
409
- </li>
410
- <li className="k-item">
411
- <span>2</span>
412
- </li>
413
- <li className="k-item">
414
- <span>3</span>
415
- </li>
416
- <li className="k-item">
417
- <span>4</span>
418
- </li>
419
- <li className="k-item">
420
- <span>5</span>
421
- </li>
422
- <li className="k-item">
423
- <span>6</span>
424
- </li>
425
- <li className="k-item">
426
- <span>7</span>
427
- </li>
428
- <li className="k-item">
429
- <span>8</span>
430
- </li>
431
- <li className="k-item">
432
- <span>9</span>
433
- </li>
434
- </ul>
435
- <div className="k-scrollable-placeholder"></div>
436
- </div>
437
- </div>
438
- </div>
439
- </div>
440
- </div>
441
- <ActionButtons alignment="stretched" className="k-time-footer">
442
- <Button className="k-time-cancel">Cancel</Button>
443
- <Button themeColor="primary" className="k-time-accept">Set</Button>
444
- </ActionButtons>
445
- </div>
61
+ <TimeSelector columns={[ "HH" ]} header={(
62
+ <TimeSelectorHeader title="10">
63
+ <Button fillMode="flat" className="k-time-now">Now</Button>
64
+ </TimeSelectorHeader>
65
+ )}/>
66
+ <ActionButtons alignment="stretched" className="k-time-footer">
67
+ <Button className="k-time-cancel">Cancel</Button>
68
+ <Button themeColor="primary" className="k-time-accept">Set</Button>
69
+ </ActionButtons>
446
70
  </div>
447
71
  </div>
448
72
  </section>
449
-
450
73
  </div>
451
74
  </>
452
75
  );
package/src/time-selector/time-selector-column.tsx ADDED
@@ -0,0 +1,82 @@
1
+ import * as React from 'react';
2
+ import { classNames } from '../utils';
3
+ import { timeType } from '../time-selector';
4
+
5
+ export interface TimeSelectorColumnProps {
6
+ type?: timeType;
7
+ focus?: boolean;
8
+ separator?: boolean;
9
+ }
10
+
11
+ export class TimeSelectorColumn extends React.Component<TimeSelectorColumnProps> {
12
+
13
+ render() {
14
+
15
+ const {
16
+ type,
17
+ focus,
18
+ separator
19
+ } = this.props;
20
+
21
+ let text: string;
22
+ let columnData = [ "00", "01", "02", "03", "04", "05", "06", "07", "08", "09" ];
23
+
24
+ switch (type) {
25
+ case "dd":
26
+ text = "Day";
27
+ break;
28
+ case "HH":
29
+ text = "Hour";
30
+ break;
31
+ case "mm":
32
+ text = "Minute";
33
+ break;
34
+ case "ss":
35
+ text = "Second";
36
+ break;
37
+ case "SSS":
38
+ text = "Millisecond";
39
+ columnData = [ "000", "001", "002", "003", "004", "005", "006", "007", "008", "009" ];
40
+ break;
41
+ case "tt":
42
+ text = "AM/PM";
43
+ columnData = [ "AM", "PM" ];
44
+ break;
45
+ default:
46
+ text = "Column Name";
47
+ break;
48
+ }
49
+
50
+ const items = columnData.map(data=>
51
+ <>
52
+ <li className="k-item">
53
+ <span>{data}</span>
54
+ </li>
55
+ </>
56
+ );
57
+
58
+ return (
59
+ <>
60
+ {
61
+ separator && (
62
+ <div className="k-time-separator">:</div>
63
+ )
64
+ }
65
+ <div className={classNames(
66
+ "k-time-list-wrapper",
67
+ focus && ("k-focus")
68
+ )}>
69
+ <span className="k-title">{text}</span>
70
+ <div className="k-time-list">
71
+ <div className="k-content k-scrollable k-time-container">
72
+ <ul className="k-reset" style={{ transform: "translateY(97px)" }}>
73
+ {items}
74
+ </ul>
75
+ <div className="k-scrollable-placeholder"></div>
76
+ </div>
77
+ </div>
78
+ </div>
79
+ </>
80
+ );
81
+ }
82
+ }
package/src/time-selector/time-selector-fast-selection.tsx ADDED
@@ -0,0 +1,36 @@
1
+ import * as React from 'react';
2
+ import { Button } from '../button';
3
+ import { ActionButtons } from '../action-buttons';
4
+ import { classNames } from '../utils';
5
+
6
+ export interface TimeSelectorFastSelectionProps {
7
+ className?: null | string;
8
+ }
9
+
10
+ export class TimeSelectorFastSelection extends React.Component<TimeSelectorFastSelectionProps> {
11
+
12
+ render() {
13
+
14
+ const {
15
+ className
16
+ } = this.props;
17
+
18
+
19
+ return (
20
+ <>
21
+ <ActionButtons alignment="start" className={classNames(
22
+ 'k-time-fast-selection',
23
+ className
24
+ )}
25
+ >
26
+ <Button>1 d</Button>
27
+ <Button>1 h</Button>
28
+ <Button>15 m</Button>
29
+ </ActionButtons>
30
+ </>
31
+ );
32
+
33
+
34
+ }
35
+
36
+ }
package/src/time-selector/time-selector-header.tsx ADDED
@@ -0,0 +1,40 @@
1
+ import * as React from 'react';
2
+ import { ButtonProps } from '../button';
3
+ import { classNames } from '../utils';
4
+
5
+ export interface TimeSelectorHederProps {
6
+ children?: React.ReactElement<ButtonProps> | React.ReactElement<ButtonProps>[];
7
+ className?: null | string;
8
+ title?: string;
9
+ }
10
+
11
+ export class TimeSelectorHeader extends React.Component<TimeSelectorHederProps> {
12
+
13
+ render() {
14
+
15
+ const {
16
+ children,
17
+ className,
18
+ title
19
+ } = this.props;
20
+
21
+
22
+ return (
23
+ <>
24
+ <div className={classNames(
25
+ 'k-time-header',
26
+ className
27
+ )}
28
+ >
29
+ {title != null && (
30
+ <span className="k-title">{title}</span>
31
+ )}
32
+ {children}
33
+ </div>
34
+ </>
35
+ );
36
+
37
+
38
+ }
39
+
40
+ }