@steroidsjs/core 3.0.0-beta.51 → 3.0.0-beta.53

package/components/ResourceComponent.d.ts

@@ -6,21 +6,103 @@ declare global {
         };
     }
 }
+export interface IResourceComponent {
+    /**
+    * Свойство для хранения обратных вызовов.
+    */
+    _callbacks: any;
+    /**
+     * Свойство для хранения компонентов.
+     */
+    _components: any;
+    /**
+     * API-ключ Google для использования Google Maps и других сервисов.
+     */
+    googleApiKey: string;
+    /**
+     * Ключ сайта Google reCAPTCHA.
+     */
+    googleCaptchaSiteKey: string;
+    /**
+     * Языковой код, используемый для загрузки ресурсов.
+     */
+    language: string;
+    /**
+     * URL для загрузки Google Maps API.
+     */
+    readonly RESOURCE_GOOGLE_MAP_API: string;
+    /**
+     * URL для загрузки Yandex Maps API.
+     */
+    readonly RESOURCE_YANDEX_MAP_API: string;
+    /**
+     * URL для загрузки Twitter виджетов.
+     */
+    readonly RESOURCE_TWITTER_WIDGET: string;
+    /**
+     * URL для загрузки Geetest.
+     */
+    readonly RESOURCE_GEETEST_API: string;
+    /**
+     * URL для загрузки Google reCAPTCHA.
+     */
+    readonly RESOURCE_GOOGLE_CAPTCHA: string;
+    /**
+     * Метод для загрузки Google reCAPTCHA.
+     * @returns Промис, который разрешается с объектом window.grecaptcha.
+     */
+    loadGoogleCaptcha(): Promise<any>;
+    /**
+     * Метод для загрузки Google Maps API.
+     * @returns Промис, который разрешается с объектом window.google.maps.
+     */
+    loadGoogleMapApi(): Promise<any>;
+    /**
+     * Метод для загрузки Yandex Maps API.
+     * @returns Промис, который разрешается с объектом window.ymaps.
+     */
+    loadYandexMap(): Promise<any>;
+    /**
+     * Метод для загрузки Twitter виджетов.
+     * @returns Промис, который разрешается с объектом window.twttr.
+     */
+    loadTwitterWidget(): Promise<any>;
+    /**
+     * Метод для загрузки Geetest.
+     * @returns Промис, который разрешается с объектом window.initGeetest.
+     */
+    loadGeetest(): Promise<any>;
+    /**
+     * Метод для загрузки скрипта по указанному URL.
+     * @param url URL скрипта для загрузки.
+     * @param params Параметры запроса для URL скрипта.
+     * @param firstResolver Функция, которая возвращает объект, разрешающий промис.
+     * @returns Промис, который разрешается с результатом первого разрешенного промиса.
+     */
+    loadScript(url: string, params: any, firstResolver: () => any): Promise<any>;
+    /**
+     * Метод для ожидания выполнения определенного условия.
+     * @param condition Условие, которое должно быть выполнено.
+     * @param timeout (Необязательный) Таймаут ожидания в миллисекундах (по умолчанию 5000 мс).
+     * @returns Промис, который разрешается с результатом выполнения условия.
+     */
+    wait(condition: () => boolean, timeout?: number): Promise<any>;
+}
 /**
  * Resource Component
  * Компонент для подгрузки внешних API: Google Maps, Yandex Maps, Twitter, ...
  */
-export default class ResourceComponent {
+export default class ResourceComponent implements IResourceComponent {
     _callbacks: any;
     _components: any;
     googleApiKey: string;
     googleCaptchaSiteKey: string;
     language: string;
-    static RESOURCE_GOOGLE_MAP_API: string;
-    static RESOURCE_YANDEX_MAP_API: string;
-    static RESOURCE_TWITTER_WIDGET: string;
-    static RESOURCE_GEETEST_API: string;
-    static RESOURCE_GOOGLE_CAPTCHA: string;
+    readonly RESOURCE_GOOGLE_MAP_API = "//maps.googleapis.com/maps/api/js";
+    readonly RESOURCE_YANDEX_MAP_API = "https://api-maps.yandex.ru/2.1/";
+    readonly RESOURCE_TWITTER_WIDGET = "https://platform.twitter.com/widgets.js";
+    readonly RESOURCE_GEETEST_API = "//static.geetest.com/static/tools/gt.js";
+    readonly RESOURCE_GOOGLE_CAPTCHA = "https://www.google.com/recaptcha/api.js";
     constructor(components: any, config: any);
     loadGoogleCaptcha(): Promise<any>;
     loadGoogleMapApi(): Promise<any>;

package/components/ResourceComponent.js

@@ -35,8 +35,13 @@ var isArray_1 = __importDefault(require("lodash-es/isArray"));
  */
 var ResourceComponent = /** @class */ (function () {
     function ResourceComponent(components, config) {
+        this.RESOURCE_GOOGLE_MAP_API = '//maps.googleapis.com/maps/api/js';
+        this.RESOURCE_YANDEX_MAP_API = 'https://api-maps.yandex.ru/2.1/';
+        this.RESOURCE_TWITTER_WIDGET = 'https://platform.twitter.com/widgets.js';
+        this.RESOURCE_GEETEST_API = '//static.geetest.com/static/tools/gt.js';
+        this.RESOURCE_GOOGLE_CAPTCHA = 'https://www.google.com/recaptcha/api.js';
         this.googleApiKey = config.googleApiKey || '';
-        this.googleCaptchaSiteKey = config.googleCaptchaSiteKey || '';
+        this.googleCaptchaSiteKey = process.env.APP_RECAPTCHA_SITE_KEY || '';
         this.language = config.language || '';
         this._callbacks = {};
         this._components = components;
@@ -45,7 +50,7 @@ var ResourceComponent = /** @class */ (function () {
         if (window.grecaptcha) {
             return Promise.resolve(window.grecaptcha);
         }
-        return this.loadScript(ResourceComponent.RESOURCE_GOOGLE_CAPTCHA, { render: this.googleCaptchaSiteKey }, function () { return window.grecaptcha; });
+        return this.loadScript(this.RESOURCE_GOOGLE_CAPTCHA, { render: this.googleCaptchaSiteKey }, function () { return window.grecaptcha; });
     };
     ResourceComponent.prototype.loadGoogleMapApi = function () {
         var locale = this._components.locale;
@@ -54,7 +59,7 @@ var ResourceComponent = /** @class */ (function () {
             // @ts-ignore
             return Promise.resolve(window.google.maps);
         }
-        return this.loadScript(ResourceComponent.RESOURCE_GOOGLE_MAP_API, {
+        return this.loadScript(this.RESOURCE_GOOGLE_MAP_API, {
             libraries: 'places,geometry',
             key: this.googleApiKey,
             language: this.language || locale.language
@@ -72,7 +77,7 @@ var ResourceComponent = /** @class */ (function () {
                 return window.ymaps.ready(function () { return resolve(window.ymaps); });
             });
         }
-        return this.loadScript(ResourceComponent.RESOURCE_YANDEX_MAP_API, {
+        return this.loadScript(this.RESOURCE_YANDEX_MAP_API, {
             lang: this.language || locale.language
         }, 
         // @ts-ignore
@@ -84,7 +89,7 @@ var ResourceComponent = /** @class */ (function () {
             // @ts-ignore
             return Promise.resolve(window.twttr);
         }
-        return this.loadScript(ResourceComponent.RESOURCE_TWITTER_WIDGET, {}, 
+        return this.loadScript(this.RESOURCE_TWITTER_WIDGET, {}, 
         // @ts-ignore
         function () { return new Promise(function (resolve) { return window.twttr.ready(function () { return resolve(window.twttr); }); }); });
     };
@@ -94,7 +99,7 @@ var ResourceComponent = /** @class */ (function () {
             // @ts-ignore
             return Promise.resolve(window.initGeetest);
         }
-        return this.loadScript(ResourceComponent.RESOURCE_GEETEST_API + '?_t=' + new Date().getTime(), {}, 
+        return this.loadScript(this.RESOURCE_GEETEST_API + '?_t=' + new Date().getTime(), {}, 
         // @ts-ignore
         function () { return window.initGeetest; });
     };
@@ -147,11 +152,6 @@ var ResourceComponent = /** @class */ (function () {
         };
         return new Promise(checker);
     };
-    ResourceComponent.RESOURCE_GOOGLE_MAP_API = '//maps.googleapis.com/maps/api/js';
-    ResourceComponent.RESOURCE_YANDEX_MAP_API = 'https://api-maps.yandex.ru/2.1/';
-    ResourceComponent.RESOURCE_TWITTER_WIDGET = 'https://platform.twitter.com/widgets.js';
-    ResourceComponent.RESOURCE_GEETEST_API = '//static.geetest.com/static/tools/gt.js';
-    ResourceComponent.RESOURCE_GOOGLE_CAPTCHA = 'https://www.google.com/recaptcha/api.js';
     return ResourceComponent;
 }());
 exports["default"] = ResourceComponent;

package/hooks/index.d.ts

@@ -17,4 +17,5 @@ import useScreen from './useScreen';
 import useSelector from './useSelector';
 import useSsr from './useSsr';
 import useUniqueId from './useUniqueId';
-export { useAbsolutePositioning, useAddressBar, useApplication, useBem, useComponents, useDataProvider, useDataSelect, useDispatch, useFetch, useFile, useForm, useInitial, useLayout, useList, useModel, useScreen, useSelector, useSsr, useUniqueId, };
+import { useTheme } from './useTheme';
+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

@@ -3,7 +3,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 exports.__esModule = true;
-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;
+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;
 var useAbsolutePositioning_1 = __importDefault(require("./useAbsolutePositioning"));
 exports.useAbsolutePositioning = useAbsolutePositioning_1["default"];
 var useAddressBar_1 = __importDefault(require("./useAddressBar"));
@@ -42,3 +42,5 @@ var useSsr_1 = __importDefault(require("./useSsr"));
 exports.useSsr = useSsr_1["default"];
 var useUniqueId_1 = __importDefault(require("./useUniqueId"));
 exports.useUniqueId = useUniqueId_1["default"];
+var useTheme_1 = require("./useTheme");
+exports.useTheme = useTheme_1.useTheme;

package/hooks/useTheme.d.ts

@@ -0,0 +1,8 @@
+import React from 'react';
+export declare const LIGHT_THEME = "light";
+export declare const DARK_THEME = "dark";
+export declare const useTheme: (themes?: string[], themeStorageKey?: string) => {
+    theme: any;
+    setTheme: React.Dispatch<any>;
+    toggleTheme: () => void;
+};

package/hooks/useTheme.js

@@ -0,0 +1,40 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+exports.__esModule = true;
+exports.useTheme = exports.DARK_THEME = exports.LIGHT_THEME = void 0;
+var react_1 = __importDefault(require("react"));
+var useComponents_1 = __importDefault(require("./useComponents"));
+exports.LIGHT_THEME = 'light';
+exports.DARK_THEME = 'dark';
+var DEFAULT_THEMES = [
+    exports.LIGHT_THEME,
+    exports.DARK_THEME,
+];
+var DEFAULT_THEME_STORAGE_KEY = 'theme';
+var useTheme = function (themes, themeStorageKey) {
+    if (themes === void 0) { themes = DEFAULT_THEMES; }
+    if (themeStorageKey === void 0) { themeStorageKey = DEFAULT_THEME_STORAGE_KEY; }
+    var clientStorage = (0, useComponents_1["default"])().clientStorage;
+    var _a = react_1["default"].useState(clientStorage.get(themeStorageKey) || themes[0]), theme = _a[0], setTheme = _a[1];
+    var toggleTheme = react_1["default"].useCallback(function () {
+        var themesExpectedCount = 2;
+        if (themes.length !== themesExpectedCount) {
+            throw new Error('toggleTheme callback can only be used if the number of themes is two');
+        }
+        var lightTheme = themes[0];
+        var darkTheme = themes[1];
+        setTheme(theme === lightTheme ? darkTheme : lightTheme);
+    }, [themes, theme]);
+    react_1["default"].useEffect(function () {
+        document.querySelector('html').setAttribute('data-theme', theme);
+        clientStorage.set(themeStorageKey, theme);
+    }, [theme, clientStorage, themeStorageKey]);
+    return {
+        theme: theme,
+        setTheme: setTheme,
+        toggleTheme: toggleTheme
+    };
+};
+exports.useTheme = useTheme;

package/package.json

@@ -1,6 +1,6 @@
 {
  "name": "@steroidsjs/core",
- "version": "3.0.0-beta.51",
+ "version": "3.0.0-beta.53",
  "description": "",
  "author": "Vladimir Kozhin <hello@kozhindev.com>",
  "repository": {

package/providers/ComponentsProvider.d.ts

@@ -1,5 +1,6 @@
 import * as React from 'react';
 import { PropsWithChildren } from 'react';
+import { IResourceComponent } from '../components/ResourceComponent';
 declare global {
     interface Window {
         SteroidsComponents: IComponents;
@@ -13,7 +14,7 @@ export interface IComponents {
     locale?: any;
     store?: any;
     ui?: any;
-    resource?: any;
+    resource?: IResourceComponent;
     ws?: any;
     pushNotification?: any;
     meta?: any;

package/ui/content/Card/Card.d.ts

@@ -2,6 +2,7 @@
 import { IButtonProps } from 'src/ui/form/Button/Button';
 import { ILinkProps } from 'src/ui/nav/Link/Link';
 import { IAvatarProps } from '../Avatar/Avatar';
+import { IMenuProps } from '../Menu/Menu';
 export interface ICardHeader {
     /**
     * Параметры для аватара
@@ -13,10 +14,9 @@ export interface ICardHeader {
     */
     avatar?: IAvatarProps;
     /**
-    * Отображается ли меню
-    * @example true
+    * Свойства для компонента <Menu/>
     */
-    menu?: boolean;
+    menu?: IMenuProps;
     /**
     * Текст шапки (заголовок)
     * @example 'Steroids.js head'
@@ -52,7 +52,20 @@ export interface ICardProps extends IUiComponent {
      * },
      * head: 'Header',
      * subhead: 'Subhead',
-     * menu: true,
+     * menu: {
+     *  dropDownProps: {
+            position: 'bottom',
+            closeMode: 'click-any',
+        },
+        items: [
+            {label: 'Вырезать', icon: 'cut', onClick: voidFunction},
+            {label: 'Копировать', icon: 'copy', hasBorder: true, onClick: voidFunction},
+            {label: 'Показать историю изменений', hasBorder: true, onClick: voidFunction},
+            {label: 'Редактировать', icon: 'edit', onClick: voidFunction},
+            {label: 'Удалить', icon: 'trash', onClick: voidFunction},
+        ],
+        icon: 'menu_dots',
+     * },
      */
     header?: ICardHeader;
     /**

package/ui/form/InputField/InputField.d.ts

@@ -5,7 +5,7 @@ import { IFieldWrapperInputProps, IFieldWrapperOutputProps } from '../Field/fiel
 export declare const MASK_PRESETS: {
     date: MaskitoOptions;
     phone: {
-        mask: (string | RegExp)[];
+        mask: any[];
     };
     card: {
         mask: any[];

package/ui/form/InputField/InputField.js

@@ -58,7 +58,19 @@ exports.MASK_PRESETS = {
         mode: 'dd/mm/yyyy'
     }),
     phone: {
-        mask: ['+', '7', ' ', '(', /\d/, /\d/, /\d/, ')', ' ', /\d/, /\d/, /\d/, '-', /\d/, /\d/, /\d/, /\d/]
+        mask: __spreadArray(__spreadArray(__spreadArray(__spreadArray(__spreadArray(__spreadArray(__spreadArray([
+            '+',
+            '7',
+            ' ',
+            '('
+        ], Array(3).fill(/\d/), true), [
+            ')',
+            ' '
+        ], false), Array(3).fill(/\d/), true), [
+            '-'
+        ], false), Array(2).fill(/\d/), true), [
+            ' '
+        ], false), Array(2).fill(/\d/), true)
     },
     card: {
         mask: __spreadArray(__spreadArray(__spreadArray(__spreadArray(__spreadArray(__spreadArray(__spreadArray([], Array(4).fill(/\d/), true), [

package/ui/form/ReCaptchaField/ReCaptchaField.d.ts

@@ -1,3 +1,4 @@
+/// <reference types="react" />
 import { IFieldWrapperInputProps, IFieldWrapperOutputProps } from '../Field/fieldWrapper';
 /**
  * ReCaptchaField
@@ -11,9 +12,74 @@ import { IFieldWrapperInputProps, IFieldWrapperOutputProps } from '../Field/fiel
  * Сам компонент отображает ссылки на политику конфиденциальности и условия использования сервисов Google.
  */
 export interface IReCaptchaFieldProps extends IFieldWrapperInputProps, IUiComponent {
+    /**
+     * Обработчик события изменения ReCaptcha.
+     */
+    onChange?: VoidFunction;
+    /**
+     * Функция, вызываемая после загрузки асинхронного скрипта.
+     */
+    asyncScriptOnLoad?: () => void;
+    /**
+     * Положение значка ReCaptcha. Может быть 'bottomright' (внизу справа), 'bottomleft' (внизу слева) или 'inline' (встроенный).
+     */
+    badge?: 'bottomright' | 'bottomleft' | 'inline';
+    /**
+     * Тип ReCaptcha. Может быть 'image' (изображение) или 'audio' (аудио).
+     */
+    type?: 'image' | 'audio';
+    /**
+     * Значение tabindex для ReCaptcha.
+     */
+    tabindex?: number;
+    /**
+     * Защищенный токен для ReCaptcha.
+     */
+    stoken?: string;
+    /**
+     * Обработчик события истечения срока действия ReCaptcha.
+     */
+    onExpired?: VoidFunction;
+    /**
+     * Обработчик события ошибки ReCaptcha.
+     */
+    onErrored?: VoidFunction;
+    /**
+     * Флаг, указывающий на изоляцию ReCaptcha.
+     */
+    isolated?: boolean;
+    /**
+     * Языковой код для ReCaptcha.
+     */
+    hl?: string;
+    /**
+     * Ссылка на ref-объект React для ReCaptcha.
+     */
+    ref?: React.RefObject<any>;
+    /**
+     * Ключ сайта ReCaptcha. По умолчанию process.env.APP_RECAPTCHA_SITE_KEY
+     */
+    sitekey?: string;
+    /**
+     * Дополнительные свойства, которые могут быть указаны.
+     */
     [key: string]: any;
 }
 export interface IReCaptchaFieldViewProps extends IReCaptchaFieldProps, IFieldWrapperOutputProps {
+    sitekey: string;
+    recaptchaOptions: {
+        onChange: VoidFunction;
+        asyncScriptOnLoad: () => void;
+        badge: 'bottomright' | 'bottomleft' | 'inline';
+        type: 'image' | 'audio';
+        tabindex: number;
+        stoken: string;
+        onExpired: VoidFunction;
+        onErrored: VoidFunction;
+        isolated: boolean;
+        hl: string;
+        ref: React.RefObject<any>;
+    };
 }
 declare const _default: import("../Field/fieldWrapper").FieldWrapperComponent<IReCaptchaFieldProps>;
 export default _default;

package/ui/form/ReCaptchaField/ReCaptchaField.js

@@ -14,10 +14,31 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 exports.__esModule = true;
+/* eslint-disable max-len */
+var react_1 = require("react");
 var hooks_1 = require("../../../hooks");
 var fieldWrapper_1 = __importDefault(require("../Field/fieldWrapper"));
 function ReCaptchaField(props) {
     var components = (0, hooks_1.useComponents)();
-    return components.ui.renderView(props.view || 'form.ReCaptchaFieldView', __assign({}, props));
+    var onChange = (0, react_1.useCallback)(function () {
+        if (props.onChange) {
+            props.onChange();
+        }
+    }, [props]);
+    var recaptchaOptions = (0, react_1.useMemo)(function () { return ({
+        onChange: onChange,
+        asyncScriptOnLoad: props.asyncScriptOnLoad,
+        badge: props.badge,
+        type: props.type,
+        tabindex: props.tabindex,
+        stoken: props.stoken,
+        onExpired: props.onExpired,
+        onErrored: props.onErrored,
+        isolated: props.isolated,
+        hl: props.hl,
+        ref: props.ref,
+        sitekey: props.sitekey || components.resource.googleCaptchaSiteKey
+    }); }, [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]);
+    return components.ui.renderView(props.view || 'form.ReCaptchaFieldView', __assign(__assign({}, props), { recaptchaOptions: recaptchaOptions }));
 }
 exports["default"] = (0, fieldWrapper_1["default"])('ReCaptchaField', ReCaptchaField);

package/ui/layout/Tooltip/Tooltip.js

@@ -79,6 +79,9 @@ function Tooltip(props) {
     // Основная функция расчета позиции
     var calculatePosition = (0, react_1.useCallback)(function (tooltipSize, arrowSize) {
         var result = (0, calculate_1["default"])(props.gap, positionRef.current, childRef.current, tooltipSize, arrowSize);
+        if (!result) {
+            return;
+        }
         positionRef.current = result.position;
         setStyle(result.style);
         if (result.arrowPosition) {

package/ui/layout/Tooltip/calculate.js

@@ -1,6 +1,9 @@
 "use strict";
 exports.__esModule = true;
 function calculate(gap, position, parentRef, tooltipSize, arrowSize) {
+    if (process.env.IS_SSR) {
+        return null;
+    }
     var style = { left: null, right: null, top: null };
     var arrowPosition = null;
     var _a = parentRef.getBoundingClientRect(), top = _a.top, right = _a.right, left = _a.left, width = _a.width, height = _a.height;