GitHub
/
ant-design
6
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity
Browse Source

🎬 improve input demo and test case (#22016)

pull/22018/head
偏右 5 years ago
committed by GitHub
parent
8dd8a19d6f
commit
339b785815
No known key found for this signature in database GPG Key ID: 4AEE18F83AFDEB23
4 changed files with 105 additions and 184 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 61
      components/input/__tests__/__snapshots__/demo.test.js.snap
  2. 4
      components/input/__tests__/textarea.test.js
  3. 3
      components/input/demo/align.md
  4. 221
      components/input/demo/group.md

61
components/input/__tests__/__snapshots__/demo.test.js.snap
View File

@ -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"

4
components/input/__tests__/textarea.test.js
View File

@ -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()

3
components/input/demo/align.md
View File

@ -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,

221
components/input/demo/group.md
View File

@ -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: [],
};
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);
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>
);
ReactDOM.render(<App />, mountNode);
```
```css

Write Preview
Loading…
Cancel
Save