hamagen-react-native/src/components/Drawer/DrawerContent.tsx at 1ed6cc2a80158d35ed9930efc575f9884d4f5c80 · MohGovIL/hamagen-react-native · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
import React, { useState, useMemo, useEffect } from 'react';
import { ImageBackground, StyleSheet, TouchableOpacity, View, Animated } from 'react-native';

import { DrawerNavigationProp, useIsDrawerOpen } from '@react-navigation/drawer';
import { useDispatch, useSelector } from 'react-redux';
import { Icon, Text } from '../common';
import { Store } from '../../types';
import {
  HIT_SLOP, PADDING_BOTTOM,
  PADDING_TOP,
  SCREEN_HEIGHT,
  SCREEN_WIDTH,
  VERSION_NAME,
} from '../../constants/Constants';
import SettingsDrawerContent from './SettingsDrawerContent';
import HomeDrawerContent from './HomeDrawerContent';
import * as LocalizedStyles from '../../constants/LocalizedStyles';

interface Props {
  navigation: DrawerNavigationProp<any, 'DrawerStack'>
}

const DrawerContent = ({ navigation }: Props) => {

  const { locale: { strings: { general: { versionNumber } }, isRTL } } = useSelector<Store, Store>(state => state);
  const [showSettings, setShowSettings] = useState(false);

  const isDrawerOpen = useIsDrawerOpen();

  useEffect(() => {
    if (!isDrawerOpen) {
      setShowSettings(false);
    }
  }, [isDrawerOpen]);


  return (
    <ImageBackground
      style={{ flex: 1, }}
      source={require('../../assets/main/menuBG.png')}
    >
      <TouchableOpacity
        style={[styles.close, { [LocalizedStyles.side(isRTL, true)]: 20 }]}
        hitSlop={HIT_SLOP}
        onPress={navigation.closeDrawer}
      >
        <Icon source={require('../../assets/main/menuClose.png')} width={12} height={18} />
      </TouchableOpacity>

      <View style={{ flex: 1, flexDirection: LocalizedStyles.flexDirection(isRTL) }}>
        {showSettings ?
          (<SettingsDrawerContent
            navigation={navigation}
            goToMainDrawer={() => setShowSettings(false)}
          />) :
          (<HomeDrawerContent
            navigation={navigation}
            showSettings={() => setShowSettings(true)}
          />)

        }

      </View>

      <View style={[styles.footerContainer, { alignSelf: LocalizedStyles.alignSelf(isRTL) }]}>
        <Text style={styles.versionText}>{`${versionNumber} ${VERSION_NAME}`}</Text>
      </View>
    </ImageBackground>
  );
};


const styles = StyleSheet.create({
  close: {
    position: 'absolute',
    top: PADDING_TOP(20),
    zIndex: 1000
  },
  buttonsContainer: {
    flex: 1,
    paddingTop: PADDING_TOP(SCREEN_HEIGHT * 0.15)
  },
  footerContainer: {
    paddingTop: 20,
    paddingBottom: PADDING_BOTTOM(20)
  },
  versionText: {
    fontSize: 12,
    paddingHorizontal: 25
  },
  item: {
    justifyContent: 'space-between',
    alignItems: 'center',

    paddingHorizontal: 25,
    paddingVertical: 24,

    borderBottomColor: 'white',
    borderBottomWidth: 1.5,
  },
  label: {
    fontSize: 18,
    paddingHorizontal: 19
  }
});


export default DrawerContent;