mirror of https://github.com/sgoudham/carbon.git
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.
94 lines
2.0 KiB
JavaScript
94 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/svg/Controls'
|
|
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 /> : null }
|
|
<CodeMirror
|
|
className={`CodeMirror__container ${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
|