mirror/ant-design
1
0
Fork 0
mirror of https://github.com/ant-design/ant-design.git synced 2025-06-06 00:44:17 +08:00
Code Issues Actions 8 Packages Projects Releases Wiki Activity

docs: replace class component with hooks (#35519)

Browse Source 
* docs(badge): replace class component with hooks

* docs(button): replace class component with hooks

* docs(calendar): replace class component with hooks

* docs(card): replace class component with hooks

* docs(button): replace class component with hooks

* chore(deps): remove webpack devDependencies

* docs(cascader): replace class component with hooks

* docs(checkbox): replace class component with hooks

* docs(collapse): replace class component with hooks

* docs(comment): replace class component with hooks

* docs(descriptions): replace class component with hooks

* docs(config-provider): replace class component with hooks

* docs(date-picker): replace class component with hooks

* docs(drawer): replace class component with hooks

* docs(dropdown): replace class component with hooks

* docs(dropdown): replace class component with hooks

* docs(empty): replace class component with hooks

* docs(grid): replace class component with hooks

* docs(input): replace class component with hooks

* docs(input-number): replace class component with hooks

* docs(demo): fix lint error
This commit is contained in:
dingkang 2022-05-14 16:40:42 +08:00 committed by GitHub
parent e629b39c20
commit 58df74c38e
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
13 changed files with 621 additions and 737 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

258
components/drawer/demo/form-in-drawer.md
View File

@ -19,144 +19,136 @@ import { PlusOutlined } from '@ant-design/icons';
const { Option } = Select;
class DrawerForm extends React.Component {
state = { visible: false };
export default () => {
const [visible, setVisible] = React.useState(false);
showDrawer = () => {
this.setState({
visible: true,
});
const showDrawer = () => {
setVisible(true);
};
onClose = () => {
this.setState({
visible: false,
});
const onClose = () => {
setVisible(false);
};
render() {
return (
<>
<Button type="primary" onClick={this.showDrawer} icon={<PlusOutlined />}>
New account
</Button>
<Drawer
title="Create a new account"
width={720}
onClose={this.onClose}
visible={this.state.visible}
bodyStyle={{ paddingBottom: 80 }}
extra={
<Space>
<Button onClick={this.onClose}>Cancel</Button>
<Button onClick={this.onClose} type="primary">
Submit
</Button>
</Space>
}
>
<Form layout="vertical" hideRequiredMark>
<Row gutter={16}>
<Col span={12}>
<Form.Item
name="name"
label="Name"
rules={[{ required: true, message: 'Please enter user name' }]}
>
<Input placeholder="Please enter user name" />
</Form.Item>
</Col>
<Col span={12}>
<Form.Item
name="url"
label="Url"
rules={[{ required: true, message: 'Please enter url' }]}
>
<Input
style={{ width: '100%' }}
addonBefore="http://"
addonAfter=".com"
placeholder="Please enter url"
/>
</Form.Item>
</Col>
</Row>
<Row gutter={16}>
<Col span={12}>
<Form.Item
name="owner"
label="Owner"
rules={[{ required: true, message: 'Please select an owner' }]}
>
<Select placeholder="Please select an owner">
<Option value="xiao">Xiaoxiao Fu</Option>
<Option value="mao">Maomao Zhou</Option>
</Select>
</Form.Item>
</Col>
<Col span={12}>
<Form.Item
name="type"
label="Type"
rules={[{ required: true, message: 'Please choose the type' }]}
>
<Select placeholder="Please choose the type">
<Option value="private">Private</Option>
<Option value="public">Public</Option>
</Select>
</Form.Item>
</Col>
</Row>
<Row gutter={16}>
<Col span={12}>
<Form.Item
name="approver"
label="Approver"
rules={[{ required: true, message: 'Please choose the approver' }]}
>
<Select placeholder="Please choose the approver">
<Option value="jack">Jack Ma</Option>
<Option value="tom">Tom Liu</Option>
</Select>
</Form.Item>
</Col>
<Col span={12}>
<Form.Item
name="dateTime"
label="DateTime"
rules={[{ required: true, message: 'Please choose the dateTime' }]}
>
<DatePicker.RangePicker
style={{ width: '100%' }}
getPopupContainer={trigger => trigger.parentElement}
/>
</Form.Item>
</Col>
</Row>
<Row gutter={16}>
<Col span={24}>
<Form.Item
name="description"
label="Description"
rules={[
{
required: true,
message: 'please enter url description',
},
]}
>
<Input.TextArea rows={4} placeholder="please enter url description" />
</Form.Item>
</Col>
</Row>
</Form>
</Drawer>
</>
);
}
}
export default () => <DrawerForm />;
return (
<>
<Button type="primary" onClick={showDrawer} icon={<PlusOutlined />}>
New account
</Button>
<Drawer
title="Create a new account"
width={720}
onClose={onClose}
visible={visible}
bodyStyle={{ paddingBottom: 80 }}
extra={
<Space>
<Button onClick={onClose}>Cancel</Button>
<Button onClick={onClose} type="primary">
Submit
</Button>
</Space>
}
>
<Form layout="vertical" hideRequiredMark>
<Row gutter={16}>
<Col span={12}>
<Form.Item
name="name"
label="Name"
rules={[{ required: true, message: 'Please enter user name' }]}
>
<Input placeholder="Please enter user name" />
</Form.Item>
</Col>
<Col span={12}>
<Form.Item
name="url"
label="Url"
rules={[{ required: true, message: 'Please enter url' }]}
>
<Input
style={{ width: '100%' }}
addonBefore="http://"
addonAfter=".com"
placeholder="Please enter url"
/>
</Form.Item>
</Col>
</Row>
<Row gutter={16}>
<Col span={12}>
<Form.Item
name="owner"
label="Owner"
rules={[{ required: true, message: 'Please select an owner' }]}
>
<Select placeholder="Please select an owner">
<Option value="xiao">Xiaoxiao Fu</Option>
<Option value="mao">Maomao Zhou</Option>
</Select>
</Form.Item>
</Col>
<Col span={12}>
<Form.Item
name="type"
label="Type"
rules={[{ required: true, message: 'Please choose the type' }]}
>
<Select placeholder="Please choose the type">
<Option value="private">Private</Option>
<Option value="public">Public</Option>
</Select>
</Form.Item>
</Col>
</Row>
<Row gutter={16}>
<Col span={12}>
<Form.Item
name="approver"
label="Approver"
rules={[{ required: true, message: 'Please choose the approver' }]}
>
<Select placeholder="Please choose the approver">
<Option value="jack">Jack Ma</Option>
<Option value="tom">Tom Liu</Option>
</Select>
</Form.Item>
</Col>
<Col span={12}>
<Form.Item
name="dateTime"
label="DateTime"
rules={[{ required: true, message: 'Please choose the dateTime' }]}
>
<DatePicker.RangePicker
style={{ width: '100%' }}
getPopupContainer={trigger => trigger.parentElement}
/>
</Form.Item>
</Col>
</Row>
<Row gutter={16}>
<Col span={24}>
<Form.Item
name="description"
label="Description"
rules={[
{
required: true,
message: 'please enter url description',
},
]}
>
<Input.TextArea rows={4} placeholder="please enter url description" />
</Form.Item>
</Col>
</Row>
</Form>
</Drawer>
</>
);
};
```
```css

79
components/drawer/demo/multi-level-drawer.md
View File

@ -16,65 +16,54 @@ Open a new drawer on top of an existing drawer to handle multi branch tasks.
```jsx
import { Drawer, Button } from 'antd';
class App extends React.Component {
state = { visible: false, childrenDrawer: false };
export default () => {
const [visible, setVisible] = React.useState(false);
const [childrenDrawer, setChildrenDrawer] = React.useState(false);
showDrawer = () => {
this.setState({
visible: true,
});
const showDrawer = () => {
setVisible(true);
};
onClose = () => {
this.setState({
visible: false,
});
const onClose = () => {
setVisible(false);
};
showChildrenDrawer = () => {
this.setState({
childrenDrawer: true,
});
const showChildrenDrawer = () => {
setChildrenDrawer(true);
};
onChildrenDrawerClose = () => {
this.setState({
childrenDrawer: false,
});
const onChildrenDrawerClose = () => {
setChildrenDrawer(false);
};
render() {
return (
<>
<Button type="primary" onClick={this.showDrawer}>
Open drawer
return (
<>
<Button type="primary" onClick={showDrawer}>
Open drawer
</Button>
<Drawer
title="Multi-level drawer"
width={520}
closable={false}
onClose={onClose}
visible={visible}
>
<Button type="primary" onClick={showChildrenDrawer}>
Two-level drawer
</Button>
<Drawer
title="Multi-level drawer"
width={520}
title="Two-level Drawer"
width={320}
closable={false}
onClose={this.onClose}
visible={this.state.visible}
onClose={onChildrenDrawerClose}
visible={childrenDrawer}
>
<Button type="primary" onClick={this.showChildrenDrawer}>
Two-level drawer
</Button>
<Drawer
title="Two-level Drawer"
width={320}
closable={false}
onClose={this.onChildrenDrawerClose}
visible={this.state.childrenDrawer}
>
This is two-level drawer
</Drawer>
This is two-level drawer
</Drawer>
</>
);
}
}
export default App;
</Drawer>
</>
);
};
```
<style>

84
components/drawer/demo/placement.md
View File

@ -16,58 +16,48 @@ The Drawer can appear from any edge of the screen.
```jsx
import { Drawer, Button, Radio, Space } from 'antd';
class App extends React.Component {
state = { visible: false, placement: 'left' };
export default () => {
const [visible, setVisible] = React.useState(false);
const [placement, setPlacement] = React.useState('left');
showDrawer = () => {
this.setState({
visible: true,
});
const showDrawer = () => {
setVisible(true);
};
onClose = () => {
this.setState({
visible: false,
});
const onClose = () => {
setVisible(false);
};
onChange = e => {
this.setState({
placement: e.target.value,
});
const onChange = e => {
setPlacement(e.target.value);
};
render() {
const { placement, visible } = this.state;
return (
<>
<Space>
<Radio.Group value={placement} onChange={this.onChange}>
<Radio value="top">top</Radio>
<Radio value="right">right</Radio>
<Radio value="bottom">bottom</Radio>
<Radio value="left">left</Radio>
</Radio.Group>
<Button type="primary" onClick={this.showDrawer}>
Open
</Button>
</Space>
<Drawer
title="Basic Drawer"
placement={placement}
closable={false}
onClose={this.onClose}
visible={visible}
key={placement}
>
<p>Some contents...</p>
<p>Some contents...</p>
<p>Some contents...</p>
</Drawer>
</>
);
}
}
export default App;
return (
<>
<Space>
<Radio.Group value={placement} onChange={onChange}>
<Radio value="top">top</Radio>
<Radio value="right">right</Radio>
<Radio value="bottom">bottom</Radio>
<Radio value="left">left</Radio>
</Radio.Group>
<Button type="primary" onClick={showDrawer}>
Open
</Button>
</Space>
<Drawer
title="Basic Drawer"
placement={placement}
closable={false}
onClose={onClose}
visible={visible}
key={placement}
>
<p>Some contents...</p>
<p>Some contents...</p>
<p>Some contents...</p>
</Drawer>
</>
);
};
```

62
components/drawer/demo/render-in-current.md
View File

@ -16,47 +16,39 @@ Render in current dom. custom container, check `getContainer`.
```jsx
import { Drawer, Button } from 'antd';
class App extends React.Component {
state = { visible: false };
export default () => {
const [visible, setVisible] = React.useState(false);
showDrawer = () => {
this.setState({
visible: true,
});
const showDrawer = () => {
setVisible(true);
};
onClose = () => {
this.setState({
visible: false,
});
const onClose = () => {
setVisible(false);
};
render() {
return (
<div className="site-drawer-render-in-current-wrapper">
Render in this
<div style={{ marginTop: 16 }}>
<Button type="primary" onClick={this.showDrawer}>
Open
</Button>
</div>
<Drawer
title="Basic Drawer"
placement="right"
closable={false}
onClose={this.onClose}
visible={this.state.visible}
getContainer={false}
style={{ position: 'absolute' }}
>
<p>Some contents...</p>
</Drawer>
return (
<div className="site-drawer-render-in-current-wrapper">
Render in this
<div style={{ marginTop: 16 }}>
<Button type="primary" onClick={showDrawer}>
Open
</Button>
</div>
);
}
}
export default App;
<Drawer
title="Basic Drawer"
placement="right"
closable={false}
onClose={onClose}
visible={visible}
getContainer={false}
style={{ position: 'absolute' }}
>
<p>Some contents...</p>
</Drawer>
</div>
);
};
```
```css

266
components/drawer/demo/user-profile.md
View File

@ -23,151 +23,137 @@ const DescriptionItem = ({ title, content }) => (
</div>
);
class App extends React.Component {
state = { visible: false };
export default () => {
const [visible, setVisible] = React.useState(false);
showDrawer = () => {
this.setState({
visible: true,
});
const showDrawer = () => {
setVisible(true);
};
onClose = () => {
this.setState({
visible: false,
});
const onClose = () => {
setVisible(false);
};
render() {
return (
<>
<List
dataSource={[
{
name: 'Lily',
},
{
name: 'Lily',
},
]}
bordered
renderItem={item => (
<List.Item
key={item.id}
actions={[
<a onClick={this.showDrawer} key={`a-${item.id}`}>
View Profile
</a>,
]}
>
<List.Item.Meta
avatar={
<Avatar src="https://gw.alipayobjects.com/zos/rmsportal/BiazfanxmamNRoxxVxka.png" />
}
title={<a href="https://ant.design/index-cn">{item.name}</a>}
description="Progresser XTech"
/>
</List.Item>
)}
/>
<Drawer
width={640}
placement="right"
closable={false}
onClose={this.onClose}
visible={this.state.visible}
>
<p className="site-description-item-profile-p" style={{ marginBottom: 24 }}>
User Profile
</p>
<p className="site-description-item-profile-p">Personal</p>
<Row>
<Col span={12}>
<DescriptionItem title="Full Name" content="Lily" />
</Col>
<Col span={12}>
<DescriptionItem title="Account" content="AntDesign@example.com" />
</Col>
</Row>
<Row>
<Col span={12}>
<DescriptionItem title="City" content="HangZhou" />
</Col>
<Col span={12}>
<DescriptionItem title="Country" content="China🇨🇳" />
</Col>
</Row>
<Row>
<Col span={12}>
<DescriptionItem title="Birthday" content="February 2,1900" />
</Col>
<Col span={12}>
<DescriptionItem title="Website" content="-" />
</Col>
</Row>
<Row>
<Col span={24}>
<DescriptionItem
title="Message"
content="Make things as simple as possible but no simpler."
/>
</Col>
</Row>
<Divider />
<p className="site-description-item-profile-p">Company</p>
<Row>
<Col span={12}>
<DescriptionItem title="Position" content="Programmer" />
</Col>
<Col span={12}>
<DescriptionItem title="Responsibilities" content="Coding" />
</Col>
</Row>
<Row>
<Col span={12}>
<DescriptionItem title="Department" content="XTech" />
</Col>
<Col span={12}>
<DescriptionItem title="Supervisor" content={<a>Lin</a>} />
</Col>
</Row>
<Row>
<Col span={24}>
<DescriptionItem
title="Skills"
content="C / C + +, data structures, software engineering, operating systems, computer networks, databases, compiler theory, computer architecture, Microcomputer Principle and Interface Technology, Computer English, Java, ASP, etc."
/>
</Col>
</Row>
<Divider />
<p className="site-description-item-profile-p">Contacts</p>
<Row>
<Col span={12}>
<DescriptionItem title="Email" content="AntDesign@example.com" />
</Col>
<Col span={12}>
<DescriptionItem title="Phone Number" content="+86 181 0000 0000" />
</Col>
</Row>
<Row>
<Col span={24}>
<DescriptionItem
title="Github"
content={
<a href="http://github.com/ant-design/ant-design/">
github.com/ant-design/ant-design/
</a>
}
/>
</Col>
</Row>
</Drawer>
</>
);
}
}
export default App;
return (
<>
<List
dataSource={[
{
name: 'Lily',
},
{
name: 'Lily',
},
]}
bordered
renderItem={item => (
<List.Item
key={item.id}
actions={[
<a onClick={showDrawer} key={`a-${item.id}`}>
View Profile
</a>,
]}
>
<List.Item.Meta
avatar={
<Avatar src="https://gw.alipayobjects.com/zos/rmsportal/BiazfanxmamNRoxxVxka.png" />
}
title={<a href="https://ant.design/index-cn">{item.name}</a>}
description="Progresser XTech"
/>
</List.Item>
)}
/>
<Drawer width={640} placement="right" closable={false} onClose={onClose} visible={visible}>
<p className="site-description-item-profile-p" style={{ marginBottom: 24 }}>
User Profile
</p>
<p className="site-description-item-profile-p">Personal</p>
<Row>
<Col span={12}>
<DescriptionItem title="Full Name" content="Lily" />
</Col>
<Col span={12}>
<DescriptionItem title="Account" content="AntDesign@example.com" />
</Col>
</Row>
<Row>
<Col span={12}>
<DescriptionItem title="City" content="HangZhou" />
</Col>
<Col span={12}>
<DescriptionItem title="Country" content="China🇨🇳" />
</Col>
</Row>
<Row>
<Col span={12}>
<DescriptionItem title="Birthday" content="February 2,1900" />
</Col>
<Col span={12}>
<DescriptionItem title="Website" content="-" />
</Col>
</Row>
<Row>
<Col span={24}>
<DescriptionItem
title="Message"
content="Make things as simple as possible but no simpler."
/>
</Col>
</Row>
<Divider />
<p className="site-description-item-profile-p">Company</p>
<Row>
<Col span={12}>
<DescriptionItem title="Position" content="Programmer" />
</Col>
<Col span={12}>
<DescriptionItem title="Responsibilities" content="Coding" />
</Col>
</Row>
<Row>
<Col span={12}>
<DescriptionItem title="Department" content="XTech" />
</Col>
<Col span={12}>
<DescriptionItem title="Supervisor" content={<a>Lin</a>} />
</Col>
</Row>
<Row>
<Col span={24}>
<DescriptionItem
title="Skills"
content="C / C + +, data structures, software engineering, operating systems, computer networks, databases, compiler theory, computer architecture, Microcomputer Principle and Interface Technology, Computer English, Java, ASP, etc."
/>
</Col>
</Row>
<Divider />
<p className="site-description-item-profile-p">Contacts</p>
<Row>
<Col span={12}>
<DescriptionItem title="Email" content="AntDesign@example.com" />
</Col>
<Col span={12}>
<DescriptionItem title="Phone Number" content="+86 181 0000 0000" />
</Col>
</Row>
<Row>
<Col span={24}>
<DescriptionItem
title="Github"
content={
<a href="http://github.com/ant-design/ant-design/">
github.com/ant-design/ant-design/
</a>
}
/>
</Col>
</Row>
</Drawer>
</>
);
};
```
```css

80
components/dropdown/demo/loading.md
View File

@ -27,52 +27,48 @@ const menu = (
]}
/>
);
class App extends React.Component {
state = {
loadings: [],
};
export default () => {
const [loadings, setLodings] = React.useState([]);
enterLoading = index => {
const newLoadings = [...this.state.loadings];
const enterLoading = index => {
const newLoadings = [...loadings];
newLoadings[index] = true;
this.setState({
loadings: newLoadings,
});
setLodings(newLoadings);
setTimeout(() => {
newLoadings[index] = false;
this.setState({ loadings: newLoadings });
setLodings(prevLoadings => {
const temLoadings = [...prevLoadings];
temLoadings[index] = false;
return temLoadings;
});
}, 6000);
};
render() {
const { loadings } = this.state;
return (
<Space direction="vertical">
<Dropdown.Button type="primary" loading overlay={menu}>
Submit
</Dropdown.Button>
<Dropdown.Button type="primary" size="small" loading overlay={menu}>
Submit
</Dropdown.Button>
<Dropdown.Button
type="primary"
loading={loadings[0]}
overlay={menu}
onClick={() => this.enterLoading(0)}
>
Submit
</Dropdown.Button>
<Dropdown.Button
icon={<DownOutlined />}
loading={loadings[1]}
overlay={menu}
onClick={() => this.enterLoading(1)}
>
Submit
</Dropdown.Button>
</Space>
);
}
}
export default App;
return (
<Space direction="vertical">
<Dropdown.Button type="primary" loading overlay={menu}>
Submit
</Dropdown.Button>
<Dropdown.Button type="primary" size="small" loading overlay={menu}>
Submit
</Dropdown.Button>
<Dropdown.Button
type="primary"
loading={loadings[0]}
overlay={menu}
onClick={() => enterLoading(0)}
>
Submit
</Dropdown.Button>
<Dropdown.Button
icon={<DownOutlined />}
loading={loadings[1]}
overlay={menu}
onClick={() => enterLoading(1)}
>
Submit
</Dropdown.Button>
</Space>
);
};
```

81
components/dropdown/demo/overlay-visible.md
View File

@ -17,57 +17,48 @@ The default is to close the menu when you click on menu items, this feature can
import { Menu, Dropdown, Space } from 'antd';
import { DownOutlined } from '@ant-design/icons';
class OverlayVisible extends React.Component {
state = {
visible: false,
};
export default () => {
const [visible, setVisible] = React.useState(false);
handleMenuClick = e => {
const handleMenuClick = e => {
if (e.key === '3') {
this.setState({ visible: false });
setVisible(false);
}
};
handleVisibleChange = flag => {
this.setState({ visible: flag });
const handleVisibleChange = flag => {
setVisible(flag);
};
render() {
const menu = (
<Menu
onClick={this.handleMenuClick}
items={[
{
label: 'Clicking me will not close the menu.',
key: '1',
},
{
label: 'Clicking me will not close the menu also.',
key: '2',
},
{
label: 'Clicking me will close the menu.',
key: '3',
},
]}
/>
);
return (
<Dropdown
overlay={menu}
onVisibleChange={this.handleVisibleChange}
visible={this.state.visible}
>
<a onClick={e => e.preventDefault()}>
<Space>
Hover me
<DownOutlined />
</Space>
</a>
</Dropdown>
);
}
}
const menu = (
<Menu
onClick={handleMenuClick}
items={[
{
label: 'Clicking me will not close the menu.',
key: '1',
},
{
label: 'Clicking me will not close the menu also.',
key: '2',
},
{
label: 'Clicking me will close the menu.',
key: '3',
},
]}
/>
);
export default () => <OverlayVisible />;
return (
<Dropdown overlay={menu} onVisibleChange={handleVisibleChange} visible={visible}>
<a onClick={e => e.preventDefault()}>
<Space>
Hover me
<DownOutlined />
</Space>
</a>
</Dropdown>
);
};
```

99
components/empty/demo/config-provider.md
View File

@ -36,67 +36,60 @@ const customizeRenderEmpty = () => (
const style = { width: 200 };
class Demo extends React.Component {
state = {
customize: false,
};
export default () => {
const [customize, setCustomize] = React.useState(false);
render() {
const { customize } = this.state;
return (
<div>
<Switch
unCheckedChildren="default"
checkedChildren="customize"
checked={customize}
onChange={val => {
this.setState({ customize: val });
}}
/>
return (
<div>
<Switch
unCheckedChildren="default"
checkedChildren="customize"
checked={customize}
onChange={value => {
setCustomize(value);
}}
/>
<Divider />
<Divider />
<ConfigProvider renderEmpty={customize && customizeRenderEmpty}>
<div className="config-provider">
<h4>Select</h4>
<Select style={style} />
<ConfigProvider renderEmpty={customize && customizeRenderEmpty}>
<div className="config-provider">
<h4>Select</h4>
<Select style={style} />
<h4>TreeSelect</h4>
<TreeSelect style={style} treeData={[]} />
<h4>TreeSelect</h4>
<TreeSelect style={style} treeData={[]} />
<h4>Cascader</h4>
<Cascader style={style} options={[]} showSearch />
<h4>Cascader</h4>
<Cascader style={style} options={[]} showSearch />
<h4>Transfer</h4>
<Transfer />
<h4>Transfer</h4>
<Transfer />
<h4>Table</h4>
<Table
style={{ marginTop: 8 }}
columns={[
{
title: 'Name',
dataIndex: 'name',
key: 'name',
},
{
title: 'Age',
dataIndex: 'age',
key: 'age',
},
]}
/>
<h4>Table</h4>
<Table
style={{ marginTop: 8 }}
columns={[
{
title: 'Name',
dataIndex: 'name',
key: 'name',
},
{
title: 'Age',
dataIndex: 'age',
key: 'age',
},
]}
/>
<h4>List</h4>
<List />
</div>
</ConfigProvider>
</div>
);
}
}
export default Demo;
<h4>List</h4>
<List />
</div>
</ConfigProvider>
</div>
);
};
```
<style>

141
components/grid/demo/playground.md
View File

@ -30,90 +30,87 @@ const colCounts = {};
colCounts[i] = value;
});
class App extends React.Component {
state = {
export default () => {
const [state, setState] = React.useState({
gutterKey: 1,
vgutterKey: 1,
colCountKey: 2,
});
const onGutterChange = gutterKey => {
setState({ ...state, gutterKey });
};
onGutterChange = gutterKey => {
this.setState({ gutterKey });
const onVGutterChange = vgutterKey => {
setState({ ...state, vgutterKey });
};
onVGutterChange = vgutterKey => {
this.setState({ vgutterKey });
const onColCountChange = colCountKey => {
setState({ ...state, colCountKey });
};
onColCountChange = colCountKey => {
this.setState({ colCountKey });
};
render() {
const { gutterKey, vgutterKey, colCountKey } = this.state;
const cols = [];
const colCount = colCounts[colCountKey];
let colCode = '';
for (let i = 0; i < colCount; i++) {
cols.push(
<Col key={i.toString()} span={24 / colCount}>
<div>Column</div>
</Col>,
);
colCode += ` <Col span={${24 / colCount}} />\n`;
}
return (
<>
<span>Horizontal Gutter (px): </span>
<div style={{ width: '50%' }}>
<Slider
min={0}
max={Object.keys(gutters).length - 1}
value={gutterKey}
onChange={this.onGutterChange}
marks={gutters}
step={null}
tipFormatter={value => gutters[value]}
/>
</div>
<span>Vertical Gutter (px): </span>
<div style={{ width: '50%' }}>
<Slider
min={0}
max={Object.keys(vgutters).length - 1}
value={vgutterKey}
onChange={this.onVGutterChange}
marks={vgutters}
step={null}
tipFormatter={value => vgutters[value]}
/>
</div>
<span>Column Count:</span>
<div style={{ width: '50%', marginBottom: 48 }}>
<Slider
min={0}
max={Object.keys(colCounts).length - 1}
value={colCountKey}
onChange={this.onColCountChange}
marks={colCounts}
step={null}
tipFormatter={value => colCounts[value]}
/>
</div>
<Row gutter={[gutters[gutterKey], vgutters[vgutterKey]]}>
{cols}
{cols}
</Row>
Another Row:
<Row gutter={[gutters[gutterKey], vgutters[vgutterKey]]}>{cols}</Row>
<pre className="demo-code">{`<Row gutter={[${gutters[gutterKey]}, ${vgutters[vgutterKey]}]}>\n${colCode}\n${colCode}</Row>`}</pre>
<pre className="demo-code">{`<Row gutter={[${gutters[gutterKey]}, ${vgutters[vgutterKey]}]}>\n${colCode}</Row>`}</pre>
</>
const { gutterKey, vgutterKey, colCountKey } = state;
const cols = [];
const colCount = colCounts[colCountKey];
let colCode = '';
for (let i = 0; i < colCount; i++) {
cols.push(
<Col key={i.toString()} span={24 / colCount}>
<div>Column</div>
</Col>,
);
colCode += ` <Col span={${24 / colCount}} />\n`;
}
}
export default App;
return (
<>
<span>Horizontal Gutter (px): </span>
<div style={{ width: '50%' }}>
<Slider
min={0}
max={Object.keys(gutters).length - 1}
value={gutterKey}
onChange={onGutterChange}
marks={gutters}
step={null}
tipFormatter={value => gutters[value]}
/>
</div>
<span>Vertical Gutter (px): </span>
<div style={{ width: '50%' }}>
<Slider
min={0}
max={Object.keys(vgutters).length - 1}
value={vgutterKey}
onChange={onVGutterChange}
marks={vgutters}
step={null}
tipFormatter={value => vgutters[value]}
/>
</div>
<span>Column Count:</span>
<div style={{ width: '50%', marginBottom: 48 }}>
<Slider
min={0}
max={Object.keys(colCounts).length - 1}
value={colCountKey}
onChange={onColCountChange}
marks={colCounts}
step={null}
tipFormatter={value => colCounts[value]}
/>
</div>
<Row gutter={[gutters[gutterKey], vgutters[vgutterKey]]}>
{cols}
{cols}
</Row>
Another Row:
<Row gutter={[gutters[gutterKey], vgutters[vgutterKey]]}>{cols}</Row>
<pre className="demo-code">{`<Row gutter={[${gutters[gutterKey]}, ${vgutters[vgutterKey]}]}>\n${colCode}\n${colCode}</Row>`}</pre>
<pre className="demo-code">{`<Row gutter={[${gutters[gutterKey]}, ${vgutters[vgutterKey]}]}>\n${colCode}</Row>`}</pre>
</>
);
};
```
```css

40
components/input-number/demo/disabled.md
View File

@ -16,30 +16,22 @@ Click the button to toggle between available and disabled states.
```jsx
import { InputNumber, Button } from 'antd';
class App extends React.Component {
state = {
disabled: true,
export default () => {
const [disabled, setDisabled] = React.useState(true);
const toggle = () => {
setDisabled(!disabled);
};
toggle = () => {
this.setState({
disabled: !this.state.disabled,
});
};
render() {
return (
<>
<InputNumber min={1} max={10} disabled={this.state.disabled} defaultValue={3} />
<div style={{ marginTop: 20 }}>
<Button onClick={this.toggle} type="primary">
Toggle disabled
</Button>
</div>
</>
);
}
}
export default App;
return (
<>
<InputNumber min={1} max={10} disabled={disabled} defaultValue={3} />
<div style={{ marginTop: 20 }}>
<Button onClick={toggle} type="primary">
Toggle disabled
</Button>
</div>
</>
);
};
```

55
components/input/demo/autosize-textarea.md
View File

@ -18,37 +18,30 @@ import { Input } from 'antd';
const { TextArea } = Input;
class Demo extends React.Component {
state = {
value: '',
export default () => {
const [value, setValue] = React.useState();
// eslint-disable-next-line @typescript-eslint/no-shadow
const onChange = ({ target: { value } }) => {
setValue(value);
};
onChange = ({ target: { value } }) => {
this.setState({ value });
};
render() {
const { value } = this.state;
return (
<>
<TextArea placeholder="Autosize height based on content lines" autoSize />
<div style={{ margin: '24px 0' }} />
<TextArea
placeholder="Autosize height with minimum and maximum number of lines"
autoSize={{ minRows: 2, maxRows: 6 }}
/>
<div style={{ margin: '24px 0' }} />
<TextArea
value={value}
onChange={this.onChange}
placeholder="Controlled autosize"
autoSize={{ minRows: 3, maxRows: 5 }}
/>
</>
);
}
}
export default Demo;
return (
<>
<TextArea placeholder="Autosize height based on content lines" autoSize />
<div style={{ margin: '24px 0' }} />
<TextArea
placeholder="Autosize height with minimum and maximum number of lines"
autoSize={{ minRows: 2, maxRows: 6 }}
/>
<div style={{ margin: '24px 0' }} />
<TextArea
value={value}
onChange={onChange}
placeholder="Controlled autosize"
autoSize={{ minRows: 3, maxRows: 5 }}
/>
</>
);
};
```

35
components/input/demo/textarea-resize.md
View File

@ -22,28 +22,17 @@ const { TextArea } = Input;
const defaultValue =
'The autoSize property applies to textarea nodes, and only the height changes automatically. In addition, autoSize can be set to an object, specifying the minimum number of rows and the maximum number of rows. The autoSize property applies to textarea nodes, and only the height changes automatically. In addition, autoSize can be set to an object, specifying the minimum number of rows and the maximum number of rows.';
class Demo extends React.Component {
state = {
autoResize: false,
};
export default () => {
const [autoResize, setAutoResize] = React.useState(false);
render() {
const { autoResize } = this.state;
return (
<>
<Button
onClick={() => this.setState({ autoResize: !autoResize })}
style={{ marginBottom: 16 }}
>
Auto Resize: {String(autoResize)}
</Button>
<TextArea rows={4} autoSize={autoResize} defaultValue={defaultValue} />
<TextArea allowClear style={{ width: 93 }} />
</>
);
}
}
export default Demo;
return (
<>
<Button onClick={() => setAutoResize(!autoResize)} style={{ marginBottom: 16 }}>
Auto Resize: {String(autoResize)}
</Button>
<TextArea rows={4} autoSize={autoResize} defaultValue={defaultValue} />
<TextArea allowClear style={{ width: 93 }} />
</>
);
};
```

78
components/input/demo/tooltip.md
View File

@ -20,18 +20,19 @@ function formatNumber(value) {
return new Intl.NumberFormat().format(value);
}
class NumericInput extends React.Component {
onChange = e => {
const { value } = e.target;
const NumericInput = props => {
const { value, onBlur, onChange } = props;
const handleChange = e => {
const inputValue = e.target.value;
const reg = /^-?\d*(\.\d*)?$/;
if ((!isNaN(value) && reg.test(value)) || value === '' || value === '-') {
this.props.onChange(value);
if ((!isNaN(inputValue) && reg.test(inputValue)) || inputValue === '' || inputValue === '-') {
onChange(inputValue);
}
};
// '.' at the end or only '-' in the input box.
onBlur = () => {
const { value, onBlur, onChange } = this.props;
const handleBlur = () => {
let valueTemp = value;
if (value.charAt(value.length - 1) === '.' || value === '-') {
valueTemp = value.slice(0, -1);
@ -42,50 +43,33 @@ class NumericInput extends React.Component {
}
};
render() {
const { value } = this.props;
const title = value ? (
<span className="numeric-input-title">{value !== '-' ? formatNumber(value) : '-'}</span>
) : (
'Input a number'
);
return (
<Tooltip
trigger={['focus']}
title={title}
placement="topLeft"
overlayClassName="numeric-input"
>
<Input
{...this.props}
onChange={this.onChange}
onBlur={this.onBlur}
placeholder="Input a number"
maxLength={25}
/>
</Tooltip>
);
}
}
const title = value ? (
<span className="numeric-input-title">{value !== '-' ? formatNumber(value) : '-'}</span>
) : (
'Input a number'
);
return (
<Tooltip trigger={['focus']} title={title} placement="topLeft" overlayClassName="numeric-input">
<Input
{...props}
onChange={handleChange}
onBlur={handleBlur}
placeholder="Input a number"
maxLength={25}
/>
</Tooltip>
);
};
class NumericInputDemo extends React.Component {
constructor(props) {
super(props);
this.state = { value: '' };
}
export default () => {
const [value, setValue] = React.useState();
onChange = value => {
this.setState({ value });
const onChange = val => {
setValue(val);
};
render() {
return (
<NumericInput style={{ width: 120 }} value={this.state.value} onChange={this.onChange} />
);
}
}
export default () => <NumericInputDemo />;
return <NumericInput style={{ width: 120 }} value={value} onChange={onChange} />;
};
```
```css