test/ant-design
1
0
Fork 0
mirror of https://gitee.com/ant-design/ant-design.git synced 2024-12-01 03:29:39 +08:00
Code Issues Actions 69 Packages Projects Releases Wiki Activity

fix: TextArea autoSize blink in FireFox (#20737)

Browse Source
This commit is contained in:
二货机器人 2020-01-07 20:57:42 +08:00 committed by GitHub
parent 40d9627554
commit 222849235d
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
1 changed files with 23 additions and 6 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

29
components/input/ResizableTextArea.tsx
View File

@ -6,6 +6,10 @@ import calculateNodeHeight from './calculateNodeHeight';
import raf from '../_util/raf'; import raf from '../_util/raf';
import { TextAreaProps } from './TextArea'; import { TextAreaProps } from './TextArea';
const RESIZE_STATUS_NONE = 0;
const RESIZE_STATUS_RESIZING = 1;
const RESIZE_STATUS_RESIZED = 2;
export interface AutoSizeType { export interface AutoSizeType {
minRows?: number; minRows?: number;
maxRows?: number; maxRows?: number;
@ -14,7 +18,10 @@ export interface AutoSizeType {
export interface TextAreaState { export interface TextAreaState {
textareaStyles?: React.CSSProperties; textareaStyles?: React.CSSProperties;
/** We need add process style to disable scroll first and then add back to avoid unexpected scrollbar */ /** We need add process style to disable scroll first and then add back to avoid unexpected scrollbar */
resizing?: boolean; resizeStatus?:
| typeof RESIZE_STATUS_NONE
| typeof RESIZE_STATUS_RESIZING
| typeof RESIZE_STATUS_RESIZED;
} }
class ResizableTextArea extends React.Component<TextAreaProps, TextAreaState> { class ResizableTextArea extends React.Component<TextAreaProps, TextAreaState> {
@ -26,7 +33,7 @@ class ResizableTextArea extends React.Component<TextAreaProps, TextAreaState> {
super(props); super(props);
this.state = { this.state = {
textareaStyles: {}, textareaStyles: {},
resizing: false, resizeStatus: RESIZE_STATUS_NONE,
}; };
} }
@ -48,7 +55,13 @@ class ResizableTextArea extends React.Component<TextAreaProps, TextAreaState> {
} }
handleResize = (size: { width: number; height: number }) => { handleResize = (size: { width: number; height: number }) => {
const { resizeStatus } = this.state;
const { autoSize, onResize } = this.props; const { autoSize, onResize } = this.props;
if (resizeStatus !== RESIZE_STATUS_NONE) {
return;
}
if (typeof onResize === 'function') { if (typeof onResize === 'function') {
onResize(size); onResize(size);
} }
@ -69,10 +82,14 @@ class ResizableTextArea extends React.Component<TextAreaProps, TextAreaState> {
} }
const { minRows, maxRows } = autoSize as AutoSizeType; const { minRows, maxRows } = autoSize as AutoSizeType;
const textareaStyles = calculateNodeHeight(this.textArea, false, minRows, maxRows); const textareaStyles = calculateNodeHeight(this.textArea, false, minRows, maxRows);
this.setState({ textareaStyles, resizing: true }, () => { this.setState({ textareaStyles, resizeStatus: RESIZE_STATUS_RESIZING }, () => {
raf.cancel(this.resizeFrameId); raf.cancel(this.resizeFrameId);
this.resizeFrameId = raf(() => { this.resizeFrameId = raf(() => {
this.setState({ resizing: false }); this.setState({ resizeStatus: RESIZE_STATUS_RESIZED }, () => {
this.resizeFrameId = raf(() => {
this.setState({ resizeStatus: RESIZE_STATUS_NONE });
});
});
}); });
}); });
}; };
@ -84,7 +101,7 @@ class ResizableTextArea extends React.Component<TextAreaProps, TextAreaState> {
renderTextArea = () => { renderTextArea = () => {
const { prefixCls, autoSize, onResize, className, disabled } = this.props; const { prefixCls, autoSize, onResize, className, disabled } = this.props;
const { textareaStyles, resizing } = this.state; const { textareaStyles, resizeStatus } = this.state;
const otherProps = omit(this.props, [ const otherProps = omit(this.props, [
'prefixCls', 'prefixCls',
'onPressEnter', 'onPressEnter',
@ -104,7 +121,7 @@ class ResizableTextArea extends React.Component<TextAreaProps, TextAreaState> {
const style = { const style = {
...this.props.style, ...this.props.style,
...textareaStyles, ...textareaStyles,
...(resizing ? { overflow: 'hidden' } : null), ...(resizeStatus === RESIZE_STATUS_RESIZING ? { overflow: 'hidden' } : null),
}; };
return ( return (
<ResizeObserver onResize={this.handleResize} disabled={!(autoSize || onResize)}> <ResizeObserver onResize={this.handleResize} disabled={!(autoSize || onResize)}>