@sima-land/ui-nucleons 45.0.0-alpha.2 → 45.0.0-alpha.20

package/with-tooltip/positioning-tooltip.js

@@ -1,80 +0,0 @@
-"use strict";
-var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    var desc = Object.getOwnPropertyDescriptor(m, k);
-    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
-      desc = { enumerable: true, get: function() { return m[k]; } };
-    }
-    Object.defineProperty(o, k2, desc);
-}) : (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 };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.PositioningTooltip = void 0;
-const react_1 = __importStar(require("react"));
-const viewport_1 = require("../context/viewport");
-const lodash_1 = require("lodash");
-const get_scroll_parent_1 = require("../helpers/get-scroll-parent");
-const utils_1 = require("./utils");
-const tooltip_1 = require("../tooltip");
-const layer_1 = require("../helpers/layer");
-const hooks_1 = require("../hooks");
-const on_1 = __importDefault(require("../helpers/on"));
-/**
- * Позиционируется относительно заданного элемента.
- * @param props Свойства.
- * @return Элемент.
- */
-const PositioningTooltip = ({ openerRef, children, onDismiss }) => {
-    const layer = (0, layer_1.useLayer)();
-    const tooltipRef = (0, react_1.useRef)(null);
-    const viewportRef = (0, react_1.useContext)(viewport_1.ViewportContext);
-    const place = (0, react_1.useCallback)(() => {
-        if (tooltipRef.current && openerRef.current) {
-            (0, utils_1.placeTooltip)(tooltipRef.current, openerRef.current, viewportRef.current || (0, get_scroll_parent_1.getScrollParent)(tooltipRef.current));
-            tooltipRef.current.style.opacity = '1';
-        }
-    }, [openerRef, viewportRef]);
-    (0, react_1.useEffect)(place);
-    (0, react_1.useEffect)(() => {
-        const offList = [
-            (0, on_1.default)(window, 'scroll', place),
-            (0, on_1.default)(window, 'resize', (0, lodash_1.debounce)(place, 200)),
-            // у тултипа и открывашки могут быть разные scroll-родители а может быть один,
-            // учитываем оба варианта и накидываем обработчик прокрутки
-            ...[tooltipRef, openerRef]
-                .map(ref => (0, get_scroll_parent_1.getScrollParent)(ref.current))
-                .filter(el => el !== document.body && el !== document.documentElement)
-                .reduce((a, b) => (!a.includes(b) && a.push(b), a), [])
-                .map(el => (0, on_1.default)(el, 'scroll', place)),
-        ];
-        return () => offList.forEach(fn => fn());
-    }, []);
-    (0, hooks_1.useOutsideClick)(tooltipRef, () => {
-        onDismiss && onDismiss();
-    });
-    return (react_1.default.createElement(tooltip_1.Tooltip, { ref: tooltipRef, style: {
-            position: 'absolute',
-            top: 0,
-            left: 0,
-            opacity: 0,
-            zIndex: layer + 1,
-        }, onClose: onDismiss }, children));
-};
-exports.PositioningTooltip = PositioningTooltip;

package/with-tooltip/utils.d.ts

@@ -1,38 +0,0 @@
-type DOMRectLike = Record<(typeof rectKeys)[number], number>;
-type CanPlaceFn = (holder: HTMLElement, tooltipEl: HTMLElement, area: DOMRectLike) => boolean;
-declare const rectKeys: readonly ["top", "left", "bottom", "right", "width", "height"];
-export declare const CanPlace: Record<'onRight' | 'onLeft' | 'onBottom' | 'onTop', CanPlaceFn>;
-export declare const PlaceOffset: {
-    reset: (element: HTMLElement) => void;
-    onRight: (tooltipEl: HTMLElement, holderEl: HTMLElement) => number;
-    onLeft: (tooltipEl: HTMLElement, holderEl: HTMLElement) => number;
-    onBottom: (tooltipEl: HTMLElement, holderEl: HTMLElement) => number;
-    onTop: (tooltipEl: HTMLElement, holderEl: HTMLElement) => number;
-};
-export declare const CorrectOffset: {
-    vertically: (tooltipEl: HTMLElement, holderEl: HTMLElement, area: DOMRectLike) => number;
-    horizontally: (tooltipEl: HTMLElement, area: DOMRectLike) => number;
-};
-/**
- * Позиционирует элемент подсказки относительно "держащего" элемента.
- * @param tooltipEl Элемент подсказки.
- * @param holderEl Держащий элемент.
- * @param viewportEl Элемент, определяющий прямоугольник в который нужно вписать тултип.
- */
-export declare const placeTooltip: (tooltipEl: HTMLElement, holderEl: HTMLElement, viewportEl: HTMLElement) => void;
-/**
- * Возвращает внутреннюю доступную область блока (с учетом прокруток).
- * @param element Элемент.
- * @return Прямоугольник.
- */
-export declare const getInnerRect: (element: Element) => DOMRectLike;
-/**
- * Получив элемент, вернет смещение, с которым можно задать координаты относительно левого верхнего угла страницы.
- * @param element Элемент, должен находиться в документе.
- * @return Смещение по осям.
- */
-export declare const getOriginCorrection: (element: HTMLElement) => {
-    x: number;
-    y: number;
-};
-export {};

package/with-tooltip/utils.js

@@ -1,162 +0,0 @@
-"use strict";
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.getOriginCorrection = exports.getInnerRect = exports.placeTooltip = exports.CorrectOffset = exports.PlaceOffset = exports.CanPlace = void 0;
-const bounds_of_1 = __importDefault(require("../helpers/bounds-of"));
-const get_scroll_parent_1 = require("../helpers/get-scroll-parent");
-const find_offset_parent_1 = require("../helpers/find-offset-parent");
-const lodash_1 = require("lodash");
-const SPACES = {
-    correction: 24,
-    toHolder: 8,
-    toArea: 16,
-};
-const rectKeys = ['top', 'left', 'bottom', 'right', 'width', 'height'];
-/**
- * Преобразует css-значение размера в число.
- * @param cssValue Значение, например "12.23px".
- * @return Число. Неожиданно, правда?
- */
-const asNumber = (cssValue) => parseFloat(cssValue.replace(/[A-z]/g, '')) || 0;
-/**
- * Складывает все аргументы.
- * @param  numbers Числа.
- * @return Число. Неожиданно, правда?
- */
-const sum = (...numbers) => numbers.reduce((a, b) => a + b);
-exports.CanPlace = {
-    onRight: (holderEl, tooltipEl, area) => area.right - (0, bounds_of_1.default)(holderEl).right - SPACES.correction > (0, bounds_of_1.default)(tooltipEl).width,
-    onLeft: (holderEl, tooltipEl, area) => (0, bounds_of_1.default)(holderEl).left - SPACES.correction - area.left > (0, bounds_of_1.default)(tooltipEl).width,
-    onBottom: (holderEl, tooltipEl, area) => (0, bounds_of_1.default)(tooltipEl).height < area.bottom - (0, bounds_of_1.default)(holderEl).bottom - SPACES.correction,
-    onTop: (holderEl, tooltipEl, area) => (0, bounds_of_1.default)(tooltipEl).height < (0, bounds_of_1.default)(holderEl).top - area.top - SPACES.correction,
-};
-exports.PlaceOffset = {
-    reset: (element) => {
-        element.style.top = '0';
-        element.style.left = '0';
-        element.style.bottom = '';
-        element.style.right = '';
-        element.style.maxHeight = '';
-    },
-    onRight: (tooltipEl, holderEl) => {
-        const correction = (0, exports.getOriginCorrection)(tooltipEl);
-        return sum(SPACES.toHolder, (0, bounds_of_1.default)(holderEl).right, correction.x);
-    },
-    onLeft: (tooltipEl, holderEl) => {
-        const correction = (0, exports.getOriginCorrection)(tooltipEl);
-        return sum((0, bounds_of_1.default)(holderEl).left, -(0, bounds_of_1.default)(tooltipEl).width, -SPACES.toHolder, correction.x);
-    },
-    onBottom: (tooltipEl, holderEl) => {
-        const correction = (0, exports.getOriginCorrection)(tooltipEl);
-        return sum((0, bounds_of_1.default)(holderEl).bottom, SPACES.toHolder, correction.y);
-    },
-    onTop: (tooltipEl, holderEl) => {
-        const correction = (0, exports.getOriginCorrection)(tooltipEl);
-        return sum((0, bounds_of_1.default)(holderEl).top, -(0, bounds_of_1.default)(tooltipEl).height, -SPACES.toHolder, correction.y);
-    },
-};
-exports.CorrectOffset = {
-    vertically: (tooltipEl, holderEl, area) => {
-        const tooltipBounds = (0, bounds_of_1.default)(tooltipEl);
-        const holderBounds = (0, bounds_of_1.default)(holderEl);
-        const correction = (0, exports.getOriginCorrection)(tooltipEl);
-        let result;
-        if (area.bottom - holderBounds.bottom > tooltipBounds.height + SPACES.correction) {
-            result = correction.y + holderBounds.top;
-        }
-        else if (holderBounds.bottom - area.top > tooltipBounds.height + SPACES.correction) {
-            result = correction.y + holderBounds.bottom - tooltipBounds.height;
-        }
-        else {
-            result = correction.y + SPACES.toArea;
-        }
-        return result;
-    },
-    horizontally: (tooltipEl, area) => {
-        const correction = (0, exports.getOriginCorrection)(tooltipEl);
-        return correction.x + area.left + SPACES.toArea;
-    },
-};
-/**
- * Позиционирует элемент подсказки относительно "держащего" элемента.
- * @param tooltipEl Элемент подсказки.
- * @param holderEl Держащий элемент.
- * @param viewportEl Элемент, определяющий прямоугольник в который нужно вписать тултип.
- */
-const placeTooltip = (tooltipEl, holderEl, viewportEl) => {
-    const area = (0, exports.getInnerRect)(viewportEl);
-    const offset = { x: 0, y: 0 };
-    exports.PlaceOffset.reset(tooltipEl);
-    if (exports.CanPlace.onRight(holderEl, tooltipEl, area)) {
-        offset.x = exports.PlaceOffset.onRight(tooltipEl, holderEl);
-        offset.y = exports.CorrectOffset.vertically(tooltipEl, holderEl, area);
-    }
-    else if (exports.CanPlace.onLeft(holderEl, tooltipEl, area)) {
-        offset.x = exports.PlaceOffset.onLeft(tooltipEl, holderEl);
-        offset.y = exports.CorrectOffset.vertically(tooltipEl, holderEl, area);
-    }
-    else if (exports.CanPlace.onBottom(holderEl, tooltipEl, area)) {
-        offset.y = exports.PlaceOffset.onBottom(tooltipEl, holderEl);
-        offset.x = exports.CorrectOffset.horizontally(tooltipEl, area);
-    }
-    else if (exports.CanPlace.onTop(holderEl, tooltipEl, area)) {
-        offset.y = exports.PlaceOffset.onTop(tooltipEl, holderEl);
-        offset.x = exports.CorrectOffset.horizontally(tooltipEl, area);
-    }
-    else {
-        offset.x = area.left + SPACES.toArea;
-        offset.y = area.top + SPACES.toArea;
-        tooltipEl.style.maxHeight = `${area.height - SPACES.toArea * 2}px`;
-    }
-    // вместо top/left/bottom/right используем translate3d, т.к. его расчет использует графический ускоритель
-    tooltipEl.style.transform = `translate3d(${offset.x}px, ${offset.y}px, 0)`;
-};
-exports.placeTooltip = placeTooltip;
-/**
- * Возвращает внутреннюю доступную область блока (с учетом прокруток).
- * @param element Элемент.
- * @return Прямоугольник.
- */
-const getInnerRect = (element) => {
-    const area = (0, lodash_1.pick)((0, bounds_of_1.default)(element), rectKeys);
-    if (element.scrollWidth > area.width) {
-        area.left = area.left - element.scrollLeft;
-        area.width = element.scrollWidth;
-        area.right = area.left + area.width;
-    }
-    if (element.scrollHeight > area.height) {
-        area.top = area.top - element.scrollTop;
-        area.height = element.scrollHeight;
-        area.bottom = area.top + area.height;
-    }
-    return area;
-};
-exports.getInnerRect = getInnerRect;
-/**
- * Получив элемент, вернет смещение, с которым можно задать координаты относительно левого верхнего угла страницы.
- * @param element Элемент, должен находиться в документе.
- * @return Смещение по осям.
- */
-const getOriginCorrection = (element) => {
-    const offsetParent = (0, find_offset_parent_1.findOffsetParent)(element);
-    const scrollParent = (0, get_scroll_parent_1.getScrollParent)(element);
-    const correction = { x: window.pageXOffset, y: window.pageYOffset };
-    if (offsetParent) {
-        const parentRect = (0, bounds_of_1.default)(offsetParent);
-        const parentStyle = getComputedStyle(offsetParent);
-        correction.x = -parentRect.left;
-        correction.y = -parentRect.top;
-        // border-[top/left] влияют на начало координат родителя, учитываем
-        correction.x -= asNumber(parentStyle.borderLeftWidth);
-        correction.y -= asNumber(parentStyle.borderTopWidth);
-    }
-    // если offsetParent имеет собственную прокрутку - учитываем её
-    if (offsetParent === scrollParent) {
-        correction.x += scrollParent.scrollLeft;
-        correction.y += scrollParent.scrollTop;
-    }
-    return correction;
-};
-exports.getOriginCorrection = getOriginCorrection;