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

[WIP] Use SnackPlayer for API/Component examples #13646

Closed
wants to merge 1 commit into from
Closed

[WIP] Use SnackPlayer for API/Component examples #13646

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
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
72 changes: 11 additions & 61 deletions website/layout/AutodocsLayout.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -23,6 +23,7 @@ const PropTypes = require('prop-types');
var Site = require('Site');

var slugify = require('slugify');
var SnackPlayer = require('SnackPlayer');

var styleReferencePattern = /^[^.]+\.propTypes\.style$/;

Expand Down Expand Up @@ -785,56 +786,6 @@ var TypeDef = React.createClass({
},
});

var EmbeddedSimulator = React.createClass({
render: function() {
if (!this.props.shouldRender) {
return null;
}

var metadata = this.props.metadata;

var imagePreview = metadata.platform === 'android'
? <img alt="Run example in simulator" width="170" height="338" src="img/uiexplorer_main_android.png" />
: <img alt="Run example in simulator" width="170" height="356" src="img/uiexplorer_main_ios.png" />;

return (
<div className="embedded-simulator">
<p><a className="modal-button-open"><strong>Run this example</strong></a></p>
<div className="modal-button-open modal-button-open-img">
{imagePreview}
</div>
<Modal metadata={metadata} />
</div>
);
}
});

var Modal = React.createClass({
render: function() {
var metadata = this.props.metadata;
var appParams = {route: metadata.title};
var encodedParams = encodeURIComponent(JSON.stringify(appParams));
var url = metadata.platform === 'android'
? `https://appetize.io/embed/q7wkvt42v6bkr0pzt1n0gmbwfr?device=nexus5&scale=65&autoplay=false&orientation=portrait&deviceColor=white&params=${encodedParams}`
: `https://appetize.io/embed/7vdfm9h3e6vuf4gfdm7r5rgc48?device=iphone6s&scale=60&autoplay=false&orientation=portrait&deviceColor=white&params=${encodedParams}`;

return (
<div>
<div className="modal">
<div className="modal-content">
<button className="modal-button-close">&times;</button>
<div className="center">
<iframe className="simulator" src={url} width="256" height="550" frameborder="0" scrolling="no" />
<p>Powered by <a target="_blank" href="https://appetize.io">appetize.io</a></p>
</div>
</div>
</div>
<div className="modal-backdrop" />
</div>
);
}
});

var Autodocs = React.createClass({
childContextTypes: {
permalink: PropTypes.string,
Expand Down Expand Up @@ -868,20 +819,19 @@ var Autodocs = React.createClass({
return;
}

let title = 'Example';
if (example.title) {
title = example.title + ' Example';
}

return (
<div>
<HeaderWithGithub
title={example.title || 'Examples'}
level={example.title ? 4 : 3}
path={example.path}
metadata={metadata}
/>
<div className="example-container">
<Prism>
{example.content.replace(/^[\s\S]*?\*\//, '').trim()}
</Prism>
<EmbeddedSimulator shouldRender={metadata.runnable} metadata={metadata} />
<SnackPlayer params={`name=${title}&platform=${example.platform}`}>{example.content.replace(/^[\s\S]*?\*\//, '').trim()}</SnackPlayer>
</div>
<p className="edit-page-block">
You can <a target="_blank" href={'https://github.com/facebook/react-native/blob/master/' + example.path}>edit the example above on GitHub</a> and send us a pull request!
</p>
</div>
);
},
Expand All @@ -893,7 +843,7 @@ var Autodocs = React.createClass({

return (
<div>
{(docs.examples.length > 1) ? <Header level={3}>Examples</Header> : null}
<Header level={3}>Examples</Header>
{docs.examples.map(example => this.renderExample(example, metadata))}
</div>
);
Expand Down
6 changes: 2 additions & 4 deletions website/server/extractDocs.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -90,15 +90,13 @@ function getExamples(componentName, componentPlatform) {
if (paths) {
const examples = [];
paths.map((p) => {
const title = p.match(/(\w+)Example\./)[1];
const platform = p.match(/Example\.(.*)\.js$/);
let title = '';
if ((componentPlatform === CROSS_SUFFIX) && (platform !== null)) {
title = platform[1].toUpperCase();
}
examples.push(
{
path: p.replace(/^\.\.\//, ''),
title: title,
platform: componentPlatform === CROSS_SUFFIX ? null : componentPlatform,
content: fs.readFileSync(p).toString(),
}
);
Expand Down