UNPKG

6.71 kBTypeScriptView Raw
1/// <reference types="react" />
2
3import * as React from 'react';
4import CommonProps from '../util';
5import { PopupProps } from '../overlay';
6
7export interface GroupProps extends React.HTMLAttributes<HTMLElement>, CommonProps {
8 /**
9 * 标签内容
10 */
11 label?: React.ReactNode;
12
13 /**
14 * 导航项和子导航
15 */
16 children?: React.ReactNode;
17
18 /**
19 * 自定义类名
20 */
21 className?: string;
22}
23
24export class Group extends React.Component<GroupProps, any> {}
25
26export interface ItemProps extends React.HTMLAttributes<HTMLElement>, CommonProps {
27 /**
28 * 是否禁用
29 */
30 disabled?: boolean;
31
32 /**
33 * 帮助文本
34 */
35 helper?: React.ReactNode;
36
37 /**
38 * 导航内容
39 */
40 children?: React.ReactNode;
41
42 /**
43 * 自定义图标,可以使用 Icon 的 type,也可以使用组件 `<Icon type="icon type" />`
44 */
45 icon?: string | React.ReactNode;
46}
47
48export class Item extends React.Component<ItemProps, any> {}
49
50export interface PopupItemProps extends React.HTMLAttributes<HTMLElement>, CommonProps {
51 /**
52 * 标签内容
53 */
54 label?: React.ReactNode;
55
56 /**
57 * 弹出内容
58 */
59 children?: React.ReactNode;
60
61 /**
62 * 自定义类名
63 */
64 className?: string;
65
66 /**
67 * 自定义图标,可以使用 Icon 的 type, 也可以使用组件 `<Icon type="icon type" />`
68 */
69 icon?: string | React.ReactNode;
70}
71
72export class PopupItem extends React.Component<PopupItemProps, any> {}
73
74export interface SubNavProps extends React.HTMLAttributes<HTMLElement>, CommonProps {
75 /**
76 * 自定义类名
77 */
78 className?: string;
79
80 /**
81 * 自定义图标,可以使用 Icon 的 type,也可以使用组件 `<Icon type="your type" />`
82 */
83 icon?: string | React.ReactNode;
84
85 /**
86 * 标签内容
87 */
88 label?: React.ReactNode;
89
90 /**
91 * 是否可选
92 */
93 selectable?: boolean;
94
95 /**
96 * 导航项和子导航
97 */
98 children?: React.ReactNode;
99}
100
101export class SubNav extends React.Component<SubNavProps, any> {}
102interface HTMLAttributesWeak extends React.HTMLAttributes<HTMLElement> {
103 onSelect?: any;
104}
105
106export interface NavProps extends HTMLAttributesWeak, CommonProps {
107 /**
108 * 导航项和子导航
109 */
110 children?: React.ReactNode;
111
112 /**
113 * 点击菜单项触发的回调函数
114 */
115 onItemClick?: (key: string, item: {}, event: {}) => void;
116
117 /**
118 * 当前打开的子菜单的 key 值
119 */
120 openKeys?: string | Array<any>;
121
122 /**
123 * 初始打开的子菜单的 key 值
124 */
125 defaultOpenKeys?: string | Array<any>;
126
127 /**
128 * 初始展开所有的子导航,只在 mode 设置为 'inline' 以及 openMode 设置为 'multiple' 下生效
129 */
130 defaultOpenAll?: boolean;
131
132 /**
133 * 打开或关闭子菜单触发的回调函数
134 */
135 onOpen?: (key: string[], extra: { key: string; open: boolean }) => void;
136
137 /**
138 * 子导航打开的模式(水平导航只支持弹出)
139 */
140 mode?: 'inline' | 'popup';
141
142 /**
143 * 子导航打开的触发方式
144 */
145 triggerType?: 'click' | 'hover';
146
147 /**
148 * 内联子导航的展开模式,同时可以展开一个同级子导航还是多个同级子导航,该属性仅在 mode 为 inline 时生效
149 */
150 openMode?: 'single' | 'multiple';
151
152 /**
153 * 内联子导航缩进距离
154 */
155 inlineIndent?: number;
156
157 /**
158 * 是否自动让弹层的宽度和菜单项保持一致,如果弹层的宽度比菜单项小则和菜单项保持一致,如果宽度大于菜单项则不做处理
159 */
160 popupAutoWidth?: boolean;
161
162 /**
163 * 弹出子导航的对齐方式(水平导航只支持 follow )
164 */
165 popupAlign?: 'follow' | 'outside';
166
167 /**
168 * 弹层自定义 props
169 */
170 popupProps?: PopupProps | (() => void);
171
172 /**
173 * 弹出子导航的自定义类名
174 */
175 popupClassName?: string;
176
177 /**
178 * 弹出子菜单自定义 style
179 */
180 popupStyle?: React.CSSProperties;
181
182 /**
183 * 当前选中导航项的 key
184 */
185 selectedKeys?: string | Array<any>;
186
187 /**
188 * 初始选中导航项的 key
189 */
190 defaultSelectedKeys?: string | Array<any>;
191
192 /**
193 * 选中或取消选中导航项触发的回调函数
194 */
195 onSelect?: (selectedKeys: Array<any>, item: {}, extra: {}) => void;
196
197 /**
198 * 选中模式,单选还是多选,默认无值,不可选
199 */
200 selectMode?: 'single' | 'multiple';
201
202 /**
203 * 是否只能选择第一层菜单项(不能选择子菜单中的菜单项)
204 */
205 shallowSelect?: boolean;
206
207 /**
208 * 是否显示选中图标,如果设置为 false 需配合配置平台设置选中时的背景色以示区分
209 */
210 hasSelectedIcon?: boolean;
211
212 /**
213 * 是否将选中图标居右,仅当 hasSelectedIcon 为true 时生效。
214 * 注意:SubMenu 上的选中图标一直居左,不受此API控制
215 */
216 isSelectIconRight?: boolean;
217
218 /**
219 * 导航布局
220 */
221 direction?: 'hoz' | 'ver';
222
223 /**
224 * 横向导航条 items 和 footer 的对齐方向,在 direction 设置为 'hoz' 并且 header 存在时生效
225 */
226 hozAlign?: 'left' | 'right';
227
228 /**
229 * 自定义导航头部
230 */
231 header?: React.ReactNode;
232
233 /**
234 * 自定义导航尾部
235 */
236 footer?: React.ReactNode;
237
238 /**
239 * 是否自动获得焦点
240 */
241 autoFocus?: boolean;
242
243 /**
244 * 当前获得焦点的子菜单或菜单项 key 值
245 */
246 focusedKey?: string;
247
248 /**
249 * 是否开启嵌入式模式,一般用于Layout的布局中,开启后没有默认背景、外层border、box-shadow,可以配合`<Nav style={{lineHeight: '100px'}}>` 自定义高度
250 */
251 embeddable?: boolean;
252
253 /**
254 * 导航类型
255 */
256 type?: 'normal' | 'primary' | 'secondary' | 'line';
257
258 /**
259 * 设置组件选中状态的 active 边方向
260 */
261 activeDirection?: null | 'top' | 'bottom' | 'left' | 'right';
262
263 /**
264 * 是否只显示图标
265 */
266 iconOnly?: boolean;
267
268 /**
269 * iconOnly 模式下的宽度(仅在 iconOnly=true 时生效)
270 */
271 iconOnlyWidth?: number | string;
272
273 /**
274 * 是否显示右侧的箭头(仅在 iconOnly=true 时生效)
275 */
276 hasArrow?: boolean;
277
278 /**
279 * 是否有 ToolTips (仅在 iconOnly=true 时生效)
280 */
281 hasTooltip?: boolean;
282}
283
284export default class Nav extends React.Component<NavProps, any> {
285 static Group: typeof Group;
286 static Item: typeof Item;
287 static PopupItem: typeof PopupItem;
288 static SubNav: typeof SubNav;
289}