@steroidsjs/core 2.3.0-beta.7 → 3.0.0-beta.10

package/hooks/useAbsolutePositioning.d.ts

@@ -1,76 +1,76 @@
-import * as React from 'react';
-interface IStyleObj {
-    left: 'unset' | number;
-    right: 'unset' | number;
-    top: 'unset' | number;
-}
-/**
- * Варианты абсолютного позиционирования
- * @example 'top'
- */
-declare type Position = 'top' | 'topLeft' | 'topRight' | 'bottom' | 'bottomLeft' | 'bottomRight' | 'left' | 'leftTop' | 'leftBottom' | 'right' | 'rightTop' | 'rightBottom' | string;
-export interface IAbsolutePositioningInputProps {
-    /**
-     * Включает "умное" позиционирование - если компонент не может быть помещен в промежуток между целевым компонентом
-     * и краем viewport, тогда он будет показан в противоположном направлении от заданного в свойстве position.
-     */
-    autoPositioning?: boolean;
-    /**
-     * Дочерние элементы
-     */
-    children?: React.ReactNode;
-    /**
-     * Задержка перед размонтированием компонента, когда он должен быть скрыт.
-     * В этот момент удобно применять различные анимации ухода.
-     */
-    componentDestroyDelay?: number;
-    /**
-     * Промежуток между компонентом и целевым элементом.
-     * Используется в рассчетах позиционирования.
-     */
-    gap?: number;
-    /**
-     * Позиционирование компонента, относительно целевого элемента
-     */
-    position: Position;
-    /**
-     * Отобразить или скрыть компонент.
-     * Включает "ручной режим", при котором можно задать логику отображения компонента извне,
-     * через измененение данного свойства.
-     */
-    visible?: boolean;
-    /**
-     * Обработчик изменения свойства isComponentVisible (отображение на странице).
-     * Возвращает значение isComponentVisible.
-     */
-    onVisibleChange?: (isComponentVisible: boolean) => void;
-    /**
-     * Срабатывает в "ручном режиме", при клике за пределами компонента и целевого элемента.
-     * Возвращает значение visible.
-     */
-    onClose?: () => void;
-}
-export interface IAbsolutePositioningOutputProps {
-    /**
-     * Нужно ли рендерить компонент
-     */
-    isComponentExist: boolean;
-    /**
-     * Нужно ли показывать компонент на странице
-     */
-    isComponentVisible: boolean;
-    /**
-     * Объект стилей для абсолютного позиционирования
-     */
-    style: IStyleObj;
-}
-export default function useAbsolutePositioning(props: IAbsolutePositioningInputProps): {
-    isComponentExist: boolean;
-    isComponentVisible: boolean;
-    style: IStyleObj;
-    position: string;
-    calculateAbsolutePosition: (newPosition: Position, childRef: any, componentSize: any) => void;
-    onShow: () => void;
-    onHide: () => void;
-};
-export {};
+import * as React from 'react';
+interface IStyleObj {
+    left: 'unset' | number;
+    right: 'unset' | number;
+    top: 'unset' | number;
+}
+/**
+ * Варианты абсолютного позиционирования
+ * @example 'top'
+ */
+type Position = 'top' | 'topLeft' | 'topRight' | 'bottom' | 'bottomLeft' | 'bottomRight' | 'left' | 'leftTop' | 'leftBottom' | 'right' | 'rightTop' | 'rightBottom' | string;
+export interface IAbsolutePositioningInputProps {
+    /**
+     * Включает "умное" позиционирование - если компонент не может быть помещен в промежуток между целевым компонентом
+     * и краем viewport, тогда он будет показан в противоположном направлении от заданного в свойстве position.
+     */
+    autoPositioning?: boolean;
+    /**
+     * Дочерние элементы
+     */
+    children?: React.ReactNode;
+    /**
+     * Задержка перед размонтированием компонента, когда он должен быть скрыт.
+     * В этот момент удобно применять различные анимации ухода.
+     */
+    componentDestroyDelay?: number;
+    /**
+     * Промежуток между компонентом и целевым элементом.
+     * Используется в рассчетах позиционирования.
+     */
+    gap?: number;
+    /**
+     * Позиционирование компонента, относительно целевого элемента
+     */
+    position: Position;
+    /**
+     * Отобразить или скрыть компонент.
+     * Включает "ручной режим", при котором можно задать логику отображения компонента извне,
+     * через измененение данного свойства.
+     */
+    visible?: boolean;
+    /**
+     * Обработчик изменения свойства isComponentVisible (отображение на странице).
+     * Возвращает значение isComponentVisible.
+     */
+    onVisibleChange?: (isComponentVisible: boolean) => void;
+    /**
+     * Срабатывает в "ручном режиме", при клике за пределами компонента и целевого элемента.
+     * Возвращает значение visible.
+     */
+    onClose?: () => void;
+}
+export interface IAbsolutePositioningOutputProps {
+    /**
+     * Нужно ли рендерить компонент
+     */
+    isComponentExist: boolean;
+    /**
+     * Нужно ли показывать компонент на странице
+     */
+    isComponentVisible: boolean;
+    /**
+     * Объект стилей для абсолютного позиционирования
+     */
+    style: IStyleObj;
+}
+export default function useAbsolutePositioning(props: IAbsolutePositioningInputProps): {
+    isComponentExist: boolean;
+    isComponentVisible: boolean;
+    style: IStyleObj;
+    position: string;
+    calculateAbsolutePosition: (newPosition: Position, childRef: any, componentSize: any) => void;
+    onShow: () => void;
+    onHide: () => void;
+};
+export {};

package/hooks/useAbsolutePositioning.js

@@ -1,185 +1,188 @@
-"use strict";
-exports.__esModule = true;
-var react_1 = require("react");
-function useAbsolutePositioning(props) {
-    var _a = react_1.useState(props.visible), isComponentExist = _a[0], setIsComponentExist = _a[1];
-    var _b = react_1.useState(props.visible), isComponentVisible = _b[0], setIsComponentVisible = _b[1];
-    var _c = react_1.useState(props.position), position = _c[0], setPosition = _c[1];
-    var _d = react_1.useState({
-        left: null,
-        right: null,
-        top: null
-    }), style = _d[0], setStyle = _d[1];
-    var timerRef = react_1.useRef(null);
-    var calculateAbsolutePosition = react_1.useCallback(function (newPosition, childRef, componentSize) {
-        var newStyle = { left: null, right: null, top: null };
-        var _a = childRef.getBoundingClientRect(), top = _a.top, right = _a.right, left = _a.left, width = _a.width, height = _a.height;
-        var parentDimensions = { top: top, right: right, left: left, width: width, height: height };
-        parentDimensions.top += window.scrollY;
-        var useAutoPositioning = props.autoPositioning;
-        // eslint-disable-next-line default-case
-        switch (newPosition) {
-            case 'top':
-            case 'topLeft':
-            case 'topRight':
-                // Проверка - выходит ли tooltip за верхний край страницы?
-                // Если да - меняем позицию на bottom
-                if (useAutoPositioning && ((parentDimensions.top - window.scrollY) <= Math.round(componentSize.height + props.gap))) {
-                    newStyle.top = parentDimensions.top + parentDimensions.height;
-                    newPosition = newPosition.replace('top', 'bottom');
-                }
-                else {
-                    newStyle.top = parentDimensions.top - componentSize.height;
-                }
-                break;
-            case 'bottom':
-            case 'bottomLeft':
-            case 'bottomRight':
-                // Проверка - выходит ли tooltip за нижний край страницы?
-                // Если да - меняем позицию на top
-                if (useAutoPositioning && ((window.innerHeight - (parentDimensions.top + parentDimensions.height - window.scrollY)))
-                    <= Math.round(componentSize.height + props.gap)) {
-                    newStyle.top = parentDimensions.top - componentSize.height;
-                    newPosition = newPosition.replace('bottom', 'top');
-                }
-                else {
-                    newStyle.top = parentDimensions.top + parentDimensions.height;
-                }
-                break;
-            case 'left':
-            case 'leftTop':
-            case 'leftBottom':
-                // Проверка - выходит ли tooltip за левый край страницы?
-                // Если да - меняем позицию на right
-                if (useAutoPositioning && (parentDimensions.left <= Math.round(componentSize.width + props.gap))) {
-                    newStyle.left = parentDimensions.right;
-                    newPosition = newPosition.replace('left', 'right');
-                }
-                else {
-                    newStyle.left = parentDimensions.left - componentSize.width;
-                }
-                break;
-            case 'right':
-            case 'rightTop':
-            case 'rightBottom':
-                // Проверка - выходит ли tooltip за правый край страницы?
-                // Если да - меняем позицию на left
-                if (useAutoPositioning && (document.body.clientWidth - parentDimensions.right <= Math.round(componentSize.width + props.gap))) {
-                    newStyle.left = parentDimensions.left - componentSize.width;
-                    newPosition = newPosition.replace('right', 'left');
-                }
-                else {
-                    newStyle.left = parentDimensions.right;
-                }
-                break;
-        }
-        // eslint-disable-next-line default-case
-        switch (newPosition) {
-            case 'top':
-            case 'bottom':
-                // Выравнивание по середине
-                newStyle.left = (parentDimensions.left + (parentDimensions.width / 2)) - (componentSize.width / 2);
-                break;
-            case 'topLeft':
-            case 'bottomLeft':
-                // Ширина tooltip больше родителя - стрелка на середину родителя
-                newStyle.left = parentDimensions.left;
-                break;
-            case 'topRight':
-            case 'bottomRight':
-                // Ширина tooltip больше родителя - стрелка на середину родителя
-                newStyle.right = document.body.clientWidth - parentDimensions.right;
-                break;
-            case 'left':
-            case 'right':
-                newStyle.top = (parentDimensions.top + (parentDimensions.height / 2)) - (componentSize.height / 2);
-                break;
-            case 'leftTop':
-            case 'rightTop':
-                newStyle.top = parentDimensions.top;
-                break;
-            case 'leftBottom':
-            case 'rightBottom':
-                newStyle.top = parentDimensions.top + parentDimensions.height - componentSize.height;
-                break;
-        }
-        // Проверка - при позиционировании top/bottom tooltip не выходит за пределы страницы по горизонтали
-        if (newPosition.includes('top') || newPosition.includes('bottom')) {
-            if (!newPosition.includes('Left')
-                && (newStyle.left < 0 || parentDimensions.left
-                    <= Math.round((componentSize.width - parentDimensions.width) + props.gap))) {
-                newStyle.right = null;
-                newPosition = newPosition.replace('Right', 'Left');
-                newStyle.left = parentDimensions.left;
-            }
-            if (!newPosition.includes('Right')
-                && (document.body.clientWidth - parentDimensions.right
-                    <= Math.round((componentSize.width - parentDimensions.width) + props.gap))) {
-                newPosition = newPosition.replace('Left', 'Right');
-                newStyle.left = null;
-                newStyle.right = document.body.clientWidth - parentDimensions.right;
-            }
-        }
-        // Проверка - при позиционировании left/right tooltip не выходит за пределы страницы по вертикали
-        if (newPosition.includes('left') || newPosition.includes('right')) {
-            if (!newPosition.includes('Top')
-                && parentDimensions.top - window.scrollY
-                    <= Math.round((componentSize.height - parentDimensions.height) + props.gap)) {
-                newPosition = newPosition.replace('Bottom', 'Top');
-                newStyle.top = parentDimensions.top;
-            }
-            if (!newPosition.includes('Bottom')
-                && (window.innerHeight - (parentDimensions.top + parentDimensions.height - window.scrollY)
-                    <= Math.round((componentSize.height - parentDimensions.height) + props.gap))) {
-                newPosition = newPosition.replace('Top', 'Bottom');
-                newStyle.top = parentDimensions.top + parentDimensions.height - componentSize.height;
-            }
-        }
-        setStyle(newStyle);
-        setPosition(newPosition);
-    }, [props.gap]);
-    var onShow = react_1.useCallback(function () {
-        if (timerRef.current) {
-            clearTimeout(timerRef.current);
-        }
-        setIsComponentExist(true);
-        setIsComponentVisible(false);
-        // TODO: How to wait setState callback?
-        setTimeout(function () { return setIsComponentVisible(true); });
-    }, []);
-    var onHide = react_1.useCallback(function () {
-        setIsComponentVisible(false);
-        if (timerRef.current) {
-            clearTimeout(timerRef.current);
-        }
-        // TODO add time value to props
-        timerRef.current = setTimeout(function () { return setIsComponentExist(false); }, props.componentDestroyDelay);
-    }, [props.componentDestroyDelay]);
-    // Trigger on visible
-    react_1.useEffect(function () {
-        if (props.visible) {
-            onShow();
-        }
-        else {
-            onHide();
-        }
-        // eslint-disable-next-line react-hooks/exhaustive-deps
-    }, [props.visible]);
-    // Trigger on isComponentVisible
-    react_1.useEffect(function () {
-        if (props.onVisibleChange) {
-            props.onVisibleChange(isComponentVisible);
-        }
-        // eslint-disable-next-line react-hooks/exhaustive-deps
-    }, [isComponentVisible]);
-    return {
-        isComponentExist: isComponentExist,
-        isComponentVisible: isComponentVisible,
-        style: style,
-        position: position,
-        calculateAbsolutePosition: calculateAbsolutePosition,
-        onShow: onShow,
-        onHide: onHide
-    };
-}
-exports["default"] = useAbsolutePositioning;
+"use strict";
+exports.__esModule = true;
+var react_1 = require("react");
+function useAbsolutePositioning(props) {
+    var _a = (0, react_1.useState)(props.visible), isComponentExist = _a[0], setIsComponentExist = _a[1];
+    var _b = (0, react_1.useState)(props.visible), isComponentVisible = _b[0], setIsComponentVisible = _b[1];
+    var _c = (0, react_1.useState)(props.position), position = _c[0], setPosition = _c[1];
+    var _d = (0, react_1.useState)({
+        left: null,
+        right: null,
+        top: null
+    }), style = _d[0], setStyle = _d[1];
+    var timerRef = (0, react_1.useRef)(null);
+    var calculateAbsolutePosition = (0, react_1.useCallback)(function (newPosition, childRef, componentSize) {
+        var newStyle = { left: null, right: null, top: null };
+        var _a = childRef.getBoundingClientRect(), top = _a.top, right = _a.right, left = _a.left, width = _a.width, height = _a.height;
+        var parentDimensions = { top: top, right: right, left: left, width: width, height: height };
+        parentDimensions.top += window.scrollY;
+        var useAutoPositioning = props.autoPositioning;
+        // eslint-disable-next-line default-case
+        switch (newPosition) {
+            case 'top':
+            case 'topLeft':
+            case 'topRight':
+                // Проверка - выходит ли tooltip за верхний край страницы?
+                // Если да - меняем позицию на bottom
+                if (useAutoPositioning
+                    && ((parentDimensions.top - window.scrollY) <= Math.round(componentSize.height + props.gap))) {
+                    newStyle.top = parentDimensions.top + parentDimensions.height;
+                    newPosition = newPosition.replace('top', 'bottom');
+                }
+                else {
+                    newStyle.top = parentDimensions.top - componentSize.height;
+                }
+                break;
+            case 'bottom':
+            case 'bottomLeft':
+            case 'bottomRight':
+                // Проверка - выходит ли tooltip за нижний край страницы?
+                // Если да - меняем позицию на top
+                if (useAutoPositioning
+                    && ((window.innerHeight - (parentDimensions.top + parentDimensions.height - window.scrollY))) <= Math.round(componentSize.height + props.gap)) {
+                    newStyle.top = parentDimensions.top - componentSize.height;
+                    newPosition = newPosition.replace('bottom', 'top');
+                }
+                else {
+                    newStyle.top = parentDimensions.top + parentDimensions.height;
+                }
+                break;
+            case 'left':
+            case 'leftTop':
+            case 'leftBottom':
+                // Проверка - выходит ли tooltip за левый край страницы?
+                // Если да - меняем позицию на right
+                if (useAutoPositioning && (parentDimensions.left <= Math.round(componentSize.width + props.gap))) {
+                    newStyle.left = parentDimensions.right;
+                    newPosition = newPosition.replace('left', 'right');
+                }
+                else {
+                    newStyle.left = parentDimensions.left - componentSize.width;
+                }
+                break;
+            case 'right':
+            case 'rightTop':
+            case 'rightBottom':
+                // Проверка - выходит ли tooltip за правый край страницы?
+                // Если да - меняем позицию на left
+                if (useAutoPositioning
+                    && (document.body.clientWidth - parentDimensions.right <= Math.round(componentSize.width + props.gap))) {
+                    newStyle.left = parentDimensions.left - componentSize.width;
+                    newPosition = newPosition.replace('right', 'left');
+                }
+                else {
+                    newStyle.left = parentDimensions.right;
+                }
+                break;
+        }
+        // eslint-disable-next-line default-case
+        switch (newPosition) {
+            case 'top':
+            case 'bottom':
+                // Выравнивание по середине
+                newStyle.left = (parentDimensions.left + (parentDimensions.width / 2)) - (componentSize.width / 2);
+                break;
+            case 'topLeft':
+            case 'bottomLeft':
+                // Ширина tooltip больше родителя - стрелка на середину родителя
+                newStyle.left = parentDimensions.left;
+                break;
+            case 'topRight':
+            case 'bottomRight':
+                // Ширина tooltip больше родителя - стрелка на середину родителя
+                newStyle.right = document.body.clientWidth - parentDimensions.right;
+                break;
+            case 'left':
+            case 'right':
+                newStyle.top = (parentDimensions.top + (parentDimensions.height / 2)) - (componentSize.height / 2);
+                break;
+            case 'leftTop':
+            case 'rightTop':
+                newStyle.top = parentDimensions.top;
+                break;
+            case 'leftBottom':
+            case 'rightBottom':
+                newStyle.top = parentDimensions.top + parentDimensions.height - componentSize.height;
+                break;
+        }
+        // Проверка - при позиционировании top/bottom tooltip не выходит за пределы страницы по горизонтали
+        if (newPosition.includes('top') || newPosition.includes('bottom')) {
+            if (!newPosition.includes('Left')
+                && (newStyle.left < 0 || parentDimensions.left
+                    <= Math.round((componentSize.width - parentDimensions.width) + props.gap))) {
+                newStyle.right = null;
+                newPosition = newPosition.replace('Right', 'Left');
+                newStyle.left = parentDimensions.left;
+            }
+            if (!newPosition.includes('Right')
+                && (document.body.clientWidth - parentDimensions.right
+                    <= Math.round((componentSize.width - parentDimensions.width) + props.gap))) {
+                newPosition = newPosition.replace('Left', 'Right');
+                newStyle.left = null;
+                newStyle.right = document.body.clientWidth - parentDimensions.right;
+            }
+        }
+        // Проверка - при позиционировании left/right tooltip не выходит за пределы страницы по вертикали
+        if (newPosition.includes('left') || newPosition.includes('right')) {
+            if (!newPosition.includes('Top')
+                && parentDimensions.top - window.scrollY
+                    <= Math.round((componentSize.height - parentDimensions.height) + props.gap)) {
+                newPosition = newPosition.replace('Bottom', 'Top');
+                newStyle.top = parentDimensions.top;
+            }
+            if (!newPosition.includes('Bottom')
+                && (window.innerHeight - (parentDimensions.top + parentDimensions.height - window.scrollY)
+                    <= Math.round((componentSize.height - parentDimensions.height) + props.gap))) {
+                newPosition = newPosition.replace('Top', 'Bottom');
+                newStyle.top = parentDimensions.top + parentDimensions.height - componentSize.height;
+            }
+        }
+        setStyle(newStyle);
+        setPosition(newPosition);
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [props.gap]);
+    var onShow = (0, react_1.useCallback)(function () {
+        if (timerRef.current) {
+            clearTimeout(timerRef.current);
+        }
+        setIsComponentExist(true);
+        setIsComponentVisible(false);
+        // TODO: How to wait setState callback?
+        setTimeout(function () { return setIsComponentVisible(true); });
+    }, []);
+    var onHide = (0, react_1.useCallback)(function () {
+        setIsComponentVisible(false);
+        if (timerRef.current) {
+            clearTimeout(timerRef.current);
+        }
+        // TODO add time value to props
+        timerRef.current = setTimeout(function () { return setIsComponentExist(false); }, props.componentDestroyDelay);
+    }, [props.componentDestroyDelay]);
+    // Trigger on visible
+    (0, react_1.useEffect)(function () {
+        if (props.visible) {
+            onShow();
+        }
+        else {
+            onHide();
+        }
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [props.visible]);
+    // Trigger on isComponentVisible
+    (0, react_1.useEffect)(function () {
+        if (props.onVisibleChange) {
+            props.onVisibleChange(isComponentVisible);
+        }
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [isComponentVisible]);
+    return {
+        isComponentExist: isComponentExist,
+        isComponentVisible: isComponentVisible,
+        style: style,
+        position: position,
+        calculateAbsolutePosition: calculateAbsolutePosition,
+        onShow: onShow,
+        onHide: onHide
+    };
+}
+exports["default"] = useAbsolutePositioning;

package/hooks/useAddressBar.d.ts

@@ -1,23 +1,23 @@
-/// <reference types="connected-react-router" />
-import { Model } from '../components/MetaComponent';
-export declare type ListControlPosition = 'top' | 'bottom' | 'both' | string;
-export interface IAddressBarConfig {
-    enable?: boolean;
-    useHash?: boolean;
-    model?: Model;
-}
-export interface IAddressBarOutput {
-    initialQuery: Record<string, unknown>;
-    updateQuery: (values: Record<string, unknown>) => void;
-}
-export declare const defaultFromStringConverter: (value: any, type: any, item: any) => any;
-export declare const defaultToStringConverter: (value: any, type: any, item: any) => string;
-export declare const queryRestore: (model: Model, location: any, useHash: any) => {};
-/**
- * WARNING
- * Method incorrectly saves nested objects (e.g. {foo: [{bar: 1}]}
- * // @todo use 'qs' library instead of 'query-string'
- *
- */
-export declare const queryReplace: (model: Model, location: any, values: any, useHash: any) => any[] | import("connected-react-router").CallHistoryMethodAction<[any, any?]>;
-export default function useAddressBar(config: IAddressBarConfig): IAddressBarOutput;
+/// <reference types="connected-react-router" />
+import { Model } from '../components/MetaComponent';
+export type ListControlPosition = 'top' | 'bottom' | 'both' | string;
+export interface IAddressBarConfig {
+    enable?: boolean;
+    useHash?: boolean;
+    model?: Model;
+}
+export interface IAddressBarOutput {
+    initialQuery: Record<string, unknown>;
+    updateQuery: (values: Record<string, unknown>) => void;
+}
+export declare const defaultFromStringConverter: (value: any, type: any, item: any) => any;
+export declare const defaultToStringConverter: (value: any, type: any, item: any) => string;
+export declare const queryRestore: (model: Model, location: any, useHash: any) => {};
+/**
+ * WARNING
+ * Method incorrectly saves nested objects (e.g. {foo: [{bar: 1}]}
+ * // @todo use 'qs' library instead of 'query-string'
+ *
+ */
+export declare const queryReplace: (model: Model, location: any, values: any, useHash: any) => any[] | import("connected-react-router").CallHistoryMethodAction<[Path, LocationState?]>;
+export default function useAddressBar(config: IAddressBarConfig): IAddressBarOutput;