59 lines
1.6 KiB
TypeScript
59 lines
1.6 KiB
TypeScript
import {html} from 'htm/preact';
|
|
import {useState} from 'preact/hooks';
|
|
|
|
import {Queue} from '../../types.d';
|
|
|
|
type ConfirmButtonProps = {
|
|
// Extra classes to add to the button.
|
|
class: 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;
|
|
};
|
|
|
|
/**
|
|
* Creates a button that requires 2 clicks to trigger the main click handler.
|
|
* @param props The ConfirmButton properties.
|
|
*/
|
|
export function ConfirmButton(props: ConfirmButtonProps): Queue.Component {
|
|
let timeoutHandle: number | undefined;
|
|
|
|
const [isConfirmed, setIsConfirmed] = useState(false);
|
|
const click = (event: MouseEvent) => {
|
|
if (isConfirmed) {
|
|
clearTimeout(timeoutHandle);
|
|
props.clickHandler(event);
|
|
timeoutHandle = undefined;
|
|
setIsConfirmed(false);
|
|
} else {
|
|
timeoutHandle = window.setTimeout(() => {
|
|
setIsConfirmed(false);
|
|
}, props.timeout);
|
|
setIsConfirmed(true);
|
|
}
|
|
};
|
|
|
|
const confirmedClass = isConfirmed ? props.confirmClass : '';
|
|
const text = isConfirmed ? props.confirmText : props.text;
|
|
const title = isConfirmed ? `Confirm ${props.title}` : props.title;
|
|
|
|
return html`
|
|
<button
|
|
class="${props.class} ${confirmedClass}"
|
|
onClick=${click}
|
|
title="${title}"
|
|
>
|
|
${text}
|
|
</button>
|
|
`;
|
|
}
|