@steroidsjs/core 2.1.0-beta.7 → 2.1.0-beta.9.1
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/list.d.ts +1 -0
- package/actions/list.js +1 -0
- package/components/ClientStorageComponent.d.ts +3 -3
- package/components/ClientStorageComponent.js +28 -22
- package/components/HttpComponent.js +32 -15
- package/components/LocaleComponent.js +9 -9
- package/components/MetricsComponent.js +3 -1
- package/components/StoreComponent.d.ts +6 -0
- package/components/StoreComponent.js +5 -6
- package/components/UiComponent.d.ts +1 -1
- package/components/WebSocketComponent.d.ts +1 -1
- package/hoc/components.d.ts +1 -1
- package/hoc/components.js +1 -1
- package/hooks/index.d.ts +2 -1
- package/hooks/index.js +3 -1
- package/hooks/useApplication.d.ts +29 -26
- package/hooks/useApplication.js +17 -82
- package/hooks/useComponents.d.ts +1 -14
- package/hooks/useComponents.js +5 -5
- package/hooks/useDataProvider.js +4 -2
- package/hooks/useDataSelect.d.ts +12 -6
- package/hooks/useDataSelect.js +2 -2
- package/hooks/useFetch.d.ts +11 -3
- package/hooks/useFetch.js +35 -31
- package/hooks/useLayout.d.ts +9 -0
- package/hooks/useLayout.js +64 -44
- package/hooks/useList.d.ts +45 -0
- package/hooks/useList.js +83 -53
- package/hooks/useModel.js +1 -1
- package/hooks/useScreen.d.ts +1 -1
- package/hooks/useScreen.js +2 -2
- package/hooks/useSsr.d.ts +2 -0
- package/hooks/useSsr.js +8 -0
- package/package.json +5 -3
- package/providers/ComponentsProvider.d.ts +26 -0
- package/providers/ComponentsProvider.js +28 -0
- package/providers/ScreenProvider.d.ts +20 -0
- package/providers/ScreenProvider.js +87 -0
- package/providers/SsrProvider.d.ts +17 -0
- package/providers/SsrProvider.js +32 -0
- package/providers/index.d.ts +4 -0
- package/providers/index.js +12 -0
- package/reducers/form.d.ts +1 -1
- package/reducers/form.js +1 -1
- package/reducers/list.js +1 -3
- package/reducers/router.js +1 -1
- package/ui/crud/Crud/Crud.d.ts +1 -1
- package/ui/crud/index.d.ts +1 -0
- package/ui/form/DropDownField/DropDownField.js +2 -1
- package/ui/form/TextField/TextField.d.ts +2 -1
- package/ui/form/TextField/TextField.js +1 -1
- package/ui/icon/Icon/Icon.js +3 -0
- package/ui/layout/Meta/Meta.d.ts +56 -0
- package/ui/layout/Meta/Meta.js +36 -0
- package/ui/layout/Meta/index.d.ts +2 -0
- package/ui/layout/Meta/index.js +7 -0
- package/ui/layout/Notifications/Notifications.js +1 -1
- package/ui/layout/Portal.js +3 -0
- package/ui/nav/Router/Router.d.ts +13 -0
- package/ui/nav/Router/Router.js +1 -1
- package/ui/nav/Router/SsrProvider.d.ts +0 -15
- package/ui/nav/Router/SsrProvider.js +0 -55
package/hooks/useList.js
CHANGED
|
@@ -33,6 +33,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
|
|
|
33
33
|
return (mod && mod.__esModule) ? mod : { "default": mod };
|
|
34
34
|
};
|
|
35
35
|
exports.__esModule = true;
|
|
36
|
+
exports.createInitialValues = exports.getDefaultSearchModel = exports.normalizeSortProps = exports.defaultConfig = void 0;
|
|
36
37
|
var react_1 = require("react");
|
|
37
38
|
var get_1 = __importDefault(require("lodash-es/get"));
|
|
38
39
|
var union_1 = __importDefault(require("lodash-es/union"));
|
|
@@ -52,8 +53,7 @@ var useInitial_1 = __importDefault(require("../hooks/useInitial"));
|
|
|
52
53
|
var Pagination_1 = require("../ui/list/Pagination/Pagination");
|
|
53
54
|
var PaginationSize_1 = require("../ui/list/PaginationSize/PaginationSize");
|
|
54
55
|
var Empty_1 = require("../ui/list/Empty/Empty");
|
|
55
|
-
|
|
56
|
-
var defaultConfig = {
|
|
56
|
+
exports.defaultConfig = {
|
|
57
57
|
actionMethod: 'get',
|
|
58
58
|
primaryKey: 'id',
|
|
59
59
|
autoDestroy: true,
|
|
@@ -67,6 +67,43 @@ var defaultConfig = {
|
|
|
67
67
|
useHash: false
|
|
68
68
|
}
|
|
69
69
|
};
|
|
70
|
+
var normalizeSortProps = function (props) { return (__assign(__assign(__assign({}, exports.defaultConfig.sort), { enable: !!props }), (typeof props === 'boolean' ? { enable: props } : props))); };
|
|
71
|
+
exports.normalizeSortProps = normalizeSortProps;
|
|
72
|
+
var getDefaultSearchModel = function (_a) {
|
|
73
|
+
var paginationProps = _a.paginationProps, paginationSizeProps = _a.paginationSizeProps, sort = _a.sort, layoutNamesProps = _a.layoutNamesProps;
|
|
74
|
+
return ({
|
|
75
|
+
attributes: [
|
|
76
|
+
paginationProps.enable && {
|
|
77
|
+
type: 'number',
|
|
78
|
+
attribute: paginationProps.attribute,
|
|
79
|
+
defaultValue: paginationProps.defaultValue
|
|
80
|
+
},
|
|
81
|
+
paginationSizeProps.enable && {
|
|
82
|
+
type: 'number',
|
|
83
|
+
attribute: paginationSizeProps.attribute,
|
|
84
|
+
defaultValue: paginationSizeProps.defaultValue
|
|
85
|
+
},
|
|
86
|
+
sort.enable && {
|
|
87
|
+
type: 'string',
|
|
88
|
+
jsType: 'string[]',
|
|
89
|
+
attribute: sort.attribute,
|
|
90
|
+
defaultValue: sort.defaultValue
|
|
91
|
+
},
|
|
92
|
+
layoutNamesProps.enable && {
|
|
93
|
+
type: 'string',
|
|
94
|
+
attribute: layoutNamesProps.attribute,
|
|
95
|
+
defaultValue: layoutNamesProps.defaultValue
|
|
96
|
+
},
|
|
97
|
+
].filter(Boolean)
|
|
98
|
+
});
|
|
99
|
+
};
|
|
100
|
+
exports.getDefaultSearchModel = getDefaultSearchModel;
|
|
101
|
+
var createInitialValues = function (_a) {
|
|
102
|
+
var _b;
|
|
103
|
+
var paginationProps = _a.paginationProps, paginationSizeProps = _a.paginationSizeProps, sort = _a.sort, layoutNamesProps = _a.layoutNamesProps, initialQuery = _a.initialQuery, configQuery = _a.configQuery;
|
|
104
|
+
return (__assign(__assign((_b = {}, _b[paginationProps.attribute] = paginationProps.defaultValue, _b[paginationSizeProps.attribute] = paginationSizeProps.defaultValue, _b[sort.attribute] = sort.defaultValue, _b[layoutNamesProps.attribute] = layoutNamesProps.defaultValue, _b), initialQuery), configQuery));
|
|
105
|
+
};
|
|
106
|
+
exports.createInitialValues = createInitialValues;
|
|
70
107
|
/**
|
|
71
108
|
* useList
|
|
72
109
|
* Добавляет массу возможностей для взаимодействия с коллекциями. Коллекции можно получать как с бекенда,
|
|
@@ -75,11 +112,10 @@ var defaultConfig = {
|
|
|
75
112
|
*/
|
|
76
113
|
function useList(config) {
|
|
77
114
|
var _a, _b;
|
|
78
|
-
var components = index_1.useComponents();
|
|
79
115
|
// Get list from redux state
|
|
80
116
|
var list = useSelector_1["default"](function (state) { return list_1.getList(state, config.listId); });
|
|
81
117
|
// Normalize sort config
|
|
82
|
-
var sort =
|
|
118
|
+
var sort = exports.normalizeSortProps(config.sort);
|
|
83
119
|
// Empty
|
|
84
120
|
var Empty = require('../ui/list/Empty')["default"];
|
|
85
121
|
var emptyProps = Empty_1.normalizeEmptyProps(config.empty);
|
|
@@ -107,32 +143,14 @@ function useList(config) {
|
|
|
107
143
|
var layoutNamesProps = LayoutNames_1.normalizeLayoutNamesProps(config.layout);
|
|
108
144
|
var renderLayoutNames = function () { return React.createElement(LayoutNames, __assign({ list: list }, layoutNamesProps)); };
|
|
109
145
|
// Models
|
|
146
|
+
var defaultSearchModel = react_1.useMemo(function () { return exports.getDefaultSearchModel({
|
|
147
|
+
paginationProps: paginationProps,
|
|
148
|
+
paginationSizeProps: paginationSizeProps,
|
|
149
|
+
sort: sort,
|
|
150
|
+
layoutNamesProps: layoutNamesProps
|
|
151
|
+
}); }, [layoutNamesProps, paginationProps, paginationSizeProps, sort]);
|
|
110
152
|
var model = useModel_1["default"](config.model);
|
|
111
|
-
var searchModel = useModel_1["default"](config.searchModel || ((_a = config.searchForm) === null || _a === void 0 ? void 0 : _a.model),
|
|
112
|
-
attributes: [
|
|
113
|
-
paginationProps.enable && {
|
|
114
|
-
type: 'number',
|
|
115
|
-
attribute: paginationProps.attribute,
|
|
116
|
-
defaultValue: paginationProps.defaultValue
|
|
117
|
-
},
|
|
118
|
-
paginationSizeProps.enable && {
|
|
119
|
-
type: 'number',
|
|
120
|
-
attribute: paginationSizeProps.attribute,
|
|
121
|
-
defaultValue: paginationSizeProps.defaultValue
|
|
122
|
-
},
|
|
123
|
-
sort.enable && {
|
|
124
|
-
type: 'string',
|
|
125
|
-
jsType: 'string[]',
|
|
126
|
-
attribute: sort.attribute,
|
|
127
|
-
defaultValue: sort.defaultValue
|
|
128
|
-
},
|
|
129
|
-
layoutNamesProps.enable && {
|
|
130
|
-
type: 'string',
|
|
131
|
-
attribute: layoutNamesProps.attribute,
|
|
132
|
-
defaultValue: layoutNamesProps.defaultValue
|
|
133
|
-
},
|
|
134
|
-
].filter(Boolean)
|
|
135
|
-
});
|
|
153
|
+
var searchModel = useModel_1["default"](config.searchModel || ((_a = config.searchForm) === null || _a === void 0 ? void 0 : _a.model), defaultSearchModel);
|
|
136
154
|
// Address bar synchronization
|
|
137
155
|
var _c = useAddressBar_1["default"](__assign({ enable: !!config.addressBar, model: searchModel }, (typeof config.addressBar === 'boolean' ? { enable: config.addressBar } : config.addressBar))), initialQuery = _c.initialQuery, updateQuery = _c.updateQuery;
|
|
138
156
|
// Outside search form
|
|
@@ -149,34 +167,46 @@ function useList(config) {
|
|
|
149
167
|
var formId = get_1["default"](config, 'searchForm.formId') || config.listId;
|
|
150
168
|
var dispatch = useDispatch_1["default"]();
|
|
151
169
|
// List wrapper (form context)
|
|
152
|
-
var
|
|
153
|
-
|
|
154
|
-
|
|
155
|
-
|
|
170
|
+
var _initialValues = react_1.useMemo(function () { return exports.createInitialValues({
|
|
171
|
+
paginationProps: paginationProps,
|
|
172
|
+
paginationSizeProps: paginationSizeProps,
|
|
173
|
+
sort: sort,
|
|
174
|
+
layoutNamesProps: layoutNamesProps,
|
|
175
|
+
initialQuery: initialQuery,
|
|
176
|
+
configQuery: config.query
|
|
177
|
+
}); }, [config.query, initialQuery, layoutNamesProps, paginationProps, paginationSizeProps, sort]);
|
|
178
|
+
var initialValues = useInitial_1["default"](function () { return _initialValues; });
|
|
156
179
|
var renderList = react_1.useCallback(function (children) {
|
|
157
180
|
var Form = require('../ui/form/Form')["default"];
|
|
158
181
|
return (React.createElement(Form, { formId: formId, initialValues: initialValues, view: false, useRedux: true }, children));
|
|
159
182
|
}, [formId, initialValues]);
|
|
160
183
|
// Init list in redux store
|
|
161
184
|
react_use_1.useMount(function () {
|
|
162
|
-
|
|
163
|
-
|
|
164
|
-
|
|
165
|
-
|
|
166
|
-
|
|
167
|
-
|
|
168
|
-
|
|
169
|
-
|
|
170
|
-
|
|
171
|
-
|
|
172
|
-
|
|
173
|
-
|
|
174
|
-
|
|
175
|
-
|
|
176
|
-
|
|
177
|
-
|
|
178
|
-
|
|
179
|
-
|
|
185
|
+
if (!list) {
|
|
186
|
+
var toDispatch = [
|
|
187
|
+
list_2.listInit(config.listId, {
|
|
188
|
+
listId: config.listId,
|
|
189
|
+
action: config.action || config.action === '' ? config.action : null,
|
|
190
|
+
actionMethod: config.actionMethod || exports.defaultConfig.actionMethod,
|
|
191
|
+
onFetch: config.onFetch,
|
|
192
|
+
condition: config.condition,
|
|
193
|
+
scope: config.scope,
|
|
194
|
+
items: null,
|
|
195
|
+
sourceItems: config.items || null,
|
|
196
|
+
isRemote: !config.items,
|
|
197
|
+
primaryKey: config.primaryKey || exports.defaultConfig.primaryKey,
|
|
198
|
+
formId: formId,
|
|
199
|
+
loadMore: paginationProps.loadMore,
|
|
200
|
+
pageAttribute: paginationProps.attribute || null,
|
|
201
|
+
pageSizeAttribute: paginationSizeProps.attribute || null,
|
|
202
|
+
sortAttribute: sort.attribute || null,
|
|
203
|
+
layoutAttribute: layoutNamesProps.attribute || null
|
|
204
|
+
}),
|
|
205
|
+
list_2.listSetItems(config.listId, config.items),
|
|
206
|
+
list_2.listLazyFetch(config.listId),
|
|
207
|
+
];
|
|
208
|
+
dispatch(toDispatch);
|
|
209
|
+
}
|
|
180
210
|
});
|
|
181
211
|
// Check form values change
|
|
182
212
|
var formValues = useSelector_1["default"](function (state) { return form_2.formSelector(state, formId, function (_a) {
|
|
@@ -210,7 +240,7 @@ function useList(config) {
|
|
|
210
240
|
});
|
|
211
241
|
}, [formId, prevQuery, config.query, dispatch]);
|
|
212
242
|
// Check change items
|
|
213
|
-
|
|
243
|
+
react_use_1.useUpdateEffect(function () {
|
|
214
244
|
dispatch([
|
|
215
245
|
list_2.listSetItems(config.listId, config.items),
|
|
216
246
|
list_2.listLazyFetch(config.listId),
|
|
@@ -218,7 +248,7 @@ function useList(config) {
|
|
|
218
248
|
}, [dispatch, config.items, config.listId]);
|
|
219
249
|
// Destroy
|
|
220
250
|
react_use_1.useUnmount(function () {
|
|
221
|
-
var autoDestroy = typeof config.autoDestroy === 'boolean' ? config.autoDestroy : defaultConfig.autoDestroy;
|
|
251
|
+
var autoDestroy = typeof config.autoDestroy === 'boolean' ? config.autoDestroy : exports.defaultConfig.autoDestroy;
|
|
222
252
|
if (autoDestroy) {
|
|
223
253
|
dispatch(list_2.listDestroy(config.listId));
|
|
224
254
|
}
|
package/hooks/useModel.js
CHANGED
|
@@ -8,6 +8,6 @@ var useComponents_1 = __importDefault(require("./useComponents"));
|
|
|
8
8
|
function useModel(model, defaultModel) {
|
|
9
9
|
if (defaultModel === void 0) { defaultModel = null; }
|
|
10
10
|
var components = useComponents_1["default"]();
|
|
11
|
-
return react_1.useMemo(function () { return components.meta.normalizeModel(components.meta.getModel(model), defaultModel); }, [components.meta, defaultModel, model]);
|
|
11
|
+
return react_1.useMemo(function () { return components.meta.normalizeModel(typeof model === 'string' ? components.meta.getModel(model) : model, defaultModel); }, [components.meta, defaultModel, model]);
|
|
12
12
|
}
|
|
13
13
|
exports["default"] = useModel;
|
package/hooks/useScreen.d.ts
CHANGED
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import { IScreen } from '
|
|
1
|
+
import { IScreen } from '../providers/ScreenProvider';
|
|
2
2
|
export default function useScreen(): IScreen;
|
package/hooks/useScreen.js
CHANGED
|
@@ -1,8 +1,8 @@
|
|
|
1
1
|
"use strict";
|
|
2
2
|
exports.__esModule = true;
|
|
3
3
|
var react_1 = require("react");
|
|
4
|
-
var
|
|
4
|
+
var ScreenProvider_1 = require("../providers/ScreenProvider");
|
|
5
5
|
function useScreen() {
|
|
6
|
-
return react_1.useContext(
|
|
6
|
+
return react_1.useContext(ScreenProvider_1.ScreenContext);
|
|
7
7
|
}
|
|
8
8
|
exports["default"] = useScreen;
|
package/hooks/useSsr.js
ADDED
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@steroidsjs/core",
|
|
3
|
-
"version": "2.1.0-beta.
|
|
3
|
+
"version": "2.1.0-beta.9.1",
|
|
4
4
|
"description": "",
|
|
5
5
|
"author": "Vladimir Kozhin <hello@kozhindev.com>",
|
|
6
6
|
"repository": {
|
|
@@ -43,13 +43,15 @@
|
|
|
43
43
|
"react-day-picker": "^7.4.8",
|
|
44
44
|
"react-dom": "^17.0.2",
|
|
45
45
|
"react-grid-gallery": "^0.4.8",
|
|
46
|
+
"react-helmet": "^6.1.0",
|
|
46
47
|
"react-input-mask": "^3.0.0-alpha.2",
|
|
47
48
|
"react-redux": "^7.1.1",
|
|
48
49
|
"react-router": "^5.2.0",
|
|
49
50
|
"react-router-dom": "^5.2.0",
|
|
50
51
|
"react-use": "^17.1.0",
|
|
51
52
|
"redux": "^4.0.4",
|
|
52
|
-
"redux-mock-store": "^1.5.4"
|
|
53
|
+
"redux-mock-store": "^1.5.4",
|
|
54
|
+
"set-cookie-parser": "^2.4.8"
|
|
53
55
|
},
|
|
54
56
|
"devDependencies": {
|
|
55
57
|
"@babel/cli": "^7.13.14",
|
|
@@ -58,12 +60,12 @@
|
|
|
58
60
|
"@babel/preset-react": "^7.13.13",
|
|
59
61
|
"@babel/preset-typescript": "^7.13.0",
|
|
60
62
|
"@types/enzyme": "^3.10.8",
|
|
63
|
+
"@types/enzyme-adapter-react-16": "^1.0.6",
|
|
61
64
|
"@types/jest": "^26.0.22",
|
|
62
65
|
"@types/markdown-to-jsx": "^6.11.3",
|
|
63
66
|
"@types/reach__router": "^1.3.7",
|
|
64
67
|
"@types/react": "=17.0.3",
|
|
65
68
|
"@types/react-color": "^3.0.4",
|
|
66
|
-
"@types/enzyme-adapter-react-16": "^1.0.6",
|
|
67
69
|
"@types/react-syntax-highlighter": "^13.5.0",
|
|
68
70
|
"@types/webpack-env": "^1.16.0",
|
|
69
71
|
"@typescript-eslint/eslint-plugin": "^4.15.0",
|
|
@@ -0,0 +1,26 @@
|
|
|
1
|
+
import * as React from 'react';
|
|
2
|
+
import { PropsWithChildren } from 'react';
|
|
3
|
+
declare global {
|
|
4
|
+
interface Window {
|
|
5
|
+
SteroidsComponents: IComponents;
|
|
6
|
+
}
|
|
7
|
+
}
|
|
8
|
+
export interface IComponents {
|
|
9
|
+
api?: any;
|
|
10
|
+
clientStorage?: any;
|
|
11
|
+
html?: any;
|
|
12
|
+
http?: any;
|
|
13
|
+
locale?: any;
|
|
14
|
+
store?: any;
|
|
15
|
+
ui?: any;
|
|
16
|
+
resource?: any;
|
|
17
|
+
ws?: any;
|
|
18
|
+
pushNotification?: any;
|
|
19
|
+
meta?: any;
|
|
20
|
+
[key: string]: any;
|
|
21
|
+
}
|
|
22
|
+
export interface IComponentsProviderProps extends PropsWithChildren<any> {
|
|
23
|
+
components: IComponents;
|
|
24
|
+
}
|
|
25
|
+
export declare const ComponentsContext: React.Context<IComponents>;
|
|
26
|
+
export default function ComponentsProvider(props: IComponentsProviderProps): JSX.Element;
|
|
@@ -0,0 +1,28 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
|
|
3
|
+
if (k2 === undefined) k2 = k;
|
|
4
|
+
Object.defineProperty(o, k2, { enumerable: true, get: function() { return m[k]; } });
|
|
5
|
+
}) : (function(o, m, k, k2) {
|
|
6
|
+
if (k2 === undefined) k2 = k;
|
|
7
|
+
o[k2] = m[k];
|
|
8
|
+
}));
|
|
9
|
+
var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
|
|
10
|
+
Object.defineProperty(o, "default", { enumerable: true, value: v });
|
|
11
|
+
}) : function(o, v) {
|
|
12
|
+
o["default"] = v;
|
|
13
|
+
});
|
|
14
|
+
var __importStar = (this && this.__importStar) || function (mod) {
|
|
15
|
+
if (mod && mod.__esModule) return mod;
|
|
16
|
+
var result = {};
|
|
17
|
+
if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
|
|
18
|
+
__setModuleDefault(result, mod);
|
|
19
|
+
return result;
|
|
20
|
+
};
|
|
21
|
+
exports.__esModule = true;
|
|
22
|
+
exports.ComponentsContext = void 0;
|
|
23
|
+
var React = __importStar(require("react"));
|
|
24
|
+
exports.ComponentsContext = React.createContext({});
|
|
25
|
+
function ComponentsProvider(props) {
|
|
26
|
+
return (React.createElement(exports.ComponentsContext.Provider, { value: props.components }, props.children));
|
|
27
|
+
}
|
|
28
|
+
exports["default"] = ComponentsProvider;
|
|
@@ -0,0 +1,20 @@
|
|
|
1
|
+
import * as React from 'react';
|
|
2
|
+
import { PropsWithChildren } from 'react';
|
|
3
|
+
export interface IScreen {
|
|
4
|
+
width: number;
|
|
5
|
+
media: Record<string, any>;
|
|
6
|
+
setMedia: any;
|
|
7
|
+
isPhone: () => boolean;
|
|
8
|
+
isTablet: () => boolean;
|
|
9
|
+
isDesktop: () => boolean;
|
|
10
|
+
getDeviceType: () => string;
|
|
11
|
+
}
|
|
12
|
+
export declare const ScreenContext: React.Context<IScreen>;
|
|
13
|
+
export interface IScreenProviderProps extends PropsWithChildren<any> {
|
|
14
|
+
media?: Record<string, any>;
|
|
15
|
+
skipTimeout?: boolean;
|
|
16
|
+
}
|
|
17
|
+
export declare const SCREEN_PHONE = "phone";
|
|
18
|
+
export declare const SCREEN_TABLET = "tablet";
|
|
19
|
+
export declare const SCREEN_DESKTOP = "desktop";
|
|
20
|
+
export default function ScreenProvider(props: IScreenProviderProps): JSX.Element;
|
|
@@ -0,0 +1,87 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
|
|
3
|
+
if (k2 === undefined) k2 = k;
|
|
4
|
+
Object.defineProperty(o, k2, { enumerable: true, get: function() { return m[k]; } });
|
|
5
|
+
}) : (function(o, m, k, k2) {
|
|
6
|
+
if (k2 === undefined) k2 = k;
|
|
7
|
+
o[k2] = m[k];
|
|
8
|
+
}));
|
|
9
|
+
var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
|
|
10
|
+
Object.defineProperty(o, "default", { enumerable: true, value: v });
|
|
11
|
+
}) : function(o, v) {
|
|
12
|
+
o["default"] = v;
|
|
13
|
+
});
|
|
14
|
+
var __importStar = (this && this.__importStar) || function (mod) {
|
|
15
|
+
if (mod && mod.__esModule) return mod;
|
|
16
|
+
var result = {};
|
|
17
|
+
if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
|
|
18
|
+
__setModuleDefault(result, mod);
|
|
19
|
+
return result;
|
|
20
|
+
};
|
|
21
|
+
exports.__esModule = true;
|
|
22
|
+
exports.SCREEN_DESKTOP = exports.SCREEN_TABLET = exports.SCREEN_PHONE = exports.ScreenContext = void 0;
|
|
23
|
+
var React = __importStar(require("react"));
|
|
24
|
+
var react_1 = require("react");
|
|
25
|
+
var react_use_1 = require("react-use");
|
|
26
|
+
exports.ScreenContext = React.createContext({});
|
|
27
|
+
exports.SCREEN_PHONE = 'phone';
|
|
28
|
+
exports.SCREEN_TABLET = 'tablet';
|
|
29
|
+
exports.SCREEN_DESKTOP = 'desktop';
|
|
30
|
+
function ScreenProvider(props) {
|
|
31
|
+
var _a;
|
|
32
|
+
var _b = react_1.useState(!process.env.IS_SSR ? window.innerWidth : 1280), width = _b[0], setWidth = _b[1];
|
|
33
|
+
var _c = react_1.useState(props.media || (_a = {},
|
|
34
|
+
_a[exports.SCREEN_PHONE] = 320,
|
|
35
|
+
_a[exports.SCREEN_TABLET] = 768,
|
|
36
|
+
_a[exports.SCREEN_DESKTOP] = 1024,
|
|
37
|
+
_a)), media = _c[0], setMedia = _c[1];
|
|
38
|
+
var timer = null;
|
|
39
|
+
var onResize = function () {
|
|
40
|
+
if (timer) {
|
|
41
|
+
clearTimeout(timer);
|
|
42
|
+
}
|
|
43
|
+
if (props.skipTimeout) {
|
|
44
|
+
setWidth(window.innerWidth);
|
|
45
|
+
}
|
|
46
|
+
else {
|
|
47
|
+
timer = setTimeout(function () { return setWidth(window.innerWidth); }, 100);
|
|
48
|
+
}
|
|
49
|
+
};
|
|
50
|
+
react_use_1.useMount(function () {
|
|
51
|
+
window.addEventListener('resize', onResize, false);
|
|
52
|
+
});
|
|
53
|
+
react_use_1.useUnmount(function () {
|
|
54
|
+
window.removeEventListener('resize', onResize);
|
|
55
|
+
});
|
|
56
|
+
var getDeviceType = react_1.useCallback(function () {
|
|
57
|
+
if (width < media[exports.SCREEN_TABLET]) {
|
|
58
|
+
return exports.SCREEN_PHONE;
|
|
59
|
+
}
|
|
60
|
+
if (width < media[exports.SCREEN_DESKTOP]) {
|
|
61
|
+
return exports.SCREEN_TABLET;
|
|
62
|
+
}
|
|
63
|
+
return exports.SCREEN_DESKTOP;
|
|
64
|
+
}, [width, media]);
|
|
65
|
+
var isPhone = react_1.useCallback(function () { return getDeviceType() === exports.SCREEN_PHONE; }, [getDeviceType]);
|
|
66
|
+
var isTablet = react_1.useCallback(function () { return getDeviceType() === exports.SCREEN_TABLET; }, [getDeviceType]);
|
|
67
|
+
var isDesktop = react_1.useCallback(function () { return getDeviceType() === exports.SCREEN_DESKTOP; }, [getDeviceType]);
|
|
68
|
+
var value = react_1.useMemo(function () { return ({
|
|
69
|
+
width: width,
|
|
70
|
+
media: media,
|
|
71
|
+
setMedia: setMedia,
|
|
72
|
+
isPhone: isPhone,
|
|
73
|
+
isTablet: isTablet,
|
|
74
|
+
isDesktop: isDesktop,
|
|
75
|
+
getDeviceType: getDeviceType
|
|
76
|
+
}); }, [
|
|
77
|
+
width,
|
|
78
|
+
media,
|
|
79
|
+
setMedia,
|
|
80
|
+
isPhone,
|
|
81
|
+
isTablet,
|
|
82
|
+
isDesktop,
|
|
83
|
+
getDeviceType,
|
|
84
|
+
]);
|
|
85
|
+
return (React.createElement(exports.ScreenContext.Provider, { value: value }, props.children));
|
|
86
|
+
}
|
|
87
|
+
exports["default"] = ScreenProvider;
|
|
@@ -0,0 +1,17 @@
|
|
|
1
|
+
import * as React from 'react';
|
|
2
|
+
import { PropsWithChildren } from 'react';
|
|
3
|
+
import { StaticRouterContext } from 'react-router';
|
|
4
|
+
export interface IPreloadedData {
|
|
5
|
+
[configId: string]: any;
|
|
6
|
+
}
|
|
7
|
+
export interface ISsr {
|
|
8
|
+
history?: {
|
|
9
|
+
initialEntries: string[];
|
|
10
|
+
};
|
|
11
|
+
staticContext?: StaticRouterContext;
|
|
12
|
+
preloadedData?: IPreloadedData;
|
|
13
|
+
}
|
|
14
|
+
export declare const SsrProviderContext: React.Context<ISsr>;
|
|
15
|
+
export interface ISsrProviderProps extends ISsr, PropsWithChildren<any> {
|
|
16
|
+
}
|
|
17
|
+
export default function SsrProvider(props: ISsrProviderProps): JSX.Element;
|
|
@@ -0,0 +1,32 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
|
|
3
|
+
if (k2 === undefined) k2 = k;
|
|
4
|
+
Object.defineProperty(o, k2, { enumerable: true, get: function() { return m[k]; } });
|
|
5
|
+
}) : (function(o, m, k, k2) {
|
|
6
|
+
if (k2 === undefined) k2 = k;
|
|
7
|
+
o[k2] = m[k];
|
|
8
|
+
}));
|
|
9
|
+
var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
|
|
10
|
+
Object.defineProperty(o, "default", { enumerable: true, value: v });
|
|
11
|
+
}) : function(o, v) {
|
|
12
|
+
o["default"] = v;
|
|
13
|
+
});
|
|
14
|
+
var __importStar = (this && this.__importStar) || function (mod) {
|
|
15
|
+
if (mod && mod.__esModule) return mod;
|
|
16
|
+
var result = {};
|
|
17
|
+
if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
|
|
18
|
+
__setModuleDefault(result, mod);
|
|
19
|
+
return result;
|
|
20
|
+
};
|
|
21
|
+
exports.__esModule = true;
|
|
22
|
+
exports.SsrProviderContext = void 0;
|
|
23
|
+
var React = __importStar(require("react"));
|
|
24
|
+
exports.SsrProviderContext = React.createContext(null);
|
|
25
|
+
function SsrProvider(props) {
|
|
26
|
+
return (React.createElement(exports.SsrProviderContext.Provider, { value: {
|
|
27
|
+
history: props.history,
|
|
28
|
+
staticContext: props.staticContext,
|
|
29
|
+
preloadedData: props.preloadedData
|
|
30
|
+
} }, props.children));
|
|
31
|
+
}
|
|
32
|
+
exports["default"] = SsrProvider;
|
|
@@ -0,0 +1,4 @@
|
|
|
1
|
+
import SsrProvider from '@steroidsjs/core/providers/SsrProvider';
|
|
2
|
+
import ScreenProvider from '@steroidsjs/core/providers/ScreenProvider';
|
|
3
|
+
import ComponentsProvider from '@steroidsjs/core/providers/ComponentsProvider';
|
|
4
|
+
export { SsrProvider, ScreenProvider, ComponentsProvider };
|
|
@@ -0,0 +1,12 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
var __importDefault = (this && this.__importDefault) || function (mod) {
|
|
3
|
+
return (mod && mod.__esModule) ? mod : { "default": mod };
|
|
4
|
+
};
|
|
5
|
+
exports.__esModule = true;
|
|
6
|
+
exports.ComponentsProvider = exports.ScreenProvider = exports.SsrProvider = void 0;
|
|
7
|
+
var SsrProvider_1 = __importDefault(require("@steroidsjs/core/providers/SsrProvider"));
|
|
8
|
+
exports.SsrProvider = SsrProvider_1["default"];
|
|
9
|
+
var ScreenProvider_1 = __importDefault(require("@steroidsjs/core/providers/ScreenProvider"));
|
|
10
|
+
exports.ScreenProvider = ScreenProvider_1["default"];
|
|
11
|
+
var ComponentsProvider_1 = __importDefault(require("@steroidsjs/core/providers/ComponentsProvider"));
|
|
12
|
+
exports.ComponentsProvider = ComponentsProvider_1["default"];
|
package/reducers/form.d.ts
CHANGED
|
@@ -4,6 +4,6 @@
|
|
|
4
4
|
* @param action
|
|
5
5
|
*/
|
|
6
6
|
export declare function reducerItem(state: any, action: any): any;
|
|
7
|
-
declare const _default: (state: {}, action: any) =>
|
|
7
|
+
declare const _default: (state: {}, action: any) => any;
|
|
8
8
|
export default _default;
|
|
9
9
|
export declare const formSelector: (state: any, formId: any, selector: any) => any;
|
package/reducers/form.js
CHANGED
|
@@ -58,7 +58,7 @@ var initialState = {};
|
|
|
58
58
|
exports["default"] = (function (state, action) {
|
|
59
59
|
if (state === void 0) { state = initialState; }
|
|
60
60
|
if (action.formId) {
|
|
61
|
-
state
|
|
61
|
+
return dot_prop_immutable_1.set(state, action.formId, reducerItem(state[action.formId], action));
|
|
62
62
|
}
|
|
63
63
|
return state;
|
|
64
64
|
});
|
package/reducers/list.js
CHANGED
|
@@ -32,9 +32,7 @@ var reducerMap = (_a = {},
|
|
|
32
32
|
},
|
|
33
33
|
_a[list_1.LIST_SET_ITEMS] = function (state, action) {
|
|
34
34
|
var _a;
|
|
35
|
-
return (__assign(__assign({}, state), { lists: __assign(__assign({}, state.lists), (_a = {}, _a[action.listId] = {
|
|
36
|
-
items: action.items
|
|
37
|
-
}, _a)) }));
|
|
35
|
+
return (__assign(__assign({}, state), { lists: __assign(__assign({}, state.lists), (_a = {}, _a[action.listId] = __assign(__assign({}, state.lists[action.listId]), { items: action.items }), _a)) }));
|
|
38
36
|
},
|
|
39
37
|
_a[list_1.LIST_BEFORE_FETCH] = function (state, action) {
|
|
40
38
|
var _a;
|
package/reducers/router.js
CHANGED
|
@@ -95,7 +95,7 @@ exports.buildUrl = buildUrl;
|
|
|
95
95
|
*/
|
|
96
96
|
var checkIsActive = function (state, item) {
|
|
97
97
|
// Check is active
|
|
98
|
-
var pathname = window.location.protocol === 'file:'
|
|
98
|
+
var pathname = !process.env.IS_SSR && window.location.protocol === 'file:'
|
|
99
99
|
? window.location.hash.replace(/^#/, '')
|
|
100
100
|
: get_1["default"](state, 'location.pathname');
|
|
101
101
|
var checkActive = function (subPathname, subItem) {
|
package/ui/crud/Crud/Crud.d.ts
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import * as React from 'react';
|
|
2
2
|
import { ReactNode } from 'react';
|
|
3
3
|
import { IApiRest } from '../../../components/ApiComponent';
|
|
4
|
-
import { IComponents } from '../../../
|
|
4
|
+
import { IComponents } from '../../../providers/ComponentsProvider';
|
|
5
5
|
import { IComponentsHocOutput } from '../../../hoc/components';
|
|
6
6
|
import { IConnectHocOutput } from '../../../hoc/connect';
|
|
7
7
|
import { IFormProps } from '../../form/Form/Form';
|
package/ui/crud/index.d.ts
CHANGED
|
@@ -31,4 +31,5 @@ export declare const generateCrud: (routeId: string, props: ICrudGeneratorProps)
|
|
|
31
31
|
items?: IRouteItem[] | {
|
|
32
32
|
[key: string]: IRouteItem;
|
|
33
33
|
};
|
|
34
|
+
preloadData?: (match: Record<string, any>) => (import("../../hooks/useFetch").IFetchConfig | import("../list/List/List").IListProps)[];
|
|
34
35
|
};
|
|
@@ -30,7 +30,7 @@ function DropDownField(props) {
|
|
|
30
30
|
autoComplete: props.autoComplete,
|
|
31
31
|
autoFetch: props.autoFetch,
|
|
32
32
|
query: query
|
|
33
|
-
}), items = _b.items, isLoading = _b.isLoading, isAutoComplete = _b.isAutoComplete;
|
|
33
|
+
}), items = _b.items, isLoading = _b.isLoading, isAutoComplete = _b.isAutoComplete, sourceItems = _b.sourceItems;
|
|
34
34
|
var inputSelectedIds = react_1.useMemo(function () { return props.selectedIds || [].concat(props.input.value || []); }, [props.input.value, props.selectedIds]);
|
|
35
35
|
// Data select
|
|
36
36
|
var _c = hooks_1.useDataSelect({
|
|
@@ -39,6 +39,7 @@ function DropDownField(props) {
|
|
|
39
39
|
selectedIds: inputSelectedIds,
|
|
40
40
|
primaryKey: props.primaryKey,
|
|
41
41
|
items: items,
|
|
42
|
+
sourceItems: sourceItems,
|
|
42
43
|
inputValue: props.input.value
|
|
43
44
|
}), isOpened = _c.isOpened, setIsOpened = _c.setIsOpened, setIsFocused = _c.setIsFocused, hoveredId = _c.hoveredId, setHoveredId = _c.setHoveredId, selectedIds = _c.selectedIds, setSelectedIds = _c.setSelectedIds;
|
|
44
45
|
var onOpen = react_1.useCallback(function () {
|
|
@@ -1,4 +1,5 @@
|
|
|
1
1
|
import * as React from 'react';
|
|
2
|
+
import { KeyboardEventHandler } from 'react';
|
|
2
3
|
import { IFieldWrapperInputProps, IFieldWrapperOutputProps } from '../Field/fieldWrapper';
|
|
3
4
|
/**
|
|
4
5
|
* TextField
|
|
@@ -35,7 +36,7 @@ export interface ITextFieldViewProps extends ITextFieldProps, IFieldWrapperOutpu
|
|
|
35
36
|
inputProps: {
|
|
36
37
|
name: string;
|
|
37
38
|
onChange: (value: string | React.ChangeEvent) => void;
|
|
38
|
-
onKeyUp:
|
|
39
|
+
onKeyUp: KeyboardEventHandler<HTMLTextAreaElement>;
|
|
39
40
|
value: string | number;
|
|
40
41
|
placeholder: string;
|
|
41
42
|
disabled: boolean;
|
|
@@ -30,7 +30,7 @@ function TextField(props) {
|
|
|
30
30
|
// TODO This is not worked in redux... =(
|
|
31
31
|
// dispatch(submit(props.formId));
|
|
32
32
|
}
|
|
33
|
-
}, [
|
|
33
|
+
}, [props.formId, props.submitOnEnter]);
|
|
34
34
|
var onChange = react_1.useCallback(function (e) { return props.input.onChange.call(null, e.target ? e.target.value : e.nativeEvent.text); }, [props.input.onChange]);
|
|
35
35
|
var inputProps = react_1.useMemo(function () { return (__assign({ name: props.input.name, value: props.input.value || '', onChange: onChange,
|
|
36
36
|
onKeyUp: onKeyUp, placeholder: props.placeholder, disabled: props.disabled }, props.inputProps)); }, [onKeyUp, onChange, props.disabled, props.input.name, props.input.value, props.inputProps, props.placeholder]);
|
package/ui/icon/Icon/Icon.js
CHANGED
|
@@ -20,6 +20,9 @@ var hooks_1 = require("../../../hooks");
|
|
|
20
20
|
function Icon(props) {
|
|
21
21
|
var components = hooks_1.useComponents();
|
|
22
22
|
var name = props.name;
|
|
23
|
+
if (!isString_1["default"](name)) {
|
|
24
|
+
return null;
|
|
25
|
+
}
|
|
23
26
|
var icon;
|
|
24
27
|
if (process.env.PLATFORM === 'mobile') {
|
|
25
28
|
icon = components.ui.getIcon(name) || name;
|