Shared:ContextMenu:Fixed the scroll area in mobile view when the context menu cannot open to full height.

This commit is contained in:
Vlada Gazizova 2024-08-09 13:21:09 +03:00
parent ba5093d0a3
commit 6ed95a643b
3 changed files with 22 additions and 8 deletions

View File

@ -102,10 +102,6 @@ const StyledContextMenu = styled.div<{
${(props) => props.changeView && styledMobileView}
}
@media ${mobile} {
${(props) => props.changeView && styledMobileView}
}
.scroll-body {
display: flex;
flex-direction: column;

View File

@ -550,6 +550,8 @@ const ContextMenu = React.forwardRef<ContextMenuRefType, ContextMenuProps>(
resetMenu={resetMenu}
onLeafClick={onLeafClick}
onMobileItemClick={onMobileItemClick}
changeView={changeView}
withHeader={withHeader}
/>
)}
</div>

View File

@ -64,8 +64,18 @@ const SubMenu = (props: {
loadFunc?: () => Promise<ContextMenuModel[]>,
) => void;
onLoad?: () => Promise<ContextMenuModel[]>;
changeView?: boolean;
withHeader?: boolean;
}) => {
const { onLeafClick, root, resetMenu, onMobileItemClick, onLoad } = props;
const {
onLeafClick,
root,
resetMenu,
onMobileItemClick,
onLoad,
changeView,
withHeader,
} = props;
const [model, setModel] = useState(props?.model);
const [isLoading, setIsLoading] = useState(false);
@ -519,9 +529,15 @@ const SubMenu = (props: {
const viewport = DomHelpers.getViewport();
const paddingList = 12;
const marginsList = 32;
const backdrop = 64;
const header = 55;
const listHeight =
height + paddingList + marginsList > viewport.height
changeView && withHeader
? height + paddingList + header > viewport.height
? viewport.height - backdrop - header - paddingList
: height + paddingList
: height + paddingList + marginsList > viewport.height
? viewport.height - marginsList
: height + paddingList;