@wix/design-system
Version:
@wix/design-system
63 lines • 4.09 kB
JavaScript
import React, { useEffect, useRef, useState } from 'react';
import { generateDataAttr } from '../utils/generateDataAttr';
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 deprecationLog from '../utils/deprecationLog';
/**
* @deprecated MessageBoxFunctionalLayout is deprecated and will be removed in the next major version. Please use MessageModalLayout instead.
*/
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);
useEffect(() => {
deprecationLog('<MessageBoxFunctionalLayout/> is deprecated and will be removed in the next major version. Please use <MessageModalLayout/> instead.');
}, []);
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 = () => {
const ContentLayout = () => (React.createElement("div", { ref: ref, "data-hook": dataHooks.content, className: st(classes.content, {
scrollable: typeof maxHeight !== 'undefined',
noPadding: noBodyPadding,
fullscreen: fullscreen,
noFooter: hideFooter,
footerBorder: hasScroll && !scrolledToBottom,
withEmptyState,
}), style: { maxHeight } }, children));
return React.createElement(ContentLayout, null);
};
return (React.createElement("div", { "data-hook": dataHook, className: st(classes.root, {
fullscreen,
hasImage: !!image,
}), style: { width, margin }, ...generateDataAttr({ noBodyPadding, theme }, [
'noBodyPadding',
'theme',
]) },
React.createElement("div", { className: st(classes.topAreaContainer) },
image ? React.createElement("div", { className: classes.imageContainer }, image) : null,
React.createElement("div", { className: st(classes.contentAreaContainer) },
React.createElement(HeaderLayout, { title: title, onCancel: onClose ? onClose : onCancel, closeButton: closeButton, size: "large" }),
React.createElement(Content, null))),
!hideFooter ? (React.createElement(FooterLayout, { 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';
//# sourceMappingURL=MessageBoxFunctionalLayout.js.map