import TransBtn from './TransBtn'; import PropTypes from '../_util/vue-types'; import KeyCode from '../_util/KeyCode'; import classNames from '../_util/classNames'; import pickAttrs from '../_util/pickAttrs'; import { isValidElement } from '../_util/props-util'; import createRef from '../_util/createRef'; import type { PropType, VNodeChild } from 'vue'; import { computed, defineComponent, nextTick, reactive, watch } from 'vue'; import List from '../vc-virtual-list/List'; import type { OptionsType as SelectOptionsType, OptionData, RenderNode, OnActiveValue, } from './interface'; import type { RawValueType, FlattenOptionsType } from './interface/generator'; import useMemo from '../_util/hooks/useMemo'; export interface OptionListProps { prefixCls: string; id: string; options: SelectOptionsType; flattenOptions: FlattenOptionsType; height: number; itemHeight: number; values: Set; multiple: boolean; open: boolean; defaultActiveFirstOption?: boolean; notFoundContent?: VNodeChild; menuItemSelectedIcon?: RenderNode; childrenAsData: boolean; searchValue: string; virtual: boolean; onSelect: (value: RawValueType, option: { selected: boolean }) => void; onToggleOpen: (open?: boolean) => void; /** Tell Select that some value is now active to make accessibility work */ onActiveValue: OnActiveValue; onScroll: EventHandlerNonNull; /** Tell Select that mouse enter the popup to force re-render */ onMouseenter?: EventHandlerNonNull; } const OptionListProps = { prefixCls: PropTypes.string, id: PropTypes.string, options: PropTypes.array, flattenOptions: PropTypes.array, height: PropTypes.number, itemHeight: PropTypes.number, values: PropTypes.any, multiple: PropTypes.looseBool, open: PropTypes.looseBool, defaultActiveFirstOption: PropTypes.looseBool, notFoundContent: PropTypes.any, menuItemSelectedIcon: PropTypes.any, childrenAsData: PropTypes.looseBool, searchValue: PropTypes.string, virtual: PropTypes.looseBool, onSelect: PropTypes.func, onToggleOpen: { type: Function as PropType<(open?: boolean) => void> }, /** Tell Select that some value is now active to make accessibility work */ onActiveValue: PropTypes.func, onScroll: PropTypes.func, /** Tell Select that mouse enter the popup to force re-render */ onMouseenter: PropTypes.func, }; /** * Using virtual list of option display. * Will fallback to dom if use customize render. */ const OptionList = defineComponent({ name: 'OptionList', inheritAttrs: false, setup(props) { const itemPrefixCls = computed(() => `${props.prefixCls}-item`); const memoFlattenOptions = useMemo( () => props.flattenOptions, [() => props.open, () => props.flattenOptions], next => next[0], ); // =========================== List =========================== const listRef = createRef(); const onListMouseDown: EventHandlerNonNull = event => { event.preventDefault(); }; const scrollIntoView = (index: number) => { if (listRef.current) { listRef.current.scrollTo({ index }); } }; // ========================== Active ========================== const getEnabledActiveIndex = (index: number, offset = 1) => { const len = memoFlattenOptions.value.length; for (let i = 0; i < len; i += 1) { const current = (index + i * offset + len) % len; const { group, data } = memoFlattenOptions.value[current]; if (!group && !(data as OptionData).disabled) { return current; } } return -1; }; const state = reactive({ activeIndex: getEnabledActiveIndex(0), }); const setActive = (index: number, fromKeyboard = false) => { state.activeIndex = index; const info = { source: fromKeyboard ? ('keyboard' as const) : ('mouse' as const) }; // Trigger active event const flattenItem = memoFlattenOptions.value[index]; if (!flattenItem) { props.onActiveValue(null, -1, info); return; } props.onActiveValue(flattenItem.data.value, index, info); }; // Auto active first item when list length or searchValue changed watch( [() => memoFlattenOptions.value.length, () => props.searchValue], () => { setActive(props.defaultActiveFirstOption !== false ? getEnabledActiveIndex(0) : -1); }, { immediate: true }, ); // Auto scroll to item position in single mode watch( () => props.open, () => { if (!props.multiple && props.open && props.values.size === 1) { const value = Array.from(props.values)[0]; const index = memoFlattenOptions.value.findIndex(({ data }) => data.value === value); setActive(index); scrollIntoView(index); } // Force trigger scrollbar visible when open if (props.open) { nextTick(() => { listRef.current?.scrollTo(undefined); }); } }, { immediate: true, flush: 'post' }, ); // ========================== Values ========================== const onSelectValue = (value?: RawValueType) => { if (value !== undefined) { props.onSelect(value, { selected: !props.values.has(value) }); } // Single mode should always close by select if (!props.multiple) { props.onToggleOpen(false); } }; function renderItem(index: number) { const item = memoFlattenOptions.value[index]; if (!item) return null; const itemData = (item.data || {}) as OptionData; const { value, label, children } = itemData; const attrs = pickAttrs(itemData, true); const mergedLabel = props.childrenAsData ? children : label; return item ? (
{value}
) : null; } return { memoFlattenOptions, renderItem, listRef, state, onListMouseDown, itemPrefixCls, setActive, onSelectValue, onKeydown: (event: KeyboardEvent) => { const { which } = event; switch (which) { // >>> Arrow keys case KeyCode.UP: case KeyCode.DOWN: { let offset = 0; if (which === KeyCode.UP) { offset = -1; } else if (which === KeyCode.DOWN) { offset = 1; } if (offset !== 0) { const nextActiveIndex = getEnabledActiveIndex(state.activeIndex + offset, offset); scrollIntoView(nextActiveIndex); setActive(nextActiveIndex, true); } break; } // >>> Select case KeyCode.ENTER: { // value const item = memoFlattenOptions.value[state.activeIndex]; if (item && !item.data.disabled) { onSelectValue(item.data.value); } else { onSelectValue(undefined); } if (props.open) { event.preventDefault(); } break; } // >>> Close case KeyCode.ESC: { props.onToggleOpen(false); if (props.open) { event.stopPropagation(); } } } }, onKeyup: () => {}, scrollTo: (index: number) => { scrollIntoView(index); }, }; }, render() { const { renderItem, listRef, onListMouseDown, itemPrefixCls, setActive, onSelectValue, memoFlattenOptions, } = this as any; const { id, childrenAsData, values, height, itemHeight, menuItemSelectedIcon, notFoundContent, virtual, onScroll, onMouseenter, } = this.$props as OptionListProps; const { activeIndex } = this.state; // ========================== Render ========================== if (memoFlattenOptions.length === 0) { return (
{notFoundContent}
); } return ( <>
{renderItem(activeIndex - 1)} {renderItem(activeIndex)} {renderItem(activeIndex + 1)}
{ const { label, key } = data; // Group if (group) { return (
{label !== undefined ? label : key}
); } const { disabled, value, title, children, style, class: cls, className, ...otherProps } = data; // Option const selected = values.has(value); const optionPrefixCls = `${itemPrefixCls}-option`; const optionClassName = classNames(itemPrefixCls, optionPrefixCls, cls, className, { [`${optionPrefixCls}-grouped`]: groupOption, [`${optionPrefixCls}-active`]: activeIndex === itemIndex && !disabled, [`${optionPrefixCls}-disabled`]: disabled, [`${optionPrefixCls}-selected`]: selected, }); const mergedLabel = childrenAsData ? children : label; const iconVisible = !menuItemSelectedIcon || typeof menuItemSelectedIcon === 'function' || selected; const content = mergedLabel || value; // https://github.com/ant-design/ant-design/issues/26717 let optionTitle = typeof content === 'string' || typeof content === 'number' ? content.toString() : undefined; if (title !== undefined) { optionTitle = title; } return (
{ if (otherProps.onMousemove) { otherProps.onMousemove(e); } if (activeIndex === itemIndex || disabled) { return; } setActive(itemIndex); }} onClick={e => { if (!disabled) { onSelectValue(value); } if (otherProps.onClick) { otherProps.onClick(e); } }} style={style} >
{content}
{isValidElement(menuItemSelectedIcon) || selected} {iconVisible && ( {selected ? '✓' : null} )}
); }} >
); }, }); OptionList.props = OptionListProps; export default OptionList;