mirror/ant-design
1
0
Fork 0
mirror of https://github.com/ant-design/ant-design.git synced 2025-06-07 09:26:06 +08:00
Code Issues Actions 18 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; const { Option } = Select;
class DrawerForm extends React.Component { export default () => {
state = { visible: false }; const [visible, setVisible] = React.useState(false);
showDrawer = () => { const showDrawer = () => {
this.setState({ setVisible(true);
visible: true,
});
}; };
onClose = () => { const onClose = () => {
this.setState({ setVisible(false);
visible: false,
});
}; };
render() { return (
return ( <>
<> <Button type="primary" onClick={showDrawer} icon={<PlusOutlined />}>
<Button type="primary" onClick={this.showDrawer} icon={<PlusOutlined />}> New account
New account </Button>
</Button> <Drawer
<Drawer title="Create a new account"
title="Create a new account" width={720}
width={720} onClose={onClose}
onClose={this.onClose} visible={visible}
visible={this.state.visible} bodyStyle={{ paddingBottom: 80 }}
bodyStyle={{ paddingBottom: 80 }} extra={
extra={ <Space>
<Space> <Button onClick={onClose}>Cancel</Button>
<Button onClick={this.onClose}>Cancel</Button> <Button onClick={onClose} type="primary">
<Button onClick={this.onClose} type="primary"> Submit
Submit </Button>
</Button> </Space>
</Space> }
} >
> <Form layout="vertical" hideRequiredMark>
<Form layout="vertical" hideRequiredMark> <Row gutter={16}>
<Row gutter={16}> <Col span={12}>
<Col span={12}> <Form.Item
<Form.Item name="name"
name="name" label="Name"
label="Name" rules={[{ required: true, message: 'Please enter user name' }]}
rules={[{ required: true, message: 'Please enter user name' }]} >
> <Input placeholder="Please enter user name" />
<Input placeholder="Please enter user name" /> </Form.Item>
</Form.Item> </Col>
</Col> <Col span={12}>
<Col span={12}> <Form.Item
<Form.Item name="url"
name="url" label="Url"
label="Url" rules={[{ required: true, message: 'Please enter url' }]}
rules={[{ required: true, message: 'Please enter url' }]} >
> <Input
<Input style={{ width: '100%' }}
style={{ width: '100%' }} addonBefore="http://"
addonBefore="http://" addonAfter=".com"
addonAfter=".com" placeholder="Please enter url"
placeholder="Please enter url" />
/> </Form.Item>
</Form.Item> </Col>
</Col> </Row>
</Row> <Row gutter={16}>
<Row gutter={16}> <Col span={12}>
<Col span={12}> <Form.Item
<Form.Item name="owner"
name="owner" label="Owner"
label="Owner" rules={[{ required: true, message: 'Please select an owner' }]}
rules={[{ required: true, message: 'Please select an owner' }]} >
> <Select placeholder="Please select an owner">
<Select placeholder="Please select an owner"> <Option value="xiao">Xiaoxiao Fu</Option>
<Option value="xiao">Xiaoxiao Fu</Option> <Option value="mao">Maomao Zhou</Option>
<Option value="mao">Maomao Zhou</Option> </Select>
</Select> </Form.Item>
</Form.Item> </Col>
</Col> <Col span={12}>
<Col span={12}> <Form.Item
<Form.Item name="type"
name="type" label="Type"
label="Type" rules={[{ required: true, message: 'Please choose the type' }]}
rules={[{ required: true, message: 'Please choose the type' }]} >
> <Select placeholder="Please choose the type">
<Select placeholder="Please choose the type"> <Option value="private">Private</Option>
<Option value="private">Private</Option> <Option value="public">Public</Option>
<Option value="public">Public</Option> </Select>
</Select> </Form.Item>
</Form.Item> </Col>
</Col> </Row>
</Row> <Row gutter={16}>
<Row gutter={16}> <Col span={12}>
<Col span={12}> <Form.Item
<Form.Item name="approver"
name="approver" label="Approver"
label="Approver" rules={[{ required: true, message: 'Please choose the approver' }]}
rules={[{ required: true, message: 'Please choose the approver' }]} >
> <Select placeholder="Please choose the approver">
<Select placeholder="Please choose the approver"> <Option value="jack">Jack Ma</Option>
<Option value="jack">Jack Ma</Option> <Option value="tom">Tom Liu</Option>
<Option value="tom">Tom Liu</Option> </Select>
</Select> </Form.Item>
</Form.Item> </Col>
</Col> <Col span={12}>
<Col span={12}> <Form.Item
<Form.Item name="dateTime"
name="dateTime" label="DateTime"
label="DateTime" rules={[{ required: true, message: 'Please choose the dateTime' }]}
rules={[{ required: true, message: 'Please choose the dateTime' }]} >
> <DatePicker.RangePicker
<DatePicker.RangePicker style={{ width: '100%' }}
style={{ width: '100%' }} getPopupContainer={trigger => trigger.parentElement}
getPopupContainer={trigger => trigger.parentElement} />
/> </Form.Item>
</Form.Item> </Col>
</Col> </Row>
</Row> <Row gutter={16}>
<Row gutter={16}> <Col span={24}>
<Col span={24}> <Form.Item
<Form.Item name="description"
name="description" label="Description"
label="Description" rules={[
rules={[ {
{ required: true,
required: true, message: 'please enter url description',
message: 'please enter url description', },
}, ]}
]} >
> <Input.TextArea rows={4} placeholder="please enter url description" />
<Input.TextArea rows={4} placeholder="please enter url description" /> </Form.Item>
</Form.Item> </Col>
</Col> </Row>
</Row> </Form>
</Form> </Drawer>
</Drawer> </>
</> );
); };
}
}
export default () => <DrawerForm />;
``` ```
```css ```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 ```jsx
import { Drawer, Button } from 'antd'; import { Drawer, Button } from 'antd';
class App extends React.Component { export default () => {
state = { visible: false, childrenDrawer: false }; const [visible, setVisible] = React.useState(false);
const [childrenDrawer, setChildrenDrawer] = React.useState(false);
showDrawer = () => { const showDrawer = () => {
this.setState({ setVisible(true);
visible: true,
});
}; };
onClose = () => { const onClose = () => {
this.setState({ setVisible(false);
visible: false,
});
}; };
showChildrenDrawer = () => { const showChildrenDrawer = () => {
this.setState({ setChildrenDrawer(true);
childrenDrawer: true,
});
}; };
onChildrenDrawerClose = () => { const onChildrenDrawerClose = () => {
this.setState({ setChildrenDrawer(false);
childrenDrawer: false,
});
}; };
render() { return (
return ( <>
<> <Button type="primary" onClick={showDrawer}>
<Button type="primary" onClick={this.showDrawer}> Open drawer
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> </Button>
<Drawer <Drawer
title="Multi-level drawer" title="Two-level Drawer"
width={520} width={320}
closable={false} closable={false}
onClose={this.onClose} onClose={onChildrenDrawerClose}
visible={this.state.visible} visible={childrenDrawer}
> >
<Button type="primary" onClick={this.showChildrenDrawer}> This is two-level drawer
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>
</Drawer> </Drawer>
</> </Drawer>
); </>
} );
} };
export default App;
``` ```
<style> <style>

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

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

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

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

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

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

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

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

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 { Menu, Dropdown, Space } from 'antd';
import { DownOutlined } from '@ant-design/icons'; import { DownOutlined } from '@ant-design/icons';
class OverlayVisible extends React.Component { export default () => {
state = { const [visible, setVisible] = React.useState(false);
visible: false,
};
handleMenuClick = e => { const handleMenuClick = e => {
if (e.key === '3') { if (e.key === '3') {
this.setState({ visible: false }); setVisible(false);
} }
}; };
handleVisibleChange = flag => { const handleVisibleChange = flag => {
this.setState({ visible: flag }); setVisible(flag);
}; };
render() { const menu = (
const menu = ( <Menu
<Menu onClick={handleMenuClick}
onClick={this.handleMenuClick} items={[
items={[ {
{ label: 'Clicking me will not close the menu.',
label: 'Clicking me will not close the menu.', key: '1',
key: '1', },
}, {
{ label: 'Clicking me will not close the menu also.',
label: 'Clicking me will not close the menu also.', key: '2',
key: '2', },
}, {
{ label: 'Clicking me will close the menu.',
label: 'Clicking me will close the menu.', key: '3',
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>
);
}
}
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 }; const style = { width: 200 };
class Demo extends React.Component { export default () => {
state = { const [customize, setCustomize] = React.useState(false);
customize: false,
};
render() { return (
const { customize } = this.state; <div>
return ( <Switch
<div> unCheckedChildren="default"
<Switch checkedChildren="customize"
unCheckedChildren="default" checked={customize}
checkedChildren="customize" onChange={value => {
checked={customize} setCustomize(value);
onChange={val => { }}
this.setState({ customize: val }); />
}}
/>
<Divider /> <Divider />
<ConfigProvider renderEmpty={customize && customizeRenderEmpty}> <ConfigProvider renderEmpty={customize && customizeRenderEmpty}>
<div className="config-provider"> <div className="config-provider">
<h4>Select</h4> <h4>Select</h4>
<Select style={style} /> <Select style={style} />
<h4>TreeSelect</h4> <h4>TreeSelect</h4>
<TreeSelect style={style} treeData={[]} /> <TreeSelect style={style} treeData={[]} />
<h4>Cascader</h4> <h4>Cascader</h4>
<Cascader style={style} options={[]} showSearch /> <Cascader style={style} options={[]} showSearch />
<h4>Transfer</h4> <h4>Transfer</h4>
<Transfer /> <Transfer />
<h4>Table</h4> <h4>Table</h4>
<Table <Table
style={{ marginTop: 8 }} style={{ marginTop: 8 }}
columns={[ columns={[
{ {
title: 'Name', title: 'Name',
dataIndex: 'name', dataIndex: 'name',
key: 'name', key: 'name',
}, },
{ {
title: 'Age', title: 'Age',
dataIndex: 'age', dataIndex: 'age',
key: 'age', key: 'age',
}, },
]} ]}
/> />
<h4>List</h4> <h4>List</h4>
<List /> <List />
</div> </div>
</ConfigProvider> </ConfigProvider>
</div> </div>
); );
} };
}
export default Demo;
``` ```
<style> <style>

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

@ -30,90 +30,87 @@ const colCounts = {};
colCounts[i] = value; colCounts[i] = value;
}); });
class App extends React.Component { export default () => {
state = { const [state, setState] = React.useState({
gutterKey: 1, gutterKey: 1,
vgutterKey: 1, vgutterKey: 1,
colCountKey: 2, colCountKey: 2,
});
const onGutterChange = gutterKey => {
setState({ ...state, gutterKey });
}; };
onGutterChange = gutterKey => { const onVGutterChange = vgutterKey => {
this.setState({ gutterKey }); setState({ ...state, vgutterKey });
}; };
onVGutterChange = vgutterKey => { const onColCountChange = colCountKey => {
this.setState({ vgutterKey }); setState({ ...state, colCountKey });
}; };
onColCountChange = colCountKey => { const { gutterKey, vgutterKey, colCountKey } = state;
this.setState({ colCountKey }); const cols = [];
}; const colCount = colCounts[colCountKey];
let colCode = '';
render() { for (let i = 0; i < colCount; i++) {
const { gutterKey, vgutterKey, colCountKey } = this.state; cols.push(
const cols = []; <Col key={i.toString()} span={24 / colCount}>
const colCount = colCounts[colCountKey]; <div>Column</div>
let colCode = ''; </Col>,
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>
</>
); );
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 ```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 ```jsx
import { InputNumber, Button } from 'antd'; import { InputNumber, Button } from 'antd';
class App extends React.Component { export default () => {
state = { const [disabled, setDisabled] = React.useState(true);
disabled: true,
const toggle = () => {
setDisabled(!disabled);
}; };
toggle = () => { return (
this.setState({ <>
disabled: !this.state.disabled, <InputNumber min={1} max={10} disabled={disabled} defaultValue={3} />
}); <div style={{ marginTop: 20 }}>
}; <Button onClick={toggle} type="primary">
Toggle disabled
render() { </Button>
return ( </div>
<> </>
<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;
``` ```

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

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

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

@ -22,28 +22,17 @@ const { TextArea } = Input;
const defaultValue = 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.'; '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 { export default () => {
state = { const [autoResize, setAutoResize] = React.useState(false);
autoResize: false,
};
render() { return (
const { autoResize } = this.state; <>
<Button onClick={() => setAutoResize(!autoResize)} style={{ marginBottom: 16 }}>
return ( Auto Resize: {String(autoResize)}
<> </Button>
<Button <TextArea rows={4} autoSize={autoResize} defaultValue={defaultValue} />
onClick={() => this.setState({ autoResize: !autoResize })} <TextArea allowClear style={{ width: 93 }} />
style={{ marginBottom: 16 }} </>
> );
Auto Resize: {String(autoResize)} };
</Button>
<TextArea rows={4} autoSize={autoResize} defaultValue={defaultValue} />
<TextArea allowClear style={{ width: 93 }} />
</>
);
}
}
export default Demo;
``` ```

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

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