@dormakaba/digital-reactnative-client/src/modules/navigation/Drawer.js

dormakaba digital react components and utils

import React from 'react';
import { ScrollView, View, TouchableWithoutFeedback, Image } from 'react-native';
import { Button, Text, Icon, Avatar, colors } from '@dormakaba/digital-reactnative-visual';
import { AppState } from '../../DokaApp';
// import { SafeAreaView } from 'react-navigation';

const logoWidth = 308;
const logoHeight = 80;
const logoScale = 0.8;

export function Drawer({
  width,
  user = {},
  gotoDashboard = () => {},
  gotoAccount,
  gotoAccountText = '',
  handleLogout,
  handleLogoutText = '',
  children,
}) {
  const { name, headers, pictureUrl } = user;
  const styles = { justifyContent: 'space-between', backgroundColor: colors.white };
  if (width) {
    styles.width = width;
    styles.flex = 0;
  } else {
    styles.flex = 9;
  }

  return (
    <ScrollView>
      <AppState>
        {({ deviceInfo = {} }) => (
          <View style={[{ height: deviceInfo ? deviceInfo.height : '100%' }, styles]}>
            <View style={{ flex: 1, justifyContent: 'space-between' }}>
              <View>
                {/* <View style={{ borderBottomWidth: 20, borderBottomColor: colors.blue }} /> */}
                <View style={{ alignItems: 'center' }}>
                  <TouchableWithoutFeedback onPress={() => gotoDashboard}>
                    <Image
                      source={require('./doka.png')}
                      style={{ width: logoWidth * logoScale, height: logoHeight * logoScale }}
                    />
                  </TouchableWithoutFeedback>
                </View>
                <View style={{ borderBottomWidth: 2, borderBottomColor: colors.backgroundGray }} />
                {children}
              </View>
              {user && (
                <View
                  style={{ backgroundColor: colors.backgroundGray, justifyContent: 'flex-end' }}
                >
                  <View>
                    <View style={{ flexDirection: 'row', alignItems: 'center', paddingRight: 10 }}>
                      <Avatar info name={name} headers={headers} src={pictureUrl} />
                      <Text bold style={{ marginLeft: 10 }}>
                        {name}
                      </Text>
                    </View>
                    {gotoAccount && (
                      <Button
                        secondary
                        block
                        containerStyle={{
                          alignItems: 'flex-start',
                          backgroundColor: colors.white,
                          borderColor: colors.white,
                          borderBottomColor: colors.borderGray,
                        }}
                        style={{ flex: 9, alignItems: 'flex-start', justifyContent: 'center' }}
                        onPress={gotoAccount}
                      >
                        <Text style={{ flex: 9, alignSelf: 'flex-start' }}>
                          {gotoAccountText.toUpperCase()}
                        </Text>
                        <Icon style={{ alignSelf: 'flex-end' }} name="140222" info />
                      </Button>
                    )}
                    {handleLogout && (
                      <Button
                        secondary
                        block
                        containerStyle={{
                          alignItems: 'flex-start',
                          backgroundColor: colors.white,
                          borderColor: colors.white,
                        }}
                        style={{ flex: 9, alignItems: 'flex-start', justifyContent: 'center' }}
                        onPress={handleLogout}
                      >
                        <Text style={{ flex: 9, alignSelf: 'flex-start' }}>
                          {handleLogoutText.toUpperCase()}
                        </Text>
                        <Icon style={{ alignSelf: 'flex-end' }} name="14049" info />
                      </Button>
                    )}
                  </View>
                </View>
              )}
            </View>
          </View>
        )}
      </AppState>

      {/*
      <SafeAreaView style={styles.container} forceInset={{ top: 'always', horizontal: 'never' }}>
      */}

      {/* <DrawerItems {...props} /> */}
      {/*
      </SafeAreaView>
      */}
    </ScrollView>
  );
}

// const styles = StyleSheet.create({
//   container: {
//     flex: 1,
//   },
// });