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 Co-authored-by: Ashm Walia --- src/components/common/BottomDrawer.tsx | 118 ++++++++++++++++++++++++++++++ src/components/common/SocialLinkModal.tsx | 3 +- src/components/common/TaggDatePicker.tsx | 22 +++--- src/components/common/index.ts | 1 + 4 files changed, 133 insertions(+), 11 deletions(-) create mode 100644 src/components/common/BottomDrawer.tsx (limited to 'src/components/common') 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 = (props) => { + const {isOpen, setIsOpen, showHeader, initialSnapPosition} = props; + const drawerRef = useRef(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 {props.children}; + }; + + const renderHeader = () => { + return showHeader ? ( + + + + + + ) : ( + + ); + }; + + return ( + { + drawerRef.current && drawerRef.current.snapTo(0); + }}> + { + setModalVisible(false); + setIsOpen(false); + }} + /> + + { + setIsOpen(false); + }}> + + + + ); +}; + +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; diff --git a/src/components/common/SocialLinkModal.tsx b/src/components/common/SocialLinkModal.tsx index 3cea2567..b307a62c 100644 --- a/src/components/common/SocialLinkModal.tsx +++ b/src/components/common/SocialLinkModal.tsx @@ -1,6 +1,7 @@ import React from 'react'; import {Modal, StyleSheet, Text, TouchableHighlight, View} from 'react-native'; import {TextInput} from 'react-native-gesture-handler'; +import { TAGG_TEXT_LIGHT_BLUE } from '../../constants'; import {SCREEN_WIDTH} from '../../utils'; interface SocialLinkModalProps { @@ -104,7 +105,7 @@ const styles = StyleSheet.create({ fontSize: 14, /* identical to box height */ textAlign: 'center', - color: '#698DD3', + color: TAGG_TEXT_LIGHT_BLUE, }, textInput: { height: 20, diff --git a/src/components/common/TaggDatePicker.tsx b/src/components/common/TaggDatePicker.tsx index d8010251..059bf620 100644 --- a/src/components/common/TaggDatePicker.tsx +++ b/src/components/common/TaggDatePicker.tsx @@ -1,3 +1,4 @@ +import moment from 'moment'; import React, {useState} from 'react'; import DatePicker from 'react-native-date-picker'; @@ -5,23 +6,24 @@ interface TaggDatePickerProps { handleDateUpdate: (_: Date) => void; maxDate: Date; textColor: string; + date: Date | undefined; } -const TaggDatePicker: React.FC = ({ - handleDateUpdate, - maxDate, - textColor, -}) => { - const [date, setDate] = useState(new Date()); +const TaggDatePicker: React.FC = (props) => { + const [date, setDate] = useState( + props.date + ? new Date(moment(props.date).add(1, 'day').format('YYYY-MM-DD')) + : undefined, + ); return ( { setDate(newDate); - handleDateUpdate(newDate); + props.handleDateUpdate(newDate); }} /> ); diff --git a/src/components/common/index.ts b/src/components/common/index.ts index c7ed13cd..883dae61 100644 --- a/src/components/common/index.ts +++ b/src/components/common/index.ts @@ -13,4 +13,5 @@ export {default as SocialLinkModal} from './SocialLinkModal'; export {default as ComingSoon} from './ComingSoon'; export {default as PostCarousel} from './PostCarousel'; export {default as TaggDatePicker} from './TaggDatePicker'; +export {default as BottomDrawer} from './BottomDrawer'; export * from './post'; -- cgit v1.2.3-70-g09d2