@steroidsjs/core 3.0.55 → 3.0.57
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/docs-autogen-result.json +165 -17
- package/en.json +4 -0
- package/package.json +1 -1
- package/ui/content/Calendar/Calendar.d.ts +6 -2
- package/ui/content/Calendar/Calendar.js +5 -3
- package/ui/form/DateField/DateField.js +5 -3
- package/ui/form/DateField/useDateRange.js +2 -0
- package/ui/form/DateRangeField/DateRangeField.d.ts +27 -11
- package/ui/form/DateRangeField/DateRangeField.js +31 -12
- package/ui/form/DateRangeField/useOnDayClick.d.ts +10 -0
- package/ui/form/DateRangeField/useOnDayClick.js +41 -0
- package/ui/form/DateTimeField/DateTimeField.js +4 -2
- package/ui/form/DateTimeRangeField/DateTimeRangeField.d.ts +15 -12
- package/ui/form/DateTimeRangeField/DateTimeRangeField.js +8 -4
- package/ui/form/DropDownField/DropDownField.js +2 -2
package/docs-autogen-result.json
CHANGED
|
@@ -6969,6 +6969,7 @@
|
|
|
6969
6969
|
"defaultProps": {
|
|
6970
6970
|
"numberOfMonths": "1",
|
|
6971
6971
|
"showFooter": "true",
|
|
6972
|
+
"showTodayButton": "true",
|
|
6972
6973
|
"valueFormat": "'YYYY-MM-DD'"
|
|
6973
6974
|
},
|
|
6974
6975
|
"extends": [
|
|
@@ -6999,7 +7000,7 @@
|
|
|
6999
7000
|
"description": "Свойства для компонента DayPickerInput",
|
|
7000
7001
|
"required": false,
|
|
7001
7002
|
"type": "any",
|
|
7002
|
-
"example": "{\n
|
|
7003
|
+
"example": "{\n showWeekNumbers: true\n}",
|
|
7003
7004
|
"defaultValue": null
|
|
7004
7005
|
},
|
|
7005
7006
|
{
|
|
@@ -7011,6 +7012,15 @@
|
|
|
7011
7012
|
"example": null,
|
|
7012
7013
|
"defaultValue": "true"
|
|
7013
7014
|
},
|
|
7015
|
+
{
|
|
7016
|
+
"name": "showTodayButton",
|
|
7017
|
+
"decorators": [],
|
|
7018
|
+
"description": "Нужно ли отображать кнопку \"сегодня\" под календарем.",
|
|
7019
|
+
"required": false,
|
|
7020
|
+
"type": "boolean",
|
|
7021
|
+
"example": null,
|
|
7022
|
+
"defaultValue": "true"
|
|
7023
|
+
},
|
|
7014
7024
|
{
|
|
7015
7025
|
"name": "style",
|
|
7016
7026
|
"decorators": [],
|
|
@@ -7171,7 +7181,7 @@
|
|
|
7171
7181
|
"description": "Свойства для компонента DayPickerInput",
|
|
7172
7182
|
"required": false,
|
|
7173
7183
|
"type": "any",
|
|
7174
|
-
"example": "{\n
|
|
7184
|
+
"example": "{\n showWeekNumbers: true\n}"
|
|
7175
7185
|
},
|
|
7176
7186
|
{
|
|
7177
7187
|
"name": "selectedDates",
|
|
@@ -7189,6 +7199,14 @@
|
|
|
7189
7199
|
"type": "boolean",
|
|
7190
7200
|
"example": null
|
|
7191
7201
|
},
|
|
7202
|
+
{
|
|
7203
|
+
"name": "showTodayButton",
|
|
7204
|
+
"decorators": [],
|
|
7205
|
+
"description": "Нужно ли отображать кнопку \"сегодня\" под календарем.",
|
|
7206
|
+
"required": false,
|
|
7207
|
+
"type": "boolean",
|
|
7208
|
+
"example": null
|
|
7209
|
+
},
|
|
7192
7210
|
{
|
|
7193
7211
|
"name": "style",
|
|
7194
7212
|
"decorators": [],
|
|
@@ -17353,6 +17371,61 @@
|
|
|
17353
17371
|
}
|
|
17354
17372
|
]
|
|
17355
17373
|
},
|
|
17374
|
+
"IDateRangeButton": {
|
|
17375
|
+
"name": "IDateRangeButton",
|
|
17376
|
+
"moduleName": "ui/form/DateRangeField/DateRangeField",
|
|
17377
|
+
"title": "",
|
|
17378
|
+
"description": "",
|
|
17379
|
+
"tags": {},
|
|
17380
|
+
"defaultProps": null,
|
|
17381
|
+
"extends": [],
|
|
17382
|
+
"properties": [
|
|
17383
|
+
{
|
|
17384
|
+
"name": "label",
|
|
17385
|
+
"decorators": [],
|
|
17386
|
+
"description": "",
|
|
17387
|
+
"required": true,
|
|
17388
|
+
"type": "string",
|
|
17389
|
+
"example": null
|
|
17390
|
+
}
|
|
17391
|
+
],
|
|
17392
|
+
"methods": [
|
|
17393
|
+
{
|
|
17394
|
+
"name": "onClick",
|
|
17395
|
+
"decorators": [],
|
|
17396
|
+
"description": "",
|
|
17397
|
+
"required": false,
|
|
17398
|
+
"type": "void",
|
|
17399
|
+
"example": null,
|
|
17400
|
+
"parameters": [
|
|
17401
|
+
{
|
|
17402
|
+
"name": "locale",
|
|
17403
|
+
"decorators": [],
|
|
17404
|
+
"description": "",
|
|
17405
|
+
"required": true,
|
|
17406
|
+
"type": "ILocaleComponent",
|
|
17407
|
+
"example": null
|
|
17408
|
+
},
|
|
17409
|
+
{
|
|
17410
|
+
"name": "changeFrom",
|
|
17411
|
+
"decorators": [],
|
|
17412
|
+
"description": "",
|
|
17413
|
+
"required": true,
|
|
17414
|
+
"type": "{}",
|
|
17415
|
+
"example": null
|
|
17416
|
+
},
|
|
17417
|
+
{
|
|
17418
|
+
"name": "changeTo",
|
|
17419
|
+
"decorators": [],
|
|
17420
|
+
"description": "",
|
|
17421
|
+
"required": true,
|
|
17422
|
+
"type": "{}",
|
|
17423
|
+
"example": null
|
|
17424
|
+
}
|
|
17425
|
+
]
|
|
17426
|
+
}
|
|
17427
|
+
]
|
|
17428
|
+
},
|
|
17356
17429
|
"IDateRangeFieldProps": {
|
|
17357
17430
|
"name": "IDateRangeFieldProps",
|
|
17358
17431
|
"moduleName": "ui/form/DateRangeField/DateRangeField",
|
|
@@ -17574,15 +17647,6 @@
|
|
|
17574
17647
|
"example": "{\n attributes: [\n {\n attribute: 'category',\n field: 'DropDownField'\n }\n ]\n}",
|
|
17575
17648
|
"defaultValue": null
|
|
17576
17649
|
},
|
|
17577
|
-
{
|
|
17578
|
-
"name": "pickerProps",
|
|
17579
|
-
"decorators": [],
|
|
17580
|
-
"description": "Свойства для компонента DayPickerInput",
|
|
17581
|
-
"required": false,
|
|
17582
|
-
"type": "any",
|
|
17583
|
-
"example": "{\n dayPickerProps: {\n showWeekNumbers: true\n }\n}",
|
|
17584
|
-
"defaultValue": null
|
|
17585
|
-
},
|
|
17586
17650
|
{
|
|
17587
17651
|
"name": "placeholder",
|
|
17588
17652
|
"decorators": [],
|
|
@@ -17601,6 +17665,15 @@
|
|
|
17601
17665
|
"example": null,
|
|
17602
17666
|
"defaultValue": null
|
|
17603
17667
|
},
|
|
17668
|
+
{
|
|
17669
|
+
"name": "rangeButtonsPosition",
|
|
17670
|
+
"decorators": [],
|
|
17671
|
+
"description": "Положение дополнительных кнопок (сегодня, вчера и прочие)\nЕсли указано в формате 'position1-position2', то 'position1' будет на устройствах > $tablet-width, а 'position2' на остальных.",
|
|
17672
|
+
"required": false,
|
|
17673
|
+
"type": "\"top\" | \"right\" | \"left\" | \"bottom\" | \"top-right\" | \"bottom-right\" | \"top-left\" | \"bottom-left\" | \"top-bottom\" | \"bottom-top\" | \"left-top\" | \"left-bottom\" | \"left-right\" | \"right-top\" | \"right-bottom\" | \"right-left\"",
|
|
17674
|
+
"example": null,
|
|
17675
|
+
"defaultValue": null
|
|
17676
|
+
},
|
|
17604
17677
|
{
|
|
17605
17678
|
"name": "required",
|
|
17606
17679
|
"decorators": [],
|
|
@@ -17646,6 +17719,15 @@
|
|
|
17646
17719
|
"example": "true",
|
|
17647
17720
|
"defaultValue": null
|
|
17648
17721
|
},
|
|
17722
|
+
{
|
|
17723
|
+
"name": "useSmartRangeReset",
|
|
17724
|
+
"decorators": [],
|
|
17725
|
+
"description": "Активирует логику:\n- Если кликнули по дате начала или конца диапазона, то позволяем её изменить следующим кликом\n- Если клик не на дату конца или начала диапазона, а диапазон есть, то сбрасываем его\n- Если клик не на дату конца или начала диапазона, а диапазона нет, то устанавливаем кликнутую дату в поле from",
|
|
17726
|
+
"required": false,
|
|
17727
|
+
"type": "boolean",
|
|
17728
|
+
"example": "true",
|
|
17729
|
+
"defaultValue": null
|
|
17730
|
+
},
|
|
17649
17731
|
{
|
|
17650
17732
|
"name": "useUTC",
|
|
17651
17733
|
"decorators": [],
|
|
@@ -17681,6 +17763,15 @@
|
|
|
17681
17763
|
"type": "React.ReactNode | {}",
|
|
17682
17764
|
"example": "MyCustomView",
|
|
17683
17765
|
"defaultValue": null
|
|
17766
|
+
},
|
|
17767
|
+
{
|
|
17768
|
+
"name": "withRangeButtons",
|
|
17769
|
+
"decorators": [],
|
|
17770
|
+
"description": "Добавляет дополнительные кнопки к календарю\ntrue - будут отображены кнопки по-умолчанию\nсписок:\n string - одна из кнопок по-умолчанию\n object - кастомная кнопка",
|
|
17771
|
+
"required": false,
|
|
17772
|
+
"type": "boolean | IDateRangeButton[]",
|
|
17773
|
+
"example": null,
|
|
17774
|
+
"defaultValue": null
|
|
17684
17775
|
}
|
|
17685
17776
|
],
|
|
17686
17777
|
"methods": [
|
|
@@ -17716,7 +17807,7 @@
|
|
|
17716
17807
|
"Omit<IFieldWrapperOutputProps",
|
|
17717
17808
|
"'input'>",
|
|
17718
17809
|
"Pick<IDateRangeFieldProps",
|
|
17719
|
-
"'size' | 'icon' | 'errors' | 'showRemove' | 'calendarProps' | 'className' | 'disabled'\n | 'noBorder' | 'style'>"
|
|
17810
|
+
"'size' | 'icon' | 'errors' | 'showRemove' | 'calendarProps' | 'className' | 'disabled'\n | 'noBorder' | 'style' | 'withRangeButtons' | 'rangeButtonsPosition' | 'displayFormat'>"
|
|
17720
17811
|
],
|
|
17721
17812
|
"properties": [
|
|
17722
17813
|
{
|
|
@@ -17751,6 +17842,14 @@
|
|
|
17751
17842
|
"type": "boolean",
|
|
17752
17843
|
"example": "true"
|
|
17753
17844
|
},
|
|
17845
|
+
{
|
|
17846
|
+
"name": "displayFormat",
|
|
17847
|
+
"decorators": [],
|
|
17848
|
+
"description": "Формат даты показываемый пользователю",
|
|
17849
|
+
"required": false,
|
|
17850
|
+
"type": "string",
|
|
17851
|
+
"example": "DD.MM.YYYY"
|
|
17852
|
+
},
|
|
17754
17853
|
{
|
|
17755
17854
|
"name": "errors",
|
|
17756
17855
|
"decorators": [],
|
|
@@ -17847,6 +17946,14 @@
|
|
|
17847
17946
|
"type": "{}",
|
|
17848
17947
|
"example": null
|
|
17849
17948
|
},
|
|
17949
|
+
{
|
|
17950
|
+
"name": "rangeButtonsPosition",
|
|
17951
|
+
"decorators": [],
|
|
17952
|
+
"description": "Положение дополнительных кнопок (сегодня, вчера и прочие)\nЕсли указано в формате 'position1-position2', то 'position1' будет на устройствах > $tablet-width, а 'position2' на остальных.",
|
|
17953
|
+
"required": false,
|
|
17954
|
+
"type": "\"top\" | \"right\" | \"left\" | \"bottom\" | \"top-right\" | \"bottom-right\" | \"top-left\" | \"bottom-left\" | \"top-bottom\" | \"bottom-top\" | \"left-top\" | \"left-bottom\" | \"left-right\" | \"right-top\" | \"right-bottom\" | \"right-left\"",
|
|
17955
|
+
"example": null
|
|
17956
|
+
},
|
|
17850
17957
|
{
|
|
17851
17958
|
"name": "showRemove",
|
|
17852
17959
|
"decorators": [],
|
|
@@ -17870,6 +17977,14 @@
|
|
|
17870
17977
|
"required": false,
|
|
17871
17978
|
"type": "CSSProperties",
|
|
17872
17979
|
"example": "{width: '45%'}"
|
|
17980
|
+
},
|
|
17981
|
+
{
|
|
17982
|
+
"name": "withRangeButtons",
|
|
17983
|
+
"decorators": [],
|
|
17984
|
+
"description": "Добавляет дополнительные кнопки к календарю\ntrue - будут отображены кнопки по-умолчанию\nсписок:\n string - одна из кнопок по-умолчанию\n object - кастомная кнопка",
|
|
17985
|
+
"required": false,
|
|
17986
|
+
"type": "boolean | IDateRangeButton[]",
|
|
17987
|
+
"example": null
|
|
17873
17988
|
}
|
|
17874
17989
|
],
|
|
17875
17990
|
"methods": [
|
|
@@ -18410,12 +18525,12 @@
|
|
|
18410
18525
|
"defaultValue": null
|
|
18411
18526
|
},
|
|
18412
18527
|
{
|
|
18413
|
-
"name": "
|
|
18528
|
+
"name": "rangeButtonsPosition",
|
|
18414
18529
|
"decorators": [],
|
|
18415
|
-
"description": "
|
|
18530
|
+
"description": "Положение дополнительных кнопок (сегодня, вчера и прочие)\nЕсли указано в формате 'position1-position2', то 'position1' будет на устройствах > $tablet-width, а 'position2' на остальных.",
|
|
18416
18531
|
"required": false,
|
|
18417
|
-
"type": "
|
|
18418
|
-
"example":
|
|
18532
|
+
"type": "\"top\" | \"right\" | \"left\" | \"bottom\" | \"top-right\" | \"bottom-right\" | \"top-left\" | \"bottom-left\" | \"top-bottom\" | \"bottom-top\" | \"left-top\" | \"left-bottom\" | \"left-right\" | \"right-top\" | \"right-bottom\" | \"right-left\"",
|
|
18533
|
+
"example": null,
|
|
18419
18534
|
"defaultValue": null
|
|
18420
18535
|
},
|
|
18421
18536
|
{
|
|
@@ -18444,6 +18559,15 @@
|
|
|
18444
18559
|
"type": "React.ReactNode | {}",
|
|
18445
18560
|
"example": "MyCustomView",
|
|
18446
18561
|
"defaultValue": null
|
|
18562
|
+
},
|
|
18563
|
+
{
|
|
18564
|
+
"name": "withRangeButtons",
|
|
18565
|
+
"decorators": [],
|
|
18566
|
+
"description": "Добавляет дополнительные кнопки к календарю\ntrue - будут отображены кнопки по-умолчанию\nсписок:\n string - одна из кнопок по-умолчанию\n object - кастомная кнопка",
|
|
18567
|
+
"required": false,
|
|
18568
|
+
"type": "boolean | IDateRangeButton[]",
|
|
18569
|
+
"example": null,
|
|
18570
|
+
"defaultValue": null
|
|
18447
18571
|
}
|
|
18448
18572
|
],
|
|
18449
18573
|
"methods": []
|
|
@@ -18460,7 +18584,7 @@
|
|
|
18460
18584
|
"Omit<IFieldWrapperOutputProps",
|
|
18461
18585
|
"'input'>",
|
|
18462
18586
|
"Pick<IDateRangeFieldProps",
|
|
18463
|
-
"'size' | 'icon' | 'errors' | 'showRemove' | 'calendarProps' | 'className' | 'disabled'\n | 'noBorder' | 'style'>"
|
|
18587
|
+
"'size' | 'icon' | 'errors' | 'showRemove' | 'calendarProps' | 'className' | 'disabled' | 'withRangeButtons' | 'rangeButtonsPosition'\n | 'noBorder' | 'style'| 'displayFormat'>"
|
|
18464
18588
|
],
|
|
18465
18589
|
"properties": [
|
|
18466
18590
|
{
|
|
@@ -18495,6 +18619,14 @@
|
|
|
18495
18619
|
"type": "boolean",
|
|
18496
18620
|
"example": "true"
|
|
18497
18621
|
},
|
|
18622
|
+
{
|
|
18623
|
+
"name": "displayFormat",
|
|
18624
|
+
"decorators": [],
|
|
18625
|
+
"description": "Формат даты показываемый пользователю",
|
|
18626
|
+
"required": false,
|
|
18627
|
+
"type": "string",
|
|
18628
|
+
"example": "DD.MM.YYYY"
|
|
18629
|
+
},
|
|
18498
18630
|
{
|
|
18499
18631
|
"name": "errors",
|
|
18500
18632
|
"decorators": [],
|
|
@@ -18575,6 +18707,14 @@
|
|
|
18575
18707
|
"type": "boolean",
|
|
18576
18708
|
"example": null
|
|
18577
18709
|
},
|
|
18710
|
+
{
|
|
18711
|
+
"name": "rangeButtonsPosition",
|
|
18712
|
+
"decorators": [],
|
|
18713
|
+
"description": "Положение дополнительных кнопок (сегодня, вчера и прочие)\nЕсли указано в формате 'position1-position2', то 'position1' будет на устройствах > $tablet-width, а 'position2' на остальных.",
|
|
18714
|
+
"required": false,
|
|
18715
|
+
"type": "\"top\" | \"right\" | \"left\" | \"bottom\" | \"top-right\" | \"bottom-right\" | \"top-left\" | \"bottom-left\" | \"top-bottom\" | \"bottom-top\" | \"left-top\" | \"left-bottom\" | \"left-right\" | \"right-top\" | \"right-bottom\" | \"right-left\"",
|
|
18716
|
+
"example": null
|
|
18717
|
+
},
|
|
18578
18718
|
{
|
|
18579
18719
|
"name": "showRemove",
|
|
18580
18720
|
"decorators": [],
|
|
@@ -18606,6 +18746,14 @@
|
|
|
18606
18746
|
"required": false,
|
|
18607
18747
|
"type": "any",
|
|
18608
18748
|
"example": null
|
|
18749
|
+
},
|
|
18750
|
+
{
|
|
18751
|
+
"name": "withRangeButtons",
|
|
18752
|
+
"decorators": [],
|
|
18753
|
+
"description": "Добавляет дополнительные кнопки к календарю\ntrue - будут отображены кнопки по-умолчанию\nсписок:\n string - одна из кнопок по-умолчанию\n object - кастомная кнопка",
|
|
18754
|
+
"required": false,
|
|
18755
|
+
"type": "boolean | IDateRangeButton[]",
|
|
18756
|
+
"example": null
|
|
18609
18757
|
}
|
|
18610
18758
|
],
|
|
18611
18759
|
"methods": [
|
package/en.json
CHANGED
|
@@ -998,6 +998,7 @@
|
|
|
998
998
|
"Параметры роутинга": "",
|
|
999
999
|
"Сохранение в localStorage уровней вложенности.": "",
|
|
1000
1000
|
"Изначально отображать все элементы раскрытыми": "",
|
|
1001
|
+
"Нужно ли отображать кнопку \"сегодня\" под календарем.": "",
|
|
1001
1002
|
"Дополнительные свойства для списка календарей бокового календаря": "",
|
|
1002
1003
|
"Дополнительные свойства для бокового календаря": "",
|
|
1003
1004
|
"Данные для формы с текущими датами календаря": "",
|
|
@@ -1012,7 +1013,10 @@
|
|
|
1012
1013
|
"Пропсы для отображения элемента": "",
|
|
1013
1014
|
"Отображать чекбоксы только на узлах, не имеющих вложенных элементов": "",
|
|
1014
1015
|
"View компонент для элемента дерева": "",
|
|
1016
|
+
"Положение дополнительных кнопок (сегодня, вчера и прочие)\nЕсли указано в формате 'position1-position2', то 'position1' будет на устройствах > $tablet-width, а 'position2' на остальных.": "",
|
|
1015
1017
|
"Перемещать ли фокус на пустое после заполнения": "",
|
|
1018
|
+
"Активирует логику:\n- Если кликнули по дате начала или конца диапазона, то позволяем её изменить следующим кликом\n- Если клик не на дату конца или начала диапазона, а диапазон есть, то сбрасываем его\n- Если клик не на дату конца или начала диапазона, а диапазона нет, то устанавливаем кликнутую дату в поле from": "",
|
|
1019
|
+
"Добавляет дополнительные кнопки к календарю\ntrue - будут отображены кнопки по-умолчанию\nсписок:\n string - одна из кнопок по-умолчанию\n object - кастомная кнопка": "",
|
|
1016
1020
|
"Разделитель для даты и времени, не влияет на отображение": "",
|
|
1017
1021
|
"Нужно ли подгружать данные после закрытия DropDown": "",
|
|
1018
1022
|
"Начальные элементы списка": "",
|
package/package.json
CHANGED
|
@@ -31,9 +31,7 @@ export interface ICalendarProps extends IUiComponent {
|
|
|
31
31
|
* Свойства для компонента DayPickerInput
|
|
32
32
|
* @example
|
|
33
33
|
* {
|
|
34
|
-
* dayPickerProps: {
|
|
35
34
|
* showWeekNumbers: true
|
|
36
|
-
* }
|
|
37
35
|
* }
|
|
38
36
|
*/
|
|
39
37
|
pickerProps?: DayPickerProps | any;
|
|
@@ -60,6 +58,11 @@ export interface ICalendarProps extends IUiComponent {
|
|
|
60
58
|
* @param newDate - дата первого дня нового месяца
|
|
61
59
|
*/
|
|
62
60
|
onMonthChange?: (newDate: Date) => void;
|
|
61
|
+
/**
|
|
62
|
+
* Нужно ли отображать кнопку "сегодня" под календарем.
|
|
63
|
+
* @default true
|
|
64
|
+
*/
|
|
65
|
+
showTodayButton?: boolean;
|
|
63
66
|
}
|
|
64
67
|
export interface ICalendarViewProps extends ICalendarProps {
|
|
65
68
|
/**
|
|
@@ -101,6 +104,7 @@ declare namespace Calendar {
|
|
|
101
104
|
numberOfMonths: number;
|
|
102
105
|
showFooter: boolean;
|
|
103
106
|
valueFormat: string;
|
|
107
|
+
showTodayButton: boolean;
|
|
104
108
|
};
|
|
105
109
|
}
|
|
106
110
|
export default Calendar;
|
|
@@ -47,6 +47,7 @@ function Calendar(props) {
|
|
|
47
47
|
selectedDates: selectedDates,
|
|
48
48
|
toggleCaptionPanel: toggleCaptionPanel,
|
|
49
49
|
isCaptionPanelVisible: isCaptionPanelVisible,
|
|
50
|
+
showTodayButton: props.showTodayButton,
|
|
50
51
|
style: props.style,
|
|
51
52
|
className: props.className,
|
|
52
53
|
viewProps: props.viewProps,
|
|
@@ -54,13 +55,14 @@ function Calendar(props) {
|
|
|
54
55
|
pickerProps: props.pickerProps,
|
|
55
56
|
numberOfMonths: props.numberOfMonths
|
|
56
57
|
}); }, [fromYear, isCaptionPanelVisible, month, onDaySelect, onMonthSelect, props.className,
|
|
57
|
-
props.numberOfMonths, props.pickerProps, props.showFooter, props.
|
|
58
|
-
selectedDates, toYear, toggleCaptionPanel]);
|
|
58
|
+
props.numberOfMonths, props.pickerProps, props.showFooter, props.showTodayButton, props.style,
|
|
59
|
+
props.viewProps, selectedDates, toYear, toggleCaptionPanel]);
|
|
59
60
|
return components.ui.renderView(props.view || 'content.CalendarView', viewProps);
|
|
60
61
|
}
|
|
61
62
|
Calendar.defaultProps = {
|
|
62
63
|
numberOfMonths: 1,
|
|
63
64
|
showFooter: true,
|
|
64
|
-
valueFormat: 'YYYY-MM-DD'
|
|
65
|
+
valueFormat: 'YYYY-MM-DD',
|
|
66
|
+
showTodayButton: true
|
|
65
67
|
};
|
|
66
68
|
exports["default"] = Calendar;
|
|
@@ -39,9 +39,11 @@ function DateField(props) {
|
|
|
39
39
|
}), onClear = _a.onClear, onClose = _a.onClose, isOpened = _a.isOpened, inputProps = _a.inputProps;
|
|
40
40
|
// Calendar props
|
|
41
41
|
var calendarProps = (0, react_1.useMemo)(function () { return (__assign({ value: props.input.value, onChange: props.input.onChange, valueFormat: props.valueFormat }, props.calendarProps)); }, [props.calendarProps, props.input.onChange, props.input.value, props.valueFormat]);
|
|
42
|
-
var viewProps = (0, react_1.useMemo)(function () { return (__assign(__assign({}, props.viewProps), { calendarProps: calendarProps, onClear: onClear, onClose: onClose, isOpened: isOpened, inputProps: inputProps, size: props.size, icon: props.icon, errors: props.errors, label: props.label, disabled: props.disabled, className: props.className, showRemove: props.showRemove, style: props.style, autoPositioning: props.autoPositioning, maskInputRef: maskInputRef, id: props.id })); }, [
|
|
43
|
-
props.
|
|
44
|
-
|
|
42
|
+
var viewProps = (0, react_1.useMemo)(function () { return (__assign(__assign({}, props.viewProps), { calendarProps: calendarProps, onClear: onClear, onClose: onClose, isOpened: isOpened, inputProps: inputProps, size: props.size, icon: props.icon, errors: props.errors, label: props.label, disabled: props.disabled, className: props.className, showRemove: props.showRemove, style: props.style, autoPositioning: props.autoPositioning, maskInputRef: maskInputRef, id: props.id })); }, [
|
|
43
|
+
props.viewProps, props.size, props.icon, props.errors, props.label, props.disabled,
|
|
44
|
+
props.className, props.showRemove, props.style, props.autoPositioning, props.id, calendarProps,
|
|
45
|
+
onClear, onClose, isOpened, inputProps, maskInputRef,
|
|
46
|
+
]);
|
|
45
47
|
return components.ui.renderView(props.view || 'form.DateFieldView', viewProps);
|
|
46
48
|
}
|
|
47
49
|
DateField.defaultProps = {
|
|
@@ -42,6 +42,8 @@ function useDateRange(props) {
|
|
|
42
42
|
var onClear = (0, react_1.useCallback)(function () {
|
|
43
43
|
props.onClearFrom();
|
|
44
44
|
props.onClearTo();
|
|
45
|
+
valueFromRef.current = '';
|
|
46
|
+
valueToRef.current = '';
|
|
45
47
|
}, [props]);
|
|
46
48
|
// Custom onFocus for inputFrom
|
|
47
49
|
var inputFromRef = (0, react_1.useRef)(null);
|
|
@@ -1,8 +1,13 @@
|
|
|
1
1
|
import React from 'react';
|
|
2
2
|
import { MaskitoOptions } from '@maskito/core';
|
|
3
|
+
import { ILocaleComponent } from '../../../components/LocaleComponent';
|
|
3
4
|
import { ICalendarProps } from '../../content/Calendar/Calendar';
|
|
4
5
|
import { IDateInputStateInput, IDateInputStateOutput } from '../DateField/useDateInputState';
|
|
5
6
|
import { IFieldWrapperInputProps, IFieldWrapperOutputProps } from '../../form/Field/fieldWrapper';
|
|
7
|
+
export interface IDateRangeButton {
|
|
8
|
+
label: string;
|
|
9
|
+
onClick: (locale: ILocaleComponent, changeFrom: (value: string) => void, changeTo: (value: string) => void) => void;
|
|
10
|
+
}
|
|
6
11
|
/**
|
|
7
12
|
* DateRangeField
|
|
8
13
|
*
|
|
@@ -22,16 +27,6 @@ export interface IDateRangeFieldProps extends IDateInputStateInput, Omit<IFieldW
|
|
|
22
27
|
* @example 'toTime'
|
|
23
28
|
*/
|
|
24
29
|
attributeTo?: string;
|
|
25
|
-
/**
|
|
26
|
-
* Свойства для компонента DayPickerInput
|
|
27
|
-
* @example
|
|
28
|
-
* {
|
|
29
|
-
* dayPickerProps: {
|
|
30
|
-
* showWeekNumbers: true
|
|
31
|
-
* }
|
|
32
|
-
* }
|
|
33
|
-
*/
|
|
34
|
-
pickerProps?: any;
|
|
35
30
|
/**
|
|
36
31
|
* Формат даты показываемый пользователю
|
|
37
32
|
* @example DD.MM.YYYY
|
|
@@ -92,9 +87,30 @@ export interface IDateRangeFieldProps extends IDateInputStateInput, Omit<IFieldW
|
|
|
92
87
|
*/
|
|
93
88
|
to: MaskitoOptions;
|
|
94
89
|
};
|
|
90
|
+
/**
|
|
91
|
+
* Активирует логику:
|
|
92
|
+
* - Если кликнули по дате начала или конца диапазона, то позволяем её изменить следующим кликом
|
|
93
|
+
* - Если клик не на дату конца или начала диапазона, а диапазон есть, то сбрасываем его
|
|
94
|
+
* - Если клик не на дату конца или начала диапазона, а диапазона нет, то устанавливаем кликнутую дату в поле from
|
|
95
|
+
* @example true
|
|
96
|
+
*/
|
|
97
|
+
useSmartRangeReset?: boolean;
|
|
98
|
+
/**
|
|
99
|
+
* Добавляет дополнительные кнопки к календарю
|
|
100
|
+
* true - будут отображены кнопки по-умолчанию
|
|
101
|
+
* список:
|
|
102
|
+
* string - одна из кнопок по-умолчанию
|
|
103
|
+
* object - кастомная кнопка
|
|
104
|
+
*/
|
|
105
|
+
withRangeButtons?: boolean | IDateRangeButton[];
|
|
106
|
+
/**
|
|
107
|
+
* Положение дополнительных кнопок (сегодня, вчера и прочие)
|
|
108
|
+
* Если указано в формате 'position1-position2', то 'position1' будет на устройствах > $tablet-width, а 'position2' на остальных.
|
|
109
|
+
*/
|
|
110
|
+
rangeButtonsPosition?: 'top' | 'bottom' | 'left' | 'right' | 'top-left' | 'top-right' | 'top-bottom' | 'bottom-left' | 'bottom-right' | 'bottom-top' | 'left-top' | 'left-bottom' | 'left-right' | 'right-top' | 'right-bottom' | 'right-left';
|
|
95
111
|
[key: string]: any;
|
|
96
112
|
}
|
|
97
|
-
export interface IDateRangeFieldViewProps extends IDateInputStateOutput, Omit<IFieldWrapperOutputProps, 'input'>, Pick<IDateRangeFieldProps, 'size' | 'icon' | 'errors' | 'showRemove' | 'calendarProps' | 'className' | 'disabled' | 'noBorder' | 'style'> {
|
|
113
|
+
export interface IDateRangeFieldViewProps extends IDateInputStateOutput, Omit<IFieldWrapperOutputProps, 'input'>, Pick<IDateRangeFieldProps, 'size' | 'icon' | 'errors' | 'showRemove' | 'calendarProps' | 'className' | 'disabled' | 'noBorder' | 'style' | 'withRangeButtons' | 'rangeButtonsPosition' | 'displayFormat'> {
|
|
98
114
|
inputPropsFrom?: any;
|
|
99
115
|
inputPropsTo?: any;
|
|
100
116
|
errorsFrom?: string[];
|
|
@@ -1,4 +1,15 @@
|
|
|
1
1
|
"use strict";
|
|
2
|
+
var __assign = (this && this.__assign) || function () {
|
|
3
|
+
__assign = Object.assign || function(t) {
|
|
4
|
+
for (var s, i = 1, n = arguments.length; i < n; i++) {
|
|
5
|
+
s = arguments[i];
|
|
6
|
+
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
|
|
7
|
+
t[p] = s[p];
|
|
8
|
+
}
|
|
9
|
+
return t;
|
|
10
|
+
};
|
|
11
|
+
return __assign.apply(this, arguments);
|
|
12
|
+
};
|
|
2
13
|
var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
|
|
3
14
|
if (k2 === undefined) k2 = k;
|
|
4
15
|
var desc = Object.getOwnPropertyDescriptor(m, k);
|
|
@@ -33,6 +44,7 @@ var useDateRange_1 = __importDefault(require("../../form/DateField/useDateRange"
|
|
|
33
44
|
var hooks_1 = require("../../../hooks");
|
|
34
45
|
var useDateInputState_1 = __importDefault(require("../DateField/useDateInputState"));
|
|
35
46
|
var fieldWrapper_1 = __importDefault(require("../../form/Field/fieldWrapper"));
|
|
47
|
+
var useOnDayClick_1 = __importDefault(require("./useOnDayClick"));
|
|
36
48
|
function DateRangeField(props) {
|
|
37
49
|
var _a, _b;
|
|
38
50
|
var components = (0, hooks_1.useComponents)();
|
|
@@ -95,15 +107,16 @@ function DateRangeField(props) {
|
|
|
95
107
|
maskInputFromRef,
|
|
96
108
|
maskInputToRef,
|
|
97
109
|
]);
|
|
110
|
+
var onDayClick = (0, useOnDayClick_1["default"])({
|
|
111
|
+
focus: focus,
|
|
112
|
+
useSmartRangeReset: props.useSmartRangeReset,
|
|
113
|
+
fromValue: props.inputFrom.value,
|
|
114
|
+
toValue: props.inputTo.value,
|
|
115
|
+
onFromChange: props.inputFrom.onChange,
|
|
116
|
+
onToChange: props.inputTo.onChange
|
|
117
|
+
});
|
|
98
118
|
// Calendar props
|
|
99
|
-
var calendarProps = (0, react_1.useMemo)(function () { return ({
|
|
100
|
-
value: [props.inputFrom.value, props.inputTo.value],
|
|
101
|
-
onChange: focus === 'from' ? props.inputFrom.onChange : props.inputTo.onChange,
|
|
102
|
-
valueFormat: props.valueFormat,
|
|
103
|
-
numberOfMonths: 2,
|
|
104
|
-
showFooter: false
|
|
105
|
-
}); }, [focus, props.inputFrom.onChange, props.inputFrom.value, props.inputTo.onChange,
|
|
106
|
-
props.inputTo.value, props.valueFormat]);
|
|
119
|
+
var calendarProps = (0, react_1.useMemo)(function () { return (__assign({ value: [props.inputFrom.value, props.inputTo.value], onChange: onDayClick, valueFormat: props.valueFormat, numberOfMonths: 2, showFooter: false }, props.calendarProps)); }, [onDayClick, props.calendarProps, props.inputFrom.value, props.inputTo.value, props.valueFormat]);
|
|
107
120
|
var viewProps = (0, react_1.useMemo)(function () { return ({
|
|
108
121
|
onClear: onClear,
|
|
109
122
|
onClose: onClose,
|
|
@@ -119,9 +132,13 @@ function DateRangeField(props) {
|
|
|
119
132
|
inputPropsFrom: extendedInputPropsFrom,
|
|
120
133
|
isOpened: focus === 'from' ? isOpenedFrom : isOpenedTo,
|
|
121
134
|
style: props.style,
|
|
122
|
-
id: props.id
|
|
123
|
-
|
|
124
|
-
|
|
135
|
+
id: props.id,
|
|
136
|
+
withRangeButtons: props.withRangeButtons,
|
|
137
|
+
rangeButtonsPosition: props.rangeButtonsPosition,
|
|
138
|
+
displayFormat: props.displayFormat
|
|
139
|
+
}); }, [calendarProps, extendedInputPropsFrom, extendedInputPropsTo, focus, isOpenedFrom, isOpenedTo, onClear,
|
|
140
|
+
onClose, props.className, props.disabled, props.errorsFrom, props.errorsTo, props.icon, props.id, props.showRemove,
|
|
141
|
+
props.size, props.style, props.withRangeButtons, props.rangeButtonsPosition, props.displayFormat]);
|
|
125
142
|
return components.ui.renderView(props.view || 'form.DateRangeFieldView', viewProps);
|
|
126
143
|
}
|
|
127
144
|
DateRangeField.defaultProps = {
|
|
@@ -134,6 +151,7 @@ DateRangeField.defaultProps = {
|
|
|
134
151
|
useSmartFocus: true,
|
|
135
152
|
hasInitialFocus: false,
|
|
136
153
|
icon: true,
|
|
154
|
+
useSmartRangeReset: true,
|
|
137
155
|
maskOptions: {
|
|
138
156
|
from: (0, kit_1.maskitoDateOptionsGenerator)({
|
|
139
157
|
mode: 'dd/mm/yyyy',
|
|
@@ -143,6 +161,7 @@ DateRangeField.defaultProps = {
|
|
|
143
161
|
mode: 'dd/mm/yyyy',
|
|
144
162
|
separator: '.'
|
|
145
163
|
})
|
|
146
|
-
}
|
|
164
|
+
},
|
|
165
|
+
rangeButtonsPosition: 'left-bottom'
|
|
147
166
|
};
|
|
148
167
|
exports["default"] = (0, fieldWrapper_1["default"])('DateRangeField', DateRangeField, { attributeSuffixes: ['from', 'to'] });
|
|
@@ -0,0 +1,10 @@
|
|
|
1
|
+
interface IUseOnDayClickProps {
|
|
2
|
+
useSmartRangeReset?: boolean;
|
|
3
|
+
focus: 'from' | 'to';
|
|
4
|
+
fromValue: string;
|
|
5
|
+
toValue: string;
|
|
6
|
+
onFromChange: (value: string) => void;
|
|
7
|
+
onToChange: (value: string) => void;
|
|
8
|
+
}
|
|
9
|
+
export default function useOnDayClick(props: IUseOnDayClickProps): (value: any) => void;
|
|
10
|
+
export {};
|
|
@@ -0,0 +1,41 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
exports.__esModule = true;
|
|
3
|
+
var react_1 = require("react");
|
|
4
|
+
function useOnDayClick(props) {
|
|
5
|
+
var useSmartRangeReset = props.useSmartRangeReset, focus = props.focus, fromValue = props.fromValue, toValue = props.toValue, onFromChange = props.onFromChange, onToChange = props.onToChange;
|
|
6
|
+
var onDayClick = (0, react_1.useCallback)(function (value) {
|
|
7
|
+
if (useSmartRangeReset) {
|
|
8
|
+
// Если кликнули по дате начала или конца диапазона, то позволяем её изменить следующим кликом
|
|
9
|
+
// Если клик не на дату конца или начала диапазона, а диапазон есть, то сбрасываем его
|
|
10
|
+
if (value === fromValue) {
|
|
11
|
+
onFromChange(toValue);
|
|
12
|
+
onToChange(null);
|
|
13
|
+
return;
|
|
14
|
+
}
|
|
15
|
+
if (value === toValue) {
|
|
16
|
+
onFromChange(fromValue);
|
|
17
|
+
onToChange(null);
|
|
18
|
+
return;
|
|
19
|
+
}
|
|
20
|
+
if (fromValue && toValue) {
|
|
21
|
+
onToChange(null);
|
|
22
|
+
onFromChange(value);
|
|
23
|
+
return;
|
|
24
|
+
}
|
|
25
|
+
if (fromValue) {
|
|
26
|
+
onToChange(value);
|
|
27
|
+
return;
|
|
28
|
+
}
|
|
29
|
+
onFromChange(value);
|
|
30
|
+
return;
|
|
31
|
+
}
|
|
32
|
+
if (focus === 'from') {
|
|
33
|
+
onFromChange(value);
|
|
34
|
+
}
|
|
35
|
+
else {
|
|
36
|
+
onToChange(value);
|
|
37
|
+
}
|
|
38
|
+
}, [focus, fromValue, onFromChange, onToChange, toValue, useSmartRangeReset]);
|
|
39
|
+
return onDayClick;
|
|
40
|
+
}
|
|
41
|
+
exports["default"] = useOnDayClick;
|
|
@@ -77,8 +77,10 @@ function DateTimeField(props) {
|
|
|
77
77
|
disabled: props.disabled,
|
|
78
78
|
style: props.style,
|
|
79
79
|
id: props.id
|
|
80
|
-
}); }, [
|
|
81
|
-
|
|
80
|
+
}); }, [
|
|
81
|
+
calendarProps, inputProps, isOpened, maskInputRef, onClear, onClose, props.className, props.disabled, props.errors,
|
|
82
|
+
props.icon, props.id, props.placeholder, props.showRemove, props.size, props.style, timePanelViewProps,
|
|
83
|
+
]);
|
|
82
84
|
return components.ui.renderView(props.view || 'form.DateTimeFieldView', viewProps);
|
|
83
85
|
}
|
|
84
86
|
DateTimeField.defaultProps = {
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import { MaskitoOptions } from '@maskito/core';
|
|
2
2
|
import { ICalendarProps } from '../../content/Calendar/Calendar';
|
|
3
|
-
import { IDateRangeFieldProps } from '../../form/DateRangeField/DateRangeField';
|
|
3
|
+
import { IDateRangeButton, IDateRangeFieldProps } from '../../form/DateRangeField/DateRangeField';
|
|
4
4
|
import { IDateInputStateInput, IDateInputStateOutput } from '../../form/DateField/useDateInputState';
|
|
5
5
|
import { IFieldWrapperInputProps, IFieldWrapperOutputProps } from '../../form/Field/fieldWrapper';
|
|
6
6
|
/**
|
|
@@ -23,16 +23,6 @@ export interface IDateTimeRangeFieldProps extends Omit<IDateInputStateInput, 'in
|
|
|
23
23
|
* @example 'toTime'
|
|
24
24
|
*/
|
|
25
25
|
attributeTo?: string;
|
|
26
|
-
/**
|
|
27
|
-
* Свойства для компонента DayPickerInput
|
|
28
|
-
* @example
|
|
29
|
-
* {
|
|
30
|
-
* dayPickerProps: {
|
|
31
|
-
* showWeekNumbers: true
|
|
32
|
-
* }
|
|
33
|
-
* }
|
|
34
|
-
*/
|
|
35
|
-
pickerProps?: any;
|
|
36
26
|
/**
|
|
37
27
|
* Свойства для поля 'from'
|
|
38
28
|
*/
|
|
@@ -67,9 +57,22 @@ export interface IDateTimeRangeFieldProps extends Omit<IDateInputStateInput, 'in
|
|
|
67
57
|
*/
|
|
68
58
|
to: MaskitoOptions;
|
|
69
59
|
};
|
|
60
|
+
/**
|
|
61
|
+
* Добавляет дополнительные кнопки к календарю
|
|
62
|
+
* true - будут отображены кнопки по-умолчанию
|
|
63
|
+
* список:
|
|
64
|
+
* string - одна из кнопок по-умолчанию
|
|
65
|
+
* object - кастомная кнопка
|
|
66
|
+
*/
|
|
67
|
+
withRangeButtons?: boolean | IDateRangeButton[];
|
|
68
|
+
/**
|
|
69
|
+
* Положение дополнительных кнопок (сегодня, вчера и прочие)
|
|
70
|
+
* Если указано в формате 'position1-position2', то 'position1' будет на устройствах > $tablet-width, а 'position2' на остальных.
|
|
71
|
+
*/
|
|
72
|
+
rangeButtonsPosition?: 'top' | 'bottom' | 'left' | 'right' | 'top-left' | 'top-right' | 'top-bottom' | 'bottom-left' | 'bottom-right' | 'bottom-top' | 'left-top' | 'left-bottom' | 'left-right' | 'right-top' | 'right-bottom' | 'right-left';
|
|
70
73
|
[key: string]: any;
|
|
71
74
|
}
|
|
72
|
-
export interface IDateTimeRangeFieldViewProps extends IDateInputStateOutput, Omit<IFieldWrapperOutputProps, 'input'>, Pick<IDateRangeFieldProps, 'size' | 'icon' | 'errors' | 'showRemove' | 'calendarProps' | 'className' | 'disabled' | 'noBorder' | 'style'> {
|
|
75
|
+
export interface IDateTimeRangeFieldViewProps extends IDateInputStateOutput, Omit<IFieldWrapperOutputProps, 'input'>, Pick<IDateRangeFieldProps, 'size' | 'icon' | 'errors' | 'showRemove' | 'calendarProps' | 'className' | 'disabled' | 'withRangeButtons' | 'rangeButtonsPosition' | 'noBorder' | 'style' | 'displayFormat'> {
|
|
73
76
|
timePanelViewProps?: any;
|
|
74
77
|
calendarProps?: ICalendarProps;
|
|
75
78
|
inputPropsFrom?: any;
|
|
@@ -157,10 +157,13 @@ function DateTimeRangeField(props) {
|
|
|
157
157
|
isOpened: focus === 'from' ? isOpenedFrom : isOpenedTo,
|
|
158
158
|
disabled: props.disabled,
|
|
159
159
|
style: props.style,
|
|
160
|
-
id: props.id
|
|
160
|
+
id: props.id,
|
|
161
|
+
withRangeButtons: props.withRangeButtons,
|
|
162
|
+
rangeButtonsPosition: props.rangeButtonsPosition,
|
|
163
|
+
displayFormat: props.displayFormat
|
|
161
164
|
}); }, [calendarProps, extendedInputPropsFrom, extendedInputPropsTo, focus, isOpenedFrom,
|
|
162
|
-
isOpenedTo, onClear, onClose, props.className, props.disabled, props.errorsFrom,
|
|
163
|
-
props.errorsTo, props.icon, props.id, props.showRemove, props.size, props.style, timePanelViewProps]);
|
|
165
|
+
isOpenedTo, onClear, onClose, props.className, props.disabled, props.errorsFrom, props.withRangeButtons, props.rangeButtonsPosition,
|
|
166
|
+
props.errorsTo, props.icon, props.id, props.showRemove, props.size, props.style, timePanelViewProps, props.displayFormat]);
|
|
164
167
|
return components.ui.renderView(props.view || 'form.DateTimeRangeFieldView', viewProps);
|
|
165
168
|
}
|
|
166
169
|
DateTimeRangeField.defaultProps = {
|
|
@@ -185,6 +188,7 @@ DateTimeRangeField.defaultProps = {
|
|
|
185
188
|
timeMode: 'HH:MM',
|
|
186
189
|
dateSeparator: '.'
|
|
187
190
|
})
|
|
188
|
-
}
|
|
191
|
+
},
|
|
192
|
+
rangeButtonsPosition: 'left-bottom'
|
|
189
193
|
};
|
|
190
194
|
exports["default"] = (0, fieldWrapper_1["default"])('DateTimeRangeField', DateTimeRangeField, { attributeSuffixes: ['from', 'to'] });
|
|
@@ -158,8 +158,6 @@ function DropDownField(props) {
|
|
|
158
158
|
}, [props.onReset, setSelectedIds]);
|
|
159
159
|
var onClose = (0, react_1.useCallback)(function () {
|
|
160
160
|
if (isOpened) {
|
|
161
|
-
setIsFocused(false);
|
|
162
|
-
setIsOpened(false);
|
|
163
161
|
if (props.isFetchOnClose && fetchRemote) {
|
|
164
162
|
fetchRemote(false);
|
|
165
163
|
}
|
|
@@ -167,6 +165,8 @@ function DropDownField(props) {
|
|
|
167
165
|
props.onClose(selectedIds);
|
|
168
166
|
}
|
|
169
167
|
}
|
|
168
|
+
setIsFocused(false);
|
|
169
|
+
setIsOpened(false);
|
|
170
170
|
}, [fetchRemote, isOpened, props, selectedIds, setIsFocused, setIsOpened]);
|
|
171
171
|
// Outside click -> close
|
|
172
172
|
var forwardedRef = (0, react_1.useRef)(null);
|