mirror of
https://github.com/streetwriters/notesnook.git
synced 2025-12-23 15:09:33 +01:00
apply some optimizations
This commit is contained in:
@@ -54,7 +54,7 @@ export const ContainerBottomButton = ({
|
||||
right: 12,
|
||||
bottom:
|
||||
Platform.OS === 'ios' && insets.bottom !== 0
|
||||
? insets.bottom - 25
|
||||
? Platform.isPad ? insets.bottom - 12 : insets.bottom - 24
|
||||
: insets.bottom + 12,
|
||||
zIndex: 10,
|
||||
transform: [
|
||||
|
||||
@@ -7,27 +7,9 @@ import Navigation from '../../services/Navigation';
|
||||
import {SIZE} from '../../utils/SizeUtils';
|
||||
import {ActionIcon} from '../ActionIcon';
|
||||
|
||||
export const HeaderLeftMenu = () => {
|
||||
export const HeaderLeftMenu = ({currentScreen,headerMenuState}) => {
|
||||
const [state] = useTracked();
|
||||
const {colors, deviceMode} = state;
|
||||
const [headerTextState, setHeaderTextState] = useState(
|
||||
Navigation.getHeaderState(),
|
||||
);
|
||||
|
||||
const currentScreen = headerTextState.currentScreen;
|
||||
const headerMenuState = headerTextState.verticalMenu;
|
||||
|
||||
const onHeaderStateChange = (event) => {
|
||||
if (!event) return;
|
||||
setHeaderTextState(event);
|
||||
};
|
||||
|
||||
useEffect(() => {
|
||||
eSubscribeEvent('onHeaderStateChange', onHeaderStateChange);
|
||||
return () => {
|
||||
eUnSubscribeEvent('onHeaderStateChange', onHeaderStateChange);
|
||||
};
|
||||
}, []);
|
||||
|
||||
const onLeftButtonPress = () => {
|
||||
if (headerMenuState) {
|
||||
|
||||
@@ -10,26 +10,10 @@ import {SIZE} from '../../utils/SizeUtils';
|
||||
import {ActionIcon} from '../ActionIcon';
|
||||
import {Button} from '../Button';
|
||||
|
||||
export const HeaderRightMenu = () => {
|
||||
export const HeaderRightMenu = ({currentScreen}) => {
|
||||
const [state] = useTracked();
|
||||
const {colors, containerBottomButton, syncing} = state;
|
||||
const [headerTextState, setHeaderTextState] = useState(
|
||||
Navigation.getHeaderState(),
|
||||
);
|
||||
const currentScreen = headerTextState.currentScreen;
|
||||
|
||||
const onHeaderStateChange = (event) => {
|
||||
if (!event) return;
|
||||
setHeaderTextState(event);
|
||||
};
|
||||
|
||||
useEffect(() => {
|
||||
eSubscribeEvent('onHeaderStateChange', onHeaderStateChange);
|
||||
return () => {
|
||||
eUnSubscribeEvent('onHeaderStateChange', onHeaderStateChange);
|
||||
};
|
||||
}, []);
|
||||
|
||||
|
||||
return (
|
||||
<View style={styles.rightBtnContainer}>
|
||||
{syncing && <ActivityIndicator size={SIZE.xl} color={colors.accent} />}
|
||||
|
||||
@@ -11,21 +11,10 @@ const opacity = new Animated.Value(DDS.isLargeTablet() ? 1 : 0);
|
||||
|
||||
let scrollPostions = {};
|
||||
|
||||
export const HeaderTitle = () => {
|
||||
export const HeaderTitle = ({heading,headerColor}) => {
|
||||
const [state] = useTracked();
|
||||
const {colors} = state;
|
||||
const [headerTextState, setHeaderTextState] = useState(Navigation.getHeaderState());
|
||||
|
||||
const onHeaderStateChange = (event) => {
|
||||
setHeaderTextState(event);
|
||||
};
|
||||
useEffect(() => {
|
||||
eSubscribeEvent('onHeaderStateChange', onHeaderStateChange);
|
||||
return () => {
|
||||
eUnSubscribeEvent('onHeaderStateChange', onHeaderStateChange);
|
||||
};
|
||||
}, []);
|
||||
|
||||
|
||||
|
||||
const onScroll = async (y) => {
|
||||
if (DDS.isTab) return;
|
||||
@@ -55,7 +44,7 @@ export const HeaderTitle = () => {
|
||||
} else {
|
||||
opacity.setValue(0);
|
||||
}
|
||||
scrollPostions[headerTextState?.heading] = y;
|
||||
scrollPostions[heading] = y;
|
||||
};
|
||||
|
||||
useEffect(() => {
|
||||
@@ -63,21 +52,21 @@ export const HeaderTitle = () => {
|
||||
return () => {
|
||||
eUnSubscribeEvent(eScrollEvent, onScroll);
|
||||
};
|
||||
}, [headerTextState?.heading]);
|
||||
}, [heading]);
|
||||
|
||||
return (
|
||||
<Animated.View
|
||||
style={{
|
||||
opacity: DDS.isTab ? 1 : opacity,
|
||||
}}>
|
||||
<Heading color={headerTextState?.color}>
|
||||
<Heading color={headerColor}>
|
||||
<Heading color={colors.accent}>
|
||||
{headerTextState?.heading.slice(0, 1) === '#' ? '#' : null}
|
||||
{heading.slice(0, 1) === '#' ? '#' : null}
|
||||
</Heading>
|
||||
|
||||
{headerTextState?.heading.slice(0, 1) === '#'
|
||||
? headerTextState?.heading.slice(1)
|
||||
: headerTextState?.heading}
|
||||
{heading.slice(0, 1) === '#'
|
||||
? heading.slice(1)
|
||||
: heading}
|
||||
</Heading>
|
||||
</Animated.View>
|
||||
);
|
||||
|
||||
@@ -1,18 +1,18 @@
|
||||
import React, { useEffect, useState } from 'react';
|
||||
import { Platform, StyleSheet, View } from 'react-native';
|
||||
import { useSafeAreaInsets } from 'react-native-safe-area-context';
|
||||
import { useTracked } from '../../provider';
|
||||
import { eSubscribeEvent, eUnSubscribeEvent } from '../../services/EventManager';
|
||||
import React, {useEffect, useState} from 'react';
|
||||
import {Platform, StyleSheet, View} from 'react-native';
|
||||
import {useSafeAreaInsets} from 'react-native-safe-area-context';
|
||||
import {useTracked} from '../../provider';
|
||||
import {eSubscribeEvent, eUnSubscribeEvent} from '../../services/EventManager';
|
||||
import Navigation from '../../services/Navigation';
|
||||
import SearchService from '../../services/SearchService';
|
||||
import { dWidth } from '../../utils';
|
||||
import { eScrollEvent } from '../../utils/Events';
|
||||
import { SIZE } from '../../utils/SizeUtils';
|
||||
import { ActionIcon } from '../ActionIcon';
|
||||
import { SearchInput } from '../SearchInput';
|
||||
import { HeaderLeftMenu } from './HeaderLeftMenu';
|
||||
import { HeaderRightMenu } from './HeaderRightMenu';
|
||||
import { HeaderTitle } from './HeaderTitle';
|
||||
import {dWidth} from '../../utils';
|
||||
import {eScrollEvent} from '../../utils/Events';
|
||||
import {SIZE} from '../../utils/SizeUtils';
|
||||
import {ActionIcon} from '../ActionIcon';
|
||||
import {SearchInput} from '../SearchInput';
|
||||
import {HeaderLeftMenu} from './HeaderLeftMenu';
|
||||
import {HeaderRightMenu} from './HeaderRightMenu';
|
||||
import {HeaderTitle} from './HeaderTitle';
|
||||
|
||||
export const Header = ({root}) => {
|
||||
const [state] = useTracked();
|
||||
@@ -24,9 +24,9 @@ export const Header = ({root}) => {
|
||||
);
|
||||
const currentScreen = headerTextState.currentScreen;
|
||||
|
||||
const onHeaderStateChange = (event) => {
|
||||
const onHeaderStateChange = event => {
|
||||
if (!event) return;
|
||||
setHeaderTextState(event);
|
||||
setHeaderTextState(event);
|
||||
};
|
||||
|
||||
useEffect(() => {
|
||||
@@ -36,7 +36,7 @@ export const Header = ({root}) => {
|
||||
};
|
||||
}, []);
|
||||
|
||||
const onScroll = (y) => {
|
||||
const onScroll = y => {
|
||||
if (y > 150) {
|
||||
setHide(false);
|
||||
} else {
|
||||
@@ -65,42 +65,54 @@ export const Header = ({root}) => {
|
||||
},
|
||||
]}>
|
||||
<View style={styles.leftBtnContainer}>
|
||||
<HeaderLeftMenu />
|
||||
<HeaderLeftMenu
|
||||
headerMenuState={headerTextState.verticalMenu}
|
||||
currentScreen={currentScreen}
|
||||
/>
|
||||
|
||||
{(Platform.OS === 'android' ||
|
||||
Platform.isPad) && currentScreen !== 'Search' ? (
|
||||
<HeaderTitle root={root} />
|
||||
{(Platform.OS === 'android' || Platform.isPad) &&
|
||||
currentScreen !== 'Search' ? (
|
||||
<HeaderTitle
|
||||
headerColor={headerTextState.color}
|
||||
heading={headerTextState.heading}
|
||||
currentScreen={currentScreen}
|
||||
root={root}
|
||||
/>
|
||||
) : null}
|
||||
</View>
|
||||
{Platform.OS !== 'android' &&
|
||||
!Platform.isPad &&
|
||||
currentScreen !== 'Search' ? (
|
||||
<HeaderTitle root={root} />
|
||||
<HeaderTitle
|
||||
headerColor={headerTextState.color}
|
||||
heading={headerTextState.heading}
|
||||
currentScreen={currentScreen}
|
||||
root={root}
|
||||
/>
|
||||
) : null}
|
||||
|
||||
{currentScreen === 'Search' ? (
|
||||
<View
|
||||
style={{
|
||||
width: '80%',
|
||||
}}>
|
||||
<SearchInput />
|
||||
</View>
|
||||
) : null}
|
||||
|
||||
{currentScreen === 'Search' ? (
|
||||
<View style={[styles.rightBtnContainer, {right: 6}]}>
|
||||
<ActionIcon
|
||||
onPress={() => {
|
||||
SearchService.search();
|
||||
}}
|
||||
name="magnify"
|
||||
size={SIZE.xxxl}
|
||||
color={colors.pri}
|
||||
style={styles.rightBtn}
|
||||
/>
|
||||
</View>
|
||||
<>
|
||||
<View
|
||||
style={{
|
||||
width: '80%',
|
||||
}}>
|
||||
<SearchInput />
|
||||
</View>
|
||||
<View style={[styles.rightBtnContainer, {right: 6}]}>
|
||||
<ActionIcon
|
||||
onPress={() => {
|
||||
SearchService.search();
|
||||
}}
|
||||
name="magnify"
|
||||
size={SIZE.xxxl}
|
||||
color={colors.pri}
|
||||
style={styles.rightBtn}
|
||||
/>
|
||||
</View>
|
||||
</>
|
||||
) : (
|
||||
<HeaderRightMenu />
|
||||
<HeaderRightMenu currentScreen={currentScreen} />
|
||||
)}
|
||||
</View>
|
||||
);
|
||||
|
||||
@@ -67,10 +67,16 @@ const SimpleList = ({
|
||||
),
|
||||
);
|
||||
setLoading(false);
|
||||
sleep(100).then(() => setLoaded(true));
|
||||
setTimeout(() => {
|
||||
setLoaded(true)
|
||||
},50);
|
||||
}
|
||||
}, [listData, deviceMode, loading]);
|
||||
|
||||
useEffect(() => {
|
||||
console.log("rerendering");
|
||||
})
|
||||
|
||||
const _onRefresh = async () => {
|
||||
await Sync.run();
|
||||
if (refreshCallback) {
|
||||
|
||||
@@ -74,7 +74,7 @@ const forSlide = ({current, next, inverted, layouts: {screen}}) => {
|
||||
};
|
||||
|
||||
const screenOptionsForAnimation = {
|
||||
animationEnabled: true,
|
||||
animationEnabled: false,
|
||||
cardStyleInterpolator: forSlide,
|
||||
gestureEnabled: true,
|
||||
};
|
||||
|
||||
@@ -123,7 +123,6 @@ function setHeaderState(name, params, item) {
|
||||
currentScreen = name;
|
||||
headerState.currentScreen = name;
|
||||
headerState.verticalMenu = params.menu;
|
||||
|
||||
if (headerState) {
|
||||
eSendEvent('onHeaderStateChange', {...headerState});
|
||||
}
|
||||
|
||||
@@ -10,7 +10,7 @@ import SearchService from '../../services/SearchService';
|
||||
import {eScrollEvent} from '../../utils/Events';
|
||||
import Navigation from '../../services/Navigation';
|
||||
import {DDS} from '../../services/DeviceDetection';
|
||||
import { InteractionManager } from '../../utils';
|
||||
import {InteractionManager} from '../../utils';
|
||||
|
||||
export const Folders = ({route, navigation}) => {
|
||||
const [state, dispatch] = useTracked();
|
||||
@@ -20,11 +20,6 @@ export const Folders = ({route, navigation}) => {
|
||||
let ranAfterInteractions = false;
|
||||
|
||||
const onFocus = useCallback(() => {
|
||||
if (!ranAfterInteractions) {
|
||||
ranAfterInteractions = true;
|
||||
runAfterInteractions();
|
||||
}
|
||||
|
||||
if (!pageIsLoaded) {
|
||||
pageIsLoaded = true;
|
||||
return;
|
||||
@@ -39,7 +34,10 @@ export const Folders = ({route, navigation}) => {
|
||||
id: 'notebooks_navigation',
|
||||
},
|
||||
);
|
||||
|
||||
if (!ranAfterInteractions) {
|
||||
ranAfterInteractions = true;
|
||||
runAfterInteractions();
|
||||
}
|
||||
}, []);
|
||||
|
||||
const runAfterInteractions = () => {
|
||||
@@ -47,9 +45,9 @@ export const Folders = ({route, navigation}) => {
|
||||
if (loading) {
|
||||
setLoading(false);
|
||||
}
|
||||
Navigation.routeNeedsUpdate('Notebooks',() => {
|
||||
dispatch({type:Actions.NOTEBOOKS})
|
||||
})
|
||||
Navigation.routeNeedsUpdate('Notebooks', () => {
|
||||
dispatch({type: Actions.NOTEBOOKS});
|
||||
});
|
||||
|
||||
eSendEvent(eScrollEvent, {name: 'Notebooks', type: 'in'});
|
||||
updateSearch();
|
||||
|
||||
@@ -32,12 +32,11 @@ export const Notebook = ({route, navigation}) => {
|
||||
params.notebook = notebook;
|
||||
params.title = params.notebook.title;
|
||||
setTopics(notebook.topics);
|
||||
sleep(10).then((r) => {
|
||||
setTimeout(() => {
|
||||
if (loading) {
|
||||
setLoading(false);
|
||||
}
|
||||
});
|
||||
|
||||
},10)
|
||||
Navigation.routeNeedsUpdate('Notebook', () => {
|
||||
onLoad();
|
||||
});
|
||||
|
||||
@@ -22,7 +22,6 @@ import {
|
||||
refreshNotesPage,
|
||||
} from '../../utils/Events';
|
||||
import {tabBarRef} from '../../utils/Refs';
|
||||
import {sleep} from '../../utils/TimeUtils';
|
||||
|
||||
export const Notes = ({route, navigation}) => {
|
||||
const [state, dispatch] = useTracked();
|
||||
@@ -56,9 +55,9 @@ export const Notes = ({route, navigation}) => {
|
||||
}
|
||||
setNotes(_notes);
|
||||
if (localLoad) {
|
||||
sleep(10).then((r) => {
|
||||
setTimeout(() => {
|
||||
setLocalLoad(false);
|
||||
});
|
||||
}, 10);
|
||||
}
|
||||
if (params.menu) {
|
||||
navigation.setOptions({
|
||||
@@ -72,13 +71,16 @@ export const Notes = ({route, navigation}) => {
|
||||
});
|
||||
}
|
||||
updateSearch();
|
||||
dispatch({
|
||||
type: Actions.CONTAINER_BOTTOM_BUTTON,
|
||||
state: {
|
||||
onPress: _onPressBottomButton,
|
||||
color: params.type == 'color' ? COLORS_NOTE[params.title] : null,
|
||||
},
|
||||
});
|
||||
if (DDS.isLargeTablet()) {
|
||||
dispatch({
|
||||
type: Actions.CONTAINER_BOTTOM_BUTTON,
|
||||
state: {
|
||||
onPress: _onPressBottomButton,
|
||||
color: params.type == 'color' ? COLORS_NOTE[params.title] : null,
|
||||
},
|
||||
});
|
||||
}
|
||||
|
||||
ranAfterInteractions = false;
|
||||
}, time);
|
||||
};
|
||||
@@ -118,7 +120,7 @@ export const Notes = ({route, navigation}) => {
|
||||
}
|
||||
};
|
||||
|
||||
const init = (data) => {
|
||||
const init = data => {
|
||||
if (data) {
|
||||
setLocalLoad(true);
|
||||
params = data;
|
||||
|
||||
Reference in New Issue
Block a user