lukechilds
/
react.dev
mirror of https://github.com/lukechilds/react.dev.git
1
0
Fork 0
Code Issues Projects Releases Wiki Activity
Browse Source

fix: address PR feedback (thanks @bvaughn!)

main
Dustin Schau 7 years ago
parent
e855f5f503
commit
3954cfe6f3
3 changed files with 166 additions and 158 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 291
      src/components/CodeEditor/CodeEditor.js
  2. 9
      src/components/CodeExample/CodeExample.js
  3. 24
      src/pages/index.js

291
src/components/CodeEditor/CodeEditor.js
View File

@ -35,8 +35,12 @@ class CodeEditor extends Component {
componentDidUpdate(prevProps, prevState) { componentDidUpdate(prevProps, prevState) {
if (prevState.compiled !== this.state.compiled) { if (prevState.compiled !== this.state.compiled) {
this._render(); this._render();
} else if (this.props.code !== prevProps.code) { }
this.setState(this._updateState(this.props.code)); }
UNSAFE_componentWillReceiveProps(nextProps) {
if (this.props.code !== nextProps.code) {
this.setState(this._updateState(nextProps.code));
} }
} }
@ -67,179 +71,174 @@ class CodeEditor extends Component {
} }
return ( return (
<div css={{flex: 1}}> <LiveProvider code={showJSX ? code : compiledES6} mountStylesheet={false}>
<LiveProvider <div
code={showJSX ? code : compiledES6} css={{
mountStylesheet={false}> [media.greaterThan('medium')]: {
display: 'flex',
alignItems: 'stretch',
flexDirection: 'row',
},
[media.lessThan('small')]: {
display: 'block',
},
}}>
<div <div
css={{ css={{
[media.greaterThan('medium')]: { flex: '0 0 70%',
flex: '0 0 67%', overflow: 'hidden',
display: 'flex', borderRadius: '10px 0 0 10px',
alignItems: 'stretch',
flexDirection: 'row',
},
[media.lessThan('small')]: { [media.lessThan('medium')]: {
display: 'block', borderRadius: '10px 10px 0 0',
}, },
}}> }}>
<div <div
css={{ css={{
flex: '0 0 70%', padding: '0px 10px',
background: colors.darker,
color: colors.white,
}}>
<MetaTitle onDark={true}>
Live JSX Editor
<label
css={{
fontSize: 14,
float: 'right',
cursor: 'pointer',
}}>
<input
checked={this.state.showJSX}
onChange={event =>
this.setState({showJSX: event.target.checked})
}
type="checkbox"
/>{' '}
JSX?
</label>
</MetaTitle>
</div>
<div
css={{
height: '100%',
width: '100%',
borderRadius: '0',
maxHeight: '340px !important',
marginTop: '0 !important',
marginLeft: '0 !important',
paddingLeft: '0 !important',
marginRight: '0 !important',
paddingRight: '0 !important',
marginBottom: '0 !important',
paddingBottom: '20px !important',
[media.lessThan('medium')]: {
marginBottom: '0 !important',
},
'& pre.prism-code[contenteditable]': {
outline: 0,
overflow: 'auto',
marginRight: '0 !important',
marginBottom: '0 !important',
},
}}
className="gatsby-highlight">
<LiveEditor ignoreTabKey={true} onChange={this._onChange} />
</div>
</div>
{error && (
<div
css={{
flex: '0 0 30%',
overflow: 'hidden', overflow: 'hidden',
borderRadius: '10px 0 0 10px', border: `1px solid ${colors.error}`,
borderRadius: '0 10px 10px 0',
fontSize: 12,
lineHeight: 1.5,
[media.lessThan('medium')]: { [media.lessThan('medium')]: {
borderRadius: '10px 10px 0 0', borderRadius: '0 0 10px 10px',
}, },
}}> }}>
<div <div
css={{ css={{
padding: '0px 10px', padding: '0px 10px',
background: colors.darker, background: colors.error,
color: colors.white, color: colors.white,
}}> }}>
<MetaTitle onDark={true}> <MetaTitle
Live JSX Editor cssProps={{
<label color: colors.white,
css={{ }}>
fontSize: 14, Error
float: 'right',
cursor: 'pointer',
}}>
<input
checked={this.state.showJSX}
onChange={event =>
this.setState({showJSX: event.target.checked})
}
type="checkbox"
/>{' '}
JSX?
</label>
</MetaTitle> </MetaTitle>
</div> </div>
<div <pre
css={{ css={{
height: '100%', whiteSpace: 'pre-wrap',
width: '100%', wordBreak: 'break-word',
borderRadius: '0', color: colors.error,
maxHeight: '340px !important', padding: 10,
marginTop: '0 !important', }}>
marginLeft: '0 !important', {errorMessage}
paddingLeft: '0 !important', </pre>
marginRight: '0 !important',
paddingRight: '0 !important',
marginBottom: '0 !important',
paddingBottom: '20px !important',
[media.lessThan('medium')]: {
marginBottom: '0 !important',
},
'& pre.prism-code[contenteditable]': {
outline: 0,
overflow: 'auto',
marginRight: '0 !important',
marginBottom: '0 !important',
},
}}
className="gatsby-highlight">
<LiveEditor ignoreTabKey={true} onChange={this._onChange} />
</div>
</div> </div>
{error && ( )}
{!error && (
<div
css={{
flex: '0 0 30%',
overflow: 'hidden',
border: `1px solid ${colors.divider}`,
borderRadius: '0 10px 10px 0',
[media.lessThan('medium')]: {
borderRadius: '0 0 10px 10px',
},
}}>
<div <div
css={{ css={{
flex: '0 0 30%', padding: '0 10px',
overflow: 'hidden', backgroundColor: colors.divider,
border: `1px solid ${colors.error}`,
borderRadius: '0 10px 10px 0',
fontSize: 12,
lineHeight: 1.5,
[media.lessThan('medium')]: {
borderRadius: '0 0 10px 10px',
},
}}> }}>
<div <MetaTitle>Result</MetaTitle>
css={{
padding: '0px 10px',
background: colors.error,
color: colors.white,
}}>
<MetaTitle
cssProps={{
color: colors.white,
}}>
Error
</MetaTitle>
</div>
<pre
css={{
whiteSpace: 'pre-wrap',
wordBreak: 'break-word',
color: colors.error,
padding: 10,
}}>
{errorMessage}
</pre>
</div> </div>
)}
{!error && (
<div <div
css={{ css={{
flex: '0 0 30%', padding: 10,
overflow: 'hidden', maxHeight: '340px !important',
border: `1px solid ${colors.divider}`, overflow: 'auto',
borderRadius: '0 10px 10px 0',
[media.lessThan('medium')]: { '& input': {
borderRadius: '0 0 10px 10px', width: '100%',
display: 'block',
border: '1px solid #ccc', // TODO
padding: 5,
}, },
}}>
<div '& button': {
css={{ marginTop: 10,
padding: '0 10px', padding: '5px 10px',
backgroundColor: colors.divider, },
}}>
<MetaTitle>Result</MetaTitle> '& label': {
</div> display: 'block',
<div marginTop: 10,
css={{ },
padding: 10,
maxHeight: '340px !important', '& textarea': {
overflow: 'auto', width: '100%',
height: 60,
'& input': { padding: 5,
width: '100%', },
display: 'block', }}
border: '1px solid #ccc', // TODO ref={this._setMountRef}
padding: 5, />
}, </div>
)}
'& button': { </div>
marginTop: 10, </LiveProvider>
padding: '5px 10px',
},
'& label': {
display: 'block',
marginTop: 10,
},
'& textarea': {
width: '100%',
height: 60,
padding: 5,
},
}}
ref={this._setMountRef}
/>
</div>
)}
</div>
</LiveProvider>
</div>
); );
} }

9
src/components/CodeExample/CodeExample.js
View File

@ -6,15 +6,21 @@ import CodeEditor from '../CodeEditor/CodeEditor';
class CodeExample extends Component { class CodeExample extends Component {
render() { render() {
const {children, code, loaded} = this.props; const {children, code, id, loaded} = this.props;
return ( return (
<div <div
id={id}
css={{ css={{
marginTop: 40, marginTop: 40,
'&:first-child': { '&:first-child': {
marginTop: 0, marginTop: 0,
}, },
'& .react-live': {
width: '100%',
},
[media.greaterThan('xlarge')]: { [media.greaterThan('xlarge')]: {
display: 'flex', display: 'flex',
flexDirection: 'row', flexDirection: 'row',
@ -29,7 +35,6 @@ class CodeExample extends Component {
<div <div
css={{ css={{
flex: '0 0 33%', flex: '0 0 33%',
[media.lessThan('xlarge')]: { [media.lessThan('xlarge')]: {
marginBottom: 20, marginBottom: 20,
}, },

24
src/pages/index.js
View File

@ -44,7 +44,7 @@ class Home extends Component {
const {codeExamples, examples, marketing} = data; const {codeExamples, examples, marketing} = data;
const code = codeExamples.edges.reduce((lookup, {node}) => { const code = codeExamples.edges.reduce((lookup, {node}) => {
lookup[node.mdAbsolutePath] = node.code; lookup[node.mdAbsolutePath] = node;
return lookup; return lookup;
}, {}); }, {});
@ -257,15 +257,19 @@ class Home extends Component {
/> />
<section css={sectionStyles}> <section css={sectionStyles}>
<div id="examples"> <div id="examples">
{examples.edges.map(({node}, index) => ( {examples.edges.map(({node}, index) => {
<CodeExample const snippet = code[node.fileAbsolutePath];
key={index} return (
code={code[node.fileAbsolutePath]} <CodeExample
loaded={babelLoaded}> key={index}
<h3 css={headingStyles}>{node.frontmatter.title}</h3> id={snippet.id}
<div dangerouslySetInnerHTML={{__html: node.html}} /> code={snippet.code}
</CodeExample> loaded={babelLoaded}>
))} <h3 css={headingStyles}>{node.frontmatter.title}</h3>
<div dangerouslySetInnerHTML={{__html: node.html}} />
</CodeExample>
);
})}
</div> </div>
</section> </section>
</div> </div>

Write Preview
Loading…
Cancel
Save