Move out FlatList-onEndReached

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

Reviewed By: charlesbdudley

Differential Revision: D30816722

fbshipit-source-id: 4ee233c7674ed0f5707d9d98388b8c36af900641

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

@@ -96,7 +96,7 @@ export function FlatList_inverted(): React.Node {
   };
 
   return (
-    <FlatListExampleWithForwardedRef
+    <BaseFlatListExample
       exampleProps={exampleProps}
       testOutput={output}
       onTest={onTest}
@@ -139,7 +139,7 @@ export function FlatList_contentInset(): React.Node {
         ]}>
         <Text style={styles.titleText}>Menu</Text>
       </View>
-      <FlatListExampleWithForwardedRef
+      <BaseFlatListExample
         exampleProps={exampleProps}
         testOutput={output}
         onTest={onTest}
@@ -148,30 +148,6 @@ export function FlatList_contentInset(): React.Node {
     </>
   );
 }
-export function FlatList_onEndReached(): React.Node {
-  const [output, setOutput] = React.useState('');
-  const exampleProps = {
-    onEndReached: info => setOutput('onEndReached'),
-    onEndReachedThreshold: 0,
-  };
-  const ref = React.useRef(null);
-
-  const onTest = () => {
-    const scrollResponder = ref?.current?.getScrollResponder();
-    if (scrollResponder != null) {
-      scrollResponder.scrollToEnd();
-    }
-  };
-
-  return (
-    <FlatListExampleWithForwardedRef
-      ref={ref}
-      exampleProps={exampleProps}
-      testOutput={output}
-      onTest={onTest}
-    />
-  );
-}
 
 export function FlatList_withSeparators(): React.Node {
   const exampleProps = {
@@ -179,9 +155,7 @@ export function FlatList_withSeparators(): React.Node {
   };
   const ref = React.useRef(null);
 
-  return (
-    <FlatListExampleWithForwardedRef ref={ref} exampleProps={exampleProps} />
-  );
+  return <BaseFlatListExample ref={ref} exampleProps={exampleProps} />;
 }
 
 export function FlatList_onViewableItemsChanged(props: {
@@ -217,13 +191,13 @@ export function FlatList_onViewableItemsChanged(props: {
       : null;
 
   return (
-    <FlatListExampleWithForwardedRef
+    <BaseFlatListExample
       ref={ref}
       exampleProps={exampleProps}
       onTest={onTest}
       testOutput={output}>
       {offScreen === true ? <View style={styles.offScreen} /> : null}
-    </FlatListExampleWithForwardedRef>
+    </BaseFlatListExample>
   );
 }
 
@@ -235,38 +209,41 @@ type Props = {
   children?: ?React.Node,
 };
 
-const FlatListExampleWithForwardedRef = React.forwardRef(
-  (props: Props, ref) => {
-    return (
-      <View style={styles.container}>
-        {props.testOutput != null ? (
-          <View testID="test_container" style={styles.testContainer}>
-            <Text style={styles.output} numberOfLines={1} testID="output">
-              {props.testOutput}
-            </Text>
-            {props.onTest != null ? (
-              <Button
-                testID="start_test"
-                onPress={props.onTest}
-                title={props.testLabel ?? 'Test'}
-              />
-            ) : null}
-          </View>
-        ) : null}
-        {props.children}
-        <FlatList
-          {...props.exampleProps}
-          ref={ref}
-          testID="flat_list"
-          data={DATA}
-          keyExtractor={(item, index) => item + index}
-          style={styles.list}
-          renderItem={Item}
-        />
-      </View>
-    );
-  },
-);
+const BaseFlatListExample = React.forwardRef((props: Props, ref) => {
+  return (
+    <View style={styles.container}>
+      {props.testOutput != null ? (
+        <View testID="test_container" style={styles.testContainer}>
+          <Text style={styles.output} numberOfLines={1} testID="output">
+            {props.testOutput}
+          </Text>
+          {props.onTest != null ? (
+            <Button
+              testID="start_test"
+              onPress={props.onTest}
+              title={props.testLabel ?? 'Test'}
+            />
+          ) : null}
+        </View>
+      ) : null}
+      {props.children}
+      <FlatList
+        {...props.exampleProps}
+        ref={ref}
+        testID="flat_list"
+        data={DATA}
+        keyExtractor={(item, index) => item + index}
+        style={styles.list}
+        renderItem={Item}
+      />
+    </View>
+  );
+});
+
+export default (BaseFlatListExample: React.AbstractComponent<
+  Props,
+  FlatList<string>,
+>);
 
 const styles = StyleSheet.create({
   item: {

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

@@ -9,20 +9,41 @@
  */
 
 'use strict';
-import {FlatList_onEndReached} from './FlatListExamples';
-const React = require('react');
+import type {RNTesterModuleExample} from '../../types/RNTesterTypes';
+import BaseFlatListExample from './BaseFlatListExample';
+import * as React from 'react';
 
-exports.title = 'FlatList onEndReached';
-exports.testTitle = 'Test onEndReached callback';
-exports.category = 'ListView';
-exports.documentationURL = 'https://reactnative.dev/docs/flatlist';
-exports.description =
-  'Scroll to end of list or tap Test button to see `onEndReached` triggered.';
-exports.examples = [
-  {
-    title: 'FlatList onEndReached',
-    render: function(): React.Element<typeof FlatList_onEndReached> {
-      return <FlatList_onEndReached />;
-    },
+export function FlatList_onEndReached(): React.Node {
+  const [output, setOutput] = React.useState('');
+  const exampleProps = {
+    onEndReached: info => setOutput('onEndReached'),
+    onEndReachedThreshold: 0,
+  };
+  const ref = React.useRef(null);
+
+  const onTest = () => {
+    const scrollResponder = ref?.current?.getScrollResponder();
+    if (scrollResponder != null) {
+      scrollResponder.scrollToEnd();
+    }
+  };
+
+  return (
+    <BaseFlatListExample
+      ref={ref}
+      exampleProps={exampleProps}
+      testOutput={output}
+      onTest={onTest}
+    />
+  );
+}
+
+export default ({
+  title: 'onEndReached',
+  name: 'onEndReached',
+  description:
+    'Scroll to end of list or tap Test button to see `onEndReached` triggered.',
+  render: function(): React.Element<typeof FlatList_onEndReached> {
+    return <FlatList_onEndReached />;
   },
-];
+}: RNTesterModuleExample);

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

@@ -9,7 +9,7 @@
  */
 
 'use strict';
-import {FlatList_onViewableItemsChanged} from './FlatListExamples';
+import {FlatList_onViewableItemsChanged} from './BaseFlatListExample';
 const React = require('react');
 
 const VIEWABILITY_CONFIG = {

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

@@ -9,7 +9,7 @@
  */
 
 'use strict';
-import {FlatList_withSeparators} from './FlatListExamples';
+import {FlatList_withSeparators} from './BaseFlatListExample';
 const React = require('react');
 
 exports.title = 'FlatList with Separators';

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

@@ -10,6 +10,7 @@
 
 import type {RNTesterModule} from '../../types/RNTesterTypes';
 import BasicExample from './FlatList-basic';
+import OnEndReachedExample from './FlatList-onEndReached';
 
 export default ({
   framework: 'React',
@@ -18,5 +19,5 @@ export default ({
   documentationURL: 'https://reactnative.dev/docs/flatlist',
   description: 'Performant, scrollable list of data.',
   showIndividualExamples: true,
-  examples: [BasicExample],
+  examples: [BasicExample, OnEndReachedExample],
 }: RNTesterModule);

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

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

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

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