chore: use styled component instead of makeStyles (#784)

* use styled for EmptyCard Signed-off-by: ryjiang <[email protected]> * usestyled for CustomButton Signed-off-by: ryjiang <[email protected]> * use styled for customDialog Signed-off-by: ryjiang <[email protected]> * use styled for customInput Signed-off-by: ryjiang <[email protected]> * use styled for customSelector Signed-off-by: ryjiang <[email protected]> * use styled for customSnackBar Signed-off-by: ryjiang <[email protected]> * remove CustomSwitch Signed-off-by: ryjiang <[email protected]> * use styled for CustomTooltip Signed-off-by: ryjiang <[email protected]> * use styled for DataListView Signed-off-by: ryjiang <[email protected]> * used styled for grid Signed-off-by: ryjiang <[email protected]> * use styled for layout Signed-off-by: ryjiang <[email protected]> * use styled for status Signed-off-by: ryjiang <[email protected]> * use styled uploader Signed-off-by: ryjiang <[email protected]> --------- Signed-off-by: ryjiang <[email protected]>
zilliztech · Feb 26, 2025 · 23d51bb · 23d51bb
1 parent 17d3214
commit 23d51bb
Show file tree

Hide file tree

Showing 34 changed files with 809 additions and 1,175 deletions.
diff --git a/client/src/components/DataListView/DataListView.tsx b/client/src/components/DataListView/DataListView.tsx
@@ -1,71 +1,71 @@
 import Typography from '@mui/material/Typography';
 import Chip from '@mui/material/Chip';
-import { makeStyles } from '@mui/styles';
+import { styled } from '@mui/material/styles';
 import { formatFieldType } from '@/utils';
 import DataView from '@/components/DataView/DataView';
 import { DYNAMIC_FIELD } from '@/consts';
 import CopyButton from '@/components/advancedSearch/CopyButton';
-import type { Theme } from '@mui/material/styles';
 import type { CollectionFullObject } from '@server/types';
 
 interface DataListViewProps {
   collection: CollectionFullObject;
   data: any;
 }
-const useStyles = makeStyles((theme: Theme) => ({
-  root: {
-    padding: 16,
-    cursor: 'initial',
-  },
-  dataTitleContainer: {
-    display: 'flex',
-    justifyContent: 'space-between',
-  },
-  title: {
-    fontSize: 14,
-    fontWeight: 600,
-  },
-  type: {
-    color: theme.palette.text.secondary,
-    marginLeft: 4,
-    marginTop: 2,
-  },
-  dataContainer: {
-    display: 'flex',
-    padding: 8,
-    border: `1px solid ${theme.palette.divider}`,
-    backgroundColor: theme.palette.background.paper,
-    borderRadius: 4,
-    marginBottom: 16,
-    maxHeight: 400,
-    overflow: 'auto',
-  },
-  copy: {
-    marginLeft: 0,
-    '& svg': {
-      width: 15,
-    },
-  },
-  dataTypeChip: {
-    fontSize: 11,
-    color: theme.palette.text.primary,
-    cursor: 'normal',
-    marginRight: 4,
-    marginLeft: 4,
-    backgroundColor: theme.palette.background.grey,
+
+// 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) => {
-  // props
   const { collection, data } = props;
-  // styles
-  const classes = useStyles();
 
-  // page data
+  // Merge dynamic fields into row
   let row = data[0];
-
-  // merge dymaic fields into row
   row = {
     ...row,
     ...row[DYNAMIC_FIELD],
@@ -80,40 +80,35 @@ const DataListView = (props: DataListViewProps) => {
   }
 
   return (
-    <div className={classes.root}>
+    <Root>
       {Object.keys(row).map((name: string, index: number) => {
         const field = collection.schema.fields.find(f => f.name === name);
         return (
           <div key={index}>
-            <div className={classes.dataTitleContainer}>
-              <span className={classes.title}>
+            <DataTitleContainer>
+              <Title>
                 {name}
-                <CopyButton
-                  className={classes.copy}
-                  value={row[name]}
-                  label={name}
-                />
-              </span>
-              <span className={classes.type}>
+                <StyledCopyButton value={row[name]} label={name} />
+              </Title>
+              <Type>
                 {field && (
-                  <Chip
-                    className={classes.dataTypeChip}
+                  <DataTypeChip
                     size="small"
                     label={formatFieldType(field) || 'meta'}
                   />
                 )}
-              </span>
-            </div>
-            <div className={classes.dataContainer}>
+              </Type>
+            </DataTitleContainer>
+            <DataContainer>
               <DataView
                 type={(field && field.data_type) || 'any'}
                 value={row[name]}
               />
-            </div>
+            </DataContainer>
           </div>
         );
       })}
-    </div>
+    </Root>
   );
 };
 

diff --git a/client/src/components/cards/EmptyCard.tsx b/client/src/components/cards/EmptyCard.tsx
@@ -1,49 +1,38 @@
+import { styled } from '@mui/material/styles';
 import Typography from '@mui/material/Typography';
 import CardContent from '@mui/material/CardContent';
-import { makeStyles } from '@mui/styles';
 import StatusIcon, { LoadingType } from '@/components/status/StatusIcon';
 import type { FC } from 'react';
-import type { Theme } from '@mui/material/styles';
 import type { EmptyCardProps } from './Types';
 
-const useStyles = makeStyles((theme: Theme) => ({
-  wrapper: {
-    color: theme.palette.text.primary,
-    backgroundColor: theme.palette.background.paper,
-    flexDirection: 'column',
-    textAlign: 'center',
-  },
-  text: {
-    marginTop: theme.spacing(2),
-    fontSize: '36px',
-    lineHeight: '42px',
-    fontWeight: 'bold',
-    letterSpacing: '-0.02em',
-  },
-  subText: {
-    fontSize: '18px',
-    marginTop: theme.spacing(1),
-  },
+const StyledSection = styled('section')(({ theme }) => ({
+  color: theme.palette.text.disabled,
+  backgroundColor: theme.palette.background.paper,
+  flexDirection: 'column',
+  textAlign: 'center',
+  display: 'flex',
+  alignItems: 'center',
+  justifyContent: 'center',
+}));
+
+const TitleTypography = styled(Typography)(({ theme }) => ({
+  marginTop: theme.spacing(2),
 }));
 
 const EmptyCard: FC<EmptyCardProps> = ({
   icon,
   text,
   wrapperClass = '',
-  subText = '',
   loading = false,
 }) => {
-  const classes = useStyles();
-
   return (
-    <section className={`flex-center ${classes.wrapper} ${wrapperClass}`}>
+    <StyledSection className={wrapperClass}>
       <CardContent>
         {loading && <StatusIcon type={LoadingType.CREATING} size={40} />}
         {icon}
-        <Typography className={classes.text}>{text}</Typography>
-        <Typography className={classes.subText}>{subText}</Typography>
+        <TitleTypography variant="h2">{text}</TitleTypography>
       </CardContent>
-    </section>
+    </StyledSection>
   );
 };
 

diff --git a/client/src/components/cards/Types.ts b/client/src/components/cards/Types.ts
@@ -2,7 +2,6 @@ import { ReactElement } from 'react';
 
 export interface EmptyCardProps {
   text: string;
-  subText?: string;
   icon?: ReactElement;
   wrapperClass?: string;
   loading?: boolean;

diff --git a/client/src/components/customButton/CustomButton.tsx b/client/src/components/customButton/CustomButton.tsx
@@ -1,111 +1,38 @@
 import Button from '@mui/material/Button';
 import Tooltip from '@mui/material/Tooltip';
-import { makeStyles } from '@mui/styles';
 import type { ButtonProps } from '@mui/material/Button';
-import type { Theme } from '@mui/material/styles';
 
-const buttonStyle = makeStyles((theme: Theme) => ({
-  button: {
-    padding: theme.spacing(1, 3),
-    textTransform: 'initial',
-    fontWeight: 'bold',
-  },
-  textBtn: {
-    color: theme.palette.primary.main,
-    padding: theme.spacing(1),
+interface CustomButtonProps extends ButtonProps {
+  tooltip?: string;
+  tooltipPlacement?:
+    | 'bottom'
+    | 'left'
+    | 'right'
+    | 'top'
+    | 'bottom-end'
+    | 'bottom-start'
+    | 'left-end'
+    | 'left-start'
+    | 'right-end'
+    | 'right-start'
+    | 'top-end'
+    | 'top-start';
+}
 
-    '&:hover': {
-      backgroundColor: theme.palette.primary.main,
-      color: theme.palette.background.paper,
-    },
-  },
-  containedBtn: {
-    color: theme.palette.background.paper,
-    backgroundColor: theme.palette.primary.main,
-    boxShadow: 'initial',
-    fontWeight: 'bold',
-    lineHeight: '24px',
-    '&:hover': {
-      backgroundColor: theme.palette.primary.dark,
-      boxShadow: 'initial',
-    },
-  },
-  containedSecondary: {
-    backgroundColor: '#fc4c02',
+const CustomButton = ({
+  tooltip,
+  tooltipPlacement = 'top',
+  disabled,
+  ...props
+}: CustomButtonProps) => {
+  const button = <Button disabled={disabled} {...props} />;
 
-    '&:hover': {
-      backgroundColor: '#fc4c02',
-    },
-  },
-  disabledBtn: {
-    pointerEvents: 'none',
-  },
-}));
-
-// props types same as Material Button
-const CustomButton = (
-  props: ButtonProps & {
-    tooltip?: string;
-    tooltipPlacement?:
-      | 'bottom'
-      | 'left'
-      | 'right'
-      | 'top'
-      | 'bottom-end'
-      | 'bottom-start'
-      | 'left-end'
-      | 'left-start'
-      | 'right-end'
-      | 'right-start'
-      | 'top-end'
-      | 'top-start'
-      | undefined;
-  }
-) => {
-  const classes = buttonStyle();
-  const { tooltip, tooltipPlacement, disabled, ...otherProps } = props;
-
-  const btn = (
-    <Button
-      classes={{
-        root: classes.button,
-        text: classes.textBtn,
-        contained: classes.containedBtn,
-        containedSecondary: classes.containedSecondary,
-        disabled: classes.disabledBtn,
-      }}
-      disabled={disabled}
-      {...otherProps}
-    >
-      {props.children}
-    </Button>
-  );
-
-  return (
-    <>
-      {/*
-      add span to let disabled elements show tooltip
-      see https://material-ui.com/zh/components/tooltips/#disabled-elements
-      */}
-      {tooltip ? (
-        <Tooltip title={tooltip} placement={tooltipPlacement}>
-          {disabled ? <span>{btn}</span> : btn}
-        </Tooltip>
-      ) : (
-        <Button
-          classes={{
-            root: classes.button,
-            text: classes.textBtn,
-            contained: classes.containedBtn,
-            containedSecondary: classes.containedSecondary,
-          }}
-          disabled={disabled}
-          {...otherProps}
-        >
-          {props.children}
-        </Button>
-      )}
-    </>
+  return tooltip ? (
+    <Tooltip title={tooltip} placement={tooltipPlacement}>
+      {disabled ? <span>{button}</span> : button}
+    </Tooltip>
+  ) : (
+    button
   );
 };