diff options
author | Sophie Zhang <sophie_zhang@brown.edu> | 2024-01-25 11:35:26 -0500 |
---|---|---|
committer | Sophie Zhang <sophie_zhang@brown.edu> | 2024-01-25 11:35:26 -0500 |
commit | f3dab2a56db5e4a6a3dca58185d94e1ff7d1dc32 (patch) | |
tree | a7bc895266b53bb620dbd2dd71bad2e83b555446 /src/client/views/TouchScrollableMenu.tsx | |
parent | b5c5410b4af5d2c68d2107d3f064f6e3ec4ac3f2 (diff) | |
parent | 136f3d9f349d54e8bdd73b6380ea47c19e5edebf (diff) |
Merge branch 'master' into sophie-ai-images
Diffstat (limited to 'src/client/views/TouchScrollableMenu.tsx')
-rw-r--r-- | src/client/views/TouchScrollableMenu.tsx | 34 |
1 files changed, 19 insertions, 15 deletions
diff --git a/src/client/views/TouchScrollableMenu.tsx b/src/client/views/TouchScrollableMenu.tsx index 969605be9..530c693a7 100644 --- a/src/client/views/TouchScrollableMenu.tsx +++ b/src/client/views/TouchScrollableMenu.tsx @@ -1,6 +1,6 @@ -import React = require("react"); -import { computed } from "mobx"; -import { observer } from "mobx-react"; +import * as React from 'react'; +import { computed } from 'mobx'; +import { observer } from 'mobx-react'; export interface TouchScrollableMenuProps { options: JSX.Element[]; @@ -24,31 +24,35 @@ export interface TouchScrollableMenuItemProps { @observer export default class TouchScrollableMenu extends React.Component<TouchScrollableMenuProps> { - @computed - private get possibilities() { return this.props.options; } + private get possibilities() { + return this.props.options; + } @computed - private get selectedIndex() { return this.props.selectedIndex; } + 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-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 className="shadow" style={{ height: `calc(100% - 25px - ${this.selectedIndex * 25}px)` }}></div> </div> ); } } -export class TouchScrollableMenuItem extends React.Component<TouchScrollableMenuItemProps>{ +export class TouchScrollableMenuItem extends React.Component<TouchScrollableMenuItemProps> { render() { return ( <div className="menuItem-cont" onClick={this.props.onClick}> @@ -56,4 +60,4 @@ export class TouchScrollableMenuItem extends React.Component<TouchScrollableMenu </div> ); } -}
\ No newline at end of file +} |