@wix/design-system
Version:
@wix/design-system
40 lines • 2.54 kB
JavaScript
import { st, classes } from './Content.st.css.js';
import React, { useState, useCallback } from 'react';
import Divider from '../../../Divider';
import ScrollableContainer, { AreaY, } from '../../../common/ScrollableContainer';
import { dataHooks } from '../../constants';
import { useBaseModalLayoutContext } from '../../BaseModalLayoutContext';
export const Content = ({ dataHook, className, children, hideTopScrollDivider = false, hideBottomScrollDivider = false, overflowY = 'auto', scrollProps = {}, }) => {
const { contentClassName, content = children } = useBaseModalLayoutContext();
const [scrollAreaY, setScrollAreaY] = useState(AreaY.NONE);
const { onScrollAreaChanged } = scrollProps;
const hideContentDividers = hideTopScrollDivider && hideBottomScrollDivider;
const handleScrollAreaChanged = useCallback(({ area, target }) => {
if (scrollAreaY !== area.y) {
if (!hideContentDividers) {
setScrollAreaY(area.y);
}
if (onScrollAreaChanged) {
onScrollAreaChanged({ area, target });
}
}
}, [hideContentDividers, onScrollAreaChanged, scrollAreaY]);
const isTopDividerHidden = useCallback(() => hideTopScrollDivider ||
scrollAreaY === AreaY.TOP ||
scrollAreaY === AreaY.NONE, [hideTopScrollDivider, scrollAreaY]);
const isBottomDividerHidden = useCallback(() => hideBottomScrollDivider ||
scrollAreaY === AreaY.BOTTOM ||
scrollAreaY === AreaY.NONE, [hideBottomScrollDivider, scrollAreaY]);
const registerToScrollAreaChanges = !hideContentDividers || !!onScrollAreaChanged;
return ((content && (React.createElement("div", { "data-hook": dataHook, "data-hidedividers": hideContentDividers, style: { overflowY }, className: st(classes.root, {
hideTopDivider: isTopDividerHidden(),
hideBottomDivider: isBottomDividerHidden(),
}, contentClassName, className) },
!hideTopScrollDivider && React.createElement(Divider, { className: classes.topDivider }),
React.createElement(ScrollableContainer, { style: { overflowY }, dataHook: dataHooks.contentWrapper, className: classes.innerContent, onScrollAreaChanged: (registerToScrollAreaChanges && handleScrollAreaChanged) ||
undefined }, content),
!hideBottomScrollDivider && (React.createElement(Divider, { className: classes.bottomDivider }))))) ||
null);
};
Content.displayName = 'BaseModalLayout.Content';
//# sourceMappingURL=Content.js.map