@fluentui-react-native/tester 0.79.5 → 0.80.0

package/src/TestComponents/Notification/NotificationTest.tsx

@@ -1,6 +1,11 @@
 import * as React from 'react';
-import { Notification } from '@fluentui-react-native/notification';
+import { Notification, NotificationVariant, NotificationVariants } from '@fluentui-react-native/notification';
 import { Test, TestSection, PlatformStatus } from '../Test';
+import { Animated, StyleSheet, Switch, TextInput, View } from 'react-native';
+import { Text } from '@fluentui-react-native/experimental-text';
+import { ButtonV1 as Button } from '@fluentui-react-native/button';
+import { StyledPicker } from '../Common/StyledPicker';
+import { commonTestStyles as commonStyles } from '../Common/styles';
 import { SvgIconProps } from '@fluentui-react-native/icon';
 import PlayButton from './assets/play_button.svg';
 
@@ -9,156 +14,260 @@ const svgProps: SvgIconProps = {
 };
 const iconProps = { svgSource: svgProps };
 
-const PrimaryTest: React.FunctionComponent = () => {
-  return (
-    <Notification
-      variant={'primary'}
-      action="Undo"
-      onPress={() => {
-        console.log('Notification tapped');
-      }}
-      onActionPress={() => {
-        console.log('Undo tapped');
-      }}
-    >
-      Mail Archived
-    </Notification>
-  );
-};
+const SHOW_HEIGHT = -50;
+const BAR_SHOW_DURATION = 300;
+const HIDE_DURATION = 250;
+const AUTO_HIDE_DURATION = 3000;
+const USE_NATIVE_DRIVER_IOS = true;
 
-const PrimaryTestWithTitleAndIcon: React.FunctionComponent = () => {
-  return (
-    <Notification
-      variant={'primary'}
-      icon={iconProps}
-      title="Kat's iPhoneX"
-      onPress={() => {
-        console.log('Notification tapped');
-      }}
-    >
-      Listen to Emails • 7 mins
-    </Notification>
-  );
-};
+const styles = StyleSheet.create({
+  button: {
+    alignSelf: 'center',
+    marginBottom: 50,
+  },
+  notification: {
+    marginTop: 10,
+  },
+  textInput: {
+    borderWidth: 1,
+  },
+});
 
-const NeutralTest: React.FunctionComponent = () => {
-  return (
-    <Notification
-      variant={'neutral'}
-      action="Sign in"
-      onPress={() => {
-        console.log('Notification tapped');
-      }}
-      onActionPress={() => {
-        console.log('Sign in tapped');
-      }}
-    >
-      Some items require you to sign in to view them
-    </Notification>
-  );
-};
+const CustomToast: React.FunctionComponent = () => {
+  const [variant, setVariant] = React.useState<NotificationVariant>('primary');
+  const [title, setTitle] = React.useState("Kat's iPhoneX");
+  const [message, setMessage] = React.useState('Listen to Emails • 7 mins');
+  const [action, setAction] = React.useState('Listen');
 
-const DangerTest: React.FunctionComponent = () => {
-  return (
-    <Notification
-      variant={'danger'}
-      action="Retry"
-      onPress={() => {
-        console.log('Notification tapped');
-      }}
-      onActionPress={() => {
-        console.log('Retry tapped');
-      }}
-    >
-      There was a problem, and your recent changes may not have saved
-    </Notification>
-  );
-};
+  const [showIcon, setShowIcon] = React.useState(true);
+  const [showTitle, setShowTitle] = React.useState(true);
 
-const WarningTest: React.FunctionComponent = () => {
   return (
-    <Notification
-      variant={'warning'}
-      onPress={() => {
-        console.log('Notification tapped');
-      }}
-    >
-      Read Only
-    </Notification>
+    <View>
+      <StyledPicker
+        prompt="Variant"
+        selected={variant}
+        onChange={setVariant}
+        collection={NotificationVariants.filter((variant) => !variant.endsWith('Bar'))}
+      />
+      <TextInput value={title} onChangeText={setTitle} style={styles.textInput} />
+      <TextInput value={message} onChangeText={setMessage} style={styles.textInput} />
+      <TextInput value={action} onChangeText={setAction} style={styles.textInput} />
+      <View style={commonStyles.switch}>
+        <Text>Show icon </Text>
+        <Switch value={showIcon} onValueChange={setShowIcon} />
+      </View>
+      <View style={commonStyles.switch}>
+        <Text>Show title </Text>
+        <Switch value={showTitle} onValueChange={setShowTitle} />
+      </View>
+      <View style={styles.notification}>
+        <Notification
+          variant={variant}
+          icon={showIcon ? iconProps : undefined}
+          title={showTitle ? title : undefined}
+          action={action}
+          onPress={() => {
+            console.log('Notification tapped');
+          }}
+          onActionPress={() => {
+            console.log('Notification action tapped');
+          }}
+        >
+          {message}
+        </Notification>
+      </View>
+    </View>
   );
 };
 
-const PrimaryBarTest: React.FunctionComponent = () => {
+const CustomBar: React.FunctionComponent = () => {
+  const [variant, setVariant] = React.useState<NotificationVariant>('primaryBar');
+  const [message, setMessage] = React.useState('Updating...');
+
   return (
-    <Notification
-      variant={'primaryBar'}
-      onPress={() => {
-        console.log('Notification tapped');
-      }}
-    >
-      Updating...
-    </Notification>
+    <View>
+      <StyledPicker
+        prompt="Variant"
+        selected={variant}
+        onChange={setVariant}
+        collection={NotificationVariants.filter((variant) => variant.endsWith('Bar'))}
+      />
+      <TextInput value={message} onChangeText={setMessage} style={styles.textInput} />
+      <View style={styles.notification}>
+        <Notification
+          variant={variant}
+          onPress={() => {
+            console.log('Notification tapped');
+          }}
+        >
+          {message}
+        </Notification>
+      </View>
+    </View>
   );
 };
 
-const PrimaryOutlineBarTest: React.FunctionComponent = () => {
+const PrimaryWithAutoHide: React.FunctionComponent = () => {
+  const [visible, setVisible] = React.useState(false);
+  const onButtonPress = () => setVisible(!visible);
+
+  const [hidden, setHidden] = React.useState<boolean>(!visible);
+  const height = React.useRef(new Animated.Value(0)).current;
+
+  const show = () => {
+    setHidden(false);
+    Animated.sequence([
+      Animated.spring(height, {
+        toValue: SHOW_HEIGHT,
+        bounciness: 16,
+        speed: 20,
+        useNativeDriver: USE_NATIVE_DRIVER_IOS,
+      }),
+      Animated.delay(AUTO_HIDE_DURATION),
+      Animated.timing(height, {
+        toValue: 0,
+        duration: HIDE_DURATION,
+        useNativeDriver: USE_NATIVE_DRIVER_IOS,
+      }),
+    ]).start(() => {
+      setHidden(true);
+      setVisible(false);
+    });
+  };
+
+  const hide = () => {
+    Animated.timing(height, {
+      toValue: 0,
+      duration: HIDE_DURATION,
+      useNativeDriver: USE_NATIVE_DRIVER_IOS,
+    }).start(() => {
+      setHidden(true);
+    });
+  };
+
+  React.useLayoutEffect(() => {
+    if (visible) {
+      show();
+    } else {
+      hide();
+    }
+  }, [visible, height]);
+
+  const animatedViewProps = {
+    transform: [{ translateY: height }],
+  };
+
   return (
-    <Notification
-      variant={'primaryOutlineBar'}
-      onPress={() => {
-        console.log('Notification tapped');
-      }}
-    >
-      Mail Sent
-    </Notification>
+    <View>
+      <Button appearance="subtle" onClick={onButtonPress} style={styles.button}>
+        {visible ? 'Hide' : 'Show'}
+      </Button>
+      {!hidden && (
+        <Animated.View style={[animatedViewProps]}>
+          <Notification
+            variant={'primary'}
+            action="Undo"
+            onPress={() => {
+              console.log('Notification tapped');
+            }}
+            onActionPress={() => {
+              console.log('Undo tapped');
+            }}
+          >
+            Mail Archived
+          </Notification>
+        </Animated.View>
+      )}
+    </View>
   );
 };
+const PrimaryBarWithAutoHide: React.FunctionComponent = () => {
+  const [visible, setVisible] = React.useState(false);
+  const onButtonPress = () => setVisible(!visible);
+
+  const [hidden, setHidden] = React.useState<boolean>(!visible);
+  const height = React.useRef(new Animated.Value(0)).current;
+
+  const show = () => {
+    setHidden(false);
+    Animated.sequence([
+      Animated.timing(height, {
+        toValue: SHOW_HEIGHT,
+        duration: BAR_SHOW_DURATION,
+        useNativeDriver: USE_NATIVE_DRIVER_IOS,
+      }),
+      Animated.delay(AUTO_HIDE_DURATION),
+      Animated.timing(height, {
+        toValue: 0,
+        duration: HIDE_DURATION,
+        useNativeDriver: USE_NATIVE_DRIVER_IOS,
+      }),
+    ]).start(() => {
+      setHidden(true);
+      setVisible(false);
+    });
+  };
+
+  const hide = () => {
+    Animated.timing(height, {
+      toValue: 0,
+      duration: HIDE_DURATION,
+      useNativeDriver: USE_NATIVE_DRIVER_IOS,
+    }).start(() => {
+      setHidden(true);
+    });
+  };
+
+  React.useLayoutEffect(() => {
+    if (visible) {
+      show();
+    } else {
+      hide();
+    }
+  }, [visible, height]);
+
+  const animatedViewProps = {
+    transform: [{ translateY: height }],
+  };
 
-const NeutralBarTest: React.FunctionComponent = () => {
   return (
-    <Notification
-      variant={'neutralBar'}
-      onPress={() => {
-        console.log('Notification tapped');
-      }}
-    >
-      No internet connection
-    </Notification>
+    <View>
+      <Button appearance="subtle" onClick={onButtonPress} style={styles.button}>
+        {visible ? 'Hide' : 'Show'}
+      </Button>
+      {!hidden && (
+        <Animated.View style={[animatedViewProps]}>
+          <Notification
+            variant={'primaryBar'}
+            onPress={() => {
+              console.log('Notification tapped');
+            }}
+          >
+            Mail Sent
+          </Notification>
+        </Animated.View>
+      )}
+    </View>
   );
 };
 
 const notificationSections: TestSection[] = [
   {
-    name: 'Primary',
-    component: PrimaryTest,
-  },
-  {
-    name: 'Primary with Title and Icon',
-    component: PrimaryTestWithTitleAndIcon,
-  },
-  {
-    name: 'Neutral',
-    component: NeutralTest,
-  },
-  {
-    name: 'Danger',
-    component: DangerTest,
-  },
-  {
-    name: 'Warning',
-    component: WarningTest,
+    name: 'Custom Toast',
+    component: CustomToast,
   },
   {
-    name: 'Primary Bar',
-    component: PrimaryBarTest,
+    name: 'Custom Bar',
+    component: CustomBar,
   },
   {
-    name: 'Primary Outline Bar',
-    component: PrimaryOutlineBarTest,
+    name: 'Primary with auto-hide',
+    component: PrimaryWithAutoHide,
   },
   {
-    name: 'Neutral Bar',
-    component: NeutralBarTest,
+    name: 'Primary Bar with auto-hide',
+    component: PrimaryBarWithAutoHide,
   },
 ];