hammy
/
carbon
mirror of https://github.com/sgoudham/carbon.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

Move state out of CodeImage

Browse Source
main
Mike Fix 8 years ago
parent eb75ecd320
commit 0bf01d6fbe
2 changed files with 31 additions and 45 deletions
Show Stats Download Patch File Download Diff File

74
components/codeImage.js
Unescape Escape View File

@ -19,56 +19,40 @@ const DEFAULT_SETTINGS = {
language: 'javascript' language: 'javascript'
} }
class CodeImage extends React.Component { const CodeImage = (props) => {
constructor (props) { const config = Object.assign(DEFAULT_SETTINGS, props.config)
super(props)
const options = {
this.state = { lineNumbers: false,
code: this.props.children mode: config.language,
} theme: config.theme,
scrollBarStyle: null,
viewportMargin: Infinity,
lineWrapping: true
} }
updateCode (newCode) { // create styles
this.setState({ code: newCode }) const containerStyle = {
background: config.background,
padding: `${config.paddingVertical} ${config.paddingHorizontal}`
} }
render () { return (
const config = Object.assign(DEFAULT_SETTINGS, this.props.config) <div id="section">
<div id="container" style={containerStyle}>
const options = { { true ? <WindowControls /> : null }
lineNumbers: false, <CodeMirror className="CodeMirrorContainer" value={props.children} options={options} />
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'>
<link rel='stylesheet' href='https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.26.0/codemirror.min.css'/>
<link rel='stylesheet' href='https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.26.0/theme/dracula.min.css'/>
<div id='container' style={containerStyle}>
{ true ? <WindowControls /> : null }
<CodeMirror className="CodeMirrorContainer" value={this.state.code} onChange={this.updateCode} options={options} />
</div>
<style jsx>{`
#section {
height: 100%;
display: flex;
justify-content: center;
align-items: center;
}
`}</style>
</div> </div>
) <style jsx>{`
} #section {
height: 100%;
display: flex;
justify-content: center;
align-items: center;
}
`}</style>
</div>
)
} }
export default CodeImage export default CodeImage

2
components/meta.js
Unescape Escape View File

@ -3,6 +3,8 @@ import Head from 'next/head'
export default () => ( export default () => (
<div> <div>
<Head> <Head>
<link rel="stylesheet" href='//cdnjs.cloudflare.com/ajax/libs/codemirror/5.26.0/codemirror.min.css' />
<link rel="stylesheet" href='//cdnjs.cloudflare.com/ajax/libs/codemirror/5.26.0/theme/dracula.min.css'/>
<meta name="viewport" content="width=device-width, initial-scale=1" /> <meta name="viewport" content="width=device-width, initial-scale=1" />
<meta charSet="utf-8" /> <meta charSet="utf-8" />
<link rel="shortcut icon" href="/static/favicon.ico" /> <link rel="shortcut icon" href="/static/favicon.ico" />

Write Preview
Loading…
Cancel
Save