wix-style-react
Version:
wix-style-react
83 lines • 4.68 kB
JavaScript
import React, { useState, useCallback } from 'react';
import { st, classes } from './MessageModalLayout.st.css';
import BaseModalLayout from '../BaseModalLayout';
import PropTypes from 'prop-types';
import Button from '../Button';
import { WixStyleReactContext } from '../WixStyleReactProvider/context';
/** MessageModalLayout */
const MessageModalLayout = ({ theme = 'standard', actionsSize = 'small', ...propsWithNoDefaults }) => {
const { children, className, ...restProps } = {
theme,
actionsSize,
...propsWithNoDefaults,
};
const { illustration } = restProps;
const [showFooterDivider, setShowFooterDivider] = useState(false);
const onContentScrollAreaChanged = useCallback(({ area }) => {
const { y: scrollArea } = area;
const newShowDivider = scrollArea === 'top' || scrollArea === 'middle';
setShowFooterDivider(newShowDivider);
}, []);
const hasIllustration = !!illustration;
return (React.createElement(WixStyleReactContext.Consumer, null, ({ newColorsBranding }) => (React.createElement(BaseModalLayout, { ...restProps, className: st(classes.root, { hasIllustration, newColorsBranding }, 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) || null,
} }, children))),
React.createElement(BaseModalLayout.Footer, { showFooterDivider: hasIllustration && showFooterDivider }),
React.createElement(BaseModalLayout.Footnote, null)))));
};
MessageModalLayout.displayName = 'MessageModalLayout';
MessageModalLayout.propTypes = {
/** ...BaseModalLayout.propTypes, */
/** Applies a CSS class to the component’s root element */
className: PropTypes.string,
/** Applies a data-hook HTML attribute to be used in the tests */
dataHook: PropTypes.string,
/** Defines a call-back function after user clicks on the close button */
onCloseButtonClick: PropTypes.func,
/** Defines a call-back function after user clicks on the help button */
onHelpButtonClick: PropTypes.func,
/** Sets the appearance of modal (i.e., changes the skin of primary and secondary action buttons) */
theme: PropTypes.oneOf(['standard', 'premium', 'destructive']),
/** ...Header.propTypes, */
/** Sets text title for the modal; can be used in conjunction with other components */
title: PropTypes.oneOfType([PropTypes.string, PropTypes.node]),
/** ...Content.propTypes, */
/** Contains modal’s message in its middle area. <MessageModalLayout/> children are passed as content, too. */
content: PropTypes.oneOfType([PropTypes.string, PropTypes.node]),
/** ...Footer.propTypes, */
/** Determins the action buttons size */
actionsSize: PropTypes.oneOf(['tiny', 'small', 'medium', 'large']),
/** Sets text label for the primary button */
primaryButtonText: PropTypes.string,
/** Defines a call-back function after user clicks on the primary button */
primaryButtonOnClick: PropTypes.func,
/** Passes on any \<Button/\> properties on the primary button */
primaryButtonProps: (() => {
const { dataHook, ...buttonProps } = Button.propTypes;
return PropTypes.shape(buttonProps);
})(),
/** Sets text label for the secondary button */
secondaryButtonText: PropTypes.string,
/** Defines a call-back function after user clicks on the secondary button */
secondaryButtonOnClick: PropTypes.func,
/** Passes on any \<Button/\> properties on the secondary button */
secondaryButtonProps: (() => {
const { dataHook, ...buttonProps } = Button.propTypes;
return PropTypes.shape(buttonProps);
})(),
/** Contains a checkbox or other components at the start of the footer */
sideActions: PropTypes.node,
/** ...Footnote.propTypes, */
/** Renders supplementary text or other components at the bottom of the modal */
footnote: PropTypes.node,
/** ...Illustration.propTypes, */
/** Contains a 120x120 px illustration at the left side of the modal */
illustration: PropTypes.oneOfType([PropTypes.string, PropTypes.node]),
};
export default MessageModalLayout;
//# sourceMappingURL=MessageModalLayout.js.map