@ozen-ui/kit

Version:
React component library
108 lines (107 loc) • 3.95 kB
JavaScript
"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.useSidebarCollapsibleItemAnimation = void 0;
var tslib_1 = require("tslib");
var react_1 = require("react");
var useStoredValue_1 = require("../../../../../hooks/useStoredValue");
var useThemeVariables_1 = require("../../../../../hooks/useThemeVariables");
var constants_1 = require("../../../constants");
var SidebarContext_1 = require("../../../SidebarContext");
var useSidebarCollapsibleItemAnimation = function (_a) {
    var autoCenter = _a.autoCenter, ref = _a.ref, fixedRef = _a.fixedRef, isCollapsed = _a.isCollapsed;
    var _b = (0, SidebarContext_1.useSidebarContext)(), variant = _b.variant, size = _b.size;
    var transition = (0, useThemeVariables_1.useThemeVariables)().transition;
    var _c = tslib_1.__read((0, react_1.useState)(false), 2), wasRender = _c[0], setWasRender = _c[1];
    var isFirstAnimation = (0, useStoredValue_1.useStoredValue)(true);
    var currentWidths = constants_1.SIDEBAR_WIDTH_BY_VARIANT[size];
    var calculateCenter = function () {
        var _a;
        if (!autoCenter) {
            return null;
        }
        var element = ref.current;
        if (!element) {
            return null;
        }
        var parent = (_a = element.parentElement) === null || _a === void 0 ? void 0 : _a.getBoundingClientRect();
        if (!parent) {
            return null;
        }
        var fixed = fixedRef.current;
        if (!fixed) {
            return null;
        }
        var fixedRect = fixed.getBoundingClientRect();
        var panelWidth = currentWidths[variant];
        var targetLeftCenter = parent.left + (panelWidth - fixedRect.width) / 2;
        var dx = fixedRect.left - targetLeftCenter;
        return Math.abs(dx);
    };
    var onEnter = function () {
        if (!autoCenter) {
            return;
        }
        var parent = ref.current;
        var fixed = fixedRef.current;
        if (!fixed || !parent) {
            return;
        }
        var originalTransform = fixed.style.transform;
        parent.style.marginInline = '0';
        fixed.style.transition = '';
        fixed.style.transform = '';
        var centerX = calculateCenter();
        if (centerX === null) {
            return;
        }
        fixed.style.transform = originalTransform;
        fixed.getBoundingClientRect();
        if (!isFirstAnimation.current) {
            fixed.style.transition = "".concat(transition.default, " transform");
        }
        fixed.style.transform = "translateX(".concat(centerX, "px)");
        isFirstAnimation.current = false;
    };
    var onExit = function () {
        if (!autoCenter) {
            return;
        }
        var fixed = fixedRef.current;
        if (!fixed) {
            return;
        }
        fixed.style.transition = "".concat(transition.default, " transform");
        fixed.style.transform = "translate(0px)";
        isFirstAnimation.current = false;
    };
    var onTransitionEnd = function () {
        var node = ref.current;
        if (!node) {
            return;
        }
        node.style.transition = '';
        node.style.transform = '';
    };
    var previousIsCollapsed = (0, useStoredValue_1.useStoredValue)(isCollapsed);
    (0, react_1.useEffect)(function () {
        setWasRender(true);
    }, []);
    (0, react_1.useEffect)(function () {
        if (!wasRender) {
            return;
        }
        if (previousIsCollapsed.current === isCollapsed) {
            onEnter();
        }
        previousIsCollapsed.current = isCollapsed;
    }, [variant]);
    var hasMarginAutoClass = isCollapsed && autoCenter && !wasRender;
    return {
        calculateCenter: calculateCenter,
        onExit: onExit,
        onEnter: onEnter,
        onTransitionEnd: onTransitionEnd,
        hasMarginAutoClass: hasMarginAutoClass,
    };
};
exports.useSidebarCollapsibleItemAnimation = useSidebarCollapsibleItemAnimation;