From 02af7b57d06591e076cb99e6cfba897103a1c1c6 Mon Sep 17 00:00:00 2001 From: Christine Abernathy Date: Thu, 5 May 2016 09:09:53 -0700 Subject: [PATCH] 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 --- ...ckerAndroidExample.js => PickerExample.js} | 0 Examples/UIExplorer/UIExplorerList.android.js | 4 +- Examples/UIExplorer/UIExplorerList.ios.js | 8 +++ website/layout/AutodocsLayout.js | 26 ++++++-- website/server/extractDocs.js | 64 +++++++++++++------ 5 files changed, 76 insertions(+), 26 deletions(-) rename Examples/UIExplorer/{PickerAndroidExample.js => PickerExample.js} (100%) diff --git a/Examples/UIExplorer/PickerAndroidExample.js b/Examples/UIExplorer/PickerExample.js similarity index 100% rename from Examples/UIExplorer/PickerAndroidExample.js rename to Examples/UIExplorer/PickerExample.js diff --git a/Examples/UIExplorer/UIExplorerList.android.js b/Examples/UIExplorer/UIExplorerList.android.js index 17e8b99f9453ec..ceb3ec84478175 100644 --- a/Examples/UIExplorer/UIExplorerList.android.js +++ b/Examples/UIExplorer/UIExplorerList.android.js @@ -40,8 +40,8 @@ var ComponentExamples: Array = [ module: require('./ModalExample'), }, { - key: 'PickerAndroidExample', - module: require('./PickerAndroidExample'), + key: 'PickerExample', + module: require('./PickerExample'), }, { key: 'ProgressBarAndroidExample', diff --git a/Examples/UIExplorer/UIExplorerList.ios.js b/Examples/UIExplorer/UIExplorerList.ios.js index 2f03b91d52117a..41f431937a4e21 100644 --- a/Examples/UIExplorer/UIExplorerList.ios.js +++ b/Examples/UIExplorer/UIExplorerList.ios.js @@ -69,6 +69,10 @@ var ComponentExamples: Array = [ key: 'NavigatorIOSExample', module: require('./NavigatorIOSExample'), }, + { + key: 'PickerExample', + module: require('./PickerExample'), + }, { key: 'PickerIOSExample', module: require('./PickerIOSExample'), @@ -144,6 +148,10 @@ var APIExamples: Array = [ key: 'AdSupportIOSExample', module: require('./AdSupportIOSExample'), }, + { + key: 'AlertExample', + module: require('./AlertExample').AlertExample, + }, { key: 'AlertIOSExample', module: require('./AlertIOSExample'), diff --git a/website/layout/AutodocsLayout.js b/website/layout/AutodocsLayout.js index 4afc10afeb3d62..3b485ade109b77 100644 --- a/website/layout/AutodocsLayout.js +++ b/website/layout/AutodocsLayout.js @@ -544,25 +544,39 @@ var Autodocs = React.createClass({ ); }, - renderExample: function(docs, metadata) { - if (!docs.example) { + renderExample: function(example, metadata) { + if (!example) { return; } return (
- {docs.example.content.replace(/^[\s\S]*?\*\//, '').trim()} + {example.content.replace(/^[\s\S]*?\*\//, '').trim()}
); }, + renderExamples: function(docs, metadata) { + if (!docs.examples || !docs.examples.length) { + return; + } + + return ( +
+ {(docs.examples.length > 1) ? Examples : null} + {docs.examples.map(example => this.renderExample(example, metadata))} +
+ ); + }, + 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)}
{metadata.previous && ← Prev} {metadata.next && Next →} diff --git a/website/server/extractDocs.js b/website/server/extractDocs.js index 50445d090b8b53..01b59e59e8ae06 100644 --- a/website/server/extractDocs.js +++ b/website/server/extractDocs.js @@ -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' + ); + } + 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 { - path: exPath.replace(/^\.\.\//, ''), - content: fs.readFileSync(exPath).toString(), - }; + 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);