-
-
,
+
+ const gapNum = converToNumber(gap);
+ const perWidth = (wrapSize.width - (count - 1) * gapNum) / count;
+ const index = Math.max(Math.min(Math.ceil(currentValue), count), 1) - 1;
+
+ return (index + 1) * perWidth - perWidth / 2 + index * gapNum;
+ }, [wrapSize, count, currentValue, gap]);
+
+ const [clickTime, setClickTime] = useState(0);
+
+ const doubleTips = allowHalf && !isDragging;
+
+ return (
+ - {starList}
+ {
+ let isHalf = false;
+ if (doubleTips) {
+ isHalf = index === 0;
+ } else {
+ isHalf = Math.ceil(currentValue) !== currentValue;
+ }
+
+ let value = currentValue;
+ if (doubleTips) {
+ if (index === 0) {
+ value = Math.ceil(currentValue) - 0.5;
+ } else {
+ value = Math.ceil(currentValue);
+ }
+ }
+
+ const actived = doubleTips ? value === currentValue : false;
+
+ return {
+ icon: (
+
);
});
-Rate.defaultProps = rateDefaultProps;
Rate.displayName = 'Rate';
export default Rate;
diff --git a/src/rate/RateIcon.tsx b/src/rate/RateIcon.tsx
new file mode 100644
index 00000000..9fb08bc5
--- /dev/null
+++ b/src/rate/RateIcon.tsx
@@ -0,0 +1,89 @@
+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 { TdRateProps } from './type';
+
+type Props = Required
+ {Array(count)
+ .fill('')
+ .map((_, index) => {
+ const itemValue = index + 1;
+
+ const compareValue = isDragging ? currentValue : innerValue;
+
+ return (
+ compareValue && itemValue < compareValue + 1}
+ onClick={(placement) => {
+ if (!controlRef.current.enableClick || disabled) {
+ return;
+ }
+ const value = placement === 'left' && allowHalf ? itemValue - 0.5 : itemValue;
+ setClickTime(Date.now());
+ setCurrentValue(value);
+ onShowTips();
+ controlRef.current.timer = setTimeout(onHideTips, 3000) as any as number;
+ setInnerValue(value);
+ }}
+ />
+ );
+ })}
+
+ {showText ? {
+ const dom = ref.current;
+ if (!dom) {
+ return;
+ }
+ const rect = dom.getBoundingClientRect();
+ const isLeft = e.clientX < rect.x + rect.width / 2;
+ onClick?.(isLeft ? 'left' : 'right', e);
+ }}
+ style={style}
+ className={cx(iconClass, {
+ [`${iconClass}--current`]: isCurrent,
+ [`${iconClass}--selected`]: isSelected && !isHalf,
+ [`${iconClass}--unselected`]: !isSelected || isHalf,
+ })}
+ >
+ {isHalf ? (
+
+ );
+};
diff --git a/src/rate/RateText.tsx b/src/rate/RateText.tsx
new file mode 100644
index 00000000..aaaf3fa6
--- /dev/null
+++ b/src/rate/RateText.tsx
@@ -0,0 +1,29 @@
+import cx from 'classnames';
+import React from 'react';
+import useConfig from 'tdesign-mobile-react/_util/useConfig';
+import { TdRateProps } from './type';
+
+type Props = {
+ texts: TdRateProps['texts'];
+ value: number;
+};
+
+export const RateText = (props: Props) => {
+ const { classPrefix } = useConfig();
+
+ const textClass = `${classPrefix}-rate__text`;
+
+ const { value, texts } = props;
+
+ const text = (Array.isArray(texts) ? texts[value - 1] : '') || `${value}分`;
+
+ return (
+ 0,
+ })}
+ >
+ {value ? text : '未评分'}
+
+ );
+};
diff --git a/src/rate/RateTips.tsx b/src/rate/RateTips.tsx
new file mode 100644
index 00000000..3630803b
--- /dev/null
+++ b/src/rate/RateTips.tsx
@@ -0,0 +1,52 @@
+import { useClickAway } from 'ahooks';
+import cx from 'classnames';
+import React, { ReactNode, useRef } from 'react';
+import useConfig from 'tdesign-mobile-react/_util/useConfig';
+import { TdRateProps } from './type';
+
+type Props = {
+ left: number;
+ placement: TdRateProps['placement'];
+ onClickOutside: () => void;
+ data: {
+ icon: ReactNode;
+ text: ReactNode;
+ actived?: boolean;
+ onClick?: (index: number) => void;
+ }[];
+};
+
+export const RateTips = (props: Props) => {
+ const { classPrefix } = useConfig();
+ const tipClass = `${classPrefix}-rate__tips`;
+
+ const { left, data, placement, onClickOutside } = props;
+ const ref = useRef
+ {iconNode}
+
+ ) : null}
+
+ {iconNode}
+
+
+ );
+};
diff --git a/src/rate/_example/action.tsx b/src/rate/_example/action.tsx
new file mode 100644
index 00000000..957bcf3c
--- /dev/null
+++ b/src/rate/_example/action.tsx
@@ -0,0 +1,11 @@
+import React from 'react';
+import { Cell, Rate } from 'tdesign-mobile-react';
+
+export default function Action(props: { allowHalf: boolean }) {
+ const { allowHalf } = props;
+ return (
+
+ {data.map((item, index) => (
+
+ item.onClick?.(index)}
+ >
+ {item.icon}
+ {item.text}
+
+ ))}
+
-
- );
-}
diff --git a/src/rate/_example/custom.tsx b/src/rate/_example/custom.tsx
new file mode 100644
index 00000000..06a73d2c
--- /dev/null
+++ b/src/rate/_example/custom.tsx
@@ -0,0 +1,19 @@
+import React, { useState } from 'react';
+import { ThumbUpIcon } from 'tdesign-icons-react';
+import { Cell, Rate } from 'tdesign-mobile-react';
+
+export default function Custom() {
+ const [value, setValue] = useState(3);
+
+ return (
+ {props.title}
- {props.children}
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- );
-}
diff --git a/src/rate/_example/index.tsx b/src/rate/_example/index.tsx
new file mode 100644
index 00000000..9238da75
--- /dev/null
+++ b/src/rate/_example/index.tsx
@@ -0,0 +1,54 @@
+import React from 'react';
+import TDemoBlock from '../../../site/mobile/components/DemoBlock';
+import TDemoHeader from '../../../site/mobile/components/DemoHeader';
+
+import ActionDemo from './action';
+import BaseDemo from './base';
+import ColorDemo from './color';
+import CountDemo from './count';
+import CustomDemo from './custom';
+import PlacementDemo from './placement';
+import ShowTextDemo from './show-text';
+import SizeDemo from './size';
+import SpecialDemo from './special';
+
+export default function RateDemo() {
+ return (
+ <>
+ {texts[value - 1]}
+ | N diff --git a/src/rate/rate.md b/src/rate/rate.md index 1e35f486..262a862e 100644 --- a/src/rate/rate.md +++ b/src/rate/rate.md @@ -1,21 +1,72 @@ -:: BASE_DOC :: +--- +title: Rate 评分 +description: 用于对某行为/事物进行打分。 +spline: base +isComponent: true +toc: false +--- + +### 组件类型 + +实心评分 + +{{ base }} + +自定义评分 + +{{ custom }} + +自定义评分数量 + +{{ count }} + +带描述评分 + +{{ show-text }} + +评分弹框位置 + +{{ placement }} + +### 组件状态 + +{{ action }} + +### 组件样式 + +评分大小 + +{{ size }} + +设置评分颜色 + +{{ color }} + +### 特殊样式 + +竖向带描述评分 + +{{ special }} + ## API + ### Rate Props -名称 | 类型 | 默认值 | 说明 | 必传 +名称 | 类型 | 默认值 | 描述 | 必传 -- | -- | -- | -- | -- className | String | - | 类名 | N style | Object | - | 样式，TS 类型：`React.CSSProperties` | N allowHalf | Boolean | false | 是否允许半选 | N -color | String / Array | '#ED7B2F' | 评分图标的颜色，样式中默认为 #ED7B2F。一个值表示设置选中高亮的五角星颜色，示例：[选中颜色]。数组则表示分别设置 选中高亮的五角星颜色 和 未选中暗灰的五角星颜色，[选中颜色，未选中颜色]。示例：['#ED7B2F', '#E3E6EB']。TS 类型：`string | Array
评分数改变时触发 | N diff --git a/src/rate/style/index.js b/src/rate/style/index.js index 7502123a..8d4b4c68 100644 --- a/src/rate/style/index.js +++ b/src/rate/style/index.js @@ -1 +1 @@ -import '../../_common/style/mobile/components/rate/_index.less'; +import '../../_common/style/mobile/components/rate/v2/_index.less'; diff --git a/src/rate/type.ts b/src/rate/type.ts index 419decf8..ce319bdf 100644 --- a/src/rate/type.ts +++ b/src/rate/type.ts @@ -4,6 +4,8 @@ * 该文件为脚本自动生成文件，请勿随意修改。如需修改请联系 PMC * */ +import { TNode } from '../common'; + export interface TdRateProps { /** * 是否允许半选 @@ -22,22 +24,30 @@ export interface TdRateProps { count?: number; /** * 是否禁用评分 - * @default false */ disabled?: boolean; /** * 评分图标的间距 - * @default 6 + * @default 8 + */ + gap?: string | number; + /** + * 自定义评分图标，[选中图标，未选中图标] */ - gap?: number; + icon?: Array
+
+`;
+
+exports[`csr snapshot test > csr test src/rate/_example/base.tsx 1`] = `
+
+
+
+
+
+
+ 点击或滑动
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+`;
+
+exports[`csr snapshot test > csr test src/rate/_example/color.tsx 1`] = `
+
+
+
+
+
+
+ 实心评分
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+`;
+
+exports[`csr snapshot test > csr test src/rate/_example/count.tsx 1`] = `
+
+
+
+
+
+
+
+
+
+
+ 选中及未选中颜色
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ 仅选中颜色
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+`;
+
+exports[`csr snapshot test > csr test src/rate/_example/custom.tsx 1`] = `
+
+
+
+
+
+
+ 自定义评分数量
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+`;
+
+exports[`csr snapshot test > csr test src/rate/_example/index.tsx 1`] = `
+
+
+
+
+
+
+ 自定义评分
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+`;
+
+exports[`csr snapshot test > csr test src/rate/_example/placement.tsx 1`] = `
+
+
+ + Rate 评分 +
++ 用于对某行为/事物进行打分。 +
+
+
+
+
+ + 01 类型 +
++ 实心评分 +
+
+
+
+
+
+
+
+
+ 实心评分
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ + 自定义评分 +
+
+
+
+
+
+
+
+
+ 自定义评分
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ + 自定义数量评分 +
+
+
+
+
+
+
+
+
+ 自定义评分数量
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ + 带描述评分 +
+
+
+
+
+
+
+
+
+
+
+
+
+ 带描述评分
+
+
+
+
+
+
+ 很差
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ 带描述评分
+
+
+
+
+
+
+ 5分
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ 带描述评分
+
+
+
+
+
+
+ 未评分
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ + 评分弹框位置 +
+
+
+
+
+
+
+
+
+
+
+
+
+ 顶部显示
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ 底部显示
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ 不显示
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ + 02 组件状态 +
++ 只可选全星时 +
+
+
+
+
+
+
+
+
+ 点击或滑动
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ + 可选半星时 +
+
+
+
+
+
+
+
+
+ 点击或滑动
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ + 03 组件样式 +
++ 评分打小 +
+
+
+
+
+
+
+
+
+
+
+
+
+ 大尺寸24
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ 小尺寸20
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ + 设置评分颜色 +
+
+
+
+
+
+
+
+
+
+
+
+
+ 选中及未选中颜色
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ 仅选中颜色
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ + 04 特殊样式 +
++ 竖向带描述评分 +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ 可以尝试
+
+
+
+
+
+
+`;
+
+exports[`csr snapshot test > csr test src/rate/_example/show-text.tsx 1`] = `
+
+
+
+
+
+
+
+
+
+
+ 顶部显示
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ 底部显示
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ 不显示
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+`;
+
+exports[`csr snapshot test > csr test src/rate/_example/size.tsx 1`] = `
+
+
+
+
+
+
+
+
+
+
+ 带描述评分
+
+
+
+
+
+
+ 很差
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ 带描述评分
+
+
+
+
+
+
+ 5分
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ 带描述评分
+
+
+
+
+
+
+ 未评分
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+`;
+
+exports[`csr snapshot test > csr test src/rate/_example/special.tsx 1`] = `
+
+
+
+
+
+
+
+
+
+
+ 大尺寸24
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ 小尺寸20
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+`;
+
exports[`csr snapshot test > csr test src/result/_example/custom.tsx 1`] = `
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ 可以尝试
+
+ ssr test src/radio/_example/placement.tsx 1`] = `"<
exports[`ssr snapshot test > ssr test src/radio/_example/status.tsx 1`] = `""`;
+exports[`ssr snapshot test > ssr test src/rate/_example/action.tsx 1`] = `""`;
+
+exports[`ssr snapshot test > ssr test src/rate/_example/base.tsx 1`] = `""`;
+
+exports[`ssr snapshot test > ssr test src/rate/_example/color.tsx 1`] = `""`;
+
+exports[`ssr snapshot test > ssr test src/rate/_example/count.tsx 1`] = `""`;
+
+exports[`ssr snapshot test > ssr test src/rate/_example/custom.tsx 1`] = `""`;
+
+exports[`ssr snapshot test > ssr test src/rate/_example/index.tsx 1`] = `""`;
+
+exports[`ssr snapshot test > ssr test src/rate/_example/show-text.tsx 1`] = `""`;
+
+exports[`ssr snapshot test > ssr test src/rate/_example/size.tsx 1`] = `""`;
+
+exports[`ssr snapshot test > ssr test src/rate/_example/special.tsx 1`] = `""`;
+
exports[`ssr snapshot test > ssr test src/result/_example/custom.tsx 1`] = `"
"`;
exports[`ssr snapshot test > ssr test src/result/_example/index.tsx 1`] = `""`;
diff --git a/test/snap/__snapshots__/ssr.test.jsx.snap b/test/snap/__snapshots__/ssr.test.jsx.snap
index ea2a563b..80e9404f 100644
--- a/test/snap/__snapshots__/ssr.test.jsx.snap
+++ b/test/snap/__snapshots__/ssr.test.jsx.snap
@@ -350,6 +350,26 @@ exports[`ssr snapshot test > ssr test src/radio/_example/placement.tsx 1`] = `"<
exports[`ssr snapshot test > ssr test src/radio/_example/status.tsx 1`] = `""`;
+exports[`ssr snapshot test > ssr test src/rate/_example/action.tsx 1`] = `""`;
+
+exports[`ssr snapshot test > ssr test src/rate/_example/base.tsx 1`] = `""`;
+
+exports[`ssr snapshot test > ssr test src/rate/_example/color.tsx 1`] = `""`;
+
+exports[`ssr snapshot test > ssr test src/rate/_example/count.tsx 1`] = `""`;
+
+exports[`ssr snapshot test > ssr test src/rate/_example/custom.tsx 1`] = `""`;
+
+exports[`ssr snapshot test > ssr test src/rate/_example/index.tsx 1`] = `""`;
+
+exports[`ssr snapshot test > ssr test src/rate/_example/show-text.tsx 1`] = `""`;
+
+exports[`ssr snapshot test > ssr test src/rate/_example/size.tsx 1`] = `""`;
+
+exports[`ssr snapshot test > ssr test src/rate/_example/special.tsx 1`] = `""`;
+
exports[`ssr snapshot test > ssr test src/result/_example/custom.tsx 1`] = `""`;
exports[`ssr snapshot test > ssr test src/result/_example/index.tsx 1`] = `""`;
选项禁用-已选
选项禁用-默认
点击或滑动
实心评分
选中及未选中颜色
仅选中颜色
自定义评分数量
自定义评分
Rate 评分
用于对某行为/事物进行打分。
01 类型
实心评分
实心评分
自定义评分
自定义评分
自定义数量评分
自定义评分数量
带描述评分
带描述评分
很差
带描述评分
5分
带描述评分
未评分
评分弹框位置
顶部显示
底部显示
不显示
02 组件状态
只可选全星时
点击或滑动
可选半星时
点击或滑动
03 组件样式
评分打小
大尺寸24
小尺寸20
设置评分颜色
选中及未选中颜色
仅选中颜色
04 特殊样式
竖向带描述评分
可以尝试
"`;
+
+exports[`ssr snapshot test > ssr test src/rate/_example/placement.tsx 1`] = `"
顶部显示
底部显示
不显示
带描述评分
很差
带描述评分
5分
带描述评分
未评分
大尺寸24
小尺寸20
可以尝试
自定义结果
描述文字
Result 结果
结果反馈
01类型
不同结果反馈
成功状态
描述文字
失败状态
描述文字
警示状态
描述文字
默认状态
描述文字
自定义结果
自定义结果
描述文字
页面位置展示
选项禁用-已选
选项禁用-默认
点击或滑动
实心评分
选中及未选中颜色
仅选中颜色
自定义评分数量
自定义评分
Rate 评分
用于对某行为/事物进行打分。
01 类型
实心评分
实心评分
自定义评分
自定义评分
自定义数量评分
自定义评分数量
带描述评分
带描述评分
很差
带描述评分
5分
带描述评分
未评分
评分弹框位置
顶部显示
底部显示
不显示
02 组件状态
只可选全星时
点击或滑动
可选半星时
点击或滑动
03 组件样式
评分打小
大尺寸24
小尺寸20
设置评分颜色
选中及未选中颜色
仅选中颜色
04 特殊样式
竖向带描述评分
可以尝试
"`;
+
+exports[`ssr snapshot test > ssr test src/rate/_example/placement.tsx 1`] = `"
顶部显示
底部显示
不显示
带描述评分
很差
带描述评分
5分
带描述评分
未评分
大尺寸24
小尺寸20
可以尝试
自定义结果
描述文字
Result 结果
结果反馈
01类型
不同结果反馈
成功状态
描述文字
失败状态
描述文字
警示状态
描述文字
默认状态
描述文字
自定义结果
自定义结果
描述文字
页面位置展示