status-im
/
react-native
mirror of https://github.com/status-im/react-native.git
2
0
Fork 0
Code Issues Projects Releases Wiki Activity

Display platform-specific examples 

Summary:
Rebased https://github.com/facebook/react-native/pull/7048

Sending a new PR to check that tests pass.

After adding simulator examples, it appears that some don't show up, ex:
http://facebook.github.io/react-native/docs/text.html#content

This is due to the fact that these examples are split into two platform-specific files. For this reason, the example code isn't being shown. The examples are also missing for TextInput.

**Test plan**

`cd website; npm install; npm start`

![screen shot 2016-05-05 at 12 25 41 pm](https://cloud.githubusercontent.com/assets/346214/15042571/08ee77e8-12bd-11e6-98a6-967dc5fefa07.png)

![screen shot 2016-05-05 at 12 25 20 pm](https://cloud.githubusercontent.com/assets/346214/15042573/119778f4-12bd-11e6-8cdd-fbf217223d45.png)

![screen shot 2016-05-05 at 12 25 35 pm](https://cloud.githubusercontent.com/assets/346214/15042570/071ae992-12bd-11e6-9cf6-5aaba5e7fa17.png)
Closes https://github.com/facebook/react-native/pull/7406

Differential Revision: D3264567

Pulled By: mkonicek

fb-gh-sync-id: cfb73eaed56a7b5c6c84ce313e113393d152e9a1
fbshipit-source-id: cfb73eaed56a7b5c6c84ce313e113393d152e9a1
This commit is contained in:
Christine Abernathy 2016-05-05 09:09:53 -07:00 committed by Facebook Github Bot 1
parent 75c71cfbff
commit 02af7b57d0
5 changed files with 77 additions and 27 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

0
Examples/UIExplorer/PickerAndroidExample.js → Examples/UIExplorer/PickerExample.js
View File

4
Examples/UIExplorer/UIExplorerList.android.js
View File

@ -40,8 +40,8 @@ var ComponentExamples: Array<UIExplorerExample> = [
module: require('./ModalExample'),
},
{
key: 'PickerAndroidExample',
module: require('./PickerAndroidExample'),
key: 'PickerExample',
module: require('./PickerExample'),
},
{
key: 'ProgressBarAndroidExample',

8
Examples/UIExplorer/UIExplorerList.ios.js
View File

@ -69,6 +69,10 @@ var ComponentExamples: Array<UIExplorerExample> = [
key: 'NavigatorIOSExample',
module: require('./NavigatorIOSExample'),
},
{
key: 'PickerExample',
module: require('./PickerExample'),
},
{
key: 'PickerIOSExample',
module: require('./PickerIOSExample'),
@ -144,6 +148,10 @@ var APIExamples: Array<UIExplorerExample> = [
key: 'AdSupportIOSExample',
module: require('./AdSupportIOSExample'),
},
{
key: 'AlertExample',
module: require('./AlertExample').AlertExample,
},
{
key: 'AlertIOSExample',
module: require('./AlertIOSExample'),

26
website/layout/AutodocsLayout.js
View File

@ -544,25 +544,39 @@ var Autodocs = React.createClass({
);
},
renderExample: function(docs, metadata) {
if (!docs.example) {
renderExample: function(example, metadata) {
if (!example) {
return;
}
return (
<div>
<HeaderWithGithub
title="Examples"
path={docs.example.path}
title={example.title || 'Examples'}
level={example.title ? 4 : 3}
path={example.path}
metadata={metadata}
/>
<Prism>
{docs.example.content.replace(/^[\s\S]*?\*\//, '').trim()}
{example.content.replace(/^[\s\S]*?\*\//, '').trim()}
</Prism>
</div>
);
},
renderExamples: function(docs, metadata) {
if (!docs.examples || !docs.examples.length) {
return;
}
return (
<div>
{(docs.examples.length > 1) ? <H level={3}>Examples</H> : null}
{docs.examples.map(example => this.renderExample(example, metadata))}
</div>
);
},
render: function() {
var metadata = this.props.metadata;
var docs = JSON.parse(this.props.children);
@ -583,7 +597,7 @@ var Autodocs = React.createClass({
/>
{content}
{this.renderFullDescription(docs)}
{this.renderExample(docs, metadata)}
{this.renderExamples(docs, metadata)}
<div className="docs-prevnext">
{metadata.previous && <a className="docs-prev" href={'docs/' + metadata.previous + '.html#content'}>&larr; Prev</a>}
{metadata.next && <a className="docs-next" href={'docs/' + metadata.next + '.html#content'}>Next &rarr;</a>}

66
website/server/extractDocs.js
View File

@ -57,18 +57,48 @@ function getPlatformFromPath(filepath) {
return CROSS_SUFFIX;
}
function getExample(componentName, componentPlatform) {
let exPath = '../Examples/UIExplorer/' + componentName + 'Example.js';
if (!fs.existsSync(exPath)) {
exPath = '../Examples/UIExplorer/' + componentName + 'Example.' + componentPlatform + '.js';
if (!fs.existsSync(exPath)) {
return;
}
function getExamplePaths(componentName, componentPlatform) {
var componentExample = '../Examples/UIExplorer/' + componentName + 'Example.';
var pathsToCheck = [
componentExample + 'js',
componentExample + componentPlatform + '.js',
];
if (componentPlatform === CROSS_SUFFIX) {
pathsToCheck.push(
componentExample + IOS_SUFFIX + '.js',
componentExample + ANDROID_SUFFIX + '.js'
);
}
return {
path: exPath.replace(/^\.\.\//, ''),
content: fs.readFileSync(exPath).toString(),
};
var paths = [];
pathsToCheck.map((p) => {
if (fs.existsSync(p)) {
paths.push(p);
}
});
return paths;
}
function getExamples(componentName, componentPlatform) {
var paths = getExamplePaths(componentName, componentPlatform);
if (paths) {
var examples = [];
paths.map((p) => {
var platform = p.match(/Example\.(.*)\.js$/);
var title = '';
if ((componentPlatform === CROSS_SUFFIX) && (platform !== null)) {
title = platform[1].toUpperCase();
}
examples.push(
{
path: p.replace(/^\.\.\//, ''),
title: title,
content: fs.readFileSync(p).toString(),
}
);
});
return examples;
}
return;
}
// Add methods that should not appear in the components documentation.
@ -98,14 +128,12 @@ function filterMethods(method) {
// Determines whether a component should have a link to a runnable example
function isRunnable(componentName, componentPlatform) {
let exPath = '../Examples/UIExplorer/' + componentName + 'Example.js';
if (!fs.existsSync(exPath)) {
exPath = '../Examples/UIExplorer/' + componentName + 'Example.' + componentPlatform + '.js';
if (!fs.existsSync(exPath)) {
return false;
}
var paths = getExamplePaths(componentName, componentPlatform);
if (paths && paths.length > 0) {
return true;
} else {
return false;
}
return true;
}
// Hide a component from the sidebar by making it return false from
@ -148,7 +176,7 @@ function componentsToMarkdown(type, json, filepath, idx, styles) {
if (styles) {
json.styles = styles;
}
json.example = getExample(componentName, componentPlatform);
json.examples = getExamples(componentName, componentPlatform);
if (json.methods) {
json.methods = json.methods.filter(filterMethods);