fix: hide banner when visible prop is false (#934)

callstack · Mar 22, 2019 · e899c55 · e899c55
1 parent 1a4af74
commit e899c55
Show file tree

Hide file tree

Showing 2 changed files with 480 additions and 432 deletions.
diff --git a/src/components/Banner.js b/src/components/Banner.js
@@ -7,6 +7,9 @@ import Text from './Typography/Text';
 import Button from './Button';
 import { withTheme } from '../core/theming';
 import type { Theme, $RemoveChildren } from '../types';
+import shadow from '../styles/shadow';
+
+const ELEVATION = 1;
 
 type Props = $RemoveChildren<typeof Surface> & {|
   /**
@@ -179,52 +182,57 @@ class Banner extends React.Component<Props, State> {
     );
 
     return (
-      <Surface {...rest} style={[styles.container, style]}>
-        <Animated.View style={{ height }} />
-        <Animated.View
-          onLayout={this._handleLayout}
-          style={[
-            layout.measured || !visible
-              ? // If we have measured banner's height or it's invisible,
-                // Position it absolutely, the layout will be taken care of the spacer
-                [styles.absolute, { transform: [{ translateY }] }]
-              : // Otherwise position it normally
-                null,
-            !layout.measured && !visible
-              ? // If we haven't measured banner's height yet and it's invisible,
-                // hide it with opacity: 0 so user doesn't see it
-                { opacity: 0 }
-              : null,
-          ]}
-        >
-          <View style={styles.content}>
-            {image ? (
-              <View style={styles.image}>{image({ size: 40 })}</View>
-            ) : null}
-            <Text style={styles.message}>{children}</Text>
-          </View>
-          <View style={styles.actions}>
-            {actions.map(({ label, ...others }, i) => (
-              <Button
-                key={/* eslint-disable-line react/no-array-index-key */ i}
-                compact
-                mode="text"
-                style={styles.button}
-                {...others}
-              >
-                {label}
-              </Button>
-            ))}
-          </View>
-        </Animated.View>
+      <Surface {...rest} style={[styles.container, shadow(ELEVATION), style]}>
+        <View style={styles.wrapper}>
+          <Animated.View style={{ height }} />
+          <Animated.View
+            onLayout={this._handleLayout}
+            style={[
+              layout.measured || !visible
+                ? // If we have measured banner's height or it's invisible,
+                  // Position it absolutely, the layout will be taken care of the spacer
+                  [styles.absolute, { transform: [{ translateY }] }]
+                : // Otherwise position it normally
+                  null,
+              !layout.measured && !visible
+                ? // If we haven't measured banner's height yet and it's invisible,
+                  // hide it with opacity: 0 so user doesn't see it
+                  { opacity: 0 }
+                : null,
+            ]}
+          >
+            <View style={styles.content}>
+              {image ? (
+                <View style={styles.image}>{image({ size: 40 })}</View>
+              ) : null}
+              <Text style={styles.message}>{children}</Text>
+            </View>
+            <View style={styles.actions}>
+              {actions.map(({ label, ...others }, i) => (
+                <Button
+                  key={/* eslint-disable-line react/no-array-index-key */ i}
+                  compact
+                  mode="text"
+                  style={styles.button}
+                  {...others}
+                >
+                  {label}
+                </Button>
+              ))}
+            </View>
+          </Animated.View>
+        </View>
       </Surface>
     );
   }
 }
 
 const styles = StyleSheet.create({
   container: {
-    elevation: 1,
+    elevation: ELEVATION,
+  },
+  wrapper: {
+    overflow: 'hidden',
   },
   absolute: {
     position: 'absolute',