@douyinfe/semi-ui/lib/cjs/transfer/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 { TransferAdapter, BasicDataItem, OnSortEndProps } from '@douyinfe/semi-foundation/lib/cjs/transfer/foundation';
import '@douyinfe/semi-foundation/lib/cjs/transfer/transfer.css';
import BaseComponent from '../_base/baseComponent';
import { Locale } from '../locale/interface';
import { InputProps } from '../input/index';
import Tree from '../tree';
import { TreeProps } from '../tree/interface';
import { RenderItemProps } from '../_sortable';
export interface DataItem extends BasicDataItem {
    label?: React.ReactNode;
    style?: React.CSSProperties;
}
export interface GroupItem {
    title?: string;
    children?: Array<DataItem>;
}
export interface TreeItem extends DataItem {
    children: Array<TreeItem>;
}
export interface RenderSourceItemProps extends DataItem {
    checked: boolean;
    onChange?: () => void;
}
export interface RenderSelectedItemProps extends DataItem {
    onRemove?: () => void;
    sortableHandle?: any;
}
export interface EmptyContent {
    left?: React.ReactNode;
    right?: React.ReactNode;
    search?: React.ReactNode;
}
export type Type = 'list' | 'groupList' | 'treeList';
export interface SourcePanelProps {
    value: Array<string | number>;
    loading: boolean;
    noMatch: boolean;
    filterData: Array<DataItem>;
    sourceData: Array<DataItem>;
    propsDataSource: DataSource;
    allChecked: boolean;
    showNumber: number;
    inputValue: string;
    onSearch: (searchString: string) => void;
    onAllClick: () => void;
    selectedItems: Map<string | number, DataItem>;
    onSelectOrRemove: (item: DataItem) => void;
    onSelect: (value: Array<string | number>) => void;
}
export type OnSortEnd = ({ oldIndex, newIndex }: OnSortEndProps) => void;
export interface SelectedPanelProps {
    length: number;
    selectedData: Array<DataItem>;
    onClear: () => void;
    onRemove: (item: DataItem) => void;
    onSortEnd: OnSortEnd;
}
export interface ResolvedDataItem extends DataItem {
    _parent?: {
        title: string;
    };
    _optionKey?: string | number;
}
export interface DraggableResolvedDataItem {
    key?: string | number;
    index?: number;
    item?: ResolvedDataItem;
}
export type DataSource = Array<DataItem> | Array<GroupItem> | Array<TreeItem>;
interface HeaderConfig {
    totalContent: string;
    allContent: string;
    onAllClick: () => void;
    type: string;
    showButton: boolean;
    num: number;
    allChecked?: boolean;
}
type SourceHeaderProps = {
    num: number;
    showButton: boolean;
    allChecked: boolean;
    onAllClick: () => void;
};
type SelectedHeaderProps = {
    num: number;
    showButton: boolean;
    onClear: () => void;
};
export interface TransferState {
    data: Array<ResolvedDataItem>;
    selectedItems: Map<number | string, ResolvedDataItem>;
    searchResult: Set<number | string>;
    inputValue: string;
}
export interface TransferProps {
    style?: React.CSSProperties;
    className?: string;
    disabled?: boolean;
    dataSource?: DataSource;
    filter?: boolean | ((sugInput: string, item: DataItem) => boolean);
    defaultValue?: Array<string | number>;
    value?: Array<string | number>;
    inputProps?: InputProps;
    type?: Type;
    emptyContent?: EmptyContent;
    draggable?: boolean;
    treeProps?: Omit<TreeProps, 'value' | 'ref' | 'onChange'>;
    showPath?: boolean;
    loading?: boolean;
    onChange?: (values: Array<string | number>, items: Array<DataItem>) => void;
    onSelect?: (item: DataItem) => void;
    onDeselect?: (item: DataItem) => void;
    onSearch?: (sunInput: string) => void;
    renderSourceItem?: (item: RenderSourceItemProps) => React.ReactNode;
    renderSelectedItem?: (item: RenderSelectedItemProps) => React.ReactNode;
    renderSourcePanel?: (sourcePanelProps: SourcePanelProps) => React.ReactNode;
    renderSelectedPanel?: (selectedPanelProps: SelectedPanelProps) => React.ReactNode;
    renderSourceHeader?: (headProps: SourceHeaderProps) => React.ReactNode;
    renderSelectedHeader?: (headProps: SelectedHeaderProps) => React.ReactNode;
}
declare class Transfer extends BaseComponent<TransferProps, TransferState> {
    static propTypes: {
        style: PropTypes.Requireable<object>;
        className: PropTypes.Requireable<string>;
        disabled: PropTypes.Requireable<boolean>;
        dataSource: PropTypes.Requireable<any[]>;
        filter: PropTypes.Requireable<NonNullable<boolean | ((...args: any[]) => any)>>;
        onSearch: PropTypes.Requireable<(...args: any[]) => any>;
        inputProps: PropTypes.Requireable<object>;
        value: PropTypes.Requireable<any[]>;
        defaultValue: PropTypes.Requireable<any[]>;
        onChange: PropTypes.Requireable<(...args: any[]) => any>;
        onSelect: PropTypes.Requireable<(...args: any[]) => any>;
        onDeselect: PropTypes.Requireable<(...args: any[]) => any>;
        renderSourceItem: PropTypes.Requireable<(...args: any[]) => any>;
        renderSelectedItem: PropTypes.Requireable<(...args: any[]) => any>;
        loading: PropTypes.Requireable<boolean>;
        type: PropTypes.Requireable<string>;
        treeProps: PropTypes.Requireable<object>;
        showPath: PropTypes.Requireable<boolean>;
        emptyContent: PropTypes.Requireable<PropTypes.InferProps<{
            search: PropTypes.Requireable<PropTypes.ReactNodeLike>;
            left: PropTypes.Requireable<PropTypes.ReactNodeLike>;
            right: PropTypes.Requireable<PropTypes.ReactNodeLike>;
        }>>;
        renderSourcePanel: PropTypes.Requireable<(...args: any[]) => any>;
        renderSelectedPanel: PropTypes.Requireable<(...args: any[]) => any>;
        draggable: PropTypes.Requireable<boolean>;
    };
    static defaultProps: {
        type: string;
        dataSource: DataSource;
        onSearch: (...args: any[]) => void;
        onChange: (...args: any[]) => void;
        onSelect: (...args: any[]) => void;
        onDeselect: (...args: any[]) => void;
        onClear: (...args: any[]) => void;
        defaultValue: (string | number)[];
        emptyContent: {};
        showPath: boolean;
    };
    _treeRef: Tree;
    constructor(props: TransferProps);
    static getDerivedStateFromProps(props: TransferProps, state: TransferState): TransferState;
    get adapter(): TransferAdapter<TransferProps, TransferState>;
    onInputChange(value: string): void;
    search(value: string): void;
    onSelectOrRemove(item: ResolvedDataItem): void;
    onSortEnd(callbackProps: OnSortEndProps): void;
    renderFilter(locale: Locale['Transfer']): React.JSX.Element;
    renderHeader(headerConfig: HeaderConfig): string | number | boolean | Iterable<React.ReactNode> | React.JSX.Element;
    renderLeftItem(item: ResolvedDataItem, index: number): string | number | boolean | Iterable<React.ReactNode> | React.JSX.Element;
    renderLeft(locale: Locale['Transfer']): string | number | boolean | Iterable<React.ReactNode> | React.JSX.Element;
    renderGroupTitle(group: GroupItem, index: number): React.JSX.Element;
    renderLeftTree(): React.JSX.Element;
    renderLeftList(visibileItems: Array<ResolvedDataItem>): React.JSX.Element;
    renderRightItem: (item: ResolvedDataItem, sortableHandle?: any) => React.ReactNode;
    renderSortItem: (props: RenderItemProps) => React.ReactNode;
    renderEmpty(type: string, emptyText: React.ReactNode): React.JSX.Element;
    renderRightSortableList(selectedData: Array<ResolvedDataItem>): React.JSX.Element;
    renderRight(locale: Locale['Transfer']): string | number | boolean | Iterable<React.ReactNode> | React.JSX.Element;
    render(): React.JSX.Element;
}
export default Transfer;