From fa3243ad33c5963f6f5d7fcf40b61b70f22122ca Mon Sep 17 00:00:00 2001 From: Luna Wei Date: Thu, 1 Jul 2021 14:33:45 -0700 Subject: [PATCH] Rename things in RNTester Summary: Changelog: [Internal] - Rename some types and components in RNTester to support work for tertiary levels of navigation. module = component | api moduleExample = an example of a certain feature a module Reviewed By: kacieb Differential Revision: D29381875 fbshipit-source-id: c348bcbb73aaf95e85928bb14080a097e685cc78 --- packages/rn-tester/js/RNTesterApp.ios.js | 13 +- packages/rn-tester/js/RNTesterAppShared.js | 67 +++++----- .../js/components/RNTesterExampleContainer.js | 102 --------------- .../js/components/RNTesterExampleFilter.js | 1 - .../js/components/RNTesterModuleContainer.js | 122 ++++++++++++++++++ ...erExampleList.js => RNTesterModuleList.js} | 12 +- .../js/components/createExamplePage.js | 8 +- .../js/examples/Alert/AlertIOSExample.js | 4 +- .../js/examples/Animated/AnimatedExample.js | 4 +- .../ComposeAnimationsWithEasingExample.js | 4 +- .../Animated/ContinuousInteractionsExample.js | 4 +- .../js/examples/Animated/FadeInViewExample.js | 4 +- .../js/examples/Animated/LoopingExample.js | 4 +- .../js/examples/Animated/MovingBoxExample.js | 4 +- .../Animated/RotatingImagesExample.js | 4 +- .../Animated/TransformBounceExample.js | 4 +- .../js/examples/Modal/ModalExample.js | 4 +- .../js/examples/Modal/ModalOnShow.js | 4 +- .../js/examples/Modal/ModalPresentation.js | 4 +- .../examples/ScrollView/ScrollViewExample.js | 4 +- .../SectionList/SectionListExample.js | 1 + .../TextInput/TextInputExample.android.js | 4 +- .../TextInput/TextInputExample.ios.js | 4 +- .../TextInput/TextInputSharedExamples.js | 4 +- packages/rn-tester/js/types/RNTesterTypes.js | 15 ++- .../js/utils/RNTesterList.android.js | 14 +- .../rn-tester/js/utils/RNTesterList.ios.js | 12 +- .../rn-tester/js/utils/RNTesterReducer.js | 11 +- .../rn-tester/js/utils/testerStateUtils.js | 8 +- 29 files changed, 238 insertions(+), 212 deletions(-) delete mode 100644 packages/rn-tester/js/components/RNTesterExampleContainer.js create mode 100644 packages/rn-tester/js/components/RNTesterModuleContainer.js rename packages/rn-tester/js/components/{RNTesterExampleList.js => RNTesterModuleList.js} (96%) diff --git a/packages/rn-tester/js/RNTesterApp.ios.js b/packages/rn-tester/js/RNTesterApp.ios.js index 77a5398381..e81f1b9c39 100644 --- a/packages/rn-tester/js/RNTesterApp.ios.js +++ b/packages/rn-tester/js/RNTesterApp.ios.js @@ -12,10 +12,10 @@ import {AppRegistry} from 'react-native'; import React from 'react'; import SnapshotViewIOS from './examples/Snapshot/SnapshotViewIOS.ios'; -import RNTesterExampleContainer from './components/RNTesterExampleContainer'; +import RNTesterModuleContainer from './components/RNTesterModuleContainer'; import RNTesterList from './utils/RNTesterList'; import RNTesterApp from './RNTesterAppShared'; -import type {RNTesterExample} from './types/RNTesterTypes'; +import type {RNTesterModuleInfo} from './types/RNTesterTypes'; AppRegistry.registerComponent('SetPropertiesExampleApp', () => require('./examples/SetPropertiesExample/SetPropertiesExampleApp'), @@ -26,15 +26,18 @@ AppRegistry.registerComponent('RootViewSizeFlexibilityExampleApp', () => AppRegistry.registerComponent('RNTesterApp', () => RNTesterApp); // Register suitable examples for snapshot tests -RNTesterList.ComponentExamples.concat(RNTesterList.APIExamples).forEach( - (Example: RNTesterExample) => { +RNTesterList.Components.concat(RNTesterList.APIs).forEach( + (Example: RNTesterModuleInfo) => { const ExampleModule = Example.module; if (ExampleModule.displayName) { class Snapshotter extends React.Component<{...}> { render() { return ( - + {}} + /> ); } diff --git a/packages/rn-tester/js/RNTesterAppShared.js b/packages/rn-tester/js/RNTesterAppShared.js index 1fca9c76e4..de690b0856 100644 --- a/packages/rn-tester/js/RNTesterAppShared.js +++ b/packages/rn-tester/js/RNTesterAppShared.js @@ -17,8 +17,8 @@ import { } from 'react-native'; import * as React from 'react'; -import RNTesterExampleContainer from './components/RNTesterExampleContainer'; -import RNTesterExampleList from './components/RNTesterExampleList'; +import RNTesterModuleContainer from './components/RNTesterModuleContainer'; +import RNTesterModuleList from './components/RNTesterModuleList'; import RNTesterNavBar from './components/RNTesterNavbar'; import RNTesterList from './utils/RNTesterList'; import { @@ -56,17 +56,17 @@ type ExampleListsContainerProps = $ReadOnly<{| title: string, examplesList: ExamplesList, toggleBookmark: (args: {exampleType: string, key: string}) => mixed, - handleExampleCardPress: (args: {exampleType: string, key: string}) => mixed, + handleModuleCardPress: (args: {exampleType: string, key: string}) => mixed, isVisible: boolean, |}>; -const ExampleListsContainer = ({ +const ModuleListsContainer = ({ theme, screen, title, examplesList, toggleBookmark, - handleExampleCardPress, + handleModuleCardPress, isVisible, }: ExampleListsContainerProps) => { const isBookmarkEmpty = examplesList.bookmarks.length === 0; @@ -75,27 +75,27 @@ const ExampleListsContainer = ({
- - {isBookmarkEmpty ? ( ) : ( - )} @@ -111,7 +111,7 @@ const RNTesterApp = (): React.Node => { ); const colorScheme = useColorScheme(); - const {openExample, screen, bookmarks, recentlyUsed} = state; + const {activeModuleKey, screen, bookmarks, recentlyUsed} = state; React.useEffect(() => { getInitialStateFromAsyncStorage(APP_STATE_KEY).then( @@ -131,15 +131,15 @@ const RNTesterApp = (): React.Node => { ); const handleBackPress = React.useCallback(() => { - if (openExample) { + if (activeModuleKey != null) { dispatch({type: RNTesterActionsType.BACK_BUTTON_PRESS}); } - }, [dispatch, openExample]); + }, [dispatch, activeModuleKey]); // Setup hardware back button press listener React.useEffect(() => { const handleHardwareBackPress = () => { - if (openExample) { + if (activeModuleKey) { handleBackPress(); return true; } @@ -154,12 +154,12 @@ const RNTesterApp = (): React.Node => { handleHardwareBackPress, ); }; - }, [openExample, handleBackPress]); + }, [activeModuleKey, handleBackPress]); - const handleExampleCardPress = React.useCallback( + const handleModuleCardPress = React.useCallback( ({exampleType, key}) => { dispatch({ - type: RNTesterActionsType.EXAMPLE_CARD_PRESS, + type: RNTesterActionsType.MODULE_CARD_PRESS, data: {exampleType, key}, }); }, @@ -192,7 +192,8 @@ const RNTesterApp = (): React.Node => { return null; } - const ExampleModule = openExample && RNTesterList.Modules[openExample]; + const activeModule = + activeModuleKey != null ? RNTesterList.Modules[activeModuleKey] : null; const title = Screens.COMPONENTS ? 'Components' : Screens.APIS @@ -201,31 +202,31 @@ const RNTesterApp = (): React.Node => { return ( - {ExampleModule && ( + {activeModule != null ? (
- + + ) : ( + )} - - diff --git a/packages/rn-tester/js/components/RNTesterExampleContainer.js b/packages/rn-tester/js/components/RNTesterExampleContainer.js deleted file mode 100644 index 744c4bb89a..0000000000 --- a/packages/rn-tester/js/components/RNTesterExampleContainer.js +++ /dev/null @@ -1,102 +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. - * - * @format - */ - -const React = require('react'); -const {Platform} = require('react-native'); -const RNTesterBlock = require('./RNTesterBlock'); -const RNTesterExampleFilter = require('./RNTesterExampleFilter'); - -const invariant = require('invariant'); -import ExamplePage from './ExamplePage'; - -class RNTesterExampleContainer extends React.Component { - renderExample(example, i) { - // Filter platform-specific examples - const {description, platform} = example; - let {title} = example; - if (platform) { - if (Platform.OS !== platform) { - return null; - } - title += ' (' + platform + ' only)'; - } - return ( - - {example.render()} - - ); - } - - render(): React.Element { - const {module} = this.props; - if (module.simpleExampleContainer) { - invariant( - module.examples.length === 1, - 'If noExampleContainer is specified, only one example is allowed', - ); - return ( - - {module.examples[0].render()} - - ); - } - if (module.examples.length === 1) { - return ( - - {module.examples[0].render()} - - ); - } - - const filter = ({example, filterRegex}) => filterRegex.test(example.title); - - const sections = [ - { - data: module.examples, - title: 'EXAMPLES', - key: 'e', - }, - ]; - - return ( - - - filteredSections[0].data.map(this.renderExample) - } - /> - - ); - } -} - -module.exports = RNTesterExampleContainer; diff --git a/packages/rn-tester/js/components/RNTesterExampleFilter.js b/packages/rn-tester/js/components/RNTesterExampleFilter.js index a8d9f1b1c9..18e1c65ebc 100644 --- a/packages/rn-tester/js/components/RNTesterExampleFilter.js +++ b/packages/rn-tester/js/components/RNTesterExampleFilter.js @@ -18,7 +18,6 @@ const { Image, } = require('react-native'); import {RNTesterThemeContext} from './RNTesterTheme'; -import type {RNTesterExample} from '../types/RNTesterTypes'; import type {SectionData} from '../types/RNTesterTypes'; diff --git a/packages/rn-tester/js/components/RNTesterModuleContainer.js b/packages/rn-tester/js/components/RNTesterModuleContainer.js new file mode 100644 index 0000000000..c20e4383a5 --- /dev/null +++ b/packages/rn-tester/js/components/RNTesterModuleContainer.js @@ -0,0 +1,122 @@ +/** + * 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. + * + * @format + */ + +const React = require('react'); +const {Platform} = require('react-native'); +const RNTesterBlock = require('./RNTesterBlock'); +const RNTesterExampleFilter = require('./RNTesterExampleFilter'); + +const invariant = require('invariant'); +import ExamplePage from './ExamplePage'; +import type { + RNTesterModule, + RNTesterModuleExample, +} from '../types/RNTesterTypes'; + +type Props = { + module: RNTesterModule, + example?: ?RNTesterModuleExample, + onExampleCardPress: (exampleName: string) => mixed, +}; + +function getExampleTitle(title, platform) { + return platform != null ? `${title} (${platform} only)` : title; +} + +export default function RNTesterModuleContainer(props: Props): React.Node { + const {module, example} = props; + const renderExample = (e, i) => { + // Filter platform-specific es + const {description, platform} = e; + let {title} = e; + if (platform != null && Platform.OS !== platform) { + return null; + } + return ( + + {e.render()} + + ); + }; + + if (module.simpleExampleContainer) { + invariant( + module.examples.length === 1, + 'If noExampleContainer is specified, only one example is allowed', + ); + return ( + + {module.examples[0].render()} + + ); + } + + if (module.examples.length === 1) { + return ( + + {module.examples[0].render()} + + ); + } + + const filter = ({example: e, filterRegex}) => filterRegex.test(e.title); + + const sections = [ + { + data: module.examples, + title: 'EXAMPLES', + key: 'e', + }, + ]; + + return ( + + {module.showIndividualExamples === true && example != null ? ( + + {example.render()} + + ) : ( + + filteredSections[0].data.map(renderExample) + } + /> + )} + + ); +} diff --git a/packages/rn-tester/js/components/RNTesterExampleList.js b/packages/rn-tester/js/components/RNTesterModuleList.js similarity index 96% rename from packages/rn-tester/js/components/RNTesterExampleList.js rename to packages/rn-tester/js/components/RNTesterModuleList.js index 74873e564a..8c4c3d9f5b 100644 --- a/packages/rn-tester/js/components/RNTesterExampleList.js +++ b/packages/rn-tester/js/components/RNTesterModuleList.js @@ -24,7 +24,7 @@ const { import {RNTesterThemeContext} from './RNTesterTheme'; -const ExampleCard = ({ +const ExampleModuleRow = ({ onShowUnderlay, onHideUnderlay, item, @@ -117,8 +117,8 @@ const renderSectionHeader = ({section}) => ( ); -const RNTesterExampleList: React$AbstractComponent = React.memo( - ({sections, toggleBookmark, handleExampleCardPress}) => { +const RNTesterModuleList: React$AbstractComponent = React.memo( + ({sections, toggleBookmark, handleModuleCardPress}) => { const theme = React.useContext(RNTesterThemeContext); const filter = ({example, filterRegex, category}) => @@ -128,13 +128,13 @@ const RNTesterExampleList: React$AbstractComponent = React.memo( const renderListItem = ({item, section, separators}) => { return ( - ); }; @@ -250,4 +250,4 @@ const styles = StyleSheet.create({ }, }); -module.exports = RNTesterExampleList; +module.exports = RNTesterModuleList; diff --git a/packages/rn-tester/js/components/createExamplePage.js b/packages/rn-tester/js/components/createExamplePage.js index b508bc0dd9..477717fef1 100644 --- a/packages/rn-tester/js/components/createExamplePage.js +++ b/packages/rn-tester/js/components/createExamplePage.js @@ -12,16 +12,16 @@ const React = require('react'); -const RNTesterExampleContainer = require('./RNTesterExampleContainer'); -import type {RNTesterExample} from '../types/RNTesterTypes'; +import RNTesterModuleContainer from './RNTesterModuleContainer'; +import type {RNTesterModule} from '../types/RNTesterTypes'; const createExamplePage = function( title: ?string, - exampleModule: RNTesterExample, + exampleModule: RNTesterModule, ): React.ComponentType { class ExamplePage extends React.Component<{...}> { render() { - return ; + return ; } } diff --git a/packages/rn-tester/js/examples/Alert/AlertIOSExample.js b/packages/rn-tester/js/examples/Alert/AlertIOSExample.js index 644ce149c9..5b4926d129 100644 --- a/packages/rn-tester/js/examples/Alert/AlertIOSExample.js +++ b/packages/rn-tester/js/examples/Alert/AlertIOSExample.js @@ -21,7 +21,7 @@ const { const {examples: SharedAlertExamples} = require('./AlertExample'); -import type {RNTesterExampleModuleItem} from '../../types/RNTesterTypes'; +import type {RNTesterModuleExample} from '../../types/RNTesterTypes'; type Props = $ReadOnly<{||}>; type State = {|promptValue: ?string|}; @@ -205,4 +205,4 @@ exports.examples = ([ ); }, }, -]: RNTesterExampleModuleItem[]); +]: Array); diff --git a/packages/rn-tester/js/examples/Animated/AnimatedExample.js b/packages/rn-tester/js/examples/Animated/AnimatedExample.js index e0b2a23ebe..cfa3d0c3b1 100644 --- a/packages/rn-tester/js/examples/Animated/AnimatedExample.js +++ b/packages/rn-tester/js/examples/Animated/AnimatedExample.js @@ -8,7 +8,7 @@ * @format */ -import type {RNTesterExampleModule} from '../../types/RNTesterTypes'; +import type {RNTesterModule} from '../../types/RNTesterTypes'; import RotatingImagesExample from './RotatingImagesExample'; import ContinuousInteractionsExample from './ContinuousInteractionsExample'; import LoopingExample from './LoopingExample'; @@ -34,4 +34,4 @@ export default ({ LoopingExample, ContinuousInteractionsExample, ], -}: RNTesterExampleModule); +}: RNTesterModule); diff --git a/packages/rn-tester/js/examples/Animated/ComposeAnimationsWithEasingExample.js b/packages/rn-tester/js/examples/Animated/ComposeAnimationsWithEasingExample.js index 6ce07985c7..e5dd4b8d8b 100644 --- a/packages/rn-tester/js/examples/Animated/ComposeAnimationsWithEasingExample.js +++ b/packages/rn-tester/js/examples/Animated/ComposeAnimationsWithEasingExample.js @@ -8,7 +8,7 @@ * @format */ -import type {RNTesterExampleModuleItem} from '../../types/RNTesterTypes'; +import type {RNTesterModuleExample} from '../../types/RNTesterTypes'; import * as React from 'react'; import RNTesterButton from '../../components/RNTesterButton'; import {Text, Easing, StyleSheet, View, Animated} from 'react-native'; @@ -133,4 +133,4 @@ export default ({ ); }, -}: RNTesterExampleModuleItem); +}: RNTesterModuleExample); diff --git a/packages/rn-tester/js/examples/Animated/ContinuousInteractionsExample.js b/packages/rn-tester/js/examples/Animated/ContinuousInteractionsExample.js index 6b744ccaa7..65ca5f354e 100644 --- a/packages/rn-tester/js/examples/Animated/ContinuousInteractionsExample.js +++ b/packages/rn-tester/js/examples/Animated/ContinuousInteractionsExample.js @@ -8,7 +8,7 @@ * @format */ -import type {RNTesterExampleModuleItem} from '../../types/RNTesterTypes'; +import type {RNTesterModuleExample} from '../../types/RNTesterTypes'; import * as React from 'react'; import {Text} from 'react-native'; @@ -18,4 +18,4 @@ export default ({ 'values, interrupting and transitioning ' + 'animations, etc.': string), render: (): React.Node => Checkout the Gratuitous Animation App!, -}: RNTesterExampleModuleItem); +}: RNTesterModuleExample); diff --git a/packages/rn-tester/js/examples/Animated/FadeInViewExample.js b/packages/rn-tester/js/examples/Animated/FadeInViewExample.js index 38df5c3370..f7cae64a87 100644 --- a/packages/rn-tester/js/examples/Animated/FadeInViewExample.js +++ b/packages/rn-tester/js/examples/Animated/FadeInViewExample.js @@ -8,7 +8,7 @@ * @format */ -import type {RNTesterExampleModuleItem} from '../../types/RNTesterTypes'; +import type {RNTesterModuleExample} from '../../types/RNTesterTypes'; import * as React from 'react'; import RNTesterButton from '../../components/RNTesterButton'; import {Text, StyleSheet, View, Animated} from 'react-native'; @@ -79,4 +79,4 @@ export default ({ 'bring opacity from 0 to 1 when the component ' + 'mounts.': string), render: (): React.Node => , -}: RNTesterExampleModuleItem); +}: RNTesterModuleExample); diff --git a/packages/rn-tester/js/examples/Animated/LoopingExample.js b/packages/rn-tester/js/examples/Animated/LoopingExample.js index 53df2bb5ae..dfd2fefca2 100644 --- a/packages/rn-tester/js/examples/Animated/LoopingExample.js +++ b/packages/rn-tester/js/examples/Animated/LoopingExample.js @@ -9,7 +9,7 @@ */ import RNTesterButton from '../../components/RNTesterButton'; -import type {RNTesterExampleModuleItem} from '../../types/RNTesterTypes'; +import type {RNTesterModuleExample} from '../../types/RNTesterTypes'; import {Animated, StyleSheet, Text, View} from 'react-native'; import * as React from 'react'; import {useEffect, useState} from 'react'; @@ -19,7 +19,7 @@ export default ({ name: 'loopingView', description: 'Native looping animation that shrinks and fades out a view.', render: () => , -}: RNTesterExampleModuleItem); +}: RNTesterModuleExample); function LoopingExample(props: {}): React.Node { const [running, setRunning] = useState(false); diff --git a/packages/rn-tester/js/examples/Animated/MovingBoxExample.js b/packages/rn-tester/js/examples/Animated/MovingBoxExample.js index faef13b936..69d2a0ddd8 100644 --- a/packages/rn-tester/js/examples/Animated/MovingBoxExample.js +++ b/packages/rn-tester/js/examples/Animated/MovingBoxExample.js @@ -8,7 +8,7 @@ * @format */ -import type {RNTesterExampleModuleItem} from '../../types/RNTesterTypes'; +import type {RNTesterModuleExample} from '../../types/RNTesterTypes'; import * as React from 'react'; import RNTesterButton from '../../components/RNTesterButton'; import {Text, StyleSheet, View, Animated} from 'react-native'; @@ -113,4 +113,4 @@ export default ({ description: 'Click arrow buttons to move the box. Then hide the box and reveal it again. The box will stay its last position. Reset will reset the animation to its starting position', render: (): React.Node => , -}: RNTesterExampleModuleItem); +}: RNTesterModuleExample); diff --git a/packages/rn-tester/js/examples/Animated/RotatingImagesExample.js b/packages/rn-tester/js/examples/Animated/RotatingImagesExample.js index b14d346be4..b0fe9e0ec5 100644 --- a/packages/rn-tester/js/examples/Animated/RotatingImagesExample.js +++ b/packages/rn-tester/js/examples/Animated/RotatingImagesExample.js @@ -11,7 +11,7 @@ import * as React from 'react'; import RNTesterButton from '../../components/RNTesterButton'; import {Animated, View, StyleSheet} from 'react-native'; -import type {RNTesterExampleModuleItem} from '../../types/RNTesterTypes'; +import type {RNTesterModuleExample} from '../../types/RNTesterTypes'; const styles = StyleSheet.create({ rotatingImage: { @@ -88,4 +88,4 @@ export default ({ title: 'Rotating Images', description: 'Simple Animated.Image rotation.', render: RotatingImagesExample, -}: RNTesterExampleModuleItem); +}: RNTesterModuleExample); diff --git a/packages/rn-tester/js/examples/Animated/TransformBounceExample.js b/packages/rn-tester/js/examples/Animated/TransformBounceExample.js index a8638b7d54..1a6de0a263 100644 --- a/packages/rn-tester/js/examples/Animated/TransformBounceExample.js +++ b/packages/rn-tester/js/examples/Animated/TransformBounceExample.js @@ -11,7 +11,7 @@ import * as React from 'react'; import RNTesterButton from '../../components/RNTesterButton'; import {Text, StyleSheet, View, Animated} from 'react-native'; -import type {RNTesterExampleModuleItem} from '../../types/RNTesterTypes'; +import type {RNTesterModuleExample} from '../../types/RNTesterTypes'; const styles = StyleSheet.create({ content: { @@ -96,4 +96,4 @@ export default ({ ); }, -}: RNTesterExampleModuleItem); +}: RNTesterModuleExample); diff --git a/packages/rn-tester/js/examples/Modal/ModalExample.js b/packages/rn-tester/js/examples/Modal/ModalExample.js index 74ffbe0e07..79242e6e87 100644 --- a/packages/rn-tester/js/examples/Modal/ModalExample.js +++ b/packages/rn-tester/js/examples/Modal/ModalExample.js @@ -10,7 +10,7 @@ import ModalPresentation from './ModalPresentation'; import ModalOnShow from './ModalOnShow'; -import type {RNTesterExampleModuleItem} from '../../types/RNTesterTypes'; +import type {RNTesterModuleExample} from '../../types/RNTesterTypes'; export const displayName = (undefined: ?string); export const framework = 'React'; @@ -21,4 +21,4 @@ export const description = 'Component for presenting modal views.'; export const examples = ([ ModalPresentation, ModalOnShow, -]: Array); +]: Array); diff --git a/packages/rn-tester/js/examples/Modal/ModalOnShow.js b/packages/rn-tester/js/examples/Modal/ModalOnShow.js index 5f40eeab28..1563823d77 100644 --- a/packages/rn-tester/js/examples/Modal/ModalOnShow.js +++ b/packages/rn-tester/js/examples/Modal/ModalOnShow.js @@ -10,7 +10,7 @@ import * as React from 'react'; import {Modal, Pressable, StyleSheet, Text, View} from 'react-native'; -import type {RNTesterExampleModuleItem} from '../../types/RNTesterTypes'; +import type {RNTesterModuleExample} from '../../types/RNTesterTypes'; function ModalOnShowOnDismiss(): React.Node { const [modalShowComponent, setModalShowComponent] = React.useState(true); @@ -134,4 +134,4 @@ export default ({ description: 'onShow and onDismiss (iOS only) callbacks are called when modals is shown/dissmissed', render: (): React.Node => , -}: RNTesterExampleModuleItem); +}: RNTesterModuleExample); diff --git a/packages/rn-tester/js/examples/Modal/ModalPresentation.js b/packages/rn-tester/js/examples/Modal/ModalPresentation.js index c4ab184438..18d4d39e5d 100644 --- a/packages/rn-tester/js/examples/Modal/ModalPresentation.js +++ b/packages/rn-tester/js/examples/Modal/ModalPresentation.js @@ -10,7 +10,7 @@ import * as React from 'react'; import {Modal, Platform, StyleSheet, Switch, Text, View} from 'react-native'; -import type {RNTesterExampleModuleItem} from '../../types/RNTesterTypes'; +import type {RNTesterModuleExample} from '../../types/RNTesterTypes'; import RNTOption from '../../components/RNTOption'; const RNTesterButton = require('../../components/RNTesterButton'); @@ -258,4 +258,4 @@ export default ({ name: 'basic', description: 'Modals can be presented with or without animation', render: (): React.Node => , -}: RNTesterExampleModuleItem); +}: RNTesterModuleExample); diff --git a/packages/rn-tester/js/examples/ScrollView/ScrollViewExample.js b/packages/rn-tester/js/examples/ScrollView/ScrollViewExample.js index 2b935d58e4..965ef60b27 100644 --- a/packages/rn-tester/js/examples/ScrollView/ScrollViewExample.js +++ b/packages/rn-tester/js/examples/ScrollView/ScrollViewExample.js @@ -24,7 +24,7 @@ import { import nullthrows from 'nullthrows'; import {useState, useCallback} from 'react'; -import type {RNTesterExampleModuleItem} from '../../types/RNTesterTypes'; +import type {RNTesterModuleExample} from '../../types/RNTesterTypes'; import type {ViewStyleProp} from 'react-native/Libraries/StyleSheet/StyleSheet'; import ScrollViewPressableStickyHeaderExample from './ScrollViewPressableStickyHeaderExample'; @@ -266,7 +266,7 @@ exports.examples = ([ return ; }, }, -]: Array); +]: Array); if (Platform.OS === 'ios') { exports.examples.push({ diff --git a/packages/rn-tester/js/examples/SectionList/SectionListExample.js b/packages/rn-tester/js/examples/SectionList/SectionListExample.js index c5a43251ab..ac9c839231 100644 --- a/packages/rn-tester/js/examples/SectionList/SectionListExample.js +++ b/packages/rn-tester/js/examples/SectionList/SectionListExample.js @@ -342,6 +342,7 @@ exports.title = 'SectionList'; exports.category = 'ListView'; exports.documentationURL = 'https://reactnative.dev/docs/sectionlist'; exports.description = 'Performant, scrollable list of data.'; +exports.showIndividualExamples = true; exports.examples = [ { title: 'Simple scrollable list', diff --git a/packages/rn-tester/js/examples/TextInput/TextInputExample.android.js b/packages/rn-tester/js/examples/TextInput/TextInputExample.android.js index 9551a9a96f..0847f6c944 100644 --- a/packages/rn-tester/js/examples/TextInput/TextInputExample.android.js +++ b/packages/rn-tester/js/examples/TextInput/TextInputExample.android.js @@ -23,7 +23,7 @@ const { const TextInputSharedExamples = require('./TextInputSharedExamples.js'); -import type {RNTesterExampleModuleItem} from '../../types/RNTesterTypes'; +import type {RNTesterModuleExample} from '../../types/RNTesterTypes'; class ToggleDefaultPaddingExample extends React.Component< $FlowFixMeProps, @@ -424,4 +424,4 @@ exports.examples = ([ return ; }, }, -]: Array); +]: Array); diff --git a/packages/rn-tester/js/examples/TextInput/TextInputExample.ios.js b/packages/rn-tester/js/examples/TextInput/TextInputExample.ios.js index 5a31407a03..aae93ec157 100644 --- a/packages/rn-tester/js/examples/TextInput/TextInputExample.ios.js +++ b/packages/rn-tester/js/examples/TextInput/TextInputExample.ios.js @@ -27,7 +27,7 @@ import type {KeyboardType} from 'react-native/Libraries/Components/TextInput/Tex const TextInputSharedExamples = require('./TextInputSharedExamples.js'); -import type {RNTesterExampleModuleItem} from '../../types/RNTesterTypes'; +import type {RNTesterModuleExample} from '../../types/RNTesterTypes'; class WithLabel extends React.Component<$FlowFixMeProps> { render() { @@ -816,4 +816,4 @@ exports.examples = ([ ); }, }, -]: Array); +]: Array); diff --git a/packages/rn-tester/js/examples/TextInput/TextInputSharedExamples.js b/packages/rn-tester/js/examples/TextInput/TextInputSharedExamples.js index 3466b8acb5..1fb36ce6eb 100644 --- a/packages/rn-tester/js/examples/TextInput/TextInputSharedExamples.js +++ b/packages/rn-tester/js/examples/TextInput/TextInputSharedExamples.js @@ -21,7 +21,7 @@ const { StyleSheet, } = require('react-native'); -import type {RNTesterExampleModuleItem} from '../../types/RNTesterTypes'; +import type {RNTesterModuleExample} from '../../types/RNTesterTypes'; const styles = StyleSheet.create({ default: { @@ -666,4 +666,4 @@ module.exports = ([ ); }, }, -]: Array); +]: Array); diff --git a/packages/rn-tester/js/types/RNTesterTypes.js b/packages/rn-tester/js/types/RNTesterTypes.js index 3088829d09..8f09b55883 100644 --- a/packages/rn-tester/js/types/RNTesterTypes.js +++ b/packages/rn-tester/js/types/RNTesterTypes.js @@ -10,7 +10,7 @@ import * as React from 'react'; -export type RNTesterExampleModuleItem = $ReadOnly<{| +export type RNTesterModuleExample = $ReadOnly<{| name?: string, title: string, platform?: string, @@ -18,7 +18,7 @@ export type RNTesterExampleModuleItem = $ReadOnly<{| render: () => React.Node, |}>; -export type RNTesterExampleModule = $ReadOnly<{| +export type RNTesterModule = $ReadOnly<{| title: string, testTitle?: ?string, description: string, @@ -26,15 +26,16 @@ export type RNTesterExampleModule = $ReadOnly<{| documentationURL?: ?string, category?: ?string, framework?: string, - examples: Array, + examples: Array, simpleExampleContainer?: ?boolean, category?: string, documentationURL?: string, + showIndividualExamples?: boolean, |}>; -export type RNTesterExample = $ReadOnly<{| +export type RNTesterModuleInfo = $ReadOnly<{| key: string, - module: RNTesterExampleModule, + module: RNTesterModule, category?: string, supportsTVOS?: boolean, documentationURL?: string, @@ -45,7 +46,7 @@ export type RNTesterExample = $ReadOnly<{| export type SectionData = { key: string, title: string, - data: Array, + data: Array, }; export type ExamplesList = $ReadOnly<{| @@ -59,7 +60,7 @@ export type ScreenTypes = 'components' | 'apis' | 'bookmarks' | null; export type ComponentList = null | {components: string[], apis: string[]}; export type RNTesterState = { - openExample: null | string, + activeModuleKey: null | string, screen: ScreenTypes, bookmarks: ComponentList, recentlyUsed: ComponentList, diff --git a/packages/rn-tester/js/utils/RNTesterList.android.js b/packages/rn-tester/js/utils/RNTesterList.android.js index dcaa6330a3..f3a5807105 100644 --- a/packages/rn-tester/js/utils/RNTesterList.android.js +++ b/packages/rn-tester/js/utils/RNTesterList.android.js @@ -10,9 +10,9 @@ 'use strict'; -import type {RNTesterExample} from '../types/RNTesterTypes'; +import type {RNTesterModuleInfo} from '../types/RNTesterTypes'; -const ComponentExamples: Array = [ +const Components: Array = [ { key: 'ActivityIndicatorExample', category: 'UI', @@ -161,7 +161,7 @@ const ComponentExamples: Array = [ }, ]; -const APIExamples: Array = [ +const APIs: Array = [ { key: 'AccessibilityExample', category: 'Basic', @@ -310,7 +310,7 @@ const APIExamples: Array = [ ]; if (global.__turboModuleProxy) { - APIExamples.push({ + APIs.push({ key: 'TurboModuleExample', category: 'Basic', module: require('../examples/TurboModule/TurboModuleExample'), @@ -319,13 +319,13 @@ if (global.__turboModuleProxy) { const Modules: any = {}; -APIExamples.concat(ComponentExamples).forEach(Example => { +APIs.concat(Components).forEach(Example => { Modules[Example.key] = Example.module; }); const RNTesterList = { - APIExamples, - ComponentExamples, + APIs, + Components, Modules, }; diff --git a/packages/rn-tester/js/utils/RNTesterList.ios.js b/packages/rn-tester/js/utils/RNTesterList.ios.js index 5eb3afea15..2292288ee0 100644 --- a/packages/rn-tester/js/utils/RNTesterList.ios.js +++ b/packages/rn-tester/js/utils/RNTesterList.ios.js @@ -10,9 +10,9 @@ 'use strict'; -import type {RNTesterExample} from '../types/RNTesterTypes'; +import type {RNTesterModuleInfo} from '../types/RNTesterTypes'; -const ComponentExamples: Array = [ +const Components: Array = [ { key: 'ActivityIndicatorExample', category: 'UI', @@ -196,7 +196,7 @@ const ComponentExamples: Array = [ }, ]; -const APIExamples: Array = [ +const APIs: Array = [ { key: 'AccessibilityExample', module: require('../examples/Accessibility/AccessibilityExample'), @@ -358,13 +358,13 @@ const APIExamples: Array = [ const Modules: {...} = {}; -APIExamples.concat(ComponentExamples).forEach(Example => { +APIs.concat(Components).forEach(Example => { Modules[Example.key] = Example.module; }); const RNTesterList = { - APIExamples, - ComponentExamples, + APIs, + Components, Modules, }; diff --git a/packages/rn-tester/js/utils/RNTesterReducer.js b/packages/rn-tester/js/utils/RNTesterReducer.js index b34b1b1f21..cd32905baf 100644 --- a/packages/rn-tester/js/utils/RNTesterReducer.js +++ b/packages/rn-tester/js/utils/RNTesterReducer.js @@ -13,9 +13,9 @@ import type {RNTesterState, ComponentList} from '../types/RNTesterTypes'; export const RNTesterActionsType = { INIT_FROM_STORAGE: 'INIT_FROM_STORAGE', NAVBAR_PRESS: 'NAVBAR_PRESS', - EXAMPLE_CARD_PRESS: 'EXAMPLE_CARD_PRESS', BOOKMARK_PRESS: 'BOOKMARK_PRESS', BACK_BUTTON_PRESS: 'BACK_BUTTON_PRESS', + MODULE_CARD_PRESS: 'MODULE_CARD_PRESS', }; const getUpdatedBookmarks = ({ @@ -76,13 +76,13 @@ export const RNTesterReducer = ( case RNTesterActionsType.NAVBAR_PRESS: return { ...state, - openExample: null, + activeModuleKey: null, screen: action.data.screen, }; - case RNTesterActionsType.EXAMPLE_CARD_PRESS: + case RNTesterActionsType.MODULE_CARD_PRESS: return { ...state, - openExample: action.data.key, + activeModuleKey: action.data.key, recentlyUsed: getUpdatedRecentlyUsed({ exampleType: action.data.exampleType, key: action.data.key, @@ -99,9 +99,10 @@ export const RNTesterReducer = ( }), }; case RNTesterActionsType.BACK_BUTTON_PRESS: + // Go back to module or list return { ...state, - openExample: null, + activeModuleKey: null, }; default: throw new Error(`Invalid action type ${action.type}`); diff --git a/packages/rn-tester/js/utils/testerStateUtils.js b/packages/rn-tester/js/utils/testerStateUtils.js index a990dfad0c..fe5b5d6940 100644 --- a/packages/rn-tester/js/utils/testerStateUtils.js +++ b/packages/rn-tester/js/utils/testerStateUtils.js @@ -25,7 +25,7 @@ export const Screens = { }; export const initialState: RNTesterState = { - openExample: null, + activeModuleKey: null, screen: null, bookmarks: null, recentlyUsed: null, @@ -56,7 +56,7 @@ export const getExamplesListWithBookmarksAndRecentlyUsed = ({ return null; } - const components = RNTesterList.ComponentExamples.map(componentExample => ({ + const components = RNTesterList.Components.map(componentExample => ({ ...componentExample, isBookmarked: bookmarks.components.includes(componentExample.key), exampleType: Screens.COMPONENTS, @@ -72,7 +72,7 @@ export const getExamplesListWithBookmarksAndRecentlyUsed = ({ component => component.isBookmarked, ); - const apis = RNTesterList.APIExamples.map(apiExample => ({ + const apis = RNTesterList.APIs.map(apiExample => ({ ...apiExample, isBookmarked: bookmarks.apis.includes(apiExample.key), exampleType: Screens.APIS, @@ -133,7 +133,7 @@ export const getInitialStateFromAsyncStorage = async ( if (!initialStateString) { return { - openExample: null, + activeModuleKey: null, screen: Screens.COMPONENTS, bookmarks: {components: [], apis: []}, recentlyUsed: {components: [], apis: []},