import React from 'react'; import PropTypes from 'prop-types'; import { strings } from '@douyinfe/semi-foundation/lib/cjs/tagInput/constants'; import '@douyinfe/semi-foundation/lib/cjs/tagInput/tagInput.css'; import TagInputFoundation, { TagInputAdapter, OnSortEndProps } from '@douyinfe/semi-foundation/lib/cjs/tagInput/foundation'; import { ArrayElement } from '../_base/base'; import BaseComponent from '../_base/baseComponent'; import { PopoverProps } from '../popover'; import { ShowTooltip } from '../typography'; import { RenderItemProps } from '../_sortable'; export type Size = ArrayElement; export type RestTagsPopoverProps = PopoverProps; type ValidateStatus = "default" | "error" | "warning"; export interface TagInputProps { className?: string; clearIcon?: React.ReactNode; defaultValue?: string[]; disabled?: boolean; inputValue?: string; maxLength?: number; max?: number; maxTagCount?: number; showRestTagsPopover?: boolean; restTagsPopoverProps?: RestTagsPopoverProps; showContentTooltip?: boolean | ShowTooltip; allowDuplicates?: boolean; addOnBlur?: boolean; draggable?: boolean; expandRestTagsOnClick?: boolean; onAdd?: (addedValue: string[]) => void; onBlur?: (e: React.MouseEvent) => void; onChange?: (value: string[]) => void; onExceed?: ((value: string[]) => void); onFocus?: (e: React.MouseEvent) => void; onInputChange?: (value: string, e: React.MouseEvent) => void; onInputExceed?: ((value: string) => void); onKeyDown?: (e: React.KeyboardEvent) => void; onRemove?: (removedValue: string, idx: number) => void; placeholder?: string; insetLabel?: React.ReactNode; insetLabelId?: string; prefix?: React.ReactNode; renderTagItem?: (value: string, index: number, onClose: () => void) => React.ReactNode; separator?: string | string[] | null; showClear?: boolean; size?: Size; split?: (originString: string, separators: string | string[] | null) => string[]; style?: React.CSSProperties; suffix?: React.ReactNode; validateStatus?: ValidateStatus; value?: string[]; autoFocus?: boolean; 'aria-label'?: string; preventScroll?: boolean; } export interface TagInputState { tagsArray?: string[]; inputValue?: string; inputWidth?: number; focusing?: boolean; hovering?: boolean; active?: boolean; entering?: boolean; } declare class TagInput extends BaseComponent { static propTypes: { children: PropTypes.Requireable; clearIcon: PropTypes.Requireable; style: PropTypes.Requireable; className: PropTypes.Requireable; disabled: PropTypes.Requireable; allowDuplicates: PropTypes.Requireable; max: PropTypes.Requireable; maxTagCount: PropTypes.Requireable; maxLength: PropTypes.Requireable; showRestTagsPopover: PropTypes.Requireable; restTagsPopoverProps: PropTypes.Requireable; showContentTooltip: PropTypes.Requireable; opts: PropTypes.Requireable; }>>>; defaultValue: PropTypes.Requireable; value: PropTypes.Requireable; inputValue: PropTypes.Requireable; placeholder: PropTypes.Requireable; separator: PropTypes.Requireable>; showClear: PropTypes.Requireable; addOnBlur: PropTypes.Requireable; draggable: PropTypes.Requireable; expandRestTagsOnClick: PropTypes.Requireable; autoFocus: PropTypes.Requireable; renderTagItem: PropTypes.Requireable<(...args: any[]) => any>; onBlur: PropTypes.Requireable<(...args: any[]) => any>; onFocus: PropTypes.Requireable<(...args: any[]) => any>; onChange: PropTypes.Requireable<(...args: any[]) => any>; onInputChange: PropTypes.Requireable<(...args: any[]) => any>; onExceed: PropTypes.Requireable<(...args: any[]) => any>; onInputExceed: PropTypes.Requireable<(...args: any[]) => any>; onAdd: PropTypes.Requireable<(...args: any[]) => any>; onRemove: PropTypes.Requireable<(...args: any[]) => any>; onKeyDown: PropTypes.Requireable<(...args: any[]) => any>; size: PropTypes.Requireable<"default" | "small" | "large">; validateStatus: PropTypes.Requireable<"default" | "error" | "warning" | "success">; prefix: PropTypes.Requireable>; suffix: PropTypes.Requireable>; 'aria-label': PropTypes.Requireable; preventScroll: PropTypes.Requireable; }; static defaultProps: { showClear: boolean; addOnBlur: boolean; allowDuplicates: boolean; showRestTagsPopover: boolean; autoFocus: boolean; draggable: boolean; expandRestTagsOnClick: boolean; showContentTooltip: boolean; separator: string; size: "default"; validateStatus: "default"; onBlur: (...args: any[]) => void; onFocus: (...args: any[]) => void; onChange: (...args: any[]) => void; onInputChange: (...args: any[]) => void; onExceed: (...args: any[]) => void; onInputExceed: (...args: any[]) => void; onAdd: (...args: any[]) => void; onRemove: (...args: any[]) => void; onKeyDown: (...args: any[]) => void; }; inputRef: React.RefObject; tagInputRef: React.RefObject; inputMirrorRef: React.RefObject; foundation: TagInputFoundation; clickOutsideHandler: any; constructor(props: TagInputProps); static getDerivedStateFromProps(nextProps: TagInputProps, prevState: TagInputState): { tagsArray: string[]; inputValue: string; }; get adapter(): TagInputAdapter; componentDidMount(): void; componentDidUpdate(prevProps: TagInputProps, prevState: TagInputState): void; updateInputWidth: () => void; handleInputChange: (e: React.ChangeEvent) => void; handleKeyDown: (e: React.KeyboardEvent) => void; handleInputFocus: (e: React.MouseEvent) => void; handleInputBlur: (e: React.MouseEvent) => void; handleClearBtn: (e: React.MouseEvent) => void; handleClearEnterPress: (e: React.KeyboardEvent) => void; handleTagClose: (idx: number) => void; handleInputMouseLeave: (e: React.MouseEvent) => void; handleClick: (e: React.MouseEvent) => void; handleInputMouseEnter: (e: React.MouseEvent) => void; handleClickPrefixOrSuffix: (e: React.MouseEvent) => void; handlePreventMouseDown: (e: React.MouseEvent) => void; renderClearBtn(): React.JSX.Element; renderPrefix(): React.JSX.Element; renderSuffix(): React.JSX.Element; getAllTags: () => (string | number | boolean | Iterable | React.JSX.Element)[]; renderTag: (value: any, index: number, sortableHandle?: any) => string | number | boolean | Iterable | React.JSX.Element; renderSortTag: (props: RenderItemProps) => string | number | boolean | Iterable | React.JSX.Element; onSortEnd: (callbackProps: OnSortEndProps) => void; renderTags(): React.JSX.Element; blur(): void; focus(): void; handleInputCompositionStart: (e: any) => void; handleInputCompositionEnd: (e: any) => void; render(): React.JSX.Element; } export default TagInput; export { ValidateStatus };