Skip to content

Commit

Permalink
[pickers] Add onTouchStart handler for TimeClock (#14305)
Browse files Browse the repository at this point in the history 
Co-authored-by: Arthur Balduini <arthurbalduini@Arthurs-MacBook-Pro.local>
  • Loading branch information
@arthurbalduini
arthurbalduini and Arthur Balduini authored Aug 29, 2024
1 parent f1ab734 commit 1be2f4c
Show file tree
Hide file tree
Showing 2 changed files with 59 additions and 14 deletions.
5 changes: 3 additions & 2 deletions packages/x-date-pickers/src/TimeClock/Clock.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -261,7 +261,7 @@ export function Clock<TDate extends PickerValidDate>(inProps: ClockProps<TDate>)
handleValueChange(newSelectedValue, isFinish);
};

const handleTouchMove = (event: React.TouchEvent) => {
const handleTouchSelection = (event: React.TouchEvent) => {
isMoving.current = true;
setTime(event, 'shallow');
};
Expand Down Expand Up @@ -347,7 +347,8 @@ export function Clock<TDate extends PickerValidDate>(inProps: ClockProps<TDate>)
<ClockClock className={classes.clock}>
<ClockSquareMask
data-mui-test="clock"
onTouchMove={handleTouchMove}
onTouchMove={handleTouchSelection}
onTouchStart={handleTouchSelection}
onTouchEnd={handleTouchEnd}
onMouseUp={handleMouseUp}
onMouseMove={handleMouseMove}
Expand Down
68 changes: 56 additions & 12 deletions packages/x-date-pickers/src/TimeClock/tests/TimeClock.test.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -196,7 +196,7 @@ describe('<TimeClock />', () => {
const onChangeMock = spy();
render(<TimeClock value={adapterToUse.date('2019-01-01')} onChange={onChangeMock} readOnly />);

fireTouchChangedEvent(screen.getByMuiTest('clock'), 'touchmove', selectEvent);
fireTouchChangedEvent(screen.getByMuiTest('clock'), 'touchstart', selectEvent);
expect(onChangeMock.callCount).to.equal(0);

// hours are not disabled
Expand Down Expand Up @@ -224,7 +224,7 @@ describe('<TimeClock />', () => {
const onChangeMock = spy();
render(<TimeClock value={adapterToUse.date('2019-01-01')} onChange={onChangeMock} disabled />);

fireTouchChangedEvent(screen.getByMuiTest('clock'), 'touchmove', selectEvent);
fireTouchChangedEvent(screen.getByMuiTest('clock'), 'touchstart', selectEvent);
expect(onChangeMock.callCount).to.equal(0);

// hours are disabled
Expand Down Expand Up @@ -252,7 +252,7 @@ describe('<TimeClock />', () => {
},
],
},
'20:--': {
'19:--': {
changedTouches: [
{
clientX: 66,
Expand Down Expand Up @@ -292,7 +292,7 @@ describe('<TimeClock />', () => {
/>,
);

fireTouchChangedEvent(screen.getByMuiTest('clock'), 'touchmove', clockTouchEvent['13:--']);
fireTouchChangedEvent(screen.getByMuiTest('clock'), 'touchstart', clockTouchEvent['13:--']);

expect(handleChange.callCount).to.equal(1);
const [date, selectionState] = handleChange.firstCall.args;
Expand All @@ -316,7 +316,7 @@ describe('<TimeClock />', () => {
/>,
);

fireTouchChangedEvent(screen.getByMuiTest('clock'), 'touchmove', clockTouchEvent['--:20']);
fireTouchChangedEvent(screen.getByMuiTest('clock'), 'touchstart', clockTouchEvent['--:20']);

expect(handleChange.callCount).to.equal(1);
const [date, selectionState] = handleChange.firstCall.args;
Expand All @@ -338,7 +338,7 @@ describe('<TimeClock />', () => {
/>,
);

fireTouchChangedEvent(screen.getByMuiTest('clock'), 'touchmove', clockTouchEvent['--:20']);
fireTouchChangedEvent(screen.getByMuiTest('clock'), 'touchstart', clockTouchEvent['--:20']);

expect(handleChange.callCount).to.equal(0);
});
Expand All @@ -356,7 +356,7 @@ describe('<TimeClock />', () => {
/>,
);

fireTouchChangedEvent(screen.getByMuiTest('clock'), 'touchmove', clockTouchEvent['--:20']);
fireTouchChangedEvent(screen.getByMuiTest('clock'), 'touchstart', clockTouchEvent['--:20']);

expect(handleChange.callCount).to.equal(0);
});
Expand All @@ -374,7 +374,7 @@ describe('<TimeClock />', () => {
/>,
);

fireTouchChangedEvent(screen.getByMuiTest('clock'), 'touchmove', clockTouchEvent['20:--']);
fireTouchChangedEvent(screen.getByMuiTest('clock'), 'touchstart', clockTouchEvent['19:--']);

expect(handleChange.callCount).to.equal(0);
});
Expand All @@ -392,7 +392,7 @@ describe('<TimeClock />', () => {
/>,
);

fireTouchChangedEvent(screen.getByMuiTest('clock'), 'touchmove', clockTouchEvent['20:--']);
fireTouchChangedEvent(screen.getByMuiTest('clock'), 'touchstart', clockTouchEvent['19:--']);

expect(handleChange.callCount).to.equal(0);
});
Expand Down Expand Up @@ -427,7 +427,7 @@ describe('<TimeClock />', () => {
/>,
);

fireTouchChangedEvent(screen.getByMuiTest('clock'), 'touchmove', clockTouchEvent['--:10']);
fireTouchChangedEvent(screen.getByMuiTest('clock'), 'touchstart', clockTouchEvent['--:10']);

expect(handleChange.callCount).to.equal(1);
const [date, selectionState] = handleChange.firstCall.args;
Expand All @@ -449,7 +449,7 @@ describe('<TimeClock />', () => {
/>,
);

fireTouchChangedEvent(screen.getByMuiTest('clock'), 'touchmove', clockTouchEvent['--:20']);
fireTouchChangedEvent(screen.getByMuiTest('clock'), 'touchstart', clockTouchEvent['--:20']);

expect(handleChange.callCount).to.equal(0);
});
Expand All @@ -467,10 +467,54 @@ describe('<TimeClock />', () => {
/>,
);

fireTouchChangedEvent(screen.getByMuiTest('clock'), 'touchmove', clockTouchEvent['--:20']);
fireTouchChangedEvent(screen.getByMuiTest('clock'), 'touchstart', clockTouchEvent['--:20']);

expect(handleChange.callCount).to.equal(0);
});

it('should select enabled hour on touch and drag', () => {
const handleChange = spy();
const handleViewChange = spy();
render(
<TimeClock
ampm={false}
value={adapterToUse.date('2018-01-01')}
onChange={handleChange}
onViewChange={handleViewChange}
/>,
);

fireTouchChangedEvent(screen.getByMuiTest('clock'), 'touchstart', clockTouchEvent['13:--']);
fireTouchChangedEvent(screen.getByMuiTest('clock'), 'touchmove', clockTouchEvent['19:--']);

expect(handleChange.callCount).to.equal(2);
const [date, selectionState] = handleChange.lastCall.args;
expect(date).toEqualDateTime(new Date(2018, 0, 1, 19));
expect(selectionState).to.equal('shallow');
expect(handleViewChange.callCount).to.equal(0);
});

it('should select enabled hour and move to next view on touch end', () => {
const handleChange = spy();
const handleViewChange = spy();
render(
<TimeClock
ampm={false}
value={adapterToUse.date('2018-01-01')}
onChange={handleChange}
onViewChange={handleViewChange}
/>,
);

fireTouchChangedEvent(screen.getByMuiTest('clock'), 'touchstart', clockTouchEvent['13:--']);
fireTouchChangedEvent(screen.getByMuiTest('clock'), 'touchend', clockTouchEvent['13:--']);

expect(handleChange.callCount).to.equal(2);
const [date, selectionState] = handleChange.lastCall.args;
expect(date).toEqualDateTime(new Date(2018, 0, 1, 13));
expect(selectionState).to.equal('partial');
expect(handleViewChange.callCount).to.equal(1);
});
});

describe('default value', () => {
Expand Down

0 comments on commit 1be2f4c

Please sign in to comment.