queue/source/options/components/confirm-button.ts

73 lines
1.8 KiB
TypeScript

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>
`;
}
}