aboutsummaryrefslogtreecommitdiffhomepage
path: root/src/components/SelectorComponent.tsx
blob: baf19464fe1adc82e5dc4c93f04f3a4ad1236b47 (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
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
import * as React from "react";

export interface SelectorOption {
    label: string;
}

export interface SelectorProps { 
    id: string;
    options: SelectorOption[];
    onChange: (value: string) => void;
    onMouseEnter?: () => void;
    onMouseLeave?: () => void;
}

export interface SelectorState {

}

class SelectorComponent extends React.Component<SelectorProps, SelectorState> {

    constructor(props: SelectorProps) {
        super(props);

        // Setup state
        this.state = {
            
        }
    }

    render(): React.ReactElement {
        return (
            <div id={this.props.id}
                style={{display: this.props.options.length > 0 ? "inherit" : "none"}}
                className="sbSelector">
                <div onMouseEnter={this.props.onMouseEnter}
                    onMouseLeave={this.props.onMouseLeave}
                    className="sbSelectorBackground">
                    {this.getOptions()}
                </div>
            </div>
        );
    }

    getOptions(): React.ReactElement[] {
        const result: React.ReactElement[] = [];
        for (const option of this.props.options) {
            result.push(
                <div className="sbSelectorOption"
                    onClick={(e) => {
                        e.stopPropagation();
                        this.props.onChange(option.label);
                    }}
                    key={option.label}>
                    {option.label}
                </div>
            );
        }

        return result;
    }
}

export default SelectorComponent;