Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

fix: replace autosize with autoSize #19177

Merged
merged 1 commit into from Oct 11, 2019
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Jump to
Jump to file
Failed to load files.
Diff view
Diff view
21 changes: 15 additions & 6 deletions components/input/TextArea.tsx
Expand Up @@ -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;
Expand All @@ -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>;
}

Expand Down Expand Up @@ -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);
Expand All @@ -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,
Expand All @@ -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}
Expand Down
2 changes: 1 addition & 1 deletion components/input/__tests__/__snapshots__/demo.test.js.snap
Expand Up @@ -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>
`;
Expand Down
2 changes: 1 addition & 1 deletion components/input/__tests__/index.test.js
Expand Up @@ -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();
Expand Down
10 changes: 5 additions & 5 deletions components/input/demo/autosize-textarea.md
Expand Up @@ -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';
Expand All @@ -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>
);
Expand Down
4 changes: 2 additions & 2 deletions components/input/demo/textarea-resize.md
Expand Up @@ -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 = {
Expand All @@ -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>
);
}
Expand Down
2 changes: 1 addition & 1 deletion components/input/index.en-US.md
Expand Up @@ -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) | | |
Expand Down
2 changes: 1 addition & 1 deletion components/input/index.zh-CN.md
Expand Up @@ -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) | | |
Expand Down
2 changes: 1 addition & 1 deletion components/typography/Editable.tsx
Expand Up @@ -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>
Expand Down