@steroidsjs/core 3.0.52 → 3.0.54
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 +348 -20
- package/en.json +1 -1
- package/hooks/useList.d.ts +1 -0
- package/hooks/useList.js +2 -1
- package/package.json +1 -1
- package/ui/form/DropDownField/DropDownField.d.ts +2 -1
- package/ui/form/DropDownField/DropDownField.js +14 -6
- package/ui/form/FieldList/FieldList.js +25 -3
- package/ui/form/Form/AutoSaveHelper.js +1 -1
- package/ui/form/Form/Form.js +1 -1
- package/ui/form/MaskField/MaskField.d.ts +2 -1
- package/ui/list/Grid/Grid.js +4 -2
- package/ui/list/Pagination/Pagination.d.ts +6 -1
- package/ui/nav/Router/Router.js +3 -1
package/docs-autogen-result.json
CHANGED
|
@@ -4143,6 +4143,14 @@
|
|
|
4143
4143
|
"required": true,
|
|
4144
4144
|
"type": "Model",
|
|
4145
4145
|
"example": null
|
|
4146
|
+
},
|
|
4147
|
+
{
|
|
4148
|
+
"name": "sort",
|
|
4149
|
+
"decorators": [],
|
|
4150
|
+
"description": "",
|
|
4151
|
+
"required": false,
|
|
4152
|
+
"type": "string",
|
|
4153
|
+
"example": null
|
|
4146
4154
|
}
|
|
4147
4155
|
],
|
|
4148
4156
|
"methods": [
|
|
@@ -19451,6 +19459,14 @@
|
|
|
19451
19459
|
"type": "boolean | IAutoCompleteConfig",
|
|
19452
19460
|
"example": "{\n enable: true,\n minLength: 2,\n delay: 100\n}"
|
|
19453
19461
|
},
|
|
19462
|
+
{
|
|
19463
|
+
"name": "autoCompleteInputForwardedRef",
|
|
19464
|
+
"decorators": [],
|
|
19465
|
+
"description": "",
|
|
19466
|
+
"required": true,
|
|
19467
|
+
"type": "MutableRefObject",
|
|
19468
|
+
"example": null
|
|
19469
|
+
},
|
|
19454
19470
|
{
|
|
19455
19471
|
"name": "autoCompleteInputRef",
|
|
19456
19472
|
"decorators": [],
|
|
@@ -19523,14 +19539,6 @@
|
|
|
19523
19539
|
"type": "string",
|
|
19524
19540
|
"example": null
|
|
19525
19541
|
},
|
|
19526
|
-
{
|
|
19527
|
-
"name": "forwardedInputRef",
|
|
19528
|
-
"decorators": [],
|
|
19529
|
-
"description": "",
|
|
19530
|
-
"required": true,
|
|
19531
|
-
"type": "MutableRefObject",
|
|
19532
|
-
"example": null
|
|
19533
|
-
},
|
|
19534
19542
|
{
|
|
19535
19543
|
"name": "forwardedRef",
|
|
19536
19544
|
"decorators": [],
|
|
@@ -19579,6 +19587,14 @@
|
|
|
19579
19587
|
"type": "any",
|
|
19580
19588
|
"example": null
|
|
19581
19589
|
},
|
|
19590
|
+
{
|
|
19591
|
+
"name": "inputRef",
|
|
19592
|
+
"decorators": [],
|
|
19593
|
+
"description": "",
|
|
19594
|
+
"required": true,
|
|
19595
|
+
"type": "MutableRefObject",
|
|
19596
|
+
"example": null
|
|
19597
|
+
},
|
|
19582
19598
|
{
|
|
19583
19599
|
"name": "inputValue",
|
|
19584
19600
|
"decorators": [],
|
|
@@ -25633,6 +25649,318 @@
|
|
|
25633
25649
|
}
|
|
25634
25650
|
]
|
|
25635
25651
|
},
|
|
25652
|
+
"IMaskFieldProps": {
|
|
25653
|
+
"name": "IMaskFieldProps",
|
|
25654
|
+
"moduleName": "ui/form/MaskField/MaskField",
|
|
25655
|
+
"title": "MaskField",
|
|
25656
|
+
"description": "\nКомпонент поля ввода текста с маской.\n",
|
|
25657
|
+
"tags": {},
|
|
25658
|
+
"defaultProps": null,
|
|
25659
|
+
"extends": [
|
|
25660
|
+
"IInputFieldProps"
|
|
25661
|
+
],
|
|
25662
|
+
"properties": [
|
|
25663
|
+
{
|
|
25664
|
+
"name": "addonAfter",
|
|
25665
|
+
"decorators": [],
|
|
25666
|
+
"description": "Текст или React-нода, которая будет отрендерена справа от поля.",
|
|
25667
|
+
"required": false,
|
|
25668
|
+
"type": "ReactNode",
|
|
25669
|
+
"example": "'.com'",
|
|
25670
|
+
"defaultValue": null
|
|
25671
|
+
},
|
|
25672
|
+
{
|
|
25673
|
+
"name": "addonBefore",
|
|
25674
|
+
"decorators": [],
|
|
25675
|
+
"description": "Текст или React-нода, которая будет отрендерена слева от поля.",
|
|
25676
|
+
"required": false,
|
|
25677
|
+
"type": "ReactNode",
|
|
25678
|
+
"example": "'http://'",
|
|
25679
|
+
"defaultValue": null
|
|
25680
|
+
},
|
|
25681
|
+
{
|
|
25682
|
+
"name": "attribute",
|
|
25683
|
+
"decorators": [],
|
|
25684
|
+
"description": "Аттрибут (название) поля в форме",
|
|
25685
|
+
"required": false,
|
|
25686
|
+
"type": "string",
|
|
25687
|
+
"example": "'isVisible'",
|
|
25688
|
+
"defaultValue": null
|
|
25689
|
+
},
|
|
25690
|
+
{
|
|
25691
|
+
"name": "className",
|
|
25692
|
+
"decorators": [],
|
|
25693
|
+
"description": "Дополнительный CSS-класс для элемента отображения",
|
|
25694
|
+
"required": false,
|
|
25695
|
+
"type": "string",
|
|
25696
|
+
"example": null,
|
|
25697
|
+
"defaultValue": null
|
|
25698
|
+
},
|
|
25699
|
+
{
|
|
25700
|
+
"name": "date",
|
|
25701
|
+
"decorators": [],
|
|
25702
|
+
"description": "",
|
|
25703
|
+
"required": false,
|
|
25704
|
+
"type": "any",
|
|
25705
|
+
"example": null,
|
|
25706
|
+
"defaultValue": null
|
|
25707
|
+
},
|
|
25708
|
+
{
|
|
25709
|
+
"name": "debounce",
|
|
25710
|
+
"decorators": [],
|
|
25711
|
+
"description": "Задержка применения введённого значения",
|
|
25712
|
+
"required": false,
|
|
25713
|
+
"type": "boolean | IDebounceConfig",
|
|
25714
|
+
"example": null,
|
|
25715
|
+
"defaultValue": null
|
|
25716
|
+
},
|
|
25717
|
+
{
|
|
25718
|
+
"name": "disabled",
|
|
25719
|
+
"decorators": [],
|
|
25720
|
+
"description": "Переводит элемент в состояние \"не активен\"",
|
|
25721
|
+
"required": false,
|
|
25722
|
+
"type": "boolean",
|
|
25723
|
+
"example": "true",
|
|
25724
|
+
"defaultValue": null
|
|
25725
|
+
},
|
|
25726
|
+
{
|
|
25727
|
+
"name": "errors",
|
|
25728
|
+
"decorators": [],
|
|
25729
|
+
"description": "Ошибки в поле",
|
|
25730
|
+
"required": false,
|
|
25731
|
+
"type": "string[]",
|
|
25732
|
+
"example": "['Error text']",
|
|
25733
|
+
"defaultValue": null
|
|
25734
|
+
},
|
|
25735
|
+
{
|
|
25736
|
+
"name": "fieldLayoutClassName",
|
|
25737
|
+
"decorators": [],
|
|
25738
|
+
"description": "Дополнительный CSS-класс для обертки FieldLayout",
|
|
25739
|
+
"required": false,
|
|
25740
|
+
"type": "string",
|
|
25741
|
+
"example": null,
|
|
25742
|
+
"defaultValue": null
|
|
25743
|
+
},
|
|
25744
|
+
{
|
|
25745
|
+
"name": "hint",
|
|
25746
|
+
"decorators": [],
|
|
25747
|
+
"description": "Подсказка, которая отобразится рядом с полем",
|
|
25748
|
+
"required": false,
|
|
25749
|
+
"type": "string",
|
|
25750
|
+
"example": "'Only english letters'",
|
|
25751
|
+
"defaultValue": null
|
|
25752
|
+
},
|
|
25753
|
+
{
|
|
25754
|
+
"name": "id",
|
|
25755
|
+
"decorators": [],
|
|
25756
|
+
"description": "Input ID для связи поля с label",
|
|
25757
|
+
"required": false,
|
|
25758
|
+
"type": "string",
|
|
25759
|
+
"example": null,
|
|
25760
|
+
"defaultValue": null
|
|
25761
|
+
},
|
|
25762
|
+
{
|
|
25763
|
+
"name": "inputProps",
|
|
25764
|
+
"decorators": [],
|
|
25765
|
+
"description": "Свойства для элемента input",
|
|
25766
|
+
"required": false,
|
|
25767
|
+
"type": "InputHTMLAttributes",
|
|
25768
|
+
"example": "{ onKeyDown: ... }",
|
|
25769
|
+
"defaultValue": null
|
|
25770
|
+
},
|
|
25771
|
+
{
|
|
25772
|
+
"name": "isRenderWithoutFieldLayout",
|
|
25773
|
+
"decorators": [],
|
|
25774
|
+
"description": "Возможность отрендерить поле без обертки в компонент FieldLayout",
|
|
25775
|
+
"required": false,
|
|
25776
|
+
"type": "boolean",
|
|
25777
|
+
"example": null,
|
|
25778
|
+
"defaultValue": null
|
|
25779
|
+
},
|
|
25780
|
+
{
|
|
25781
|
+
"name": "label",
|
|
25782
|
+
"decorators": [],
|
|
25783
|
+
"description": "Название поля либо отмена отображение поля (false)",
|
|
25784
|
+
"required": false,
|
|
25785
|
+
"type": "any",
|
|
25786
|
+
"example": "'Visible'",
|
|
25787
|
+
"defaultValue": null
|
|
25788
|
+
},
|
|
25789
|
+
{
|
|
25790
|
+
"name": "leadIcon",
|
|
25791
|
+
"decorators": [],
|
|
25792
|
+
"description": "Пользовательская иконка svg или название иконки",
|
|
25793
|
+
"required": false,
|
|
25794
|
+
"type": "string | ReactElement",
|
|
25795
|
+
"example": null,
|
|
25796
|
+
"defaultValue": null
|
|
25797
|
+
},
|
|
25798
|
+
{
|
|
25799
|
+
"name": "maskOptions",
|
|
25800
|
+
"decorators": [],
|
|
25801
|
+
"description": "Конфигурация маски",
|
|
25802
|
+
"required": false,
|
|
25803
|
+
"type": "MaskitoOptions",
|
|
25804
|
+
"example": null,
|
|
25805
|
+
"defaultValue": null
|
|
25806
|
+
},
|
|
25807
|
+
{
|
|
25808
|
+
"name": "model",
|
|
25809
|
+
"decorators": [],
|
|
25810
|
+
"description": "Модель с полями формы",
|
|
25811
|
+
"required": false,
|
|
25812
|
+
"type": "any",
|
|
25813
|
+
"example": "{\n attributes: [\n {\n attribute: 'category',\n field: 'DropDownField'\n }\n ]\n}",
|
|
25814
|
+
"defaultValue": null
|
|
25815
|
+
},
|
|
25816
|
+
{
|
|
25817
|
+
"name": "placeholder",
|
|
25818
|
+
"decorators": [],
|
|
25819
|
+
"description": "Подсказка для поля",
|
|
25820
|
+
"required": false,
|
|
25821
|
+
"type": "string",
|
|
25822
|
+
"example": "Your text...",
|
|
25823
|
+
"defaultValue": null
|
|
25824
|
+
},
|
|
25825
|
+
{
|
|
25826
|
+
"name": "prefix",
|
|
25827
|
+
"decorators": [],
|
|
25828
|
+
"description": "Префикс, который добавится к аттрибуту (названию) поля в форме",
|
|
25829
|
+
"required": false,
|
|
25830
|
+
"type": "string | boolean",
|
|
25831
|
+
"example": null,
|
|
25832
|
+
"defaultValue": null
|
|
25833
|
+
},
|
|
25834
|
+
{
|
|
25835
|
+
"name": "required",
|
|
25836
|
+
"decorators": [],
|
|
25837
|
+
"description": "Обязательное ли поле? Если true, то к названию будет добавлен\nмодификатор 'required' - красная звездочка (по умолчанию)",
|
|
25838
|
+
"required": false,
|
|
25839
|
+
"type": "boolean",
|
|
25840
|
+
"example": "true",
|
|
25841
|
+
"defaultValue": null
|
|
25842
|
+
},
|
|
25843
|
+
{
|
|
25844
|
+
"name": "showClear",
|
|
25845
|
+
"decorators": [],
|
|
25846
|
+
"description": "Показывать иконку очищения поля",
|
|
25847
|
+
"required": false,
|
|
25848
|
+
"type": "boolean",
|
|
25849
|
+
"example": "true",
|
|
25850
|
+
"defaultValue": null
|
|
25851
|
+
},
|
|
25852
|
+
{
|
|
25853
|
+
"name": "size",
|
|
25854
|
+
"decorators": [],
|
|
25855
|
+
"description": "Размер поля",
|
|
25856
|
+
"required": false,
|
|
25857
|
+
"type": "string",
|
|
25858
|
+
"example": null,
|
|
25859
|
+
"defaultValue": null
|
|
25860
|
+
},
|
|
25861
|
+
{
|
|
25862
|
+
"name": "style",
|
|
25863
|
+
"decorators": [],
|
|
25864
|
+
"description": "Объект CSS стилей",
|
|
25865
|
+
"required": false,
|
|
25866
|
+
"type": "CSSProperties",
|
|
25867
|
+
"example": "{width: '45%'}",
|
|
25868
|
+
"defaultValue": null
|
|
25869
|
+
},
|
|
25870
|
+
{
|
|
25871
|
+
"name": "textAfter",
|
|
25872
|
+
"decorators": [],
|
|
25873
|
+
"description": "Изображение или React-нода, которая будет отрендерена справа от поля.",
|
|
25874
|
+
"required": false,
|
|
25875
|
+
"type": "ReactNode",
|
|
25876
|
+
"example": "require('icon.png') | '<component/>'",
|
|
25877
|
+
"defaultValue": null
|
|
25878
|
+
},
|
|
25879
|
+
{
|
|
25880
|
+
"name": "textBefore",
|
|
25881
|
+
"decorators": [],
|
|
25882
|
+
"description": "Изображение или React-нода, которая будет отрендерена слева от поля.",
|
|
25883
|
+
"required": false,
|
|
25884
|
+
"type": "ReactNode",
|
|
25885
|
+
"example": "require('icon.png') | <component/>",
|
|
25886
|
+
"defaultValue": null
|
|
25887
|
+
},
|
|
25888
|
+
{
|
|
25889
|
+
"name": "type",
|
|
25890
|
+
"decorators": [],
|
|
25891
|
+
"description": "HTML Тип",
|
|
25892
|
+
"required": false,
|
|
25893
|
+
"type": "string",
|
|
25894
|
+
"example": "email",
|
|
25895
|
+
"defaultValue": null
|
|
25896
|
+
},
|
|
25897
|
+
{
|
|
25898
|
+
"name": "value",
|
|
25899
|
+
"decorators": [],
|
|
25900
|
+
"description": "Значение для поля",
|
|
25901
|
+
"required": false,
|
|
25902
|
+
"type": "any",
|
|
25903
|
+
"example": null,
|
|
25904
|
+
"defaultValue": null
|
|
25905
|
+
},
|
|
25906
|
+
{
|
|
25907
|
+
"name": "view",
|
|
25908
|
+
"decorators": [],
|
|
25909
|
+
"description": "Переопределение view React компонента для кастомизации отображения",
|
|
25910
|
+
"required": false,
|
|
25911
|
+
"type": "React.ReactNode | {}",
|
|
25912
|
+
"example": "MyCustomView",
|
|
25913
|
+
"defaultValue": null
|
|
25914
|
+
},
|
|
25915
|
+
{
|
|
25916
|
+
"name": "viewProps",
|
|
25917
|
+
"decorators": [],
|
|
25918
|
+
"description": "Свойства для компонента отображения",
|
|
25919
|
+
"required": false,
|
|
25920
|
+
"type": "{}",
|
|
25921
|
+
"example": "{\n customHandler: () => {...}\n}",
|
|
25922
|
+
"defaultValue": null
|
|
25923
|
+
}
|
|
25924
|
+
],
|
|
25925
|
+
"methods": [
|
|
25926
|
+
{
|
|
25927
|
+
"name": "onChange",
|
|
25928
|
+
"decorators": [],
|
|
25929
|
+
"description": "Callback-функция, которая вызывается при изменении данных",
|
|
25930
|
+
"required": false,
|
|
25931
|
+
"type": "any",
|
|
25932
|
+
"example": null,
|
|
25933
|
+
"parameters": [
|
|
25934
|
+
{
|
|
25935
|
+
"name": "args",
|
|
25936
|
+
"decorators": [],
|
|
25937
|
+
"description": "",
|
|
25938
|
+
"required": true,
|
|
25939
|
+
"type": "any[]",
|
|
25940
|
+
"example": null
|
|
25941
|
+
}
|
|
25942
|
+
]
|
|
25943
|
+
},
|
|
25944
|
+
{
|
|
25945
|
+
"name": "onClear",
|
|
25946
|
+
"decorators": [],
|
|
25947
|
+
"description": "Callback-функция, которая вызывается при очистке input",
|
|
25948
|
+
"required": false,
|
|
25949
|
+
"type": "void",
|
|
25950
|
+
"example": null,
|
|
25951
|
+
"parameters": [
|
|
25952
|
+
{
|
|
25953
|
+
"name": "value",
|
|
25954
|
+
"decorators": [],
|
|
25955
|
+
"description": "",
|
|
25956
|
+
"required": true,
|
|
25957
|
+
"type": "string",
|
|
25958
|
+
"example": null
|
|
25959
|
+
}
|
|
25960
|
+
]
|
|
25961
|
+
}
|
|
25962
|
+
]
|
|
25963
|
+
},
|
|
25636
25964
|
"INavFieldProps": {
|
|
25637
25965
|
"name": "INavFieldProps",
|
|
25638
25966
|
"moduleName": "ui/form/NavField/NavField",
|
|
@@ -36533,6 +36861,14 @@
|
|
|
36533
36861
|
"required": true,
|
|
36534
36862
|
"type": "Model",
|
|
36535
36863
|
"example": null
|
|
36864
|
+
},
|
|
36865
|
+
{
|
|
36866
|
+
"name": "sort",
|
|
36867
|
+
"decorators": [],
|
|
36868
|
+
"description": "",
|
|
36869
|
+
"required": false,
|
|
36870
|
+
"type": "string",
|
|
36871
|
+
"example": null
|
|
36536
36872
|
}
|
|
36537
36873
|
],
|
|
36538
36874
|
"methods": [
|
|
@@ -36730,10 +37066,10 @@
|
|
|
36730
37066
|
{
|
|
36731
37067
|
"name": "list",
|
|
36732
37068
|
"decorators": [],
|
|
36733
|
-
"description": "Список, для которого используется
|
|
37069
|
+
"description": "Список, для которого используется пагинация",
|
|
36734
37070
|
"required": false,
|
|
36735
37071
|
"type": "any",
|
|
36736
|
-
"example": "{{\n total: 100,\n page: 2,\n pageSize: 10,\n }}",
|
|
37072
|
+
"example": "{{\n total: 100,\n page: 2,\n pageSize: 10,\n items: [\n {id: 1, name: 'Item 1'},\n {id: 2, name: 'Item 2'},\n // ...\n ],\n }}",
|
|
36737
37073
|
"defaultValue": null
|
|
36738
37074
|
},
|
|
36739
37075
|
{
|
|
@@ -36898,10 +37234,10 @@
|
|
|
36898
37234
|
{
|
|
36899
37235
|
"name": "list",
|
|
36900
37236
|
"decorators": [],
|
|
36901
|
-
"description": "Список, для которого используется
|
|
37237
|
+
"description": "Список, для которого используется пагинация",
|
|
36902
37238
|
"required": false,
|
|
36903
37239
|
"type": "any",
|
|
36904
|
-
"example": "{{\n total: 100,\n page: 2,\n pageSize: 10,\n }}"
|
|
37240
|
+
"example": "{{\n total: 100,\n page: 2,\n pageSize: 10,\n items: [\n {id: 1, name: 'Item 1'},\n {id: 2, name: 'Item 2'},\n // ...\n ],\n }}"
|
|
36905
37241
|
},
|
|
36906
37242
|
{
|
|
36907
37243
|
"name": "loadMore",
|
|
@@ -41451,14 +41787,6 @@
|
|
|
41451
41787
|
"type": "\"button\" | \"checkbox\" | \"color\" | \"date\" | \"datetime-local\" | \"email\" | \"file\" | \"hidden\" | \"image\" | \"month\" | \"number\" | \"password\" | \"radio\" | \"range\" | \"reset\" | \"search\" | \"submit\" | \"tel\" | \"text\" | \"time\" | \"url\" | \"week\" | string",
|
|
41452
41788
|
"example": null
|
|
41453
41789
|
},
|
|
41454
|
-
"IMaskFieldProps": {
|
|
41455
|
-
"name": "IMaskFieldProps",
|
|
41456
|
-
"decorators": [],
|
|
41457
|
-
"description": "MaskField\n\nКомпонент поля ввода текста с маской.\n",
|
|
41458
|
-
"required": true,
|
|
41459
|
-
"type": "IInputFieldProps",
|
|
41460
|
-
"example": null
|
|
41461
|
-
},
|
|
41462
41790
|
"ILoaderViewProps": {
|
|
41463
41791
|
"name": "ILoaderViewProps",
|
|
41464
41792
|
"decorators": [],
|
package/en.json
CHANGED
|
@@ -979,6 +979,7 @@
|
|
|
979
979
|
"Скрыть иконку c лева от элемента": "Hide the icon to the left of the element",
|
|
980
980
|
"\nКомпонент `Kanban` позволяет создать доску для управления задачами.\nКоличество столбцов задается с помощью пропа `columns`.\nЗадачи на доске можно создавать, редактировать и перемещать с визуальным отображением.\n\nДля работы этого компонента необходимо установить в проекте зависимости `react-beautiful-dnd`\nи передать в пропсы `droppableComponent`, `draggableComponent` и `dndContext`\nкомпоненты `Droppable`, `Draggable` и `DragDropContext` соответственно.\n\nДля корректной работы функционала создания задач,\nнеобходимо установить в проекте зависимости `@ckeditor/ckeditor5-react v3.0.2` и `@steroidsjs/ckeditor5 v27.0.2-rc.2`,\nзатем импортировать `CKEditor` из `@ckeditor/ckeditor5-react` и `ClassicEditor` из `@steroidsjs/ckeditor5/packages/ckeditor5-build-classic`.\nИмпортированные компоненты нужно передать в проп `createTaskEditorConfig`,\nв поле `htmlComponent` передать `CKEditor`, а в `editorConstructor` передать `ClassicEditor`.\n": "",
|
|
981
981
|
"Компонент для создания HTML-разметки, использующий WYSIWYG редактор.\n\nДля использования WYSIWYG редактора, необходимо установить в проекте зависимости `@ckeditor/ckeditor5-react` и `@steroidsjs/ckeditor5`,\nзатем импортировать `CKEditor` из `@ckeditor/ckeditor5-react` и `ClassicEditor` из `@steroidsjs/ckeditor5/packages/ckeditor5-build-classic`.\nКомпонент `CKEditor` нужно передать в проп `htmlComponent`, а конструктор `ClassicEditor` в проп `editorConstructor`.\n\nПри передаче `HtmlField` с бэкенда, необходимо переопределить `view` компонента, указав локальный.\nВ локальном компоненте добавить вместо пропсов `htmlComponent` и `editorConstructor` импорты `CKEditor` и `ClassicEditor` соотвественно.\n": "",
|
|
982
|
+
"\nКомпонент поля ввода текста с маской.\n": "",
|
|
982
983
|
"\nКомпонент Tooltip предоставляет всплывающую подсказку для дочерних элементов.\nВнутри компонента, то есть между тегами Tooltip можно использовать только html теги, например div, span и тд\n": "",
|
|
983
984
|
"Компонент с бесконечным скроллом страниц.": "",
|
|
984
985
|
"Компонент, который представляет в виде дерева список с иерархической структурой данных\n\nДополнительный функционал: в кастомном view компонента есть возможность реализовать кнопку, по клику на которую\nбудет вызываться функция props.onItemFocus. Данная функция \"находит\" текущий роут в дереве -\nраскрывает родительские уровни, делает элемент активным.\nДанная функция не включает скролл к активному компоненту внутри дерева, это также необходимо\nреализовать в кастомном view локально в проекте.\n": "",
|
|
@@ -1029,7 +1030,6 @@
|
|
|
1029
1030
|
"Подключить бесконечный скролл": "",
|
|
1030
1031
|
"Аттрибут (название) в форме для поля с флагом, определяющим есть ли следующая страница": "",
|
|
1031
1032
|
"Аттрибут (название) в форме для поля с номером текущей страницы": "",
|
|
1032
|
-
"Список, для которого используется пагинация, пример {items: [...], total: number},": "",
|
|
1033
1033
|
"Кастомная иконка для сворачивания элементов": "",
|
|
1034
1034
|
"CSS-класс для элемента навигации.": "",
|
|
1035
1035
|
"Тип данных для параметров маршрута.": "",
|
package/hooks/useList.d.ts
CHANGED
package/hooks/useList.js
CHANGED
|
@@ -310,7 +310,8 @@ function useList(config) {
|
|
|
310
310
|
renderSearchForm: renderSearchForm,
|
|
311
311
|
renderInfiniteScroll: renderInfiniteScroll,
|
|
312
312
|
onFetch: onFetch,
|
|
313
|
-
onSort: onSort
|
|
313
|
+
onSort: onSort,
|
|
314
|
+
sort: formValues === null || formValues === void 0 ? void 0 : formValues.sort
|
|
314
315
|
};
|
|
315
316
|
}
|
|
316
317
|
exports["default"] = useList;
|
package/package.json
CHANGED
|
@@ -165,7 +165,8 @@ export interface IDropDownFieldViewProps extends IDropDownFieldProps {
|
|
|
165
165
|
hoveredId: PrimaryKey | any;
|
|
166
166
|
selectedIds: (PrimaryKey | any)[];
|
|
167
167
|
forwardedRef: any;
|
|
168
|
-
|
|
168
|
+
autoCompleteInputForwardedRef: MutableRefObject<HTMLInputElement>;
|
|
169
|
+
inputRef: MutableRefObject<HTMLInputElement>;
|
|
169
170
|
searchInputProps: {
|
|
170
171
|
type: string;
|
|
171
172
|
name: string;
|
|
@@ -87,7 +87,8 @@ function DropDownField(props) {
|
|
|
87
87
|
var components = (0, hooks_1.useComponents)();
|
|
88
88
|
// Query state
|
|
89
89
|
var _a = (0, react_1.useState)(''), query = _a[0], setQuery = _a[1];
|
|
90
|
-
var
|
|
90
|
+
var autoCompleteInputForwardedRef = (0, react_1.useRef)(null);
|
|
91
|
+
var inputRef = (0, react_1.useRef)(null);
|
|
91
92
|
var hasGroup = !!props.groupAttribute;
|
|
92
93
|
var _b = react_1["default"].useState([]), selectedAccordionItems = _b[0], setSelectedAccordionItems = _b[1];
|
|
93
94
|
var normalizedItemToSelectAll = react_1["default"].useMemo(function () { return normalizeItemToSelectAll(props.itemToSelectAll); }, [props.itemToSelectAll]);
|
|
@@ -125,7 +126,7 @@ function DropDownField(props) {
|
|
|
125
126
|
items: items,
|
|
126
127
|
sourceItems: sourceItems,
|
|
127
128
|
inputValue: props.input.value,
|
|
128
|
-
autoCompleteInputRef:
|
|
129
|
+
autoCompleteInputRef: autoCompleteInputForwardedRef
|
|
129
130
|
}), isOpened = _d.isOpened, setIsOpened = _d.setIsOpened, setIsFocused = _d.setIsFocused, hoveredId = _d.hoveredId, setHoveredId = _d.setHoveredId, selectedIds = _d.selectedIds, setSelectedIds = _d.setSelectedIds, selectedItems = _d.selectedItems, setSelectedAll = _d.setSelectedAll, isSelectedAll = _d.isSelectedAll;
|
|
130
131
|
var onOpen = (0, react_1.useCallback)(function () {
|
|
131
132
|
setQuery('');
|
|
@@ -199,6 +200,13 @@ function DropDownField(props) {
|
|
|
199
200
|
onReset();
|
|
200
201
|
}
|
|
201
202
|
}, [onReset, prevInputValue, props.input.value, selectedIds.length]);
|
|
203
|
+
// Add required validation
|
|
204
|
+
(0, react_1.useEffect)(function () {
|
|
205
|
+
var _a;
|
|
206
|
+
var defaultValidity = __('Required Field');
|
|
207
|
+
var errorMessage = props.required && !selectedIds.length ? defaultValidity : '';
|
|
208
|
+
(_a = inputRef.current) === null || _a === void 0 ? void 0 : _a.setCustomValidity(errorMessage);
|
|
209
|
+
}, [props.required, selectedIds.length]);
|
|
202
210
|
var renderItemView = function (item, type, src) { return components.ui.renderView(props.itemView || 'form.DropDownFieldItemView', {
|
|
203
211
|
item: __assign(__assign({}, item), { contentSrc: src, contentType: type }),
|
|
204
212
|
selectedIds: selectedIds,
|
|
@@ -216,7 +224,7 @@ function DropDownField(props) {
|
|
|
216
224
|
isItemToSelectAll: item.id === (normalizedItemToSelectAll === null || normalizedItemToSelectAll === void 0 ? void 0 : normalizedItemToSelectAll.id),
|
|
217
225
|
isSelectedAll: isSelectedAll
|
|
218
226
|
}); };
|
|
219
|
-
var renderItem = function (item) {
|
|
227
|
+
var renderItem = (0, react_1.useCallback)(function (item) {
|
|
220
228
|
if (hasGroup && Array.isArray(item[props.groupAttribute])) {
|
|
221
229
|
return renderItemView(item, 'group', item[props.groupAttribute]);
|
|
222
230
|
}
|
|
@@ -227,14 +235,14 @@ function DropDownField(props) {
|
|
|
227
235
|
return renderItemView(item, props.itemsContent.type, props.itemsContent.src);
|
|
228
236
|
}
|
|
229
237
|
return renderItemView(item, 'default', null);
|
|
230
|
-
};
|
|
231
|
-
var viewProps = (0, react_1.useMemo)(function () { return (__assign({ isAutoComplete: isAutoComplete, items: items, hoveredId: hoveredId, selectedIds: selectedIds, forwardedRef: forwardedRef,
|
|
238
|
+
}, [hasGroup, props.groupAttribute, props.itemsContent, renderItemView]);
|
|
239
|
+
var viewProps = (0, react_1.useMemo)(function () { return (__assign({ isAutoComplete: isAutoComplete, items: items, hoveredId: hoveredId, selectedIds: selectedIds, forwardedRef: forwardedRef, inputRef: inputRef, autoCompleteInputForwardedRef: autoCompleteInputForwardedRef, searchInputProps: searchInputProps, isOpened: isOpened, isLoading: isLoading, onOpen: onOpen, selectedItems: selectedItems,
|
|
232
240
|
// TODO onFocus
|
|
233
241
|
// TODO onBlur
|
|
234
242
|
onReset: onReset, onClose: onClose, renderItem: renderItem, onItemRemove: onItemRemove, hasGroup: hasGroup, multiple: props.multiple, isSearchAutoFocus: props.isSearchAutoFocus, itemToSelectAll: normalizedItemToSelectAll, className: props.className, viewProps: props.viewProps, style: props.style, size: props.size, color: props.color, outline: props.outline, placeholder: props.placeholder, showReset: props.showReset, showEllipses: props.showEllipses, errors: props.errors, disabled: props.disabled }, dataProvider)); }, [isAutoComplete, items, hoveredId, selectedIds, searchInputProps, isOpened, isLoading, onOpen, selectedItems, onReset, onClose,
|
|
235
243
|
renderItem, onItemRemove, hasGroup, props.multiple, props.isSearchAutoFocus, props.className, props.viewProps, props.style, props.size,
|
|
236
244
|
props.color, props.outline, props.placeholder, props.showReset, props.showEllipses, props.errors, props.disabled,
|
|
237
|
-
normalizedItemToSelectAll, dataProvider]);
|
|
245
|
+
normalizedItemToSelectAll, dataProvider, inputRef, autoCompleteInputForwardedRef, forwardedRef]);
|
|
238
246
|
return components.ui.renderView(props.view || 'form.DropDownFieldView', viewProps);
|
|
239
247
|
}
|
|
240
248
|
DropDownField.defaultProps = {
|
|
@@ -33,6 +33,15 @@ var __importStar = (this && this.__importStar) || function (mod) {
|
|
|
33
33
|
__setModuleDefault(result, mod);
|
|
34
34
|
return result;
|
|
35
35
|
};
|
|
36
|
+
var __spreadArray = (this && this.__spreadArray) || function (to, from, pack) {
|
|
37
|
+
if (pack || arguments.length === 2) for (var i = 0, l = from.length, ar; i < l; i++) {
|
|
38
|
+
if (ar || !(i in from)) {
|
|
39
|
+
if (!ar) ar = Array.prototype.slice.call(from, 0, i);
|
|
40
|
+
ar[i] = from[i];
|
|
41
|
+
}
|
|
42
|
+
}
|
|
43
|
+
return to.concat(ar || Array.prototype.slice.call(from));
|
|
44
|
+
};
|
|
36
45
|
var __importDefault = (this && this.__importDefault) || function (mod) {
|
|
37
46
|
return (mod && mod.__esModule) ? mod : { "default": mod };
|
|
38
47
|
};
|
|
@@ -40,6 +49,8 @@ exports.__esModule = true;
|
|
|
40
49
|
var react_1 = __importStar(require("react"));
|
|
41
50
|
var isBoolean_1 = __importDefault(require("lodash-es/isBoolean"));
|
|
42
51
|
var range_1 = __importDefault(require("lodash-es/range"));
|
|
52
|
+
var concat_1 = __importDefault(require("lodash-es/concat"));
|
|
53
|
+
var last_1 = __importDefault(require("lodash-es/last"));
|
|
43
54
|
var isEmpty_1 = __importDefault(require("lodash-es/isEmpty"));
|
|
44
55
|
var get_1 = __importDefault(require("lodash-es/get"));
|
|
45
56
|
var react_use_1 = require("react-use");
|
|
@@ -57,15 +68,26 @@ function FieldList(props) {
|
|
|
57
68
|
var isWithReduxForm = (0, hooks_1.useSelector)(function (state) { return (0, get_1["default"])(state, ['form', context.formId]) || null; });
|
|
58
69
|
var dispatch = context.provider.useDispatch();
|
|
59
70
|
// Mapper for preserving the correct sequence of rows on the UI
|
|
60
|
-
var
|
|
71
|
+
var _b = (0, react_1.useState)((0, range_1["default"])(props.input.value) || []), storeToRowIndexMap = _b[0], setStoreToRowIndexMap = _b[1];
|
|
72
|
+
var addRowIndexes = (0, react_1.useCallback)(function (rowsCount) {
|
|
73
|
+
setStoreToRowIndexMap(function (prevMap) {
|
|
74
|
+
var lastIndex = !(0, isEmpty_1["default"])(prevMap) ? (0, last_1["default"])(prevMap) + 1 : 0;
|
|
75
|
+
return (0, concat_1["default"])(prevMap, (0, range_1["default"])(lastIndex, lastIndex + rowsCount));
|
|
76
|
+
});
|
|
77
|
+
}, []);
|
|
78
|
+
var removeRowIndex = (0, react_1.useCallback)(function (rowIndex) {
|
|
79
|
+
setStoreToRowIndexMap(function (prevMap) { return __spreadArray(__spreadArray([], prevMap.slice(0, rowIndex), true), prevMap.slice(rowIndex + 1), true); });
|
|
80
|
+
}, []);
|
|
61
81
|
// Add and Remove handlers
|
|
62
82
|
var onAdd = (0, react_1.useCallback)(function (rowsCount) {
|
|
63
83
|
if (rowsCount === void 0) { rowsCount = 1; }
|
|
84
|
+
addRowIndexes(rowsCount);
|
|
64
85
|
dispatch((0, form_1.formArrayAdd)(context.formId, props.input.name, rowsCount, props.initialValues));
|
|
65
|
-
}, [context.formId, dispatch, props.initialValues, props.input.name]);
|
|
86
|
+
}, [addRowIndexes, context.formId, dispatch, props.initialValues, props.input.name]);
|
|
66
87
|
var onRemove = (0, react_1.useCallback)(function (rowIndex) {
|
|
88
|
+
removeRowIndex(rowIndex);
|
|
67
89
|
dispatch((0, form_1.formArrayRemove)(context.formId, props.input.name, rowIndex));
|
|
68
|
-
}, [context.formId, dispatch, props.input.name]);
|
|
90
|
+
}, [context.formId, dispatch, props.input.name, removeRowIndex]);
|
|
69
91
|
(0, react_use_1.useMount)(function () {
|
|
70
92
|
// Add initial rows
|
|
71
93
|
if (!props.input.value) {
|
|
@@ -21,7 +21,7 @@ var AutoSaveHelper = /** @class */ (function () {
|
|
|
21
21
|
AutoSaveHelper.restore = function (clientStorage, formId, initialValues) {
|
|
22
22
|
var values = clientStorage.get("".concat(AutoSaveHelper.STORAGE_KEY_PREFIX, "_").concat(formId)) || '';
|
|
23
23
|
if ((0, isString_1["default"])(values) && values.substr(0, 1) === '{') {
|
|
24
|
-
return __assign(__assign({}, JSON.parse(values))
|
|
24
|
+
return __assign(__assign({}, initialValues), JSON.parse(values));
|
|
25
25
|
}
|
|
26
26
|
return initialValues;
|
|
27
27
|
};
|
package/ui/form/Form/Form.js
CHANGED
|
@@ -124,7 +124,7 @@ function Form(props) {
|
|
|
124
124
|
if (isFirstMount) {
|
|
125
125
|
// Query
|
|
126
126
|
if (initialQuery) {
|
|
127
|
-
initialValues = __assign(__assign({}, normalizeInitialQuery(initialQuery))
|
|
127
|
+
initialValues = __assign(__assign({}, props.initialValues), normalizeInitialQuery(initialQuery));
|
|
128
128
|
}
|
|
129
129
|
// Local storage
|
|
130
130
|
if (props.autoSave) {
|
|
@@ -5,6 +5,7 @@ import { IInputFieldProps } from '../InputField/InputField';
|
|
|
5
5
|
*
|
|
6
6
|
* Компонент поля ввода текста с маской.
|
|
7
7
|
**/
|
|
8
|
-
export
|
|
8
|
+
export interface IMaskFieldProps extends IInputFieldProps {
|
|
9
|
+
}
|
|
9
10
|
declare function MaskField(props: IMaskFieldProps): JSX.Element;
|
|
10
11
|
export default MaskField;
|
package/ui/list/Grid/Grid.js
CHANGED
|
@@ -70,7 +70,7 @@ function Grid(props) {
|
|
|
70
70
|
initialItems: props.initialItems,
|
|
71
71
|
initialTotal: props.initialTotal,
|
|
72
72
|
autoFetchOnFormChanges: props.autoFetchOnFormChanges
|
|
73
|
-
}), list = _a.list, model = _a.model, searchModel = _a.searchModel, paginationPosition = _a.paginationPosition, paginationSizePosition = _a.paginationSizePosition, layoutNamesPosition = _a.layoutNamesPosition, renderList = _a.renderList, renderLoading = _a.renderLoading, renderEmpty = _a.renderEmpty, renderPagination = _a.renderPagination, renderPaginationSize = _a.renderPaginationSize, renderLayoutNames = _a.renderLayoutNames, renderSearchForm = _a.renderSearchForm, renderInfiniteScroll = _a.renderInfiniteScroll, onFetch = _a.onFetch, onSort = _a.onSort;
|
|
73
|
+
}), list = _a.list, model = _a.model, searchModel = _a.searchModel, paginationPosition = _a.paginationPosition, paginationSizePosition = _a.paginationSizePosition, layoutNamesPosition = _a.layoutNamesPosition, renderList = _a.renderList, renderLoading = _a.renderLoading, renderEmpty = _a.renderEmpty, renderPagination = _a.renderPagination, renderPaginationSize = _a.renderPaginationSize, renderLayoutNames = _a.renderLayoutNames, renderSearchForm = _a.renderSearchForm, renderInfiniteScroll = _a.renderInfiniteScroll, onFetch = _a.onFetch, onSort = _a.onSort, sort = _a.sort;
|
|
74
74
|
var renderLabel = (0, react_1.useCallback)(function (column) {
|
|
75
75
|
if (column.headerView) {
|
|
76
76
|
var HeaderView = column.headerView;
|
|
@@ -136,6 +136,7 @@ function Grid(props) {
|
|
|
136
136
|
columns: columns,
|
|
137
137
|
onFetch: onFetch,
|
|
138
138
|
onSort: onSort,
|
|
139
|
+
sort: sort,
|
|
139
140
|
items: (list === null || list === void 0 ? void 0 : list.items) || [],
|
|
140
141
|
searchForm: props.searchForm,
|
|
141
142
|
listId: props.listId,
|
|
@@ -146,7 +147,8 @@ function Grid(props) {
|
|
|
146
147
|
primaryKey: props.primaryKey
|
|
147
148
|
}); }, [list, paginationPosition, paginationSizePosition, layoutNamesPosition, renderList, renderLoading, renderEmpty,
|
|
148
149
|
renderPagination, renderPaginationSize, renderLayoutNames, renderSearchForm, renderInfiniteScroll, renderValue, columns,
|
|
149
|
-
onFetch, onSort, props.searchForm, props.listId, props.isLoading, props.size, props.hasAlternatingColors, props.className,
|
|
150
|
+
onFetch, onSort, sort, props.searchForm, props.listId, props.isLoading, props.size, props.hasAlternatingColors, props.className,
|
|
151
|
+
props.primaryKey]);
|
|
150
152
|
return components.ui.renderView(props.view || 'list.GridView', viewProps);
|
|
151
153
|
}
|
|
152
154
|
exports["default"] = Grid;
|
|
@@ -63,11 +63,16 @@ export interface IPaginationProps {
|
|
|
63
63
|
*/
|
|
64
64
|
dark?: boolean;
|
|
65
65
|
/**
|
|
66
|
-
* Список, для которого используется
|
|
66
|
+
* Список, для которого используется пагинация
|
|
67
67
|
* @example {{
|
|
68
68
|
* total: 100,
|
|
69
69
|
* page: 2,
|
|
70
70
|
* pageSize: 10,
|
|
71
|
+
* items: [
|
|
72
|
+
* {id: 1, name: 'Item 1'},
|
|
73
|
+
* {id: 2, name: 'Item 2'},
|
|
74
|
+
* // ...
|
|
75
|
+
* ],
|
|
71
76
|
* }}
|
|
72
77
|
*/
|
|
73
78
|
list?: any;
|
package/ui/nav/Router/Router.js
CHANGED
|
@@ -69,7 +69,9 @@ var renderComponent = function (route, activePath, routeProps, alwaysAppendParen
|
|
|
69
69
|
return null;
|
|
70
70
|
}
|
|
71
71
|
// Check already redirected
|
|
72
|
-
var toPath = (
|
|
72
|
+
var toPath = (alwaysAppendParentRoutePath
|
|
73
|
+
? redirectPath
|
|
74
|
+
: (0, router_2.buildUrl)(redirectPath, (_b = routeProps === null || routeProps === void 0 ? void 0 : routeProps.match) === null || _b === void 0 ? void 0 : _b.params));
|
|
73
75
|
if (activePath !== toPath) {
|
|
74
76
|
return (react_1["default"].createElement(react_router_1.Redirect, __assign({}, routeProps, { to: toPath }, route.componentProps)));
|
|
75
77
|
}
|