Merge pull request #680 from ChildMindInstitute/refactoring-select-co…

…mponent-#673 Refactoring select component #673
ChildMindInstitute · Jan 22, 2020 · 9494005 · 9494005
2 parents b0c6ed5 + da97f6e
commit 9494005
Show file tree

Hide file tree

Showing 2 changed files with 47 additions and 52 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -20,6 +20,9 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 ## [0.9.14] - 2019-01-10
 - :bug: Fix Resume action to take the user back to the last question he or she did not answer
 
+## [0.9.16] - 2020-01-17
+- :recycle: Cross platform refactor for Select Component without Modal
+
 ## [0.9.13] - 2019-01-08
 - :bug: Fix DatePickerIOS doesn't show on Dark Mode for iOS 13.3
 

diff --git a/app/widgets/Select.js b/app/widgets/Select.js
@@ -1,17 +1,15 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import { Button, Text, Container, ListItem, Left, Right, Icon } from 'native-base';
+import { Text, Container, ListItem, Left, Right, Icon } from 'native-base';
 import { Picker, Modal, StyleSheet, View } from 'react-native';
 import { colors } from '../theme';
 
 const styles = StyleSheet.create({
   paddingContent: {
-    padding: 20,
-    flexGrow: 1,
-  },
-  datePickerContainer: {
-    flexGrow: 1,
-    justifyContent: 'center',
+    flex: 1,
+    borderTopWidth: 2,
+    borderTopColor: colors.grey,
+    justifyContent: 'flex-start',
   },
   label: {
     fontSize: 13,
@@ -24,6 +22,13 @@ export class Select extends React.Component {
     modalVisible: false,
   };
 
+
+  componentDidUpdate(prevProps) {
+    if (prevProps.value !== this.props.value) {
+      this.setState({ modalVisible: false });
+    }
+  }
+
   setModalVisible(visible) {
     this.setState({ modalVisible: visible });
   }
@@ -42,54 +47,41 @@ export class Select extends React.Component {
     const selectedItem = config.itemList.find(item => item.value === value);
     return (
       <View style={{ marginBottom: 20 }}>
-        <ListItem
-          onPress={() => {
-            this.setModalVisible(true);
-          }}
-        >
-          <Left>
-            <Text>{selectedItem ? selectedItem.name.en : 'Select one'}</Text>
-          </Left>
-          <Right>
-            <Icon name="arrow-forward" />
-          </Right>
-        </ListItem>
-        <Modal
-          animationType="slide"
-          transparent={false}
-          visible={this.state.modalVisible}
-        >
+        {this.state.modalVisible ? (
           <Container style={styles.paddingContent}>
-            <Container style={styles.datePickerContainer}>
-              <Picker
-                selectedValue={value}
-                onValueChange={onChange}
-              >
-                {
-                  config.itemList.map((item, index) => (
-                    <Picker.Item
-                      label={item.name.en}
-                      value={item.value}
-                      key={index}
-                    />
-                  ))
-                }
-              </Picker>
-            </Container>
-            <Button
-              full
-              style={styles.okButton}
-              onPress={() => {
-                if (!value) {
-                  onChange(config.itemList[0].value);
-                }
-                this.setModalVisible(false);
-              }}
+            <Picker
+              selectedValue={value}
+              onValueChange={onChange}
             >
-              <Text>OK</Text>
-            </Button>
+              <Picker.Item
+                label="Select one"
+                value={config.itemList[0].value}
+              />
+              {
+                config.itemList.map((item, index) => (
+                  <Picker.Item
+                    label={item.name.en}
+                    value={item.value}
+                    key={index}
+                  />
+                ))
+              }
+            </Picker>
           </Container>
-        </Modal>
+        ) : (
+          <ListItem
+            onPress={() => {
+              this.setModalVisible(true);
+            }}
+          >
+            <Left>
+              <Text>{selectedItem ? selectedItem.name.en : 'Select one'}</Text>
+            </Left>
+            <Right>
+              <Icon name="arrow-forward" />
+            </Right>
+          </ListItem>
+        )}
       </View>
     );
   }