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/CodeImage.js

93 lines
2.0 KiB
JavaScript

import { EOL } from 'os'
import React from 'react'
import domtoimage from 'dom-to-image'
import CodeMirror from 'react-codemirror'
import WindowControls from '../components/WindowControls'
import Spinner from 'react-spinner'
const DEFAULT_SETTINGS = {
paddingVertical: '50px',
paddingHorizontal: '50px',
marginVertical: '45px',
marginHorizontal: '45px',
background: '#fed0ec',
theme: 'dracula',
language: 'javascript'
}
class CodeImage extends React.Component {
constructor (props) {
super(props)
this.state = {
loading: true
}
}
componentDidMount() {
this.setState({
loading: false
})
}
render () {
const config = Object.assign(DEFAULT_SETTINGS, this.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}`
}
// set content to spinner if loading, else editor
let content = (
<div>
<Spinner />
<style jsx>{`
div {
height: 352px;
}
`}
</style>
</div>
)
if (this.state.loading === false) {
content = (
<div id="container" style={containerStyle}>
{ config.windowControls ? <WindowControls theme={config.windowTheme} /> : null }
<CodeMirror
className={`CodeMirror__container window-theme__${config.windowTheme} ${config.dropShadow ? 'dropshadow' : ''}`}
value={this.props.children}
options={options}
/>
</div>
)
}
return (
<div id="section">
{ content }
<style jsx>{`
#section {
height: 100%;
display: flex;
justify-content: center;
align-items: center;
}
`}</style>
</div>
)
}
}
export default CodeImage