@steroidsjs/core 3.0.0-beta.81 → 3.0.0-beta.82

package/ui/layout/Tooltip/Tooltip.js

@@ -29,8 +29,8 @@ 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 useAbsolutePositioning_1 = __importDefault(require("../../../hooks/useAbsolutePositioning"));
 var TooltipPortalInner_1 = __importDefault(require("./TooltipPortalInner"));
 /*
 * @Todo + check all calculations + describe
@@ -44,53 +44,21 @@ var TooltipPortalInner_1 = __importDefault(require("./TooltipPortalInner"));
 * */
 function Tooltip(props) {
     var components = (0, hooks_1.useComponents)();
-    var _a = (0, react_1.useState)(false), isComponentExist = _a[0], setIsComponentExist = _a[1];
-    var _b = (0, react_1.useState)(props.defaultVisible), isTooltipVisible = _b[0], setIsTooltipVisible = _b[1];
-    var _c = (0, react_1.useState)({
-        left: null,
-        right: null,
-        top: null
-    }), style = _c[0], setStyle = _c[1];
-    var _d = (0, react_1.useState)({
-        left: null,
-        right: null,
-        top: null,
-        bottom: null
-    }), arrowPosition = _d[0], setArrowPosition = _d[1];
-    var timerRef = (0, react_1.useRef)(null);
-    var positionRef = (0, react_1.useRef)(props.position);
+    var _a = (0, useAbsolutePositioning_1["default"])({
+        componentDestroyDelay: props.animationMs,
+        position: props.position,
+        children: props.children,
+        gap: props.gap,
+        defaultVisible: props.defaultVisible
+    }), isComponentExist = _a.isComponentExist, isComponentVisible = _a.isComponentVisible, calculateAbsolutePosition = _a.calculateAbsolutePosition, onShow = _a.onShow, onHide = _a.onHide, position = _a.position, arrowPosition = _a.arrowPosition, style = _a.style;
     var childRef = (0, react_1.useRef)(null);
-    var onShowTooltip = (0, 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 = (0, 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 = (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) {
-            setArrowPosition(result.arrowPosition);
-        }
-    }, [props.gap]);
+        calculateAbsolutePosition(position, childRef.current, tooltipSize, arrowSize);
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, []);
     (0, react_use_1.useMount)(function () {
-        if (isTooltipVisible) {
-            onShowTooltip();
+        if (isComponentVisible) {
+            onShow();
         }
     });
     if (!props.content) {
@@ -104,12 +72,12 @@ function Tooltip(props) {
         childrenElement
             ? React.cloneElement(childrenElement, {
                 ref: childRef,
-                onMouseOver: onShowTooltip,
-                onMouseOut: onHideTooltip
+                onMouseOver: onShow,
+                onMouseOut: onHide
             })
-            : (React.createElement("span", { ref: childRef, onFocus: onShowTooltip, onMouseOver: onShowTooltip, onBlur: onHideTooltip, onMouseOut: onHideTooltip }, props.children)),
+            : (React.createElement("span", { ref: childRef, onFocus: onShow, onMouseOver: onShow, onBlur: onHide, onMouseOut: onHide }, 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 })))));
+            React.createElement(TooltipView, { isTooltipVisible: isComponentVisible, content: props.content, position: position, style: style, arrowPosition: arrowPosition, calculatePosition: calculatePosition })))));
 }
 Tooltip.defaultProps = {
     content: '',

package/utils/calculateComponentAbsolutePosition.d.ts

@@ -0,0 +1,6 @@
+import { IComponentArrowPosition, IComponentStylePosition } from '../hooks/useAbsolutePositioning';
+export default function calculateComponentAbsolutePosition(gap: any, position: any, parentRef: any, componentSize: any, arrowSize?: any, hasAutoPositioning?: boolean): {
+    style: IComponentStylePosition;
+    position: any;
+    arrowPosition: IComponentArrowPosition;
+};

package/{ui/layout/Tooltip/calculate.js → utils/calculateComponentAbsolutePosition.js}

@@ -1,6 +1,9 @@
 "use strict";
 exports.__esModule = true;
-function calculate(gap, position, parentRef, tooltipSize, arrowSize) {
+var useAbsolutePositioning_1 = require("../hooks/useAbsolutePositioning");
+function calculateComponentAbsolutePosition(gap, position, parentRef, componentSize, arrowSize, hasAutoPositioning) {
+    if (arrowSize === void 0) { arrowSize = null; }
+    if (hasAutoPositioning === void 0) { hasAutoPositioning = true; }
     if (process.env.IS_SSR) {
         return null;
     }
@@ -11,54 +14,57 @@ function calculate(gap, position, parentRef, tooltipSize, arrowSize) {
     parentDimensions.top += window.scrollY;
     // eslint-disable-next-line default-case
     switch (position) {
-        case 'top':
-        case 'topLeft':
-        case 'topRight':
+        case useAbsolutePositioning_1.Position.TOP:
+        case useAbsolutePositioning_1.Position.TOP_LEFT:
+        case useAbsolutePositioning_1.Position.TOP_RIGHT:
             // Проверка - выходит ли tooltip за верхний край страницы?
             // Если да - меняем позицию на bottom
-            if ((parentDimensions.top - window.scrollY) <= Math.round(tooltipSize.height + gap)) {
+            if (hasAutoPositioning
+                && ((parentDimensions.top - window.scrollY) <= Math.round(componentSize.height + gap))) {
                 style.top = parentDimensions.top + parentDimensions.height;
-                position = position.replace('top', 'bottom');
+                position = position.replace(useAbsolutePositioning_1.Position.TOP, useAbsolutePositioning_1.Position.BOTTOM);
             }
             else {
-                style.top = parentDimensions.top - tooltipSize.height;
+                style.top = parentDimensions.top - componentSize.height;
             }
             break;
-        case 'bottom':
-        case 'bottomLeft':
-        case 'bottomRight':
+        case useAbsolutePositioning_1.Position.BOTTOM:
+        case useAbsolutePositioning_1.Position.BOTTOM_LEFT:
+        case useAbsolutePositioning_1.Position.BOTTOM_RIGHT:
             /// Проверка - выходит ли tooltip за нижний край страницы?
             // Если да - меняем позицию на top
-            if ((window.innerHeight - (parentDimensions.top + parentDimensions.height - window.scrollY))
-                <= Math.round(tooltipSize.height + gap)) {
-                style.top = parentDimensions.top - tooltipSize.height;
-                position = position.replace('bottom', 'top');
+            if (hasAutoPositioning
+                && ((window.innerHeight - (parentDimensions.top + parentDimensions.height - window.scrollY))
+                    <= Math.round(componentSize.height + gap))) {
+                style.top = parentDimensions.top - componentSize.height;
+                position = position.replace(useAbsolutePositioning_1.Position.BOTTOM, useAbsolutePositioning_1.Position.TOP);
             }
             else {
                 style.top = parentDimensions.top + parentDimensions.height;
             }
             break;
-        case 'left':
-        case 'leftTop':
-        case 'leftBottom':
+        case useAbsolutePositioning_1.Position.LEFT:
+        case useAbsolutePositioning_1.Position.LEFT_TOP:
+        case useAbsolutePositioning_1.Position.LEFT_BOTTOM:
             // Проверка - выходит ли tooltip за левый край страницы?
             // Если да - меняем позицию на right
-            if (parentDimensions.left <= Math.round(tooltipSize.width + gap)) {
+            if (hasAutoPositioning && (parentDimensions.left <= Math.round(componentSize.width + gap))) {
                 style.left = parentDimensions.right;
-                position = position.replace('left', 'right');
+                position = position.replace(useAbsolutePositioning_1.Position.LEFT, useAbsolutePositioning_1.Position.RIGHT);
             }
             else {
-                style.left = parentDimensions.left - tooltipSize.width;
+                style.left = parentDimensions.left - componentSize.width;
             }
             break;
-        case 'right':
-        case 'rightTop':
-        case 'rightBottom':
+        case useAbsolutePositioning_1.Position.RIGHT:
+        case useAbsolutePositioning_1.Position.RIGHT_TOP:
+        case useAbsolutePositioning_1.Position.RIGHT_BOTTOM:
             // Проверка - выходит ли tooltip за правый край страницы?
             // Если да - меняем позицию на left
-            if (document.body.clientWidth - parentDimensions.right <= Math.round(tooltipSize.width + gap)) {
-                style.left = parentDimensions.left - tooltipSize.width;
-                position = position.replace('right', 'left');
+            if (hasAutoPositioning
+                && (document.body.clientWidth - parentDimensions.right <= Math.round(componentSize.width + gap))) {
+                style.left = parentDimensions.left - componentSize.width;
+                position = position.replace(useAbsolutePositioning_1.Position.RIGHT, useAbsolutePositioning_1.Position.LEFT);
             }
             else {
                 style.left = parentDimensions.right;
@@ -67,45 +73,45 @@ function calculate(gap, position, parentRef, tooltipSize, arrowSize) {
     }
     // eslint-disable-next-line default-case
     switch (position) {
-        case 'top':
-        case 'bottom':
+        case useAbsolutePositioning_1.Position.TOP:
+        case useAbsolutePositioning_1.Position.BOTTOM:
             // Выравнивание по середине
-            style.left = (parentDimensions.left + (parentDimensions.width / 2)) - (tooltipSize.width / 2);
+            style.left = (parentDimensions.left + (parentDimensions.width / 2)) - (componentSize.width / 2);
             break;
-        case 'topLeft':
-        case 'bottomLeft':
+        case useAbsolutePositioning_1.Position.TOP_LEFT:
+        case useAbsolutePositioning_1.Position.BOTTOM_LEFT:
             // Ширина tooltip больше родителя - стрелка на середину родителя
             style.left = parentDimensions.left;
-            if (parentDimensions.width < tooltipSize.width) {
+            if (arrowSize && (parentDimensions.width < componentSize.width)) {
                 arrowPosition = { left: parentDimensions.width / 2 };
             }
             break;
-        case 'topRight':
-        case 'bottomRight':
+        case useAbsolutePositioning_1.Position.TOP_RIGHT:
+        case useAbsolutePositioning_1.Position.BOTTOM_RIGHT:
             // Ширина tooltip больше родителя - стрелка на середину родителя
-            style.left = parentDimensions.right - tooltipSize.width;
-            if (parentDimensions.width < tooltipSize.width) {
+            style.left = parentDimensions.right - componentSize.width;
+            if (arrowSize && (parentDimensions.width < componentSize.width)) {
                 arrowPosition = {
                     left: null,
                     right: (parentDimensions.width / 2) - (arrowSize.width / 2)
                 };
             }
             break;
-        case 'left':
-        case 'right':
-            style.top = (parentDimensions.top + (parentDimensions.height / 2)) - (tooltipSize.height / 2);
+        case useAbsolutePositioning_1.Position.LEFT:
+        case useAbsolutePositioning_1.Position.RIGHT:
+            style.top = (parentDimensions.top + (parentDimensions.height / 2)) - (componentSize.height / 2);
             break;
-        case 'leftTop':
-        case 'rightTop':
+        case useAbsolutePositioning_1.Position.LEFT_TOP:
+        case useAbsolutePositioning_1.Position.RIGHT_TOP:
             style.top = parentDimensions.top;
-            if (parentDimensions.height < (tooltipSize.height)) {
+            if (arrowSize && (parentDimensions.height < componentSize.height)) {
                 arrowPosition = { top: parentDimensions.height / 2 };
             }
             break;
-        case 'leftBottom':
-        case 'rightBottom':
-            style.top = parentDimensions.top + parentDimensions.height - tooltipSize.height;
-            if (parentDimensions.height < tooltipSize.height) {
+        case useAbsolutePositioning_1.Position.LEFT_BOTTOM:
+        case useAbsolutePositioning_1.Position.RIGHT_BOTTOM:
+            style.top = parentDimensions.top + parentDimensions.height - componentSize.height;
+            if (arrowSize && (parentDimensions.height < componentSize.height)) {
                 arrowPosition = {
                     bottom: (parentDimensions.height / 2) - (arrowSize.height / 2)
                 };
@@ -115,20 +121,20 @@ function calculate(gap, position, parentRef, tooltipSize, arrowSize) {
     // Проверка - при позиционировании top/bottom tooltip не выходит за пределы страницы по горизонтали
     if (position.includes('top') || position.includes('bottom')) {
         if (!position.includes('Left')
-            && (style.left < 0 || parentDimensions.left <= Math.round((tooltipSize.width - parentDimensions.width) + gap))) {
+            && (style.left < 0 || parentDimensions.left <= Math.round((componentSize.width - parentDimensions.width) + gap))) {
             style.right = null;
             position = position.replace('Right', 'Left');
             // Если ширина tooltip больше ширины родителя - выставить стрелку на середину родителя
-            if (parentDimensions.left < tooltipSize.width) {
+            if (parentDimensions.left < componentSize.width) {
                 arrowPosition = { left: parentDimensions.width / 2 };
             }
             style.left = parentDimensions.left;
         }
-        if (!position.includes('Right')
+        else if (!position.includes('Right')
             && (document.body.clientWidth - parentDimensions.right
-                <= Math.round((tooltipSize.width - parentDimensions.width) + gap))) {
+                <= Math.round((componentSize.width - parentDimensions.width) + gap))) {
             position = position.replace('Left', 'Right');
-            if (parentDimensions.width < tooltipSize.width) {
+            if (arrowSize && (parentDimensions.width < componentSize.width)) {
                 arrowPosition = {
                     left: null,
                     right: (parentDimensions.width / 2) - (arrowSize.width / 2)
@@ -141,25 +147,25 @@ function calculate(gap, position, parentRef, tooltipSize, arrowSize) {
     // Проверка - при позиционировании left/right tooltip не выходит за пределы страницы по вертикали
     if (position.includes('left') || position.includes('right')) {
         if (!position.includes('Top')
-            && parentDimensions.top - window.scrollY <= Math.round((tooltipSize.height - parentDimensions.height) + gap)) {
+            && parentDimensions.top - window.scrollY <= Math.round((componentSize.height - parentDimensions.height) + gap)) {
             position = position.replace('Bottom', 'Top');
-            if (parentDimensions.height < tooltipSize.height) {
+            if (parentDimensions.height < componentSize.height) {
                 arrowPosition = { top: parentDimensions.height / 2 };
             }
             style.top = parentDimensions.top;
         }
-        if (!position.includes('Bottom')
+        else if (!position.includes('Bottom')
             && (window.innerHeight - (parentDimensions.top + parentDimensions.height - window.scrollY)
-                <= Math.round((tooltipSize.height - parentDimensions.height) + gap))) {
+                <= Math.round((componentSize.height - parentDimensions.height) + gap))) {
             position = position.replace('Top', 'Bottom');
-            if (parentDimensions.height < tooltipSize.height) {
+            if (arrowSize && (parentDimensions.height < componentSize.height)) {
                 arrowPosition = {
                     bottom: (parentDimensions.height / 2) - (arrowSize.height / 2)
                 };
             }
-            style.top = parentDimensions.top + parentDimensions.height - tooltipSize.height;
+            style.top = parentDimensions.top + parentDimensions.height - componentSize.height;
         }
     }
     return { style: style, position: position, arrowPosition: arrowPosition };
 }
-exports["default"] = calculate;
+exports["default"] = calculateComponentAbsolutePosition;

package/utils/calendar.js

@@ -8,7 +8,9 @@ exports.convertDate = void 0;
 /* eslint-disable import/prefer-default-export */
 var dayjs_1 = __importDefault(require("dayjs"));
 var utc_1 = __importDefault(require("dayjs/plugin/utc"));
+var customParseFormat_1 = __importDefault(require("dayjs/plugin/customParseFormat"));
 dayjs_1["default"].extend(utc_1["default"]);
+dayjs_1["default"].extend(customParseFormat_1["default"]);
 var convertDate = function (date, fromFormats, toFormat, isUtc, dateInUtc) {
     if (toFormat === void 0) { toFormat = null; }
     if (isUtc === void 0) { isUtc = false; }

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

@@ -1,6 +0,0 @@
-import { ITooltipArrowPosition, ITooltipStylePosition } from '../Tooltip/Tooltip';
-export default function calculate(gap: any, position: any, parentRef: any, tooltipSize: any, arrowSize: any): {
-    style: ITooltipStylePosition;
-    position: any;
-    arrowPosition: ITooltipArrowPosition;
-};