@douyinfe/semi-ui/lib/cjs/tagInput/index.d.ts

A modern, comprehensive, flexible design system and UI library. Connect DesignOps & DevOps. Quickly build beautiful React apps. Maintained by Douyin-fe team.

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<typeof strings.SIZE_SET>;
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<HTMLInputElement>) => void;
    onChange?: (value: string[]) => void;
    onExceed?: ((value: string[]) => void);
    onFocus?: (e: React.MouseEvent<HTMLInputElement>) => void;
    onInputChange?: (value: string, e: React.MouseEvent<HTMLInputElement>) => void;
    onInputExceed?: ((value: string) => void);
    onKeyDown?: (e: React.KeyboardEvent<HTMLInputElement>) => 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;
    style?: React.CSSProperties;
    suffix?: React.ReactNode;
    validateStatus?: ValidateStatus;
    value?: string[];
    autoFocus?: boolean;
    'aria-label'?: string;
    preventScroll?: boolean;
}
export interface TagInputState {
    tagsArray?: string[];
    inputValue?: string;
    focusing?: boolean;
    hovering?: boolean;
    active?: boolean;
    entering?: boolean;
}
declare class TagInput extends BaseComponent<TagInputProps, TagInputState> {
    static propTypes: {
        children: PropTypes.Requireable<PropTypes.ReactNodeLike>;
        clearIcon: PropTypes.Requireable<PropTypes.ReactNodeLike>;
        style: PropTypes.Requireable<object>;
        className: PropTypes.Requireable<string>;
        disabled: PropTypes.Requireable<boolean>;
        allowDuplicates: PropTypes.Requireable<boolean>;
        max: PropTypes.Requireable<number>;
        maxTagCount: PropTypes.Requireable<number>;
        maxLength: PropTypes.Requireable<number>;
        showRestTagsPopover: PropTypes.Requireable<boolean>;
        restTagsPopoverProps: PropTypes.Requireable<object>;
        showContentTooltip: PropTypes.Requireable<NonNullable<boolean | PropTypes.InferProps<{
            type: PropTypes.Requireable<string>;
            opts: PropTypes.Requireable<object>;
        }>>>;
        defaultValue: PropTypes.Requireable<any[]>;
        value: PropTypes.Requireable<any[]>;
        inputValue: PropTypes.Requireable<string>;
        placeholder: PropTypes.Requireable<string>;
        separator: PropTypes.Requireable<NonNullable<string | any[]>>;
        showClear: PropTypes.Requireable<boolean>;
        addOnBlur: PropTypes.Requireable<boolean>;
        draggable: PropTypes.Requireable<boolean>;
        expandRestTagsOnClick: PropTypes.Requireable<boolean>;
        autoFocus: PropTypes.Requireable<boolean>;
        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<NonNullable<PropTypes.ReactNodeLike>>;
        suffix: PropTypes.Requireable<NonNullable<PropTypes.ReactNodeLike>>;
        'aria-label': PropTypes.Requireable<string>;
        preventScroll: PropTypes.Requireable<boolean>;
    };
    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<HTMLInputElement>;
    tagInputRef: React.RefObject<HTMLDivElement>;
    foundation: TagInputFoundation;
    clickOutsideHandler: any;
    constructor(props: TagInputProps);
    static getDerivedStateFromProps(nextProps: TagInputProps, prevState: TagInputState): {
        tagsArray: string[];
        inputValue: string;
    };
    get adapter(): TagInputAdapter;
    componentDidMount(): void;
    handleInputChange: (e: React.ChangeEvent<HTMLInputElement>) => void;
    handleKeyDown: (e: React.KeyboardEvent<HTMLInputElement>) => void;
    handleInputFocus: (e: React.MouseEvent<HTMLInputElement>) => void;
    handleInputBlur: (e: React.MouseEvent<HTMLInputElement>) => void;
    handleClearBtn: (e: React.MouseEvent<HTMLDivElement>) => void;
    handleClearEnterPress: (e: React.KeyboardEvent<HTMLDivElement>) => void;
    handleTagClose: (idx: number) => void;
    handleInputMouseLeave: (e: React.MouseEvent<HTMLDivElement>) => void;
    handleClick: (e: React.MouseEvent<HTMLDivElement>) => void;
    handleInputMouseEnter: (e: React.MouseEvent<HTMLDivElement>) => void;
    handleClickPrefixOrSuffix: (e: React.MouseEvent<HTMLInputElement>) => void;
    handlePreventMouseDown: (e: React.MouseEvent<HTMLInputElement>) => void;
    renderClearBtn(): React.JSX.Element;
    renderPrefix(): React.JSX.Element;
    renderSuffix(): React.JSX.Element;
    getAllTags: () => React.JSX.Element[];
    renderTag: (value: any, index: number, sortableHandle?: any) => React.JSX.Element;
    renderSortTag: (props: RenderItemProps) => 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 };