From 0739bd73f543bdcdd6f0196dc0d1f6f92b738410 Mon Sep 17 00:00:00 2001 From: RedDevi1s <1006430051@qq.com> Date: Thu, 2 Jun 2022 16:24:19 +0800 Subject: [PATCH 1/9] feat: rate --- site/site.config.mjs | 8 +- src/index.ts | 1 + src/rate/README.md | 3 + src/rate/Rate.tsx | 146 +++ src/rate/Star.tsx | 11 + .../__snapshots__/rate.test.tsx.snap | 1105 +++++++++++++++++ src/rate/__tests__/rate.test.tsx | 37 + src/rate/_example/16px.jsx | 6 + src/rate/_example/24px.jsx | 6 + src/rate/_example/base.jsx | 6 + src/rate/_example/full.jsx | 6 + src/rate/_example/half.jsx | 6 + src/rate/_example/mulit.jsx | 6 + src/rate/_example/texts.jsx | 6 + src/rate/_example/unrate.jsx | 6 + src/rate/index.ts | 9 + src/rate/rate.md | 2 +- src/rate/style/css.js | 1 + src/rate/style/index.js | 1 + src/rate/type.ts | 2 +- 20 files changed, 1371 insertions(+), 3 deletions(-) create mode 100644 src/rate/README.md create mode 100644 src/rate/Rate.tsx create mode 100644 src/rate/Star.tsx create mode 100644 src/rate/__tests__/__snapshots__/rate.test.tsx.snap create mode 100644 src/rate/__tests__/rate.test.tsx create mode 100644 src/rate/_example/16px.jsx create mode 100644 src/rate/_example/24px.jsx create mode 100644 src/rate/_example/base.jsx create mode 100644 src/rate/_example/full.jsx create mode 100644 src/rate/_example/half.jsx create mode 100644 src/rate/_example/mulit.jsx create mode 100644 src/rate/_example/texts.jsx create mode 100644 src/rate/_example/unrate.jsx create mode 100644 src/rate/index.ts create mode 100644 src/rate/style/css.js create mode 100644 src/rate/style/index.js diff --git a/site/site.config.mjs b/site/site.config.mjs index f2c3d4330..b70f614a5 100644 --- a/site/site.config.mjs +++ b/site/site.config.mjs @@ -317,7 +317,7 @@ export default { title: 'Card 卡片', name: 'card', path: '/react/components/card', - component: () => import('tdesign-react/card/card.md') + component: () => import('tdesign-react/card/card.md'), }, { title: 'Collapse 折叠面板', @@ -391,6 +391,12 @@ export default { path: '/react/components/watermark', component: () => import('tdesign-react/watermark/watermark.md'), }, + { + title: 'Rate 评分', + name: 'rate', + path: '/react/components/rate', + component: () => import('tdesign-react/rate/rate.md'), + }, ], }, { diff --git a/src/index.ts b/src/index.ts index 529528340..6f61ee4bb 100644 --- a/src/index.ts +++ b/src/index.ts @@ -56,3 +56,4 @@ export * from './range-input'; export * from './watermark'; export * from './space'; export * from './jumper'; +export * from './rate'; diff --git a/src/rate/README.md b/src/rate/README.md new file mode 100644 index 000000000..e5ac36e60 --- /dev/null +++ b/src/rate/README.md @@ -0,0 +1,3 @@ +:: BASE_DOC :: + +:: BASE_PROPS :: diff --git a/src/rate/Rate.tsx b/src/rate/Rate.tsx new file mode 100644 index 000000000..c81963d10 --- /dev/null +++ b/src/rate/Rate.tsx @@ -0,0 +1,146 @@ +import React, { MouseEvent, useState, useCallback } from 'react'; +import { Tooltip } from 'tdesign-react'; +import { TdRateProps } from './type'; +import useConfig from '../_util/useConfig'; +import useControlled from '../hooks/useControlled'; + +const getFilledStarSvg = (size) => ( + + + +); + +const getFilledHalfStarSvg = (size) => ( + + + + + + + + + +); + +export type RateProps = TdRateProps; +const Rate = (props: RateProps) => { + const { + allowHalf = false, // 是否允许半选 + color = '#ED7B2F', // 评分图标的颜色，样式中默认为 #ED7B2F。一个值表示设置选中高亮的五角星颜色，两个值表示分别设置 选中高亮的五角星颜色 和 未选中暗灰的五角星颜色。示例：['#ED7B2F', '#999999'] + count = 5, // 评分的数量 + disabled = false, // 是否禁用评分 + gap = 6, // 评分图标的间距 + showText = false, // 是否显示对应的辅助文字 + size = 20, // 评分图标的大小，示例：`20` + texts = ['极差', '失望', '一般', '满意', '惊喜'], // 自定义评分等级对应的辅助文字。组件内置默认值为：['极差', '失望', '一般', '满意', '惊喜']。自定义值示例：['1分', '2分', '3分', '4分', '5分'] + onChange, + } = props; + const [starValue = 0, setStarValue] = useControlled(props, 'value', onChange); + + const [hoverValue = undefined, setHoverValue] = useState(undefined); + const rootRef = React.useRef(null); + const { classPrefix } = useConfig(); + + const getStarValue = (event: 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 - 0.5; + } + if (clientX - left >= starMiddle) { + return index; + } + } else { + return index; + } + }; + + const mouseEnterHandler = (event: MouseEvent, index: number) => { + setHoverValue(getStarValue(event, index)); + }; + + const mouseLeaveHandler = () => { + setHoverValue(undefined); + }; + + const clickHandler = (event: MouseEvent, index: number) => { + setStarValue(getStarValue(event, index)); + }; + + const getStarStyle = useCallback( + (index: number, count: number, displayValue: number): React.CSSProperties => { + const filledColor = Array.isArray(color) ? color[0] : color || '#ED7B2F'; + const defaultColor = Array.isArray(color) ? color[1] : '#E7E7E7'; + return { + marginRight: index < count - 1 ? gap : '', + width: size, + height: size, + color: index < displayValue ? filledColor : defaultColor, + }; + }, + [size, color, gap], + ); + + const getStar = useCallback( + (allowHalf: boolean, index: number, displayValue: number) => { + if (allowHalf && index + 0.5 === displayValue) { + return getFilledHalfStarSvg(size); + } + if (index >= displayValue) { + return getFilledStarSvg(size); + } + if (index < displayValue) { + return getFilledStarSvg(size); + } + }, + [size], + ); + const displayValue = hoverValue || starValue; + return ( +
!disabled && mouseLeaveHandler()}> + {[...Array(count)].map((_, index) => + showText ? ( + +
!disabled && mouseEnterHandler(event, index + 1)} + onClick={(event) => !disabled && clickHandler(event, index + 1)} + style={getStarStyle(index, count, displayValue)} + className={`${classPrefix}-rate__wrapper`} + > + {getStar(allowHalf, index, displayValue)} +
+ + ) : ( +
!disabled && mouseEnterHandler(event, index + 1)} + onClick={(event) => !disabled && clickHandler(event, index + 1)} + style={getStarStyle(index, count, displayValue)} + className={`${classPrefix}-rate__wrapper`} + > + {getStar(allowHalf, index, displayValue)} +
+ ), + )} + {showText &&
{texts[displayValue - 1]}
} +
+ ); +}; + +Rate.displayName = 'Rate'; + +export default Rate; diff --git a/src/rate/Star.tsx b/src/rate/Star.tsx new file mode 100644 index 000000000..63a067dc5 --- /dev/null +++ b/src/rate/Star.tsx @@ -0,0 +1,11 @@ +import React from 'react'; +import { StarFilledIcon, StarIcon } from 'tdesign-icons-react'; + +const Star = (props) => { + const { isActive, size, style } = props; + return isActive ? : ; +}; + +Star.displayName = 'Star'; + +export default Star; diff --git a/src/rate/__tests__/__snapshots__/rate.test.tsx.snap b/src/rate/__tests__/__snapshots__/rate.test.tsx.snap new file mode 100644 index 000000000..718f66bd7 --- /dev/null +++ b/src/rate/__tests__/__snapshots__/rate.test.tsx.snap @@ -0,0 +1,1105 @@ +// Jest Snapshot v1, https://goo.gl/fbAQLP + +exports[`16px.jsx 1`] = ` + +
+
+ + + +
+
+ + + +
+
+ + + +
+
+ + + +
+
+ + + +
+
+ +`; + +exports[`24px.jsx 1`] = ` + +
+
+ + + +
+
+ + + +
+
+ + + +
+
+ + + +
+
+ + + +
+
+ +`; + +exports[`Rate 组件测试 count 1`] = ` +
+
+
+ + + +
+
+ + + +
+
+ + + +
+
+ + + +
+
+ + + +
+
+ + + +
+
+ + + +
+
+ + + +
+
+ + + +
+
+ + + +
+
+
+`; + +exports[`Rate 组件测试 create 1`] = ` +
+
+
+ + + +
+
+ + + +
+
+ + + +
+
+ + + +
+
+ + + +
+
+
+`; + +exports[`base.jsx 1`] = ` + +
+
+ + + +
+
+ + + +
+
+ + + +
+
+ + + +
+
+ + + +
+
+ +`; + +exports[`full.jsx 1`] = ` + +
+
+ + + +
+
+ + + +
+
+ + + +
+
+ + + +
+
+ + + +
+
+ +`; + +exports[`half.jsx 1`] = ` + +
+
+ + + +
+
+ + + +
+
+ + + +
+
+ + + +
+
+ + + + + + + + + +
+
+ +`; + +exports[`mulit.jsx 1`] = ` + +
+
+ + + +
+
+ + + +
+
+ + + +
+
+ + + +
+
+ + + +
+
+ + + +
+
+ + + +
+
+ +`; + +exports[`texts.jsx 1`] = ` + +
+
+
+ 满意 +
+ + + +
+
+
+ 满意 +
+ + + +
+
+
+ 满意 +
+ + + +
+
+
+ 满意 +
+ + + +
+
+
+ 满意 +
+ + + +
+
+ 满意 +
+
+ +`; + +exports[`unrate.jsx 1`] = ` + +
+
+ + + +
+
+ + + +
+
+ + + +
+
+ + + +
+
+ + + +
+
+ +`; diff --git a/src/rate/__tests__/rate.test.tsx b/src/rate/__tests__/rate.test.tsx new file mode 100644 index 000000000..6b6d79581 --- /dev/null +++ b/src/rate/__tests__/rate.test.tsx @@ -0,0 +1,37 @@ +import React from 'react'; +import { testExamples, render, fireEvent } from '@test/utils'; +import Rate from '../Rate'; + +// 测试组件代码 Example 快照 +testExamples(__dirname); + +describe('Rate 组件测试', () => { + // 测试渲染 + test('create', async () => { + const { container } = render(); + expect(container.firstChild.classList.contains('t-rate')).toBeTruthy(); + expect(document.querySelectorAll('.t-rate__wrapper')).toHaveLength(5); + expect(container).toMatchSnapshot(); + }); + // 点击测试 + test('onChange', async () => { + const clickFn = jest.fn(); + render(); + fireEvent.click(document.querySelector('.t-rate__wrapper')); + expect(clickFn).toBeCalledTimes(1); + expect(clickFn).toBeCalledWith(1); + }); + // disable测试 + test('disable', async () => { + const clickFn = jest.fn(); + render(); + fireEvent.click(document.querySelector('.t-rate__wrapper')); + expect(clickFn).toBeCalledTimes(0); + }); + // 数量测试 + test('count', async () => { + const { container } = render(); + expect(document.querySelectorAll('.t-rate__wrapper')).toHaveLength(10); + expect(container).toMatchSnapshot(); + }); +}); diff --git a/src/rate/_example/16px.jsx b/src/rate/_example/16px.jsx new file mode 100644 index 000000000..b38556654 --- /dev/null +++ b/src/rate/_example/16px.jsx @@ -0,0 +1,6 @@ +import React from 'react'; +import { Rate } from 'tdesign-react'; + +export default function BasicRate() { + return ; +} diff --git a/src/rate/_example/24px.jsx b/src/rate/_example/24px.jsx new file mode 100644 index 000000000..1c9308ffe --- /dev/null +++ b/src/rate/_example/24px.jsx @@ -0,0 +1,6 @@ +import React from 'react'; +import { Rate } from 'tdesign-react'; + +export default function BasicRate() { + return ; +} diff --git a/src/rate/_example/base.jsx b/src/rate/_example/base.jsx new file mode 100644 index 000000000..7e790676c --- /dev/null +++ b/src/rate/_example/base.jsx @@ -0,0 +1,6 @@ +import React from 'react'; +import { Rate } from 'tdesign-react'; + +export default function BasicRate() { + return ; +} diff --git a/src/rate/_example/full.jsx b/src/rate/_example/full.jsx new file mode 100644 index 000000000..7e790676c --- /dev/null +++ b/src/rate/_example/full.jsx @@ -0,0 +1,6 @@ +import React from 'react'; +import { Rate } from 'tdesign-react'; + +export default function BasicRate() { + return ; +} diff --git a/src/rate/_example/half.jsx b/src/rate/_example/half.jsx new file mode 100644 index 000000000..73a43d889 --- /dev/null +++ b/src/rate/_example/half.jsx @@ -0,0 +1,6 @@ +import React from 'react'; +import { Rate } from 'tdesign-react'; + +export default function BasicRate() { + return ; +} diff --git a/src/rate/_example/mulit.jsx b/src/rate/_example/mulit.jsx new file mode 100644 index 000000000..0e0defb21 --- /dev/null +++ b/src/rate/_example/mulit.jsx @@ -0,0 +1,6 @@ +import React from 'react'; +import { Rate } from 'tdesign-react'; + +export default function BasicRate() { + return ; +} diff --git a/src/rate/_example/texts.jsx b/src/rate/_example/texts.jsx new file mode 100644 index 000000000..d6f725cd1 --- /dev/null +++ b/src/rate/_example/texts.jsx @@ -0,0 +1,6 @@ +import React from 'react'; +import { Rate } from 'tdesign-react'; + +export default function BasicRate() { + return ; +} diff --git a/src/rate/_example/unrate.jsx b/src/rate/_example/unrate.jsx new file mode 100644 index 000000000..0a87af14d --- /dev/null +++ b/src/rate/_example/unrate.jsx @@ -0,0 +1,6 @@ +import React from 'react'; +import { Rate } from 'tdesign-react'; + +export default function BasicRate() { + return ; +} diff --git a/src/rate/index.ts b/src/rate/index.ts new file mode 100644 index 000000000..1cba21a88 --- /dev/null +++ b/src/rate/index.ts @@ -0,0 +1,9 @@ +import _Rate from './Rate'; + +import './style/index.js'; + +export type { RateProps } from './Rate'; + +export const Rate = _Rate; + +export default Rate; diff --git a/src/rate/rate.md b/src/rate/rate.md index 419871d69..7a2bd2323 100644 --- a/src/rate/rate.md +++ b/src/rate/rate.md @@ -8,7 +8,7 @@ className | String | - | 类名 | N style | Object | - | 样式，TS 类型：`React.CSSProperties` | N allowHalf | Boolean | false | 是否允许半选 | N -color | String / Array | '#ED7B2F' | 评分图标的颜色，样式中默认为 #ED7B2F。一个值表示设置选中高亮的五角星颜色，示例：[选中颜色]。数组则表示分别设置 选中高亮的五角星颜色 和 未选中暗灰的五角星颜色，[选中颜色，未选中颜色]。示例：['#ED7B2F', '#E3E6EB']。TS 类型：`string | Array` | N +color | String / Array | '#ED7B2F' | 评分图标的颜色，样式中默认为 #ED7B2F。一个值表示设置选中高亮的五角星颜色，两个值表示分别设置 选中高亮的五角星颜色 和 未选中暗灰的五角星颜色。示例：['#ED7B2F', '#999999']。TS 类型：`string | Array` | N count | Number | 5 | 评分的数量 | N disabled | Boolean | false | 是否禁用评分 | N gap | Number | 6 | 评分图标的间距 | N diff --git a/src/rate/style/css.js b/src/rate/style/css.js new file mode 100644 index 000000000..6a9a4b132 --- /dev/null +++ b/src/rate/style/css.js @@ -0,0 +1 @@ +import './index.css'; diff --git a/src/rate/style/index.js b/src/rate/style/index.js new file mode 100644 index 000000000..9c1a0fb38 --- /dev/null +++ b/src/rate/style/index.js @@ -0,0 +1 @@ +import '../../_common/style/web/components/rate/_index.less'; diff --git a/src/rate/type.ts b/src/rate/type.ts index fa65fd2d6..2495a6da7 100644 --- a/src/rate/type.ts +++ b/src/rate/type.ts @@ -11,7 +11,7 @@ export interface TdRateProps { */ allowHalf?: boolean; /** - * 评分图标的颜色，样式中默认为 #ED7B2F。一个值表示设置选中高亮的五角星颜色，示例：[选中颜色]。数组则表示分别设置 选中高亮的五角星颜色 和 未选中暗灰的五角星颜色，[选中颜色，未选中颜色]。示例：['#ED7B2F', '#E3E6EB'] + * 评分图标的颜色，样式中默认为 #ED7B2F。一个值表示设置选中高亮的五角星颜色，两个值表示分别设置 选中高亮的五角星颜色 和 未选中暗灰的五角星颜色。示例：['#ED7B2F', '#999999'] * @default '#ED7B2F' */ color?: string | Array; From 38fa789baff3d1576c40076284bb181e456929c9 Mon Sep 17 00:00:00 2001 From: RedDevi1s <1006430051@qq.com> Date: Fri, 1 Jul 2022 16:05:04 +0800 Subject: [PATCH 2/9] =?UTF-8?q?feat:=20=E6=9B=B4=E6=96=B0rate=20demo?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/rate/_example/16px.jsx | 6 ------ src/rate/_example/24px.jsx | 6 ------ src/rate/_example/size.jsx | 12 ++++++++++++ src/rate/_example/status.jsx | 12 ++++++++++++ 4 files changed, 24 insertions(+), 12 deletions(-) delete mode 100644 src/rate/_example/16px.jsx delete mode 100644 src/rate/_example/24px.jsx create mode 100644 src/rate/_example/size.jsx create mode 100644 src/rate/_example/status.jsx diff --git a/src/rate/_example/16px.jsx b/src/rate/_example/16px.jsx deleted file mode 100644 index b38556654..000000000 --- a/src/rate/_example/16px.jsx +++ /dev/null @@ -1,6 +0,0 @@ -import React from 'react'; -import { Rate } from 'tdesign-react'; - -export default function BasicRate() { - return ; -} diff --git a/src/rate/_example/24px.jsx b/src/rate/_example/24px.jsx deleted file mode 100644 index 1c9308ffe..000000000 --- a/src/rate/_example/24px.jsx +++ /dev/null @@ -1,6 +0,0 @@ -import React from 'react'; -import { Rate } from 'tdesign-react'; - -export default function BasicRate() { - return ; -} diff --git a/src/rate/_example/size.jsx b/src/rate/_example/size.jsx new file mode 100644 index 000000000..b3d5c853e --- /dev/null +++ b/src/rate/_example/size.jsx @@ -0,0 +1,12 @@ +import React from 'react'; +import { Rate, Space } from 'tdesign-react'; + +export default function BasicRate() { + return ( + + + + + + ); +} diff --git a/src/rate/_example/status.jsx b/src/rate/_example/status.jsx new file mode 100644 index 000000000..e432b9a06 --- /dev/null +++ b/src/rate/_example/status.jsx @@ -0,0 +1,12 @@ +import React from 'react'; +import { Rate, Space } from 'tdesign-react'; + +export default function BasicRate() { + return ( + + + + + + ); +} From d60910e331b9c257bc8d472e4063f3fdeabe3b92 Mon Sep 17 00:00:00 2001 From: RedDevi1s <1006430051@qq.com> Date: Fri, 1 Jul 2022 17:10:28 +0800 Subject: [PATCH 3/9] chore: update _common --- src/_common | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/_common b/src/_common index 8fe52dcbb..f94140745 160000 --- a/src/_common +++ b/src/_common @@ -1 +1 @@ -Subproject commit 8fe52dcbb230789286fca4184d1ec606013c28a0 +Subproject commit f94140745bd1b84b60a8c34bd5ca919b0ac2c65e From 3d7d7338b3eb98a93c6a6fe8eec1b4d33c7d5819 Mon Sep 17 00:00:00 2001 From: RedDevi1s <1006430051@qq.com> Date: Mon, 4 Jul 2022 11:49:31 +0800 Subject: [PATCH 4/9] feat: update demo & snapshot --- .../__snapshots__/rate.test.tsx.snap | 1171 +++++++++-------- src/rate/_example/base.jsx | 2 +- src/rate/_example/full.jsx | 6 - src/rate/_example/half.jsx | 6 - src/rate/_example/mulit.jsx | 2 +- src/rate/_example/size.jsx | 3 +- src/rate/_example/status.jsx | 3 +- src/rate/_example/texts.jsx | 2 +- src/rate/_example/unrate.jsx | 6 - 9 files changed, 644 insertions(+), 557 deletions(-) delete mode 100644 src/rate/_example/full.jsx delete mode 100644 src/rate/_example/half.jsx delete mode 100644 src/rate/_example/unrate.jsx diff --git a/src/rate/__tests__/__snapshots__/rate.test.tsx.snap b/src/rate/__tests__/__snapshots__/rate.test.tsx.snap index 718f66bd7..2719f1b70 100644 --- a/src/rate/__tests__/__snapshots__/rate.test.tsx.snap +++ b/src/rate/__tests__/__snapshots__/rate.test.tsx.snap @@ -1,193 +1,5 @@ // Jest Snapshot v1, https://goo.gl/fbAQLP -exports[`16px.jsx 1`] = ` - -
-
- - - -
-
- - - -
-
- - - -
-
- - - -
-
- - - -
-
- -`; - -exports[`24px.jsx 1`] = ` - -
-
- - - -
-
- - - -
-
- - - -
-
- - - -
-
- - - -
-
- -`; - exports[`Rate 组件测试 count 1`] = `
`; -exports[`full.jsx 1`] = ` +exports[`mulit.jsx 1`] = `
-
- -`; - -exports[`half.jsx 1`] = ` - -
+
+ +`; + +exports[`size.jsx 1`] = ` + +
- - - +
+ + + +
+
+ + + +
+
+ + + +
+
+ + + +
+
+ + + +
+
- - - +
+ + + +
+
+ + + +
+
+ + + +
+
+ + + +
+
+ + + +
+
- - - + - - +
+
+ + - - - - + +
+
+ + + +
+
+ + + +
+
+ + + +
+
`; -exports[`mulit.jsx 1`] = ` +exports[`status.jsx 1`] = `
- - - -
-
- - - -
-
- - - -
-
- - - -
-
- - - +
+ + + +
+
+ + + +
+
+ + + +
+
+ + + +
+
+ + + +
+
- - - +
+ + + +
+
+ + + +
+
+ + + +
+
+ + + +
+
+ + + +
+
- - - +
+ + + +
+
+ + + +
+
+ + + +
+
+ + + +
+
+ + + + + + + + + +
+
@@ -892,114 +1094,109 @@ exports[`texts.jsx 1`] = ` class="t-rate" >
- 满意 + + +
- - -
- 满意 + + +
- - -
- 满意 + + +
- - -
- 满意 + + +
- - -
- 满意 + + +
- - -
`; - -exports[`unrate.jsx 1`] = ` - -
-
- - - -
-
- - - -
-
- - - -
-
- - - -
-
- - - -
-
- -`; diff --git a/src/rate/_example/base.jsx b/src/rate/_example/base.jsx index 7e790676c..1ab9e8893 100644 --- a/src/rate/_example/base.jsx +++ b/src/rate/_example/base.jsx @@ -1,5 +1,5 @@ import React from 'react'; -import { Rate } from 'tdesign-react'; +import Rate from '../Rate'; export default function BasicRate() { return ; diff --git a/src/rate/_example/full.jsx b/src/rate/_example/full.jsx deleted file mode 100644 index 7e790676c..000000000 --- a/src/rate/_example/full.jsx +++ /dev/null @@ -1,6 +0,0 @@ -import React from 'react'; -import { Rate } from 'tdesign-react'; - -export default function BasicRate() { - return ; -} diff --git a/src/rate/_example/half.jsx b/src/rate/_example/half.jsx deleted file mode 100644 index 73a43d889..000000000 --- a/src/rate/_example/half.jsx +++ /dev/null @@ -1,6 +0,0 @@ -import React from 'react'; -import { Rate } from 'tdesign-react'; - -export default function BasicRate() { - return ; -} diff --git a/src/rate/_example/mulit.jsx b/src/rate/_example/mulit.jsx index 0e0defb21..53d1dfcbf 100644 --- a/src/rate/_example/mulit.jsx +++ b/src/rate/_example/mulit.jsx @@ -1,5 +1,5 @@ import React from 'react'; -import { Rate } from 'tdesign-react'; +import Rate from '../Rate'; export default function BasicRate() { return ; diff --git a/src/rate/_example/size.jsx b/src/rate/_example/size.jsx index b3d5c853e..6189345aa 100644 --- a/src/rate/_example/size.jsx +++ b/src/rate/_example/size.jsx @@ -1,5 +1,6 @@ import React from 'react'; -import { Rate, Space } from 'tdesign-react'; +import { Space } from 'tdesign-react'; +import Rate from '../Rate'; export default function BasicRate() { return ( diff --git a/src/rate/_example/status.jsx b/src/rate/_example/status.jsx index e432b9a06..56373efa5 100644 --- a/src/rate/_example/status.jsx +++ b/src/rate/_example/status.jsx @@ -1,5 +1,6 @@ import React from 'react'; -import { Rate, Space } from 'tdesign-react'; +import { Space } from 'tdesign-react'; +import Rate from '../Rate'; export default function BasicRate() { return ( diff --git a/src/rate/_example/texts.jsx b/src/rate/_example/texts.jsx index d6f725cd1..24c1f90ce 100644 --- a/src/rate/_example/texts.jsx +++ b/src/rate/_example/texts.jsx @@ -1,5 +1,5 @@ import React from 'react'; -import { Rate } from 'tdesign-react'; +import Rate from '../Rate'; export default function BasicRate() { return ; diff --git a/src/rate/_example/unrate.jsx b/src/rate/_example/unrate.jsx deleted file mode 100644 index 0a87af14d..000000000 --- a/src/rate/_example/unrate.jsx +++ /dev/null @@ -1,6 +0,0 @@ -import React from 'react'; -import { Rate } from 'tdesign-react'; - -export default function BasicRate() { - return ; -} From 9aa92e899cc8a8f9804a39dcbef002ab0ee5b48e Mon Sep 17 00:00:00 2001 From: RedDevi1s <1006430051@qq.com> Date: Mon, 4 Jul 2022 11:50:05 +0800 Subject: [PATCH 5/9] feat: add defaultProps --- src/rate/Rate.tsx | 2 ++ src/rate/Star.tsx | 11 ----------- src/rate/defaultProps.ts | 3 +-- src/rate/index.ts | 2 +- 4 files changed, 4 insertions(+), 14 deletions(-) delete mode 100644 src/rate/Star.tsx diff --git a/src/rate/Rate.tsx b/src/rate/Rate.tsx index c81963d10..c0149455a 100644 --- a/src/rate/Rate.tsx +++ b/src/rate/Rate.tsx @@ -3,6 +3,7 @@ import { Tooltip } from 'tdesign-react'; import { TdRateProps } from './type'; import useConfig from '../_util/useConfig'; import useControlled from '../hooks/useControlled'; +import { rateDefaultProps } from './defaultProps'; const getFilledStarSvg = (size) => ( @@ -142,5 +143,6 @@ const Rate = (props: RateProps) => { }; Rate.displayName = 'Rate'; +Rate.defaultProps = rateDefaultProps; export default Rate; diff --git a/src/rate/Star.tsx b/src/rate/Star.tsx deleted file mode 100644 index 63a067dc5..000000000 --- a/src/rate/Star.tsx +++ /dev/null @@ -1,11 +0,0 @@ -import React from 'react'; -import { StarFilledIcon, StarIcon } from 'tdesign-icons-react'; - -const Star = (props) => { - const { isActive, size, style } = props; - return isActive ? : ; -}; - -Star.displayName = 'Star'; - -export default Star; diff --git a/src/rate/defaultProps.ts b/src/rate/defaultProps.ts index b74b85c45..7d33d3f85 100644 --- a/src/rate/defaultProps.ts +++ b/src/rate/defaultProps.ts @@ -11,6 +11,5 @@ export const rateDefaultProps: TdRateProps = { count: 5, gap: 6, showText: false, - texts: [], - value: 0, + texts: ['极差', '失望', '一般', '满意', '惊喜'], }; diff --git a/src/rate/index.ts b/src/rate/index.ts index 1cba21a88..6787af2b3 100644 --- a/src/rate/index.ts +++ b/src/rate/index.ts @@ -3,7 +3,7 @@ import _Rate from './Rate'; import './style/index.js'; export type { RateProps } from './Rate'; +export * from './type'; export const Rate = _Rate; - export default Rate; From 3591ce888a14b640e4c0f7274d9cc9ab005ac1a1 Mon Sep 17 00:00:00 2001 From: RedDevi1s <1006430051@qq.com> Date: Wed, 6 Jul 2022 10:56:44 +0800 Subject: [PATCH 6/9] chore: update submodule --- src/_common | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/_common b/src/_common index f94140745..79eaacd8d 160000 --- a/src/_common +++ b/src/_common @@ -1 +1 @@ -Subproject commit f94140745bd1b84b60a8c34bd5ca919b0ac2c65e +Subproject commit 79eaacd8d7f9915ae36b92553747bd1dd3d18f3a From bd4a9a138ec48e4cbcbf5a199d464a2115f2fade Mon Sep 17 00:00:00 2001 From: RedDevi1s <1006430051@qq.com> Date: Wed, 6 Jul 2022 19:10:01 +0800 Subject: [PATCH 7/9] =?UTF-8?q?fix:=20=E4=BF=AE=E6=94=B9Tooltip=E5=BC=95?= =?UTF-8?q?=E5=85=A5=E6=96=B9=E5=BC=8F=20&=20=E5=8E=BB=E6=8E=89=E8=A7=A3?= =?UTF-8?q?=E6=9E=84=E9=BB=98=E8=AE=A4=E5=80=BC?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/rate/README.md | 3 --- src/rate/Rate.tsx | 18 +++++++++--------- src/rate/defaultProps.ts | 2 ++ 3 files changed, 11 insertions(+), 12 deletions(-) delete mode 100644 src/rate/README.md diff --git a/src/rate/README.md b/src/rate/README.md deleted file mode 100644 index e5ac36e60..000000000 --- a/src/rate/README.md +++ /dev/null @@ -1,3 +0,0 @@ -:: BASE_DOC :: - -:: BASE_PROPS :: diff --git a/src/rate/Rate.tsx b/src/rate/Rate.tsx index c0149455a..1d8fa5360 100644 --- a/src/rate/Rate.tsx +++ b/src/rate/Rate.tsx @@ -1,5 +1,5 @@ import React, { MouseEvent, useState, useCallback } from 'react'; -import { Tooltip } from 'tdesign-react'; +import Tooltip from '../tooltip/Tooltip'; import { TdRateProps } from './type'; import useConfig from '../_util/useConfig'; import useControlled from '../hooks/useControlled'; @@ -34,14 +34,14 @@ const getFilledHalfStarSvg = (size) => ( export type RateProps = TdRateProps; const Rate = (props: RateProps) => { const { - allowHalf = false, // 是否允许半选 - color = '#ED7B2F', // 评分图标的颜色，样式中默认为 #ED7B2F。一个值表示设置选中高亮的五角星颜色，两个值表示分别设置 选中高亮的五角星颜色 和 未选中暗灰的五角星颜色。示例：['#ED7B2F', '#999999'] - count = 5, // 评分的数量 - disabled = false, // 是否禁用评分 - gap = 6, // 评分图标的间距 - showText = false, // 是否显示对应的辅助文字 - size = 20, // 评分图标的大小，示例：`20` - texts = ['极差', '失望', '一般', '满意', '惊喜'], // 自定义评分等级对应的辅助文字。组件内置默认值为：['极差', '失望', '一般', '满意', '惊喜']。自定义值示例：['1分', '2分', '3分', '4分', '5分'] + allowHalf, // 是否允许半选 + color, // 评分图标的颜色，样式中默认为 #ED7B2F。一个值表示设置选中高亮的五角星颜色，两个值表示分别设置 选中高亮的五角星颜色 和 未选中暗灰的五角星颜色。示例：['#ED7B2F', '#999999'] + count, // 评分的数量 + disabled, // 是否禁用评分 + gap, // 评分图标的间距 + showText, // 是否显示对应的辅助文字 + size, // 评分图标的大小，示例：`20` + texts, // 自定义评分等级对应的辅助文字。组件内置默认值为：['极差', '失望', '一般', '满意', '惊喜']。自定义值示例：['1分', '2分', '3分', '4分', '5分'] onChange, } = props; const [starValue = 0, setStarValue] = useControlled(props, 'value', onChange); diff --git a/src/rate/defaultProps.ts b/src/rate/defaultProps.ts index 7d33d3f85..b7427516a 100644 --- a/src/rate/defaultProps.ts +++ b/src/rate/defaultProps.ts @@ -8,6 +8,8 @@ export const rateDefaultProps: TdRateProps = { defaultValue: 0, allowHalf: false, color: '#ED7B2F', + disabled: false, + size: '20', count: 5, gap: 6, showText: false, From e4de2bc5bf679a3be303b14ba294b35ea97b923e Mon Sep 17 00:00:00 2001 From: RedDevi1s <1006430051@qq.com> Date: Mon, 11 Jul 2022 16:37:20 +0800 Subject: [PATCH 8/9] chore: update snapshot --- .../__snapshots__/rate.test.tsx.snap | 104 +++++++++--------- 1 file changed, 52 insertions(+), 52 deletions(-) diff --git a/src/rate/__tests__/__snapshots__/rate.test.tsx.snap b/src/rate/__tests__/__snapshots__/rate.test.tsx.snap index 2719f1b70..b44b7b117 100644 --- a/src/rate/__tests__/__snapshots__/rate.test.tsx.snap +++ b/src/rate/__tests__/__snapshots__/rate.test.tsx.snap @@ -7,7 +7,7 @@ exports[`Rate 组件测试 count 1`] = ` >
Date: Tue, 12 Jul 2022 16:27:47 +0800 Subject: [PATCH 9/9] =?UTF-8?q?fix:=20=E4=BF=AE=E6=94=B9Demo=E5=BC=95?= =?UTF-8?q?=E5=85=A5=E6=96=B9=E5=BC=8F?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/rate/Rate.tsx | 2 +- src/rate/_example/base.jsx | 2 +- src/rate/_example/mulit.jsx | 2 +- src/rate/_example/size.jsx | 3 +-- src/rate/_example/status.jsx | 3 +-- src/rate/_example/texts.jsx | 2 +- 6 files changed, 6 insertions(+), 8 deletions(-) diff --git a/src/rate/Rate.tsx b/src/rate/Rate.tsx index 1d8fa5360..b1c3a498f 100644 --- a/src/rate/Rate.tsx +++ b/src/rate/Rate.tsx @@ -1,5 +1,5 @@ import React, { MouseEvent, useState, useCallback } from 'react'; -import Tooltip from '../tooltip/Tooltip'; +import Tooltip from '../tooltip'; import { TdRateProps } from './type'; import useConfig from '../_util/useConfig'; import useControlled from '../hooks/useControlled'; diff --git a/src/rate/_example/base.jsx b/src/rate/_example/base.jsx index 1ab9e8893..7e790676c 100644 --- a/src/rate/_example/base.jsx +++ b/src/rate/_example/base.jsx @@ -1,5 +1,5 @@ import React from 'react'; -import Rate from '../Rate'; +import { Rate } from 'tdesign-react'; export default function BasicRate() { return ; diff --git a/src/rate/_example/mulit.jsx b/src/rate/_example/mulit.jsx index 53d1dfcbf..0e0defb21 100644 --- a/src/rate/_example/mulit.jsx +++ b/src/rate/_example/mulit.jsx @@ -1,5 +1,5 @@ import React from 'react'; -import Rate from '../Rate'; +import { Rate } from 'tdesign-react'; export default function BasicRate() { return ; diff --git a/src/rate/_example/size.jsx b/src/rate/_example/size.jsx index 6189345aa..6138f29ad 100644 --- a/src/rate/_example/size.jsx +++ b/src/rate/_example/size.jsx @@ -1,6 +1,5 @@ import React from 'react'; -import { Space } from 'tdesign-react'; -import Rate from '../Rate'; +import { Space, Rate } from 'tdesign-react'; export default function BasicRate() { return ( diff --git a/src/rate/_example/status.jsx b/src/rate/_example/status.jsx index 56373efa5..9d4268dfd 100644 --- a/src/rate/_example/status.jsx +++ b/src/rate/_example/status.jsx @@ -1,6 +1,5 @@ import React from 'react'; -import { Space } from 'tdesign-react'; -import Rate from '../Rate'; +import { Space, Rate } from 'tdesign-react'; export default function BasicRate() { return ( diff --git a/src/rate/_example/texts.jsx b/src/rate/_example/texts.jsx index 24c1f90ce..d6f725cd1 100644 --- a/src/rate/_example/texts.jsx +++ b/src/rate/_example/texts.jsx @@ -1,5 +1,5 @@ import React from 'react'; -import Rate from '../Rate'; +import { Rate } from 'tdesign-react'; export default function BasicRate() { return ;