ant-design-vue/components/vc-select/generate.tsx

1330 lines
40 KiB
TypeScript
Raw Normal View History

2020-10-07 14:49:01 +00:00
/**
* To match accessibility requirement, we always provide an input in the component.
* Other element will not set `tabindex` to avoid `onBlur` sequence problem.
* For focused select, we set `aria-live="polite"` to update the accessibility content.
*
* ref:
* - keyboard: https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/listbox_role#Keyboard_interactions
*/
import KeyCode from '../_util/KeyCode';
import classNames from '../_util/classNames';
import Selector from './Selector';
import SelectTrigger from './SelectTrigger';
import { RenderNode, Mode, RenderDOMFunc, OnActiveValue } from './interface';
import {
GetLabeledValue,
FilterOptions,
FilterFunc,
DefaultValueType,
RawValueType,
LabelValueType,
Key,
DisplayLabelValueType,
FlattenOptionsType,
SingleType,
OnClear,
INTERNAL_PROPS_MARK,
SelectSource,
CustomTagProps,
} from './interface/generator';
import { OptionListProps } from './OptionList';
import { toInnerValue, toOuterValues, removeLastEnabledValue, getUUID } from './utils/commonUtil';
import TransBtn from './TransBtn';
import useLock from './hooks/useLock';
import useDelayReset from './hooks/useDelayReset';
import { getSeparatedContent } from './utils/valueUtil';
import useSelectTriggerControl from './hooks/useSelectTriggerControl';
import useCacheDisplayValue from './hooks/useCacheDisplayValue';
import useCacheOptions from './hooks/useCacheOptions';
import {
computed,
CSSProperties,
DefineComponent,
defineComponent,
onBeforeUnmount,
onMounted,
provide,
ref,
VNode,
VNodeChild,
watch,
watchEffect,
2020-10-07 14:49:01 +00:00
} from 'vue';
import createRef from '../_util/createRef';
import PropTypes, { withUndefined } from '../_util/vue-types';
import initDefaultProps from '../_util/props-util/initDefaultProps';
2020-10-07 14:49:01 +00:00
const DEFAULT_OMIT_PROPS = [
'children',
'removeIcon',
'placeholder',
'autofocus',
'maxTagCount',
'maxTagTextLength',
'maxTagPlaceholder',
'choiceTransitionName',
'onInputKeyDown',
];
export const BaseProps = () => ({
2020-10-16 10:47:28 +00:00
prefixCls: PropTypes.string,
id: PropTypes.string,
class: PropTypes.string,
style: PropTypes.any,
// Options
options: PropTypes.array,
mode: PropTypes.string,
// Value
value: PropTypes.any,
defaultValue: PropTypes.any,
labelInValue: PropTypes.looseBool,
// Search
inputValue: PropTypes.string,
searchValue: PropTypes.string,
optionFilterProp: PropTypes.string,
2020-10-16 10:47:28 +00:00
/**
* In Select, `false` means do nothing.
* In TreeSelect, `false` will highlight match item.
* It's by design.
*/
filterOption: PropTypes.any,
showSearch: PropTypes.looseBool,
autoClearSearchValue: PropTypes.looseBool,
onSearch: PropTypes.func,
onClear: PropTypes.func,
// Icons
allowClear: PropTypes.looseBool,
clearIcon: PropTypes.VNodeChild,
2020-10-16 10:47:28 +00:00
showArrow: PropTypes.looseBool,
inputIcon: PropTypes.VNodeChild,
removeIcon: PropTypes.VNodeChild,
menuItemSelectedIcon: PropTypes.VNodeChild,
2020-10-16 10:47:28 +00:00
// Dropdown
open: PropTypes.looseBool,
defaultOpen: PropTypes.looseBool,
listHeight: PropTypes.number,
listItemHeight: PropTypes.number,
2020-10-16 10:47:28 +00:00
dropdownStyle: PropTypes.object,
dropdownClassName: PropTypes.string,
dropdownMatchSelectWidth: withUndefined(PropTypes.oneOfType([Boolean, Number])),
2020-10-16 10:47:28 +00:00
virtual: PropTypes.looseBool,
dropdownRender: PropTypes.func,
dropdownAlign: PropTypes.any,
animation: PropTypes.string,
transitionName: PropTypes.string,
getPopupContainer: PropTypes.func,
direction: PropTypes.string,
// Others
disabled: PropTypes.looseBool,
loading: PropTypes.looseBool,
autofocus: PropTypes.looseBool,
defaultActiveFirstOption: PropTypes.looseBool,
notFoundContent: PropTypes.VNodeChild,
placeholder: PropTypes.VNodeChild,
2020-10-16 10:47:28 +00:00
backfill: PropTypes.looseBool,
getInputElement: PropTypes.func,
optionLabelProp: PropTypes.string,
maxTagTextLength: PropTypes.number,
maxTagCount: PropTypes.number,
maxTagPlaceholder: PropTypes.any,
tokenSeparators: PropTypes.array,
tagRender: PropTypes.func,
showAction: PropTypes.array,
2020-10-16 10:47:28 +00:00
tabindex: PropTypes.number,
// Events
onKeyup: PropTypes.func,
onKeydown: PropTypes.func,
onPopupScroll: PropTypes.func,
onDropdownVisibleChange: PropTypes.func,
onSelect: PropTypes.func,
onDeselect: PropTypes.func,
onInputKeyDown: PropTypes.func,
onClick: PropTypes.func,
onChange: PropTypes.func,
onBlur: PropTypes.func,
onFocus: PropTypes.func,
onMousedown: PropTypes.func,
onMouseenter: PropTypes.func,
onMouseleave: PropTypes.func,
// Motion
choiceTransitionName: PropTypes.string,
// Internal props
/**
* Only used in current version for internal event process.
* Do not use in production environment.
*/
internalProps: PropTypes.object,
2020-10-17 14:36:53 +00:00
children: PropTypes.array,
});
2020-10-16 10:47:28 +00:00
2020-10-07 14:49:01 +00:00
export interface SelectProps<OptionsType extends object[], ValueType> {
prefixCls?: string;
id?: string;
class?: string;
style?: CSSProperties;
// Options
options?: OptionsType;
2020-10-19 14:19:33 +00:00
children?: any[];
2020-10-07 14:49:01 +00:00
mode?: Mode;
// Value
value?: ValueType;
defaultValue?: ValueType;
labelInValue?: boolean;
// Search
inputValue?: string;
searchValue?: string;
optionFilterProp?: string;
/**
* In Select, `false` means do nothing.
* In TreeSelect, `false` will highlight match item.
* It's by design.
*/
filterOption?: boolean | FilterFunc<OptionsType[number]>;
showSearch?: boolean;
autoClearSearchValue?: boolean;
onSearch?: (value: string) => void;
onClear?: OnClear;
// Icons
allowClear?: boolean;
clearIcon?: VNodeChild;
showArrow?: boolean;
inputIcon?: RenderNode;
removeIcon?: VNodeChild;
menuItemSelectedIcon?: RenderNode;
// Dropdown
open?: boolean;
defaultOpen?: boolean;
listHeight?: number;
listItemHeight?: number;
dropdownStyle?: CSSProperties;
dropdownClassName?: string;
dropdownMatchSelectWidth?: boolean | number;
virtual?: boolean;
2020-10-10 09:01:39 +00:00
dropdownRender?: (menu: VNodeChild | JSX.Element) => VNodeChild;
2020-10-07 14:49:01 +00:00
dropdownAlign?: any;
animation?: string;
transitionName?: string;
getPopupContainer?: RenderDOMFunc;
direction?: string;
// Others
disabled?: boolean;
loading?: boolean;
autofocus?: boolean;
defaultActiveFirstOption?: boolean;
notFoundContent?: VNodeChild;
placeholder?: VNodeChild;
backfill?: boolean;
2020-10-08 14:51:09 +00:00
getInputElement?: () => VNodeChild | JSX.Element;
2020-10-07 14:49:01 +00:00
optionLabelProp?: string;
maxTagTextLength?: number;
maxTagCount?: number;
maxTagPlaceholder?: VNodeChild | ((omittedValues: LabelValueType[]) => VNodeChild);
tokenSeparators?: string[];
tagRender?: (props: CustomTagProps) => VNodeChild;
showAction?: ('focus' | 'click')[];
tabindex?: number;
// Events
onKeyup?: EventHandlerNonNull;
onKeydown?: EventHandlerNonNull;
onPopupScroll?: EventHandlerNonNull;
onDropdownVisibleChange?: (open: boolean) => void;
onSelect?: (value: SingleType<ValueType>, option: OptionsType[number]) => void;
onDeselect?: (value: SingleType<ValueType>, option: OptionsType[number]) => void;
onInputKeyDown?: EventHandlerNonNull;
onClick?: EventHandlerNonNull;
onChange?: (value: ValueType, option: OptionsType[number] | OptionsType) => void;
onBlur?: EventHandlerNonNull;
onFocus?: EventHandlerNonNull;
onMousedown?: EventHandlerNonNull;
onMouseenter?: EventHandlerNonNull;
onMouseleave?: EventHandlerNonNull;
// Motion
choiceTransitionName?: string;
// Internal props
/**
* Only used in current version for internal event process.
* Do not use in production environment.
*/
internalProps?: {
mark?: string;
onClear?: OnClear;
skipTriggerChange?: boolean;
skipTriggerSelect?: boolean;
onRawSelect?: (value: RawValueType, option: OptionsType[number], source: SelectSource) => void;
onRawDeselect?: (
value: RawValueType,
option: OptionsType[number],
source: SelectSource,
) => void;
};
}
export interface GenerateConfig<OptionsType extends object[]> {
prefixCls: string;
components: {
2020-10-28 07:31:45 +00:00
optionList: DefineComponent<Omit<OptionListProps, 'options'> & { options?: OptionsType }>;
2020-10-07 14:49:01 +00:00
};
/** Convert jsx tree into `OptionsType` */
convertChildrenToData: (children: VNodeChild | JSX.Element) => OptionsType;
/** Flatten nest options into raw option list */
flattenOptions: (options: OptionsType, props: any) => FlattenOptionsType<OptionsType>;
/** Convert single raw value into { label, value } format. Will be called by each value */
getLabeledValue: GetLabeledValue<FlattenOptionsType<OptionsType>>;
filterOptions: FilterOptions<OptionsType>;
findValueOption: // Need still support legacy ts api
| ((values: RawValueType[], options: FlattenOptionsType<OptionsType>) => OptionsType)
// New API add prevValueOptions support
| ((
values: RawValueType[],
options: FlattenOptionsType<OptionsType>,
info?: { prevValueOptions?: OptionsType[] },
) => OptionsType);
/** Check if a value is disabled */
isValueDisabled: (value: RawValueType, options: FlattenOptionsType<OptionsType>) => boolean;
warningProps?: (props: any) => void;
fillOptionsWithMissingValue?: (
options: OptionsType,
value: DefaultValueType,
optionLabelProp: string,
labelInValue: boolean,
) => OptionsType;
omitDOMProps?: (props: object) => object;
}
type ValueType = DefaultValueType;
/**
* This function is in internal usage.
* Do not use it in your prod env since we may refactor this.
*/
export default function generateSelector<
OptionsType extends {
value?: RawValueType;
label?: VNodeChild;
key?: Key;
disabled?: boolean;
}[]
2020-10-28 07:31:45 +00:00
>(config: GenerateConfig<OptionsType>) {
2020-10-07 14:49:01 +00:00
const {
prefixCls: defaultPrefixCls,
components: { optionList: OptionList },
convertChildrenToData,
flattenOptions,
getLabeledValue,
filterOptions,
isValueDisabled,
findValueOption,
warningProps,
fillOptionsWithMissingValue,
omitDOMProps,
2020-10-28 07:31:45 +00:00
} = config as any;
2020-10-07 14:49:01 +00:00
const Select = defineComponent<SelectProps<OptionsType, ValueType>>({
name: 'Select',
setup(props: SelectProps<OptionsType, ValueType>) {
const useInternalProps = computed(
() => props.internalProps && props.internalProps.mark === INTERNAL_PROPS_MARK,
);
2020-10-07 14:49:01 +00:00
const containerRef = ref(null);
const triggerRef = ref(null);
const selectorRef = ref(null);
const listRef = ref(null);
const tokenWithEnter = computed(() =>
(props.tokenSeparators || []).some(tokenSeparator =>
['\n', '\r\n'].includes(tokenSeparator),
),
);
/** Used for component focused management */
const [mockFocused, setMockFocused, cancelSetMockFocused] = useDelayReset();
const mergedId = computed(() => props.id || `rc_select_${getUUID()}`);
// optionLabelProp
2020-10-13 09:46:52 +00:00
const mergedOptionLabelProp = computed(() => {
2020-10-07 14:49:01 +00:00
let mergedOptionLabelProp = props.optionLabelProp;
if (mergedOptionLabelProp === undefined) {
mergedOptionLabelProp = props.options ? 'label' : 'children';
}
return mergedOptionLabelProp;
});
// labelInValue
const mergedLabelInValue = computed(() =>
props.mode === 'combobox' ? false : props.labelInValue,
);
const isMultiple = computed(() => props.mode === 'tags' || props.mode === 'multiple');
const mergedShowSearch = computed(() =>
props.showSearch !== undefined
? props.showSearch
: isMultiple.value || props.mode === 'combobox',
);
// ============================== Ref ===============================
const selectorDomRef = createRef();
const mergedValue = ref(undefined);
watch(
computed(() => [props.value, props.defaultValue]),
() => {
mergedValue.value = props.value !== undefined ? props.value : props.defaultValue;
},
{ immediate: true },
);
// ============================= Value ==============================
/** Unique raw values */
const mergedRawValue = computed(() =>
toInnerValue(mergedValue.value, {
labelInValue: mergedLabelInValue.value,
combobox: props.mode === 'combobox',
}),
);
/** We cache a set of raw values to speed up check */
const rawValues = computed(() => new Set(mergedRawValue.value));
// ============================= Option =============================
// Set by option list active, it will merge into search input when mode is `combobox`
const activeValue = ref(null);
const setActiveValue = (val: string) => {
activeValue.value = val;
};
const innerSearchValue = ref('');
const setInnerSearchValue = (val: string) => {
innerSearchValue.value = val;
};
const mergedSearchValue = computed(() => {
let mergedSearchValue = innerSearchValue.value;
if (props.mode === 'combobox' && mergedValue.value !== undefined) {
mergedSearchValue = mergedValue.value as string;
} else if (props.searchValue !== undefined) {
mergedSearchValue = props.searchValue;
} else if (props.inputValue) {
mergedSearchValue = props.inputValue;
}
return mergedSearchValue;
});
const mergedOptions = computed(
(): OptionsType => {
let newOptions = props.options;
if (newOptions === undefined) {
newOptions = convertChildrenToData(props.children);
}
/**
* `tags` should fill un-list item.
* This is not cool here since TreeSelect do not need this
*/
if (props.mode === 'tags' && fillOptionsWithMissingValue) {
newOptions = fillOptionsWithMissingValue(
newOptions,
mergedValue.value,
mergedOptionLabelProp.value,
props.labelInValue,
);
}
return newOptions || ([] as OptionsType);
},
);
const mergedFlattenOptions = computed(() => flattenOptions(mergedOptions.value, props));
const getValueOption = useCacheOptions(mergedRawValue.value, mergedFlattenOptions);
// Display options for OptionList
const displayOptions = computed<OptionsType>(() => {
if (!mergedSearchValue.value || !mergedShowSearch) {
return [...mergedOptions.value] as OptionsType;
}
const { optionFilterProp = 'value', mode, filterOption } = props;
const filteredOptions: OptionsType = filterOptions(
mergedSearchValue.value,
mergedOptions.value,
{
optionFilterProp,
filterOption:
mode === 'combobox' && filterOption === undefined ? () => true : filterOption,
},
);
if (
mode === 'tags' &&
filteredOptions.every(opt => opt[optionFilterProp] !== mergedSearchValue.value)
) {
filteredOptions.unshift({
value: mergedSearchValue.value,
label: mergedSearchValue.value,
key: '__RC_SELECT_TAG_PLACEHOLDER__',
});
}
return filteredOptions;
});
const displayFlattenOptions = computed(() => flattenOptions(displayOptions.value, props));
2020-10-08 14:51:09 +00:00
onMounted(() => {
watch(
mergedSearchValue,
() => {
if (listRef.value && listRef.value.scrollTo) {
listRef.value.scrollTo(0);
}
},
{ flush: 'post', immediate: true },
);
});
2020-10-07 14:49:01 +00:00
// ============================ Selector ============================
let displayValues = computed<DisplayLabelValueType[]>(() => {
const tmpValues = mergedRawValue.value.map((val: RawValueType) => {
const valueOptions = getValueOption([val]);
const displayValue = getLabeledValue(val, {
options: valueOptions,
prevValue: mergedValue.value,
labelInValue: mergedLabelInValue.value,
optionLabelProp: mergedOptionLabelProp.value,
});
return {
...displayValue,
disabled: isValueDisabled(val, valueOptions),
};
});
if (
!props.mode &&
tmpValues.length === 1 &&
tmpValues[0].value === null &&
tmpValues[0].label === null
) {
return [];
}
return tmpValues;
});
// Polyfill with cache label
displayValues = useCacheDisplayValue(displayValues);
const triggerSelect = (newValue: RawValueType, isSelect: boolean, source: SelectSource) => {
const newValueOption = getValueOption([newValue]);
const outOption = findValueOption([newValue], newValueOption)[0];
const { internalProps = {} } = props;
if (!internalProps.skipTriggerSelect) {
2020-10-07 14:49:01 +00:00
// Skip trigger `onSelect` or `onDeselect` if configured
const selectValue = (mergedLabelInValue.value
? getLabeledValue(newValue, {
options: newValueOption,
prevValue: mergedValue.value,
labelInValue: mergedLabelInValue.value,
optionLabelProp: mergedOptionLabelProp.value,
})
: newValue) as SingleType<ValueType>;
if (isSelect && props.onSelect) {
props.onSelect(selectValue, outOption);
} else if (!isSelect && props.onDeselect) {
props.onDeselect(selectValue, outOption);
}
}
// Trigger internal event
if (useInternalProps.value) {
if (isSelect && internalProps.onRawSelect) {
internalProps.onRawSelect(newValue, outOption, source);
} else if (!isSelect && internalProps.onRawDeselect) {
internalProps.onRawDeselect(newValue, outOption, source);
2020-10-07 14:49:01 +00:00
}
}
};
// We need cache options here in case user update the option list
const prevValueOptions = ref([]);
const setPrevValueOptions = (val: any[]) => {
prevValueOptions.value = val;
};
const triggerChange = (newRawValues: RawValueType[]) => {
if (
useInternalProps.value &&
props.internalProps &&
props.internalProps.skipTriggerChange
) {
2020-10-07 14:49:01 +00:00
return;
}
const newRawValuesOptions = getValueOption(newRawValues);
const outValues = toOuterValues<FlattenOptionsType<OptionsType>>(Array.from(newRawValues), {
labelInValue: mergedLabelInValue.value,
options: newRawValuesOptions,
getLabeledValue,
prevValue: mergedValue.value,
optionLabelProp: mergedOptionLabelProp.value,
});
const outValue: ValueType = (isMultiple.value ? outValues : outValues[0]) as ValueType;
// Skip trigger if prev & current value is both empty
if (
props.onChange &&
(mergedRawValue.value.length !== 0 || (outValues as []).length !== 0)
) {
const outOptions = findValueOption(newRawValues, newRawValuesOptions, {
prevValueOptions: prevValueOptions.value,
});
// We will cache option in case it removed by ajax
setPrevValueOptions(
outOptions.map((option, index) => {
const clone = { ...option };
Object.defineProperty(clone, '_INTERNAL_OPTION_VALUE_', {
get: () => newRawValues[index],
});
return clone;
}),
);
props.onChange(outValue, isMultiple.value ? outOptions : outOptions[0]);
}
mergedValue.value = outValue;
};
const onInternalSelect = (
newValue: RawValueType,
{ selected, source }: { selected: boolean; source: 'option' | 'selection' },
) => {
const { autoClearSearchValue = true } = props;
if (props.disabled) {
return;
}
let newRawValue: Set<RawValueType>;
if (isMultiple.value) {
newRawValue = new Set(mergedRawValue.value);
if (selected) {
newRawValue.add(newValue);
} else {
newRawValue.delete(newValue);
}
} else {
newRawValue = new Set();
newRawValue.add(newValue);
}
// Multiple always trigger change and single should change if value changed
if (
isMultiple.value ||
(!isMultiple.value && Array.from(mergedRawValue.value)[0] !== newValue)
) {
triggerChange(Array.from(newRawValue));
}
// Trigger `onSelect`. Single mode always trigger select
triggerSelect(newValue, !isMultiple.value || selected, source);
// Clean search value if single or configured
if (props.mode === 'combobox') {
setInnerSearchValue(String(newValue));
setActiveValue('');
} else if (!isMultiple.value || autoClearSearchValue) {
setInnerSearchValue('');
setActiveValue('');
}
};
const onInternalOptionSelect = (newValue: RawValueType, info: { selected: boolean }) => {
onInternalSelect(newValue, { ...info, source: 'option' });
};
const onInternalSelectionSelect = (newValue: RawValueType, info: { selected: boolean }) => {
onInternalSelect(newValue, { ...info, source: 'selection' });
};
// ============================== Open ==============================
2020-10-26 14:14:00 +00:00
const initOpen = props.open !== undefined ? props.open : props.defaultOpen;
const innerOpen = ref(initOpen);
const mergedOpen = ref(initOpen);
2020-10-07 14:49:01 +00:00
const setInnerOpen = (val: boolean) => {
2020-10-26 14:14:00 +00:00
innerOpen.value = props.open !== undefined ? props.open : val;
mergedOpen.value = innerOpen.value;
2020-10-07 14:49:01 +00:00
};
watch(
2020-10-26 14:14:00 +00:00
() => props.open,
2020-10-07 14:49:01 +00:00
() => {
2020-10-26 14:14:00 +00:00
setInnerOpen(props.open);
2020-10-07 14:49:01 +00:00
},
);
// Not trigger `open` in `combobox` when `notFoundContent` is empty
const emptyListContent = computed(
() => !props.notFoundContent && !displayOptions.value.length,
);
watchEffect(() => {
mergedOpen.value = innerOpen.value;
if (
props.disabled ||
(emptyListContent.value && mergedOpen.value && props.mode === 'combobox')
) {
mergedOpen.value = false;
}
});
2020-10-07 14:49:01 +00:00
const triggerOpen = computed(() => (emptyListContent.value ? false : mergedOpen.value));
const onToggleOpen = (newOpen?: boolean) => {
const nextOpen = newOpen !== undefined ? newOpen : !mergedOpen.value;
if (innerOpen.value !== nextOpen && !props.disabled) {
setInnerOpen(nextOpen);
if (props.onDropdownVisibleChange) {
props.onDropdownVisibleChange(nextOpen);
}
}
};
2020-10-10 05:57:37 +00:00
useSelectTriggerControl([containerRef, triggerRef], triggerOpen, onToggleOpen);
2020-10-07 14:49:01 +00:00
// ============================= Search =============================
const triggerSearch = (searchText: string, fromTyping: boolean, isCompositing: boolean) => {
let ret = true;
let newSearchText = searchText;
const preSearchValue = mergedSearchValue.value;
2020-10-07 14:49:01 +00:00
setActiveValue(null);
// Check if match the `tokenSeparators`
const patchLabels: string[] = isCompositing
? null
: getSeparatedContent(searchText, props.tokenSeparators);
let patchRawValues: RawValueType[] = patchLabels;
if (props.mode === 'combobox') {
// Only typing will trigger onChange
if (fromTyping) {
triggerChange([newSearchText]);
}
} else if (patchLabels) {
newSearchText = '';
if (props.mode !== 'tags') {
patchRawValues = patchLabels
.map(label => {
const item = mergedFlattenOptions.value.find(
({ data }) => data[mergedOptionLabelProp.value] === label,
);
return item ? item.data.value : null;
})
.filter((val: RawValueType) => val !== null);
}
const newRawValues = Array.from(
new Set<RawValueType>([...mergedRawValue.value, ...patchRawValues]),
);
triggerChange(newRawValues);
newRawValues.forEach(newRawValue => {
triggerSelect(newRawValue, true, 'input');
});
// Should close when paste finish
onToggleOpen(false);
// Tell Selector that break next actions
ret = false;
}
setInnerSearchValue(newSearchText);
if (props.onSearch && preSearchValue !== newSearchText) {
2020-10-07 14:49:01 +00:00
props.onSearch(newSearchText);
}
return ret;
};
// Only triggered when menu is closed & mode is tags
// If menu is open, OptionList will take charge
// If mode isn't tags, press enter is not meaningful when you can't see any option
const onSearchSubmit = (searchText: string) => {
const newRawValues = Array.from(
new Set<RawValueType>([...mergedRawValue.value, searchText]),
);
triggerChange(newRawValues);
newRawValues.forEach(newRawValue => {
triggerSelect(newRawValue, true, 'input');
});
setInnerSearchValue('');
};
// Close dropdown when disabled change
watch(
computed(() => props.disabled),
() => {
if (innerOpen.value && !!props.disabled) {
setInnerOpen(false);
}
},
2020-10-08 14:51:09 +00:00
{ immediate: true },
2020-10-07 14:49:01 +00:00
);
// Close will clean up single mode search text
2020-10-08 14:51:09 +00:00
watch(
mergedOpen,
() => {
if (!mergedOpen.value && !isMultiple.value && props.mode !== 'combobox') {
triggerSearch('', false, false);
}
},
{ immediate: true },
);
2020-10-07 14:49:01 +00:00
// ============================ Keyboard ============================
/**
* We record input value here to check if can press to clean up by backspace
* - null: Key is not down, this is reset by key up
* - true: Search text is empty when first time backspace down
* - false: Search text is not empty when first time backspace down
*/
const [getClearLock, setClearLock] = useLock();
// KeyDown
const onInternalKeyDown = (event: KeyboardEvent) => {
const clearLock = getClearLock();
const { which } = event;
// We only manage open state here, close logic should handle by list component
if (!mergedOpen.value && which === KeyCode.ENTER) {
onToggleOpen(true);
}
setClearLock(!!mergedSearchValue.value);
// Remove value by `backspace`
if (
which === KeyCode.BACKSPACE &&
!clearLock &&
isMultiple.value &&
!mergedSearchValue.value &&
mergedRawValue.value.length
) {
const removeInfo = removeLastEnabledValue(displayValues.value, mergedRawValue.value);
if (removeInfo.removedValue !== null) {
triggerChange(removeInfo.values);
triggerSelect(removeInfo.removedValue, false, 'input');
}
}
if (mergedOpen.value && listRef.value) {
listRef.value.onKeydown(event);
}
if (props.onKeydown) {
props.onKeydown(event);
}
};
// KeyUp
const onInternalKeyUp = (event: Event) => {
if (mergedOpen.value && listRef.value) {
listRef.value.onKeyup(event);
}
if (props.onKeyup) {
props.onKeyup(event);
}
};
// ========================== Focus / Blur ==========================
/** Record real focus status */
const focusRef = ref(false);
const onContainerFocus = (...args: any[]) => {
setMockFocused(true);
if (!props.disabled) {
if (props.onFocus && !focusRef.value) {
props.onFocus(args[0]);
}
// `showAction` should handle `focus` if set
if (props.showAction && props.showAction.includes('focus')) {
2020-10-07 14:49:01 +00:00
onToggleOpen(true);
}
}
focusRef.value = true;
};
const onContainerBlur = (...args: any[]) => {
setMockFocused(false, () => {
focusRef.value = false;
onToggleOpen(false);
});
if (props.disabled) {
return;
}
if (mergedSearchValue.value) {
// `tags` mode should move `searchValue` into values
if (props.mode === 'tags') {
triggerSearch('', false, false);
triggerChange(Array.from(new Set([...mergedRawValue.value, mergedSearchValue.value])));
} else if (props.mode === 'multiple') {
// `multiple` mode only clean the search value but not trigger event
setInnerSearchValue('');
}
}
if (props.onBlur) {
props.onBlur(args[0]);
}
};
provide('VCSelectContainerEvent', {
focus: onContainerFocus,
blur: onContainerBlur,
});
const activeTimeoutIds: number[] = [];
onMounted(() => {
activeTimeoutIds.forEach(timeoutId => clearTimeout(timeoutId));
activeTimeoutIds.splice(0, activeTimeoutIds.length);
});
onBeforeUnmount(() => {
activeTimeoutIds.forEach(timeoutId => clearTimeout(timeoutId));
activeTimeoutIds.splice(0, activeTimeoutIds.length);
});
const onInternalMouseDown = (event: MouseEvent) => {
const { target } = event;
const popupElement: HTMLDivElement = triggerRef.value && triggerRef.value.getPopupElement();
// We should give focus back to selector if clicked item is not focusable
if (popupElement && popupElement.contains(target as HTMLElement)) {
const timeoutId = setTimeout(() => {
const index = activeTimeoutIds.indexOf(timeoutId);
if (index !== -1) {
activeTimeoutIds.splice(index, 1);
}
cancelSetMockFocused();
if (!popupElement.contains(document.activeElement)) {
selectorRef.value.focus();
}
});
activeTimeoutIds.push(timeoutId);
}
if (props.onMousedown) {
props.onMousedown(event);
}
};
// ========================= Accessibility ==========================
const accessibilityIndex = ref(0);
const mergedDefaultActiveFirstOption = computed(() =>
props.defaultActiveFirstOption !== undefined
? props.defaultActiveFirstOption
: props.mode !== 'combobox',
);
const onActiveValue: OnActiveValue = (active, index, { source = 'keyboard' } = {}) => {
accessibilityIndex.value = index;
if (
props.backfill &&
props.mode === 'combobox' &&
active !== null &&
source === 'keyboard'
) {
setActiveValue(String(active));
}
};
// ============================= Popup ==============================
const containerWidth = ref(null);
2020-10-08 14:51:09 +00:00
onMounted(() => {
watch(
triggerOpen,
() => {
if (triggerOpen.value) {
const newWidth = Math.ceil(containerRef.value.offsetWidth);
if (containerWidth !== newWidth) {
containerWidth.value = newWidth;
}
}
},
{ immediate: true },
);
2020-10-07 14:49:01 +00:00
});
2020-10-08 14:51:09 +00:00
2020-10-07 14:49:01 +00:00
const focus = () => {
selectorRef.value.focus();
};
const blur = () => {
selectorRef.value.blur();
};
return {
focus,
blur,
tokenWithEnter,
mockFocused,
mergedId,
containerWidth,
onActiveValue,
accessibilityIndex,
mergedDefaultActiveFirstOption,
onInternalMouseDown,
onContainerFocus,
onContainerBlur,
onInternalKeyDown,
isMultiple,
mergedOpen,
displayOptions,
displayFlattenOptions,
rawValues,
onInternalOptionSelect,
onToggleOpen,
mergedSearchValue,
useInternalProps,
triggerChange,
triggerSearch,
mergedRawValue,
mergedShowSearch,
onInternalKeyUp,
triggerOpen,
mergedOptions,
onInternalSelectionSelect,
selectorDomRef,
displayValues,
activeValue,
onSearchSubmit,
containerRef,
listRef,
2020-10-10 05:57:37 +00:00
triggerRef,
2020-10-22 10:45:03 +00:00
selectorRef,
2020-10-07 14:49:01 +00:00
};
},
methods: {
// We need force update here since popup dom is render async
onPopupMouseEnter() {
this.$forceUpdate();
},
},
render() {
const {
tokenWithEnter,
mockFocused,
mergedId,
containerWidth,
onActiveValue,
accessibilityIndex,
mergedDefaultActiveFirstOption,
onInternalMouseDown,
onInternalKeyDown,
isMultiple,
mergedOpen,
displayOptions,
displayFlattenOptions,
rawValues,
onInternalOptionSelect,
onToggleOpen,
mergedSearchValue,
onPopupMouseEnter,
useInternalProps,
triggerChange,
triggerSearch,
mergedRawValue,
mergedShowSearch,
onInternalKeyUp,
triggerOpen,
mergedOptions,
onInternalSelectionSelect,
selectorDomRef,
displayValues,
activeValue,
onSearchSubmit,
2020-10-10 05:57:37 +00:00
} = this as any;
2020-10-07 14:49:01 +00:00
const {
prefixCls = defaultPrefixCls,
class: className,
2020-10-08 14:51:09 +00:00
id,
open,
defaultOpen,
2020-10-07 14:49:01 +00:00
options,
2020-10-08 14:51:09 +00:00
children,
2020-10-07 14:49:01 +00:00
mode,
2020-10-08 14:51:09 +00:00
value,
defaultValue,
labelInValue,
// Search related
showSearch,
inputValue,
searchValue,
filterOption,
2020-10-19 08:43:10 +00:00
optionFilterProp,
autoClearSearchValue,
2020-10-08 14:51:09 +00:00
onSearch,
2020-10-07 14:49:01 +00:00
// Icons
allowClear,
clearIcon,
showArrow,
inputIcon,
menuItemSelectedIcon,
// Others
disabled,
loading,
2020-10-08 14:51:09 +00:00
defaultActiveFirstOption,
2020-10-07 14:49:01 +00:00
notFoundContent = 'Not Found',
2020-10-08 14:51:09 +00:00
optionLabelProp,
backfill,
2020-10-07 14:49:01 +00:00
getInputElement,
getPopupContainer,
// Dropdown
listHeight = 200,
listItemHeight = 20,
animation,
transitionName,
virtual,
dropdownStyle,
dropdownClassName,
dropdownMatchSelectWidth,
dropdownRender,
dropdownAlign,
2020-10-19 08:43:10 +00:00
showAction,
2020-10-07 14:49:01 +00:00
direction,
2020-10-08 14:51:09 +00:00
// Tags
tokenSeparators,
2020-10-07 14:49:01 +00:00
tagRender,
// Events
onPopupScroll,
2020-10-08 14:51:09 +00:00
onDropdownVisibleChange,
onFocus,
onBlur,
onKeyup,
onKeydown,
onMousedown,
onChange,
onSelect,
onDeselect,
2020-10-07 14:49:01 +00:00
onClear,
internalProps = {},
...restProps
} = this.$props as SelectProps<OptionsType, ValueType>;
// ============================= Input ==============================
// Only works in `combobox`
2020-10-08 14:51:09 +00:00
const customizeInputElement: VNodeChild | JSX.Element =
2020-10-07 14:49:01 +00:00
(mode === 'combobox' && getInputElement && getInputElement()) || null;
const domProps = omitDOMProps ? omitDOMProps(restProps) : restProps;
DEFAULT_OMIT_PROPS.forEach(prop => {
delete domProps[prop];
});
const popupNode = (
<OptionList
ref="listRef"
prefixCls={prefixCls}
id={mergedId}
open={mergedOpen}
childrenAsData={!options}
options={displayOptions}
flattenOptions={displayFlattenOptions}
multiple={isMultiple}
values={rawValues}
height={listHeight}
itemHeight={listItemHeight}
onSelect={onInternalOptionSelect}
onToggleOpen={onToggleOpen}
onActiveValue={onActiveValue}
defaultActiveFirstOption={mergedDefaultActiveFirstOption}
notFoundContent={notFoundContent}
onScroll={onPopupScroll}
searchValue={mergedSearchValue}
menuItemSelectedIcon={menuItemSelectedIcon}
virtual={virtual !== false && dropdownMatchSelectWidth !== false}
onMouseenter={onPopupMouseEnter}
/>
);
// ============================= Clear ==============================
let clearNode: VNode | JSX.Element;
const onClearMouseDown = () => {
// Trigger internal `onClear` event
if (useInternalProps && internalProps.onClear) {
internalProps.onClear();
}
if (onClear) {
onClear();
}
triggerChange([]);
triggerSearch('', false, false);
};
if (!disabled && allowClear && (mergedRawValue.length || mergedSearchValue)) {
clearNode = (
<TransBtn
class={`${prefixCls}-clear`}
onMousedown={onClearMouseDown}
customizeIcon={clearIcon}
>
×
</TransBtn>
);
}
// ============================= Arrow ==============================
const mergedShowArrow =
showArrow !== undefined ? showArrow : loading || (!isMultiple && mode !== 'combobox');
let arrowNode: VNode | JSX.Element;
if (mergedShowArrow) {
arrowNode = (
<TransBtn
class={classNames(`${prefixCls}-arrow`, {
[`${prefixCls}-arrow-loading`]: loading,
})}
customizeIcon={inputIcon}
customizeIconProps={{
loading,
searchValue: mergedSearchValue,
open: mergedOpen,
focused: mockFocused,
showSearch: mergedShowSearch,
}}
/>
);
}
// ============================ Warning =============================
if (process.env.NODE_ENV !== 'production' && warningProps) {
warningProps(this.$props);
}
// ============================= Render =============================
const mergedClassName = classNames(prefixCls, className, {
[`${prefixCls}-focused`]: mockFocused,
[`${prefixCls}-multiple`]: isMultiple,
[`${prefixCls}-single`]: !isMultiple,
[`${prefixCls}-allow-clear`]: allowClear,
[`${prefixCls}-show-arrow`]: mergedShowArrow,
[`${prefixCls}-disabled`]: disabled,
[`${prefixCls}-loading`]: loading,
[`${prefixCls}-open`]: mergedOpen,
[`${prefixCls}-customize-input`]: customizeInputElement,
[`${prefixCls}-show-search`]: mergedShowSearch,
});
return (
<div
class={mergedClassName}
{...domProps}
ref="containerRef"
onMousedown={onInternalMouseDown}
onKeydown={onInternalKeyDown}
onKeyup={onInternalKeyUp}
// onFocus={onContainerFocus} // trigger by input
// onBlur={onContainerBlur} // trigger by input
>
{mockFocused && !mergedOpen && (
<span
style={{
width: 0,
height: 0,
display: 'flex',
overflow: 'hidden',
opacity: 0,
}}
aria-live="polite"
>
{/* Merge into one string to make screen reader work as expect */}
{`${mergedRawValue.join(', ')}`}
</span>
)}
<SelectTrigger
ref="triggerRef"
disabled={disabled}
prefixCls={prefixCls}
visible={triggerOpen}
popupElement={popupNode}
containerWidth={containerWidth}
animation={animation}
transitionName={transitionName}
dropdownStyle={dropdownStyle}
dropdownClassName={dropdownClassName}
direction={direction}
dropdownMatchSelectWidth={dropdownMatchSelectWidth}
dropdownRender={dropdownRender}
dropdownAlign={dropdownAlign}
getPopupContainer={getPopupContainer}
empty={!mergedOptions.length}
getTriggerDOMNode={() => selectorDomRef.current as any}
>
<Selector
{...this.$props}
domRef={selectorDomRef}
prefixCls={prefixCls}
inputElement={customizeInputElement}
ref="selectorRef"
id={mergedId}
showSearch={mergedShowSearch}
mode={mode}
accessibilityIndex={accessibilityIndex}
multiple={isMultiple}
tagRender={tagRender}
values={displayValues}
open={mergedOpen}
onToggleOpen={onToggleOpen}
searchValue={mergedSearchValue}
activeValue={activeValue}
onSearch={triggerSearch}
onSearchSubmit={onSearchSubmit}
onSelect={onInternalSelectionSelect}
tokenWithEnter={tokenWithEnter}
/>
</SelectTrigger>
{arrowNode}
{clearNode}
</div>
);
},
});
Select.inheritAttrs = false;
Select.props = initDefaultProps(BaseProps(), {});
2020-10-07 14:49:01 +00:00
return Select;
}