@alfalab/core-components-bottom-sheet 6.1.0 → 6.2.1

package/modern/component-1cd1bc34.js

@@ -1,221 +0,0 @@
-import React, { useContext, useEffect, forwardRef, useState, useRef, useCallback } from 'react';
-import { use100vh } from 'react-div-100vh';
-import mergeRefs from 'react-merge-refs';
-import { useSwipeable } from 'react-swipeable';
-import cn from 'classnames';
-import { BaseModalContext, BaseModal } from '@alfalab/core-components-base-modal/modern';
-import { Footer } from './components/footer/Component.js';
-import { NavigationBar } from '@alfalab/core-components-navigation-bar/modern';
-import { SwipeableBackdrop } from './components/swipeable-backdrop/Component.js';
-
-const getDataTestId = (dataTestId, element) => {
-    const elementPart = element ? `-${element.toLowerCase()}` : '';
-    return dataTestId ? `${dataTestId}${elementPart}` : undefined;
-};
-
-const styles$1 = {"headerWrapper":"bottom-sheet__headerWrapper_1034c","hasContent":"bottom-sheet__hasContent_1034c","header":"bottom-sheet__header_1034c","sticky":"bottom-sheet__sticky_1034c","highlighted":"bottom-sheet__highlighted_1034c","justifyEnd":"bottom-sheet__justifyEnd_1034c","addon":"bottom-sheet__addon_1034c","addonFixed":"bottom-sheet__addonFixed_1034c","title":"bottom-sheet__title_1034c","titleCenter":"bottom-sheet__titleCenter_1034c","titleLeft":"bottom-sheet__titleLeft_1034c","trimTitle":"bottom-sheet__trimTitle_1034c"};
-require('./components/header/index.css')
-
-const Header = ({ className, sticky, title, children, ...restProps }) => {
-    const { setHeaderOffset, setHasHeader, headerHighlighted, onClose } = useContext(BaseModalContext);
-    useEffect(() => {
-        setHeaderOffset(HEADER_OFFSET);
-    }, [setHeaderOffset]);
-    useEffect(() => {
-        setHasHeader(true);
-    }, [setHasHeader]);
-    const hasContent = Boolean(title || children);
-    return (React.createElement(NavigationBar, { ...restProps, title: title, onClose: onClose, sticky: sticky, view: 'mobile', className: cn(styles$1.headerWrapper, className, {
-            [styles$1.highlighted]: hasContent && headerHighlighted && sticky,
-            [styles$1.sticky]: sticky,
-            [styles$1.hasContent]: hasContent,
-        }), contentClassName: cn(styles$1.title) }, children));
-};
-
-const styles = {"modal":"bottom-sheet__modal_sul96","component":"bottom-sheet__component_sul96","withTransition":"bottom-sheet__withTransition_sul96","scrollableContainer":"bottom-sheet__scrollableContainer_sul96","marker":"bottom-sheet__marker_sul96","content":"bottom-sheet__content_sul96","noHeader":"bottom-sheet__noHeader_sul96","noFooter":"bottom-sheet__noFooter_sul96","scrollLocked":"bottom-sheet__scrollLocked_sul96","appear":"bottom-sheet__appear_sul96","enter":"bottom-sheet__enter_sul96","appearActive":"bottom-sheet__appearActive_sul96","enterActive":"bottom-sheet__enterActive_sul96","enterDone":"bottom-sheet__enterDone_sul96","appearDone":"bottom-sheet__appearDone_sul96","exit":"bottom-sheet__exit_sul96","exitActive":"bottom-sheet__exitActive_sul96","background-accent":"bottom-sheet__background-accent_sul96","background-info":"bottom-sheet__background-info_sul96","background-attention-muted":"bottom-sheet__background-attention-muted_sul96","background-positive-muted":"bottom-sheet__background-positive-muted_sul96","background-negative-muted":"bottom-sheet__background-negative-muted_sul96","background-primary":"bottom-sheet__background-primary_sul96","background-primary-inverted":"bottom-sheet__background-primary-inverted_sul96","background-secondary":"bottom-sheet__background-secondary_sul96","background-secondary-inverted":"bottom-sheet__background-secondary-inverted_sul96","background-tertiary":"bottom-sheet__background-tertiary_sul96","background-tertiary-inverted":"bottom-sheet__background-tertiary-inverted_sul96","background-quaternary":"bottom-sheet__background-quaternary_sul96","background-quaternary-inverted":"bottom-sheet__background-quaternary-inverted_sul96","background-specialbg-component":"bottom-sheet__background-specialbg-component_sul96","background-specialbg-component-inverted":"bottom-sheet__background-specialbg-component-inverted_sul96","background-specialbg-primary-grouped":"bottom-sheet__background-specialbg-primary-grouped_sul96","background-specialbg-secondary-grouped":"bottom-sheet__background-specialbg-secondary-grouped_sul96","background-specialbg-tertiary-grouped":"bottom-sheet__background-specialbg-tertiary-grouped_sul96","background-specialbg-secondary-transparent":"bottom-sheet__background-specialbg-secondary-transparent_sul96","background-specialbg-secondary-transparent-inverted":"bottom-sheet__background-specialbg-secondary-transparent-inverted_sul96","background-specialbg-tertiary-transparent":"bottom-sheet__background-specialbg-tertiary-transparent_sul96","background-specialbg-tertiary-transparent-inverted":"bottom-sheet__background-specialbg-tertiary-transparent-inverted_sul96"};
-require('./index.css')
-
-const TIMEOUT = 300;
-const SWIPE_CLOSE_VELOCITY = 0.4;
-const MIN_BACKDROP_OPACITY = 0.2;
-const HEADER_HEIGHT = 56;
-const MARKET_HEIGHT = 24;
-/* Верхний отступ шторки, если она открыта на максимальную высоту */
-const HEADER_OFFSET = 24;
-const CLOSE_OFFSET = 0.2;
-const BottomSheet = forwardRef(({ open, title, container, backgroundColor, titleSize = 'default', subtitle, actionButton, contentClassName, containerClassName, containerProps, headerClassName, footerClassName, addonClassName, closerClassName, backerClassName, modalClassName, modalWrapperClassName, className, leftAddons, rightAddons, bottomAddons, hasCloser, hasBacker, titleAlign = 'left', trimTitle, stickyHeader, stickyFooter = true, initialHeight = 'default', hideOverlay, hideHeader, disableOverlayClick, disableBlockingScroll, children, zIndex, transitionProps = {}, dataTestId, swipeable = true, backdropProps, scrollableContainerRef = () => null, onClose, onBack, }, ref) => {
-    const [sheetOffset, setSheetOffset] = useState(0);
-    const [backdropOpacity, setBackdropOpacity] = useState(1);
-    const [scrollLocked, setScrollLocked] = useState(false);
-    const sheetHeight = useRef(0);
-    const scrollableContainer = useRef(null);
-    const scrollableContainerScrollValue = useRef(0);
-    const emptyHeader = !hasCloser && !leftAddons && !title && !hasBacker && !rightAddons;
-    // eslint-disable-next-line  @typescript-eslint/no-non-null-assertion
-    const fullHeight = use100vh();
-    const targetHeight = `${fullHeight - HEADER_OFFSET}px`;
-    const titleIsReactElement = React.isValidElement(title);
-    const headerProps = {
-        ...(titleIsReactElement
-            ? { children: title }
-            : { title: title ? title?.toString() : undefined }),
-        scrollableParentRef: scrollableContainer,
-        className: headerClassName,
-        addonClassName,
-        closerClassName,
-        backButtonClassName: backerClassName,
-        leftAddons,
-        rightAddons,
-        bottomAddons,
-        hasCloser,
-        hasBackButton: hasBacker,
-        align: titleAlign,
-        trim: trimTitle,
-        sticky: stickyHeader,
-        dataTestId: getDataTestId(dataTestId, 'header'),
-        onBack,
-        titleSize,
-        subtitle,
-        onClose,
-    };
-    const getBackdropOpacity = (offset) => {
-        if (sheetHeight.current === 0)
-            return MIN_BACKDROP_OPACITY;
-        const opacity = 1 - (1 - MIN_BACKDROP_OPACITY) * (offset / sheetHeight.current);
-        return Number(opacity.toFixed(2));
-    };
-    const getSheetOffset = (deltaY) => {
-        let offset = deltaY > 0 ? 0 : -deltaY;
-        offset -= scrollableContainerScrollValue.current;
-        return Math.floor(Math.max(0, offset));
-    };
-    /**
-     * Если контент внутри шторки скроллится - то шторка не должна свайпаться
-     * Если шапка внутри шторки зафиксирована - то шторка должна свайпаться только в области шапки
-     */
-    const shouldSkipSwiping = (offsetY) => {
-        if (!swipeable)
-            return true;
-        if (!scrollableContainer.current ||
-            (stickyHeader && offsetY <= HEADER_HEIGHT + HEADER_OFFSET) ||
-            (!stickyHeader && offsetY <= MARKET_HEIGHT + HEADER_OFFSET)) {
-            return false;
-        }
-        if (!scrollableContainerScrollValue.current) {
-            scrollableContainerScrollValue.current = Math.floor(scrollableContainer.current.scrollTop);
-        }
-        return scrollableContainer.current.scrollTop > 0;
-    };
-    const handleBackdropSwipedDown = ({ velocity }) => {
-        if (velocity > SWIPE_CLOSE_VELOCITY) {
-            onClose();
-        }
-    };
-    const handleSheetSwipedDown = ({ velocity, initial }) => {
-        const offsetY = initial[1];
-        if (shouldSkipSwiping(offsetY)) {
-            return;
-        }
-        const shouldClose = sheetOffset > sheetHeight.current * CLOSE_OFFSET || velocity > SWIPE_CLOSE_VELOCITY;
-        if (shouldClose) {
-            onClose();
-        }
-        else {
-            setSheetOffset(0);
-            setBackdropOpacity(1);
-        }
-    };
-    const handleSheetSwiped = () => {
-        setScrollLocked(false);
-        scrollableContainerScrollValue.current = 0;
-    };
-    const handleSheetSwiping = ({ deltaY, initial }) => {
-        const offsetY = initial[1];
-        if (shouldSkipSwiping(offsetY)) {
-            return;
-        }
-        const offset = getSheetOffset(deltaY);
-        const opacity = getBackdropOpacity(offset);
-        setSheetOffset(offset);
-        setBackdropOpacity(opacity);
-        /**
-         * Если шторка начинает свайпаться, то блокируем скролл внутри нее
-         */
-        if (offset > 0) {
-            setScrollLocked(true);
-        }
-    };
-    const backdropSwipeablehandlers = useSwipeable({
-        onSwipedDown: handleBackdropSwipedDown,
-        delta: 100,
-        trackMouse: swipeable,
-    });
-    const sheetSwipeablehandlers = useSwipeable({
-        onSwiping: handleSheetSwiping,
-        onSwipedDown: handleSheetSwipedDown,
-        onSwiped: handleSheetSwiped,
-        delta: 5,
-        trackMouse: swipeable,
-    });
-    const handleExited = useCallback((node) => {
-        setBackdropOpacity(1);
-        if (transitionProps.onExited) {
-            transitionProps.onExited(node);
-        }
-    }, [transitionProps]);
-    const handleEntered = useCallback((node, isAppearing) => {
-        if (!sheetHeight.current) {
-            sheetHeight.current = node.getBoundingClientRect().height;
-        }
-        setBackdropOpacity(1);
-        if (transitionProps.onEntered) {
-            transitionProps.onEntered(node, isAppearing);
-        }
-    }, [transitionProps]);
-    useEffect(() => {
-        if (!open) {
-            setSheetOffset(0);
-        }
-    }, [open]);
-    const getSwipeStyles = () => ({
-        transform: sheetOffset ? `translateY(${sheetOffset}px)` : '',
-    });
-    const getHeightStyles = () => ({
-        height: initialHeight === 'full' ? targetHeight : 'unset',
-        maxHeight: targetHeight,
-    });
-    const bgClassName = backgroundColor && styles[`background-${backgroundColor}`];
-    return (React.createElement(BaseModal, { open: open, ref: ref, container: container, dataTestId: dataTestId, zIndex: zIndex, onClose: onClose, scrollHandler: scrollableContainer, Backdrop: SwipeableBackdrop, backdropProps: {
-            ...backdropProps,
-            opacity: backdropOpacity,
-            handlers: swipeable ? backdropSwipeablehandlers : false,
-            opacityTimeout: TIMEOUT,
-            invisible: initialHeight === 'full' ? false : hideOverlay,
-        }, disableBackdropClick: hideOverlay ? true : disableOverlayClick, className: cn(styles.modal, modalClassName), wrapperClassName: modalWrapperClassName, disableBlockingScroll: disableBlockingScroll, transitionProps: {
-            appear: true,
-            timeout: TIMEOUT,
-            classNames: styles,
-            ...transitionProps,
-            onExited: handleExited,
-            onEntered: handleEntered,
-        } },
-        React.createElement("div", { style: { ...getHeightStyles() } },
-            React.createElement("div", { className: cn(styles.component, bgClassName, className, {
-                    [styles.withTransition]: !sheetOffset,
-                }), style: {
-                    ...getSwipeStyles(),
-                    ...getHeightStyles(),
-                }, ...sheetSwipeablehandlers },
-                React.createElement("div", { ...containerProps, className: cn(styles.scrollableContainer, containerProps?.className, containerClassName, {
-                        [styles.scrollLocked]: scrollLocked,
-                    }), ref: mergeRefs([scrollableContainer, scrollableContainerRef]) },
-                    swipeable && React.createElement("div", { className: cn(styles.marker) }),
-                    !hideHeader && !emptyHeader && React.createElement(Header, { ...headerProps }),
-                    React.createElement("div", { className: cn(styles.content, contentClassName, {
-                            [styles.noHeader]: hideHeader || emptyHeader,
-                            [styles.noFooter]: !actionButton,
-                        }) }, children),
-                    actionButton && (React.createElement(Footer, { sticky: stickyFooter, className: cn(bgClassName, footerClassName) }, actionButton)))))));
-});
-
-export { BottomSheet as B, CLOSE_OFFSET as C, HEADER_OFFSET as H, Header as a };