Mirrors/notesnook
1
0
Fork 0
mirror of https://github.com/streetwriters/notesnook.git synced 2025-12-23 23:19:40 +01:00
Code Issues Packages Projects Releases Wiki Activity

add some basic animations

Browse Source
This commit is contained in:
ammarahm-ed
2020-01-25 00:02:13 +05:00
parent 1e540dc15f
commit 014bd7a02b
4 changed files with 100 additions and 88 deletions
Download Patch File Download Diff File Expand all files Collapse all files

167
apps/mobile/App.js
View File

@@ -68,7 +68,6 @@ const App = () => {
}; };
useEffect(() => { useEffect(() => {
console.log(colors);
_recieveEvent('openSidebar', openSidebar); _recieveEvent('openSidebar', openSidebar);
_recieveEvent('closeSidebar', closeSidebar); _recieveEvent('closeSidebar', closeSidebar);
@@ -154,96 +153,102 @@ const App = () => {
} }
return ( return (
<> <>
<Animatable.View <Animatable.View animation="fadeIn" useNativeDriver={true} duration={600}>
transition="backgroundColor" <Animatable.View
duration={300} transition="backgroundColor"
style={{ duration={300}
width: '100%', style={{
height: '100%', width: '100%',
flexDirection: 'row', height: '100%',
backgroundColor: colors.bg, flexDirection: 'row',
}} backgroundColor: colors.bg,
onLayout={e => { }}
setWidth(Dimensions.get('window').width); onLayout={e => {
}}> setWidth(Dimensions.get('window').width);
{DDS.isTab ? ( }}>
<> {DDS.isTab ? (
<ModalMenu colors={colors} /> <>
<ModalMenu colors={colors} />
<View <Animatable.View
style={{ animation="fadeIn"
width: '4%', useNativeDriver={true}
}}> duration={300}
<Menu delay={450}
hide={false} style={{
noTextMode={true} width: '4%',
colors={colors} }}>
close={() => { <Menu
//setSidebar('0%'); hide={false}
}} noTextMode={true}
/> colors={colors}
</View> close={() => {
//setSidebar('0%');
}}
/>
</Animatable.View>
<Animatable.View <Animatable.View
transition="backgroundColor" transition="backgroundColor"
duration={300} duration={300}
style={{ style={{
width: '28%', width: '28%',
height: '100%', height: '100%',
borderRightColor: colors.nav, borderRightColor: colors.nav,
borderRightWidth: 2, borderRightWidth: 2,
}}> }}>
<AppContainer
style={{
width: '100%',
height: '100%',
}}
ref={navigatorRef => {
NavigationService.setTopLevelNavigator(navigatorRef);
}}
/>
</Animatable.View>
<View
ref={ref => (editorRef = ref)}
style={{
width: '68%',
height: '100%',
backgroundColor: 'transparent',
}}>
<Editor noMenu={fullscreen ? false : true} />
</View>
</>
) : (
<SideMenu
ref={ref => (sideMenuRef = ref)}
bounceBackOnOverdraw={false}
contentContainerStyle={{
opacity: 0,
backgroundColor: colors.bg,
}}
menu={
<Menu
hide={false}
colors={colors}
close={() => sideMenuRef.openMenu(!sideMenuRef.isOpen)}
/>
}
openMenuOffset={w / 1.3}>
<AppContainer <AppContainer
style={{ style={{
width: '100%', width: DDS.isTab ? '70%' : '100%',
height: '100%', height: '100%',
backgroundColor: colors.bg,
}} }}
ref={navigatorRef => { ref={navigatorRef => {
NavigationService.setTopLevelNavigator(navigatorRef); NavigationService.setTopLevelNavigator(navigatorRef);
}} }}
/> />
</Animatable.View> </SideMenu>
)}
<View <Toast />
ref={ref => (editorRef = ref)} <DialogManager colors={colors} />
style={{ </Animatable.View>
width: '68%',
height: '100%',
backgroundColor: 'transparent',
}}>
<Editor noMenu={fullscreen ? false : true} />
</View>
</>
) : (
<SideMenu
ref={ref => (sideMenuRef = ref)}
bounceBackOnOverdraw={false}
contentContainerStyle={{
opacity: 0,
backgroundColor: colors.bg,
}}
menu={
<Menu
hide={false}
colors={colors}
close={() => sideMenuRef.openMenu(!sideMenuRef.isOpen)}
/>
}
openMenuOffset={w / 1.3}>
<AppContainer
style={{
width: DDS.isTab ? '70%' : '100%',
height: '100%',
backgroundColor: colors.bg,
}}
ref={navigatorRef => {
NavigationService.setTopLevelNavigator(navigatorRef);
}}
/>
</SideMenu>
)}
<Toast />
<DialogManager colors={colors} />
</Animatable.View> </Animatable.View>
</> </>
); );

1
apps/mobile/src/components/NotesList/index.js
View File

@@ -24,6 +24,7 @@ export const NotesList = ({
const _renderItem = ({item, index}) => ( const _renderItem = ({item, index}) => (
<SelectionWrapper <SelectionWrapper
index={index}
currentEditingNote={ currentEditingNote={
currentEditingNote === item.dateCreated ? currentEditingNote : null currentEditingNote === item.dateCreated ? currentEditingNote : null
} }

12
apps/mobile/src/components/SelectionWrapper/index.js
View File

@@ -5,13 +5,17 @@ import Icon from 'react-native-vector-icons/Feather';
import {w} from '../../utils/utils'; import {w} from '../../utils/utils';
import {useTracked} from '../../provider'; import {useTracked} from '../../provider';
import {ACTIONS} from '../../provider/actions'; import {ACTIONS} from '../../provider/actions';
import * as Animatable from 'react-native-animatable';
const SelectionWrapper = ({children, item, currentEditingNote}) => { const SelectionWrapper = ({children, item, currentEditingNote, index}) => {
const [state, dispatch] = useTracked(); const [state, dispatch] = useTracked();
const {colors, selectionMode, selectedItemsList} = state; const {colors, selectionMode, selectedItemsList} = state;
return ( return (
<View <Animatable.View
animation="fadeIn"
useNativeDriver={true}
duration={300 * index + 1}
delay={index * 300}
style={{ style={{
flexDirection: 'row', flexDirection: 'row',
justifyContent: 'space-between', justifyContent: 'space-between',
@@ -56,7 +60,7 @@ const SelectionWrapper = ({children, item, currentEditingNote}) => {
</View> </View>
{children} {children}
</View> </Animatable.View>
); );
}; };

8
apps/mobile/src/views/Home/index.js
View File

@@ -23,12 +23,11 @@ export const Home = ({navigation}) => {
// State // State
const [state, dispatch] = useTracked(); const [state, dispatch] = useTracked();
const {colors, selectionMode, notes} = state; const {colors, selectionMode, notes} = state;
const [refreshing, setRefreshing] = useState(false);
const [text, setText] = useState(''); const [text, setText] = useState('');
const [hideHeader, setHideHeader] = useState(false); const [hideHeader, setHideHeader] = useState(false);
const [keyword, setKeyword] = useState(''); const [keyword, setKeyword] = useState('');
const [searchResults, setSearchResults] = useState([]); const [searchResults, setSearchResults] = useState([]);
const [loading, setLoading] = useState([]);
const isFocused = useIsFocused(); const isFocused = useIsFocused();
// Variables // Variables
@@ -40,7 +39,10 @@ export const Home = ({navigation}) => {
// Effects // Effects
useEffect(() => { useEffect(() => {
dispatch({type: ACTIONS.NOTES, payload: 'hello there'}); dispatch({type: ACTIONS.NOTES});
setTimeout(() => {
setLoading(false);
}, 2500);
}, [isFocused]); }, [isFocused]);
// Functions // Functions