From fcfde38aaf93a8f854f72aeab932a4163a74a735 Mon Sep 17 00:00:00 2001
From: Samuel Freiberg <32719011+samuelfreiberg@users.noreply.github.com>
Date: Wed, 20 Oct 2021 09:02:09 -0700
Subject: [PATCH] Adding ScrollView+Callout Example to Callout Testpage (#882)

* Yarn

* Merge

* Fixing repo

* Update package

* Merge

* Removing change file

* Adding callout+Scrollview to callout test page

* Cleaning up scrollview usage

* Cleaning test file

* Adding ability to change anchor

* Change files

* Integrated ScrollView with standard callout

* Fixing callout

* Fixing callout
---
 .../TestComponents/Callout/CalloutTest.tsx    | 53 ++++++++++++++++---
 .../TestComponents/Common/styles.ts           | 15 ++++++
 ...-279c241c-c209-4949-9433-f35a2af55074.json |  7 +++
 3 files changed, 67 insertions(+), 8 deletions(-)
 create mode 100644 change/@fluentui-react-native-tester-279c241c-c209-4949-9433-f35a2af55074.json

diff --git a/apps/fluent-tester/src/FluentTester/TestComponents/Callout/CalloutTest.tsx b/apps/fluent-tester/src/FluentTester/TestComponents/Callout/CalloutTest.tsx
index c9ee055ad7..435c99c2f2 100644
--- a/apps/fluent-tester/src/FluentTester/TestComponents/Callout/CalloutTest.tsx
+++ b/apps/fluent-tester/src/FluentTester/TestComponents/Callout/CalloutTest.tsx
@@ -1,8 +1,9 @@
 import * as React from 'react';
-import { ScreenRect, Text, View, Switch, Picker } from 'react-native';
-import { Button, Callout, Separator, IFocusable, RestoreFocusEvent, DismissBehaviors } from '@fluentui/react-native';
+import { ScreenRect, Text, View, Switch, Picker, ScrollView } from 'react-native';
+import { Button, Callout, Separator, IFocusable, RestoreFocusEvent, DismissBehaviors, StealthButton } from '@fluentui/react-native';
 import { CALLOUT_TESTPAGE } from './consts';
 import { Test, TestSection, PlatformStatus } from '../Test';
+import { fluentTesterStyles } from '../Common/styles';
 
 const standardCallout: React.FunctionComponent = () => {
   const [showStandardCallout, setShowStandardCallout] = React.useState(false);
@@ -100,6 +101,19 @@ const standardCallout: React.FunctionComponent = () => {
 
   const [selectedBorderWidth, setSelectedBorderWidth] = React.useState<number | undefined>(undefined);
 
+  const [showScrollViewCallout, setShowScrollViewCalout] = React.useState(false);
+  const [scrollviewContents, setScrollviewContents] = React.useState([1, 2, 3]);
+
+  const removeButton = React.useCallback(() => {
+    const tempArray = scrollviewContents;
+    tempArray.pop();
+    setScrollviewContents([...tempArray]);
+  }, [setScrollviewContents, scrollviewContents]);
+
+  const addButton = React.useCallback(() => {
+    setScrollviewContents(arr => [...arr, 1]);
+  }, [setScrollviewContents, scrollviewContents]);
+
   return (
     <View>
       <View style={{ flexDirection: 'row', paddingVertical: 5 }}>
@@ -129,6 +143,11 @@ const standardCallout: React.FunctionComponent = () => {
             <Text>Prevent Dismiss On Click Outside</Text>
           </View>
 
+          <View style={{ flexDirection: 'row' }}>
+            <Switch value={showScrollViewCallout} onValueChange={setShowScrollViewCalout} />
+            <Text>Enable ScrollView Callout</Text>
+          </View>
+
           <Picker
             prompt="Background Color"
             selectedValue={selectedBackgroundColor || colorDefault}
@@ -200,11 +219,29 @@ const standardCallout: React.FunctionComponent = () => {
             ...(selectedBackgroundColor && { backgroundColor: selectedBackgroundColor }),
             ...(selectedBorderWidth && { borderWidth: selectedBorderWidth }),
             ...(calloutDismissBehaviors && { dismissBehaviors: calloutDismissBehaviors }),
-          }}
-        >
-          <View style={{ padding: 20 }}>
-            <Button content="click to change anchor" onClick={toggleCalloutRef} />
-          </View>
+          }}>
+          {showScrollViewCallout ?
+            <View style={fluentTesterStyles.scrollViewContainer}>
+              <ScrollView contentContainerStyle={fluentTesterStyles.scrollViewStyle} showsVerticalScrollIndicator={true}>
+                <StealthButton content="click to change anchor" onClick={toggleCalloutRef} />
+                <StealthButton content="Click to add a button" style={fluentTesterStyles.testListItem} onClick={addButton} />
+                <StealthButton content="Click to remove a button" style={fluentTesterStyles.testListItem} onClick={removeButton} />
+                  {scrollviewContents.map((value) => {
+                    return (
+                      <StealthButton
+                        key={value}
+                        content="Button"
+                        style={fluentTesterStyles.testListItem}
+                      />
+                    )
+                  })}
+              </ScrollView>
+            </View>
+          : //else
+            <View style={{ padding: 20 }}>
+              <Button content="click to change anchor" onClick={toggleCalloutRef} />
+            </View>
+          }
         </Callout>
       )}
     </View>
@@ -275,7 +312,7 @@ const calloutSections: TestSection[] = [
   {
     name: 'Customized Usage',
     component: customCallout,
-  },
+  }
 ];
 
 export const CalloutTest: React.FunctionComponent = () => {
diff --git a/apps/fluent-tester/src/FluentTester/TestComponents/Common/styles.ts b/apps/fluent-tester/src/FluentTester/TestComponents/Common/styles.ts
index be05f3ebbe..50b9028fdf 100644
--- a/apps/fluent-tester/src/FluentTester/TestComponents/Common/styles.ts
+++ b/apps/fluent-tester/src/FluentTester/TestComponents/Common/styles.ts
@@ -87,6 +87,21 @@ export const fluentTesterStyles = StyleSheet.create({
     alignItems: 'stretch',
   },
 
+  scrollViewStyle: {
+    flexDirection: 'column',
+    alignItems: 'stretch',
+    // height: 200,
+    // width: 200,
+  },
+
+  scrollViewContainer: {
+    height: 250,
+    width: 150,
+    flexShrink: 0,
+    flexGrow: 0,
+    flexDirection: 'column',
+  },
+
   testListItem: {
     width: '100%',
     borderRadius: 0,
diff --git a/change/@fluentui-react-native-tester-279c241c-c209-4949-9433-f35a2af55074.json b/change/@fluentui-react-native-tester-279c241c-c209-4949-9433-f35a2af55074.json
new file mode 100644
index 0000000000..de07217b50
--- /dev/null
+++ b/change/@fluentui-react-native-tester-279c241c-c209-4949-9433-f35a2af55074.json
@@ -0,0 +1,7 @@
+{
+  "type": "minor",
+  "comment": "Adding callout+Scrollview to callout test page",
+  "packageName": "@fluentui-react-native/tester",
+  "email": "safreibe@microsoft.com",
+  "dependentChangeType": "patch"
+}