Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Add code toggleability #150

Merged
merged 10 commits into from
Jun 13, 2016
Merged

Add code toggleability #150

Show file tree
Hide file tree
Changes from 1 commit
Commits
Show all changes
10 commits
Select commit Hold shift + click to select a range
b1c94be
Add code toggleability
tizmagik Jun 6, 2016
c22e055
Use same border-radius value
tizmagik Jun 6, 2016
37ea14a
Multi-compose
tizmagik Jun 7, 2016
0ee94a3
Add `showCode` config option, defaulting to `false`
tizmagik Jun 8, 2016
8e5a834
de-lint
tizmagik Jun 8, 2016
98b6c4e
Update docs with new option
tizmagik Jun 8, 2016
f4d1022
Fix node 0.12
tizmagik Jun 8, 2016
4a3c3f4
Provide `config` on context starting from `<Layout />` level. Grab `s…
tizmagik Jun 10, 2016
0f4270b
Missed one :)
tizmagik Jun 10, 2016
91abfd6
destructuring tweak
tizmagik Jun 13, 2016
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
3 changes: 2 additions & 1 deletion loaders/styleguide.loader.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -100,7 +100,8 @@ module.exports.pitch = function() {

var simplifiedConfig = _.pick(config, [
'title',
'highlightTheme'
'highlightTheme',
'showCode'
]);

return [
Expand Down
2 changes: 0 additions & 2 deletions src/rsg-components/Components/Components.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,7 +8,6 @@ export default class Components extends Component {
highlightTheme: PropTypes.string.isRequired,
components: PropTypes.array.isRequired,
sections: PropTypes.array.isRequired,
showCode: PropTypes.bool.isRequired,
};

renderComponents() {
Expand All @@ -21,7 +20,6 @@ export default class Components extends Component {
key={component.name}
highlightTheme={highlightTheme}
component={component}
showCode={showCode}
/>
);
});
Expand Down
10 changes: 10 additions & 0 deletions src/rsg-components/Layout/Layout.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -18,6 +18,16 @@ const Layout = (Renderer) => class extends Component {
sidebar: true,
};

static childContextTypes = {
config: PropTypes.object.isRequired,
};

getChildContext() {
return {
config: this.props.config,
};
}

renderComponents(config, components, sections) {
if (!isEmpty(components) || !isEmpty(sections)) {
return (
Expand Down
12 changes: 8 additions & 4 deletions src/rsg-components/Playground/Playground.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -9,12 +9,16 @@ export default class Playground extends Component {
highlightTheme: PropTypes.string.isRequired,
code: PropTypes.string.isRequired,
evalInContext: PropTypes.func.isRequired,
showCode: PropTypes.bool.isRequired,
};

constructor(props) {
super(props);
const { code, showCode } = props;
static contextTypes = {
config: PropTypes.object.isRequired,
};

constructor(props, context) {
super(props, context);
const { code } = props;
const { config: { showCode } } = context;
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

const { showCode } = context.config would be much more readable.

this.state = {
code,
showCode,
Expand Down
8 changes: 3 additions & 5 deletions src/rsg-components/ReactComponent/ReactComponent.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,7 +7,6 @@ const ReactComponent = (Renderer) => class extends Component {
static propTypes = {
highlightTheme: PropTypes.string.isRequired,
component: PropTypes.object.isRequired,
showCode: PropTypes.bool.isRequired,
};

renderDescription(description) {
Expand All @@ -28,7 +27,7 @@ const ReactComponent = (Renderer) => class extends Component {
);
}

renderExamples(highlightTheme, examples, showCode) {
renderExamples(highlightTheme, examples) {
if (!examples) {
return null;
}
Expand All @@ -42,7 +41,6 @@ const ReactComponent = (Renderer) => class extends Component {
evalInContext={example.evalInContext}
highlightTheme={highlightTheme}
key={index}
showCode={showCode}
/>
);
case 'markdown':
Expand All @@ -59,15 +57,15 @@ const ReactComponent = (Renderer) => class extends Component {
}

render() {
const { highlightTheme, component, showCode } = this.props;
const { highlightTheme, component } = this.props;

return (
<Renderer
name={component.name}
pathLine={component.pathLine}
description={this.renderDescription(component.props.description)}
propList={this.renderProps(component.props)}
examples={this.renderExamples(highlightTheme, component.examples, showCode)}
examples={this.renderExamples(highlightTheme, component.examples)}
/>
);
}
Expand Down