@yandex/ui/esm/Drawer/Drawer.js

Yandex UI components

import { __assign, __read } from "tslib";
import React, { useEffect, useMemo, useState } from 'react';
import { useComponentRegistry } from '@bem-react/di';
import { usePreventScroll } from '../usePreventScroll';
import { useSpring, useClientHeight } from './Drawer.utils';
import { DrawerContent } from './Content/Drawer-Content';
import { cnDrawer } from './Drawer.const';
import './Drawer.css';
/**
 * Используется для создания шторки.
 * @param {IDrawerProps} props
 */
export var Drawer = function (props) {
    var Popup = useComponentRegistry(cnDrawer()).Popup;
    var className = props.className, visible = props.visible, nested = props.nested, _a = props.direction, direction = _a === void 0 ? 'bottom' : _a, innerRef = props.innerRef, animation = props.animation;
    // прогресс открытия шторки от 0 до 1
    var _b = __read(useState(0), 2), progress = _b[0], setProgress = _b[1];
    // признак того, что анимация временно отключена (напр. на время drag жеста)
    var _c = __read(useState(false), 2), springDisabled = _c[0], setSpringDisabled = _c[1];
    // спринговое значение прогресса и его производные
    var springImmediate = (animation.dragImmediate && springDisabled) || animation.disabled;
    var springValue = useSpring(progress, animation.tension, animation.friction, springImmediate);
    var springVisible = springValue > 0;
    // решает баг в iOS: в альбомной ориентации fixed элементы с
    // height: 100% показываются некорректно если виден navigation bar
    var clientHeight = useClientHeight();
    var popupStyle = useMemo(function () { return ({ height: clientHeight && clientHeight + 'px' }); }, [clientHeight]);
    usePreventScroll({ enabled: springVisible });
    useEffect(function () {
        setSpringDisabled(false);
        setProgress(visible ? 1 : 0);
    }, [visible, animation]);
    return (React.createElement(Popup, { className: cnDrawer({ visible: springVisible, direction: direction, nested: nested }, [className]), visible: springVisible, innerRef: innerRef, style: popupStyle, keepMounted: props.keepMounted, zIndex: props.zIndex, scope: props.scope },
        React.createElement(DrawerContent, __assign({}, props, { springValue: springValue, setProgress: setProgress, setSpringDisabled: setSpringDisabled }))));
};
Drawer.displayName = cnDrawer();