Skip to content

fix: 修改TrendArrow组件props #1150

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
oasis-cloud merged 12 commits into from
Jun 27, 2023
Merged

fix: 修改TrendArrow组件props #1150

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
9969614
refactor: trendarrow
irisSong May 24, 2023
fb50620
refactor: 文档优化
irisSong May 24, 2023
ab0028f
fix: pr修改
irisSong May 31, 2023
b66880d
Merge branch 'next' into next-trendarrow
irisSong May 31, 2023
fd70c7c
fix: 完善migrate-from-v1文档
irisSong Jun 15, 2023
d1de972
fix: 合并next分支
irisSong Jun 26, 2023
a3f5ee7
fix: 合并next分支
irisSong Jun 26, 2023
f991950
fix: 合并next分支
irisSong Jun 26, 2023
4219aa5
fix: 修改TrendArrow组件props
irisSong Jun 26, 2023
7f19919
fix: 合并next分支
irisSong Jun 26, 2023
f9f6640
Merge remote-tracking branch 'upstream/next' into next-trendarrow
irisSong Jun 26, 2023
174f975
fix: 同步更新文档
irisSong Jun 27, 2023
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
7 changes: 4 additions & 3 deletions migrate-from-v1.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -633,11 +633,12 @@ plugins: [
- `rate` 重命名为 `value`
- `showSign` 重命名为 `symbol`
- `showZero` 重命名为 `zero`
- `syncTextColor` 重命名为 `syncColor`
- `arrowLeft` 重命名为 `left`
- `syncTextColor` 重命名为 `sync`
- `textColor` 重命名为 `color`
- `upIconName` 重命名为 `riseIcon`，类型修改为 `React.Node`
- `downIconName` 重重命名为命为 `downIcon`，类型修改为 `React.Node`
- 移除 `iconSize`，通过`riseIcon`、`downIcon`自定义传入icon大小
- `downIconName` 重命名为 `dropIcon`，类型修改为 `React.Node`
- 移除 `iconSize`，通过`riseIcon`、`dropIcon`自定义传入icon大小

#### Video
- 在 `Taro` 下新增video的适配
Expand Down
10 changes: 5 additions & 5 deletions src/packages/trendarrow/__test__/trendarrow.spec.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -39,8 +39,8 @@ test('should not render 0 when zero is false', async () => {
)
})

test('should render left icon when arrowLeft', async () => {
const { container } = render(<TrendArrow value={12.325} arrowLeft />)
test('should render left icon when left', async () => {
const { container } = render(<TrendArrow value={12.325} left />)
expect(
container.querySelectorAll('.nut-trendarrow__icon-before')?.length
).toBe(0)
Expand All @@ -49,8 +49,8 @@ test('should render left icon when arrowLeft', async () => {
).toBe(1)
})

test('should render sync text color when syncColor is true', async () => {
const { container } = render(<TrendArrow value={12.325} syncColor />)
test('should render sync text color when sync is true', async () => {
const { container } = render(<TrendArrow value={12.325} sync />)
expect(container.querySelector('.nut-trendarrow__value')).toHaveAttribute(
'style',
'color: rgb(250, 44, 25);'
Expand All @@ -59,7 +59,7 @@ test('should render sync text color when syncColor is true', async () => {

test('should render sync text color when color is true', async () => {
const { container } = render(
<TrendArrow value={12.325} syncColor={false} color="rgb(39,197,48)" />
<TrendArrow value={12.325} sync={false} color="rgb(39,197,48)" />
)
expect(container.querySelector('.nut-trendarrow__value')).toHaveAttribute(
'style',
Expand Down
12 changes: 6 additions & 6 deletions src/packages/trendarrow/demo.taro.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -55,8 +55,8 @@ const TrendArrowDemo = () => {
<div className={`demo ${Taro.getEnv() === 'WEB' ? 'web' : ''}`}>
<h2>{translated.basic}</h2>
<Cell>
<TrendArrow syncColor={false} value={1} />
<TrendArrow syncColor={false} value={-0.2535} />
<TrendArrow sync={false} value={1} />
<TrendArrow sync={false} value={-0.2535} />
</Cell>
<div className="title">{translated.title1}</div>
<Cell>
Expand All @@ -70,8 +70,8 @@ const TrendArrowDemo = () => {
</Cell>
<div className="title">{translated.title3}</div>
<Cell>
<TrendArrow arrowLeft value={0.2535} />
<TrendArrow arrowLeft value={-0.2535} />
<TrendArrow left value={0.2535} />
<TrendArrow left value={-0.2535} />
</Cell>
<div className="title">{translated.title4}</div>
<Cell>
Expand All @@ -88,7 +88,7 @@ const TrendArrowDemo = () => {
<TrendArrow value={10.2365} riseColor="rgb(73,143,242)" />
<TrendArrow value={-0.2535} symbol dropColor="rgb(255, 190, 13)" />
<TrendArrow
syncColor={false}
sync={false}
value={-0.2535}
symbol
color="rgb(39,197,48)"
Expand All @@ -98,7 +98,7 @@ const TrendArrowDemo = () => {
<div className="title">{translated.title7}</div>
<Cell>
<TrendArrow value={10.2365} riseIcon={<Success color="blue" />} />
<TrendArrow value={-10.2365} downIcon={<Failure color="red" />} />
<TrendArrow value={-10.2365} dropIcon={<Failure color="red" />} />
</Cell>
</div>
</>
Expand Down
12 changes: 6 additions & 6 deletions src/packages/trendarrow/demo.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -53,8 +53,8 @@ const TrendArrowDemo = () => {
<div className="demo">
<h2>{translated.basic}</h2>
<Cell>
<TrendArrow syncColor={false} value={1} />
<TrendArrow syncColor={false} value={-0.2535} />
<TrendArrow sync={false} value={1} />
<TrendArrow sync={false} value={-0.2535} />
</Cell>
<div className="title">{translated.title1}</div>
<Cell>
Expand All @@ -68,8 +68,8 @@ const TrendArrowDemo = () => {
</Cell>
<div className="title">{translated.title3}</div>
<Cell>
<TrendArrow arrowLeft value={0.2535} />
<TrendArrow arrowLeft value={-0.2535} />
<TrendArrow left value={0.2535} />
<TrendArrow left value={-0.2535} />
</Cell>
<div className="title">{translated.title4}</div>
<Cell>
Expand All @@ -86,7 +86,7 @@ const TrendArrowDemo = () => {
<TrendArrow value={10.2365} riseColor="rgb(73,143,242)" />
<TrendArrow value={-0.2535} symbol dropColor="rgb(255, 190, 13)" />
<TrendArrow
syncColor={false}
sync={false}
value={-0.2535}
symbol
color="rgb(39,197,48)"
Expand All @@ -96,7 +96,7 @@ const TrendArrowDemo = () => {
<div className="title">{translated.title7}</div>
<Cell>
<TrendArrow value={10.2365} riseIcon={<Success color="blue" />} />
<TrendArrow value={-10.2365} downIcon={<Failure color="red" />} />
<TrendArrow value={-10.2365} dropIcon={<Failure color="red" />} />
</Cell>
</div>
</>
Expand Down
18 changes: 9 additions & 9 deletions src/packages/trendarrow/doc.en-US.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -23,8 +23,8 @@ import { TrendArrow, Cell } from '@nutui/nutui-react'
const App = () => {
return (
<Cell>
<TrendArrow syncColor={false} value={1} />
<TrendArrow syncColor={false} value={-0.2535} />
<TrendArrow sync={false} value={1} />
<TrendArrow sync={false} value={-0.2535} />
</Cell>
);
};
Expand Down Expand Up @@ -86,8 +86,8 @@ import { TrendArrow, Cell } from '@nutui/nutui-react'
const App = () => {
return (
<Cell>
<TrendArrow arrowLeft value={0.2535} />
<TrendArrow arrowLeft value={-0.2535} />
<TrendArrow left value={0.2535} />
<TrendArrow left value={-0.2535} />
</Cell>
);
};
Expand Down Expand Up @@ -152,7 +152,7 @@ const App = () => {
<TrendArrow value={10.2365} riseColor="rgb(73,143,242)" />
<TrendArrow value={-0.2535} symbol dropColor="rgb(255, 190, 13)" />
<TrendArrow
syncColor={false}
sync={false}
value={-0.2535}
symbol
color="rgb(39,197,48)"
Expand All @@ -179,7 +179,7 @@ const App = () => {
return (
<Cell>
<TrendArrow value={10.2365} riseIcon={<Success color="blue" />} />
<TrendArrow value={-10.2365} downIcon={<Failure color="red" />} />
<TrendArrow value={-10.2365} dropIcon={<Failure color="red" />} />
</Cell>
);
};
Expand All @@ -198,13 +198,13 @@ export default App;
| digits | Decimal precision | `number` | `2` |
| symbol | Whether to display plus and minus signs | `boolean` | `false` |
| zero | Show zero or not | `boolean` | `false` |
| arrowLeft | Whether to show an arrow to the left of the number | `boolean` | `false` |
| syncColor | Whether the text color is in sync with the arrow | `boolean` | `true` |
| left | Whether to show an arrow to the left of the number | `boolean` | `false` |
| sync | Whether the text color is in sync with the arrow | `boolean` | `true` |
| color | Text color | `string` | `#333333` |
| riseColor | Rise arrow color | `string` | `#fa2c19` |
| dropColor | Down arrow color | `string` | `#64b578` |
| riseIcon | Custom Rise arrow icon | `string` | `<TriangleUp/>` |
| downIcon | Custom down arrow icon | `string` | `<TriangleDown/>` |
| dropIcon | Custom down arrow icon | `string` | `<TriangleDown/>` |

## Theming

Expand Down
19 changes: 9 additions & 10 deletions src/packages/trendarrow/doc.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -23,8 +23,8 @@ import { TrendArrow, Cell } from '@nutui/nutui-react'
const App = () => {
return (
<Cell>
<TrendArrow syncColor={false} value={1} />
<TrendArrow syncColor={false} value={-0.2535} />
<TrendArrow sync={false} value={1} />
<TrendArrow sync={false} value={-0.2535} />
</Cell>
);
};
Expand Down Expand Up @@ -86,8 +86,8 @@ import { TrendArrow, Cell } from '@nutui/nutui-react'
const App = () => {
return (
<Cell>
<TrendArrow arrowLeft value={0.2535} />
<TrendArrow arrowLeft value={-0.2535} />
<TrendArrow left value={0.2535} />
<TrendArrow left value={-0.2535} />
</Cell>
);
};
Expand Down Expand Up @@ -152,7 +152,7 @@ const App = () => {
<TrendArrow value={10.2365} riseColor="rgb(73,143,242)" />
<TrendArrow value={-0.2535} symbol dropColor="rgb(255, 190, 13)" />
<TrendArrow
syncColor={false}
sync={false}
value={-0.2535}
symbol
color="rgb(39,197,48)"
Expand All @@ -179,7 +179,7 @@ const App = () => {
return (
<Cell>
<TrendArrow value={10.2365} riseIcon={<Success color="blue" />} />
<TrendArrow value={-10.2365} downIcon={<Failure color="red" />} />
<TrendArrow value={-10.2365} dropIcon={<Failure color="red" />} />
</Cell>
);
};
Expand All @@ -198,14 +198,13 @@ export default App;
| digits | 小数位精度 | `number` | `2` |
| symbol | 是否显示加减号 | `boolean` | `false` |
| zero | 是否显示 0 | `boolean` | `false` |
| arrowLeft | 是否在数字左侧显示箭头 | `boolean` | `false` |
| syncColor | 文字颜色是否与箭头同步 | `boolean` | `true` |
| left | 是否在数字左侧显示箭头 | `boolean` | `false` |
| sync | 文字颜色是否与箭头同步 | `boolean` | `true` |
| color | 文字颜色 | `string` | `#333333` |
| riseColor | 向上箭头颜色 | `string` | `#fa2c19` |
| dropColor | 向下箭头颜色 | `string` | `#64b578` |
| riseIcon | 自定义向上箭头icon | `React.ReactNode` | `<TriangleUp/>` |
| downIcon | 自定义向下箭头icon | `React.ReactNode` | `<TriangleDown/>` |

| dropIcon | 自定义向下箭头icon | `React.ReactNode` | `<TriangleDown/>` |

## 主题定制

Expand Down
18 changes: 9 additions & 9 deletions src/packages/trendarrow/doc.taro.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -23,8 +23,8 @@ import { TrendArrow, Cell } from '@nutui/nutui-react-taro'
const App = () => {
return (
<Cell>
<TrendArrow syncColor={false} value={1} />
<TrendArrow syncColor={false} value={-0.2535} />
<TrendArrow sync={false} value={1} />
<TrendArrow sync={false} value={-0.2535} />
</Cell>
);
};
Expand Down Expand Up @@ -86,8 +86,8 @@ import { TrendArrow, Cell } from '@nutui/nutui-react-taro'
const App = () => {
return (
<Cell>
<TrendArrow arrowLeft value={0.2535} />
<TrendArrow arrowLeft value={-0.2535} />
<TrendArrow left value={0.2535} />
<TrendArrow left value={-0.2535} />
</Cell>
);
};
Expand Down Expand Up @@ -152,7 +152,7 @@ const App = () => {
<TrendArrow value={10.2365} riseColor="rgb(73,143,242)" />
<TrendArrow value={-0.2535} symbol dropColor="rgb(255, 190, 13)" />
<TrendArrow
syncColor={false}
sync={false}
value={-0.2535}
symbol
color="rgb(39,197,48)"
Expand All @@ -179,7 +179,7 @@ const App = () => {
return (
<Cell>
<TrendArrow value={10.2365} riseIcon={<Success color="blue" />} />
<TrendArrow value={-10.2365} downIcon={<Failure color="red" />} />
<TrendArrow value={-10.2365} dropIcon={<Failure color="red" />} />
</Cell>
);
};
Expand All @@ -198,13 +198,13 @@ export default App;
| digits | 小数位精度 | `number` | `2` |
| symbol | 是否显示加减号 | `boolean` | `false` |
| zero | 是否显示 0 | `boolean` | `false` |
| arrowLeft | 是否在数字左侧显示箭头 | `boolean` | `false` |
| syncColor | 文字颜色是否与箭头同步 | `boolean` | `true` |
| left | 是否在数字左侧显示箭头 | `boolean` | `false` |
| sync | 文字颜色是否与箭头同步 | `boolean` | `true` |
| color | 文字颜色 | `string` | `#333333` |
| riseColor | 向上箭头颜色 | `string` | `#fa2c19` |
| dropColor | 向下箭头颜色 | `string` | `#64b578` |
| riseIcon | 自定义向上箭头icon | `React.ReactNode` | `<TriangleUp/>` |
| downIcon | 自定义向下箭头icon | `React.ReactNode` | `<TriangleDown/>` |
| dropIcon | 自定义向下箭头icon | `React.ReactNode` | `<TriangleDown/>` |

## 主题定制

Expand Down
18 changes: 9 additions & 9 deletions src/packages/trendarrow/doc.zh-TW.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -23,8 +23,8 @@ import { TrendArrow, Cell } from '@nutui/nutui-react'
const App = () => {
return (
<Cell>
<TrendArrow syncColor={false} value={1} />
<TrendArrow syncColor={false} value={-0.2535} />
<TrendArrow sync={false} value={1} />
<TrendArrow sync={false} value={-0.2535} />
</Cell>
);
};
Expand Down Expand Up @@ -86,8 +86,8 @@ import { TrendArrow, Cell } from '@nutui/nutui-react'
const App = () => {
return (
<Cell>
<TrendArrow arrowLeft value={0.2535} />
<TrendArrow arrowLeft value={-0.2535} />
<TrendArrow left value={0.2535} />
<TrendArrow left value={-0.2535} />
</Cell>
);
};
Expand Down Expand Up @@ -152,7 +152,7 @@ const App = () => {
<TrendArrow value={10.2365} riseColor="rgb(73,143,242)" />
<TrendArrow value={-0.2535} symbol dropColor="rgb(255, 190, 13)" />
<TrendArrow
syncColor={false}
sync={false}
value={-0.2535}
symbol
color="rgb(39,197,48)"
Expand All @@ -179,7 +179,7 @@ const App = () => {
return (
<Cell>
<TrendArrow value={10.2365} riseIcon={<Success color="blue" />} />
<TrendArrow value={-10.2365} downIcon={<Failure color="red" />} />
<TrendArrow value={-10.2365} dropIcon={<Failure color="red" />} />
</Cell>
);
};
Expand All @@ -198,13 +198,13 @@ export default App;
| digits | 小數位精度 | `number` | `2` |
| symbol | 是否顯示加減號 | `boolean` | `false` |
| zero | 是否顯示 0 | `boolean` | `false` |
| arrowLeft | 是否在數字左側顯示箭頭 | `boolean` | `false` |
| syncColor | 文字顏色是否與箭頭同步 | `boolean` | `true` |
| left | 是否在數字左側顯示箭頭 | `boolean` | `false` |
| sync | 文字顏色是否與箭頭同步 | `boolean` | `true` |
| color | 文字顏色 | `string` | `#333333` |
| riseColor | 嚮上箭頭顏色 | `string` | `#fa2c19` |
| dropColor | 嚮下箭頭顏色 | `string` | `#64b578` |
| riseIcon | 自定義嚮上箭頭icon | `React.ReactNode` | `<TriangleUp/>` |
| downIcon | 自定義嚮下箭頭icon | `React.ReactNode` | `<TriangleDown/>` |
| dropIcon | 自定義嚮下箭頭icon | `React.ReactNode` | `<TriangleDown/>` |


## 主題定制
Expand Down
Loading