2020-10-07 14:49:01 +00:00
|
|
|
import { cloneElement } from '../../_util/vnode';
|
2020-10-26 14:14:00 +00:00
|
|
|
import {
|
|
|
|
defineComponent,
|
|
|
|
getCurrentInstance,
|
|
|
|
inject,
|
|
|
|
onMounted,
|
|
|
|
VNode,
|
|
|
|
VNodeChild,
|
|
|
|
withDirectives,
|
|
|
|
} from 'vue';
|
2020-10-07 14:49:01 +00:00
|
|
|
import PropTypes from '../../_util/vue-types';
|
|
|
|
import { RefObject } from '../../_util/createRef';
|
|
|
|
import antInput from '../../_util/antInputDirective';
|
|
|
|
|
|
|
|
interface InputProps {
|
|
|
|
prefixCls: string;
|
|
|
|
id: string;
|
|
|
|
inputElement: VNodeChild;
|
|
|
|
disabled: boolean;
|
|
|
|
autofocus: boolean;
|
|
|
|
autocomplete: string;
|
|
|
|
editable: boolean;
|
|
|
|
accessibilityIndex: number;
|
|
|
|
value: string;
|
|
|
|
open: boolean;
|
2021-06-07 09:35:03 +00:00
|
|
|
tabindex: number | string;
|
2020-10-07 14:49:01 +00:00
|
|
|
/** Pass accessibility props to input */
|
|
|
|
attrs: object;
|
|
|
|
inputRef: RefObject;
|
|
|
|
onKeydown: EventHandlerNonNull;
|
|
|
|
onMousedown: EventHandlerNonNull;
|
|
|
|
onChange: EventHandlerNonNull;
|
|
|
|
onPaste: EventHandlerNonNull;
|
|
|
|
onCompositionstart: EventHandlerNonNull;
|
|
|
|
onCompositionend: EventHandlerNonNull;
|
|
|
|
}
|
|
|
|
|
2020-11-01 10:07:23 +00:00
|
|
|
const Input = defineComponent<InputProps, { VCSelectContainerEvent: any; blurTimeout: any }>({
|
2020-10-07 14:49:01 +00:00
|
|
|
name: 'Input',
|
|
|
|
inheritAttrs: false,
|
2020-10-26 14:14:00 +00:00
|
|
|
setup(props) {
|
|
|
|
if (process.env.NODE_ENV === 'test') {
|
|
|
|
onMounted(() => {
|
|
|
|
const ins = getCurrentInstance();
|
|
|
|
if (props.autofocus) {
|
|
|
|
if (ins.vnode && ins.vnode.el) {
|
|
|
|
ins.vnode.el.focus();
|
|
|
|
}
|
|
|
|
}
|
|
|
|
});
|
|
|
|
}
|
2020-10-07 14:49:01 +00:00
|
|
|
return {
|
2020-11-01 10:07:23 +00:00
|
|
|
blurTimeout: null,
|
2020-10-07 14:49:01 +00:00
|
|
|
VCSelectContainerEvent: inject('VCSelectContainerEvent'),
|
|
|
|
};
|
|
|
|
},
|
|
|
|
render() {
|
|
|
|
const {
|
|
|
|
prefixCls,
|
|
|
|
id,
|
|
|
|
inputElement,
|
|
|
|
disabled,
|
|
|
|
tabindex,
|
|
|
|
autofocus,
|
|
|
|
autocomplete,
|
|
|
|
editable,
|
|
|
|
accessibilityIndex,
|
|
|
|
value,
|
|
|
|
onKeydown,
|
|
|
|
onMousedown,
|
|
|
|
onChange,
|
|
|
|
onPaste,
|
|
|
|
onCompositionstart,
|
|
|
|
onCompositionend,
|
|
|
|
open,
|
|
|
|
inputRef,
|
|
|
|
attrs,
|
|
|
|
} = this.$props as InputProps;
|
|
|
|
let inputNode: any = withDirectives((inputElement || <input />) as VNode, [[antInput]]);
|
|
|
|
|
|
|
|
const inputProps = inputNode.props || {};
|
|
|
|
const {
|
|
|
|
onKeydown: onOriginKeyDown,
|
|
|
|
onInput: onOriginInput,
|
|
|
|
onMousedown: onOriginMouseDown,
|
|
|
|
onCompositionstart: onOriginCompositionStart,
|
|
|
|
onCompositionend: onOriginCompositionEnd,
|
|
|
|
style,
|
|
|
|
} = inputProps;
|
2020-10-08 14:51:09 +00:00
|
|
|
inputNode = cloneElement(
|
|
|
|
inputNode,
|
|
|
|
Object.assign(
|
|
|
|
{
|
|
|
|
id,
|
|
|
|
ref: inputRef,
|
|
|
|
disabled,
|
|
|
|
tabindex,
|
|
|
|
autocomplete: autocomplete || 'off',
|
|
|
|
autofocus,
|
|
|
|
class: `${prefixCls}-selection-search-input`,
|
|
|
|
style: { ...style, opacity: editable ? null : 0 },
|
|
|
|
role: 'combobox',
|
|
|
|
'aria-expanded': open,
|
|
|
|
'aria-haspopup': 'listbox',
|
|
|
|
'aria-owns': `${id}_list`,
|
|
|
|
'aria-autocomplete': 'list',
|
|
|
|
'aria-controls': `${id}_list`,
|
|
|
|
'aria-activedescendant': `${id}_list_${accessibilityIndex}`,
|
|
|
|
...attrs,
|
|
|
|
value: editable ? value : '',
|
|
|
|
readonly: !editable,
|
|
|
|
unselectable: !editable ? 'on' : null,
|
|
|
|
onKeydown: (event: KeyboardEvent) => {
|
|
|
|
onKeydown(event);
|
|
|
|
if (onOriginKeyDown) {
|
|
|
|
onOriginKeyDown(event);
|
|
|
|
}
|
|
|
|
},
|
|
|
|
onMousedown: (event: MouseEvent) => {
|
|
|
|
onMousedown(event);
|
|
|
|
if (onOriginMouseDown) {
|
|
|
|
onOriginMouseDown(event);
|
|
|
|
}
|
|
|
|
},
|
|
|
|
onInput: (event: Event) => {
|
|
|
|
onChange(event);
|
|
|
|
if (onOriginInput) {
|
|
|
|
onOriginInput(event);
|
|
|
|
}
|
|
|
|
},
|
|
|
|
onCompositionstart(event: CompositionEvent) {
|
|
|
|
onCompositionstart(event);
|
|
|
|
if (onOriginCompositionStart) {
|
|
|
|
onOriginCompositionStart(event);
|
|
|
|
}
|
|
|
|
},
|
|
|
|
onCompositionend(event: CompositionEvent) {
|
|
|
|
onCompositionend(event);
|
|
|
|
if (onOriginCompositionEnd) {
|
|
|
|
onOriginCompositionEnd(event);
|
|
|
|
}
|
|
|
|
},
|
|
|
|
onPaste,
|
|
|
|
onFocus: (...args: any[]) => {
|
2020-11-01 10:07:23 +00:00
|
|
|
clearTimeout(this.blurTimeout);
|
2020-10-08 14:51:09 +00:00
|
|
|
this.VCSelectContainerEvent?.focus(args[0]);
|
|
|
|
},
|
|
|
|
onBlur: (...args: any[]) => {
|
2020-11-01 10:07:23 +00:00
|
|
|
this.blurTimeout = setTimeout(() => {
|
|
|
|
this.VCSelectContainerEvent?.blur(args[0]);
|
|
|
|
}, 200);
|
2020-10-08 14:51:09 +00:00
|
|
|
},
|
|
|
|
},
|
|
|
|
inputNode.type === 'textarea' ? {} : { type: 'search' },
|
|
|
|
),
|
|
|
|
true,
|
|
|
|
true,
|
|
|
|
) as VNode;
|
2020-10-07 14:49:01 +00:00
|
|
|
return inputNode;
|
|
|
|
},
|
|
|
|
});
|
|
|
|
|
|
|
|
Input.props = {
|
|
|
|
inputRef: PropTypes.any,
|
|
|
|
prefixCls: PropTypes.string,
|
|
|
|
id: PropTypes.string,
|
|
|
|
inputElement: PropTypes.any,
|
2020-10-11 13:31:57 +00:00
|
|
|
disabled: PropTypes.looseBool,
|
|
|
|
autofocus: PropTypes.looseBool,
|
2020-10-07 14:49:01 +00:00
|
|
|
autocomplete: PropTypes.string,
|
2020-10-11 13:31:57 +00:00
|
|
|
editable: PropTypes.looseBool,
|
2020-10-07 14:49:01 +00:00
|
|
|
accessibilityIndex: PropTypes.number,
|
|
|
|
value: PropTypes.string,
|
2020-10-11 13:31:57 +00:00
|
|
|
open: PropTypes.looseBool,
|
2021-06-07 09:35:03 +00:00
|
|
|
tabindex: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
|
2020-10-07 14:49:01 +00:00
|
|
|
/** Pass accessibility props to input */
|
|
|
|
attrs: PropTypes.object,
|
|
|
|
onKeydown: PropTypes.func,
|
|
|
|
onMousedown: PropTypes.func,
|
|
|
|
onChange: PropTypes.func,
|
|
|
|
onPaste: PropTypes.func,
|
|
|
|
onCompositionstart: PropTypes.func,
|
|
|
|
onCompositionend: PropTypes.func,
|
|
|
|
};
|
|
|
|
|
|
|
|
export default Input;
|