You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.

110 lines
2.9 KiB

  1. import React, { Component } from "react";
  2. import { StyleSheet, Text, View, FlatList } from "react-native";
  3. import {
  4. Container,
  5. Content,
  6. Left,
  7. Body,
  8. Right,
  9. Icon,
  10. List,
  11. ListItem,
  12. Button,
  13. } from "native-base";
  14. import * as colors from "../assets/css/Colors";
  15. import { Divider } from "../components/GeneralComponents";
  16. import { menus, font_description, font_title } from "../config/Constants";
  17. import Dialog from "react-native-dialog";
  18. export default class More extends Component<Props> {
  19. constructor(props) {
  20. super(props);
  21. this.state = {
  22. dialogVisible: false,
  23. };
  24. }
  25. navigate = (route) => {
  26. if (route == "Logout") {
  27. this.showDialog();
  28. } else if (route == "AddressList") {
  29. this.props.navigation.navigate(route, { from: "More" });
  30. } else {
  31. this.props.navigation.navigate(route);
  32. }
  33. };
  34. showDialog = () => {
  35. this.setState({ dialogVisible: true });
  36. };
  37. closeDialog = () => {
  38. this.setState({ dialogVisible: false });
  39. };
  40. handleCancel = () => {
  41. this.setState({ dialogVisible: false });
  42. };
  43. handleLogout = async () => {
  44. await this.closeDialog();
  45. await this.props.navigation.navigate("Logout");
  46. };
  47. render() {
  48. return (
  49. <Container style={styles.more_style1}>
  50. <View style={styles.more_style2}>
  51. <Text style={styles.more_style3}>More</Text>
  52. </View>
  53. <Divider />
  54. <Content style={styles.more_style4}>
  55. <Dialog.Container visible={this.state.dialogVisible}>
  56. <Dialog.Title>Confirm</Dialog.Title>
  57. <Dialog.Description>Do you want to logout?.</Dialog.Description>
  58. <Dialog.Button label="Yes" onPress={this.handleLogout} />
  59. <Dialog.Button label="No" onPress={this.handleCancel} />
  60. </Dialog.Container>
  61. <List>
  62. <FlatList
  63. data={menus}
  64. renderItem={({ item, index }) => (
  65. <ListItem icon onPress={() => this.navigate(item.route)}>
  66. <Left>
  67. <Button style={styles.more_style5}>
  68. <Icon active name={item.icon} />
  69. </Button>
  70. </Left>
  71. <Body>
  72. <Text style={styles.more_style6}>{item.menu_name}</Text>
  73. </Body>
  74. <Right />
  75. </ListItem>
  76. )}
  77. keyExtractor={(item) => item.menu_name}
  78. />
  79. </List>
  80. </Content>
  81. </Container>
  82. );
  83. }
  84. }
  85. const styles = StyleSheet.create({
  86. more_style1: { backgroundColor: colors.theme_bg_two },
  87. more_style2: { backgroundColor: colors.theme_bg_three, padding: 10 },
  88. more_style3: {
  89. fontSize: 16,
  90. color: colors.theme_fg_two,
  91. fontFamily: font_title,
  92. },
  93. more_style4: { backgroundColor: colors.theme_bg_three },
  94. more_style5: { backgroundColor: colors.theme_bg },
  95. more_style6: {
  96. fontSize: 16,
  97. color: colors.theme_fg_two,
  98. fontFamily: font_description,
  99. },
  100. });