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

32
components/input/calculateNodeHeight.tsx
View File

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