diff --git a/source/options/components/components.ts b/source/options/components/components.ts index 107b699..7d40558 100644 --- a/source/options/components/components.ts +++ b/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'; diff --git a/source/options/components/confirm-button.ts b/source/options/components/confirm-button.ts deleted file mode 100644 index b8a57ad..0000000 --- a/source/options/components/confirm-button.ts +++ /dev/null @@ -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 { - 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` - - `; - } -} diff --git a/source/options/components/page-main.ts b/source/options/components/page-main.ts index 0a643a8..aef82b6 100644 --- a/source/options/components/page-main.ts +++ b/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" - clickHandler=${async () => props.remove!(id)} + class="confirm-button" + click=${async () => props.remove!(id)} confirmClass="confirm" confirmText="✓" + extraAttributes=${{title: 'Remove'}} text="✗" timeout=${5 * 1000} - title="Remove" /> `; }