From 99db9f2a42f6897de5e93f35ef664e45ab034553 Mon Sep 17 00:00:00 2001 From: Ankit Tiwari Date: Wed, 23 Sep 2020 19:55:33 -0700 Subject: [PATCH] Minor Code Improvements in RNTester (#29868) Summary: * Update single-letter variable names to be more descriptive * Remove event listener on component unmount * Add flow types * Refactor RNTesterNavbar to use descriptive component names Pull Request resolved: https://github.com/facebook/react-native/pull/29868 Reviewed By: hramos Differential Revision: D23598579 Pulled By: rickhanlonii fbshipit-source-id: c5cfc61d7b2fcb2942bf149d0a8ba0b58b0192e6 --- packages/rn-tester/js/RNTesterAppShared.js | 13 +- .../js/components/RNTesterBookmark.js | 38 ---- .../js/components/RNTesterDocumentationURL.js | 10 +- .../rn-tester/js/components/RNTesterNavbar.js | 173 ++++++++++-------- .../rn-tester/js/utils/testerStateUtils.js | 24 ++- 5 files changed, 127 insertions(+), 131 deletions(-) delete mode 100644 packages/rn-tester/js/components/RNTesterBookmark.js diff --git a/packages/rn-tester/js/RNTesterAppShared.js b/packages/rn-tester/js/RNTesterAppShared.js index 5d82b93e3e5..ee0c73677cf 100644 --- a/packages/rn-tester/js/RNTesterAppShared.js +++ b/packages/rn-tester/js/RNTesterAppShared.js @@ -139,13 +139,22 @@ const RNTesterApp = (): React.Node => { // Setup hardware back button press listener React.useEffect(() => { - BackHandler.addEventListener('hardwareBackPress', () => { + const handleHardwareBackPress = () => { if (openExample) { handleBackPress(); return true; } return false; - }); + }; + + BackHandler.addEventListener('hardwareBackPress', handleHardwareBackPress); + + return () => { + BackHandler.removeEventListener( + 'hardwareBackPress', + handleHardwareBackPress, + ); + }; }, [openExample, handleBackPress]); const handleExampleCardPress = React.useCallback( diff --git a/packages/rn-tester/js/components/RNTesterBookmark.js b/packages/rn-tester/js/components/RNTesterBookmark.js deleted file mode 100644 index 62142bd8ad7..00000000000 --- a/packages/rn-tester/js/components/RNTesterBookmark.js +++ /dev/null @@ -1,38 +0,0 @@ -/** - * Copyright (c) Facebook, Inc. and its affiliates. - * - * This source code is licensed under the MIT license found in the - * LICENSE file in the root directory of this source tree. - * - * @flow strict-local - * @format - */ - -'use strict'; - -import * as React from 'react'; -import type {RNTesterExample} from '../types/RNTesterTypes'; - -export type RNTesterBookmark = { - Components: {...}, - Api: {...}, - AddApi: (apiName: string, api: RNTesterExample) => mixed, - AddComponent: (componentName: string, component: RNTesterExample) => mixed, - RemoveApi: (apiName: string) => mixed, - RemoveComponent: (componentName: string) => mixed, - checkBookmark: (title: string, key: string) => mixed, -}; - -export const bookmarks: RNTesterBookmark = { - Components: {}, - Api: {}, - AddComponent: () => {}, - RemoveComponent: () => {}, - AddApi: () => {}, - RemoveApi: () => {}, - checkBookmark: () => {}, -}; - -export const RNTesterBookmarkContext: React.Context = React.createContext( - bookmarks, -); diff --git a/packages/rn-tester/js/components/RNTesterDocumentationURL.js b/packages/rn-tester/js/components/RNTesterDocumentationURL.js index 8d6d8423591..0a8b20823fb 100644 --- a/packages/rn-tester/js/components/RNTesterDocumentationURL.js +++ b/packages/rn-tester/js/components/RNTesterDocumentationURL.js @@ -5,15 +5,20 @@ * LICENSE file in the root directory of this source tree. * * @format + * @flow */ 'use strict'; -import React from 'react'; +import * as React from 'react'; import {Image, StyleSheet, TouchableOpacity} from 'react-native'; import openURLInBrowser from 'react-native/Libraries/Core/Devtools/openURLInBrowser'; -const RNTesterDocumentationURL = ({documentationURL}) => ( +type Props = $ReadOnly<{| + documentationURL: string, +|}>; + +const RNTesterDocumentationURL = ({documentationURL}: Props): React.Node => ( openURLInBrowser(documentationURL)}> @@ -28,7 +33,6 @@ export default RNTesterDocumentationURL; const styles = StyleSheet.create({ container: { - textDecorationLine: 'underline', position: 'absolute', bottom: 0, right: -15, diff --git a/packages/rn-tester/js/components/RNTesterNavbar.js b/packages/rn-tester/js/components/RNTesterNavbar.js index 1be08517c8b..24d703c00e4 100644 --- a/packages/rn-tester/js/components/RNTesterNavbar.js +++ b/packages/rn-tester/js/components/RNTesterNavbar.js @@ -13,6 +13,86 @@ import {Text, View, StyleSheet, Image, Pressable} from 'react-native'; import {RNTesterThemeContext} from './RNTesterTheme'; +const BookmarkTab = ({handleNavBarPress, isBookmarkActive, theme}) => ( + + + + handleNavBarPress({screen: 'bookmarks'})}> + + + + + + +); + +const NavbarButton = ({ + testID, + theme, + isActive, + activeImage, + inactiveImage, + label, + handlePress, + iconStyle, +}) => ( + + + + + {label} + + + +); + +const ComponentTab = ({isComponentActive, handleNavBarPress, theme}) => ( + handleNavBarPress({screen: 'components'})} + activeImage={require('./../assets/bottom-nav-components-icon-active.png')} + inactiveImage={require('./../assets/bottom-nav-components-icon-inactive.png')} + isActive={isComponentActive} + theme={theme} + iconStyle={styles.componentIcon} + /> +); + +const APITab = ({isAPIActive, handleNavBarPress, theme}) => ( + handleNavBarPress({screen: 'apis'})} + activeImage={require('./../assets/bottom-nav-apis-icon-active.png')} + inactiveImage={require('./../assets/bottom-nav-apis-icon-inactive.png')} + isActive={isAPIActive} + theme={theme} + iconStyle={styles.apiIcon} + /> +); + type Props = $ReadOnly<{| handleNavBarPress: (data: {screen: string}) => void, screen: string, @@ -33,84 +113,21 @@ const RNTesterNavbar = ({ return ( - handleNavBarPress({screen: 'components'})} - style={[styles.navButton, {backgroundColor: theme.BackgroundColor}]}> - - - - Components - - - - - - - - - handleNavBarPress({screen: 'bookmarks'})}> - - - - - - - - handleNavBarPress({screen: 'apis'})} - style={[styles.navButton, {backgroundColor: theme.BackgroundColor}]}> - - - - APIs - - - + + + ); diff --git a/packages/rn-tester/js/utils/testerStateUtils.js b/packages/rn-tester/js/utils/testerStateUtils.js index 3286155b24a..3dc729e2521 100644 --- a/packages/rn-tester/js/utils/testerStateUtils.js +++ b/packages/rn-tester/js/utils/testerStateUtils.js @@ -58,29 +58,33 @@ export const getExamplesListWithBookmarksAndRecentlyUsed = ({ return null; } - const components = RNTesterList.ComponentExamples.map(c => ({ - ...c, - isBookmarked: bookmarks.components.includes(c.key), + const components = RNTesterList.ComponentExamples.map(componentExample => ({ + ...componentExample, + isBookmarked: bookmarks.components.includes(componentExample.key), exampleType: Screens.COMPONENTS, })); const recentlyUsedComponents = recentlyUsed.components - .map(k => components.find(c => c.key === k)) + .map(recentComponentKey => + components.find(component => component.key === recentComponentKey), + ) .filter(Boolean); - const bookmarkedComponents = components.filter(c => c.isBookmarked); + const bookmarkedComponents = components.filter( + component => component.isBookmarked, + ); - const apis = RNTesterList.APIExamples.map(c => ({ - ...c, - isBookmarked: bookmarks.apis.includes(c.key), + const apis = RNTesterList.APIExamples.map(apiExample => ({ + ...apiExample, + isBookmarked: bookmarks.apis.includes(apiExample.key), exampleType: Screens.APIS, })); const recentlyUsedAPIs = recentlyUsed.apis - .map(k => apis.find(c => c.key === k)) + .map(recentAPIKey => apis.find(apiEample => apiEample.key === recentAPIKey)) .filter(Boolean); - const bookmarkedAPIs = apis.filter(c => c.isBookmarked); + const bookmarkedAPIs = apis.filter(apiEample => apiEample.isBookmarked); const examplesList: ExamplesList = { [Screens.COMPONENTS]: [