From 04ef14f7d2926759e7676d40a8c54ad720be2e1b Mon Sep 17 00:00:00 2001 From: Hector Ramos Date: Wed, 8 Mar 2017 00:33:34 -0800 Subject: [PATCH] Replace defaultLink with infoLink in Showcase Reviewed By: ericvicenti Differential Revision: D4671154 fbshipit-source-id: ee9df269b91ec140afc8dace9bbf960f9a47f0b0 --- website/core/ShowcaseAppIcon.js | 26 ++++++ website/showcase.json | 120 ++++++++++++--------------- website/src/react-native/index.js | 36 +++----- website/src/react-native/showcase.js | 36 ++++---- 4 files changed, 108 insertions(+), 110 deletions(-) create mode 100644 website/core/ShowcaseAppIcon.js diff --git a/website/core/ShowcaseAppIcon.js b/website/core/ShowcaseAppIcon.js new file mode 100644 index 00000000000000..fdad755efaba43 --- /dev/null +++ b/website/core/ShowcaseAppIcon.js @@ -0,0 +1,26 @@ +/** + * Copyright (c) 2015-present, Facebook, Inc. + * All rights reserved. + * + * This source code is licensed under the BSD-style license found in the + * LICENSE file in the root directory of this source tree. An additional grant + * of patent rights can be found in the PATENTS file in the same directory. + * + * @providesModule ShowcaseAppIcon + */ + +'use strict'; + +var React = require('React'); + +const ShowcaseAppIcon = React.createClass({ + render: function() { + return ( + + {this.props.name} + + ); + } +}); + +module.exports = ShowcaseAppIcon; diff --git a/website/showcase.json b/website/showcase.json index 5aad684d9d673a..a3cf8965977371 100644 --- a/website/showcase.json +++ b/website/showcase.json @@ -6,7 +6,6 @@ "linkPlayStore": "https://play.google.com/store/apps/details?id=com.facebook.katana&hl=en", "infoLink": "https://code.facebook.com/posts/895897210527114/dive-into-react-native-performance/", "infoTitle": "Using React Native in the Facebook App", - "defaultLink": "https://itunes.apple.com/app/facebook/id284882215", "pinned": true }, { @@ -16,16 +15,6 @@ "linkPlayStore": "https://play.google.com/store/apps/details?id=com.facebook.adsmanager", "infoLink": "https://code.facebook.com/posts/1189117404435352/react-native-for-android-how-we-built-the-first-cross-platform-react-native-app/", "infoTitle": "How We Built the First Cross-Platform React Native App", - "defaultLink": "https://itunes.apple.com/us/app/facebook-ads-manager/id964397083?mt=8", - "pinned": true - }, - { - "name": "Facebook Groups", - "icon": "http://is4.mzstatic.com/image/pf/us/r30/Purple69/v4/57/f8/4c/57f84c0c-793d-5f9a-95ee-c212d0369e37/mzl.ugjwfhzx.png", - "linkAppStore": "https://itunes.apple.com/us/app/facebook-groups/id931735837?mt=8", - "infoLink": "https://code.facebook.com/posts/1014532261909640/react-native-bringing-modern-web-techniques-to-mobile/", - "infoTitle": "React Native: Bringing Modern Web Techniques to Mobile", - "defaultLink": "https://itunes.apple.com/us/app/facebook-groups/id931735837?mt=8", "pinned": true }, { @@ -35,7 +24,6 @@ "linkPlayStore": "https://play.google.com/store/apps/details?id=com.instagram.android&referrer=utm_source%3Dinstagramweb%26utm_campaign%3DunifiedHome%26utm_medium%3Dbadge", "infoLink": "https://engineering.instagram.com/react-native-at-instagram-dd828a9a90c7#.3h4wir4zr", "infoTitle": "React Native at Instagram", - "defaultLink": "https://www.instagram.com/", "pinned": true }, { @@ -45,35 +33,56 @@ "linkPlayStore": "https://play.google.com/store/apps/details?id=com.airbnb.android&hl=en&referrer=bev%3D1472279725_4ITWKWGX6KrmU6pT%26utm_medium%3Dweb%26utm_source%3Dairbnb", "infoLink": "https://www.youtube.com/watch?v=tUfgQtmG3R0", "infoTitle": "Hybrid React Native Apps at Airbnb", - "defaultLink": "https://www.airbnb.com/mobile", "pinned": true }, { - "name": "Baidu (手机百度)", + "name": "Walmart", + "icon": "http://is2.mzstatic.com/image/thumb/Purple111/v4/64/9f/20/649f2026-e968-0417-660c-e5ee6d7977ff/source/350x350bb.jpg", + "linkAppStore": "https://itunes.apple.com/us/app/walmart-app-shopping-savings/id338137227?mt=8", + "linkPlayStore": "https://play.google.com/store/apps/details?id=com.walmart.android&hl=en", + "infoLink": " https://medium.com/walmartlabs/react-native-at-walmartlabs-cdd140589560#.ueonqqloc", + "infoTitle": "React Native at Walmart Labs", + "pinned": true + }, + { + "name": "Tesla", + "icon": "https://lh3.googleusercontent.com/b79jRmQK2sZABaN0xI2wIAFrEcBxs0CuDzNTmF088DGrJXbemaMNRvrhqH0St28J7CU=w300-rw", + "linkPlayStore": "https://play.google.com/store/apps/details?id=com.teslamotors.tesla", + "linkAppStore": "https://itunes.apple.com/us/app/tesla-motors/id582007913?mt=8", + "pinned": true + }, + { + "name": "Tencent QQ", + "icon": "http://pp.myapp.com/ma_icon/0/icon_6633_1461768893/96", + "linkPlayStore": "http://android.myapp.com/myapp/detail.htm?apkName=com.tencent.mobileqq", + "infoLink": "https://www.tencent.com/en-us/system.html", + "infoTitle": "QQ is China's largest messaging platform, with over 829 million active accounts", + "pinned": true + }, + { + "name": "Baidu Mobile (手机百度)", "icon": "http://a3.mzstatic.com/us/r30/Purple62/v4/90/7c/9b/907c9b4e-556d-1a45-45d4-0ea801719abd/icon175x175.png", "linkPlayStore": "http://shouji.baidu.com/software/9896302.html", - "linkAppStore": "https://itunes.apple.com/en/app/shou-ji-bai-du-hai-liang-xin/id382201985?l=en&mt=8", + "linkAppStore": "https://itunes.apple.com/us/app/%E6%89%8B%E6%9C%BA%E7%99%BE%E5%BA%A6-%E7%99%BE%E5%BA%A6%E4%B8%80%E4%B8%8B%E4%BD%A0%E5%B0%B1%E5%BE%97%E5%88%B0/id382201985?mt=8", "infoLink": "http://baike.baidu.com/link?url=TW8YhcVN4tO_Jz5VqMclCjGhf12EEqMD_TeVC6efe2REZlx80r6T0dX96hdmNl36XogLyExXzrvFU9rFeqxg_K", - "infoTitle": "Baidu is a search engine that has 600 million users.", - "defaultLink": "http://baike.baidu.com/link?url=TW8YhcVN4tO_Jz5VqMclCjGhf12EEqMD_TeVC6efe2REZlx80r6T0dX96hdmNl36XogLyExXzrvFU9rFeqxg_K", + "infoTitle": "Baidu Mobile is a search engine used by over 600 million people in China", "pinned": true }, { - "name": "Discord", - "icon": "http://a5.mzstatic.com/us/r30/Purple5/v4/c1/2f/4c/c12f4cba-1d9a-f6bf-2240-04085d3470ec/icon175x175.jpeg", - "linkAppStore": "https://itunes.apple.com/us/app/discord-chat-for-gamers/id985746746?mt=8", - "infoLink": "https://discord.engineering/react-native-deep-dive-91fd5e949933#.5jnqftgof", - "infoTitle": "Using React Native: One Year Later", - "defaultLink": "https://itunes.apple.com/us/app/discord-chat-for-gamers/id985746746?mt=8", + "name": "Bloomberg", + "icon": "http://is1.mzstatic.com/image/thumb/Purple71/v4/31/24/72/312472df-3d53-0acf-fc31-8a25682e528f/source/175x175bb.jpg", + "linkAppStore": "https://itunes.apple.com/us/app/bloomberg/id281941097?mt=8", + "linkPlayStore": "https://play.google.com/store/apps/details?id=com.bloomberg.android.plus&hl=en", + "infoLink": "https://www.techatbloomberg.com/blog/bloomberg-used-react-native-develop-new-consumer-app/", + "infoTitle": "How Bloomberg Used React Native to Develop its new Consumer App", "pinned": true }, { - "name": "Gyroscope", - "icon": "https://media.gyrosco.pe/images/magneto/180x180.png", - "linkAppStore": "https://itunes.apple.com/app/apple-store/id1104085053?pt=117927205&ct=website&mt=8", - "infoLink": "https://blog.gyrosco.pe/building-the-app-1dac1a97d253", - "infoTitle": "Building a visualization experience with React Native", - "defaultLink": "https://itunes.apple.com/app/apple-store/id1104085053?pt=117927205&ct=website&mt=8", + "name": "Vogue", + "icon": "http://a2.mzstatic.com/us/r30/Purple30/v4/06/24/92/0624927f-a389-746c-27f9-e2466d59e55b/icon175x175.jpeg", + "linkAppStore": "https://itunes.apple.com/app/apple-store/id1087973225?pt=45076&ct=site-promo&mt=8", + "infoLink": "http://www.vogue.com/app", + "infoTitle": "", "pinned": true }, { @@ -82,16 +91,22 @@ "linkPlayStore": "https://play.google.com/store/apps/details?id=st.li.listapp", "infoLink": "https://www.youtube.com/watch?v=cI9bDvDEsYE", "infoTitle": "Building li.st for Android with React Native", - "defaultLink": "https://play.google.com/store/apps/details?id=st.li.listapp", "pinned": true }, { - "name": "QQ", - "icon": "http://pp.myapp.com/ma_icon/0/icon_6633_1461768893/96", - "linkPlayStore": "http://android.myapp.com/myapp/detail.htm?apkName=com.tencent.mobileqq", - "infoLink": "https://en.wikipedia.org/wiki/Tencent_QQ", - "infoTitle": "QQ is a Chinese messaging service with 829 million active accounts", - "defaultLink": "http://android.myapp.com/myapp/detail.htm?apkName=com.tencent.mobileqq", + "name": "Discord", + "icon": "http://a5.mzstatic.com/us/r30/Purple5/v4/c1/2f/4c/c12f4cba-1d9a-f6bf-2240-04085d3470ec/icon175x175.jpeg", + "linkAppStore": "https://itunes.apple.com/us/app/discord-chat-for-gamers/id985746746?mt=8", + "infoLink": "https://discord.engineering/react-native-deep-dive-91fd5e949933#.5jnqftgof", + "infoTitle": "Using React Native: One Year Later", + "pinned": true + }, + { + "name": "Gyroscope", + "icon": "https://media.gyrosco.pe/images/magneto/180x180.png", + "linkAppStore": "https://itunes.apple.com/app/apple-store/id1104085053?pt=117927205&ct=website&mt=8", + "infoLink": "https://blog.gyrosco.pe/building-the-app-1dac1a97d253", + "infoTitle": "Building a visualization experience with React Native", "pinned": true }, { @@ -99,27 +114,7 @@ "icon": "http://a3.mzstatic.com/us/r30/Purple69/v4/8b/42/20/8b4220af-5165-91fd-0f05-014332df73ef/icon175x175.png", "linkAppStore": "https://itunes.apple.com/us/app/townske-stunning-city-guides/id1018136179?ls=1&mt=8", "infoLink": "https://hackernoon.com/townske-app-in-react-native-6ad557de7a7c", - "infoTitle": "\"I would recommend React Native in a heartbeat.\"", - "defaultLink": "https://itunes.apple.com/us/app/townske-stunning-city-guides/id1018136179?ls=1&mt=8", - "pinned": true - }, - { - "name": "Vogue", - "icon": "http://a2.mzstatic.com/us/r30/Purple30/v4/06/24/92/0624927f-a389-746c-27f9-e2466d59e55b/icon175x175.jpeg", - "linkAppStore": "https://itunes.apple.com/app/apple-store/id1087973225?pt=45076&ct=site-promo&mt=8", - "infoLink": "http://www.vogue.com/app", - "infoTitle": "", - "defaultLink": "https://itunes.apple.com/app/apple-store/id1087973225?pt=45076&ct=site-promo&mt=8", - "pinned": true - }, - { - "name": "Walmart", - "icon": "http://is2.mzstatic.com/image/thumb/Purple111/v4/64/9f/20/649f2026-e968-0417-660c-e5ee6d7977ff/source/350x350bb.jpg", - "linkAppStore": "https://itunes.apple.com/us/app/walmart-app-shopping-savings/id338137227?mt=8", - "linkPlayStore": "https://play.google.com/store/apps/details?id=com.walmart.android&hl=en", - "infoLink": " https://medium.com/walmartlabs/react-native-at-walmartlabs-cdd140589560#.ueonqqloc", - "infoTitle": "React Native at Walmart Labs", - "defaultLink": "https://itunes.apple.com/us/app/walmart-app-shopping-savings/id338137227?mt=8", + "infoTitle": "The experience of a web developer building an app using React Native", "pinned": true }, { @@ -144,7 +139,7 @@ "linkPlayStore": "http://android.myapp.com/myapp/detail.htm?apkName=com.tencent.edu", "linkAppStore": "https://itunes.apple.com/cn/app/teng-xun-ke-tang-zhuan-ye/id931720936?mt=8", "infoLink": "http://baike.baidu.com/view/13030839.htm", - "infoTitle": "Classroom is an education app by Chinese Internet giant Tencent", + "infoTitle": "Classroom is an education app by Chinese Internet giant Baidu", "pinned": false }, { @@ -441,15 +436,6 @@ "infoTitle": "How we built Chop", "pinned": false }, - { - "name": "Bloomberg", - "icon": "http://is1.mzstatic.com/image/thumb/Purple71/v4/31/24/72/312472df-3d53-0acf-fc31-8a25682e528f/source/175x175bb.jpg", - "linkAppStore": "https://itunes.apple.com/us/app/bloomberg/id281941097?mt=8", - "linkPlayStore": "https://play.google.com/store/apps/details?id=com.bloomberg.android.plus&hl=en", - "infoLink": "https://www.techatbloomberg.com/blog/bloomberg-used-react-native-develop-new-consumer-app/", - "infoTitle": "How Bloomberg Used React Native to Develop its new Consumer App", - "pinned": false - }, { "name": "Blink", "icon": "https://lh3.googleusercontent.com/QaId7rFtOjAT-2tHVkKB4lebX_w4ujWiO7ZIDe3Hd99TfBmPmiZySbLbVJV65qs0ViM=w300-rw", diff --git a/website/src/react-native/index.js b/website/src/react-native/index.js index 2115d3e4051b15..ad012a11a0e4c0 100644 --- a/website/src/react-native/index.js +++ b/website/src/react-native/index.js @@ -8,17 +8,18 @@ */ 'use strict'; -var Hero = require('Hero'); -var Prism = require('Prism'); -var React = require('React'); -var Site = require('Site'); -var Metadata = require('Metadata'); +const Hero = require('Hero'); +const Metadata = require('Metadata'); +const Prism = require('Prism'); +const React = require('React'); +const ShowcaseAppIcon = require('ShowcaseAppIcon'); +const Site = require('Site'); const pinnedApps = Metadata.showcaseApps.filter(app => { return app.pinned; }); -var AppList = React.createClass({ +const AppList = React.createClass({ render: function() { return (
@@ -30,29 +31,16 @@ var AppList = React.createClass({ _renderApp: function(app, i) { return (
- {this._renderIcon(app)} +
); }, - - _renderIcon: function(app) { - return ( - - {app.name} - - ); - }, - - _renderTitle: function(app) { - return ( - -

{app.name}

- - ); - }, }); -var index = React.createClass({ +const index = React.createClass({ render: function() { return ( diff --git a/website/src/react-native/showcase.js b/website/src/react-native/showcase.js index dcf04162fd6843..e747cbbf07f722 100644 --- a/website/src/react-native/showcase.js +++ b/website/src/react-native/showcase.js @@ -8,9 +8,10 @@ */ 'use strict'; -var React = require('React'); -var Site = require('Site'); -var Metadata = require('Metadata'); +const Metadata = require('Metadata'); +const React = require('React'); +const ShowcaseAppIcon = require('ShowcaseAppIcon'); +const Site = require('Site'); /* * Thousands of applications use React Native, so we can't list all of them @@ -66,13 +67,7 @@ const featuredApps = showcaseApps.filter(app => { const apps = pinnedApps.concat(featuredApps); -var AppIcon = React.createClass({ - render: function() { - return {this.props.appName}; - } -}); - -var AppList = React.createClass({ +const AppList = React.createClass({ render: function() { return ( @@ -86,10 +81,13 @@ var AppList = React.createClass({ return (
- {this._renderAppIcon(app)} - {this._renderAppName(app)} + + {this._renderAppName(app.name)} {this._renderLinks(app)} - {this._renderInfo(app)} + {this._renderInfo(app.infoTitle, app.infoLink)}
); @@ -99,14 +97,14 @@ var AppList = React.createClass({ return {app.name}; }, - _renderAppName: function(app) { - return

{app.name}

; + _renderAppName: function(name) { + return

{name}

; }, - _renderInfo: function(app) { + _renderInfo: function(title, uri) { let info = null; - if (app.infoLink) { - info =

{app.infoTitle}

; + if (uri) { + info =

{title}

; } return ( @@ -132,7 +130,7 @@ var AppList = React.createClass({ }, }); -var showcase = React.createClass({ +const showcase = React.createClass({ render: function() { return (