diff --git a/packages/rn-tester/js/RNTesterApp.ios.js b/packages/rn-tester/js/RNTesterApp.ios.js index 77a53983811..e81f1b9c394 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 1fca9c76e4b..de690b08564 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 744c4bb89a9..00000000000 --- 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 a8d9f1b1c9d..18e1c65ebcd 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 00000000000..c20e4383a54 --- /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 74873e564ac..8c4c3d9f5be 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 b508bc0dd91..477717fef1f 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 644ce149c92..5b4926d1293 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 e0b2a23ebe5..cfa3d0c3b17 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 6ce07985c71..e5dd4b8d8b2 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 6b744ccaa79..65ca5f354ec 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 38df5c33700..f7cae64a876 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 53df2bb5ae4..dfd2fefca2a 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 faef13b9365..69d2a0ddd86 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 b14d346be47..b0fe9e0ec5e 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 a8638b7d544..1a6de0a2631 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 74ffbe0e07f..79242e6e872 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 5f40eeab288..1563823d779 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 c4ab1844387..18d4d39e5da 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 2b935d58e47..965ef60b27e 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 c5a43251ab3..ac9c8392310 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 9551a9a96fc..0847f6c944a 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 5a31407a030..aae93ec1579 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 3466b8acb5b..1fb36ce6eb5 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 3088829d09c..8f09b55883b 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 dcaa6330a30..f3a58071057 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 5eb3afea15b..2292288ee01 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 b34b1b1f212..cd32905baf0 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 a990dfad0cb..fe5b5d6940a 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: []},