From 5f8556b1b2c4512c18fcda25ebdcde40f0fd2caf Mon Sep 17 00:00:00 2001 From: Jeremiah Hoyet Date: Tue, 3 Jan 2023 10:15:12 -0500 Subject: [PATCH] Remove the need to bind member methods in the connectedCallback (#1081) * Remove the need to bind member methods in the connectedCallback * Remove console.log --- src/components/animation/animation.ts | 10 +++--- src/components/dialog/dialog.ts | 5 ++- src/components/drawer/drawer.ts | 5 ++- src/components/dropdown/dropdown.ts | 25 ++++++--------- .../mutation-observer/mutation-observer.ts | 5 ++- src/components/tooltip/tooltip.ts | 32 +++++++------------ src/internal/form.ts | 16 +++++----- 7 files changed, 40 insertions(+), 58 deletions(-) diff --git a/src/components/animation/animation.ts b/src/components/animation/animation.ts index 133118605..bd95849d6 100644 --- a/src/components/animation/animation.ts +++ b/src/components/animation/animation.ts @@ -91,8 +91,6 @@ export default class SlAnimation extends ShoelaceElement { connectedCallback() { super.connectedCallback(); this.createAnimation(); - this.handleAnimationCancel = this.handleAnimationCancel.bind(this); - this.handleAnimationFinish = this.handleAnimationFinish.bind(this); } disconnectedCallback() { @@ -118,17 +116,17 @@ export default class SlAnimation extends ShoelaceElement { this.createAnimation(); } - handleAnimationFinish() { + private handleAnimationFinish = () => { this.play = false; this.hasStarted = false; this.emit('sl-finish'); - } + }; - handleAnimationCancel() { + private handleAnimationCancel = () => { this.play = false; this.hasStarted = false; this.emit('sl-cancel'); - } + }; @watch('play') handlePlayChange() { diff --git a/src/components/dialog/dialog.ts b/src/components/dialog/dialog.ts index 23fd1156c..20d314ebc 100644 --- a/src/components/dialog/dialog.ts +++ b/src/components/dialog/dialog.ts @@ -93,7 +93,6 @@ export default class SlDialog extends ShoelaceElement { connectedCallback() { super.connectedCallback(); - this.handleDocumentKeyDown = this.handleDocumentKeyDown.bind(this); this.modal = new Modal(this); } @@ -155,12 +154,12 @@ export default class SlDialog extends ShoelaceElement { document.removeEventListener('keydown', this.handleDocumentKeyDown); } - handleDocumentKeyDown(event: KeyboardEvent) { + private handleDocumentKeyDown = (event: KeyboardEvent) => { if (this.open && event.key === 'Escape') { event.stopPropagation(); this.requestClose('keyboard'); } - } + }; @watch('open', { waitUntilFirstUpdate: true }) async handleOpenChange() { diff --git a/src/components/drawer/drawer.ts b/src/components/drawer/drawer.ts index e592382d5..b9f26e648 100644 --- a/src/components/drawer/drawer.ts +++ b/src/components/drawer/drawer.ts @@ -110,7 +110,6 @@ export default class SlDrawer extends ShoelaceElement { connectedCallback() { super.connectedCallback(); - this.handleDocumentKeyDown = this.handleDocumentKeyDown.bind(this); this.modal = new Modal(this); } @@ -175,12 +174,12 @@ export default class SlDrawer extends ShoelaceElement { document.removeEventListener('keydown', this.handleDocumentKeyDown); } - handleDocumentKeyDown(event: KeyboardEvent) { + private handleDocumentKeyDown = (event: KeyboardEvent) => { if (this.open && !this.contained && event.key === 'Escape') { event.stopPropagation(); this.requestClose('keyboard'); } - } + }; @watch('open', { waitUntilFirstUpdate: true }) async handleOpenChange() { diff --git a/src/components/dropdown/dropdown.ts b/src/components/dropdown/dropdown.ts index f97ade109..791243ad8 100644 --- a/src/components/dropdown/dropdown.ts +++ b/src/components/dropdown/dropdown.ts @@ -104,11 +104,6 @@ export default class SlDropdown extends ShoelaceElement { connectedCallback() { super.connectedCallback(); - this.handleMenuItemActivate = this.handleMenuItemActivate.bind(this); - this.handlePanelSelect = this.handlePanelSelect.bind(this); - this.handleKeyDown = this.handleKeyDown.bind(this); - this.handleDocumentKeyDown = this.handleDocumentKeyDown.bind(this); - this.handleDocumentMouseDown = this.handleDocumentMouseDown.bind(this); if (!this.containingElement) { this.containingElement = this; @@ -144,7 +139,7 @@ export default class SlDropdown extends ShoelaceElement { | undefined; } - handleKeyDown(event: KeyboardEvent) { + private handleKeyDown = (event: KeyboardEvent) => { // Close when escape is pressed inside an open dropdown. We need to listen on the panel itself and stop propagation // in case any ancestors are also listening for this key. if (this.open && event.key === 'Escape') { @@ -152,9 +147,9 @@ export default class SlDropdown extends ShoelaceElement { this.hide(); this.focusOnTrigger(); } - } + }; - handleDocumentKeyDown(event: KeyboardEvent) { + private handleDocumentKeyDown = (event: KeyboardEvent) => { // Handle tabbing if (event.key === 'Tab') { // Tabbing within an open menu should close the dropdown and refocus the trigger @@ -183,22 +178,22 @@ export default class SlDropdown extends ShoelaceElement { } }); } - } + }; - handleDocumentMouseDown(event: MouseEvent) { + private handleDocumentMouseDown = (event: MouseEvent) => { // Close when clicking outside of the containing element const path = event.composedPath(); if (this.containingElement && !path.includes(this.containingElement)) { this.hide(); } - } + }; - handleMenuItemActivate(event: CustomEvent) { + private handleMenuItemActivate = (event: CustomEvent) => { const item = event.target as SlMenuItem; scrollIntoView(item, this.panel); - } + }; - handlePanelSelect(event: CustomEvent) { + private handlePanelSelect = (event: CustomEvent) => { const target = event.target as HTMLElement; // Hide the dropdown when a menu item is selected @@ -206,7 +201,7 @@ export default class SlDropdown extends ShoelaceElement { this.hide(); this.focusOnTrigger(); } - } + }; handleTriggerClick() { if (this.open) { diff --git a/src/components/mutation-observer/mutation-observer.ts b/src/components/mutation-observer/mutation-observer.ts index 922d5bb9a..aaad6cdfb 100644 --- a/src/components/mutation-observer/mutation-observer.ts +++ b/src/components/mutation-observer/mutation-observer.ts @@ -44,7 +44,6 @@ export default class SlMutationObserver extends ShoelaceElement { connectedCallback() { super.connectedCallback(); - this.handleMutation = this.handleMutation.bind(this); this.mutationObserver = new MutationObserver(this.handleMutation); @@ -76,11 +75,11 @@ export default class SlMutationObserver extends ShoelaceElement { this.startObserver(); } - handleMutation(mutationList: MutationRecord[]) { + private handleMutation = (mutationList: MutationRecord[]) => { this.emit('sl-mutation', { detail: { mutationList } }); - } + }; startObserver() { const observeAttributes = typeof this.attr === 'string' && this.attr.length > 0; diff --git a/src/components/tooltip/tooltip.ts b/src/components/tooltip/tooltip.ts index 55ad098fc..55748ce03 100644 --- a/src/components/tooltip/tooltip.ts +++ b/src/components/tooltip/tooltip.ts @@ -99,14 +99,6 @@ export default class SlTooltip extends ShoelaceElement { @property({ type: Boolean }) hoist = false; connectedCallback() { - super.connectedCallback(); - this.handleBlur = this.handleBlur.bind(this); - this.handleClick = this.handleClick.bind(this); - this.handleFocus = this.handleFocus.bind(this); - this.handleKeyDown = this.handleKeyDown.bind(this); - this.handleMouseOver = this.handleMouseOver.bind(this); - this.handleMouseOut = this.handleMouseOut.bind(this); - this.updateComplete.then(() => { this.addEventListener('blur', this.handleBlur, true); this.addEventListener('focus', this.handleFocus, true); @@ -170,13 +162,13 @@ export default class SlTooltip extends ShoelaceElement { return target as HTMLElement; } - handleBlur() { + private handleBlur = () => { if (this.hasTrigger('focus')) { this.hide(); } - } + }; - handleClick() { + private handleClick = () => { if (this.hasTrigger('click')) { if (this.open) { this.hide(); @@ -184,37 +176,37 @@ export default class SlTooltip extends ShoelaceElement { this.show(); } } - } + }; - handleFocus() { + private handleFocus = () => { if (this.hasTrigger('focus')) { this.show(); } - } + }; - handleKeyDown(event: KeyboardEvent) { + private handleKeyDown = (event: KeyboardEvent) => { // Pressing escape when the target element has focus should dismiss the tooltip if (this.open && event.key === 'Escape') { event.stopPropagation(); this.hide(); } - } + }; - handleMouseOver() { + private handleMouseOver = () => { if (this.hasTrigger('hover')) { const delay = parseDuration(getComputedStyle(this).getPropertyValue('--show-delay')); clearTimeout(this.hoverTimeout); this.hoverTimeout = window.setTimeout(() => this.show(), delay); } - } + }; - handleMouseOut() { + private handleMouseOut = () => { if (this.hasTrigger('hover')) { const delay = parseDuration(getComputedStyle(this).getPropertyValue('--hide-delay')); clearTimeout(this.hoverTimeout); this.hoverTimeout = window.setTimeout(() => this.hide(), delay); } - } + }; @watch('open', { waitUntilFirstUpdate: true }) async handleOpenChange() { diff --git a/src/internal/form.ts b/src/internal/form.ts index e79c7fac0..dd9134db5 100644 --- a/src/internal/form.ts +++ b/src/internal/form.ts @@ -142,7 +142,7 @@ export class FormSubmitController implements ReactiveController { } } - handleFormData(event: FormDataEvent) { + private handleFormData = (event: FormDataEvent) => { const disabled = this.options.disabled(this.host); const name = this.options.name(this.host); const value = this.options.value(this.host); @@ -160,9 +160,9 @@ export class FormSubmitController implements ReactiveController { event.formData.append(name, (value as string | number | boolean).toString()); } } - } + }; - handleFormSubmit(event: Event) { + private handleFormSubmit = (event: Event) => { const disabled = this.options.disabled(this.host); const reportValidity = this.options.reportValidity; @@ -177,17 +177,17 @@ export class FormSubmitController implements ReactiveController { event.preventDefault(); event.stopImmediatePropagation(); } - } + }; - handleFormReset() { + private handleFormReset = () => { this.options.setValue(this.host, this.options.defaultValue(this.host)); this.setUserInteracted(this.host, false); - } + }; - async handleUserInput() { + private handleUserInput = async () => { await this.host.updateComplete; this.setUserInteracted(this.host, true); - } + }; reportFormValidity() { //