Merge pull request #6138 from ant-design/fix-typescript

refactor: extract Input.Textarea

components/input/Input.tsx

@@ -1,10 +1,10 @@
-import React from 'react';
+import React, { Component, cloneElement } from 'react';
-import { Component, cloneElement } from 'react';
 import PropTypes from 'prop-types';
 import classNames from 'classnames';
-import calculateNodeHeight from './calculateNodeHeight';
-import assign from 'object-assign';
 import omit from 'omit.js';
+import Group from './Group';
+import Search from './Search';
+import TextArea from './TextArea';
 
 function fixControlledValue(value) {
   if (typeof value === 'undefined' || value === null) {
@@ -13,49 +13,31 @@ function fixControlledValue(value) {
   return value;
 }
 
-function onNextFrame(cb) {
+export interface AbstractInputProps {
-  if (window.requestAnimationFrame) {
-    return window.requestAnimationFrame(cb);
-  }
-  return window.setTimeout(cb, 1);
-}
-
-function clearNextFrameAction(nextFrameId) {
-  if (window.cancelAnimationFrame) {
-    window.cancelAnimationFrame(nextFrameId);
-  } else {
-    window.clearTimeout(nextFrameId);
-  }
-}
-
-export interface AutoSizeType {
-  minRows?: number;
-  maxRows?: number;
-}
-
-export interface InputProps {
   prefixCls?: string;
   className?: string;
+  defaultValue?: any;
+  value?: any;
+  style?: React.CSSProperties;
+}
+
+export interface InputProps extends AbstractInputProps {
+  placeholder?: string;
   type?: string;
   id?: number | string;
   name?: string;
-  value?: any;
-  defaultValue?: any;
-  placeholder?: string;
   size?: 'large' | 'default' | 'small';
   disabled?: boolean;
   readOnly?: boolean;
   addonBefore?: React.ReactNode;
   addonAfter?: React.ReactNode;
+  onPressEnter?: React.FormEventHandler<any>;
   onKeyDown?: React.FormEventHandler<any>;
   onChange?: React.FormEventHandler<any>;
-  onPressEnter?: React.FormEventHandler<any>;
   onClick?: React.FormEventHandler<any>;
   onFocus?: React.FormEventHandler<any>;
   onBlur?: React.FormEventHandler<any>;
-  autosize?: boolean | AutoSizeType;
   autoComplete?: 'on' | 'off';
-  style?: React.CSSProperties;
   prefix?: React.ReactNode;
   suffix?: React.ReactNode;
   spellCheck?: boolean;
@@ -63,13 +45,14 @@ export interface InputProps {
 }
 
 export default class Input extends Component<InputProps, any> {
-  static Group: any;
+  static Group: typeof Group;
-  static Search: any;
+  static Search: typeof Search;
+  static TextArea: typeof TextArea;
+
   static defaultProps = {
-    disabled: false,
     prefixCls: 'ant-input',
     type: 'text',
-    autosize: false,
+    disabled: false,
   };
 
   static propTypes = {
@@ -95,30 +78,10 @@ export default class Input extends Component<InputProps, any> {
     suffix: PropTypes.node,
   };
 
-  nextFrameActionId: number;
   refs: {
-    input: any;
+    input: HTMLInputElement;
   };
 
-  state = {
-    textareaStyles: null,
-    isFocus: false,
-  };
-
-  componentDidMount() {
-    this.resizeTextarea();
-  }
-
-  componentWillReceiveProps(nextProps) {
-    // Re-render with the new content then recalculate the height as required.
-    if (this.props.value !== nextProps.value) {
-      if (this.nextFrameActionId) {
-        clearNextFrameAction(this.nextFrameActionId);
-      }
-      this.nextFrameActionId = onNextFrame(this.resizeTextarea);
-    }
-  }
-
   handleKeyDown = (e) => {
     const { onPressEnter, onKeyDown } = this.props;
     if (e.keyCode === 13 && onPressEnter) {
@@ -129,36 +92,18 @@ export default class Input extends Component<InputProps, any> {
     }
   }
 
-  handleTextareaChange = (e) => {
-    if (!('value' in this.props)) {
-      this.resizeTextarea();
-    }
-    const onChange = this.props.onChange;
-    if (onChange) {
-      onChange(e);
-    }
-  }
-
-  resizeTextarea = () => {
-    const { type, autosize } = this.props;
-    if (type !== 'textarea' || !autosize || !this.refs.input) {
-      return;
-    }
-    const minRows = autosize ? (autosize as AutoSizeType).minRows : null;
-    const maxRows = autosize ? (autosize as AutoSizeType).maxRows : null;
-    const textareaStyles = calculateNodeHeight(this.refs.input, false, minRows, maxRows);
-    this.setState({ textareaStyles });
-  }
-
   focus() {
     this.refs.input.focus();
   }
 
+  blur() {
+    this.refs.input.blur();
+  }
+
   renderLabeledInput(children) {
     const props = this.props;
-
     // Not wrap when there is not addons
-    if (props.type === 'textarea' || (!props.addonBefore && !props.addonAfter)) {
+    if ((!props.addonBefore && !props.addonAfter)) {
       return children;
     }
 
@@ -207,8 +152,7 @@ export default class Input extends Component<InputProps, any> {
 
   renderLabeledIcon(children) {
     const { props } = this;
-
+    if (!('prefix' in props || 'suffix' in props)) {
-    if (props.type === 'textarea' || !('prefix' in props || 'suffix' in props)) {
       return children;
     }
 
@@ -234,12 +178,11 @@ export default class Input extends Component<InputProps, any> {
   }
 
   renderInput() {
-    const props = assign({}, this.props);
+    const props = this.props;
     // Fix https://fb.me/react-unknown-prop
-    const otherProps = omit(this.props, [
+    const otherProps = omit(props, [
       'prefixCls',
       'onPressEnter',
-      'autosize',
       'addonBefore',
       'addonAfter',
       'prefix',
@@ -247,10 +190,6 @@ export default class Input extends Component<InputProps, any> {
     ]);
 
     const prefixCls = props.prefixCls;
-    if (!props.type) {
-      return props.children;
-    }
-
     const inputClassName = classNames(prefixCls, {
       [`${prefixCls}-sm`]: props.size === 'small',
       [`${prefixCls}-lg`]: props.size === 'large',
@@ -262,32 +201,20 @@ export default class Input extends Component<InputProps, any> {
       // specify either the value prop, or the defaultValue prop, but not both.
       delete otherProps.defaultValue;
     }
-
+    return this.renderLabeledIcon(
-    switch (props.type) {
+      <input
-      case 'textarea':
+        {...otherProps}
-        return (
+        className={inputClassName}
-          <textarea
+        onKeyDown={this.handleKeyDown}
-            {...otherProps}
+        ref="input"
-            style={assign({}, props.style, this.state.textareaStyles)}
+      />,
-            className={inputClassName}
+    );
-            onKeyDown={this.handleKeyDown}
-            onChange={this.handleTextareaChange}
-            ref="input"
-          />
-        );
-      default:
-        return this.renderLabeledIcon(
-          <input
-            {...otherProps}
-            className={inputClassName}
-            onKeyDown={this.handleKeyDown}
-            ref="input"
-          />,
-        );
-    }
   }
 
   render() {
+    if (this.props.type === 'textarea') {
+      return <TextArea {...this.props as any} ref="input" />;
+    }
     return this.renderLabeledInput(this.renderInput());
   }
 }

components/input/Search.tsx

@@ -1,15 +1,10 @@
 import React from 'react';
 import classNames from 'classnames';
-import Input from './Input';
+import Input, { AbstractInputProps } from './Input';
 import Icon from '../icon';
 
-export interface SearchProps {
+export interface SearchProps extends AbstractInputProps {
-  className?: string;
   placeholder?: string;
-  prefixCls?: string;
-  style?: React.CSSProperties;
-  defaultValue?: any;
-  value?: any;
   onSearch?: (value: string) => any;
   onChange?: React.FormEventHandler<any>;
   size?: 'large' | 'default' | 'small';
@@ -21,7 +16,6 @@ export interface SearchProps {
 export default class Search extends React.Component<SearchProps, any> {
   static defaultProps = {
     prefixCls: 'ant-input-search',
-    onSearch() {},
   };
   input: any;
   onSearch = () => {
@@ -29,7 +23,7 @@ export default class Search extends React.Component<SearchProps, any> {
     if (onSearch) {
       onSearch(this.input.refs.input.value);
     }
-    this.input.refs.input.focus();
+    this.input.focus();
   }
   render() {
     const { className, prefixCls, ...others } = this.props;
@@ -45,8 +39,8 @@ export default class Search extends React.Component<SearchProps, any> {
       <Input
         onPressEnter={this.onSearch}
         {...others}
-        suffix={searchSuffix}
         className={classNames(prefixCls, className)}
+        suffix={searchSuffix}
         ref={node => this.input = node}
       />
     );

components/input/TextArea.tsx

@@ -0,0 +1,124 @@
+import React from 'react';
+import omit from 'omit.js';
+import classNames from 'classnames';
+import { AbstractInputProps } from './Input';
+import calculateNodeHeight from './calculateNodeHeight';
+
+function onNextFrame(cb) {
+  if (window.requestAnimationFrame) {
+    return window.requestAnimationFrame(cb);
+  }
+  return window.setTimeout(cb, 1);
+}
+
+function clearNextFrameAction(nextFrameId) {
+  if (window.cancelAnimationFrame) {
+    window.cancelAnimationFrame(nextFrameId);
+  } else {
+    window.clearTimeout(nextFrameId);
+  }
+}
+
+export interface AutoSizeType {
+  minRows?: number;
+  maxRows?: number;
+}
+
+export interface TextAreaProps extends AbstractInputProps {
+  autosize?: boolean | AutoSizeType;
+  onPressEnter?: React.FormEventHandler<any>;
+}
+
+export type HTMLTextareaProps = React.HTMLProps<HTMLTextAreaElement>;
+
+export default class TextArea extends React.Component<TextAreaProps & HTMLTextareaProps, any> {
+  static defaultProps = {
+    prefixCls: 'ant-input',
+  };
+
+  nextFrameActionId: number;
+  textAreaRef: HTMLTextAreaElement;
+  state = {
+    textareaStyles: null,
+  };
+
+  componentDidMount() {
+    this.resizeTextarea();
+  }
+
+  componentWillReceiveProps(nextProps) {
+    // Re-render with the new content then recalculate the height as required.
+    if (this.props.value !== nextProps.value) {
+      if (this.nextFrameActionId) {
+        clearNextFrameAction(this.nextFrameActionId);
+      }
+      this.nextFrameActionId = onNextFrame(this.resizeTextarea);
+    }
+  }
+
+  focus() {
+    this.textAreaRef.focus();
+  }
+
+  blur() {
+    this.textAreaRef.blur();
+  }
+
+  resizeTextarea = () => {
+    const { autosize } = this.props;
+    if (!autosize || !this.textAreaRef) {
+      return;
+    }
+    const minRows = autosize ? (autosize as AutoSizeType).minRows : null;
+    const maxRows = autosize ? (autosize as AutoSizeType).maxRows : null;
+    const textareaStyles = calculateNodeHeight(this.textAreaRef, false, minRows, maxRows);
+    this.setState({ textareaStyles });
+  }
+
+  handleTextareaChange = (e) => {
+    if (!('value' in this.props)) {
+      this.resizeTextarea();
+    }
+    const { onChange } = this.props;
+    if (onChange) {
+      onChange(e);
+    }
+  }
+
+  handleKeyDown = (e) => {
+    const { onPressEnter, onKeyDown } = this.props;
+    if (e.keyCode === 13 && onPressEnter) {
+      onPressEnter(e);
+    }
+    if (onKeyDown) {
+      onKeyDown(e);
+    }
+  }
+
+  saveTextAreaRef = (textArea) => {
+    this.textAreaRef = textArea;
+  }
+
+  render() {
+    const props = this.props;
+    const otherProps = omit(props, [
+      'prefixCls',
+      'onPressEnter',
+      'autosize',
+    ]);
+    const style = {
+      ...props.style,
+      ...this.state.textareaStyles,
+    };
+    return (
+      <textarea
+        {...otherProps}
+        className={classNames(props.prefixCls, props.className)}
+        style={style}
+        onKeyDown={this.handleKeyDown}
+        onChange={this.handleTextareaChange}
+        ref={this.saveTextAreaRef}
+      />
+    );
+  }
+}

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

@@ -152,7 +152,6 @@ exports[`renders ./components/input/demo/autosize-textarea.md correctly 1`] = `
   <textarea
     class="ant-input"
     placeholder="Autosize height based on content lines"
-    type="textarea"
   />
   <div
     style="margin:24px 0;"
@@ -160,7 +159,6 @@ exports[`renders ./components/input/demo/autosize-textarea.md correctly 1`] = `
   <textarea
     class="ant-input"
     placeholder="Autosize height with minimum and maximum number of lines"
-    type="textarea"
   />
 </div>
 `;
@@ -712,7 +710,6 @@ exports[`renders ./components/input/demo/textarea.md correctly 1`] = `
 <textarea
   class="ant-input"
   rows="4"
-  type="textarea"
 />
 `;
 

components/input/demo/autosize-textarea.md

@@ -17,12 +17,13 @@ An options object can be provided to `autosize` to specify the minimum and maxim
 
 ````jsx
 import { Input } from 'antd';
+const { TextArea } = Input;
 
 ReactDOM.render(
   <div>
-    <Input type="textarea" placeholder="Autosize height based on content lines" autosize />
+    <TextArea placeholder="Autosize height based on content lines" autosize />
     <div style={{ margin: '24px 0' }} />
-    <Input type="textarea" placeholder="Autosize height with minimum and maximum number of lines" autosize={{ minRows: 2, maxRows: 6 }} />
+    <TextArea placeholder="Autosize height with minimum and maximum number of lines" autosize={{ minRows: 2, maxRows: 6 }} />
   </div>
 , mountNode);
 ````

components/input/demo/textarea.md

@@ -15,6 +15,7 @@ For multi-line user input cases, an input whose `type` prop has the value of `"t
 
 ````jsx
 import { Input } from 'antd';
+const { TextArea } = Input;
 
-ReactDOM.render(<Input type="textarea" rows={4} />, mountNode);
+ReactDOM.render(<TextArea rows={4} />, mountNode);
 ````

components/input/index.en-US.md

@@ -18,7 +18,7 @@ Keyboard and mouse can be used for providing or changing data.
 
 | Property       | Description           | Type     | Default       |
 |----------------|-----------------------|----------|---------------|
-| type | The type of input, `text` or `textarea` | string  | `text`    |
+| type | The type of input, `text` or `textarea`(`type=textarea` are deprecated after `2.12`, please use `Input.TextArea`) | string  | `text`    |
 | id | The ID for input | string |   |
 | value | The input content value | string |   |
 | defaultValue | The initial input content | string |   |
@@ -29,13 +29,24 @@ Keyboard and mouse can be used for providing or changing data.
 | prefix | The Input with prefix icon. | string\|ReactNode | |
 | suffix | The Input with suffix icon. | string\|ReactNode | |
 | onPressEnter | The callback function that is triggered when pressing Enter key. | function(e) |   |
-| autosize | Height autosize feature, available when type="textarea", can be set to `true|false` or a object `{ minRows: 2, maxRows: 6 }` | boolean\|object | false |
 
 > When `Input` is used in a `Form.Item` context, if the `Form.Item` has the `id` and `options` props defined
 then `value`, `defaultValue`, and `id` props are automatically set.
 
-The rest props fo Input is exactly same as original [input](https://facebook.github.io/react/docs/events.html#supported-events).
+The rest props of Input is exactly same as original [input](https://facebook.github.io/react/docs/events.html#supported-events).
 
+### Input.TextArea
+
+> It you are using `antd@<2.12`, please use `Input[type=textarea]`.
+
+| Property       | Description           | Type     | Default       |
+|----------------|-----------------------|----------|---------------|
+| defaultValue | The initial input content | string |   |
+| value | The input content value | string |   |
+| onPressEnter | The callback function that is triggered when pressing Enter key. | function(e) |   |
+| autosize | Height autosize feature, can be set to `true|false` or a object `{ minRows: 2, maxRows: 6 }` | boolean\|object | false |
+
+The rest props of `Input.TextArea` is the same as original [textarea](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/textarea).
 
 #### Input.Search
 

components/input/index.tsx

@@ -1,7 +1,9 @@
 import Input from './Input';
 import Group from './Group';
 import Search from './Search';
+import TextArea from './TextArea';
 
 Input.Group = Group;
 Input.Search = Search;
+Input.TextArea = TextArea;
 export default Input;

components/input/index.zh-CN.md

@@ -18,7 +18,7 @@ title: Input
 
 | 参数      | 说明                                     | 类型       | 默认值 |
 |-----------|-----------------------------------------|------------|-------|--------|
-| type | 声明 input 类型，同原生 input 标签的 type 属性。另外提供 `type="textarea"`。 | string  | `text` |
+| type | 声明 input 类型，同原生 input 标签的 type 属性。另外提供 `type="textarea"`(该 type `2.12` 后废弃，请直接使用 `Input.TextArea`)。 | string  | `text` |
 | id | 输入框的 id | string | |
 | value | 输入框内容 | string | |
 | defaultValue | 输入框默认内容 | string | |
@@ -29,12 +29,24 @@ title: Input
 | prefix | 带有前缀图标的 input | string\|ReactNode | |
 | suffix | 带有后缀图标的 input | string\|ReactNode | |
 | onPressEnter | 按下回车的回调 | function(e) | |
-| autosize | 自适应内容高度，只对 `type="textarea"` 有效，可设置为 `true|false` 或对象：`{ minRows: 2, maxRows: 6 }` | boolean\|object | false |
 
 > 如果 `Input` 在 `Form.Item` 内，并且 `Form.Item` 设置了 `id` 和 `options` 属性，则 `value` `defaultValue` 和 `id` 属性会被自动设置。
 
 Input 的其他属性和 React 自带的 [input](https://facebook.github.io/react/docs/events.html#supported-events) 一致。
 
+### Input.TextArea
+
+> `2.12` 后新增的组件，旧版请使用 `Input[type=textarea]`。
+
+| 参数      | 说明                                     | 类型       | 默认值 |
+|-----------|-----------------------------------------|------------|-------|--------|
+| defaultValue | 输入框默认内容 | string | |
+| value | 输入框内容 | string | |
+| onPressEnter | 按下回车的回调 | function(e) | |
+| autosize | 自适应内容高度，可设置为 `true|false` 或对象：`{ minRows: 2, maxRows: 6 }` | boolean\|object | false |
+
+`Input.TextArea` 的其他属性和浏览器自带的 [textarea](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/textarea) 一致。
+
 #### Input.Search
 
 `Added in 2.5.0`

components/transfer/__tests__/__snapshots__/search.test.js.snap

@@ -7,7 +7,6 @@ exports[`Search should show cross icon when input value exists 1`] = `
 >
   <div>
     <Input
-      autosize={false}
       disabled={false}
       onChange={[Function]}
       placeholder=""
@@ -47,7 +46,6 @@ exports[`Search should show cross icon when input value exists 2`] = `
 >
   <div>
     <Input
-      autosize={false}
       disabled={false}
       onChange={[Function]}
       placeholder=""