From e197b7b98a1def15837f3958f6164180f526275c Mon Sep 17 00:00:00 2001 From: root <root@COM.localdomain> Date: Fri, 27 Dec 2024 05:42:14 +0000 Subject: [PATCH 1/3] feat: Added Panel component to sistent Signed-off-by: root <root@COM.localdomain> --- package-lock.json | 45 +++- package.json | 2 + src/custom/Panel/Panel.tsx | 237 ++++++++++++++++++ src/custom/Panel/index.tsx | 3 + src/custom/index.tsx | 1 + .../PanelDragHandle/PanelDragHandleIcon.tsx | 34 +++ src/icons/PanelDragHandle/index.tsx | 1 + 7 files changed, 320 insertions(+), 3 deletions(-) create mode 100644 src/custom/Panel/Panel.tsx create mode 100644 src/custom/Panel/index.tsx create mode 100644 src/icons/PanelDragHandle/PanelDragHandleIcon.tsx create mode 100644 src/icons/PanelDragHandle/index.tsx diff --git a/package-lock.json b/package-lock.json index 0034a3902..ed4e5204b 100644 --- a/package-lock.json +++ b/package-lock.json @@ -10,6 +10,8 @@ "dependencies": { "js-yaml": "^4.1.0", "lodash": "^4.17.21", + "re-resizable": "^6.10.3", + "react-draggable": "^4.4.6", "react-share": "^5.1.0" }, "devDependencies": { @@ -4530,7 +4532,6 @@ "version": "1.2.1", "resolved": "https://registry.npmjs.org/clsx/-/clsx-1.2.1.tgz", "integrity": "sha512-EcR6r5a8bj6pu3ycsa/E/cKVGuTgZJZdsyUYHOksG/UHIiKfjxzRxYJpyVBwYaQeOvghal9fcc4PidlgzugAQg==", - "dev": true, "engines": { "node": ">=6" } @@ -11503,6 +11504,16 @@ "performance-now": "^2.1.0" } }, + "node_modules/re-resizable": { + "version": "6.10.3", + "resolved": "https://registry.npmjs.org/re-resizable/-/re-resizable-6.10.3.tgz", + "integrity": "sha512-zvWb7X3RJMA4cuSrqoxgs3KR+D+pEXnGrD2FAD6BMYAULnZsSF4b7AOVyG6pC3VVNVOtlagGDCDmZSwWLjjBBw==", + "license": "MIT", + "peerDependencies": { + "react": "^16.13.1 || ^17.0.0 || ^18.0.0 || ^19.0.0", + "react-dom": "^16.13.1 || ^17.0.0 || ^18.0.0 || ^19.0.0" + } + }, "node_modules/react": { "version": "18.2.0", "resolved": "https://registry.npmjs.org/react/-/react-18.2.0.tgz", @@ -11559,6 +11570,20 @@ "react": "^18.2.0" } }, + "node_modules/react-draggable": { + "version": "4.4.6", + "resolved": "https://registry.npmjs.org/react-draggable/-/react-draggable-4.4.6.tgz", + "integrity": "sha512-LtY5Xw1zTPqHkVmtM3X8MUOxNDOUhv/khTgBgrUvwaS064bwVvxT+q5El0uUFNx5IEPKXuRejr7UqLwBIg5pdw==", + "license": "MIT", + "dependencies": { + "clsx": "^1.1.1", + "prop-types": "^15.8.1" + }, + "peerDependencies": { + "react": ">= 16.3.0", + "react-dom": ">= 16.3.0" + } + }, "node_modules/react-error-boundary": { "version": "4.0.12", "resolved": "https://registry.npmjs.org/react-error-boundary/-/react-error-boundary-4.0.12.tgz", @@ -17372,8 +17397,7 @@ "clsx": { "version": "1.2.1", "resolved": "https://registry.npmjs.org/clsx/-/clsx-1.2.1.tgz", - "integrity": "sha512-EcR6r5a8bj6pu3ycsa/E/cKVGuTgZJZdsyUYHOksG/UHIiKfjxzRxYJpyVBwYaQeOvghal9fcc4PidlgzugAQg==", - "dev": true + "integrity": "sha512-EcR6r5a8bj6pu3ycsa/E/cKVGuTgZJZdsyUYHOksG/UHIiKfjxzRxYJpyVBwYaQeOvghal9fcc4PidlgzugAQg==" }, "co": { "version": "4.6.0", @@ -22160,6 +22184,12 @@ "performance-now": "^2.1.0" } }, + "re-resizable": { + "version": "6.10.3", + "resolved": "https://registry.npmjs.org/re-resizable/-/re-resizable-6.10.3.tgz", + "integrity": "sha512-zvWb7X3RJMA4cuSrqoxgs3KR+D+pEXnGrD2FAD6BMYAULnZsSF4b7AOVyG6pC3VVNVOtlagGDCDmZSwWLjjBBw==", + "requires": {} + }, "react": { "version": "18.2.0", "resolved": "https://registry.npmjs.org/react/-/react-18.2.0.tgz", @@ -22206,6 +22236,15 @@ "scheduler": "^0.23.0" } }, + "react-draggable": { + "version": "4.4.6", + "resolved": "https://registry.npmjs.org/react-draggable/-/react-draggable-4.4.6.tgz", + "integrity": "sha512-LtY5Xw1zTPqHkVmtM3X8MUOxNDOUhv/khTgBgrUvwaS064bwVvxT+q5El0uUFNx5IEPKXuRejr7UqLwBIg5pdw==", + "requires": { + "clsx": "^1.1.1", + "prop-types": "^15.8.1" + } + }, "react-error-boundary": { "version": "4.0.12", "resolved": "https://registry.npmjs.org/react-error-boundary/-/react-error-boundary-4.0.12.tgz", diff --git a/package.json b/package.json index 04cee394a..8436340c7 100644 --- a/package.json +++ b/package.json @@ -118,6 +118,8 @@ "dependencies": { "js-yaml": "^4.1.0", "lodash": "^4.17.21", + "re-resizable": "^6.10.3", + "react-draggable": "^4.4.6", "react-share": "^5.1.0" } } diff --git a/src/custom/Panel/Panel.tsx b/src/custom/Panel/Panel.tsx new file mode 100644 index 000000000..2de7e48e6 --- /dev/null +++ b/src/custom/Panel/Panel.tsx @@ -0,0 +1,237 @@ +import { ListItemProps, styled } from '@mui/material'; +import { Resizable } from 're-resizable'; +import React from 'react'; +import Draggable from 'react-draggable'; +import { Box, BoxProps, IconButton, ListItem, Tooltip } from '../../base'; +import { CloseIcon, CollapseAllIcon, ExpandAllIcon } from '../../icons'; +import { PanelDragHandleIcon } from '../../icons/PanelDragHandle'; +import { useTheme } from '../../theme'; +import { ErrorBoundary } from '../ErrorBoundary'; + +export const ListHeader = styled(ListItem)(({ theme }) => ({ + padding: theme.spacing(0.5, 0.5), + marginBlock: theme.spacing(1), + '& .MuiListItemText-primary': { + fontSize: '1rem', + textTransform: 'capitalize', + fontWeight: 700 + }, + cursor: 'pointer', + '&:hover': { + backgroundColor: theme.palette.action.hover + }, + '& .MuiSvgIcon-root': { + opacity: 0, + transition: 'opacity 0.2s' + }, + '&:hover .MuiSvgIcon-root': { + opacity: 1 + } +})); + +interface CustomListItemProps extends ListItemProps { + isVisible: boolean; +} + +// Use the new interface in the styled component +export const StyledListItem = styled(ListItem, { + shouldForwardProp: (props) => props !== 'isVisible' +})<CustomListItemProps>(({ theme, isVisible }) => ({ + padding: theme.spacing(0.05, 0.5), + fontStyle: isVisible ? 'normal' : 'italic', + overflow: 'hidden', + textOverflow: 'ellipsis', + whiteSpace: 'nowrap', + '& .MuiSvgIcon-root': { + height: 20, + width: 20 + }, + '& .MuiListItemIcon-root': { + minWidth: 0, + opacity: isVisible ? 0.8 : 0.3 + }, + '& .MuiTypography-root': { + fontSize: '0.9rem', + opacity: isVisible ? 1 : 0.5 + } +})); + +type PanelProps = { + isOpen: boolean; + children: React.ReactNode; + areAllExpanded?: boolean; + toggleExpandAll?: () => void; + handleClose: () => void; + sx?: BoxProps['sx']; + id?: string; + intitialPosition?: { + left?: string | number; + right?: string | number; + top?: string | number; + bottom?: string | number; + }; +}; + +export const DrawerHeader = styled('div')(({ theme }) => ({ + display: 'flex', + alignItems: 'center', + padding: theme.spacing(4, 2), + alignContent: 'stretch', + justifyContent: 'space-between', + cursor: 'move', + background: + theme.palette.mode === 'light' + ? 'linear-gradient(90deg, #3B687B 0%, #507D90 100%)' + : 'linear-gradient(90deg, #28353A 0%, #3D4F57 100%)', + height: '3rem', + flexShrink: 0 +})); + +const PanelBody = styled(Box)(({ theme }) => ({ + padding: theme.spacing(2), + backgroundColor: theme.palette.background.surfaces, + overflow: 'auto', + flex: 1, + minHeight: 0 +})); + +// New container for Resizable content +const ResizableContent = styled('div')({ + height: '100%', + display: 'flex', + flexDirection: 'column', + minHeight: '3rem' +}); + +// // watches for the size of the element +// const useDimensions = (ref: React.RefObject<HTMLDivElement>) => { +// const [dimensions, setDimensions] = React.useState({ width: 0, height: 0 }); +// React.useEffect(() => { +// const { current } = ref; +// if (current) { +// const resizeObserver = new ResizeObserver((entries) => { +// entries.forEach((entry) => { +// setDimensions({ +// width: entry.contentRect.width, +// height: entry.contentRect.height +// }); +// }); +// }); +// resizeObserver.observe(current); +// return () => { +// resizeObserver.unobserve(current); +// }; +// } +// }, [ref]); +// return dimensions; +// }; + +const Panel_: React.FC<PanelProps> = ({ + isOpen, + id = 'panel', + children, + areAllExpanded, + toggleExpandAll, + handleClose, + intitialPosition, + sx +}) => { + const theme = useTheme(); + // const mode = theme?.palette?.type; + if (!isOpen) return null; + return ( + // <SistentThemeProviderWithoutBaseLine initialMode={mode}> + <Draggable handle=".drag-handle"> + <Box + sx={{ + borderRadius: '8px', + overflow: 'hidden', + flexShrink: 0, + zIndex: 99999, + position: 'absolute', + backgroundColor: theme.palette.background.blur?.light, + boxShadow: '0 4px 16px #05003812', + maxHeight: '80%', + display: 'flex', + boxSizing: 'border-box', + ...(intitialPosition || { + top: '6rem', + right: '2rem' + }), + ...(sx || {}) + }} + > + <Resizable + defaultSize={{ width: '18rem', height: 'auto' }} + onResize={() => { + window.dispatchEvent(new Event('panel-resize')); + }} + enable={{ + top: true, + right: true, + bottom: true, + left: true, + topRight: true, + bottomRight: true, + bottomLeft: true, + topLeft: true + }} + > + <ResizableContent> + <ErrorBoundary> + <div className="drag-handle"> + <DrawerHeader> + <Box display="flex" justifyContent="flex-end" padding="8px"> + {toggleExpandAll && ( + <Tooltip title={areAllExpanded ? 'Collapse All' : 'Expand All'}> + <IconButton onClick={toggleExpandAll}> + {areAllExpanded ? <CollapseAllIcon /> : <ExpandAllIcon />} + </IconButton> + </Tooltip> + )} + </Box> + <PanelDragHandleIcon + fill={theme.palette.icon.default} + style={{ marginTop: '-3rem', position: 'absolute', left: '50%' }} + /> + <div + style={{ + display: 'flex', + justifyContent: 'end', + alignItems: 'center', + flex: 1 + }} + > + <div + id={`${id}-panel-header-actions-container`} + style={{ + display: 'flex', + gap: '1rem', + justifyContent: 'flex-end', + alignItems: 'center' + }} + ></div> + <IconButton onClick={handleClose}> + <CloseIcon fill={theme.palette.icon.default} /> + </IconButton> + </div> + </DrawerHeader> + </div> + + <PanelBody className="panel-body">{children}</PanelBody> + </ErrorBoundary> + </ResizableContent> + </Resizable> + </Box> + </Draggable> + // </SistentThemeProviderWithoutBaseLine> + ); +}; + +export const Panel: React.FC<PanelProps> = ({ ...props }) => { + return ( + // <SistentThemeProviderWithoutBaseLine initialMode={mode}> + <Panel_ {...props} /> + // </SistentThemeProviderWithoutBaseLine> + ); +}; diff --git a/src/custom/Panel/index.tsx b/src/custom/Panel/index.tsx new file mode 100644 index 000000000..0abd9a3ca --- /dev/null +++ b/src/custom/Panel/index.tsx @@ -0,0 +1,3 @@ +import { Panel } from './Panel'; + +export { Panel }; diff --git a/src/custom/index.tsx b/src/custom/index.tsx index ac4022ff8..0da7c1984 100644 --- a/src/custom/index.tsx +++ b/src/custom/index.tsx @@ -56,6 +56,7 @@ export { InputSearchField } from './InputSearchField'; export { LearningContent } from './LearningContent'; export { NavigationNavbar } from './NavigationNavbar'; export { Note } from './Note'; +export { Panel } from './Panel'; export { PerformersSection, PerformersSectionButton } from './PerformersSection'; export { SetupPreReq } from './SetupPrerequisite'; export { StyledChapter } from './StyledChapter'; diff --git a/src/icons/PanelDragHandle/PanelDragHandleIcon.tsx b/src/icons/PanelDragHandle/PanelDragHandleIcon.tsx new file mode 100644 index 000000000..b6fe307e2 --- /dev/null +++ b/src/icons/PanelDragHandle/PanelDragHandleIcon.tsx @@ -0,0 +1,34 @@ +import { FC } from 'react'; +import { IconProps } from '../types'; + +export const PanelDragHandleIcon: FC<IconProps> = ({ + height = 24, + width = 24, + fill = 'currentColor', + ...props +}) => { + return ( + <svg + width={width} + height={height} + viewBox="0 0 24 24" + fill="none" + xmlns="http://www.w3.org/2000/svg" + {...props} + > + <g clipPath="url(#clip0_34897_172744)"> + <path + d="M6 10C4.9 10 4 10.9 4 12C4 13.1 4.9 14 6 14C7.1 14 8 13.1 8 12C8 10.9 7.1 10 6 10ZM18 10C16.9 10 16 10.9 16 12C16 13.1 16.9 14 18 14C19.1 14 20 13.1 20 12C20 10.9 19.1 10 18 10ZM12 10C10.9 10 10 10.9 10 12C10 13.1 10.9 14 12 14C13.1 14 14 13.1 14 12C14 10.9 13.1 10 12 10Z" + fill={fill} + /> + </g> + <defs> + <clipPath id="clip0_34897_172744"> + <rect width="24" height="24" fill="white" /> + </clipPath> + </defs> + </svg> + ); +}; + +export default PanelDragHandleIcon; diff --git a/src/icons/PanelDragHandle/index.tsx b/src/icons/PanelDragHandle/index.tsx new file mode 100644 index 000000000..3abe60e39 --- /dev/null +++ b/src/icons/PanelDragHandle/index.tsx @@ -0,0 +1 @@ +export { default as PanelDragHandleIcon } from './PanelDragHandleIcon'; From 7061c6e2aa33c236373c21a8f5eef522c9336417 Mon Sep 17 00:00:00 2001 From: Vidit-Kushwaha <viditkushwaha530@gmail.com> Date: Fri, 27 Dec 2024 10:07:37 +0000 Subject: [PATCH 2/3] fix: seperated logic of styling in Panel Signed-off-by: Vidit-Kushwaha <viditkushwaha530@gmail.com> --- src/custom/Panel/Panel.tsx | 119 +----------------- src/custom/Panel/style.tsx | 80 ++++++++++++ .../PanelDragHandle/PanelDragHandleIcon.tsx | 2 +- 3 files changed, 85 insertions(+), 116 deletions(-) create mode 100644 src/custom/Panel/style.tsx diff --git a/src/custom/Panel/Panel.tsx b/src/custom/Panel/Panel.tsx index 2de7e48e6..ff5c20d4c 100644 --- a/src/custom/Panel/Panel.tsx +++ b/src/custom/Panel/Panel.tsx @@ -1,60 +1,12 @@ -import { ListItemProps, styled } from '@mui/material'; import { Resizable } from 're-resizable'; import React from 'react'; import Draggable from 'react-draggable'; -import { Box, BoxProps, IconButton, ListItem, Tooltip } from '../../base'; +import { Box, BoxProps, IconButton, Tooltip } from '../../base'; import { CloseIcon, CollapseAllIcon, ExpandAllIcon } from '../../icons'; import { PanelDragHandleIcon } from '../../icons/PanelDragHandle'; import { useTheme } from '../../theme'; import { ErrorBoundary } from '../ErrorBoundary'; - -export const ListHeader = styled(ListItem)(({ theme }) => ({ - padding: theme.spacing(0.5, 0.5), - marginBlock: theme.spacing(1), - '& .MuiListItemText-primary': { - fontSize: '1rem', - textTransform: 'capitalize', - fontWeight: 700 - }, - cursor: 'pointer', - '&:hover': { - backgroundColor: theme.palette.action.hover - }, - '& .MuiSvgIcon-root': { - opacity: 0, - transition: 'opacity 0.2s' - }, - '&:hover .MuiSvgIcon-root': { - opacity: 1 - } -})); - -interface CustomListItemProps extends ListItemProps { - isVisible: boolean; -} - -// Use the new interface in the styled component -export const StyledListItem = styled(ListItem, { - shouldForwardProp: (props) => props !== 'isVisible' -})<CustomListItemProps>(({ theme, isVisible }) => ({ - padding: theme.spacing(0.05, 0.5), - fontStyle: isVisible ? 'normal' : 'italic', - overflow: 'hidden', - textOverflow: 'ellipsis', - whiteSpace: 'nowrap', - '& .MuiSvgIcon-root': { - height: 20, - width: 20 - }, - '& .MuiListItemIcon-root': { - minWidth: 0, - opacity: isVisible ? 0.8 : 0.3 - }, - '& .MuiTypography-root': { - fontSize: '0.9rem', - opacity: isVisible ? 1 : 0.5 - } -})); +import { DrawerHeader, PanelBody, ResizableContent } from './style'; type PanelProps = { isOpen: boolean; @@ -72,60 +24,6 @@ type PanelProps = { }; }; -export const DrawerHeader = styled('div')(({ theme }) => ({ - display: 'flex', - alignItems: 'center', - padding: theme.spacing(4, 2), - alignContent: 'stretch', - justifyContent: 'space-between', - cursor: 'move', - background: - theme.palette.mode === 'light' - ? 'linear-gradient(90deg, #3B687B 0%, #507D90 100%)' - : 'linear-gradient(90deg, #28353A 0%, #3D4F57 100%)', - height: '3rem', - flexShrink: 0 -})); - -const PanelBody = styled(Box)(({ theme }) => ({ - padding: theme.spacing(2), - backgroundColor: theme.palette.background.surfaces, - overflow: 'auto', - flex: 1, - minHeight: 0 -})); - -// New container for Resizable content -const ResizableContent = styled('div')({ - height: '100%', - display: 'flex', - flexDirection: 'column', - minHeight: '3rem' -}); - -// // watches for the size of the element -// const useDimensions = (ref: React.RefObject<HTMLDivElement>) => { -// const [dimensions, setDimensions] = React.useState({ width: 0, height: 0 }); -// React.useEffect(() => { -// const { current } = ref; -// if (current) { -// const resizeObserver = new ResizeObserver((entries) => { -// entries.forEach((entry) => { -// setDimensions({ -// width: entry.contentRect.width, -// height: entry.contentRect.height -// }); -// }); -// }); -// resizeObserver.observe(current); -// return () => { -// resizeObserver.unobserve(current); -// }; -// } -// }, [ref]); -// return dimensions; -// }; - const Panel_: React.FC<PanelProps> = ({ isOpen, id = 'panel', @@ -137,10 +35,8 @@ const Panel_: React.FC<PanelProps> = ({ sx }) => { const theme = useTheme(); - // const mode = theme?.palette?.type; if (!isOpen) return null; return ( - // <SistentThemeProviderWithoutBaseLine initialMode={mode}> <Draggable handle=".drag-handle"> <Box sx={{ @@ -191,7 +87,6 @@ const Panel_: React.FC<PanelProps> = ({ )} </Box> <PanelDragHandleIcon - fill={theme.palette.icon.default} style={{ marginTop: '-3rem', position: 'absolute', left: '50%' }} /> <div @@ -212,26 +107,20 @@ const Panel_: React.FC<PanelProps> = ({ }} ></div> <IconButton onClick={handleClose}> - <CloseIcon fill={theme.palette.icon.default} /> + <CloseIcon /> </IconButton> </div> </DrawerHeader> </div> - <PanelBody className="panel-body">{children}</PanelBody> </ErrorBoundary> </ResizableContent> </Resizable> </Box> </Draggable> - // </SistentThemeProviderWithoutBaseLine> ); }; export const Panel: React.FC<PanelProps> = ({ ...props }) => { - return ( - // <SistentThemeProviderWithoutBaseLine initialMode={mode}> - <Panel_ {...props} /> - // </SistentThemeProviderWithoutBaseLine> - ); + return <Panel_ {...props} />; }; diff --git a/src/custom/Panel/style.tsx b/src/custom/Panel/style.tsx new file mode 100644 index 000000000..c94449de4 --- /dev/null +++ b/src/custom/Panel/style.tsx @@ -0,0 +1,80 @@ +import { ListItemProps } from '@mui/material'; +import { Box, ListItem } from '../../base'; +import { styled } from '../../theme'; + +export const ListHeader = styled(ListItem)(({ theme }) => ({ + padding: theme.spacing(0.5, 0.5), + marginBlock: theme.spacing(1), + '& .MuiListItemText-primary': { + fontSize: '1rem', + textTransform: 'capitalize', + fontWeight: 700 + }, + cursor: 'pointer', + '&:hover': { + backgroundColor: theme.palette.action.hover + }, + '& .MuiSvgIcon-root': { + opacity: 0, + transition: 'opacity 0.2s' + }, + '&:hover .MuiSvgIcon-root': { + opacity: 1 + } +})); + +interface CustomListItemProps extends ListItemProps { + isVisible: boolean; +} + +export const StyledListItem = styled(ListItem, { + shouldForwardProp: (props) => props !== 'isVisible' +})<CustomListItemProps>(({ theme, isVisible }) => ({ + padding: theme.spacing(0.05, 0.5), + fontStyle: isVisible ? 'normal' : 'italic', + overflow: 'hidden', + textOverflow: 'ellipsis', + whiteSpace: 'nowrap', + '& .MuiSvgIcon-root': { + height: 20, + width: 20 + }, + '& .MuiListItemIcon-root': { + minWidth: 0, + opacity: isVisible ? 0.8 : 0.3 + }, + '& .MuiTypography-root': { + fontSize: '0.9rem', + opacity: isVisible ? 1 : 0.5 + } +})); + +export const DrawerHeader = styled('div')(({ theme }) => ({ + display: 'flex', + alignItems: 'center', + padding: theme.spacing(4, 2), + alignContent: 'stretch', + justifyContent: 'space-between', + cursor: 'move', + background: + theme.palette.mode === 'light' + ? 'linear-gradient(90deg, #3B687B 0%, #507D90 100%)' + : 'linear-gradient(90deg, #28353A 0%, #3D4F57 100%)', + height: '3rem', + flexShrink: 0 +})); + +export const PanelBody = styled(Box)(({ theme }) => ({ + padding: theme.spacing(2), + backgroundColor: theme.palette.background.surfaces, + overflow: 'auto', + flex: 1, + minHeight: 0 +})); + +export const ResizableContent = styled('div')({ + height: '100%', + display: 'flex', + flexDirection: 'column', + minHeight: '3rem' +}); diff --git a/src/icons/PanelDragHandle/PanelDragHandleIcon.tsx b/src/icons/PanelDragHandle/PanelDragHandleIcon.tsx index b6fe307e2..31f4a9e22 100644 --- a/src/icons/PanelDragHandle/PanelDragHandleIcon.tsx +++ b/src/icons/PanelDragHandle/PanelDragHandleIcon.tsx @@ -4,7 +4,7 @@ import { IconProps } from '../types'; export const PanelDragHandleIcon: FC<IconProps> = ({ height = 24, width = 24, - fill = 'currentColor', + fill = '#E8EFF3', ...props }) => { return ( From 971c97dc4d4d8a02e0942dc951aa2019ad77f460 Mon Sep 17 00:00:00 2001 From: Vidit-Kushwaha <viditkushwaha530@gmail.com> Date: Mon, 30 Dec 2024 12:09:34 +0000 Subject: [PATCH 3/3] chore: Replace inline CSS with styled components in Panel component Signed-off-by: Vidit-Kushwaha <viditkushwaha530@gmail.com> --- src/custom/Panel/Panel.tsx | 61 ++++++++++++-------------------------- src/custom/Panel/style.tsx | 37 +++++++++++++++++++++++ 2 files changed, 56 insertions(+), 42 deletions(-) diff --git a/src/custom/Panel/Panel.tsx b/src/custom/Panel/Panel.tsx index ff5c20d4c..cc0409f1a 100644 --- a/src/custom/Panel/Panel.tsx +++ b/src/custom/Panel/Panel.tsx @@ -6,9 +6,17 @@ import { CloseIcon, CollapseAllIcon, ExpandAllIcon } from '../../icons'; import { PanelDragHandleIcon } from '../../icons/PanelDragHandle'; import { useTheme } from '../../theme'; import { ErrorBoundary } from '../ErrorBoundary'; -import { DrawerHeader, PanelBody, ResizableContent } from './style'; +import { + DragHandle, + DrawerHeader, + HeaderActionsContainer, + HeaderContainer, + PanelBody, + PanelContainer, + ResizableContent +} from './style'; -type PanelProps = { +export type PanelProps = { isOpen: boolean; children: React.ReactNode; areAllExpanded?: boolean; @@ -38,25 +46,7 @@ const Panel_: React.FC<PanelProps> = ({ if (!isOpen) return null; return ( <Draggable handle=".drag-handle"> - <Box - sx={{ - borderRadius: '8px', - overflow: 'hidden', - flexShrink: 0, - zIndex: 99999, - position: 'absolute', - backgroundColor: theme.palette.background.blur?.light, - boxShadow: '0 4px 16px #05003812', - maxHeight: '80%', - display: 'flex', - boxSizing: 'border-box', - ...(intitialPosition || { - top: '6rem', - right: '2rem' - }), - ...(sx || {}) - }} - > + <PanelContainer theme={theme} intitialPosition={intitialPosition} sx={sx}> <Resizable defaultSize={{ width: '18rem', height: 'auto' }} onResize={() => { @@ -86,37 +76,24 @@ const Panel_: React.FC<PanelProps> = ({ </Tooltip> )} </Box> - <PanelDragHandleIcon - style={{ marginTop: '-3rem', position: 'absolute', left: '50%' }} - /> - <div - style={{ - display: 'flex', - justifyContent: 'end', - alignItems: 'center', - flex: 1 - }} - > - <div + <DragHandle> + <PanelDragHandleIcon /> + </DragHandle> + <HeaderContainer> + <HeaderActionsContainer id={`${id}-panel-header-actions-container`} - style={{ - display: 'flex', - gap: '1rem', - justifyContent: 'flex-end', - alignItems: 'center' - }} - ></div> + ></HeaderActionsContainer> <IconButton onClick={handleClose}> <CloseIcon /> </IconButton> - </div> + </HeaderContainer> </DrawerHeader> </div> <PanelBody className="panel-body">{children}</PanelBody> </ErrorBoundary> </ResizableContent> </Resizable> - </Box> + </PanelContainer> </Draggable> ); }; diff --git a/src/custom/Panel/style.tsx b/src/custom/Panel/style.tsx index c94449de4..8f9daf8a2 100644 --- a/src/custom/Panel/style.tsx +++ b/src/custom/Panel/style.tsx @@ -1,6 +1,7 @@ import { ListItemProps } from '@mui/material'; import { Box, ListItem } from '../../base'; import { styled } from '../../theme'; +import { PanelProps } from './Panel'; export const ListHeader = styled(ListItem)(({ theme }) => ({ padding: theme.spacing(0.5, 0.5), @@ -78,3 +79,39 @@ export const ResizableContent = styled('div')({ flexDirection: 'column', minHeight: '3rem' }); + +export const PanelContainer = styled(Box)<{ intitialPosition: PanelProps['intitialPosition'] }>( + ({ theme, intitialPosition }) => ({ + borderRadius: '8px', + overflow: 'hidden', + flexShrink: 0, + zIndex: 99999, + position: 'absolute', + backgroundColor: theme.palette.background.blur?.light, + boxShadow: '0 4px 16px #05003812', + maxHeight: '80%', + display: 'flex', + boxSizing: 'border-box', + ...intitialPosition + }) +); + +export const DragHandle = styled('div')({ + position: 'absolute', + top: '-3rem', + left: '50%' +}); + +export const HeaderActionsContainer = styled('div')({ + display: 'flex', + gap: '1rem', + justifyContent: 'flex-end', + alignItems: 'center' +}); + +export const HeaderContainer = styled('div')({ + display: 'flex', + justifyContent: 'end', + alignItems: 'center', + flex: '1' +});