mirror/ant-design
1
0
Fork 0
mirror of https://github.com/ant-design/ant-design.git synced 2024-11-24 02:59:58 +08:00
Code Issues Actions 5 Packages Projects Releases Wiki Activity

Fix form input shaking (#23924)

Browse Source
This commit is contained in:
Amumu 2020-05-07 11:31:24 +08:00 committed by GitHub
parent 30c702b34b
commit fa899ff64f
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
3 changed files with 191 additions and 1 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
components/form/FormItem.tsx
View File

@ -257,7 +257,7 @@ export default class FormItem extends React.Component<FormItemProps, any> {
let classes = `${prefixCls}-item-control`;
if (validateStatus) {
classes = classNames(`${prefixCls}-item-control`, {
'has-feedback': props.hasFeedback || validateStatus === 'validating',
'has-feedback': validateStatus && props.hasFeedback,
'has-success': validateStatus === 'success',
'has-warning': validateStatus === 'warning',
'has-error': validateStatus === 'error',

158
components/form/__tests__/__snapshots__/index.test.js.snap
View File

@ -26,3 +26,161 @@ exports[`Form Form.Item should support data-*、aria-* and custom attribute 1`]
</div>
</form>
`;
exports[`Form FormItem FormItem: generate snapshot when validates fields 1`] = `
<form
class="ant-form ant-form-horizontal"
>
<div
class="ant-row ant-form-item"
>
<div
class="ant-col ant-form-item-control-wrapper"
>
<div
class="ant-form-item-control"
>
<span
class="ant-form-item-children"
>
<span
class="ant-input-affix-wrapper"
>
<input
class="ant-input"
data-__field="[object Object]"
data-__meta="[object Object]"
id="test"
type="text"
value=""
/>
<span
class="ant-input-suffix"
/>
</span>
</span>
</div>
</div>
</div>
</form>
`;
exports[`Form FormItem FormItem: generate snapshot when validates fields 2`] = `
<form
class="ant-form ant-form-horizontal"
>
<div
class="ant-row ant-form-item"
>
<div
class="ant-col ant-form-item-control-wrapper"
>
<div
class="ant-form-item-control is-validating"
>
<span
class="ant-form-item-children"
>
<span
class="ant-input-affix-wrapper"
>
<input
class="ant-input"
data-__field="[object Object]"
data-__meta="[object Object]"
id="test"
type="text"
value="test"
/>
<span
class="ant-input-suffix"
>
<i
aria-label="icon: close-circle"
class="anticon anticon-close-circle ant-input-clear-icon"
role="button"
tabindex="-1"
>
<svg
aria-hidden="true"
class=""
data-icon="close-circle"
fill="currentColor"
focusable="false"
height="1em"
viewBox="64 64 896 896"
width="1em"
>
<path
d="M512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm165.4 618.2l-66-.3L512 563.4l-99.3 118.4-66.1.3c-4.4 0-8-3.5-8-8 0-1.9.7-3.7 1.9-5.2l130.1-155L340.5 359a8.32 8.32 0 0 1-1.9-5.2c0-4.4 3.6-8 8-8l66.1.3L512 464.6l99.3-118.4 66-.3c4.4 0 8 3.5 8 8 0 1.9-.7 3.7-1.9 5.2L553.5 514l130 155c1.2 1.5 1.9 3.3 1.9 5.2 0 4.4-3.6 8-8 8z"
/>
</svg>
</i>
</span>
</span>
</span>
</div>
</div>
</div>
</form>
`;
exports[`Form FormItem FormItem: generate snapshot when validates fields 3`] = `
<form
class="ant-form ant-form-horizontal"
>
<div
class="ant-row ant-form-item"
>
<div
class="ant-col ant-form-item-control-wrapper"
>
<div
class="ant-form-item-control has-success"
>
<span
class="ant-form-item-children"
>
<span
class="ant-input-affix-wrapper"
>
<input
class="ant-input"
data-__field="[object Object]"
data-__meta="[object Object]"
id="test"
type="text"
value="test"
/>
<span
class="ant-input-suffix"
>
<i
aria-label="icon: close-circle"
class="anticon anticon-close-circle ant-input-clear-icon"
role="button"
tabindex="-1"
>
<svg
aria-hidden="true"
class=""
data-icon="close-circle"
fill="currentColor"
focusable="false"
height="1em"
viewBox="64 64 896 896"
width="1em"
>
<path
d="M512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm165.4 618.2l-66-.3L512 563.4l-99.3 118.4-66.1.3c-4.4 0-8-3.5-8-8 0-1.9.7-3.7 1.9-5.2l130.1-155L340.5 359a8.32 8.32 0 0 1-1.9-5.2c0-4.4 3.6-8 8-8l66.1.3L512 464.6l99.3-118.4 66-.3c4.4 0 8 3.5 8 8 0 1.9-.7 3.7-1.9 5.2L553.5 514l130 155c1.2 1.5 1.9 3.3 1.9 5.2 0 4.4-3.6 8-8 8z"
/>
</svg>
</i>
</span>
</span>
</span>
</div>
</div>
</div>
</form>
`;

32
components/form/__tests__/index.test.js
View File

@ -2,6 +2,7 @@
import React from 'react';
import { mount, render } from 'enzyme';
import Form from '..';
import Input from '../../input';
import mountTest from '../../../tests/shared/mountTest';
import './type.test';
@ -58,4 +59,35 @@ describe('Form', () => {
expect(form).toBeInstanceOf(TestForm);
});
});
describe('FormItem', () => {
it('FormItem: generate snapshot when validates fields', async done => {
let wrapper;
const TestForm = props => (
<Form>
<Form.Item>
{props.form.getFieldDecorator('test', {
rules: [
{
validator: (rule, value, callback) => {
setTimeout(() => {
callback();
expect(wrapper.render()).toMatchSnapshot(); // after validate
done();
}, 100);
},
},
],
})(<Input allowClear />)}
</Form.Item>
</Form>
);
const Wrapped = Form.create()(TestForm);
wrapper = mount(<Wrapped />);
expect(wrapper.render()).toMatchSnapshot(); // before validate
wrapper.find('.ant-input').simulate('change', { target: { value: 'test' } });
await new Promise(resolve => setTimeout(resolve, 0));
expect(wrapper.render()).toMatchSnapshot(); // validating
});
});
});