BEfore spliting modal into components

ShyshkovOleg · Aug 11, 2019 · addc909 · addc909
1 parent 830c026
commit addc909
Show file tree

Hide file tree

Showing 7 changed files with 233 additions and 45 deletions.
diff --git a/App.js b/App.js
@@ -3,12 +3,18 @@ import {
   StyleSheet,
   ScrollView,
   View,
-  Dimensions
+  Dimensions,
+  Image,
+  StatusBar,
+  TouchableOpacity,
+  Text
 } from 'react-native';
+
 import {Colors} from 'react-native/Libraries/NewAppScreen';
 
 import ContactCard from './components/ContactCard';
 import FancyButton from './components/FancyButton';
+import CustomModal from './components/Modal';
 
 export default class App extends Component {
 
@@ -17,54 +23,94 @@ export default class App extends Component {
     this.state = {
       items: [
         {id: 0, firstName: 'Oleg', lastName: 'Shyshkov', cell: '+38098816004', email: "[email protected]"},
-        {id: 1, firstName: 'Oleg', lastName: 'Shyshkov', cell: '+38098816004', email: "[email protected]"},
-        {id: 2, firstName: 'Oleg', lastName: 'Shyshkov', cell: '+38098816004', email: "[email protected]"},
-        {id: 3, firstName: 'Oleg', lastName: 'Shyshkov', cell: '+38098816004', email: "[email protected]"},
-        {id: 4, firstName: 'Oleg', lastName: 'Shyshkov', cell: '+38098816004', email: "[email protected]"},
-        {id: 5, firstName: 'Oleg', lastName: 'Shyshkov', cell: '+38098816004', email: "[email protected]"},
-        {id: 6, firstName: 'Oleg', lastName: 'Shyshkov', cell: '+38098816004', email: "[email protected]"},
-        {id: 7, firstName: 'Oleg', lastName: 'Shyshkov', cell: '+38098816004', email: "[email protected]"},
-        {id: 8, firstName: 'Oleg', lastName: 'Shyshkov', cell: '+38098816004', email: "[email protected]"},
-        {id: 9, firstName: 'Oleg', lastName: 'Shyshkov', cell: '+38098816004', email: "[email protected]"}
+        {id: 1, firstName: 'Вікторія', lastName: 'Шишкова', cell: 'немає', email: "немає"},
+        {id: 2, firstName: 'Andrii', lastName: 'Shyshkov', cell: '+380978458000', email: "[email protected]"},
+        {id: 3, firstName: 'Надія', lastName: 'Шишкова', cell: '+380679087261', email: "[email protected]"},
+        {id: 4, firstName: 'Тетяна', lastName: 'Шишкова', cell: '+380977460988', email: "[email protected]"}
       ],
       isPortrait: true,
-      screenWidt: Dimensions.get('window').width
+      screenWidth: Dimensions.get('window').width,
+      isRearranged: false,
+      modalVisible: false,
+      itemData: {}
     }
   }
 
   componentDidMount() {
     Dimensions.addEventListener('change', ({window: {width, height}}) => {
       width < height ? this.setState({isPortrait: true}) : this.setState({isPortrait: false});
+      this.setState({screenWidth: Dimensions.get('window').width})
       // alert(Dimensions.get('window').width)
     })
   }
 
   addItem = () => {
     // this.state.items.push({name: new Date().getTime()});
     this.setState({
-      items: [...this.state.items, {name: new Date().getTime()}]
-    })
+      items: [...this.state.items, {id: new Date().getTime(), firstName: 'Oleg', lastName: 'Shyshkov', cell: '+38098816004', email: "[email protected]"}],
+    });
+    // this.setModalVisible(true);
+
+    // setTimeout(() => {
+    //   this.setState({modalVisible: false})
+    // }, 3000);
+  }
+
+  rearrangeLayout = () => {
+    const screenWidth = Dimensions.get('window').width
+    if(this.state.isPortrait) {
+      this.state.isRearranged = !this.state.isRearranged;
+      this.state.isRearranged ? this.setState({screenWidth: screenWidth / 2}) : this.setState({screenWidth: screenWidth});
+    }
+  }
+
+  setModalVisible = (visible, itemData) => {
+    this.setState({modalVisible: visible, itemData: itemData});
+    // alert(JSON.stringify(data))
   }
 
   render () {
     let index;
     return (
-      <View style={styles.container}>
-        <ScrollView>
+      <View style={{flexDirection: 'column', flex: 1}}>
+        <StatusBar hidden />
+
+        <CustomModal 
+          modalVisible={this.state.modalVisible} 
+          toggleModal={this.setModalVisible} 
+          animationType="fade" 
+          isPortrait={this.state.isPortrait}
+          itemData={this.state.itemData}
+        />
+
+        <View style={{height: 55, marginTop: -5, backgroundColor: '#67B826', justifyContent: "space-between", alignItems: 'center', flexDirection: 'row'}}>
+          <Text style={{color: 'white', fontWeight: 'bold', fontSize: 22, marginLeft: 10,}}>Contact List</Text>
+          <TouchableOpacity onPress={this.rearrangeLayout}>
+            <Image style={{resizeMode: 'center', height: '100%', marginRight: 10}} source={require('./images/menu.png')}/>
+          </TouchableOpacity>
+        </View>
 
-          <View style={styles.contacts}>
-            {this.state.items.map(el => {
-                return (
-                  <ContactCard key={el.id} item={el} isPortrait={this.state.isPortrait} screenWidth={Dimensions.get('window').width}/>
-                )
-              })
-            }
-          </View>
+        <View style={styles.container}>
+          <ScrollView>
 
-        </ScrollView>
-        <View style={styles.button}>
-            {/* <Button title="ADD" onPress={this.addItem} color="#841584"/> */}
-            <FancyButton onPress={() => console.log("Pressed Add")} title={'ADD CONTACT'} disabled={false}/>
+            <View style={styles.contacts}>
+              {this.state.items.map(el => {
+                  return (
+                    <ContactCard key={el.id} item={el}
+                    isPortrait={this.state.isPortrait}
+                    screenWidth={this.state.screenWidth}
+                    isRearranged={this.state.isRearranged}
+                    toggleModal={this.setModalVisible}
+                    />
+                  )
+                })
+              }
+            </View>
+
+          </ScrollView>
+          <View style={styles.button}>
+              <FancyButton onPress={this.addItem} title={'ADD CONTACT'} disabled={false}/>
+          </View>
         </View>
       </View>
     );
@@ -86,23 +132,14 @@ const styles = StyleSheet.create({
     flex: 9,
     flexWrap: 'wrap',
     flexDirection: 'row',
-    // justifyContent: 'space-around', // determine last items positions
     justifyContent: 'center',
-    // alignItems: 'stretch',
     margin: 5
   },
   button: {
-    // alignItems: 'stretch',
-    // flex: 2,
     justifyContent: 'flex-end',
     margin: 5,
     height: 60,
-    // backgroundColor: '#272734'
   },
-  // list: {
-  //   flex: 9,
-  //   alignItems: 'stretch',
-  // }
 });
 
 // export default App;
diff --git a/components/ContactCard.js b/components/ContactCard.js
@@ -11,7 +11,8 @@ const ContactCard = (props) => {
                 backgroundColor: Colors.dark,
                 borderRadius: 5,
                 height: 100,
-                width: '100%',
+                // width: '100%',
+                width: props.screenWidth - 20,
                 flexDirection: 'row',
                 margin: 5,
             };
@@ -28,23 +29,27 @@ const ContactCard = (props) => {
     }
     return (
         // <TouchableOpacity style={props.isPortrait ? styles.cardP : styles.cardL}>
-        <TouchableOpacity style={this.dynamicStyle()}>
+        <TouchableOpacity style={this.dynamicStyle()} onPress={() => props.toggleModal(true, props.item)}>
 
             <View style={{flexDirection: 'column', flex: 2, margin: 5}}>
                 <Text style={styles.bigText}>{props.item.firstName + ' ' +  props.item.lastName}</Text>
                 <Text style={styles.smallText}>{props.item.cell}</Text>
                 <Text style={styles.smallText}>{props.item.email}</Text>
             </View >
 
-            <View style={{flex: 1, justifyContent: "center", backgroundColor: "#67B826"}}>
+            {
+                props.isRearranged ?
+                <View></View> :
+                <View style={{flex: 1, justifyContent: "center", backgroundColor: "#67B826"}}>
 
-                {
-                    props.item.id %2 === 0 ?
-                    <Image style={{resizeMode: 'center', width: '100%'}} source={require('../images/man.png')}/> :
-                    <Image style={{resizeMode: 'center', width: '100%'}} source={require('../images/girl.png')}/>
-                }
+                    {
+                        props.item.id %2 === 0 ?
+                        <Image style={{resizeMode: 'center', width: '100%'}} source={require('../images/man.png')}/> :
+                        <Image style={{resizeMode: 'center', width: '100%'}} source={require('../images/girl.png')}/>
+                    }
 
-            </View>
+                </View>
+            }
         </TouchableOpacity>
     )
 }

diff --git a/components/ContactDetails.js b/components/ContactDetails.js
@@ -0,0 +1,56 @@
+import React from 'react';
+import { View, Text, StyleSheet, TouchableOpacity, Image, Dimensions } from 'react-native';
+import { Colors } from 'react-native/Libraries/NewAppScreen';
+
+let screenWidth;
+
+const ContactDetails = (props) => {
+    return (
+        <View style={{flexDirecrtion: 'row', flex: 1, alignItems: 'flex-start', justifyContent: 'center', flexWrap: 'wrap'}}>
+            <View style={{flexDirection: 'column', margin: 10}}>
+                <Text style={styles.smallText}>First name: </Text>
+                <Text style={styles.smallText}>Last Name: </Text>
+                <Text style={styles.smallText}>Phone: </Text>
+                <Text style={styles.smallText}>Email: </Text>
+            </View >
+            <View style={{flexDirection: 'column', margin: 10}}>
+                <Text style={styles.bigText}>{itemData.firstName}</Text>
+                <Text style={styles.bigText}>{itemData.lastName}</Text>
+                <Text style={styles.smallText}>{itemData.cell}</Text>
+                <Text style={styles.smallText}>{itemData.email}</Text>
+            </View >
+        </View>
+    )
+}
+
+const styles = StyleSheet.create({
+    cardP: {
+        backgroundColor: Colors.dark,
+        // backgroundColor: "#88D840",
+        borderRadius: 5,
+        height: 100,
+        width: '100%',
+        flexDirection: 'row',
+        margin: 5,
+    },
+    cardL: {
+        backgroundColor: Colors.dark,
+        // backgroundColor: "#88D840",
+        borderRadius: 5,
+        height: 100,
+        // width: Dimensions.get('window').width / 1.8,
+        width: screenWidth,
+        flexDirection: 'row',
+        margin: 5,
+    },
+    smallText: {
+        color: '#ffffff',
+    },
+    bigText: {
+        color: '#ffffff',
+        fontWeight: 'bold',
+        fontSize: 20
+    }
+});
+
+export default ContactDetails;
diff --git a/components/Modal.js b/components/Modal.js
@@ -0,0 +1,90 @@
+import React, { Component } from 'react';
+import { PropTypes } from 'prop-types';
+import {
+  View,
+  Image,
+  Text,
+  Modal,
+  StyleSheet,
+  TouchableOpacity
+} from 'react-native';
+import { Colors } from 'react-native/Libraries/NewAppScreen';
+
+// import colors from '../styles/colors';
+
+export default class CustomModal extends Component {
+    // constructor(props){
+    //     super(props)
+    // }
+
+    render() {
+        const { animationType, modalVisible, toggleModal, isPortrait, itemData } = this.props;
+        return (
+        <Modal animationType={animationType} transparent visible={modalVisible}>
+            <View style={styles.wrapper}>
+              <View style={isPortrait ? styles.modalContainer : styles.modalContainerLanscape}>
+
+                <TouchableOpacity style={{alignItems: 'flex-end', justifyContent: 'center', height: 50}} onPress={() => {toggleModal(false, {})}}>
+                    <Image style={{height: 20, width: 20, marginRight: 15}} source={require('../images/close.png')}/>
+                </TouchableOpacity>
+
+                <View style={{flexDirection: 'column'}}>
+
+                  {/* <View style={{flexDirecrtion: 'row', flex: 1, alignItems: 'flex-start', justifyContent: 'center', flexWrap: 'wrap'}}>
+                    <View style={{flexDirection: 'column', margin: 10}}>
+                      <Text style={styles.smallText}>First name: </Text>
+                      <Text style={styles.smallText}>Last Name: </Text>
+                      <Text style={styles.smallText}>Phone: </Text>
+                      <Text style={styles.smallText}>Email: </Text>
+                    </View >
+                    <View style={{flexDirection: 'column', margin: 10}}>
+                      <Text style={styles.bigText}>{itemData.firstName}</Text>
+                      <Text style={styles.bigText}>{itemData.lastName}</Text>
+                      <Text style={styles.smallText}>{itemData.cell}</Text>
+                      <Text style={styles.smallText}>{itemData.email}</Text>
+                    </View >
+                  </View> */}
+
+                  <View style={{flex: 1, justifyContent: "flex-end", alignItems: 'center', width: '100%'}}>
+                    <Image style={{resizeMode: 'center', height: 100, width: 100, borderRadius: 100}} source={require('../images/placeholder.png')}/>
+                  </View>
+                </View>
+
+              </View>
+            </View>
+        </Modal>
+        );
+    }
+}
+
+const styles = StyleSheet.create({
+  wrapper: {
+    zIndex: 9,
+    backgroundColor: 'rgba(0,0,0,0.6)',
+    width: '100%',
+    height: '100%',
+
+    alignItems: "center",
+    justifyContent: 'center'
+  },
+  modalContainer: {
+    width: '90%',
+    height: '25%',
+    backgroundColor: Colors.lighter,
+    borderRadius: 5,
+  },
+  modalContainerLanscape: {
+    width: '90%',
+    height: '50%',
+    backgroundColor: Colors.lighter,
+    borderRadius: 5,
+  },
+  smallText: {
+    color: '#272734',
+  },
+  bigText: {
+      color: '#272734',
+      fontWeight: 'bold',
+      // fontSize: 20
+  }
+});
diff --git a/images/close.png b/images/close.png
diff --git a/images/menu.png b/images/menu.png
diff --git a/images/placeholder.png b/images/placeholder.png