fix: type error

DODOEX · Jan 23, 2025 · 2c91689 · 2c91689
1 parent bba9206
commit 2c91689
Show file tree

Hide file tree

Showing 10 changed files with 169 additions and 188 deletions.
diff --git a/packages/dodoex-components/src/Hover/HoverAddUnderLine.tsx b/packages/dodoex-components/src/Hover/HoverAddUnderLine.tsx
@@ -9,62 +9,55 @@ interface HoverAddUnderLineProps extends BoxProps {
   hoverSx?: BoxProps['sx'];
 }
 
-const HoverAddUnderLine = React.forwardRef(
-  (
-    {
-      children,
-      sx,
-      lineColor,
-      lineSx,
-      hoverSx,
-      ...attrs
-    }: HoverAddUnderLineProps,
-    ref: any,
-  ) => {
-    const theme = useTheme();
-    const { isMobile } = useDevices();
+const HoverAddUnderLine = React.forwardRef<
+  HTMLDivElement,
+  HoverAddUnderLineProps
+>(({ children, sx, lineColor, lineSx, hoverSx, ...attrs }, ref: any) => {
+  const theme = useTheme();
+  const { isMobile } = useDevices();
 
-    const hoverCss = isMobile
-      ? {}
-      : {
-          '&:hover': {
-            '.hover-under-line': {
-              display: 'block',
-            },
-            ...hoverSx,
+  const hoverCss = isMobile
+    ? {}
+    : {
+        '&:hover': {
+          '.hover-under-line': {
+            display: 'block',
           },
-        };
+          ...hoverSx,
+        },
+      };
 
-    return (
+  return (
+    <Box
+      ref={ref}
+      sx={{
+        position: 'relative',
+        '.hover-under-line': {
+          display: 'none',
+        },
+        ...hoverCss,
+        ...sx,
+      }}
+      {...attrs}
+    >
+      {children}
       <Box
-        ref={ref}
+        className="hover-under-line"
         sx={{
-          position: 'relative',
-          '.hover-under-line': {
-            display: 'none',
-          },
-          ...hoverCss,
-          ...sx,
+          width: '100%',
+          height: '1px',
+          position: 'absolute',
+          left: 0,
+          right: 0,
+          bottom: -3,
+          backgroundColor: lineColor || theme.palette.text.primary,
+          ...lineSx,
         }}
-        {...attrs}
-      >
-        {children}
-        <Box
-          className="hover-under-line"
-          sx={{
-            width: '100%',
-            height: '1px',
-            position: 'absolute',
-            left: 0,
-            right: 0,
-            bottom: -3,
-            backgroundColor: lineColor || theme.palette.text.primary,
-            ...lineSx,
-          }}
-        />
-      </Box>
-    );
-  },
-);
+      />
+    </Box>
+  );
+});
+
+HoverAddUnderLine.displayName = 'HoverAddUnderLine';
 
 export default HoverAddUnderLine;
diff --git a/packages/dodoex-components/src/Loading/LoadingSkeleton.tsx b/packages/dodoex-components/src/Loading/LoadingSkeleton.tsx
@@ -1,4 +1,4 @@
-import { forwardRef, Ref } from 'react';
+import { forwardRef } from 'react';
 import { Box, BoxProps } from '../Box';
 import { Skeleton, SkeletonProps } from '../Skeleton';
 import { merge } from 'lodash';
@@ -10,20 +10,12 @@ interface LoadingSkeletonProps extends BoxProps {
 }
 
 // eslint-disable-next-line react/display-name
-const LoadingSkeleton = forwardRef(
-  (
-    {
-      loading,
-      loadingSx,
-      loadingProps,
-      children,
-      ...attrs
-    }: LoadingSkeletonProps,
-    ref: Ref<HTMLDivElement>,
-  ) => {
+const LoadingSkeleton = forwardRef<HTMLDivElement, LoadingSkeletonProps>(
+  ({ loading, loadingSx, loadingProps, children, ...attrs }, ref) => {
     return (
       <Box ref={ref} {...attrs}>
         {loading ? (
+          // @ts-ignore
           <Skeleton
             height="fit-content"
             // @ts-ignore

diff --git a/packages/dodoex-components/src/Radio/index.tsx b/packages/dodoex-components/src/Radio/index.tsx
@@ -11,62 +11,64 @@ type RadioProps = {
     checked: boolean,
   ) => void;
 };
-export const Radio = React.forwardRef(function Radio(
-  {
-    sx,
-    onChange,
-    size: sizeProps,
-    checkedIconSize: checkedIconSizeProps,
-    ...other
-  }: RadioProps,
-  ref,
-) {
-  const size = sizeProps ?? 20;
-  const checkedIconSize = checkedIconSizeProps ?? size / 2 + 2;
-  return (
-    <Box
-      component="span"
-      sx={{
-        display: 'inline-flex',
-        alignItems: 'center',
-        justifyContent: 'center',
-        width: size,
-        height: size,
-        position: 'relative',
-        borderRadius: '50%',
-        border: '1px solid',
-        borderColor: other.checked ? 'primary.main' : 'text.secondary',
-        cursor: 'pointer',
-        ...sx,
-      }}
-    >
+export const Radio = React.forwardRef<HTMLInputElement, RadioProps>(
+  function Radio(
+    {
+      sx,
+      onChange,
+      size: sizeProps,
+      checkedIconSize: checkedIconSizeProps,
+      ...other
+    },
+    ref,
+  ) {
+    const size = sizeProps ?? 20;
+    const checkedIconSize = checkedIconSizeProps ?? size / 2 + 2;
+    return (
       <Box
-        component="input"
-        type="radio"
-        {...other}
-        ref={ref}
-        onChange={(evt) => {
-          onChange?.(evt, evt.target.checked);
-        }}
+        component="span"
         sx={{
-          position: 'absolute',
-          top: 0,
-          left: 0,
+          display: 'inline-flex',
+          alignItems: 'center',
+          justifyContent: 'center',
           width: size,
           height: size,
-          opacity: 0,
+          position: 'relative',
+          borderRadius: '50%',
+          border: '1px solid',
+          borderColor: other.checked ? 'primary.main' : 'text.secondary',
+          cursor: 'pointer',
+          ...sx,
         }}
-      />
-      {other.checked && (
+      >
         <Box
+          component="input"
+          type="radio"
+          {...other}
+          ref={ref}
+          onChange={(evt) => {
+            onChange?.(evt, evt.target.checked);
+          }}
           sx={{
-            width: checkedIconSize,
-            height: checkedIconSize,
-            borderRadius: '50%',
-            backgroundColor: 'primary.main',
+            position: 'absolute',
+            top: 0,
+            left: 0,
+            width: size,
+            height: size,
+            opacity: 0,
           }}
         />
-      )}
-    </Box>
-  );
-});
+        {other.checked && (
+          <Box
+            sx={{
+              width: checkedIconSize,
+              height: checkedIconSize,
+              borderRadius: '50%',
+              backgroundColor: 'primary.main',
+            }}
+          />
+        )}
+      </Box>
+    );
+  },
+);
diff --git a/packages/dodoex-components/src/Skeleton/Skeleton.tsx b/packages/dodoex-components/src/Skeleton/Skeleton.tsx
@@ -9,50 +9,54 @@ export interface SkeletonProps extends BoxProps {
   height?: number | string;
 }
 
-const Skeleton = React.forwardRef(function Skeleton(props: SkeletonProps, ref) {
-  const {
-    sx,
-    variant: variantProps,
-    width,
-    height: heightProps,
-    ...other
-  } = props;
-  const variant = variantProps || 'rounded';
-  const height =
-    variant === 'circular' ? heightProps ?? width : heightProps ?? '1.2rem';
-  const borderRadius = variant === 'circular' ? '50%' : 4;
-  const theme = useTheme();
+const Skeleton = React.forwardRef<HTMLDivElement, SkeletonProps>(
+  function Skeleton(props, ref) {
+    const {
+      sx,
+      variant: variantProps,
+      width,
+      height: heightProps,
+      ...other
+    } = props;
+    const variant = variantProps || 'rounded';
+    const height =
+      variant === 'circular'
+        ? (heightProps ?? width)
+        : (heightProps ?? '1.2rem');
+    const borderRadius = variant === 'circular' ? '50%' : 4;
+    const theme = useTheme();
 
-  return (
-    <Box
-      ref={ref}
-      {...other}
-      sx={{
-        width,
-        height,
-        backgroundColor: alpha(
-          theme.palette.text.primary,
-          theme.palette.mode === 'light' ? 0.11 : 0.13,
-        ),
-        borderRadius,
-        animation: 'pulseKeyframe 2s ease-in-out 0.5s infinite',
-        '@keyframes pulseKeyframe': {
-          '0%': {
-            opacity: 1,
-          },
+    return (
+      <Box
+        ref={ref}
+        {...other}
+        sx={{
+          width,
+          height,
+          backgroundColor: alpha(
+            theme.palette.text.primary,
+            theme.palette.mode === 'light' ? 0.11 : 0.13,
+          ),
+          borderRadius,
+          animation: 'pulseKeyframe 2s ease-in-out 0.5s infinite',
+          '@keyframes pulseKeyframe': {
+            '0%': {
+              opacity: 1,
+            },
 
-          '50%': {
-            opacity: 0.4,
-          },
+            '50%': {
+              opacity: 0.4,
+            },
 
-          '100%': {
-            opacity: 1,
+            '100%': {
+              opacity: 1,
+            },
           },
-        },
-        ...sx,
-      }}
-    />
-  );
-});
+          ...sx,
+        }}
+      />
+    );
+  },
+);
 
 export default Skeleton;
diff --git a/packages/dodoex-components/src/Tabs/TabPanel.tsx b/packages/dodoex-components/src/Tabs/TabPanel.tsx
@@ -2,11 +2,11 @@ import { TabPanel as BaseTabPanel, TabPanelProps } from '@mui/base/TabPanel';
 import { Box, BoxProps } from '../Box';
 import React from 'react';
 
-export const TabPanel = React.forwardRef(function TabPanel(
-  props: Partial<TabPanelProps> & {
+export const TabPanel = React.forwardRef<
+  HTMLDivElement,
+  Partial<TabPanelProps> & {
     sx?: BoxProps['sx'];
-  },
-  ref,
-) {
+  }
+>(function TabPanel(props, ref) {
   return <Box component={BaseTabPanel} {...props} ref={ref} />;
 });
diff --git a/packages/dodoex-components/src/Tabs/Tabs.tsx b/packages/dodoex-components/src/Tabs/Tabs.tsx
@@ -2,15 +2,12 @@ import { Tabs as BaseTabs, TabsProps } from '@mui/base/Tabs';
 import React from 'react';
 import { Box, BoxProps } from '../Box';
 
-export const Tabs = React.forwardRef(function TabsList(
-  {
-    onChange,
-    ...props
-  }: Partial<TabsProps> & {
+export const Tabs = React.forwardRef<
+  HTMLDivElement,
+  Partial<TabsProps> & {
     sx?: BoxProps['sx'];
-  },
-  ref: React.ForwardedRef<HTMLDivElement>,
-) {
+  }
+>(function TabsList({ onChange, ...props }, ref) {
   return (
     <Box
       component={BaseTabs}

diff --git a/packages/dodoex-components/src/Tabs/TabsButtonGroup/Tab.tsx b/packages/dodoex-components/src/Tabs/TabsButtonGroup/Tab.tsx
@@ -96,8 +96,8 @@ export interface TabProps extends BaseTabProps {
   sx?: BoxProps['sx'];
   variant?: 'default' | 'inPaper' | 'tag';
 }
-export const Tab = React.forwardRef(function TabsList(
-  { sx, variant: variantProps, ...props }: TabProps,
+export const Tab = React.forwardRef<HTMLDivElement, TabProps>(function TabsList(
+  { sx, variant: variantProps, ...props },
   ref,
 ) {
   const variant = variantProps ?? 'default';