fix: 🐛 replace defaultProps with useDefaultProps (#2621)

Tencent · Nov 29, 2023 · 1755757 · 1755757
1 parent 613ba0c
commit 1755757
Showing 1 changed file with 41 additions and 16 deletions.
diff --git a/src/rate/Rate.tsx b/src/rate/Rate.tsx
@@ -1,4 +1,4 @@
-import React, { MouseEvent, useState, forwardRef } from 'react';
+import React, { useState } from 'react';
 import classNames from 'classnames';
 import { StarFilledIcon as TdStarFilledIcon } from 'tdesign-icons-react';
 import { TooltipLite } from '../tooltip';
@@ -8,66 +8,92 @@ import useConfig from '../hooks/useConfig';
 import useGlobalIcon from '../hooks/useGlobalIcon';
 import useControlled from '../hooks/useControlled';
 import { rateDefaultProps } from './defaultProps';
+import useDefaultProps from '../hooks/useDefaultProps';
 
 export interface RateProps extends TdRateProps, StyledProps {}
 
+interface RateIconProps {
+  icon: React.ReactNode;
+  color: string;
+  size: string;
+}
+
 // 评分图标
 // fix: 2550
-const RateIcon = ({ icon, ...props }) => {
+const RateIcon: React.FC<RateIconProps> = ({ icon, ...props }) => {
   const { StarFilledIcon } = useGlobalIcon({ StarFilledIcon: TdStarFilledIcon });
   if (React.isValidElement(icon)) {
     return React.cloneElement(icon, props);
   }
   return <StarFilledIcon {...props} />;
 };
 
-const Rate = forwardRef((props: RateProps, ref: React.Ref<HTMLDivElement>) => {
+const Rate = React.forwardRef<HTMLDivElement, RateProps>((originalProps, ref) => {
+  const props = useDefaultProps<RateProps>(originalProps, rateDefaultProps);
+
   const { allowHalf, color, count, disabled, gap, showText, size, texts, icon, className, style, onChange } = props;
 
   const { classPrefix } = useConfig();
   const [starValue = 0, setStarValue] = useControlled(props, 'value', onChange);
 
   const [hoverValue = undefined, setHoverValue] = useState<number | undefined>(undefined);
   const displayValue = hoverValue || starValue;
-  const rootRef = React.useRef(null);
+
+  const rootRef = React.useRef<HTMLUListElement>(null);
 
   const activeColor = Array.isArray(color) ? color[0] : color;
   const defaultColor = Array.isArray(color) ? color[1] : 'var(--td-bg-color-component)';
 
-  const getStarValue = (event: MouseEvent<HTMLElement>, index: number) => {
+  const getStarValue = (event: React.MouseEvent<HTMLLIElement, globalThis.MouseEvent>, index: number) => {
     if (allowHalf) {
       const rootNode = rootRef.current;
       const { left } = rootNode.getBoundingClientRect();
       const firstStar = rootNode.firstChild as HTMLElement;
       const { width } = firstStar.getBoundingClientRect();
       const { clientX } = event;
       const starMiddle = width * (index - 0.5) + gap * (index - 1);
-      if (clientX - left >= starMiddle) return index;
-      if (clientX - left < starMiddle) return index - 0.5;
+      if (clientX - left >= starMiddle) {
+        return index;
+      }
+      if (clientX - left < starMiddle) {
+        return index - 0.5;
+      }
     }
 
     return index;
   };
 
-  const mouseEnterHandler = (event: MouseEvent<HTMLElement>, index: number) => {
-    if (disabled) return;
+  const mouseEnterHandler = (event: React.MouseEvent<HTMLLIElement, globalThis.MouseEvent>, index: number) => {
+    if (disabled) {
+      return;
+    }
     setHoverValue(getStarValue(event, index));
   };
 
   const mouseLeaveHandler = () => {
-    if (disabled) return;
+    if (disabled) {
+      return;
+    }
     setHoverValue(undefined);
   };
 
-  const clickHandler = (event: MouseEvent<HTMLElement>, index: number) => {
-    if (disabled) return;
+  const clickHandler = (event: React.MouseEvent<HTMLLIElement, globalThis.MouseEvent>, index: number) => {
+    if (disabled) {
+      return;
+    }
     setStarValue(getStarValue(event, index));
   };
 
   const getStarCls = (index: number) => {
-    if (allowHalf && index + 0.5 === displayValue) return `${classPrefix}-rate__item--half`;
-    if (index >= displayValue) return '';
-    if (index < displayValue) return `${classPrefix}-rate__item--full`;
+    if (allowHalf && index + 0.5 === displayValue) {
+      return `${classPrefix}-rate__item--half`;
+    }
+    if (index >= displayValue) {
+      return '';
+    }
+    if (index < displayValue) {
+      return `${classPrefix}-rate__item--full`;
+    }
   };
 
   return (
@@ -113,6 +139,5 @@ const Rate = forwardRef((props: RateProps, ref: React.Ref<HTMLDivElement>) => {
 });
 
 Rate.displayName = 'Rate';
-Rate.defaultProps = rateDefaultProps;
 
 export default Rate;