fix: replace autosize with autoSize

ant-design · Oct 11, 2019 · 311a6c0 · 311a6c0
1 parent e43b808
commit 311a6c0
Show file tree

Hide file tree

Showing 8 changed files with 27 additions and 18 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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>