@mui/x-data-grid-generator 6.0.0-alpha.2 → 6.0.0-alpha.3
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/CHANGELOG.md +231 -12
- package/index.js +1 -1
- package/legacy/index.js +1 -1
- package/legacy/renderer/renderEditCountry.js +32 -14
- package/legacy/renderer/renderEditCurrency.js +32 -14
- package/legacy/renderer/renderEditIncoterm.js +36 -18
- package/legacy/renderer/renderEditRating.js +33 -16
- package/modern/index.js +1 -1
- package/modern/renderer/renderEditCountry.js +6 -10
- package/modern/renderer/renderEditCurrency.js +6 -10
- package/modern/renderer/renderEditIncoterm.js +7 -11
- package/modern/renderer/renderEditRating.js +7 -12
- package/node/index.js +1 -1
- package/node/renderer/renderEditCountry.js +6 -10
- package/node/renderer/renderEditCurrency.js +6 -10
- package/node/renderer/renderEditIncoterm.js +7 -11
- package/node/renderer/renderEditRating.js +7 -12
- package/package.json +3 -3
- package/renderer/renderEditCountry.js +6 -10
- package/renderer/renderEditCurrency.js +6 -10
- package/renderer/renderEditIncoterm.js +7 -11
- package/renderer/renderEditRating.js +7 -12
package/CHANGELOG.md
CHANGED
|
@@ -3,6 +3,214 @@
|
|
|
3
3
|
All notable changes to this project will be documented in this file.
|
|
4
4
|
See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
|
|
5
5
|
|
|
6
|
+
## v6.0.0-alpha.3
|
|
7
|
+
|
|
8
|
+
_Oct 13, 2022_
|
|
9
|
+
|
|
10
|
+
We'd like to offer a big thanks to the 8 contributors who made this release possible. Here are some highlights ✨:
|
|
11
|
+
|
|
12
|
+
- ⌚️ New components to edit date and time with <kbd>keyboard</kbd>—without using any modal or dropdown UI.
|
|
13
|
+
Please check out our [documentation](https://next.mui.com/x/react-date-pickers/fields/) to discover those new components.
|
|
14
|
+
- [`DateField`](https://next.mui.com/x/react-date-pickers/date-field/) to edit date
|
|
15
|
+
- [`TimeField`](https://next.mui.com/x/react-date-pickers/time-field/) to edit time
|
|
16
|
+
- [`DateTimeField`](https://next.mui.com/x/react-date-pickers/date-time-field/) to edit date and time
|
|
17
|
+
- [`MultiInputDateRangeField` / `SingleInputDateRangeField`](https://next.mui.com/x/react-date-pickers/date-range-field/) to edit date range
|
|
18
|
+
- [`MultiInputTimeRangeField`](https://next.mui.com/x/react-date-pickers/time-range-field/) to edit time range with two inputs
|
|
19
|
+
- [`MultiInputDateTimeRangeField`](https://next.mui.com/x/react-date-pickers/date-time-range-field/) to edit date and time range with two inputs
|
|
20
|
+
|
|
21
|
+
⚠️ These components are unstable.
|
|
22
|
+
They might receive breaking changes on their props to have the best components possible by the time of the stable release.
|
|
23
|
+
|
|
24
|
+
- 📝 Allow to limit to one filter per column for `DataGridPro` and `DataGridPremium` (#6333) @MBilalShafi
|
|
25
|
+
- 📚 New [page describing the validation props on each picker](https://next.mui.com/x/react-date-pickers/validation/) (#6064) @flaviendelangle
|
|
26
|
+
- 📚 Documentation improvements
|
|
27
|
+
- 🐞 Bugfixes
|
|
28
|
+
|
|
29
|
+
### `@mui/x-data-grid@v6.0.0-alpha.3` / `@mui/x-data-grid-pro@v6.0.0-alpha.3` / `@mui/x-data-grid-premium@v6.0.0-alpha.3`
|
|
30
|
+
|
|
31
|
+
#### Breaking changes
|
|
32
|
+
|
|
33
|
+
- [DataGrid] Remove legacy editing API
|
|
34
|
+
|
|
35
|
+
The editing API that is enabled by default was replaced with a new API that contains better support for server-side persistence, validation and customization. This new editing feature was already available in v5 under the `newEditingApi` experimental flag. In v6, this flag can be removed.
|
|
36
|
+
|
|
37
|
+
```diff
|
|
38
|
+
<DataGrid
|
|
39
|
+
- experimentalFeatures={{ newEditingApi: true }}
|
|
40
|
+
/>
|
|
41
|
+
```
|
|
42
|
+
|
|
43
|
+
For users that didn't migrate to the new editing API in v5, additional work may be needed because the new API is not equivalent to the legacy API. Although, some migration steps are available to help in this task.
|
|
44
|
+
|
|
45
|
+
- The `editCellPropsChange` event was removed. If you still need it please file a new issue so we can propose an alternative.
|
|
46
|
+
- The `cellEditCommit` event was removed and the `processRowUpdate` prop can be used in place. More information, check the [docs](https://next.mui.com/x/react-data-grid/editing/#persistence) section about the topic.
|
|
47
|
+
- The `editRowsModel` and `onEditRowsModelChange` props were removed. The [`cellModesModel`](https://next.mui.com/x/react-data-grid/editing/#controlled-mode) or [`rowModesModel`](https://next.mui.com/x/react-data-grid/editing/#controlled-mode) props can be used to achieve the same goal.
|
|
48
|
+
- The following API methods were removed:
|
|
49
|
+
- Use `apiRef.current.stopCellEditMode` to replace `apiRef.current.commitCellChange`
|
|
50
|
+
- Use `apiRef.current.startCellEditMode` to replace `apiRef.current.setCellMode(id, field, 'edit')`
|
|
51
|
+
- Use `apiRef.current.stopRowEditMode` to replace `apiRef.current.commitRowChange`
|
|
52
|
+
- Use `apiRef.current.startRowMode` to replace `apiRef.current.setRowMode(id, 'edit')`
|
|
53
|
+
- Use the [`cellModesModel`](https://next.mui.com/x/react-data-grid/editing/#controlled-mode) or [`rowModesModel`](https://next.mui.com/x/react-data-grid/editing/#controlled-mode) props to replace `apiRef.current.setEditRowsModel`
|
|
54
|
+
|
|
55
|
+
#### Changes
|
|
56
|
+
|
|
57
|
+
- [DataGrid] Fix start edit mode with printable character in React 18 (#6257) @m4theushw
|
|
58
|
+
- [DataGrid] Remove legacy editing API (#6016) @m4theushw
|
|
59
|
+
- [DataGrid] Simplify `useGridApiContext` and `useGridApiRef` type overrides (#6423) @cherniavskii
|
|
60
|
+
- [DataGrid] Use generics instead of verbose state overrides (#6409) @cherniavskii
|
|
61
|
+
- [DataGridPro] Allow to limit to one filter per column (#6333) @MBilalShafi
|
|
62
|
+
|
|
63
|
+
### `@mui/x-date-pickers@v6.0.0-alpha.3` / `@mui/x-date-pickers-pro@v6.0.0-alpha.3`
|
|
64
|
+
|
|
65
|
+
#### Breaking changes
|
|
66
|
+
|
|
67
|
+
- All the props used by the mobile and desktop wrappers to override components or components' props have been replaced by component slots. You can find more information about this pattern in the [MUI Base documentation](https://mui.com/base/getting-started/usage/#shared-props).
|
|
68
|
+
|
|
69
|
+
Some of the names have also been prefixed by `desktop` when it was unclear that the behavior was only applied on the desktop version of the pickers (or the responsive version when used on a desktop).
|
|
70
|
+
|
|
71
|
+
The `DialogProps` prop has been replaced by a `dialog` component props slot on responsive and mobile pickers:
|
|
72
|
+
|
|
73
|
+
```diff
|
|
74
|
+
// Same on MobileDatePicker, DateTimePicker, MobileDateTimePicker,
|
|
75
|
+
// TimePicker, MobileTimePicker, DateRangePicker and MobileDateRangePicker.
|
|
76
|
+
<DatePicker
|
|
77
|
+
- DialogProps={{ backgroundColor: 'red' }}
|
|
78
|
+
+ componentsProps={{ dialog: { backgroundColor: 'red }}}
|
|
79
|
+
/>
|
|
80
|
+
```
|
|
81
|
+
|
|
82
|
+
The `PaperProps` prop has been replaced by a `desktopPaper` component props slot on all responsive and desktop pickers:
|
|
83
|
+
|
|
84
|
+
```diff
|
|
85
|
+
// Same on DesktopDatePicker, DateTimePicker, DesktopDateTimePicker,
|
|
86
|
+
// TimePicker, DesktopTimePicker, DateRangePicker and DesktopDateRangePicker.
|
|
87
|
+
<DatePicker
|
|
88
|
+
- PaperProps={{ backgroundColor: 'red' }}
|
|
89
|
+
+ componentsProps={{ desktopPaper: { backgroundColor: 'red }}}
|
|
90
|
+
/>
|
|
91
|
+
```
|
|
92
|
+
|
|
93
|
+
The `PopperProps` prop has been replaced by a `popper` component props slot on all responsive and desktop pickers:
|
|
94
|
+
|
|
95
|
+
```diff
|
|
96
|
+
// Same on DesktopDatePicker, DateTimePicker, DesktopDateTimePicker,
|
|
97
|
+
// TimePicker, DesktopTimePicker, DateRangePicker and DesktopDateRangePicker.
|
|
98
|
+
<DatePicker
|
|
99
|
+
- PopperProps={{ onClick: handleClick }}
|
|
100
|
+
+ componentsProps={{ popper: { onClick: handleClick }}}
|
|
101
|
+
/>
|
|
102
|
+
```
|
|
103
|
+
|
|
104
|
+
The `TransitionComponent` prop has been replaced by a `DesktopTransition` component slot on all responsive and desktop pickers:
|
|
105
|
+
|
|
106
|
+
```diff
|
|
107
|
+
// Same on DesktopDatePicker, DateTimePicker, DesktopDateTimePicker,
|
|
108
|
+
// TimePicker, DesktopTimePicker, DateRangePicker and DesktopDateRangePicker.
|
|
109
|
+
<DatePicker
|
|
110
|
+
- TransitionComponent={Fade}
|
|
111
|
+
+ components={{ DesktopTransition: Fade }}
|
|
112
|
+
/>
|
|
113
|
+
```
|
|
114
|
+
|
|
115
|
+
The `TrapFocusProps` prop has been replaced by a `desktopTrapFocus` component props slot on all responsive and desktop pickers:
|
|
116
|
+
|
|
117
|
+
```diff
|
|
118
|
+
// Same on DesktopDatePicker, DateTimePicker, DesktopDateTimePicker,
|
|
119
|
+
// TimePicker, DesktopTimePicker, DateRangePicker and DesktopDateRangePicker.
|
|
120
|
+
<DatePicker
|
|
121
|
+
- TrapFocusProps={{ isEnabled: () => false }}
|
|
122
|
+
+ componentsProps={{ desktopTrapFocus: { isEnabled: () => false }}}
|
|
123
|
+
/>
|
|
124
|
+
```
|
|
125
|
+
|
|
126
|
+
- The view components allowing to pick a date or parts of a date without an input have been renamed to better fit their usage:
|
|
127
|
+
|
|
128
|
+
```diff
|
|
129
|
+
-<CalendarPicker {...props} />
|
|
130
|
+
+<DateCalendar {...props} />
|
|
131
|
+
```
|
|
132
|
+
|
|
133
|
+
```diff
|
|
134
|
+
-<DayPicker {...props} />
|
|
135
|
+
+<DayCalendar {...props} />
|
|
136
|
+
```
|
|
137
|
+
|
|
138
|
+
```diff
|
|
139
|
+
-<CalendarPickerSkeleton {...props} />
|
|
140
|
+
+<DayCalendarSkeleton {...props} />
|
|
141
|
+
```
|
|
142
|
+
|
|
143
|
+
```diff
|
|
144
|
+
-<MonthPicker {...props} />
|
|
145
|
+
+<MonthCalendar {...props} />
|
|
146
|
+
```
|
|
147
|
+
|
|
148
|
+
```diff
|
|
149
|
+
-<YearPicker {...props} />
|
|
150
|
+
+<YearCalendar {...props} />
|
|
151
|
+
```
|
|
152
|
+
|
|
153
|
+
- Component names in the theme have changed as well:
|
|
154
|
+
|
|
155
|
+
```diff
|
|
156
|
+
-MuiCalendarPicker: {
|
|
157
|
+
+MuiDateCalendar: {
|
|
158
|
+
```
|
|
159
|
+
|
|
160
|
+
```diff
|
|
161
|
+
-MuiDayPicker: {
|
|
162
|
+
+MuiDayCalendar: {
|
|
163
|
+
```
|
|
164
|
+
|
|
165
|
+
```diff
|
|
166
|
+
-MuiCalendarPickerSkeleton: {
|
|
167
|
+
+MuiDayCalendarSkeleton: {
|
|
168
|
+
```
|
|
169
|
+
|
|
170
|
+
```diff
|
|
171
|
+
-MuiMonthPicker: {
|
|
172
|
+
+MuiMonthCalendar: {
|
|
173
|
+
```
|
|
174
|
+
|
|
175
|
+
```diff
|
|
176
|
+
-MuiYearPicker: {
|
|
177
|
+
+MuiYearCalendar: {
|
|
178
|
+
```
|
|
179
|
+
|
|
180
|
+
#### Changes
|
|
181
|
+
|
|
182
|
+
- [DatePicker] Allows to fix the number of week displayed (#6299) @alexfauquette
|
|
183
|
+
- [DateRangePicker] Fix calendar day outside of month layout shifting on hover (#6448) @alexfauquette
|
|
184
|
+
- [fields] New components: `MultiInputDateTimeRangePicker` and `MultiInputTimeRangePicker` (#6392) @alexfauquette
|
|
185
|
+
- [fields] Prepare the field exports for the public release (#6467) @flaviendelangle
|
|
186
|
+
- [fields] Support paste in single section (#6422) @alexfauquette
|
|
187
|
+
- [pickers] Add field placeholders to the locale (#6337) @flaviendelangle
|
|
188
|
+
- [pickers] Do not use `Partial` for `components` and `componentsProps` props (#6463) @flaviendelangle
|
|
189
|
+
- [pickers] New component: `DateRangeCalendar` (#6416) @flaviendelangle
|
|
190
|
+
- [pickers] Replace the `Picker` prefix in the view component by `Calendar` (eg: `MonthPicker` => `MonthCalendar`) (#6389) @flaviendelangle
|
|
191
|
+
- [pickers] Support pasting on fields (#6364) @flaviendelangle
|
|
192
|
+
- [pickers] Use slots in the mobile and desktop wrappers instead of `XXXComponent` and `XXXProps` (#6381) @flaviendelangle
|
|
193
|
+
|
|
194
|
+
### Docs
|
|
195
|
+
|
|
196
|
+
- [docs] Add migration to DataGrid v6 page (#6235) @m4theushw
|
|
197
|
+
- [docs] Create first publishable version of the field doc (#6323) @flaviendelangle
|
|
198
|
+
- [docs] Fix trailing spaces in the readme @oliviertassinari
|
|
199
|
+
- [docs] New page for the pickers: Validation (#6064) @flaviendelangle
|
|
200
|
+
- [docs] Organize migration pages (#6480) @flaviendelangle
|
|
201
|
+
|
|
202
|
+
### Core
|
|
203
|
+
|
|
204
|
+
- [core] Add CodeQL workflow (#6387) @DanailH
|
|
205
|
+
- [core] Add missing breaking change to the changelog (#6471) @flaviendelangle
|
|
206
|
+
- [core] Fix playground structure (#6466) @LukasTy
|
|
207
|
+
- [core] Fix tests for pasting on fields (#6465) @flaviendelangle
|
|
208
|
+
- [core] Remove absolute link (#6420) @flaviendelangle
|
|
209
|
+
- [core] Remove unused `react-text-mask` package (#6408) @LukasTy
|
|
210
|
+
- [core] Send explicit warning when dayjs locale is not found (#6424) @alexfauquette
|
|
211
|
+
- [core] Test validation on textfield and date views (#6265) @alexfauquette
|
|
212
|
+
- [test] Sync comment with monorepo @oliviertassinari
|
|
213
|
+
|
|
6
214
|
## v6.0.0-alpha.2
|
|
7
215
|
|
|
8
216
|
_Oct 7, 2022_
|
|
@@ -24,9 +232,9 @@ We'd like to offer a big thanks to the 10 contributors who made this release pos
|
|
|
24
232
|
You can now use the aggregation without the `experimentalFeatures.aggregation` flag enabled.
|
|
25
233
|
|
|
26
234
|
```diff
|
|
27
|
-
|
|
235
|
+
<DataGridPremium
|
|
28
236
|
- experimentalFeatures={{ aggregation: true }}
|
|
29
|
-
|
|
237
|
+
/>
|
|
30
238
|
```
|
|
31
239
|
|
|
32
240
|
The aggregation of the columns through the column menu is now enabled by default on `DataGridPremium`. You can set `disableAggregation={true}` to disable it.
|
|
@@ -49,10 +257,10 @@ We'd like to offer a big thanks to the 10 contributors who made this release pos
|
|
|
49
257
|
|
|
50
258
|
```diff
|
|
51
259
|
// Same for any other date, date time or date range picker.
|
|
52
|
-
|
|
260
|
+
<DatePicker
|
|
53
261
|
- renderDay={(_, dayProps) => <CustomDay {...dayProps} />}
|
|
54
262
|
+ components={{ Day: CustomDay }}
|
|
55
|
-
|
|
263
|
+
/>
|
|
56
264
|
```
|
|
57
265
|
|
|
58
266
|
#### Changes
|
|
@@ -114,7 +322,7 @@ We'd like to offer a big thanks to the 8 contributors who made this release poss
|
|
|
114
322
|
Here is an example of the old and new approach showing how to apply a custom value formatter in groups for the grouping column:
|
|
115
323
|
|
|
116
324
|
```diff
|
|
117
|
-
<DataGridPremium
|
|
325
|
+
<DataGridPremium
|
|
118
326
|
groupingColDef={() => ({
|
|
119
327
|
valueFormatter: (params) => {
|
|
120
328
|
if (params.id == null) {
|
|
@@ -155,9 +363,8 @@ We'd like to offer a big thanks to the 8 contributors who made this release poss
|
|
|
155
363
|
|
|
156
364
|
#### Breaking changes
|
|
157
365
|
|
|
158
|
-
-
|
|
366
|
+
- The `value` prop of the pickers now expects a parsed value.
|
|
159
367
|
|
|
160
|
-
The `value` prop of the pickers now expects a parsed value.
|
|
161
368
|
Until now, it was possible to provide any format that your date management library was able to parse.
|
|
162
369
|
For instance, you could pass `value={new Date()}` when using `AdapterDayjs`.
|
|
163
370
|
|
|
@@ -296,12 +503,24 @@ We'd like to offer a big thanks to the 12 contributors who made this release pos
|
|
|
296
503
|
|
|
297
504
|
You can find more information about the new api, including how to set those translations on all your components at once in the [documentation](https://next.mui.com/x/react-date-pickers/localization/)
|
|
298
505
|
|
|
506
|
+
- The deprecated `locale` prop of the `LocalizationProvider` component have been renamed `adapterLocale`:
|
|
507
|
+
|
|
508
|
+
```diff
|
|
509
|
+
<LocalizationProvider
|
|
510
|
+
dateAdapter={AdapterDayjs}
|
|
511
|
+
- locale="fr"
|
|
512
|
+
+ adapterLocale="fr"
|
|
513
|
+
>
|
|
514
|
+
{children}
|
|
515
|
+
</LocalizationProvider>
|
|
516
|
+
```
|
|
517
|
+
|
|
299
518
|
- The component slots `LeftArrowButton` and `RightArrowButton` have been renamed `PreviousIconButton` and `NextIconButton` to better describe there usage:
|
|
300
519
|
|
|
301
520
|
```diff
|
|
302
|
-
<DatePicker
|
|
521
|
+
<DatePicker
|
|
303
522
|
components={{
|
|
304
|
-
- LeftArrowButton: CustomButton,
|
|
523
|
+
- LeftArrowButton: CustomButton,
|
|
305
524
|
+ PreviousIconButton: CustomButton,
|
|
306
525
|
|
|
307
526
|
- RightArrowButton: CustomButton,
|
|
@@ -309,7 +528,7 @@ You can find more information about the new api, including how to set those tran
|
|
|
309
528
|
}}
|
|
310
529
|
|
|
311
530
|
componentsProps={{
|
|
312
|
-
- leftArrowButton: {},
|
|
531
|
+
- leftArrowButton: {},
|
|
313
532
|
+ previousIconButton: {},
|
|
314
533
|
|
|
315
534
|
- rightArrowButton: {},
|
|
@@ -2496,8 +2715,8 @@ _Nov 23, 2021_
|
|
|
2496
2715
|
|
|
2497
2716
|
🎉 We are excited to introduce [MUI X v5.0.0](https://mui.com/blog/mui-x-v5/) 🎉!
|
|
2498
2717
|
|
|
2499
|
-
If you want to migrate the DataGrid or DataGridPro from v4 to v5, take a look at the [migration guide](https://mui.com/x/
|
|
2500
|
-
This version is fully compatible with `@mui/material@5.X` and can be used with `@material-ui/core@4.x` with some [additional steps](https://mui.com/x/
|
|
2718
|
+
If you want to migrate the DataGrid or DataGridPro from v4 to v5, take a look at the [migration guide](https://mui.com/x/migration/migration-data-grid-v4/).
|
|
2719
|
+
This version is fully compatible with `@mui/material@5.X` and can be used with `@material-ui/core@4.x` with some [additional steps](https://mui.com/x/migration/migration-data-grid-v4/#using-mui-x-v5-with-mui-core-v4).
|
|
2501
2720
|
|
|
2502
2721
|
A big thanks to the 7 contributors who made this release possible. Here are some highlights ✨:
|
|
2503
2722
|
|
package/index.js
CHANGED
package/legacy/index.js
CHANGED
|
@@ -1,5 +1,7 @@
|
|
|
1
|
+
import _asyncToGenerator from "@babel/runtime/helpers/esm/asyncToGenerator";
|
|
1
2
|
import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
|
|
2
3
|
import _extends from "@babel/runtime/helpers/esm/extends";
|
|
4
|
+
import _regeneratorRuntime from "@babel/runtime/regenerator";
|
|
3
5
|
import * as React from 'react';
|
|
4
6
|
import { useGridApiContext } from '@mui/x-data-grid-premium';
|
|
5
7
|
import Autocomplete, { autocompleteClasses } from '@mui/material/Autocomplete';
|
|
@@ -28,21 +30,37 @@ function EditCountry(props) {
|
|
|
28
30
|
value = props.value,
|
|
29
31
|
field = props.field;
|
|
30
32
|
var apiRef = useGridApiContext();
|
|
31
|
-
var handleChange = React.useCallback(function (
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
33
|
+
var handleChange = React.useCallback( /*#__PURE__*/function () {
|
|
34
|
+
var _ref3 = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee(event, newValue) {
|
|
35
|
+
return _regeneratorRuntime.wrap(function _callee$(_context) {
|
|
36
|
+
while (1) {
|
|
37
|
+
switch (_context.prev = _context.next) {
|
|
38
|
+
case 0:
|
|
39
|
+
_context.next = 2;
|
|
40
|
+
return apiRef.current.setEditCellValue({
|
|
41
|
+
id: id,
|
|
42
|
+
field: field,
|
|
43
|
+
value: newValue
|
|
44
|
+
}, event);
|
|
37
45
|
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
+
case 2:
|
|
47
|
+
apiRef.current.stopCellEditMode({
|
|
48
|
+
id: id,
|
|
49
|
+
field: field
|
|
50
|
+
});
|
|
51
|
+
|
|
52
|
+
case 3:
|
|
53
|
+
case "end":
|
|
54
|
+
return _context.stop();
|
|
55
|
+
}
|
|
56
|
+
}
|
|
57
|
+
}, _callee);
|
|
58
|
+
}));
|
|
59
|
+
|
|
60
|
+
return function (_x, _x2) {
|
|
61
|
+
return _ref3.apply(this, arguments);
|
|
62
|
+
};
|
|
63
|
+
}(), [apiRef, field, id]);
|
|
46
64
|
return /*#__PURE__*/_jsx(StyledAutocomplete, {
|
|
47
65
|
value: value,
|
|
48
66
|
onChange: handleChange,
|
|
@@ -1,5 +1,7 @@
|
|
|
1
|
+
import _asyncToGenerator from "@babel/runtime/helpers/esm/asyncToGenerator";
|
|
1
2
|
import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
|
|
2
3
|
import _extends from "@babel/runtime/helpers/esm/extends";
|
|
4
|
+
import _regeneratorRuntime from "@babel/runtime/regenerator";
|
|
3
5
|
import * as React from 'react';
|
|
4
6
|
import { useGridApiContext } from '@mui/x-data-grid-premium';
|
|
5
7
|
import Autocomplete, { autocompleteClasses } from '@mui/material/Autocomplete';
|
|
@@ -28,21 +30,37 @@ function EditCurrency(props) {
|
|
|
28
30
|
value = props.value,
|
|
29
31
|
field = props.field;
|
|
30
32
|
var apiRef = useGridApiContext();
|
|
31
|
-
var handleChange = React.useCallback(function (
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
33
|
+
var handleChange = React.useCallback( /*#__PURE__*/function () {
|
|
34
|
+
var _ref3 = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee(event, newValue) {
|
|
35
|
+
return _regeneratorRuntime.wrap(function _callee$(_context) {
|
|
36
|
+
while (1) {
|
|
37
|
+
switch (_context.prev = _context.next) {
|
|
38
|
+
case 0:
|
|
39
|
+
_context.next = 2;
|
|
40
|
+
return apiRef.current.setEditCellValue({
|
|
41
|
+
id: id,
|
|
42
|
+
field: field,
|
|
43
|
+
value: newValue.toUpperCase()
|
|
44
|
+
}, event);
|
|
37
45
|
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
+
case 2:
|
|
47
|
+
apiRef.current.stopCellEditMode({
|
|
48
|
+
id: id,
|
|
49
|
+
field: field
|
|
50
|
+
});
|
|
51
|
+
|
|
52
|
+
case 3:
|
|
53
|
+
case "end":
|
|
54
|
+
return _context.stop();
|
|
55
|
+
}
|
|
56
|
+
}
|
|
57
|
+
}, _callee);
|
|
58
|
+
}));
|
|
59
|
+
|
|
60
|
+
return function (_x, _x2) {
|
|
61
|
+
return _ref3.apply(this, arguments);
|
|
62
|
+
};
|
|
63
|
+
}(), [apiRef, field, id]);
|
|
46
64
|
return /*#__PURE__*/_jsx(StyledAutocomplete, {
|
|
47
65
|
value: value,
|
|
48
66
|
onChange: handleChange,
|
|
@@ -1,4 +1,6 @@
|
|
|
1
1
|
import _extends from "@babel/runtime/helpers/esm/extends";
|
|
2
|
+
import _asyncToGenerator from "@babel/runtime/helpers/esm/asyncToGenerator";
|
|
3
|
+
import _regeneratorRuntime from "@babel/runtime/regenerator";
|
|
2
4
|
import * as React from 'react';
|
|
3
5
|
import { useGridApiContext } from '@mui/x-data-grid-premium';
|
|
4
6
|
import Select from '@mui/material/Select';
|
|
@@ -15,28 +17,44 @@ function EditIncoterm(props) {
|
|
|
15
17
|
field = props.field;
|
|
16
18
|
var apiRef = useGridApiContext();
|
|
17
19
|
|
|
18
|
-
var handleChange = function
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
20
|
+
var handleChange = /*#__PURE__*/function () {
|
|
21
|
+
var _ref = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee(event) {
|
|
22
|
+
return _regeneratorRuntime.wrap(function _callee$(_context) {
|
|
23
|
+
while (1) {
|
|
24
|
+
switch (_context.prev = _context.next) {
|
|
25
|
+
case 0:
|
|
26
|
+
_context.next = 2;
|
|
27
|
+
return apiRef.current.setEditCellValue({
|
|
28
|
+
id: id,
|
|
29
|
+
field: field,
|
|
30
|
+
value: event.target.value
|
|
31
|
+
}, event);
|
|
29
32
|
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
33
|
+
case 2:
|
|
34
|
+
apiRef.current.stopCellEditMode({
|
|
35
|
+
id: id,
|
|
36
|
+
field: field
|
|
37
|
+
});
|
|
38
|
+
|
|
39
|
+
case 3:
|
|
40
|
+
case "end":
|
|
41
|
+
return _context.stop();
|
|
42
|
+
}
|
|
43
|
+
}
|
|
44
|
+
}, _callee);
|
|
45
|
+
}));
|
|
46
|
+
|
|
47
|
+
return function handleChange(_x) {
|
|
48
|
+
return _ref.apply(this, arguments);
|
|
49
|
+
};
|
|
50
|
+
}();
|
|
36
51
|
|
|
37
52
|
var handleClose = function handleClose(event, reason) {
|
|
38
53
|
if (reason === 'backdropClick') {
|
|
39
|
-
apiRef.current.
|
|
54
|
+
apiRef.current.stopCellEditMode({
|
|
55
|
+
id: id,
|
|
56
|
+
field: field
|
|
57
|
+
});
|
|
40
58
|
}
|
|
41
59
|
};
|
|
42
60
|
|
|
@@ -1,4 +1,6 @@
|
|
|
1
1
|
import _extends from "@babel/runtime/helpers/esm/extends";
|
|
2
|
+
import _asyncToGenerator from "@babel/runtime/helpers/esm/asyncToGenerator";
|
|
3
|
+
import _regeneratorRuntime from "@babel/runtime/regenerator";
|
|
2
4
|
import * as React from 'react';
|
|
3
5
|
import Box from '@mui/material/Box';
|
|
4
6
|
import Rating from '@mui/material/Rating';
|
|
@@ -12,22 +14,37 @@ function EditRating(props) {
|
|
|
12
14
|
field = props.field;
|
|
13
15
|
var apiRef = useGridApiContext();
|
|
14
16
|
|
|
15
|
-
var handleChange = function
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
17
|
+
var handleChange = /*#__PURE__*/function () {
|
|
18
|
+
var _ref = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee(event) {
|
|
19
|
+
return _regeneratorRuntime.wrap(function _callee$(_context) {
|
|
20
|
+
while (1) {
|
|
21
|
+
switch (_context.prev = _context.next) {
|
|
22
|
+
case 0:
|
|
23
|
+
_context.next = 2;
|
|
24
|
+
return apiRef.current.setEditCellValue({
|
|
25
|
+
id: id,
|
|
26
|
+
field: field,
|
|
27
|
+
value: Number(event.target.value)
|
|
28
|
+
}, event);
|
|
29
|
+
|
|
30
|
+
case 2:
|
|
31
|
+
apiRef.current.stopCellEditMode({
|
|
32
|
+
id: id,
|
|
33
|
+
field: field
|
|
34
|
+
});
|
|
35
|
+
|
|
36
|
+
case 3:
|
|
37
|
+
case "end":
|
|
38
|
+
return _context.stop();
|
|
39
|
+
}
|
|
40
|
+
}
|
|
41
|
+
}, _callee);
|
|
42
|
+
}));
|
|
43
|
+
|
|
44
|
+
return function handleChange(_x) {
|
|
45
|
+
return _ref.apply(this, arguments);
|
|
46
|
+
};
|
|
47
|
+
}();
|
|
31
48
|
|
|
32
49
|
var handleRef = function handleRef(element) {
|
|
33
50
|
if (element) {
|
package/modern/index.js
CHANGED
|
@@ -29,20 +29,16 @@ function EditCountry(props) {
|
|
|
29
29
|
field
|
|
30
30
|
} = props;
|
|
31
31
|
const apiRef = useGridApiContext();
|
|
32
|
-
const handleChange = React.useCallback((event, newValue) => {
|
|
33
|
-
apiRef.current.setEditCellValue({
|
|
32
|
+
const handleChange = React.useCallback(async (event, newValue) => {
|
|
33
|
+
await apiRef.current.setEditCellValue({
|
|
34
34
|
id,
|
|
35
35
|
field,
|
|
36
36
|
value: newValue
|
|
37
37
|
}, event);
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
field
|
|
43
|
-
});
|
|
44
|
-
apiRef.current.setCellMode(id, field, 'view');
|
|
45
|
-
}
|
|
38
|
+
apiRef.current.stopCellEditMode({
|
|
39
|
+
id,
|
|
40
|
+
field
|
|
41
|
+
});
|
|
46
42
|
}, [apiRef, field, id]);
|
|
47
43
|
return /*#__PURE__*/_jsx(StyledAutocomplete, {
|
|
48
44
|
value: value,
|
|
@@ -29,20 +29,16 @@ function EditCurrency(props) {
|
|
|
29
29
|
field
|
|
30
30
|
} = props;
|
|
31
31
|
const apiRef = useGridApiContext();
|
|
32
|
-
const handleChange = React.useCallback((event, newValue) => {
|
|
33
|
-
apiRef.current.setEditCellValue({
|
|
32
|
+
const handleChange = React.useCallback(async (event, newValue) => {
|
|
33
|
+
await apiRef.current.setEditCellValue({
|
|
34
34
|
id,
|
|
35
35
|
field,
|
|
36
36
|
value: newValue.toUpperCase()
|
|
37
37
|
}, event);
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
field
|
|
43
|
-
});
|
|
44
|
-
apiRef.current.setCellMode(id, field, 'view');
|
|
45
|
-
}
|
|
38
|
+
apiRef.current.stopCellEditMode({
|
|
39
|
+
id,
|
|
40
|
+
field
|
|
41
|
+
});
|
|
46
42
|
}, [apiRef, field, id]);
|
|
47
43
|
return /*#__PURE__*/_jsx(StyledAutocomplete, {
|
|
48
44
|
value: value,
|
|
@@ -17,28 +17,24 @@ function EditIncoterm(props) {
|
|
|
17
17
|
} = props;
|
|
18
18
|
const apiRef = useGridApiContext();
|
|
19
19
|
|
|
20
|
-
const handleChange = event => {
|
|
21
|
-
apiRef.current.setEditCellValue({
|
|
20
|
+
const handleChange = async event => {
|
|
21
|
+
await apiRef.current.setEditCellValue({
|
|
22
22
|
id,
|
|
23
23
|
field,
|
|
24
24
|
value: event.target.value
|
|
25
25
|
}, event);
|
|
26
|
-
apiRef.current.
|
|
26
|
+
apiRef.current.stopCellEditMode({
|
|
27
27
|
id,
|
|
28
28
|
field
|
|
29
29
|
});
|
|
30
|
-
apiRef.current.setCellMode(id, field, 'view');
|
|
31
|
-
|
|
32
|
-
if (event.key) {
|
|
33
|
-
// TODO v6: remove once we stop ignoring events fired from portals
|
|
34
|
-
const params = apiRef.current.getCellParams(id, field);
|
|
35
|
-
apiRef.current.publishEvent('cellNavigationKeyDown', params, event);
|
|
36
|
-
}
|
|
37
30
|
};
|
|
38
31
|
|
|
39
32
|
const handleClose = (event, reason) => {
|
|
40
33
|
if (reason === 'backdropClick') {
|
|
41
|
-
apiRef.current.
|
|
34
|
+
apiRef.current.stopCellEditMode({
|
|
35
|
+
id,
|
|
36
|
+
field
|
|
37
|
+
});
|
|
42
38
|
}
|
|
43
39
|
};
|
|
44
40
|
|
|
@@ -14,21 +14,16 @@ function EditRating(props) {
|
|
|
14
14
|
} = props;
|
|
15
15
|
const apiRef = useGridApiContext();
|
|
16
16
|
|
|
17
|
-
const handleChange = event => {
|
|
18
|
-
apiRef.current.setEditCellValue({
|
|
17
|
+
const handleChange = async event => {
|
|
18
|
+
await apiRef.current.setEditCellValue({
|
|
19
19
|
id,
|
|
20
20
|
field,
|
|
21
21
|
value: Number(event.target.value)
|
|
22
|
-
}, event);
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
id,
|
|
28
|
-
field
|
|
29
|
-
});
|
|
30
|
-
apiRef.current.setCellMode(id, field, 'view');
|
|
31
|
-
}
|
|
22
|
+
}, event);
|
|
23
|
+
apiRef.current.stopCellEditMode({
|
|
24
|
+
id,
|
|
25
|
+
field
|
|
26
|
+
});
|
|
32
27
|
};
|
|
33
28
|
|
|
34
29
|
const handleRef = element => {
|
package/node/index.js
CHANGED
|
@@ -50,20 +50,16 @@ function EditCountry(props) {
|
|
|
50
50
|
field
|
|
51
51
|
} = props;
|
|
52
52
|
const apiRef = (0, _xDataGridPremium.useGridApiContext)();
|
|
53
|
-
const handleChange = React.useCallback((event, newValue) => {
|
|
54
|
-
apiRef.current.setEditCellValue({
|
|
53
|
+
const handleChange = React.useCallback(async (event, newValue) => {
|
|
54
|
+
await apiRef.current.setEditCellValue({
|
|
55
55
|
id,
|
|
56
56
|
field,
|
|
57
57
|
value: newValue
|
|
58
58
|
}, event);
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
field
|
|
64
|
-
});
|
|
65
|
-
apiRef.current.setCellMode(id, field, 'view');
|
|
66
|
-
}
|
|
59
|
+
apiRef.current.stopCellEditMode({
|
|
60
|
+
id,
|
|
61
|
+
field
|
|
62
|
+
});
|
|
67
63
|
}, [apiRef, field, id]);
|
|
68
64
|
return /*#__PURE__*/(0, _jsxRuntime.jsx)(StyledAutocomplete, {
|
|
69
65
|
value: value,
|
|
@@ -50,20 +50,16 @@ function EditCurrency(props) {
|
|
|
50
50
|
field
|
|
51
51
|
} = props;
|
|
52
52
|
const apiRef = (0, _xDataGridPremium.useGridApiContext)();
|
|
53
|
-
const handleChange = React.useCallback((event, newValue) => {
|
|
54
|
-
apiRef.current.setEditCellValue({
|
|
53
|
+
const handleChange = React.useCallback(async (event, newValue) => {
|
|
54
|
+
await apiRef.current.setEditCellValue({
|
|
55
55
|
id,
|
|
56
56
|
field,
|
|
57
57
|
value: newValue.toUpperCase()
|
|
58
58
|
}, event);
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
field
|
|
64
|
-
});
|
|
65
|
-
apiRef.current.setCellMode(id, field, 'view');
|
|
66
|
-
}
|
|
59
|
+
apiRef.current.stopCellEditMode({
|
|
60
|
+
id,
|
|
61
|
+
field
|
|
62
|
+
});
|
|
67
63
|
}, [apiRef, field, id]);
|
|
68
64
|
return /*#__PURE__*/(0, _jsxRuntime.jsx)(StyledAutocomplete, {
|
|
69
65
|
value: value,
|
|
@@ -37,28 +37,24 @@ function EditIncoterm(props) {
|
|
|
37
37
|
} = props;
|
|
38
38
|
const apiRef = (0, _xDataGridPremium.useGridApiContext)();
|
|
39
39
|
|
|
40
|
-
const handleChange = event => {
|
|
41
|
-
apiRef.current.setEditCellValue({
|
|
40
|
+
const handleChange = async event => {
|
|
41
|
+
await apiRef.current.setEditCellValue({
|
|
42
42
|
id,
|
|
43
43
|
field,
|
|
44
44
|
value: event.target.value
|
|
45
45
|
}, event);
|
|
46
|
-
apiRef.current.
|
|
46
|
+
apiRef.current.stopCellEditMode({
|
|
47
47
|
id,
|
|
48
48
|
field
|
|
49
49
|
});
|
|
50
|
-
apiRef.current.setCellMode(id, field, 'view');
|
|
51
|
-
|
|
52
|
-
if (event.key) {
|
|
53
|
-
// TODO v6: remove once we stop ignoring events fired from portals
|
|
54
|
-
const params = apiRef.current.getCellParams(id, field);
|
|
55
|
-
apiRef.current.publishEvent('cellNavigationKeyDown', params, event);
|
|
56
|
-
}
|
|
57
50
|
};
|
|
58
51
|
|
|
59
52
|
const handleClose = (event, reason) => {
|
|
60
53
|
if (reason === 'backdropClick') {
|
|
61
|
-
apiRef.current.
|
|
54
|
+
apiRef.current.stopCellEditMode({
|
|
55
|
+
id,
|
|
56
|
+
field
|
|
57
|
+
});
|
|
62
58
|
}
|
|
63
59
|
};
|
|
64
60
|
|
|
@@ -31,21 +31,16 @@ function EditRating(props) {
|
|
|
31
31
|
} = props;
|
|
32
32
|
const apiRef = (0, _xDataGridPremium.useGridApiContext)();
|
|
33
33
|
|
|
34
|
-
const handleChange = event => {
|
|
35
|
-
apiRef.current.setEditCellValue({
|
|
34
|
+
const handleChange = async event => {
|
|
35
|
+
await apiRef.current.setEditCellValue({
|
|
36
36
|
id,
|
|
37
37
|
field,
|
|
38
38
|
value: Number(event.target.value)
|
|
39
|
-
}, event);
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
id,
|
|
45
|
-
field
|
|
46
|
-
});
|
|
47
|
-
apiRef.current.setCellMode(id, field, 'view');
|
|
48
|
-
}
|
|
39
|
+
}, event);
|
|
40
|
+
apiRef.current.stopCellEditMode({
|
|
41
|
+
id,
|
|
42
|
+
field
|
|
43
|
+
});
|
|
49
44
|
};
|
|
50
45
|
|
|
51
46
|
const handleRef = element => {
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@mui/x-data-grid-generator",
|
|
3
|
-
"version": "6.0.0-alpha.
|
|
3
|
+
"version": "6.0.0-alpha.3",
|
|
4
4
|
"description": "Generate fake data for demo purposes only.",
|
|
5
5
|
"author": "MUI Team",
|
|
6
6
|
"main": "./node/index.js",
|
|
@@ -20,8 +20,8 @@
|
|
|
20
20
|
},
|
|
21
21
|
"dependencies": {
|
|
22
22
|
"@babel/runtime": "^7.19.0",
|
|
23
|
-
"@mui/base": "^5.0.0-alpha.
|
|
24
|
-
"@mui/x-data-grid-premium": "6.0.0-alpha.
|
|
23
|
+
"@mui/base": "^5.0.0-alpha.101",
|
|
24
|
+
"@mui/x-data-grid-premium": "6.0.0-alpha.3",
|
|
25
25
|
"chance": "^1.1.8",
|
|
26
26
|
"clsx": "^1.2.1",
|
|
27
27
|
"lru-cache": "^7.14.0"
|
|
@@ -29,20 +29,16 @@ function EditCountry(props) {
|
|
|
29
29
|
field
|
|
30
30
|
} = props;
|
|
31
31
|
const apiRef = useGridApiContext();
|
|
32
|
-
const handleChange = React.useCallback((event, newValue) => {
|
|
33
|
-
apiRef.current.setEditCellValue({
|
|
32
|
+
const handleChange = React.useCallback(async (event, newValue) => {
|
|
33
|
+
await apiRef.current.setEditCellValue({
|
|
34
34
|
id,
|
|
35
35
|
field,
|
|
36
36
|
value: newValue
|
|
37
37
|
}, event);
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
field
|
|
43
|
-
});
|
|
44
|
-
apiRef.current.setCellMode(id, field, 'view');
|
|
45
|
-
}
|
|
38
|
+
apiRef.current.stopCellEditMode({
|
|
39
|
+
id,
|
|
40
|
+
field
|
|
41
|
+
});
|
|
46
42
|
}, [apiRef, field, id]);
|
|
47
43
|
return /*#__PURE__*/_jsx(StyledAutocomplete, {
|
|
48
44
|
value: value,
|
|
@@ -29,20 +29,16 @@ function EditCurrency(props) {
|
|
|
29
29
|
field
|
|
30
30
|
} = props;
|
|
31
31
|
const apiRef = useGridApiContext();
|
|
32
|
-
const handleChange = React.useCallback((event, newValue) => {
|
|
33
|
-
apiRef.current.setEditCellValue({
|
|
32
|
+
const handleChange = React.useCallback(async (event, newValue) => {
|
|
33
|
+
await apiRef.current.setEditCellValue({
|
|
34
34
|
id,
|
|
35
35
|
field,
|
|
36
36
|
value: newValue.toUpperCase()
|
|
37
37
|
}, event);
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
field
|
|
43
|
-
});
|
|
44
|
-
apiRef.current.setCellMode(id, field, 'view');
|
|
45
|
-
}
|
|
38
|
+
apiRef.current.stopCellEditMode({
|
|
39
|
+
id,
|
|
40
|
+
field
|
|
41
|
+
});
|
|
46
42
|
}, [apiRef, field, id]);
|
|
47
43
|
return /*#__PURE__*/_jsx(StyledAutocomplete, {
|
|
48
44
|
value: value,
|
|
@@ -17,28 +17,24 @@ function EditIncoterm(props) {
|
|
|
17
17
|
} = props;
|
|
18
18
|
const apiRef = useGridApiContext();
|
|
19
19
|
|
|
20
|
-
const handleChange = event => {
|
|
21
|
-
apiRef.current.setEditCellValue({
|
|
20
|
+
const handleChange = async event => {
|
|
21
|
+
await apiRef.current.setEditCellValue({
|
|
22
22
|
id,
|
|
23
23
|
field,
|
|
24
24
|
value: event.target.value
|
|
25
25
|
}, event);
|
|
26
|
-
apiRef.current.
|
|
26
|
+
apiRef.current.stopCellEditMode({
|
|
27
27
|
id,
|
|
28
28
|
field
|
|
29
29
|
});
|
|
30
|
-
apiRef.current.setCellMode(id, field, 'view');
|
|
31
|
-
|
|
32
|
-
if (event.key) {
|
|
33
|
-
// TODO v6: remove once we stop ignoring events fired from portals
|
|
34
|
-
const params = apiRef.current.getCellParams(id, field);
|
|
35
|
-
apiRef.current.publishEvent('cellNavigationKeyDown', params, event);
|
|
36
|
-
}
|
|
37
30
|
};
|
|
38
31
|
|
|
39
32
|
const handleClose = (event, reason) => {
|
|
40
33
|
if (reason === 'backdropClick') {
|
|
41
|
-
apiRef.current.
|
|
34
|
+
apiRef.current.stopCellEditMode({
|
|
35
|
+
id,
|
|
36
|
+
field
|
|
37
|
+
});
|
|
42
38
|
}
|
|
43
39
|
};
|
|
44
40
|
|
|
@@ -14,21 +14,16 @@ function EditRating(props) {
|
|
|
14
14
|
} = props;
|
|
15
15
|
const apiRef = useGridApiContext();
|
|
16
16
|
|
|
17
|
-
const handleChange = event => {
|
|
18
|
-
apiRef.current.setEditCellValue({
|
|
17
|
+
const handleChange = async event => {
|
|
18
|
+
await apiRef.current.setEditCellValue({
|
|
19
19
|
id,
|
|
20
20
|
field,
|
|
21
21
|
value: Number(event.target.value)
|
|
22
|
-
}, event);
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
id,
|
|
28
|
-
field
|
|
29
|
-
});
|
|
30
|
-
apiRef.current.setCellMode(id, field, 'view');
|
|
31
|
-
}
|
|
22
|
+
}, event);
|
|
23
|
+
apiRef.current.stopCellEditMode({
|
|
24
|
+
id,
|
|
25
|
+
field
|
|
26
|
+
});
|
|
32
27
|
};
|
|
33
28
|
|
|
34
29
|
const handleRef = element => {
|