@wix/design-system/dist/esm/MessageBoxFunctionalLayout/MessageBoxFunctionalLayout.js

@wix/design-system

import React, { useEffect, useRef, useState } from 'react';
import { generateDataAttr } from '../utils/generateDataAttr';
import PropTypes from 'prop-types';
import throttle from 'lodash/throttle';
import { HeaderLayout } from './components/HeaderLayout';
import { FooterLayout } from './components/FooterLayout';
import { st, classes } from './MessageBoxFunctionalLayout.st.css.js';
import { dataHooks } from './MessageBoxFunctionalLayout.constants';
import { WixDesignSystemContext } from '../WixDesignSystemProvider/context';
/** MessageBoxFunctionalLayout */
export const MessageBoxFunctionalLayout = ({ theme = 'blue', buttonsHeight = 'small', disableCancel = false, disableConfirmation = false, noBodyPadding = false, fullscreen = false, withEmptyState = false, dataHook, title, onCancel, onOk, onClose, confirmText, confirmPrefixIcon, confirmSuffixIcon, cancelText, cancelPrefixIcon, cancelSuffixIcon, hideFooter, footerBottomChildren, closeButton, width, margin, sideActions, image, maxHeight, children, }) => {
    const [hasScroll, setHasScroll] = useState(false);
    const [scrolledToBottom, setScrolledToBottom] = useState(false);
    const ref = useRef(null);
    const [handleMessageBoxScroll] = useState(() => throttle(() => {
        setScrolledToBottom(ref.current
            ? ref.current.scrollTop + ref.current.clientHeight ===
                ref.current.scrollHeight
            : false);
    }, 16));
    useEffect(() => {
        let scrollElement = ref.current;
        if (scrollElement &&
            scrollElement?.scrollHeight > scrollElement?.clientHeight) {
            scrollElement.addEventListener('scroll', handleMessageBoxScroll);
            setHasScroll(true);
        }
        return () => {
            handleMessageBoxScroll.cancel();
            scrollElement?.removeEventListener('scroll', handleMessageBoxScroll);
        };
    }, [ref, handleMessageBoxScroll]);
    const Content = ({ newColorsBranding }) => {
        const ContentLayout = () => (React.createElement("div", { ref: ref, "data-hook": dataHooks.content, className: st(classes.content, {
                scrollable: typeof maxHeight !== 'undefined',
                noPadding: noBodyPadding,
                newColorsBranding,
                fullscreenBody: fullscreen,
                noFooter: hideFooter,
                footerBorder: hasScroll && !scrolledToBottom,
                withEmptyState,
            }), style: { maxHeight } }, children));
        if (image && !withEmptyState && !newColorsBranding) {
            return (React.createElement("div", { className: classes.contentWithImage },
                React.createElement("div", { className: st(classes.image) }, image),
                React.createElement(ContentLayout, null)));
        }
        return React.createElement(ContentLayout, null);
    };
    return (React.createElement(WixDesignSystemContext.Consumer, null, ({ newColorsBranding }) => (React.createElement("div", { "data-hook": dataHook, className: st(classes.root, {
            fullscreen,
            newColorsBranding: newColorsBranding && !image,
            hasImage: newColorsBranding && !!image,
        }), style: { width, margin }, ...generateDataAttr({ noBodyPadding, theme }, [
            'noBodyPadding',
            'theme',
        ]) },
        React.createElement("div", { className: st(classes.topAreaContainer, { newColorsBranding }) },
            newColorsBranding && image ? (React.createElement("div", { className: classes.imageContainer }, image)) : null,
            React.createElement("div", { className: st(classes.contentAreaContainer, {
                    newColorsBranding,
                }) },
                React.createElement(HeaderLayout, { title: title, onCancel: onClose ? onClose : onCancel, theme: !newColorsBranding ? theme : 'newColorsBranding', closeButton: closeButton, size: newColorsBranding ? 'large' : 'medium', newColorsBranding: newColorsBranding }),
                React.createElement(Content, { newColorsBranding: newColorsBranding }))),
        !hideFooter ? (React.createElement(FooterLayout, { newColorsBranding: newColorsBranding, bottomChildren: footerBottomChildren, enableCancel: !disableCancel, enableOk: !disableConfirmation, buttonsHeight: buttonsHeight, confirmText: confirmText, confirmPrefixIcon: confirmPrefixIcon, confirmSuffixIcon: confirmSuffixIcon, cancelText: cancelText, cancelPrefixIcon: cancelPrefixIcon, cancelSuffixIcon: cancelSuffixIcon, onCancel: onCancel, onOk: onOk, theme: theme, sideActions: sideActions })) : null))));
};
MessageBoxFunctionalLayout.displayName = 'MessageBoxFunctionalLayout';
MessageBoxFunctionalLayout.propTypes = {
    dataHook: PropTypes.any,
    hideFooter: PropTypes.any,
    confirmText: PropTypes.any,
    confirmPrefixIcon: PropTypes.any,
    confirmSuffixIcon: PropTypes.any,
    cancelText: PropTypes.any,
    cancelPrefixIcon: PropTypes.any,
    cancelSuffixIcon: PropTypes.any,
    theme: PropTypes.any,
    onOk: PropTypes.any,
    onCancel: PropTypes.any,
    onClose: PropTypes.any,
    width: PropTypes.any,
    margin: PropTypes.any,
    title: PropTypes.any,
    children: PropTypes.any,
    maxHeight: PropTypes.any,
    buttonsHeight: PropTypes.any,
    closeButton: PropTypes.any,
    disableCancel: PropTypes.any,
    disableConfirmation: PropTypes.any,
    noBodyPadding: PropTypes.any,
    footerBottomChildren: PropTypes.any,
    fullscreen: PropTypes.any,
    withEmptyState: PropTypes.any,
    sideActions: PropTypes.any,
    image: PropTypes.any,
};
//# sourceMappingURL=MessageBoxFunctionalLayout.js.map