@fluentui-react-native/tester 0.103.0 → 0.103.1

package/src/TestComponents/FocusZone/FocusZoneTest.tsx

@@ -1,6 +1,6 @@
 import * as React from 'react';
-import { View, ScrollView } from 'react-native';
-import { FocusZone, FocusZoneDirection, Text } from '@fluentui/react-native';
+import { View, ScrollView, Pressable } from 'react-native';
+import { FocusZone, FocusZoneDirection, Text, useOnPressWithFocus } from '@fluentui/react-native';
 import { ButtonV1 as Button } from '@fluentui-react-native/button';
 import { Checkbox, CheckboxProps } from '@fluentui-react-native/experimental-checkbox';
 import { Test, TestSection, PlatformStatus } from '../Test';
@@ -87,6 +87,50 @@ const FocusZoneNoProps: React.FunctionComponent = () => {
   );
 };
 
+const TinyBox = () => {
+  const ref = React.useRef<View>();
+  const onPress = useOnPressWithFocus(ref, null);
+
+  return <Pressable focusable style={focusZoneTestStyles.smallBoxStyle} ref={ref} onPress={onPress} />;
+};
+
+const WideBox = () => {
+  const ref = React.useRef<View>();
+  const onPress = useOnPressWithFocus(ref, null);
+
+  return <Pressable focusable style={focusZoneTestStyles.wideBoxStyle} ref={ref} onPress={onPress} />;
+};
+
+const TinyText = () => {
+  return (
+    <Text selectable style={focusZoneTestStyles.smallBoxStyle}>
+      Hi
+    </Text>
+  );
+};
+
+const WideText = () => {
+  return (
+    <Text selectable style={focusZoneTestStyles.wideBoxStyle}>
+      Hello world
+    </Text>
+  );
+};
+
+const DifferentSizesTest: React.FunctionComponent = () => {
+  return (
+    <FocusZone focusZoneDirection="bidirectional">
+      <View style={focusZoneTestStyles.dashedBorder}>
+        <WideBox />
+        <TinyBox />
+        <WideBox />
+        <TinyText />
+        <WideText />
+      </View>
+    </FocusZone>
+  );
+};
+
 const NestedFocusZone: React.FunctionComponent = () => {
   return (
     <FocusZoneListWrapper>
@@ -132,6 +176,10 @@ const focusZoneSections: TestSection[] = [
     name: 'FocusZone with no props',
     component: FocusZoneNoProps,
   },
+  {
+    name: 'Different Sized Children',
+    component: DifferentSizesTest,
+  },
   {
     name: 'Nested FocusZone',
     component: NestedFocusZone,

package/src/TestComponents/FocusZone/styles.ts

@@ -43,6 +43,18 @@ export const focusZoneTestStyles = StyleSheet.create({
     marginHorizontal: 20,
     marginBottom: 100,
   },
+  smallBoxStyle: {
+    width: 20,
+    height: 20,
+    backgroundColor: 'lightgrey',
+    margin: 5,
+  },
+  wideBoxStyle: {
+    width: 150,
+    height: 20,
+    backgroundColor: 'lightgrey',
+    margin: 5,
+  },
 });
 
 export const GridButton = Button.compose({