-
Notifications
You must be signed in to change notification settings - Fork 53
/
ConfirmElement.tsx
44 lines (41 loc) · 1.53 KB
/
ConfirmElement.tsx
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
import * as React from 'react';
import { useConfirm } from '../hooks/useConfirm';
export type ConfirmElementArgs<T = undefined> = {
/** Number of times this has been activated since the last reset. */
activationCounter: number;
/** Increments "activationCounter" (and then calls "onConfirm" if the counter exceeds "activationLimit"). */
activate: () => void;
/** Calls the "onConfirm" callback (does not change or reset "activationCounter") */
confirm: () => void;
/** Extra props passed by the parent. */
extra: T;
/** Resets "activationCounter". */
reset: () => void;
};
export type ConfirmElementProps<T = undefined> = {
/** Function that renders the element (render prop). */
render?: (args: ConfirmElementArgs<T>) => JSX.Element | undefined;
/** Number of activations needed to confirm. */
activationLimit?: number;
/** Called when confirmed. */
onConfirm?: () => void;
} & (T extends undefined ? {
/** Extra props to pass through to the child. */
extra?: undefined;
} : {
/** Extra props to pass through to the child. */
extra: T;
});
/** Wrapper component around the "useConfirm" hook. */
export function ConfirmElement<T = undefined>(props: ConfirmElementProps<T>) {
// Hooks
const [count, activate, confirm, reset] = useConfirm(props.activationLimit, props.onConfirm);
// Render
return props.render && props.render({
activate: activate,
activationCounter: count,
confirm: confirm,
extra: props.extra as any,
reset: reset,
}) || (<></>);
}