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 6 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
Split 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) {
if (prevState.compiled !== this.state.compiled) {
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 (
<div css={{flex: 1}}>
<LiveProvider
code={showJSX ? code : compiledES6}
mountStylesheet={false}>
<LiveProvider code={showJSX ? code : compiledES6} mountStylesheet={false}>
<div
css={{
[media.greaterThan('medium')]: {
display: 'flex',
alignItems: 'stretch',
flexDirection: 'row',
},
[media.lessThan('small')]: {
display: 'block',
},
}}>
<div
css={{
[media.greaterThan('medium')]: {
flex: '0 0 67%',
display: 'flex',
alignItems: 'stretch',
flexDirection: 'row',
},
flex: '0 0 70%',
overflow: 'hidden',
borderRadius: '10px 0 0 10px',
[media.lessThan('small')]: {
display: 'block',
[media.lessThan('medium')]: {
borderRadius: '10px 10px 0 0',
},
}}>
<div
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',
borderRadius: '10px 0 0 10px',
border: `1px solid ${colors.error}`,
borderRadius: '0 10px 10px 0',
fontSize: 12,
lineHeight: 1.5,
[media.lessThan('medium')]: {
borderRadius: '10px 10px 0 0',
borderRadius: '0 0 10px 10px',
},
}}>
<div
css={{
padding: '0px 10px',
background: colors.darker,
background: colors.error,
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
cssProps={{
color: colors.white,
}}>
Error
</MetaTitle>
</div>
<div
<pre
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>
whiteSpace: 'pre-wrap',
wordBreak: 'break-word',
color: colors.error,
padding: 10,
}}>
{errorMessage}
</pre>
</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
css={{
flex: '0 0 30%',
overflow: 'hidden',
border: `1px solid ${colors.error}`,
borderRadius: '0 10px 10px 0',
fontSize: 12,
lineHeight: 1.5,
[media.lessThan('medium')]: {
borderRadius: '0 0 10px 10px',
},
padding: '0 10px',
backgroundColor: colors.divider,
}}>
<div
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>
<MetaTitle>Result</MetaTitle>
</div>
)}
{!error && (
<div
css={{
flex: '0 0 30%',
overflow: 'hidden',
border: `1px solid ${colors.divider}`,
borderRadius: '0 10px 10px 0',
padding: 10,
maxHeight: '340px !important',
overflow: 'auto',
[media.lessThan('medium')]: {
borderRadius: '0 0 10px 10px',
'& input': {
width: '100%',
display: 'block',
border: '1px solid #ccc', // TODO
padding: 5,
},
}}>
<div
css={{
padding: '0 10px',
backgroundColor: colors.divider,
}}>
<MetaTitle>Result</MetaTitle>
</div>
<div
css={{
padding: 10,
maxHeight: '340px !important',
overflow: 'auto',
'& input': {
width: '100%',
display: 'block',
border: '1px solid #ccc', // TODO
padding: 5,
},
'& button': {
marginTop: 10,
padding: '5px 10px',
},
'& label': {
display: 'block',
marginTop: 10,
},
'& textarea': {
width: '100%',
height: 60,
padding: 5,
},
}}
ref={this._setMountRef}
/>
</div>
)}
</div>
</LiveProvider>
</div>
'& button': {
marginTop: 10,
padding: '5px 10px',
},
'& label': {
display: 'block',
marginTop: 10,
},
'& textarea': {
width: '100%',
height: 60,
padding: 5,
},
}}
ref={this._setMountRef}
/>
</div>
)}
</div>
</LiveProvider>
);
}

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

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

24
src/pages/index.js
View File

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

Write Preview
Loading…
Cancel
Save