import { DownshiftProps as DownshiftPropsOriginal, GetItemPropsOptions } from "downshift"; import * as React from "react"; import { RefHandler } from "react-popper"; import { ViewProps } from "../View"; type GetItemProps = (options: GetItemPropsOptions) => any; type OnInputValueChange = (inputValue: string, stateAndHelpers: object) => void; export type RenderMenu = (ref: RefHandler | undefined, style: React.CSSProperties | undefined, getItemProps: GetItemProps, downshiftParams: any) => React.ReactNode; export type RenderItem = (item: T, index: number, getItemProps: GetItemProps, downshiftParams: any) => React.ReactNode; export interface DropdownProps extends ViewProps { /** Children needs to be a function that returns React elements that are meant to open the dropdown, taking in a reference and adding it as a prop. Note that the ref is required, if you do not have it the dropdown will not render. */ children: (params: any) => React.ReactNode; itemList?: any[]; renderMenu?: RenderMenu; /** The render function takes in an item, and index value and the getItemProps found in Downshift. This will return a React elements. Each React element needs to also have the result from getItemProps destructured onto it, with getItemProps having the key, item and index passed to it. */ renderFunction?: RenderItem; initialInputValue?: string; onInputValueChange?: OnInputValueChange; onOuterClick?: () => void; onStateChange?: DownshiftPropsOriginal["onStateChange"]; itemToString: (item: any) => string; placement?: "auto-start" | "auto" | "auto-end" | "top-start" | "top" | "top-end" | "right-start" | "right" | "right-end" | "bottom-end" | "bottom" | "bottom-start" | "left-end" | "left" | "left-start"; /** Offset can be used to customize the placement of the dropdown, for the syntax please see the popper.js docs */ offset?: string | number; labelId?: string; /** isFullscreen drives things like showing the dropdown fullscreen */ isFullscreen?: boolean; } /** * This component renders a dropdown list of items, which can be used with multiple other components. It can be used with menus, searches and selects. The child is the element that triggers the dropdown (e.g. button or text input), with the renderFunction taking in the list of items and displaying them as defined. */ declare const Dropdown: React.SFC; export default Dropdown;