refactor Dialogs

This commit is contained in:
ammarahm-ed
2020-09-27 13:14:24 +05:00
parent ddb9ac0d0e
commit f4091be263
4 changed files with 72 additions and 100 deletions

View File

@@ -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;

View File

@@ -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>

View File

@@ -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}>

View File

@@ -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}