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 cursor error, close #7121

feat-4.1
tangjinzhou 2023-12-18 14:31:53 +08:00
parent f93dd9170d
commit 73f0a29acf
2 changed files with 120 additions and 88 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

160
components/input/ResizableTextArea.tsx
View File

@ -1,26 +1,26 @@
import type { VNode } from 'vue'; import type { VNode, CSSProperties } from 'vue';
import { import {
onMounted, computed,
watchEffect,
getCurrentInstance, getCurrentInstance,
watch, watch,
onBeforeUnmount, onBeforeUnmount,
ref, ref,
nextTick,
defineComponent, defineComponent,
withDirectives, withDirectives,
} from 'vue'; } from 'vue';
import ResizeObserver from '../vc-resize-observer'; import ResizeObserver from '../vc-resize-observer';
import classNames from '../_util/classNames'; import classNames from '../_util/classNames';
import calculateNodeHeight from './calculateNodeHeight';
import raf from '../_util/raf'; import raf from '../_util/raf';
import warning from '../_util/warning'; import warning from '../_util/warning';
import antInput from '../_util/antInputDirective'; import antInput from '../_util/antInputDirective';
import omit from '../_util/omit'; import omit from '../_util/omit';
import { textAreaProps } from './inputProps'; import { textAreaProps } from './inputProps';
import calculateAutoSizeStyle from './calculateNodeHeight';
const RESIZE_STATUS_NONE = 0; const RESIZE_START = 0;
const RESIZE_STATUS_RESIZING = 1; const RESIZE_MEASURING = 1;
const RESIZE_STATUS_RESIZED = 2; const RESIZE_STABLE = 2;
const ResizableTextArea = defineComponent({ const ResizableTextArea = defineComponent({
compatConfig: { MODE: 3 }, compatConfig: { MODE: 3 },
@ -32,7 +32,7 @@ const ResizableTextArea = defineComponent({
let resizeFrameId: any; let resizeFrameId: any;
const textAreaRef = ref(); const textAreaRef = ref();
const textareaStyles = ref({}); const textareaStyles = ref({});
const resizeStatus = ref(RESIZE_STATUS_NONE); const resizeStatus = ref(RESIZE_STABLE);
onBeforeUnmount(() => { onBeforeUnmount(() => {
raf.cancel(nextFrameActionId); raf.cancel(nextFrameActionId);
raf.cancel(resizeFrameId); raf.cancel(resizeFrameId);
@ -44,7 +44,9 @@ const ResizableTextArea = defineComponent({
if (document.activeElement === textAreaRef.value) { if (document.activeElement === textAreaRef.value) {
const currentStart = textAreaRef.value.selectionStart; const currentStart = textAreaRef.value.selectionStart;
const currentEnd = textAreaRef.value.selectionEnd; const currentEnd = textAreaRef.value.selectionEnd;
const scrollTop = textAreaRef.value.scrollTop;
textAreaRef.value.setSelectionRange(currentStart, currentEnd); textAreaRef.value.setSelectionRange(currentStart, currentEnd);
textAreaRef.value.scrollTop = scrollTop;
} }
} catch (e) { } catch (e) {
// Fix error in Chrome: // Fix error in Chrome:
@ -52,41 +54,82 @@ const ResizableTextArea = defineComponent({
// http://stackoverflow.com/q/21177489/3040605 // http://stackoverflow.com/q/21177489/3040605
} }
}; };
const minRows = ref<number>();
const resizeTextarea = () => { const maxRows = ref<number>();
const autoSize = props.autoSize || props.autosize; watchEffect(() => {
if (!autoSize || !textAreaRef.value) {
return;
}
const { minRows, maxRows } = autoSize;
textareaStyles.value = calculateNodeHeight(textAreaRef.value, false, minRows, maxRows);
resizeStatus.value = RESIZE_STATUS_RESIZING;
raf.cancel(resizeFrameId);
resizeFrameId = raf(() => {
resizeStatus.value = RESIZE_STATUS_RESIZED;
resizeFrameId = raf(() => {
resizeStatus.value = RESIZE_STATUS_NONE;
fixFirefoxAutoScroll();
});
});
};
const resizeOnNextFrame = () => {
raf.cancel(nextFrameActionId);
nextFrameActionId = raf(resizeTextarea);
};
const handleResize = (size: { width: number; height: number }) => {
if (resizeStatus.value !== RESIZE_STATUS_NONE) {
return;
}
emit('resize', size);
const autoSize = props.autoSize || props.autosize; const autoSize = props.autoSize || props.autosize;
if (autoSize) { if (autoSize) {
resizeOnNextFrame(); minRows.value = autoSize.minRows;
maxRows.value = autoSize.maxRows;
} else {
minRows.value = undefined;
maxRows.value = undefined;
}
});
const needAutoSize = computed(() => !!(props.autoSize || props.autosize));
const startResize = () => {
resizeStatus.value = RESIZE_START;
};
watch(
[() => props.value, minRows, maxRows, needAutoSize],
() => {
if (needAutoSize.value) {
startResize();
}
},
{ immediate: true, flush: 'post' },
);
const autoSizeStyle = ref<CSSProperties>();
watch(
[resizeStatus, textAreaRef],
() => {
if (!textAreaRef.value) return;
if (resizeStatus.value === RESIZE_START) {
resizeStatus.value = RESIZE_MEASURING;
} else if (resizeStatus.value === RESIZE_MEASURING) {
const textareaStyles = calculateAutoSizeStyle(
textAreaRef.value,
false,
minRows.value,
maxRows.value,
);
resizeStatus.value = RESIZE_STABLE;
autoSizeStyle.value = textareaStyles;
} else {
fixFirefoxAutoScroll();
}
},
{ immediate: true, flush: 'post' },
);
const instance = getCurrentInstance();
const resizeRafRef = ref();
const cleanRaf = () => {
raf.cancel(resizeRafRef.value);
};
const onInternalResize = (size: { width: number; height: number }) => {
if (resizeStatus.value === RESIZE_STABLE) {
emit('resize', size);
if (needAutoSize.value) {
cleanRaf();
resizeRafRef.value = raf(() => {
startResize();
});
}
} }
}; };
onBeforeUnmount(() => {
cleanRaf();
});
const resizeTextarea = () => {
startResize();
};
expose({
resizeTextarea,
textArea: textAreaRef,
instance,
});
warning( warning(
props.autosize === undefined, props.autosize === undefined,
'Input.TextArea', 'Input.TextArea',
@ -94,7 +137,7 @@ const ResizableTextArea = defineComponent({
); );
const renderTextArea = () => { const renderTextArea = () => {
const { prefixCls, autoSize, autosize, disabled } = props; const { prefixCls, disabled } = props;
const otherProps = omit(props, [ const otherProps = omit(props, [
'prefixCls', 'prefixCls',
'onPressEnter', 'onPressEnter',
@ -110,19 +153,20 @@ const ResizableTextArea = defineComponent({
const cls = classNames(prefixCls, attrs.class, { const cls = classNames(prefixCls, attrs.class, {
[`${prefixCls}-disabled`]: disabled, [`${prefixCls}-disabled`]: disabled,
}); });
const style = [ const mergedAutoSizeStyle = needAutoSize.value ? autoSizeStyle.value : null;
attrs.style, const style = [attrs.style, textareaStyles.value, mergedAutoSizeStyle];
textareaStyles.value,
resizeStatus.value === RESIZE_STATUS_RESIZING
? { overflowX: 'hidden', overflowY: 'hidden' }
: null,
];
const textareaProps: any = { const textareaProps: any = {
...otherProps, ...otherProps,
...attrs, ...attrs,
style, style,
class: cls, class: cls,
}; };
if (resizeStatus.value === RESIZE_START || resizeStatus.value === RESIZE_MEASURING) {
style.push({
overflowX: 'hidden',
overflowY: 'hidden',
});
}
if (!textareaProps.autofocus) { if (!textareaProps.autofocus) {
delete textareaProps.autofocus; delete textareaProps.autofocus;
} }
@ -130,7 +174,7 @@ const ResizableTextArea = defineComponent({
delete textareaProps.rows; delete textareaProps.rows;
} }
return ( return (
<ResizeObserver onResize={handleResize} disabled={!(autoSize || autosize)}> <ResizeObserver onResize={onInternalResize} disabled={!needAutoSize.value}>
{withDirectives((<textarea {...textareaProps} ref={textAreaRef} />) as VNode, [ {withDirectives((<textarea {...textareaProps} ref={textAreaRef} />) as VNode, [
[antInput], [antInput],
])} ])}
@ -138,26 +182,6 @@ const ResizableTextArea = defineComponent({
); );
}; };
watch(
() => props.value,
() => {
nextTick(() => {
resizeTextarea();
});
},
);
onMounted(() => {
nextTick(() => {
resizeTextarea();
});
});
const instance = getCurrentInstance();
expose({
resizeTextarea,
textArea: textAreaRef,
instance,
});
return () => { return () => {
return renderTextArea(); return renderTextArea();
}; };

48
components/input/calculateNodeHeight.tsx
View File

@ -1,21 +1,19 @@
// Thanks to https://github.com/andreypopp/react-textarea-autosize/
import type { CSSProperties } from 'vue'; import type { CSSProperties } from 'vue';
/** /**
* calculateNodeHeight(uiTextNode, useCache = false) * calculateNodeHeight(uiTextNode, useCache = false)
*/ */
const HIDDEN_TEXTAREA_STYLE = ` const HIDDEN_TEXTAREA_STYLE = `
min-height:0 !important; min-height:0 !important;
max-height:none !important; max-height:none !important;
height:0 !important; height:0 !important;
visibility:hidden !important; visibility:hidden !important;
overflow:hidden !important; overflow:hidden !important;
position:absolute !important; position:absolute !important;
z-index:-1000 !important; z-index:-1000 !important;
top:0 !important; top:0 !important;
right:0 !important right:0 !important;
pointer-events: none !important;
`; `;
const SIZING_STYLE = [ const SIZING_STYLE = [
@ -36,6 +34,7 @@ const SIZING_STYLE = [
'border-width', 'border-width',
'box-sizing', 'box-sizing',
'word-break', 'word-break',
'white-space',
]; ];
export interface NodeType { export interface NodeType {
@ -45,7 +44,7 @@ export interface NodeType {
boxSizing: string; boxSizing: string;
} }
const computedStyleCache: { [key: string]: NodeType } = {}; const computedStyleCache: Record<string, NodeType> = {};
let hiddenTextarea: HTMLTextAreaElement; let hiddenTextarea: HTMLTextAreaElement;
export function calculateNodeStyling(node: HTMLElement, useCache = false) { export function calculateNodeStyling(node: HTMLElement, useCache = false) {
@ -88,7 +87,7 @@ export function calculateNodeStyling(node: HTMLElement, useCache = false) {
return nodeInfo; return nodeInfo;
} }
export default function calculateNodeHeight( export default function calculateAutoSizeStyle(
uiTextNode: HTMLTextAreaElement, uiTextNode: HTMLTextAreaElement,
useCache = false, useCache = false,
minRows: number | null = null, minRows: number | null = null,
@ -122,11 +121,12 @@ export default function calculateNodeHeight(
hiddenTextarea.setAttribute('style', `${sizingStyle};${HIDDEN_TEXTAREA_STYLE}`); hiddenTextarea.setAttribute('style', `${sizingStyle};${HIDDEN_TEXTAREA_STYLE}`);
hiddenTextarea.value = uiTextNode.value || uiTextNode.placeholder || ''; hiddenTextarea.value = uiTextNode.value || uiTextNode.placeholder || '';
let minHeight = Number.MIN_SAFE_INTEGER; let minHeight: number | undefined = undefined;
let maxHeight = Number.MAX_SAFE_INTEGER; let maxHeight: number | undefined = undefined;
let height = hiddenTextarea.scrollHeight;
let overflowY: any; let overflowY: any;
let height = hiddenTextarea.scrollHeight;
if (boxSizing === 'border-box') { if (boxSizing === 'border-box') {
// border-box: add border, since height = content + padding + border // border-box: add border, since height = content + padding + border
height += borderSize; height += borderSize;
@ -155,11 +155,19 @@ export default function calculateNodeHeight(
height = Math.min(maxHeight, height); height = Math.min(maxHeight, height);
} }
} }
return {
const style: CSSProperties = {
height: `${height}px`, height: `${height}px`,
minHeight: `${minHeight}px`,
maxHeight: `${maxHeight}px`,
overflowY, overflowY,
resize: 'none', resize: 'none',
}; };
if (minHeight) {
style.minHeight = `${minHeight}px`;
}
if (maxHeight) {
style.maxHeight = `${maxHeight}px`;
}
return style;
} }