You cannot select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
carbon/components/Carbon.js

176 lines
4.6 KiB
JavaScript

import { EOL } from 'os'
import * as hljs from 'highlight.js'
import React from 'react'
import domtoimage from 'dom-to-image'
import CodeMirror from 'react-codemirror'
import Spinner from 'react-spinner'
import toHash from 'tohash'
import WindowControls from '../components/WindowControls'
import { COLORS, DEFAULT_LANGUAGE, LANGUAGES } from '../lib/constants'
const LANGUAGE_HASH = toHash(LANGUAGES, 'module')
8 years ago
const DEFAULT_SETTINGS = {
paddingVertical: '50px',
paddingHorizontal: '50px',
marginVertical: '45px',
marginHorizontal: '45px',
background: '#fed0ec',
7 years ago
theme: 'seti',
language: DEFAULT_LANGUAGE
}
class Carbon extends React.Component {
7 years ago
constructor(props) {
super(props)
this.state = {
loading: true,
7 years ago
language: props.config.language
}
this.handleLanguageChange = this.handleLanguageChange.bind(this)
this.codeUpdated = this.codeUpdated.bind(this)
8 years ago
}
componentDidMount() {
this.setState({
loading: false
})
this.handleLanguageChange(this.props.children)
}
7 years ago
componentWillReceiveProps(newProps) {
this.handleLanguageChange(newProps.children, { customProps: newProps })
}
7 years ago
codeUpdated(newCode) {
this.handleLanguageChange(newCode)
this.props.updateCode(newCode)
7 years ago
}
handleLanguageChange(newCode, config) {
const props = (config && config.customProps) || this.props
if (props.config.language === 'auto') {
// try to set the language
const detectedLanguage = hljs.highlightAuto(newCode).language
const languageModule = LANGUAGE_HASH[detectedLanguage]
if (languageModule) {
this.setState({ language: languageModule.module })
}
} else {
this.setState({ language: props.config.language })
}
}
7 years ago
render() {
const config = Object.assign(DEFAULT_SETTINGS, this.props.config)
const options = {
lineNumbers: false,
mode: this.state.language || 'plaintext',
theme: config.theme,
scrollBarStyle: null,
viewportMargin: Infinity,
lineWrapping: true
}
// create styles
const containerStyle = {
background: config.background,
padding: `${config.paddingVertical} ${config.paddingHorizontal}`
}
// set content to spinner if loading, else editor
let content = (
<div>
<Spinner />
7 years ago
<style jsx>
{`
div {
height: 352px;
}
`}
</style>
8 years ago
</div>
)
if (this.state.loading === false) {
content = (
<div id="container" style={containerStyle}>
7 years ago
{config.windowControls ? <WindowControls theme={config.windowTheme} /> : null}
<CodeMirror
7 years ago
className={`CodeMirror__container window-theme__${config.windowTheme} ${config.dropShadow
? 'dropshadow'
: ''}`}
7 years ago
onChange={this.codeUpdated}
value={this.props.children}
options={options}
/>
<style jsx>{`
#container :global(.cm-s-dracula .CodeMirror-cursor) {
border-left: solid 2px #159588;
}
#container :global(.cm-s-solarized) {
background-color: #fdf6e3;
color: #657b83;
text-shadow: #eee8d5 0 1px;
box-shadow: none;
}
#container :global(.CodeMirror__container.dropshadow) {
7 years ago
box-shadow: 0 20px 68px rgba(0, 0, 0, 0.55);
border-radius: 5px;
}
#container :global(.CodeMirror__container .CodeMirror) {
height: auto;
min-width: 680px;
padding: 18px 18px;
border-radius: 5px;
font-family: Hack, monospace !important;
font-size: 0.8rem;
user-select: none;
}
#container :global(.CodeMirror-scroll) {
overflow: hidden !important;
}
#container :global(.window-theme__sharp > .CodeMirror) {
border-radius: 0px;
}
#container :global(.window-theme__bw > .CodeMirror) {
border: 2px solid ${COLORS.SECONDARY};
}
#container :global(.window-controls + .CodeMirror__container > .CodeMirror) {
padding-top: 48px;
}
`}</style>
</div>
)
}
return (
<div id="section">
7 years ago
{content}
<style jsx>{`
#section {
height: 100%;
display: flex;
justify-content: center;
align-items: center;
}
`}</style>
</div>
)
}
8 years ago
}
export default Carbon