@douyinfe/semi-ui
Version:
A modern, comprehensive, flexible design system and UI library. Connect DesignOps & DevOps. Quickly build beautiful React apps. Maintained by Douyin-fe team.
166 lines (165 loc) • 8.15 kB
TypeScript
import React, { ReactNode } from 'react';
import PropTypes from 'prop-types';
import { AutoCompleteAdapter, StateOptionItem, DataItem } from '@douyinfe/semi-foundation/lib/es/autoComplete/foundation';
import BaseComponent, { ValidateStatus } from '../_base/baseComponent';
import { Position } from '../tooltip';
import Option from './option';
import '@douyinfe/semi-foundation/lib/es/autoComplete/autoComplete.css';
/**
* AutoComplete is an enhanced Input (candidates suggest that users can choose or not),
* and the Select positioning that supports Search is still a selector.
* 1. When you click to expand, Select will clear all input values, but AutoComplete will not
* 2. AutoComplete's renderSelectedItem only supports simple string returns, while Select's renderSelectedItem can return ReactNode
* 3. Select props.value supports incoming object, but autoComplete only supports string (because the value needs to be displayed in Input)
*/
export interface BaseDataItem extends DataItem {
label?: React.ReactNode;
}
export type AutoCompleteItems = BaseDataItem | string | number;
export interface AutoCompleteProps<T extends AutoCompleteItems> {
'aria-describedby'?: React.AriaAttributes['aria-describedby'];
'aria-errormessage'?: React.AriaAttributes['aria-errormessage'];
'aria-invalid'?: React.AriaAttributes['aria-invalid'];
'aria-label'?: React.AriaAttributes['aria-label'];
'aria-labelledby'?: React.AriaAttributes['aria-labelledby'];
'aria-required'?: React.AriaAttributes['aria-required'];
autoAdjustOverflow?: boolean;
autoFocus?: boolean;
className?: string;
clearIcon?: ReactNode;
children?: ReactNode;
data?: T[];
disabled?: boolean;
defaultOpen?: boolean;
defaultValue?: T;
defaultActiveFirstOption?: boolean;
dropdownMatchSelectWidth?: boolean;
dropdownClassName?: string;
dropdownStyle?: React.CSSProperties;
emptyContent?: React.ReactNode;
getPopupContainer?: () => HTMLElement;
insetLabel?: React.ReactNode;
insetLabelId?: string;
id?: string;
loading?: boolean;
motion?: boolean;
maxHeight?: string | number;
mouseEnterDelay?: number;
mouseLeaveDelay?: number;
onFocus?: (e: React.FocusEvent) => void;
onBlur?: (e: React.FocusEvent) => void;
onChange?: (value: string | number) => void;
onSearch?: (inputValue: string) => void;
onSelect?: (value: T) => void;
onClear?: () => void;
onChangeWithObject?: boolean;
onSelectWithObject?: boolean;
onDropdownVisibleChange?: (visible: boolean) => void;
onKeyDown?: (e: React.KeyboardEvent<HTMLInputElement>) => void;
prefix?: React.ReactNode;
placeholder?: string;
position?: Position;
renderItem?: (option: T) => React.ReactNode;
renderSelectedItem?: (option: T) => string;
size?: 'small' | 'default' | 'large';
style?: React.CSSProperties;
suffix?: React.ReactNode;
showClear?: boolean;
triggerRender?: (props?: any) => React.ReactNode;
stopPropagation?: boolean | string;
value?: string | number;
validateStatus?: ValidateStatus;
zIndex?: number;
}
interface KeyboardEventType {
onKeyDown?: React.KeyboardEventHandler;
}
interface AutoCompleteState {
dropdownMinWidth: null | number;
inputValue: string | undefined | number;
options: StateOptionItem[];
visible: boolean;
focusIndex: number;
selection: Map<any, any>;
rePosKey: number;
keyboardEventSet?: KeyboardEventType;
}
declare class AutoComplete<T extends AutoCompleteItems> extends BaseComponent<AutoCompleteProps<T>, AutoCompleteState> {
static propTypes: {
'aria-label': PropTypes.Requireable<string>;
'aria-labelledby': PropTypes.Requireable<string>;
'aria-invalid': PropTypes.Requireable<boolean>;
'aria-errormessage': PropTypes.Requireable<string>;
'aria-describedby': PropTypes.Requireable<string>;
'aria-required': PropTypes.Requireable<boolean>;
autoFocus: PropTypes.Requireable<boolean>;
autoAdjustOverflow: PropTypes.Requireable<boolean>;
className: PropTypes.Requireable<string>;
clearIcon: PropTypes.Requireable<PropTypes.ReactNodeLike>;
children: PropTypes.Requireable<PropTypes.ReactNodeLike>;
data: PropTypes.Requireable<any[]>;
defaultOpen: PropTypes.Requireable<boolean>;
defaultValue: PropTypes.Requireable<NonNullable<string | number>>;
defaultActiveFirstOption: PropTypes.Requireable<boolean>;
disabled: PropTypes.Requireable<boolean>;
dropdownMatchSelectWidth: PropTypes.Requireable<boolean>;
dropdownClassName: PropTypes.Requireable<string>;
dropdownStyle: PropTypes.Requireable<object>;
emptyContent: PropTypes.Requireable<PropTypes.ReactNodeLike>;
id: PropTypes.Requireable<string>;
insetLabel: PropTypes.Requireable<PropTypes.ReactNodeLike>;
insetLabelId: PropTypes.Requireable<string>;
onSearch: PropTypes.Requireable<(...args: any[]) => any>;
onSelect: PropTypes.Requireable<(...args: any[]) => any>;
onClear: PropTypes.Requireable<(...args: any[]) => any>;
onBlur: PropTypes.Requireable<(...args: any[]) => any>;
onFocus: PropTypes.Requireable<(...args: any[]) => any>;
onChange: PropTypes.Requireable<(...args: any[]) => any>;
onKeyDown: PropTypes.Requireable<(...args: any[]) => any>;
position: PropTypes.Requireable<"left" | "top" | "right" | "bottom" | "topLeft" | "topRight" | "leftTop" | "leftBottom" | "rightTop" | "rightBottom" | "bottomLeft" | "bottomRight" | "leftTopOver" | "rightTopOver" | "leftBottomOver" | "rightBottomOver">;
placeholder: PropTypes.Requireable<string>;
prefix: PropTypes.Requireable<PropTypes.ReactNodeLike>;
onChangeWithObject: PropTypes.Requireable<boolean>;
onSelectWithObject: PropTypes.Requireable<boolean>;
renderItem: PropTypes.Requireable<(...args: any[]) => any>;
renderSelectedItem: PropTypes.Requireable<(...args: any[]) => any>;
suffix: PropTypes.Requireable<PropTypes.ReactNodeLike>;
showClear: PropTypes.Requireable<boolean>;
size: PropTypes.Requireable<"default" | "small" | "large">;
style: PropTypes.Requireable<object>;
stopPropagation: PropTypes.Requireable<NonNullable<string | boolean>>;
maxHeight: PropTypes.Requireable<NonNullable<string | number>>;
mouseEnterDelay: PropTypes.Requireable<number>;
mouseLeaveDelay: PropTypes.Requireable<number>;
motion: PropTypes.Requireable<NonNullable<boolean | object>>;
getPopupContainer: PropTypes.Requireable<(...args: any[]) => any>;
triggerRender: PropTypes.Requireable<(...args: any[]) => any>;
value: PropTypes.Requireable<NonNullable<string | number>>;
validateStatus: PropTypes.Requireable<"default" | "error" | "warning" | "success">;
zIndex: PropTypes.Requireable<number>;
};
static Option: typeof Option;
static __SemiComponentName__: string;
static defaultProps: any;
triggerRef: React.RefObject<HTMLDivElement> | null;
optionsRef: React.RefObject<HTMLDivElement> | null;
optionListId: string;
private clickOutsideHandler;
constructor(props: AutoCompleteProps<T>);
get adapter(): AutoCompleteAdapter<AutoCompleteProps<T>, AutoCompleteState>;
componentDidMount(): void;
componentWillUnmount(): void;
componentDidUpdate(prevProps: AutoCompleteProps<T>, prevState: AutoCompleteState): void;
onSelect: (option: StateOptionItem, optionIndex: number, e: React.MouseEvent | React.KeyboardEvent) => void;
onSearch: (value: string) => void;
onBlur: (e: React.FocusEvent) => void;
onFocus: (e: React.FocusEvent) => void;
onInputClear: () => void;
handleInputClick: (e: React.MouseEvent) => void;
renderInput(): React.ReactNode;
renderLoading(): React.JSX.Element;
renderOption(option: StateOptionItem, optionIndex: number): React.ReactNode;
renderOptionList(): React.ReactNode;
render(): React.ReactNode;
}
export default AutoComplete;