@wix/design-system
Version:
@wix/design-system
123 lines • 6.18 kB
TypeScript
import React, { KeyboardEvent, PureComponent, RefObject, SyntheticEvent } from 'react';
import PropTypes from 'prop-types';
import { DropdownLayoutOption, DropdownLayoutValueOption } from '../DropdownLayout';
import type { DropdownLayout as DropdownLayoutClass } from '../DropdownLayout/DropdownLayout';
import type { DropdownBaseProps } from './DropdownBase.types';
type DropdownBaseState = {
open?: boolean | undefined;
listAutoFocus?: boolean;
selectedId?: string | number | undefined;
activeDescendantId?: string | undefined;
};
declare class DropdownBase extends PureComponent<DropdownBaseProps, DropdownBaseState> {
static displayName: string;
static propTypes: {
dataHook: PropTypes.Requireable<string>;
className: PropTypes.Requireable<string>;
open: PropTypes.Requireable<boolean>;
placement: PropTypes.Requireable<string>;
appendTo: PropTypes.Requireable<NonNullable<PropTypes.ReactNodeLike>>;
showArrow: PropTypes.Requireable<boolean>;
onClickOutside: PropTypes.Requireable<(...args: any[]) => any>;
onMouseEnter: PropTypes.Requireable<(...args: any[]) => any>;
onMouseLeave: PropTypes.Requireable<(...args: any[]) => any>;
onShow: PropTypes.Requireable<(...args: any[]) => any>;
onHide: PropTypes.Requireable<(...args: any[]) => any>;
onSelect: PropTypes.Requireable<(...args: any[]) => any>;
dynamicWidth: PropTypes.Requireable<boolean>;
minWidth: PropTypes.Requireable<NonNullable<string | number | null | undefined>>;
maxWidth: PropTypes.Requireable<NonNullable<string | number | null | undefined>>;
maxHeight: PropTypes.Requireable<NonNullable<string | number | null | undefined>>;
children: PropTypes.Requireable<NonNullable<((...args: any[]) => any) | PropTypes.ReactNodeLike>>;
options: PropTypes.Requireable<(NonNullable<PropTypes.InferProps<{
id: PropTypes.Validator<NonNullable<NonNullable<string | number | null | undefined>>>;
value: PropTypes.Validator<NonNullable<NonNullable<((...args: any[]) => any) | PropTypes.ReactNodeLike>>>;
disabled: PropTypes.Requireable<boolean>;
overrideStyle: PropTypes.Requireable<boolean>;
}> | PropTypes.InferProps<{
value: PropTypes.Requireable<string>;
}> | null | undefined> | null | undefined)[]>;
markedOption: PropTypes.Requireable<NonNullable<string | number | boolean | null | undefined>>;
selectedId: PropTypes.Requireable<NonNullable<string | number | null | undefined>>;
overflow: PropTypes.Requireable<string>;
tabIndex: PropTypes.Requireable<number>;
initialSelectedId: PropTypes.Requireable<NonNullable<string | number | null | undefined>>;
zIndex: PropTypes.Requireable<number>;
moveBy: PropTypes.Requireable<PropTypes.InferProps<{
x: PropTypes.Requireable<number>;
y: PropTypes.Requireable<number>;
}>>;
flip: PropTypes.Requireable<boolean>;
fixed: PropTypes.Requireable<boolean>;
fluid: PropTypes.Requireable<boolean>;
animate: PropTypes.Requireable<boolean>;
focusOnSelectedOption: PropTypes.Requireable<boolean>;
infiniteScroll: PropTypes.Requireable<boolean>;
loadMore: PropTypes.Requireable<(...args: any[]) => any>;
hasMore: PropTypes.Requireable<boolean>;
focusOnOption: PropTypes.Requireable<NonNullable<string | number | null | undefined>>;
scrollToOption: PropTypes.Requireable<NonNullable<string | number | null | undefined>>;
listType: PropTypes.Requireable<string>;
fixedHeader: PropTypes.Requireable<PropTypes.ReactNodeLike>;
fixedFooter: PropTypes.Requireable<PropTypes.ReactNodeLike>;
autoFocus: PropTypes.Requireable<boolean>;
};
triggerElementRef: RefObject<HTMLElement>;
constructor(props: DropdownBaseProps);
static defaultProps: {
placement: string;
appendTo: string;
showArrow: boolean;
maxHeight: string;
fluid: boolean;
animate: boolean;
listType: string;
onShow: () => void;
onHide: () => void;
};
uniqueId: string;
_dropdownLayoutRef: DropdownLayoutClass | null;
_shouldCloseOnMouseLeave: boolean;
state: {
open: boolean | undefined;
selectedId: string | number;
activeDescendantId: undefined;
listAutoFocus: boolean;
};
/**
* Return `true` if the `open` prop is being controlled
*/
_isControllingOpen: (props?: Readonly<DropdownBaseProps>) => boolean;
/**
* Return `true` if the selection behaviour is being controlled
*/
_isControllingSelection: (props?: Readonly<DropdownBaseProps>) => boolean;
_open: () => void;
_close: (e?: SyntheticEvent) => void;
_toggle: () => void;
_handleClickOutside: () => void;
_handlePopoverMouseEnter: () => void;
_handlePopoverMouseLeave: () => void;
_handleSelect: (selectedOption: DropdownLayoutValueOption) => void;
_handleOptionMarked: (_option: DropdownLayoutOption | null, optionElementId?: string) => void;
_handleClose: () => void;
_getSelectedOption: (selectedId: DropdownLayoutOption["id"]) => DropdownLayoutOption | undefined;
/**
* Determine if a certain key should open the DropdownLayout
*/
_isOpenKey: (key: string) => boolean;
_isClosingKey: (key: string) => boolean;
/**
* A common `keydown` event that can be used for the target elements. It will automatically
* delegate the event to the underlying <DropdownLayout/>, and will determine when to open the
* dropdown depending on the pressed key.
*/
_handleKeyDown: (e: KeyboardEvent) => void;
_delegateKeyDown: (e: KeyboardEvent) => boolean | DropdownLayoutOption | undefined;
UNSAFE_componentWillReceiveProps(nextProps: DropdownBaseProps): void;
_renderChildren(): React.ReactNode;
_setDropdownLayoutRef: (ref: DropdownLayoutClass) => void;
render(): React.JSX.Element;
}
export default DropdownBase;
//# sourceMappingURL=DropdownBase.d.ts.map