blob: 969605be9e40ebdfc49d135f4eb7355c3995b18d (
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
|
import React = require("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>
);
}
}
|
