@mui/x-date-pickers 7.23.1 → 7.23.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 +129 -0
- package/MultiSectionDigitalClock/MultiSectionDigitalClock.js +3 -0
- package/TimeClock/Clock.d.ts +4 -0
- package/TimeClock/Clock.js +9 -6
- package/TimeClock/TimeClock.js +21 -4
- package/index.js +1 -1
- package/locales/roRO.js +15 -18
- package/modern/MultiSectionDigitalClock/MultiSectionDigitalClock.js +3 -0
- package/modern/TimeClock/Clock.js +9 -6
- package/modern/TimeClock/TimeClock.js +21 -4
- package/modern/index.js +1 -1
- package/modern/locales/roRO.js +15 -18
- package/node/MultiSectionDigitalClock/MultiSectionDigitalClock.js +3 -0
- package/node/TimeClock/Clock.js +9 -6
- package/node/TimeClock/TimeClock.js +21 -4
- package/node/index.js +1 -1
- package/node/locales/roRO.js +15 -18
- package/package.json +1 -1
package/CHANGELOG.md
CHANGED
|
@@ -3,6 +3,135 @@
|
|
|
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
|
+
## 7.23.3
|
|
7
|
+
|
|
8
|
+
_Dec 19, 2024_
|
|
9
|
+
|
|
10
|
+
We'd like to offer a big thanks to the 6 contributors who made this release possible. Here are some highlights ✨:
|
|
11
|
+
|
|
12
|
+
- 🌍 Improve Korean (ko-KR) locale on the Data Grid
|
|
13
|
+
- 🐞 Bugfixes
|
|
14
|
+
|
|
15
|
+
Special thanks go out to the community contributors who have helped make this release possible:
|
|
16
|
+
@k-rajat19, @good-jinu.
|
|
17
|
+
Following are all team members who have contributed to this release:
|
|
18
|
+
@KenanYusuf, @MBilalShafi, @arminmeh, @flaviendelangle.
|
|
19
|
+
|
|
20
|
+
<!--/ HIGHLIGHT_ABOVE_SEPARATOR /-->
|
|
21
|
+
|
|
22
|
+
### Data Grid
|
|
23
|
+
|
|
24
|
+
#### `@mui/x-data-grid@7.23.3`
|
|
25
|
+
|
|
26
|
+
- [DataGrid] Allow passing custom props to `.main` element (#15919) @MBilalShafi
|
|
27
|
+
- [DataGrid] Consider `columnGroupHeaderHeight` prop in `getTotalHeaderHeight` method (#15927) @k-rajat19
|
|
28
|
+
- [DataGrid] Deprecate `indeterminateCheckboxAction` prop (#15862) @MBilalShafi
|
|
29
|
+
- [DataGrid] Fix `aria-label` value for group checkboxes (#15861) @MBilalShafi
|
|
30
|
+
- [DataGrid] Fix autosizing with virtualized columns (#15929) @k-rajat19
|
|
31
|
+
- [DataGrid] Round dimensions to avoid subpixel rendering error (#15873) @KenanYusuf
|
|
32
|
+
- [DataGrid] Toggle menu on click in `<GridActionsCell />` (#15871) @k-rajat19
|
|
33
|
+
- [DataGrid] Trigger row spanning computation on rows update (#15872) @MBilalShafi
|
|
34
|
+
- [l10n] Improve Korean (ko-KR) locale (#15906) @good-jinu
|
|
35
|
+
|
|
36
|
+
#### `@mui/x-data-grid-pro@7.23.3` [](https://mui.com/r/x-pro-svg-link 'Pro plan')
|
|
37
|
+
|
|
38
|
+
Same changes as in `@mui/x-data-grid@7.23.3`.
|
|
39
|
+
|
|
40
|
+
#### `@mui/x-data-grid-premium@7.23.3` [](https://mui.com/r/x-premium-svg-link 'Premium plan')
|
|
41
|
+
|
|
42
|
+
Same changes as in `@mui/x-data-grid-pro@7.23.3`.
|
|
43
|
+
|
|
44
|
+
### Date and Time Pickers
|
|
45
|
+
|
|
46
|
+
#### `@mui/x-date-pickers@7.23.3`
|
|
47
|
+
|
|
48
|
+
- [pickers] Add verification to disable skipped hours in spring forward DST (#15918) @flaviendelangle
|
|
49
|
+
|
|
50
|
+
#### `@mui/x-date-pickers-pro@7.23.3` [](https://mui.com/r/x-pro-svg-link 'Pro plan')
|
|
51
|
+
|
|
52
|
+
Same changes as in `@mui/x-date-pickers@7.23.3`.
|
|
53
|
+
|
|
54
|
+
## 7.23.2
|
|
55
|
+
|
|
56
|
+
_Dec 12, 2024_
|
|
57
|
+
|
|
58
|
+
We'd like to offer a big thanks to the 11 contributors who made this release possible. Here are some highlights ✨:
|
|
59
|
+
|
|
60
|
+
- 🌍 Improve Romanian and Turkish locales on the Data Grid
|
|
61
|
+
- 🌍 Improve Romanian locale on the Pickers
|
|
62
|
+
- 📚 Documentation improvements
|
|
63
|
+
- 🐞 Bugfixes
|
|
64
|
+
|
|
65
|
+
Special thanks go out to the community contributors who have helped make this release possible:
|
|
66
|
+
@ihsanberkozcan, @k-rajat19, @lhilgert9, @nusr, @rares985.
|
|
67
|
+
|
|
68
|
+
Following are all team members who have contributed to this release:
|
|
69
|
+
@alexfauquette, @arminmeh, @flaviendelangle, @JCQuintas, @KenanYusuf, @LukasTy.
|
|
70
|
+
|
|
71
|
+
<!--/ HIGHLIGHT_ABOVE_SEPARATOR /-->
|
|
72
|
+
|
|
73
|
+
### Data Grid
|
|
74
|
+
|
|
75
|
+
#### `@mui/x-data-grid@7.23.2`
|
|
76
|
+
|
|
77
|
+
- [DataGrid] Fix "No rows" displaying when all rows are pinned (#15851) @nusr
|
|
78
|
+
- [DataGrid] Use `columnsManagement` slot (#15821) @k-rajat19
|
|
79
|
+
- [l10n] Improve Romanian (ro-RO) locale (#15751) @rares985
|
|
80
|
+
- [l10n] Improve Turkish (tr-TR) locale (#15748) @ihsanberkozcan
|
|
81
|
+
|
|
82
|
+
#### `@mui/x-data-grid-pro@7.23.2` [](https://mui.com/r/x-pro-svg-link 'Pro plan')
|
|
83
|
+
|
|
84
|
+
Same changes as in `@mui/x-data-grid@7.23.2`, plus:
|
|
85
|
+
|
|
86
|
+
- [DataGridPro] Make Row reordering work with pagination (#15782) @k-rajat19
|
|
87
|
+
|
|
88
|
+
#### `@mui/x-data-grid-premium@7.23.2` [](https://mui.com/r/x-premium-svg-link 'Premium plan')
|
|
89
|
+
|
|
90
|
+
Same changes as in `@mui/x-data-grid-pro@7.23.2`, plus:
|
|
91
|
+
|
|
92
|
+
- [DataGridPremium] Fix group column ignoring `valueOptions` for `singleSelect` column type (#15754) @arminmeh
|
|
93
|
+
|
|
94
|
+
### Date and Time Pickers
|
|
95
|
+
|
|
96
|
+
#### `@mui/x-date-pickers@7.23.2`
|
|
97
|
+
|
|
98
|
+
- [l10n] Improve Romanian (ro-RO) locale (#15751) @rares985
|
|
99
|
+
|
|
100
|
+
#### `@mui/x-date-pickers-pro@7.23.2` [](https://mui.com/r/x-pro-svg-link 'Pro plan')
|
|
101
|
+
|
|
102
|
+
Same changes as in `@mui/x-date-pickers@7.23.2`.
|
|
103
|
+
|
|
104
|
+
### Charts
|
|
105
|
+
|
|
106
|
+
#### `@mui/x-charts@7.23.2`
|
|
107
|
+
|
|
108
|
+
- [charts] Fix key generation for the ChartsGrid (#15864) @alexfauquette
|
|
109
|
+
- [charts] Fix scatter dataset with missing data (#15804) @alexfauquette
|
|
110
|
+
|
|
111
|
+
#### `@mui/x-charts-pro@7.23.2` [](https://mui.com/r/x-pro-svg-link 'Pro plan')
|
|
112
|
+
|
|
113
|
+
Same changes as in `@mui/x-charts@7.23.2`.
|
|
114
|
+
|
|
115
|
+
#### `@mui/x-tree-view@v7.23.2`
|
|
116
|
+
|
|
117
|
+
No changes, releasing to keep the versions in sync.
|
|
118
|
+
|
|
119
|
+
#### `@mui/x-tree-view-pro@7.23.2` [](https://mui.com/r/x-pro-svg-link 'Pro plan')
|
|
120
|
+
|
|
121
|
+
Releasing to benefit from license package fix (#15818).
|
|
122
|
+
|
|
123
|
+
### Docs
|
|
124
|
+
|
|
125
|
+
- [docs] Fix typo in charts axis documentation (#15746) @JCQuintas
|
|
126
|
+
- [docs] Improve Pickers accessible DOM structure description (#15752) @LukasTy
|
|
127
|
+
- [docs] Use `updateRows` method for list view demos (#15824) @KenanYusuf
|
|
128
|
+
- [docs] Use date library version from package dev dependencies for sandboxes (#15767) @LukasTy
|
|
129
|
+
|
|
130
|
+
### Core
|
|
131
|
+
|
|
132
|
+
- [core] Add `@mui/x-tree-view-pro` to `releaseChangelog` (#15747) @flaviendelangle
|
|
133
|
+
- [license] Use `console.log` for the error message on Codesandbox to avoid rendering error (#15818) @arminmeh
|
|
134
|
+
|
|
6
135
|
## 7.23.1
|
|
7
136
|
|
|
8
137
|
_Dec 5, 2024_
|
|
@@ -190,6 +190,9 @@ export const MultiSectionDigitalClock = /*#__PURE__*/React.forwardRef(function M
|
|
|
190
190
|
{
|
|
191
191
|
const valueWithMeridiem = convertValueToMeridiem(rawValue, meridiemMode, ampm);
|
|
192
192
|
const dateWithNewHours = utils.setHours(valueOrReferenceDate, valueWithMeridiem);
|
|
193
|
+
if (utils.getHours(dateWithNewHours) !== valueWithMeridiem) {
|
|
194
|
+
return true;
|
|
195
|
+
}
|
|
193
196
|
const start = utils.setSeconds(utils.setMinutes(dateWithNewHours, 0), 0);
|
|
194
197
|
const end = utils.setSeconds(utils.setMinutes(dateWithNewHours, 59), 59);
|
|
195
198
|
return !containsValidTime({
|
package/TimeClock/Clock.d.ts
CHANGED
|
@@ -25,6 +25,10 @@ export interface ClockProps<TDate extends PickerValidDate> extends ReturnType<ty
|
|
|
25
25
|
* The current full date value.
|
|
26
26
|
*/
|
|
27
27
|
value: TDate | null;
|
|
28
|
+
/**
|
|
29
|
+
* Minimum and maximum value of the clock.
|
|
30
|
+
*/
|
|
31
|
+
viewRange: [number, number];
|
|
28
32
|
disabled?: boolean;
|
|
29
33
|
readOnly?: boolean;
|
|
30
34
|
className?: string;
|
package/TimeClock/Clock.js
CHANGED
|
@@ -180,6 +180,7 @@ export function Clock(inProps) {
|
|
|
180
180
|
selectedId,
|
|
181
181
|
type,
|
|
182
182
|
viewValue,
|
|
183
|
+
viewRange: [minViewValue, maxViewValue],
|
|
183
184
|
disabled = false,
|
|
184
185
|
readOnly,
|
|
185
186
|
className
|
|
@@ -252,6 +253,8 @@ export function Clock(inProps) {
|
|
|
252
253
|
listboxRef.current.focus();
|
|
253
254
|
}
|
|
254
255
|
}, [autoFocus]);
|
|
256
|
+
const clampValue = newValue => Math.max(minViewValue, Math.min(maxViewValue, newValue));
|
|
257
|
+
const circleValue = newValue => (newValue + (maxViewValue + 1)) % (maxViewValue + 1);
|
|
255
258
|
const handleKeyDown = event => {
|
|
256
259
|
// TODO: Why this early exit?
|
|
257
260
|
if (isMoving.current) {
|
|
@@ -260,27 +263,27 @@ export function Clock(inProps) {
|
|
|
260
263
|
switch (event.key) {
|
|
261
264
|
case 'Home':
|
|
262
265
|
// reset both hours and minutes
|
|
263
|
-
handleValueChange(
|
|
266
|
+
handleValueChange(minViewValue, 'partial');
|
|
264
267
|
event.preventDefault();
|
|
265
268
|
break;
|
|
266
269
|
case 'End':
|
|
267
|
-
handleValueChange(
|
|
270
|
+
handleValueChange(maxViewValue, 'partial');
|
|
268
271
|
event.preventDefault();
|
|
269
272
|
break;
|
|
270
273
|
case 'ArrowUp':
|
|
271
|
-
handleValueChange(viewValue + keyboardControlStep, 'partial');
|
|
274
|
+
handleValueChange(circleValue(viewValue + keyboardControlStep), 'partial');
|
|
272
275
|
event.preventDefault();
|
|
273
276
|
break;
|
|
274
277
|
case 'ArrowDown':
|
|
275
|
-
handleValueChange(viewValue - keyboardControlStep, 'partial');
|
|
278
|
+
handleValueChange(circleValue(viewValue - keyboardControlStep), 'partial');
|
|
276
279
|
event.preventDefault();
|
|
277
280
|
break;
|
|
278
281
|
case 'PageUp':
|
|
279
|
-
handleValueChange(viewValue + 5, 'partial');
|
|
282
|
+
handleValueChange(clampValue(viewValue + 5), 'partial');
|
|
280
283
|
event.preventDefault();
|
|
281
284
|
break;
|
|
282
285
|
case 'PageDown':
|
|
283
|
-
handleValueChange(viewValue - 5, 'partial');
|
|
286
|
+
handleValueChange(clampValue(viewValue - 5), 'partial');
|
|
284
287
|
event.preventDefault();
|
|
285
288
|
break;
|
|
286
289
|
case 'Enter':
|
package/TimeClock/TimeClock.js
CHANGED
|
@@ -183,6 +183,9 @@ export const TimeClock = /*#__PURE__*/React.forwardRef(function TimeClock(inProp
|
|
|
183
183
|
{
|
|
184
184
|
const valueWithMeridiem = convertValueToMeridiem(rawValue, meridiemMode, ampm);
|
|
185
185
|
const dateWithNewHours = utils.setHours(valueOrReferenceDate, valueWithMeridiem);
|
|
186
|
+
if (utils.getHours(dateWithNewHours) !== valueWithMeridiem) {
|
|
187
|
+
return true;
|
|
188
|
+
}
|
|
186
189
|
const start = utils.setSeconds(utils.setMinutes(dateWithNewHours, 0), 0);
|
|
187
190
|
const end = utils.setSeconds(utils.setMinutes(dateWithNewHours, 59), 59);
|
|
188
191
|
return !containsValidTime({
|
|
@@ -223,9 +226,20 @@ export const TimeClock = /*#__PURE__*/React.forwardRef(function TimeClock(inProp
|
|
|
223
226
|
const valueWithMeridiem = convertValueToMeridiem(hourValue, meridiemMode, ampm);
|
|
224
227
|
setValueAndGoToNextView(utils.setHours(valueOrReferenceDate, valueWithMeridiem), isFinish, 'hours');
|
|
225
228
|
};
|
|
229
|
+
const viewValue = utils.getHours(valueOrReferenceDate);
|
|
230
|
+
let viewRange;
|
|
231
|
+
if (ampm) {
|
|
232
|
+
if (viewValue > 12) {
|
|
233
|
+
viewRange = [12, 23];
|
|
234
|
+
} else {
|
|
235
|
+
viewRange = [0, 11];
|
|
236
|
+
}
|
|
237
|
+
} else {
|
|
238
|
+
viewRange = [0, 23];
|
|
239
|
+
}
|
|
226
240
|
return {
|
|
227
241
|
onChange: handleHoursChange,
|
|
228
|
-
viewValue
|
|
242
|
+
viewValue,
|
|
229
243
|
children: getHourNumbers({
|
|
230
244
|
value,
|
|
231
245
|
utils,
|
|
@@ -234,7 +248,8 @@ export const TimeClock = /*#__PURE__*/React.forwardRef(function TimeClock(inProp
|
|
|
234
248
|
getClockNumberText: translations.hoursClockNumberText,
|
|
235
249
|
isDisabled: hourValue => disabled || isTimeDisabled(hourValue, 'hours'),
|
|
236
250
|
selectedId
|
|
237
|
-
})
|
|
251
|
+
}),
|
|
252
|
+
viewRange
|
|
238
253
|
};
|
|
239
254
|
}
|
|
240
255
|
case 'minutes':
|
|
@@ -253,7 +268,8 @@ export const TimeClock = /*#__PURE__*/React.forwardRef(function TimeClock(inProp
|
|
|
253
268
|
getClockNumberText: translations.minutesClockNumberText,
|
|
254
269
|
isDisabled: minuteValue => disabled || isTimeDisabled(minuteValue, 'minutes'),
|
|
255
270
|
selectedId
|
|
256
|
-
})
|
|
271
|
+
}),
|
|
272
|
+
viewRange: [0, 59]
|
|
257
273
|
};
|
|
258
274
|
}
|
|
259
275
|
case 'seconds':
|
|
@@ -272,7 +288,8 @@ export const TimeClock = /*#__PURE__*/React.forwardRef(function TimeClock(inProp
|
|
|
272
288
|
getClockNumberText: translations.secondsClockNumberText,
|
|
273
289
|
isDisabled: secondValue => disabled || isTimeDisabled(secondValue, 'seconds'),
|
|
274
290
|
selectedId
|
|
275
|
-
})
|
|
291
|
+
}),
|
|
292
|
+
viewRange: [0, 59]
|
|
276
293
|
};
|
|
277
294
|
}
|
|
278
295
|
default:
|
package/index.js
CHANGED
package/locales/roRO.js
CHANGED
|
@@ -17,11 +17,10 @@ const roROPickers = {
|
|
|
17
17
|
// DateRange labels
|
|
18
18
|
start: 'Început',
|
|
19
19
|
end: 'Sfârșit',
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
20
|
+
startDate: 'Data de început',
|
|
21
|
+
startTime: 'Ora de început',
|
|
22
|
+
endDate: 'Data de sfârșit',
|
|
23
|
+
endTime: 'Ora de sfârșit',
|
|
25
24
|
// Action bar
|
|
26
25
|
cancelButtonLabel: 'Anulare',
|
|
27
26
|
clearButtonLabel: 'Ștergere',
|
|
@@ -55,23 +54,21 @@ const roROPickers = {
|
|
|
55
54
|
fieldYearPlaceholder: params => 'A'.repeat(params.digitAmount),
|
|
56
55
|
fieldMonthPlaceholder: params => params.contentType === 'letter' ? 'LLLL' : 'LL',
|
|
57
56
|
fieldDayPlaceholder: () => 'ZZ',
|
|
58
|
-
|
|
57
|
+
fieldWeekDayPlaceholder: params => params.contentType === 'letter' ? 'ZZZZ' : 'ZZ',
|
|
59
58
|
fieldHoursPlaceholder: () => 'hh',
|
|
60
59
|
fieldMinutesPlaceholder: () => 'mm',
|
|
61
60
|
fieldSecondsPlaceholder: () => 'ss',
|
|
62
|
-
fieldMeridiemPlaceholder: () => 'aa'
|
|
63
|
-
|
|
61
|
+
fieldMeridiemPlaceholder: () => 'aa',
|
|
64
62
|
// View names
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
|
|
72
|
-
|
|
73
|
-
|
|
63
|
+
year: 'An',
|
|
64
|
+
month: 'Luna',
|
|
65
|
+
day: 'Ziua',
|
|
66
|
+
weekDay: 'Ziua saptămânii',
|
|
67
|
+
hours: 'Ore',
|
|
68
|
+
minutes: 'Minute',
|
|
69
|
+
seconds: 'Secunde',
|
|
70
|
+
meridiem: 'Meridiem',
|
|
74
71
|
// Common
|
|
75
|
-
|
|
72
|
+
empty: 'Gol'
|
|
76
73
|
};
|
|
77
74
|
export const roRO = getPickersLocalization(roROPickers);
|
|
@@ -190,6 +190,9 @@ export const MultiSectionDigitalClock = /*#__PURE__*/React.forwardRef(function M
|
|
|
190
190
|
{
|
|
191
191
|
const valueWithMeridiem = convertValueToMeridiem(rawValue, meridiemMode, ampm);
|
|
192
192
|
const dateWithNewHours = utils.setHours(valueOrReferenceDate, valueWithMeridiem);
|
|
193
|
+
if (utils.getHours(dateWithNewHours) !== valueWithMeridiem) {
|
|
194
|
+
return true;
|
|
195
|
+
}
|
|
193
196
|
const start = utils.setSeconds(utils.setMinutes(dateWithNewHours, 0), 0);
|
|
194
197
|
const end = utils.setSeconds(utils.setMinutes(dateWithNewHours, 59), 59);
|
|
195
198
|
return !containsValidTime({
|
|
@@ -180,6 +180,7 @@ export function Clock(inProps) {
|
|
|
180
180
|
selectedId,
|
|
181
181
|
type,
|
|
182
182
|
viewValue,
|
|
183
|
+
viewRange: [minViewValue, maxViewValue],
|
|
183
184
|
disabled = false,
|
|
184
185
|
readOnly,
|
|
185
186
|
className
|
|
@@ -252,6 +253,8 @@ export function Clock(inProps) {
|
|
|
252
253
|
listboxRef.current.focus();
|
|
253
254
|
}
|
|
254
255
|
}, [autoFocus]);
|
|
256
|
+
const clampValue = newValue => Math.max(minViewValue, Math.min(maxViewValue, newValue));
|
|
257
|
+
const circleValue = newValue => (newValue + (maxViewValue + 1)) % (maxViewValue + 1);
|
|
255
258
|
const handleKeyDown = event => {
|
|
256
259
|
// TODO: Why this early exit?
|
|
257
260
|
if (isMoving.current) {
|
|
@@ -260,27 +263,27 @@ export function Clock(inProps) {
|
|
|
260
263
|
switch (event.key) {
|
|
261
264
|
case 'Home':
|
|
262
265
|
// reset both hours and minutes
|
|
263
|
-
handleValueChange(
|
|
266
|
+
handleValueChange(minViewValue, 'partial');
|
|
264
267
|
event.preventDefault();
|
|
265
268
|
break;
|
|
266
269
|
case 'End':
|
|
267
|
-
handleValueChange(
|
|
270
|
+
handleValueChange(maxViewValue, 'partial');
|
|
268
271
|
event.preventDefault();
|
|
269
272
|
break;
|
|
270
273
|
case 'ArrowUp':
|
|
271
|
-
handleValueChange(viewValue + keyboardControlStep, 'partial');
|
|
274
|
+
handleValueChange(circleValue(viewValue + keyboardControlStep), 'partial');
|
|
272
275
|
event.preventDefault();
|
|
273
276
|
break;
|
|
274
277
|
case 'ArrowDown':
|
|
275
|
-
handleValueChange(viewValue - keyboardControlStep, 'partial');
|
|
278
|
+
handleValueChange(circleValue(viewValue - keyboardControlStep), 'partial');
|
|
276
279
|
event.preventDefault();
|
|
277
280
|
break;
|
|
278
281
|
case 'PageUp':
|
|
279
|
-
handleValueChange(viewValue + 5, 'partial');
|
|
282
|
+
handleValueChange(clampValue(viewValue + 5), 'partial');
|
|
280
283
|
event.preventDefault();
|
|
281
284
|
break;
|
|
282
285
|
case 'PageDown':
|
|
283
|
-
handleValueChange(viewValue - 5, 'partial');
|
|
286
|
+
handleValueChange(clampValue(viewValue - 5), 'partial');
|
|
284
287
|
event.preventDefault();
|
|
285
288
|
break;
|
|
286
289
|
case 'Enter':
|
|
@@ -183,6 +183,9 @@ export const TimeClock = /*#__PURE__*/React.forwardRef(function TimeClock(inProp
|
|
|
183
183
|
{
|
|
184
184
|
const valueWithMeridiem = convertValueToMeridiem(rawValue, meridiemMode, ampm);
|
|
185
185
|
const dateWithNewHours = utils.setHours(valueOrReferenceDate, valueWithMeridiem);
|
|
186
|
+
if (utils.getHours(dateWithNewHours) !== valueWithMeridiem) {
|
|
187
|
+
return true;
|
|
188
|
+
}
|
|
186
189
|
const start = utils.setSeconds(utils.setMinutes(dateWithNewHours, 0), 0);
|
|
187
190
|
const end = utils.setSeconds(utils.setMinutes(dateWithNewHours, 59), 59);
|
|
188
191
|
return !containsValidTime({
|
|
@@ -223,9 +226,20 @@ export const TimeClock = /*#__PURE__*/React.forwardRef(function TimeClock(inProp
|
|
|
223
226
|
const valueWithMeridiem = convertValueToMeridiem(hourValue, meridiemMode, ampm);
|
|
224
227
|
setValueAndGoToNextView(utils.setHours(valueOrReferenceDate, valueWithMeridiem), isFinish, 'hours');
|
|
225
228
|
};
|
|
229
|
+
const viewValue = utils.getHours(valueOrReferenceDate);
|
|
230
|
+
let viewRange;
|
|
231
|
+
if (ampm) {
|
|
232
|
+
if (viewValue > 12) {
|
|
233
|
+
viewRange = [12, 23];
|
|
234
|
+
} else {
|
|
235
|
+
viewRange = [0, 11];
|
|
236
|
+
}
|
|
237
|
+
} else {
|
|
238
|
+
viewRange = [0, 23];
|
|
239
|
+
}
|
|
226
240
|
return {
|
|
227
241
|
onChange: handleHoursChange,
|
|
228
|
-
viewValue
|
|
242
|
+
viewValue,
|
|
229
243
|
children: getHourNumbers({
|
|
230
244
|
value,
|
|
231
245
|
utils,
|
|
@@ -234,7 +248,8 @@ export const TimeClock = /*#__PURE__*/React.forwardRef(function TimeClock(inProp
|
|
|
234
248
|
getClockNumberText: translations.hoursClockNumberText,
|
|
235
249
|
isDisabled: hourValue => disabled || isTimeDisabled(hourValue, 'hours'),
|
|
236
250
|
selectedId
|
|
237
|
-
})
|
|
251
|
+
}),
|
|
252
|
+
viewRange
|
|
238
253
|
};
|
|
239
254
|
}
|
|
240
255
|
case 'minutes':
|
|
@@ -253,7 +268,8 @@ export const TimeClock = /*#__PURE__*/React.forwardRef(function TimeClock(inProp
|
|
|
253
268
|
getClockNumberText: translations.minutesClockNumberText,
|
|
254
269
|
isDisabled: minuteValue => disabled || isTimeDisabled(minuteValue, 'minutes'),
|
|
255
270
|
selectedId
|
|
256
|
-
})
|
|
271
|
+
}),
|
|
272
|
+
viewRange: [0, 59]
|
|
257
273
|
};
|
|
258
274
|
}
|
|
259
275
|
case 'seconds':
|
|
@@ -272,7 +288,8 @@ export const TimeClock = /*#__PURE__*/React.forwardRef(function TimeClock(inProp
|
|
|
272
288
|
getClockNumberText: translations.secondsClockNumberText,
|
|
273
289
|
isDisabled: secondValue => disabled || isTimeDisabled(secondValue, 'seconds'),
|
|
274
290
|
selectedId
|
|
275
|
-
})
|
|
291
|
+
}),
|
|
292
|
+
viewRange: [0, 59]
|
|
276
293
|
};
|
|
277
294
|
}
|
|
278
295
|
default:
|
package/modern/index.js
CHANGED
package/modern/locales/roRO.js
CHANGED
|
@@ -17,11 +17,10 @@ const roROPickers = {
|
|
|
17
17
|
// DateRange labels
|
|
18
18
|
start: 'Început',
|
|
19
19
|
end: 'Sfârșit',
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
20
|
+
startDate: 'Data de început',
|
|
21
|
+
startTime: 'Ora de început',
|
|
22
|
+
endDate: 'Data de sfârșit',
|
|
23
|
+
endTime: 'Ora de sfârșit',
|
|
25
24
|
// Action bar
|
|
26
25
|
cancelButtonLabel: 'Anulare',
|
|
27
26
|
clearButtonLabel: 'Ștergere',
|
|
@@ -55,23 +54,21 @@ const roROPickers = {
|
|
|
55
54
|
fieldYearPlaceholder: params => 'A'.repeat(params.digitAmount),
|
|
56
55
|
fieldMonthPlaceholder: params => params.contentType === 'letter' ? 'LLLL' : 'LL',
|
|
57
56
|
fieldDayPlaceholder: () => 'ZZ',
|
|
58
|
-
|
|
57
|
+
fieldWeekDayPlaceholder: params => params.contentType === 'letter' ? 'ZZZZ' : 'ZZ',
|
|
59
58
|
fieldHoursPlaceholder: () => 'hh',
|
|
60
59
|
fieldMinutesPlaceholder: () => 'mm',
|
|
61
60
|
fieldSecondsPlaceholder: () => 'ss',
|
|
62
|
-
fieldMeridiemPlaceholder: () => 'aa'
|
|
63
|
-
|
|
61
|
+
fieldMeridiemPlaceholder: () => 'aa',
|
|
64
62
|
// View names
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
|
|
72
|
-
|
|
73
|
-
|
|
63
|
+
year: 'An',
|
|
64
|
+
month: 'Luna',
|
|
65
|
+
day: 'Ziua',
|
|
66
|
+
weekDay: 'Ziua saptămânii',
|
|
67
|
+
hours: 'Ore',
|
|
68
|
+
minutes: 'Minute',
|
|
69
|
+
seconds: 'Secunde',
|
|
70
|
+
meridiem: 'Meridiem',
|
|
74
71
|
// Common
|
|
75
|
-
|
|
72
|
+
empty: 'Gol'
|
|
76
73
|
};
|
|
77
74
|
export const roRO = getPickersLocalization(roROPickers);
|
|
@@ -197,6 +197,9 @@ const MultiSectionDigitalClock = exports.MultiSectionDigitalClock = /*#__PURE__*
|
|
|
197
197
|
{
|
|
198
198
|
const valueWithMeridiem = (0, _timeUtils.convertValueToMeridiem)(rawValue, meridiemMode, ampm);
|
|
199
199
|
const dateWithNewHours = utils.setHours(valueOrReferenceDate, valueWithMeridiem);
|
|
200
|
+
if (utils.getHours(dateWithNewHours) !== valueWithMeridiem) {
|
|
201
|
+
return true;
|
|
202
|
+
}
|
|
200
203
|
const start = utils.setSeconds(utils.setMinutes(dateWithNewHours, 0), 0);
|
|
201
204
|
const end = utils.setSeconds(utils.setMinutes(dateWithNewHours, 59), 59);
|
|
202
205
|
return !containsValidTime({
|
package/node/TimeClock/Clock.js
CHANGED
|
@@ -188,6 +188,7 @@ function Clock(inProps) {
|
|
|
188
188
|
selectedId,
|
|
189
189
|
type,
|
|
190
190
|
viewValue,
|
|
191
|
+
viewRange: [minViewValue, maxViewValue],
|
|
191
192
|
disabled = false,
|
|
192
193
|
readOnly,
|
|
193
194
|
className
|
|
@@ -260,6 +261,8 @@ function Clock(inProps) {
|
|
|
260
261
|
listboxRef.current.focus();
|
|
261
262
|
}
|
|
262
263
|
}, [autoFocus]);
|
|
264
|
+
const clampValue = newValue => Math.max(minViewValue, Math.min(maxViewValue, newValue));
|
|
265
|
+
const circleValue = newValue => (newValue + (maxViewValue + 1)) % (maxViewValue + 1);
|
|
263
266
|
const handleKeyDown = event => {
|
|
264
267
|
// TODO: Why this early exit?
|
|
265
268
|
if (isMoving.current) {
|
|
@@ -268,27 +271,27 @@ function Clock(inProps) {
|
|
|
268
271
|
switch (event.key) {
|
|
269
272
|
case 'Home':
|
|
270
273
|
// reset both hours and minutes
|
|
271
|
-
handleValueChange(
|
|
274
|
+
handleValueChange(minViewValue, 'partial');
|
|
272
275
|
event.preventDefault();
|
|
273
276
|
break;
|
|
274
277
|
case 'End':
|
|
275
|
-
handleValueChange(
|
|
278
|
+
handleValueChange(maxViewValue, 'partial');
|
|
276
279
|
event.preventDefault();
|
|
277
280
|
break;
|
|
278
281
|
case 'ArrowUp':
|
|
279
|
-
handleValueChange(viewValue + keyboardControlStep, 'partial');
|
|
282
|
+
handleValueChange(circleValue(viewValue + keyboardControlStep), 'partial');
|
|
280
283
|
event.preventDefault();
|
|
281
284
|
break;
|
|
282
285
|
case 'ArrowDown':
|
|
283
|
-
handleValueChange(viewValue - keyboardControlStep, 'partial');
|
|
286
|
+
handleValueChange(circleValue(viewValue - keyboardControlStep), 'partial');
|
|
284
287
|
event.preventDefault();
|
|
285
288
|
break;
|
|
286
289
|
case 'PageUp':
|
|
287
|
-
handleValueChange(viewValue + 5, 'partial');
|
|
290
|
+
handleValueChange(clampValue(viewValue + 5), 'partial');
|
|
288
291
|
event.preventDefault();
|
|
289
292
|
break;
|
|
290
293
|
case 'PageDown':
|
|
291
|
-
handleValueChange(viewValue - 5, 'partial');
|
|
294
|
+
handleValueChange(clampValue(viewValue - 5), 'partial');
|
|
292
295
|
event.preventDefault();
|
|
293
296
|
break;
|
|
294
297
|
case 'Enter':
|
|
@@ -190,6 +190,9 @@ const TimeClock = exports.TimeClock = /*#__PURE__*/React.forwardRef(function Tim
|
|
|
190
190
|
{
|
|
191
191
|
const valueWithMeridiem = (0, _timeUtils.convertValueToMeridiem)(rawValue, meridiemMode, ampm);
|
|
192
192
|
const dateWithNewHours = utils.setHours(valueOrReferenceDate, valueWithMeridiem);
|
|
193
|
+
if (utils.getHours(dateWithNewHours) !== valueWithMeridiem) {
|
|
194
|
+
return true;
|
|
195
|
+
}
|
|
193
196
|
const start = utils.setSeconds(utils.setMinutes(dateWithNewHours, 0), 0);
|
|
194
197
|
const end = utils.setSeconds(utils.setMinutes(dateWithNewHours, 59), 59);
|
|
195
198
|
return !containsValidTime({
|
|
@@ -230,9 +233,20 @@ const TimeClock = exports.TimeClock = /*#__PURE__*/React.forwardRef(function Tim
|
|
|
230
233
|
const valueWithMeridiem = (0, _timeUtils.convertValueToMeridiem)(hourValue, meridiemMode, ampm);
|
|
231
234
|
setValueAndGoToNextView(utils.setHours(valueOrReferenceDate, valueWithMeridiem), isFinish, 'hours');
|
|
232
235
|
};
|
|
236
|
+
const viewValue = utils.getHours(valueOrReferenceDate);
|
|
237
|
+
let viewRange;
|
|
238
|
+
if (ampm) {
|
|
239
|
+
if (viewValue > 12) {
|
|
240
|
+
viewRange = [12, 23];
|
|
241
|
+
} else {
|
|
242
|
+
viewRange = [0, 11];
|
|
243
|
+
}
|
|
244
|
+
} else {
|
|
245
|
+
viewRange = [0, 23];
|
|
246
|
+
}
|
|
233
247
|
return {
|
|
234
248
|
onChange: handleHoursChange,
|
|
235
|
-
viewValue
|
|
249
|
+
viewValue,
|
|
236
250
|
children: (0, _ClockNumbers.getHourNumbers)({
|
|
237
251
|
value,
|
|
238
252
|
utils,
|
|
@@ -241,7 +255,8 @@ const TimeClock = exports.TimeClock = /*#__PURE__*/React.forwardRef(function Tim
|
|
|
241
255
|
getClockNumberText: translations.hoursClockNumberText,
|
|
242
256
|
isDisabled: hourValue => disabled || isTimeDisabled(hourValue, 'hours'),
|
|
243
257
|
selectedId
|
|
244
|
-
})
|
|
258
|
+
}),
|
|
259
|
+
viewRange
|
|
245
260
|
};
|
|
246
261
|
}
|
|
247
262
|
case 'minutes':
|
|
@@ -260,7 +275,8 @@ const TimeClock = exports.TimeClock = /*#__PURE__*/React.forwardRef(function Tim
|
|
|
260
275
|
getClockNumberText: translations.minutesClockNumberText,
|
|
261
276
|
isDisabled: minuteValue => disabled || isTimeDisabled(minuteValue, 'minutes'),
|
|
262
277
|
selectedId
|
|
263
|
-
})
|
|
278
|
+
}),
|
|
279
|
+
viewRange: [0, 59]
|
|
264
280
|
};
|
|
265
281
|
}
|
|
266
282
|
case 'seconds':
|
|
@@ -279,7 +295,8 @@ const TimeClock = exports.TimeClock = /*#__PURE__*/React.forwardRef(function Tim
|
|
|
279
295
|
getClockNumberText: translations.secondsClockNumberText,
|
|
280
296
|
isDisabled: secondValue => disabled || isTimeDisabled(secondValue, 'seconds'),
|
|
281
297
|
selectedId
|
|
282
|
-
})
|
|
298
|
+
}),
|
|
299
|
+
viewRange: [0, 59]
|
|
283
300
|
};
|
|
284
301
|
}
|
|
285
302
|
default:
|
package/node/index.js
CHANGED
package/node/locales/roRO.js
CHANGED
|
@@ -23,11 +23,10 @@ const roROPickers = {
|
|
|
23
23
|
// DateRange labels
|
|
24
24
|
start: 'Început',
|
|
25
25
|
end: 'Sfârșit',
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
26
|
+
startDate: 'Data de început',
|
|
27
|
+
startTime: 'Ora de început',
|
|
28
|
+
endDate: 'Data de sfârșit',
|
|
29
|
+
endTime: 'Ora de sfârșit',
|
|
31
30
|
// Action bar
|
|
32
31
|
cancelButtonLabel: 'Anulare',
|
|
33
32
|
clearButtonLabel: 'Ștergere',
|
|
@@ -61,23 +60,21 @@ const roROPickers = {
|
|
|
61
60
|
fieldYearPlaceholder: params => 'A'.repeat(params.digitAmount),
|
|
62
61
|
fieldMonthPlaceholder: params => params.contentType === 'letter' ? 'LLLL' : 'LL',
|
|
63
62
|
fieldDayPlaceholder: () => 'ZZ',
|
|
64
|
-
|
|
63
|
+
fieldWeekDayPlaceholder: params => params.contentType === 'letter' ? 'ZZZZ' : 'ZZ',
|
|
65
64
|
fieldHoursPlaceholder: () => 'hh',
|
|
66
65
|
fieldMinutesPlaceholder: () => 'mm',
|
|
67
66
|
fieldSecondsPlaceholder: () => 'ss',
|
|
68
|
-
fieldMeridiemPlaceholder: () => 'aa'
|
|
69
|
-
|
|
67
|
+
fieldMeridiemPlaceholder: () => 'aa',
|
|
70
68
|
// View names
|
|
71
|
-
|
|
72
|
-
|
|
73
|
-
|
|
74
|
-
|
|
75
|
-
|
|
76
|
-
|
|
77
|
-
|
|
78
|
-
|
|
79
|
-
|
|
69
|
+
year: 'An',
|
|
70
|
+
month: 'Luna',
|
|
71
|
+
day: 'Ziua',
|
|
72
|
+
weekDay: 'Ziua saptămânii',
|
|
73
|
+
hours: 'Ore',
|
|
74
|
+
minutes: 'Minute',
|
|
75
|
+
seconds: 'Secunde',
|
|
76
|
+
meridiem: 'Meridiem',
|
|
80
77
|
// Common
|
|
81
|
-
|
|
78
|
+
empty: 'Gol'
|
|
82
79
|
};
|
|
83
80
|
const roRO = exports.roRO = (0, _getPickersLocalization.getPickersLocalization)(roROPickers);
|