refactor: added variant switching

kirillzyusko · Oct 29, 2023 · 11807ec · 11807ec
1 parent 3044e02
commit 11807ec
Show file tree

Hide file tree

Showing 5 changed files with 123 additions and 29 deletions.
diff --git a/FabricExample/src/components/TextInput/index.tsx b/FabricExample/src/components/TextInput/index.tsx
@@ -7,7 +7,7 @@ const TextInput = (props: TextInputProps) => {
       placeholderTextColor="#6c6c6c"
       style={styles.container}
       multiline
-      numberOfLines={2}
+      numberOfLines={10}
       {...props}
       placeholder={`${props.placeholder} (${props.keyboardType === 'default' ? 'text' : 'numeric'})`}
     />

diff --git a/FabricExample/src/screens/Examples/AwareScrollViewStickyFooter/index.tsx b/FabricExample/src/screens/Examples/AwareScrollViewStickyFooter/index.tsx
@@ -1,29 +1,58 @@
-import React, { useCallback, useMemo, useState } from 'react';
+import React, { useCallback, useEffect, useMemo, useState } from 'react';
 import { LayoutChangeEvent, View, Text, Button } from 'react-native';
+import { StackScreenProps } from '@react-navigation/stack';
 import { useResizeMode, KeyboardStickyView } from 'react-native-keyboard-controller';
 import { useSafeAreaInsets } from 'react-native-safe-area-context';
 
+import { ExamplesStackParamList } from '../../../navigation/ExamplesStack';
 import KeyboardAwareScrollView from '../../../components/AwareScrollView';
 import TextInput from '../../../components/TextInput';
 import { styles } from './styles';
 
-export default function AwareScrollViewStickyFooter() {
+type Props = StackScreenProps<ExamplesStackParamList>;
+
+const variants = ['v1', 'v2', 'v3'] as const;
+type Variant = typeof variants[number];
+
+export default function AwareScrollViewStickyFooter({ navigation }: Props) {
   useResizeMode();
 
   const { bottom } = useSafeAreaInsets();
   const [footerHeight, setFooterHeight] = useState(0);
+  const [variant, setVariant] = useState<Variant>("v1");
 
   const handleLayout = useCallback((evt: LayoutChangeEvent) => {
     setFooterHeight(evt.nativeEvent.layout.height);
   }, []);
-  const offset = useMemo(() => ({closed: 0, opened: bottom }), [bottom]);
+  const offset = useMemo(() => ({closed: 0, opened: variant === "v1" ? 0 : bottom }), [bottom, variant]);
+  const offsetV3 = useMemo(() => ({closed: -50, opened: bottom - 25}), [bottom]);
+
+  useEffect(() => {
+    navigation.setOptions({
+      headerRight: () => (
+        <Text
+          style={styles.header}
+          onPress={() => {
+            const index = variants.indexOf(variant);
+            setVariant(
+              variants[index === variants.length - 1 ? 0 : index + 1]
+            );
+          }}
+        >
+          {variant}
+        </Text>
+      ),
+    });
+  }, [variant]);
+
+  const v1v2 = variant === "v1" || variant === "v2";
 
   return (
-    <View style={[styles.pageContainer, { paddingBottom: bottom }]}>
+    <View style={[styles.pageContainer, { paddingBottom: variant === "v1" ? 0 : bottom }]}>
       <KeyboardAwareScrollView
         style={styles.container}
         contentContainerStyle={styles.content}
-        bottomOffset={footerHeight + 50}
+        bottomOffset={(v1v2 ? footerHeight : 0) + 50}
         keyboardShouldPersistTaps="handled"
       >
         {new Array(10).fill(0).map((_, i) => (
@@ -34,15 +63,19 @@ export default function AwareScrollViewStickyFooter() {
           />
         ))}
       </KeyboardAwareScrollView>
-      <KeyboardStickyView offset={offset}>
-        <View onLayout={handleLayout} style={styles.footer}>
-          <Text style={styles.footerText}>A mocked sticky footer</Text>
-          <Button title="Click me" />
-        </View>
-          </KeyboardStickyView>
-      {/*<KeyboardStickyView offset={{closed: -50, opened: bottom - 25}}>
-        <View style={{position: 'absolute', bottom: 0, right: 30, justifyContent: "flex-end", width: 60, height: 60, borderRadius: 30, backgroundColor: "#002099"}} />
-          </KeyboardStickyView>*/}
+      {v1v2 && (
+        <KeyboardStickyView offset={offset}>
+          <View onLayout={handleLayout} style={styles.footer}>
+            <Text style={styles.footerText}>A mocked sticky footer</Text>
+            <Button title="Click me" />
+          </View>
+        </KeyboardStickyView>
+      )}
+      {variant === "v3" && (
+        <KeyboardStickyView offset={offsetV3}>
+          <View style={styles.circle} />
+        </KeyboardStickyView>
+      )}
     </View>
   );
 }
diff --git a/FabricExample/src/screens/Examples/AwareScrollViewStickyFooter/styles.ts b/FabricExample/src/screens/Examples/AwareScrollViewStickyFooter/styles.ts
@@ -23,4 +23,18 @@ export const styles = StyleSheet.create({
     color: 'white',
     fontWeight: 'bold',
   },
+  circle: {
+    position: 'absolute',
+    bottom: 0,
+    right: 30,
+    justifyContent: "flex-end",
+    width: 60,
+    height: 60,
+    borderRadius: 30,
+    backgroundColor: "#002099",
+  },
+  header: {
+    color: 'black',
+    paddingRight: 12,
+  },
 });
diff --git a/example/src/screens/Examples/AwareScrollViewStickyFooter/index.tsx b/example/src/screens/Examples/AwareScrollViewStickyFooter/index.tsx
@@ -1,29 +1,58 @@
-import React, { useCallback, useMemo, useState } from 'react';
+import React, { useCallback, useEffect, useMemo, useState } from 'react';
 import { LayoutChangeEvent, View, Text, Button } from 'react-native';
+import { StackScreenProps } from '@react-navigation/stack';
 import { useResizeMode, KeyboardStickyView } from 'react-native-keyboard-controller';
 import { useSafeAreaInsets } from 'react-native-safe-area-context';
 
+import { ExamplesStackParamList } from '../../../navigation/ExamplesStack';
 import KeyboardAwareScrollView from '../../../components/AwareScrollView';
 import TextInput from '../../../components/TextInput';
 import { styles } from './styles';
 
-export default function AwareScrollViewStickyFooter() {
+type Props = StackScreenProps<ExamplesStackParamList>;
+
+const variants = ['v1', 'v2', 'v3'] as const;
+type Variant = typeof variants[number];
+
+export default function AwareScrollViewStickyFooter({ navigation }: Props) {
   useResizeMode();
 
   const { bottom } = useSafeAreaInsets();
   const [footerHeight, setFooterHeight] = useState(0);
+  const [variant, setVariant] = useState<Variant>("v1");
 
   const handleLayout = useCallback((evt: LayoutChangeEvent) => {
     setFooterHeight(evt.nativeEvent.layout.height);
   }, []);
-  const offset = useMemo(() => ({closed: 0, opened: bottom }), [bottom]);
+  const offset = useMemo(() => ({closed: 0, opened: variant === "v1" ? 0 : bottom }), [bottom, variant]);
+  const offsetV3 = useMemo(() => ({closed: -50, opened: bottom - 25}), [bottom]);
+
+  useEffect(() => {
+    navigation.setOptions({
+      headerRight: () => (
+        <Text
+          style={styles.header}
+          onPress={() => {
+            const index = variants.indexOf(variant);
+            setVariant(
+              variants[index === variants.length - 1 ? 0 : index + 1]
+            );
+          }}
+        >
+          {variant}
+        </Text>
+      ),
+    });
+  }, [variant]);
+
+  const v1v2 = variant === "v1" || variant === "v2";
 
   return (
-    <View style={[styles.pageContainer, { paddingBottom: bottom }]}>
+    <View style={[styles.pageContainer, { paddingBottom: variant === "v1" ? 0 : bottom }]}>
       <KeyboardAwareScrollView
         style={styles.container}
         contentContainerStyle={styles.content}
-        bottomOffset={footerHeight + 50}
+        bottomOffset={(v1v2 ? footerHeight : 0) + 50}
         keyboardShouldPersistTaps="handled"
       >
         {new Array(10).fill(0).map((_, i) => (
@@ -34,15 +63,19 @@ export default function AwareScrollViewStickyFooter() {
           />
         ))}
       </KeyboardAwareScrollView>
-      <KeyboardStickyView offset={offset}>
-        <View onLayout={handleLayout} style={styles.footer}>
-          <Text style={styles.footerText}>A mocked sticky footer</Text>
-          <Button title="Click me" />
-        </View>
-          </KeyboardStickyView>
-      {/*<KeyboardStickyView offset={{closed: -50, opened: bottom - 25}}>
-        <View style={{position: 'absolute', bottom: 0, right: 30, justifyContent: "flex-end", width: 60, height: 60, borderRadius: 30, backgroundColor: "#002099"}} />
-          </KeyboardStickyView>*/}
+      {v1v2 && (
+        <KeyboardStickyView offset={offset}>
+          <View onLayout={handleLayout} style={styles.footer}>
+            <Text style={styles.footerText}>A mocked sticky footer</Text>
+            <Button title="Click me" />
+          </View>
+        </KeyboardStickyView>
+      )}
+      {variant === "v3" && (
+        <KeyboardStickyView offset={offsetV3}>
+          <View style={styles.circle} />
+        </KeyboardStickyView>
+      )}
     </View>
   );
 }
diff --git a/example/src/screens/Examples/AwareScrollViewStickyFooter/styles.ts b/example/src/screens/Examples/AwareScrollViewStickyFooter/styles.ts
@@ -23,4 +23,18 @@ export const styles = StyleSheet.create({
     color: 'white',
     fontWeight: 'bold',
   },
+  circle: {
+    position: 'absolute',
+    bottom: 0,
+    right: 30,
+    justifyContent: "flex-end",
+    width: 60,
+    height: 60,
+    borderRadius: 30,
+    backgroundColor: "#002099",
+  },
+  header: {
+    color: 'black',
+    paddingRight: 12,
+  },
 });