Mirrors/notesnook
1
0
Fork 0
mirror of https://github.com/streetwriters/notesnook.git synced 2025-12-22 22:49:45 +01:00
Code Issues Packages Projects Releases Wiki Activity

convert notebook dialog to action sheet

Browse Source
This commit is contained in:
ammarahm-ed
2021-07-20 14:27:18 +05:00
parent e37786c938
commit 48da7e417a
1 changed files with 74 additions and 76 deletions
Download Patch File Download Diff File Expand all files Collapse all files

150
apps/mobile/src/components/AddNotebookDialog/index.js
View File

@@ -10,14 +10,14 @@ import {db} from '../../utils/DB';
import {ph, pv, SIZE} from '../../utils/SizeUtils'; import {ph, pv, SIZE} from '../../utils/SizeUtils';
import {sleep} from '../../utils/TimeUtils'; import {sleep} from '../../utils/TimeUtils';
import {ActionIcon} from '../ActionIcon'; import {ActionIcon} from '../ActionIcon';
import ActionSheetWrapper from '../ActionSheetComponent/ActionSheetWrapper';
import {Button} from '../Button';
import BaseDialog from '../Dialog/base-dialog'; import BaseDialog from '../Dialog/base-dialog';
import DialogButtons from '../Dialog/dialog-buttons'; import DialogButtons from '../Dialog/dialog-buttons';
import DialogHeader from '../Dialog/dialog-header'; import DialogHeader from '../Dialog/dialog-header';
import Input from '../Input'; import Input from '../Input';
import {Placeholder} from '../ListPlaceholders'; import Seperator from '../Seperator';
import {Toast} from '../Toast'; import {Toast} from '../Toast';
import Heading from '../Typography/Heading';
import Paragraph from '../Typography/Paragraph';
let refs = []; let refs = [];
@@ -33,7 +33,7 @@ export class AddNotebookDialog extends React.Component {
count: 0, count: 0,
topicInputFocused: false, topicInputFocused: false,
editTopic: false, editTopic: false,
loading: false, loading: false
}; };
this.title = null; this.title = null;
this.description = null; this.description = null;
@@ -50,6 +50,7 @@ export class AddNotebookDialog extends React.Component {
this.hiddenInput = createRef(); this.hiddenInput = createRef();
this.topicInputRef = createRef(); this.topicInputRef = createRef();
this.addingTopic = false; this.addingTopic = false;
this.actionSheetRef = createRef();
} }
open = () => { open = () => {
@@ -69,16 +70,20 @@ export class AddNotebookDialog extends React.Component {
this.setState({ this.setState({
topics: [...topicsList], topics: [...topicsList],
visible: true, visible: true
}); });
} else { } else {
this.setState({ this.setState({
visible: true, visible: true
}); });
} }
sleep(100).then(r => {
this.actionSheetRef.current?.show();
});
}; };
close = () => { close = () => {
this.actionSheetRef.current?.hide();
refs = []; refs = [];
this.prevIndex = null; this.prevIndex = null;
this.prevItem = null; this.prevItem = null;
@@ -92,7 +97,7 @@ export class AddNotebookDialog extends React.Component {
topics: [], topics: [],
descFocused: false, descFocused: false,
titleFocused: false, titleFocused: false,
editTopic: false, editTopic: false
}); });
}; };
@@ -115,17 +120,17 @@ export class AddNotebookDialog extends React.Component {
this.prevItem = null; this.prevItem = null;
this.currentInputValue = null; this.currentInputValue = null;
this.topicInputRef.current?.setNativeProps({ this.topicInputRef.current?.setNativeProps({
text: null, text: null
}); });
} }
this.setState({ this.setState({
topics: nextTopics, topics: nextTopics
}); });
}; };
addNewNotebook = async () => { addNewNotebook = async () => {
this.setState({ this.setState({
loading: true, loading: true
}); });
let {topics} = this.state; let {topics} = this.state;
let edit = this.props.toEdit; let edit = this.props.toEdit;
@@ -134,10 +139,10 @@ export class AddNotebookDialog extends React.Component {
ToastEvent.show({ ToastEvent.show({
heading: 'Notebook title is required', heading: 'Notebook title is required',
type: 'error', type: 'error',
context: 'local', context: 'local'
}); });
this.setState({ this.setState({
loading: false, loading: false
}); });
return; return;
} }
@@ -170,7 +175,7 @@ export class AddNotebookDialog extends React.Component {
await db.notebooks.add({ await db.notebooks.add({
title: this.title, title: this.title,
description: this.description, description: this.description,
id: id, id: id
}); });
let nextTopics = toEdit.topics.map((topic, index) => { let nextTopics = toEdit.topics.map((topic, index) => {
@@ -192,17 +197,17 @@ export class AddNotebookDialog extends React.Component {
title: this.title, title: this.title,
description: this.description, description: this.description,
topics: prevTopics, topics: prevTopics,
id: id, id: id
}); });
} }
useMenuStore.getState().setMenuPins(); useMenuStore.getState().setMenuPins();
Navigation.setRoutesToUpdate([ Navigation.setRoutesToUpdate([
Navigation.routeNames.Notebooks, Navigation.routeNames.Notebooks,
Navigation.routeNames.Notebook, Navigation.routeNames.Notebook,
Navigation.routeNames.NotesPage, Navigation.routeNames.NotesPage
]); ]);
this.setState({ this.setState({
loading: false, loading: false
}); });
this.close(); this.close();
}; };
@@ -218,7 +223,7 @@ export class AddNotebookDialog extends React.Component {
if (this.prevItem === null) { if (this.prevItem === null) {
prevTopics.push(this.currentInputValue); prevTopics.push(this.currentInputValue);
this.setState({ this.setState({
topics: prevTopics, topics: prevTopics
}); });
setTimeout(() => { setTimeout(() => {
this.listRef.scrollToEnd({animated: true}); this.listRef.scrollToEnd({animated: true});
@@ -227,7 +232,7 @@ export class AddNotebookDialog extends React.Component {
} else { } else {
prevTopics[this.prevIndex] = this.currentInputValue; prevTopics[this.prevIndex] = this.currentInputValue;
this.setState({ this.setState({
topics: prevTopics, topics: prevTopics
}); });
this.currentInputValue = null; this.currentInputValue = null;
@@ -235,7 +240,7 @@ export class AddNotebookDialog extends React.Component {
this.topicInputRef.current?.blur(); this.topicInputRef.current?.blur();
Keyboard.dismiss(); Keyboard.dismiss();
this.setState({ this.setState({
editTopic: false, editTopic: false
}); });
willFocus = false; willFocus = false;
} }
@@ -250,7 +255,7 @@ export class AddNotebookDialog extends React.Component {
} }
} }
this.topicInputRef.current?.setNativeProps({ this.topicInputRef.current?.setNativeProps({
text: '', text: ''
}); });
willFocus && this.topicInputRef.current?.focus(); willFocus && this.topicInputRef.current?.focus();
}; };
@@ -260,12 +265,20 @@ export class AddNotebookDialog extends React.Component {
const {topics, visible, topicInputFocused} = this.state; const {topics, visible, topicInputFocused} = this.state;
if (!visible) return null; if (!visible) return null;
return ( return (
<BaseDialog <ActionSheetWrapper
onShow={async () => { onOpen={async () => {
this.topicsToDelete = []; this.topicsToDelete = [];
await sleep(300); await sleep(300);
this.props.toEdit?.type !== 'notebook' && this.titleRef?.focus(); this.props.toEdit?.type !== 'notebook' && this.titleRef?.focus();
}} }}
fwdRef={this.actionSheetRef}
onClose={() => {
this.close();
this.setState({
visible: false
});
}}
animation="fade"
centered={false} centered={false}
statusBarTranslucent={false} statusBarTranslucent={false}
onRequestClose={this.close}> onRequestClose={this.close}>
@@ -275,7 +288,7 @@ export class AddNotebookDialog extends React.Component {
width: 1, width: 1,
height: 1, height: 1,
opacity: 0, opacity: 0,
position: 'absolute', position: 'absolute'
}} }}
blurOnSubmit={false} blurOnSubmit={false}
/> />
@@ -285,8 +298,10 @@ export class AddNotebookDialog extends React.Component {
styles.container, styles.container,
{ {
backgroundColor: colors.bg, backgroundColor: colors.bg,
paddingTop: 5, height: null,
}, borderTopRightRadius: 10,
borderTopLeftRadius: 10
}
]}> ]}>
<DialogHeader <DialogHeader
title={ title={
@@ -298,6 +313,7 @@ export class AddNotebookDialog extends React.Component {
: 'Notebooks are the best way to organize your notes.' : 'Notebooks are the best way to organize your notes.'
} }
/> />
<Seperator half />
<Input <Input
fwdRef={ref => (this.titleRef = ref)} fwdRef={ref => (this.titleRef = ref)}
@@ -338,8 +354,8 @@ export class AddNotebookDialog extends React.Component {
refs[this.prevIndex].setNativeProps({ refs[this.prevIndex].setNativeProps({
text: value, text: value,
style: { style: {
borderBottomColor: colors.accent, borderBottomColor: colors.accent
}, }
}); });
} }
}} }}
@@ -352,7 +368,7 @@ export class AddNotebookDialog extends React.Component {
button={{ button={{
icon: this.state.editTopic ? 'check' : 'plus', icon: this.state.editTopic ? 'check' : 'plus',
onPress: this.onSubmit, onPress: this.onSubmit,
color: topicInputFocused ? colors.accent : colors.icon, color: topicInputFocused ? colors.accent : colors.icon
}} }}
placeholder="Add a topic" placeholder="Add a topic"
/> />
@@ -361,26 +377,6 @@ export class AddNotebookDialog extends React.Component {
data={topics} data={topics}
ref={ref => (this.listRef = ref)} ref={ref => (this.listRef = ref)}
keyExtractor={(item, index) => item + index.toString()} keyExtractor={(item, index) => item + index.toString()}
ListEmptyComponent={
<View
style={{
height: 500,
justifyContent: 'center',
alignItems: 'center',
}}>
<Placeholder type="topics" w={150} h={150} />
<Heading>Topics</Heading>
<Paragraph
textBreakStrategy="balanced"
style={{
textAlign: 'center',
width: '80%',
}}
color={colors.icon}>
You have not added any topics yet.
</Paragraph>
</View>
}
renderItem={({item, index}) => ( renderItem={({item, index}) => (
<TopicItem <TopicItem
item={item} item={item}
@@ -388,12 +384,12 @@ export class AddNotebookDialog extends React.Component {
this.prevIndex = index; this.prevIndex = index;
this.prevItem = item; this.prevItem = item;
this.topicInputRef.current?.setNativeProps({ this.topicInputRef.current?.setNativeProps({
text: item, text: item
}); });
this.topicInputRef.current?.focus(); this.topicInputRef.current?.focus();
this.currentInputValue = item; this.currentInputValue = item;
this.setState({ this.setState({
editTopic: true, editTopic: true
}); });
}} }}
onDelete={this.onDelete} onDelete={this.onDelete}
@@ -402,18 +398,21 @@ export class AddNotebookDialog extends React.Component {
/> />
)} )}
/> />
<Seperator />
<DialogButtons <Button
negativeTitle="Cancel" width="100%"
positiveTitle={toEdit && toEdit.dateCreated ? 'Save' : 'Add'} height={50}
onPressPositive={this.addNewNotebook} fontSize={SIZE.md}
onPressNegative={this.close} title={
loading={this.state.loading} toEdit && toEdit.dateCreated ? 'Save changes' : 'Create notebook'
}
type="accent"
onPress={this.addNewNotebook}
/> />
</View> </View>
<Toast context="local" /> <Toast context="local" />
</BaseDialog> </ActionSheetWrapper>
); );
} }
} }
@@ -429,7 +428,7 @@ const TopicItem = ({item, index, colors, onPress, onDelete}) => {
alignItems: 'center', alignItems: 'center',
backgroundColor: colors.nav, backgroundColor: colors.nav,
borderRadius: 5, borderRadius: 5,
marginVertical: 5, marginVertical: 5
}}> }}>
<TouchableOpacity <TouchableOpacity
style={{ style={{
@@ -437,7 +436,7 @@ const TopicItem = ({item, index, colors, onPress, onDelete}) => {
backgroundColor: 'transparent', backgroundColor: 'transparent',
zIndex: 10, zIndex: 10,
position: 'absolute', position: 'absolute',
height: 30, height: 30
}} }}
onPress={() => { onPress={() => {
onPress(item, index); onPress(item, index);
@@ -449,8 +448,8 @@ const TopicItem = ({item, index, colors, onPress, onDelete}) => {
style={[ style={[
styles.topicInput, styles.topicInput,
{ {
color: colors.pri, color: colors.pri
}, }
]} ]}
defaultValue={item} defaultValue={item}
placeholderTextColor={colors.icon} placeholderTextColor={colors.icon}
@@ -463,7 +462,7 @@ const TopicItem = ({item, index, colors, onPress, onDelete}) => {
right: 0, right: 0,
alignItems: 'center', alignItems: 'center',
flexDirection: 'row', flexDirection: 'row',
justifyContent: 'flex-end', justifyContent: 'flex-end'
}}> }}>
<ActionIcon <ActionIcon
onPress={() => { onPress={() => {
@@ -492,29 +491,28 @@ const styles = StyleSheet.create({
height: '100%', height: '100%',
backgroundColor: 'rgba(0,0,0,0.3)', backgroundColor: 'rgba(0,0,0,0.3)',
justifyContent: 'center', justifyContent: 'center',
alignItems: 'center', alignItems: 'center'
}, },
container: { container: {
width: DDS.isTab ? 500 : '100%', width: DDS.isTab ? 500 : '100%',
height: DDS.isTab ? 600 : '100%', height: DDS.isTab ? 600 : '100%',
maxHeight: DDS.isTab ? 600 : '100%', maxHeight: DDS.isTab ? 600 : '100%',
borderRadius: DDS.isTab ? 5 : 0, borderRadius: DDS.isTab ? 5 : 0,
paddingHorizontal: 12, paddingHorizontal: 12
paddingVertical: pv,
}, },
overlay: { overlay: {
width: '100%', width: '100%',
height: '100%', height: '100%',
position: 'absolute', position: 'absolute'
}, },
headingContainer: { headingContainer: {
flexDirection: 'row', flexDirection: 'row',
justifyContent: 'center', justifyContent: 'center',
alignItems: 'center', alignItems: 'center'
}, },
headingText: { headingText: {
marginLeft: 5, marginLeft: 5,
fontSize: SIZE.xl, fontSize: SIZE.xl
}, },
input: { input: {
paddingRight: 12, paddingRight: 12,
@@ -525,7 +523,7 @@ const styles = StyleSheet.create({
padding: pv - 2, padding: pv - 2,
borderBottomWidth: 1, borderBottomWidth: 1,
marginTop: 10, marginTop: 10,
marginBottom: 5, marginBottom: 5
}, },
addBtn: { addBtn: {
width: '12%', width: '12%',
@@ -533,21 +531,21 @@ const styles = StyleSheet.create({
justifyContent: 'center', justifyContent: 'center',
alignItems: 'center', alignItems: 'center',
position: 'absolute', position: 'absolute',
right: 0, right: 0
}, },
buttonContainer: { buttonContainer: {
justifyContent: 'space-between', justifyContent: 'space-between',
alignItems: 'center', alignItems: 'center',
flexDirection: 'row', flexDirection: 'row',
width: '100%', width: '100%',
marginTop: 20, marginTop: 20
}, },
topicContainer: { topicContainer: {
flexDirection: 'row', flexDirection: 'row',
justifyContent: 'space-between', justifyContent: 'space-between',
alignItems: 'center', alignItems: 'center',
marginTop: 10, marginTop: 10
}, },
topicInput: { topicInput: {
padding: pv - 5, padding: pv - 5,
@@ -557,7 +555,7 @@ const styles = StyleSheet.create({
paddingRight: 40, paddingRight: 40,
paddingVertical: 10, paddingVertical: 10,
width: '100%', width: '100%',
maxWidth: '100%', maxWidth: '100%'
}, },
topicBtn: { topicBtn: {
borderRadius: 5, borderRadius: 5,
@@ -566,6 +564,6 @@ const styles = StyleSheet.create({
justifyContent: 'center', justifyContent: 'center',
alignItems: 'center', alignItems: 'center',
position: 'absolute', position: 'absolute',
right: 0, right: 0
}, }
}); });