mirror of
https://github.com/streetwriters/notesnook.git
synced 2025-12-23 23:19:40 +01:00
move topic dialog to dialog manager
This commit is contained in:
ammarahm-ed
@@ -1,12 +1,190 @@
|
|||||||
import React, {useState} from 'react';
|
import React from 'react';
|
||||||
import {Modal, Text, TouchableOpacity, View} from 'react-native';
|
import {Modal, Text, TouchableOpacity, View} from 'react-native';
|
||||||
import {TextInput} from 'react-native-gesture-handler';
|
import {TextInput} from 'react-native-gesture-handler';
|
||||||
import Icon from 'react-native-vector-icons/Feather';
|
import Icon from 'react-native-vector-icons/Feather';
|
||||||
import {db} from '../../../App';
|
|
||||||
import {opacity, ph, pv, SIZE, WEIGHT} from '../../common/common';
|
import {opacity, ph, pv, SIZE, WEIGHT} from '../../common/common';
|
||||||
import {useTracked} from '../../provider';
|
import {useTracked} from '../../provider';
|
||||||
import {getElevation, ToastEvent} from '../../utils/utils';
|
import {getElevation, ToastEvent} from '../../utils/utils';
|
||||||
|
|
||||||
|
export class AddTopicDialog extends React.Component {
|
||||||
|
constructor(props) {
|
||||||
|
super(props);
|
||||||
|
this.state = {
|
||||||
|
visible: false,
|
||||||
|
titleFocused: false,
|
||||||
|
};
|
||||||
|
|
||||||
|
this.title;
|
||||||
|
}
|
||||||
|
|
||||||
|
addNewTopic = async () => {
|
||||||
|
if (!this.title)
|
||||||
|
return ToastEvent.show('Title is required', 'error', 3000, () => {}, '');
|
||||||
|
|
||||||
|
//db.addTopicToNotebook(toEdit.dateCreated, title);
|
||||||
|
|
||||||
|
ToastEvent.show('New topic added', 'success', 3000, () => {}, '');
|
||||||
|
close(true);
|
||||||
|
};
|
||||||
|
|
||||||
|
open() {
|
||||||
|
this.setState({
|
||||||
|
visible: true,
|
||||||
|
});
|
||||||
|
}
|
||||||
|
close() {
|
||||||
|
this.title = null;
|
||||||
|
this.setState({
|
||||||
|
visible: false,
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
render() {
|
||||||
|
const {visible} = this.state;
|
||||||
|
const {colors, toEdit} = this.props;
|
||||||
|
|
||||||
|
return (
|
||||||
|
<Modal
|
||||||
|
visible={visible}
|
||||||
|
animated
|
||||||
|
animationType="fade"
|
||||||
|
transparent={true}
|
||||||
|
onRequestClose={() => (refs = [])}>
|
||||||
|
<View
|
||||||
|
style={{
|
||||||
|
width: '100%',
|
||||||
|
height: '100%',
|
||||||
|
backgroundColor: 'rgba(0,0,0,0.3)',
|
||||||
|
justifyContent: 'center',
|
||||||
|
alignItems: 'center',
|
||||||
|
}}>
|
||||||
|
<TouchableOpacity
|
||||||
|
onPress={() => close()}
|
||||||
|
style={{
|
||||||
|
width: '100%',
|
||||||
|
height: '100%',
|
||||||
|
position: 'absolute',
|
||||||
|
}}
|
||||||
|
/>
|
||||||
|
|
||||||
|
<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="book-open" 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>
|
||||||
|
|
||||||
|
<TextInput
|
||||||
|
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,
|
||||||
|
}}>
|
||||||
|
<TouchableOpacity
|
||||||
|
activeOpacity={opacity}
|
||||||
|
onPress={async () => await this.addNewTopic()}
|
||||||
|
style={{
|
||||||
|
paddingVertical: pv,
|
||||||
|
paddingHorizontal: ph,
|
||||||
|
borderRadius: 5,
|
||||||
|
width: '45%',
|
||||||
|
justifyContent: 'center',
|
||||||
|
alignItems: 'center',
|
||||||
|
borderColor: colors.accent,
|
||||||
|
backgroundColor: colors.accent,
|
||||||
|
borderWidth: 1,
|
||||||
|
}}>
|
||||||
|
<Text
|
||||||
|
style={{
|
||||||
|
fontFamily: WEIGHT.medium,
|
||||||
|
color: 'white',
|
||||||
|
fontSize: SIZE.sm,
|
||||||
|
}}>
|
||||||
|
Add
|
||||||
|
</Text>
|
||||||
|
</TouchableOpacity>
|
||||||
|
|
||||||
|
<TouchableOpacity
|
||||||
|
activeOpacity={opacity}
|
||||||
|
onPress={() => this.close()}
|
||||||
|
style={{
|
||||||
|
paddingVertical: pv,
|
||||||
|
paddingHorizontal: ph,
|
||||||
|
borderRadius: 5,
|
||||||
|
width: '45%',
|
||||||
|
justifyContent: 'center',
|
||||||
|
alignItems: 'center',
|
||||||
|
backgroundColor: colors.nav,
|
||||||
|
}}>
|
||||||
|
<Text
|
||||||
|
style={{
|
||||||
|
fontFamily: WEIGHT.medium,
|
||||||
|
color: colors.icon,
|
||||||
|
fontSize: SIZE.sm,
|
||||||
|
}}>
|
||||||
|
Cancel
|
||||||
|
</Text>
|
||||||
|
</TouchableOpacity>
|
||||||
|
</View>
|
||||||
|
</View>
|
||||||
|
</View>
|
||||||
|
</Modal>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
export const AddTopicDialog = ({
|
export const AddTopicDialog = ({
|
||||||
visible,
|
visible,
|
||||||
close = () => {},
|
close = () => {},
|
||||||
@@ -15,150 +193,4 @@ export const AddTopicDialog = ({
|
|||||||
}) => {
|
}) => {
|
||||||
const [state, dispatch] = useTracked();
|
const [state, dispatch] = useTracked();
|
||||||
const {colors} = state;
|
const {colors} = state;
|
||||||
const [titleFocused, setTitleFocused] = useState(false);
|
|
||||||
|
|
||||||
let title = null;
|
|
||||||
const addNewTopic = async () => {
|
|
||||||
if (!title)
|
|
||||||
return ToastEvent.show('Title is required', 'error', 3000, () => {}, '');
|
|
||||||
db.addTopicToNotebook(notebookID, title);
|
|
||||||
ToastEvent.show('New topic added', 'success', 3000, () => {}, '');
|
|
||||||
close(true);
|
|
||||||
};
|
|
||||||
|
|
||||||
return (
|
|
||||||
<Modal
|
|
||||||
visible={visible}
|
|
||||||
animated
|
|
||||||
animationType="fade"
|
|
||||||
transparent={true}
|
|
||||||
onRequestClose={() => (refs = [])}>
|
|
||||||
<View
|
|
||||||
style={{
|
|
||||||
width: '100%',
|
|
||||||
height: '100%',
|
|
||||||
backgroundColor: 'rgba(0,0,0,0.3)',
|
|
||||||
justifyContent: 'center',
|
|
||||||
alignItems: 'center',
|
|
||||||
}}>
|
|
||||||
<TouchableOpacity
|
|
||||||
onPress={() => close()}
|
|
||||||
style={{
|
|
||||||
width: '100%',
|
|
||||||
height: '100%',
|
|
||||||
position: 'absolute',
|
|
||||||
}}
|
|
||||||
/>
|
|
||||||
|
|
||||||
<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="book-open" 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>
|
|
||||||
|
|
||||||
<TextInput
|
|
||||||
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={() => {
|
|
||||||
setTitleFocused(true);
|
|
||||||
}}
|
|
||||||
onBlur={() => {
|
|
||||||
setTitleFocused(false);
|
|
||||||
}}
|
|
||||||
defaultValue={toEdit ? toEdit.title : null}
|
|
||||||
onChangeText={value => {
|
|
||||||
title = value;
|
|
||||||
}}
|
|
||||||
placeholder="Enter title of topic"
|
|
||||||
placeholderTextColor={colors.icon}
|
|
||||||
/>
|
|
||||||
|
|
||||||
<View
|
|
||||||
style={{
|
|
||||||
justifyContent: 'space-around',
|
|
||||||
alignItems: 'center',
|
|
||||||
flexDirection: 'row',
|
|
||||||
marginTop: 20,
|
|
||||||
}}>
|
|
||||||
<TouchableOpacity
|
|
||||||
activeOpacity={opacity}
|
|
||||||
onPress={async () => await addNewTopic()}
|
|
||||||
style={{
|
|
||||||
paddingVertical: pv,
|
|
||||||
paddingHorizontal: ph,
|
|
||||||
borderRadius: 5,
|
|
||||||
width: '45%',
|
|
||||||
justifyContent: 'center',
|
|
||||||
alignItems: 'center',
|
|
||||||
borderColor: colors.accent,
|
|
||||||
backgroundColor: colors.accent,
|
|
||||||
borderWidth: 1,
|
|
||||||
}}>
|
|
||||||
<Text
|
|
||||||
style={{
|
|
||||||
fontFamily: WEIGHT.medium,
|
|
||||||
color: 'white',
|
|
||||||
fontSize: SIZE.sm,
|
|
||||||
}}>
|
|
||||||
Add
|
|
||||||
</Text>
|
|
||||||
</TouchableOpacity>
|
|
||||||
|
|
||||||
<TouchableOpacity
|
|
||||||
activeOpacity={opacity}
|
|
||||||
onPress={() => close()}
|
|
||||||
style={{
|
|
||||||
paddingVertical: pv,
|
|
||||||
paddingHorizontal: ph,
|
|
||||||
borderRadius: 5,
|
|
||||||
width: '45%',
|
|
||||||
justifyContent: 'center',
|
|
||||||
alignItems: 'center',
|
|
||||||
backgroundColor: colors.nav,
|
|
||||||
}}>
|
|
||||||
<Text
|
|
||||||
style={{
|
|
||||||
fontFamily: WEIGHT.medium,
|
|
||||||
color: colors.icon,
|
|
||||||
fontSize: SIZE.sm,
|
|
||||||
}}>
|
|
||||||
Cancel
|
|
||||||
</Text>
|
|
||||||
</TouchableOpacity>
|
|
||||||
</View>
|
|
||||||
</View>
|
|
||||||
</View>
|
|
||||||
</Modal>
|
|
||||||
);
|
|
||||||
};
|
};
|
||||||
|
|||||||
Reference in New Issue
Block a user