suyash-srivastav
/
apk_backup

import React, { Component } from "react";
import { StyleSheet, Text, View, FlatList } from "react-native";
import {
  Container,
  Content,
  Left,
  Body,
  Right,
  Icon,
  List,
  ListItem,
  Button,
} from "native-base";
import * as colors from "../assets/css/Colors";
import { Divider } from "../components/GeneralComponents";
import { menus, font_description, font_title } from "../config/Constants";
import Dialog from "react-native-dialog";

export default class More extends Component<Props> {
  constructor(props) {
    super(props);
    this.state = {
      dialogVisible: false,
    };
  }

  navigate = (route) => {
    if (route == "Logout") {
      this.showDialog();
    } else if (route == "AddressList") {
      this.props.navigation.navigate(route, { from: "More" });
    } else {
      this.props.navigation.navigate(route);
    }
  };

  showDialog = () => {
    this.setState({ dialogVisible: true });
  };

  closeDialog = () => {
    this.setState({ dialogVisible: false });
  };

  handleCancel = () => {
    this.setState({ dialogVisible: false });
  };

  handleLogout = async () => {
    await this.closeDialog();
    await this.props.navigation.navigate("Logout");
  };

  render() {
    return (
      <Container style={styles.more_style1}>
        <View style={styles.more_style2}>
          <Text style={styles.more_style3}>More</Text>
        </View>
        <Divider />
        <Content style={styles.more_style4}>
          <Dialog.Container visible={this.state.dialogVisible}>
            <Dialog.Title>Confirm</Dialog.Title>
            <Dialog.Description>Do you want to logout?.</Dialog.Description>
            <Dialog.Button label="Yes" onPress={this.handleLogout} />
            <Dialog.Button label="No" onPress={this.handleCancel} />
          </Dialog.Container>

          <List>
            <FlatList
              data={menus}
              renderItem={({ item, index }) => (
                <ListItem icon onPress={() => this.navigate(item.route)}>
                  <Left>
                    <Button style={styles.more_style5}>
                      <Icon active name={item.icon} />
                    </Button>
                  </Left>
                  <Body>
                    <Text style={styles.more_style6}>{item.menu_name}</Text>
                  </Body>
                  <Right />
                </ListItem>
              )}
              keyExtractor={(item) => item.menu_name}
            />
          </List>
        </Content>
      </Container>
    );
  }
}

const styles = StyleSheet.create({
  more_style1: { backgroundColor: colors.theme_bg_two },
  more_style2: { backgroundColor: colors.theme_bg_three, padding: 10 },
  more_style3: {
    fontSize: 16,
    color: colors.theme_fg_two,
    fontFamily: font_title,
  },
  more_style4: { backgroundColor: colors.theme_bg_three },
  more_style5: { backgroundColor: colors.theme_bg },
  more_style6: {
    fontSize: 16,
    color: colors.theme_fg_two,
    fontFamily: font_description,
  },
});