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

refactor dialogs

Browse Source
This commit is contained in:
ammarahm-ed
2020-09-27 13:05:26 +05:00
parent c67ad09c9a
commit ddb9ac0d0e
8 changed files with 431 additions and 451 deletions
Download Patch File Download Diff File Expand all files Collapse all files

150
apps/mobile/src/components/AddTopicDialog/index.js
View File

@@ -8,6 +8,9 @@ import {eSendEvent} from '../../services/eventManager';
import {eOnNewTopicAdded} from '../../services/events';
import {Toast} from '../Toast';
import {Button} from '../Button';
import BaseDialog from '../Dialog/base-dialog';
import DialogHeader from '../Dialog/dialog-header';
import DialogButtons from '../Dialog/dialog-buttons';
export class AddTopicDialog extends React.Component {
constructor(props) {
@@ -31,7 +34,7 @@ export class AddTopicDialog extends React.Component {
} else {
let topic = this.props.toEdit;
topic.title = this.title;
await db.notebooks.notebook(topic.notebookId).topics.add(topic);
}
this.close();
@@ -44,6 +47,7 @@ export class AddTopicDialog extends React.Component {
});
}
close() {
refs = [];
this.title = null;
this.setState({
visible: false,
@@ -55,116 +59,66 @@ export class AddTopicDialog extends React.Component {
const {colors, toEdit} = this.props;
return (
<Modal
visible={visible}
animated
animationType="fade"
transparent={true}
<BaseDialog
onShow={() => {
this.titleRef.current?.focus();
}}
onRequestClose={() => {
refs = [];
this.close();
}}>
visible={visible}
onRequestClose={this.close}>
<View
style={{
width: '100%',
height: '100%',
backgroundColor: 'rgba(0,0,0,0.3)',
justifyContent: 'center',
alignItems: 'center',
...getElevation(5),
width: '80%',
maxHeight: 350,
borderRadius: 5,
backgroundColor: colors.bg,
paddingHorizontal: ph,
paddingVertical: pv,
}}>
<TouchableOpacity
onPress={() => this.close()}
style={{
width: '100%',
height: '100%',
position: 'absolute',
}}
<DialogHeader
icon="book-outline"
title={toEdit ? 'Edit Topic' : 'Add New Topic'}
/>
<View
<TextInput
ref={this.titleRef}
style={{
...getElevation(5),
width: '80%',
maxHeight: 350,
borderRadius: 5,
backgroundColor: colors.bg,
padding: pv,
borderWidth: 1.5,
borderColor: titleFocused ? colors.accent : colors.nav,
paddingHorizontal: ph,
paddingVertical: pv,
}}>
<View
style={{
flexDirection: 'row',
justifyContent: 'center',
alignItems: 'center',
}}>
<Icon name="book-outline" color={colors.accent} size={SIZE.lg} />
<Text
style={{
color: colors.accent,
fontFamily: WEIGHT.bold,
marginLeft: 5,
fontSize: SIZE.md,
}}>
{toEdit ? 'Edit Topic' : 'Add New Topic'}
</Text>
</View>
borderRadius: 5,
fontSize: SIZE.sm,
fontFamily: WEIGHT.regular,
color: colors.pri,
marginTop: 20,
}}
onFocus={() => {
this.setState({
titleFocused: true,
});
}}
onBlur={() => {
this.setState({
titleFocused: true,
});
}}
defaultValue={toEdit ? toEdit.title : null}
onChangeText={(value) => {
this.title = value;
}}
placeholder="Enter title of topic"
placeholderTextColor={colors.icon}
/>
<TextInput
ref={this.titleRef}
style={{
padding: pv,
borderWidth: 1.5,
borderColor: titleFocused ? colors.accent : colors.nav,
paddingHorizontal: ph,
borderRadius: 5,
fontSize: SIZE.sm,
fontFamily: WEIGHT.regular,
color: colors.pri,
marginTop: 20,
}}
onFocus={() => {
this.setState({
titleFocused: true,
});
}}
onBlur={() => {
this.setState({
titleFocused: true,
});
}}
defaultValue={toEdit ? toEdit.title : null}
onChangeText={(value) => {
this.title = value;
}}
placeholder="Enter title of topic"
placeholderTextColor={colors.icon}
/>
<View
style={{
justifyContent: 'space-around',
alignItems: 'center',
flexDirection: 'row',
marginTop: 20,
}}>
<Button
activeOpacity={opacity}
onPress={async () => await this.addNewTopic()}
title={toEdit ? 'Save' : 'Add'}
/>
<Button
activeOpacity={opacity}
onPress={() => this.close()}
title="Cancel"
/>
</View>
</View>
<DialogButtons
positiveTitle={toEdit ? 'Save' : 'Add'}
onPressNegative={this.close}
onPressPositive={this.addNewTopic}
/>
</View>
<Toast context="local" />
</Modal>
</BaseDialog>
);
}
}

49
apps/mobile/src/components/Dialog/BaseDialog.js Normal file
View File

@@ -0,0 +1,49 @@
import React from 'react';
import {Modal, StyleSheet, TouchableOpacity, View} from 'react-native';
import {useTracked} from '../../provider';
const BaseDialog = ({visible, onRequestClose, children, onShow}) => {
const [state, dispatch] = useTracked();
return (
<Modal
visible={visible}
transparent={true}
animated
statusBarTranslucent
onShow={onShow}
animationType="fade"
onRequestClose={onRequestClose}>
<View
style={[
{
backgroundColor: state.colors.night
? 'rgba(255,255,255,0.15)'
: 'rgba(0,0,0,0.3)',
},
styles.backdrop,
]}>
<TouchableOpacity
onPress={onRequestClose}
style={styles.overlayButton}
/>
{children}
</View>
</Modal>
);
};
const styles = StyleSheet.create({
backdrop: {
width: '100%',
height: '100%',
justifyContent: 'center',
alignItems: 'center',
},
overlayButton: {
width: '100%',
height: '100%',
position: 'absolute',
},
});
export default BaseDialog;

31
apps/mobile/src/components/Dialog/DialogButtons.js Normal file
View File

@@ -0,0 +1,31 @@
import React from 'react';
import {StyleSheet, Text, View} from 'react-native';
import Icon from 'react-native-vector-icons/MaterialCommunityIcons';
import {useTracked} from '../../provider';
import {Button} from '../Button';
const DialogButtons = ({
onPressPositive,
onPressNegative,
positiveTitle,
negativeTitle = 'Cancel',
}) => {
return (
<View
style={styles.container}>
<Button onPress={onPressPositive} title={positiveTitle} />
<Button onPress={onPressNegative} title={negativeTitle} />
</View>
);
};
export default DialogButtons;
const styles = StyleSheet.create({
container:{
justifyContent: 'space-around',
alignItems: 'center',
flexDirection: 'row',
marginTop: 20,
}
})

31
apps/mobile/src/components/Dialog/DialogHeader.js Normal file
View File

@@ -0,0 +1,31 @@
import React from 'react';
import {Text, View} from 'react-native';
import Icon from 'react-native-vector-icons/MaterialCommunityIcons';
import {useTracked} from '../../provider';
const DialogHeader = ({icon, title}) => {
const [state, dispatch] = useTracked();
const colors = state.colors;
return (
<View
style={{
flexDirection: 'row',
justifyContent: 'center',
alignItems: 'center',
}}>
{icon ? <Icon name={icon} color={colors.accent} size={SIZE.lg} /> : null}
<Text
style={{
color: colors.accent,
fontFamily: WEIGHT.bold,
marginLeft: 5,
fontSize: SIZE.md,
}}>
{title}
</Text>
</View>
);
};
export default DialogHeader

135
apps/mobile/src/components/Dialog/index.js
View File

@@ -1,20 +1,22 @@
import React, {Component} from 'react';
import {Modal, Text, TouchableOpacity, View} from 'react-native';
import Icon from 'react-native-vector-icons/MaterialCommunityIcons';
import {opacity, ph, pv, SIZE, WEIGHT} from '../../common/common';
import {ph, pv, SIZE, WEIGHT} from '../../common/common';
import {ACTIONS} from '../../provider/actions';
import {eSendEvent} from '../../services/eventManager';
import {
eApplyChanges,
eClearEditor,
eCloseFullscreenEditor,
eOnLoadNote,
eOnNewTopicAdded,
eApplyChanges, eOnLoadNote
} from '../../services/events';
import NavigationService from '../../services/NavigationService';
import {db, DDS, getElevation, history, ToastEvent} from '../../utils/utils';
import {Button} from '../Button';
import {dialogActions} from '../DialogManager/dialogActions';
import {updateEvent} from '../DialogManager/recievers';
import {Button} from '../Button';
import BaseDialog from './base-dialog';
export class Dialog extends Component {
constructor(props) {
@@ -134,7 +136,7 @@ export class Dialog extends Component {
break;
}
case dialogActions.ACTION_NEW_NOTE: {
eSendEvent(eOnLoadNote, {type:"new"});
eSendEvent(eOnLoadNote, {type: 'new'});
this.hide();
break;
}
@@ -205,93 +207,70 @@ export class Dialog extends Component {
const {title, paragraph, positiveText, negativeText, icon} = template;
const {visible} = this.state;
return (
<Modal
visible={visible}
transparent={true}
animated
animationType="fade"
onRequestClose={() => this.setState({visible: false})}>
<BaseDialog visible={visible} onRequestClose={this.hide}>
<View
style={{
width: '100%',
height: '100%',
backgroundColor: 'rgba(0,0,0,0.3)',
justifyContent: 'center',
alignItems: 'center',
...getElevation(5),
width: DDS.isTab ? '40%' : '80%',
maxHeight: 350,
borderRadius: 5,
backgroundColor: colors.bg,
paddingHorizontal: ph,
paddingVertical: pv,
}}>
<TouchableOpacity
onPress={this.hide}
style={{
width: '100%',
height: '100%',
position: 'absolute',
}}
/>
<View
style={{
...getElevation(5),
width: DDS.isTab ? '40%' : '80%',
maxHeight: 350,
borderRadius: 5,
backgroundColor: colors.bg,
paddingHorizontal: ph,
paddingVertical: pv,
flexDirection: 'row',
justifyContent: 'center',
alignItems: 'center',
}}>
<View
style={{
flexDirection: 'row',
justifyContent: 'center',
alignItems: 'center',
}}>
{icon ? (
<Icon name={icon} color={colors.accent} size={SIZE.lg} />
) : null}
{template.noTitle ? null : (
<Text
style={{
color: colors.accent,
fontFamily: WEIGHT.bold,
marginLeft: 5,
fontSize: SIZE.md,
}}>
{title}
</Text>
)}
</View>
{paragraph ? (
<Text
style={{
color: colors.icon,
fontFamily: WEIGHT.regular,
fontSize: SIZE.sm - 2,
textAlign: 'center',
marginTop: 10,
}}>
{this.state.selectedItemsLength > 0
? 'Delete ' +
this.state.selectedItemsLength +
' selected items?'
: paragraph}
</Text>
{icon ? (
<Icon name={icon} color={colors.accent} size={SIZE.lg} />
) : null}
{template.noButtons ? null : (
<View
{template.noTitle ? null : (
<Text
style={{
justifyContent: 'space-between',
alignItems: 'center',
flexDirection: 'row',
marginTop: 20,
color: colors.accent,
fontFamily: WEIGHT.bold,
marginLeft: 5,
fontSize: SIZE.md,
}}>
<Button onPress={this._onClose} title={negativeText} grayed />
<Button onPress={this._onPress} title={positiveText} />
</View>
{title}
</Text>
)}
</View>
{paragraph ? (
<Text
style={{
color: colors.icon,
fontFamily: WEIGHT.regular,
fontSize: SIZE.xs + 1,
textAlign: 'center',
}}>
{this.state.selectedItemsLength > 0
? 'Delete ' +
this.state.selectedItemsLength +
' selected items?'
: paragraph}
</Text>
) : null}
{template.noButtons ? null : (
<View
style={{
justifyContent: 'space-between',
alignItems: 'center',
flexDirection: 'row',
marginTop: 20,
}}>
<Button onPress={this._onClose} title={negativeText} grayed />
<Button onPress={this._onPress} title={positiveText} />
</View>
)}
</View>
</Modal>
</BaseDialog>
);
}
}

152
apps/mobile/src/components/ExportDialog/index.js
View File

@@ -14,6 +14,8 @@ import {useTracked} from '../../provider';
import storage from '../../utils/storage';
import {DDS, getElevation, ToastEvent} from '../../utils/utils';
import {Button} from '../Button/index';
import BaseDialog from '../Dialog/base-dialog';
import DialogHeader from '../Dialog/dialog-header';
import {Loading} from '../Loading';
import Seperator from '../Seperator';
@@ -112,94 +114,70 @@ const ExportDialog = () => {
];
return (
<Modal
visible={visible}
transparent={true}
animated
animationType="fade"
onRequestClose={close}>
<View style={styles.wrapper}>
<TouchableOpacity onPress={close} style={styles.overlay} />
<View
style={[
{
width: DDS.isTab ? '40%' : '80%',
backgroundColor: colors.bg,
},
styles.container,
]}>
<View style={styles.headingContainer}>
<Icon name="export" color={colors.accent} size={SIZE.lg} />
<Text style={[{color: colors.accent}, styles.heading]}>
Export
{notes.length === 0 || notes.length === 1
? ''
: ' ' + notes.length}{' '}
Note
</Text>
</View>
<BaseDialog onRequestClose={close} visible={visible}>
<View
style={[
{
width: DDS.isTab ? '40%' : '80%',
backgroundColor: colors.bg,
},
styles.container,
]}>
<DialogHeader icon="export" title="Export Note" />
<Seperator half />
{exporting ? (
<Loading
done={complete}
doneText={doneText}
onDone={() => {
FileViewer.open(result.filePath, {
showOpenWithDialog: true,
showAppsSuggestions: true,
}).catch((e) => {
console.log(e);
ToastEvent.show(
`No application found to open ${result.name} file`,
);
});
close();
}}
tagline="Exporting notes"
/>
) : (
<>
<Text
style={[
{
color: colors.pri,
fontSize: SIZE.xs + 1,
alignSelf: 'center',
},
]}>
Export your note in any of the following formats.
</Text>
<View style={styles.buttonContainer}>
{actions.map((item) => (
<Fragment key={item.title}>
<Seperator half />
<Button
width="100%"
title={item.title}
icon={item.icon}
activeOpacity={opacity}
onPress={item.func}
/>
</Fragment>
))}
</View>
</>
)}
</View>
<Seperator half />
{exporting ? (
<Loading
done={complete}
doneText={doneText}
onDone={() => {
FileViewer.open(result.filePath, {
showOpenWithDialog: true,
showAppsSuggestions: true,
}).catch((e) => {
console.log(e);
ToastEvent.show(
`No application found to open ${result.name} file`,
);
});
close();
}}
tagline="Exporting notes"
/>
) : (
<>
<Text
style={[
{
color: colors.pri,
fontSize: SIZE.xs + 1,
alignSelf: 'center',
},
]}>
Export your note in any of the following formats.
</Text>
<View style={styles.buttonContainer}>
{actions.map((item) => (
<Fragment key={item.title}>
<Seperator half />
<Button
width="100%"
title={item.title}
icon={item.icon}
activeOpacity={opacity}
onPress={item.func}
/>
</Fragment>
))}
</View>
</>
)}
</View>
</Modal>
</BaseDialog>
);
};
const styles = StyleSheet.create({
wrapper: {
width: '100%',
height: '100%',
backgroundColor: 'rgba(0,0,0,0.3)',
justifyContent: 'center',
alignItems: 'center',
},
container: {
...getElevation(5),
maxHeight: 350,
@@ -207,20 +185,10 @@ const styles = StyleSheet.create({
paddingHorizontal: ph,
paddingVertical: pv,
},
headingContainer: {
flexDirection: 'row',
justifyContent: 'center',
alignItems: 'center',
},
buttonContainer: {
justifyContent: 'space-between',
alignItems: 'center',
},
heading: {
fontFamily: WEIGHT.bold,
marginLeft: 5,
fontSize: SIZE.md,
},
button: {
paddingVertical: pv,
paddingHorizontal: ph,

282
apps/mobile/src/components/VaultDialog/index.js
View File

@@ -19,6 +19,9 @@ import {
import {openEditorAnimation} from '../../utils/animations';
import {db, DDS, getElevation, ToastEvent} from '../../utils/utils';
import {Button} from '../Button/index';
import BaseDialog from '../Dialog/base-dialog';
import DialogButtons from '../Dialog/dialog-buttons';
import DialogHeader from '../Dialog/dialog-header';
import {updateEvent} from '../DialogManager/recievers';
import {Toast} from '../Toast';
const passInputRef = createRef();
@@ -251,98 +254,100 @@ export class VaultDialog extends Component {
} = this.state;
return (
<Modal
<BaseDialog
onShow={() => {
passInputRef.current?.focus();
}}
visible={visible}
transparent={true}
onRequestClose={this.close}>
onRequestClose={this.close}
visible={visible}>
<View
style={{
width: '100%',
height: '100%',
backgroundColor: colors.night
? 'rgba(255,255,255,0.3)'
: 'rgba(0,0,0,0.3)',
justifyContent: 'center',
alignItems: 'center',
...getElevation(5),
width: '80%',
maxHeight: 350,
borderRadius: 5,
backgroundColor: colors.bg,
paddingHorizontal: ph,
paddingVertical: pv,
}}>
<View
style={{
...getElevation(5),
width: '80%',
maxHeight: 350,
borderRadius: 5,
backgroundColor: colors.bg,
paddingHorizontal: ph,
paddingVertical: pv,
}}>
<View
style={{
flexDirection: 'row',
justifyContent: 'center',
alignItems: 'center',
}}>
<Icon name="shield" color={colors.accent} size={SIZE.lg} />
<Text
style={{
color: colors.accent,
fontFamily: WEIGHT.bold,
marginLeft: 5,
fontSize: SIZE.md,
}}>
{!novault
? 'Create vault'
: note.locked
? this.state.deleteNote
? 'Delete note'
: this.state.share
? 'Share note'
: this.state.goToEditor
? 'Unlock note'
: 'Unlock note'
: 'Lock note'}
</Text>
</View>
<Text
style={{
color: colors.icon,
fontFamily: WEIGHT.regular,
textAlign: 'center',
fontSize: SIZE.sm - 1,
flexWrap: 'wrap',
maxWidth: '90%',
alignSelf: 'center',
marginTop: 10,
marginBottom: 5,
}}>
{!novault
? 'Set a password to create vault'
: permanant
? 'Enter password to remove note from vault.'
<DialogHeader
title={
!novault
? 'Create vault'
: note.locked
? this.state.deleteNote
? 'Unlock note to delete it.'
? 'Delete note'
: this.state.share
? 'Unlock note to share it.'
? 'Share note'
: this.state.goToEditor
? 'Unlock note to open it in editor'
: 'Enter vault password to unlock note.'
: 'Enter vault password to lock note.'}
</Text>
? 'Unlock note'
: 'Unlock note'
: 'Lock note'
}
icon="shield"
/>
{note.locked || locked || permanant ? (
<Text
style={{
color: colors.icon,
fontFamily: WEIGHT.regular,
textAlign: 'center',
fontSize: SIZE.sm - 1,
flexWrap: 'wrap',
maxWidth: '90%',
alignSelf: 'center',
marginTop: 10,
marginBottom: 5,
}}>
{!novault
? 'Set a password to create vault'
: permanant
? 'Enter password to remove note from vault.'
: note.locked
? this.state.deleteNote
? 'Unlock note to delete it.'
: this.state.share
? 'Unlock note to share it.'
: this.state.goToEditor
? 'Unlock note to open it in editor'
: 'Enter vault password to unlock note.'
: 'Enter vault password to lock note.'}
</Text>
{note.locked || locked || permanant ? (
<TextInput
ref={passInputRef}
style={{
padding: pv - 5,
borderWidth: 1.5,
borderColor: wrongPassword ? colors.errorText : colors.nav,
paddingHorizontal: ph,
borderRadius: 5,
marginTop: 10,
fontSize: SIZE.sm,
fontFamily: WEIGHT.regular,
}}
onChangeText={(value) => {
this.password = value;
}}
secureTextEntry
placeholder="Password"
placeholderTextColor={colors.icon}
/>
) : null}
{!novault ? (
<View>
<TextInput
ref={passInputRef}
style={{
padding: pv - 5,
borderWidth: 1.5,
borderColor: wrongPassword ? colors.errorText : colors.nav,
borderColor: passwordsDontMatch
? colors.errorText
: colors.nav,
paddingHorizontal: ph,
borderRadius: 5,
marginTop: 10,
fontSize: SIZE.sm,
fontFamily: WEIGHT.regular,
}}
@@ -353,93 +358,58 @@ export class VaultDialog extends Component {
placeholder="Password"
placeholderTextColor={colors.icon}
/>
) : null}
{!novault ? (
<View>
<TextInput
ref={passInputRef}
style={{
padding: pv - 5,
borderWidth: 1.5,
borderColor: passwordsDontMatch
? colors.errorText
: colors.nav,
paddingHorizontal: ph,
borderRadius: 5,
fontSize: SIZE.sm,
fontFamily: WEIGHT.regular,
}}
onChangeText={(value) => {
this.password = value;
}}
secureTextEntry
placeholder="Password"
placeholderTextColor={colors.icon}
/>
<TextInput
ref={confirmPassRef}
style={{
padding: pv - 5,
borderWidth: 1.5,
borderColor: passwordsDontMatch
? colors.errorText
: colors.nav,
paddingHorizontal: ph,
borderRadius: 5,
fontSize: SIZE.sm,
fontFamily: WEIGHT.regular,
marginTop: 10,
}}
secureTextEntry
onChangeText={(value) => {
this.confirmPassword = value;
if (value !== this.password) {
this.setState({
passwordsDontMatch: true,
});
} else {
this.setState({
passwordsDontMatch: false,
});
}
}}
placeholder="Confirm password"
placeholderTextColor={colors.icon}
/>
</View>
) : null}
<View
style={{
justifyContent: 'space-around',
alignItems: 'center',
flexDirection: 'row',
marginTop: 20,
}}>
<Button onPress={this.close} title="Cancel" />
<Button
onPress={this.onPress}
title={
note.locked
? this.state.deleteNote
? 'Delete'
: this.state.share
? 'Share '
: this.state.goToEditor
? 'Open'
: 'Unlock'
: 'Lock'
}
grayed
<TextInput
ref={confirmPassRef}
style={{
padding: pv - 5,
borderWidth: 1.5,
borderColor: passwordsDontMatch
? colors.errorText
: colors.nav,
paddingHorizontal: ph,
borderRadius: 5,
fontSize: SIZE.sm,
fontFamily: WEIGHT.regular,
marginTop: 10,
}}
secureTextEntry
onChangeText={(value) => {
this.confirmPassword = value;
if (value !== this.password) {
this.setState({
passwordsDontMatch: true,
});
} else {
this.setState({
passwordsDontMatch: false,
});
}
}}
placeholder="Confirm password"
placeholderTextColor={colors.icon}
/>
</View>
</View>
) : null}
<DialogButtons
onPressNegative={this.close}
onPressPositive={this.onPress}
positiveTitle={
note.locked
? this.state.deleteNote
? 'Delete'
: this.state.share
? 'Share '
: this.state.goToEditor
? 'Open'
: 'Unlock'
: 'Lock'
}
/>
</View>
<Toast context="local" />
</Modal>
</BaseDialog>
);
}
}

52
apps/mobile/src/utils/animations.js
View File

@@ -7,7 +7,9 @@ const {color, Value, timing} = Animated;
export const EditorPosition = new Value(Dimensions.get('window').width * 1.5);
export const EditorScale = new Value(1);
export const EditorOpacity = new Value(0);
export const EditorTranslateY = new Value(Dimensions.get('window').height * 0.75);
export const EditorTranslateY = new Value(
Dimensions.get('window').height * 0.75,
);
export function openEditorAnimation() {
EditorPosition.setValue(Dimensions.get('window').width * 1.5);
@@ -18,17 +20,16 @@ export function openEditorAnimation() {
EditorPosition.setValue(0);
timing(EditorTranslateY, {
duration: 200,
toValue: 0,
easing: Easing.out(Easing.ease),
}).start();
timing(EditorOpacity, {
duration: 150,
toValue: 1,
easing: Easing.out(Easing.ease),
}).start();
timing(EditorTranslateY, {
duration: 200,
toValue: 0,
easing: Easing.out(Easing.ease),
}).start();
timing(EditorOpacity, {
duration: 150,
toValue: 1,
easing: Easing.out(Easing.ease),
}).start();
}
export function exitEditorAnimation() {
@@ -37,21 +38,18 @@ export function exitEditorAnimation() {
EditorTranslateY.setValue(0);
editing.currentlyEditing = false;
timing(EditorOpacity, {
duration: 150,
toValue: 0,
easing: Easing.inOut(Easing.ease),
}).start(() => {
EditorPosition.setValue(Dimensions.get('window').width * 1.5);
});
timing(EditorTranslateY, {
duration: 200,
toValue: Dimensions.get('window').height * 0.75,
easing: Easing.inOut(Easing.ease),
}).start();
timing(EditorOpacity, {
duration: 150,
toValue: 0,
easing: Easing.inOut(Easing.ease),
}).start(() => {
EditorPosition.setValue(Dimensions.get('window').width * 1.5);
});
timing(EditorTranslateY, {
duration: 200,
toValue: Dimensions.get('window').height * 0.75,
easing: Easing.inOut(Easing.ease),
}).start();
}
export const slideRight = {