Mirrors/notesnook
1
0
Fork 0
mirror of https://github.com/streetwriters/notesnook.git synced 2025-12-22 14:39: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 {eOnNewTopicAdded} from '../../services/events';
import {Toast} from '../Toast'; import {Toast} from '../Toast';
import {Button} from '../Button'; 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 { export class AddTopicDialog extends React.Component {
constructor(props) { constructor(props) {
@@ -31,7 +34,7 @@ export class AddTopicDialog extends React.Component {
} else { } else {
let topic = this.props.toEdit; let topic = this.props.toEdit;
topic.title = this.title; topic.title = this.title;
await db.notebooks.notebook(topic.notebookId).topics.add(topic); await db.notebooks.notebook(topic.notebookId).topics.add(topic);
} }
this.close(); this.close();
@@ -44,6 +47,7 @@ export class AddTopicDialog extends React.Component {
}); });
} }
close() { close() {
refs = [];
this.title = null; this.title = null;
this.setState({ this.setState({
visible: false, visible: false,
@@ -55,116 +59,66 @@ export class AddTopicDialog extends React.Component {
const {colors, toEdit} = this.props; const {colors, toEdit} = this.props;
return ( return (
<Modal <BaseDialog
visible={visible}
animated
animationType="fade"
transparent={true}
onShow={() => { onShow={() => {
this.titleRef.current?.focus(); this.titleRef.current?.focus();
}} }}
onRequestClose={() => { visible={visible}
refs = []; onRequestClose={this.close}>
this.close();
}}>
<View <View
style={{ style={{
width: '100%', ...getElevation(5),
height: '100%', width: '80%',
backgroundColor: 'rgba(0,0,0,0.3)', maxHeight: 350,
justifyContent: 'center', borderRadius: 5,
alignItems: 'center', backgroundColor: colors.bg,
paddingHorizontal: ph,
paddingVertical: pv,
}}> }}>
<TouchableOpacity <DialogHeader
onPress={() => this.close()} icon="book-outline"
style={{ title={toEdit ? 'Edit Topic' : 'Add New Topic'}
width: '100%',
height: '100%',
position: 'absolute',
}}
/> />
<View <TextInput
ref={this.titleRef}
style={{ style={{
...getElevation(5), padding: pv,
width: '80%', borderWidth: 1.5,
maxHeight: 350, borderColor: titleFocused ? colors.accent : colors.nav,
borderRadius: 5,
backgroundColor: colors.bg,
paddingHorizontal: ph, paddingHorizontal: ph,
paddingVertical: pv, borderRadius: 5,
}}> fontSize: SIZE.sm,
<View fontFamily: WEIGHT.regular,
style={{ color: colors.pri,
flexDirection: 'row', marginTop: 20,
justifyContent: 'center', }}
alignItems: 'center', onFocus={() => {
}}> this.setState({
<Icon name="book-outline" color={colors.accent} size={SIZE.lg} /> titleFocused: true,
<Text });
style={{ }}
color: colors.accent, onBlur={() => {
fontFamily: WEIGHT.bold, this.setState({
marginLeft: 5, titleFocused: true,
fontSize: SIZE.md, });
}}> }}
{toEdit ? 'Edit Topic' : 'Add New Topic'} defaultValue={toEdit ? toEdit.title : null}
</Text> onChangeText={(value) => {
</View> this.title = value;
}}
placeholder="Enter title of topic"
placeholderTextColor={colors.icon}
/>
<TextInput <DialogButtons
ref={this.titleRef} positiveTitle={toEdit ? 'Save' : 'Add'}
style={{ onPressNegative={this.close}
padding: pv, onPressPositive={this.addNewTopic}
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>
</View> </View>
<Toast context="local" /> <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 React, {Component} from 'react';
import {Modal, Text, TouchableOpacity, View} from 'react-native'; import {Modal, Text, TouchableOpacity, View} from 'react-native';
import Icon from 'react-native-vector-icons/MaterialCommunityIcons'; 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 {ACTIONS} from '../../provider/actions';
import {eSendEvent} from '../../services/eventManager'; import {eSendEvent} from '../../services/eventManager';
import { import {
eApplyChanges,
eClearEditor, eClearEditor,
eCloseFullscreenEditor, eCloseFullscreenEditor,
eOnLoadNote,
eOnNewTopicAdded, eOnNewTopicAdded,
eApplyChanges, eOnLoadNote
} from '../../services/events'; } from '../../services/events';
import NavigationService from '../../services/NavigationService'; import NavigationService from '../../services/NavigationService';
import {db, DDS, getElevation, history, ToastEvent} from '../../utils/utils'; import {db, DDS, getElevation, history, ToastEvent} from '../../utils/utils';
import {Button} from '../Button';
import {dialogActions} from '../DialogManager/dialogActions'; import {dialogActions} from '../DialogManager/dialogActions';
import {updateEvent} from '../DialogManager/recievers'; import {updateEvent} from '../DialogManager/recievers';
import {Button} from '../Button'; import BaseDialog from './base-dialog';
export class Dialog extends Component { export class Dialog extends Component {
constructor(props) { constructor(props) {
@@ -134,7 +136,7 @@ export class Dialog extends Component {
break; break;
} }
case dialogActions.ACTION_NEW_NOTE: { case dialogActions.ACTION_NEW_NOTE: {
eSendEvent(eOnLoadNote, {type:"new"}); eSendEvent(eOnLoadNote, {type: 'new'});
this.hide(); this.hide();
break; break;
} }
@@ -205,93 +207,70 @@ export class Dialog extends Component {
const {title, paragraph, positiveText, negativeText, icon} = template; const {title, paragraph, positiveText, negativeText, icon} = template;
const {visible} = this.state; const {visible} = this.state;
return ( return (
<Modal <BaseDialog visible={visible} onRequestClose={this.hide}>
visible={visible}
transparent={true}
animated
animationType="fade"
onRequestClose={() => this.setState({visible: false})}>
<View <View
style={{ style={{
width: '100%', ...getElevation(5),
height: '100%', width: DDS.isTab ? '40%' : '80%',
backgroundColor: 'rgba(0,0,0,0.3)', maxHeight: 350,
justifyContent: 'center', borderRadius: 5,
alignItems: 'center', backgroundColor: colors.bg,
paddingHorizontal: ph,
paddingVertical: pv,
}}> }}>
<TouchableOpacity
onPress={this.hide}
style={{
width: '100%',
height: '100%',
position: 'absolute',
}}
/>
<View <View
style={{ style={{
...getElevation(5), flexDirection: 'row',
width: DDS.isTab ? '40%' : '80%', justifyContent: 'center',
maxHeight: 350, alignItems: 'center',
borderRadius: 5,
backgroundColor: colors.bg,
paddingHorizontal: ph,
paddingVertical: pv,
}}> }}>
<View {icon ? (
style={{ <Icon name={icon} color={colors.accent} size={SIZE.lg} />
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>
) : null} ) : null}
{template.noButtons ? null : ( {template.noTitle ? null : (
<View <Text
style={{ style={{
justifyContent: 'space-between', color: colors.accent,
alignItems: 'center', fontFamily: WEIGHT.bold,
flexDirection: 'row', marginLeft: 5,
marginTop: 20, fontSize: SIZE.md,
}}> }}>
<Button onPress={this._onClose} title={negativeText} grayed /> {title}
<Button onPress={this._onPress} title={positiveText} /> </Text>
</View>
)} )}
</View> </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> </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 storage from '../../utils/storage';
import {DDS, getElevation, ToastEvent} from '../../utils/utils'; import {DDS, getElevation, ToastEvent} from '../../utils/utils';
import {Button} from '../Button/index'; import {Button} from '../Button/index';
import BaseDialog from '../Dialog/base-dialog';
import DialogHeader from '../Dialog/dialog-header';
import {Loading} from '../Loading'; import {Loading} from '../Loading';
import Seperator from '../Seperator'; import Seperator from '../Seperator';
@@ -112,94 +114,70 @@ const ExportDialog = () => {
]; ];
return ( return (
<Modal <BaseDialog onRequestClose={close} visible={visible}>
visible={visible} <View
transparent={true} style={[
animated {
animationType="fade" width: DDS.isTab ? '40%' : '80%',
onRequestClose={close}> backgroundColor: colors.bg,
<View style={styles.wrapper}> },
<TouchableOpacity onPress={close} style={styles.overlay} /> styles.container,
<View ]}>
style={[ <DialogHeader icon="export" title="Export Note" />
{
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>
<Seperator half /> <Seperator half />
{exporting ? ( {exporting ? (
<Loading <Loading
done={complete} done={complete}
doneText={doneText} doneText={doneText}
onDone={() => { onDone={() => {
FileViewer.open(result.filePath, { FileViewer.open(result.filePath, {
showOpenWithDialog: true, showOpenWithDialog: true,
showAppsSuggestions: true, showAppsSuggestions: true,
}).catch((e) => { }).catch((e) => {
console.log(e); console.log(e);
ToastEvent.show( ToastEvent.show(
`No application found to open ${result.name} file`, `No application found to open ${result.name} file`,
); );
}); });
close(); close();
}} }}
tagline="Exporting notes" tagline="Exporting notes"
/> />
) : ( ) : (
<> <>
<Text <Text
style={[ style={[
{ {
color: colors.pri, color: colors.pri,
fontSize: SIZE.xs + 1, fontSize: SIZE.xs + 1,
alignSelf: 'center', alignSelf: 'center',
}, },
]}> ]}>
Export your note in any of the following formats. Export your note in any of the following formats.
</Text> </Text>
<View style={styles.buttonContainer}> <View style={styles.buttonContainer}>
{actions.map((item) => ( {actions.map((item) => (
<Fragment key={item.title}> <Fragment key={item.title}>
<Seperator half /> <Seperator half />
<Button <Button
width="100%" width="100%"
title={item.title} title={item.title}
icon={item.icon} icon={item.icon}
activeOpacity={opacity} activeOpacity={opacity}
onPress={item.func} onPress={item.func}
/> />
</Fragment> </Fragment>
))} ))}
</View> </View>
</> </>
)} )}
</View>
</View> </View>
</Modal> </BaseDialog>
); );
}; };
const styles = StyleSheet.create({ const styles = StyleSheet.create({
wrapper: {
width: '100%',
height: '100%',
backgroundColor: 'rgba(0,0,0,0.3)',
justifyContent: 'center',
alignItems: 'center',
},
container: { container: {
...getElevation(5), ...getElevation(5),
maxHeight: 350, maxHeight: 350,
@@ -207,20 +185,10 @@ const styles = StyleSheet.create({
paddingHorizontal: ph, paddingHorizontal: ph,
paddingVertical: pv, paddingVertical: pv,
}, },
headingContainer: {
flexDirection: 'row',
justifyContent: 'center',
alignItems: 'center',
},
buttonContainer: { buttonContainer: {
justifyContent: 'space-between', justifyContent: 'space-between',
alignItems: 'center', alignItems: 'center',
}, },
heading: {
fontFamily: WEIGHT.bold,
marginLeft: 5,
fontSize: SIZE.md,
},
button: { button: {
paddingVertical: pv, paddingVertical: pv,
paddingHorizontal: ph, paddingHorizontal: ph,

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

@@ -19,6 +19,9 @@ import {
import {openEditorAnimation} from '../../utils/animations'; import {openEditorAnimation} from '../../utils/animations';
import {db, DDS, getElevation, ToastEvent} from '../../utils/utils'; import {db, DDS, getElevation, ToastEvent} from '../../utils/utils';
import {Button} from '../Button/index'; 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 {updateEvent} from '../DialogManager/recievers';
import {Toast} from '../Toast'; import {Toast} from '../Toast';
const passInputRef = createRef(); const passInputRef = createRef();
@@ -251,98 +254,100 @@ export class VaultDialog extends Component {
} = this.state; } = this.state;
return ( return (
<Modal <BaseDialog
onShow={() => { onShow={() => {
passInputRef.current?.focus(); passInputRef.current?.focus();
}} }}
visible={visible} onRequestClose={this.close}
transparent={true} visible={visible}>
onRequestClose={this.close}>
<View <View
style={{ style={{
width: '100%', ...getElevation(5),
height: '100%', width: '80%',
backgroundColor: colors.night maxHeight: 350,
? 'rgba(255,255,255,0.3)' borderRadius: 5,
: 'rgba(0,0,0,0.3)', backgroundColor: colors.bg,
justifyContent: 'center', paddingHorizontal: ph,
alignItems: 'center', paddingVertical: pv,
}}> }}>
<View <DialogHeader
style={{ title={
...getElevation(5), !novault
width: '80%', ? 'Create vault'
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.'
: note.locked : note.locked
? this.state.deleteNote ? this.state.deleteNote
? 'Unlock note to delete it.' ? 'Delete note'
: this.state.share : this.state.share
? 'Unlock note to share it.' ? 'Share note'
: this.state.goToEditor : this.state.goToEditor
? 'Unlock note to open it in editor' ? 'Unlock note'
: 'Enter vault password to unlock note.' : 'Unlock note'
: 'Enter vault password to lock note.'} : 'Lock note'
</Text> }
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 <TextInput
ref={passInputRef} ref={passInputRef}
style={{ style={{
padding: pv - 5, padding: pv - 5,
borderWidth: 1.5, borderWidth: 1.5,
borderColor: wrongPassword ? colors.errorText : colors.nav, borderColor: passwordsDontMatch
? colors.errorText
: colors.nav,
paddingHorizontal: ph, paddingHorizontal: ph,
borderRadius: 5, borderRadius: 5,
marginTop: 10,
fontSize: SIZE.sm, fontSize: SIZE.sm,
fontFamily: WEIGHT.regular, fontFamily: WEIGHT.regular,
}} }}
@@ -353,93 +358,58 @@ export class VaultDialog extends Component {
placeholder="Password" placeholder="Password"
placeholderTextColor={colors.icon} placeholderTextColor={colors.icon}
/> />
) : null}
{!novault ? ( <TextInput
<View> ref={confirmPassRef}
<TextInput style={{
ref={passInputRef} padding: pv - 5,
style={{ borderWidth: 1.5,
padding: pv - 5, borderColor: passwordsDontMatch
borderWidth: 1.5, ? colors.errorText
borderColor: passwordsDontMatch : colors.nav,
? colors.errorText paddingHorizontal: ph,
: colors.nav, borderRadius: 5,
paddingHorizontal: ph, fontSize: SIZE.sm,
borderRadius: 5, fontFamily: WEIGHT.regular,
fontSize: SIZE.sm, marginTop: 10,
fontFamily: WEIGHT.regular, }}
}} secureTextEntry
onChangeText={(value) => { onChangeText={(value) => {
this.password = value; this.confirmPassword = value;
}} if (value !== this.password) {
secureTextEntry this.setState({
placeholder="Password" passwordsDontMatch: true,
placeholderTextColor={colors.icon} });
/> } else {
this.setState({
<TextInput passwordsDontMatch: false,
ref={confirmPassRef} });
style={{ }
padding: pv - 5, }}
borderWidth: 1.5, placeholder="Confirm password"
borderColor: passwordsDontMatch placeholderTextColor={colors.icon}
? 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
/> />
</View> </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> </View>
<Toast context="local" /> <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 EditorPosition = new Value(Dimensions.get('window').width * 1.5);
export const EditorScale = new Value(1); export const EditorScale = new Value(1);
export const EditorOpacity = new Value(0); 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() { export function openEditorAnimation() {
EditorPosition.setValue(Dimensions.get('window').width * 1.5); EditorPosition.setValue(Dimensions.get('window').width * 1.5);
@@ -18,17 +20,16 @@ export function openEditorAnimation() {
EditorPosition.setValue(0); EditorPosition.setValue(0);
timing(EditorTranslateY, { timing(EditorTranslateY, {
duration: 200, duration: 200,
toValue: 0, toValue: 0,
easing: Easing.out(Easing.ease), easing: Easing.out(Easing.ease),
}).start(); }).start();
timing(EditorOpacity, { timing(EditorOpacity, {
duration: 150, duration: 150,
toValue: 1, toValue: 1,
easing: Easing.out(Easing.ease), easing: Easing.out(Easing.ease),
}).start(); }).start();
} }
export function exitEditorAnimation() { export function exitEditorAnimation() {
@@ -37,21 +38,18 @@ export function exitEditorAnimation() {
EditorTranslateY.setValue(0); EditorTranslateY.setValue(0);
editing.currentlyEditing = false; editing.currentlyEditing = false;
timing(EditorOpacity, { timing(EditorOpacity, {
duration: 150, duration: 150,
toValue: 0, toValue: 0,
easing: Easing.inOut(Easing.ease), easing: Easing.inOut(Easing.ease),
}).start(() => { }).start(() => {
EditorPosition.setValue(Dimensions.get('window').width * 1.5); EditorPosition.setValue(Dimensions.get('window').width * 1.5);
}); });
timing(EditorTranslateY, { timing(EditorTranslateY, {
duration: 200, duration: 200,
toValue: Dimensions.get('window').height * 0.75, toValue: Dimensions.get('window').height * 0.75,
easing: Easing.inOut(Easing.ease), easing: Easing.inOut(Easing.ease),
}).start(); }).start();
} }
export const slideRight = { export const slideRight = {