src/client/views/TouchScrollableMenu.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
58
59
60
61
62
63

import * as React from 'react';
import { computed } from 'mobx';
import { observer } from 'mobx-react';

export interface TouchScrollableMenuProps {
    options: JSX.Element[];
    bounds: {
        right: number;
        left: number;
        bottom: number;
        top: number;
        width: number;
        height: number;
    };
    selectedIndex: number;
    x: number;
    y: number;
}

export interface TouchScrollableMenuItemProps {
    text: string;
    onClick: () => any;
}

@observer
export default class TouchScrollableMenu extends React.Component<TouchScrollableMenuProps> {
    @computed
    private get possibilities() {
        return this.props.options;
    }

    @computed
    private get selectedIndex() {
        return this.props.selectedIndex;
    }

    render() {
        return (
            <div
                className="inkToTextDoc-cont"
                style={{
                    transform: `translate(${this.props.x}px, ${this.props.y}px)`,
                    width: 300,
                    height: this.possibilities.length * 25,
                }}>
                <div className="inkToTextDoc-scroller" style={{ transform: `translate(0, ${-this.selectedIndex * 25}px)` }}>
                    {this.possibilities}
                </div>
                <div className="shadow" style={{ height: `calc(100% - 25px - ${this.selectedIndex * 25}px)` }}></div>
            </div>
        );
    }
}

export class TouchScrollableMenuItem extends React.Component<TouchScrollableMenuItemProps> {
    render() {
        return (
            <div className="menuItem-cont" onClick={this.props.onClick}>
                {this.props.text}
            </div>
        );
    }
}