import type { VNode } from 'vue'; import { defineComponent, inject, nextTick, withDirectives } from 'vue'; import antInputDirective from '../_util/antInputDirective'; import classNames from '../_util/classNames'; import omit from 'omit.js'; import inputProps from './inputProps'; import { hasProp, getComponent, getOptionProps } from '../_util/props-util'; import { defaultConfigProvider } from '../config-provider'; import ClearableLabeledInput from './ClearableLabeledInput'; export function fixControlledValue(value: string | number) { if (typeof value === 'undefined' || value === null) { return ''; } return value; } export function resolveOnChange(target: HTMLInputElement, e: Event, onChange?: Function) { if (onChange) { const event = e as any; if (e.type === 'click') { // click clear icon //event = Object.create(e); Object.defineProperty(event, 'target', { writable: true, }); Object.defineProperty(event, 'currentTarget', { writable: true, }); event.target = target; event.currentTarget = target; const originalInputValue = target.value; // change target ref value cause e.target.value should be '' when clear input target.value = ''; onChange(event); // reset target ref value target.value = originalInputValue; return; } onChange(event); } } export function getInputClassName(prefixCls: string, size: string, disabled: boolean) { return classNames(prefixCls, { [`${prefixCls}-sm`]: size === 'small', [`${prefixCls}-lg`]: size === 'large', [`${prefixCls}-disabled`]: disabled, }); } export default defineComponent({ name: 'AInput', inheritAttrs: false, props: { ...inputProps, }, setup() { return { configProvider: inject('configProvider', defaultConfigProvider), removePasswordTimeout: undefined, input: null, clearableInput: null, }; }, data() { const props = this.$props; const value = typeof props.value === 'undefined' ? props.defaultValue : props.value; return { stateValue: typeof value === 'undefined' ? '' : value, isFocused: false, }; }, watch: { value(val) { this.stateValue = val; }, }, mounted() { nextTick(() => { if (process.env.NODE_ENV === 'test') { if (this.autofocus) { this.focus(); } } this.clearPasswordValueAttribute(); }); }, beforeUnmount() { if (this.removePasswordTimeout) { clearTimeout(this.removePasswordTimeout); } }, methods: { handleInputFocus(e: Event) { this.isFocused = true; this.onFocus && this.onFocus(e); }, handleInputBlur(e: Event) { this.isFocused = false; this.onBlur && this.onBlur(e); }, focus() { this.input.focus(); }, blur() { this.input.blur(); }, select() { this.input.select(); }, saveClearableInput(input: HTMLInputElement) { this.clearableInput = input; }, saveInput(input: HTMLInputElement) { this.input = input; }, setValue(value: string | number, callback?: Function) { if (this.stateValue === value) { return; } if (!hasProp(this, 'value')) { this.stateValue = value; } else { this.$forceUpdate(); } nextTick(() => { callback && callback(); }); }, triggerChange(e: Event) { this.$emit('update:value', (e.target as HTMLInputElement).value); this.$emit('change', e); this.$emit('input', e); }, handleReset(e: Event) { this.setValue('', () => { this.focus(); }); resolveOnChange(this.input, e, this.triggerChange); }, renderInput(prefixCls: string, { addonBefore, addonAfter }) { const otherProps = omit(this.$props, [ 'prefixCls', 'onPressEnter', 'addonBefore', 'addonAfter', 'prefix', 'suffix', 'allowClear', 'defaultValue', 'lazy', 'size', 'inputPrefixCls', 'loading', ]); const { handleKeyDown, handleChange, handleInputFocus, handleInputBlur, size, disabled, $attrs, } = this; const inputProps: any = { ...otherProps, ...$attrs, onKeydown: handleKeyDown, class: classNames(getInputClassName(prefixCls, size, disabled), { [$attrs.class as string]: $attrs.class && !addonBefore && !addonAfter, }), ref: this.saveInput, key: 'ant-input', onInput: handleChange, onChange: handleChange, onFocus: handleInputFocus, onBlur: handleInputBlur, }; if (!inputProps.autofocus) { delete inputProps.autofocus; } const inputNode = ; return withDirectives(inputNode as VNode, [[antInputDirective]]); }, clearPasswordValueAttribute() { // https://github.com/ant-design/ant-design/issues/20541 this.removePasswordTimeout = setTimeout(() => { if ( this.input && this.input.getAttribute && this.input.getAttribute('type') === 'password' && this.input.hasAttribute('value') ) { this.input.removeAttribute('value'); } }); }, handleChange(e: Event) { const { value, composing, isComposing } = e.target as any; // https://github.com/vueComponent/ant-design-vue/issues/2203 if (((isComposing || composing) && this.lazy) || this.stateValue === value) return; this.setValue(value, this.clearPasswordValueAttribute); resolveOnChange(this.input, e, this.triggerChange); }, handleKeyDown(e: KeyboardEvent) { if (e.keyCode === 13) { this.$emit('pressEnter', e); } this.$emit('keydown', e); }, }, render() { const { prefixCls: customizePrefixCls } = this.$props; const { stateValue, isFocused } = this.$data; const getPrefixCls = this.configProvider.getPrefixCls; const prefixCls = getPrefixCls('input', customizePrefixCls); const addonAfter = getComponent(this, 'addonAfter'); const addonBefore = getComponent(this, 'addonBefore'); const suffix = getComponent(this, 'suffix'); const prefix = getComponent(this, 'prefix'); const props: any = { ...this.$attrs, ...getOptionProps(this), prefixCls, inputType: 'input', value: fixControlledValue(stateValue), element: this.renderInput(prefixCls, { addonAfter, addonBefore }), handleReset: this.handleReset, addonAfter, addonBefore, suffix, prefix, isFocused, }; return ; }, });