From 713d169915a82edfcfe4b44622e3dce8c6adaf0c Mon Sep 17 00:00:00 2001
From: Shravya Ramesh <37447613+shravyaramesh@users.noreply.github.com>
Date: Tue, 17 Nov 2020 18:06:14 -0800
Subject: [TMA-382] Edit profile screen (#121)

* added more icon

* a less fat icon

* and the actual icon asset

* bottom drawer skeleton done

* removed warning, better code

* a more completed skeleton done

* bottom drawer done!

* Added content container,  sent birthday picker props, minor styling

* differenciating defined and undefined birthdate in birthdate, datepicker

* removed restricting width for TaggDropDown

* Added edit profile screen to navigator stack

* Add EditProfile view, refresh profile view on save

* Removes unnecessary import

* Stores gender and birthdate as part of ProfileType

* Added gender, birthdate, isEditProfile to AuthProv

* Conditional view applied for edit profile button

* Includes discarded changes in previous merge- BD

* removed unused icon

* resolved scary warnings

* added icon to drawer

* Small fix

* minor code improvement

* sc

* fixed birthday bug

* custom gender updation fixed

* small change to birthday default value

* missed something

* cleaned up types! Warnings gone!

* fixed another gender picker bug

* fixed gender bug and cleaned up logic

* removed warning, MUCH better code now

Co-authored-by: Ivan Chen <ivan@thetaggid.com>
Co-authored-by: Ashm Walia <ashmwalia@outlook.com>
---
 src/components/common/BottomDrawer.tsx | 118 +++++++++++++++++++++++++++++++++
 1 file changed, 118 insertions(+)
 create mode 100644 src/components/common/BottomDrawer.tsx

(limited to 'src/components/common/BottomDrawer.tsx')

diff --git a/src/components/common/BottomDrawer.tsx b/src/components/common/BottomDrawer.tsx
new file mode 100644
index 00000000..bef9434a
--- /dev/null
+++ b/src/components/common/BottomDrawer.tsx
@@ -0,0 +1,118 @@
+import React, {Fragment, ReactText, useEffect, useRef, useState} from 'react';
+import {
+  Modal,
+  StyleSheet,
+  TouchableWithoutFeedback,
+  View,
+  ViewProps,
+} from 'react-native';
+import Animated from 'react-native-reanimated';
+import BottomSheet from 'reanimated-bottom-sheet';
+import {SCREEN_HEIGHT, SCREEN_WIDTH} from '../../utils';
+
+interface BottomDrawerProps extends ViewProps {
+  initialSnapPosition?: ReactText;
+  isOpen: boolean;
+  setIsOpen: (open: boolean) => void;
+  showHeader: boolean;
+}
+
+// More examples here:
+// https://github.com/osdnk/react-native-reanimated-bottom-sheet/tree/master/Example
+const BottomDrawer: React.FC<BottomDrawerProps> = (props) => {
+  const {isOpen, setIsOpen, showHeader, initialSnapPosition} = props;
+  const drawerRef = useRef<BottomSheet>(null);
+  const [modalVisible, setModalVisible] = useState(isOpen);
+  const bgAlpha = new Animated.Value(isOpen ? 1 : 0);
+
+  useEffect(() => {
+    if (isOpen) {
+      setModalVisible(true);
+    } else {
+      bgAlpha.setValue(0);
+      drawerRef.current && drawerRef.current.snapTo(1);
+    }
+  }, [isOpen]);
+
+  const renderContent = () => {
+    return <View>{props.children}</View>;
+  };
+
+  const renderHeader = () => {
+    return showHeader ? (
+      <View style={styles.header}>
+        <View style={styles.panelHeader}>
+          <View style={styles.panelHandle} />
+        </View>
+      </View>
+    ) : (
+      <Fragment />
+    );
+  };
+
+  return (
+    <Modal
+      transparent
+      visible={modalVisible}
+      onShow={() => {
+        drawerRef.current && drawerRef.current.snapTo(0);
+      }}>
+      <BottomSheet
+        ref={drawerRef}
+        snapPoints={[initialSnapPosition ?? '30%', 0]}
+        initialSnap={1}
+        renderContent={renderContent}
+        renderHeader={renderHeader}
+        enabledContentGestureInteraction={false}
+        callbackNode={bgAlpha}
+        onCloseEnd={() => {
+          setModalVisible(false);
+          setIsOpen(false);
+        }}
+      />
+
+      <TouchableWithoutFeedback
+        onPress={() => {
+          setIsOpen(false);
+        }}>
+        <Animated.View
+          style={[
+            styles.backgroundView,
+            {
+              backgroundColor: Animated.interpolateColors(bgAlpha, {
+                inputRange: [0, 1],
+                outputColorRange: ['rgba(0,0,0,0.3)', 'rgba(0,0,0,0)'],
+              }),
+            },
+          ]}
+        />
+      </TouchableWithoutFeedback>
+    </Modal>
+  );
+};
+
+const styles = StyleSheet.create({
+  header: {
+    backgroundColor: '#f7f5eee8',
+    shadowColor: '#000000',
+    paddingTop: 20,
+    borderTopLeftRadius: 20,
+    borderTopRightRadius: 20,
+  },
+  panelHeader: {
+    alignItems: 'center',
+  },
+  panelHandle: {
+    width: 40,
+    height: 8,
+    borderRadius: 4,
+    backgroundColor: '#00000040',
+    marginBottom: 10,
+  },
+  backgroundView: {
+    height: SCREEN_HEIGHT,
+    width: SCREEN_WIDTH,
+  },
+});
+
+export default BottomDrawer;
-- 
cgit v1.2.3-70-g09d2