-
Notifications
You must be signed in to change notification settings - Fork 1
/
ChoiceModal.tsx
57 lines (54 loc) · 1.63 KB
/
ChoiceModal.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
45
46
47
48
49
50
51
52
53
54
55
56
57
import React, { ReactElement } from 'react';
import Modal from 'react-modal';
import styles from './ChoiceModal.module.css';
export type ChoiceObj = { readonly [key: string]: string };
/**
* The type parameter Choice must be an object with predefined set of string keys and string values.
*/
export type ChoiceModalProps<Choices extends ChoiceObj> = {
/**
* Whether the modal is open.
*/
readonly open: boolean;
/**
* The message displayed along with the choices.
*/
readonly message: string;
/**
* All of the available choices in an object. It should be something like:
* ```typescript
* const choices = {
* choice1: 'User readable short description of option 1',
* choice2: 'User readable short description of option 2',
* // ...
* };
* ```
*/
readonly choices: Choices;
/**
* The function called when a choice is picked.
*/
readonly onChoicePick: (pickedChoice: keyof Choices) => void;
}
export default function ChoiceModal<Choices extends ChoiceObj>(
{ open, message, choices, onChoicePick }: ChoiceModalProps<Choices>,
): ReactElement {
return (
<Modal isOpen={open} className={styles.ChoiceModal} contentLabel="Choice Dialog">
<div className={styles.TextContainer}>{message}</div>
<div className={styles.ButtonContainer}>
<span className={styles.Filler} />
{Object.keys(choices).map((key) => (
<button
key={key}
type="button"
className={styles.ChoiceButton}
onClick={() => onChoicePick(key)}
>
{choices[key]}
</button>
))}
</div>
</Modal>
);
}