@steroidsjs/core 3.0.0-beta.117 → 3.0.0-beta.119
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/actions/notifications.js +7 -1
- package/components/MetricsComponent.js +2 -1
- package/docs-autogen-result.json +17 -0
- package/hooks/useApplication.js +4 -1
- package/hooks/useFetch.js +6 -1
- package/hooks/useList.js +9 -2
- package/index.d.ts +3 -3
- package/package.json +2 -2
- package/ui/content/CalendarSystem/hooks/useMonthGrid.js +4 -1
- package/ui/form/Button/Button.js +8 -2
- package/ui/form/DateField/DateField.js +4 -1
- package/ui/form/DateRangeField/DateRangeField.js +8 -2
- package/ui/form/DateTimeField/DateTimeField.js +5 -1
- package/ui/form/DateTimeRangeField/DateTimeRangeField.js +10 -2
- package/ui/form/DropDownField/DropDownField.d.ts +4 -0
- package/ui/form/DropDownField/DropDownField.js +1 -1
- package/ui/form/InputField/hooks/useInputFieldWarningByType.js +1 -0
- package/ui/layout/ProgressBar/ProgressBar.js +8 -2
- package/ui/nav/Router/Router.js +5 -4
- package/utils/calculateComponentAbsolutePosition.js +17 -3
- package/utils/data.js +1 -0
package/actions/notifications.js
CHANGED
|
@@ -26,7 +26,13 @@ var showNotification = function (message, level, params) {
|
|
|
26
26
|
return function (dispatch) {
|
|
27
27
|
var _a = params, position = _a.position, timeOut = _a.timeOut;
|
|
28
28
|
var id = (0, uniqueId_1["default"])();
|
|
29
|
-
dispatch({
|
|
29
|
+
dispatch({
|
|
30
|
+
type: exports.NOTIFICATIONS_SHOW,
|
|
31
|
+
id: id,
|
|
32
|
+
message: message,
|
|
33
|
+
level: level || 'success',
|
|
34
|
+
position: position
|
|
35
|
+
});
|
|
30
36
|
if (timeOut > 0) {
|
|
31
37
|
setTimeout(function () { return dispatch((0, exports.closeNotification)(id)); }, timeOut);
|
|
32
38
|
}
|
|
@@ -84,7 +84,8 @@ var MetricsComponent = /** @class */ (function () {
|
|
|
84
84
|
(function (w, d, s, l, i) {
|
|
85
85
|
w[l] = w[l] || [];
|
|
86
86
|
w[l].push({
|
|
87
|
-
'gtm.start': new Date().getTime(),
|
|
87
|
+
'gtm.start': new Date().getTime(),
|
|
88
|
+
event: 'gtm.js'
|
|
88
89
|
});
|
|
89
90
|
var f = d.getElementsByTagName(s)[0];
|
|
90
91
|
var j = d.createElement(s);
|
package/docs-autogen-result.json
CHANGED
|
@@ -18182,6 +18182,15 @@
|
|
|
18182
18182
|
"example": "{\n label: 'All',\n id: 'all'\n}",
|
|
18183
18183
|
"defaultValue": null
|
|
18184
18184
|
},
|
|
18185
|
+
{
|
|
18186
|
+
"name": "itemView",
|
|
18187
|
+
"decorators": [],
|
|
18188
|
+
"description": "Кастомная вьюшка для элемента",
|
|
18189
|
+
"required": false,
|
|
18190
|
+
"type": "React.ReactNode | {}",
|
|
18191
|
+
"example": null,
|
|
18192
|
+
"defaultValue": null
|
|
18193
|
+
},
|
|
18185
18194
|
{
|
|
18186
18195
|
"name": "items",
|
|
18187
18196
|
"decorators": [],
|
|
@@ -18596,6 +18605,14 @@
|
|
|
18596
18605
|
"type": "{id: string, label: string}",
|
|
18597
18606
|
"example": null
|
|
18598
18607
|
},
|
|
18608
|
+
{
|
|
18609
|
+
"name": "itemView",
|
|
18610
|
+
"decorators": [],
|
|
18611
|
+
"description": "Кастомная вьюшка для элемента",
|
|
18612
|
+
"required": false,
|
|
18613
|
+
"type": "React.ReactNode | {}",
|
|
18614
|
+
"example": null
|
|
18615
|
+
},
|
|
18599
18616
|
{
|
|
18600
18617
|
"name": "items",
|
|
18601
18618
|
"decorators": [],
|
package/hooks/useApplication.js
CHANGED
|
@@ -158,6 +158,9 @@ function useApplication(config) {
|
|
|
158
158
|
}
|
|
159
159
|
return (React.createElement(react_redux_1.Provider, { store: components.store.store }, content));
|
|
160
160
|
}, [components, config, useGlobal]);
|
|
161
|
-
return {
|
|
161
|
+
return {
|
|
162
|
+
renderApplication: renderApplication,
|
|
163
|
+
components: components
|
|
164
|
+
};
|
|
162
165
|
}
|
|
163
166
|
exports["default"] = useApplication;
|
package/hooks/useFetch.js
CHANGED
|
@@ -160,6 +160,11 @@ function useFetch(rawConfig) {
|
|
|
160
160
|
(0, react_use_1.useUpdateEffect)(function () {
|
|
161
161
|
fetch();
|
|
162
162
|
}, [fetch]);
|
|
163
|
-
return {
|
|
163
|
+
return {
|
|
164
|
+
data: data,
|
|
165
|
+
isLoading: isLoading,
|
|
166
|
+
fetch: fetch,
|
|
167
|
+
axiosError: axiosError
|
|
168
|
+
};
|
|
164
169
|
}
|
|
165
170
|
exports["default"] = useFetch;
|
package/hooks/useList.js
CHANGED
|
@@ -38,6 +38,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
|
|
|
38
38
|
};
|
|
39
39
|
exports.__esModule = true;
|
|
40
40
|
exports.createInitialValues = exports.getDefaultSearchModel = exports.normalizeSortProps = exports.defaultConfig = void 0;
|
|
41
|
+
/* eslint-disable @typescript-eslint/no-use-before-define */
|
|
41
42
|
var react_1 = __importStar(require("react"));
|
|
42
43
|
var get_1 = __importDefault(require("lodash-es/get"));
|
|
43
44
|
var union_1 = __importDefault(require("lodash-es/union"));
|
|
@@ -156,10 +157,16 @@ function useList(config) {
|
|
|
156
157
|
var searchFormFields = (_b = config.searchForm) === null || _b === void 0 ? void 0 : _b.fields;
|
|
157
158
|
var SearchForm = require('../ui/list/SearchForm')["default"];
|
|
158
159
|
var initialValuesSearchForm = (0, react_1.useMemo)(function () { return (searchFormFields || []).reduce(function (acc, field) {
|
|
160
|
+
var _a;
|
|
159
161
|
var attribute = typeof field === 'string' ? field : field.attribute;
|
|
160
|
-
|
|
162
|
+
if ((_a = config.searchForm) === null || _a === void 0 ? void 0 : _a.initialValues) {
|
|
163
|
+
acc[attribute] = config.searchForm.initialValues[attribute];
|
|
164
|
+
}
|
|
165
|
+
else {
|
|
166
|
+
acc[attribute] = initialQuery === null || initialQuery === void 0 ? void 0 : initialQuery[attribute];
|
|
167
|
+
}
|
|
161
168
|
return acc;
|
|
162
|
-
}, {}); }, [searchFormFields, initialQuery]);
|
|
169
|
+
}, {}); }, [searchFormFields, config.searchForm, initialQuery]);
|
|
163
170
|
var searchFormProps = __assign(__assign({ listId: config.listId }, config.searchForm), { model: searchModel, initialValues: initialValuesSearchForm });
|
|
164
171
|
var renderSearchForm = function () { return react_1["default"].createElement(SearchForm, __assign({}, searchFormProps)); };
|
|
165
172
|
// Form id
|
package/index.d.ts
CHANGED
|
@@ -95,16 +95,16 @@ declare interface IUiComponent {
|
|
|
95
95
|
* Переопределение view React компонента для кастомизации отображения
|
|
96
96
|
* @example MyCustomView
|
|
97
97
|
*/
|
|
98
|
-
view?: CustomView
|
|
98
|
+
view?: CustomView,
|
|
99
99
|
|
|
100
100
|
/**
|
|
101
101
|
* Дополнительный CSS-класс для элемента отображения
|
|
102
102
|
*/
|
|
103
|
-
className?: CssClassName
|
|
103
|
+
className?: CssClassName,
|
|
104
104
|
|
|
105
105
|
/**
|
|
106
106
|
* Объект CSS стилей
|
|
107
107
|
* @example {width: '45%'}
|
|
108
108
|
*/
|
|
109
|
-
style?: CustomStyle
|
|
109
|
+
style?: CustomStyle,
|
|
110
110
|
}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@steroidsjs/core",
|
|
3
|
-
"version": "3.0.0-beta.
|
|
3
|
+
"version": "3.0.0-beta.119",
|
|
4
4
|
"description": "",
|
|
5
5
|
"author": "Vladimir Kozhin <hello@kozhindev.com>",
|
|
6
6
|
"repository": {
|
|
@@ -65,7 +65,7 @@
|
|
|
65
65
|
"@babel/preset-env": "^7.13.15",
|
|
66
66
|
"@babel/preset-react": "^7.13.13",
|
|
67
67
|
"@babel/preset-typescript": "^7.13.0",
|
|
68
|
-
"@steroidsjs/eslint-config": "^2.1.
|
|
68
|
+
"@steroidsjs/eslint-config": "^2.1.6",
|
|
69
69
|
"@testing-library/dom": "^8.20.0",
|
|
70
70
|
"@testing-library/jest-dom": "^5.16.5",
|
|
71
71
|
"@testing-library/react": "^13.4.0",
|
|
@@ -39,7 +39,10 @@ var useMonthGrid = function (currentMonthFirstDayDate, setCurrentMonthFirstDayDa
|
|
|
39
39
|
// Пройдемся по всем дням месяца и добавим их в массив
|
|
40
40
|
for (var dayNumber = 1; dayNumber <= lastDayOfCurrentMonth; dayNumber++) {
|
|
41
41
|
var date = new Date(Date.UTC(currentYear, month, dayNumber));
|
|
42
|
-
daysInCurrentMonth.push({
|
|
42
|
+
daysInCurrentMonth.push({
|
|
43
|
+
date: date,
|
|
44
|
+
dayNumber: dayNumber
|
|
45
|
+
});
|
|
43
46
|
}
|
|
44
47
|
return {
|
|
45
48
|
currentMonth: month,
|
package/ui/form/Button/Button.js
CHANGED
|
@@ -52,9 +52,15 @@ function Button(props) {
|
|
|
52
52
|
? props.url
|
|
53
53
|
: (routePath ? (0, router_2.buildUrl)(routePath, props.toRouteParams) : null);
|
|
54
54
|
// Flags: isLoading, isFailed
|
|
55
|
-
var _a = (0, react_1.useState)({
|
|
55
|
+
var _a = (0, react_1.useState)({
|
|
56
|
+
isLoading: false,
|
|
57
|
+
isFailed: false
|
|
58
|
+
}), _b = _a[0], isLoading = _b.isLoading, isFailed = _b.isFailed, setStateFlags = _a[1];
|
|
56
59
|
React.useEffect(function () {
|
|
57
|
-
setStateFlags({
|
|
60
|
+
setStateFlags({
|
|
61
|
+
isLoading: props.isLoading,
|
|
62
|
+
isFailed: props.isFailed
|
|
63
|
+
});
|
|
58
64
|
}, [props.isLoading, props.isFailed]);
|
|
59
65
|
// Form submitting
|
|
60
66
|
var context = (0, react_1.useContext)(Form_1.FormContext);
|
|
@@ -48,7 +48,10 @@ DateField.defaultProps = {
|
|
|
48
48
|
required: false,
|
|
49
49
|
showRemove: true,
|
|
50
50
|
valueFormat: 'YYYY-MM-DD',
|
|
51
|
-
maskOptions: (0, kit_1.maskitoDateOptionsGenerator)({
|
|
51
|
+
maskOptions: (0, kit_1.maskitoDateOptionsGenerator)({
|
|
52
|
+
mode: 'dd/mm/yyyy',
|
|
53
|
+
separator: '.'
|
|
54
|
+
}),
|
|
52
55
|
size: 'md'
|
|
53
56
|
};
|
|
54
57
|
exports["default"] = (0, fieldWrapper_1["default"])('DateField', DateField);
|
|
@@ -129,8 +129,14 @@ DateRangeField.defaultProps = {
|
|
|
129
129
|
noBorder: false,
|
|
130
130
|
size: 'md',
|
|
131
131
|
maskOptions: {
|
|
132
|
-
from: (0, kit_1.maskitoDateOptionsGenerator)({
|
|
133
|
-
|
|
132
|
+
from: (0, kit_1.maskitoDateOptionsGenerator)({
|
|
133
|
+
mode: 'dd/mm/yyyy',
|
|
134
|
+
separator: '.'
|
|
135
|
+
}),
|
|
136
|
+
to: (0, kit_1.maskitoDateOptionsGenerator)({
|
|
137
|
+
mode: 'dd/mm/yyyy',
|
|
138
|
+
separator: '.'
|
|
139
|
+
})
|
|
134
140
|
}
|
|
135
141
|
};
|
|
136
142
|
exports["default"] = (0, fieldWrapper_1["default"])('DateRangeField', DateRangeField, { attributeSuffixes: ['from', 'to'] });
|
|
@@ -71,6 +71,10 @@ DateTimeField.defaultProps = {
|
|
|
71
71
|
dateInUTC: false,
|
|
72
72
|
size: 'md',
|
|
73
73
|
icon: true,
|
|
74
|
-
maskOptions: (0, kit_1.maskitoDateTimeOptionsGenerator)({
|
|
74
|
+
maskOptions: (0, kit_1.maskitoDateTimeOptionsGenerator)({
|
|
75
|
+
dateMode: 'dd/mm/yyyy',
|
|
76
|
+
timeMode: 'HH:MM',
|
|
77
|
+
dateSeparator: '.'
|
|
78
|
+
})
|
|
75
79
|
};
|
|
76
80
|
exports["default"] = (0, fieldWrapper_1["default"])('DateTimeField', DateTimeField);
|
|
@@ -156,8 +156,16 @@ DateTimeRangeField.defaultProps = {
|
|
|
156
156
|
icon: true,
|
|
157
157
|
size: 'md',
|
|
158
158
|
maskOptions: {
|
|
159
|
-
from: (0, kit_1.maskitoDateTimeOptionsGenerator)({
|
|
160
|
-
|
|
159
|
+
from: (0, kit_1.maskitoDateTimeOptionsGenerator)({
|
|
160
|
+
dateMode: 'dd/mm/yyyy',
|
|
161
|
+
timeMode: 'HH:MM',
|
|
162
|
+
dateSeparator: '.'
|
|
163
|
+
}),
|
|
164
|
+
to: (0, kit_1.maskitoDateTimeOptionsGenerator)({
|
|
165
|
+
dateMode: 'dd/mm/yyyy',
|
|
166
|
+
timeMode: 'HH:MM',
|
|
167
|
+
dateSeparator: '.'
|
|
168
|
+
})
|
|
161
169
|
}
|
|
162
170
|
};
|
|
163
171
|
exports["default"] = (0, fieldWrapper_1["default"])('DateTimeRangeField', DateTimeRangeField, { attributeSuffixes: ['from', 'to'] });
|
|
@@ -126,6 +126,10 @@ export interface IDropDownFieldProps extends IFieldWrapperInputProps, Omit<IData
|
|
|
126
126
|
label: string;
|
|
127
127
|
id: string;
|
|
128
128
|
};
|
|
129
|
+
/**
|
|
130
|
+
* Кастомная вьюшка для элемента
|
|
131
|
+
*/
|
|
132
|
+
itemView?: CustomView;
|
|
129
133
|
[key: string]: any;
|
|
130
134
|
}
|
|
131
135
|
export interface IDropDownFieldViewProps extends IDropDownFieldProps {
|
|
@@ -170,7 +170,7 @@ function DropDownField(props) {
|
|
|
170
170
|
onReset();
|
|
171
171
|
}
|
|
172
172
|
}, [onReset, prevInputValue, props.input.value, selectedIds.length]);
|
|
173
|
-
var renderItemView = function (item, type, src) { return components.ui.renderView('form.DropDownFieldItemView', {
|
|
173
|
+
var renderItemView = function (item, type, src) { return components.ui.renderView(props.itemView || 'form.DropDownFieldItemView', {
|
|
174
174
|
item: __assign(__assign({}, item), { contentSrc: src, contentType: type }),
|
|
175
175
|
selectedIds: selectedIds,
|
|
176
176
|
size: props.size,
|
|
@@ -1,6 +1,7 @@
|
|
|
1
1
|
"use strict";
|
|
2
2
|
exports.__esModule = true;
|
|
3
3
|
exports.useInputFieldWarningByType = exports.INPUT_TYPES_SUPPORTED_SELECTION = void 0;
|
|
4
|
+
/* eslint-disable no-console */
|
|
4
5
|
/* eslint-disable max-len */
|
|
5
6
|
/* eslint-disable no-unused-expressions */
|
|
6
7
|
var react_use_1 = require("react-use");
|
|
@@ -47,9 +47,15 @@ function ProgressBar(props) {
|
|
|
47
47
|
return props.label(props.percent);
|
|
48
48
|
});
|
|
49
49
|
if (props.type === 'line') {
|
|
50
|
-
return components.ui.renderView('layout.LineProgressBarView', { percent: props.percent,
|
|
50
|
+
return components.ui.renderView('layout.LineProgressBarView', { percent: props.percent,
|
|
51
|
+
status: props.status,
|
|
52
|
+
size: props.size,
|
|
53
|
+
label: getLabel() });
|
|
51
54
|
}
|
|
52
|
-
return components.ui.renderView('layout.CircleProgressBarView', { percent: props.percent,
|
|
55
|
+
return components.ui.renderView('layout.CircleProgressBarView', { percent: props.percent,
|
|
56
|
+
status: props.status,
|
|
57
|
+
size: props.size,
|
|
58
|
+
label: getLabel() });
|
|
53
59
|
}
|
|
54
60
|
ProgressBar.defaultProps = {
|
|
55
61
|
status: 'normal',
|
package/ui/nav/Router/Router.js
CHANGED
|
@@ -80,9 +80,10 @@ var renderComponent = function (route, activePath, routeProps) {
|
|
|
80
80
|
return (React.createElement(Component, __assign({}, routeProps, route.componentProps)));
|
|
81
81
|
};
|
|
82
82
|
function Router(props) {
|
|
83
|
+
var _a;
|
|
83
84
|
var components = (0, hooks_1.useComponents)();
|
|
84
85
|
var routeParams = (0, hooks_1.useSelector)(router_2.getRouteParams);
|
|
85
|
-
var
|
|
86
|
+
var _b = (0, hooks_1.useSelector)(function (state) {
|
|
86
87
|
var _a, _b;
|
|
87
88
|
return ({
|
|
88
89
|
isInitialized: (0, router_2.isRouterInitialized)(state),
|
|
@@ -91,7 +92,7 @@ function Router(props) {
|
|
|
91
92
|
activePath: (_b = (_a = state.router) === null || _a === void 0 ? void 0 : _a.location) === null || _b === void 0 ? void 0 : _b.pathname,
|
|
92
93
|
activeRouteIds: (0, router_2.getActiveRouteIds)(state)
|
|
93
94
|
});
|
|
94
|
-
}), isInitialized =
|
|
95
|
+
}), isInitialized = _b.isInitialized, pathname = _b.pathname, route = _b.route, activePath = _b.activePath, activeRouteIds = _b.activeRouteIds;
|
|
95
96
|
var routeId = (route === null || route === void 0 ? void 0 : route.id) || null;
|
|
96
97
|
// Init routes in redux
|
|
97
98
|
var dispatch = (0, useDispatch_1["default"])();
|
|
@@ -101,14 +102,14 @@ function Router(props) {
|
|
|
101
102
|
}
|
|
102
103
|
});
|
|
103
104
|
// Sync route params with redux
|
|
104
|
-
var prevRouteParams = (0, react_use_1.usePreviousDistinct)(routeParams);
|
|
105
|
+
var prevRouteParams = (_a = (0, react_use_1.usePreviousDistinct)(routeParams)) !== null && _a !== void 0 ? _a : routeParams;
|
|
105
106
|
(0, react_1.useEffect)(function () {
|
|
106
107
|
if (!(0, isEqual_1["default"])(prevRouteParams, routeParams)) {
|
|
107
108
|
dispatch((0, router_1.initParams)(routeParams));
|
|
108
109
|
}
|
|
109
110
|
}, [dispatch, prevRouteParams, routeParams]);
|
|
110
111
|
// Routes state
|
|
111
|
-
var
|
|
112
|
+
var _c = (0, react_1.useState)((0, helpers_1.treeToList)(props.routes, true, null, props.alwaysAppendParentRoutePath)), routes = _c[0], setRoutes = _c[1];
|
|
112
113
|
(0, react_use_1.useUpdateEffect)(function () {
|
|
113
114
|
setRoutes(props.routes);
|
|
114
115
|
}, [props.routes]);
|
|
@@ -20,10 +20,20 @@ function calculateComponentAbsolutePosition(gap, position, parentRef, componentS
|
|
|
20
20
|
if (process.env.IS_SSR) {
|
|
21
21
|
return null;
|
|
22
22
|
}
|
|
23
|
-
var style = {
|
|
23
|
+
var style = {
|
|
24
|
+
left: null,
|
|
25
|
+
right: null,
|
|
26
|
+
top: null
|
|
27
|
+
};
|
|
24
28
|
var arrowPosition = null;
|
|
25
29
|
var _a = parentRef.getBoundingClientRect(), top = _a.top, right = _a.right, left = _a.left, width = _a.width, height = _a.height;
|
|
26
|
-
var parentDimensions = {
|
|
30
|
+
var parentDimensions = {
|
|
31
|
+
top: top,
|
|
32
|
+
right: right,
|
|
33
|
+
left: left,
|
|
34
|
+
width: width,
|
|
35
|
+
height: height
|
|
36
|
+
};
|
|
27
37
|
parentDimensions.top += window.scrollY;
|
|
28
38
|
// eslint-disable-next-line default-case
|
|
29
39
|
switch (position) {
|
|
@@ -202,6 +212,10 @@ function calculateComponentAbsolutePosition(gap, position, parentRef, componentS
|
|
|
202
212
|
style.top = parentDimensions.top + parentDimensions.height - componentSize.height;
|
|
203
213
|
}
|
|
204
214
|
}
|
|
205
|
-
return {
|
|
215
|
+
return {
|
|
216
|
+
style: style,
|
|
217
|
+
position: position,
|
|
218
|
+
arrowPosition: arrowPosition
|
|
219
|
+
};
|
|
206
220
|
}
|
|
207
221
|
exports["default"] = calculateComponentAbsolutePosition;
|
package/utils/data.js
CHANGED
|
@@ -144,6 +144,7 @@ var shouldUpdate = function (objA, objB, deepPaths) {
|
|
|
144
144
|
? (0, exports.shouldUpdate)(objA[key], objB[key], deepPath)
|
|
145
145
|
: (0, exports.shouldUpdateSingle)(objA[key], objB[key]);
|
|
146
146
|
if (hasChanges) {
|
|
147
|
+
// eslint-disable-next-line no-console
|
|
147
148
|
console.log(0, 'shouldUpdate changed key:', key, objA[key], objB[key]);
|
|
148
149
|
return { value: true };
|
|
149
150
|
}
|