From 0a0b2764489958d1b69d0740469a191903d9ab77 Mon Sep 17 00:00:00 2001 From: jsweet-dev Date: Tue, 23 May 2023 02:21:23 -0700 Subject: [PATCH 01/12] Saving work in progress... --- src/components/Calendar/index.js | 5 ++- src/components/DateRange/index.js | 2 ++ src/components/DayCell/index.js | 58 ++++++++++++++++++++++++++++--- 3 files changed, 60 insertions(+), 5 deletions(-) diff --git a/src/components/Calendar/index.js b/src/components/Calendar/index.js index 73b9faa48..59a221d26 100644 --- a/src/components/Calendar/index.js +++ b/src/components/Calendar/index.js @@ -335,6 +335,7 @@ class Calendar extends PureComponent { ); }; onDragSelectionStart = date => { + console.log(`onDragSelectionStart: ${date}`); const { onChange, dragSelectionEnabled } = this.props; if (dragSelectionEnabled) { @@ -351,6 +352,7 @@ class Calendar extends PureComponent { }; onDragSelectionEnd = date => { + console.log(`onDragSelectionEnd: ${date}`); const { updateRange, displayMode, onChange, dragSelectionEnabled } = this.props; if (!dragSelectionEnabled) return; @@ -372,6 +374,7 @@ class Calendar extends PureComponent { } }; onDragSelectionMove = date => { + console.log(`onDragSelectionMove: ${date}`); const { drag } = this.state; if (!drag.status || !this.props.dragSelectionEnabled) return; this.setState({ @@ -493,7 +496,7 @@ class Calendar extends PureComponent { isVertical ? this.styles.monthsVertical : this.styles.monthsHorizontal )}> {new Array(this.props.months).fill(null).map((_, i) => { - let monthStep = addMonths(this.state.focusedDate, i);; + let monthStep = addMonths(this.state.focusedDate, i); if (this.props.calendarFocus === 'backwards') { monthStep = subMonths(this.state.focusedDate, this.props.months - 1 - i); } diff --git a/src/components/DateRange/index.js b/src/components/DateRange/index.js index 3c963ecd2..a508ed596 100644 --- a/src/components/DateRange/index.js +++ b/src/components/DateRange/index.js @@ -17,6 +17,8 @@ class DateRange extends Component { this.styles = generateStyles([coreStyles, props.classNames]); } calcNewSelection = (value, isSingleValue = true) => { + console.log(`calcNewSelection: ${JSON.stringify(value)}`); + console.log(`isSingleValue: ${isSingleValue}`); const focusedRange = this.props.focusedRange || this.state.focusedRange; const { ranges, diff --git a/src/components/DayCell/index.js b/src/components/DayCell/index.js index 26f12539e..317cfcb9c 100644 --- a/src/components/DayCell/index.js +++ b/src/components/DayCell/index.js @@ -11,6 +11,7 @@ class DayCell extends Component { this.state = { hover: false, active: false, + targetElement: null, }; } @@ -29,26 +30,72 @@ class DayCell extends Component { return; } + let targetElement = event.type.startsWith('touchmove') + ? document.elementsFromPoint(event.touches[0].clientX, event.touches[0].clientY) + : null; + + // console.log(`targetElements: ${targetElement.length}`); switch (event.type) { + case 'touchmove': + console.log(`touchmove event on ${day}`); + // console.log(`Event: ${JSON.stringify(event)}`); + if (targetElement && targetElement[2].className === 'rdrDay') { + if (targetElement[2] !== this.state.targetElement) { + console.log(`New targetElement, dispatching mouseenter: ${targetElement[2].day}`); + console.log(`targetElement Day: ${targetElement[0].innerText}`); + const enterEvent = new MouseEvent('mouseover'); + const focusEvent = new FocusEvent('focus'); + + targetElement[2].dispatchEvent(enterEvent); + targetElement[2].dispatchEvent(focusEvent); + + const leaveEvent = new MouseEvent('mouseleave'); + if (this.state.targetElement) { + console.log(`dispatching mouseleave: ${this.state.targetElement}`); + this.state.targetElement.dispatchEvent(leaveEvent); + } + this.setState({ targetElement: targetElement[2] }); + } + } + break; + case 'touchend': + { + console.log(`touchend event on ${day}`); + const upEvent = new MouseEvent('mouseup', { + view: window, + bubbles: true, + cancelable: true, + }); + this.state.targetElement.dispatchEvent(upEvent); + this.setState({ targetElement: null }); + } + break; case 'mouseenter': + case 'mouseover': + console.log(`mouseenter event on ${day}`); onMouseEnter(day); onPreviewChange(day); stateChanges.hover = true; break; case 'blur': case 'mouseleave': + console.log(`mouseleave event on ${day}`); stateChanges.hover = false; break; case 'mousedown': + case 'touchstart': + console.log(`mousedown event on ${day}`); stateChanges.active = true; onMouseDown(day); break; case 'mouseup': + console.log(`mouseup event on ${day}`); event.stopPropagation(); stateChanges.active = false; onMouseUp(day); break; case 'focus': + console.log(`focus event on ${day}`); onPreviewChange(day); break; } @@ -156,7 +203,11 @@ class DayCell extends Component { ); From 3115ccbd59b30ca5e95bd2041bf18af55672a9ea Mon Sep 17 00:00:00 2001 From: jsweet-dev Date: Wed, 24 May 2023 23:56:36 -0700 Subject: [PATCH 02/12] Saving work in progress... --- src/components/Calendar/index.js | 1 + src/components/DayCell/index.js | 12 ------------ 2 files changed, 1 insertion(+), 12 deletions(-) diff --git a/src/components/Calendar/index.js b/src/components/Calendar/index.js index 59a221d26..399e4d91e 100644 --- a/src/components/Calendar/index.js +++ b/src/components/Calendar/index.js @@ -427,6 +427,7 @@ class Calendar extends PureComponent {
this.setState({ drag: { status: false, range: {} } })} + onTouchEnd={() => this.setState({ drag: { status: false, range: {} } })} onMouseLeave={() => { this.setState({ drag: { status: false, range: {} } }); }}> diff --git a/src/components/DayCell/index.js b/src/components/DayCell/index.js index 317cfcb9c..e550b895e 100644 --- a/src/components/DayCell/index.js +++ b/src/components/DayCell/index.js @@ -41,19 +41,7 @@ class DayCell extends Component { // console.log(`Event: ${JSON.stringify(event)}`); if (targetElement && targetElement[2].className === 'rdrDay') { if (targetElement[2] !== this.state.targetElement) { - console.log(`New targetElement, dispatching mouseenter: ${targetElement[2].day}`); console.log(`targetElement Day: ${targetElement[0].innerText}`); - const enterEvent = new MouseEvent('mouseover'); - const focusEvent = new FocusEvent('focus'); - - targetElement[2].dispatchEvent(enterEvent); - targetElement[2].dispatchEvent(focusEvent); - - const leaveEvent = new MouseEvent('mouseleave'); - if (this.state.targetElement) { - console.log(`dispatching mouseleave: ${this.state.targetElement}`); - this.state.targetElement.dispatchEvent(leaveEvent); - } this.setState({ targetElement: targetElement[2] }); } } From 2c2c2464f4c35ad861c2b13fe3c4bd698dadd675 Mon Sep 17 00:00:00 2001 From: jsweet-dev Date: Thu, 25 May 2023 00:16:03 -0700 Subject: [PATCH 03/12] Touch is working for touch and drag selection of date range on DateRangePicker, however, this is still a WIP and needs cleanup (removing DOM manipulation in favor of lifting up the state) and testing to ensure that this isn't breaking anything in other use cases --- src/components/DayCell/index.js | 6 ++++-- 1 file changed, 4 insertions(+), 2 deletions(-) diff --git a/src/components/DayCell/index.js b/src/components/DayCell/index.js index e550b895e..e0165f9d8 100644 --- a/src/components/DayCell/index.js +++ b/src/components/DayCell/index.js @@ -34,14 +34,15 @@ class DayCell extends Component { ? document.elementsFromPoint(event.touches[0].clientX, event.touches[0].clientY) : null; - // console.log(`targetElements: ${targetElement.length}`); switch (event.type) { case 'touchmove': console.log(`touchmove event on ${day}`); - // console.log(`Event: ${JSON.stringify(event)}`); if (targetElement && targetElement[2].className === 'rdrDay') { if (targetElement[2] !== this.state.targetElement) { console.log(`targetElement Day: ${targetElement[0].innerText}`); + const targetDayString = targetElement[2].getAttribute('data-day'); + onMouseEnter(new Date(targetDayString)); + onPreviewChange(new Date(targetDayString)); this.setState({ targetElement: targetElement[2] }); } } @@ -190,6 +191,7 @@ class DayCell extends Component { return (