pref: refactor components (#853)

* refactor customTabList

Signed-off-by: ryjiang <jiangruiyi@gmail.com>

* refactor customTooltip

Signed-off-by: ryjiang <jiangruiyi@gmail.com>

* refactor DataListView

Signed-off-by: ryjiang <jiangruiyi@gmail.com>

---------

Signed-off-by: ryjiang <jiangruiyi@gmail.com>

client/src/components/DataListView/DataListView.tsx

@@ -1,6 +1,6 @@
 import Typography from '@mui/material/Typography';
 import Chip from '@mui/material/Chip';
-import { styled } from '@mui/material/styles';
+import Box from '@mui/material/Box';
 import { formatFieldType } from '@/utils';
 import DataView from '@/components/DataView/DataView';
 import { DYNAMIC_FIELD } from '@/consts';
@@ -12,55 +12,6 @@ interface DataListViewProps {
   data: any;
 }
 
-// Styled components
-const Root = styled('div')(({ theme }) => ({
-  padding: 16,
-  cursor: 'initial',
-}));
-
-const DataTitleContainer = styled('div')({
-  display: 'flex',
-  justifyContent: 'space-between',
-});
-
-const Title = styled('span')({
-  fontSize: 14,
-  fontWeight: 600,
-});
-
-const Type = styled('span')(({ theme }) => ({
-  color: theme.palette.text.secondary,
-  marginLeft: 4,
-  marginTop: 2,
-}));
-
-const DataContainer = styled('div')(({ theme }) => ({
-  display: 'flex',
-  padding: 8,
-  border: `1px solid ${theme.palette.divider}`,
-  backgroundColor: theme.palette.background.paper,
-  borderRadius: 4,
-  marginBottom: 16,
-  maxHeight: 400,
-  overflow: 'auto',
-}));
-
-const StyledCopyButton = styled(CopyButton)({
-  marginLeft: 0,
-  '& svg': {
-    width: 15,
-  },
-});
-
-const DataTypeChip = styled(Chip)(({ theme }) => ({
-  fontSize: 11,
-  color: theme.palette.text.primary,
-  cursor: 'normal',
-  marginRight: 4,
-  marginLeft: 4,
-  backgroundColor: theme.palette.background.grey,
-}));
-
 const DataListView = (props: DataListViewProps) => {
   const { collection, data } = props;
 
@@ -80,35 +31,65 @@ const DataListView = (props: DataListViewProps) => {
   }
 
   return (
-    <Root>
+    <Box sx={{ padding: 2, cursor: 'initial' }}>
       {Object.keys(row).map((name: string, index: number) => {
         const field = collection.schema.fields.find(f => f.name === name);
         return (
-          <div key={index}>
-            <DataTitleContainer>
-              <Title>
+          <Box key={index} sx={{ mb: 2 }}>
+            <Box sx={{ display: 'flex', justifyContent: 'space-between' }}>
+              <Box
+                sx={{
+                  fontSize: 14,
+                  fontWeight: 600,
+                  display: 'flex',
+                  alignItems: 'center',
+                }}
+              >
                 {name}
-                <StyledCopyButton value={row[name]} label={name} />
-              </Title>
-              <Type>
+                <CopyButton
+                  value={row[name]}
+                  label={name}
+                  sx={{ ml: 0, '& svg': { width: 15 } }}
+                />
+              </Box>
+              <Box sx={{ color: 'text.secondary', ml: 1, mt: 0.5 }}>
                 {field && (
-                  <DataTypeChip
+                  <Chip
                     size="small"
                     label={formatFieldType(field) || 'meta'}
+                    sx={{
+                      fontSize: 11,
+                      color: 'text.primary',
+                      cursor: 'normal',
+                      mr: 0.5,
+                      ml: 0.5,
+                      backgroundColor: theme => theme.palette.background.grey,
+                    }}
                   />
                 )}
-              </Type>
-            </DataTitleContainer>
-            <DataContainer>
+              </Box>
+            </Box>
+            <Box
+              sx={{
+                display: 'flex',
+                p: 1,
+                border: theme => `1px solid ${theme.palette.divider}`,
+                backgroundColor: theme => theme.palette.background.paper,
+                borderRadius: 1,
+                mb: 2,
+                maxHeight: 400,
+                overflow: 'auto',
+              }}
+            >
               <DataView
                 type={(field && field.data_type) || 'any'}
                 value={row[name]}
               />
-            </DataContainer>
-          </div>
+            </Box>
+          </Box>
         );
       })}
-    </Root>
+    </Box>
   );
 };
 

client/src/components/advancedSearch/Types.ts

@@ -1,4 +1,5 @@
 import type { FieldObject } from '@server/types';
+import type { SxProps, Theme } from '@mui/material/styles';
 
 export interface ConditionProps {
   others?: object;
@@ -46,6 +47,7 @@ export interface CopyButtonProps {
   value: string;
   others?: any;
   size?: 'medium' | 'small' | undefined;
+  sx?: SxProps<Theme>;
 }
 
 export interface DialogProps {

client/src/components/customTabList/CustomTabList.tsx

@@ -2,12 +2,10 @@ import Box from '@mui/material/Box';
 import Tab from '@mui/material/Tab';
 import Tabs from '@mui/material/Tabs';
 import { FC, useState } from 'react';
-import { useStyles } from './style';
 import type { ITabListProps, ITabPanel } from './Types';
 
 const TabPanel = (props: ITabPanel) => {
   const { children, value, index, className = '', ...other } = props;
-
   return (
     <div
       role="tabpanel"
@@ -16,38 +14,46 @@ const TabPanel = (props: ITabPanel) => {
       id={`tabpanel-${index}`}
       aria-labelledby={`tabpanel-${index}`}
       {...other}
+      style={{ width: '100%' }}
     >
       {value === index && <Box height="100%">{children}</Box>}
     </div>
   );
 };
 
-const a11yProps = (index: number) => {
-  return {
-    id: `tab-${index}`,
-    'aria-controls': `tabpanel-${index}`,
-  };
-};
+const a11yProps = (index: number) => ({
+  id: `tab-${index}`,
+  'aria-controls': `tabpanel-${index}`,
+});
 
 const CustomTabList: FC<ITabListProps> = props => {
   const { tabs, activeIndex = 0, handleTabChange, wrapperClass = '' } = props;
-  const classes = useStyles();
   const [value, setValue] = useState<number>(activeIndex);
 
-  const handleChange = (event: any, newValue: any) => {
+  const handleChange = (event: React.SyntheticEvent, newValue: number) => {
     setValue(newValue);
-
     handleTabChange && handleTabChange(newValue);
   };
 
   return (
-    <div className={`${classes.wrapper}  ${wrapperClass}`}>
+    <Box
+      sx={{
+        display: 'flex',
+        flexDirection: 'column',
+        flexBasis: 0,
+        flexGrow: 1,
+        backgroundColor: theme => theme.palette.background.paper,
+        padding: 0,
+      }}
+      className={wrapperClass}
+    >
       <Tabs
-        classes={{
-          indicator: classes.tab,
-          flexContainer: classes.tabContainer,
+        sx={{
+          borderBottom: theme => `1px solid ${theme.palette.divider}`,
+          '& .MuiTabs-indicator': {
+            height: theme => theme.spacing(0.5),
+          },
         }}
-        // if not provide this property, Material will add single span element by default
         TabIndicatorProps={{ children: <div className="tab-indicator" /> }}
         value={value}
         onChange={handleChange}
@@ -55,11 +61,15 @@ const CustomTabList: FC<ITabListProps> = props => {
       >
         {tabs.map((tab, index) => (
           <Tab
-            classes={{ root: classes.tabContent }}
+            sx={{
+              textTransform: 'capitalize',
+              minWidth: 0,
+              marginRight: theme => theme.spacing(3),
+            }}
             key={tab.label}
             label={tab.label}
             {...a11yProps(index)}
-          ></Tab>
+          />
         ))}
       </Tabs>
 
@@ -68,13 +78,19 @@ const CustomTabList: FC<ITabListProps> = props => {
           key={tab.label}
           value={value}
           index={index}
-          className={classes.tabPanel}
+          className=""
+          style={{
+            flexBasis: 0,
+            flexGrow: 1,
+            marginTop: 8,
+            overflow: 'hidden',
+          }}
         >
           {tab.component}
         </TabPanel>
       ))}
-    </div>
+    </Box>
   );
 };
 
-export default CustomTabList;
+export default CustomTabList;

client/src/components/customTabList/RouteTabList.tsx

@@ -3,56 +3,78 @@ import Tab from '@mui/material/Tab';
 import Tabs from '@mui/material/Tabs';
 import { FC } from 'react';
 import { useNavigate, useLocation } from 'react-router-dom';
-import { useStyles } from './style';
 import type { ITabListProps, ITabPanel } from './Types';
+import type { SxProps, Theme } from '@mui/material/styles';
 
-const TabPanel = (props: ITabPanel) => {
-  const { children, value, index, className = '', ...other } = props;
+const tabSx: SxProps<Theme> = {
+  textTransform: 'capitalize',
+  minWidth: 0,
+  marginRight: 3,
+};
+
+const tabsSx: SxProps<Theme> = {
+  borderBottom: theme => `1px solid ${theme.palette.divider}`,
+  '& .MuiTabs-indicator': {
+    height: (theme: Theme) => theme.spacing(0.5),
+  },
+};
+
+const tabPanelSx: SxProps<Theme> = {
+  flexBasis: 0,
+  flexGrow: 1,
+  marginTop: 1,
+  overflow: 'hidden',
+};
 
+const wrapperSx: SxProps<Theme> = {
+  display: 'flex',
+  flexDirection: 'column',
+  flexBasis: 0,
+  flexGrow: 1,
+  backgroundColor: theme => theme.palette.background.paper,
+  padding: 0,
+};
+
+const TabPanel = (props: ITabPanel & { sx?: SxProps<Theme> }) => {
+  const { children, value, index, className = '', sx, ...other } = props;
   return (
-    <div
+    <Box
       role="tabpanel"
       hidden={value !== index}
       className={className}
       id={`tabpanel-${index}`}
       aria-labelledby={`tabpanel-${index}`}
+      sx={sx}
+      width="100%"
       {...other}
     >
       {value === index && <Box height="100%">{children}</Box>}
-    </div>
+    </Box>
   );
 };
 
-const a11yProps = (index: number) => {
-  return {
-    id: `tab-${index}`,
-    'aria-controls': `tabpanel-${index}`,
-  };
-};
+const a11yProps = (index: number) => ({
+  id: `tab-${index}`,
+  'aria-controls': `tabpanel-${index}`,
+});
 
 const RouteTabList: FC<ITabListProps> = props => {
   const { tabs, activeIndex = 0, wrapperClass = '' } = props;
-  const classes = useStyles();
   const navigate = useNavigate();
   const location = useLocation();
 
-  const handleChange = (event: any, newValue: any) => {
+  const handleChange = (event: React.SyntheticEvent, newValue: number) => {
     const newPath =
       location.pathname.split('/').slice(0, -1).join('/') +
       '/' +
       tabs[newValue].path;
-
     navigate(newPath);
   };
 
   return (
-    <div className={`${classes.wrapper}  ${wrapperClass}`}>
+    <Box sx={wrapperSx} className={wrapperClass}>
       <Tabs
-        classes={{
-          indicator: classes.tab,
-          flexContainer: classes.tabContainer,
-        }}
-        // if not provide this property, Material will add single span element by default
+        sx={tabsSx}
         TabIndicatorProps={{ children: <div className="tab-indicator" /> }}
         value={activeIndex}
         onChange={handleChange}
@@ -60,11 +82,11 @@ const RouteTabList: FC<ITabListProps> = props => {
       >
         {tabs.map((tab, index) => (
           <Tab
-            classes={{ root: classes.tabContent }}
+            sx={tabSx}
             key={tab.label}
             label={tab.label}
             {...a11yProps(index)}
-          ></Tab>
+          />
         ))}
       </Tabs>
 
@@ -73,12 +95,12 @@ const RouteTabList: FC<ITabListProps> = props => {
           key={tab.label}
           value={activeIndex}
           index={index}
-          className={classes.tabPanel}
+          sx={tabPanelSx}
         >
           {tab.component}
         </TabPanel>
       ))}
-    </div>
+    </Box>
   );
 };
 

client/src/components/customTabList/Types.ts

@@ -18,4 +18,5 @@ export interface ITabPanel {
   value: number;
   index: number;
   className?: string;
+  style?: React.CSSProperties;
 }

client/src/components/customTabList/style.ts

@@ -1,32 +0,0 @@
-import { Theme } from '@mui/material';
-import { makeStyles } from '@mui/styles';
-
-export const useStyles = makeStyles((theme: Theme) => ({
-  wrapper: {
-    display: 'flex',
-    flexDirection: 'column',
-    flexBasis: 0,
-    flexGrow: 1,
-    backgroundColor: theme.palette.background.paper,
-    padding: 0,
-    '& .MuiTab-root': {
-      textTransform: 'capitalize',
-    },
-  },
-  tab: {
-    height: theme.spacing(0.5),
-  },
-  tabContainer: {
-    borderBottom: `1px solid ${theme.palette.divider}`,
-  },
-  tabContent: {
-    minWidth: 0,
-    marginRight: theme.spacing(3),
-  },
-  tabPanel: {
-    flexBasis: 0,
-    flexGrow: 1,
-    marginTop: theme.spacing(1),
-    overflow: 'hidden',
-  },
-}));

client/src/components/customToolTip/CustomToolTip.tsx

@@ -1,25 +1,20 @@
 import Tooltip from '@mui/material/Tooltip';
 import { FC } from 'react';
-import { styled } from '@mui/material/styles';
-import type { Theme } from '@mui/material/styles';
 import type { CustomToolTipType } from './Types';
 
-const StyledTooltip = styled(Tooltip)(({ theme }: { theme: Theme }) => ({
-  // You can add custom styles here if needed
-}));
-
 const CustomToolTip: FC<CustomToolTipType> = props => {
-  const { title, placement = 'right', children, leaveDelay = 0 } = props;
+  const { title, placement = 'right', children, leaveDelay = 0, sx } = props;
   return (
-    <StyledTooltip
+    <Tooltip
       leaveDelay={leaveDelay}
       title={title}
       placement={placement}
       arrow
+      sx={sx}
     >
       <span>{children}</span>
-    </StyledTooltip>
+    </Tooltip>
   );
 };
 
-export default CustomToolTip;
+export default CustomToolTip;

client/src/components/customToolTip/Types.ts

@@ -1,10 +1,12 @@
 import { ReactElement } from 'react';
+import type { SxProps, Theme } from '@mui/material/styles';
 
 export type CustomToolTipType = {
   title: string;
   placement?: placement;
   children: ReactElement<any, any>;
   leaveDelay?: number;
+  sx?: SxProps<Theme>;
 };
 
 type placement =