2020-10-28 07:31:45 +00:00
|
|
|
import { defineComponent, inject, nextTick } from 'vue';
|
2020-03-07 11:45:13 +00:00
|
|
|
import ClearableLabeledInput from './ClearableLabeledInput';
|
|
|
|
import ResizableTextArea from './ResizableTextArea';
|
2019-01-12 03:33:27 +00:00
|
|
|
import inputProps from './inputProps';
|
2020-06-27 06:02:30 +00:00
|
|
|
import { hasProp, getOptionProps } from '../_util/props-util';
|
2020-09-30 02:47:18 +00:00
|
|
|
import { defaultConfigProvider } from '../config-provider';
|
2020-03-07 11:45:13 +00:00
|
|
|
import { fixControlledValue, resolveOnChange } from './Input';
|
2020-10-26 03:28:56 +00:00
|
|
|
import classNames from '../_util/classNames';
|
2020-10-11 13:31:57 +00:00
|
|
|
import PropTypes, { withUndefined } from '../_util/vue-types';
|
2018-03-19 02:16:27 +00:00
|
|
|
|
2020-03-07 11:45:13 +00:00
|
|
|
const TextAreaProps = {
|
|
|
|
...inputProps,
|
2020-10-11 13:31:57 +00:00
|
|
|
autosize: withUndefined(PropTypes.oneOfType([Object, Boolean])),
|
|
|
|
autoSize: withUndefined(PropTypes.oneOfType([Object, Boolean])),
|
2020-10-27 15:47:20 +00:00
|
|
|
showCount: PropTypes.looseBool,
|
2021-03-16 04:54:22 +00:00
|
|
|
onCompositionstart: PropTypes.func,
|
|
|
|
onCompositionend: PropTypes.func,
|
2020-03-07 11:45:13 +00:00
|
|
|
};
|
2017-12-07 04:31:12 +00:00
|
|
|
|
2020-10-16 06:24:14 +00:00
|
|
|
export default defineComponent({
|
2018-04-08 13:17:20 +00:00
|
|
|
name: 'ATextarea',
|
2020-01-18 09:06:09 +00:00
|
|
|
inheritAttrs: false,
|
2019-02-01 09:23:00 +00:00
|
|
|
props: {
|
2020-03-07 11:45:13 +00:00
|
|
|
...TextAreaProps,
|
2019-02-01 09:23:00 +00:00
|
|
|
},
|
2020-06-27 06:02:30 +00:00
|
|
|
setup() {
|
|
|
|
return {
|
2020-09-30 02:47:18 +00:00
|
|
|
configProvider: inject('configProvider', defaultConfigProvider),
|
2020-10-16 06:24:14 +00:00
|
|
|
resizableTextArea: null,
|
|
|
|
clearableInput: null,
|
2020-06-27 06:02:30 +00:00
|
|
|
};
|
2019-04-07 09:19:18 +00:00
|
|
|
},
|
2019-01-12 03:33:27 +00:00
|
|
|
data() {
|
2020-03-07 11:45:13 +00:00
|
|
|
const value = typeof this.value === 'undefined' ? this.defaultValue : this.value;
|
2017-12-07 04:31:12 +00:00
|
|
|
return {
|
2020-05-06 07:05:08 +00:00
|
|
|
stateValue: typeof value === 'undefined' ? '' : value,
|
2019-01-12 03:33:27 +00:00
|
|
|
};
|
2017-12-07 04:31:12 +00:00
|
|
|
},
|
|
|
|
watch: {
|
2020-11-07 14:39:18 +00:00
|
|
|
value(val: string) {
|
2020-03-07 11:45:13 +00:00
|
|
|
this.stateValue = val;
|
2020-09-21 13:48:12 +00:00
|
|
|
},
|
2017-12-07 04:31:12 +00:00
|
|
|
},
|
2020-07-31 04:43:01 +00:00
|
|
|
mounted() {
|
2020-10-28 07:31:45 +00:00
|
|
|
nextTick(() => {
|
2020-07-31 04:43:01 +00:00
|
|
|
if (process.env.NODE_ENV === 'test') {
|
|
|
|
if (this.autofocus) {
|
|
|
|
this.focus();
|
|
|
|
}
|
|
|
|
}
|
|
|
|
});
|
|
|
|
},
|
2017-12-07 04:31:12 +00:00
|
|
|
methods: {
|
2020-11-07 14:39:18 +00:00
|
|
|
setValue(value: string, callback?: Function) {
|
2020-03-07 11:45:13 +00:00
|
|
|
if (!hasProp(this, 'value')) {
|
|
|
|
this.stateValue = value;
|
|
|
|
} else {
|
2021-08-10 06:36:28 +00:00
|
|
|
(this as any).$forceUpdate();
|
2019-01-03 12:51:56 +00:00
|
|
|
}
|
2020-10-28 07:31:45 +00:00
|
|
|
nextTick(() => {
|
2020-07-30 10:41:38 +00:00
|
|
|
callback && callback();
|
|
|
|
});
|
2019-01-03 12:51:56 +00:00
|
|
|
},
|
2020-10-16 06:24:14 +00:00
|
|
|
handleKeyDown(e: KeyboardEvent) {
|
2017-12-07 04:31:12 +00:00
|
|
|
if (e.keyCode === 13) {
|
2019-01-12 03:33:27 +00:00
|
|
|
this.$emit('pressEnter', e);
|
2017-12-07 04:31:12 +00:00
|
|
|
}
|
2019-01-12 03:33:27 +00:00
|
|
|
this.$emit('keydown', e);
|
2017-12-07 04:31:12 +00:00
|
|
|
},
|
2020-10-16 06:24:14 +00:00
|
|
|
triggerChange(e: Event) {
|
|
|
|
this.$emit('update:value', (e.target as any).value);
|
2020-03-07 11:45:13 +00:00
|
|
|
this.$emit('change', e);
|
|
|
|
this.$emit('input', e);
|
2017-12-07 04:31:12 +00:00
|
|
|
},
|
2020-10-16 06:24:14 +00:00
|
|
|
handleChange(e: Event) {
|
|
|
|
const { value, composing, isComposing } = e.target as any;
|
|
|
|
if (((isComposing || composing) && this.lazy) || this.stateValue === value) return;
|
2019-11-15 10:21:50 +00:00
|
|
|
|
2020-11-07 14:39:18 +00:00
|
|
|
this.setValue((e.target as HTMLTextAreaElement).value, () => {
|
2021-06-21 02:01:16 +00:00
|
|
|
this.resizableTextArea?.resizeTextarea();
|
2020-03-07 11:45:13 +00:00
|
|
|
});
|
2020-07-30 10:41:38 +00:00
|
|
|
resolveOnChange(this.resizableTextArea.textArea, e, this.triggerChange);
|
2017-12-07 04:31:12 +00:00
|
|
|
},
|
|
|
|
|
2019-01-12 03:33:27 +00:00
|
|
|
focus() {
|
2020-06-27 06:02:30 +00:00
|
|
|
this.resizableTextArea.textArea.focus();
|
2017-12-07 04:31:12 +00:00
|
|
|
},
|
|
|
|
|
2019-01-12 03:33:27 +00:00
|
|
|
blur() {
|
2020-06-27 06:02:30 +00:00
|
|
|
this.resizableTextArea.textArea.blur();
|
|
|
|
},
|
2020-10-16 06:24:14 +00:00
|
|
|
saveTextArea(resizableTextArea: any) {
|
2020-06-27 06:02:30 +00:00
|
|
|
this.resizableTextArea = resizableTextArea;
|
|
|
|
},
|
|
|
|
|
2020-11-07 14:39:18 +00:00
|
|
|
saveClearableInput(clearableInput: HTMLTextAreaElement) {
|
2020-06-27 06:02:30 +00:00
|
|
|
this.clearableInput = clearableInput;
|
2020-03-07 11:45:13 +00:00
|
|
|
},
|
2020-10-16 06:24:14 +00:00
|
|
|
handleReset(e: Event) {
|
2020-03-07 11:45:13 +00:00
|
|
|
this.setValue('', () => {
|
2020-06-27 06:02:30 +00:00
|
|
|
this.resizableTextArea.renderTextArea();
|
2020-03-07 11:45:13 +00:00
|
|
|
this.focus();
|
|
|
|
});
|
2020-07-30 10:41:38 +00:00
|
|
|
resolveOnChange(this.resizableTextArea.textArea, e, this.triggerChange);
|
2020-03-07 11:45:13 +00:00
|
|
|
},
|
|
|
|
|
2020-10-16 06:24:14 +00:00
|
|
|
renderTextArea(prefixCls: string) {
|
2020-03-07 11:45:13 +00:00
|
|
|
const props = getOptionProps(this);
|
2020-10-26 03:28:56 +00:00
|
|
|
const { style, class: customClass } = this.$attrs;
|
2020-03-07 11:45:13 +00:00
|
|
|
const resizeProps = {
|
2020-06-27 06:02:30 +00:00
|
|
|
...props,
|
|
|
|
...this.$attrs,
|
2020-11-29 08:35:44 +00:00
|
|
|
style: !props.showCount && style,
|
|
|
|
class: !props.showCount && customClass,
|
2020-10-26 03:28:56 +00:00
|
|
|
showCount: null,
|
2020-06-27 06:02:30 +00:00
|
|
|
prefixCls,
|
|
|
|
onInput: this.handleChange,
|
2020-08-11 10:26:09 +00:00
|
|
|
onChange: this.handleChange,
|
2020-06-27 06:02:30 +00:00
|
|
|
onKeydown: this.handleKeyDown,
|
2020-03-07 11:45:13 +00:00
|
|
|
};
|
2020-06-27 06:02:30 +00:00
|
|
|
return <ResizableTextArea {...resizeProps} ref={this.saveTextArea} />;
|
2017-12-07 04:31:12 +00:00
|
|
|
},
|
|
|
|
},
|
2019-01-12 03:33:27 +00:00
|
|
|
render() {
|
2020-10-26 03:28:56 +00:00
|
|
|
const { stateValue, prefixCls: customizePrefixCls, maxlength, showCount } = this;
|
|
|
|
const { style, class: customClass } = this.$attrs;
|
2019-09-11 14:35:25 +00:00
|
|
|
const getPrefixCls = this.configProvider.getPrefixCls;
|
2019-04-07 09:19:18 +00:00
|
|
|
const prefixCls = getPrefixCls('input', customizePrefixCls);
|
2020-11-07 14:39:18 +00:00
|
|
|
let value = fixControlledValue(stateValue) as string;
|
2020-10-26 03:28:56 +00:00
|
|
|
// Max length value
|
|
|
|
const hasMaxlength = Number(maxlength) > 0;
|
|
|
|
value = hasMaxlength ? value.slice(0, maxlength) : value;
|
2020-10-16 06:24:14 +00:00
|
|
|
const props: any = {
|
2020-06-27 06:02:30 +00:00
|
|
|
...getOptionProps(this),
|
|
|
|
...this.$attrs,
|
|
|
|
prefixCls,
|
|
|
|
inputType: 'text',
|
|
|
|
element: this.renderTextArea(prefixCls),
|
|
|
|
handleReset: this.handleReset,
|
2019-01-12 03:33:27 +00:00
|
|
|
};
|
2020-10-26 03:28:56 +00:00
|
|
|
|
|
|
|
let textareaNode = (
|
|
|
|
<ClearableLabeledInput {...props} value={value} ref={this.saveClearableInput} />
|
|
|
|
);
|
|
|
|
|
|
|
|
if (showCount) {
|
|
|
|
const valueLength = [...value].length;
|
|
|
|
const dataCount = `${valueLength}${hasMaxlength ? ` / ${maxlength}` : ''}`;
|
|
|
|
textareaNode = (
|
|
|
|
<div
|
2020-10-27 15:47:20 +00:00
|
|
|
class={classNames(
|
2020-10-26 03:28:56 +00:00
|
|
|
`${prefixCls}-textarea`,
|
|
|
|
`${prefixCls}-textarea-show-count`,
|
|
|
|
customClass,
|
|
|
|
)}
|
|
|
|
style={style}
|
|
|
|
data-count={dataCount}
|
|
|
|
>
|
|
|
|
{textareaNode}
|
|
|
|
</div>
|
|
|
|
);
|
|
|
|
}
|
|
|
|
return textareaNode;
|
2017-12-07 04:31:12 +00:00
|
|
|
},
|
2020-10-16 06:24:14 +00:00
|
|
|
});
|