-
Notifications
You must be signed in to change notification settings - Fork 4
New: Added code viewer for the page (fixes #14) #15
Conversation
I should also probably update the readme. Will do that. |
const codeViewer = getPageSource(pages, currentPage.pathname) ? | ||
( | ||
<ExpansionPanel className={classes.expansionPanel}> | ||
<ExpansionPanelSummary expandIcon={<ExpandMoreIcon/>}> |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
<Paper className={classes.expansionPanel}>
<ExpansionPanel>
<ExpansionPanelSummary expandIcon={<ExpandMoreIcon />}>
<Typography variant="button" color="secondary">
Source
</Typography>
</ExpansionPanelSummary>
<ExpansionPanelDetails>
<AceEditor
className={classes.aceEditor}
value={getPageSource(pages, currentPage.pathname)}
name="APP_CONTENT_CODE"
mode="javascript"
theme="twilight"
setOptions={{
showLineNumbers: true,
showGutter: true
}}
readOnly
/>
</ExpansionPanelDetails>
</ExpansionPanel>
</Paper>
Rounded expand more icon Rounded the paper for editor
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
You can amend the commit to New: Added code viewer for the page (fixes #14)
to auto close the issue along with this.
code: PropTypes.string.isRequired | ||
}; | ||
|
||
export default withStyles(styles, { withTheme: true })(SourceCodeViewer); |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
nit: Newline
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Added
return ( | ||
<Paper className={classes.expansionPanelContainer}> | ||
<ExpansionPanel | ||
classes={{ |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
I think this is rounded by default isnt it?
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
oh yes it is, I removed it
}); | ||
|
||
function SourceCodeViewer(props) { | ||
const { classes, code } = props; |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
You can use useStyles
hook for this. It will save you a prop.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Good tip, I updated to useStyles
🎉 This PR is included in version 1.5.0 🎉 The release is available on: Your semantic-release bot 📦🚀 |
What is the purpose of this pull request? (put an "X" next to item)
[] Documentation update
[] Bug fix
[x] New functionality
[] Changes an existing functionality
[] Other, please explain:
What changes did you make? (Give an overview)
Added a code viewer on the page
Fixes issue #14
Add any screenshots
On carbon-graphs - It will appear much better after issue https://github.com/cerner/carbon-graphs/issues/50 is fixed
The accordian will only exist if a the page comes with a source code.