From 142c84c7c45411b9badf7da3182c9e4bd0e96e38 Mon Sep 17 00:00:00 2001 From: Ivan Chen Date: Tue, 20 Jul 2021 17:35:20 -0400 Subject: Add gradient progress bar --- src/components/common/GradientProgressBar.tsx | 45 ++++++++++++++++++++ src/components/common/index.ts | 1 + src/components/moments/MomentUploadProgressBar.tsx | 49 +++++++++++++++++++--- src/constants/constants.ts | 1 + src/store/initialStates.ts | 2 + src/types/types.ts | 7 ++++ 6 files changed, 100 insertions(+), 5 deletions(-) create mode 100644 src/components/common/GradientProgressBar.tsx (limited to 'src') diff --git a/src/components/common/GradientProgressBar.tsx b/src/components/common/GradientProgressBar.tsx new file mode 100644 index 00000000..3483f8ac --- /dev/null +++ b/src/components/common/GradientProgressBar.tsx @@ -0,0 +1,45 @@ +import React, {FC} from 'react'; +import {StyleSheet, View, ViewProps} from 'react-native'; +import LinearGradient from 'react-native-linear-gradient'; +import { + TAGG_LIGHT_BLUE_2, + TAGG_LIGHT_BLUE_3, + TAGG_PURPLE, +} from '../../constants'; +import {normalize, SCREEN_WIDTH} from '../../utils'; + +interface GradientProgressBarProps extends ViewProps { + progress: number; +} + +const GradientProgressBar: FC = ({ + style, + progress, +}) => { + return ( + + + + ); +}; +const styles = StyleSheet.create({ + container: { + borderRadius: 6.5, + }, + bar: { + width: SCREEN_WIDTH * 0.9, + height: normalize(10), + borderRadius: 6.5, + }, + blank: { + alignSelf: 'flex-end', + height: normalize(10), + width: '80%', + backgroundColor: TAGG_LIGHT_BLUE_3, + }, +}); + +export default GradientProgressBar; diff --git a/src/components/common/index.ts b/src/components/common/index.ts index 4f5c0232..5edbb3ad 100644 --- a/src/components/common/index.ts +++ b/src/components/common/index.ts @@ -29,3 +29,4 @@ export {default as TaggUserRowCell} from './TaggUserRowCell'; export {default as LikeButton} from './LikeButton'; export {default as TaggUserSelectionCell} from './TaggUserSelectionCell'; export {default as MomentTags} from './MomentTags'; +export {default as GradientProgressBar} from './GradientProgressBar'; diff --git a/src/components/moments/MomentUploadProgressBar.tsx b/src/components/moments/MomentUploadProgressBar.tsx index 1dee4185..bbd0cb06 100644 --- a/src/components/moments/MomentUploadProgressBar.tsx +++ b/src/components/moments/MomentUploadProgressBar.tsx @@ -1,14 +1,53 @@ -import React from 'react'; -import {StyleSheet} from 'react-native'; -import * as Progress from 'react-native-progress'; +import React, {useState} from 'react'; +import {StyleSheet, Text} from 'react-native'; +import {View} from 'react-native-animatable'; +import Animated, {useSharedValue} from 'react-native-reanimated'; +import {SafeAreaView} from 'react-native-safe-area-context'; +import {useSelector} from 'react-redux'; +import {RootState} from '../../store/rootReducer'; +import {normalize, StatusBarHeight} from '../../utils'; +import {GradientProgressBar} from '../common'; interface MomentUploadProgressBarProps {} const MomentUploadProgressBar: React.FC = ({}) => { - return ; + const {momentUploadStatus} = useSelector((state: RootState) => state.user); + // const [progress, setProgress] = useState(0); + // const progressTime = useSharedValue(0); + // const [indeterminate, setIndeterminate] = useState(false); + // const range = new Animated.Value(0); + // const transX = new Animated.Value(0); + + return ( + + + Uploading Moment... + + + + ); }; -const styles = StyleSheet.create({}); +const styles = StyleSheet.create({ + background: { + position: 'absolute', + zIndex: 999, + height: StatusBarHeight + 100, + backgroundColor: 'white', + width: '100%', + alignItems: 'center', + }, + container: { + justifyContent: 'space-evenly', + height: '100%', + }, + text: { + fontSize: normalize(14), + fontWeight: 'bold', + lineHeight: 17, + marginVertical: 12, + }, +}); export default MomentUploadProgressBar; diff --git a/src/constants/constants.ts b/src/constants/constants.ts index 13a73208..476e7af4 100644 --- a/src/constants/constants.ts +++ b/src/constants/constants.ts @@ -69,6 +69,7 @@ export const TAGG_DARK_BLUE = '#4E699C'; export const TAGG_DARK_PURPLEISH_BLUE = '#4755A1'; export const TAGG_LIGHT_BLUE: string = '#698DD3'; export const TAGG_LIGHT_BLUE_2: string = '#6EE7E7'; +export const TAGG_LIGHT_BLUE_3 = '#DDE8FE'; export const TAGG_LIGHT_PURPLE = '#F4DDFF'; export const RADIO_BUTTON_GREY: string = '#BEBEBE'; diff --git a/src/store/initialStates.ts b/src/store/initialStates.ts index 92a1e456..5ae62838 100644 --- a/src/store/initialStates.ts +++ b/src/store/initialStates.ts @@ -10,6 +10,7 @@ import { import { CommentThreadType, MomentPostType, + MomentUploadStatusType, UniversityType, } from './../types/types'; @@ -48,6 +49,7 @@ export const NO_USER_DATA = { profile: NO_PROFILE, avatar: undefined, cover: undefined, + momentUploadStatus: MomentUploadStatusType.Empty, isOnboardedUser: false, newVersionAvailable: false, newNotificationReceived: false, diff --git a/src/types/types.ts b/src/types/types.ts index 5f70d1f8..930f833b 100644 --- a/src/types/types.ts +++ b/src/types/types.ts @@ -61,6 +61,13 @@ export interface ProfileInfoType { is_private: boolean; } +export enum MomentUploadStatusType { + Empty = 'Empty', + Uploading = 'Uploading', + Done = 'Done', + Error = 'Error', +} + export interface SocialAccountType { handle?: string; profile_pic?: string; -- cgit v1.2.3-70-g09d2