mirror/ant-design
1
0
Fork 0
mirror of https://github.com/ant-design/ant-design.git synced 2025-06-11 19:42:54 +08:00
Code Issues Actions 41 Packages Projects Releases Wiki Activity

demo: update Rate demo (#46891)

Browse Source 
* feat: CP support Tag closeIcon

* fix: fix

* fix: fix
This commit is contained in:
lijianan 2024-01-13 17:07:42 +08:00 committed by GitHub
parent 8555d3df77
commit bd505a690c
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
7 changed files with 1757 additions and 1806 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

58
components/rate/__tests__/__snapshots__/demo-extend.test.ts.snap
View File

@ -302,7 +302,9 @@ exports[`renders components/rate/demo/basic.tsx extend context correctly 1`] = `
exports[`renders components/rate/demo/basic.tsx extend context correctly 2`] = `[]`;
exports[`renders components/rate/demo/character.tsx extend context correctly 1`] = `
Array [
<div
class="ant-flex ant-flex-align-stretch ant-flex-gap-middle ant-flex-vertical"
>
<ul
class="ant-rate"
role="radiogroup"
@ -598,8 +600,7 @@ Array [
</div>
</div>
</li>
</ul>,
<br />,
</ul>
<ul
class="ant-rate"
role="radiogroup"
@ -716,8 +717,7 @@ Array [
</div>
</div>
</li>
</ul>,
<br />,
</ul>
<ul
class="ant-rate"
role="radiogroup"
@ -833,14 +833,16 @@ Array [
</div>
</div>
</li>
</ul>,
]
</ul>
</div>
`;
exports[`renders components/rate/demo/character.tsx extend context correctly 2`] = `[]`;
exports[`renders components/rate/demo/character-function.tsx extend context correctly 1`] = `
Array [
<div
class="ant-flex ant-flex-align-stretch ant-flex-gap-middle ant-flex-vertical"
>
<ul
class="ant-rate"
role="radiogroup"
@ -956,8 +958,7 @@ Array [
</div>
</div>
</li>
</ul>,
<br />,
</ul>
<ul
class="ant-rate"
role="radiogroup"
@ -1253,19 +1254,18 @@ Array [
</div>
</div>
</li>
</ul>,
]
</ul>
</div>
`;
exports[`renders components/rate/demo/character-function.tsx extend context correctly 2`] = `[]`;
exports[`renders components/rate/demo/clear.tsx extend context correctly 1`] = `
Array [
<div
class="ant-space ant-space-horizontal ant-space-align-center ant-space-gap-row-small ant-space-gap-col-small"
class="ant-flex ant-flex-align-stretch ant-flex-gap-middle ant-flex-vertical"
>
<div
class="ant-space-item"
class="ant-flex ant-flex-gap-middle"
>
<ul
class="ant-rate"
@ -1563,21 +1563,12 @@ Array [
</div>
</li>
</ul>
</div>
<div
class="ant-space-item"
>
<span>
allowClear: true
</span>
</div>
</div>,
<br />,
<div
class="ant-space ant-space-horizontal ant-space-align-center ant-space-gap-row-small ant-space-gap-col-small"
>
<div
class="ant-space-item"
class="ant-flex ant-flex-gap-middle"
>
<ul
class="ant-rate"
@ -1875,16 +1866,11 @@ Array [
</div>
</li>
</ul>
</div>
<div
class="ant-space-item"
>
<span>
allowClear: false
</span>
</div>
</div>,
]
</div>
`;
exports[`renders components/rate/demo/clear.tsx extend context correctly 2`] = `[]`;
@ -2794,10 +2780,7 @@ exports[`renders components/rate/demo/half.tsx extend context correctly 2`] = `[
exports[`renders components/rate/demo/text.tsx extend context correctly 1`] = `
<div
class="ant-space ant-space-horizontal ant-space-align-center ant-space-gap-row-small ant-space-gap-col-small"
>
<div
class="ant-space-item"
class="ant-flex ant-flex-align-stretch ant-flex-gap-middle ant-flex-vertical"
>
<ul
class="ant-rate"
@ -3190,15 +3173,10 @@ exports[`renders components/rate/demo/text.tsx extend context correctly 1`] = `
</div>
</div>
</ul>
</div>
<div
class="ant-space-item"
>
<span>
normal
</span>
</div>
</div>
`;
exports[`renders components/rate/demo/text.tsx extend context correctly 2`] = `[]`;

58
components/rate/__tests__/__snapshots__/demo.test.ts.snap
View File

@ -300,7 +300,9 @@ exports[`renders components/rate/demo/basic.tsx correctly 1`] = `
`;
exports[`renders components/rate/demo/character.tsx correctly 1`] = `
Array [
<div
class="ant-flex ant-flex-align-stretch ant-flex-gap-middle ant-flex-vertical"
>
<ul
class="ant-rate"
role="radiogroup"
@ -596,8 +598,7 @@ Array [
</div>
</div>
</li>
</ul>,
<br />,
</ul>
<ul
class="ant-rate"
role="radiogroup"
@ -714,8 +715,7 @@ Array [
</div>
</div>
</li>
</ul>,
<br />,
</ul>
<ul
class="ant-rate"
role="radiogroup"
@ -831,12 +831,14 @@ Array [
</div>
</div>
</li>
</ul>,
]
</ul>
</div>
`;
exports[`renders components/rate/demo/character-function.tsx correctly 1`] = `
Array [
<div
class="ant-flex ant-flex-align-stretch ant-flex-gap-middle ant-flex-vertical"
>
<ul
class="ant-rate"
role="radiogroup"
@ -952,8 +954,7 @@ Array [
</div>
</div>
</li>
</ul>,
<br />,
</ul>
<ul
class="ant-rate"
role="radiogroup"
@ -1249,17 +1250,16 @@ Array [
</div>
</div>
</li>
</ul>,
]
</ul>
</div>
`;
exports[`renders components/rate/demo/clear.tsx correctly 1`] = `
Array [
<div
class="ant-space ant-space-horizontal ant-space-align-center ant-space-gap-row-small ant-space-gap-col-small"
class="ant-flex ant-flex-align-stretch ant-flex-gap-middle ant-flex-vertical"
>
<div
class="ant-space-item"
class="ant-flex ant-flex-gap-middle"
>
<ul
class="ant-rate"
@ -1557,21 +1557,12 @@ Array [
</div>
</li>
</ul>
</div>
<div
class="ant-space-item"
>
<span>
allowClear: true
</span>
</div>
</div>,
<br />,
<div
class="ant-space ant-space-horizontal ant-space-align-center ant-space-gap-row-small ant-space-gap-col-small"
>
<div
class="ant-space-item"
class="ant-flex ant-flex-gap-middle"
>
<ul
class="ant-rate"
@ -1869,16 +1860,11 @@ Array [
</div>
</li>
</ul>
</div>
<div
class="ant-space-item"
>
<span>
allowClear: false
</span>
</div>
</div>,
]
</div>
`;
exports[`renders components/rate/demo/component-token.tsx correctly 1`] = `
@ -2780,10 +2766,7 @@ exports[`renders components/rate/demo/half.tsx correctly 1`] = `
exports[`renders components/rate/demo/text.tsx correctly 1`] = `
<div
class="ant-space ant-space-horizontal ant-space-align-center ant-space-gap-row-small ant-space-gap-col-small"
>
<div
class="ant-space-item"
class="ant-flex ant-flex-align-stretch ant-flex-gap-middle ant-flex-vertical"
>
<ul
class="ant-rate"
@ -3081,13 +3064,8 @@ exports[`renders components/rate/demo/text.tsx correctly 1`] = `
</div>
</li>
</ul>
</div>
<div
class="ant-space-item"
>
<span>
normal
</span>
</div>
</div>
`;

7
components/rate/demo/character-function.tsx
View File

@ -1,6 +1,6 @@
import React from 'react';
import { FrownOutlined, MehOutlined, SmileOutlined } from '@ant-design/icons';
import { Rate } from 'antd';
import { Flex, Rate } from 'antd';
const customIcons: Record<number, React.ReactNode> = {
1: <FrownOutlined />,
@ -11,11 +11,10 @@ const customIcons: Record<number, React.ReactNode> = {
};
const App: React.FC = () => (
<>
<Flex gap="middle" vertical>
<Rate defaultValue={2} character={({ index = 0 }) => index + 1} />
<br />
<Rate defaultValue={3} character={({ index = 0 }) => customIcons[index + 1]} />
</>
</Flex>
);
export default App;

8
components/rate/demo/character.tsx
View File

@ -1,15 +1,13 @@
import React from 'react';
import { HeartOutlined } from '@ant-design/icons';
import { Rate } from 'antd';
import { Flex, Rate } from 'antd';
const App: React.FC = () => (
<>
<Flex vertical gap="middle">
<Rate character={<HeartOutlined />} allowHalf />
<br />
<Rate character="A" allowHalf style={{ fontSize: 36 }} />
<br />
<Rate character="好" allowHalf />
</>
</Flex>
);
export default App;

17
components/rate/demo/clear.tsx
View File

@ -1,18 +1,17 @@
import React from 'react';
import { Space, Rate } from 'antd';
import { Flex, Rate } from 'antd';
const App: React.FC = () => (
<>
<Space>
<Flex gap="middle" vertical>
<Flex gap="middle">
<Rate defaultValue={3} />
<span>allowClear: true</span>
</Space>
<br />
<Space>
<Rate allowClear={false} defaultValue={3} />
</Flex>
<Flex gap="middle">
<Rate defaultValue={3} allowClear={false} />
<span>allowClear: false</span>
</Space>
</>
</Flex>
</Flex>
);
export default App;

2
components/rate/demo/component-token.md
View File

@ -1,6 +1,6 @@
## zh-CN
Component Token Debug.
调试使用。
## en-US

9
components/rate/demo/text.tsx
View File

@ -1,16 +1,15 @@
import React, { useState } from 'react';
import { Space, Rate } from 'antd';
import { Flex, Rate } from 'antd';
const desc = ['terrible', 'bad', 'normal', 'good', 'wonderful'];
const App: React.FC = () => {
const [value, setValue] = useState(3);
return (
<Space>
<Flex gap="middle" vertical>
<Rate tooltips={desc} onChange={setValue} value={value} />
{value ? <span>{desc[value - 1]}</span> : ''}
</Space>
{value ? <span>{desc[value - 1]}</span> : null}
</Flex>
);
};