-
Notifications
You must be signed in to change notification settings - Fork 0
/
gridEditingApi.ts
362 lines (344 loc) · 12.8 KB
/
gridEditingApi.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
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
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
import { GridCellMode, GridRowMode } from '../gridCell';
import {
GridEditRowsModel,
GridEditCellProps,
GridCellModes,
GridRowModes,
} from '../gridEditRowModel';
import { GridRowId, GridRowModel } from '../gridRows';
import { GridCellParams } from '../params/gridCellParams';
import {
GridCommitCellChangeParams,
GridEditCellValueParams,
GridEditCellPropsParams,
} from '../params/gridEditCellParams';
import { MuiBaseEvent } from '../muiEvent';
export type GridCellModesModelProps =
| ({ mode: GridCellModes.View } & Omit<GridStopCellEditModeParams, 'id' | 'field'>)
| ({ mode: GridCellModes.Edit } & Omit<GridStartCellEditModeParams, 'id' | 'field'>);
export type GridCellModesModel = Record<GridRowId, Record<string, GridCellModesModelProps>>;
export type GridRowModesModelProps =
| ({ mode: GridRowModes.View } & Omit<GridStopRowEditModeParams, 'id' | 'field'>)
| ({ mode: GridRowModes.Edit } & Omit<GridStartRowEditModeParams, 'id' | 'field'>);
export type GridRowModesModel = Record<GridRowId, GridRowModesModelProps>;
export interface GridEditCellMeta {
changeReason?: 'debouncedSetEditCellValue' | 'setEditCellValue';
}
export interface GridNewEditingSharedApi {
/**
* Controls if a cell is editable.
* @param {GridCellParams} params The cell params.
* @returns {boolean} A boolean value determining if the cell is editable.
*/
isCellEditable: (params: GridCellParams) => boolean;
/**
* Sets the value of the edit cell.
* Commonly used inside the edit cell component.
* @param {GridEditCellValueParams} params Contains the id, field and value to set.
* @param {React.SyntheticEvent} event The event to pass forward.
* @returns {Promise<boolean> | void} A promise with the validation status if `preventCommitWhileValidating` is `true`. Otherwise, void.
*/
setEditCellValue: (
params: GridEditCellValueParams,
event?: MuiBaseEvent,
) => Promise<boolean> | void;
/**
* Immediatelly updates the value of the cell, without waiting for the debounce.
* @param {GridRowId} id The row id.
* @param {string} field The field to update. If not passed, updates all fields in the given row id.
* @ignore - do not document.
*/
unstable_runPendingEditCellValueMutation: (id: GridRowId, field?: string) => void;
/**
* Returns the row with the values that were set by editing the cells.
* In row editing, `field` is ignored and all fields are considered.
* @param {GridRowId} id The row id being edited.
* @param {string} field The field being edited.
* @ignore - do not document.
*/
unstable_getRowWithUpdatedValues: (id: GridRowId, field: string) => GridRowModel;
/**
* Gets the meta information for the edit cell.
* @param {GridRowId} id The row id being edited.
* @param {string} field The field being edited.
* @ignore - do not document.
*/
unstable_getEditCellMeta: (id: GridRowId, field: string) => GridEditCellMeta;
}
/**
* The shared methods used by the cell and row editing API.
*/
export interface GridEditingSharedApi {
/**
* Set the edit rows model of the grid.
* @param {GridEditRowsModel} model The new edit rows model.
* @deprecated Prefer the new editing API.
*/
setEditRowsModel: (model: GridEditRowsModel) => void;
/**
* Gets the edit rows model of the grid.
* @returns {GridEditRowsModel} The edit rows model.
* @deprecated Prefer the new editing API.
*/
getEditRowsModel: () => GridEditRowsModel;
/**
* Controls if a cell is editable.
* @param {GridCellParams} params The cell params.
* @returns {boolean} A boolean value determining if the cell is editable.
*/
isCellEditable: (params: GridCellParams) => boolean;
/**
* Sets the value of the edit cell.
* Commonly used inside the edit cell component.
* @param {GridEditCellValueParams} params Contains the id, field and value to set.
* @param {React.SyntheticEvent} event The event to pass forward.
* @returns {Promise<boolean> | void} A promise with the validation status if `preventCommitWhileValidating` is `true`. Otherwise, void.
*/
setEditCellValue: (
params: GridEditCellValueParams,
event?: MuiBaseEvent,
) => Promise<boolean> | void;
/**
* Immediatelly updates the value of the cell, without waiting for the debounce.
* @param {GridRowId} id The row id.
* @param {string} field The field to update. If not passed, updates all fields in the given row id.
* @ignore - do not document.
*/
unstable_runPendingEditCellValueMutation: (id: GridRowId, field?: string) => void;
/**
* @ignore - do not document.
*/
unstable_setEditCellProps: (params: GridEditCellPropsParams) => GridEditCellProps;
/**
* @ignore - do not document.
*/
unstable_parseValue: (id: GridRowId, field: string, value: any) => any;
}
/**
* The row editing API interface.
*/
export interface GridRowEditingApi extends GridEditingSharedApi {
/**
* Sets the mode of a row.
* @param {GridRowId} id The id of the row.
* @param {GridRowMode} mode Can be: `"edit"`, `"view"`.
*/
setRowMode: (id: GridRowId, mode: GridRowMode) => void;
/**
* Gets the mode of a row.
* @param {GridRowId} id The id of the row.
* @returns {GridRowMode} Returns `"edit"` or `"view"`.
*/
getRowMode: (id: GridRowId) => GridRowMode;
/**
* Updates the row corresponding to the given id with the values stored in the edit row model.
* @param {GridRowId} id The id to commit to.
* @param {React.SyntheticEvent} event The event to pass forward.
* @returns {boolean} A boolean indicating if there is an error.
*/
commitRowChange: (id: GridRowId, event?: MuiBaseEvent) => boolean | Promise<boolean>;
/**
* Updates the value of a cell and calls all `preProcessEditCellProps` if necessary.
* @param {GridCommitCellChangeParams} params Object with the new value and id and field to update.
* @returns {Promise<boolean>} Resolves with `true` when all values in the row are valid.
* @ignore - do not document.
*/
unstable_setRowEditingEditCellValue: (params: GridEditCellValueParams) => Promise<boolean>;
}
/**
* The cell editing API interface.
*/
export interface GridCellEditingApi extends GridEditingSharedApi {
/**
* Updates the field corresponding to the given id with the value stored in the edit row model.
* @param {GridCommitCellChangeParams} params The id and field to commit to.
* @param {React.SyntheticEvent} event The event to pass forward.
* @returns {boolean} A boolean indicating if there is an error.
*/
commitCellChange: (
params: GridCommitCellChangeParams,
event?: MuiBaseEvent,
) => boolean | Promise<boolean>;
/**
* Sets the mode of a cell.
* @param {GridRowId} id The id of the row.
* @param {string} field The field to change the mode.
* @param {GridCellMode} mode Can be: `"edit"`, `"view"`.
*/
setCellMode: (id: GridRowId, field: string, mode: GridCellMode) => void;
/**
* Gets the mode of a cell.
* @param {GridRowId} id The id of the row.
* @param {string} field The field to get the mode.
* @returns {GridCellMode} Returns `"edit"` or `"view"`.
*/
getCellMode: (id: GridRowId, field: string) => GridCellMode;
/**
* Updates the value of a cell and calls `preProcessEditCellProps` if necessary.
* @param {GridCommitCellChangeParams} params Object with the new value and id and field to update.
* @returns {Promise<boolean>} Resolves with `true` when the new value is valid.
* @ignore - do not document.
*/
unstable_setCellEditingEditCellValue: (params: GridEditCellValueParams) => Promise<boolean>;
}
/**
* Params passed to `apiRef.current.startCellEditMode`.
*/
export interface GridStartCellEditModeParams {
/**
* The row id.
*/
id: GridRowId;
/**
* The field.
*/
field: string;
/**
* If `true`, the value will be deleted before entering the edit mode.
*/
deleteValue?: boolean;
/**
* The initial value for the field.
* If `deleteValue` is also true, this value is not used.
*/
initialValue?: any;
}
/**
* Params passed to `apiRef.current.stopCellEditMode`.
*/
export interface GridStopCellEditModeParams {
/**
* The row id.
*/
id: GridRowId;
/**
* The field.
*/
field: string;
/**
* Whether or not to ignore the modifications made on this cell.
* @default false
*/
ignoreModifications?: boolean;
/**
* To which cell to move focus after finishing editing.
* @default "none"
*/
cellToFocusAfter?: 'none' | 'below' | 'right' | 'left';
}
/**
* Params passed to `apiRef.current.startRowEditMode`.
*/
export interface GridStartRowEditModeParams {
/**
* The row id.
*/
id: GridRowId;
/**
* The field to put focus.
*/
fieldToFocus?: string;
/**
* If `true`, the value in `fieldToFocus` will be deleted before entering the edit mode.
*/
deleteValue?: boolean;
/**
* The initial value for the given `fieldToFocus`.
* If `deleteValue` is also true, this value is not used.
*/
initialValue?: string;
}
/**
* Params passed to `apiRef.current.stopRowEditMode`.
*/
export interface GridStopRowEditModeParams {
/**
* The row id.
*/
id: GridRowId;
/**
* Whether or not to ignore the modifications made on this cell.
* @default false
*/
ignoreModifications?: boolean;
/**
* The field that has focus when the editing is stopped.
* Used to calculate which cell to move the focus to after finishing editing.
*/
field?: string;
/**
* To which cell to move focus after finishing editing.
* Only works if the field is also specified, otherwise focus stay in the same cell.
* @default "none"
*/
cellToFocusAfter?: 'none' | 'below' | 'right' | 'left';
}
export interface GridNewCellEditingApi
extends GridNewEditingSharedApi,
Pick<GridCellEditingApi, 'getCellMode'> {
/**
* Puts the cell corresponding to the given row id and field into edit mode.
* @param {GridStartCellEditModeParams} params The row id and field of the cell to edit.
*/
startCellEditMode(params: GridStartCellEditModeParams): void;
/**
* Puts the cell corresponding to the given row id and field into view mode and updates the original row with the new value stored.
* If `params.ignoreModifications` is `false` it will discard the modifications made.
* @param {GridStopCellEditModeParams} params The row id and field of the cell to stop editing.
*/
stopCellEditMode(params: GridStopCellEditModeParams): void;
/**
* Updates the value of a cell being edited.
* Don't call this method directly, prefer `setEditCellValue`.
* @param {GridCommitCellChangeParams} params Object with the new value and id and field to update.
* @returns {Promise<boolean>} Resolves with `true` when the new value is valid.
* @ignore - do not document.
*/
unstable_setCellEditingEditCellValue: (params: GridEditCellValueParams) => Promise<boolean>;
/**
* Returns the row with the new value that was set by editing the cell.
* @param {GridRowId} id The row id being edited.
* @param {string} field The field being edited.
* @ignore - do not document.
*/
unstable_getRowWithUpdatedValuesFromCellEditing: (id: GridRowId, field: string) => GridRowModel;
}
export interface GridNewRowEditingApi
extends GridNewEditingSharedApi,
Pick<GridRowEditingApi, 'getRowMode'> {
/**
* Puts the row corresponding to the given id into edit mode.
* @param {GridStartCellEditModeParams} params The row id edit.
*/
startRowEditMode(params: GridStartRowEditModeParams): void;
/**
* Puts the row corresponding to the given id and into view mode and updates the original row with the new values stored.
* If `params.ignoreModifications` is `false` it will discard the modifications made.
* @param {GridStopCellEditModeParams} params The row id and field of the cell to stop editing.
*/
stopRowEditMode(params: GridStopRowEditModeParams): void;
/**
* Updates the value of a cell being edited.
* Don't call this method directly, prefer `setEditCellValue`.
* @param {GridCommitCellChangeParams} params Object with the new value and id and field to update.
* @returns {Promise<boolean>} Resolves with `true` when all values in the row are valid.
* @ignore - do not document.
*/
unstable_setRowEditingEditCellValue: (params: GridEditCellValueParams) => Promise<boolean>;
/**
* Returns the row with the values that were set by editing all cells.
* @param {GridRowId} id The row id being edited.
* @ignore - do not document.
*/
unstable_getRowWithUpdatedValuesFromRowEditing: (id: GridRowId) => GridRowModel;
}
/**
* The editing API interface that is available in the grid `apiRef`.
*/
export interface GridEditingApi
extends GridCellEditingApi,
GridRowEditingApi,
GridNewCellEditingApi,
GridNewRowEditingApi {}
export interface GridOldEditingApi extends GridCellEditingApi, GridRowEditingApi {}
export interface GridNewEditingApi extends GridNewCellEditingApi, GridNewRowEditingApi {}