From 311a6c091774e69f057ebeee47a35db8a2343775 Mon Sep 17 00:00:00 2001
From: Liming Jin <jinlm@knownsec.com>
Date: Fri, 11 Oct 2019 18:12:28 +0800
Subject: [PATCH] fix: replace autosize with autoSize

---
 components/input/TextArea.tsx                 | 21 +++++++++++++------
 .../__tests__/__snapshots__/demo.test.js.snap |  2 +-
 components/input/__tests__/index.test.js      |  2 +-
 components/input/demo/autosize-textarea.md    | 10 ++++-----
 components/input/demo/textarea-resize.md      |  4 ++--
 components/input/index.en-US.md               |  2 +-
 components/input/index.zh-CN.md               |  2 +-
 components/typography/Editable.tsx            |  2 +-
 8 files changed, 27 insertions(+), 18 deletions(-)

diff --git a/components/input/TextArea.tsx b/components/input/TextArea.tsx
index 830830e0fd11..23fe3d5f7cd1 100644
--- a/components/input/TextArea.tsx
+++ b/components/input/TextArea.tsx
@@ -6,6 +6,7 @@ import ResizeObserver from 'rc-resize-observer';
 import calculateNodeHeight from './calculateNodeHeight';
 import { ConfigConsumer, ConfigConsumerProps } from '../config-provider';
 import raf from '../_util/raf';
+import warning from '../_util/warning';
 
 export interface AutoSizeType {
   minRows?: number;
@@ -16,7 +17,9 @@ export type HTMLTextareaProps = React.TextareaHTMLAttributes<HTMLTextAreaElement
 
 export interface TextAreaProps extends HTMLTextareaProps {
   prefixCls?: string;
+  /* deprecated, use autoSize instead */
   autosize?: boolean | AutoSizeType;
+  autoSize?: boolean | AutoSizeType;
   onPressEnter?: React.KeyboardEventHandler<HTMLTextAreaElement>;
 }
 
@@ -84,11 +87,11 @@ class TextArea extends React.Component<TextAreaProps, TextAreaState> {
   };
 
   resizeTextarea = () => {
-    const { autosize } = this.props;
-    if (!autosize || !this.textAreaRef) {
+    const autoSize = this.props.autoSize || this.props.autosize;
+    if (!autoSize || !this.textAreaRef) {
       return;
     }
-    const { minRows, maxRows } = autosize as AutoSizeType;
+    const { minRows, maxRows } = autoSize as AutoSizeType;
     const textareaStyles = calculateNodeHeight(this.textAreaRef, false, minRows, maxRows);
     this.setState({ textareaStyles, resizing: true }, () => {
       raf.cancel(this.resizeFrameId);
@@ -108,14 +111,20 @@ class TextArea extends React.Component<TextAreaProps, TextAreaState> {
 
   renderTextArea = ({ getPrefixCls }: ConfigConsumerProps) => {
     const { textareaStyles, resizing } = this.state;
-    const { prefixCls: customizePrefixCls, className, disabled, autosize } = this.props;
+    const { prefixCls: customizePrefixCls, className, disabled, autoSize, autosize } = this.props;
     const { ...props } = this.props;
-    const otherProps = omit(props, ['prefixCls', 'onPressEnter', 'autosize']);
+    const otherProps = omit(props, ['prefixCls', 'onPressEnter', 'autoSize', 'autosize']);
     const prefixCls = getPrefixCls('input', customizePrefixCls);
     const cls = classNames(prefixCls, className, {
       [`${prefixCls}-disabled`]: disabled,
     });
 
+    warning(
+      autosize === undefined,
+      'Input.TextArea',
+      'autosize is deprecated, please use autoSize instead.',
+    );
+
     const style = {
       ...props.style,
       ...textareaStyles,
@@ -127,7 +136,7 @@ class TextArea extends React.Component<TextAreaProps, TextAreaState> {
       otherProps.value = otherProps.value || '';
     }
     return (
-      <ResizeObserver onResize={this.resizeOnNextFrame} disabled={!autosize}>
+      <ResizeObserver onResize={this.resizeOnNextFrame} disabled={!(autoSize || autosize)}>
         <textarea
           {...otherProps}
           className={cls}
diff --git a/components/input/__tests__/__snapshots__/demo.test.js.snap b/components/input/__tests__/__snapshots__/demo.test.js.snap
index e0e18c531e00..b81e04d96033 100644
--- a/components/input/__tests__/__snapshots__/demo.test.js.snap
+++ b/components/input/__tests__/__snapshots__/demo.test.js.snap
@@ -1858,7 +1858,7 @@ exports[`renders ./components/input/demo/textarea-resize.md correctly 1`] = `
     class="ant-input"
     rows="4"
   >
-    autosize 属性适用于 textarea 节点，并且只有高度会自动变化。另外 autosize 可以设定为一个对象，指定最小行数和最大行数。autosize 属性适用于 textarea 节点，并且只有高度会自动变化。另外 autosize 可以设定为一个对象，指定最小行数和最大行数。autosize 属性适用于 textarea 节点，并且只有高度会自动变化。另外 autosize 可以设定为一个对象，指定最小行数和最大行数。autosize 属性适用于 textarea 节点，并且只有高度会自动变化。另外 autosize 可以设定为一个对象，指定最小行数和最大行数。autosize 属性适用于 textarea 节点，并且只有高度会自动变化。另外 autosize 可以设定为一个对象，指定最小行数和最大行数。autosize 属性适用于 textarea 节点，并且只有高度会自动变化。另外 autosize 可以设定为一个对象，指定最小行数和最大行数。autosize 属性适用于 textarea 节点，并且只有高度会自动变化。另外 autosize 可以设定为一个对象，指定最小行数和最大行数。ending
+    autoSize 属性适用于 textarea 节点，并且只有高度会自动变化。另外 autoSize 可以设定为一个对象，指定最小行数和最大行数。autoSize 属性适用于 textarea 节点，并且只有高度会自动变化。另外 autoSize 可以设定为一个对象，指定最小行数和最大行数。autoSize 属性适用于 textarea 节点，并且只有高度会自动变化。另外 autoSize 可以设定为一个对象，指定最小行数和最大行数。autoSize 属性适用于 textarea 节点，并且只有高度会自动变化。另外 autoSize 可以设定为一个对象，指定最小行数和最大行数。autoSize 属性适用于 textarea 节点，并且只有高度会自动变化。另外 autoSize 可以设定为一个对象，指定最小行数和最大行数。autoSize 属性适用于 textarea 节点，并且只有高度会自动变化。另外 autoSize 可以设定为一个对象，指定最小行数和最大行数。autoSize 属性适用于 textarea 节点，并且只有高度会自动变化。另外 autoSize 可以设定为一个对象，指定最小行数和最大行数。ending
   </textarea>
 </div>
 `;
diff --git a/components/input/__tests__/index.test.js b/components/input/__tests__/index.test.js
index 8af8c199f7e9..581737b5f3ec 100644
--- a/components/input/__tests__/index.test.js
+++ b/components/input/__tests__/index.test.js
@@ -74,7 +74,7 @@ describe('TextArea', () => {
   });
 
   it('should auto calculate height according to content length', () => {
-    const wrapper = mount(<TextArea value="" readOnly autosize />);
+    const wrapper = mount(<TextArea value="" readOnly autoSize />);
     const mockFunc = jest.spyOn(wrapper.instance(), 'resizeTextarea');
     wrapper.setProps({ value: '1111\n2222\n3333' });
     jest.runAllTimers();
diff --git a/components/input/demo/autosize-textarea.md b/components/input/demo/autosize-textarea.md
index 6a49d677478c..cc064cc54837 100644
--- a/components/input/demo/autosize-textarea.md
+++ b/components/input/demo/autosize-textarea.md
@@ -7,11 +7,11 @@ title:
 
 ## zh-CN
 
-`autosize` 属性适用于 `textarea` 节点，并且只有高度会自动变化。另外 `autosize` 可以设定为一个对象，指定最小行数和最大行数。
+`autoSize` 属性适用于 `textarea` 节点，并且只有高度会自动变化。另外 `autoSize` 可以设定为一个对象，指定最小行数和最大行数。
 
 ## en-US
 
-`autosize` prop for a `textarea` type of `Input` makes the height to automatically adjust based on the content. An options object can be provided to `autosize` to specify the minimum and maximum number of lines the textarea will automatically adjust.
+`autoSize` prop for a `textarea` type of `Input` makes the height to automatically adjust based on the content. An options object can be provided to `autoSize` to specify the minimum and maximum number of lines the textarea will automatically adjust.
 
 ```jsx
 import { Input } from 'antd';
@@ -32,18 +32,18 @@ class Demo extends React.Component {
 
     return (
       <div>
-        <TextArea placeholder="Autosize height based on content lines" autosize />
+        <TextArea placeholder="Autosize height based on content lines" autoSize />
         <div style={{ margin: '24px 0' }} />
         <TextArea
           placeholder="Autosize height with minimum and maximum number of lines"
-          autosize={{ minRows: 2, maxRows: 6 }}
+          autoSize={{ minRows: 2, maxRows: 6 }}
         />
         <div style={{ margin: '24px 0' }} />
         <TextArea
           value={value}
           onChange={this.onChange}
           placeholder="Controlled autosize"
-          autosize={{ minRows: 3, maxRows: 5 }}
+          autoSize={{ minRows: 3, maxRows: 5 }}
         />
       </div>
     );
diff --git a/components/input/demo/textarea-resize.md b/components/input/demo/textarea-resize.md
index 5107f5e22aa0..0966d4e496d0 100644
--- a/components/input/demo/textarea-resize.md
+++ b/components/input/demo/textarea-resize.md
@@ -20,7 +20,7 @@ import { Input, Button } from 'antd';
 const { TextArea } = Input;
 
 const defaultValue =
-  'autosize 属性适用于 textarea 节点，并且只有高度会自动变化。另外 autosize 可以设定为一个对象，指定最小行数和最大行数。autosize 属性适用于 textarea 节点，并且只有高度会自动变化。另外 autosize 可以设定为一个对象，指定最小行数和最大行数。autosize 属性适用于 textarea 节点，并且只有高度会自动变化。另外 autosize 可以设定为一个对象，指定最小行数和最大行数。autosize 属性适用于 textarea 节点，并且只有高度会自动变化。另外 autosize 可以设定为一个对象，指定最小行数和最大行数。autosize 属性适用于 textarea 节点，并且只有高度会自动变化。另外 autosize 可以设定为一个对象，指定最小行数和最大行数。autosize 属性适用于 textarea 节点，并且只有高度会自动变化。另外 autosize 可以设定为一个对象，指定最小行数和最大行数。autosize 属性适用于 textarea 节点，并且只有高度会自动变化。另外 autosize 可以设定为一个对象，指定最小行数和最大行数。ending';
+  'autoSize 属性适用于 textarea 节点，并且只有高度会自动变化。另外 autoSize 可以设定为一个对象，指定最小行数和最大行数。autoSize 属性适用于 textarea 节点，并且只有高度会自动变化。另外 autoSize 可以设定为一个对象，指定最小行数和最大行数。autoSize 属性适用于 textarea 节点，并且只有高度会自动变化。另外 autoSize 可以设定为一个对象，指定最小行数和最大行数。autoSize 属性适用于 textarea 节点，并且只有高度会自动变化。另外 autoSize 可以设定为一个对象，指定最小行数和最大行数。autoSize 属性适用于 textarea 节点，并且只有高度会自动变化。另外 autoSize 可以设定为一个对象，指定最小行数和最大行数。autoSize 属性适用于 textarea 节点，并且只有高度会自动变化。另外 autoSize 可以设定为一个对象，指定最小行数和最大行数。autoSize 属性适用于 textarea 节点，并且只有高度会自动变化。另外 autoSize 可以设定为一个对象，指定最小行数和最大行数。ending';
 
 class Demo extends React.Component {
   state = {
@@ -38,7 +38,7 @@ class Demo extends React.Component {
         >
           Auto Resize: {String(autoResize)}
         </Button>
-        <TextArea rows={4} autosize={autoResize} defaultValue={defaultValue} />
+        <TextArea rows={4} autoSize={autoResize} defaultValue={defaultValue} />
       </div>
     );
   }
diff --git a/components/input/index.en-US.md b/components/input/index.en-US.md
index a361f5b0198d..6380230c37f0 100644
--- a/components/input/index.en-US.md
+++ b/components/input/index.en-US.md
@@ -41,7 +41,7 @@ The rest of the props of Input are exactly the same as the original [input](http
 
 | Property | Description | Type | Default | Version |
 | --- | --- | --- | --- | --- |
-| autosize | Height autosize feature, can be set to `true|false` or an object `{ minRows: 2, maxRows: 6 }` | boolean\|object | false |  |
+| autoSize | Height autosize feature, can be set to `true|false` or an object `{ minRows: 2, maxRows: 6 }` | boolean\|object | false |  |
 | defaultValue | The initial input content | string |  |  |
 | value | The input content value | string |  |  |
 | onPressEnter | The callback function that is triggered when Enter key is pressed. | function(e) |  |  |
diff --git a/components/input/index.zh-CN.md b/components/input/index.zh-CN.md
index 320368fb2e95..7840915b9b82 100644
--- a/components/input/index.zh-CN.md
+++ b/components/input/index.zh-CN.md
@@ -42,7 +42,7 @@ Input 的其他属性和 React 自带的 [input](https://facebook.github.io/reac
 
 | 参数 | 说明 | 类型 | 默认值 | 版本 |
 | --- | --- | --- | --- | --- |
-| autosize | 自适应内容高度，可设置为 `true|false` 或对象：`{ minRows: 2, maxRows: 6 }` | boolean\|object | false |  |
+| autoSize | 自适应内容高度，可设置为 `true|false` 或对象：`{ minRows: 2, maxRows: 6 }` | boolean\|object | false |  |
 | defaultValue | 输入框默认内容 | string |  |  |
 | value | 输入框内容 | string |  |  |
 | onPressEnter | 按下回车的回调 | function(e) |  |  |
diff --git a/components/typography/Editable.tsx b/components/typography/Editable.tsx
index 4a96c58195b6..52ce10e68803 100644
--- a/components/typography/Editable.tsx
+++ b/components/typography/Editable.tsx
@@ -125,7 +125,7 @@ class Editable extends React.Component<EditableProps, EditableState> {
           onCompositionEnd={this.onCompositionEnd}
           onBlur={this.onBlur}
           aria-label={ariaLabel}
-          autosize
+          autoSize
         />
         <Icon type="enter" className={`${prefixCls}-edit-content-confirm`} />
       </div>