Skip to content

Commit 7061c6e

Browse files
Vidit-KushwahaVidit-Kushwaha
committed
fix: seperated logic of styling in Panel
Signed-off-by: Vidit-Kushwaha <viditkushwaha530@gmail.com>
1 parent e197b7b commit 7061c6e

3 files changed

Lines changed: 85 additions & 116 deletions

File tree

‎src/custom/Panel/Panel.tsx‎

Lines changed: 4 additions & 115 deletions
Original file line numberDiff line numberDiff line change
@@ -1,60 +1,12 @@
1-
import { ListItemProps, styled } from '@mui/material';
21
import { Resizable } from 're-resizable';
32
import React from 'react';
43
import Draggable from 'react-draggable';
5-
import { Box, BoxProps, IconButton, ListItem, Tooltip } from '../../base';
4+
import { Box, BoxProps, IconButton, Tooltip } from '../../base';
65
import { CloseIcon, CollapseAllIcon, ExpandAllIcon } from '../../icons';
76
import { PanelDragHandleIcon } from '../../icons/PanelDragHandle';
87
import { useTheme } from '../../theme';
98
import { ErrorBoundary } from '../ErrorBoundary';
10-
11-
export const ListHeader = styled(ListItem)(({ theme }) => ({
12-
padding: theme.spacing(0.5, 0.5),
13-
marginBlock: theme.spacing(1),
14-
'& .MuiListItemText-primary': {
15-
fontSize: '1rem',
16-
textTransform: 'capitalize',
17-
fontWeight: 700
18-
},
19-
cursor: 'pointer',
20-
'&:hover': {
21-
backgroundColor: theme.palette.action.hover
22-
},
23-
'& .MuiSvgIcon-root': {
24-
opacity: 0,
25-
transition: 'opacity 0.2s'
26-
},
27-
'&:hover .MuiSvgIcon-root': {
28-
opacity: 1
29-
}
30-
}));
31-
32-
interface CustomListItemProps extends ListItemProps {
33-
isVisible: boolean;
34-
}
35-
36-
// Use the new interface in the styled component
37-
export const StyledListItem = styled(ListItem, {
38-
shouldForwardProp: (props) => props !== 'isVisible'
39-
})<CustomListItemProps>(({ theme, isVisible }) => ({
40-
padding: theme.spacing(0.05, 0.5),
41-
fontStyle: isVisible ? 'normal' : 'italic',
42-
overflow: 'hidden',
43-
textOverflow: 'ellipsis',
44-
whiteSpace: 'nowrap',
45-
'& .MuiSvgIcon-root': {
46-
height: 20,
47-
width: 20
48-
},
49-
'& .MuiListItemIcon-root': {
50-
minWidth: 0,
51-
opacity: isVisible ? 0.8 : 0.3
52-
},
53-
'& .MuiTypography-root': {
54-
fontSize: '0.9rem',
55-
opacity: isVisible ? 1 : 0.5
56-
}
57-
}));
9+
import { DrawerHeader, PanelBody, ResizableContent } from './style';
5810

5911
type PanelProps = {
6012
isOpen: boolean;
@@ -72,60 +24,6 @@ type PanelProps = {
7224
};
7325
};
7426

75-
export const DrawerHeader = styled('div')(({ theme }) => ({
76-
display: 'flex',
77-
alignItems: 'center',
78-
padding: theme.spacing(4, 2),
79-
alignContent: 'stretch',
80-
justifyContent: 'space-between',
81-
cursor: 'move',
82-
background:
83-
theme.palette.mode === 'light'
84-
? 'linear-gradient(90deg, #3B687B 0%, #507D90 100%)'
85-
: 'linear-gradient(90deg, #28353A 0%, #3D4F57 100%)',
86-
height: '3rem',
87-
flexShrink: 0
88-
}));
89-
90-
const PanelBody = styled(Box)(({ theme }) => ({
91-
padding: theme.spacing(2),
92-
backgroundColor: theme.palette.background.surfaces,
93-
overflow: 'auto',
94-
flex: 1,
95-
minHeight: 0
96-
}));
97-
98-
// New container for Resizable content
99-
const ResizableContent = styled('div')({
100-
height: '100%',
101-
display: 'flex',
102-
flexDirection: 'column',
103-
minHeight: '3rem'
104-
});
105-
106-
// // watches for the size of the element
107-
// const useDimensions = (ref: React.RefObject<HTMLDivElement>) => {
108-
// const [dimensions, setDimensions] = React.useState({ width: 0, height: 0 });
109-
// React.useEffect(() => {
110-
// const { current } = ref;
111-
// if (current) {
112-
// const resizeObserver = new ResizeObserver((entries) => {
113-
// entries.forEach((entry) => {
114-
// setDimensions({
115-
// width: entry.contentRect.width,
116-
// height: entry.contentRect.height
117-
// });
118-
// });
119-
// });
120-
// resizeObserver.observe(current);
121-
// return () => {
122-
// resizeObserver.unobserve(current);
123-
// };
124-
// }
125-
// }, [ref]);
126-
// return dimensions;
127-
// };
128-
12927
const Panel_: React.FC<PanelProps> = ({
13028
isOpen,
13129
id = 'panel',
@@ -137,10 +35,8 @@ const Panel_: React.FC<PanelProps> = ({
13735
sx
13836
}) => {
13937
const theme = useTheme();
140-
// const mode = theme?.palette?.type;
14138
if (!isOpen) return null;
14239
return (
143-
// <SistentThemeProviderWithoutBaseLine initialMode={mode}>
14440
<Draggable handle=".drag-handle">
14541
<Box
14642
sx={{
@@ -191,7 +87,6 @@ const Panel_: React.FC<PanelProps> = ({
19187
)}
19288
</Box>
19389
<PanelDragHandleIcon
194-
fill={theme.palette.icon.default}
19590
style={{ marginTop: '-3rem', position: 'absolute', left: '50%' }}
19691
/>
19792
<div
@@ -212,26 +107,20 @@ const Panel_: React.FC<PanelProps> = ({
212107
}}
213108
></div>
214109
<IconButton onClick={handleClose}>
215-
<CloseIcon fill={theme.palette.icon.default} />
110+
<CloseIcon />
216111
</IconButton>
217112
</div>
218113
</DrawerHeader>
219114
</div>
220-
221115
<PanelBody className="panel-body">{children}</PanelBody>
222116
</ErrorBoundary>
223117
</ResizableContent>
224118
</Resizable>
225119
</Box>
226120
</Draggable>
227-
// </SistentThemeProviderWithoutBaseLine>
228121
);
229122
};
230123

231124
export const Panel: React.FC<PanelProps> = ({ ...props }) => {
232-
return (
233-
// <SistentThemeProviderWithoutBaseLine initialMode={mode}>
234-
<Panel_ {...props} />
235-
// </SistentThemeProviderWithoutBaseLine>
236-
);
125+
return <Panel_ {...props} />;
237126
};

‎src/custom/Panel/style.tsx‎

Lines changed: 80 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,80 @@
1+
import { ListItemProps } from '@mui/material';
2+
import { Box, ListItem } from '../../base';
3+
import { styled } from '../../theme';
4+
5+
export const ListHeader = styled(ListItem)(({ theme }) => ({
6+
padding: theme.spacing(0.5, 0.5),
7+
marginBlock: theme.spacing(1),
8+
'& .MuiListItemText-primary': {
9+
fontSize: '1rem',
10+
textTransform: 'capitalize',
11+
fontWeight: 700
12+
},
13+
cursor: 'pointer',
14+
'&:hover': {
15+
backgroundColor: theme.palette.action.hover
16+
},
17+
'& .MuiSvgIcon-root': {
18+
opacity: 0,
19+
transition: 'opacity 0.2s'
20+
},
21+
'&:hover .MuiSvgIcon-root': {
22+
opacity: 1
23+
}
24+
}));
25+
26+
interface CustomListItemProps extends ListItemProps {
27+
isVisible: boolean;
28+
}
29+
30+
export const StyledListItem = styled(ListItem, {
31+
shouldForwardProp: (props) => props !== 'isVisible'
32+
})<CustomListItemProps>(({ theme, isVisible }) => ({
33+
padding: theme.spacing(0.05, 0.5),
34+
fontStyle: isVisible ? 'normal' : 'italic',
35+
overflow: 'hidden',
36+
textOverflow: 'ellipsis',
37+
whiteSpace: 'nowrap',
38+
'& .MuiSvgIcon-root': {
39+
height: 20,
40+
width: 20
41+
},
42+
'& .MuiListItemIcon-root': {
43+
minWidth: 0,
44+
opacity: isVisible ? 0.8 : 0.3
45+
},
46+
'& .MuiTypography-root': {
47+
fontSize: '0.9rem',
48+
opacity: isVisible ? 1 : 0.5
49+
}
50+
}));
51+
52+
export const DrawerHeader = styled('div')(({ theme }) => ({
53+
display: 'flex',
54+
alignItems: 'center',
55+
padding: theme.spacing(4, 2),
56+
alignContent: 'stretch',
57+
justifyContent: 'space-between',
58+
cursor: 'move',
59+
background:
60+
theme.palette.mode === 'light'
61+
? 'linear-gradient(90deg, #3B687B 0%, #507D90 100%)'
62+
: 'linear-gradient(90deg, #28353A 0%, #3D4F57 100%)',
63+
height: '3rem',
64+
flexShrink: 0
65+
}));
66+
67+
export const PanelBody = styled(Box)(({ theme }) => ({
68+
padding: theme.spacing(2),
69+
backgroundColor: theme.palette.background.surfaces,
70+
overflow: 'auto',
71+
flex: 1,
72+
minHeight: 0
73+
}));
74+
75+
export const ResizableContent = styled('div')({
76+
height: '100%',
77+
display: 'flex',
78+
flexDirection: 'column',
79+
minHeight: '3rem'
80+
});

‎src/icons/PanelDragHandle/PanelDragHandleIcon.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,7 @@ import { IconProps } from '../types';
44
export const PanelDragHandleIcon: FC<IconProps> = ({
55
height = 24,
66
width = 24,
7-
fill = 'currentColor',
7+
fill = '#E8EFF3',
88
...props
99
}) => {
1010
return (

0 commit comments

Comments
 (0)