123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169 |
- // @flow
-
- import * as React from 'react';
- import {StyleSheet, View} from "react-native";
- import {FAB, IconButton, Surface, withTheme} from "react-native-paper";
- import AutoHideHandler from "../../utils/AutoHideHandler";
- import * as Animatable from 'react-native-animatable';
- import CustomTabBar from "../Tabbar/CustomTabBar";
-
- const AnimatedFAB = Animatable.createAnimatableComponent(FAB);
-
- type Props = {
- navigation: Object,
- theme: Object,
- onPress: Function,
- seekAttention: boolean,
- }
-
- type State = {
- currentMode: string,
- }
-
- const DISPLAY_MODES = {
- DAY: "agendaDay",
- WEEK: "agendaWeek",
- MONTH: "month",
- }
-
- class AnimatedBottomBar extends React.Component<Props, State> {
-
- ref: Object;
- hideHandler: AutoHideHandler;
-
- displayModeIcons: Object;
-
- state = {
- currentMode: DISPLAY_MODES.WEEK,
- }
-
- constructor() {
- super();
- this.ref = React.createRef();
- this.hideHandler = new AutoHideHandler(false);
- this.hideHandler.addListener(this.onHideChange);
-
- this.displayModeIcons = {};
- this.displayModeIcons[DISPLAY_MODES.DAY] = "calendar-text";
- this.displayModeIcons[DISPLAY_MODES.WEEK] = "calendar-week";
- this.displayModeIcons[DISPLAY_MODES.MONTH] = "calendar-range";
- }
-
- shouldComponentUpdate(nextProps: Props, nextState: State) {
- return (nextProps.seekAttention !== this.props.seekAttention)
- || (nextState.currentMode !== this.state.currentMode);
- }
-
- onHideChange = (shouldHide: boolean) => {
- if (this.ref.current) {
- if (shouldHide)
- this.ref.current.bounceOutDown(1000);
- else
- this.ref.current.bounceInUp(1000);
- }
- }
-
- onScroll = (event: Object) => {
- this.hideHandler.onScroll(event);
- };
-
- changeDisplayMode = () => {
- let newMode;
- switch (this.state.currentMode) {
- case DISPLAY_MODES.DAY:
- newMode = DISPLAY_MODES.WEEK;
- break;
- case DISPLAY_MODES.WEEK:
- newMode = DISPLAY_MODES.MONTH;
-
- break;
- case DISPLAY_MODES.MONTH:
- newMode = DISPLAY_MODES.DAY;
- break;
- }
- this.setState({currentMode: newMode});
- this.props.onPress("changeView", newMode);
- };
-
- render() {
- const buttonColor = this.props.theme.colors.primary;
- return (
- <Animatable.View
- ref={this.ref}
- useNativeDriver
- style={{
- ...styles.container,
- bottom: 10 + CustomTabBar.TAB_BAR_HEIGHT
- }}>
- <Surface style={styles.surface}>
- <View style={styles.fabContainer}>
- <AnimatedFAB
- animation={this.props.seekAttention ? "bounce" : undefined}
- easing="ease-out"
- iterationDelay={500}
- iterationCount="infinite"
- useNativeDriver
- // useNativeDriver={true}
- style={styles.fab}
- icon="account-clock"
- onPress={() => this.props.navigation.navigate('group-select')}
- />
- </View>
- <View style={{flexDirection: 'row'}}>
- <IconButton
- icon={this.displayModeIcons[this.state.currentMode]}
- color={buttonColor}
- onPress={this.changeDisplayMode}/>
- <IconButton
- icon="clock-in"
- color={buttonColor}
- style={{marginLeft: 5}}
- onPress={() => this.props.onPress('today', undefined)}/>
- </View>
- <View style={{flexDirection: 'row'}}>
- <IconButton
- icon="chevron-left"
- color={buttonColor}
- onPress={() => this.props.onPress('prev', undefined)}/>
- <IconButton
- icon="chevron-right"
- color={buttonColor}
- style={{marginLeft: 5}}
- onPress={() => this.props.onPress('next', undefined)}/>
- </View>
- </Surface>
- </Animatable.View>
- );
- }
- }
-
- const styles = StyleSheet.create({
- container: {
- position: 'absolute',
- left: '5%',
- width: '90%',
- },
- surface: {
- position: 'relative',
- flexDirection: 'row',
- justifyContent: 'space-between',
- alignItems: 'center',
- borderRadius: 50,
- elevation: 2,
- },
- fabContainer: {
- position: "absolute",
- left: 0,
- right: 0,
- alignItems: "center",
- width: '100%',
- height: '100%'
- },
- fab: {
- position: 'absolute',
- alignSelf: 'center',
- top: '-25%',
- }
- });
-
- export default withTheme(AnimatedBottomBar);
|