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

@wix/design-system

import React, { useState, useCallback, useEffect } from 'react';
import { classes, st } from './MessageModalLayout.st.css.js';
import PropTypes from 'prop-types';
import BaseModalLayout from '../BaseModalLayout';
import Button from '../Button';
import deprecationLog from '../utils/deprecationLog';
const MessageModalLayout = ({ theme = 'standard', actionsSize = 'small', ...propsWithNoDefaults }) => {
    const { children, className, ...restProps } = {
        theme,
        actionsSize,
        ...propsWithNoDefaults,
    };
    const { illustration, footnoteSkin } = restProps;
    const skin = restProps.skin || theme;
    const [showFooterDivider, setShowFooterDivider] = useState(false);
    const onContentScrollAreaChanged = useCallback(({ area }) => {
        const { y: scrollArea } = area;
        const newShowDivider = scrollArea === 'top' || scrollArea === 'middle';
        setShowFooterDivider(newShowDivider);
    }, []);
    useEffect(() => {
        if (theme) {
            deprecationLog('<MessageModalLayout/> - prop "theme" is deprecated and will be removed in next major release, please use "skin" property instead.');
        }
    }, [theme]);
    const hasIllustration = !!illustration;
    return (React.createElement(BaseModalLayout, { ...restProps, skin: skin, className: st(classes.root, { hasIllustration }, className) },
        React.createElement("div", { className: classes.topAreaContainer },
            React.createElement(BaseModalLayout.Illustration, null),
            React.createElement("div", { className: classes.contentAreaContainer },
                React.createElement(BaseModalLayout.Header, null),
                React.createElement(BaseModalLayout.Content, { hideTopScrollDivider: hasIllustration, hideBottomScrollDivider: hasIllustration, scrollProps: {
                        onScrollAreaChanged: (hasIllustration && onContentScrollAreaChanged) || undefined,
                    } }, children))),
        React.createElement(BaseModalLayout.Footer, { showFooterDivider: hasIllustration && showFooterDivider }),
        React.createElement(BaseModalLayout.Footnote, { skin: footnoteSkin })));
};
MessageModalLayout.displayName = 'MessageModalLayout';
MessageModalLayout.propTypes = {
    /** ...BaseModalLayout.propTypes, */
    className: PropTypes.string,
    dataHook: PropTypes.string,
    /** @deprecated use closeButtonProps instead. */
    onCloseButtonClick: PropTypes.func,
    /** @deprecated use helpButtonProps instead. */
    onHelpButtonClick: PropTypes.func,
    skin: PropTypes.oneOf(['standard', 'premium', 'destructive']),
    theme: PropTypes.oneOf(['standard', 'premium', 'destructive']),
    /** ...Header.propTypes, */
    title: PropTypes.oneOfType([PropTypes.string, PropTypes.node]),
    subtitle: PropTypes.oneOfType([PropTypes.string, PropTypes.node]),
    /** ...Content.propTypes, */
    content: PropTypes.oneOfType([PropTypes.string, PropTypes.node]),
    /** ...Footer.propTypes, */
    actionsSize: PropTypes.oneOf(['tiny', 'small', 'medium', 'large']),
    primaryButtonText: PropTypes.string,
    primaryButtonOnClick: PropTypes.func,
    primaryButtonProps: (() => {
        const { dataHook, ...buttonProps } = Button.propTypes;
        return PropTypes.shape(buttonProps);
    })(),
    secondaryButtonText: PropTypes.string,
    secondaryButtonOnClick: PropTypes.func,
    secondaryButtonProps: (() => {
        const { dataHook, ...buttonProps } = Button.propTypes;
        return PropTypes.shape(buttonProps);
    })(),
    sideActions: PropTypes.node,
    /** ...Footnote.propTypes, */
    footnote: PropTypes.node,
    footnoteSkin: PropTypes.oneOf(['neutral', 'light']),
    /** ...Illustration.propTypes, */
    illustration: PropTypes.oneOfType([PropTypes.string, PropTypes.node]),
    helpButtonProps: PropTypes.shape({
        onClick: PropTypes.func,
        size: PropTypes.oneOf(['small', 'medium', 'large']),
        skin: PropTypes.oneOf([
            'standard',
            'standardFilled',
            'light',
            'lightFilled',
            'dark',
            'transparent',
        ]),
    }),
    closeButtonProps: PropTypes.shape({
        onClick: PropTypes.func,
        size: PropTypes.oneOf(['small', 'medium', 'large']),
        skin: PropTypes.oneOf([
            'standard',
            'standardFilled',
            'light',
            'lightFilled',
            'dark',
            'transparent',
        ]),
    }),
};
export default MessageModalLayout;
//# sourceMappingURL=MessageModalLayout.js.map