@fluentui-react-native/tester 0.79.7 → 0.80.0

package/CHANGELOG.json

@@ -2,7 +2,28 @@
   "name": "@fluentui-react-native/tester",
   "entries": [
     {
-      "date": "Thu, 28 Jul 2022 16:25:00 GMT",
+      "date": "Thu, 28 Jul 2022 21:20:13 GMT",
+      "tag": "@fluentui-react-native/tester_v0.80.0",
+      "version": "0.80.0",
+      "comments": {
+        "minor": [
+          {
+            "author": "joannaquu@gmail.com",
+            "package": "@fluentui-react-native/tester",
+            "commit": "56f0d767d6ddcbd2b1ea94e41af5fce9c3953c48",
+            "comment": "add initial animation to notification"
+          },
+          {
+            "author": "beachball",
+            "package": "@fluentui-react-native/tester",
+            "comment": "Bump @fluentui-react-native/notification to v0.10.0",
+            "commit": "56f0d767d6ddcbd2b1ea94e41af5fce9c3953c48"
+          }
+        ]
+      }
+    },
+    {
+      "date": "Thu, 28 Jul 2022 16:25:20 GMT",
       "tag": "@fluentui-react-native/tester_v0.79.7",
       "version": "0.79.7",
       "comments": {

package/CHANGELOG.md

@@ -1,12 +1,21 @@
 # Change Log - @fluentui-react-native/tester
 
-This log was last generated on Thu, 28 Jul 2022 16:25:00 GMT and should not be manually modified.
+This log was last generated on Thu, 28 Jul 2022 21:20:13 GMT and should not be manually modified.
 
 <!-- Start content -->
 
+## 0.80.0
+
+Thu, 28 Jul 2022 21:20:13 GMT
+
+### Minor changes
+
+- add initial animation to notification (joannaquu@gmail.com)
+- Bump @fluentui-react-native/notification to v0.10.0
+
 ## 0.79.7
 
-Thu, 28 Jul 2022 16:25:00 GMT
+Thu, 28 Jul 2022 16:25:20 GMT
 
 ### Patches
 

package/lib/TestComponents/Notification/NotificationTest.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"NotificationTest.d.ts","sourceRoot":"","sources":["../../../src/TestComponents/Notification/NotificationTest.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAoK/B,eAAO,MAAM,gBAAgB,EAAE,KAAK,CAAC,iBAYpC,CAAC"}
+{"version":3,"file":"NotificationTest.d.ts","sourceRoot":"","sources":["../../../src/TestComponents/Notification/NotificationTest.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAiR/B,eAAO,MAAM,gBAAgB,EAAE,KAAK,CAAC,iBAYpC,CAAC"}

package/lib/TestComponents/Notification/NotificationTest.js

@@ -1,89 +1,190 @@
 import * as React from 'react';
-import { Notification } from '@fluentui-react-native/notification';
+import { Notification, NotificationVariants } from '@fluentui-react-native/notification';
 import { Test } 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 PlayButton from './assets/play_button.svg';
 var svgProps = {
     src: PlayButton,
 };
 var iconProps = { svgSource: svgProps };
-var PrimaryTest = function () {
-    return (React.createElement(Notification, { variant: 'primary', action: "Undo", onPress: function () {
-            console.log('Notification tapped');
-        }, onActionPress: function () {
-            console.log('Undo tapped');
-        } }, "Mail Archived"));
-};
-var PrimaryTestWithTitleAndIcon = function () {
-    return (React.createElement(Notification, { variant: 'primary', icon: iconProps, title: "Kat's iPhoneX", onPress: function () {
-            console.log('Notification tapped');
-        } }, "Listen to Emails \u2022 7 mins"));
-};
-var NeutralTest = function () {
-    return (React.createElement(Notification, { variant: 'neutral', action: "Sign in", onPress: function () {
-            console.log('Notification tapped');
-        }, onActionPress: function () {
-            console.log('Sign in tapped');
-        } }, "Some items require you to sign in to view them"));
-};
-var DangerTest = function () {
-    return (React.createElement(Notification, { variant: 'danger', action: "Retry", onPress: function () {
-            console.log('Notification tapped');
-        }, onActionPress: function () {
-            console.log('Retry tapped');
-        } }, "There was a problem, and your recent changes may not have saved"));
-};
-var WarningTest = function () {
-    return (React.createElement(Notification, { variant: 'warning', onPress: function () {
-            console.log('Notification tapped');
-        } }, "Read Only"));
+var SHOW_HEIGHT = -50;
+var BAR_SHOW_DURATION = 300;
+var HIDE_DURATION = 250;
+var AUTO_HIDE_DURATION = 3000;
+var USE_NATIVE_DRIVER_IOS = true;
+var styles = StyleSheet.create({
+    button: {
+        alignSelf: 'center',
+        marginBottom: 50,
+    },
+    notification: {
+        marginTop: 10,
+    },
+    textInput: {
+        borderWidth: 1,
+    },
+});
+var CustomToast = function () {
+    var _a = React.useState('primary'), variant = _a[0], setVariant = _a[1];
+    var _b = React.useState("Kat's iPhoneX"), title = _b[0], setTitle = _b[1];
+    var _c = React.useState('Listen to Emails • 7 mins'), message = _c[0], setMessage = _c[1];
+    var _d = React.useState('Listen'), action = _d[0], setAction = _d[1];
+    var _e = React.useState(true), showIcon = _e[0], setShowIcon = _e[1];
+    var _f = React.useState(true), showTitle = _f[0], setShowTitle = _f[1];
+    return (React.createElement(View, null,
+        React.createElement(StyledPicker, { prompt: "Variant", selected: variant, onChange: setVariant, collection: NotificationVariants.filter(function (variant) { return !variant.endsWith('Bar'); }) }),
+        React.createElement(TextInput, { value: title, onChangeText: setTitle, style: styles.textInput }),
+        React.createElement(TextInput, { value: message, onChangeText: setMessage, style: styles.textInput }),
+        React.createElement(TextInput, { value: action, onChangeText: setAction, style: styles.textInput }),
+        React.createElement(View, { style: commonStyles.switch },
+            React.createElement(Text, null, "Show icon "),
+            React.createElement(Switch, { value: showIcon, onValueChange: setShowIcon })),
+        React.createElement(View, { style: commonStyles.switch },
+            React.createElement(Text, null, "Show title "),
+            React.createElement(Switch, { value: showTitle, onValueChange: setShowTitle })),
+        React.createElement(View, { style: styles.notification },
+            React.createElement(Notification, { variant: variant, icon: showIcon ? iconProps : undefined, title: showTitle ? title : undefined, action: action, onPress: function () {
+                    console.log('Notification tapped');
+                }, onActionPress: function () {
+                    console.log('Notification action tapped');
+                } }, message))));
 };
-var PrimaryBarTest = function () {
-    return (React.createElement(Notification, { variant: 'primaryBar', onPress: function () {
-            console.log('Notification tapped');
-        } }, "Updating..."));
+var CustomBar = function () {
+    var _a = React.useState('primaryBar'), variant = _a[0], setVariant = _a[1];
+    var _b = React.useState('Updating...'), message = _b[0], setMessage = _b[1];
+    return (React.createElement(View, null,
+        React.createElement(StyledPicker, { prompt: "Variant", selected: variant, onChange: setVariant, collection: NotificationVariants.filter(function (variant) { return variant.endsWith('Bar'); }) }),
+        React.createElement(TextInput, { value: message, onChangeText: setMessage, style: styles.textInput }),
+        React.createElement(View, { style: styles.notification },
+            React.createElement(Notification, { variant: variant, onPress: function () {
+                    console.log('Notification tapped');
+                } }, message))));
 };
-var PrimaryOutlineBarTest = function () {
-    return (React.createElement(Notification, { variant: 'primaryOutlineBar', onPress: function () {
-            console.log('Notification tapped');
-        } }, "Mail Sent"));
+var PrimaryWithAutoHide = function () {
+    var _a = React.useState(false), visible = _a[0], setVisible = _a[1];
+    var onButtonPress = function () { return setVisible(!visible); };
+    var _b = React.useState(!visible), hidden = _b[0], setHidden = _b[1];
+    var height = React.useRef(new Animated.Value(0)).current;
+    var show = function () {
+        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(function () {
+            setHidden(true);
+            setVisible(false);
+        });
+    };
+    var hide = function () {
+        Animated.timing(height, {
+            toValue: 0,
+            duration: HIDE_DURATION,
+            useNativeDriver: USE_NATIVE_DRIVER_IOS,
+        }).start(function () {
+            setHidden(true);
+        });
+    };
+    React.useLayoutEffect(function () {
+        if (visible) {
+            show();
+        }
+        else {
+            hide();
+        }
+    }, [visible, height]);
+    var animatedViewProps = {
+        transform: [{ translateY: height }],
+    };
+    return (React.createElement(View, null,
+        React.createElement(Button, { appearance: "subtle", onClick: onButtonPress, style: styles.button }, visible ? 'Hide' : 'Show'),
+        !hidden && (React.createElement(Animated.View, { style: [animatedViewProps] },
+            React.createElement(Notification, { variant: 'primary', action: "Undo", onPress: function () {
+                    console.log('Notification tapped');
+                }, onActionPress: function () {
+                    console.log('Undo tapped');
+                } }, "Mail Archived")))));
 };
-var NeutralBarTest = function () {
-    return (React.createElement(Notification, { variant: 'neutralBar', onPress: function () {
-            console.log('Notification tapped');
-        } }, "No internet connection"));
+var PrimaryBarWithAutoHide = function () {
+    var _a = React.useState(false), visible = _a[0], setVisible = _a[1];
+    var onButtonPress = function () { return setVisible(!visible); };
+    var _b = React.useState(!visible), hidden = _b[0], setHidden = _b[1];
+    var height = React.useRef(new Animated.Value(0)).current;
+    var show = function () {
+        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(function () {
+            setHidden(true);
+            setVisible(false);
+        });
+    };
+    var hide = function () {
+        Animated.timing(height, {
+            toValue: 0,
+            duration: HIDE_DURATION,
+            useNativeDriver: USE_NATIVE_DRIVER_IOS,
+        }).start(function () {
+            setHidden(true);
+        });
+    };
+    React.useLayoutEffect(function () {
+        if (visible) {
+            show();
+        }
+        else {
+            hide();
+        }
+    }, [visible, height]);
+    var animatedViewProps = {
+        transform: [{ translateY: height }],
+    };
+    return (React.createElement(View, null,
+        React.createElement(Button, { appearance: "subtle", onClick: onButtonPress, style: styles.button }, visible ? 'Hide' : 'Show'),
+        !hidden && (React.createElement(Animated.View, { style: [animatedViewProps] },
+            React.createElement(Notification, { variant: 'primaryBar', onPress: function () {
+                    console.log('Notification tapped');
+                } }, "Mail Sent")))));
 };
 var notificationSections = [
     {
-        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,
     },
 ];
 export var NotificationTest = function () {

package/lib/TestComponents/Notification/NotificationTest.js.map

@@ -1 +1 @@
-{"version":3,"file":"NotificationTest.js","sourceRoot":"","sources":["../../../src/TestComponents/Notification/NotificationTest.tsx"],"names":[],"mappings":"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"}
+{"version":3,"file":"NotificationTest.js","sourceRoot":"","sources":["../../../src/TestComponents/Notification/NotificationTest.tsx"],"names":[],"mappings":"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"}

package/lib-commonjs/TestComponents/Notification/NotificationTest.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"NotificationTest.d.ts","sourceRoot":"","sources":["../../../src/TestComponents/Notification/NotificationTest.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAoK/B,eAAO,MAAM,gBAAgB,EAAE,KAAK,CAAC,iBAYpC,CAAC"}
+{"version":3,"file":"NotificationTest.d.ts","sourceRoot":"","sources":["../../../src/TestComponents/Notification/NotificationTest.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAiR/B,eAAO,MAAM,gBAAgB,EAAE,KAAK,CAAC,iBAYpC,CAAC"}

package/lib-commonjs/TestComponents/Notification/NotificationTest.js

@@ -5,89 +5,190 @@ var tslib_1 = require("tslib");
 var React = (0, tslib_1.__importStar)(require("react"));
 var notification_1 = require("@fluentui-react-native/notification");
 var Test_1 = require("../Test");
+var react_native_1 = require("react-native");
+var experimental_text_1 = require("@fluentui-react-native/experimental-text");
+var button_1 = require("@fluentui-react-native/button");
+var StyledPicker_1 = require("../Common/StyledPicker");
+var styles_1 = require("../Common/styles");
 var play_button_svg_1 = (0, tslib_1.__importDefault)(require("./assets/play_button.svg"));
 var svgProps = {
     src: play_button_svg_1.default,
 };
 var iconProps = { svgSource: svgProps };
-var PrimaryTest = function () {
-    return (React.createElement(notification_1.Notification, { variant: 'primary', action: "Undo", onPress: function () {
-            console.log('Notification tapped');
-        }, onActionPress: function () {
-            console.log('Undo tapped');
-        } }, "Mail Archived"));
-};
-var PrimaryTestWithTitleAndIcon = function () {
-    return (React.createElement(notification_1.Notification, { variant: 'primary', icon: iconProps, title: "Kat's iPhoneX", onPress: function () {
-            console.log('Notification tapped');
-        } }, "Listen to Emails \u2022 7 mins"));
-};
-var NeutralTest = function () {
-    return (React.createElement(notification_1.Notification, { variant: 'neutral', action: "Sign in", onPress: function () {
-            console.log('Notification tapped');
-        }, onActionPress: function () {
-            console.log('Sign in tapped');
-        } }, "Some items require you to sign in to view them"));
-};
-var DangerTest = function () {
-    return (React.createElement(notification_1.Notification, { variant: 'danger', action: "Retry", onPress: function () {
-            console.log('Notification tapped');
-        }, onActionPress: function () {
-            console.log('Retry tapped');
-        } }, "There was a problem, and your recent changes may not have saved"));
-};
-var WarningTest = function () {
-    return (React.createElement(notification_1.Notification, { variant: 'warning', onPress: function () {
-            console.log('Notification tapped');
-        } }, "Read Only"));
+var SHOW_HEIGHT = -50;
+var BAR_SHOW_DURATION = 300;
+var HIDE_DURATION = 250;
+var AUTO_HIDE_DURATION = 3000;
+var USE_NATIVE_DRIVER_IOS = true;
+var styles = react_native_1.StyleSheet.create({
+    button: {
+        alignSelf: 'center',
+        marginBottom: 50,
+    },
+    notification: {
+        marginTop: 10,
+    },
+    textInput: {
+        borderWidth: 1,
+    },
+});
+var CustomToast = function () {
+    var _a = React.useState('primary'), variant = _a[0], setVariant = _a[1];
+    var _b = React.useState("Kat's iPhoneX"), title = _b[0], setTitle = _b[1];
+    var _c = React.useState('Listen to Emails • 7 mins'), message = _c[0], setMessage = _c[1];
+    var _d = React.useState('Listen'), action = _d[0], setAction = _d[1];
+    var _e = React.useState(true), showIcon = _e[0], setShowIcon = _e[1];
+    var _f = React.useState(true), showTitle = _f[0], setShowTitle = _f[1];
+    return (React.createElement(react_native_1.View, null,
+        React.createElement(StyledPicker_1.StyledPicker, { prompt: "Variant", selected: variant, onChange: setVariant, collection: notification_1.NotificationVariants.filter(function (variant) { return !variant.endsWith('Bar'); }) }),
+        React.createElement(react_native_1.TextInput, { value: title, onChangeText: setTitle, style: styles.textInput }),
+        React.createElement(react_native_1.TextInput, { value: message, onChangeText: setMessage, style: styles.textInput }),
+        React.createElement(react_native_1.TextInput, { value: action, onChangeText: setAction, style: styles.textInput }),
+        React.createElement(react_native_1.View, { style: styles_1.commonTestStyles.switch },
+            React.createElement(experimental_text_1.Text, null, "Show icon "),
+            React.createElement(react_native_1.Switch, { value: showIcon, onValueChange: setShowIcon })),
+        React.createElement(react_native_1.View, { style: styles_1.commonTestStyles.switch },
+            React.createElement(experimental_text_1.Text, null, "Show title "),
+            React.createElement(react_native_1.Switch, { value: showTitle, onValueChange: setShowTitle })),
+        React.createElement(react_native_1.View, { style: styles.notification },
+            React.createElement(notification_1.Notification, { variant: variant, icon: showIcon ? iconProps : undefined, title: showTitle ? title : undefined, action: action, onPress: function () {
+                    console.log('Notification tapped');
+                }, onActionPress: function () {
+                    console.log('Notification action tapped');
+                } }, message))));
 };
-var PrimaryBarTest = function () {
-    return (React.createElement(notification_1.Notification, { variant: 'primaryBar', onPress: function () {
-            console.log('Notification tapped');
-        } }, "Updating..."));
+var CustomBar = function () {
+    var _a = React.useState('primaryBar'), variant = _a[0], setVariant = _a[1];
+    var _b = React.useState('Updating...'), message = _b[0], setMessage = _b[1];
+    return (React.createElement(react_native_1.View, null,
+        React.createElement(StyledPicker_1.StyledPicker, { prompt: "Variant", selected: variant, onChange: setVariant, collection: notification_1.NotificationVariants.filter(function (variant) { return variant.endsWith('Bar'); }) }),
+        React.createElement(react_native_1.TextInput, { value: message, onChangeText: setMessage, style: styles.textInput }),
+        React.createElement(react_native_1.View, { style: styles.notification },
+            React.createElement(notification_1.Notification, { variant: variant, onPress: function () {
+                    console.log('Notification tapped');
+                } }, message))));
 };
-var PrimaryOutlineBarTest = function () {
-    return (React.createElement(notification_1.Notification, { variant: 'primaryOutlineBar', onPress: function () {
-            console.log('Notification tapped');
-        } }, "Mail Sent"));
+var PrimaryWithAutoHide = function () {
+    var _a = React.useState(false), visible = _a[0], setVisible = _a[1];
+    var onButtonPress = function () { return setVisible(!visible); };
+    var _b = React.useState(!visible), hidden = _b[0], setHidden = _b[1];
+    var height = React.useRef(new react_native_1.Animated.Value(0)).current;
+    var show = function () {
+        setHidden(false);
+        react_native_1.Animated.sequence([
+            react_native_1.Animated.spring(height, {
+                toValue: SHOW_HEIGHT,
+                bounciness: 16,
+                speed: 20,
+                useNativeDriver: USE_NATIVE_DRIVER_IOS,
+            }),
+            react_native_1.Animated.delay(AUTO_HIDE_DURATION),
+            react_native_1.Animated.timing(height, {
+                toValue: 0,
+                duration: HIDE_DURATION,
+                useNativeDriver: USE_NATIVE_DRIVER_IOS,
+            }),
+        ]).start(function () {
+            setHidden(true);
+            setVisible(false);
+        });
+    };
+    var hide = function () {
+        react_native_1.Animated.timing(height, {
+            toValue: 0,
+            duration: HIDE_DURATION,
+            useNativeDriver: USE_NATIVE_DRIVER_IOS,
+        }).start(function () {
+            setHidden(true);
+        });
+    };
+    React.useLayoutEffect(function () {
+        if (visible) {
+            show();
+        }
+        else {
+            hide();
+        }
+    }, [visible, height]);
+    var animatedViewProps = {
+        transform: [{ translateY: height }],
+    };
+    return (React.createElement(react_native_1.View, null,
+        React.createElement(button_1.ButtonV1, { appearance: "subtle", onClick: onButtonPress, style: styles.button }, visible ? 'Hide' : 'Show'),
+        !hidden && (React.createElement(react_native_1.Animated.View, { style: [animatedViewProps] },
+            React.createElement(notification_1.Notification, { variant: 'primary', action: "Undo", onPress: function () {
+                    console.log('Notification tapped');
+                }, onActionPress: function () {
+                    console.log('Undo tapped');
+                } }, "Mail Archived")))));
 };
-var NeutralBarTest = function () {
-    return (React.createElement(notification_1.Notification, { variant: 'neutralBar', onPress: function () {
-            console.log('Notification tapped');
-        } }, "No internet connection"));
+var PrimaryBarWithAutoHide = function () {
+    var _a = React.useState(false), visible = _a[0], setVisible = _a[1];
+    var onButtonPress = function () { return setVisible(!visible); };
+    var _b = React.useState(!visible), hidden = _b[0], setHidden = _b[1];
+    var height = React.useRef(new react_native_1.Animated.Value(0)).current;
+    var show = function () {
+        setHidden(false);
+        react_native_1.Animated.sequence([
+            react_native_1.Animated.timing(height, {
+                toValue: SHOW_HEIGHT,
+                duration: BAR_SHOW_DURATION,
+                useNativeDriver: USE_NATIVE_DRIVER_IOS,
+            }),
+            react_native_1.Animated.delay(AUTO_HIDE_DURATION),
+            react_native_1.Animated.timing(height, {
+                toValue: 0,
+                duration: HIDE_DURATION,
+                useNativeDriver: USE_NATIVE_DRIVER_IOS,
+            }),
+        ]).start(function () {
+            setHidden(true);
+            setVisible(false);
+        });
+    };
+    var hide = function () {
+        react_native_1.Animated.timing(height, {
+            toValue: 0,
+            duration: HIDE_DURATION,
+            useNativeDriver: USE_NATIVE_DRIVER_IOS,
+        }).start(function () {
+            setHidden(true);
+        });
+    };
+    React.useLayoutEffect(function () {
+        if (visible) {
+            show();
+        }
+        else {
+            hide();
+        }
+    }, [visible, height]);
+    var animatedViewProps = {
+        transform: [{ translateY: height }],
+    };
+    return (React.createElement(react_native_1.View, null,
+        React.createElement(button_1.ButtonV1, { appearance: "subtle", onClick: onButtonPress, style: styles.button }, visible ? 'Hide' : 'Show'),
+        !hidden && (React.createElement(react_native_1.Animated.View, { style: [animatedViewProps] },
+            React.createElement(notification_1.Notification, { variant: 'primaryBar', onPress: function () {
+                    console.log('Notification tapped');
+                } }, "Mail Sent")))));
 };
 var notificationSections = [
     {
-        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,
     },
 ];
 var NotificationTest = function () {

package/lib-commonjs/TestComponents/Notification/NotificationTest.js.map

@@ -1 +1 @@
-{"version":3,"file":"NotificationTest.js","sourceRoot":"","sources":["../../../src/TestComponents/Notification/NotificationTest.tsx"],"names":[],"mappings":"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"}
+{"version":3,"file":"NotificationTest.js","sourceRoot":"","sources":["../../../src/TestComponents/Notification/NotificationTest.tsx"],"names":[],"mappings":"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"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@fluentui-react-native/tester",
-  "version": "0.79.7",
+  "version": "0.80.0",
   "description": "A test app to test FluentUI React Native Components during development",
   "license": "MIT",
   "author": "Microsoft <fluentuinativeowners@microsoft.com>",
@@ -56,7 +56,7 @@
     "@fluentui-react-native/icon": "0.13.1",
     "@fluentui-react-native/interactive-hooks": ">=0.17.3 <1.0.0",
     "@fluentui-react-native/menu": "^1.0.17",
-    "@fluentui-react-native/notification": "0.9.2",
+    "@fluentui-react-native/notification": "0.10.0",
     "@fluentui-react-native/stack": ">=0.7.1 <1.0.0",
     "@fluentui-react-native/theme": ">=0.7.0 <1.0.0",
     "@fluentui-react-native/theme-types": ">=0.18.0 <1.0.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,
   },
 ];