mirror/ant-design
1
0
Fork 0
mirror of https://github.com/ant-design/ant-design.git synced 2024-11-27 20:49:53 +08:00
Code Issues Actions 39 Packages Projects Releases Wiki Activity

chore: merge master

Browse Source
This commit is contained in:
zombiej 2022-05-23 14:37:16 +08:00
commit f58efe9b32
704 changed files with 8707 additions and 8468 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
.github/workflows/rebase.yml vendored
View File

@ -20,6 +20,6 @@ jobs:
with:
fetch-depth: 0
- name: Automatic Rebase
uses: cirrus-actions/rebase@1.6
uses: cirrus-actions/rebase@1.7
env:
GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}

10
CHANGELOG.en-US.md
View File

@ -15,6 +15,16 @@ timeline: true
---
## 4.20.6
`2022-05-22`
- 🐞 Fix DatePicker placeholder flush when open first time. [#35620](https://github.com/ant-design/ant-design/pull/35620) [@yykoypj](https://github.com/yykoypj)
- 🛠 Remove Grid default `role` attr to fit [aria-required-parent](https://accessibilityinsights.io/info-examples/web/aria-required-parent/) requirement. [#35616](https://github.com/ant-design/ant-design/pull/35616) [@bartpio](https://github.com/bartpio)
- 🐞 Fix Anchor cut content in some browser. [#35612](https://github.com/ant-design/ant-design/pull/35612) [@josonho](https://github.com/josonho)
- 🐞 Fix Table header cell border when have `rowSpan` and `scroll.y`. [#35591](https://github.com/ant-design/ant-design/pull/35591)
- 🐞 Fix Drawer that the button in it closes too fast issue. [#35339](https://github.com/ant-design/ant-design/pull/35339)
## 4.20.5
`2022-05-15`

12
CHANGELOG.zh-CN.md
View File

@ -15,9 +15,19 @@ timeline: true
---
## 4.20.6
`2022-05-22`
- 🐞 修复 DatePicker 初次打开时 placeholder 闪烁的问题。[#35620](https://github.com/ant-design/ant-design/pull/35620) [@yykoypj](https://github.com/yykoypj)
- 🛠 移除 Grid 默认 `role` 标签，以使其更好的适配 [aria-required-parent](https://accessibilityinsights.io/info-examples/web/aria-required-parent/) 要求。[#35616](https://github.com/ant-design/ant-design/pull/35616) [@bartpio](https://github.com/bartpio)
- 🐞 修复 Anchor 在某些游览器下会被切割内容的问题。[#35612](https://github.com/ant-design/ant-design/pull/35612) [@josonho](https://github.com/josonho)
- 🐞 修复 Table 存在表头分组和垂直滚动条时表头边框异常的问题。[#35591](https://github.com/ant-design/ant-design/pull/35591)
- 🐞 修复 Drawer 内按钮关闭速度过快问题。[#35339](https://github.com/ant-design/ant-design/pull/35339)
## 4.20.5
`2022-05-15
`2022-05-15`
- 🤖 在 TypeScript 定义中废弃 Table `rowSelection.onSelectNone` 和 `rowSelection.onSelectMultiple`。[#35545](https://github.com/ant-design/ant-design/pull/35545)
- 🐞 InputNumber 当精度为负数时忽略小数部分。[#35520](https://github.com/ant-design/ant-design/pull/35520) [@ty888](https://github.com/ty888)`

6
components/affix/demo/basic.md
View File

@ -14,10 +14,10 @@ title:
The simplest usage.
```tsx
import React, { useState } from 'react';
import { Affix, Button } from 'antd';
import React, { useState } from 'react';
const Demo: React.FC = () => {
const App: React.FC = () => {
const [top, setTop] = useState(10);
const [bottom, setBottom] = useState(10);
@ -38,5 +38,5 @@ const Demo: React.FC = () => {
);
};
export default Demo;
export default App;
```

7
components/affix/demo/debug.md
View File

@ -15,11 +15,12 @@ DEBUG
DEBUG
```tsx
import React, { useState } from 'react';
import { Affix, Button } from 'antd';
import React, { useState } from 'react';
const Demo: React.FC = () => {
const App: React.FC = () => {
const [top, setTop] = useState(10);
return (
<div style={{ height: 10000 }}>
<div>Top</div>
@ -35,5 +36,5 @@ const Demo: React.FC = () => {
);
};
export default Demo;
export default App;
```

5
components/affix/demo/on-change.md
View File

@ -15,10 +15,13 @@ Callback with affixed state.
```tsx
import { Affix, Button } from 'antd';
import React from 'react';
export default () => (
const App: React.FC = () => (
<Affix offsetTop={120} onChange={affixed => console.log(affixed)}>
<Button>120px to affix top</Button>
</Affix>
);
export default App;
```

7
components/affix/demo/target.md
View File

@ -14,11 +14,12 @@ title:
Set a `target` for 'Affix', which is listen to scroll event of target element (default is `window`).
```tsx
import React, { useState } from 'react';
import { Affix, Button } from 'antd';
import React, { useState } from 'react';
const Demo: React.FC = () => {
const App: React.FC = () => {
const [container, setContainer] = useState<HTMLDivElement | null>(null);
return (
<div className="scrollable-container" ref={setContainer}>
<div className="background">
@ -30,7 +31,7 @@ const Demo: React.FC = () => {
);
};
export default Demo;
export default App;
```
<style>

6
components/alert/demo/action.md
View File

@ -14,10 +14,10 @@ title:
Custom action.
```tsx
import React from 'react';
import { Alert, Button, Space } from 'antd';
import React from 'react';
export default () => (
const App: React.FC = () => (
<>
<Alert
message="Success Tips"
@ -71,6 +71,8 @@ export default () => (
/>
</>
);
export default App;
```
<style>

5
components/alert/demo/banner.md
View File

@ -16,8 +16,9 @@ Display Alert as a banner at top of page.
```tsx
import { Alert } from 'antd';
import React from 'react';
export default () => (
const App: React.FC = () => (
<>
<Alert message="Warning text" banner />
<br />
@ -32,4 +33,6 @@ export default () => (
<Alert type="error" message="Error text" banner />
</>
);
export default App;
```

5
components/alert/demo/basic.md
View File

@ -15,8 +15,11 @@ The simplest usage for short messages.
```tsx
import { Alert } from 'antd';
import React from 'react';
export default () => <Alert message="Success Text" type="success" />;
const App: React.FC = () => <Alert message="Success Text" type="success" />;
export default App;
```
<style>

5
components/alert/demo/closable.md
View File

@ -15,12 +15,13 @@ To show close button.
```tsx
import { Alert } from 'antd';
import React from 'react';
const onClose = (e: React.MouseEvent<HTMLButtonElement, MouseEvent>) => {
console.log(e, 'I was closed.');
};
export default () => (
const App: React.FC = () => (
<>
<Alert
message="Warning Text Warning Text Warning TextW arning Text Warning Text Warning TextWarning Text"
@ -37,4 +38,6 @@ export default () => (
/>
</>
);
export default App;
```

5
components/alert/demo/close-text.md
View File

@ -15,6 +15,9 @@ Replace the default icon with customized text.
```tsx
import { Alert } from 'antd';
import React from 'react';
export default () => <Alert message="Info Text" type="info" closeText="Close Now" />;
const App: React.FC = () => <Alert message="Info Text" type="info" closeText="Close Now" />;
export default App;
```

7
components/alert/demo/custom-icon.md
View File

@ -15,12 +15,13 @@ title:
A relevant icon makes information clearer and more friendly.
```tsx
import { Alert } from 'antd';
import { SmileOutlined } from '@ant-design/icons';
import { Alert } from 'antd';
import React from 'react';
const icon = <SmileOutlined />;
export default () => (
const App: React.FC = () => (
<>
<Alert icon={icon} message="showIcon = false" type="success" />
<Alert icon={icon} message="Success Tips" type="success" showIcon />
@ -57,4 +58,6 @@ export default () => (
/>
</>
);
export default App;
```

5
components/alert/demo/description.md
View File

@ -15,8 +15,9 @@ Additional description for alert message.
```tsx
import { Alert } from 'antd';
import React from 'react';
export default () => (
const App: React.FC = () => (
<>
<Alert
message="Success Text"
@ -40,4 +41,6 @@ export default () => (
/>
</>
);
export default App;
```

6
components/alert/demo/error-boundary.md
View File

@ -14,8 +14,8 @@ title:
ErrorBoundary Component for making error handling easier in [React](https://reactjs.org/blog/2017/07/26/error-handling-in-react-16.html).
```tsx
import { Alert, Button } from 'antd';
import React, { useState } from 'react';
import { Button, Alert } from 'antd';
const { ErrorBoundary } = Alert;
const ThrowError: React.FC = () => {
@ -34,9 +34,11 @@ const ThrowError: React.FC = () => {
);
};
export default () => (
const App: React.FC = () => (
<ErrorBoundary>
<ThrowError />
</ErrorBoundary>
);
export default App;
```

5
components/alert/demo/icon.md
View File

@ -15,8 +15,9 @@ A relevant icon will make information clearer and more friendly.
```tsx
import { Alert } from 'antd';
import React from 'react';
export default () => (
const App: React.FC = () => (
<>
<Alert message="Success Tips" type="success" showIcon />
<Alert message="Informational Notes" type="info" showIcon />
@ -49,4 +50,6 @@ export default () => (
/>
</>
);
export default App;
```

7
components/alert/demo/loop-banner.md
View File

@ -15,10 +15,11 @@ Show a loop banner by using with [react-text-loop-next](https://npmjs.com/packag
```tsx
import { Alert } from 'antd';
import { TextLoop } from 'react-text-loop-next';
import React from 'react';
import Marquee from 'react-fast-marquee';
import { TextLoop } from 'react-text-loop-next';
export default () => (
const App: React.FC = () => (
<>
<Alert
banner
@ -41,4 +42,6 @@ export default () => (
/>
</>
);
export default App;
```

4
components/alert/demo/smooth-closed.md
View File

@ -14,14 +14,16 @@ title:
Smoothly unmount Alert upon close.
```tsx
import React, { useState } from 'react';
import { Alert } from 'antd';
import React, { useState } from 'react';
const App: React.FC = () => {
const [visible, setVisible] = useState(true);
const handleClose = () => {
setVisible(false);
};
return (
<div>
{visible ? (

5
components/alert/demo/style.md
View File

@ -15,8 +15,9 @@ There are 4 types of Alert: `success`, `info`, `warning`, `error`.
```tsx
import { Alert } from 'antd';
import React from 'react';
export default () => (
const App: React.FC = () => (
<>
<Alert message="Success Text" type="success" />
<Alert message="Info Text" type="info" />
@ -24,6 +25,8 @@ export default () => (
<Alert message="Error Text" type="error" />
</>
);
export default App;
```
<style>

5
components/anchor/demo/basic.md
View File

@ -15,10 +15,11 @@ The simplest usage.
```tsx
import { Anchor } from 'antd';
import React from 'react';
const { Link } = Anchor;
export default () => (
const App: React.FC = () => (
<Anchor>
<Link href="#components-anchor-demo-basic" title="Basic demo" />
<Link href="#components-anchor-demo-static" title="Static demo" />
@ -28,6 +29,8 @@ export default () => (
</Link>
</Anchor>
);
export default App;
```
<style>

5
components/anchor/demo/customizeHighlight.md
View File

@ -15,12 +15,13 @@ Customize the anchor highlight.
```tsx
import { Anchor } from 'antd';
import React from 'react';
const { Link } = Anchor;
const getCurrentAnchor = () => '#components-anchor-demo-static';
export default () => (
const App: React.FC = () => (
<Anchor affix={false} getCurrentAnchor={getCurrentAnchor}>
<Link href="#components-anchor-demo-basic" title="Basic demo" />
<Link href="#components-anchor-demo-static" title="Static demo" />
@ -30,4 +31,6 @@ export default () => (
</Link>
</Anchor>
);
export default App;
```

5
components/anchor/demo/onChange.md
View File

@ -15,6 +15,7 @@ Listening for anchor link change.
```tsx
import { Anchor } from 'antd';
import React from 'react';
const { Link } = Anchor;
@ -22,7 +23,7 @@ const onChange = (link: string) => {
console.log('Anchor:OnChange', link);
};
export default () => (
const App: React.FC = () => (
<Anchor affix={false} onChange={onChange}>
<Link href="#components-anchor-demo-basic" title="Basic demo" />
<Link href="#components-anchor-demo-static" title="Static demo" />
@ -32,4 +33,6 @@ export default () => (
</Link>
</Anchor>
);
export default App;
```

5
components/anchor/demo/onClick.md
View File

@ -15,6 +15,7 @@ Clicking on an anchor does not record history.
```tsx
import { Anchor } from 'antd';
import React from 'react';
const { Link } = Anchor;
@ -29,7 +30,7 @@ const handleClick = (
console.log(link);
};
export default () => (
const App: React.FC = () => (
<Anchor affix={false} onClick={handleClick}>
<Link href="#components-anchor-demo-basic" title="Basic demo" />
<Link href="#components-anchor-demo-static" title="Static demo" />
@ -39,4 +40,6 @@ export default () => (
</Link>
</Anchor>
);
export default App;
```

5
components/anchor/demo/static.md
View File

@ -15,10 +15,11 @@ Do not change state when page is scrolling.
```tsx
import { Anchor } from 'antd';
import React from 'react';
const { Link } = Anchor;
export default () => (
const App: React.FC = () => (
<Anchor affix={false}>
<Link href="#components-anchor-demo-basic" title="Basic demo" />
<Link href="#components-anchor-demo-static" title="Static demo" />
@ -28,4 +29,6 @@ export default () => (
</Link>
</Anchor>
);
export default App;
```

8
components/anchor/demo/targetOffset.md
View File

@ -14,16 +14,18 @@ title:
Anchor target scroll to screen center.
```tsx
import React, { useState, useEffect } from 'react';
import { Anchor } from 'antd';
import React, { useEffect, useState } from 'react';
const { Link } = Anchor;
const AnchorExample: React.FC = () => {
const App: React.FC = () => {
const [targetOffset, setTargetOffset] = useState<number | undefined>(undefined);
useEffect(() => {
setTargetOffset(window.innerHeight / 2);
}, []);
return (
<Anchor targetOffset={targetOffset}>
<Link href="#components-anchor-demo-basic" title="Basic demo" />
@ -36,5 +38,5 @@ const AnchorExample: React.FC = () => {
);
};
export default () => <AnchorExample />;
export default App;
```

7
components/anchor/style/index.less
View File

@ -56,12 +56,11 @@
&-link {
padding: @anchor-link-padding;
line-height: 1.143;
&-title {
position: relative;
display: block;
margin-bottom: 6px;
margin-bottom: 3px;
overflow: hidden;
color: @text-color;
white-space: nowrap;
@ -79,8 +78,8 @@
}
&-link &-link {
padding-top: 5px;
padding-bottom: 5px;
padding-top: 2px;
padding-bottom: 2px;
}
}

21
components/auto-complete/__tests__/__snapshots__/demo-extend.test.ts.snap
View File

@ -522,11 +522,9 @@ exports[`renders ./components/auto-complete/demo/form-debug.md extend context co
>
<div
class="ant-row ant-form-item"
role="row"
>
<div
class="ant-col ant-form-item-label ant-col-xs-24 ant-col-sm-8"
role="cell"
>
<label
class=""
@ -537,7 +535,6 @@ exports[`renders ./components/auto-complete/demo/form-debug.md extend context co
</div>
<div
class="ant-col ant-form-item-control ant-col-xs-24 ant-col-sm-16"
role="cell"
>
<div
class="ant-form-item-control-input"
@ -592,11 +589,9 @@ exports[`renders ./components/auto-complete/demo/form-debug.md extend context co
</div>
<div
class="ant-row ant-form-item"
role="row"
>
<div
class="ant-col ant-form-item-label ant-col-xs-24 ant-col-sm-8"
role="cell"
>
<label
class=""
@ -607,7 +602,6 @@ exports[`renders ./components/auto-complete/demo/form-debug.md extend context co
</div>
<div
class="ant-col ant-form-item-control ant-col-xs-24 ant-col-sm-16"
role="cell"
>
<div
class="ant-form-item-control-input"
@ -736,11 +730,9 @@ exports[`renders ./components/auto-complete/demo/form-debug.md extend context co
</div>
<div
class="ant-row ant-form-item"
role="row"
>
<div
class="ant-col ant-form-item-label ant-col-xs-24 ant-col-sm-8"
role="cell"
>
<label
class=""
@ -751,7 +743,6 @@ exports[`renders ./components/auto-complete/demo/form-debug.md extend context co
</div>
<div
class="ant-col ant-form-item-control ant-col-xs-24 ant-col-sm-16"
role="cell"
>
<div
class="ant-form-item-control-input"
@ -926,11 +917,9 @@ exports[`renders ./components/auto-complete/demo/form-debug.md extend context co
</div>
<div
class="ant-row ant-form-item"
role="row"
>
<div
class="ant-col ant-form-item-label ant-col-xs-24 ant-col-sm-8"
role="cell"
>
<label
class=""
@ -941,7 +930,6 @@ exports[`renders ./components/auto-complete/demo/form-debug.md extend context co
</div>
<div
class="ant-col ant-form-item-control ant-col-xs-24 ant-col-sm-16"
role="cell"
>
<div
class="ant-form-item-control-input"
@ -1023,11 +1011,9 @@ exports[`renders ./components/auto-complete/demo/form-debug.md extend context co
</div>
<div
class="ant-row ant-form-item"
role="row"
>
<div
class="ant-col ant-form-item-label ant-col-xs-24 ant-col-sm-8"
role="cell"
>
<label
class=""
@ -1038,7 +1024,6 @@ exports[`renders ./components/auto-complete/demo/form-debug.md extend context co
</div>
<div
class="ant-col ant-form-item-control ant-col-xs-24 ant-col-sm-16"
role="cell"
>
<div
class="ant-form-item-control-input"
@ -1240,11 +1225,9 @@ exports[`renders ./components/auto-complete/demo/form-debug.md extend context co
</div>
<div
class="ant-row ant-form-item"
role="row"
>
<div
class="ant-col ant-form-item-label ant-col-xs-24 ant-col-sm-8"
role="cell"
>
<label
class=""
@ -1255,7 +1238,6 @@ exports[`renders ./components/auto-complete/demo/form-debug.md extend context co
</div>
<div
class="ant-col ant-form-item-control ant-col-xs-24 ant-col-sm-16"
role="cell"
>
<div
class="ant-form-item-control-input"
@ -1466,11 +1448,9 @@ exports[`renders ./components/auto-complete/demo/form-debug.md extend context co
</div>
<div
class="ant-row ant-form-item"
role="row"
>
<div
class="ant-col ant-form-item-label ant-col-xs-24 ant-col-sm-8"
role="cell"
>
<label
class=""
@ -1481,7 +1461,6 @@ exports[`renders ./components/auto-complete/demo/form-debug.md extend context co
</div>
<div
class="ant-col ant-form-item-control ant-col-xs-24 ant-col-sm-16"
role="cell"
>
<div
class="ant-form-item-control-input"

21
components/auto-complete/__tests__/__snapshots__/demo.test.js.snap
View File

@ -174,11 +174,9 @@ exports[`renders ./components/auto-complete/demo/form-debug.md correctly 1`] = `
>
<div
class="ant-row ant-form-item"
role="row"
>
<div
class="ant-col ant-form-item-label ant-col-xs-24 ant-col-sm-8"
role="cell"
>
<label
class=""
@ -189,7 +187,6 @@ exports[`renders ./components/auto-complete/demo/form-debug.md correctly 1`] = `
</div>
<div
class="ant-col ant-form-item-control ant-col-xs-24 ant-col-sm-16"
role="cell"
>
<div
class="ant-form-item-control-input"
@ -230,11 +227,9 @@ exports[`renders ./components/auto-complete/demo/form-debug.md correctly 1`] = `
</div>
<div
class="ant-row ant-form-item"
role="row"
>
<div
class="ant-col ant-form-item-label ant-col-xs-24 ant-col-sm-8"
role="cell"
>
<label
class=""
@ -245,7 +240,6 @@ exports[`renders ./components/auto-complete/demo/form-debug.md correctly 1`] = `
</div>
<div
class="ant-col ant-form-item-control ant-col-xs-24 ant-col-sm-16"
role="cell"
>
<div
class="ant-form-item-control-input"
@ -314,11 +308,9 @@ exports[`renders ./components/auto-complete/demo/form-debug.md correctly 1`] = `
</div>
<div
class="ant-row ant-form-item"
role="row"
>
<div
class="ant-col ant-form-item-label ant-col-xs-24 ant-col-sm-8"
role="cell"
>
<label
class=""
@ -329,7 +321,6 @@ exports[`renders ./components/auto-complete/demo/form-debug.md correctly 1`] = `
</div>
<div
class="ant-col ant-form-item-control ant-col-xs-24 ant-col-sm-16"
role="cell"
>
<div
class="ant-form-item-control-input"
@ -430,11 +421,9 @@ exports[`renders ./components/auto-complete/demo/form-debug.md correctly 1`] = `
</div>
<div
class="ant-row ant-form-item"
role="row"
>
<div
class="ant-col ant-form-item-label ant-col-xs-24 ant-col-sm-8"
role="cell"
>
<label
class=""
@ -445,7 +434,6 @@ exports[`renders ./components/auto-complete/demo/form-debug.md correctly 1`] = `
</div>
<div
class="ant-col ant-form-item-control ant-col-xs-24 ant-col-sm-16"
role="cell"
>
<div
class="ant-form-item-control-input"
@ -513,11 +501,9 @@ exports[`renders ./components/auto-complete/demo/form-debug.md correctly 1`] = `
</div>
<div
class="ant-row ant-form-item"
role="row"
>
<div
class="ant-col ant-form-item-label ant-col-xs-24 ant-col-sm-8"
role="cell"
>
<label
class=""
@ -528,7 +514,6 @@ exports[`renders ./components/auto-complete/demo/form-debug.md correctly 1`] = `
</div>
<div
class="ant-col ant-form-item-control ant-col-xs-24 ant-col-sm-16"
role="cell"
>
<div
class="ant-form-item-control-input"
@ -656,11 +641,9 @@ exports[`renders ./components/auto-complete/demo/form-debug.md correctly 1`] = `
</div>
<div
class="ant-row ant-form-item"
role="row"
>
<div
class="ant-col ant-form-item-label ant-col-xs-24 ant-col-sm-8"
role="cell"
>
<label
class=""
@ -671,7 +654,6 @@ exports[`renders ./components/auto-complete/demo/form-debug.md correctly 1`] = `
</div>
<div
class="ant-col ant-form-item-control ant-col-xs-24 ant-col-sm-16"
role="cell"
>
<div
class="ant-form-item-control-input"
@ -808,11 +790,9 @@ exports[`renders ./components/auto-complete/demo/form-debug.md correctly 1`] = `
</div>
<div
class="ant-row ant-form-item"
role="row"
>
<div
class="ant-col ant-form-item-label ant-col-xs-24 ant-col-sm-8"
role="cell"
>
<label
class=""
@ -823,7 +803,6 @@ exports[`renders ./components/auto-complete/demo/form-debug.md correctly 1`] = `
</div>
<div
class="ant-col ant-form-item-control ant-col-xs-24 ant-col-sm-16"
role="cell"
>
<div
class="ant-form-item-control-input"

13
components/auto-complete/demo/basic.md
View File

@ -14,26 +14,31 @@ title:
Basic Usage, set data source of autocomplete with `options` property.
```tsx
import React, { useState } from 'react';
import { AutoComplete } from 'antd';
import React, { useState } from 'react';
const mockVal = (str: string, repeat: number = 1) => ({
const mockVal = (str: string, repeat = 1) => ({
value: str.repeat(repeat),
});
const Complete: React.FC = () => {
const App: React.FC = () => {
const [value, setValue] = useState('');
const [options, setOptions] = useState<{ value: string }[]>([]);
const onSearch = (searchText: string) => {
setOptions(
!searchText ? [] : [mockVal(searchText), mockVal(searchText, 2), mockVal(searchText, 3)],
);
};
const onSelect = (data: string) => {
console.log('onSelect', data);
};
const onChange = (data: string) => {
setValue(data);
};
return (
<>
<AutoComplete
@ -58,5 +63,5 @@ const Complete: React.FC = () => {
);
};
export default () => <Complete />;
export default App;
```

7
components/auto-complete/demo/certain-category.md
View File

@ -14,8 +14,9 @@ title:
Demonstration of [Lookup Patterns: Certain Category](https://ant.design/docs/spec/reaction#Lookup-Patterns). Basic Usage, set options of autocomplete with `options` property.
```tsx
import { Input, AutoComplete } from 'antd';
import { UserOutlined } from '@ant-design/icons';
import { AutoComplete, Input } from 'antd';
import React from 'react';
const renderTitle = (title: string) => (
<span>
@ -63,7 +64,7 @@ const options = [
},
];
const Complete: React.FC = () => (
const App: React.FC = () => (
<AutoComplete
dropdownClassName="certain-category-search-dropdown"
dropdownMatchSelectWidth={500}
@ -74,7 +75,7 @@ const Complete: React.FC = () => (
</AutoComplete>
);
export default () => <Complete />;
export default App;
```
```css

7
components/auto-complete/demo/custom.md
View File

@ -14,13 +14,14 @@ title:
Customize Input Component
```tsx
import React, { useState } from 'react';
import { AutoComplete, Input } from 'antd';
import React, { useState } from 'react';
const { TextArea } = Input;
const Complete: React.FC = () => {
const App: React.FC = () => {
const [options, setOptions] = useState<{ value: string }[]>([]);
const handleSearch = (value: string) => {
setOptions(
!value ? [] : [{ value }, { value: value + value }, { value: value + value + value }],
@ -52,5 +53,5 @@ const Complete: React.FC = () => {
);
};
export default () => <Complete />;
export default App;
```

7
components/auto-complete/demo/form-debug.md
View File

@ -7,8 +7,9 @@ debug: true
---
```tsx
import { Input, AutoComplete, Form, TreeSelect, Button } from 'antd';
import { SearchOutlined } from '@ant-design/icons';
import { AutoComplete, Button, Form, Input, TreeSelect } from 'antd';
import React from 'react';
const formItemLayout = {
labelCol: {
@ -21,7 +22,7 @@ const formItemLayout = {
},
};
export default () => (
const App: React.FC = () => (
<Form style={{ margin: '0 auto' }} {...formItemLayout}>
<Form.Item label="单独 AutoComplete">
<AutoComplete />
@ -69,4 +70,6 @@ export default () => (
</Form.Item>
</Form>
);
export default App;
```

5
components/auto-complete/demo/non-case-sensitive.md
View File

@ -15,6 +15,7 @@ A non-case-sensitive AutoComplete
```tsx
import { AutoComplete } from 'antd';
import React from 'react';
const options = [
{ value: 'Burns Bay Road' },
@ -22,7 +23,7 @@ const options = [
{ value: 'Wall Street' },
];
const Complete: React.FC = () => (
const App: React.FC = () => (
<AutoComplete
style={{ width: 200 }}
options={options}
@ -33,5 +34,5 @@ const Complete: React.FC = () => (
/>
);
export default () => <Complete />;
export default App;
```

8
components/auto-complete/demo/options.md
View File

@ -14,13 +14,14 @@ title:
You could pass `AutoComplete.Option` as children of `AutoComplete`, instead of using `options`。
```tsx
import React, { useState } from 'react';
import { AutoComplete } from 'antd';
import React, { useState } from 'react';
const { Option } = AutoComplete;
const Complete: React.FC = () => {
const App: React.FC = () => {
const [result, setResult] = useState<string[]>([]);
const handleSearch = (value: string) => {
let res: string[] = [];
if (!value || value.indexOf('@') >= 0) {
@ -30,6 +31,7 @@ const Complete: React.FC = () => {
}
setResult(res);
};
return (
<AutoComplete style={{ width: 200 }} onSearch={handleSearch} placeholder="input here">
{result.map((email: string) => (
@ -41,5 +43,5 @@ const Complete: React.FC = () => {
);
};
export default () => <Complete />;
export default App;
```

9
components/auto-complete/demo/status.md
View File

@ -15,13 +15,14 @@ title:
Add status to AutoComplete with `status`, which could be `error` or `warning`.
```tsx
import React, { useState } from 'react';
import { AutoComplete, Space } from 'antd';
import React, { useState } from 'react';
const mockVal = (str: string, repeat: number = 1) => ({
const mockVal = (str: string, repeat = 1) => ({
value: str.repeat(repeat),
});
const ValidateInputs: React.FC = () => {
const App: React.FC = () => {
const [options, setOptions] = useState<{ value: string }[]>([]);
const onSearch = (searchText: string) => {
@ -38,5 +39,5 @@ const ValidateInputs: React.FC = () => {
);
};
export default () => <ValidateInputs />;
export default App;
```

12
components/auto-complete/demo/uncertain-category.md
View File

@ -14,13 +14,11 @@ title:
Demonstration of [Lookup Patterns: Uncertain Category](https://ant.design/docs/spec/reaction#Lookup-Patterns).
```tsx
import React, { useState } from 'react';
import { Input, AutoComplete } from 'antd';
import { AutoComplete, Input } from 'antd';
import type { SelectProps } from 'antd/es/select';
import React, { useState } from 'react';
function getRandomInt(max: number, min: number = 0) {
return Math.floor(Math.random() * (max - min + 1)) + min; // eslint-disable-line no-mixed-operators
}
const getRandomInt = (max: number, min = 0) => Math.floor(Math.random() * (max - min + 1)) + min;
const searchResult = (query: string) =>
new Array(getRandomInt(5))
@ -53,7 +51,7 @@ const searchResult = (query: string) =>
};
});
const Complete: React.FC = () => {
const App: React.FC = () => {
const [options, setOptions] = useState<SelectProps<object>['options']>([]);
const handleSearch = (value: string) => {
@ -77,5 +75,5 @@ const Complete: React.FC = () => {
);
};
export default () => <Complete />;
export default App;
```

7
components/avatar/demo/badge.md
View File

@ -14,10 +14,11 @@ title:
Usually used for reminders and notifications.
```tsx
import { Avatar, Badge } from 'antd';
import { UserOutlined } from '@ant-design/icons';
import { Avatar, Badge } from 'antd';
import React from 'react';
export default () => (
const App: React.FC = () => (
<>
<span className="avatar-item">
<Badge count={1}>
@ -31,6 +32,8 @@ export default () => (
</span>
</>
);
export default App;
```
```css

7
components/avatar/demo/basic.md
View File

@ -14,10 +14,11 @@ title:
Three sizes and two shapes are available.
```tsx
import { Avatar } from 'antd';
import { UserOutlined } from '@ant-design/icons';
import { Avatar } from 'antd';
import React from 'react';
export default () => (
const App: React.FC = () => (
<>
<div>
<Avatar size={64} icon={<UserOutlined />} />
@ -33,6 +34,8 @@ export default () => (
</div>
</>
);
export default App;
```
<style>

9
components/avatar/demo/dynamic.md
View File

@ -14,26 +14,29 @@ title:
For letter type Avatar, when the letters are too long to display, the font size can be automatically adjusted according to the width of the Avatar. You can also use `gap` to set the unit distance between left and right sides.
```tsx
import React, { useState } from 'react';
import { Avatar, Button } from 'antd';
import React, { useState } from 'react';
const UserList = ['U', 'Lucy', 'Tom', 'Edward'];
const ColorList = ['#f56a00', '#7265e6', '#ffbf00', '#00a2ae'];
const GapList = [4, 3, 2, 1];
const Autoset: React.FC = () => {
const App: React.FC = () => {
const [user, setUser] = useState(UserList[0]);
const [color, setColor] = useState(ColorList[0]);
const [gap, setGap] = useState(GapList[0]);
const changeUser = () => {
const index = UserList.indexOf(user);
setUser(index < UserList.length - 1 ? UserList[index + 1] : UserList[0]);
setColor(index < ColorList.length - 1 ? ColorList[index + 1] : ColorList[0]);
};
const changeGap = () => {
const index = GapList.indexOf(gap);
setGap(index < GapList.length - 1 ? GapList[index + 1] : GapList[0]);
};
return (
<>
<Avatar style={{ backgroundColor: color, verticalAlign: 'middle' }} size="large" gap={gap}>
@ -53,5 +56,5 @@ const Autoset: React.FC = () => {
);
};
export default () => <Autoset />;
export default App;
```

5
components/avatar/demo/fallback.md
View File

@ -16,8 +16,9 @@ debug: true
```tsx
import { Avatar } from 'antd';
import React from 'react';
export default () => (
const App: React.FC = () => (
<>
<Avatar shape="circle" src="http://abc.com/not-exist.jpg">
A
@ -27,4 +28,6 @@ export default () => (
</Avatar>
</>
);
export default App;
```

7
components/avatar/demo/group.md
View File

@ -14,10 +14,11 @@ title:
Avatar group display.
```tsx
import { AntDesignOutlined, UserOutlined } from '@ant-design/icons';
import { Avatar, Divider, Tooltip } from 'antd';
import { UserOutlined, AntDesignOutlined } from '@ant-design/icons';
import React from 'react';
const Demo = () => (
const App: React.FC = () => (
<>
<Avatar.Group>
<Avatar src="https://joeschmoe.io/api/v1/random" />
@ -66,5 +67,5 @@ const Demo = () => (
</>
);
export default Demo;
export default App;
```

7
components/avatar/demo/responsive.md
View File

@ -14,13 +14,16 @@ title:
Avatar size can be automatically adjusted based on the screen size.
```tsx
import { Avatar } from 'antd';
import { AntDesignOutlined } from '@ant-design/icons';
import { Avatar } from 'antd';
import React from 'react';
export default () => (
const App: React.FC = () => (
<Avatar
size={{ xs: 24, sm: 32, md: 40, lg: 64, xl: 80, xxl: 100 }}
icon={<AntDesignOutlined />}
/>
);
export default App;
```

4
components/avatar/demo/toggle-debug.md
View File

@ -15,14 +15,16 @@ debug: true
Text inside Avatar should be set a proper font size when toggle it's visibility.
```tsx
import React, { useState } from 'react';
import { Avatar, Button } from 'antd';
import React, { useState } from 'react';
type SizeType = 'large' | 'small' | 'default' | number;
const App: React.FC = () => {
const [hide, setHide] = useState(true);
const [size, setSize] = useState<SizeType>('large');
const [scale, setScale] = useState(1);
const toggle = () => {
setHide(!hide);
};

7
components/avatar/demo/type.md
View File

@ -14,10 +14,11 @@ title:
Image, Icon and letter are supported, and the latter two kinds of avatar can have custom colors and background colors.
```tsx
import { Avatar, Image } from 'antd';
import { UserOutlined } from '@ant-design/icons';
import { Avatar, Image } from 'antd';
import React from 'react';
export default () => (
const App: React.FC = () => (
<>
<Avatar icon={<UserOutlined />} />
<Avatar>U</Avatar>
@ -28,6 +29,8 @@ export default () => (
<Avatar style={{ backgroundColor: '#87d068' }} icon={<UserOutlined />} />
</>
);
export default App;
```
<style>

7
components/back-top/demo/basic.md
View File

@ -13,10 +13,11 @@ title:
The most basic usage.
```jsx
```tsx
import { BackTop } from 'antd';
import React from 'react';
export default () => (
const App: React.FC = () => (
<>
<BackTop />
Scroll down to see the bottom-right
@ -24,6 +25,8 @@ export default () => (
button.
</>
);
export default App;
```
```css

9
components/back-top/demo/custom.md
View File

@ -14,10 +14,11 @@ title:
You can customize the style of the button, just note the size limit: no more than `40px * 40px`.
```jsx
```tsx
import { BackTop } from 'antd';
import React from 'react';
const style = {
const style: React.CSSProperties = {
height: 40,
width: 40,
lineHeight: '40px',
@ -28,7 +29,7 @@ const style = {
fontSize: 14,
};
export default () => (
const App: React.FC = () => (
<div style={{ height: '600vh', padding: 8 }}>
<div>Scroll to bottom</div>
<div>Scroll to bottom</div>
@ -42,4 +43,6 @@ export default () => (
</BackTop>
</div>
);
export default App;
```

9
components/badge/demo/basic.md
View File

@ -13,11 +13,12 @@ title:
Simplest Usage. Badge will be hidden when `count` is `0`, but we can use `showZero` to show it.
```jsx
import { Badge, Avatar } from 'antd';
```tsx
import { ClockCircleOutlined } from '@ant-design/icons';
import { Avatar, Badge } from 'antd';
import React from 'react';
export default () => (
const App: React.FC = () => (
<>
<Badge count={5}>
<Avatar shape="square" size="large" />
@ -30,6 +31,8 @@ export default () => (
</Badge>
</>
);
export default App;
```
<style>

26
components/badge/demo/change.md
View File

@ -13,14 +13,14 @@ title:
The count will be animated as it changes.
```jsx
import React, { useState } from 'react';
import { Badge, Button, Switch, Divider, Avatar } from 'antd';
```tsx
import { MinusOutlined, PlusOutlined, QuestionOutlined } from '@ant-design/icons';
import { Avatar, Badge, Button, Divider, Switch } from 'antd';
import React, { useState } from 'react';
const ButtonGroup = Button.Group;
export default () => {
const App: React.FC = () => {
const [count, setCount] = useState(5);
const [show, setShow] = useState(true);
@ -29,20 +29,20 @@ export default () => {
};
const decline = () => {
let countValue = count - 1;
if (countValue < 0) {
countValue = 0;
let newCount = count - 1;
if (newCount < 0) {
newCount = 0;
}
setCount(countValue);
setCount(newCount);
};
const random = () => {
const countValue = Math.floor(Math.random() * 100);
setCount(countValue);
const newCount = Math.floor(Math.random() * 100);
setCount(newCount);
};
const onChange = isShow => {
setShow(isShow);
const onChange = (checked: boolean) => {
setShow(checked);
};
return (
@ -69,4 +69,6 @@ export default () => {
</>
);
};
export default App;
```

7
components/badge/demo/colorful.md
View File

@ -13,8 +13,9 @@ title:
We preset a series of colorful Badge styles for use in different situations. You can also set it to a hex color string for custom color.
```jsx
```tsx
import { Badge, Divider } from 'antd';
import React from 'react';
const colors = [
'pink',
@ -32,7 +33,7 @@ const colors = [
'lime',
];
export default () => (
const App: React.FC = () => (
<>
<Divider orientation="left">Presets</Divider>
<div>
@ -54,6 +55,8 @@ export default () => (
</>
</>
);
export default App;
```
```css

9
components/badge/demo/dot.md
View File

@ -13,11 +13,12 @@ title:
This will simply display a red badge, without a specific count. If count equals 0, it won't display the dot.
```jsx
import { Badge } from 'antd';
```tsx
import { NotificationOutlined } from '@ant-design/icons';
import { Badge } from 'antd';
import React from 'react';
export default () => (
const App: React.FC = () => (
<>
<Badge dot>
<NotificationOutlined style={{ fontSize: 16 }} />
@ -27,4 +28,6 @@ export default () => (
</Badge>
</>
);
export default App;
```

9
components/badge/demo/link.md
View File

@ -13,14 +13,17 @@ title:
The badge can be wrapped with `a` tag to make it linkable.
```jsx
import { Badge, Avatar } from 'antd';
```tsx
import { Avatar, Badge } from 'antd';
import React from 'react';
export default () => (
const App: React.FC = () => (
<a href="#">
<Badge count={5}>
<Avatar shape="square" size="large" />
</Badge>
</a>
);
export default App;
```

9
components/badge/demo/mix.md
View File

@ -14,10 +14,11 @@ debug: true
Using `count/dot` with custom `stauts/color`.
```jsx
import { Badge, Avatar } from 'antd';
```tsx
import { Avatar, Badge } from 'antd';
import React from 'react';
export default () => (
const App: React.FC = () => (
<>
<Badge count={5} status="success">
<Avatar shape="square" size="large" />
@ -45,4 +46,6 @@ export default () => (
</Badge>
</>
);
export default App;
```

11
components/badge/demo/no-wrapper.md
View File

@ -15,12 +15,13 @@ title:
Used in standalone when children is empty.
```jsx
import { Badge, Space, Switch } from 'antd';
```tsx
import { ClockCircleOutlined } from '@ant-design/icons';
import { Badge, Space, Switch } from 'antd';
import React, { useState } from 'react';
const Demo = () => {
const [show, setShow] = React.useState(true);
const App: React.FC = () => {
const [show, setShow] = useState(true);
return (
<Space>
@ -36,5 +37,5 @@ const Demo = () => {
);
};
export default Demo;
export default App;
```

9
components/badge/demo/offset.md
View File

@ -13,12 +13,15 @@ title:
Set offset of the badge dot, the format is `[left, top]`, which represents the offset of the status dot from the left and top of the default position.
```jsx
import { Badge, Avatar } from 'antd';
```tsx
import { Avatar, Badge } from 'antd';
import React from 'react';
export default () => (
const App: React.FC = () => (
<Badge count={5} offset={[10, 10]}>
<Avatar shape="square" size="large" />
</Badge>
);
export default App;
```

9
components/badge/demo/overflow.md
View File

@ -13,10 +13,11 @@ title:
`${overflowCount}+` is displayed when count is larger than `overflowCount`. The default value of `overflowCount` is `99`.
```jsx
import { Badge, Avatar } from 'antd';
```tsx
import { Avatar, Badge } from 'antd';
import React from 'react';
export default () => (
const App: React.FC = () => (
<>
<Badge count={99}>
<Avatar shape="square" size="large" />
@ -32,4 +33,6 @@ export default () => (
</Badge>
</>
);
export default App;
```

7
components/badge/demo/ribbbon.md
View File

@ -13,10 +13,11 @@ title:
Use ribbon badge.
```jsx
```tsx
import { Badge, Card } from 'antd';
import React from 'react';
export default () => (
const App: React.FC = () => (
<>
<Badge.Ribbon text="Hippies">
<Card title="Pushes open the window" size="small">
@ -60,6 +61,8 @@ export default () => (
</Badge.Ribbon>
</>
);
export default App;
```
```css

7
components/badge/demo/ribbon-debug.md
View File

@ -14,10 +14,11 @@ Buggy!
Buggy!
```jsx
```tsx
import { Badge, Card, Space } from 'antd';
import React from 'react';
export default () => (
const App: React.FC = () => (
<Space direction="vertical" style={{ width: '100%' }}>
<Badge.Ribbon text="啦啦啦啦">
<Card>推开窗户举起望远镜</Card>
@ -36,4 +37,6 @@ export default () => (
</Badge.Ribbon>
</Space>
);
export default App;
```

9
components/badge/demo/size.md
View File

@ -13,10 +13,11 @@ title:
Set size of numeral Badge.
```jsx
import { Badge, Avatar } from 'antd';
```tsx
import { Avatar, Badge } from 'antd';
import React from 'react';
export default () => (
const App: React.FC = () => (
<>
<Badge size="default" count={5}>
<Avatar shape="square" size="large" />
@ -26,4 +27,6 @@ export default () => (
</Badge>
</>
);
export default App;
```

7
components/badge/demo/status.md
View File

@ -13,10 +13,11 @@ title:
Standalone badge with status.
```jsx
```tsx
import { Badge } from 'antd';
import React from 'react';
export default () => (
const App: React.FC = () => (
<>
<Badge status="success" />
<Badge status="error" />
@ -35,4 +36,6 @@ export default () => (
<Badge status="warning" text="Warning" />
</>
);
export default App;
```

9
components/badge/demo/title.md
View File

@ -14,10 +14,11 @@ debug: true
The badge will display `title` when hovered over, instead of `count`.
```jsx
import { Badge, Avatar } from 'antd';
```tsx
import { Avatar, Badge } from 'antd';
import React from 'react';
export default () => (
const App: React.FC = () => (
<>
<Badge count={5} title="Custom hover text">
<Avatar shape="square" size="large" />
@ -27,4 +28,6 @@ export default () => (
</Badge>
</>
);
export default App;
```

7
components/breadcrumb/demo/basic.md
View File

@ -13,10 +13,11 @@ title:
The simplest use.
```jsx
```tsx
import { Breadcrumb } from 'antd';
import React from 'react';
export default () => (
const App: React.FC = () => (
<Breadcrumb>
<Breadcrumb.Item>Home</Breadcrumb.Item>
<Breadcrumb.Item>
@ -28,4 +29,6 @@ export default () => (
<Breadcrumb.Item>An Application</Breadcrumb.Item>
</Breadcrumb>
);
export default App;
```

10
components/breadcrumb/demo/overlay.md
View File

@ -13,13 +13,15 @@ title:
Breadcrumbs support drop down menu.
```jsx
```tsx
import { Breadcrumb, Menu } from 'antd';
import React from 'react';
const menu = (
<Menu
items={[
{
key: '1',
label: (
<a target="_blank" rel="noopener noreferrer" href="http://www.alipay.com/">
General
@ -27,6 +29,7 @@ const menu = (
),
},
{
key: '2',
label: (
<a target="_blank" rel="noopener noreferrer" href="http://www.taobao.com/">
Layout
@ -34,6 +37,7 @@ const menu = (
),
},
{
key: '3',
label: (
<a target="_blank" rel="noopener noreferrer" href="http://www.tmall.com/">
Navigation
@ -44,7 +48,7 @@ const menu = (
/>
);
export default () => (
const App: React.FC = () => (
<Breadcrumb>
<Breadcrumb.Item>Ant Design</Breadcrumb.Item>
<Breadcrumb.Item>
@ -56,4 +60,6 @@ export default () => (
<Breadcrumb.Item>Button</Breadcrumb.Item>
</Breadcrumb>
);
export default App;
```

19
components/breadcrumb/demo/react-router.md
View File

@ -15,9 +15,10 @@ title:
Used together with `react-router@6+`.
```jsx
import { HashRouter, Route, Routes, Link, useLocation } from 'react-router-dom';
import { Breadcrumb, Alert } from 'antd';
```tsx
import { Alert, Breadcrumb } from 'antd';
import React from 'react';
import { HashRouter, Link, Route, Routes, useLocation } from 'react-router-dom';
const Apps = () => (
<ul className="app-list">
@ -30,16 +31,18 @@ const Apps = () => (
</ul>
);
const breadcrumbNameMap = {
const breadcrumbNameMap: Record<string, string> = {
'/apps': 'Application List',
'/apps/1': 'Application1',
'/apps/2': 'Application2',
'/apps/1/detail': 'Detail',
'/apps/2/detail': 'Detail',
};
const Home = props => {
const Home = () => {
const location = useLocation();
const pathSnippets = location.pathname.split('/').filter(i => i);
const extraBreadcrumbItems = pathSnippets.map((_, index) => {
const url = `/${pathSnippets.slice(0, index + 1).join('/')}`;
return (
@ -48,11 +51,13 @@ const Home = props => {
</Breadcrumb.Item>
);
});
const breadcrumbItems = [
<Breadcrumb.Item key="home">
<Link to="/">Home</Link>
</Breadcrumb.Item>,
].concat(extraBreadcrumbItems);
return (
<div className="demo">
<div className="demo-nav">
@ -69,11 +74,13 @@ const Home = props => {
);
};
export default () => (
const App: React.FC = () => (
<HashRouter>
<Home />
</HashRouter>
);
export default App;
```
```css

7
components/breadcrumb/demo/separator-component.md
View File

@ -13,10 +13,11 @@ title:
The separator can be customized by setting the separator property: `Breadcrumb.Separator`.
```jsx
```tsx
import { Breadcrumb } from 'antd';
import React from 'react';
export default () => (
const App: React.FC = () => (
<Breadcrumb separator="">
<Breadcrumb.Item>Location</Breadcrumb.Item>
<Breadcrumb.Separator>:</Breadcrumb.Separator>
@ -27,4 +28,6 @@ export default () => (
<Breadcrumb.Item>An Application</Breadcrumb.Item>
</Breadcrumb>
);
export default App;
```

7
components/breadcrumb/demo/separator.md
View File

@ -13,10 +13,11 @@ title:
The separator can be customized by setting the separator property: `separator=">"`.
```jsx
```tsx
import { Breadcrumb } from 'antd';
import React from 'react';
export default () => (
const App: React.FC = () => (
<Breadcrumb separator=">">
<Breadcrumb.Item>Home</Breadcrumb.Item>
<Breadcrumb.Item href="">Application Center</Breadcrumb.Item>
@ -24,4 +25,6 @@ export default () => (
<Breadcrumb.Item>An Application</Breadcrumb.Item>
</Breadcrumb>
);
export default App;
```

9
components/breadcrumb/demo/withIcon.md
View File

@ -13,11 +13,12 @@ title:
The icon should be placed in front of the text.
```jsx
import { Breadcrumb } from 'antd';
```tsx
import { HomeOutlined, UserOutlined } from '@ant-design/icons';
import { Breadcrumb } from 'antd';
import React from 'react';
export default () => (
const App: React.FC = () => (
<Breadcrumb>
<Breadcrumb.Item href="">
<HomeOutlined />
@ -29,4 +30,6 @@ export default () => (
<Breadcrumb.Item>Application</Breadcrumb.Item>
</Breadcrumb>
);
export default App;
```

7
components/button/demo/basic.md
View File

@ -13,10 +13,11 @@ title:
There are `primary` button, `default` button, `dashed` button, `text` button and `link` button in antd.
```jsx
```tsx
import { Button } from 'antd';
import React from 'react';
export default () => (
const App: React.FC = () => (
<>
<Button type="primary">Primary Button</Button>
<Button>Default Button</Button>
@ -26,4 +27,6 @@ export default () => (
<Button type="link">Link Button</Button>
</>
);
export default App;
```

7
components/button/demo/block.md
View File

@ -13,10 +13,11 @@ title:
`block` property will make the button fit to its parent width.
```jsx
```tsx
import { Button } from 'antd';
import React from 'react';
export default () => (
const App: React.FC = () => (
<>
<Button type="primary" block>
Primary
@ -30,4 +31,6 @@ export default () => (
</Button>
</>
);
export default App;
```

7
components/button/demo/danger.md
View File

@ -13,10 +13,11 @@ title:
`danger` is a property of button after antd 4.0.
```jsx
```tsx
import { Button } from 'antd';
import React from 'react';
export default () => (
const App: React.FC = () => (
<>
<Button type="primary" danger>
Primary
@ -33,4 +34,6 @@ export default () => (
</Button>
</>
);
export default App;
```

7
components/button/demo/disabled.md
View File

@ -13,10 +13,11 @@ title:
To mark a button as disabled, add the `disabled` property to the `Button`.
```jsx
```tsx
import { Button } from 'antd';
import React from 'react';
export default () => (
const App: React.FC = () => (
<>
<Button type="primary">Primary</Button>
<Button type="primary" disabled>
@ -67,6 +68,8 @@ export default () => (
</div>
</>
);
export default App;
```
```css

7
components/button/demo/ghost.md
View File

@ -13,10 +13,11 @@ title:
`ghost` property will make button's background transparent, it is commonly used in colored background.
```jsx
```tsx
import { Button } from 'antd';
import React from 'react';
export default () => (
const App: React.FC = () => (
<div className="site-button-ghost-wrapper">
<Button type="primary" ghost>
Primary
@ -30,6 +31,8 @@ export default () => (
</Button>
</div>
);
export default App;
```
```css

9
components/button/demo/icon.md
View File

@ -17,11 +17,12 @@ title:
If you want specific control over the positioning and placement of the `Icon`, then that should be done by placing the `Icon` component within the `Button` rather than using the `icon` property.
```jsx
import { Button, Tooltip } from 'antd';
```tsx
import { SearchOutlined } from '@ant-design/icons';
import { Button, Tooltip } from 'antd';
import React from 'react';
export default () => (
const App: React.FC = () => (
<>
<Tooltip title="search">
<Button type="primary" shape="circle" icon={<SearchOutlined />} />
@ -81,4 +82,6 @@ export default () => (
<Button icon={<SearchOutlined />} size="large" href="https://www.google.com" />
</>
);
export default App;
```

40
components/button/demo/legacy-group.md
View File

@ -14,28 +14,28 @@ Debug usage
Debug usage
```jsx
import { Button, Tooltip } from 'antd';
```tsx
import { DownloadOutlined } from '@ant-design/icons';
import { Button, Tooltip } from 'antd';
import type { ButtonGroupProps } from 'antd/es/button';
import React from 'react';
function getGroup(props) {
return (
<div>
<Button.Group {...props}>
<Button type="primary">Button 1</Button>
<Button type="primary">Button 2</Button>
<Tooltip title="Tooltip">
<Button type="primary" icon={<DownloadOutlined />} disabled />
</Tooltip>
<Tooltip title="Tooltip">
<Button type="primary" icon={<DownloadOutlined />} />
</Tooltip>
</Button.Group>
</div>
);
}
const getGroup = (props?: ButtonGroupProps) => (
<div>
<Button.Group {...props}>
<Button type="primary">Button 1</Button>
<Button type="primary">Button 2</Button>
<Tooltip title="Tooltip">
<Button type="primary" icon={<DownloadOutlined />} disabled />
</Tooltip>
<Tooltip title="Tooltip">
<Button type="primary" icon={<DownloadOutlined />} />
</Tooltip>
</Button.Group>
</div>
);
export default () => (
const App: React.FC = () => (
<>
{getGroup({ size: 'small' })}
<br />
@ -44,6 +44,8 @@ export default () => (
{getGroup({ size: 'large' })}
</>
);
export default App;
```
```css

14
components/button/demo/loading.md
View File

@ -13,15 +13,15 @@ title:
A loading indicator can be added to a button by setting the `loading` property on the `Button`.
```jsx
import React, { useEffect, useState, useRef } from 'react';
import { Button, Space } from 'antd';
```tsx
import { PoweroffOutlined } from '@ant-design/icons';
import { Button, Space } from 'antd';
import React, { useState } from 'react';
export default () => {
const [loadings, setLoadings] = useState([]);
const App: React.FC = () => {
const [loadings, setLoadings] = useState<boolean[]>([]);
const enterLoading = index => {
const enterLoading = (index: number) => {
setLoadings(prevLoadings => {
const newLoadings = [...prevLoadings];
newLoadings[index] = true;
@ -71,4 +71,6 @@ export default () => {
</>
);
};
export default App;
```

7
components/button/demo/multiple.md
View File

@ -15,7 +15,8 @@ If you need several buttons, we recommend that you use 1 primary button + n seco
```tsx
import type { MenuProps } from 'antd';
import { Button, Menu, Dropdown } from 'antd';
import { Button, Dropdown, Menu } from 'antd';
import React from 'react';
const onMenuClick: MenuProps['onClick'] = e => {
console.log('click', e);
@ -41,11 +42,13 @@ const menu = (
/>
);
export default () => (
const App: React.FC = () => (
<>
<Button type="primary">primary</Button>
<Button>secondary</Button>
<Dropdown.Button overlay={menu}>Actions</Dropdown.Button>
</>
);
export default App;
```

18
components/button/demo/size.md
View File

@ -17,20 +17,18 @@ Ant Design supports a default button size as well as a large and small size.
If a large or small button is desired, set the `size` property to either `large` or `small` respectively. Omit the `size` property for a button with the default size.
```jsx
import React, { useState } from 'react';
import { Button, Radio } from 'antd';
```tsx
import { DownloadOutlined } from '@ant-design/icons';
import { Button, Radio } from 'antd';
import type { SizeType } from 'antd/es/config-provider/SizeContext';
import React, { useState } from 'react';
export default () => {
const [size, setSize] = useState('large');
const handleSizeChange = e => {
setSize(e.target.value);
};
const App: React.FC = () => {
const [size, setSize] = useState<SizeType>('large');
return (
<>
<Radio.Group value={size} onChange={handleSizeChange}>
<Radio.Group value={size} onChange={e => setSize(e.target.value)}>
<Radio.Button value="large">Large</Radio.Button>
<Radio.Button value="default">Default</Radio.Button>
<Radio.Button value="small">Small</Radio.Button>
@ -61,4 +59,6 @@ export default () => {
</>
);
};
export default App;
```

4
components/calendar/__tests__/__snapshots__/demo-extend.test.ts.snap
View File

@ -3185,12 +3185,10 @@ exports[`renders ./components/calendar/demo/customize-header.md extend context c
</h4>
<div
class="ant-row"
role="row"
style="margin-left:-4px;margin-right:-4px"
>
<div
class="ant-col"
role="cell"
style="padding-left:4px;padding-right:4px"
>
<div
@ -3239,7 +3237,6 @@ exports[`renders ./components/calendar/demo/customize-header.md extend context c
</div>
<div
class="ant-col"
role="cell"
style="padding-left:4px;padding-right:4px"
>
<div
@ -3690,7 +3687,6 @@ exports[`renders ./components/calendar/demo/customize-header.md extend context c
</div>
<div
class="ant-col"
role="cell"
style="padding-left:4px;padding-right:4px"
>
<div

4
components/calendar/__tests__/__snapshots__/demo.test.js.snap
View File

@ -1905,12 +1905,10 @@ exports[`renders ./components/calendar/demo/customize-header.md correctly 1`] =
</h4>
<div
class="ant-row"
role="row"
style="margin-left:-4px;margin-right:-4px"
>
<div
class="ant-col"
role="cell"
style="padding-left:4px;padding-right:4px"
>
<div
@ -1959,7 +1957,6 @@ exports[`renders ./components/calendar/demo/customize-header.md correctly 1`] =
</div>
<div
class="ant-col"
role="cell"
style="padding-left:4px;padding-right:4px"
>
<div
@ -2024,7 +2021,6 @@ exports[`renders ./components/calendar/demo/customize-header.md correctly 1`] =
</div>
<div
class="ant-col"
role="cell"
style="padding-left:4px;padding-right:4px"
>
<div

17
components/calendar/demo/basic.md
View File

@ -13,12 +13,19 @@ title:
A basic calendar component with Year/Month switch.
```jsx
```tsx
import { Calendar } from 'antd';
import type { CalendarMode } from 'antd/lib/calendar/generateCalendar';
import type { Moment } from 'moment';
import React from 'react';
function onPanelChange(value, mode) {
console.log(value.format('YYYY-MM-DD'), mode);
}
const App: React.FC = () => {
const onPanelChange = (value: Moment, mode: CalendarMode) => {
console.log(value.format('YYYY-MM-DD'), mode);
};
export default () => <Calendar onPanelChange={onPanelChange} />;
return <Calendar onPanelChange={onPanelChange} />;
};
export default App;
```

25
components/calendar/demo/card.md
View File

@ -13,18 +13,25 @@ title:
Nested inside a container element for rendering in limited space.
```jsx
```tsx
import { Calendar } from 'antd';
import type { CalendarMode } from 'antd/lib/calendar/generateCalendar';
import type { Moment } from 'moment';
import React from 'react';
function onPanelChange(value, mode) {
console.log(value, mode);
}
const App: React.FC = () => {
const onPanelChange = (value: Moment, mode: CalendarMode) => {
console.log(value.format('YYYY-MM-DD'), mode);
};
export default () => (
<div className="site-calendar-demo-card">
<Calendar fullscreen={false} onPanelChange={onPanelChange} />
</div>
);
return (
<div className="site-calendar-demo-card">
<Calendar fullscreen={false} onPanelChange={onPanelChange} />
</div>
);
};
export default App;
```
```css

175
components/calendar/demo/customize-header.md
View File

@ -13,94 +13,105 @@ title:
Customize Calendar header content.
```jsx
import { Calendar, Select, Radio, Col, Row, Typography } from 'antd';
```tsx
import { Calendar, Col, Radio, Row, Select, Typography } from 'antd';
import type { CalendarMode } from 'antd/lib/calendar/generateCalendar';
import type { Moment } from 'moment';
import React from 'react';
function onPanelChange(value, mode) {
console.log(value, mode);
}
const App: React.FC = () => {
const onPanelChange = (value: Moment, mode: CalendarMode) => {
console.log(value.format('YYYY-MM-DD'), mode);
};
export default () => (
<div className="site-calendar-customize-header-wrapper">
<Calendar
fullscreen={false}
headerRender={({ value, type, onChange, onTypeChange }) => {
const start = 0;
const end = 12;
const monthOptions = [];
return (
<div className="site-calendar-customize-header-wrapper">
<Calendar
fullscreen={false}
headerRender={({ value, type, onChange, onTypeChange }) => {
const start = 0;
const end = 12;
const monthOptions = [];
const current = value.clone();
const localeData = value.localeData();
const months = [];
for (let i = 0; i < 12; i++) {
current.month(i);
months.push(localeData.monthsShort(current));
}
const current = value.clone();
const localeData = value.localeData();
const months = [];
for (let i = 0; i < 12; i++) {
current.month(i);
months.push(localeData.monthsShort(current));
}
for (let index = start; index < end; index++) {
monthOptions.push(
<Select.Option className="month-item" key={`${index}`}>
{months[index]}
</Select.Option>,
for (let index = start; index < end; index++) {
monthOptions.push(
<Select.Option className="month-item" key={`${index}`}>
{months[index]}
</Select.Option>,
);
}
const month = value.month();
const year = value.year();
const options = [];
for (let i = year - 10; i < year + 10; i += 1) {
options.push(
<Select.Option key={i} value={i} className="year-item">
{i}
</Select.Option>,
);
}
return (
<div style={{ padding: 8 }}>
<Typography.Title level={4}>Custom header</Typography.Title>
<Row gutter={8}>
<Col>
<Radio.Group
size="small"
onChange={e => onTypeChange(e.target.value)}
value={type}
>
<Radio.Button value="month">Month</Radio.Button>
<Radio.Button value="year">Year</Radio.Button>
</Radio.Group>
</Col>
<Col>
<Select
size="small"
dropdownMatchSelectWidth={false}
className="my-year-select"
onChange={newYear => {
const now = value.clone().year(Number(newYear));
onChange(now);
}}
value={String(year)}
>
{options}
</Select>
</Col>
<Col>
<Select
size="small"
dropdownMatchSelectWidth={false}
value={String(month)}
onChange={selectedMonth => {
const newValue = value.clone();
newValue.month(parseInt(selectedMonth, 10));
onChange(newValue);
}}
>
{monthOptions}
</Select>
</Col>
</Row>
</div>
);
}
const month = value.month();
}}
onPanelChange={onPanelChange}
/>
</div>
);
};
const year = value.year();
const options = [];
for (let i = year - 10; i < year + 10; i += 1) {
options.push(
<Select.Option key={i} value={i} className="year-item">
{i}
</Select.Option>,
);
}
return (
<div style={{ padding: 8 }}>
<Typography.Title level={4}>Custom header</Typography.Title>
<Row gutter={8}>
<Col>
<Radio.Group size="small" onChange={e => onTypeChange(e.target.value)} value={type}>
<Radio.Button value="month">Month</Radio.Button>
<Radio.Button value="year">Year</Radio.Button>
</Radio.Group>
</Col>
<Col>
<Select
size="small"
dropdownMatchSelectWidth={false}
className="my-year-select"
onChange={newYear => {
const now = value.clone().year(newYear);
onChange(now);
}}
value={String(year)}
>
{options}
</Select>
</Col>
<Col>
<Select
size="small"
dropdownMatchSelectWidth={false}
value={String(month)}
onChange={selectedMonth => {
const newValue = value.clone();
newValue.month(parseInt(selectedMonth, 10));
onChange(newValue);
}}
>
{monthOptions}
</Select>
</Col>
</Row>
</div>
);
}}
onPanelChange={onPanelChange}
/>
</div>
);
export default App;
```
```css

65
components/calendar/demo/notice-calendar.md
View File

@ -13,10 +13,13 @@ title:
This component can be rendered by using `dateCellRender` and `monthCellRender` with the data you need.
```jsx
import { Calendar, Badge } from 'antd';
```tsx
import type { BadgeProps } from 'antd';
import { Badge, Calendar } from 'antd';
import type { Moment } from 'moment';
import React from 'react';
function getListData(value) {
const getListData = (value: Moment) => {
let listData;
switch (value.date()) {
case 8:
@ -45,38 +48,42 @@ function getListData(value) {
default:
}
return listData || [];
}
};
function dateCellRender(value) {
const listData = getListData(value);
return (
<ul className="events">
{listData.map(item => (
<li key={item.content}>
<Badge status={item.type} text={item.content} />
</li>
))}
</ul>
);
}
function getMonthData(value) {
const getMonthData = (value: Moment) => {
if (value.month() === 8) {
return 1394;
}
}
};
function monthCellRender(value) {
const num = getMonthData(value);
return num ? (
<div className="notes-month">
<section>{num}</section>
<span>Backlog number</span>
</div>
) : null;
}
const App: React.FC = () => {
const monthCellRender = (value: Moment) => {
const num = getMonthData(value);
return num ? (
<div className="notes-month">
<section>{num}</section>
<span>Backlog number</span>
</div>
) : null;
};
export default () => <Calendar dateCellRender={dateCellRender} monthCellRender={monthCellRender} />;
const dateCellRender = (value: Moment) => {
const listData = getListData(value);
return (
<ul className="events">
{listData.map(item => (
<li key={item.content}>
<Badge status={item.type as BadgeProps['status']} text={item.content} />
</li>
))}
</ul>
);
};
return <Calendar dateCellRender={dateCellRender} monthCellRender={monthCellRender} />;
};
export default App;
```
```css

40
components/calendar/demo/select.md
View File

@ -13,40 +13,32 @@ title:
A basic calendar component with Year/Month switch.
```jsx
import React, { useState } from 'react';
import { Calendar, Alert } from 'antd';
```tsx
import { Alert, Calendar } from 'antd';
import type { Moment } from 'moment';
import moment from 'moment';
import React, { useState } from 'react';
export default () => {
const [calendar, setCalendar] = useState({
value: moment('2017-01-25'),
selectedValue: moment('2017-01-25'),
});
const App: React.FC = () => {
const [value, setValue] = useState(moment('2017-01-25'));
const [selectedValue, setSelectedValue] = useState(moment('2017-01-25'));
const onSelect = value => {
setCalendar({
value,
selectedValue: value,
});
const onSelect = (newValue: Moment) => {
setValue(newValue);
setSelectedValue(newValue);
};
const onPanelChange = value => {
setCalendar({
...calendar,
value,
});
const onPanelChange = (newValue: Moment) => {
setValue(newValue);
};
return (
<>
<Alert
message={`You selected date: ${
calendar.selectedValue && calendar.selectedValue.format('YYYY-MM-DD')
}`}
/>
<Calendar value={calendar.value} onSelect={onSelect} onPanelChange={onPanelChange} />
<Alert message={`You selected date: ${selectedValue?.format('YYYY-MM-DD')}`} />
<Calendar value={value} onSelect={onSelect} onPanelChange={onPanelChange} />
</>
);
};
export default App;
```

4
components/card/__tests__/__snapshots__/demo-extend.test.ts.snap
View File

@ -233,12 +233,10 @@ exports[`renders ./components/card/demo/in-column.md extend context correctly 1`
>
<div
class="ant-row"
role="row"
style="margin-left:-8px;margin-right:-8px"
>
<div
class="ant-col ant-col-8"
role="cell"
style="padding-left:8px;padding-right:8px"
>
<div
@ -266,7 +264,6 @@ exports[`renders ./components/card/demo/in-column.md extend context correctly 1`
</div>
<div
class="ant-col ant-col-8"
role="cell"
style="padding-left:8px;padding-right:8px"
>
<div
@ -294,7 +291,6 @@ exports[`renders ./components/card/demo/in-column.md extend context correctly 1`
</div>
<div
class="ant-col ant-col-8"
role="cell"
style="padding-left:8px;padding-right:8px"
>
<div

4
components/card/__tests__/__snapshots__/demo.test.js.snap
View File

@ -233,12 +233,10 @@ exports[`renders ./components/card/demo/in-column.md correctly 1`] = `
>
<div
class="ant-row"
role="row"
style="margin-left:-8px;margin-right:-8px"
>
<div
class="ant-col ant-col-8"
role="cell"
style="padding-left:8px;padding-right:8px"
>
<div
@ -266,7 +264,6 @@ exports[`renders ./components/card/demo/in-column.md correctly 1`] = `
</div>
<div
class="ant-col ant-col-8"
role="cell"
style="padding-left:8px;padding-right:8px"
>
<div
@ -294,7 +291,6 @@ exports[`renders ./components/card/demo/in-column.md correctly 1`] = `
</div>
<div
class="ant-col ant-col-8"
role="cell"
style="padding-left:8px;padding-right:8px"
>
<div

7
components/card/demo/basic.md
View File

@ -13,10 +13,11 @@ title:
A basic card containing a title, content and an extra corner content. Supports two sizes: `default` and `small`.
```jsx
```tsx
import { Card } from 'antd';
import React from 'react';
export default () => (
const App: React.FC = () => (
<>
<Card title="Default size card" extra={<a href="#">More</a>} style={{ width: 300 }}>
<p>Card content</p>
@ -30,6 +31,8 @@ export default () => (
</Card>
</>
);
export default App;
```
<style>

7
components/card/demo/border-less.md
View File

@ -13,10 +13,11 @@ title:
A borderless card on a gray background.
```jsx
```tsx
import { Card } from 'antd';
import React from 'react';
export default () => (
const App: React.FC = () => (
<div className="site-card-border-less-wrapper">
<Card title="Card title" bordered={false} style={{ width: 300 }}>
<p>Card content</p>
@ -25,6 +26,8 @@ export default () => (
</Card>
</div>
);
export default App;
```
```css

7
components/card/demo/flexible-content.md
View File

@ -13,12 +13,13 @@ title:
You can use `Card.Meta` to support more flexible content.
```jsx
```tsx
import { Card } from 'antd';
import React from 'react';
const { Meta } = Card;
export default () => (
const App: React.FC = () => (
<Card
hoverable
style={{ width: 240 }}
@ -27,4 +28,6 @@ export default () => (
<Meta title="Europe Street beat" description="www.instagram.com" />
</Card>
);
export default App;
```

9
components/card/demo/grid-card.md
View File

@ -13,15 +13,16 @@ title:
Grid style card content.
```jsx
```tsx
import { Card } from 'antd';
import React from 'react';
const gridStyle = {
const gridStyle: React.CSSProperties = {
width: '25%',
textAlign: 'center',
};
export default () => (
const App: React.FC = () => (
<Card title="Card Title">
<Card.Grid style={gridStyle}>Content</Card.Grid>
<Card.Grid hoverable={false} style={gridStyle}>
@ -34,4 +35,6 @@ export default () => (
<Card.Grid style={gridStyle}>Content</Card.Grid>
</Card>
);
export default App;
```

7
components/card/demo/in-column.md
View File

@ -13,10 +13,11 @@ title:
Cards usually cooperate with grid column layout in overview page.
```jsx
```tsx
import { Card, Col, Row } from 'antd';
import React from 'react';
export default () => (
const App: React.FC = () => (
<div className="site-card-wrapper">
<Row gutter={16}>
<Col span={8}>
@ -37,6 +38,8 @@ export default () => (
</Row>
</div>
);
export default App;
```
<style>

7
components/card/demo/inner.md
View File

@ -13,10 +13,11 @@ title:
It can be placed inside the ordinary card to display the information of the multilevel structure.
```jsx
```tsx
import { Card } from 'antd';
import React from 'react';
export default () => (
const App: React.FC = () => (
<Card title="Card title">
<Card type="inner" title="Inner Card title" extra={<a href="#">More</a>}>
Inner Card content
@ -31,4 +32,6 @@ export default () => (
</Card>
</Card>
);
export default App;
```

12
components/card/demo/loading.md
View File

@ -13,17 +13,17 @@ title:
Shows a loading indicator while the contents of the card is being fetched.
```jsx
import React, { useState } from 'react';
import { Skeleton, Switch, Card, Avatar } from 'antd';
```tsx
import { EditOutlined, EllipsisOutlined, SettingOutlined } from '@ant-design/icons';
import { Avatar, Card, Skeleton, Switch } from 'antd';
import React, { useState } from 'react';
const { Meta } = Card;
export default () => {
const App: React.FC = () => {
const [loading, setLoading] = useState(true);
const onChange = checked => {
const onChange = (checked: boolean) => {
setLoading(!checked);
};
@ -58,4 +58,6 @@ export default () => {
</>
);
};
export default App;
```

9
components/card/demo/meta.md
View File

@ -13,13 +13,14 @@ title:
A Card that supports `cover`, `avatar`, `title` and `description`.
```jsx
import { Card, Avatar } from 'antd';
```tsx
import { EditOutlined, EllipsisOutlined, SettingOutlined } from '@ant-design/icons';
import { Avatar, Card } from 'antd';
import React from 'react';
const { Meta } = Card;
export default () => (
const App: React.FC = () => (
<Card
style={{ width: 300 }}
cover={
@ -41,4 +42,6 @@ export default () => (
/>
</Card>
);
export default App;
```

7
components/card/demo/simple.md
View File

@ -13,14 +13,17 @@ title:
A simple card only containing a content area.
```jsx
```tsx
import { Card } from 'antd';
import React from 'react';
export default () => (
const App: React.FC = () => (
<Card style={{ width: 300 }}>
<p>Card content</p>
<p>Card content</p>
<p>Card content</p>
</Card>
);
export default App;
```

20
components/card/demo/tabs.md
View File

@ -13,9 +13,9 @@ title:
More content can be hosted.
```jsx
import React, { useState } from 'react';
```tsx
import { Card } from 'antd';
import React, { useState } from 'react';
const tabList = [
{
@ -28,7 +28,7 @@ const tabList = [
},
];
const contentList = {
const contentList: Record<string, React.ReactNode> = {
tab1: <p>content1</p>,
tab2: <p>content2</p>,
};
@ -48,20 +48,20 @@ const tabListNoTitle = [
},
];
const contentListNoTitle = {
const contentListNoTitle: Record<string, React.ReactNode> = {
article: <p>article content</p>,
app: <p>app content</p>,
project: <p>project content</p>,
};
const TabsCard = () => {
const [activeTabKey1, setActiveTabKey1] = useState('tab1');
const [activeTabKey2, setActiveTabKey2] = useState('app');
const App: React.FC = () => {
const [activeTabKey1, setActiveTabKey1] = useState<string>('tab1');
const [activeTabKey2, setActiveTabKey2] = useState<string>('app');
const onTab1Change = key => {
const onTab1Change = (key: string) => {
setActiveTabKey1(key);
};
const onTab2Change = key => {
const onTab2Change = (key: string) => {
setActiveTabKey2(key);
};
@ -96,5 +96,5 @@ const TabsCard = () => {
);
};
export default () => <TabsCard />;
export default App;
```

9
components/carousel/demo/autoplay.md
View File

@ -13,10 +13,11 @@ title:
Timing of scrolling to the next card/picture.
```jsx
```tsx
import { Carousel } from 'antd';
import React from 'react';
const contentStyle = {
const contentStyle: React.CSSProperties = {
height: '160px',
color: '#fff',
lineHeight: '160px',
@ -24,7 +25,7 @@ const contentStyle = {
background: '#364d79',
};
export default () => (
const App: React.FC = () => (
<Carousel autoplay>
<div>
<h3 style={contentStyle}>1</h3>
@ -40,4 +41,6 @@ export default () => (
</div>
</Carousel>
);
export default App;
```

49
components/carousel/demo/basic.md
View File

@ -13,14 +13,11 @@ title:
Basic usage.
```jsx
```tsx
import { Carousel } from 'antd';
import React from 'react';
function onChange(a, b, c) {
console.log(a, b, c);
}
const contentStyle = {
const contentStyle: React.CSSProperties = {
height: '160px',
color: '#fff',
lineHeight: '160px',
@ -28,20 +25,28 @@ const contentStyle = {
background: '#364d79',
};
export default () => (
<Carousel afterChange={onChange}>
<div>
<h3 style={contentStyle}>1</h3>
</div>
<div>
<h3 style={contentStyle}>2</h3>
</div>
<div>
<h3 style={contentStyle}>3</h3>
</div>
<div>
<h3 style={contentStyle}>4</h3>
</div>
</Carousel>
);
const App: React.FC = () => {
const onChange = (currentSlide: number) => {
console.log(currentSlide);
};
return (
<Carousel afterChange={onChange}>
<div>
<h3 style={contentStyle}>1</h3>
</div>
<div>
<h3 style={contentStyle}>2</h3>
</div>
<div>
<h3 style={contentStyle}>3</h3>
</div>
<div>
<h3 style={contentStyle}>4</h3>
</div>
</Carousel>
);
};
export default App;
```

9
components/carousel/demo/fade.md
View File

@ -13,10 +13,11 @@ title:
Slides use fade for transition.
```jsx
```tsx
import { Carousel } from 'antd';
import React from 'react';
const contentStyle = {
const contentStyle: React.CSSProperties = {
height: '160px',
color: '#fff',
lineHeight: '160px',
@ -24,7 +25,7 @@ const contentStyle = {
background: '#364d79',
};
export default () => (
const App: React.FC = () => (
<Carousel effect="fade">
<div>
<h3 style={contentStyle}>1</h3>
@ -40,4 +41,6 @@ export default () => (
</div>
</Carousel>
);
export default App;
```

15
components/carousel/demo/position.md
View File

@ -13,10 +13,13 @@ title:
There are 4 position options available.
```jsx
```tsx
import type { RadioChangeEvent } from 'antd';
import { Carousel, Radio } from 'antd';
import type { DotPosition } from 'antd/lib/carousel';
import React, { useState } from 'react';
const contentStyle = {
const contentStyle: React.CSSProperties = {
height: '160px',
color: '#fff',
lineHeight: '160px',
@ -24,10 +27,10 @@ const contentStyle = {
background: '#364d79',
};
const PositionCarouselDemo = () => {
const [dotPosition, setDotPosition] = React.useState('top');
const App: React.FC = () => {
const [dotPosition, setDotPosition] = useState<DotPosition>('top');
const handlePositionChange = ({ target: { value } }) => {
const handlePositionChange = ({ target: { value } }: RadioChangeEvent) => {
setDotPosition(value);
};
@ -57,5 +60,5 @@ const PositionCarouselDemo = () => {
);
};
export default () => <PositionCarouselDemo />;
export default App;
```

21
components/cascader/demo/basic.md
View File

@ -13,10 +13,17 @@ title:
Cascade selection box for selecting province/city/district.
```jsx
```tsx
import { Cascader } from 'antd';
import React from 'react';
const options = [
interface Option {
value: string | number;
label: string;
children?: Option[];
}
const options: Option[] = [
{
value: 'zhejiang',
label: 'Zhejiang',
@ -51,9 +58,13 @@ const options = [
},
];
function onChange(value) {
const onChange = (value: string[]) => {
console.log(value);
}
};
export default () => <Cascader options={options} onChange={onChange} placeholder="Please select" />;
const App: React.FC = () => (
<Cascader options={options} onChange={onChange} placeholder="Please select" />
);
export default App;
```

Some files were not shown because too many files have changed in this diff Show More