Merge branch 'making_components'

__tests__/screens/ProfileInfoScreen.test.js

@@ -38,8 +38,8 @@ describe('Testing ProfileInfoScreen', () => {
     };
     const wrapper = shallow(<ProfileInfoScreen {...myProps} />);
 
-    const foundPresident = wrapper.findWhere(c => c.key() === 'is_president');
-    const foundConselour = wrapper.findWhere(c => c.key() === 'is_counselor');
+    const foundPresident = wrapper.findWhere(c => c.text() === 'Presidente');
+    const foundConselour = wrapper.findWhere(c => c.text() === 'Conselheiro');
 
     expect(foundPresident.length).toBe(1);
     expect(foundConselour.length).toBe(0);
@@ -57,8 +57,8 @@ describe('Testing ProfileInfoScreen', () => {
     };
     const wrapper = shallow(<ProfileInfoScreen {...myProps} />);
 
-    const foundPresident = wrapper.findWhere(c => c.key() === 'is_president');
-    const foundConselour = wrapper.findWhere(c => c.key() === 'is_counselor');
+    const foundPresident = wrapper.findWhere(c => c.text() === 'Presidente');
+    const foundConselour = wrapper.findWhere(c => c.text() === 'Conselheiro');
 
     expect(foundPresident.length).toBe(0);
     expect(foundConselour.length).toBe(1);

__tests__/screens/__snapshots__/MeetingInvites.test.js.snap

@@ -101,7 +101,8 @@ exports[`Testing MeetingInvites renders meeting as expected 1`] = `
                 }
               }
             >
-              Data: 
+              Data:
+               
             </Text>
           </Text>
           <Text
@@ -127,7 +128,8 @@ exports[`Testing MeetingInvites renders meeting as expected 1`] = `
                 }
               }
             >
-              Horário: 
+              Horário:
+               
             </Text>
           </Text>
           <Text
@@ -212,123 +214,54 @@ exports[`Testing MeetingInvites renders meeting as expected 1`] = `
       }
     }
   >
-    <View
-      style={
-        Object {
-          "alignItems": "center",
-          "backgroundColor": "#FAFAFA",
-          "borderColor": "black",
-          "borderRadius": 3,
-          "borderWidth": 1,
-          "flex": 1,
-          "flexDirection": "row",
-          "justifyContent": "space-between",
-          "marginHorizontal": 15,
-          "marginVertical": 10,
-        }
+    <ScheduleCard
+      data={
+        Array [
+          Object {
+            "label": "Data:",
+            "value": "13-06-2019",
+          },
+          Object {
+            "label": "Horário:",
+            "value": "21:56",
+          },
+        ]
       }
     >
       <View
         style={
           Object {
-            "justifyContent": "flex-start",
-            "marginTop": 5,
-            "paddingLeft": 4,
+            "flex": 3,
           }
         }
       >
-        <Text
-          accessible={true}
-          allowFontScaling={true}
-          disabled={false}
-          ellipsizeMode="tail"
-          style={
-            Object {
-              "fontSize": 15,
-              "paddingVertical": 2,
-            }
-          }
-        >
-          <Text
-            accessible={true}
-            allowFontScaling={true}
-            disabled={false}
-            ellipsizeMode="tail"
-            style={
-              Object {
-                "fontWeight": "bold",
-              }
-            }
-          >
-            Data: 
-          </Text>
-          13-06-2019
-        </Text>
-        <Text
-          accessible={true}
-          allowFontScaling={true}
-          disabled={false}
-          ellipsizeMode="tail"
-          style={
-            Object {
-              "fontSize": 15,
-              "paddingVertical": 2,
-            }
-          }
-        >
-          <Text
-            accessible={true}
-            allowFontScaling={true}
-            disabled={false}
-            ellipsizeMode="tail"
-            style={
-              Object {
-                "fontWeight": "bold",
-              }
-            }
-          >
-            Horário: 
-          </Text>
-          21:56
-        </Text>
-      </View>
-      <View
-        style={
-          Object {
-            "backgroundColor": "white",
-            "borderColor": "black",
-            "borderRadius": 7,
-            "borderWidth": 0.8,
-            "justifyContent": "center",
-            "marginRight": 20,
-            "marginTop": 5,
-            "padding": 8,
-            "width": 120,
-          }
-        }
-      >
-        <TouchableOpacity
-          activeOpacity={0.2}
+        <Button
+          enabled={true}
           key="+MeetingInfo"
           onPress={[Function]}
-        >
-          <Text
-            accessible={true}
-            allowFontScaling={true}
-            disabled={false}
-            ellipsizeMode="tail"
-            style={
-              Object {
+          style={
+            Object {
+              "design": Object {
+                "backgroundColor": "white",
+                "borderColor": "black",
+                "borderRadius": 7,
+                "borderWidth": 0.8,
+                "justifyContent": "center",
+                "marginBottom": 5,
+                "marginRight": 15,
+                "marginTop": 5,
+                "padding": 8,
+              },
+              "text": Object {
                 "fontSize": 12,
                 "textAlign": "center",
-              }
+              },
             }
-          >
-             + INFORMAÇÕES
-          </Text>
-        </TouchableOpacity>
+          }
+          text="+ INFORMAÇÕES"
+        />
       </View>
-    </View>
+    </ScheduleCard>
   </ScrollViewMock>
 </View>
 `;

src/Styles/ProfileStyles.js

@@ -0,0 +1,53 @@
+import { StyleSheet } from 'react-native';
+
+
+const styles = StyleSheet.create({
+  field: {
+    backgroundColor: '#FAFAFA',
+    paddingVertical: 4,
+    borderWidth: 1,
+    borderRadius: 7,
+    borderColor: 'gray',
+    marginHorizontal: 15,
+    marginBottom: 15,
+    marginTop: 15,
+    justifyContent: 'flex-start',
+    paddingLeft: 2,
+    paddingRight: 4,
+    flexDirection: 'row',
+    alignItems: 'center',
+  },
+
+  profileInfoScreen: {
+    flex: 1,
+  },
+
+  buttonContainer: {
+    paddingVertical: 10,
+    borderWidth: 1,
+    borderRadius: 7,
+    marginHorizontal: 15,
+    marginTop: 30,
+    marginBottom: 20,
+    backgroundColor: '#FF9500',
+    justifyContent: 'flex-end',
+  },
+
+  buttonText: {
+    textAlign: 'center',
+    color: '#FFF',
+  },
+
+  infoProfileBox: {
+    backgroundColor: 'white',
+    marginBottom: 9,
+    flex: 6,
+    flexDirection: 'column',
+  },
+
+  icon: {
+    margin: 7,
+  },
+});
+
+export default styles;

src/components/Button.js

@@ -6,17 +6,28 @@ import styles from '../Styles/GeneralStyles';
 
 class Button extends React.Component {
   defineStyle() {
-    if (this.props.enabled) {
+    if (!this.props.style) {
+      if (this.props.enabled) {
+        return (
+          styles.bigButton
+        );
+      }
       return (
-        styles.bigButton
+        styles.disabledBigButton
       );
     }
-
     return (
-      styles.disabledBigButton
+      this.props.style.design
     );
   }
 
+  defineTextStyle() {
+    if (!this.props.style) {
+      return styles.buttonText;
+    }
+    return this.props.style.text;
+  }
+
   render() {
     return (
       <View>
@@ -26,20 +37,25 @@ class Button extends React.Component {
           disabled={!this.props.enabled}
           onPress={() => this.props.onPress()}
         >
-          <Text style={styles.buttonText}>{this.props.text}</Text>
+          <Text style={this.defineTextStyle()}>{this.props.text}</Text>
         </TouchableOpacity>
       </View>
     );
   }
 }
 
-const { string, bool, func } = PropTypes;
+const { string, bool, func, element } = PropTypes;
 
 Button.propTypes = {
   key: string.isRequired,
   text: string.isRequired,
   enabled: bool.isRequired,
   onPress: func.isRequired,
+  style: element,
+};
+
+Button.defaultProps = {
+  style: undefined,
 };
 
 export default Button;

src/components/ScheduleCard.js

@@ -0,0 +1,71 @@
+import React from 'react';
+import { Text, View, StyleSheet } from 'react-native';
+import PropTypes from 'prop-types';
+
+const styles = StyleSheet.create({
+  listSchedule: {
+    flex: 1,
+    marginHorizontal: 15,
+    marginVertical: 10,
+    borderColor: 'black',
+    borderWidth: 1,
+    borderRadius: 3,
+    backgroundColor: '#FAFAFA',
+    justifyContent: 'space-between',
+    flexDirection: 'row',
+    alignItems: 'center',
+  },
+
+  textBox: {
+    flex: 4,
+    paddingLeft: 4,
+    justifyContent: 'flex-start',
+    marginRight: 15,
+  },
+
+  text: {
+    fontSize: 15,
+    paddingVertical: 2,
+  },
+});
+
+class ScheduleCard extends React.Component {
+  constructor(props) {
+    super(props);
+    this.state = {
+      data: {},
+    };
+  }
+
+  render() {
+    return (
+      <View style={styles.listSchedule} key={this.props.keyProp}>
+        <View style={styles.textBox}>
+          {
+            this.props.data.map(item => (
+              <Text style={styles.text}>
+                <Text style={{ fontWeight: 'bold' }}>{item.label} </Text>
+                {item.value}
+              </Text>
+            ))}
+        </View>
+        {this.props.children ? this.props.children : undefined}
+      </View>
+    );
+  }
+}
+
+ScheduleCard.propTypes = {
+  data: PropTypes.arrayOf(PropTypes.shape({
+    label: PropTypes.string.isRequired,
+    value: PropTypes.string.isRequired,
+  })).isRequired,
+  keyProp: PropTypes.string.isRequired,
+  children: PropTypes.element,
+};
+
+ScheduleCard.defaultProps = {
+  children: undefined,
+};
+
+export default ScheduleCard;