2021-12-15 20:48:24 +08:00
|
|
|
|
import {
|
|
|
|
|
computed,
|
|
|
|
|
defineComponent,
|
|
|
|
|
getCurrentInstance,
|
|
|
|
|
nextTick,
|
|
|
|
|
onMounted,
|
|
|
|
|
ref,
|
|
|
|
|
watch,
|
|
|
|
|
watchEffect,
|
|
|
|
|
} from 'vue';
|
2020-03-07 19:45:13 +08:00
|
|
|
|
import ClearableLabeledInput from './ClearableLabeledInput';
|
|
|
|
|
import ResizableTextArea from './ResizableTextArea';
|
2021-12-15 20:48:24 +08:00
|
|
|
|
import { textAreaProps } from './inputProps';
|
|
|
|
|
import type { InputFocusOptions } from './Input';
|
|
|
|
|
import { fixControlledValue, resolveOnChange, triggerFocus } from './Input';
|
2020-10-26 11:28:56 +08:00
|
|
|
|
import classNames from '../_util/classNames';
|
2021-09-25 16:51:32 +08:00
|
|
|
|
import { useInjectFormItemContext } from '../form/FormItemContext';
|
2021-12-15 20:48:24 +08:00
|
|
|
|
import type { FocusEventHandler } from '../_util/EventInterface';
|
|
|
|
|
import useConfigInject from '../_util/hooks/useConfigInject';
|
|
|
|
|
import omit from '../_util/omit';
|
2018-03-19 10:16:27 +08:00
|
|
|
|
|
2021-12-15 20:48:24 +08:00
|
|
|
|
function fixEmojiLength(value: string, maxLength: number) {
|
|
|
|
|
return [...(value || '')].slice(0, maxLength).join('');
|
|
|
|
|
}
|
2017-12-07 12:31:12 +08:00
|
|
|
|
|
2020-10-16 14:24:14 +08:00
|
|
|
|
export default defineComponent({
|
2018-04-08 21:17:20 +08:00
|
|
|
|
name: 'ATextarea',
|
2020-01-18 17:06:09 +08:00
|
|
|
|
inheritAttrs: false,
|
2021-12-15 20:48:24 +08:00
|
|
|
|
props: textAreaProps,
|
|
|
|
|
setup(props, { attrs, expose, emit }) {
|
2021-09-25 16:51:32 +08:00
|
|
|
|
const formItemContext = useInjectFormItemContext();
|
2021-12-15 20:48:24 +08:00
|
|
|
|
const stateValue = ref(props.value === undefined ? props.defaultValue : props.value);
|
|
|
|
|
const resizableTextArea = ref();
|
2021-12-16 14:30:27 +08:00
|
|
|
|
const mergedValue = ref('');
|
2021-12-15 20:48:24 +08:00
|
|
|
|
const { prefixCls, size, direction } = useConfigInject('input', props);
|
|
|
|
|
const showCount = computed(() => {
|
|
|
|
|
return (props.showCount as any) === '' || props.showCount || false;
|
|
|
|
|
});
|
|
|
|
|
// Max length value
|
|
|
|
|
const hasMaxLength = computed(() => Number(props.maxlength) > 0);
|
|
|
|
|
const compositing = ref(false);
|
|
|
|
|
const instance = getCurrentInstance();
|
|
|
|
|
watch(
|
|
|
|
|
() => props.value,
|
|
|
|
|
() => {
|
|
|
|
|
if ('value' in instance.vnode.props || {}) {
|
|
|
|
|
stateValue.value = props.value ?? '';
|
|
|
|
|
}
|
|
|
|
|
},
|
|
|
|
|
);
|
|
|
|
|
|
|
|
|
|
const focus = (option?: InputFocusOptions) => {
|
|
|
|
|
triggerFocus(resizableTextArea.value?.textArea, option);
|
2020-06-27 14:02:30 +08:00
|
|
|
|
};
|
2021-12-15 20:48:24 +08:00
|
|
|
|
|
|
|
|
|
const blur = () => {
|
|
|
|
|
resizableTextArea.value?.textArea?.blur();
|
2019-01-12 11:33:27 +08:00
|
|
|
|
};
|
2021-12-15 20:48:24 +08:00
|
|
|
|
|
|
|
|
|
const setValue = (value: string | number, callback?: Function) => {
|
|
|
|
|
if (stateValue.value === value) {
|
|
|
|
|
return;
|
2020-07-31 12:43:01 +08:00
|
|
|
|
}
|
2021-12-15 20:48:24 +08:00
|
|
|
|
if (props.value === undefined) {
|
|
|
|
|
stateValue.value = value;
|
2020-03-07 19:45:13 +08:00
|
|
|
|
} else {
|
2021-12-16 14:30:27 +08:00
|
|
|
|
nextTick(() => {
|
|
|
|
|
if (resizableTextArea.value.textArea.value !== mergedValue.value) {
|
|
|
|
|
resizableTextArea.value?.instance.update?.();
|
|
|
|
|
}
|
|
|
|
|
});
|
2019-01-03 20:51:56 +08:00
|
|
|
|
}
|
2020-10-28 15:31:45 +08:00
|
|
|
|
nextTick(() => {
|
2020-07-30 18:41:38 +08:00
|
|
|
|
callback && callback();
|
|
|
|
|
});
|
2021-12-15 20:48:24 +08:00
|
|
|
|
};
|
|
|
|
|
|
|
|
|
|
const handleKeyDown = (e: KeyboardEvent) => {
|
2017-12-07 12:31:12 +08:00
|
|
|
|
if (e.keyCode === 13) {
|
2021-12-15 20:48:24 +08:00
|
|
|
|
emit('pressEnter', e);
|
2017-12-07 12:31:12 +08:00
|
|
|
|
}
|
2021-12-15 20:48:24 +08:00
|
|
|
|
emit('keydown', e);
|
|
|
|
|
};
|
2017-12-07 12:31:12 +08:00
|
|
|
|
|
2021-12-15 20:48:24 +08:00
|
|
|
|
const onBlur: FocusEventHandler = e => {
|
|
|
|
|
const { onBlur } = props;
|
|
|
|
|
onBlur?.(e);
|
|
|
|
|
formItemContext.onFieldBlur();
|
|
|
|
|
};
|
|
|
|
|
const triggerChange = (e: Event) => {
|
|
|
|
|
emit('update:value', (e.target as HTMLInputElement).value);
|
|
|
|
|
emit('change', e);
|
|
|
|
|
emit('input', e);
|
|
|
|
|
formItemContext.onFieldChange();
|
|
|
|
|
};
|
2020-06-27 14:02:30 +08:00
|
|
|
|
|
2021-12-15 20:48:24 +08:00
|
|
|
|
const handleReset = (e: MouseEvent) => {
|
|
|
|
|
resolveOnChange(resizableTextArea.value.textArea, e, triggerChange);
|
|
|
|
|
setValue('', () => {
|
|
|
|
|
focus();
|
2020-03-07 19:45:13 +08:00
|
|
|
|
});
|
2021-12-15 20:48:24 +08:00
|
|
|
|
};
|
2020-03-07 19:45:13 +08:00
|
|
|
|
|
2021-12-15 20:48:24 +08:00
|
|
|
|
const handleChange = (e: Event) => {
|
|
|
|
|
const { value, composing } = e.target as any;
|
|
|
|
|
compositing.value = (e as any).isComposing || composing;
|
|
|
|
|
if ((compositing.value && props.lazy) || stateValue.value === value) return;
|
|
|
|
|
let triggerValue = (e.currentTarget as any).value;
|
|
|
|
|
if (hasMaxLength.value) {
|
|
|
|
|
triggerValue = fixEmojiLength(triggerValue, props.maxlength!);
|
|
|
|
|
}
|
|
|
|
|
resolveOnChange(e.currentTarget as any, e, triggerChange, triggerValue);
|
|
|
|
|
setValue(triggerValue);
|
|
|
|
|
};
|
|
|
|
|
const renderTextArea = () => {
|
|
|
|
|
const { style, class: customClass } = attrs;
|
|
|
|
|
const { bordered = true } = props;
|
2020-03-07 19:45:13 +08:00
|
|
|
|
const resizeProps = {
|
2021-12-15 20:48:24 +08:00
|
|
|
|
...omit(props, ['allowClear']),
|
|
|
|
|
...attrs,
|
2021-12-15 22:27:07 +08:00
|
|
|
|
style: showCount.value ? {} : style,
|
2021-12-15 20:48:24 +08:00
|
|
|
|
class: {
|
|
|
|
|
[`${prefixCls.value}-borderless`]: !bordered,
|
|
|
|
|
[`${customClass}`]: customClass && !showCount.value,
|
|
|
|
|
[`${prefixCls.value}-sm`]: size.value === 'small',
|
|
|
|
|
[`${prefixCls.value}-lg`]: size.value === 'large',
|
|
|
|
|
},
|
2020-10-26 11:28:56 +08:00
|
|
|
|
showCount: null,
|
2021-12-15 20:48:24 +08:00
|
|
|
|
prefixCls: prefixCls.value,
|
|
|
|
|
onInput: handleChange,
|
|
|
|
|
onChange: handleChange,
|
|
|
|
|
onBlur,
|
|
|
|
|
onKeydown: handleKeyDown,
|
2020-03-07 19:45:13 +08:00
|
|
|
|
};
|
2021-12-15 20:48:24 +08:00
|
|
|
|
if (props.valueModifiers?.lazy) {
|
2021-12-10 16:29:04 +08:00
|
|
|
|
delete resizeProps.onInput;
|
|
|
|
|
}
|
2021-09-25 16:51:32 +08:00
|
|
|
|
return (
|
|
|
|
|
<ResizableTextArea
|
|
|
|
|
{...resizeProps}
|
2021-12-15 20:48:24 +08:00
|
|
|
|
id={resizeProps.id ?? formItemContext.id.value}
|
|
|
|
|
ref={resizableTextArea}
|
|
|
|
|
maxlength={props.maxlength}
|
2021-09-25 16:51:32 +08:00
|
|
|
|
/>
|
|
|
|
|
);
|
2019-01-12 11:33:27 +08:00
|
|
|
|
};
|
2020-10-26 11:28:56 +08:00
|
|
|
|
|
2021-12-15 20:48:24 +08:00
|
|
|
|
onMounted(() => {
|
|
|
|
|
if (process.env.NODE_ENV === 'test') {
|
|
|
|
|
if (props.autofocus) {
|
|
|
|
|
focus();
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
});
|
|
|
|
|
expose({
|
|
|
|
|
focus,
|
|
|
|
|
blur,
|
|
|
|
|
resizableTextArea,
|
|
|
|
|
});
|
2021-12-16 14:30:27 +08:00
|
|
|
|
|
2021-12-15 20:48:24 +08:00
|
|
|
|
watchEffect(() => {
|
|
|
|
|
let val = fixControlledValue(stateValue.value) as string;
|
|
|
|
|
if (
|
|
|
|
|
!compositing.value &&
|
|
|
|
|
hasMaxLength.value &&
|
|
|
|
|
(props.value === null || props.value === undefined)
|
|
|
|
|
) {
|
|
|
|
|
// fix #27612 将value转为数组进行截取,解决 '😂'.length === 2 等emoji表情导致的截取乱码的问题
|
|
|
|
|
val = fixEmojiLength(val, props.maxlength);
|
|
|
|
|
}
|
|
|
|
|
mergedValue.value = val;
|
|
|
|
|
});
|
|
|
|
|
return () => {
|
|
|
|
|
const { maxlength, bordered = true } = props;
|
|
|
|
|
const { style, class: customClass } = attrs;
|
|
|
|
|
|
|
|
|
|
const inputProps: any = {
|
|
|
|
|
...props,
|
|
|
|
|
...attrs,
|
|
|
|
|
prefixCls: prefixCls.value,
|
|
|
|
|
inputType: 'text',
|
|
|
|
|
handleReset,
|
|
|
|
|
direction: direction.value,
|
|
|
|
|
bordered,
|
|
|
|
|
style: showCount.value ? undefined : style,
|
|
|
|
|
};
|
2020-10-26 11:28:56 +08:00
|
|
|
|
|
2021-12-15 20:48:24 +08:00
|
|
|
|
let textareaNode = (
|
|
|
|
|
<ClearableLabeledInput
|
|
|
|
|
{...inputProps}
|
|
|
|
|
value={mergedValue.value}
|
|
|
|
|
v-slots={{ element: renderTextArea }}
|
|
|
|
|
/>
|
2020-10-26 11:28:56 +08:00
|
|
|
|
);
|
2021-12-15 20:48:24 +08:00
|
|
|
|
|
|
|
|
|
if (showCount.value) {
|
|
|
|
|
const valueLength = [...mergedValue.value].length;
|
|
|
|
|
let dataCount = '';
|
|
|
|
|
if (typeof showCount.value === 'object') {
|
|
|
|
|
dataCount = showCount.value.formatter({ count: valueLength, maxlength });
|
|
|
|
|
} else {
|
|
|
|
|
dataCount = `${valueLength}${hasMaxLength.value ? ` / ${maxlength}` : ''}`;
|
|
|
|
|
}
|
|
|
|
|
textareaNode = (
|
|
|
|
|
<div
|
|
|
|
|
class={classNames(
|
|
|
|
|
`${prefixCls.value}-textarea`,
|
|
|
|
|
{
|
|
|
|
|
[`${prefixCls.value}-textarea-rtl`]: direction.value === 'rtl',
|
|
|
|
|
},
|
|
|
|
|
`${prefixCls.value}-textarea-show-count`,
|
|
|
|
|
customClass,
|
|
|
|
|
)}
|
|
|
|
|
style={style}
|
|
|
|
|
data-count={dataCount}
|
|
|
|
|
>
|
|
|
|
|
{textareaNode}
|
|
|
|
|
</div>
|
|
|
|
|
);
|
|
|
|
|
}
|
|
|
|
|
return textareaNode;
|
|
|
|
|
};
|
2017-12-07 12:31:12 +08:00
|
|
|
|
},
|
2020-10-16 14:24:14 +08:00
|
|
|
|
});
|