added basic animation

ragsav · Oct 9, 2022 · 4a4ad5e · 4a4ad5e
1 parent 4263559
commit 4a4ad5e
Show file tree

Hide file tree

Showing 13 changed files with 360 additions and 194 deletions.
diff --git a/constants.js b/constants.js
@@ -97,5 +97,6 @@ export const CONSTANTS = Object.freeze({
     DAILY_REMINDER_TIMESTAMP: 'DAILY_REMINDER_TIMESTAMP',
     TASK_SORT_ORDER: 'TASK_SORT_ORDER',
     TASK_SORT_PROPERTY: 'TASK_SORT_PROPERTY',
+    DEFAULT_HOME_SCREEN: 'DEFAULT_HOME_SCREEN',
   },
 });
diff --git a/js/components/LabelItem.js b/js/components/LabelItem.js
@@ -13,6 +13,7 @@ import React, {useState} from 'react';
 import {View} from 'react-native';
 import Collapsible from 'react-native-collapsible';
 import {
+  Button,
   Divider,
   IconButton,
   Menu,
@@ -26,6 +27,14 @@ import {database} from '../db/db';
 import Label from '../db/models/Label';
 import {DeleteConfirmationDialog} from './DeleteConfirmationDialog';
 import EnhancedNoteItem from './NoteItem';
+import Animated, {
+  FadeIn,
+  FadeOut,
+  Layout,
+  SlideInLeft,
+  SlideInUp,
+  Transition,
+} from 'react-native-reanimated';
 
 /**
  *
@@ -57,6 +66,27 @@ const LabelItem = ({label, notes, handleDeleteLabel, handleUnGroupLabel}) => {
   // callbacks
 
   // render functions
+  const _renderAddNoteView = () => {
+    return (
+      <TouchableRipple onPress={_navigateToAddNoteScreen} style={{padding: 12}}>
+        <View
+          style={{
+            flexDirection: 'row',
+            alignItems: 'center',
+            justifyContent: 'center',
+          }}>
+          {/* <MaterialCommunityIcons
+            name="note-plus"
+            color={theme?.colors.primary}
+            size={18}
+          /> */}
+          <Text style={{color: theme?.colors.primary}}>
+            Add note to this label
+          </Text>
+        </View>
+      </TouchableRipple>
+    );
+  };
 
   // handle functions
   const _handleOpenDeleteLabelDialog = () => {
@@ -88,6 +118,14 @@ const LabelItem = ({label, notes, handleDeleteLabel, handleUnGroupLabel}) => {
     // navigation?.navigate(CONSTANTS.ROUTES.ADD_LABEL);
   };
 
+  const _navigateToAddNoteScreen = () => {
+    setIsMenuOpen(false);
+    navigation?.navigate(CONSTANTS.ROUTES.ADD_NOTE, {
+      p_labelID: label.id,
+    });
+    // navigation?.navigate(CONSTANTS.ROUTES.ADD_LABEL);
+  };
+
   // navigation functions
 
   // misc functions
@@ -119,26 +157,43 @@ const LabelItem = ({label, notes, handleDeleteLabel, handleUnGroupLabel}) => {
             flexDirection: 'row',
             justifyContent: 'space-between',
             alignItems: 'center',
-            paddingHorizontal: 12,
+            paddingLeft: 16,
+            paddingRight: 4,
           }}>
           <View
             style={{
               flexDirection: 'row',
               justifyContent: 'flex-start',
               alignItems: 'center',
             }}>
-            {
-              <MaterialCommunityIcons
-                name={label && label.iconString ? label.iconString : 'label'}
-                size={24}
-                color={theme?.colors.onSurface}
-              />
-            }
-            <Text
-              style={{marginLeft: 12, fontWeight: collapsed ? '400' : '700'}}>
-              {label?.title}
-            </Text>
+            {collapsed && (
+              <Animated.View
+                exiting={FadeOut}
+                entering={FadeIn.delay(300)}
+                layout={Layout.springify()}>
+                <MaterialCommunityIcons
+                  name={label && label.iconString ? label.iconString : 'label'}
+                  size={24}
+                  style={{marginRight: 12}}
+                  color={theme?.colors.onSurface}
+                />
+              </Animated.View>
+            )}
+
+            {/* <AnimatedComponent layout={Transition.duration(3000).otherModifier()} ></AnimatedComponent> */}
+            <Animated.View
+              // exiting={FadeOut}
+              // entering={FadeIn}
+              layout={Layout.easing().delay(100)}>
+              <Text
+                style={{
+                  fontWeight: '700',
+                }}>
+                {label?.title}
+              </Text>
+            </Animated.View>
           </View>
+
           <View
             style={{
               flexDirection: 'row',
@@ -173,17 +228,19 @@ const LabelItem = ({label, notes, handleDeleteLabel, handleUnGroupLabel}) => {
                 onPress={_handleUnGroupLabel}
               />
             </Menu>
-            {/* {_renderMenu()} */}
+
             <IconButton
-              icon={collapsed ? 'chevron-down' : 'chevron-up'}
+              icon={collapsed ? 'chevron-left' : 'chevron-down'}
               size={24}
               onPress={_handleToggleCollapse}
             />
           </View>
         </View>
 
-        <Collapsible collapsed={collapsed} style={{paddingLeft: 20}}>
-          <Divider />
+        <Collapsible
+          collapsed={collapsed}
+          style={{paddingLeft: notes.length > 0 ? 20 : 0}}>
+          {notes.length === 0 && _renderAddNoteView()}
           {notes.map((note, index) => {
             return <EnhancedNoteItem note={note} key={index} />;
           })}

diff --git a/js/components/PinnedNoteItem.js b/js/components/PinnedNoteItem.js
@@ -85,15 +85,15 @@ const PinnedNoteItem = ({note, tasks, handleDeleteNote, dispatch}) => {
             paddingHorizontal: 8,
             paddingVertical: 6,
           }}>
-          <SharedElement id={`note.${note.id}.hero`}>
-            <Text
-              variant="bodyMedium"
-              style={{fontWeight: '700', marginBottom: 8}}
-              numberOfLines={1}
-              ellipsizeMode="tail">
-              {note?.title}
-            </Text>
-          </SharedElement>
+          {/* <SharedElement id={`note.${note.id}.hero`}> */}
+          <Text
+            variant="bodyMedium"
+            style={{fontWeight: '700', marginBottom: 8}}
+            numberOfLines={1}
+            ellipsizeMode="tail">
+            {note?.title}
+          </Text>
+          {/* </SharedElement> */}
 
           {tasks &&
             Array.isArray(tasks) &&

diff --git a/js/components/Router.js b/js/components/Router.js
@@ -33,6 +33,8 @@ import DeletedTasksScreen from '../screens/DeletedTasksScreen';
 import BackupConfigScreen from '../screens/BackupConfigScreen';
 import PinScreen from '../screens/PinScreen';
 import {createSharedElementStackNavigator} from 'react-navigation-shared-element';
+import {Storage} from '../utils/asyncStorage';
+import {setDefaultHomeScreen} from '../redux/actions';
 // const Stack = createStackNavigator();
 const Stack = createSharedElementStackNavigator();
 const opacityTransition = {
@@ -54,7 +56,7 @@ const opacityTransition = {
     }, // updates the opacity depending on the transition progress value of the current screen
   }),
 };
-const Router = ({theme}) => {
+const Router = ({theme, defaultHomeScreen, dispatch}) => {
   // ref
 
   // variables
@@ -84,7 +86,12 @@ const Router = ({theme}) => {
           backgroundColor={theme?.colors.surface}
           // translucent
         />
-        <NavigationContainer theme={theme} onReady={() => RNBootSplash.hide()}>
+
+        <NavigationContainer
+          theme={theme}
+          onReady={() => {
+            RNBootSplash.hide();
+          }}>
           <Stack.Navigator
             initialRouteName={CONSTANTS.ROUTES.HOME}
             screenOptions={{...TransitionPresets.ScaleFromCenterAndroid}}>
@@ -201,6 +208,7 @@ const Router = ({theme}) => {
 const mapStateToProps = state => {
   return {
     theme: state.settings.theme,
+    defaultHomeScreen: state.settings.defaultHomeScreen,
   };
 };
 export default connect(mapStateToProps)(Router);