From e004fd362583a020b07f87536aac077269eaad27 Mon Sep 17 00:00:00 2001
From: Ivan Chen <ivan@thetaggid.com>
Date: Tue, 27 Oct 2020 18:34:08 -0400
Subject: date picker done (#80)

---
 src/components/onboarding/BirthDatePicker.tsx | 125 ++++++++++++++++++++++++++
 src/components/onboarding/TaggDatePicker.tsx  |  63 -------------
 src/components/onboarding/index.ts            |   2 +-
 3 files changed, 126 insertions(+), 64 deletions(-)
 create mode 100644 src/components/onboarding/BirthDatePicker.tsx
 delete mode 100644 src/components/onboarding/TaggDatePicker.tsx

(limited to 'src/components/onboarding')

diff --git a/src/components/onboarding/BirthDatePicker.tsx b/src/components/onboarding/BirthDatePicker.tsx
new file mode 100644
index 00000000..f97f1a72
--- /dev/null
+++ b/src/components/onboarding/BirthDatePicker.tsx
@@ -0,0 +1,125 @@
+import moment from 'moment';
+import React, {useState} from 'react';
+import {
+  Modal,
+  StyleSheet,
+  Text,
+  TextInputProps,
+  TouchableWithoutFeedback,
+  View,
+} from 'react-native';
+import {Button} from 'react-native-elements';
+import {TouchableOpacity} from 'react-native-gesture-handler';
+import {TaggDatePicker} from '../common';
+
+interface BirthDatePickerProps extends TextInputProps {
+  handleBDUpdate: (_: Date) => void;
+  width?: number | string;
+}
+
+const BirthDatePicker = React.forwardRef(
+  (props: BirthDatePickerProps, ref: any) => {
+    const getMaxDate = () => {
+      const maxDate = moment().subtract(13, 'y').subtract(1, 'd');
+      return maxDate.toDate();
+    };
+    const [date, setDate] = useState(new Date(0));
+    const [hidden, setHidden] = useState(true);
+    const [updated, setUpdated] = useState(false);
+    const textColor = updated ? 'white' : '#ddd';
+    const updateDate = (newDate: Date) => {
+      props.handleBDUpdate(newDate);
+      setDate(newDate);
+      setUpdated(true);
+    };
+    return (
+      <View style={styles.container}>
+        <TouchableOpacity
+          onPress={() => {
+            setHidden(false);
+          }}>
+          <Text
+            style={[styles.input, {width: props.width}, {color: textColor}]}
+            ref={ref}
+            {...props}>
+            {updated ? moment(date).format('YYYY-MM-DD') : 'Date of Birth'}
+          </Text>
+        </TouchableOpacity>
+        <Modal visible={!hidden} transparent={true} animationType="fade">
+          <TouchableWithoutFeedback
+            onPress={() => {
+              setHidden(true);
+            }}>
+            <View style={styles.bottomView}>
+              <TouchableWithoutFeedback>
+                <View style={styles.modalView}>
+                  <View style={styles.buttonView}>
+                    <Button
+                      title="Done"
+                      titleStyle={styles.doneButtonTitle}
+                      buttonStyle={styles.doneButton}
+                      onPress={() => {
+                        setHidden(true);
+                      }}
+                    />
+                  </View>
+                  <TaggDatePicker
+                    handleDateUpdate={updateDate}
+                    maxDate={getMaxDate()}
+                    textColor={'black'}
+                  />
+                </View>
+              </TouchableWithoutFeedback>
+            </View>
+          </TouchableWithoutFeedback>
+        </Modal>
+      </View>
+    );
+  },
+);
+
+const styles = StyleSheet.create({
+  container: {
+    width: '100%',
+    alignItems: 'center',
+    marginVertical: 11,
+  },
+  input: {
+    height: 40,
+    fontSize: 16,
+    paddingTop: '2%',
+    fontWeight: '600',
+    borderColor: '#fffdfd',
+    borderWidth: 2,
+    borderRadius: 20,
+    paddingLeft: 13,
+  },
+  modalView: {
+    backgroundColor: 'rgb(202, 206, 212)',
+    height: '29%',
+    alignItems: 'center',
+    justifyContent: 'space-between',
+  },
+  bottomView: {
+    flex: 1,
+    justifyContent: 'flex-end',
+  },
+  buttonView: {
+    backgroundColor: 'rgb(247, 247, 247)',
+    width: '100%',
+    paddingRight: '2.5%',
+    alignItems: 'flex-end',
+    flexDirection: 'row',
+    justifyContent: 'flex-end',
+  },
+  doneButtonTitle: {
+    fontWeight: '600',
+    fontSize: 17,
+    color: 'rgb(19, 125, 250)',
+  },
+  doneButton: {
+    backgroundColor: 'transparent',
+  },
+});
+
+export default BirthDatePicker;
diff --git a/src/components/onboarding/TaggDatePicker.tsx b/src/components/onboarding/TaggDatePicker.tsx
deleted file mode 100644
index 39af6234..00000000
--- a/src/components/onboarding/TaggDatePicker.tsx
+++ /dev/null
@@ -1,63 +0,0 @@
-import React from 'react';
-import DatePicker from 'react-native-datepicker';
-import {View, StyleSheet, TextInputProps} from 'react-native';
-
-interface TaggDatePickerProps extends TextInputProps {
-  width?: number | string;
-  date?: string;
-  maxDate?: Date | string;
-}
-/**
- * An input component that receives all props a normal TextInput component does. TaggInput components grow to 60% of their parent's width by default, but this can be set using the `width` prop.
- */
-const TaggDatePicker = React.forwardRef(
-  (props: TaggDatePickerProps, ref: any) => {
-    return (
-      <View style={styles.container}>
-        <DatePicker
-          {...props}
-          style={styles.input}
-          placeholder={'Date of Birth'}
-          showIcon={false}
-          ref={ref}
-          format={'YYYY-MM-DD'}
-          customStyles={{
-            placeholderText: {
-              color: '#ddd',
-
-              fontSize: 16,
-              fontWeight: '600',
-            },
-            dateText: {
-              color: '#fff',
-              fontSize: 16,
-              fontWeight: '600',
-            },
-            dateInput: {
-              borderColor: '#fffdfd',
-              borderWidth: 2,
-              borderRadius: 20,
-              justifyContent: 'center',
-              alignItems: 'flex-start',
-              paddingLeft: 13,
-            },
-          }}
-        />
-      </View>
-    );
-  },
-);
-
-const styles = StyleSheet.create({
-  container: {
-    width: '100%',
-    alignItems: 'center',
-    marginVertical: 11,
-  },
-  input: {
-    minWidth: '67%',
-    height: 40,
-  },
-});
-
-export default TaggDatePicker;
diff --git a/src/components/onboarding/index.ts b/src/components/onboarding/index.ts
index aaad7a62..fde4e0af 100644
--- a/src/components/onboarding/index.ts
+++ b/src/components/onboarding/index.ts
@@ -5,7 +5,7 @@ export {default as TermsConditions} from './TermsConditions';
 export {default as SubmitButton} from './SubmitButton';
 export {default as TaggInput} from './TaggInput';
 export {default as TaggBigInput} from './TaggBigInput';
-export {default as TaggDatePicker} from './TaggDatePicker';
+export {default as BirthDatePicker} from './BirthDatePicker';
 export {default as TaggDropDown} from './TaggDropDown';
 export {default as SocialMediaLinker} from './SocialMediaLinker';
 export {default as LinkSocialMedia} from './LinkSocialMedia';
-- 
cgit v1.2.3-70-g09d2