diff options
author | Bob Zeleznik <zzzman@gmail.com> | 2020-04-08 20:56:47 -0400 |
---|---|---|
committer | Bob Zeleznik <zzzman@gmail.com> | 2020-04-08 20:56:47 -0400 |
commit | 051aefd6455ccda271377913a486e923aef40efd (patch) | |
tree | f33e1a52b72bf066e93415a12f47ed74a62f5b4a /src/client/views/TouchScrollableMenu.tsx | |
parent | 9a795d09127d10f23e3992f899265fd227e49af4 (diff) | |
parent | b21db9d40c1619df5455ba8ffe3ef76913cc92de (diff) |
Merge branch 'master' into script_documents
Diffstat (limited to 'src/client/views/TouchScrollableMenu.tsx')
-rw-r--r-- | src/client/views/TouchScrollableMenu.tsx | 59 |
1 files changed, 59 insertions, 0 deletions
diff --git a/src/client/views/TouchScrollableMenu.tsx b/src/client/views/TouchScrollableMenu.tsx new file mode 100644 index 000000000..969605be9 --- /dev/null +++ b/src/client/views/TouchScrollableMenu.tsx @@ -0,0 +1,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> + ); + } +}
\ No newline at end of file |