Move onViewableItemsChanged under FLatListExampleIndex

Summary: Changelog: [Internal] Refactor FlatList examples, move onViewableItemsChanged under FlatList index

Reviewed By: charlesbdudley

Differential Revision: D30816718

fbshipit-source-id: 87c0500f0852fa6608a133cca008347f62b7010b

Author: Luna Wei

packages/rn-tester/js/examples/FlatList/BaseFlatListExample.js

@@ -18,9 +18,6 @@ import {
 } from 'react-native';
 
 import * as React from 'react';
-type FlatListProps = React.ElementProps<typeof FlatList>;
-
-type ViewabilityConfig = $PropertyType<FlatListProps, 'viewabilityConfig'>;
 
 const DATA = [
   'Pizza',
@@ -91,49 +88,6 @@ export function FlatList_withSeparators(): React.Node {
   return <BaseFlatListExample ref={ref} exampleProps={exampleProps} />;
 }
 
-export function FlatList_onViewableItemsChanged(props: {
-  viewabilityConfig: ViewabilityConfig,
-  offScreen?: ?boolean,
-  horizontal?: ?boolean,
-  useScrollRefScroll?: ?boolean,
-}): React.Node {
-  const {viewabilityConfig, offScreen, horizontal, useScrollRefScroll} = props;
-  const [output, setOutput] = React.useState('');
-  const onViewableItemsChanged = React.useCallback(
-    info =>
-      setOutput(
-        info.viewableItems
-          .filter(viewToken => viewToken.index != null && viewToken.isViewable)
-          .map(viewToken => viewToken.item)
-          .join(', '),
-      ),
-    [setOutput],
-  );
-  const exampleProps = {
-    onViewableItemsChanged,
-    viewabilityConfig,
-    horizontal,
-  };
-
-  const ref = React.useRef(null);
-  const onTest =
-    useScrollRefScroll === true
-      ? () => {
-          ref?.current?.getScrollResponder()?.scrollToEnd();
-        }
-      : null;
-
-  return (
-    <BaseFlatListExample
-      ref={ref}
-      exampleProps={exampleProps}
-      onTest={onTest}
-      testOutput={output}>
-      {offScreen === true ? <View style={styles.offScreen} /> : null}
-    </BaseFlatListExample>
-  );
-}
-
 type Props = {
   exampleProps: $Shape<React.ElementConfig<typeof FlatList>>,
   onTest?: ?() => void,

packages/rn-tester/js/examples/FlatList/FlatList-onViewableItemsChanged.js

@@ -9,30 +9,75 @@
  */
 
 'use strict';
-import {FlatList_onViewableItemsChanged} from './BaseFlatListExample';
-const React = require('react');
+import type {RNTesterModuleExample} from '../../types/RNTesterTypes';
+import BaseFlatListExample from './BaseFlatListExample';
+import {StyleSheet, View, FlatList} from 'react-native';
+import * as React from 'react';
+
+type FlatListProps = React.ElementProps<typeof FlatList>;
+type ViewabilityConfig = $PropertyType<FlatListProps, 'viewabilityConfig'>;
 
 const VIEWABILITY_CONFIG = {
   minimumViewTime: 1000,
   viewAreaCoveragePercentThreshold: 100,
   waitForInteraction: true,
 };
 
-exports.title = 'FlatList onViewableItemsChanged';
-exports.testTitle = 'Test onViewableItemsChanged callback';
-exports.category = 'ListView';
-exports.documentationURL = 'https://reactnative.dev/docs/sectionlist';
-exports.description =
-  'Scroll list to see what items are returned in `onViewableItemsChanged` callback.';
-exports.examples = [
-  {
-    title: 'FlatList onViewableItemsChanged',
-    render: function(): React.Element<typeof FlatList_onViewableItemsChanged> {
-      return (
-        <FlatList_onViewableItemsChanged
-          viewabilityConfig={VIEWABILITY_CONFIG}
-        />
-      );
-    },
+export function FlatList_onViewableItemsChanged(props: {
+  viewabilityConfig: ViewabilityConfig,
+  offScreen?: ?boolean,
+  horizontal?: ?boolean,
+  useScrollRefScroll?: ?boolean,
+}): React.Node {
+  const {viewabilityConfig, offScreen, horizontal, useScrollRefScroll} = props;
+  const [output, setOutput] = React.useState('');
+  const onViewableItemsChanged = React.useCallback(
+    info =>
+      setOutput(
+        info.viewableItems
+          .filter(viewToken => viewToken.index != null && viewToken.isViewable)
+          .map(viewToken => viewToken.item)
+          .join(', '),
+      ),
+    [setOutput],
+  );
+  const exampleProps = {
+    onViewableItemsChanged,
+    viewabilityConfig,
+    horizontal,
+  };
+
+  const ref = React.useRef(null);
+  const onTest =
+    useScrollRefScroll === true
+      ? () => {
+          ref?.current?.getScrollResponder()?.scrollToEnd();
+        }
+      : null;
+
+  return (
+    <BaseFlatListExample
+      ref={ref}
+      exampleProps={exampleProps}
+      onTest={onTest}
+      testOutput={output}>
+      {offScreen === true ? <View style={styles.offScreen} /> : null}
+    </BaseFlatListExample>
+  );
+}
+
+const styles = StyleSheet.create({
+  offScreen: {
+    height: 1000,
   },
-];
+});
+
+export default ({
+  title: 'onViewableItemsChanged',
+  name: 'onViewableItemsChanged',
+  description:
+    'Scroll list to see what items are returned in `onViewableItemsChanged` callback.',
+  render: () => (
+    <FlatList_onViewableItemsChanged viewabilityConfig={VIEWABILITY_CONFIG} />
+  ),
+}: RNTesterModuleExample);

packages/rn-tester/js/examples/FlatList/FlatListExampleIndex.js

@@ -13,6 +13,7 @@ import BasicExample from './FlatList-basic';
 import OnEndReachedExample from './FlatList-onEndReached';
 import ContentInsetExample from './FlatList-contentInset';
 import InvertedExample from './FlatList-inverted';
+import onViewableItemsChangedExample from './FlatList-onViewableItemsChanged';
 
 export default ({
   framework: 'React',
@@ -26,5 +27,6 @@ export default ({
     OnEndReachedExample,
     ContentInsetExample,
     InvertedExample,
+    onViewableItemsChangedExample,
   ],
 }: RNTesterModule);

packages/rn-tester/js/utils/RNTesterList.android.js

@@ -34,11 +34,6 @@ const Components: Array<RNTesterModuleInfo> = [
     module: require('../examples/FlatList/FlatList-withSeparators'),
     category: 'ListView',
   },
-  {
-    key: 'FlatList-onViewableItemsChanged',
-    module: require('../examples/FlatList/FlatList-onViewableItemsChanged'),
-    category: 'ListView',
-  },
   {
     key: 'ImageExample',
     category: 'Basic',

packages/rn-tester/js/utils/RNTesterList.ios.js

@@ -36,11 +36,6 @@ const Components: Array<RNTesterModuleInfo> = [
     module: require('../examples/FlatList/FlatList-withSeparators'),
     category: 'ListView',
   },
-  {
-    key: 'FlatList-onViewableItemsChanged',
-    module: require('../examples/FlatList/FlatList-onViewableItemsChanged'),
-    category: 'ListView',
-  },
   {
     key: 'ImageExample',
     module: require('../examples/Image/ImageExample'),