cr exxx to nxxx

Author: tangjinzhou

components/empty/__tests__/__snapshots__/demo.test.js.snap

@@ -92,12 +92,7 @@ exports[`renders ./components/empty/demo/config-provider.md correctly 1`] = `
     <div class="ant-list ant-list-split">
       <div class="ant-spin-nested-loading">
         <div class="ant-spin-container">
-          <div class="ant-list-empty-text">
-            <div class="ant-empty ant-empty-normal">
-              <div class="ant-empty-image"><img alt="No Data" src=""></div>
-              <p class="ant-empty-description">No Data</p>
-            </div>
-          </div>
+          <div class="ant-list-empty-text"></div>
         </div>
       </div>
     </div>

components/form/FormItem.jsx

@@ -1,4 +1,3 @@
-import intersperse from 'intersperse';
 import PropTypes from '../_util/vue-types';
 import classNames from 'classnames';
 import find from 'lodash/find';
@@ -21,6 +20,10 @@ import Icon from '../icon';
 import { ConfigConsumerProps } from '../config-provider';
 
 function noop() {}
+
+function intersperseSpace(list) {
+  return list.reduce((current, item) => [...current, ' ', item], []).slice(1);
+}
 export const FormItemProps = {
   id: PropTypes.string,
   prefixCls: PropTypes.string,
@@ -59,7 +62,6 @@ export default {
   mixins: [BaseMixin],
   props: initDefaultProps(FormItemProps, {
     hasFeedback: false,
-    prefixCls: 'ant-form',
     colon: true,
   }),
   inject: {
@@ -83,8 +85,10 @@ export default {
     this.collectFormItemContext(this.$vnode.context, 'delete');
   },
   mounted() {
+    const { help, validateStatus } = this.$props;
     warning(
-      this.getControls(this.slotDefault, true).length <= 1,
+      this.getControls(this.slotDefault, true).length <= 1 ||
+        (help !== undefined || validateStatus !== undefined),
       '`Form.Item` cannot generate `validateStatus` and `help` automatically, ' +
         'while there are more than one `getFieldDecorator` in it.',
     );
@@ -118,13 +122,16 @@ export default {
       if (help === undefined && onlyControl) {
         const errors = this.getField().errors;
         if (errors) {
-          return intersperse(
+          return intersperseSpace(
             errors.map((e, index) => {
-              return isValidElement(e.message)
-                ? cloneElement(e.message, { key: index })
-                : e.message;
+              let node = null;
+              if (isValidElement(e)) {
+                node = e;
+              } else if (isValidElement(e.message)) {
+                node = e.message;
+              }
+              return node ? cloneElement(node, { key: index }) : e.message;
             }),
-            ' ',
           );
         } else {
           return '';
@@ -339,15 +346,15 @@ export default {
       if (!id) {
         return;
       }
-      const controls = document.querySelectorAll(`[id="${id}"]`);
-      if (controls.length !== 1) {
+      const formItemNode = this.$el;
+      const control = formItemNode.querySelector(`[id="${id}"]`);
+      if (control) {
         // Only prevent in default situation
         // Avoid preventing event in `label={<a href="xx">link</a>}``
         if (typeof label === 'string') {
           e.preventDefault();
         }
-        const control = this.$el.querySelector(`[id="${id}"]`);
-        if (control && control.focus) {
+        if (control.focus) {
           control.focus();
         }
       }

components/form/__tests__/label.test.js

@@ -3,6 +3,26 @@ import Form from '..';
 import { asyncExpect } from '@/tests/utils';
 
 describe('Form', () => {
+  // Mock of `querySelector`
+  const originQuerySelector = HTMLElement.prototype.querySelector;
+  HTMLElement.prototype.querySelector = function querySelector(str) {
+    const match = str.match(/^\[id=('|")(.*)('|")]$/);
+    const id = match && match[2];
+
+    // Use origin logic
+    if (id) {
+      const [input] = this.getElementsByTagName('input');
+      if (input && input.id === id) {
+        return input;
+      }
+    }
+
+    return originQuerySelector.call(this, str);
+  };
+
+  afterAll(() => {
+    HTMLElement.prototype.querySelector = originQuerySelector;
+  });
   it('should remove duplicated user input colon', () => {
     const wrapper = mount({
       render() {

components/input/Group.jsx

@@ -1,12 +1,11 @@
+import PropTypes from '../_util/vue-types';
 import { filterEmpty } from '../_util/props-util';
 import { ConfigConsumerProps } from '../config-provider';
 
 export default {
   name: 'AInputGroup',
   props: {
-    prefixCls: {
-      type: String,
-    },
+    prefixCls: PropTypes.string,
     size: {
       validator(value) {
         return ['small', 'large', 'default'].includes(value);

components/input/Input.jsx

@@ -38,12 +38,12 @@ export default {
   data() {
     const { value, defaultValue } = this.$props;
     return {
-      stateValue: fixControlledValue(!hasProp(this, 'value') ? defaultValue : value),
+      stateValue: !hasProp(this, 'value') ? defaultValue : value,
     };
   },
   watch: {
     value(val) {
-      this.stateValue = fixControlledValue(val);
+      this.stateValue = val;
     },
   },
   mounted() {
@@ -95,6 +95,21 @@ export default {
       if (!e.target.composing) {
         this.$emit('change.value', value);
       }
+      let event = e;
+      if (e.type === 'click' && this.$refs.input) {
+        // click clear icon
+        event = { ...e };
+        event.target = this.$refs.input;
+        event.currentTarget = this.$refs.input;
+        const originalInputValue = this.$refs.input.value;
+        // change input value cause e.target.value should be '' when clear input
+        this.$refs.input.value = '';
+        this.$emit('change', event);
+        this.$emit('input', event);
+        // reset input value
+        this.$refs.input.value = originalInputValue;
+        return;
+      }
       this.$emit('change', e);
       this.$emit('input', e);
     },
@@ -129,7 +144,7 @@ export default {
       let suffix = getComponentFromProp(this, 'suffix');
       if (suffix || allowClear) {
         return (
-          <span class={`${prefixCls}-suffix`}>
+          <span class={`${prefixCls}-suffix`} key="suffix">
             {this.renderClearIcon(prefixCls)}
             {suffix}
           </span>
@@ -179,14 +194,18 @@ export default {
         return children;
       }
       let prefix = getComponentFromProp(this, 'prefix');
-      prefix = prefix ? <span class={`${prefixCls}-prefix`}>{prefix}</span> : null;
+      prefix = prefix ? (
+        <span class={`${prefixCls}-prefix`} key="prefix">
+          {prefix}
+        </span>
+      ) : null;
 
       const affixWrapperCls = classNames(`${prefixCls}-affix-wrapper`, {
         [`${prefixCls}-affix-wrapper-sm`]: size === 'small',
         [`${prefixCls}-affix-wrapper-lg`]: size === 'large',
       });
       return (
-        <span class={affixWrapperCls}>
+        <span class={affixWrapperCls} key="affix">
           {prefix}
           {children}
           {suffix}
@@ -201,13 +220,14 @@ export default {
         'addonAfter',
         'prefix',
         'suffix',
+        'allowClear',
         'value',
         'defaultValue',
       ]);
       const { stateValue, getInputClassName, handleKeyDown, handleChange, $listeners } = this;
       const inputProps = {
         domProps: {
-          value: stateValue,
+          value: fixControlledValue(stateValue),
         },
         attrs: { ...otherProps, ...this.$attrs },
         on: {
@@ -218,6 +238,7 @@ export default {
         },
         class: getInputClassName(prefixCls),
         ref: 'input',
+        key: 'ant-input',
       };
       if ($listeners['change.value']) {
         inputProps.directives = [{ name: 'ant-input' }];

components/input/Password.js

@@ -2,9 +2,6 @@ import classNames from 'classnames';
 import Input from './Input';
 import Icon from '../icon';
 import inputProps from './inputProps';
-import Button from '../button';
-import { cloneElement } from '../_util/vnode';
-import { getOptionProps, getComponentFromProp, isValidElement } from '../_util/props-util';
 import PropTypes from '../_util/vue-types';
 import BaseMixin from '../_util/BaseMixin';
 
@@ -47,7 +44,7 @@ export default {
         },
         on: {
           [iconTrigger]: this.onChange,
-          onMouseDown: e => {
+          mousedown: e => {
             // Prevent focused state lost
             // https://github.com/ant-design/ant-design/issues/15173
             e.preventDefault();

components/input/Search.jsx

@@ -17,14 +17,6 @@ export default {
   },
   props: {
     ...inputProps,
-    prefixCls: {
-      default: 'ant-input-search',
-      type: String,
-    },
-    inputPrefixCls: {
-      default: 'ant-input',
-      type: String,
-    },
     enterButton: PropTypes.oneOfType([PropTypes.bool, PropTypes.string, PropTypes.object]),
   },
   inject: {
@@ -52,13 +44,13 @@ export default {
       );
 
       if (suffix) {
-        let cloneSuffix = suffix;
-        if (isValidElement(cloneSuffix) && !cloneSuffix.key) {
-          cloneSuffix = cloneElement(cloneSuffix, {
-            key: 'originSuffix',
-          });
-        }
-        return [cloneSuffix, node];
+        // let cloneSuffix = suffix;
+        // if (isValidElement(cloneSuffix) && !cloneSuffix.key) {
+        //   cloneSuffix = cloneElement(cloneSuffix, {
+        //     key: 'originSuffix',
+        //   });
+        // }
+        return [suffix, node];
       }
 
       return node;

components/input/__tests__/__snapshots__/demo.test.js.snap

@@ -10,7 +10,7 @@ exports[`renders ./components/input/demo/addon.md correctly 1`] = `
 </div>
 `;
 
-exports[`renders ./components/input/demo/allowClear.md correctly 1`] = `<span class="ant-input-affix-wrapper"><input placeholder="input with clear icon" type="text" allowclear="true" class="ant-input"><span class="ant-input-suffix"></span></span>`;
+exports[`renders ./components/input/demo/allowClear.md correctly 1`] = `<span class="ant-input-affix-wrapper"><input placeholder="input with clear icon" type="text" class="ant-input"><span class="ant-input-suffix"></span></span>`;
 
 exports[`renders ./components/input/demo/autosize-textarea.md correctly 1`] = `
 <div><textarea placeholder="Autosize height based on content lines" class="ant-input"></textarea>

components/input/demo/tooltip.md

@@ -27,7 +27,7 @@ You can use the Input in conjunction with [Tooltip](/components/tooltip/) compon
       @change="onChange"
       @blur="onBlur"
       placeholder="Input a number"
-      maxLength="25"
+      :maxLength="25"
       style="width: 120px"
     />
   </a-tooltip>

components/input/index.en-US.md

@@ -68,21 +68,8 @@ Supports all props of `Input`.
   <a-input />
 </a-input-group>
 ````
-#### Input.Password
+#### Input.Password (Added in 1.14.0)
 
 | Property | Description | Type | Default |
 | --- | --- | --- | --- |
 | visibilityToggle | Whether show toggle button | boolean | true |
-
-## FAQ
-
-### Why Input lose focus when change `prefix/suffix`
-
-When Input dynamic add or remove `prefix/suffix` will make Vue recreate the dom structure and new input will be not focused.
-You can set an empty `<span />` element to keep the dom structure:
-
-```jsx
-const suffix = condition ? <Icon type="smile" /> : <span />;
-
-<Input suffix={suffix} />
-```