mirror of
https://github.com/ant-design/ant-design.git
synced 2024-11-24 19:19:57 +08:00
🎬 improve input demo and test case (#22016)
This commit is contained in:
偏右
GitHub
parent
8dd8a19d6f
commit
339b785815
@ -570,64 +570,6 @@ exports[`renders ./components/input/demo/align.md correctly 1`] = `
|
||||
</span>
|
||||
</span>
|
||||
</div>
|
||||
<div
|
||||
class="ant-select ant-select-single ant-select-show-arrow"
|
||||
style="width:100px"
|
||||
>
|
||||
<div
|
||||
class="ant-select-selector"
|
||||
>
|
||||
<span
|
||||
class="ant-select-selection-search"
|
||||
>
|
||||
<input
|
||||
aria-activedescendant="undefined_list_0"
|
||||
aria-autocomplete="list"
|
||||
aria-controls="undefined_list"
|
||||
aria-haspopup="listbox"
|
||||
aria-owns="undefined_list"
|
||||
autocomplete="off"
|
||||
class="ant-select-selection-search-input"
|
||||
readonly=""
|
||||
role="combobox"
|
||||
style="opacity:0"
|
||||
value=""
|
||||
/>
|
||||
</span>
|
||||
<span
|
||||
class="ant-select-selection-item"
|
||||
>
|
||||
jack
|
||||
</span>
|
||||
</div>
|
||||
<span
|
||||
aria-hidden="true"
|
||||
class="ant-select-arrow"
|
||||
style="user-select:none;-webkit-user-select:none"
|
||||
unselectable="on"
|
||||
>
|
||||
<span
|
||||
aria-label="down"
|
||||
class="anticon anticon-down"
|
||||
role="img"
|
||||
>
|
||||
<svg
|
||||
aria-hidden="true"
|
||||
class=""
|
||||
data-icon="down"
|
||||
fill="currentColor"
|
||||
focusable="false"
|
||||
height="1em"
|
||||
viewBox="64 64 896 896"
|
||||
width="1em"
|
||||
>
|
||||
<path
|
||||
d="M884 256h-75c-5.1 0-9.9 2.5-12.9 6.6L512 654.2 227.9 262.6c-3-4.1-7.8-6.6-12.9-6.6h-75c-6.5 0-10.3 7.4-6.5 12.7l352.6 486.1c12.8 17.6 39 17.6 51.7 0l352.6-486.1c3.9-5.3.1-12.7-6.4-12.7z"
|
||||
/>
|
||||
</svg>
|
||||
</span>
|
||||
</span>
|
||||
</div>
|
||||
<div
|
||||
class="ant-select ant-tree-select ant-select-single ant-select-show-arrow"
|
||||
style="width:100px"
|
||||
@ -1534,6 +1476,7 @@ exports[`renders ./components/input/demo/group.md correctly 1`] = `
|
||||
>
|
||||
<div
|
||||
class="ant-select ant-select-single ant-select-show-arrow"
|
||||
style="width:30%"
|
||||
>
|
||||
<div
|
||||
class="ant-select-selector"
|
||||
@ -1591,7 +1534,7 @@ exports[`renders ./components/input/demo/group.md correctly 1`] = `
|
||||
</div>
|
||||
<div
|
||||
class="ant-select ant-select-auto-complete ant-select-single ant-select-show-search"
|
||||
style="width:200px"
|
||||
style="width:70%"
|
||||
>
|
||||
<div
|
||||
class="ant-select-selector"
|
||||
|
||||
@ -145,8 +145,8 @@ describe('TextArea', () => {
|
||||
|
||||
it('should trigger onResize', () => {
|
||||
const onResize = jest.fn();
|
||||
const wrapper = mount(<TextArea onResize={onResize} autosize />);
|
||||
|
||||
const wrapper = mount(<TextArea onResize={onResize} autoSize />);
|
||||
jest.runAllTimers();
|
||||
wrapper
|
||||
.find('ResizeObserver')
|
||||
.instance()
|
||||
|
||||
@ -83,7 +83,6 @@ ReactDOM.render(
|
||||
</Option>
|
||||
<Option value="Yiminghe">yiminghe</Option>
|
||||
</Select>
|
||||
<Select style={{ width: 100 }} combobox defaultValue="jack" />
|
||||
<TreeSelect style={{ width: 100 }} />
|
||||
<Cascader defaultValue={['zhejiang', 'hangzhou', 'xihu']} options={options} />
|
||||
<RangePicker />
|
||||
@ -93,9 +92,7 @@ ReactDOM.render(
|
||||
<RadioButton value="b">Shanghai</RadioButton>
|
||||
</RadioGroup>
|
||||
<AutoComplete style={{ width: 100 }} placeholder="input here" />
|
||||
|
||||
<br />
|
||||
|
||||
<Input prefix="$" addonBefore="Http://" addonAfter=".com" defaultValue="mysite" />
|
||||
</div>,
|
||||
mountNode,
|
||||
|
||||
@ -20,7 +20,6 @@ Note: You don't need `Col` to control the width in the `compact` mode.
|
||||
```jsx
|
||||
import { Input, Col, Row, Select, InputNumber, DatePicker, AutoComplete, Cascader } from 'antd';
|
||||
|
||||
const InputGroup = Input.Group;
|
||||
const { Option } = Select;
|
||||
|
||||
const options = [
|
||||
@ -58,125 +57,107 @@ const options = [
|
||||
},
|
||||
];
|
||||
|
||||
class CompactDemo extends React.Component {
|
||||
state = {
|
||||
dataSource: [],
|
||||
};
|
||||
const App = () => (
|
||||
<div className="site-input-group-wrapper">
|
||||
<Input.Group size="large">
|
||||
<Row gutter={8}>
|
||||
<Col span={5}>
|
||||
<Input defaultValue="0571" />
|
||||
</Col>
|
||||
<Col span={8}>
|
||||
<Input defaultValue="26888888" />
|
||||
</Col>
|
||||
</Row>
|
||||
</Input.Group>
|
||||
<br />
|
||||
<Input.Group compact>
|
||||
<Input style={{ width: '20%' }} defaultValue="0571" />
|
||||
<Input style={{ width: '30%' }} defaultValue="26888888" />
|
||||
</Input.Group>
|
||||
<br />
|
||||
<Input.Group compact>
|
||||
<Select defaultValue="Zhejiang">
|
||||
<Option value="Zhejiang">Zhejiang</Option>
|
||||
<Option value="Jiangsu">Jiangsu</Option>
|
||||
</Select>
|
||||
<Input style={{ width: '50%' }} defaultValue="Xihu District, Hangzhou" />
|
||||
</Input.Group>
|
||||
<br />
|
||||
<Input.Group compact>
|
||||
<Select defaultValue="Option1">
|
||||
<Option value="Option1">Option1</Option>
|
||||
<Option value="Option2">Option2</Option>
|
||||
</Select>
|
||||
<Input style={{ width: '50%' }} defaultValue="input content" />
|
||||
<InputNumber />
|
||||
</Input.Group>
|
||||
<br />
|
||||
<Input.Group compact>
|
||||
<Input style={{ width: '50%' }} defaultValue="input content" />
|
||||
<DatePicker style={{ width: '50%' }} />
|
||||
</Input.Group>
|
||||
<br />
|
||||
<Input.Group compact>
|
||||
<Select defaultValue="Option1-1">
|
||||
<Option value="Option1-1">Option1-1</Option>
|
||||
<Option value="Option1-2">Option1-2</Option>
|
||||
</Select>
|
||||
<Select defaultValue="Option2-2">
|
||||
<Option value="Option2-1">Option2-1</Option>
|
||||
<Option value="Option2-2">Option2-2</Option>
|
||||
</Select>
|
||||
</Input.Group>
|
||||
<br />
|
||||
<Input.Group compact>
|
||||
<Select defaultValue="1">
|
||||
<Option value="1">Between</Option>
|
||||
<Option value="2">Except</Option>
|
||||
</Select>
|
||||
<Input style={{ width: 100, textAlign: 'center' }} placeholder="Minimum" />
|
||||
<Input
|
||||
className="site-input-split"
|
||||
style={{
|
||||
width: 30,
|
||||
borderLeft: 0,
|
||||
borderRight: 0,
|
||||
pointerEvents: 'none',
|
||||
}}
|
||||
placeholder="~"
|
||||
disabled
|
||||
/>
|
||||
<Input
|
||||
className="site-input-right"
|
||||
style={{
|
||||
width: 100,
|
||||
textAlign: 'center',
|
||||
}}
|
||||
placeholder="Maximum"
|
||||
/>
|
||||
</Input.Group>
|
||||
<br />
|
||||
<Input.Group compact>
|
||||
<Select defaultValue="Sign Up" style={{ width: '30%' }}>
|
||||
<Option value="Sign Up">Sign Up</Option>
|
||||
<Option value="Sign In">Sign In</Option>
|
||||
</Select>
|
||||
<AutoComplete
|
||||
style={{ width: '70%' }}
|
||||
placeholder="Email"
|
||||
options={[{ value: 'text 1' }, { value: 'text 2' }]}
|
||||
/>
|
||||
</Input.Group>
|
||||
<br />
|
||||
<Input.Group compact>
|
||||
<Select style={{ width: '30%' }} defaultValue="Home">
|
||||
<Option value="Home">Home</Option>
|
||||
<Option value="Company">Company</Option>
|
||||
</Select>
|
||||
<Cascader style={{ width: '70%' }} options={options} placeholder="Select Address" />
|
||||
</Input.Group>
|
||||
</div>
|
||||
);
|
||||
|
||||
handleChange = value => {
|
||||
this.setState({
|
||||
dataSource:
|
||||
!value || value.indexOf('@') >= 0
|
||||
? []
|
||||
: [`${value}@gmail.com`, `${value}@163.com`, `${value}@qq.com`],
|
||||
});
|
||||
};
|
||||
|
||||
render() {
|
||||
return (
|
||||
<div className="site-input-group-wrapper">
|
||||
<InputGroup size="large">
|
||||
<Row gutter={8}>
|
||||
<Col span={5}>
|
||||
<Input defaultValue="0571" />
|
||||
</Col>
|
||||
<Col span={8}>
|
||||
<Input defaultValue="26888888" />
|
||||
</Col>
|
||||
</Row>
|
||||
</InputGroup>
|
||||
<br />
|
||||
<InputGroup compact>
|
||||
<Input style={{ width: '20%' }} defaultValue="0571" />
|
||||
<Input style={{ width: '30%' }} defaultValue="26888888" />
|
||||
</InputGroup>
|
||||
<br />
|
||||
<InputGroup compact>
|
||||
<Select defaultValue="Zhejiang">
|
||||
<Option value="Zhejiang">Zhejiang</Option>
|
||||
<Option value="Jiangsu">Jiangsu</Option>
|
||||
</Select>
|
||||
<Input style={{ width: '50%' }} defaultValue="Xihu District, Hangzhou" />
|
||||
</InputGroup>
|
||||
<br />
|
||||
<InputGroup compact>
|
||||
<Select defaultValue="Option1">
|
||||
<Option value="Option1">Option1</Option>
|
||||
<Option value="Option2">Option2</Option>
|
||||
</Select>
|
||||
<Input style={{ width: '50%' }} defaultValue="input content" />
|
||||
<InputNumber />
|
||||
</InputGroup>
|
||||
<br />
|
||||
<InputGroup compact>
|
||||
<Input style={{ width: '50%' }} defaultValue="input content" />
|
||||
<DatePicker style={{ width: '50%' }} />
|
||||
</InputGroup>
|
||||
<br />
|
||||
<InputGroup compact>
|
||||
<Select defaultValue="Option1-1">
|
||||
<Option value="Option1-1">Option1-1</Option>
|
||||
<Option value="Option1-2">Option1-2</Option>
|
||||
</Select>
|
||||
<Select defaultValue="Option2-2">
|
||||
<Option value="Option2-1">Option2-1</Option>
|
||||
<Option value="Option2-2">Option2-2</Option>
|
||||
</Select>
|
||||
</InputGroup>
|
||||
<br />
|
||||
<InputGroup compact>
|
||||
<Select defaultValue="1">
|
||||
<Option value="1">Between</Option>
|
||||
<Option value="2">Except</Option>
|
||||
</Select>
|
||||
<Input style={{ width: 100, textAlign: 'center' }} placeholder="Minimum" />
|
||||
<Input
|
||||
className="site-input-split"
|
||||
style={{
|
||||
width: 30,
|
||||
borderLeft: 0,
|
||||
borderRight: 0,
|
||||
pointerEvents: 'none',
|
||||
}}
|
||||
placeholder="~"
|
||||
disabled
|
||||
/>
|
||||
<Input
|
||||
className="site-input-right"
|
||||
style={{
|
||||
width: 100,
|
||||
textAlign: 'center',
|
||||
}}
|
||||
placeholder="Maximum"
|
||||
/>
|
||||
</InputGroup>
|
||||
<br />
|
||||
<InputGroup compact>
|
||||
<Select defaultValue="Sign Up">
|
||||
<Option value="Sign Up">Sign Up</Option>
|
||||
<Option value="Sign In">Sign In</Option>
|
||||
</Select>
|
||||
<AutoComplete
|
||||
dataSource={this.state.dataSource}
|
||||
style={{ width: 200 }}
|
||||
onChange={this.handleChange}
|
||||
placeholder="Email"
|
||||
/>
|
||||
</InputGroup>
|
||||
<br />
|
||||
<InputGroup compact>
|
||||
<Select style={{ width: '30%' }} defaultValue="Home">
|
||||
<Option value="Home">Home</Option>
|
||||
<Option value="Company">Company</Option>
|
||||
</Select>
|
||||
<Cascader style={{ width: '70%' }} options={options} placeholder="Select Address" />
|
||||
</InputGroup>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
ReactDOM.render(<CompactDemo />, mountNode);
|
||||
ReactDOM.render(<App />, mountNode);
|
||||
```
|
||||
|
||||
```css
|
||||
|
||||
Loading…
Reference in New Issue
Block a user