mirror of
https://github.com/streetwriters/notesnook.git
synced 2025-12-24 07:29:30 +01:00
refactor Dialogs
This commit is contained in:
@@ -3,29 +3,44 @@ import {Text, View} from 'react-native';
|
||||
import Icon from 'react-native-vector-icons/MaterialCommunityIcons';
|
||||
import {useTracked} from '../../provider';
|
||||
|
||||
const DialogHeader = ({icon, title}) => {
|
||||
const DialogHeader = ({icon, title, paragraph}) => {
|
||||
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
|
||||
<>
|
||||
<View
|
||||
style={{
|
||||
color: colors.accent,
|
||||
fontFamily: WEIGHT.bold,
|
||||
marginLeft: 5,
|
||||
fontSize: SIZE.md,
|
||||
flexDirection: 'row',
|
||||
justifyContent: 'center',
|
||||
alignItems: 'center',
|
||||
}}>
|
||||
{title}
|
||||
</Text>
|
||||
</View>
|
||||
{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>
|
||||
{paragraph ? (
|
||||
<Text
|
||||
style={{
|
||||
color: colors.icon,
|
||||
fontFamily: WEIGHT.regular,
|
||||
fontSize: SIZE.xs + 1,
|
||||
textAlign: 'center',
|
||||
}}>
|
||||
{paragraph}
|
||||
</Text>
|
||||
) : null}
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
export default DialogHeader
|
||||
export default DialogHeader;
|
||||
|
||||
@@ -17,6 +17,8 @@ import {Button} from '../Button';
|
||||
import {dialogActions} from '../DialogManager/dialogActions';
|
||||
import {updateEvent} from '../DialogManager/recievers';
|
||||
import BaseDialog from './base-dialog';
|
||||
import DialogButtons from './dialog-buttons';
|
||||
import DialogHeader from './dialog-header';
|
||||
|
||||
export class Dialog extends Component {
|
||||
constructor(props) {
|
||||
@@ -218,56 +220,25 @@ export class Dialog extends Component {
|
||||
paddingHorizontal: ph,
|
||||
paddingVertical: pv,
|
||||
}}>
|
||||
<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.xs + 1,
|
||||
textAlign: 'center',
|
||||
}}>
|
||||
{this.state.selectedItemsLength > 0
|
||||
<DialogHeader
|
||||
title={title}
|
||||
icon={icon}
|
||||
paragraph={
|
||||
this.state.selectedItemsLength > 0
|
||||
? 'Delete ' +
|
||||
this.state.selectedItemsLength +
|
||||
' selected items?'
|
||||
: paragraph}
|
||||
</Text>
|
||||
) : null}
|
||||
: paragraph
|
||||
}
|
||||
/>
|
||||
|
||||
{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>
|
||||
<DialogButtons
|
||||
onPressNegative={this._onClose}
|
||||
onPressPositive={this._onPress}
|
||||
positiveTitle={positiveText}
|
||||
negativeTitle={negativeText}
|
||||
/>
|
||||
)}
|
||||
</View>
|
||||
</BaseDialog>
|
||||
|
||||
@@ -123,7 +123,15 @@ const ExportDialog = () => {
|
||||
},
|
||||
styles.container,
|
||||
]}>
|
||||
<DialogHeader icon="export" title="Export Note" />
|
||||
<DialogHeader
|
||||
icon="export"
|
||||
title="Export Note"
|
||||
paragraph={
|
||||
exporting
|
||||
? null
|
||||
: 'Export your note in any of the following formats.'
|
||||
}
|
||||
/>
|
||||
|
||||
<Seperator half />
|
||||
{exporting ? (
|
||||
@@ -146,16 +154,6 @@ const ExportDialog = () => {
|
||||
/>
|
||||
) : (
|
||||
<>
|
||||
<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}>
|
||||
|
||||
@@ -284,36 +284,24 @@ export class VaultDialog extends Component {
|
||||
: 'Unlock note'
|
||||
: 'Lock note'
|
||||
}
|
||||
paragraph={
|
||||
!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.'
|
||||
}
|
||||
icon="shield"
|
||||
/>
|
||||
|
||||
<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}
|
||||
|
||||
Reference in New Issue
Block a user