aboutsummaryrefslogtreecommitdiff
path: root/src/client/views/PreviewCursor.tsx
diff options
context:
space:
mode:
authorTyler Schicke <tyler_schicke@brown.edu>2019-04-25 15:36:32 -0400
committerTyler Schicke <tyler_schicke@brown.edu>2019-04-25 15:36:32 -0400
commitc318c6cb44b26b780e94e0f0854e5ec4c14634a9 (patch)
tree5c6bcb413f771988bd89efe3551007bd6d0f160c /src/client/views/PreviewCursor.tsx
parente1a65c5fa52dd094cc48c0c85b3c92ae8789666d (diff)
parent430dfa3afbfd38fe0db869b962da45903b888264 (diff)
Merge branch 'master' of github-tsch-brown:browngraphicslab/Dash-Web into newDocs
Diffstat (limited to 'src/client/views/PreviewCursor.tsx')
-rw-r--r--src/client/views/PreviewCursor.tsx37
1 files changed, 28 insertions, 9 deletions
diff --git a/src/client/views/PreviewCursor.tsx b/src/client/views/PreviewCursor.tsx
index ff8434681..744ec0535 100644
--- a/src/client/views/PreviewCursor.tsx
+++ b/src/client/views/PreviewCursor.tsx
@@ -7,30 +7,49 @@ import "./PreviewCursor.scss";
@observer
export class PreviewCursor extends React.Component<{}> {
private _prompt = React.createRef<HTMLDivElement>();
+ static _onKeyPress?: (e: KeyboardEvent) => void;
+ @observable static _clickPoint = [0, 0];
+ @observable public static Visible = false;
//when focus is lost, this will remove the preview cursor
@action onBlur = (): void => {
PreviewCursor.Visible = false;
- PreviewCursor.hide();
}
- @observable static clickPoint = [0, 0];
- @observable public static Visible = false;
- @observable public static hide = () => { };
+ constructor(props: any) {
+ super(props);
+ document.addEventListener("keydown", this.onKeyPress)
+ }
+
+ @action
+ onKeyPress = (e: KeyboardEvent) => {
+ // Mixing events between React and Native is finicky. In FormattedTextBox, we set the
+ // DASHFormattedTextBoxHandled flag when a text box consumes a key press so that we can ignore
+ // the keyPress here.
+ //if not these keys, make a textbox if preview cursor is active!
+ if (!e.ctrlKey && !e.altKey && !e.defaultPrevented && !(e as any).DASHFormattedTextBoxHandled) {
+ PreviewCursor.Visible && PreviewCursor._onKeyPress && PreviewCursor._onKeyPress(e);
+ PreviewCursor.Visible = false;
+ } else if (e.ctrlKey) {
+ if (e.key == "v") {
+ PreviewCursor.Visible && PreviewCursor._onKeyPress && PreviewCursor._onKeyPress(e);
+ }
+ }
+ }
@action
- public static Show(hide: any, x: number, y: number) {
- this.clickPoint = [x, y];
- this.hide = hide;
+ public static Show(x: number, y: number, onKeyPress: (e: KeyboardEvent) => void) {
+ this._clickPoint = [x, y];
+ this._onKeyPress = onKeyPress;
setTimeout(action(() => this.Visible = true), (1));
}
render() {
- if (!PreviewCursor.clickPoint) {
+ if (!PreviewCursor._clickPoint) {
return (null);
}
if (PreviewCursor.Visible && this._prompt.current) {
this._prompt.current.focus();
}
return <div className="previewCursor" id="previewCursor" onBlur={this.onBlur} tabIndex={0} ref={this._prompt}
- style={{ transform: `translate(${PreviewCursor.clickPoint[0]}px, ${PreviewCursor.clickPoint[1]}px)`, opacity: PreviewCursor.Visible ? 1 : 0 }}>
+ style={{ transform: `translate(${PreviewCursor._clickPoint[0]}px, ${PreviewCursor._clickPoint[1]}px)`, opacity: PreviewCursor.Visible ? 1 : 0 }}>
I
</div >;
}