@wix/design-system
Version:
@wix/design-system
38 lines • 2.22 kB
JavaScript
import React, { useState, useCallback, useEffect } from 'react';
import { classes, st } from './MessageModalLayout.st.css.js';
import BaseModalLayout from '../BaseModalLayout';
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';
export default MessageModalLayout;
//# sourceMappingURL=MessageModalLayout.js.map