forked from patternfly/patternfly-react
-
Notifications
You must be signed in to change notification settings - Fork 0
/
types.tsx
293 lines (271 loc) · 7.66 KB
/
types.tsx
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
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
/**
* types.tsx
*
* Forked from reactabular-table version 8.14.0
* https://github.com/reactabular/reactabular/tree/v8.14.0/packages/reactabular-table/src
*/
import * as React from 'react';
import {
TooltipProps,
PopoverProps,
DropdownPosition,
DropdownDirection,
SelectOptionObject,
SelectProps
} from '@patternfly/react-core';
import { TableComposable } from '../../TableComposable/TableComposable';
import { Thead } from '../../TableComposable/Thead';
import { Tbody } from '../../TableComposable/Tbody';
import { Tr } from '../../TableComposable/Tr';
import { Th } from '../../TableComposable/Th';
import { Td } from '../../TableComposable/Td';
import {
IActions,
ISortBy,
OnCheckChange,
OnCollapse,
OnExpand,
OnFavorite,
OnSelect,
OnSort,
OnToggleRowDetails,
OnTreeRowCollapse
} from '../TableTypes';
import { CustomActionsToggleProps } from '../ActionsColumn';
// Cell Type
export interface CellType {
property?: number | string;
transforms?: transformsType;
formatters?: formattersType;
props?: object;
}
export interface TdSelectType {
/** The selectable variant */
variant?: 'checkbox' | 'radio';
/** Callback on select */
onSelect?: OnSelect;
/** Whether the cell is selected */
isSelected: boolean;
/** Whether to disable the selection */
disable?: boolean;
/** The row index */
rowIndex: number;
/** Additional props forwarded to select rowData */
props?: any;
}
export interface TdActionsType {
/** The row index */
rowIndex?: number;
/** Cell actions */
items: IActions;
/** Whether to disable the actions */
disable?: boolean;
/** Actions dropdown position */
dropdownPosition?: DropdownPosition;
/** Actions dropdown direction */
dropdownDirection?: DropdownDirection;
/** Custom toggle for the actions menu */
actionsToggle?: (props: CustomActionsToggleProps) => React.ReactNode;
}
export interface TdExpandType {
/** Flag indicating the child row associated with this cell is expanded */
isExpanded: boolean;
/** The row index */
rowIndex: number;
/** The column index */
columnIndex?: number;
/** On toggling the expansion */
onToggle?: OnCollapse;
/** Id prefix for expandable rows **/
expandId?: string;
}
export interface TdCompoundExpandType {
/** determines if the corresponding expansion row is open */
isExpanded: boolean;
/** Callback on toggling of the expansion */
onToggle?: OnExpand;
/** Id prefix for expandable cells **/
expandId?: string;
/** The row index */
rowIndex?: number;
/** The column index */
columnIndex?: number;
}
export interface TdFavoritesType {
/** Whether the corresponding row is favorited */
isFavorited: boolean;
/** Callback on clicking the favorites button */
onFavorite?: OnFavorite;
/** The row index */
rowIndex?: number;
/** Additional props forwarded to the FavoritesCell */
props?: any;
}
export interface TdTreeRowType {
/** Callback when user expands/collapses a row to reveal/hide the row's children */
onCollapse: OnTreeRowCollapse;
/** (optional) Callback when user changes the checkbox on a row */
onCheckChange?: OnCheckChange;
/** (optional) Callback when user shows/hides the row details in responsive view. */
onToggleRowDetails?: OnToggleRowDetails;
/** The row index */
rowIndex?: number;
/** Additional props forwarded to the title cell of the tree row */
props?: any;
}
export interface TdDraggableType {
/** Id of the draggable row */
id: string;
}
// Columns Types
export type ColumnsType = ColumnType[] | any[];
export interface ColumnType {
property?: string;
cell?: CellType;
props?: object;
header?: HeaderType;
}
export interface HeaderType {
label?: string;
transforms?: transformsType;
formatters?: formattersType;
props?: object;
property?: string;
info?: ThInfoType;
}
export interface ThInfoType {
tooltip?: React.ReactNode;
tooltipProps?: Omit<TooltipProps, 'content'>;
popover?: React.ReactNode;
popoverProps?: Omit<PopoverProps, 'bodyContent'>;
ariaLabel?: string;
className?: string;
}
export interface ThSortType {
/** Wraps the content in a button and adds a sort icon - Click callback on the sortable cell */
onSort?: OnSort;
/** Provide the currently active column's index and direction */
sortBy: ISortBy;
/** The column index */
columnIndex: number;
/** True to make this a favoritable sorting cell */
isFavorites?: boolean;
}
export interface ThSelectType {
/** Callback on select */
onSelect?: OnSelect;
/** Whether the cell is selected */
isSelected: boolean;
/** Flag indicating the select checkbox in the th is disabled */
isHeaderSelectDisabled?: boolean;
/** Whether to disable the selection */
isDisabled?: boolean;
/** Additional props forwarded to select rowData */
props?: any;
}
export interface ThExpandType {
/** On toggling the expansion */
onToggle?: OnCollapse;
/** Whether all are expanded */
areAllExpanded: boolean;
/** Alternative aria label */
collapseAllAriaLabel: '';
}
// Rows Types
export type RowsType = RowType[] | [][];
export type RowKeyType = Function | string;
export interface RowType {
header?: HeaderType;
cell?: CellType;
[key: string]: any;
}
// Table Defaults
export const TableDefaults = {
renderers: {
table: TableComposable,
header: {
wrapper: Thead,
row: Tr,
cell: Th
},
body: {
wrapper: Tbody,
row: Tr,
cell: Td
}
}
};
// Formatters Types
export type formatterValueType = object | string | React.ElementType;
export interface ExtraParamsType {
rowData?: RowType;
column?: ColumnType;
columnIndex?: number;
property?: string;
rowIndex?: number;
rowKey?: RowKeyType;
}
export type formatterType = (value: string | object, extra: ExtraParamsType) => formatterValueType;
export type formattersType = formatterType[];
// Transforms Types
export type transformType = (value: string | object, extra: ExtraParamsType) => object;
export type transformsType = transformType[];
// Renderers Types
export type createElementType = string | React.ComponentClass<any, any> | React.FunctionComponent<any>;
export type rendererType =
| string
| Function
| React.ComponentClass<any, any>
| React.FunctionComponent<any>
| React.Component<any, {}, any>;
export interface RendererType {
wrapper?: rendererType;
row?: rendererType;
cell?: rendererType;
}
export interface RenderersTypes {
columns: ColumnsType;
renderers?: {
table?: any;
header?: RendererType;
body?: RendererType;
};
components?: {
table?: any;
header?: {
wrapper?: rendererType;
row?: rendererType;
cell?: rendererType;
};
body?: {
wrapper?: rendererType;
row?: rendererType;
cell?: rendererType;
};
};
}
// Editable cell props
export interface EditableTextCellProps {
/** Name of the input */
name: string;
/** Value to display in the cell */
value: string;
/** arbitrary data to pass to the internal text input in the editable text cell */
[key: string]: any;
}
export interface EditableSelectInputProps {
/** Name of the select input */
name: string;
/** Value to display in the cell */
value: string | string[];
/** Flag controlling isOpen state of select */
isSelectOpen: boolean;
/** String or SelectOptionObject, or array of strings or SelectOptionObjects representing current selections */
selected: string | SelectOptionObject | (string | SelectOptionObject)[];
/** Array of react elements to display in the select menu */
options: React.ReactElement[];
/** Props to be passed down to the Select component */
editableSelectProps?: SelectProps;
/** arbitrary data to pass to the internal select component in the editable select input cell */
[key: string]: any;
}