@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.
205 lines (204 loc) • 10.5 kB
TypeScript
import React, { ReactNode, CSSProperties, MouseEvent, KeyboardEvent } from 'react';
import PropTypes from 'prop-types';
import { BasicCascaderInnerData, BasicCascaderProps, BasicTriggerRenderProps, BasicScrollPanelProps, CascaderAdapter, CascaderType } from '@douyinfe/semi-foundation/lib/cjs/cascader/foundation';
import '@douyinfe/semi-foundation/lib/cjs/cascader/cascader.css';
import { ContextValue } from '../configProvider/context';
import BaseComponent, { ValidateStatus } from '../_base/baseComponent';
import Input from '../input/index';
import { PopoverProps } from '../popover/index';
import { CascaderData, Entities, Entity, Data, FilterRenderProps } from './item';
import { Position } from '../tooltip/index';
export type { CascaderType, ShowNextType } from '@douyinfe/semi-foundation/lib/cjs/cascader/foundation';
export type { CascaderData, Entity, Data, CascaderItemProps, FilterRenderProps } from './item';
export interface ScrollPanelProps extends BasicScrollPanelProps {
activeNode: CascaderData;
}
export interface TriggerRenderProps extends BasicTriggerRenderProps {
componentProps: CascaderProps;
onClear: (e: React.MouseEvent) => void;
}
export type SimpleValueType = string | number | CascaderData;
export type Value = SimpleValueType | Array<SimpleValueType> | Array<Array<SimpleValueType>>;
export interface CascaderProps extends BasicCascaderProps {
'aria-describedby'?: React.AriaAttributes['aria-describedby'];
'aria-errormessage'?: React.AriaAttributes['aria-errormessage'];
'aria-invalid'?: React.AriaAttributes['aria-invalid'];
'aria-labelledby'?: React.AriaAttributes['aria-labelledby'];
'aria-required'?: React.AriaAttributes['aria-required'];
'aria-label'?: React.AriaAttributes['aria-label'];
arrowIcon?: ReactNode;
clearIcon?: ReactNode;
expandIcon?: ReactNode;
defaultValue?: Value;
dropdownStyle?: CSSProperties;
dropdownMargin?: PopoverProps['margin'];
emptyContent?: ReactNode;
motion?: boolean;
filterTreeNode?: ((inputValue: string, treeNodeString: string, data?: CascaderData) => boolean) | boolean;
filterSorter?: (first: CascaderData, second: CascaderData, inputValue: string) => number;
filterRender?: (props: FilterRenderProps) => ReactNode;
treeData?: Array<CascaderData>;
restTagsPopoverProps?: PopoverProps;
children?: React.ReactNode;
value?: Value;
prefix?: ReactNode;
suffix?: ReactNode;
id?: string;
insetLabel?: ReactNode;
insetLabelId?: string;
style?: CSSProperties;
bottomSlot?: ReactNode;
topSlot?: ReactNode;
triggerRender?: (props: TriggerRenderProps) => ReactNode;
onListScroll?: (e: React.UIEvent<HTMLUListElement, UIEvent>, panel: ScrollPanelProps) => void;
loadData?: (selectOptions: CascaderData[]) => Promise<void>;
onLoad?: (newLoadedKeys: Set<string>, data: CascaderData) => void;
onChange?: (value: Value) => void;
onExceed?: (checkedItem: Entity[]) => void;
displayRender?: (selected: Array<string> | Entity, idx?: number) => ReactNode;
onBlur?: (e: MouseEvent) => void;
onFocus?: (e: MouseEvent) => void;
validateStatus?: ValidateStatus;
position?: Position;
searchPosition?: string;
}
export interface CascaderState extends BasicCascaderInnerData {
keyEntities: Entities;
prevProps: CascaderProps;
treeData?: Array<CascaderData>;
}
declare class Cascader extends BaseComponent<CascaderProps, CascaderState> {
static __SemiComponentName__: string;
static contextType: React.Context<ContextValue>;
static propTypes: {
'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>;
'aria-label': PropTypes.Requireable<string>;
arrowIcon: PropTypes.Requireable<PropTypes.ReactNodeLike>;
borderless: PropTypes.Requireable<boolean>;
clearIcon: PropTypes.Requireable<PropTypes.ReactNodeLike>;
changeOnSelect: PropTypes.Requireable<boolean>;
defaultValue: PropTypes.Requireable<NonNullable<string | any[]>>;
disabled: PropTypes.Requireable<boolean>;
dropdownClassName: PropTypes.Requireable<string>;
dropdownStyle: PropTypes.Requireable<object>;
dropdownMargin: PropTypes.Requireable<NonNullable<number | object>>;
emptyContent: PropTypes.Requireable<PropTypes.ReactNodeLike>;
motion: PropTypes.Requireable<boolean>;
filterTreeNode: PropTypes.Requireable<NonNullable<boolean | ((...args: any[]) => any)>>;
filterLeafOnly: PropTypes.Requireable<boolean>;
placeholder: PropTypes.Requireable<string>;
searchPlaceholder: PropTypes.Requireable<string>;
size: PropTypes.Requireable<CascaderType>;
style: PropTypes.Requireable<object>;
className: PropTypes.Requireable<string>;
treeData: PropTypes.Requireable<PropTypes.InferProps<{
value: PropTypes.Requireable<NonNullable<string | number>>;
label: PropTypes.Requireable<any>;
}>[]>;
treeNodeFilterProp: PropTypes.Requireable<string>;
suffix: PropTypes.Requireable<PropTypes.ReactNodeLike>;
prefix: PropTypes.Requireable<PropTypes.ReactNodeLike>;
insetLabel: PropTypes.Requireable<PropTypes.ReactNodeLike>;
insetLabelId: PropTypes.Requireable<string>;
id: PropTypes.Requireable<string>;
displayProp: PropTypes.Requireable<string>;
displayRender: PropTypes.Requireable<(...args: any[]) => any>;
onChange: PropTypes.Requireable<(...args: any[]) => any>;
onSearch: PropTypes.Requireable<(...args: any[]) => any>;
onSelect: PropTypes.Requireable<(...args: any[]) => any>;
onBlur: PropTypes.Requireable<(...args: any[]) => any>;
onFocus: PropTypes.Requireable<(...args: any[]) => any>;
children: PropTypes.Requireable<PropTypes.ReactNodeLike>;
getPopupContainer: PropTypes.Requireable<(...args: any[]) => any>;
zIndex: PropTypes.Requireable<number>;
value: PropTypes.Requireable<NonNullable<string | number | any[]>>;
validateStatus: PropTypes.Requireable<"default" | "error" | "warning" | "success">;
showNext: PropTypes.Requireable<"hover" | "click">;
stopPropagation: PropTypes.Requireable<NonNullable<string | boolean>>;
showClear: PropTypes.Requireable<boolean>;
defaultOpen: PropTypes.Requireable<boolean>;
autoAdjustOverflow: PropTypes.Requireable<boolean>;
onDropdownVisibleChange: PropTypes.Requireable<(...args: any[]) => any>;
triggerRender: PropTypes.Requireable<(...args: any[]) => any>;
onListScroll: PropTypes.Requireable<(...args: any[]) => any>;
onChangeWithObject: PropTypes.Requireable<boolean>;
bottomSlot: PropTypes.Requireable<PropTypes.ReactNodeLike>;
topSlot: PropTypes.Requireable<PropTypes.ReactNodeLike>;
multiple: PropTypes.Requireable<boolean>;
autoMergeValue: PropTypes.Requireable<boolean>;
maxTagCount: PropTypes.Requireable<number>;
showRestTagsPopover: PropTypes.Requireable<boolean>;
restTagsPopoverProps: PropTypes.Requireable<object>;
max: PropTypes.Requireable<number>;
separator: PropTypes.Requireable<string>;
onExceed: PropTypes.Requireable<(...args: any[]) => any>;
onClear: PropTypes.Requireable<(...args: any[]) => any>;
loadData: PropTypes.Requireable<(...args: any[]) => any>;
onLoad: PropTypes.Requireable<(...args: any[]) => any>;
loadedKeys: PropTypes.Requireable<any[]>;
disableStrictly: PropTypes.Requireable<boolean>;
leafOnly: PropTypes.Requireable<boolean>;
enableLeafClick: PropTypes.Requireable<boolean>;
preventScroll: PropTypes.Requireable<boolean>;
position: PropTypes.Requireable<string>;
searchPosition: PropTypes.Requireable<string>;
};
static defaultProps: any;
options: any;
isEmpty: boolean;
inputRef: React.RefObject<typeof Input>;
triggerRef: React.RefObject<HTMLDivElement>;
optionsRef: React.RefObject<any>;
clickOutsideHandler: any;
mergeType: string;
context: ContextValue;
loadingKeysRef: React.RefObject<Set<string> | null>;
loadedKeysRef: React.RefObject<Set<string> | null>;
constructor(props: CascaderProps);
get adapter(): CascaderAdapter;
static getDerivedStateFromProps(props: CascaderProps, prevState: CascaderState): Partial<CascaderState>;
componentDidMount(): void;
componentWillUnmount(): void;
componentDidUpdate(prevProps: CascaderProps): void;
search: (value: string) => void;
handleInputChange: (value: string) => void;
handleTagRemoveInTrigger: (pos: string) => void;
handleTagClose: (tagChildren: React.ReactNode, e: React.MouseEvent<HTMLElement>, tagKey: string | number) => void;
renderTagItem: (nodeKey: string, idx: number) => string | number | boolean | Iterable<React.ReactNode> | React.JSX.Element;
onRemoveInTagInput: (v: string) => void;
renderTagInput(): React.JSX.Element;
renderInput(): React.JSX.Element;
handleItemClick: (e: MouseEvent | KeyboardEvent, item: Entity | Data) => void;
handleItemHover: (e: MouseEvent, item: Entity) => void;
onItemCheckboxClick: (item: Entity | Data) => void;
handleListScroll: (e: React.UIEvent<HTMLUListElement, UIEvent>, ind: number) => void;
close(): void;
open(): void;
focus(): void;
blur(): void;
renderContent: () => React.JSX.Element;
renderPlusN: (hiddenTag: Array<ReactNode>) => React.JSX.Element;
renderMultipleTags: () => React.JSX.Element;
renderDisplayText: () => ReactNode;
renderSelectContent: () => React.JSX.Element;
renderSuffix: () => React.JSX.Element;
renderPrefix: () => React.JSX.Element;
renderCustomTrigger: () => React.JSX.Element;
handleMouseOver: () => void;
handleMouseLeave: () => void;
handleClear: (e: MouseEvent) => void;
/**
* A11y: simulate clear button click
*/
handleClearEnterPress: (e: KeyboardEvent) => void;
showClearBtn: () => boolean;
renderClearBtn: () => React.JSX.Element;
renderArrow: () => React.JSX.Element;
renderSelection: () => React.JSX.Element;
render(): React.JSX.Element;
}
export default Cascader;