@steroidsjs/core 3.0.0-beta.50 → 3.0.0-beta.52
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 +64 -0
- package/components/ClientStorageComponent.js +1 -1
- package/components/ResourceComponent.d.ts +88 -6
- package/components/ResourceComponent.js +11 -11
- package/hooks/index.d.ts +2 -1
- package/hooks/index.js +3 -1
- package/hooks/useAddressBar.d.ts +11 -0
- package/hooks/useDataSelect.d.ts +6 -0
- package/hooks/useTheme.d.ts +8 -0
- package/hooks/useTheme.js +40 -0
- package/package.json +1 -1
- package/providers/ComponentsProvider.d.ts +2 -1
- package/ui/content/Accordion/Accordion.d.ts +8 -0
- package/ui/content/Card/Card.d.ts +17 -4
- package/ui/crud/Crud/Crud.d.ts +38 -0
- package/ui/form/Button/Button.d.ts +16 -0
- package/ui/form/DropDownField/DropDownField.d.ts +14 -0
- package/ui/form/InputField/InputField.d.ts +1 -1
- package/ui/form/InputField/InputField.js +13 -1
- package/ui/form/RateField/RateField.d.ts +6 -0
- package/ui/form/RateField/RateField.js +2 -1
- package/ui/form/ReCaptchaField/ReCaptchaField.d.ts +66 -0
- package/ui/form/ReCaptchaField/ReCaptchaField.js +22 -1
- package/ui/layout/Notifications/Notifications.d.ts +26 -0
- package/ui/layout/Tooltip/Tooltip.d.ts +21 -0
package/actions/list.d.ts
CHANGED
|
@@ -1,25 +1,89 @@
|
|
|
1
1
|
import { IApiMethod } from '../components/ApiComponent';
|
|
2
2
|
export interface IList {
|
|
3
|
+
/**
|
|
4
|
+
* Url, который вернет коллекцию элементов.
|
|
5
|
+
* @example api/v1/articles
|
|
6
|
+
*/
|
|
3
7
|
action?: string | IApiMethod;
|
|
8
|
+
/**
|
|
9
|
+
* Тип HTTP запроса (GET | POST | PUT | DELETE)
|
|
10
|
+
*/
|
|
4
11
|
actionMethod?: string;
|
|
12
|
+
/**
|
|
13
|
+
* Функция обратного вызова, вызываемая при получении списка.
|
|
14
|
+
*/
|
|
5
15
|
onFetch?: (list: IList, query: Record<string, unknown>, components: any) => Promise<any>;
|
|
16
|
+
/**
|
|
17
|
+
* Функция условия, используемая для определения поведения списка на основе параметров запроса.
|
|
18
|
+
*/
|
|
6
19
|
condition?: (query: Record<string, unknown>) => any;
|
|
20
|
+
/**
|
|
21
|
+
* Массив строк, представляющих область списка.
|
|
22
|
+
*/
|
|
7
23
|
scope?: string[];
|
|
24
|
+
/**
|
|
25
|
+
* Общее количество элементов в списке.
|
|
26
|
+
*/
|
|
8
27
|
total?: number;
|
|
28
|
+
/**
|
|
29
|
+
* Массив элементов списка.
|
|
30
|
+
*/
|
|
9
31
|
items?: Array<any>;
|
|
32
|
+
/**
|
|
33
|
+
* Массив исходных элементов списка.
|
|
34
|
+
*/
|
|
10
35
|
sourceItems?: Array<any>;
|
|
36
|
+
/**
|
|
37
|
+
* Логическое значение, указывающее, является ли список удаленным или нет.
|
|
38
|
+
*/
|
|
11
39
|
isRemote?: boolean;
|
|
40
|
+
/**
|
|
41
|
+
* Логическое значение, указывающее, можно ли загрузить еще элементы для списка.
|
|
42
|
+
*/
|
|
12
43
|
loadMore?: boolean;
|
|
44
|
+
/**
|
|
45
|
+
* Первичный ключ для списка.
|
|
46
|
+
*/
|
|
13
47
|
primaryKey?: string;
|
|
48
|
+
/**
|
|
49
|
+
* Идентификатор списка.
|
|
50
|
+
*/
|
|
14
51
|
listId?: string;
|
|
52
|
+
/**
|
|
53
|
+
* Идентификатор формы, связанной с данным списком.
|
|
54
|
+
*/
|
|
15
55
|
formId?: string;
|
|
56
|
+
/**
|
|
57
|
+
* Атрибут страницы для списка.
|
|
58
|
+
*/
|
|
16
59
|
pageAttribute?: string;
|
|
60
|
+
/**
|
|
61
|
+
* Атрибут размера страницы для списка.
|
|
62
|
+
*/
|
|
17
63
|
pageSizeAttribute?: string;
|
|
64
|
+
/**
|
|
65
|
+
* Атрибут сортировки для списка.
|
|
66
|
+
*/
|
|
18
67
|
sortAttribute?: string;
|
|
68
|
+
/**
|
|
69
|
+
* Атрибут макета для списка.
|
|
70
|
+
*/
|
|
19
71
|
layoutAttribute?: string;
|
|
72
|
+
/**
|
|
73
|
+
* Дополнительные метаданные для списка.
|
|
74
|
+
*/
|
|
20
75
|
meta?: any;
|
|
76
|
+
/**
|
|
77
|
+
* Логическое значение, указывающее, был ли список получен или нет.
|
|
78
|
+
*/
|
|
21
79
|
isFetched?: boolean;
|
|
80
|
+
/**
|
|
81
|
+
* Логическое значение, указывающее, находится ли список в процессе загрузки или нет.
|
|
82
|
+
*/
|
|
22
83
|
isLoading?: boolean;
|
|
84
|
+
/**
|
|
85
|
+
* Название макета, связанного с данным списком.
|
|
86
|
+
*/
|
|
23
87
|
layoutName?: null;
|
|
24
88
|
}
|
|
25
89
|
export declare const LIST_INIT = "@list/init";
|
|
@@ -53,7 +53,7 @@ var ClientStorageComponent = /** @class */ (function () {
|
|
|
53
53
|
if (this.sessionStorageAvailable) {
|
|
54
54
|
try {
|
|
55
55
|
window.sessionStorage.setItem('sessionStorageAvailable', '1');
|
|
56
|
-
this.sessionStorageAvailable = window.
|
|
56
|
+
this.sessionStorageAvailable = window.sessionStorage.getItem('sessionStorageAvailable') === '1';
|
|
57
57
|
window.sessionStorage.removeItem('sessionStorageAvailable');
|
|
58
58
|
}
|
|
59
59
|
catch (e) {
|
|
@@ -6,21 +6,103 @@ declare global {
|
|
|
6
6
|
};
|
|
7
7
|
}
|
|
8
8
|
}
|
|
9
|
+
export interface IResourceComponent {
|
|
10
|
+
/**
|
|
11
|
+
* Свойство для хранения обратных вызовов.
|
|
12
|
+
*/
|
|
13
|
+
_callbacks: any;
|
|
14
|
+
/**
|
|
15
|
+
* Свойство для хранения компонентов.
|
|
16
|
+
*/
|
|
17
|
+
_components: any;
|
|
18
|
+
/**
|
|
19
|
+
* API-ключ Google для использования Google Maps и других сервисов.
|
|
20
|
+
*/
|
|
21
|
+
googleApiKey: string;
|
|
22
|
+
/**
|
|
23
|
+
* Ключ сайта Google reCAPTCHA.
|
|
24
|
+
*/
|
|
25
|
+
googleCaptchaSiteKey: string;
|
|
26
|
+
/**
|
|
27
|
+
* Языковой код, используемый для загрузки ресурсов.
|
|
28
|
+
*/
|
|
29
|
+
language: string;
|
|
30
|
+
/**
|
|
31
|
+
* URL для загрузки Google Maps API.
|
|
32
|
+
*/
|
|
33
|
+
readonly RESOURCE_GOOGLE_MAP_API: string;
|
|
34
|
+
/**
|
|
35
|
+
* URL для загрузки Yandex Maps API.
|
|
36
|
+
*/
|
|
37
|
+
readonly RESOURCE_YANDEX_MAP_API: string;
|
|
38
|
+
/**
|
|
39
|
+
* URL для загрузки Twitter виджетов.
|
|
40
|
+
*/
|
|
41
|
+
readonly RESOURCE_TWITTER_WIDGET: string;
|
|
42
|
+
/**
|
|
43
|
+
* URL для загрузки Geetest.
|
|
44
|
+
*/
|
|
45
|
+
readonly RESOURCE_GEETEST_API: string;
|
|
46
|
+
/**
|
|
47
|
+
* URL для загрузки Google reCAPTCHA.
|
|
48
|
+
*/
|
|
49
|
+
readonly RESOURCE_GOOGLE_CAPTCHA: string;
|
|
50
|
+
/**
|
|
51
|
+
* Метод для загрузки Google reCAPTCHA.
|
|
52
|
+
* @returns Промис, который разрешается с объектом window.grecaptcha.
|
|
53
|
+
*/
|
|
54
|
+
loadGoogleCaptcha(): Promise<any>;
|
|
55
|
+
/**
|
|
56
|
+
* Метод для загрузки Google Maps API.
|
|
57
|
+
* @returns Промис, который разрешается с объектом window.google.maps.
|
|
58
|
+
*/
|
|
59
|
+
loadGoogleMapApi(): Promise<any>;
|
|
60
|
+
/**
|
|
61
|
+
* Метод для загрузки Yandex Maps API.
|
|
62
|
+
* @returns Промис, который разрешается с объектом window.ymaps.
|
|
63
|
+
*/
|
|
64
|
+
loadYandexMap(): Promise<any>;
|
|
65
|
+
/**
|
|
66
|
+
* Метод для загрузки Twitter виджетов.
|
|
67
|
+
* @returns Промис, который разрешается с объектом window.twttr.
|
|
68
|
+
*/
|
|
69
|
+
loadTwitterWidget(): Promise<any>;
|
|
70
|
+
/**
|
|
71
|
+
* Метод для загрузки Geetest.
|
|
72
|
+
* @returns Промис, который разрешается с объектом window.initGeetest.
|
|
73
|
+
*/
|
|
74
|
+
loadGeetest(): Promise<any>;
|
|
75
|
+
/**
|
|
76
|
+
* Метод для загрузки скрипта по указанному URL.
|
|
77
|
+
* @param url URL скрипта для загрузки.
|
|
78
|
+
* @param params Параметры запроса для URL скрипта.
|
|
79
|
+
* @param firstResolver Функция, которая возвращает объект, разрешающий промис.
|
|
80
|
+
* @returns Промис, который разрешается с результатом первого разрешенного промиса.
|
|
81
|
+
*/
|
|
82
|
+
loadScript(url: string, params: any, firstResolver: () => any): Promise<any>;
|
|
83
|
+
/**
|
|
84
|
+
* Метод для ожидания выполнения определенного условия.
|
|
85
|
+
* @param condition Условие, которое должно быть выполнено.
|
|
86
|
+
* @param timeout (Необязательный) Таймаут ожидания в миллисекундах (по умолчанию 5000 мс).
|
|
87
|
+
* @returns Промис, который разрешается с результатом выполнения условия.
|
|
88
|
+
*/
|
|
89
|
+
wait(condition: () => boolean, timeout?: number): Promise<any>;
|
|
90
|
+
}
|
|
9
91
|
/**
|
|
10
92
|
* Resource Component
|
|
11
93
|
* Компонент для подгрузки внешних API: Google Maps, Yandex Maps, Twitter, ...
|
|
12
94
|
*/
|
|
13
|
-
export default class ResourceComponent {
|
|
95
|
+
export default class ResourceComponent implements IResourceComponent {
|
|
14
96
|
_callbacks: any;
|
|
15
97
|
_components: any;
|
|
16
98
|
googleApiKey: string;
|
|
17
99
|
googleCaptchaSiteKey: string;
|
|
18
100
|
language: string;
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
101
|
+
readonly RESOURCE_GOOGLE_MAP_API = "//maps.googleapis.com/maps/api/js";
|
|
102
|
+
readonly RESOURCE_YANDEX_MAP_API = "https://api-maps.yandex.ru/2.1/";
|
|
103
|
+
readonly RESOURCE_TWITTER_WIDGET = "https://platform.twitter.com/widgets.js";
|
|
104
|
+
readonly RESOURCE_GEETEST_API = "//static.geetest.com/static/tools/gt.js";
|
|
105
|
+
readonly RESOURCE_GOOGLE_CAPTCHA = "https://www.google.com/recaptcha/api.js";
|
|
24
106
|
constructor(components: any, config: any);
|
|
25
107
|
loadGoogleCaptcha(): Promise<any>;
|
|
26
108
|
loadGoogleMapApi(): Promise<any>;
|
|
@@ -35,8 +35,13 @@ var isArray_1 = __importDefault(require("lodash-es/isArray"));
|
|
|
35
35
|
*/
|
|
36
36
|
var ResourceComponent = /** @class */ (function () {
|
|
37
37
|
function ResourceComponent(components, config) {
|
|
38
|
+
this.RESOURCE_GOOGLE_MAP_API = '//maps.googleapis.com/maps/api/js';
|
|
39
|
+
this.RESOURCE_YANDEX_MAP_API = 'https://api-maps.yandex.ru/2.1/';
|
|
40
|
+
this.RESOURCE_TWITTER_WIDGET = 'https://platform.twitter.com/widgets.js';
|
|
41
|
+
this.RESOURCE_GEETEST_API = '//static.geetest.com/static/tools/gt.js';
|
|
42
|
+
this.RESOURCE_GOOGLE_CAPTCHA = 'https://www.google.com/recaptcha/api.js';
|
|
38
43
|
this.googleApiKey = config.googleApiKey || '';
|
|
39
|
-
this.googleCaptchaSiteKey =
|
|
44
|
+
this.googleCaptchaSiteKey = process.env.APP_RECAPTCHA_SITE_KEY || '';
|
|
40
45
|
this.language = config.language || '';
|
|
41
46
|
this._callbacks = {};
|
|
42
47
|
this._components = components;
|
|
@@ -45,7 +50,7 @@ var ResourceComponent = /** @class */ (function () {
|
|
|
45
50
|
if (window.grecaptcha) {
|
|
46
51
|
return Promise.resolve(window.grecaptcha);
|
|
47
52
|
}
|
|
48
|
-
return this.loadScript(
|
|
53
|
+
return this.loadScript(this.RESOURCE_GOOGLE_CAPTCHA, { render: this.googleCaptchaSiteKey }, function () { return window.grecaptcha; });
|
|
49
54
|
};
|
|
50
55
|
ResourceComponent.prototype.loadGoogleMapApi = function () {
|
|
51
56
|
var locale = this._components.locale;
|
|
@@ -54,7 +59,7 @@ var ResourceComponent = /** @class */ (function () {
|
|
|
54
59
|
// @ts-ignore
|
|
55
60
|
return Promise.resolve(window.google.maps);
|
|
56
61
|
}
|
|
57
|
-
return this.loadScript(
|
|
62
|
+
return this.loadScript(this.RESOURCE_GOOGLE_MAP_API, {
|
|
58
63
|
libraries: 'places,geometry',
|
|
59
64
|
key: this.googleApiKey,
|
|
60
65
|
language: this.language || locale.language
|
|
@@ -72,7 +77,7 @@ var ResourceComponent = /** @class */ (function () {
|
|
|
72
77
|
return window.ymaps.ready(function () { return resolve(window.ymaps); });
|
|
73
78
|
});
|
|
74
79
|
}
|
|
75
|
-
return this.loadScript(
|
|
80
|
+
return this.loadScript(this.RESOURCE_YANDEX_MAP_API, {
|
|
76
81
|
lang: this.language || locale.language
|
|
77
82
|
},
|
|
78
83
|
// @ts-ignore
|
|
@@ -84,7 +89,7 @@ var ResourceComponent = /** @class */ (function () {
|
|
|
84
89
|
// @ts-ignore
|
|
85
90
|
return Promise.resolve(window.twttr);
|
|
86
91
|
}
|
|
87
|
-
return this.loadScript(
|
|
92
|
+
return this.loadScript(this.RESOURCE_TWITTER_WIDGET, {},
|
|
88
93
|
// @ts-ignore
|
|
89
94
|
function () { return new Promise(function (resolve) { return window.twttr.ready(function () { return resolve(window.twttr); }); }); });
|
|
90
95
|
};
|
|
@@ -94,7 +99,7 @@ var ResourceComponent = /** @class */ (function () {
|
|
|
94
99
|
// @ts-ignore
|
|
95
100
|
return Promise.resolve(window.initGeetest);
|
|
96
101
|
}
|
|
97
|
-
return this.loadScript(
|
|
102
|
+
return this.loadScript(this.RESOURCE_GEETEST_API + '?_t=' + new Date().getTime(), {},
|
|
98
103
|
// @ts-ignore
|
|
99
104
|
function () { return window.initGeetest; });
|
|
100
105
|
};
|
|
@@ -147,11 +152,6 @@ var ResourceComponent = /** @class */ (function () {
|
|
|
147
152
|
};
|
|
148
153
|
return new Promise(checker);
|
|
149
154
|
};
|
|
150
|
-
ResourceComponent.RESOURCE_GOOGLE_MAP_API = '//maps.googleapis.com/maps/api/js';
|
|
151
|
-
ResourceComponent.RESOURCE_YANDEX_MAP_API = 'https://api-maps.yandex.ru/2.1/';
|
|
152
|
-
ResourceComponent.RESOURCE_TWITTER_WIDGET = 'https://platform.twitter.com/widgets.js';
|
|
153
|
-
ResourceComponent.RESOURCE_GEETEST_API = '//static.geetest.com/static/tools/gt.js';
|
|
154
|
-
ResourceComponent.RESOURCE_GOOGLE_CAPTCHA = 'https://www.google.com/recaptcha/api.js';
|
|
155
155
|
return ResourceComponent;
|
|
156
156
|
}());
|
|
157
157
|
exports["default"] = ResourceComponent;
|
package/hooks/index.d.ts
CHANGED
|
@@ -17,4 +17,5 @@ import useScreen from './useScreen';
|
|
|
17
17
|
import useSelector from './useSelector';
|
|
18
18
|
import useSsr from './useSsr';
|
|
19
19
|
import useUniqueId from './useUniqueId';
|
|
20
|
-
|
|
20
|
+
import { useTheme } from './useTheme';
|
|
21
|
+
export { useAbsolutePositioning, useAddressBar, useApplication, useBem, useComponents, useDataProvider, useDataSelect, useDispatch, useFetch, useFile, useForm, useInitial, useLayout, useList, useModel, useScreen, useSelector, useSsr, useUniqueId, useTheme, };
|
package/hooks/index.js
CHANGED
|
@@ -3,7 +3,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
|
|
|
3
3
|
return (mod && mod.__esModule) ? mod : { "default": mod };
|
|
4
4
|
};
|
|
5
5
|
exports.__esModule = true;
|
|
6
|
-
exports.useUniqueId = exports.useSsr = exports.useSelector = exports.useScreen = exports.useModel = exports.useList = exports.useLayout = exports.useInitial = exports.useForm = exports.useFile = exports.useFetch = exports.useDispatch = exports.useDataSelect = exports.useDataProvider = exports.useComponents = exports.useBem = exports.useApplication = exports.useAddressBar = exports.useAbsolutePositioning = void 0;
|
|
6
|
+
exports.useTheme = exports.useUniqueId = exports.useSsr = exports.useSelector = exports.useScreen = exports.useModel = exports.useList = exports.useLayout = exports.useInitial = exports.useForm = exports.useFile = exports.useFetch = exports.useDispatch = exports.useDataSelect = exports.useDataProvider = exports.useComponents = exports.useBem = exports.useApplication = exports.useAddressBar = exports.useAbsolutePositioning = void 0;
|
|
7
7
|
var useAbsolutePositioning_1 = __importDefault(require("./useAbsolutePositioning"));
|
|
8
8
|
exports.useAbsolutePositioning = useAbsolutePositioning_1["default"];
|
|
9
9
|
var useAddressBar_1 = __importDefault(require("./useAddressBar"));
|
|
@@ -42,3 +42,5 @@ var useSsr_1 = __importDefault(require("./useSsr"));
|
|
|
42
42
|
exports.useSsr = useSsr_1["default"];
|
|
43
43
|
var useUniqueId_1 = __importDefault(require("./useUniqueId"));
|
|
44
44
|
exports.useUniqueId = useUniqueId_1["default"];
|
|
45
|
+
var useTheme_1 = require("./useTheme");
|
|
46
|
+
exports.useTheme = useTheme_1.useTheme;
|
package/hooks/useAddressBar.d.ts
CHANGED
|
@@ -2,8 +2,19 @@
|
|
|
2
2
|
import { Model } from '../components/MetaComponent';
|
|
3
3
|
export type ListControlPosition = 'top' | 'bottom' | 'both' | string;
|
|
4
4
|
export interface IAddressBarConfig {
|
|
5
|
+
/**
|
|
6
|
+
* Флаг для управления включением синхронизации с addressBar
|
|
7
|
+
* @example true
|
|
8
|
+
*/
|
|
5
9
|
enable?: boolean;
|
|
10
|
+
/**
|
|
11
|
+
* Использовать ли #
|
|
12
|
+
* @example false
|
|
13
|
+
*/
|
|
6
14
|
useHash?: boolean;
|
|
15
|
+
/**
|
|
16
|
+
* Модель
|
|
17
|
+
*/
|
|
7
18
|
model?: Model;
|
|
8
19
|
}
|
|
9
20
|
export interface IAddressBarOutput {
|
package/hooks/useDataSelect.d.ts
CHANGED
|
@@ -0,0 +1,8 @@
|
|
|
1
|
+
import React from 'react';
|
|
2
|
+
export declare const LIGHT_THEME = "light";
|
|
3
|
+
export declare const DARK_THEME = "dark";
|
|
4
|
+
export declare const useTheme: (themes?: string[], themeStorageKey?: string) => {
|
|
5
|
+
theme: any;
|
|
6
|
+
setTheme: React.Dispatch<any>;
|
|
7
|
+
toggleTheme: () => void;
|
|
8
|
+
};
|
|
@@ -0,0 +1,40 @@
|
|
|
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.useTheme = exports.DARK_THEME = exports.LIGHT_THEME = void 0;
|
|
7
|
+
var react_1 = __importDefault(require("react"));
|
|
8
|
+
var useComponents_1 = __importDefault(require("./useComponents"));
|
|
9
|
+
exports.LIGHT_THEME = 'light';
|
|
10
|
+
exports.DARK_THEME = 'dark';
|
|
11
|
+
var DEFAULT_THEMES = [
|
|
12
|
+
exports.LIGHT_THEME,
|
|
13
|
+
exports.DARK_THEME,
|
|
14
|
+
];
|
|
15
|
+
var DEFAULT_THEME_STORAGE_KEY = 'theme';
|
|
16
|
+
var useTheme = function (themes, themeStorageKey) {
|
|
17
|
+
if (themes === void 0) { themes = DEFAULT_THEMES; }
|
|
18
|
+
if (themeStorageKey === void 0) { themeStorageKey = DEFAULT_THEME_STORAGE_KEY; }
|
|
19
|
+
var clientStorage = (0, useComponents_1["default"])().clientStorage;
|
|
20
|
+
var _a = react_1["default"].useState(clientStorage.get(themeStorageKey) || themes[0]), theme = _a[0], setTheme = _a[1];
|
|
21
|
+
var toggleTheme = react_1["default"].useCallback(function () {
|
|
22
|
+
var themesExpectedCount = 2;
|
|
23
|
+
if (themes.length !== themesExpectedCount) {
|
|
24
|
+
throw new Error('toggleTheme callback can only be used if the number of themes is two');
|
|
25
|
+
}
|
|
26
|
+
var lightTheme = themes[0];
|
|
27
|
+
var darkTheme = themes[1];
|
|
28
|
+
setTheme(theme === lightTheme ? darkTheme : lightTheme);
|
|
29
|
+
}, [themes, theme]);
|
|
30
|
+
react_1["default"].useEffect(function () {
|
|
31
|
+
document.querySelector('html').setAttribute('data-theme', theme);
|
|
32
|
+
clientStorage.set(themeStorageKey, theme);
|
|
33
|
+
}, [theme, clientStorage, themeStorageKey]);
|
|
34
|
+
return {
|
|
35
|
+
theme: theme,
|
|
36
|
+
setTheme: setTheme,
|
|
37
|
+
toggleTheme: toggleTheme
|
|
38
|
+
};
|
|
39
|
+
};
|
|
40
|
+
exports.useTheme = useTheme;
|
package/package.json
CHANGED
|
@@ -1,5 +1,6 @@
|
|
|
1
1
|
import * as React from 'react';
|
|
2
2
|
import { PropsWithChildren } from 'react';
|
|
3
|
+
import { IResourceComponent } from '../components/ResourceComponent';
|
|
3
4
|
declare global {
|
|
4
5
|
interface Window {
|
|
5
6
|
SteroidsComponents: IComponents;
|
|
@@ -13,7 +14,7 @@ export interface IComponents {
|
|
|
13
14
|
locale?: any;
|
|
14
15
|
store?: any;
|
|
15
16
|
ui?: any;
|
|
16
|
-
resource?:
|
|
17
|
+
resource?: IResourceComponent;
|
|
17
18
|
ws?: any;
|
|
18
19
|
pushNotification?: any;
|
|
19
20
|
meta?: any;
|
|
@@ -1,6 +1,14 @@
|
|
|
1
1
|
import * as React from 'react';
|
|
2
2
|
export interface IAccordionIcon {
|
|
3
|
+
/**
|
|
4
|
+
* Пользовательская иконка открытия
|
|
5
|
+
* @example 'user
|
|
6
|
+
*/
|
|
3
7
|
open: React.ReactElement | string;
|
|
8
|
+
/**
|
|
9
|
+
* Пользовательская иконка закрытия
|
|
10
|
+
* @example 'user'
|
|
11
|
+
*/
|
|
4
12
|
close: React.ReactElement | string;
|
|
5
13
|
}
|
|
6
14
|
export interface IAccordionProps extends IUiComponent {
|
|
@@ -2,6 +2,7 @@
|
|
|
2
2
|
import { IButtonProps } from 'src/ui/form/Button/Button';
|
|
3
3
|
import { ILinkProps } from 'src/ui/nav/Link/Link';
|
|
4
4
|
import { IAvatarProps } from '../Avatar/Avatar';
|
|
5
|
+
import { IMenuProps } from '../Menu/Menu';
|
|
5
6
|
export interface ICardHeader {
|
|
6
7
|
/**
|
|
7
8
|
* Параметры для аватара
|
|
@@ -13,10 +14,9 @@ export interface ICardHeader {
|
|
|
13
14
|
*/
|
|
14
15
|
avatar?: IAvatarProps;
|
|
15
16
|
/**
|
|
16
|
-
*
|
|
17
|
-
* @example true
|
|
17
|
+
* Свойства для компонента <Menu/>
|
|
18
18
|
*/
|
|
19
|
-
menu?:
|
|
19
|
+
menu?: IMenuProps;
|
|
20
20
|
/**
|
|
21
21
|
* Текст шапки (заголовок)
|
|
22
22
|
* @example 'Steroids.js head'
|
|
@@ -52,7 +52,20 @@ export interface ICardProps extends IUiComponent {
|
|
|
52
52
|
* },
|
|
53
53
|
* head: 'Header',
|
|
54
54
|
* subhead: 'Subhead',
|
|
55
|
-
* menu:
|
|
55
|
+
* menu: {
|
|
56
|
+
* dropDownProps: {
|
|
57
|
+
position: 'bottom',
|
|
58
|
+
closeMode: 'click-any',
|
|
59
|
+
},
|
|
60
|
+
items: [
|
|
61
|
+
{label: 'Вырезать', icon: 'cut', onClick: voidFunction},
|
|
62
|
+
{label: 'Копировать', icon: 'copy', hasBorder: true, onClick: voidFunction},
|
|
63
|
+
{label: 'Показать историю изменений', hasBorder: true, onClick: voidFunction},
|
|
64
|
+
{label: 'Редактировать', icon: 'edit', onClick: voidFunction},
|
|
65
|
+
{label: 'Удалить', icon: 'trash', onClick: voidFunction},
|
|
66
|
+
],
|
|
67
|
+
icon: 'menu_dots',
|
|
68
|
+
* },
|
|
56
69
|
*/
|
|
57
70
|
header?: ICardHeader;
|
|
58
71
|
/**
|
package/ui/crud/Crud/Crud.d.ts
CHANGED
|
@@ -6,16 +6,54 @@ import { IFormProps } from '../../form/Form/Form';
|
|
|
6
6
|
import { IGridProps } from '../../list/Grid/Grid';
|
|
7
7
|
import { IControlItem } from '../../nav/Controls/Controls';
|
|
8
8
|
export interface ICrudItem extends Omit<IControlItem, 'visible' | 'confirm' | 'onClick'> {
|
|
9
|
+
/**
|
|
10
|
+
* Заголовок
|
|
11
|
+
* @example 'Title'
|
|
12
|
+
*/
|
|
9
13
|
title?: string;
|
|
14
|
+
/**
|
|
15
|
+
* Название для action
|
|
16
|
+
* @example
|
|
17
|
+
*/
|
|
10
18
|
actionName?: string;
|
|
19
|
+
/**
|
|
20
|
+
* Обязателен ли Personal Key
|
|
21
|
+
* @example true
|
|
22
|
+
*/
|
|
11
23
|
pkRequired?: boolean;
|
|
24
|
+
/**
|
|
25
|
+
* Режим отображения
|
|
26
|
+
* @example 'modal'
|
|
27
|
+
*/
|
|
12
28
|
mode?: 'page' | 'modal';
|
|
29
|
+
/**
|
|
30
|
+
* Компонент
|
|
31
|
+
*/
|
|
13
32
|
component?: any;
|
|
33
|
+
/**
|
|
34
|
+
* Свойства компонента
|
|
35
|
+
*/
|
|
14
36
|
componentProps?: any;
|
|
37
|
+
/**
|
|
38
|
+
* Коллекция Controls
|
|
39
|
+
*/
|
|
15
40
|
controlsInclude?: string[];
|
|
41
|
+
/**
|
|
42
|
+
* Коллекция исключенных Controls
|
|
43
|
+
*/
|
|
16
44
|
controlsExclude?: string[];
|
|
45
|
+
/**
|
|
46
|
+
* Управление отображением
|
|
47
|
+
* @example true
|
|
48
|
+
*/
|
|
17
49
|
visible?: boolean | ((item: any, crudItem: ICrudItem, isGrid: boolean) => boolean);
|
|
50
|
+
/**
|
|
51
|
+
* Сообщение о подтверждении
|
|
52
|
+
*/
|
|
18
53
|
confirm?: string | ((e: any, props: ICrudClickProps) => any);
|
|
54
|
+
/**
|
|
55
|
+
* Функция обратного вызова, срабатывает после нажатия
|
|
56
|
+
*/
|
|
19
57
|
onClick?: (e: Event | React.MouseEvent, props: ICrudClickProps) => any;
|
|
20
58
|
}
|
|
21
59
|
export interface ICrudClickProps {
|
|
@@ -1,8 +1,24 @@
|
|
|
1
1
|
import * as React from 'react';
|
|
2
2
|
export interface IButtonBadge {
|
|
3
|
+
/**
|
|
4
|
+
* Включить/выключить badge
|
|
5
|
+
* @example true
|
|
6
|
+
*/
|
|
3
7
|
enable?: boolean;
|
|
8
|
+
/**
|
|
9
|
+
* Значение badge
|
|
10
|
+
* @example 'Badge'
|
|
11
|
+
*/
|
|
4
12
|
value?: number;
|
|
13
|
+
/**
|
|
14
|
+
* Цвет
|
|
15
|
+
* @example 'secondary'
|
|
16
|
+
*/
|
|
5
17
|
color?: ColorName;
|
|
18
|
+
/**
|
|
19
|
+
* Дополнительный CSS-класс для элемента отображения
|
|
20
|
+
* @example bem.element('additional-class')
|
|
21
|
+
*/
|
|
6
22
|
className?: CssClassName;
|
|
7
23
|
}
|
|
8
24
|
/**
|
|
@@ -11,9 +11,23 @@ export declare const IMG_CONTENT_TYPE = "img";
|
|
|
11
11
|
export type ContentType = 'checkbox' | 'radio' | 'icon' | 'img';
|
|
12
12
|
export type ItemSwitchType = ContentType | 'group' | string;
|
|
13
13
|
export interface IDropDownFieldItem {
|
|
14
|
+
/**
|
|
15
|
+
* Идентификатор элемента
|
|
16
|
+
*/
|
|
14
17
|
id: number | string | boolean;
|
|
18
|
+
/**
|
|
19
|
+
* Отображаемое название
|
|
20
|
+
*/
|
|
15
21
|
label: string;
|
|
22
|
+
/**
|
|
23
|
+
* Тип контента для элемента
|
|
24
|
+
* @example 'img'
|
|
25
|
+
*/
|
|
16
26
|
contentType?: ContentType | string;
|
|
27
|
+
/**
|
|
28
|
+
* Источник контента
|
|
29
|
+
* @example 'https://steroids.kozhindev.com/images/icon.png'
|
|
30
|
+
*/
|
|
17
31
|
contentSrc?: string | React.ReactElement;
|
|
18
32
|
}
|
|
19
33
|
export interface IDropDownFieldItemViewProps extends IAccordionItemViewProps, Pick<IDropDownFieldProps, 'itemsContent'> {
|
|
@@ -58,7 +58,19 @@ exports.MASK_PRESETS = {
|
|
|
58
58
|
mode: 'dd/mm/yyyy'
|
|
59
59
|
}),
|
|
60
60
|
phone: {
|
|
61
|
-
mask: [
|
|
61
|
+
mask: __spreadArray(__spreadArray(__spreadArray(__spreadArray(__spreadArray(__spreadArray(__spreadArray([
|
|
62
|
+
'+',
|
|
63
|
+
'7',
|
|
64
|
+
' ',
|
|
65
|
+
'('
|
|
66
|
+
], Array(3).fill(/\d/), true), [
|
|
67
|
+
')',
|
|
68
|
+
' '
|
|
69
|
+
], false), Array(3).fill(/\d/), true), [
|
|
70
|
+
'-'
|
|
71
|
+
], false), Array(2).fill(/\d/), true), [
|
|
72
|
+
' '
|
|
73
|
+
], false), Array(2).fill(/\d/), true)
|
|
62
74
|
},
|
|
63
75
|
card: {
|
|
64
76
|
mask: __spreadArray(__spreadArray(__spreadArray(__spreadArray(__spreadArray(__spreadArray(__spreadArray([], Array(4).fill(/\d/), true), [
|
|
@@ -23,6 +23,12 @@ export interface IRateFieldProps extends IFieldWrapperInputProps, IUiComponent {
|
|
|
23
23
|
* @example false
|
|
24
24
|
*/
|
|
25
25
|
allowClear?: boolean;
|
|
26
|
+
/**
|
|
27
|
+
* Значок (бэйдж) с заголовком.
|
|
28
|
+
*/
|
|
29
|
+
badge?: {
|
|
30
|
+
title: string;
|
|
31
|
+
};
|
|
26
32
|
inputProps?: {
|
|
27
33
|
[key: string]: any;
|
|
28
34
|
};
|
|
@@ -1,3 +1,4 @@
|
|
|
1
|
+
/// <reference types="react" />
|
|
1
2
|
import { IFieldWrapperInputProps, IFieldWrapperOutputProps } from '../Field/fieldWrapper';
|
|
2
3
|
/**
|
|
3
4
|
* ReCaptchaField
|
|
@@ -11,9 +12,74 @@ import { IFieldWrapperInputProps, IFieldWrapperOutputProps } from '../Field/fiel
|
|
|
11
12
|
* Сам компонент отображает ссылки на политику конфиденциальности и условия использования сервисов Google.
|
|
12
13
|
*/
|
|
13
14
|
export interface IReCaptchaFieldProps extends IFieldWrapperInputProps, IUiComponent {
|
|
15
|
+
/**
|
|
16
|
+
* Обработчик события изменения ReCaptcha.
|
|
17
|
+
*/
|
|
18
|
+
onChange?: VoidFunction;
|
|
19
|
+
/**
|
|
20
|
+
* Функция, вызываемая после загрузки асинхронного скрипта.
|
|
21
|
+
*/
|
|
22
|
+
asyncScriptOnLoad?: () => void;
|
|
23
|
+
/**
|
|
24
|
+
* Положение значка ReCaptcha. Может быть 'bottomright' (внизу справа), 'bottomleft' (внизу слева) или 'inline' (встроенный).
|
|
25
|
+
*/
|
|
26
|
+
badge?: 'bottomright' | 'bottomleft' | 'inline';
|
|
27
|
+
/**
|
|
28
|
+
* Тип ReCaptcha. Может быть 'image' (изображение) или 'audio' (аудио).
|
|
29
|
+
*/
|
|
30
|
+
type?: 'image' | 'audio';
|
|
31
|
+
/**
|
|
32
|
+
* Значение tabindex для ReCaptcha.
|
|
33
|
+
*/
|
|
34
|
+
tabindex?: number;
|
|
35
|
+
/**
|
|
36
|
+
* Защищенный токен для ReCaptcha.
|
|
37
|
+
*/
|
|
38
|
+
stoken?: string;
|
|
39
|
+
/**
|
|
40
|
+
* Обработчик события истечения срока действия ReCaptcha.
|
|
41
|
+
*/
|
|
42
|
+
onExpired?: VoidFunction;
|
|
43
|
+
/**
|
|
44
|
+
* Обработчик события ошибки ReCaptcha.
|
|
45
|
+
*/
|
|
46
|
+
onErrored?: VoidFunction;
|
|
47
|
+
/**
|
|
48
|
+
* Флаг, указывающий на изоляцию ReCaptcha.
|
|
49
|
+
*/
|
|
50
|
+
isolated?: boolean;
|
|
51
|
+
/**
|
|
52
|
+
* Языковой код для ReCaptcha.
|
|
53
|
+
*/
|
|
54
|
+
hl?: string;
|
|
55
|
+
/**
|
|
56
|
+
* Ссылка на ref-объект React для ReCaptcha.
|
|
57
|
+
*/
|
|
58
|
+
ref?: React.RefObject<any>;
|
|
59
|
+
/**
|
|
60
|
+
* Ключ сайта ReCaptcha. По умолчанию process.env.APP_RECAPTCHA_SITE_KEY
|
|
61
|
+
*/
|
|
62
|
+
sitekey?: string;
|
|
63
|
+
/**
|
|
64
|
+
* Дополнительные свойства, которые могут быть указаны.
|
|
65
|
+
*/
|
|
14
66
|
[key: string]: any;
|
|
15
67
|
}
|
|
16
68
|
export interface IReCaptchaFieldViewProps extends IReCaptchaFieldProps, IFieldWrapperOutputProps {
|
|
69
|
+
sitekey: string;
|
|
70
|
+
recaptchaOptions: {
|
|
71
|
+
onChange: VoidFunction;
|
|
72
|
+
asyncScriptOnLoad: () => void;
|
|
73
|
+
badge: 'bottomright' | 'bottomleft' | 'inline';
|
|
74
|
+
type: 'image' | 'audio';
|
|
75
|
+
tabindex: number;
|
|
76
|
+
stoken: string;
|
|
77
|
+
onExpired: VoidFunction;
|
|
78
|
+
onErrored: VoidFunction;
|
|
79
|
+
isolated: boolean;
|
|
80
|
+
hl: string;
|
|
81
|
+
ref: React.RefObject<any>;
|
|
82
|
+
};
|
|
17
83
|
}
|
|
18
84
|
declare const _default: import("../Field/fieldWrapper").FieldWrapperComponent<IReCaptchaFieldProps>;
|
|
19
85
|
export default _default;
|
|
@@ -14,10 +14,31 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
|
|
|
14
14
|
return (mod && mod.__esModule) ? mod : { "default": mod };
|
|
15
15
|
};
|
|
16
16
|
exports.__esModule = true;
|
|
17
|
+
/* eslint-disable max-len */
|
|
18
|
+
var react_1 = require("react");
|
|
17
19
|
var hooks_1 = require("../../../hooks");
|
|
18
20
|
var fieldWrapper_1 = __importDefault(require("../Field/fieldWrapper"));
|
|
19
21
|
function ReCaptchaField(props) {
|
|
20
22
|
var components = (0, hooks_1.useComponents)();
|
|
21
|
-
|
|
23
|
+
var onChange = (0, react_1.useCallback)(function () {
|
|
24
|
+
if (props.onChange) {
|
|
25
|
+
props.onChange();
|
|
26
|
+
}
|
|
27
|
+
}, [props]);
|
|
28
|
+
var recaptchaOptions = (0, react_1.useMemo)(function () { return ({
|
|
29
|
+
onChange: onChange,
|
|
30
|
+
asyncScriptOnLoad: props.asyncScriptOnLoad,
|
|
31
|
+
badge: props.badge,
|
|
32
|
+
type: props.type,
|
|
33
|
+
tabindex: props.tabindex,
|
|
34
|
+
stoken: props.stoken,
|
|
35
|
+
onExpired: props.onExpired,
|
|
36
|
+
onErrored: props.onErrored,
|
|
37
|
+
isolated: props.isolated,
|
|
38
|
+
hl: props.hl,
|
|
39
|
+
ref: props.ref,
|
|
40
|
+
sitekey: props.sitekey || components.resource.googleCaptchaSiteKey
|
|
41
|
+
}); }, [components.resource.googleCaptchaSiteKey, onChange, props.asyncScriptOnLoad, props.badge, props.hl, props.isolated, props.onErrored, props.onExpired, props.ref, props.sitekey, props.stoken, props.tabindex, props.type]);
|
|
42
|
+
return components.ui.renderView(props.view || 'form.ReCaptchaFieldView', __assign(__assign({}, props), { recaptchaOptions: recaptchaOptions }));
|
|
22
43
|
}
|
|
23
44
|
exports["default"] = (0, fieldWrapper_1["default"])('ReCaptchaField', ReCaptchaField);
|
|
@@ -14,6 +14,9 @@ import * as React from 'react';
|
|
|
14
14
|
* ```
|
|
15
15
|
*/
|
|
16
16
|
interface INotificationItem {
|
|
17
|
+
/**
|
|
18
|
+
* Идентификатор уведомления
|
|
19
|
+
*/
|
|
17
20
|
id?: number;
|
|
18
21
|
/**
|
|
19
22
|
* Цвет всплывающего уведомления
|
|
@@ -28,14 +31,37 @@ interface INotificationItem {
|
|
|
28
31
|
isClosing?: boolean;
|
|
29
32
|
}
|
|
30
33
|
export interface INotificationsProps {
|
|
34
|
+
/**
|
|
35
|
+
* Исходные уведомления
|
|
36
|
+
*/
|
|
31
37
|
initialFlashes?: {
|
|
32
38
|
[key: string]: string | any;
|
|
33
39
|
};
|
|
40
|
+
/**
|
|
41
|
+
* Коллекция уведомлений
|
|
42
|
+
*/
|
|
34
43
|
notifications?: INotificationItem[];
|
|
44
|
+
/**
|
|
45
|
+
* Задержка перед закрытием
|
|
46
|
+
*/
|
|
35
47
|
closeTimeoutMs?: number;
|
|
48
|
+
/**
|
|
49
|
+
* Дополнительный CSS-класс для элемента отображения
|
|
50
|
+
*/
|
|
36
51
|
className?: CssClassName;
|
|
52
|
+
/**
|
|
53
|
+
* Переопределение view React компонента для кастомизации отображения
|
|
54
|
+
* @example MyCustomView
|
|
55
|
+
*/
|
|
37
56
|
view?: CustomView;
|
|
57
|
+
/**
|
|
58
|
+
* Переопределение view React компонента для кастомизации отображения элемента
|
|
59
|
+
* @example MyCustomView
|
|
60
|
+
*/
|
|
38
61
|
itemView?: any;
|
|
62
|
+
/**
|
|
63
|
+
* Позиционирование элемента уведомления
|
|
64
|
+
*/
|
|
39
65
|
position?: string;
|
|
40
66
|
[key: string]: any;
|
|
41
67
|
}
|
|
@@ -5,14 +5,35 @@
|
|
|
5
5
|
*/
|
|
6
6
|
type TooltipPosition = 'top' | 'topLeft' | 'topRight' | 'bottom' | 'bottomLeft' | 'bottomRight' | 'left' | 'leftTop' | 'leftBottom' | 'right' | 'rightTop' | 'rightBottom' | string;
|
|
7
7
|
export interface ITooltipArrowPosition {
|
|
8
|
+
/**
|
|
9
|
+
* Позиция стрелки слева
|
|
10
|
+
*/
|
|
8
11
|
left?: number | string;
|
|
12
|
+
/**
|
|
13
|
+
* Позиция стрелки справа
|
|
14
|
+
*/
|
|
9
15
|
right?: number | string;
|
|
16
|
+
/**
|
|
17
|
+
* Позиция стрелки сверху
|
|
18
|
+
*/
|
|
10
19
|
top?: number | string;
|
|
20
|
+
/**
|
|
21
|
+
* Позиция стрелки снизу
|
|
22
|
+
*/
|
|
11
23
|
bottom?: number | string;
|
|
12
24
|
}
|
|
13
25
|
export interface ITooltipStylePosition {
|
|
26
|
+
/**
|
|
27
|
+
* Позиция Tooltip слева
|
|
28
|
+
*/
|
|
14
29
|
left: 'unset' | number;
|
|
30
|
+
/**
|
|
31
|
+
* Позиция Tooltip справа
|
|
32
|
+
*/
|
|
15
33
|
right: 'unset' | number;
|
|
34
|
+
/**
|
|
35
|
+
* Позиция Tooltip сверху
|
|
36
|
+
*/
|
|
16
37
|
top: 'unset' | number;
|
|
17
38
|
}
|
|
18
39
|
export interface ITooltipProps {
|