Skip to content

Commit

Permalink
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Merge branch 'master' into ownerState-input
Browse files Browse the repository at this point in the history
flaviendelangle committed Dec 17, 2024
2 parents b83b47c + 05bc5b7 commit 8274dbf
Showing 4 changed files with 47 additions and 10 deletions.
Original file line number Diff line number Diff line change
@@ -244,6 +244,11 @@ export const MultiSectionDigitalClock = React.forwardRef(function MultiSectionDi
case 'hours': {
const valueWithMeridiem = convertValueToMeridiem(rawValue, meridiemMode, ampm);
const dateWithNewHours = utils.setHours(valueOrReferenceDate, valueWithMeridiem);

if (utils.getHours(dateWithNewHours) !== valueWithMeridiem) {
return true;
}

const start = utils.setSeconds(utils.setMinutes(dateWithNewHours, 0), 0);
const end = utils.setSeconds(utils.setMinutes(dateWithNewHours, 59), 59);

21 changes: 15 additions & 6 deletions packages/x-date-pickers/src/TimeClock/Clock.tsx
Original file line number Diff line number Diff line change
@@ -42,6 +42,10 @@ export interface ClockProps extends ReturnType<typeof useMeridiemMode>, FormProp
* The current full date value.
*/
value: PickerValidDate | null;
/**
* Minimum and maximum value of the clock.
*/
viewRange: [number, number];
className?: string;
classes?: Partial<ClockClasses>;
}
@@ -225,6 +229,7 @@ export function Clock(inProps: ClockProps) {
selectedId,
type,
viewValue,
viewRange: [minViewValue, maxViewValue],
disabled = false,
readOnly,
className,
@@ -316,6 +321,10 @@ export function Clock(inProps: ClockProps) {
}
}, [autoFocus]);

const clampValue = (newValue: number) => Math.max(minViewValue, Math.min(maxViewValue, newValue));

const circleValue = (newValue: number) => (newValue + (maxViewValue + 1)) % (maxViewValue + 1);

const handleKeyDown = (event: React.KeyboardEvent) => {
// TODO: Why this early exit?
if (isMoving.current) {
@@ -325,27 +334,27 @@ export function Clock(inProps: ClockProps) {
switch (event.key) {
case 'Home':
// reset both hours and minutes
handleValueChange(0, 'partial');
handleValueChange(minViewValue, 'partial');
event.preventDefault();
break;
case 'End':
handleValueChange(type === 'minutes' ? 59 : 23, 'partial');
handleValueChange(maxViewValue, 'partial');
event.preventDefault();
break;
case 'ArrowUp':
handleValueChange(viewValue + keyboardControlStep, 'partial');
handleValueChange(circleValue(viewValue + keyboardControlStep), 'partial');
event.preventDefault();
break;
case 'ArrowDown':
handleValueChange(viewValue - keyboardControlStep, 'partial');
handleValueChange(circleValue(viewValue - keyboardControlStep), 'partial');
event.preventDefault();
break;
case 'PageUp':
handleValueChange(viewValue + 5, 'partial');
handleValueChange(clampValue(viewValue + 5), 'partial');
event.preventDefault();
break;
case 'PageDown':
handleValueChange(viewValue - 5, 'partial');
handleValueChange(clampValue(viewValue - 5), 'partial');
event.preventDefault();
break;
case 'Enter':
27 changes: 25 additions & 2 deletions packages/x-date-pickers/src/TimeClock/TimeClock.tsx
Original file line number Diff line number Diff line change
@@ -212,6 +212,11 @@ export const TimeClock = React.forwardRef(function TimeClock(
case 'hours': {
const valueWithMeridiem = convertValueToMeridiem(rawValue, meridiemMode, ampm);
const dateWithNewHours = utils.setHours(valueOrReferenceDate, valueWithMeridiem);

if (utils.getHours(dateWithNewHours) !== valueWithMeridiem) {
return true;
}

const start = utils.setSeconds(utils.setMinutes(dateWithNewHours, 0), 0);
const end = utils.setSeconds(utils.setMinutes(dateWithNewHours, 59), 59);

@@ -255,7 +260,9 @@ export const TimeClock = React.forwardRef(function TimeClock(
],
);

const viewProps = React.useMemo<Pick<ClockProps, 'onChange' | 'viewValue' | 'children'>>(() => {
const viewProps = React.useMemo<
Pick<ClockProps, 'onChange' | 'viewValue' | 'viewRange' | 'children'>
>(() => {
switch (view) {
case 'hours': {
const handleHoursChange = (hourValue: number, isFinish?: PickerSelectionState) => {
@@ -267,9 +274,22 @@ export const TimeClock = React.forwardRef(function TimeClock(
);
};

const viewValue = utils.getHours(valueOrReferenceDate);

let viewRange: [number, number];
if (ampm) {
if (viewValue > 12) {
viewRange = [12, 23];
} else {
viewRange = [0, 11];
}
} else {
viewRange = [0, 23];
}

return {
onChange: handleHoursChange,
viewValue: utils.getHours(valueOrReferenceDate),
viewValue,
children: getHourNumbers({
value,
utils,
@@ -279,6 +299,7 @@ export const TimeClock = React.forwardRef(function TimeClock(
isDisabled: (hourValue) => disabled || isTimeDisabled(hourValue, 'hours'),
selectedId,
}),
viewRange,
};
}

@@ -303,6 +324,7 @@ export const TimeClock = React.forwardRef(function TimeClock(
isDisabled: (minuteValue) => disabled || isTimeDisabled(minuteValue, 'minutes'),
selectedId,
}),
viewRange: [0, 59],
};
}

@@ -327,6 +349,7 @@ export const TimeClock = React.forwardRef(function TimeClock(
isDisabled: (secondValue) => disabled || isTimeDisabled(secondValue, 'seconds'),
selectedId,
}),
viewRange: [0, 59],
};
}

Original file line number Diff line number Diff line change
@@ -154,7 +154,7 @@ describe('<TimeClock />', () => {

expect(handleChange.callCount).to.equal(1);
const [newDate, reason] = handleChange.firstCall.args;
expect(adapterToUse.getHours(newDate)).to.equal(3);
expect(adapterToUse.getHours(newDate)).to.equal(23);
expect(adapterToUse.getMinutes(newDate)).to.equal(20);
expect(reason).to.equal('partial');
});
@@ -174,7 +174,7 @@ describe('<TimeClock />', () => {

expect(handleChange.callCount).to.equal(1);
const [newDate, reason] = handleChange.firstCall.args;
expect(adapterToUse.getHours(newDate)).to.equal(21);
expect(adapterToUse.getHours(newDate)).to.equal(0);
expect(adapterToUse.getMinutes(newDate)).to.equal(20);
expect(reason).to.equal('partial');
});

0 comments on commit 8274dbf

Please sign in to comment.