refactor and disable animations

This commit is contained in:
ammarahm-ed
2021-02-27 12:26:51 +05:00
parent 275755fa8f
commit ddc0ffdf45
5 changed files with 34 additions and 28 deletions

View File

@@ -13,7 +13,7 @@ export const Container = ({children, root}) => {
return ( return (
<KeyboardAvoidingView behavior="padding" enabled={Platform.OS === 'ios'} <KeyboardAvoidingView behavior="padding" enabled={Platform.OS === 'ios'}
style={{ style={{
backgroundColor:colors.nav, backgroundColor:colors.bg,
width:"100%", width:"100%",
height:"100%" height:"100%"
}} }}

View File

@@ -30,11 +30,11 @@ const onStateChange = (state) => {
const onNavigatorStateChange = (e) => { const onNavigatorStateChange = (e) => {
if (e.history.find((i) => i.type === 'drawer')) { if (e.history.find((i) => i.type === 'drawer')) {
changeContainerScale(ContainerScale, 0.95, 250); //changeContainerScale(ContainerScale, 0.95, 250);
changeContainerScale(DrawerScale, 1, 250); //changeContainerScale(DrawerScale, 1, 250);
} else { } else {
changeContainerScale(DrawerScale, 0.95, 250); //changeContainerScale(DrawerScale, 0.95, 250);
changeContainerScale(ContainerScale, 1, 250); //changeContainerScale(ContainerScale, 1, 250);
} }
} }

View File

@@ -68,7 +68,7 @@ export const AppScale = new Animated.Value(0.95);
export const AppBorders = new Animated.Value(10); export const AppBorders = new Animated.Value(10);
export const ContainerScale = new Animated.Value(0.95); export const ContainerScale = new Animated.Value(0.95);
export const EditorScalee = new Animated.Value(1); export const EditorScalee = new Animated.Value(1);
export const DrawerScale = new Animated.Value(0.95); export const DrawerScale = new Animated.Value(1);
export function changeContainerScale(op, scale, duration = 500, callback) { export function changeContainerScale(op, scale, duration = 500, callback) {
timing(op, { timing(op, {

View File

@@ -29,15 +29,13 @@ const EditorOverlay = () => {
clearTimeout(timerError); clearTimeout(timerError);
setProgress(2); setProgress(2);
if (_loading) { if (_loading) {
timer = setTimeout(() => { setLoading(_loading);
setLoading(_loading); timerError = setTimeout(() => {
timerError = setTimeout(() => { setError(true);
setError(true); }, 4000);
}, 3000);
},1000)
} else { } else {
setProgress(4); setProgress(4);
await sleep(10); await sleep(1);
setError(false); setError(false);
timing(opacity, { timing(opacity, {
toValue: 0, toValue: 0,
@@ -45,11 +43,11 @@ const EditorOverlay = () => {
easing: Easing.out(Easing.ease), easing: Easing.out(Easing.ease),
}).start(async () => { }).start(async () => {
await sleep(150); await sleep(150);
setLoading(false);
setProgress(1); setProgress(1);
opacity.setValue(1); opacity.setValue(1);
clearTimeout(timer); clearTimeout(timer);
clearTimeout(timerError); clearTimeout(timerError);
setLoading(false);
}); });
} }
}; };
@@ -71,7 +69,7 @@ const EditorOverlay = () => {
justifyContent: 'center', justifyContent: 'center',
alignItems: 'center', alignItems: 'center',
opacity: opacity, opacity: opacity,
top: loading ? 0 : 6000, top: 0,
zIndex: 100, zIndex: 100,
}}> }}>
<View <View
@@ -89,11 +87,17 @@ const EditorOverlay = () => {
height: 10, height: 10,
width: 100, width: 100,
marginBottom: 15, marginBottom: 15,
borderRadius: 5,
overflow: 'hidden',
backgroundColor:colors.nav
}}> }}>
<AnimatedProgress <Animated.View
fill={error ? 'red' : colors.accent} style={{
total={4} height: 10,
current={progress} borderRadius: 5,
width:100,
backgroundColor:colors.accent
}}
/> />
</View> </View>
@@ -101,16 +105,18 @@ const EditorOverlay = () => {
textBreakStrategy="balanced" textBreakStrategy="balanced"
style={{textAlign: 'center', marginBottom: 5}} style={{textAlign: 'center', marginBottom: 5}}
size={SIZE.lg}> size={SIZE.lg}>
{loading?.title ? loading.title : 'Loading Note'} {loading?.title ? loading.title : 'Loading editor'}
</Heading> </Heading>
<Paragraph {loading?.dateEdited ? (
textBreakStrategy="balanced" <Paragraph
style={{textAlign: 'center'}} textBreakStrategy="balanced"
color={colors.icon} style={{textAlign: 'center'}}
size={SIZE.sm}> color={colors.icon}
{loading && timeConverter(loading.dateEdited)} size={SIZE.sm}>
</Paragraph> {timeConverter(loading.dateEdited)}
</Paragraph>
) : null}
</View> </View>
{error && ( {error && (

View File

@@ -1,4 +1,4 @@
import {EditorWebView, getWebviewInit} from '../Functions'; import { getWebviewInit } from '../Functions';
const reset = ` const reset = `
isLoading = true; isLoading = true;