@fluentui-react-native/tester 0.59.38 → 0.60.0

package/src/FluentTester/TestComponents/Callout/CalloutTest.tsx

@@ -1,6 +1,15 @@
 import * as React from 'react';
 import { ScreenRect, Text, View, Switch, Picker, ScrollView } from 'react-native';
-import { Button, Callout, Separator, IFocusable, RestoreFocusEvent, DismissBehaviors, StealthButton } from '@fluentui/react-native';
+import {
+  Button,
+  Callout,
+  Separator,
+  IFocusable,
+  Pressable,
+  RestoreFocusEvent,
+  DismissBehaviors,
+  StealthButton,
+} from '@fluentui/react-native';
 import { CALLOUT_TESTPAGE } from './consts';
 import { Test, TestSection, PlatformStatus } from '../Test';
 import { E2ECalloutTest } from './CalloutE2ETest';
@@ -9,6 +18,8 @@ import { fluentTesterStyles } from '../Common/styles';
 const StandardCallout: React.FunctionComponent = () => {
   const [showStandardCallout, setShowStandardCallout] = React.useState(false);
   const [isStandardCalloutVisible, setIsStandardCalloutVisible] = React.useState(false);
+  const [openCalloutOnHoverAnchor, setOpenCalloutOnHoverAnchor] = React.useState(true);
+  const [calloutHovered, setCalloutHovered] = React.useState(false);
 
   const [shouldSetInitialFocus, setShouldSetInitialFocus] = React.useState(true);
   const onInitialFocusChange = React.useCallback((value) => setShouldSetInitialFocus(value), []);
@@ -59,32 +70,94 @@ const StandardCallout: React.FunctionComponent = () => {
   const decoyBtn1Ref = React.useRef<IFocusable>(null);
   const decoyBtn2Ref = React.useRef<IFocusable>(null);
   const [anchorRef, setAnchorRef] = React.useState(redTargetRef);
+  const [hoveredTargetsCount, setHoveredTargetsCount] = React.useState(0);
+  const [displayCountHoveredTargets, setDisplayCountHoveredTargets] = React.useState(0);
+
+  const anchorRefsInfo: { hoverCount: number; isCurrentAnchor: boolean[] } = React.useMemo(() => {
+    return {
+      hoverCount: displayCountHoveredTargets,
+      isCurrentAnchor: [
+        openCalloutOnHoverAnchor && isStandardCalloutVisible && anchorRef == redTargetRef,
+        openCalloutOnHoverAnchor && isStandardCalloutVisible && anchorRef == greenTargetRef,
+        openCalloutOnHoverAnchor && isStandardCalloutVisible && anchorRef == blueTargetRef,
+      ],
+    };
+  }, [anchorRef, displayCountHoveredTargets, isStandardCalloutVisible, openCalloutOnHoverAnchor]);
+
+  // Use a timer to update the targets count and avoid jittery updates of counts on-screen
+  React.useLayoutEffect(() => {
+    const timer = setTimeout(() => {
+      setDisplayCountHoveredTargets(hoveredTargetsCount);
+    }, 50);
+
+    return () => clearTimeout(timer);
+  }, [hoveredTargetsCount]);
+
+  React.useLayoutEffect(() => {
+    // The callout may be dismissed by multiple mechanisms, depending on its active invocation
+    // mechanisms.  In each of those dismissal routes, we use this function to reset the callout's
+    // state universally.
+    if (!showStandardCallout) {
+      setIsStandardCalloutVisible(false);
+      setCalloutHovered(false);
+    }
+  }, [showStandardCallout]);
 
   const toggleShowStandardCallout = React.useCallback(() => {
     setShowStandardCallout(!showStandardCallout);
+  }, [showStandardCallout]);
+
+  // Set up a LayoutEffect for hover callout mechanics including:
+  //   the toggle switch for hover callout behavior
+  //   multiple hover targets (i.e. the callout and its anchor)
+  //   a dismissal timer for closing the callout with no targets hovered
+  React.useLayoutEffect(() => {
+    if (!openCalloutOnHoverAnchor) {
+      setShowStandardCallout(false);
+    } else if (openCalloutOnHoverAnchor && hoveredTargetsCount > 0) {
+      setShowStandardCallout(true);
+    } else {
+      const timer = setTimeout(() => {
+        setShowStandardCallout(false);
+      }, 2000);
+      return () => clearTimeout(timer);
+    }
+    return undefined;
+  }, [openCalloutOnHoverAnchor, hoveredTargetsCount]);
+
+  const updateCalloutTargetsHoverState = React.useCallback(
+    (show: boolean, hoverAnchorRef: React.MutableRefObject<View>) => {
+      if (hoverAnchorRef !== undefined && hoverAnchorRef !== anchorRef) {
+        return;
+      }
 
-    // Unmounting a callout does not invoke onDismiss; onDismiss is only invoked
-    // for dismissals generated by the native app.  When toggling to 'show',
-    // the isVisible state will be corrected to 'true' by the onShow callback.
-    setIsStandardCalloutVisible(false);
-  }, [showStandardCallout, setIsStandardCalloutVisible, setShowStandardCallout]);
+      setHoveredTargetsCount(hoveredTargetsCount + (show ? 1 : -1));
+    },
+    [anchorRef, hoveredTargetsCount, setHoveredTargetsCount],
+  );
+
+  const calloutHoveredCallback = React.useCallback(
+    (isHovered: boolean) => {
+      updateCalloutTargetsHoverState(isHovered, undefined);
+      setCalloutHovered(isHovered);
+    },
+    [updateCalloutTargetsHoverState],
+  );
 
   const toggleCalloutRef = React.useCallback(() => {
     // Cycle the target ref between the RGB target views
     setAnchorRef(anchorRef === redTargetRef ? greenTargetRef : anchorRef === greenTargetRef ? blueTargetRef : redTargetRef);
-  }, [anchorRef, setAnchorRef]);
+  }, [anchorRef]);
 
   const onShowStandardCallout = React.useCallback(() => {
     setIsStandardCalloutVisible(true);
-  }, [setIsStandardCalloutVisible]);
+  }, []);
 
   const onDismissStandardCallout = React.useCallback(() => {
-    setIsStandardCalloutVisible(false);
-
     // setting the internal state to false will instigate unmounting the
     // zombie Callout control.
     setShowStandardCallout(false);
-  }, [setIsStandardCalloutVisible, setShowStandardCallout]);
+  }, []);
 
   const onRestoreFocusStandardCallout = React.useCallback(
     (restoreFocusEvent: RestoreFocusEvent) => {
@@ -125,6 +198,11 @@ const StandardCallout: React.FunctionComponent = () => {
     <View>
       <View style={{ flexDirection: 'row', paddingVertical: 5 }}>
         <View style={{ flexDirection: 'column', paddingHorizontal: 5 }}>
+          <View style={{ flexDirection: 'row' }}>
+            <Switch value={openCalloutOnHoverAnchor} onValueChange={setOpenCalloutOnHoverAnchor} />
+            <Text>Show Callout On Hover Anchor</Text>
+          </View>
+
           <View style={{ flexDirection: 'row' }}>
             <Switch value={shouldSetInitialFocus} onValueChange={onInitialFocusChange} />
             <Text>Set Initial Focus</Text>
@@ -189,7 +267,11 @@ const StandardCallout: React.FunctionComponent = () => {
         <Separator vertical />
 
         <View style={{ flexDirection: 'column', paddingHorizontal: 5 }}>
-          <Button content="Press for Callout" onClick={toggleShowStandardCallout} />
+          <Button
+            content={(openCalloutOnHoverAnchor ? 'Hover Color Anchor ' : 'Press Here ') + 'for Callout'}
+            onClick={toggleShowStandardCallout}
+            disabled={openCalloutOnHoverAnchor}
+          />
           <Text>
             <Text>Visibility: </Text>
             {isStandardCalloutVisible ? <Text style={{ color: 'green' }}>Visible</Text> : <Text style={{ color: 'red' }}>Not Visible</Text>}
@@ -199,9 +281,30 @@ const StandardCallout: React.FunctionComponent = () => {
         <Separator vertical />
 
         <View style={{ flexDirection: 'column', paddingHorizontal: 5 }}>
-          <View ref={redTargetRef} style={{ height: 20, width: 20, backgroundColor: 'red', padding: 5 }} />
-          <View ref={greenTargetRef} style={{ height: 20, width: 20, backgroundColor: 'green', padding: 5 }} />
-          <View ref={blueTargetRef} style={{ height: 20, width: 20, backgroundColor: 'blue', padding: 5 }} />
+          <Pressable
+            onHoverIn={() => updateCalloutTargetsHoverState(true, redTargetRef)}
+            onHoverOut={() => updateCalloutTargetsHoverState(false, redTargetRef)}
+          >
+            <View ref={redTargetRef} style={{ height: 40, width: 40, backgroundColor: 'red', padding: 5 }}>
+              {anchorRefsInfo.isCurrentAnchor[0] && <Text>{anchorRefsInfo.hoverCount}</Text>}
+            </View>
+          </Pressable>
+          <Pressable
+            onHoverIn={() => updateCalloutTargetsHoverState(true, greenTargetRef)}
+            onHoverOut={() => updateCalloutTargetsHoverState(false, greenTargetRef)}
+          >
+            <View ref={greenTargetRef} style={{ height: 40, width: 40, backgroundColor: 'green', padding: 5 }}>
+              {anchorRefsInfo.isCurrentAnchor[1] && <Text>{anchorRefsInfo.hoverCount}</Text>}
+            </View>
+          </Pressable>
+          <Pressable
+            onHoverIn={() => updateCalloutTargetsHoverState(true, blueTargetRef)}
+            onHoverOut={() => updateCalloutTargetsHoverState(false, blueTargetRef)}
+          >
+            <View ref={blueTargetRef} style={{ height: 40, width: 40, backgroundColor: 'blue', padding: 5 }}>
+              {anchorRefsInfo.isCurrentAnchor[2] && <Text style={{ color: 'white' }}>{anchorRefsInfo.hoverCount}</Text>}
+            </View>
+          </Pressable>
         </View>
       </View>
 
@@ -215,6 +318,7 @@ const StandardCallout: React.FunctionComponent = () => {
       {showStandardCallout && (
         <Callout
           {...{
+            doNotTakePointerCapture: openCalloutOnHoverAnchor ?? undefined,
             target: anchorRef,
             onDismiss: onDismissStandardCallout,
             onShow: onShowStandardCallout,
@@ -228,23 +332,25 @@ const StandardCallout: React.FunctionComponent = () => {
             ...(calloutDismissBehaviors && { dismissBehaviors: calloutDismissBehaviors }),
           }}
         >
-          {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>
-          )}
+          <Pressable onHoverIn={() => calloutHoveredCallback(true)} onHoverOut={() => calloutHoveredCallback(false)}>
+            {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 }, { backgroundColor: calloutHovered ? 'lightgreen' : 'pink' }]}>
+                <Button content="click to change anchor" onClick={toggleCalloutRef} />
+              </View>
+            )}
+          </Pressable>
         </Callout>
       )}
     </View>