mirror of https://github.com/sgoudham/carbon.git
Merge branch 'master' into toolbar
Jake Dexheimer
8 years ago
commit
6befb747db
@ -0,0 +1,58 @@
|
||||
import { EOL } from 'os'
|
||||
import React from 'react'
|
||||
import domtoimage from 'dom-to-image'
|
||||
import CodeMirror from 'react-codemirror'
|
||||
import WindowControls from '../components/svg/Controls'
|
||||
|
||||
// hack to only call modes on browser
|
||||
if (typeof window !== 'undefined' && typeof window.navigator !== 'undefined') {
|
||||
require('../lib/constants')
|
||||
}
|
||||
|
||||
const DEFAULT_SETTINGS = {
|
||||
paddingVertical: '50px',
|
||||
paddingHorizontal: '50px',
|
||||
marginVertical: '45px',
|
||||
marginHorizontal: '45px',
|
||||
background: '#fed0ec',
|
||||
theme: 'dracula',
|
||||
language: 'javascript'
|
||||
}
|
||||
|
||||
const CodeImage = (props) => {
|
||||
const config = Object.assign(DEFAULT_SETTINGS, props.config)
|
||||
|
||||
const options = {
|
||||
lineNumbers: false,
|
||||
mode: config.language,
|
||||
theme: config.theme,
|
||||
scrollBarStyle: null,
|
||||
viewportMargin: Infinity,
|
||||
lineWrapping: true
|
||||
}
|
||||
|
||||
// create styles
|
||||
const containerStyle = {
|
||||
background: config.background,
|
||||
padding: `${config.paddingVertical} ${config.paddingHorizontal}`
|
||||
}
|
||||
|
||||
return (
|
||||
<div id="section">
|
||||
<div id="container" style={containerStyle}>
|
||||
{ true ? <WindowControls /> : null }
|
||||
<CodeMirror className="CodeMirrorContainer" value={props.children} options={options} />
|
||||
</div>
|
||||
<style jsx>{`
|
||||
#section {
|
||||
height: 100%;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
`}</style>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
export default CodeImage
|
||||
@ -1,6 +1,6 @@
|
||||
import React from 'react'
|
||||
import enhanceWithClickOutside from 'react-click-outside'
|
||||
import SettingsIcon from './svg/settings'
|
||||
import SettingsIcon from './svg/Settings'
|
||||
|
||||
class Settings extends React.Component {
|
||||
constructor(props) {
|
||||
@ -0,0 +1,46 @@
|
||||
import React from 'react'
|
||||
import Dropdown from './Dropdown'
|
||||
import ColorPicker from './Colorpicker'
|
||||
import Settings from './Settings'
|
||||
import Button from './Button'
|
||||
import { THEMES, LANGUAGES } from '../lib/constants'
|
||||
|
||||
const Toolbar = (props) => (
|
||||
<div id="toolbar">
|
||||
<Dropdown list={THEMES} onChange={props.onThemeChange}/>
|
||||
<Dropdown list={LANGUAGES} onChange={props.onLanguageChange}/>
|
||||
<ColorPicker
|
||||
onChange={props.onBGChange}
|
||||
bg={props.bg}
|
||||
/>
|
||||
<Settings />
|
||||
<div className="buttons">
|
||||
<Button
|
||||
onClick={props.upload}
|
||||
title="Copy Imgur Link"
|
||||
bg="#84ACFC"
|
||||
style={{ borderRadius: '3px 0px 0px 3px' }}
|
||||
/>
|
||||
<Button onClick={props.save} title="Save Image" bg="#C3E98D" />
|
||||
</div>
|
||||
<style jsx>{`
|
||||
#toolbar {
|
||||
width: 100%;
|
||||
height: 40px; // TODO fix
|
||||
margin-bottom: 16px;
|
||||
display: flex;
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
font-size: 14px;
|
||||
color: #4F6875;
|
||||
}
|
||||
|
||||
.buttons {
|
||||
display: flex;
|
||||
margin-left: auto;
|
||||
}
|
||||
`}</style>
|
||||
</div>
|
||||
)
|
||||
|
||||
export default Toolbar
|
||||
@ -1,100 +0,0 @@
|
||||
import { EOL } from 'os'
|
||||
import React from 'react'
|
||||
import { NativeTypes } from 'react-dnd-html5-backend'
|
||||
import { DropTarget } from 'react-dnd'
|
||||
import domtoimage from 'dom-to-image'
|
||||
import WindowControls from '../components/svg/controls'
|
||||
|
||||
const margin = '45px 54px'
|
||||
|
||||
const DEFAULT_CODE = `
|
||||
const pluckDeep = key => obj => key.split('.').reduce((accum, key) => accum[key], obj)
|
||||
|
||||
const compose = (...fns) => res => fns.reduce((accum, next) => next(accum), res)
|
||||
|
||||
const unfold = (f, seed) => {
|
||||
const go = (f, seed, acc) => {
|
||||
const res = f(seed)
|
||||
return res ? go(f, res[1], acc.concat([res[0]])) : acc
|
||||
}
|
||||
return go(f, seed, [])
|
||||
}`
|
||||
|
||||
const MAX_LINES = 40
|
||||
|
||||
class CodeImage extends React.Component {
|
||||
constructor () {
|
||||
super()
|
||||
this.state = {}
|
||||
}
|
||||
|
||||
render () {
|
||||
let code = this.state.droppedContent || this.props.children || DEFAULT_CODE
|
||||
const split = code.split(EOL)
|
||||
if (split.length > MAX_LINES) code = [...split.slice(0, MAX_LINES - 1), '', '...'].join(EOL)
|
||||
|
||||
return this.props.connectDropTarget(
|
||||
<div id='section'>
|
||||
<div id='container' style={Object.assign({ background: this.props.bg }, this.props.style)}>
|
||||
<pre className='hyper'>
|
||||
<div className="window-controls">
|
||||
<WindowControls />
|
||||
</div>
|
||||
<code>{code}</code>
|
||||
</pre>
|
||||
</div>
|
||||
<style jsx>{`
|
||||
#section {
|
||||
height: 100%;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
#container {
|
||||
height: 100%;
|
||||
background: #000;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.window-controls {
|
||||
position: absolute;
|
||||
margin-left: -2px;
|
||||
margin-top: -14px;
|
||||
}
|
||||
|
||||
.hyper {
|
||||
border: 1px solid #393939;
|
||||
border-radius: 5px;
|
||||
background: black;
|
||||
padding: 26px 18px;
|
||||
margin: ${margin}
|
||||
color: white;
|
||||
}
|
||||
|
||||
.bw {}
|
||||
`}</style>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
}
|
||||
|
||||
const drop = (props, monitor, component) => {
|
||||
const bundle = monitor.getItem()
|
||||
const file = bundle.files[0]
|
||||
const reader = new FileReader()
|
||||
reader.onload = function(event) {
|
||||
component.setState({
|
||||
droppedContent: event.target.result
|
||||
})
|
||||
};
|
||||
reader.readAsText(file, "UTF-8");
|
||||
}
|
||||
|
||||
export default DropTarget(NativeTypes.FILE, { drop }, (connect, monitor) => ({
|
||||
connectDropTarget: connect.dropTarget(),
|
||||
isOver: monitor.isOver(),
|
||||
canDrop: monitor.canDrop(),
|
||||
item: monitor.getItem()
|
||||
}))(CodeImage)
|
||||
@ -0,0 +1,25 @@
|
||||
const drop = (props, monitor, component) => {
|
||||
const bundle = monitor.getItem()
|
||||
const file = bundle.files[0]
|
||||
const reader = new FileReader()
|
||||
reader.onload = function(event) {
|
||||
component.setState({
|
||||
droppedContent: event.target.result
|
||||
})
|
||||
};
|
||||
reader.readAsText(file, "UTF-8");
|
||||
}
|
||||
|
||||
export default DropTarget(NativeTypes.FILE, { drop }, (connect, monitor) => ({
|
||||
connectDropTarget: connect.dropTarget(),
|
||||
isOver: monitor.isOver(),
|
||||
canDrop: monitor.canDrop(),
|
||||
item: monitor.getItem()
|
||||
}))(CodeImage)
|
||||
|
||||
|
||||
let code = this.props.content
|
||||
const split = code.split(EOL)
|
||||
if (split.length > MAX_LINES) code = [...split.slice(0, MAX_LINES - 1), '', '...'].join(EOL)
|
||||
|
||||
return this.props.connectDropTarget(
|
||||
@ -0,0 +1,22 @@
|
||||
import React from 'react'
|
||||
|
||||
export default () => (
|
||||
<div>
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="54" height="14" viewBox="0 0 54 14">
|
||||
<g fill="none" fillRule="evenodd" transform="translate(1 1)">
|
||||
<circle cx="6" cy="6" r="6" fill="#FF5F56" stroke="#E0443E" strokeWidth=".5"/>
|
||||
<circle cx="26" cy="6" r="6" fill="#FFBD2E" stroke="#DEA123" strokeWidth=".5"/>
|
||||
<circle cx="46" cy="6" r="6" fill="#27C93F" stroke="#1AAB29" strokeWidth=".5"/>
|
||||
</g>
|
||||
</svg>
|
||||
<style jsx>{`
|
||||
div {
|
||||
position: absolute;
|
||||
margin-left: 18px;
|
||||
margin-top: 12px;
|
||||
z-index: 1;
|
||||
}
|
||||
`}
|
||||
</style>
|
||||
</div>
|
||||
)
|
||||
@ -1,11 +0,0 @@
|
||||
import React from 'react'
|
||||
|
||||
export default () => (
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="54" height="14" viewBox="0 0 54 14">
|
||||
<g fill="none" fillRule="evenodd" transform="translate(1 1)">
|
||||
<circle cx="6" cy="6" r="6" fill="#FF5F56" stroke="#E0443E" strokeWidth=".5"/>
|
||||
<circle cx="26" cy="6" r="6" fill="#FFBD2E" stroke="#DEA123" strokeWidth=".5"/>
|
||||
<circle cx="46" cy="6" r="6" fill="#27C93F" stroke="#1AAB29" strokeWidth=".5"/>
|
||||
</g>
|
||||
</svg>
|
||||
)
|
||||
@ -1,117 +0,0 @@
|
||||
import React from 'react'
|
||||
import Dropdown from './dropdown'
|
||||
import ColorPicker from './colorpicker'
|
||||
import Settings from './settings'
|
||||
import Button from './button'
|
||||
|
||||
const themes = [
|
||||
{
|
||||
name: 'dracula'
|
||||
},
|
||||
{
|
||||
name: 'solarized'
|
||||
}
|
||||
]
|
||||
|
||||
const langauges = [
|
||||
'Auto Detect',
|
||||
'Plain Text',
|
||||
'AppleScript',
|
||||
'BoxNote',
|
||||
'C',
|
||||
'C#',
|
||||
'CSS',
|
||||
'CSV',
|
||||
'Closure',
|
||||
'CoffeeScript',
|
||||
'Cold Fusion',
|
||||
'Crystal',
|
||||
'Cypher',
|
||||
'D',
|
||||
'Dart',
|
||||
'Diff',
|
||||
'Docker',
|
||||
'Erlang',
|
||||
'F#',
|
||||
'Fortran',
|
||||
'Gherkin',
|
||||
'Go',
|
||||
'Groovy',
|
||||
'HTML',
|
||||
'Haskell',
|
||||
'Haxe',
|
||||
'Java',
|
||||
'JavaScript',
|
||||
'JSON',
|
||||
'Julia',
|
||||
'Kotlin',
|
||||
'LaTex',
|
||||
'Lisp',
|
||||
'Lua',
|
||||
'MATLAB',
|
||||
'MUMPS',
|
||||
'OCaml',
|
||||
'Objective-C',
|
||||
'PHP',
|
||||
'Pascal',
|
||||
'Perl',
|
||||
'Pig',
|
||||
'Post',
|
||||
'Puppet',
|
||||
'Python',
|
||||
'R',
|
||||
'Ruby',
|
||||
'Rust',
|
||||
'SQL',
|
||||
'Sass',
|
||||
'Scheme',
|
||||
'Smalltalk',
|
||||
'Swift',
|
||||
'TSV',
|
||||
'VB.NET',
|
||||
'VBScript',
|
||||
'Velocity',
|
||||
'Verilog',
|
||||
'XML',
|
||||
'YAML'
|
||||
].map(name => ({ name }))
|
||||
|
||||
const Toolbar = (props) => (
|
||||
<div id="toolbar">
|
||||
<Dropdown list={themes} />
|
||||
<Dropdown list={langauges} />
|
||||
<ColorPicker
|
||||
onChange={props.onBGChange}
|
||||
bg={props.bg}
|
||||
/>
|
||||
<Settings />
|
||||
<div className="buttons">
|
||||
<Button
|
||||
onClick={props.upload}
|
||||
title="Copy Imgur Link"
|
||||
bg="#84ACFC"
|
||||
style={{ borderRadius: '3px 0px 0px 3px' }}
|
||||
/>
|
||||
<Button onClick={props.save} title="Save Image" bg="#C3E98D" />
|
||||
</div>
|
||||
<style jsx>{`
|
||||
#toolbar {
|
||||
width: 100%;
|
||||
height: 40px; // TODO fix
|
||||
margin-bottom: 16px;
|
||||
display: flex;
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
font-size: 14px;
|
||||
color: #4F6875;
|
||||
}
|
||||
|
||||
.buttons {
|
||||
display: flex;
|
||||
margin-left: auto;
|
||||
}
|
||||
`}</style>
|
||||
</div>
|
||||
)
|
||||
|
||||
export default Toolbar
|
||||
@ -0,0 +1,206 @@
|
||||
if (typeof window !== 'undefined' && typeof window.navigator !== 'undefined') {
|
||||
require('codemirror/mode/clojure/clojure')
|
||||
require('codemirror/mode/cobol/cobol')
|
||||
require('codemirror/mode/coffeescript/coffeescript')
|
||||
require('codemirror/mode/commonlisp/commonlisp')
|
||||
require('codemirror/mode/crystal/crystal')
|
||||
require('codemirror/mode/css/css')
|
||||
require('codemirror/mode/d/d')
|
||||
require('codemirror/mode/dart/dart')
|
||||
require('codemirror/mode/django/django')
|
||||
require('codemirror/mode/dockerfile/dockerfile')
|
||||
require('codemirror/mode/elm/elm')
|
||||
require('codemirror/mode/erlang/erlang')
|
||||
require('codemirror/mode/fortran/fortran')
|
||||
require('codemirror/mode/go/go')
|
||||
require('codemirror/mode/groovy/groovy')
|
||||
require('codemirror/mode/handlebars/handlebars')
|
||||
require('codemirror/mode/haskell/haskell')
|
||||
require('codemirror/mode/haxe/haxe')
|
||||
require('codemirror/mode/htmlembedded/htmlembedded')
|
||||
require('codemirror/mode/htmlmixed/htmlmixed')
|
||||
require('codemirror/mode/javascript/javascript')
|
||||
require('codemirror/mode/julia/julia')
|
||||
require('codemirror/mode/lua/lua')
|
||||
require('codemirror/mode/markdown/markdown')
|
||||
require('codemirror/mode/mathematica/mathematica')
|
||||
require('codemirror/mode/nginx/nginx')
|
||||
require('codemirror/mode/pascal/pascal')
|
||||
require('codemirror/mode/perl/perl')
|
||||
require('codemirror/mode/php/php')
|
||||
require('codemirror/mode/python/python')
|
||||
require('codemirror/mode/r/r')
|
||||
require('codemirror/mode/ruby/ruby')
|
||||
require('codemirror/mode/rust/rust')
|
||||
require('codemirror/mode/shell/shell')
|
||||
require('codemirror/mode/smalltalk/smalltalk')
|
||||
require('codemirror/mode/spreadsheet/spreadsheet')
|
||||
require('codemirror/mode/sql/sql')
|
||||
require('codemirror/mode/swift/swift')
|
||||
require('codemirror/mode/tcl/tcl')
|
||||
require('codemirror/mode/vb/vb')
|
||||
require('codemirror/mode/verilog/verilog')
|
||||
require('codemirror/mode/vhdl/vhdl')
|
||||
require('codemirror/mode/vue/vue')
|
||||
require('codemirror/mode/xml/xml')
|
||||
require('codemirror/mode/yaml/yaml')
|
||||
}
|
||||
|
||||
export const THEMES = [
|
||||
{
|
||||
id: 'dracula',
|
||||
name: 'Dracula'
|
||||
},
|
||||
{
|
||||
id: 'solarized',
|
||||
name: 'Solarized'
|
||||
}
|
||||
]
|
||||
|
||||
export const LANGUAGES = [
|
||||
{
|
||||
name: 'Auto Detect'
|
||||
},
|
||||
{
|
||||
name: 'Plain Text'
|
||||
},
|
||||
{
|
||||
name: 'Clojure'
|
||||
},
|
||||
{
|
||||
name: 'Cobol'
|
||||
},
|
||||
{
|
||||
name: 'CoffeeScript'
|
||||
},
|
||||
{
|
||||
name: 'Crystal'
|
||||
},
|
||||
{
|
||||
name: 'CSS'
|
||||
},
|
||||
{
|
||||
name: 'D'
|
||||
},
|
||||
{
|
||||
name: 'Dart'
|
||||
},
|
||||
{
|
||||
name: 'Django'
|
||||
},
|
||||
{
|
||||
name: 'Docker'
|
||||
},
|
||||
{
|
||||
name: 'Elm'
|
||||
},
|
||||
{
|
||||
name: 'Erlang'
|
||||
},
|
||||
{
|
||||
name: 'Fortran'
|
||||
},
|
||||
{
|
||||
name: 'Groovy'
|
||||
},
|
||||
{
|
||||
name: 'Handlebars'
|
||||
},
|
||||
{
|
||||
name: 'Haskell'
|
||||
},
|
||||
{
|
||||
name: 'Haxe'
|
||||
},
|
||||
{
|
||||
name: 'HTML'
|
||||
},
|
||||
{
|
||||
name: 'JavaScript'
|
||||
},
|
||||
{
|
||||
name: 'JSX'
|
||||
},
|
||||
{
|
||||
name: 'Julia'
|
||||
},
|
||||
{
|
||||
name: 'Lua'
|
||||
},
|
||||
{
|
||||
name: 'Markdown'
|
||||
},
|
||||
{
|
||||
name: 'Mathematica'
|
||||
},
|
||||
{
|
||||
name: 'NGINX'
|
||||
},
|
||||
{
|
||||
name: 'Pascal'
|
||||
},
|
||||
{
|
||||
name: 'Perl'
|
||||
},
|
||||
{
|
||||
name: 'PHP'
|
||||
},
|
||||
{
|
||||
name: 'Python'
|
||||
},
|
||||
{
|
||||
name: 'R'
|
||||
},
|
||||
{
|
||||
name: 'Ruby'
|
||||
},
|
||||
{
|
||||
name: 'Rust'
|
||||
},
|
||||
{
|
||||
name: 'Sass'
|
||||
},
|
||||
{
|
||||
name: 'Smalltalk'
|
||||
},
|
||||
{
|
||||
name: 'SQL'
|
||||
},
|
||||
{
|
||||
name: 'Swift'
|
||||
},
|
||||
{
|
||||
name: 'TCL'
|
||||
},
|
||||
{
|
||||
name: 'VB.NET'
|
||||
},
|
||||
{
|
||||
name: 'Verilog'
|
||||
},
|
||||
{
|
||||
name: 'VHDL'
|
||||
},
|
||||
{
|
||||
name: 'Vue'
|
||||
},
|
||||
{
|
||||
name: 'XML'
|
||||
},
|
||||
{
|
||||
name: 'YAML'
|
||||
}
|
||||
]
|
||||
|
||||
export const DEFAULT_CODE = `const pluckDeep = key => obj => key.split('.').reduce((accum, key) => accum[key], obj)
|
||||
|
||||
const compose = (...fns) => res => fns.reduce((accum, next) => next(accum), res)
|
||||
|
||||
const unfold = (f, seed) => {
|
||||
const go = (f, seed, acc) => {
|
||||
const res = f(seed)
|
||||
return res ? go(f, res[1], acc.concat([res[0]])) : acc
|
||||
}
|
||||
return go(f, seed, [])
|
||||
}
|
||||
`
|
||||
Loading…
Reference in New Issue