From 5c8001a6da2e7603a374fbb21036ca14c31cb1e6 Mon Sep 17 00:00:00 2001 From: ming680 <827668037@qq.com> Date: Wed, 25 Sep 2024 11:53:50 +0800 Subject: [PATCH] feat(rate): rate --- src/rate/Rate.tsx | 25 ++++++++++----------- src/rate/RateIcon.tsx | 5 ++--- src/rate/RateText.tsx | 6 ++--- src/rate/RateTips.tsx | 5 ++--- src/rate/rate.en-US.md | 46 +------------------------------------ src/rate/rate.md | 51 +----------------------------------------- 6 files changed, 20 insertions(+), 118 deletions(-) diff --git a/src/rate/Rate.tsx b/src/rate/Rate.tsx index 15454e41..de5e9d80 100644 --- a/src/rate/Rate.tsx +++ b/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 = forwardRef((props, ref) => { - const { classPrefix } = useConfig(); - const rateClass = `${classPrefix}-rate`; +const Rate = forwardRef((props, ref) => { + const rateClass = usePrefixClass('rate'); const { style, @@ -108,7 +107,7 @@ const Rate: FC = forwardRef((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 = forwardRef((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 = forwardRef((props, ref) = = forwardRef((props, ref) = isCurrent={false} isSelected={true} isHalf={isHalf} - size={converToNumber(size)} + size={convertToNumber(size)} /> ), text: value, diff --git a/src/rate/RateIcon.tsx b/src/rate/RateIcon.tsx index 9fb08bc5..f8b5ba14 100644 --- a/src/rate/RateIcon.tsx +++ b/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> & { @@ -13,8 +13,7 @@ type Props = Required> & { }; 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; diff --git a/src/rate/RateText.tsx b/src/rate/RateText.tsx index aaaf3fa6..e9b87bd0 100644 --- a/src/rate/RateText.tsx +++ b/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; diff --git a/src/rate/RateTips.tsx b/src/rate/RateTips.tsx index 3630803b..6226f5a7 100644 --- a/src/rate/RateTips.tsx +++ b/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(null); diff --git a/src/rate/rate.en-US.md b/src/rate/rate.en-US.md index 9a70f3c1..452d837c 100644 --- a/src/rate/rate.en-US.md +++ b/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 diff --git a/src/rate/rate.md b/src/rate/rate.md index 262a862e..2c7901a4 100644 --- a/src/rate/rate.md +++ b/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