From f3cdb28818be5dc989ffa7e8d8fd7dbe743bfa28 Mon Sep 17 00:00:00 2001 From: Greg Thompson Date: Tue, 26 Jan 2021 15:15:31 -0600 Subject: [PATCH] [EuiOutsideClickDetector] Accept standard event types (#4434) * accept standard event type * update test files * clean up * CL --- CHANGELOG.md | 1 + src/components/focus_trap/focus_trap.test.tsx | 10 +++--- .../outside_click_detector.test.tsx | 8 ++--- .../outside_click_detector.ts | 31 ++++++++++--------- 4 files changed, 27 insertions(+), 23 deletions(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index 641a2cdd293..6267ee9d34c 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -1,6 +1,7 @@ ## [`master`](https://github.com/elastic/eui/tree/master) - Added `getDefaultEuiMarkdownProcessingPlugins` method for better control over `EuiMarkdownEditor`'s toolbar UI ([#4383](https://github.com/elastic/eui/pull/4383)) +- Changed `EuiOutsideClickDetector` events to be standard event types ([#4434](https://github.com/elastic/eui/pull/4434)) **Bug fixes** diff --git a/src/components/focus_trap/focus_trap.test.tsx b/src/components/focus_trap/focus_trap.test.tsx index f1f2b1d9520..b9ab8c54f74 100644 --- a/src/components/focus_trap/focus_trap.test.tsx +++ b/src/components/focus_trap/focus_trap.test.tsx @@ -125,18 +125,18 @@ describe('EuiFocusTrap', () => { // but that's where the click detector listener is, // pass the top-level mounted component's click event on to document const triggerDocumentMouseDown: EventHandler = ( - e: React.MouseEvent + e: React.MouseEvent ) => { const event = new Event('mousedown') as EuiEvent; - event.euiGeneratedBy = e.nativeEvent.euiGeneratedBy; + event.euiGeneratedBy = ((e.nativeEvent as unknown) as EuiEvent).euiGeneratedBy; document.dispatchEvent(event); }; const triggerDocumentMouseUp: EventHandler = ( - e: React.MouseEvent + e: React.MouseEvent ) => { - const event = new Event('mouseup') as EuiEvent; - event.euiGeneratedBy = e.nativeEvent.euiGeneratedBy; + const event = new Event('mousedown') as EuiEvent; + event.euiGeneratedBy = ((e.nativeEvent as unknown) as EuiEvent).euiGeneratedBy; document.dispatchEvent(event); }; diff --git a/src/components/outside_click_detector/outside_click_detector.test.tsx b/src/components/outside_click_detector/outside_click_detector.test.tsx index 5c8d0f3668f..d400b2e04c2 100644 --- a/src/components/outside_click_detector/outside_click_detector.test.tsx +++ b/src/components/outside_click_detector/outside_click_detector.test.tsx @@ -47,18 +47,18 @@ describe('EuiOutsideClickDetector', () => { // but that's where the click detector listener is, // pass the top-level mounted component's click event on to document const triggerDocumentMouseDown: EventHandler = ( - e: ReactMouseEvent + e: ReactMouseEvent ) => { const event = new Event('mousedown') as EuiEvent; - event.euiGeneratedBy = e.nativeEvent.euiGeneratedBy; + event.euiGeneratedBy = ((e.nativeEvent as unknown) as EuiEvent).euiGeneratedBy; document.dispatchEvent(event); }; const triggerDocumentMouseUp: EventHandler = ( - e: ReactMouseEvent + e: ReactMouseEvent ) => { const event = new Event('mouseup') as EuiEvent; - event.euiGeneratedBy = e.nativeEvent.euiGeneratedBy; + event.euiGeneratedBy = ((e.nativeEvent as unknown) as EuiEvent).euiGeneratedBy; document.dispatchEvent(event); }; diff --git a/src/components/outside_click_detector/outside_click_detector.ts b/src/components/outside_click_detector/outside_click_detector.ts index 4e8a224c1d3..aec896c85de 100644 --- a/src/components/outside_click_detector/outside_click_detector.ts +++ b/src/components/outside_click_detector/outside_click_detector.ts @@ -36,12 +36,12 @@ interface Props { * ReactNode to render as this component's content */ children: ReactElement; - onOutsideClick: (event: EuiEvent) => void; + onOutsideClick: (event: Event) => void; isDisabled?: boolean; - onMouseDown?: (event: ReactMouseEvent) => void; - onMouseUp?: (event: ReactMouseEvent) => void; - onTouchStart?: (event: ReactMouseEvent) => void; - onTouchEnd?: (event: ReactMouseEvent) => void; + onMouseDown?: (event: ReactMouseEvent) => void; + onMouseUp?: (event: ReactMouseEvent) => void; + onTouchStart?: (event: ReactMouseEvent) => void; + onTouchEnd?: (event: ReactMouseEvent) => void; } export class EuiOutsideClickDetector extends Component { @@ -84,7 +84,7 @@ export class EuiOutsideClickDetector extends Component { this.capturedDownIds = []; } - onClickOutside: EventHandler = (event: EuiEvent) => { + onClickOutside: EventHandler = (e: Event) => { const { isDisabled, onOutsideClick } = this.props; if (isDisabled) { @@ -92,6 +92,8 @@ export class EuiOutsideClickDetector extends Component { return; } + const event = (e as unknown) as EuiEvent; + if ( (event.euiGeneratedBy && event.euiGeneratedBy.includes(this.id)) || this.capturedDownIds.includes(this.id) @@ -115,28 +117,29 @@ export class EuiOutsideClickDetector extends Component { } onChildClick = ( - event: ReactMouseEvent, - cb: (event: ReactMouseEvent) => void + event: ReactMouseEvent, + cb: (event: ReactMouseEvent) => void ) => { // to support nested click detectors, build an array - // of detector ids that have been encountered + // of detector ids that have been encountered; if (event.nativeEvent.hasOwnProperty('euiGeneratedBy')) { - event.nativeEvent.euiGeneratedBy.push(this.id); + ((event.nativeEvent as unknown) as EuiEvent).euiGeneratedBy.push(this.id); } else { - event.nativeEvent.euiGeneratedBy = [this.id]; + ((event.nativeEvent as unknown) as EuiEvent).euiGeneratedBy = [this.id]; } if (cb) cb(event); }; - onChildMouseDown = (event: ReactMouseEvent) => { + onChildMouseDown = (event: ReactMouseEvent) => { this.onChildClick(event, (e) => { - this.capturedDownIds = e.nativeEvent.euiGeneratedBy; + const nativeEvent = (e.nativeEvent as unknown) as EuiEvent; + this.capturedDownIds = nativeEvent.euiGeneratedBy; if (this.props.onMouseDown) this.props.onMouseDown(e); if (this.props.onTouchStart) this.props.onTouchStart(e); }); }; - onChildMouseUp = (event: ReactMouseEvent) => { + onChildMouseUp = (event: ReactMouseEvent) => { this.onChildClick(event, (e) => { if (this.props.onMouseUp) this.props.onMouseUp(e); if (this.props.onTouchEnd) this.props.onTouchEnd(e);