Skip to content

feat(rate): v14 #2797

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
xiaoyatong merged 12 commits into from
Dec 4, 2024
Merged

feat(rate): v14 #2797

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
12 commits
Select commit Hold shift + click to select a range
94c8cbf
feat(rate): v14适配
irisSong Nov 26, 2024
0e45a54
fix: amend
irisSong Nov 26, 2024
985c08d
fix: update marking
irisSong Nov 26, 2024
5114094
fix: amend
irisSong Nov 26, 2024
2bd65c7
fix: modify font import
irisSong Nov 26, 2024
77be6a5
fix: 设计稿更改间距跟随修改
irisSong Nov 26, 2024
2064c28
fix: 移除
irisSong Dec 2, 2024
516f5e4
Merge remote-tracking branch 'upstream/feat_v3.x' into feat_3.0-rate
irisSong Dec 2, 2024
056cb64
feat: update migrate-from文档
irisSong Dec 3, 2024
49a7f24
fix: 修改pr
irisSong Dec 4, 2024
9dcafdb
fix: update test
irisSong Dec 4, 2024
87a5190
fix: update calc
irisSong Dec 4, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 2 additions & 0 deletions migrate-from-v2.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -829,6 +829,8 @@ plugins: [
- `upIconName` 重命名为 `riseIcon`，类型修改为 `React.Node`
- `downIconName` 重命名为 `dropIcon`，类型修改为 `React.Node`
- 移除 `iconSize`，通过`riseIcon`、`dropIcon`自定义传入icon大小
- 新增 `size`，star 尺寸, 默认值 `normal` 为 `12px`
- 新增 `showScore`, 展示评分

#### Video

Expand Down
5 changes: 3 additions & 2 deletions src/config.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -630,6 +630,7 @@
"sort": 1,
"show": true,
"taro": true,
"v14": true,
Copy link
Copy Markdown

@coderabbitai coderabbitai bot Dec 2, 2024

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

💡 Codebase verification

Based on all the gathered information, I can now provide the final response:

需要补充 v14 版本的文档说明

经过验证，以下组件已在 config.json 中标记为 v14 版本：

  • 宫格 (Grid)
  • 评分 (Rate)
  • 结果反馈 (ResultPage)
  • 倒计时 (CountDown)
  • 分页 (Pagination)

但是这些组件的文档中都缺少相应的版本更新说明。建议：

  1. 在每个组件的 doc.md 文件中添加 v14 版本的更新说明
  2. 说明相比之前版本的变更内容
  3. 保持文档的多语言版本（doc.en-US.md、doc.zh-TW.md）同步更新
🔗 Analysis chain

请确保版本标记的一致性

多个组件被标记为 v14 版本。建议：

  1. 确保所有升级到 v14 的组件都已正确标记
  2. 考虑在文档中添加这些组件在 v14 版本中的变更说明

Also applies to: 993-994

Let me verify the documentation paths first.

Let me check the component names associated with these v14 tags.

Let me check the component names and their documentation structure.

Let me check the content of the documentation files for version information.

🏁 Scripts executed

The following scripts were executed for the analysis:

Script:

#!/bin/bash
# 检查所有被标记为 v14 的组件
rg -l '"v14":\s*true' 

# 检查这些组件的文档是否包含版本更新说明
for comp in Rate CountDown Grid Pagination ResultPage; do
  echo "Checking $comp documentation..."
  rg -l "## v14" "src/packages/$comp/doc*.md" || echo "No version info found in $comp docs"
done

Length of output: 1726

Script:

#!/bin/bash
# Find the actual documentation files for these components
echo "Finding documentation files..."
fd -t f "doc.*\.md" -d 3

# Check if v14 components are properly tagged in config.json
echo -e "\nChecking v14 components in config.json..."
rg -A 1 '"v14":\s*true' src/config.json

Length of output: 517

Script:

#!/bin/bash
# Get more context around v14 components to see their names
rg -B 2 -A 1 '"v14":\s*true' src/config.json

# Also check the docs directory structure
echo -e "\nChecking docs directory structure..."
fd . src/packages -t d -d 1

Length of output: 3024

Script:

#!/bin/bash
# Get more context to see component names
rg -B 5 -A 1 '"v14":\s*true' src/config.json

# Check documentation structure for these specific components
echo -e "\nChecking documentation structure..."
for comp in rate countdown grid pagination resultpage; do
  echo -e "\n=== $comp documentation ==="
  fd . "src/packages/$comp" -t f
done

Length of output: 7805

Script:

#!/bin/bash
# Check documentation content for version information
for comp in rate countdown grid pagination resultpage; do
  echo -e "\n=== $comp version documentation ==="
  rg "v14|版本|version" "src/packages/$comp/doc.md" || echo "No version info found"
done

# Also check if there are any other v14 related changes in these components
echo -e "\nChecking for other v14 related changes..."
rg "v14" src/packages/{rate,countdown,grid,pagination,resultpage}

Length of output: 1470

"author": "dsj"
},
{
Expand Down Expand Up @@ -989,8 +990,8 @@
"sort": 17,
"show": true,
"taro": true,
"author": "songsong",
"v14": true
"v14": true,
"author": "songsong"
},
{
"version": "2.0.0",
Expand Down
31 changes: 31 additions & 0 deletions src/packages/rate/__test__/__snapshots__/rate.spec.tsx.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,31 @@
// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html

exports[`size test 1`] = `
<div>
<div
class="nut-rate"
>
<div
class="nut-rate-item nut-rate-item-large"
>
<div
class="nut-rate-item-icon nut-rate-item-icon-disabled"
>
<svg
aria-labelledby="StarFill"
class="nut-icon nut-icon-StarFill "
role="presentation"
viewBox="0 0 1024 1024"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="m908.1 353.1-253.9-36.9L540.7 86.1c-3.1-6.3-8.2-11.4-14.5-14.5-15.8-7.8-35-1.3-42.9 14.5L369.8 316.2l-253.9 36.9c-7 1-13.4 4.3-18.3 9.3-12.3 12.7-12.1 32.9.6 45.3l183.7 179.1-43.4 252.9c-1.2 6.9-.1 14.1 3.2 20.3 8.2 15.6 27.6 21.7 43.2 13.4L512 754l227.1 119.4c6.2 3.3 13.4 4.4 20.3 3.2 17.4-3 29.1-19.5 26.1-36.9l-43.4-252.9 183.7-179.1c5-4.9 8.3-11.3 9.3-18.3 2.7-17.5-9.5-33.7-27-36.3"
fill="currentColor"
fill-opacity="0.9"
/>
</svg>
</div>
</div>
</div>
</div>
`;
16 changes: 16 additions & 0 deletions src/packages/rate/__test__/rate.spec.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -74,6 +74,22 @@ test('allowHalf test', () => {
)
}
})
test('size test', () => {
const { container } = render(<Rate count={1} size="large" />)
const el = container.querySelector('.nut-rate-item')
if (el) {
expect(el).toHaveClass('nut-rate-item-large')
}
expect(container).toMatchSnapshot()
})

test('showScore test', () => {
const { container } = render(<Rate count={1} showScore defaultValue={0.5} />)
const el = container.querySelector('.nut-rate-score')
if (el) {
expect(el?.innerHTML).toBe('0.5')
}
})

test('touchable', () => {
const state = {
Expand Down
10 changes: 8 additions & 2 deletions src/packages/rate/demos/h5/demo1.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,7 +1,13 @@
import React from 'react'
import { Rate } from '@nutui/nutui-react'
import { Rate, Space } from '@nutui/nutui-react'

const Demo1 = () => {
return <Rate defaultValue={3} />
return (
<Space direction="vertical">
<Rate defaultValue={3} size="large" />
<Rate defaultValue={3} />
<Rate defaultValue={3} size="small" />
</Space>
)
}
export default Demo1
2 changes: 1 addition & 1 deletion src/packages/rate/demos/h5/demo2.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,6 +3,6 @@ import { Rate } from '@nutui/nutui-react'

const Demo2 = () => {
const [score, setScore] = useState(2)
return <Rate value={score} onChange={(value) => setScore(value)} />
return <Rate value={score} showScore onChange={(value) => setScore(value)} />
}
export default Demo2
2 changes: 1 addition & 1 deletion src/packages/rate/demos/h5/demo5.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,6 +2,6 @@ import React from 'react'
import { Rate } from '@nutui/nutui-react'

const Demo5 = () => {
return <Rate count={6} defaultValue={3} />
return <Rate count={1} defaultValue={1} />
}
export default Demo5
10 changes: 8 additions & 2 deletions src/packages/rate/demos/taro/demo1.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,7 +1,13 @@
import React from 'react'
import { Rate } from '@nutui/nutui-react-taro'
import { Rate, Space } from '@nutui/nutui-react-taro'

const Demo1 = () => {
return <Rate defaultValue={3} />
return (
<Space direction="vertical">
<Rate defaultValue={3} size="large" />
<Rate defaultValue={3} />
<Rate defaultValue={3} size="small" />
</Space>
)
}
export default Demo1
2 changes: 1 addition & 1 deletion src/packages/rate/demos/taro/demo2.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,6 +3,6 @@ import { Rate } from '@nutui/nutui-react-taro'

const Demo2 = () => {
const [score, setScore] = useState(2)
return <Rate value={score} onChange={(value) => setScore(value)} />
return <Rate value={score} showScore onChange={(value) => setScore(value)} />
}
export default Demo2
2 changes: 1 addition & 1 deletion src/packages/rate/demos/taro/demo5.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,6 +2,6 @@ import React from 'react'
import { Rate } from '@nutui/nutui-react-taro'

const Demo5 = () => {
return <Rate count={6} defaultValue={3} />
return <Rate count={1} defaultValue={1} />
}
export default Demo5
11 changes: 8 additions & 3 deletions src/packages/rate/doc.en-US.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -112,6 +112,8 @@ import { Rate } from '@nutui/nutui-react'

| Property | Description | Type | Default |
| --- | --- | --- | --- |
| size | Score size | `large` \| `normal` \| `small` | `normal` |
| showScore | Show Score | `boolean` | `false` |
| defaultValue | Uncontrolled star value | `number` | `0` |
| value | Controlled star value | `number` | `0` |
| count | total number of stars | `number` | `5` |
Expand All @@ -133,6 +135,9 @@ The component provides the following CSS variables, which can be used to customi

| Name | Description | Default Value |
| --- | --- | --- |
| \--nutui-rate-item-margin | rate item margin | `14px` |
| \--nutui-rate-icon-color | checked icon color | `$color-primary` |
| \--nutui-rate-icon-inactive-color | unchecked icon color | `$color-text-disabled` |
| \--nutui-rate-item-margin | spacing | `4px` |
| \--nutui-rate-icon-color | icon activation color | `$color-primary-icon` |
| \--nutui-rate-icon-inactive-color | icon inactive color | `$color-primary-icon-disabled` |
| \--nutui-rate-icon-size | icon size | `12px` |
| \--nutui-rate-font-color | Rating font color | `$color-primary-icon` |
| \--nutui-rate-font-size | Rating font size | `12px` |
11 changes: 8 additions & 3 deletions src/packages/rate/doc.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -112,6 +112,8 @@ import { Rate } from '@nutui/nutui-react'

| 属性 | 说明 | 类型 | 默认值 |
| --- | --- | --- | --- |
| size | star 尺寸 | `large` \| `normal` \| `small` | `normal` |
| showScore | 展示评分 | `boolean` | `false` |
| defaultValue | 非受控的 star 默认值 | `number` | `0` |
| value | 受控的 star 数值 | `number` | `0` |
| count | star 总数 | `number` | `5` |
Expand All @@ -133,6 +135,9 @@ import { Rate } from '@nutui/nutui-react'

| 名称 | 说明 | 默认值 |
| --- | --- | --- |
| \--nutui-rate-item-margin | 间距 | `14px` |
| \--nutui-rate-icon-color | icon 激活颜色 | `$color-primary` |
| \--nutui-rate-icon-inactive-color | icon 未激活颜色 | `$color-text-disabled` |
| \--nutui-rate-item-margin | 间距 | `4px` |
| \--nutui-rate-icon-color | icon 激活颜色 | `$color-primary-icon` |
| \--nutui-rate-icon-inactive-color | icon 未激活颜色 | `$color-primary-icon-disabled` |
| \--nutui-rate-icon-size | icon 尺寸 | `12px` |
| \--nutui-rate-font-color | 评分字体颜色 | `$color-primary-icon` |
| \--nutui-rate-font-size | 评分字体大小 | `12px` |
11 changes: 8 additions & 3 deletions src/packages/rate/doc.taro.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -112,6 +112,8 @@ import { Rate } from '@nutui/nutui-react-taro'

| 属性 | 说明 | 类型 | 默认值 |
| --- | --- | --- | --- |
| size | star 尺寸 | `large` \| `normal` \| `small` | `normal` |
| showScore | 展示评分 | `boolean` | `false` |
| defaultValue | 非受控的 star 默认值 | `number` | `0` |
| value | 受控的 star 数值 | `number` | `0` |
| count | star 总数 | `number` | `5` |
Expand All @@ -133,6 +135,9 @@ import { Rate } from '@nutui/nutui-react-taro'

| 名称 | 说明 | 默认值 |
| --- | --- | --- |
| \--nutui-rate-item-margin | 间距 | `14px` |
| \--nutui-rate-icon-color | icon 激活颜色 | `$color-primary` |
| \--nutui-rate-icon-inactive-color | icon 未激活颜色 | `$color-text-disabled` |
| \--nutui-rate-item-margin | 间距 | `4px` |
| \--nutui-rate-icon-color | icon 激活颜色 | `$color-primary-icon` |
| \--nutui-rate-icon-inactive-color | icon 未激活颜色 | `$color-primary-icon-disabled` |
| \--nutui-rate-icon-size | icon 尺寸 | `12px` |
| \--nutui-rate-font-color | 评分字体颜色 | `$color-primary-icon` |
| \--nutui-rate-font-size | 评分字体大小 | `12px` |
11 changes: 8 additions & 3 deletions src/packages/rate/doc.zh-TW.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -112,6 +112,8 @@ import { Rate } from '@nutui/nutui-react'

| 屬性 | 說明 | 類型 | 默認值 |
| --- | --- | --- | --- |
| size | star 尺寸 | `large` \| `normal` \| `small` | `normal` |
| showScore | 展示評分 | `boolean` | `false` |
| defaultValue | 非受控的 star 默認值 | `number` | `0` |
| value | 受控的 star 數值 | `number` | `0` |
| count | star 總數 | `number` | `5` |
Expand All @@ -133,6 +135,9 @@ import { Rate } from '@nutui/nutui-react'

| 名稱 | 說明 | 默認值 |
| --- | --- | --- |
| \--nutui-rate-item-margin | 間距 | `14px` |
| \--nutui-rate-icon-color | icon 激活顏色 | `$color-primary` |
| \--nutui-rate-icon-inactive-color | icon 未激活顏色 | `$color-text-disabled` |
| \--nutui-rate-item-margin | 間距 | `4px` |
| \--nutui-rate-icon-color | icon 激活顏色 | `$color-primary-icon` |
| \--nutui-rate-icon-inactive-color | icon 未激活顏色 | `$color-primary-icon-disabled` |
| \--nutui-rate-icon-size | icon 尺寸 | `12px` |
| \--nutui-rate-font-color | 評分字體顏色 | `$color-primary-icon` |
| \--nutui-rate-font-size | 評分字體大小 | `12px` |
2 changes: 1 addition & 1 deletion src/packages/rate/index.taro.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
import { Rate } from './rate.taro'

export type { RateProps } from './rate.taro'
export type { RateSize, RateProps } from './types'
export default Rate
2 changes: 1 addition & 1 deletion src/packages/rate/index.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
import { Rate } from './rate'

export type { RateProps } from './rate'
export type { RateSize, RateProps } from './types'
export default Rate
102 changes: 94 additions & 8 deletions src/packages/rate/rate.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -16,13 +16,9 @@

&-item {
display: flex;
align-items: center;
flex-shrink: 0;
position: relative;
margin-left: $rate-item-margin;

&:first-child {
margin-left: 0;
}

&-half {
position: absolute;
Expand All @@ -37,8 +33,41 @@
}
}

&-normal {
margin-left: $rate-item-margin;
.nut-icon {
height: $rate-icon-size;
width: $rate-icon-size;
}
}

&-large {
margin-left: calc($rate-item-margin * 2);
Copy link
Copy Markdown
Collaborator

@oasis-cloud oasis-cloud Nov 28, 2024

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

计算逻辑视觉认可吗，从规范表述上可以套用这个计算逻辑，但是不是明确过这样的计算逻辑？

.nut-icon {
height: calc($rate-icon-size + 8px);
width: calc($rate-icon-size + 8px);
}
}

&-small {
margin-left: calc($rate-item-margin / 2);
.nut-icon {
height: calc($rate-icon-size - 4px);
width: calc($rate-icon-size - 4px);
}
}

&-normal,
&-large,
&-small {
&:first-child {
margin-left: 0;
}
}

&-icon {
display: flex;
align-items: center;
cursor: pointer;

.nut-icon {
Expand Down Expand Up @@ -66,18 +95,59 @@
}
}
}

&-score {
display: inline-flex;
align-items: center;
color: $rate-font-color;
font-family: 'JD';
Copy link
Copy Markdown
Collaborator

@xiaoyatong xiaoyatong Dec 4, 2024

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

关于京东字体的事情，我觉得我们需要再看看，留作待办。

line-height: 1;

&-normal {
padding-left: $rate-item-margin;
font-size: $rate-font-size;
}

&-large {
font-size: calc($rate-font-size + 6px);
padding-left: calc($rate-item-margin * 2);
}

&-small {
font-size: calc($rate-font-size - 2px);
padding-left: calc($rate-item-margin / 2);
}

&-disabled {
color: $rate-icon-inactive-color;
}
}
}

[dir='rtl'] .nut-rate,
.nut-rtl .nut-rate {
&-item {
margin-right: 0;
margin-left: $rate-item-margin;
margin-left: 0;
&:first-child {
margin-right: 0;
}

&-normal {
margin-right: $rate-item-margin;
}

&-large {
margin-right: calc($rate-item-margin * 2);
}

&-small {
margin-right: calc($rate-item-margin - 2px);
}
Comment on lines +143 to +145
Copy link
Copy Markdown

@coderabbitai coderabbitai bot Dec 4, 2024

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

⚠️ Potential issue

修正 RTL 模式下的间距计算

RTL 模式下的 small 尺寸间距计算与 LTR 模式不一致：

  • LTR: calc($rate-item-margin / 2)
  • RTL: calc($rate-item-margin - 2px)

这可能会导致布局不对称。

  &-small {
-   margin-right: calc($rate-item-margin - 2px);
+   margin-right: calc($rate-item-margin / 2);
  }
📝 Committable suggestion

‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.

Suggested change
&-small {
margin-right: calc($rate-item-margin - 2px);
}
&-small {
margin-right: calc($rate-item-margin / 2);
}


&:last-child {
margin-right: 0;
margin-left: 0;
}

&-half {
left: auto;
right: 0;
Expand All @@ -95,4 +165,20 @@
}
}
}

&-score {
padding-left: 0;

&-large {
padding-right: calc($rate-item-margin * 2);
}

&-normal {
padding-right: $rate-item-margin;
}

&-small {
padding-right: calc($rate-item-margin - 2px);
}
}
}
Loading