Skip to content

Commit 6ae21c0

Browse files
Vidit-KushwahaVidit-Kushwaha
committed
feat: added default size to Panel and remove default title
Signed-off-by: Vidit Kushwaha <viditkushwaha530@gmail.com>
1 parent 989bc33 commit 6ae21c0

2 files changed

Lines changed: 68 additions & 59 deletions

File tree

‎src/custom/Panel/Panel.tsx‎

Lines changed: 67 additions & 58 deletions
Original file line numberDiff line numberDiff line change
@@ -31,6 +31,10 @@ export type PanelProps = {
3131
top?: string | number;
3232
bottom?: string | number;
3333
};
34+
defaultSize?: {
35+
width?: string | number;
36+
height?: string | number;
37+
};
3438
minimizePanel?: () => void;
3539
title?: string;
3640
};
@@ -42,75 +46,80 @@ const Panel_: React.FC<PanelProps> = ({
4246
areAllExpanded,
4347
toggleExpandAll,
4448
handleClose,
49+
defaultSize,
4550
intitialPosition,
4651
sx,
4752
minimizePanel,
48-
title = 'Debug Panel'
53+
title = ''
4954
}) => {
5055
const theme = useTheme();
56+
const mode = theme.palette.mode;
5157
if (!isOpen) return null;
5258
return (
53-
<Draggable handle=".drag-handle">
54-
<PanelContainer theme={theme} intitialPosition={intitialPosition} sx={sx}>
55-
<Resizable
56-
defaultSize={{ width: '18rem', height: 'auto' }}
57-
onResize={() => {
58-
window.dispatchEvent(new Event('panel-resize'));
59-
}}
60-
enable={{
61-
top: true,
62-
right: true,
63-
bottom: true,
64-
left: true,
65-
topRight: true,
66-
bottomRight: true,
67-
bottomLeft: true,
68-
topLeft: true
69-
}}
70-
>
71-
<ResizableContent>
72-
<ErrorBoundary>
73-
<div className="drag-handle">
74-
<DrawerHeader>
75-
<Box display="flex" justifyContent="flex-end" padding="8px">
76-
{toggleExpandAll && (
77-
<Tooltip title={areAllExpanded ? 'Collapse All' : 'Expand All'}>
78-
<CustomIconButton onClick={toggleExpandAll}>
79-
{areAllExpanded ? <CollapseAllIcon /> : <ExpandAllIcon />}
59+
<SistentThemeProviderWithoutBaseLine initialMode={mode}>
60+
<Draggable handle=".drag-handle">
61+
<PanelContainer theme={theme} intitialPosition={intitialPosition} sx={sx}>
62+
<Resizable
63+
defaultSize={{
64+
width: defaultSize?.width || '18rem',
65+
height: defaultSize?.height || 'auto'
66+
}}
67+
onResize={() => {
68+
window.dispatchEvent(new Event('panel-resize'));
69+
}}
70+
enable={{
71+
top: true,
72+
right: true,
73+
bottom: true,
74+
left: true,
75+
topRight: true,
76+
bottomRight: true,
77+
bottomLeft: true,
78+
topLeft: true
79+
}}
80+
>
81+
<ResizableContent>
82+
<ErrorBoundary>
83+
<div className="drag-handle">
84+
<DrawerHeader>
85+
<Box display="flex" justifyContent="flex-end" padding="8px">
86+
{toggleExpandAll && (
87+
<Tooltip title={areAllExpanded ? 'Collapse All' : 'Expand All'}>
88+
<CustomIconButton onClick={toggleExpandAll}>
89+
{areAllExpanded ? <CollapseAllIcon /> : <ExpandAllIcon />}
90+
</CustomIconButton>
91+
</Tooltip>
92+
)}
93+
</Box>
94+
<DragHandle />
95+
<HeaderContainer>
96+
<HeaderActionsContainer
97+
id={`${id}-panel-header-actions-container`}
98+
></HeaderActionsContainer>
99+
<PanelTitle>{title}</PanelTitle>
100+
{minimizePanel && (
101+
<CustomIconButton onClick={minimizePanel}>
102+
<FullScreenIcon fill={theme.palette.common.white} />
80103
</CustomIconButton>
81-
</Tooltip>
82-
)}
83-
</Box>
84-
<DragHandle />
85-
<HeaderContainer>
86-
<HeaderActionsContainer
87-
id={`${id}-panel-header-actions-container`}
88-
></HeaderActionsContainer>
89-
<PanelTitle>{title}</PanelTitle>
90-
{minimizePanel && (
91-
<CustomIconButton onClick={minimizePanel}>
92-
<FullScreenIcon fill={theme.palette.common.white} />
104+
)}
105+
<CustomIconButton onClick={handleClose}>
106+
<CloseIcon fill={theme.palette.common.white} />
93107
</CustomIconButton>
94-
)}
95-
<CustomIconButton onClick={handleClose}>
96-
<CloseIcon fill={theme.palette.common.white} />
97-
</CustomIconButton>
98-
</HeaderContainer>
99-
</DrawerHeader>
100-
</div>
101-
<PanelBody className="panel-body">{children}</PanelBody>
102-
</ErrorBoundary>
103-
</ResizableContent>
104-
</Resizable>
105-
</PanelContainer>
106-
</Draggable>
108+
</HeaderContainer>
109+
</DrawerHeader>
110+
</div>
111+
<PanelBody className="panel-body" theme={theme}>
112+
{children}
113+
</PanelBody>
114+
</ErrorBoundary>
115+
</ResizableContent>
116+
</Resizable>
117+
</PanelContainer>
118+
</Draggable>
119+
</SistentThemeProviderWithoutBaseLine>
107120
);
108121
};
109122

110123
export const Panel: React.FC<PanelProps> = ({ ...props }) => {
111-
return (
112-
<SistentThemeProviderWithoutBaseLine>
113-
<Panel_ {...props} />;
114-
</SistentThemeProviderWithoutBaseLine>
115-
);
124+
return <Panel_ {...props} />;
116125
};

‎src/custom/Panel/style.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -68,7 +68,7 @@ export const DrawerHeader = styled('div')(({ theme }) => ({
6868

6969
export const PanelBody = styled(Box)(({ theme }) => ({
7070
padding: theme.spacing(2),
71-
backgroundColor: accentGrey[10],
71+
backgroundColor: theme.palette.mode === 'light' ? accentGrey[10] : accentGrey[100],
7272
overflow: 'auto',
7373
flex: 1,
7474
minHeight: 0

0 commit comments

Comments
 (0)