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

package/ui/layout/Skeleton/demo/animations.js

@@ -1,49 +1,49 @@
-"use strict";
-var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    Object.defineProperty(o, k2, { enumerable: true, get: function() { return m[k]; } });
-}) : (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    o[k2] = m[k];
-}));
-var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
-    Object.defineProperty(o, "default", { enumerable: true, value: v });
-}) : function(o, v) {
-    o["default"] = v;
-});
-var __importStar = (this && this.__importStar) || function (mod) {
-    if (mod && mod.__esModule) return mod;
-    var result = {};
-    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
-    __setModuleDefault(result, mod);
-    return result;
-};
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-exports.__esModule = true;
-var React = __importStar(require("react"));
-var Skeleton_1 = __importDefault(require("../Skeleton"));
-/**
- * Демонстрация двух видов анимации и трёх типов Skeleton.
- * @order 1
- * @col 3
- */
-exports["default"] = (function () { return (React.createElement("div", { style: {
-        display: 'flex',
-        gridGap: '20px'
-    } },
-    React.createElement("div", { style: { display: 'grid', gridGap: '10px' } },
-        React.createElement("div", { style: { width: 100, height: 30 } },
-            React.createElement(Skeleton_1["default"], { animation: 'wave', type: 'text' })),
-        React.createElement("div", { style: { width: 100, height: 100 } },
-            React.createElement(Skeleton_1["default"], { animation: 'wave', type: 'rect' })),
-        React.createElement("div", { style: { width: 100, height: 100 } },
-            React.createElement(Skeleton_1["default"], { animation: 'wave', type: 'circle' }))),
-    React.createElement("div", { style: { display: 'grid', gridGap: '10px' } },
-        React.createElement("div", { style: { width: 100, height: 30 } },
-            React.createElement(Skeleton_1["default"], { animation: 'pulse', type: 'text' })),
-        React.createElement("div", { style: { width: 100, height: 100 } },
-            React.createElement(Skeleton_1["default"], { animation: 'pulse', type: 'rect' })),
-        React.createElement("div", { style: { width: 100, height: 100 } },
-            React.createElement(Skeleton_1["default"], { animation: 'pulse', type: 'circle' }))))); });
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    Object.defineProperty(o, k2, { enumerable: true, get: function() { return m[k]; } });
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+exports.__esModule = true;
+var React = __importStar(require("react"));
+var Skeleton_1 = __importDefault(require("../Skeleton"));
+/**
+ * Демонстрация двух видов анимации и трёх типов Skeleton.
+ * @order 1
+ * @col 3
+ */
+exports["default"] = (function () { return (React.createElement("div", { style: {
+        display: 'flex',
+        gridGap: '20px'
+    } },
+    React.createElement("div", { style: { display: 'grid', gridGap: '10px' } },
+        React.createElement("div", { style: { width: 100, height: 30 } },
+            React.createElement(Skeleton_1["default"], { animation: 'wave', type: 'text' })),
+        React.createElement("div", { style: { width: 100, height: 100 } },
+            React.createElement(Skeleton_1["default"], { animation: 'wave', type: 'rect' })),
+        React.createElement("div", { style: { width: 100, height: 100 } },
+            React.createElement(Skeleton_1["default"], { animation: 'wave', type: 'circle' }))),
+    React.createElement("div", { style: { display: 'grid', gridGap: '10px' } },
+        React.createElement("div", { style: { width: 100, height: 30 } },
+            React.createElement(Skeleton_1["default"], { animation: 'pulse', type: 'text' })),
+        React.createElement("div", { style: { width: 100, height: 100 } },
+            React.createElement(Skeleton_1["default"], { animation: 'pulse', type: 'rect' })),
+        React.createElement("div", { style: { width: 100, height: 100 } },
+            React.createElement(Skeleton_1["default"], { animation: 'pulse', type: 'circle' }))))); });

package/ui/layout/Skeleton/demo/width height.d.ts

@@ -1,8 +1,7 @@
-/// <reference types="react" />
-declare const _default: () => JSX.Element;
-/**
- * Демонстрация задания кастомной ширины и высоты.
- * @order 2
- * @col 5
- */
-export default _default;
+declare const _default: () => JSX.Element;
+/**
+ * Демонстрация задания кастомной ширины и высоты.
+ * @order 2
+ * @col 5
+ */
+export default _default;

package/ui/layout/Skeleton/demo/width height.js

@@ -1,38 +1,38 @@
-"use strict";
-var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    Object.defineProperty(o, k2, { enumerable: true, get: function() { return m[k]; } });
-}) : (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    o[k2] = m[k];
-}));
-var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
-    Object.defineProperty(o, "default", { enumerable: true, value: v });
-}) : function(o, v) {
-    o["default"] = v;
-});
-var __importStar = (this && this.__importStar) || function (mod) {
-    if (mod && mod.__esModule) return mod;
-    var result = {};
-    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
-    __setModuleDefault(result, mod);
-    return result;
-};
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-exports.__esModule = true;
-var React = __importStar(require("react"));
-var Skeleton_1 = __importDefault(require("../Skeleton"));
-/**
- * Демонстрация задания кастомной ширины и высоты.
- * @order 2
- * @col 5
- */
-exports["default"] = (function () { return (React.createElement("div", { style: {
-        display: 'flex',
-        gridGap: '20px'
-    } },
-    React.createElement("div", { style: { display: 'flex', gridGap: '10px' } },
-        React.createElement(Skeleton_1["default"], { animation: 'wave', type: 'text', width: 50, height: 200 }),
-        React.createElement(Skeleton_1["default"], { animation: 'wave', type: 'circle', width: 300, height: 200 })))); });
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    Object.defineProperty(o, k2, { enumerable: true, get: function() { return m[k]; } });
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+exports.__esModule = true;
+var React = __importStar(require("react"));
+var Skeleton_1 = __importDefault(require("../Skeleton"));
+/**
+ * Демонстрация задания кастомной ширины и высоты.
+ * @order 2
+ * @col 5
+ */
+exports["default"] = (function () { return (React.createElement("div", { style: {
+        display: 'flex',
+        gridGap: '20px'
+    } },
+    React.createElement("div", { style: { display: 'flex', gridGap: '10px' } },
+        React.createElement(Skeleton_1["default"], { animation: 'wave', type: 'text', width: 50, height: 200 }),
+        React.createElement(Skeleton_1["default"], { animation: 'wave', type: 'circle', width: 300, height: 200 })))); });

package/ui/layout/Skeleton/index.d.ts

@@ -1,2 +1,2 @@
-import Skeleton from "./Skeleton";
-export default Skeleton;
+import Skeleton from './Skeleton';
+export default Skeleton;

package/ui/layout/Skeleton/index.js

@@ -1,7 +1,7 @@
-"use strict";
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-exports.__esModule = true;
-var Skeleton_1 = __importDefault(require("./Skeleton"));
-exports["default"] = Skeleton_1["default"];
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+exports.__esModule = true;
+var Skeleton_1 = __importDefault(require("./Skeleton"));
+exports["default"] = Skeleton_1["default"];

package/ui/layout/Tooltip/Tooltip.d.ts

@@ -1,64 +1,63 @@
-/// <reference types="react" />
-/**
- * Варианты позиций всплывающей подсказки
- * @example 'top'
- */
-declare type TooltipPosition = 'top' | 'topLeft' | 'topRight' | 'bottom' | 'bottomLeft' | 'bottomRight' | 'left' | 'leftTop' | 'leftBottom' | 'right' | 'rightTop' | 'rightBottom' | string;
-export interface TooltipArrowPosition {
-    left?: number | string;
-    right?: number | string;
-    top?: number | string;
-    bottom?: number | string;
-}
-export interface TooltipStylePosition {
-    left: 'unset' | number;
-    right: 'unset' | number;
-    top: 'unset' | number;
-}
-export interface ITooltipProps {
-    /**
-     * Текст подсказки
-     * @example 'Это всплывающая подсказка.'
-     */
-    content?: string | any;
-    /**
-     * Позиционирование подсказки, относительно целевого элемента
-     */
-    position?: TooltipPosition;
-    /**
-     * Показывать ли подсказку сразу после рендера страницы
-     * @example true
-     */
-    defaultVisible?: boolean;
-    /**
-     * Стили для абсолютного позиционирования подсказки
-     */
-    style?: TooltipStylePosition;
-    /**
-     * Стили для позиционирования стрелки
-     * @example {left: 10}
-     */
-    arrowPosition?: TooltipArrowPosition;
-    /**
-     * Рассчет позиции подсказки
-     */
-    calculatePosition?: (tooltipDimensions: object, arrowDimensions: object) => void;
-    [key: string]: any;
-}
-export interface ITooltipViewProps extends ITooltipProps {
-    isTooltipVisible: boolean;
-    content: string | any;
-    position: TooltipPosition;
-    style: TooltipStylePosition;
-}
-declare function Tooltip(props: ITooltipProps): JSX.Element;
-declare namespace Tooltip {
-    var defaultProps: {
-        content: string;
-        position: string;
-        defaultVisible: boolean;
-        gap: number;
-        animationMs: number;
-    };
-}
-export default Tooltip;
+/**
+ * Варианты позиций всплывающей подсказки
+ * @example 'top'
+ */
+declare type TooltipPosition = 'top' | 'topLeft' | 'topRight' | 'bottom' | 'bottomLeft' | 'bottomRight' | 'left' | 'leftTop' | 'leftBottom' | 'right' | 'rightTop' | 'rightBottom' | string;
+export interface TooltipArrowPosition {
+    left?: number | string;
+    right?: number | string;
+    top?: number | string;
+    bottom?: number | string;
+}
+export interface TooltipStylePosition {
+    left: 'unset' | number;
+    right: 'unset' | number;
+    top: 'unset' | number;
+}
+export interface ITooltipProps {
+    /**
+     * Текст подсказки
+     * @example 'Это всплывающая подсказка.'
+     */
+    content?: string | any;
+    /**
+     * Позиционирование подсказки, относительно целевого элемента
+     */
+    position?: TooltipPosition;
+    /**
+     * Показывать ли подсказку сразу после рендера страницы
+     * @example true
+     */
+    defaultVisible?: boolean;
+    /**
+     * Стили для абсолютного позиционирования подсказки
+     */
+    style?: TooltipStylePosition;
+    /**
+     * Стили для позиционирования стрелки
+     * @example {left: 10}
+     */
+    arrowPosition?: TooltipArrowPosition;
+    /**
+     * Рассчет позиции подсказки
+     */
+    calculatePosition?: (tooltipDimensions: Record<string, any>, arrowDimensions: Record<string, any>) => void;
+    [key: string]: any;
+}
+export interface ITooltipViewProps extends ITooltipProps {
+    isTooltipVisible: boolean;
+    content: string | any;
+    position: TooltipPosition;
+    style: TooltipStylePosition;
+}
+declare function Tooltip(props: ITooltipProps): JSX.Element;
+declare namespace Tooltip {
+    var defaultProps: {
+        content: string;
+        position: string;
+        defaultVisible: boolean;
+        gap: number;
+        animationMs: number;
+    };
+}
+export default Tooltip;

package/ui/layout/Tooltip/Tooltip.js

@@ -1,114 +1,114 @@
-"use strict";
-var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    Object.defineProperty(o, k2, { enumerable: true, get: function() { return m[k]; } });
-}) : (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    o[k2] = m[k];
-}));
-var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
-    Object.defineProperty(o, "default", { enumerable: true, value: v });
-}) : function(o, v) {
-    o["default"] = v;
-});
-var __importStar = (this && this.__importStar) || function (mod) {
-    if (mod && mod.__esModule) return mod;
-    var result = {};
-    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
-    __setModuleDefault(result, mod);
-    return result;
-};
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-exports.__esModule = true;
-var React = __importStar(require("react"));
-var react_1 = require("react");
-var react_use_1 = require("react-use");
-var calculate_1 = __importDefault(require("../Tooltip/calculate"));
-var hooks_1 = require("../../../hooks");
-var TooltipPortalInner_1 = __importDefault(require("./TooltipPortalInner"));
-/*
-* @Todo + check all calculations + describe
-*       + 12 positions
-*       - custom styles / classes
-*       - defaultVisible -> logic
-*       - check window resize
-*       - check for more properties
-*       - fix arrow position (right, bottom) NOT centered
-*       - refactor code
-* */
-function Tooltip(props) {
-    var components = hooks_1.useComponents();
-    var _a = react_1.useState(false), isComponentExist = _a[0], setIsComponentExist = _a[1];
-    var _b = react_1.useState(props.defaultVisible), isTooltipVisible = _b[0], setIsTooltipVisible = _b[1];
-    var _c = react_1.useState({
-        left: null,
-        right: null,
-        top: null
-    }), style = _c[0], setStyle = _c[1];
-    var _d = react_1.useState({
-        left: null,
-        right: null,
-        top: null,
-        bottom: null
-    }), arrowPosition = _d[0], setArrowPosition = _d[1];
-    var timerRef = react_1.useRef(null);
-    var positionRef = react_1.useRef(props.position);
-    var childRef = react_1.useRef(null);
-    var onShowTooltip = react_1.useCallback(function () {
-        if (timerRef.current) {
-            clearTimeout(timerRef.current);
-        }
-        setIsComponentExist(true);
-        setIsTooltipVisible(false);
-        // TODO: How to wait setState callback?
-        setTimeout(function () { return setIsTooltipVisible(true); });
-    }, []);
-    var onHideTooltip = react_1.useCallback(function () {
-        setIsTooltipVisible(false);
-        if (timerRef.current) {
-            clearTimeout(timerRef.current);
-        }
-        timerRef.current = setTimeout(function () { return setIsComponentExist(false); }, props.animationMs);
-    }, [props.animationMs]);
-    // Основная функция расчета позиции
-    var calculatePosition = react_1.useCallback(function (tooltipSize, arrowSize) {
-        var result = calculate_1["default"](props.gap, positionRef.current, childRef.current, tooltipSize, arrowSize);
-        positionRef.current = result.position;
-        setStyle(result.style);
-        if (result.arrowPosition) {
-            setArrowPosition(result.arrowPosition);
-        }
-    }, [props.gap]);
-    react_use_1.useMount(function () {
-        if (isTooltipVisible) {
-            onShowTooltip();
-        }
-    });
-    if (!props.content) {
-        return props.children;
-    }
-    var TooltipView = components.ui.getView('layout.TooltipView');
-    var childrenElement = typeof props.children === 'object'
-        ? React.Children.only(props.children)
-        : undefined;
-    return (React.createElement(React.Fragment, null,
-        childrenElement
-            ? React.cloneElement(childrenElement, {
-                ref: childRef,
-                onMouseOver: onShowTooltip,
-                onMouseOut: onHideTooltip
-            })
-            : (React.createElement("span", { ref: childRef, onFocus: onShowTooltip, onMouseOver: onShowTooltip, onBlur: onHideTooltip, onMouseOut: onHideTooltip }, props.children)),
-        isComponentExist && (React.createElement(TooltipPortalInner_1["default"], null,
-            React.createElement(TooltipView, { isTooltipVisible: isTooltipVisible, content: props.content, position: positionRef.current, style: style, arrowPosition: arrowPosition, calculatePosition: calculatePosition })))));
-}
-Tooltip.defaultProps = {
-    content: '',
-    position: 'top',
-    defaultVisible: false,
-    gap: 16,
-    animationMs: 300
-};
-exports["default"] = Tooltip;
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    Object.defineProperty(o, k2, { enumerable: true, get: function() { return m[k]; } });
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+exports.__esModule = true;
+var React = __importStar(require("react"));
+var react_1 = require("react");
+var react_use_1 = require("react-use");
+var calculate_1 = __importDefault(require("../Tooltip/calculate"));
+var hooks_1 = require("../../../hooks");
+var TooltipPortalInner_1 = __importDefault(require("./TooltipPortalInner"));
+/*
+* @Todo + check all calculations + describe
+*       + 12 positions
+*       - custom styles / classes
+*       - defaultVisible -> logic
+*       - check window resize
+*       - check for more properties
+*       - fix arrow position (right, bottom) NOT centered
+*       - refactor code
+* */
+function Tooltip(props) {
+    var components = hooks_1.useComponents();
+    var _a = react_1.useState(false), isComponentExist = _a[0], setIsComponentExist = _a[1];
+    var _b = react_1.useState(props.defaultVisible), isTooltipVisible = _b[0], setIsTooltipVisible = _b[1];
+    var _c = react_1.useState({
+        left: null,
+        right: null,
+        top: null
+    }), style = _c[0], setStyle = _c[1];
+    var _d = react_1.useState({
+        left: null,
+        right: null,
+        top: null,
+        bottom: null
+    }), arrowPosition = _d[0], setArrowPosition = _d[1];
+    var timerRef = react_1.useRef(null);
+    var positionRef = react_1.useRef(props.position);
+    var childRef = react_1.useRef(null);
+    var onShowTooltip = react_1.useCallback(function () {
+        if (timerRef.current) {
+            clearTimeout(timerRef.current);
+        }
+        setIsComponentExist(true);
+        setIsTooltipVisible(false);
+        // TODO: How to wait setState callback?
+        setTimeout(function () { return setIsTooltipVisible(true); });
+    }, []);
+    var onHideTooltip = react_1.useCallback(function () {
+        setIsTooltipVisible(false);
+        if (timerRef.current) {
+            clearTimeout(timerRef.current);
+        }
+        timerRef.current = setTimeout(function () { return setIsComponentExist(false); }, props.animationMs);
+    }, [props.animationMs]);
+    // Основная функция расчета позиции
+    var calculatePosition = react_1.useCallback(function (tooltipSize, arrowSize) {
+        var result = calculate_1["default"](props.gap, positionRef.current, childRef.current, tooltipSize, arrowSize);
+        positionRef.current = result.position;
+        setStyle(result.style);
+        if (result.arrowPosition) {
+            setArrowPosition(result.arrowPosition);
+        }
+    }, [props.gap]);
+    react_use_1.useMount(function () {
+        if (isTooltipVisible) {
+            onShowTooltip();
+        }
+    });
+    if (!props.content) {
+        return props.children;
+    }
+    var TooltipView = components.ui.getView('layout.TooltipView');
+    var childrenElement = typeof props.children === 'object'
+        ? React.Children.only(props.children)
+        : undefined;
+    return (React.createElement(React.Fragment, null,
+        childrenElement
+            ? React.cloneElement(childrenElement, {
+                ref: childRef,
+                onMouseOver: onShowTooltip,
+                onMouseOut: onHideTooltip
+            })
+            : (React.createElement("span", { ref: childRef, onFocus: onShowTooltip, onMouseOver: onShowTooltip, onBlur: onHideTooltip, onMouseOut: onHideTooltip }, props.children)),
+        isComponentExist && (React.createElement(TooltipPortalInner_1["default"], null,
+            React.createElement(TooltipView, { isTooltipVisible: isTooltipVisible, content: props.content, position: positionRef.current, style: style, arrowPosition: arrowPosition, calculatePosition: calculatePosition })))));
+}
+Tooltip.defaultProps = {
+    content: '',
+    position: 'top',
+    defaultVisible: false,
+    gap: 16,
+    animationMs: 300
+};
+exports["default"] = Tooltip;

package/ui/layout/Tooltip/TooltipPortalInner.d.ts

@@ -1,6 +1,6 @@
-import * as React from 'react';
-import { IComponentsHocOutput } from '../../../hoc/components';
-export default class TooltipPortal extends React.PureComponent<IComponentsHocOutput> {
-    componentDidMount(): void;
-    render(): React.ReactPortal;
-}
+import * as React from 'react';
+interface ITooltipPortalProps {
+    children: React.ReactNode;
+}
+export default function TooltipPortal(props: ITooltipPortalProps): React.ReactPortal;
+export {};