summaryrefslogtreecommitdiff
path: root/src/options/js/components/Option.tsx
blob: a5af65ffa69836638b3e3380e49f6df8425f6b4f (plain)
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 MenuItem from '@material-ui/core/MenuItem';
import TextField from '@material-ui/core/TextField';
import { getConfig, setConfig, ConfigKey } from '../../../common/config';

interface OptionProps {
    label: string;
    config: ConfigKey;
}

interface OptionState {
    selectedOption: string;
}

export class Option extends React.Component<OptionProps, OptionState> {
    state = {
        selectedOption: ''
    };

    async componentDidMount() {
        this.setState({ selectedOption: await getConfig(this.props.config) });
    }

    updateValue = async (e: React.ChangeEvent<HTMLSelectElement>) => {
        const value = e.target.value;
        await setConfig(this.props.config, value);
        this.setState({ selectedOption: value });
    };

    render() {
        return <TextField
            select
            fullWidth
            label={this.props.label}
            value={this.state.selectedOption}
            onChange={this.updateValue.bind(this)}
            margin="normal"
            variant="outlined">
            { Object.entries(this.props.config.options).map((o) => {
                return <MenuItem key={o[0]} value={o[0]}>{o[1]}</MenuItem>;
            }) }
        </TextField>;
    }
}