Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

fix: hide banner when visible prop is false #934

Merged
merged 1 commit into from
Mar 22, 2019
Merged

fix: hide banner when visible prop is false #934

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Jump to
Jump to file
Failed to load files.
Diff view
Diff view
86 changes: 47 additions & 39 deletions src/components/Banner.js
View file
Open in desktop
Expand Up @@ -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> & {|
/**
Expand Down Expand Up @@ -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',
Expand Down