github
/
ant-design-vue
mirror of https://github.com/vueComponent/ant-design-vue
1
0
Fork 0
Code Issues Projects Releases Wiki Activity

fix: textarea shake #2005 #1964

pull/2016/head
tangjinzhou 2020-04-02 21:20:52 +08:00
parent 3d3884bef3
commit 0b7481e8ab
2 changed files with 29 additions and 12 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

36
components/input/ResizableTextArea.jsx
View File

@ -9,6 +9,10 @@ import inputProps from './inputProps';
import PropTypes from '../_util/vue-types'; import PropTypes from '../_util/vue-types';
import { getOptionProps, getListeners } from '../_util/props-util'; import { getOptionProps, getListeners } from '../_util/props-util';
const RESIZE_STATUS_NONE = 0;
const RESIZE_STATUS_RESIZING = 1;
const RESIZE_STATUS_RESIZED = 2;
const TextAreaProps = { const TextAreaProps = {
...inputProps, ...inputProps,
autosize: PropTypes.oneOfType([Object, Boolean]), autosize: PropTypes.oneOfType([Object, Boolean]),
@ -20,7 +24,7 @@ const ResizableTextArea = {
data() { data() {
return { return {
textareaStyles: {}, textareaStyles: {},
resizing: false, resizeStatus: RESIZE_STATUS_NONE,
}; };
}, },
mixins: [BaseMixin], mixins: [BaseMixin],
@ -39,6 +43,18 @@ const ResizableTextArea = {
}, },
}, },
methods: { methods: {
handleResize(size) {
const { resizeStatus } = this.$data;
const { autoSize } = this.$props;
if (resizeStatus !== RESIZE_STATUS_NONE) {
return;
}
this.$emit('resize', size);
if (autoSize) {
this.resizeOnNextFrame();
}
},
resizeOnNextFrame() { resizeOnNextFrame() {
raf.cancel(this.nextFrameActionId); raf.cancel(this.nextFrameActionId);
this.nextFrameActionId = raf(this.resizeTextarea); this.nextFrameActionId = raf(this.resizeTextarea);
@ -51,11 +67,15 @@ const ResizableTextArea = {
} }
const { minRows, maxRows } = autoSize; const { minRows, maxRows } = autoSize;
const textareaStyles = calculateNodeHeight(this.$refs.textArea, false, minRows, maxRows); const textareaStyles = calculateNodeHeight(this.$refs.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.fixFirefoxAutoScroll(); this.resizeFrameId = raf(() => {
this.setState({ resizeStatus: RESIZE_STATUS_NONE });
this.fixFirefoxAutoScroll();
});
});
}); });
}); });
}, },
@ -77,7 +97,7 @@ const ResizableTextArea = {
renderTextArea() { renderTextArea() {
const props = getOptionProps(this); const props = getOptionProps(this);
const { prefixCls, autoSize, autosize, disabled } = props; const { prefixCls, autoSize, autosize, disabled } = props;
const { textareaStyles, resizing } = this.$data; const { textareaStyles, resizeStatus } = this.$data;
warning( warning(
autosize === undefined, autosize === undefined,
'Input.TextArea', 'Input.TextArea',
@ -104,7 +124,9 @@ const ResizableTextArea = {
} }
const style = { const style = {
...textareaStyles, ...textareaStyles,
...(resizing ? { overflowX: 'hidden', overflowY: 'hidden' } : null), ...(resizeStatus === RESIZE_STATUS_RESIZING
? { overflowX: 'hidden', overflowY: 'hidden' }
: null),
}; };
const textareaProps = { const textareaProps = {
attrs: otherProps, attrs: otherProps,
@ -119,7 +141,7 @@ const ResizableTextArea = {
], ],
}; };
return ( return (
<ResizeObserver onResize={this.resizeOnNextFrame} disabled={!(autoSize || autosize)}> <ResizeObserver onResize={this.handleResize} disabled={!(autoSize || autosize)}>
<textarea {...textareaProps} ref="textArea" /> <textarea {...textareaProps} ref="textArea" />
</ResizeObserver> </ResizeObserver>
); );

5
components/input/calculateNodeHeight.js
View File

@ -142,11 +142,6 @@ export default function calculateNodeHeight(
height = Math.min(maxHeight, height); height = Math.min(maxHeight, height);
} }
} }
// // Remove scroll bar flash when autosize without maxRows
// // donot remove in vue
// if (!maxRows) {
// overflowY = 'hidden';
// }
return { return {
height: `${height}px`, height: `${height}px`,
minHeight: `${minHeight}px`, minHeight: `${minHeight}px`,