@steroidsjs/core 3.0.42 → 3.0.44
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 +43 -18
- package/en.json +2 -0
- package/hooks/useDataProvider.d.ts +6 -0
- package/hooks/useDataProvider.js +38 -35
- package/package.json +1 -1
- package/ui/form/DateField/useDateRange.js +2 -1
- package/ui/form/DateRangeField/DateRangeField.d.ts +5 -0
- package/ui/form/DateRangeField/DateRangeField.js +2 -1
- package/ui/form/DropDownField/DropDownField.d.ts +6 -1
- package/ui/form/DropDownField/DropDownField.js +9 -4
package/docs-autogen-result.json
CHANGED
|
@@ -3087,6 +3087,14 @@
|
|
|
3087
3087
|
"type": "string",
|
|
3088
3088
|
"example": "'/api/v1/search'"
|
|
3089
3089
|
},
|
|
3090
|
+
{
|
|
3091
|
+
"name": "actionMethod",
|
|
3092
|
+
"decorators": [],
|
|
3093
|
+
"description": "Тип HTTP запроса (GET | POST | PUT | DELETE)",
|
|
3094
|
+
"required": false,
|
|
3095
|
+
"type": "string",
|
|
3096
|
+
"example": "GET"
|
|
3097
|
+
},
|
|
3090
3098
|
{
|
|
3091
3099
|
"name": "params",
|
|
3092
3100
|
"decorators": [],
|
|
@@ -3202,6 +3210,14 @@
|
|
|
3202
3210
|
"defaultProps": null,
|
|
3203
3211
|
"extends": [],
|
|
3204
3212
|
"properties": [
|
|
3213
|
+
{
|
|
3214
|
+
"name": "fetchRemote",
|
|
3215
|
+
"decorators": [],
|
|
3216
|
+
"description": "",
|
|
3217
|
+
"required": true,
|
|
3218
|
+
"type": "{}",
|
|
3219
|
+
"example": null
|
|
3220
|
+
},
|
|
3205
3221
|
{
|
|
3206
3222
|
"name": "isAutoComplete",
|
|
3207
3223
|
"decorators": [],
|
|
@@ -17451,6 +17467,15 @@
|
|
|
17451
17467
|
"example": "{width: '45%'}",
|
|
17452
17468
|
"defaultValue": null
|
|
17453
17469
|
},
|
|
17470
|
+
{
|
|
17471
|
+
"name": "useSmartFocus",
|
|
17472
|
+
"decorators": [],
|
|
17473
|
+
"description": "Перемещать ли фокус на пустое после заполнения",
|
|
17474
|
+
"required": false,
|
|
17475
|
+
"type": "boolean",
|
|
17476
|
+
"example": "true",
|
|
17477
|
+
"defaultValue": null
|
|
17478
|
+
},
|
|
17454
17479
|
{
|
|
17455
17480
|
"name": "useUTC",
|
|
17456
17481
|
"decorators": [],
|
|
@@ -18762,7 +18787,7 @@
|
|
|
18762
18787
|
"extends": [
|
|
18763
18788
|
"IFieldWrapperInputProps",
|
|
18764
18789
|
"Omit<IDataProviderConfig",
|
|
18765
|
-
"'items'>",
|
|
18790
|
+
"'items' | 'initialSelectedIds'>",
|
|
18766
18791
|
"Omit<IDataSelectConfig",
|
|
18767
18792
|
"'items'>",
|
|
18768
18793
|
"IUiComponent"
|
|
@@ -18885,15 +18910,6 @@
|
|
|
18885
18910
|
"example": null,
|
|
18886
18911
|
"defaultValue": null
|
|
18887
18912
|
},
|
|
18888
|
-
{
|
|
18889
|
-
"name": "initialSelectedIds",
|
|
18890
|
-
"decorators": [],
|
|
18891
|
-
"description": "Идентификаторы выбранных значений, которые необходимо подгрузить при `autoFetch` режиме.\nНа бекенд будут переданы идентификаторы в параметре `ids`, которые необходимо вернуть.\nИспользуется только при `autoFetch = true`",
|
|
18892
|
-
"required": false,
|
|
18893
|
-
"type": "number[]",
|
|
18894
|
-
"example": "[1, 22]",
|
|
18895
|
-
"defaultValue": null
|
|
18896
|
-
},
|
|
18897
18913
|
{
|
|
18898
18914
|
"name": "inputProps",
|
|
18899
18915
|
"decorators": [],
|
|
@@ -18912,6 +18928,15 @@
|
|
|
18912
18928
|
"example": null,
|
|
18913
18929
|
"defaultValue": null
|
|
18914
18930
|
},
|
|
18931
|
+
{
|
|
18932
|
+
"name": "isFetchOnClose",
|
|
18933
|
+
"decorators": [],
|
|
18934
|
+
"description": "Нужно ли подгружать данные после закрытия DropDown",
|
|
18935
|
+
"required": false,
|
|
18936
|
+
"type": "boolean",
|
|
18937
|
+
"example": "true",
|
|
18938
|
+
"defaultValue": null
|
|
18939
|
+
},
|
|
18915
18940
|
{
|
|
18916
18941
|
"name": "isRenderWithoutFieldLayout",
|
|
18917
18942
|
"decorators": [],
|
|
@@ -19335,14 +19360,6 @@
|
|
|
19335
19360
|
"type": "string",
|
|
19336
19361
|
"example": null
|
|
19337
19362
|
},
|
|
19338
|
-
{
|
|
19339
|
-
"name": "initialSelectedIds",
|
|
19340
|
-
"decorators": [],
|
|
19341
|
-
"description": "Идентификаторы выбранных значений, которые необходимо подгрузить при `autoFetch` режиме.\nНа бекенд будут переданы идентификаторы в параметре `ids`, которые необходимо вернуть.\nИспользуется только при `autoFetch = true`",
|
|
19342
|
-
"required": false,
|
|
19343
|
-
"type": "number[]",
|
|
19344
|
-
"example": "[1, 22]"
|
|
19345
|
-
},
|
|
19346
19363
|
{
|
|
19347
19364
|
"name": "inputProps",
|
|
19348
19365
|
"decorators": [],
|
|
@@ -19367,6 +19384,14 @@
|
|
|
19367
19384
|
"type": "boolean",
|
|
19368
19385
|
"example": null
|
|
19369
19386
|
},
|
|
19387
|
+
{
|
|
19388
|
+
"name": "isFetchOnClose",
|
|
19389
|
+
"decorators": [],
|
|
19390
|
+
"description": "Нужно ли подгружать данные после закрытия DropDown",
|
|
19391
|
+
"required": false,
|
|
19392
|
+
"type": "boolean",
|
|
19393
|
+
"example": "true"
|
|
19394
|
+
},
|
|
19370
19395
|
{
|
|
19371
19396
|
"name": "isLoading",
|
|
19372
19397
|
"decorators": [],
|
package/en.json
CHANGED
|
@@ -1006,7 +1006,9 @@
|
|
|
1006
1006
|
"Пропсы для отображения элемента": "",
|
|
1007
1007
|
"Отображать чекбоксы только на узлах, не имеющих вложенных элементов": "",
|
|
1008
1008
|
"View компонент для элемента дерева": "",
|
|
1009
|
+
"Перемещать ли фокус на пустое после заполнения": "",
|
|
1009
1010
|
"Разделитель для даты и времени, не влияет на отображение": "",
|
|
1011
|
+
"Нужно ли подгружать данные после закрытия DropDown": "",
|
|
1010
1012
|
"Начальные элементы списка": "",
|
|
1011
1013
|
"Значения для полей при нажатии кнопки 'Добавить'": "",
|
|
1012
1014
|
"Название иконки, которая отобразится для удаления группы с полями": "",
|
|
@@ -35,6 +35,11 @@ export interface IDataProvider {
|
|
|
35
35
|
* @example '/api/v1/search'
|
|
36
36
|
*/
|
|
37
37
|
action?: string;
|
|
38
|
+
/**
|
|
39
|
+
* Тип HTTP запроса (GET | POST | PUT | DELETE)
|
|
40
|
+
* @example GET
|
|
41
|
+
*/
|
|
42
|
+
actionMethod?: HttpMethod;
|
|
38
43
|
/**
|
|
39
44
|
* Параметры запроса
|
|
40
45
|
* @example {pageSize: 3}
|
|
@@ -100,6 +105,7 @@ export interface IDataProviderConfig {
|
|
|
100
105
|
initialSelectedIds?: number[];
|
|
101
106
|
}
|
|
102
107
|
export interface IDataProviderResult {
|
|
108
|
+
fetchRemote: ((isAuto: boolean) => Promise<void>) | null;
|
|
103
109
|
items?: {
|
|
104
110
|
id: number | string | boolean;
|
|
105
111
|
label?: string;
|
package/hooks/useDataProvider.js
CHANGED
|
@@ -126,51 +126,53 @@ function useDataProvider(config) {
|
|
|
126
126
|
var prevParams = (0, react_use_1.usePrevious)(dataProvider.params);
|
|
127
127
|
var prevValues = (0, react_use_1.usePrevious)(config.initialSelectedIds);
|
|
128
128
|
var prevAction = (0, react_use_1.usePrevious)((_b = config === null || config === void 0 ? void 0 : config.dataProvider) === null || _b === void 0 ? void 0 : _b.action);
|
|
129
|
+
var fetchRemote = (0, react_1.useCallback)(function (isAuto) { return __awaiter(_this, void 0, void 0, function () {
|
|
130
|
+
var searchHandler, result, newItems;
|
|
131
|
+
var _a;
|
|
132
|
+
return __generator(this, function (_b) {
|
|
133
|
+
switch (_b.label) {
|
|
134
|
+
case 0:
|
|
135
|
+
searchHandler = dataProvider.onSearch || (function (method, params) { return components.http
|
|
136
|
+
.send(dataProvider.actionMethod, method, params)
|
|
137
|
+
.then(function (response) { return response.data; }); });
|
|
138
|
+
result = searchHandler(dataProvider.action, __assign(__assign(__assign({ query: config.query }, (isAuto ? { ids: config.initialSelectedIds } : null)), (((_a = config.initialSelectedIds) === null || _a === void 0 ? void 0 : _a.length) > 0 ? { withIds: config.initialSelectedIds } : null)), config.dataProvider.params));
|
|
139
|
+
if (!(result && (0, isFunction_1["default"])(result.then))) return [3 /*break*/, 2];
|
|
140
|
+
setIsLoading(true);
|
|
141
|
+
return [4 /*yield*/, result];
|
|
142
|
+
case 1:
|
|
143
|
+
newItems = _b.sent();
|
|
144
|
+
setIsLoading(false);
|
|
145
|
+
_b.label = 2;
|
|
146
|
+
case 2:
|
|
147
|
+
// Update items
|
|
148
|
+
newItems = (0, data_1.normalizeItems)(newItems);
|
|
149
|
+
if (!config.query) {
|
|
150
|
+
setSourceItems(newItems);
|
|
151
|
+
}
|
|
152
|
+
else {
|
|
153
|
+
setSourceItems((0, uniqBy_1["default"])(__spreadArray(__spreadArray([], sourceItems, true), newItems, true), 'id'));
|
|
154
|
+
}
|
|
155
|
+
setItems(newItems);
|
|
156
|
+
return [2 /*return*/];
|
|
157
|
+
}
|
|
158
|
+
});
|
|
159
|
+
}); }, [components.http, config.dataProvider, config.initialSelectedIds, config.query, dataProvider.action,
|
|
160
|
+
dataProvider.actionMethod, dataProvider.onSearch, setSourceItems, sourceItems]);
|
|
129
161
|
(0, react_1.useEffect)(function () {
|
|
130
162
|
var _a;
|
|
131
|
-
var fetchRemote = function (isAuto) { return __awaiter(_this, void 0, void 0, function () {
|
|
132
|
-
var searchHandler, result, newItems;
|
|
133
|
-
var _a;
|
|
134
|
-
return __generator(this, function (_b) {
|
|
135
|
-
switch (_b.label) {
|
|
136
|
-
case 0:
|
|
137
|
-
searchHandler = dataProvider.onSearch || (function (method, params) { return components.http
|
|
138
|
-
.send(dataProvider.actionMethod, method, params)
|
|
139
|
-
.then(function (response) { return response.data; }); });
|
|
140
|
-
result = searchHandler(dataProvider.action, __assign(__assign(__assign({ query: config.query }, (isAuto ? { ids: config.initialSelectedIds } : null)), (((_a = config.initialSelectedIds) === null || _a === void 0 ? void 0 : _a.length) > 0 ? { withIds: config.initialSelectedIds } : null)), config.dataProvider.params));
|
|
141
|
-
if (!(result && (0, isFunction_1["default"])(result.then))) return [3 /*break*/, 2];
|
|
142
|
-
setIsLoading(true);
|
|
143
|
-
return [4 /*yield*/, result];
|
|
144
|
-
case 1:
|
|
145
|
-
newItems = _b.sent();
|
|
146
|
-
setIsLoading(false);
|
|
147
|
-
_b.label = 2;
|
|
148
|
-
case 2:
|
|
149
|
-
// Update items
|
|
150
|
-
newItems = (0, data_1.normalizeItems)(newItems);
|
|
151
|
-
if (!config.query) {
|
|
152
|
-
setSourceItems(newItems);
|
|
153
|
-
}
|
|
154
|
-
else {
|
|
155
|
-
setSourceItems((0, uniqBy_1["default"])(__spreadArray(__spreadArray([], sourceItems, true), newItems, true), 'id'));
|
|
156
|
-
}
|
|
157
|
-
setItems(newItems);
|
|
158
|
-
return [2 /*return*/];
|
|
159
|
-
}
|
|
160
|
-
});
|
|
161
|
-
}); };
|
|
162
163
|
if (!config.dataProvider) {
|
|
163
164
|
// Client-side search on static items
|
|
164
165
|
setItems(config.query ? (0, text_1.smartSearch)(config.query, sourceItems) : sourceItems);
|
|
166
|
+
return;
|
|
165
167
|
}
|
|
166
|
-
|
|
168
|
+
if (config.autoFetch && !isAutoFetchedRef.current) {
|
|
167
169
|
isAutoFetchedRef.current = true;
|
|
168
170
|
fetchRemote(true);
|
|
169
171
|
}
|
|
170
|
-
else if (!(0, isEqual_1["default"])(prevValues, config.initialSelectedIds)) {
|
|
172
|
+
else if (!prevValues && !(0, isEqual_1["default"])(prevValues, config.initialSelectedIds)) {
|
|
171
173
|
fetchRemote(false);
|
|
172
174
|
}
|
|
173
|
-
else if (autoComplete.enable || (config.autoFetch && isAutoFetchedRef.current
|
|
175
|
+
else if (autoComplete.enable || (config.autoFetch && isAutoFetchedRef.current)) {
|
|
174
176
|
// Fetch data when action changes
|
|
175
177
|
if (prevAction !== ((_a = config === null || config === void 0 ? void 0 : config.dataProvider) === null || _a === void 0 ? void 0 : _a.action)) {
|
|
176
178
|
fetchRemote(false);
|
|
@@ -185,8 +187,9 @@ function useDataProvider(config) {
|
|
|
185
187
|
}
|
|
186
188
|
}
|
|
187
189
|
}, [autoComplete, components.http, config.autoFetch, config.dataProvider, config.initialSelectedIds, config.query, dataProvider,
|
|
188
|
-
dataProvider.action, dataProvider.onSearch, prevAction, prevParams, prevQuery, prevValues, setSourceItems, sourceItems]);
|
|
190
|
+
dataProvider.action, dataProvider.onSearch, fetchRemote, prevAction, prevParams, prevQuery, prevValues, setSourceItems, sourceItems]);
|
|
189
191
|
return {
|
|
192
|
+
fetchRemote: config.dataProvider && fetchRemote,
|
|
190
193
|
sourceItems: sourceItems,
|
|
191
194
|
items: items,
|
|
192
195
|
isLoading: isLoading,
|
package/package.json
CHANGED
|
@@ -19,6 +19,7 @@ var react_use_1 = require("react-use");
|
|
|
19
19
|
var isNil_1 = __importDefault(require("lodash-es/isNil"));
|
|
20
20
|
var dayjs_1 = __importDefault(require("dayjs"));
|
|
21
21
|
var calendar_1 = require("@steroidsjs/core/utils/calendar");
|
|
22
|
+
var isOneRangeValueEmpty = function (valueFrom, valueTo) { return !valueFrom || !valueTo; };
|
|
22
23
|
function useDateRange(props) {
|
|
23
24
|
// Tracking focus for input being edited
|
|
24
25
|
var _a = (0, react_1.useState)('from'), focus = _a[0], setFocus = _a[1];
|
|
@@ -65,7 +66,7 @@ function useDateRange(props) {
|
|
|
65
66
|
if ((0, isNil_1["default"])(props.inputFrom.value) && (0, isNil_1["default"])(props.inputTo.value)) {
|
|
66
67
|
return;
|
|
67
68
|
}
|
|
68
|
-
if (props.useSmartFocus) {
|
|
69
|
+
if (props.useSmartFocus && isOneRangeValueEmpty(props.inputFrom.value, props.inputTo.value)) {
|
|
69
70
|
if (focus === 'from' && !valueToRef.current && prevValueFrom !== props.inputFrom.value) {
|
|
70
71
|
valueFromRef.current = props.inputFrom.value;
|
|
71
72
|
inputToRef.current.focus();
|
|
@@ -74,6 +74,11 @@ export interface IDateRangeFieldProps extends IDateInputStateInput, Omit<IFieldW
|
|
|
74
74
|
* @example true
|
|
75
75
|
*/
|
|
76
76
|
hasInitialFocus?: boolean;
|
|
77
|
+
/**
|
|
78
|
+
* Перемещать ли фокус на пустое после заполнения
|
|
79
|
+
* @example true
|
|
80
|
+
*/
|
|
81
|
+
useSmartFocus?: boolean;
|
|
77
82
|
/**
|
|
78
83
|
* Опции маски для полей
|
|
79
84
|
*/
|
|
@@ -79,7 +79,7 @@ function DateRangeField(props) {
|
|
|
79
79
|
inputPropsTo: inputPropsTo,
|
|
80
80
|
inputFrom: props.inputFrom,
|
|
81
81
|
inputTo: props.inputTo,
|
|
82
|
-
useSmartFocus:
|
|
82
|
+
useSmartFocus: props.useSmartFocus,
|
|
83
83
|
hasInitialFocus: props.hasInitialFocus,
|
|
84
84
|
displayFormat: props.displayFormat,
|
|
85
85
|
valueFormat: props.valueFormat
|
|
@@ -130,6 +130,7 @@ DateRangeField.defaultProps = {
|
|
|
130
130
|
displayFormat: 'DD.MM.YYYY',
|
|
131
131
|
valueFormat: 'YYYY-MM-DD',
|
|
132
132
|
showRemove: true,
|
|
133
|
+
useSmartFocus: true,
|
|
133
134
|
hasInitialFocus: false,
|
|
134
135
|
icon: true,
|
|
135
136
|
maskOptions: {
|
|
@@ -53,7 +53,7 @@ export interface IDropDownFieldItemViewProps extends IAccordionItemViewProps, Pi
|
|
|
53
53
|
* Он поддерживает различные типы контента для элементов списка, такие как флажки, радиокнопки, иконки и изображения.
|
|
54
54
|
*
|
|
55
55
|
**/
|
|
56
|
-
export interface IDropDownFieldProps extends IFieldWrapperInputProps, Omit<IDataProviderConfig, 'items'>, Omit<IDataSelectConfig, 'items'>, IUiComponent {
|
|
56
|
+
export interface IDropDownFieldProps extends IFieldWrapperInputProps, Omit<IDataProviderConfig, 'items' | 'initialSelectedIds'>, Omit<IDataSelectConfig, 'items'>, IUiComponent {
|
|
57
57
|
/**
|
|
58
58
|
* Placeholder подсказка
|
|
59
59
|
* @example Your text...
|
|
@@ -152,6 +152,11 @@ export interface IDropDownFieldProps extends IFieldWrapperInputProps, Omit<IData
|
|
|
152
152
|
* Callback-функция, которая вызывается при закрытии DropDown
|
|
153
153
|
*/
|
|
154
154
|
onClose?: (selectedIds: PrimaryKey[]) => void;
|
|
155
|
+
/**
|
|
156
|
+
* Нужно ли подгружать данные после закрытия DropDown
|
|
157
|
+
* @example true
|
|
158
|
+
*/
|
|
159
|
+
isFetchOnClose?: boolean;
|
|
155
160
|
[key: string]: any;
|
|
156
161
|
}
|
|
157
162
|
export interface IDropDownFieldViewProps extends IDropDownFieldProps {
|
|
@@ -50,6 +50,7 @@ exports.IMG_CONTENT_TYPE = exports.ICON_CONTENT_TYPE = exports.RADIO_CONTENT_TYP
|
|
|
50
50
|
var react_1 = __importStar(require("react"));
|
|
51
51
|
var react_use_1 = require("react-use");
|
|
52
52
|
var isEqual_1 = __importDefault(require("lodash-es/isEqual"));
|
|
53
|
+
var isEmpty_1 = __importDefault(require("lodash-es/isEmpty"));
|
|
53
54
|
var includes_1 = __importDefault(require("lodash-es/includes"));
|
|
54
55
|
var isPlainObject_1 = __importDefault(require("lodash-es/isPlainObject"));
|
|
55
56
|
var hooks_1 = require("../../../hooks");
|
|
@@ -91,7 +92,7 @@ function DropDownField(props) {
|
|
|
91
92
|
setSelectedAccordionItems(newState);
|
|
92
93
|
}
|
|
93
94
|
};
|
|
94
|
-
var inputSelectedIds = (0, react_1.useMemo)(function () { return props.selectedIds
|
|
95
|
+
var inputSelectedIds = (0, react_1.useMemo)(function () { return (0, isEmpty_1["default"])(props.selectedIds) ? [].concat(props.input.value || []) : props.selectedIds; }, [props.input.value, props.selectedIds]);
|
|
95
96
|
// Data provider
|
|
96
97
|
var _c = (0, hooks_1.useDataProvider)({
|
|
97
98
|
items: props.items,
|
|
@@ -100,7 +101,7 @@ function DropDownField(props) {
|
|
|
100
101
|
autoFetch: props.autoFetch,
|
|
101
102
|
query: query,
|
|
102
103
|
initialSelectedIds: inputSelectedIds
|
|
103
|
-
}), items = _c.items, isLoading = _c.isLoading, isAutoComplete = _c.isAutoComplete, sourceItems = _c.sourceItems;
|
|
104
|
+
}), fetchRemote = _c.fetchRemote, items = _c.items, isLoading = _c.isLoading, isAutoComplete = _c.isAutoComplete, sourceItems = _c.sourceItems;
|
|
104
105
|
// Data select
|
|
105
106
|
var _d = (0, hooks_1.useDataSelect)({
|
|
106
107
|
multiple: props.multiple,
|
|
@@ -144,11 +145,14 @@ function DropDownField(props) {
|
|
|
144
145
|
if (isOpened) {
|
|
145
146
|
setIsFocused(false);
|
|
146
147
|
setIsOpened(false);
|
|
148
|
+
if (props.isFetchOnClose && fetchRemote) {
|
|
149
|
+
fetchRemote(false);
|
|
150
|
+
}
|
|
147
151
|
if (props.onClose) {
|
|
148
152
|
props.onClose(selectedIds);
|
|
149
153
|
}
|
|
150
154
|
}
|
|
151
|
-
}, [isOpened, props, selectedIds, setIsFocused, setIsOpened]);
|
|
155
|
+
}, [fetchRemote, isOpened, props, selectedIds, setIsFocused, setIsOpened]);
|
|
152
156
|
// Outside click -> close
|
|
153
157
|
var forwardedRef = (0, react_1.useRef)(null);
|
|
154
158
|
if (process.env.PLATFORM !== 'mobile') {
|
|
@@ -258,6 +262,7 @@ DropDownField.defaultProps = {
|
|
|
258
262
|
showReset: false,
|
|
259
263
|
multiple: false,
|
|
260
264
|
isSearchAutoFocus: true,
|
|
261
|
-
itemToSelectAll: false
|
|
265
|
+
itemToSelectAll: false,
|
|
266
|
+
isFetchOnClose: false
|
|
262
267
|
};
|
|
263
268
|
exports["default"] = (0, fieldWrapper_1["default"])('DropDownField', DropDownField);
|