Skip to content

Commit c4e2213

Browse files
CompuIvesCompuIves
committed
Move Preview to common
1 parent eda0f18 commit c4e2213

File tree

23 files changed

+253
-105
lines changed

23 files changed

+253
-105
lines changed

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

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,7 @@ import React, { Component } from 'react';
33
import { reaction } from 'mobx';
44
import { inject, observer } from 'mobx-react';
55

6-
import BasePreview from 'app/components/Preview';
6+
import BasePreview from 'common/lib/components/Preview';
77
import RunOnClick from 'common/lib/components/RunOnClick';
88
import getTemplate from 'common/lib/templates';
99

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

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -15,9 +15,9 @@ import CodeEditor from 'app/components/CodeEditor';
1515
import type { Editor, Settings } from 'app/components/CodeEditor/types';
1616
import DevTools from 'app/components/Preview/DevTools';
1717

18+
import Preview from './Preview';
1819
import preventGestureScroll, { removeListener } from './prevent-gesture-scroll';
1920
import Tabs from './Tabs';
20-
import Preview from './Preview';
2121

2222
const settings = store =>
2323
({

‎packages/app/src/app/pages/common/ShowcasePreview/index.js‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
import React from 'react';
22

3-
import Preview from 'app/components/Preview';
3+
import Preview from 'common/lib/components/Preview';
44
import { parseConfigurations } from 'app/store/utils/parse-configurations';
55
import { mainModule } from 'app/store/utils/main-module';
66

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

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
// @flow
22
import * as React from 'react';
33
import type { Sandbox, Module, ModuleError } from 'common/lib/types';
4-
import BasePreview from 'app/components/Preview';
4+
import BasePreview from 'common/lib/components/Preview';
55
import CodeEditor from 'app/components/CodeEditor';
66
import type { Editor, Settings } from 'app/components/CodeEditor/types';
77
import Tab from 'app/pages/Sandbox/Editor/Content/Tabs/Tab';

‎packages/common/package.json‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -28,9 +28,11 @@
2828
"@babel/cli": "^7.2.3",
2929
"@babel/core": "^7.3.4",
3030
"@types/color": "0.12.1",
31+
"@types/humps": "^1.1.2",
3132
"@types/jest": "^24.0.9",
3233
"@types/react": "^16.8.6",
3334
"@types/react-icons": "^2.2.7",
35+
"@types/socket.io-client": "^1.4.32",
3436
"@types/styled-components": "^4.1.11",
3537
"babel-jest": "^23.6.0",
3638
"cpx": "^1.5.0",

packages/common/src/components/FeaturedSandbox/elements.js renamed to packages/common/src/components/FeaturedSandbox/elements.ts

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,7 @@ import Stats from '../Stats/index';
55

66
const VERTICAL_BREAKPOINT = 900;
77

8-
export const Container = styled.div`
8+
export const Container = styled.div<{ height?: number }>`
99
transition: 0.3s ease background-color;
1010
1111
position: relative;

packages/common/src/components/FeaturedSandbox/index.js renamed to packages/common/src/components/FeaturedSandbox/index.tsx

Lines changed: 76 additions & 19 deletions
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,11 @@
11
import React from 'react';
2-
import Preview from 'app/src/app/components/Preview';
32
import { Spring, animated, Transition } from 'react-spring/renderprops';
43
import { camelizeKeys } from 'humps';
54

5+
import Preview from '../Preview';
66
import { profileUrl, protocolAndHost } from '../../utils/url-generator';
77
import getIcon from '../../templates/icons';
8+
import { TemplateType } from '../../templates';
89

910
import {
1011
Container,
@@ -17,6 +18,7 @@ import {
1718
StyledStats,
1819
SandboxPreviewImage,
1920
} from './elements';
21+
import { Sandbox } from '../../types';
2022

2123
const SandboxIcon = ({ template }) => {
2224
const Icon = getIcon(template);
@@ -28,14 +30,55 @@ const SandboxIcon = ({ template }) => {
2830
);
2931
};
3032

31-
export default class FeaturedSandbox extends React.PureComponent {
32-
state = {
33+
export type SandboxType = {
34+
id: string;
35+
};
36+
37+
export type SingleSandboxProps = {
38+
sandbox: Sandbox;
39+
};
40+
41+
export type MultipleSandboxProps = {
42+
featuredSandboxes: {
43+
title: string;
44+
description: string;
45+
sandboxId: string;
46+
template: TemplateType;
47+
}[];
48+
sandboxId: string;
49+
};
50+
51+
export type FeaturedSandboxProps = (SingleSandboxProps &
52+
MultipleSandboxProps) & {
53+
title: string;
54+
description: string;
55+
height?: number;
56+
pickSandbox: (
57+
args: {
58+
id: string;
59+
title: string;
60+
description: string;
61+
screenshotUrl: string;
62+
}
63+
) => void;
64+
};
65+
66+
export type FeaturedSandboxState = {
67+
sandbox: Sandbox | undefined;
68+
showPreview: boolean;
69+
};
70+
71+
export default class FeaturedSandbox extends React.PureComponent<
72+
FeaturedSandboxProps,
73+
FeaturedSandboxState
74+
> {
75+
state: FeaturedSandboxState = {
3376
sandbox: undefined,
3477
showPreview: false,
3578
};
3679
fetchedSandboxes = {};
3780

38-
fetchSandbox = id => {
81+
fetchSandbox = (id: string) => {
3982
if (this.fetchedSandboxes[id]) {
4083
return Promise.resolve(this.fetchedSandboxes[id]);
4184
}
@@ -60,7 +103,7 @@ export default class FeaturedSandbox extends React.PureComponent {
60103
componentDidMount() {
61104
if (this.props.sandboxId) {
62105
this.fetchSandbox(this.props.sandboxId).then(sandbox => {
63-
this.setState({ sandbox });
106+
this.setState({ sandbox: camelizeKeys(sandbox) as Sandbox });
64107
this.setUpPreview();
65108
});
66109
} else {
@@ -74,7 +117,7 @@ export default class FeaturedSandbox extends React.PureComponent {
74117
});
75118
};
76119

77-
async componentWillReceiveProps(nextProps) {
120+
async componentWillReceiveProps(nextProps: FeaturedSandboxProps) {
78121
if (nextProps.sandboxId !== this.props.sandboxId) {
79122
this.fetchSandbox(nextProps.sandboxId).then(sandbox => {
80123
this.setState({ sandbox });
@@ -87,13 +130,14 @@ export default class FeaturedSandbox extends React.PureComponent {
87130
id: this.state.sandbox.id,
88131
title: this.props.title,
89132
description: this.props.description,
90-
screenshotUrl: this.state.sandbox.screenshot_url,
133+
screenshotUrl: this.state.sandbox.screenshotUrl,
91134
});
92135
};
93136

94137
render() {
95-
const { sandbox = this.props.sandbox || null } = this.state;
138+
const { sandbox = this.props.sandbox } = this.state;
96139
const { title, description, height } = this.props;
140+
97141
return (
98142
<Container height={height}>
99143
<SandboxContainer role="button" onClick={this.toggleOpen}>
@@ -108,9 +152,9 @@ export default class FeaturedSandbox extends React.PureComponent {
108152
{style => (
109153
<StyledStats
110154
style={style}
111-
viewCount={sandbox.view_count}
112-
likeCount={sandbox.like_count}
113-
forkCount={sandbox.fork_count}
155+
viewCount={sandbox.viewCount}
156+
likeCount={sandbox.likeCount}
157+
forkCount={sandbox.forkCount}
114158
/>
115159
)}
116160
</Spring>
@@ -129,7 +173,7 @@ export default class FeaturedSandbox extends React.PureComponent {
129173
<a href={profileUrl(sandbox.author.username)}>
130174
<Author
131175
username={sandbox.author.username}
132-
avatarUrl={sandbox.author.avatar_url}
176+
avatarUrl={sandbox.author.avatarUrl}
133177
/>
134178
</a>
135179
)}
@@ -156,7 +200,7 @@ export default class FeaturedSandbox extends React.PureComponent {
156200
height: '100%',
157201
width: '100%',
158202
backgroundColor: 'white',
159-
backgroundImage: `url(${sandbox && sandbox.screenshot_url})`,
203+
backgroundImage: `url(${sandbox && sandbox.screenshotUrl})`,
160204
backgroundRepeat: 'no-repeat',
161205
backgroundPositionX: 'center',
162206
transform: 'scale(1.025, 1.025)',
@@ -168,7 +212,7 @@ export default class FeaturedSandbox extends React.PureComponent {
168212
</div>
169213
) : (
170214
<Transition
171-
items={this.state.showPreview}
215+
items={this.state.showPreview as any}
172216
from={{ flex: 1, opacity: 1 }}
173217
enter={{ opacity: 1, flex: 1 }}
174218
leave={{
@@ -187,11 +231,24 @@ export default class FeaturedSandbox extends React.PureComponent {
187231
? style => (
188232
<animated.div style={style}>
189233
<Preview
190-
sandbox={camelizeKeys(sandbox)}
191-
settings={{}}
192-
template={sandbox.template}
234+
sandbox={sandbox}
235+
settings={{
236+
autoCompleteEnabled: true,
237+
autoDownloadTypes: false,
238+
codeMirror: false,
239+
clearConsoleEnabled: true,
240+
fontSize: 15,
241+
lineHeight: 1.4,
242+
lintEnabled: false,
243+
vimMode: false,
244+
tabWidth: 2,
245+
enableLigatures: true,
246+
forceRefresh: false,
247+
experimentVSCode: true,
248+
prettierConfig: false,
249+
zenMode: true,
250+
}}
193251
isInProjectView
194-
noDelay
195252
/>
196253
</animated.div>
197254
)
@@ -212,7 +269,7 @@ export default class FeaturedSandbox extends React.PureComponent {
212269
width: '100%',
213270
backgroundColor: 'white',
214271
backgroundImage: `url(${sandbox &&
215-
sandbox.screenshot_url})`,
272+
sandbox.screenshotUrl})`,
216273
backgroundRepeat: 'no-repeat',
217274
backgroundPositionX: 'center',
218275
transform: 'scale(1.025, 1.025)',

packages/app/src/app/components/Preview/AddressBar/elements.js renamed to packages/common/src/components/Preview/AddressBar/elements.ts

File renamed without changes.

packages/app/src/app/components/Preview/AddressBar/index.js renamed to packages/common/src/components/Preview/AddressBar/index.tsx

Lines changed: 11 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,15 +1,22 @@
11
import React from 'react';
2-
import { ENTER } from 'common/lib/utils/keycodes';
2+
import { ENTER } from '../../../utils/keycodes';
33
import { Container, InputContainer } from './elements';
44

5-
export default class extends React.PureComponent {
6-
onChange = evt => {
5+
export interface Props {
6+
onChange: (value: string) => void;
7+
onConfirm: () => void;
8+
url?: string;
9+
}
10+
11+
export default class extends React.PureComponent<Props> {
12+
input: HTMLInputElement | undefined;
13+
onChange = (evt: React.ChangeEvent<HTMLInputElement>) => {
714
const { onChange } = this.props;
815

916
onChange(evt.target.value);
1017
};
1118

12-
handleKeyDown = e => {
19+
handleKeyDown = (e: React.KeyboardEvent<HTMLInputElement>) => {
1320
const { onConfirm } = this.props;
1421

1522
if (e.keyCode === ENTER) {

packages/app/src/app/components/Preview/Navigator/ExternalOpen.js renamed to packages/common/src/components/Preview/Navigator/ExternalOpen.js

File renamed without changes.

0 commit comments

Comments
 (0)