Skip to content

Commit b15ebbe

Browse files
SaraVieiraSaraVieira
committed
add vscode icons
1 parent f7eb5fa commit b15ebbe

File tree

4 files changed

+152
-96
lines changed

4 files changed

+152
-96
lines changed

‎packages/app/src/app/pages/Sandbox/Editor/Workspace/Files/DirectoryEntry/Entry/EntryIcons/GetIconURL.js‎

Lines changed: 83 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,83 @@
1+
import jsSvg from 'common/components/icons/js.svg';
2+
import tsSvg from 'common/components/icons/ts.svg';
3+
import cssSvg from 'common/components/icons/css.svg';
4+
import reactSvg from 'common/components/icons/react.svg';
5+
import folderSvg from 'common/components/icons/folder.svg';
6+
import folderOpenSvg from 'common/components/icons/folder-open.svg';
7+
import jsonSvg from 'common/components/icons/json.svg';
8+
import reasonSvg from 'common/components/icons/reason.svg';
9+
import yarnSvg from 'common/components/icons/yarn.svg';
10+
import markdownSvg from 'common/components/icons/markdown.svg';
11+
import faviconSvg from 'common/components/icons/favicon.svg';
12+
import htmlSvg from 'common/components/icons/html.svg';
13+
import npmSvg from 'common/components/icons/npm.svg';
14+
import vueSvg from 'common/components/icons/vue.svg';
15+
import fileSvg from 'common/components/icons/file.svg';
16+
import svgSvg from 'common/components/icons/svg.svg';
17+
import imageSvg from 'common/components/icons/image.svg';
18+
import prettierSvg from 'common/components/icons/prettier.svg';
19+
import codesandboxSvg from 'common/components/icons/codesandbox.svg';
20+
import babelSvg from 'common/components/icons/babel.svg';
21+
import sassSvg from 'common/components/icons/sass.svg';
22+
23+
function imageExists(url) {
24+
return new Promise((resolve, reject) => {
25+
const img = new Image();
26+
img.onload = resolve;
27+
img.onerror = reject;
28+
img.src = url;
29+
});
30+
}
31+
32+
const icons = {
33+
directory: folderSvg,
34+
'directory-open': folderOpenSvg,
35+
react: reactSvg,
36+
css: cssSvg,
37+
json: jsonSvg,
38+
yarn: yarnSvg,
39+
markdown: markdownSvg,
40+
favicon: faviconSvg,
41+
html: htmlSvg,
42+
npm: npmSvg,
43+
vue: vueSvg,
44+
js: jsSvg,
45+
typescript: tsSvg,
46+
svg: svgSvg,
47+
image: imageSvg,
48+
prettier: prettierSvg,
49+
codesandbox: codesandboxSvg,
50+
babel: babelSvg,
51+
sass: sassSvg,
52+
reason: reasonSvg,
53+
};
54+
55+
const directoryMapping = {
56+
'directory-open': 'default_folder_opened',
57+
directory: 'default_folder',
58+
};
59+
60+
async function getIconURL(type) {
61+
const base =
62+
'https://cdn.rawgit.com/vscode-icons/vscode-icons/806a23ec/icons';
63+
64+
let url;
65+
66+
if (type === 'directory-open' || type === 'directory') {
67+
url = `${base}/${directoryMapping[type]}.svg`;
68+
} else if (type === 'codesandbox') {
69+
url = codesandboxSvg;
70+
} else {
71+
url = `${base}/file_type_${type}.svg`;
72+
}
73+
74+
try {
75+
await imageExists(url);
76+
77+
return url;
78+
} catch (_) {
79+
return icons[type] || fileSvg;
80+
}
81+
}
82+
83+
export default getIconURL;

‎packages/app/src/app/pages/Sandbox/Editor/Workspace/Files/DirectoryEntry/Entry/EntryIcons/elements.js‎

Lines changed: 0 additions & 50 deletions
Original file line numberDiff line numberDiff line change
@@ -1,62 +1,12 @@
11
import styled from 'styled-components';
22

3-
import jsSvg from 'common/components/icons/js.svg';
4-
import tsSvg from 'common/components/icons/ts.svg';
5-
import cssSvg from 'common/components/icons/css.svg';
6-
import reactSvg from 'common/components/icons/react.svg';
7-
import folderSvg from 'common/components/icons/folder.svg';
8-
import folderOpenSvg from 'common/components/icons/folder-open.svg';
9-
import jsonSvg from 'common/components/icons/json.svg';
10-
import reasonSvg from 'common/components/icons/reason.svg';
11-
import yarnSvg from 'common/components/icons/yarn.svg';
12-
import markdownSvg from 'common/components/icons/markdown.svg';
13-
import faviconSvg from 'common/components/icons/favicon.svg';
14-
import htmlSvg from 'common/components/icons/html.svg';
15-
import npmSvg from 'common/components/icons/npm.svg';
16-
import vueSvg from 'common/components/icons/vue.svg';
17-
import fileSvg from 'common/components/icons/file.svg';
18-
import svgSvg from 'common/components/icons/svg.svg';
19-
import imageSvg from 'common/components/icons/image.svg';
20-
import prettierSvg from 'common/components/icons/prettier.svg';
21-
import codesandboxSvg from 'common/components/icons/codesandbox.svg';
22-
import babelSvg from 'common/components/icons/babel.svg';
23-
import sassSvg from 'common/components/icons/sass.svg';
24-
25-
const icons = {
26-
directory: folderSvg,
27-
'directory-open': folderOpenSvg,
28-
react: reactSvg,
29-
css: cssSvg,
30-
json: jsonSvg,
31-
yarn: yarnSvg,
32-
md: markdownSvg,
33-
favicon: faviconSvg,
34-
html: htmlSvg,
35-
npm: npmSvg,
36-
vue: vueSvg,
37-
js: jsSvg,
38-
ts: tsSvg,
39-
svg: svgSvg,
40-
image: imageSvg,
41-
prettier: prettierSvg,
42-
codesandbox: codesandboxSvg,
43-
babel: babelSvg,
44-
sass: sassSvg,
45-
reason: reasonSvg,
46-
};
47-
48-
function getIconSvg(type) {
49-
return icons[type] || fileSvg;
50-
}
51-
523
export const RedIcon = styled.span`
534
color: ${props => props.theme.red};
545
width: ${props => props.width}px;
556
height: ${props => props.height}px;
567
`;
578

589
export const SVGIcon = styled.span`
59-
background-image: url(${props => getIconSvg(props.type)});
6010
background-size: ${props => props.width}px;
6111
background-position: 0;
6212
background-repeat: no-repeat;

‎packages/app/src/app/pages/Sandbox/Editor/Workspace/Files/DirectoryEntry/Entry/EntryIcons/index.js‎

Lines changed: 40 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -1,25 +1,55 @@
1-
import React from 'react';
1+
import React, { Component } from 'react';
22

33
import ErrorIcon from 'react-icons/lib/md/error';
44

55
import { RedIcon, SVGIcon } from './elements';
6+
import getIconURL from './GetIconURL';
67

7-
const getIcon = (type, error, width, height) => {
8-
if (error) {
8+
class GetIcon extends Component {
9+
state = { icon: null };
10+
11+
getIcon = async type => {
12+
const icon = await getIconURL(type);
13+
14+
this.setState({
15+
icon,
16+
});
17+
};
18+
19+
async componentDidMount() {
20+
this.getIcon(this.props.type);
21+
}
22+
23+
async componentDidUpdate(prevProps) {
24+
if (this.props.type !== prevProps.type) {
25+
this.getIcon(this.props.type);
26+
}
27+
}
28+
29+
render() {
30+
const { type, error, width, height } = this.props;
31+
if (error) {
32+
return (
33+
<RedIcon>
34+
<ErrorIcon width={width} height={height} />
35+
</RedIcon>
36+
);
37+
}
938
return (
10-
<RedIcon>
11-
<ErrorIcon width={width} height={height} />
12-
</RedIcon>
39+
<SVGIcon
40+
style={{ 'background-image': `url(${this.state.icon})` }}
41+
type={type}
42+
width={width}
43+
height={height}
44+
/>
1345
);
1446
}
15-
16-
return <SVGIcon type={type} width={width} height={height} />;
17-
};
47+
}
1848

1949
function EntryIcon({ type, width = 16, height = 16, error }) {
2050
return (
2151
<div style={{ display: 'inline-block', verticalAlign: 'middle' }}>
22-
{getIcon(type, error, width, height)}
52+
<GetIcon type={type} error={error} width={width} height={height} />
2353
</div>
2454
);
2555
}

‎packages/app/src/app/utils/get-type.js‎

Lines changed: 29 additions & 36 deletions
Original file line numberDiff line numberDiff line change
@@ -1,74 +1,67 @@
11
/* @flow */
22
import isImage from 'common/utils/is-image';
33

4-
const reactRegex = /import.*from\s['|"]react['|"]/;
5-
export function hasReact(code: string) {
6-
return reactRegex.test(code);
7-
}
8-
9-
const cssRegex = /\.css$/;
10-
const sassRegex = /\.s[a|c]ss$/;
11-
const jsonRegex = /\.json$/;
12-
const htmlRegex = /\.html$/;
134
const mdRegex = /\.md$/;
14-
const vueRegex = /\.vue$/;
5+
const yamlRegex = /\.yml$/;
156
const svgRegex = /\.svg$/;
16-
const reasonRegex = /\.re$/;
7+
const jsxRegex = /\.jsx$/;
178

189
export function getMode(title: string = '') {
19-
if (title === 'favicon.ico') {
10+
const removeIgnoreTitle = title.split('ignore')[0];
11+
12+
if (removeIgnoreTitle === 'favicon.ico') {
2013
return 'favicon';
2114
}
2215

23-
if (title === 'yarn.lock') {
16+
if (removeIgnoreTitle === 'yarn.lock') {
2417
return 'yarn';
2518
}
2619

27-
if (title === 'package.json') {
28-
return 'npm';
20+
if (removeIgnoreTitle === '.travis.yml') {
21+
return 'travis';
2922
}
3023

31-
if (title === '.prettierrc') {
32-
return 'prettier';
24+
if (removeIgnoreTitle === 'package.json') {
25+
return 'npm';
3326
}
3427

35-
if (title === 'sandbox.config.json') {
28+
if (removeIgnoreTitle === 'sandbox.config.json') {
3629
return 'codesandbox';
3730
}
3831

39-
if (title === '.babelrc') {
40-
return 'babel';
32+
if (mdRegex.test(removeIgnoreTitle)) return 'markdown';
33+
if (yamlRegex.test(removeIgnoreTitle)) return 'yaml';
34+
if (jsxRegex.test(removeIgnoreTitle)) return 'reactjs';
35+
if (!removeIgnoreTitle.includes('.')) return 'raw';
36+
if (removeIgnoreTitle.includes('webpack')) return 'webpack';
37+
38+
if (isImage(removeIgnoreTitle) && !svgRegex.test(removeIgnoreTitle)) {
39+
return 'image';
4140
}
4241

43-
if (cssRegex.test(title)) return 'css';
44-
if (jsonRegex.test(title)) return 'json';
45-
if (htmlRegex.test(title)) return 'html';
46-
if (mdRegex.test(title)) return 'md';
47-
if (vueRegex.test(title)) return 'vue';
48-
if (svgRegex.test(title)) return 'svg';
49-
if (sassRegex.test(title)) return 'sass';
50-
if (reasonRegex.test(title)) return 'reason';
51-
if (!title.includes('.')) return 'raw';
42+
const titleArr = removeIgnoreTitle.split('.');
5243

53-
if (isImage(title)) {
54-
return 'image';
44+
if (removeIgnoreTitle.endsWith('rc')) {
45+
return titleArr.join('').split('rc')[0];
5546
}
5647

57-
return '';
48+
return titleArr[titleArr.length - 1];
5849
}
5950

60-
const jsRegex = /\.jsx?$/;
6151
const tsRegex = /\.tsx?$/;
6252
function isJS(title: string) {
63-
if (jsRegex.test(title)) return 'js';
64-
if (tsRegex.test(title)) return 'ts';
53+
if (
54+
tsRegex.test(title) ||
55+
title === 'tsconfig.json' ||
56+
title === 'tslint.json'
57+
)
58+
return 'typescript';
6559
return undefined;
6660
}
6761

6862
export default function getType(title: string) {
6963
const isJSType = isJS(title);
7064
if (isJSType) {
71-
// if (hasReact(code || '')) return 'react';
7265
return isJSType;
7366
}
7467

0 commit comments

Comments
 (0)