ref: use FeedbackComponent and rename methods

Author: billyvg

packages/feedback/src/index.ts

@@ -156,7 +156,7 @@ export class Feedback implements Integration {
    */
   public openDialog(): void {
     if (this._dialog) {
-      this._dialog.openDialog();
+      this._dialog.open();
       return;
     }
 
@@ -175,7 +175,7 @@ export class Feedback implements Integration {
    */
   public closeDialog = (): void => {
     if (this._dialog) {
-      this._dialog.closeDialog();
+      this._dialog.close();
     }
 
     // TODO: if has default actor, show the button
@@ -251,7 +251,7 @@ export class Feedback implements Integration {
 
     // Hide actor button
     if (this._actor) {
-      this._actor.classList.add('hidden');
+      this._actor.hide();
     }
   };
 }

packages/feedback/src/types/index.ts

@@ -127,3 +127,7 @@ export interface FeedbackTheme {
   light: BaseTheme;
   dark: BaseTheme;
 }
+
+export interface FeedbackComponent<T extends HTMLElement> {
+  $el: T;
+}

packages/feedback/src/widget/Actor.ts

@@ -1,4 +1,4 @@
-import type { FeedbackConfigurationWithDefaults, FeedbackTheme } from '../types';
+import type { FeedbackComponent, FeedbackConfigurationWithDefaults, FeedbackTheme } from '../types';
 import { Icon } from './Icon';
 import { createElement as h } from './util/createElement';
 
@@ -8,8 +8,7 @@ interface Props {
   onClick?: (e: MouseEvent) => void;
 }
 
-interface ActorReturn {
-  $el: HTMLButtonElement;
+interface ActorComponent extends FeedbackComponent<HTMLButtonElement> {
   /**
    * Shows the actor element
    */
@@ -23,7 +22,7 @@ interface ActorReturn {
 /**
  *
  */
-export function Actor({ options, theme, onClick }: Props): ActorReturn {
+export function Actor({ options, theme, onClick }: Props): ActorComponent {
   function _handleClick(e: MouseEvent) {
     if (typeof onClick === 'function') {
       onClick(e);

packages/feedback/src/widget/Dialog.ts

@@ -1,6 +1,6 @@
 import { getCurrentHub } from '@sentry/core';
 
-import type { FeedbackConfigurationWithDefaults, FeedbackFormData } from '../types';
+import type { FeedbackComponent, FeedbackConfigurationWithDefaults, FeedbackFormData } from '../types';
 import { Form } from './Form';
 import { createElement as h } from './util/createElement';
 
@@ -10,25 +10,39 @@ interface DialogProps {
   options: FeedbackConfigurationWithDefaults;
 }
 
-interface DialogReturn {
-  $el: HTMLDialogElement;
+interface DialogComponent extends FeedbackComponent<HTMLDialogElement> {
+  /**
+   * Disable submit button so that it cannot be clicked
+   */
   setSubmitDisabled: () => void;
+  /**
+   * Enable submit buttons so that it can be clicked
+   */
   setSubmitEnabled: () => void;
-  removeDialog: () => void;
-  openDialog: () => void;
-  closeDialog: () => void;
+  /**
+   * Remove the dialog element from the DOM
+   */
+  remove: () => void;
+  /**
+   * Opens and shows the dialog and form
+   */
+  open: () => void;
+  /**
+   * Closes the dialog and form
+   */
+  close: () => void;
 }
 
 /**
  * Feedback dialog component that has the form
  */
-export function Dialog({ onCancel, onSubmit, options }: DialogProps): DialogReturn {
+export function Dialog({ onCancel, onSubmit, options }: DialogProps): DialogComponent {
   let $el: HTMLDialogElement | null = null;
 
   /**
    *
    */
-  function closeDialog() {
+  function close() {
     if ($el) {
       $el.open = false;
     }
@@ -37,7 +51,7 @@ export function Dialog({ onCancel, onSubmit, options }: DialogProps): DialogRetu
   /**
    *
    */
-  function removeDialog() {
+  function remove() {
     if ($el) {
       $el.remove();
       $el = null;
@@ -47,7 +61,7 @@ export function Dialog({ onCancel, onSubmit, options }: DialogProps): DialogRetu
   /**
    *
    */
-  function openDialog() {
+  function open() {
     if ($el) {
       $el.open = true;
     }
@@ -74,7 +88,7 @@ export function Dialog({ onCancel, onSubmit, options }: DialogProps): DialogRetu
       id: 'feedback-dialog',
       className: 'dialog',
       open: true,
-      onClick: closeDialog,
+      onClick: close,
     },
     h(
       'div',
@@ -94,8 +108,8 @@ export function Dialog({ onCancel, onSubmit, options }: DialogProps): DialogRetu
     $el,
     setSubmitDisabled,
     setSubmitEnabled,
-    removeDialog,
-    openDialog,
-    closeDialog,
+    remove,
+    open,
+    close,
   };
 }