Mirrors/notesnook
1
0
Fork 0
mirror of https://github.com/streetwriters/notesnook.git synced 2025-12-25 16:09:42 +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(() => {
console.log(colors);
_recieveEvent('openSidebar', openSidebar);
_recieveEvent('closeSidebar', closeSidebar);
@@ -154,96 +153,102 @@ const App = () => {
}
return (
<>
<Animatable.View
transition="backgroundColor"
duration={300}
style={{
width: '100%',
height: '100%',
flexDirection: 'row',
backgroundColor: colors.bg,
}}
onLayout={e => {
setWidth(Dimensions.get('window').width);
}}>
{DDS.isTab ? (
<>
<ModalMenu colors={colors} />
<Animatable.View animation="fadeIn" useNativeDriver={true} duration={600}>
<Animatable.View
transition="backgroundColor"
duration={300}
style={{
width: '100%',
height: '100%',
flexDirection: 'row',
backgroundColor: colors.bg,
}}
onLayout={e => {
setWidth(Dimensions.get('window').width);
}}>
{DDS.isTab ? (
<>
<ModalMenu colors={colors} />
<View
style={{
width: '4%',
}}>
<Menu
hide={false}
noTextMode={true}
colors={colors}
close={() => {
//setSidebar('0%');
}}
/>
</View>
<Animatable.View
animation="fadeIn"
useNativeDriver={true}
duration={300}
delay={450}
style={{
width: '4%',
}}>
<Menu
hide={false}
noTextMode={true}
colors={colors}
close={() => {
//setSidebar('0%');
}}
/>
</Animatable.View>
<Animatable.View
transition="backgroundColor"
duration={300}
style={{
width: '28%',
height: '100%',
borderRightColor: colors.nav,
borderRightWidth: 2,
}}>
<Animatable.View
transition="backgroundColor"
duration={300}
style={{
width: '28%',
height: '100%',
borderRightColor: colors.nav,
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
style={{
width: '100%',
width: DDS.isTab ? '70%' : '100%',
height: '100%',
backgroundColor: colors.bg,
}}
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
style={{
width: DDS.isTab ? '70%' : '100%',
height: '100%',
backgroundColor: colors.bg,
}}
ref={navigatorRef => {
NavigationService.setTopLevelNavigator(navigatorRef);
}}
/>
</SideMenu>
)}
<Toast />
<DialogManager colors={colors} />
</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}) => (
<SelectionWrapper
index={index}
currentEditingNote={
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 {useTracked} from '../../provider';
import {ACTIONS} from '../../provider/actions';
const SelectionWrapper = ({children, item, currentEditingNote}) => {
import * as Animatable from 'react-native-animatable';
const SelectionWrapper = ({children, item, currentEditingNote, index}) => {
const [state, dispatch] = useTracked();
const {colors, selectionMode, selectedItemsList} = state;
return (
<View
<Animatable.View
animation="fadeIn"
useNativeDriver={true}
duration={300 * index + 1}
delay={index * 300}
style={{
flexDirection: 'row',
justifyContent: 'space-between',
@@ -56,7 +60,7 @@ const SelectionWrapper = ({children, item, currentEditingNote}) => {
</View>
{children}
</View>
</Animatable.View>
);
};

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

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