feat(rate): rate

src/rate/Rate.tsx

@@ -1,10 +1,10 @@
 import { useSize } from 'ahooks';
 import cx from 'classnames';
-import React, { FC, forwardRef, useCallback, useEffect, useMemo, useRef, useState } from 'react';
-import useConfig from 'tdesign-mobile-react/_util/useConfig';
-import useDefault from 'tdesign-mobile-react/_util/useDefault';
-import { StyledProps } from 'tdesign-mobile-react/common';
-import useDefaultProps from 'tdesign-mobile-react/hooks/useDefaultProps';
+import React, { forwardRef, useCallback, useEffect, useMemo, useRef, useState } from 'react';
+import { usePrefixClass } from 'tdesign-mobile-react/hooks/useClass';
+import useDefault from '../_util/useDefault';
+import type { StyledProps } from '../common';
+import useDefaultProps from '../hooks/useDefaultProps';
 import { rateDefaultProps } from './defaultProps';
 import { RateIcon } from './RateIcon';
 import { RateText } from './RateText';
@@ -13,14 +13,13 @@ import type { TdRateProps } from './type';
 
 export interface RateProps extends TdRateProps, StyledProps {}
 
-const converToNumber = (str: string | number, defaultValue = 0) => {
+const convertToNumber = (str: string | number, defaultValue = 0) => {
   const value = parseFloat(String(str));
   return isNaN(value) ? defaultValue : value;
 };
 
-const Rate: FC<RateProps> = forwardRef<HTMLDivElement, RateProps>((props, ref) => {
-  const { classPrefix } = useConfig();
-  const rateClass = `${classPrefix}-rate`;
+const Rate = forwardRef<HTMLDivElement, RateProps>((props, ref) => {
+  const rateClass = usePrefixClass('rate');
 
   const {
     style,
@@ -108,7 +107,7 @@ const Rate: FC<RateProps> = forwardRef<HTMLDivElement, RateProps>((props, ref) =
 
       // 计算
       const wrapRect = wrapEle.getBoundingClientRect();
-      const gapNum = converToNumber(gap);
+      const gapNum = convertToNumber(gap);
       const perWidth = (wrapRect.width + gapNum) / count;
       // 左边 - gap / 2 右边 + gap / 2
       const x = event.clientX - wrapRect.x + gapNum / 2;
@@ -144,7 +143,7 @@ const Rate: FC<RateProps> = forwardRef<HTMLDivElement, RateProps>((props, ref) =
       return 0;
     }
 
-    const gapNum = converToNumber(gap);
+    const gapNum = convertToNumber(gap);
     const perWidth = (wrapSize.width - (count - 1) * gapNum) / count;
     const index = Math.max(Math.min(Math.ceil(currentValue), count), 1) - 1;
 
@@ -183,7 +182,7 @@ const Rate: FC<RateProps> = forwardRef<HTMLDivElement, RateProps>((props, ref) =
               <RateIcon
                 key={index}
                 color={color}
-                size={converToNumber(size)}
+                size={convertToNumber(size)}
                 icon={icon}
                 isCurrent={currentValue === itemValue && tipsVisible}
                 // 整个 和 半个 都要选中
@@ -240,7 +239,7 @@ const Rate: FC<RateProps> = forwardRef<HTMLDivElement, RateProps>((props, ref) =
                   isCurrent={false}
                   isSelected={true}
                   isHalf={isHalf}
-                  size={converToNumber(size)}
+                  size={convertToNumber(size)}
                 />
               ),
               text: value,

src/rate/RateIcon.tsx

@@ -1,7 +1,7 @@
 import cx from 'classnames';
 import React, { cloneElement, ReactNode, useMemo, useRef } from 'react';
 import { StarFilledIcon } from 'tdesign-icons-react';
-import useConfig from 'tdesign-mobile-react/_util/useConfig';
+import { usePrefixClass } from 'tdesign-mobile-react/hooks/useClass';
 import { TdRateProps } from './type';
 
 type Props = Required<Pick<TdRateProps, 'icon' | 'color'>> & {
@@ -13,8 +13,7 @@ type Props = Required<Pick<TdRateProps, 'icon' | 'color'>> & {
 };
 
 export const RateIcon = (props: Props) => {
-  const { classPrefix } = useConfig();
-  const iconClass = `${classPrefix}-rate__icon`;
+  const iconClass = usePrefixClass('rate__icon');
 
   const { size, icon, color, isCurrent, isSelected, isHalf, onClick } = props;
 

src/rate/RateText.tsx

@@ -1,6 +1,6 @@
 import cx from 'classnames';
 import React from 'react';
-import useConfig from 'tdesign-mobile-react/_util/useConfig';
+import { usePrefixClass } from 'tdesign-mobile-react/hooks/useClass';
 import { TdRateProps } from './type';
 
 type Props = {
@@ -9,9 +9,7 @@ type Props = {
 };
 
 export const RateText = (props: Props) => {
-  const { classPrefix } = useConfig();
-
-  const textClass = `${classPrefix}-rate__text`;
+  const textClass = usePrefixClass('rate__text');
 
   const { value, texts } = props;
 

src/rate/RateTips.tsx

@@ -1,7 +1,7 @@
 import { useClickAway } from 'ahooks';
 import cx from 'classnames';
 import React, { ReactNode, useRef } from 'react';
-import useConfig from 'tdesign-mobile-react/_util/useConfig';
+import { usePrefixClass } from 'tdesign-mobile-react/hooks/useClass';
 import { TdRateProps } from './type';
 
 type Props = {
@@ -17,8 +17,7 @@ type Props = {
 };
 
 export const RateTips = (props: Props) => {
-  const { classPrefix } = useConfig();
-  const tipClass = `${classPrefix}-rate__tips`;
+  const tipClass = usePrefixClass('rate__tips');
 
   const { left, data, placement, onClickOutside } = props;
   const ref = useRef<HTMLDivElement | null>(null);

src/rate/rate.en-US.md

@@ -1,48 +1,4 @@
----
-title: Rate 评分
-description: 用于对某行为/事物进行打分。
-spline: base
-isComponent: true
-toc: false
----
-
-### 组件类型
-
-实心评分
-
-{{ base }}
-
-自定义评分
-
-{{ custom }}
-
-自定义评分数量
-
-{{ count }}
-
-带描述评分
-
-{{ show-text }}
-
-### 组件状态
-
-{{ action }}
-
-### 组件样式
-
-评分大小
-
-{{ size }}
-
-设置评分颜色
-
-{{ color }}
-
-### 特殊样式
-
-竖向带描述评分
-
-{{ special }}
+:: BASE_DOC ::
 
 ## API
 

src/rate/rate.md

@@ -1,53 +1,4 @@
----
-title: Rate 评分
-description: 用于对某行为/事物进行打分。
-spline: base
-isComponent: true
-toc: false
----
-
-### 组件类型
-
-实心评分
-
-{{ base }}
-
-自定义评分
-
-{{ custom }}
-
-自定义评分数量
-
-{{ count }}
-
-带描述评分
-
-{{ show-text }}
-
-评分弹框位置
-
-{{ placement }}
-
-### 组件状态
-
-{{ action }}
-
-### 组件样式
-
-评分大小
-
-{{ size }}
-
-设置评分颜色
-
-{{ color }}
-
-### 特殊样式
-
-竖向带描述评分
-
-{{ special }}
-
+:: BASE_DOC ::
 
 ## API