Skip to content

Commit

Permalink
feat(panel): Resizable side panel
Browse files Browse the repository at this point in the history
Resolves: flyteorg/flyte#5102
Signed-off-by: Chi-Sheng Liu <[email protected]>
  • Loading branch information
MortalHappiness committed Mar 27, 2024
1 parent 3920ce8 commit 54c1881
Show file tree
Hide file tree
Showing 3 changed files with 69 additions and 4 deletions.
20 changes: 17 additions & 3 deletions packages/oss-console/src/components/common/DetailsPanel.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -4,15 +4,25 @@ import Paper from '@mui/material/Paper';
import { useTheme } from '@mui/material/styles';
import styled from '@mui/system/styled';
import { detailsPanelId } from '@clients/common/constants';
import { detailsPanelWidth } from './constants';
import classnames from 'classnames';
import useResize from '@clients/oss-console/components/hooks/useResize';
import { defaultDetailsPanelWidth } from './constants';

const StyledPaper = styled(Paper)(({ theme }) => ({
display: 'flex',
flex: '1 1 100%',
maxHeight: '100%',
paddingBottom: theme.spacing(2),
pointerEvents: 'initial',
width: detailsPanelWidth,
'& .dragger': {
width: '3px',
cursor: 'ew-resize',
position: 'absolute',
top: 0,
left: 0,
bottom: 0,
zIndex: 100,
},
}));

interface DetailsPanelProps {
Expand All @@ -29,6 +39,9 @@ export const DetailsPanel: React.FC<PropsWithChildren<DetailsPanelProps>> = ({
open = false,
}) => {
const theme = useTheme();

const { width, enableResize } = useResize({ minWidth: defaultDetailsPanelWidth });

return (
<Drawer
anchor="right"
Expand All @@ -50,7 +63,8 @@ export const DetailsPanel: React.FC<PropsWithChildren<DetailsPanelProps>> = ({
open={open}
key="detailsPanel"
>
<StyledPaper id={detailsPanelId} square>
<StyledPaper id={detailsPanelId} square sx={{ width }}>
<div onMouseDown={enableResize} className={classnames('dragger')} />
{children}
</StyledPaper>
</Drawer>
Expand Down
2 changes: 1 addition & 1 deletion packages/oss-console/src/components/common/constants.ts
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
import { env } from '@clients/common/environment';
import { InterpreterOptions } from 'xstate';

export const detailsPanelWidth = 432;
export const defaultDetailsPanelWidth = 432;

export const labels = {
moreOptionsButton: 'Display more options',
Expand Down
51 changes: 51 additions & 0 deletions packages/oss-console/src/components/hooks/useResize.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1,51 @@
// Reference: https://stackoverflow.com/a/68742668

import { useCallback, useEffect, useState } from 'react';

type UseResizeProps = {
minWidth: number;
};

type UseResizeReturn = {
width: number;
enableResize: () => void;
};

const useResize = ({ minWidth }: UseResizeProps): UseResizeReturn => {
const [isResizing, setIsResizing] = useState(false);
const [width, setWidth] = useState(minWidth);

const enableResize = useCallback(() => {
setIsResizing(true);
}, [setIsResizing]);

const disableResize = useCallback(() => {
setIsResizing(false);
}, [setIsResizing]);

const resize = useCallback(
(e: MouseEvent) => {
if (isResizing) {
const newWidth = document.body.offsetWidth - e.clientX; // You may want to add some offset here from props
if (newWidth >= minWidth) {
setWidth(newWidth);
}
}
},
[minWidth, isResizing, setWidth],
);

useEffect(() => {
document.addEventListener('mousemove', resize);
document.addEventListener('mouseup', disableResize);

return () => {
document.removeEventListener('mousemove', resize);
document.removeEventListener('mouseup', disableResize);
};
}, [disableResize, resize]);

return { width, enableResize };
};

export default useResize;

0 comments on commit 54c1881

Please sign in to comment.