-
Notifications
You must be signed in to change notification settings - Fork 30.1k
/
Menu.d.ts
159 lines (136 loc) · 4.44 KB
/
Menu.d.ts
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
import {
Component,
ReactElement,
Ref as ElementRef,
ReactNode,
ComponentType
} from 'react';
import { createPortal } from 'react-dom';
import {
animatedScrollTo,
getBoundingClientObj,
RectType,
getScrollParent,
getScrollTop,
scrollTo,
} from '../utils';
import { borderRadius, colors, spacing } from '../theme';
import {
InnerRef,
MenuPlacement,
MenuPosition,
CommonProps,
OptionTypeBase,
} from '../types';
// ==============================
// Menu
// ==============================
// Get Menu Placement
// ------------------------------
export interface MenuState { placement: 'bottom' | 'top' | null; maxHeight: number; }
export interface PlacementArgs {
maxHeight: number;
menuEl: ElementRef<any>;
minHeight: number;
placement: 'bottom' | 'top' | 'auto';
shouldScroll: boolean;
isFixedPosition: boolean;
}
export function getMenuPlacement(args: PlacementArgs): MenuState;
// Menu Component
// ------------------------------
export type MenuProps<OptionType extends OptionTypeBase> = CommonProps<OptionType> & {
/** The children to be rendered. */
children: ReactElement,
/** Callback to update the portal after possible flip. */
getPortalPlacement: (state: MenuState) => void,
/** Props to be passed to the menu wrapper. */
innerProps: object,
/** Set the maximum height of the menu. */
maxMenuHeight: number,
/** Set whether the menu should be at the top, at the bottom. The auto options sets it to bottom. */
menuPlacement: MenuPlacement,
/* The CSS position value of the menu, when "fixed" extra layout management is required */
menuPosition: MenuPosition,
/** Set the minimum height of the menu. */
minMenuHeight: number,
/** Set whether the page should scroll to show the menu. */
menuShouldScrollIntoView: boolean,
};
export function menuCSS(state: MenuState): React.CSSProperties;
export class Menu<OptionType extends OptionTypeBase> extends Component<MenuProps<OptionType>, MenuState> {
static contextTypes: {
getPortalPlacement: (state: MenuState) => void,
};
getPlacement: (ref: ElementRef<any>) => void;
getState: () => MenuProps<OptionType> & MenuState;
}
export default Menu;
// ==============================
// Menu List
// ==============================
interface MenuListState {
/** Set classname for isMulti */
isMulti: boolean;
/* Set the max height of the Menu component */
maxHeight: number;
}
export interface MenuListProps {
/** The children to be rendered. */
children: ReactNode;
/** Inner ref to DOM Node */
innerRef: InnerRef;
}
export type MenuListComponentProps<OptionType extends OptionTypeBase> = CommonProps<OptionType> &
MenuListProps &
MenuListState;
export function menuListCSS(state: MenuState): React.CSSProperties;
export const MenuList: ComponentType<MenuListComponentProps<any>>;
// ==============================
// Menu Notices
// ==============================
export function noOptionsMessageCSS(): React.CSSProperties;
export function loadingMessageCSS(): React.CSSProperties;
export type NoticeProps<OptionType extends OptionTypeBase> = CommonProps<OptionType> & {
/** The children to be rendered. */
children: ReactNode,
/** Props to be passed on to the wrapper. */
innerProps: { [key: string]: any },
};
export const NoOptionsMessage: ComponentType<NoticeProps<any>>;
// NoOptionsMessage.defaultProps = {
// children: 'No options',
// };
export const LoadingMessage: ComponentType<NoticeProps<any>>;
// LoadingMessage.defaultProps = {
// children: 'Loading...',
// };
// ==============================
// Menu Portal
// ==============================
export type MenuPortalProps<OptionType extends OptionTypeBase> = CommonProps<OptionType> & {
appendTo: HTMLElement,
children: ReactNode, // ideally Menu<MenuProps>
controlElement: HTMLElement,
menuPlacement: MenuPlacement,
menuPosition: MenuPosition,
};
interface MenuPortalState {
placement: 'bottom' | 'top' | null;
}
interface PortalStyleArgs {
offset: number;
position: MenuPosition;
rect: RectType;
}
export function menuPortalCSS(args: PortalStyleArgs): React.CSSProperties;
export class MenuPortal<OptionType extends OptionTypeBase> extends Component<MenuPortalProps<OptionType>, MenuPortalState> {
static childContextTypes: {
getPortalPlacement: (state: MenuState) => void,
};
getChildContext(): {
getPortalPlacement: (state: MenuState) => void;
};
// callback for occassions where the menu must "flip"
getPortalPlacement: (state: MenuState) => void;
}