mirror of
https://github.com/streetwriters/notesnook.git
synced 2025-12-21 22:19:41 +01:00
add move note dialog
This commit is contained in:
ammarahm-ed
@@ -1,178 +1,415 @@
|
|||||||
import React, {createRef} from 'react';
|
import React, { createRef, useEffect, useState } from 'react';
|
||||||
import {Modal, TouchableOpacity, View, StatusBar} from 'react-native';
|
|
||||||
import * as Animatable from 'react-native-animatable';
|
|
||||||
import {ACTIONS} from '../../provider/actions';
|
|
||||||
import {eSendEvent} from '../../services/eventManager';
|
|
||||||
import {
|
import {
|
||||||
eMoveNoteDialogNavigateBack,
|
FlatList,
|
||||||
eSetModalNavigator,
|
Modal,
|
||||||
} from '../../services/events';
|
Text,
|
||||||
import {getElevation, DDS} from '../../utils/utils';
|
TextInput,
|
||||||
import Folders from '../../views/Folders';
|
TouchableOpacity,
|
||||||
import Notebook from '../../views/Notebook';
|
View
|
||||||
import Notes from '../../views/Notes';
|
} from 'react-native';
|
||||||
import {updateEvent} from '../DialogManager/recievers';
|
import { useSafeAreaInsets } from 'react-native-safe-area-context';
|
||||||
import {NavigationContainer} from '@react-navigation/native';
|
import Icon from 'react-native-vector-icons/MaterialCommunityIcons';
|
||||||
import {createStackNavigator} from '@react-navigation/stack';
|
import { pv, SIZE, WEIGHT } from '../../common/common';
|
||||||
import Container from '../Container';
|
import { useTracked } from '../../provider';
|
||||||
|
import { ACTIONS } from '../../provider/actions';
|
||||||
|
import { eSubscribeEvent, eUnSubscribeEvent } from '../../services/eventManager';
|
||||||
|
import { eOpenMoveNoteDialog } from '../../services/events';
|
||||||
|
import { db, DDS, getElevation, ToastEvent } from '../../utils/utils';
|
||||||
|
import { PressableButton } from '../PressableButton';
|
||||||
|
import { Toast } from '../Toast';
|
||||||
|
const MoveNoteDialog = () => {
|
||||||
|
const [state, dispatch] = useTracked();
|
||||||
|
const {notebooks, colors, selectedItemsList} = state;
|
||||||
|
const [visible, setVisible] = useState(true);
|
||||||
|
const [animated, setAnimated] = useState(false);
|
||||||
|
const [expanded, setExpanded] = useState('');
|
||||||
|
const [notebookInputFocused, setNotebookInputFocused] = useState(false);
|
||||||
|
const [topicInputFocused, setTopicInputFocused] = useState(false);
|
||||||
|
const insets = useSafeAreaInsets();
|
||||||
|
const notebookInput = createRef();
|
||||||
|
const topicInput = createRef();
|
||||||
|
let newNotebookTitle = null;
|
||||||
|
let newTopicTitle = null;
|
||||||
|
function open() {
|
||||||
|
setVisible(true);
|
||||||
|
}
|
||||||
|
|
||||||
|
const close = () => {
|
||||||
|
setVisible(false);
|
||||||
|
setAnimated(false);
|
||||||
|
};
|
||||||
|
|
||||||
|
useEffect(() => {
|
||||||
|
console.log(notebooks);
|
||||||
|
eSubscribeEvent(eOpenMoveNoteDialog, open);
|
||||||
|
return () => {
|
||||||
|
eUnSubscribeEvent(eOpenMoveNoteDialog, open);
|
||||||
|
};
|
||||||
|
}, []);
|
||||||
|
|
||||||
|
const addNewNotebook = async () => {
|
||||||
|
if (!newNotebookTitle || newNotebookTitle.trim().length === 0)
|
||||||
|
return ToastEvent.show('Title is required', 'error', 'local');
|
||||||
|
|
||||||
|
await db.notebooks.add({
|
||||||
|
title: newNotebookTitle,
|
||||||
|
description: 'this.description',
|
||||||
|
topics: [],
|
||||||
|
id: null,
|
||||||
|
});
|
||||||
|
dispatch({type: ACTIONS.NOTEBOOKS});
|
||||||
|
dispatch({type: ACTIONS.PINNED});
|
||||||
|
};
|
||||||
|
|
||||||
|
const addNewTopic = async () => {
|
||||||
|
if (!newTopicTitle || newTopicTitle.trim().length === 0)
|
||||||
|
return ToastEvent.show('Title is required', 'error', 'local');
|
||||||
|
await db.notebooks.notebook(expanded).topics.add(newTopicTitle);
|
||||||
|
};
|
||||||
|
|
||||||
const Stack = createStackNavigator();
|
|
||||||
const modalNavigatorRef = createRef();
|
|
||||||
const ModalNavigator = ({onStateChange}) => {
|
|
||||||
return (
|
return (
|
||||||
<NavigationContainer
|
<Modal
|
||||||
onStateChange={onStateChange}
|
animated={true}
|
||||||
independent={true}
|
animationType="slide"
|
||||||
ref={modalNavigatorRef}>
|
onRequestClose={close}
|
||||||
<Stack.Navigator
|
visible={visible}
|
||||||
initialRouteName="Folders"
|
statusBarTranslucent={true}
|
||||||
screenOptions={{
|
transparent={true}>
|
||||||
headerShown: false,
|
<View
|
||||||
animationEnabled: false,
|
style={{
|
||||||
gestureEnabled: false,
|
flex: 1,
|
||||||
cardOverlayEnabled: false,
|
paddingTop: insets.top,
|
||||||
cardShadowEnabled: false,
|
backgroundColor: DDS.isTab ? 'rgba(0,0,0,0.3)' : colors.bg,
|
||||||
|
width: '100%',
|
||||||
|
height: '100%',
|
||||||
|
alignSelf: 'center',
|
||||||
|
justifyContent: 'center',
|
||||||
|
alignItems: 'center',
|
||||||
}}>
|
}}>
|
||||||
<Stack.Screen
|
<TouchableOpacity
|
||||||
name="Folders"
|
onPress={close}
|
||||||
component={Folders}
|
style={{
|
||||||
initialParams={{
|
width: '100%',
|
||||||
title: 'Select a notebook',
|
height: '100%',
|
||||||
isMove: true,
|
position: 'absolute',
|
||||||
hideMore: true,
|
zIndex: 1,
|
||||||
canGoBack: true,
|
|
||||||
root: false,
|
|
||||||
}}
|
}}
|
||||||
/>
|
/>
|
||||||
<Stack.Screen
|
<Toast context="local" />
|
||||||
initialParams={{
|
|
||||||
root: false,
|
<View
|
||||||
}}
|
style={{
|
||||||
name="Notebook"
|
...getElevation(DDS.isTab ? 10 : 0),
|
||||||
component={Notebook}
|
width: DDS.isTab ? '65%' : '100%',
|
||||||
/>
|
height: DDS.isTab ? '90%' : '100%',
|
||||||
<Stack.Screen
|
flex: 1,
|
||||||
initialParams={{
|
borderRadius: DDS.isTab ? 5 : 0,
|
||||||
root: false,
|
backgroundColor: colors.bg,
|
||||||
}}
|
padding: DDS.isTab ? 8 : 0,
|
||||||
name="Notes"
|
zIndex: 10,
|
||||||
component={Notes}
|
}}>
|
||||||
/>
|
<View
|
||||||
</Stack.Navigator>
|
style={{
|
||||||
</NavigationContainer>
|
flexDirection: 'row',
|
||||||
|
justifyContent: 'center',
|
||||||
|
alignItems: 'center',
|
||||||
|
height: 50,
|
||||||
|
}}>
|
||||||
|
<Icon
|
||||||
|
name="close"
|
||||||
|
size={SIZE.xxl}
|
||||||
|
onPress={() => {
|
||||||
|
setVisible(false);
|
||||||
|
}}
|
||||||
|
style={{
|
||||||
|
width: 50,
|
||||||
|
height: 50,
|
||||||
|
marginLeft: 12,
|
||||||
|
position: 'absolute',
|
||||||
|
textAlignVertical: 'center',
|
||||||
|
left: 0,
|
||||||
|
marginBottom: 15,
|
||||||
|
}}
|
||||||
|
color={colors.heading}
|
||||||
|
/>
|
||||||
|
<Text
|
||||||
|
style={{
|
||||||
|
color: colors.accent,
|
||||||
|
fontFamily: WEIGHT.bold,
|
||||||
|
fontSize: SIZE.xl,
|
||||||
|
}}>
|
||||||
|
{selectedItemsList.length > 1
|
||||||
|
? 'Add notes to notebook'
|
||||||
|
: 'Add note to notebook'}
|
||||||
|
</Text>
|
||||||
|
</View>
|
||||||
|
|
||||||
|
<FlatList
|
||||||
|
data={state.notebooks}
|
||||||
|
ListHeaderComponent={
|
||||||
|
<View
|
||||||
|
style={{
|
||||||
|
paddingHorizontal: 12,
|
||||||
|
}}>
|
||||||
|
<View
|
||||||
|
style={{
|
||||||
|
flexDirection: 'row',
|
||||||
|
justifyContent: 'space-between',
|
||||||
|
alignItems: 'center',
|
||||||
|
paddingHorizontal: 0,
|
||||||
|
marginBottom: 10,
|
||||||
|
width: '100%',
|
||||||
|
borderBottomWidth: 1,
|
||||||
|
borderColor: notebookInputFocused
|
||||||
|
? colors.accent
|
||||||
|
: colors.nav,
|
||||||
|
}}>
|
||||||
|
<TextInput
|
||||||
|
ref={notebookInput}
|
||||||
|
onChangeText={(value) => {
|
||||||
|
newNotebookTitle = value;
|
||||||
|
}}
|
||||||
|
blurOnSubmit={false}
|
||||||
|
onFocus={() => {
|
||||||
|
setNotebookInputFocused(true);
|
||||||
|
}}
|
||||||
|
onBlur={() => {
|
||||||
|
setNotebookInputFocused(false);
|
||||||
|
}}
|
||||||
|
onSubmitEditing={addNewNotebook}
|
||||||
|
style={[
|
||||||
|
{
|
||||||
|
color: colors.pri,
|
||||||
|
width: '85%',
|
||||||
|
maxWidth: '85%',
|
||||||
|
paddingHorizontal: 0,
|
||||||
|
borderRadius: 5,
|
||||||
|
minHeight: 45,
|
||||||
|
fontSize: SIZE.md,
|
||||||
|
fontFamily: WEIGHT.regular,
|
||||||
|
padding: pv - 2,
|
||||||
|
},
|
||||||
|
]}
|
||||||
|
placeholder="Create a new notebook"
|
||||||
|
placeholderTextColor={colors.icon}
|
||||||
|
/>
|
||||||
|
<TouchableOpacity
|
||||||
|
onPress={addNewTopic}
|
||||||
|
style={[
|
||||||
|
{
|
||||||
|
borderRadius: 5,
|
||||||
|
width: '12%',
|
||||||
|
minHeight: 45,
|
||||||
|
justifyContent: 'center',
|
||||||
|
alignItems: 'center',
|
||||||
|
},
|
||||||
|
]}>
|
||||||
|
<Icon
|
||||||
|
name="plus"
|
||||||
|
size={SIZE.lg}
|
||||||
|
color={notebookInputFocused ? colors.accent : colors.nav}
|
||||||
|
/>
|
||||||
|
</TouchableOpacity>
|
||||||
|
</View>
|
||||||
|
</View>
|
||||||
|
}
|
||||||
|
renderItem={({item, index}) => (
|
||||||
|
<View>
|
||||||
|
<PressableButton
|
||||||
|
onPress={() => {
|
||||||
|
setExpanded(item.id === expanded ? null : item.id);
|
||||||
|
}}
|
||||||
|
color={expanded === item.id ? colors.shade : 'transparent'}
|
||||||
|
selectedColor={
|
||||||
|
expanded === item.id ? colors.accent : colors.nav
|
||||||
|
}
|
||||||
|
alpha={colors.night ? 0.02 : -0.02}
|
||||||
|
opacity={expanded === item.id ? 0.12 : 1}
|
||||||
|
customStyle={{
|
||||||
|
height: 50,
|
||||||
|
width: '100%',
|
||||||
|
borderRadius: 0,
|
||||||
|
alignItems: 'flex-start',
|
||||||
|
paddingHorizontal: 12,
|
||||||
|
marginBottom: 5,
|
||||||
|
}}>
|
||||||
|
<View
|
||||||
|
style={{
|
||||||
|
borderBottomWidth: 1,
|
||||||
|
width: '100%',
|
||||||
|
height: 50,
|
||||||
|
justifyContent: 'center',
|
||||||
|
borderBottomColor:
|
||||||
|
expanded === item.id ? 'transparent' : colors.nav,
|
||||||
|
}}>
|
||||||
|
<Text
|
||||||
|
style={{
|
||||||
|
fontFamily: WEIGHT.bold,
|
||||||
|
fontSize: SIZE.md,
|
||||||
|
}}>
|
||||||
|
{item.title}
|
||||||
|
{'\n'}
|
||||||
|
<Text
|
||||||
|
style={{
|
||||||
|
fontFamily: WEIGHT.regular,
|
||||||
|
fontSize: SIZE.xxs,
|
||||||
|
}}>
|
||||||
|
{item.totalNotes +
|
||||||
|
' notes' +
|
||||||
|
' & ' +
|
||||||
|
item.topics.length +
|
||||||
|
' topics'}
|
||||||
|
</Text>
|
||||||
|
</Text>
|
||||||
|
</View>
|
||||||
|
</PressableButton>
|
||||||
|
|
||||||
|
{expanded === item.id ? (
|
||||||
|
<FlatList
|
||||||
|
data={item.topics}
|
||||||
|
ListHeaderComponent={
|
||||||
|
<View
|
||||||
|
style={{
|
||||||
|
paddingRight: 12,
|
||||||
|
}}>
|
||||||
|
<View
|
||||||
|
style={{
|
||||||
|
flexDirection: 'row',
|
||||||
|
justifyContent: 'space-between',
|
||||||
|
alignItems: 'center',
|
||||||
|
width: '90%',
|
||||||
|
alignSelf: 'flex-end',
|
||||||
|
marginBottom: 5,
|
||||||
|
marginTop: 5,
|
||||||
|
borderBottomWidth: 1,
|
||||||
|
borderColor: topicInputFocused
|
||||||
|
? colors.accent
|
||||||
|
: colors.nav,
|
||||||
|
}}>
|
||||||
|
<TextInput
|
||||||
|
ref={topicInput}
|
||||||
|
onChangeText={(value) => {
|
||||||
|
newTopicTitle = value;
|
||||||
|
}}
|
||||||
|
blurOnSubmit={false}
|
||||||
|
onFocus={() => {
|
||||||
|
setTopicInputFocused(true);
|
||||||
|
}}
|
||||||
|
onBlur={() => {
|
||||||
|
setTopicInputFocused(false);
|
||||||
|
}}
|
||||||
|
onSubmitEditing={() => {}}
|
||||||
|
style={[
|
||||||
|
{
|
||||||
|
color: colors.pri,
|
||||||
|
width: '85%',
|
||||||
|
maxWidth: '85%',
|
||||||
|
paddingHorizontal: 0,
|
||||||
|
borderRadius: 5,
|
||||||
|
height: 40,
|
||||||
|
fontSize: SIZE.sm,
|
||||||
|
fontFamily: WEIGHT.regular,
|
||||||
|
padding: pv - 2,
|
||||||
|
},
|
||||||
|
]}
|
||||||
|
placeholder="Create a new topic"
|
||||||
|
placeholderTextColor={colors.icon}
|
||||||
|
/>
|
||||||
|
<TouchableOpacity
|
||||||
|
onPress={() => {}}
|
||||||
|
style={[
|
||||||
|
{
|
||||||
|
borderRadius: 5,
|
||||||
|
width: 40,
|
||||||
|
minHeight: 40,
|
||||||
|
justifyContent: 'center',
|
||||||
|
alignItems: 'center',
|
||||||
|
},
|
||||||
|
]}>
|
||||||
|
<Icon
|
||||||
|
name="plus"
|
||||||
|
size={SIZE.lg}
|
||||||
|
color={
|
||||||
|
topicInputFocused ? colors.accent : colors.nav
|
||||||
|
}
|
||||||
|
/>
|
||||||
|
</TouchableOpacity>
|
||||||
|
</View>
|
||||||
|
</View>
|
||||||
|
}
|
||||||
|
renderItem={({item, index}) => (
|
||||||
|
<PressableButton
|
||||||
|
onPress={async () => {
|
||||||
|
let noteIds = [];
|
||||||
|
selectedItemsList.forEach((item) =>
|
||||||
|
noteIds.push(item.id),
|
||||||
|
);
|
||||||
|
await db.notes.move(
|
||||||
|
{
|
||||||
|
topic: item.title,
|
||||||
|
id: item.notebookId,
|
||||||
|
},
|
||||||
|
...noteIds,
|
||||||
|
);
|
||||||
|
dispatch({type: ACTIONS.CLEAR_SELECTION});
|
||||||
|
close();
|
||||||
|
let notebookName = db.notebooks.notebook(
|
||||||
|
item.notebookId,
|
||||||
|
).title;
|
||||||
|
ToastEvent.show(
|
||||||
|
`Note moved to ${item.title} in ${notebookName}`,
|
||||||
|
'success',
|
||||||
|
);
|
||||||
|
}}
|
||||||
|
color="transparent"
|
||||||
|
selectedColor={colors.nav}
|
||||||
|
alpha={colors.night ? 0.02 : -0.02}
|
||||||
|
customStyle={{
|
||||||
|
height: 50,
|
||||||
|
borderTopWidth: index === 0 ? 0 : 1,
|
||||||
|
borderTopColor: colors.nav,
|
||||||
|
width: '87%',
|
||||||
|
alignSelf: 'flex-end',
|
||||||
|
borderRadius: 0,
|
||||||
|
alignItems: 'center',
|
||||||
|
marginRight: 12,
|
||||||
|
flexDirection: 'row',
|
||||||
|
justifyContent: 'space-between',
|
||||||
|
}}>
|
||||||
|
<Text
|
||||||
|
style={{
|
||||||
|
fontFamily: WEIGHT.regular,
|
||||||
|
fontSize: SIZE.sm,
|
||||||
|
}}>
|
||||||
|
{item.title}
|
||||||
|
{'\n'}
|
||||||
|
<Text
|
||||||
|
style={{
|
||||||
|
fontFamily: WEIGHT.regular,
|
||||||
|
fontSize: SIZE.xxs,
|
||||||
|
}}>
|
||||||
|
{item.totalNotes + ' notes'}
|
||||||
|
</Text>
|
||||||
|
</Text>
|
||||||
|
<Text
|
||||||
|
style={{
|
||||||
|
fontFamily: WEIGHT.regular,
|
||||||
|
fontSize: SIZE.sm,
|
||||||
|
color: colors.accent,
|
||||||
|
}}>
|
||||||
|
Move
|
||||||
|
</Text>
|
||||||
|
</PressableButton>
|
||||||
|
)}
|
||||||
|
/>
|
||||||
|
) : null}
|
||||||
|
</View>
|
||||||
|
)}
|
||||||
|
/>
|
||||||
|
</View>
|
||||||
|
</View>
|
||||||
|
</Modal>
|
||||||
);
|
);
|
||||||
};
|
};
|
||||||
|
|
||||||
class MoveNoteDialog extends React.Component {
|
|
||||||
constructor(props) {
|
|
||||||
super(props);
|
|
||||||
this.state = {
|
|
||||||
visible: false,
|
|
||||||
animated: false,
|
|
||||||
};
|
|
||||||
this.routeIndex = 0;
|
|
||||||
this.count = 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
open() {
|
|
||||||
this.setState({
|
|
||||||
visible: true,
|
|
||||||
});
|
|
||||||
}
|
|
||||||
|
|
||||||
close() {
|
|
||||||
updateEvent({type: ACTIONS.CLEAR_SELECTION});
|
|
||||||
updateEvent({type: ACTIONS.MODAL_NAVIGATOR, enabled: false});
|
|
||||||
this.setState({
|
|
||||||
visible: false,
|
|
||||||
animated: false,
|
|
||||||
});
|
|
||||||
}
|
|
||||||
|
|
||||||
render() {
|
|
||||||
const {visible, animated} = this.state;
|
|
||||||
const {colors} = this.props;
|
|
||||||
return (
|
|
||||||
<Modal
|
|
||||||
animated={true}
|
|
||||||
animationType="fade"
|
|
||||||
onShow={() => {
|
|
||||||
updateEvent({type: ACTIONS.MODAL_NAVIGATOR, enabled: true});
|
|
||||||
StatusBar.setBackgroundColor('white');
|
|
||||||
eSendEvent(eSetModalNavigator, true);
|
|
||||||
this.setState({
|
|
||||||
animated: true,
|
|
||||||
});
|
|
||||||
}}
|
|
||||||
onRequestClose={() => {
|
|
||||||
StatusBar.setBackgroundColor('transparent');
|
|
||||||
if (!this.routeIndex || this.routeIndex === 0) {
|
|
||||||
eSendEvent(eSetModalNavigator, false);
|
|
||||||
this.close();
|
|
||||||
} else {
|
|
||||||
eSendEvent(eMoveNoteDialogNavigateBack);
|
|
||||||
}
|
|
||||||
}}
|
|
||||||
visible={visible}
|
|
||||||
transparent={true}>
|
|
||||||
<Animatable.View
|
|
||||||
transition={['opacity', 'scaleX', 'scaleY']}
|
|
||||||
useNativeDriver={true}
|
|
||||||
duration={300}
|
|
||||||
iterationCount={1}
|
|
||||||
style={{
|
|
||||||
opacity: animated ? 1 : 0,
|
|
||||||
flex: 1,
|
|
||||||
backgroundColor: DDS.isTab ? 'rgba(0,0,0,0.3)' : colors.bg,
|
|
||||||
width: '100%',
|
|
||||||
height: '100%',
|
|
||||||
alignSelf: 'center',
|
|
||||||
justifyContent: 'center',
|
|
||||||
alignItems: 'center',
|
|
||||||
transform: [
|
|
||||||
{
|
|
||||||
scaleX: animated ? 1 : 0.95,
|
|
||||||
},
|
|
||||||
{
|
|
||||||
scaleY: animated ? 1 : 0.95,
|
|
||||||
},
|
|
||||||
],
|
|
||||||
}}>
|
|
||||||
<TouchableOpacity
|
|
||||||
onPress={() => this.close()}
|
|
||||||
style={{
|
|
||||||
width: '100%',
|
|
||||||
height: '100%',
|
|
||||||
position: 'absolute',
|
|
||||||
zIndex: 1,
|
|
||||||
}}
|
|
||||||
/>
|
|
||||||
|
|
||||||
<View
|
|
||||||
style={{
|
|
||||||
...getElevation(DDS.isTab ? 10 : 0),
|
|
||||||
width: DDS.isTab ? '65%' : '100%',
|
|
||||||
height: DDS.isTab ? '90%' : '100%',
|
|
||||||
flex: 1,
|
|
||||||
borderRadius: DDS.isTab ? 5 : 0,
|
|
||||||
backgroundColor: colors.bg,
|
|
||||||
padding: DDS.isTab ? 8 : 0,
|
|
||||||
zIndex: 10,
|
|
||||||
}}>
|
|
||||||
<Container
|
|
||||||
root={false}
|
|
||||||
>
|
|
||||||
<ModalNavigator
|
|
||||||
onStateChange={event => {
|
|
||||||
this.routeIndex = event.index;
|
|
||||||
}}
|
|
||||||
/>
|
|
||||||
</Container>
|
|
||||||
</View>
|
|
||||||
</Animatable.View>
|
|
||||||
</Modal>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
export default MoveNoteDialog;
|
export default MoveNoteDialog;
|
||||||
|
|||||||
Reference in New Issue
Block a user