@ozen-ui/kit/__inner__/esm/components/Sidebar/modules/SidebarCollapsibleItem/hooks/useSidebarCollapsibleItemAnimation.js

React component library

import { __read } from "tslib";
import { useEffect, useState } from 'react';
import { useStoredValue } from '../../../../../hooks/useStoredValue';
import { useThemeVariables } from '../../../../../hooks/useThemeVariables';
import { SIDEBAR_WIDTH_BY_VARIANT } from '../../../constants';
import { useSidebarContext } from '../../../SidebarContext';
export var useSidebarCollapsibleItemAnimation = function (_a) {
    var autoCenter = _a.autoCenter, ref = _a.ref, fixedRef = _a.fixedRef, isCollapsed = _a.isCollapsed;
    var _b = useSidebarContext(), variant = _b.variant, size = _b.size;
    var transition = useThemeVariables().transition;
    var _c = __read(useState(false), 2), wasRender = _c[0], setWasRender = _c[1];
    var isFirstAnimation = useStoredValue(true);
    var currentWidths = 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 = useStoredValue(isCollapsed);
    useEffect(function () {
        setWasRender(true);
    }, []);
    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,
    };
};