Adding ScrollView+Callout Example to Callout Testpage (microsoft#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
hansenyy · Oct 20, 2021 · fcfde38 · fcfde38
1 parent 9880b04
commit fcfde38
Show file tree

Hide file tree

Showing 3 changed files with 67 additions and 8 deletions.
diff --git 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
@@ -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
@@ -0,0 +1,7 @@
+{
+  "type": "minor",
+  "comment": "Adding callout+Scrollview to callout test page",
+  "packageName": "@fluentui-react-native/tester",
+  "email": "[email protected]",
+  "dependentChangeType": "patch"
+}