Skip to content
This repository was archived by the owner on Jul 23, 2019. It is now read-only.

Commit 427a400

Browse files
Nathan SoboMax Brunsfeld
Nathan Sobo
and
Max Brunsfeld
committed
Toggle file finder and send query updates
We did a bunch of other changes in this commit to the styling framework while debugging an issue. We're just going to roll with it. Co-authored-by: Max Brunsfeld <[email protected]>
1 parent 10721c3 commit 427a400

File tree

8 files changed

+151
-263
lines changed

8 files changed

+151
-263
lines changed

‎xray_electron/index.html

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,7 @@
33
<head>
44
<meta charset="UTF-8">
55
<style>
6-
html, body, #app, #workspace {
6+
html, body, #app {
77
width: 100%;
88
height: 100%;
99
padding: 0;

‎xray_electron/lib/render_process/app.js

Lines changed: 4 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -2,8 +2,8 @@ const fs = require("fs");
22
const path = require("path");
33
const propTypes = require("prop-types");
44
const React = require("react");
5-
const Styletron = require("styletron-client");
6-
const { StyletronProvider } = require("styletron-react");
5+
const { Client: StyletronClient } = require("styletron-engine-atomic");
6+
const { Provider: StyletronProvider } = require("styletron-react");
77
const TextEditor = require("./text_editor/text_editor");
88
const ThemeProvider = require("./theme_provider");
99
const View = require('./view')
@@ -20,6 +20,7 @@ const theme = {
2020
}
2121
};
2222

23+
const styletronInstance = new StyletronClient();
2324
class App extends React.Component {
2425
constructor(props) {
2526
super(props);
@@ -32,7 +33,7 @@ class App extends React.Component {
3233
render() {
3334
return $(
3435
StyletronProvider,
35-
{ styletron: new Styletron() },
36+
{ value: styletronInstance },
3637
$(ThemeProvider, { theme: theme }, $(View, { id: 0 }))
3738
);
3839
}

‎xray_electron/lib/render_process/file_finder.js

Lines changed: 36 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,43 @@
11
const React = require("react");
2+
const { styled } = require("styletron-react");
23
const $ = React.createElement;
34

5+
const Root = styled("div", {
6+
backgroundColor: "blue",
7+
width: 500 + 'px',
8+
height: 300 + 'px',
9+
padding: "10px"
10+
});
11+
12+
const QueryInput = styled("input", {
13+
width: "100%",
14+
boxSizing: "border-box"
15+
});
16+
417
module.exports = class FileFinder extends React.Component {
18+
constructor() {
19+
super();
20+
this.didChangeQuery = this.didChangeQuery.bind(this);
21+
}
22+
523
render() {
6-
return $("div");
24+
return $(Root, null,
25+
$(QueryInput, {
26+
$ref: (inputNode) => this.queryInput = inputNode,
27+
value: this.props.query,
28+
onChange: this.didChangeQuery
29+
})
30+
);
31+
}
32+
33+
componentDidMount() {
34+
this.queryInput.focus();
35+
}
36+
37+
didChangeQuery(event) {
38+
this.props.dispatch({
39+
type: "UpdateQuery",
40+
query: event.target.value
41+
});
742
}
843
};

‎xray_electron/lib/render_process/modal.js

Lines changed: 18 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,18 @@
1+
const React = require("react");
2+
const { styled } = require("styletron-react");
3+
const $ = React.createElement;
4+
5+
const Root = styled("div", {
6+
position: "absolute",
7+
top: 0,
8+
left: 0,
9+
right: 0,
10+
width: "min-content",
11+
margin: "auto"
12+
});
13+
14+
module.exports = class Modal extends React.Component {
15+
render() {
16+
return $(Root, { tabIndex: -1 }, this.props.children);
17+
}
18+
}

‎xray_electron/lib/render_process/workspace.js

Lines changed: 35 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,13 +1,44 @@
11
const React = require("react");
2-
const ReactDOM = require("react-dom");
2+
const { styled } = require("styletron-react");
3+
const Modal = require("./modal");
34
const View = require("./view");
45
const $ = React.createElement;
56

7+
const Root = styled("div", {
8+
position: "relative",
9+
width: "100%",
10+
height: "100%",
11+
padding: 0,
12+
margin: 0
13+
});
14+
615
module.exports = class Workspace extends React.Component {
16+
constructor() {
17+
super()
18+
this.didKeyDown = this.didKeyDown.bind(this)
19+
}
20+
721
render() {
8-
const modalView =
9-
this.props.modal == null ? null : $(View, { id: this.props.modal });
22+
let modal;
23+
if (this.props.modal) {
24+
modal = $(Modal, null, $(View, { id: this.props.modal }));
25+
}
26+
27+
return $(
28+
Root,
29+
{
30+
tabIndex: -1,
31+
onKeyDown: this.didKeyDown
32+
},
33+
modal
34+
);
35+
}
1036

11-
return $("div", { id: "workspace" }, modalView);
37+
didKeyDown(event) {
38+
if (event.metaKey) {
39+
if (event.key === 't') {
40+
this.props.dispatch({type: 'ToggleFileFinder'})
41+
}
42+
}
1243
}
1344
};

0 commit comments

Comments
 (0)