@yandex/ui
Version:
Yandex UI components
41 lines (40 loc) • 2.82 kB
JavaScript
;
Object.defineProperty(exports, "__esModule", { value: true });
exports.Drawer = void 0;
var tslib_1 = require("tslib");
var react_1 = tslib_1.__importStar(require("react"));
var di_1 = require("@bem-react/di");
var usePreventScroll_1 = require("../usePreventScroll");
var Drawer_utils_1 = require("./Drawer.utils");
var Drawer_Content_1 = require("./Content/Drawer-Content");
var Drawer_const_1 = require("./Drawer.const");
require("./Drawer.css");
/**
* Используется для создания шторки.
* @param {IDrawerProps} props
*/
var Drawer = function (props) {
var Popup = di_1.useComponentRegistry(Drawer_const_1.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 = tslib_1.__read(react_1.useState(0), 2), progress = _b[0], setProgress = _b[1];
// признак того, что анимация временно отключена (напр. на время drag жеста)
var _c = tslib_1.__read(react_1.useState(false), 2), springDisabled = _c[0], setSpringDisabled = _c[1];
// спринговое значение прогресса и его производные
var springImmediate = (animation.dragImmediate && springDisabled) || animation.disabled;
var springValue = Drawer_utils_1.useSpring(progress, animation.tension, animation.friction, springImmediate);
var springVisible = springValue > 0;
// решает баг в iOS: в альбомной ориентации fixed элементы с
// height: 100% показываются некорректно если виден navigation bar
var clientHeight = Drawer_utils_1.useClientHeight();
var popupStyle = react_1.useMemo(function () { return ({ height: clientHeight && clientHeight + 'px' }); }, [clientHeight]);
usePreventScroll_1.usePreventScroll({ enabled: springVisible });
react_1.useEffect(function () {
setSpringDisabled(false);
setProgress(visible ? 1 : 0);
}, [visible, animation]);
return (react_1.default.createElement(Popup, { className: Drawer_const_1.cnDrawer({ visible: springVisible, direction: direction, nested: nested }, [className]), visible: springVisible, innerRef: innerRef, style: popupStyle, keepMounted: props.keepMounted, zIndex: props.zIndex, scope: props.scope },
react_1.default.createElement(Drawer_Content_1.DrawerContent, tslib_1.__assign({}, props, { springValue: springValue, setProgress: setProgress, setSpringDisabled: setSpringDisabled }))));
};
exports.Drawer = Drawer;
exports.Drawer.displayName = Drawer_const_1.cnDrawer();