Replace custom ConfirmButton.

source/options/components/components.ts

@@ -1,4 +1,3 @@
-export * from './confirm-button.js';
 export * from './link.js';
 export * from './page-footer.js';
 export * from './page-header.js';

source/options/components/confirm-button.ts

@@ -1,72 +0,0 @@
-import {html} from 'htm/preact';
-import {Component} from 'preact';
-
-type Props = {
-  // Extra classes to add to the button.
-  cssClass: string;
-  // The click handler to call when confirmed.
-  clickHandler: (event: MouseEvent) => void;
-  // The class to add when in the confirm state.
-  confirmClass: string;
-  // The text to use when in the confirm state.
-  confirmText: string;
-  // The text to use when in the default state.
-  text: string;
-  // The timeout for the confirm state to return back to default.
-  timeout: number;
-  // The title to add to the element.
-  title: string;
-};
-
-type State = {
-  isConfirmed: boolean;
-  timeoutHandle?: number;
-};
-
-export class ConfirmButton extends Component<Props, State> {
-  state: State = {
-    isConfirmed: false,
-    timeoutHandle: undefined,
-  };
-
-  onClick = (event: MouseEvent) => {
-    const {clickHandler, timeout} = this.props;
-    const {isConfirmed, timeoutHandle} = this.state;
-
-    if (isConfirmed) {
-      clearTimeout(timeoutHandle);
-      clickHandler(event);
-      this.setState({
-        isConfirmed: false,
-        timeoutHandle: undefined,
-      });
-      return;
-    }
-
-    this.setState({
-      isConfirmed: true,
-      timeoutHandle: window.setTimeout(() => {
-        this.setState({isConfirmed: false});
-      }, timeout),
-    });
-  };
-
-  render() {
-    const {confirmClass, confirmText, cssClass, text, title} = this.props;
-    const {isConfirmed} = this.state;
-
-    const confirmedClass = isConfirmed ? confirmClass : '';
-    const buttonText = isConfirmed ? confirmText : text;
-    const buttonTitle = isConfirmed ? `Confirm ${title}` : title;
-
-    return html`
-      <button
-        class="${cssClass} ${confirmedClass}"
-        onClick=${this.onClick}
-        title="${buttonTitle}"
-      >
-        ${buttonText}
-      </button>
-    `;
-  }
-}

source/options/components/page-main.ts

@@ -1,9 +1,9 @@
+import {ConfirmButton} from '@holllo/gram';
 import {Component, html} from 'htm/preact';
 
 import {Settings} from '../../settings/settings.js';
 import {updateBadge} from '../../utilities/badge.js';
 import {History} from '../../utilities/history.js';
-import {ConfirmButton} from './confirm-button.js';
 import {Link} from './link.js';
 
 type Props = {
@@ -118,13 +118,13 @@ function queueItem(props: ItemProps): HtmComponent {
   if (props.remove !== undefined) {
     remove = html`
       <${ConfirmButton}
-        cssClass="confirm-button"
+        class="confirm-button"
-        clickHandler=${async () => props.remove!(id)}
+        click=${async () => props.remove!(id)}
         confirmClass="confirm"
         confirmText="✓"
+        extraAttributes=${{title: 'Remove'}}
         text="✗"
         timeout=${5 * 1000}
-        title="Remove"
       />
     `;
   }