Skip to content

Commit 2931795

Browse files
CompuIvesCompuIves
committed
Add RunOnClick for the app
1 parent b002f26 commit 2931795

File tree

10 files changed

+105
-61
lines changed

10 files changed

+105
-61
lines changed

‎packages/app/src/app/pages/Sandbox/Editor/Content/Preview/index.js‎

Lines changed: 40 additions & 26 deletions
Original file line numberDiff line numberDiff line change
@@ -4,6 +4,8 @@ import { reaction } from 'mobx';
44
import { inject, observer } from 'mobx-react';
55

66
import BasePreview from 'app/components/Preview';
7+
import RunOnClick from 'common/components/RunOnClick';
8+
79
import FlyingContainer from './FlyingContainer';
810
import Tests from './DevTools/Tests';
911
import Console from './DevTools/Console';
@@ -13,6 +15,7 @@ type Props = {
1315
height: ?number,
1416
store: any,
1517
signals: any,
18+
runOnClick?: boolean,
1619
};
1720

1821
type State = {
@@ -22,6 +25,7 @@ type State = {
2225
class Preview extends React.Component<Props, State> {
2326
state = {
2427
aligned: window.innerHeight > window.innerWidth ? 'bottom' : 'right',
28+
running: !this.props.runOnClick,
2529
};
2630

2731
onPreviewInitialized = preview => {
@@ -253,32 +257,42 @@ class Preview extends React.Component<Props, State> {
253257
{content === 'console' && (
254258
<Console alignRight={alignRight} alignBottom={alignBottom} />
255259
)}
256-
<BasePreview
257-
onInitialized={this.onPreviewInitialized}
258-
sandbox={store.editor.currentSandbox}
259-
extraModules={{ '/package.json': packageJSON }}
260-
currentModule={store.editor.currentModule}
261-
settings={store.preferences.settings}
262-
initialPath={store.editor.initialPath}
263-
isInProjectView={store.editor.isInProjectView}
264-
onClearErrors={() => signals.editor.errorsCleared()}
265-
onAction={action =>
266-
signals.editor.previewActionReceived({ action })
267-
}
268-
hide={hide}
269-
noPreview={completelyHidden}
270-
onOpenNewWindow={() =>
271-
this.props.signals.preferences.viewModeChanged({
272-
showEditor: true,
273-
showPreview: false,
274-
})
275-
}
276-
onToggleProjectView={() => signals.editor.projectViewToggled()}
277-
showDevtools={store.preferences.showDevtools}
278-
isResizing={store.editor.isResizing}
279-
alignRight={alignRight}
280-
alignBottom={alignBottom}
281-
/>
260+
{this.state.running ? (
261+
<BasePreview
262+
onInitialized={this.onPreviewInitialized}
263+
sandbox={store.editor.currentSandbox}
264+
extraModules={{ '/package.json': packageJSON }}
265+
currentModule={store.editor.currentModule}
266+
settings={store.preferences.settings}
267+
initialPath={store.editor.initialPath}
268+
isInProjectView={store.editor.isInProjectView}
269+
onClearErrors={() => signals.editor.errorsCleared()}
270+
onAction={action =>
271+
signals.editor.previewActionReceived({ action })
272+
}
273+
hide={hide}
274+
noPreview={completelyHidden}
275+
onOpenNewWindow={() =>
276+
this.props.signals.preferences.viewModeChanged({
277+
showEditor: true,
278+
showPreview: false,
279+
})
280+
}
281+
onToggleProjectView={() =>
282+
signals.editor.projectViewToggled()
283+
}
284+
showDevtools={store.preferences.showDevtools}
285+
isResizing={store.editor.isResizing}
286+
alignRight={alignRight}
287+
alignBottom={alignBottom}
288+
/>
289+
) : (
290+
<RunOnClick
291+
onClick={() => {
292+
this.setState({ running: true });
293+
}}
294+
/>
295+
)}
282296
</React.Fragment>
283297
);
284298
}}

‎packages/app/src/app/pages/Sandbox/Editor/Content/index.js‎

Lines changed: 6 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -436,7 +436,12 @@ class EditorPreview extends React.Component<Props, State> {
436436
store.editor.parsedConfigurations.typescript.parsed
437437
}
438438
/>
439-
<Preview width={this.state.width} height={this.state.height} />
439+
440+
<Preview
441+
runOnClick={this.props.store.preferences.runOnClick}
442+
width={this.state.width}
443+
height={this.state.height}
444+
/>
440445
</div>
441446

442447
<DevTools

‎packages/app/src/app/store/actions.js‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -80,6 +80,8 @@ export function setUrlOptions({ state, router, utils }) {
8080
state.set('preferences.settings.forceRefresh', options.forceRefresh);
8181
if (options.expandDevTools)
8282
state.set('preferences.showConsole', options.expandDevTools);
83+
if (options.runOnClick)
84+
state.set(`preferences.runOnClick`, options.runOnClick);
8385
}
8486

8587
export const setSandboxConfigOptions = ({ state }) => {

‎packages/app/src/app/store/modules/preferences/index.js‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -48,6 +48,7 @@ export default Module({
4848
showEditor: true,
4949
showPreview: true,
5050
showDevtools: false,
51+
runOnClick: false,
5152
},
5253
getters: {
5354
keybindings,

‎packages/app/src/app/store/modules/preferences/model.js‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -56,4 +56,5 @@ export default {
5656
name: types.string,
5757
})
5858
),
59+
runOnClick: types.maybe(types.boolean),
5960
};

‎packages/app/src/embed/components/App/index.js‎

Lines changed: 6 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -87,7 +87,12 @@ export default class App extends React.PureComponent<{}, State> {
8787
editorSize,
8888
forceRefresh,
8989
expandDevTools,
90-
runOnClick,
90+
runOnClick:
91+
runOnClick === false
92+
? false
93+
: runOnClick ||
94+
navigator.appVersion.indexOf('X11') !== -1 ||
95+
navigator.appVersion.indexOf('Linux') !== -1,
9196
verticalMode,
9297
highlightedLines: highlightedLines || [],
9398
};

‎packages/app/src/embed/components/Content/index.js‎

Lines changed: 2 additions & 30 deletions
Original file line numberDiff line numberDiff line change
@@ -8,12 +8,8 @@ import Tab from 'app/pages/Sandbox/Editor/Content/Tabs/Tab';
88

99
import DevTools from 'app/components/Preview/DevTools';
1010

11-
import Fullscreen from 'common/components/flex/Fullscreen';
12-
import Centered from 'common/components/flex/Centered';
13-
import theme from 'common/theme';
14-
1511
import { resolveModule, findMainModule } from 'common/sandbox/modules';
16-
import playSVG from './play.svg';
12+
import RunOnClick from 'common/components/RunOnClick';
1713

1814
import { Container, Tabs, Split } from './elements';
1915

@@ -260,28 +256,6 @@ export default class Content extends React.PureComponent<Props, State> {
260256
return () => {};
261257
};
262258

263-
RunOnClick = () => (
264-
<Fullscreen
265-
style={{ backgroundColor: theme.primary(), cursor: 'pointer' }}
266-
onClick={() => this.setState({ running: true })}
267-
>
268-
<Centered horizontal vertical>
269-
<img width={170} height={170} src={playSVG} alt="Run Sandbox" />
270-
<div
271-
style={{
272-
color: theme.red(),
273-
fontSize: '2rem',
274-
fontWeight: 700,
275-
marginTop: 24,
276-
textTransform: 'uppercase',
277-
}}
278-
>
279-
Click to run
280-
</div>
281-
</Centered>
282-
</Fullscreen>
283-
);
284-
285259
setDragging = (dragging: boolean) => {
286260
this.setState({ dragging });
287261
};
@@ -305,8 +279,6 @@ export default class Content extends React.PureComponent<Props, State> {
305279

306280
if (!mainModule) throw new Error('Cannot find main module');
307281

308-
const { RunOnClick } = this;
309-
310282
const sandboxConfig = sandbox.modules.find(
311283
x => x.directoryShortid == null && x.title === 'sandbox.config.json'
312284
);
@@ -388,7 +360,7 @@ export default class Content extends React.PureComponent<Props, State> {
388360
verticalMode={verticalMode}
389361
>
390362
{!this.state.running ? (
391-
<RunOnClick />
363+
<RunOnClick onClick={() => this.setState({ running: true })} />
392364
) : (
393365
<div
394366
style={{

‎packages/common/components/RunOnClick/index.js‎

Lines changed: 31 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,31 @@
1+
import React from 'react';
2+
3+
import Fullscreen from 'common/components/flex/Fullscreen';
4+
import Centered from 'common/components/flex/Centered';
5+
import theme from 'common/theme';
6+
7+
import playSVG from './play.svg';
8+
9+
const RunOnClick = ({ onClick }) => (
10+
<Fullscreen
11+
style={{ backgroundColor: theme.primary(), cursor: 'pointer' }}
12+
onClick={onClick}
13+
>
14+
<Centered horizontal vertical>
15+
<img width={170} height={170} src={playSVG} alt="Run Sandbox" />
16+
<div
17+
style={{
18+
color: theme.red(),
19+
fontSize: '2rem',
20+
fontWeight: 700,
21+
marginTop: 24,
22+
textTransform: 'uppercase',
23+
}}
24+
>
25+
Click to run
26+
</div>
27+
</Centered>
28+
</Fullscreen>
29+
);
30+
31+
export default RunOnClick;

‎packages/common/components/RunOnClick/play.svg‎

Lines changed: 15 additions & 0 deletions
Loading

‎packages/common/url.js‎

Lines changed: 1 addition & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -60,9 +60,7 @@ export const getSandboxOptions = (url: string) => {
6060
result.verticalMode = url.includes('verticallayout=1');
6161
result.runOnClick = url.includes('runonclick=0')
6262
? false
63-
: url.includes('runonclick=1') ||
64-
navigator.appVersion.indexOf('X11') !== -1 ||
65-
navigator.appVersion.indexOf('Linux') !== -1;
63+
: url.includes('runonclick=1') ? true : undefined;
6664

6765
return result;
6866
};

0 commit comments

Comments
 (0)