From 17557576c40886c2a1efcf06365605672126e9f4 Mon Sep 17 00:00:00 2001
From: lijianan <574980606@qq.com>
Date: Wed, 29 Nov 2023 09:10:29 +0800
Subject: [PATCH] =?UTF-8?q?fix:=20=F0=9F=90=9B=20replace=20defaultProps=20?=
 =?UTF-8?q?with=20useDefaultProps=20(#2621)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/rate/Rate.tsx | 57 ++++++++++++++++++++++++++++++++++-------------
 1 file changed, 41 insertions(+), 16 deletions(-)

diff --git a/src/rate/Rate.tsx b/src/rate/Rate.tsx
index 63813044e..c716c42f5 100644
--- 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,12 +8,19 @@ 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);
@@ -21,7 +28,9 @@ const RateIcon = ({ 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();
@@ -29,12 +38,13 @@ const Rate = forwardRef((props: RateProps, ref: React.Ref<HTMLDivElement>) => {
 
   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();
@@ -42,32 +52,48 @@ const Rate = forwardRef((props: RateProps, ref: React.Ref<HTMLDivElement>) => {
       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;