1
0
mirror of https://github.com/laurent22/joplin.git synced 2024-12-12 08:54:00 +02:00
joplin/ReactNativeClient/lib/components/screens/note.js

331 lines
8.4 KiB
JavaScript
Raw Normal View History

2017-05-12 22:23:54 +02:00
import React, { Component } from 'react';
2017-07-15 01:12:32 +02:00
import { BackHandler, View, Button, TextInput, WebView, Text, StyleSheet } from 'react-native';
2017-05-12 22:23:54 +02:00
import { connect } from 'react-redux'
2017-06-24 20:06:28 +02:00
import { Log } from 'lib/log.js'
import { Note } from 'lib/models/note.js'
2017-07-13 23:50:21 +02:00
import { Folder } from 'lib/models/folder.js'
2017-07-15 01:12:32 +02:00
import { BaseModel } from 'lib/base-model.js'
2017-07-14 01:35:37 +02:00
import { ActionButton } from 'lib/components/action-button.js';
import Icon from 'react-native-vector-icons/Ionicons';
2017-06-24 20:06:28 +02:00
import { ScreenHeader } from 'lib/components/screen-header.js';
2017-07-15 19:08:54 +02:00
import { time } from 'lib/time-utils.js';
2017-06-24 20:06:28 +02:00
import { Checkbox } from 'lib/components/checkbox.js'
import { _ } from 'lib/locale.js';
2017-07-10 23:34:26 +02:00
import marked from 'lib/marked.js';
2017-07-14 20:49:14 +02:00
import { BaseScreenComponent } from 'lib/components/base-screen.js';
2017-07-15 01:12:32 +02:00
import { dialogs } from 'lib/dialogs.js';
import { NotesScreenUtils } from 'lib/components/screens/notes-utils.js'
import DialogBox from 'react-native-dialogbox';
2017-05-12 22:23:54 +02:00
2017-07-14 00:20:08 +02:00
const styles = StyleSheet.create({
webView: {
fontSize: 10,
},
});
2017-07-14 20:49:14 +02:00
class NoteScreenComponent extends BaseScreenComponent {
2017-05-12 22:23:54 +02:00
2017-06-06 22:01:43 +02:00
static navigationOptions(options) {
2017-05-16 21:57:09 +02:00
return { header: null };
}
2017-05-12 22:23:54 +02:00
constructor() {
super();
2017-07-10 23:34:26 +02:00
this.state = {
note: Note.new(),
mode: 'view',
noteMetadata: '',
showNoteMetadata: false,
2017-07-13 23:50:21 +02:00
folder: null,
2017-07-15 01:12:32 +02:00
lastSavedNote: null,
2017-07-10 23:34:26 +02:00
}
2017-07-15 01:12:32 +02:00
this.backHandler = () => {
if (!this.state.note.id) {
return false;
}
if (this.state.mode == 'edit') {
2017-07-15 20:21:39 +02:00
this.setState({
note: Object.assign({}, this.state.lastSavedNote),
mode: 'view',
});
2017-07-15 01:12:32 +02:00
return true;
}
return false;
};
}
isModified() {
if (!this.state.note || !this.state.lastSavedNote) return false;
let diff = BaseModel.diffObjects(this.state.note, this.state.lastSavedNote);
delete diff.type_;
return !!Object.getOwnPropertyNames(diff).length;
2017-05-12 22:23:54 +02:00
}
componentWillMount() {
2017-07-15 01:12:32 +02:00
BackHandler.addEventListener('hardwareBackPress', this.backHandler);
2017-05-22 22:22:50 +02:00
if (!this.props.noteId) {
2017-05-24 22:51:50 +02:00
let note = this.props.itemType == 'todo' ? Note.newTodo(this.props.folderId) : Note.new(this.props.folderId);
2017-07-15 01:12:32 +02:00
this.setState({
lastSavedNote: Object.assign({}, note),
note: note,
mode: 'edit',
});
this.refreshNoteMetadata();
2017-05-22 22:22:50 +02:00
} else {
Note.load(this.props.noteId).then((note) => {
2017-07-15 01:12:32 +02:00
this.setState({
lastSavedNote: Object.assign({}, note),
note: note,
});
this.refreshNoteMetadata();
2017-05-22 22:22:50 +02:00
});
}
2017-07-13 23:50:21 +02:00
this.refreshFolder();
}
2017-07-15 01:12:32 +02:00
componentWillUnmount() {
BackHandler.removeEventListener('hardwareBackPress', this.backHandler);
}
2017-07-13 23:50:21 +02:00
async currentFolder() {
let folderId = this.props.folderId;
if (!folderId) {
if (this.state.note && this.state.note.parent_id) folderId = this.state.note.parent_id;
}
if (!folderId) return Folder.defaultFolder();
return Folder.load(folderId);
}
async refreshFolder() {
this.setState({ folder: await this.currentFolder() });
2017-05-12 22:23:54 +02:00
}
2017-06-06 22:01:43 +02:00
noteComponent_change(propName, propValue) {
2017-05-12 22:23:54 +02:00
this.setState((prevState, props) => {
let note = Object.assign({}, prevState.note);
note[propName] = propValue;
return { note: note }
});
}
async refreshNoteMetadata(force = null) {
if (force !== true && !this.state.showNoteMetadata) return;
let noteMetadata = await Note.serializeAllProps(this.state.note);
this.setState({ noteMetadata: noteMetadata });
}
2017-06-06 22:01:43 +02:00
title_changeText(text) {
2017-05-12 22:23:54 +02:00
this.noteComponent_change('title', text);
}
2017-06-06 22:01:43 +02:00
body_changeText(text) {
2017-05-12 22:23:54 +02:00
this.noteComponent_change('body', text);
}
2017-07-05 23:29:00 +02:00
async saveNoteButton_press() {
2017-07-13 23:50:21 +02:00
let note = Object.assign({}, this.state.note);
2017-07-15 01:12:32 +02:00
if (!note.parent_id) {
2017-07-13 23:50:21 +02:00
let folder = await Folder.defaultFolder();
if (!folder) {
Log.warn('Cannot save note without a notebook');
return;
}
note.parent_id = folder.id;
}
let isNew = !note.id;
2017-07-15 01:12:32 +02:00
if (!note.title) note.title = _('Untitled');
2017-07-13 23:50:21 +02:00
note = await Note.save(note);
2017-07-15 01:12:32 +02:00
this.setState({
lastSavedNote: Object.assign({}, note),
note: note,
});
2017-07-05 23:29:00 +02:00
if (isNew) Note.updateGeolocation(note.id);
this.refreshNoteMetadata();
2017-05-12 22:23:54 +02:00
}
2017-07-15 01:12:32 +02:00
async deleteNote_onPress() {
let note = this.state.note;
if (!note.id) return;
let ok = await dialogs.confirm(this, _('Delete note?'));
if (!ok) return;
let folderId = note.parent_id;
await Note.delete(note.id);
await NotesScreenUtils.openNoteList(folderId);
2017-06-04 17:01:52 +02:00
}
2017-07-15 01:12:32 +02:00
attachFile_onPress() {
}
showMetadata_onPress() {
this.setState({ showNoteMetadata: !this.state.showNoteMetadata });
this.refreshNoteMetadata(true);
2017-06-04 17:01:52 +02:00
}
2017-06-06 22:01:43 +02:00
menuOptions() {
2017-06-04 17:01:52 +02:00
return [
2017-07-15 01:12:32 +02:00
{ title: _('Attach file'), onPress: () => { this.attachFile_onPress(); } },
{ title: _('Delete note'), onPress: () => { this.deleteNote_onPress(); } },
{ title: _('Toggle metadata'), onPress: () => { this.showMetadata_onPress(); } },
2017-06-04 17:01:52 +02:00
];
}
2017-07-15 19:08:54 +02:00
async todoCheckbox_change(checked) {
let note = Object.assign({}, this.state.note);
const todoCompleted = checked ? time.unixMs() : 0;
if (note.id) {
note = await Note.save({ id: note.id, todo_completed: todoCompleted });
this.setState({
lastSavedNote: Object.assign({}, note),
note: note,
});
} else {
note.todo_completed = todoCompleted;
this.setState({ note: note });
}
2017-07-15 01:12:32 +02:00
}
2017-05-12 22:23:54 +02:00
render() {
2017-05-24 22:51:50 +02:00
const note = this.state.note;
const isTodo = !!Number(note.is_todo);
2017-07-13 23:50:21 +02:00
const folder = this.state.folder;
2017-05-24 22:51:50 +02:00
2017-07-10 23:34:26 +02:00
let bodyComponent = null;
if (this.state.mode == 'view') {
2017-07-14 00:20:08 +02:00
// https://necolas.github.io/normalize.css/
const normalizeCss = `
html{line-height:1.15;-ms-text-size-adjust:100%;-webkit-text-size-adjust:100%}body{margin:0}
article,aside,footer,header,nav,section{display:block}h1{font-size:2em;margin:.67em 0}hr{box-sizing:content-box;height:0;overflow:visible}
pre{font-family:monospace,monospace;font-size:1em}a{background-color:transparent;-webkit-text-decoration-skip:objects}
b,strong{font-weight:bolder}small{font-size:80%}img{border-style:none}
`;
const css = `
body {
font-size: 14px;
margin: 1em;
}
h1 {
font-size: 1.2em;
font-weight: bold;
}
h2 {
font-size: 1em;
font-weight: bold;
}
li {
}
ul {
padding-left: 1em;
}
.checkbox {
font-size: 1.4em;
position: relative;
top: 0.1em;
}
`;
let body = note.body;
body = body.replace(/- \[ \]/g, '☐');
body = body.replace(/- \[X\]/g, '☑');
2017-07-10 23:34:26 +02:00
const source = {
2017-07-14 00:20:08 +02:00
html: note ? '<style>' + normalizeCss + "\n" + css + '</style>' + marked(body, { gfm: true, breaks: true }) : '',
2017-07-10 23:34:26 +02:00
};
2017-07-14 00:20:08 +02:00
source.html = source.html.replace(/☐/g, '<span class="checkbox">☐</span>')
source.html = source.html.replace(/☑/g, '<span class="checkbox">☑</span>')
2017-07-10 23:34:26 +02:00
bodyComponent = (
<View style={{flex:1}}>
<WebView source={source}/>
</View>
);
} else {
2017-07-15 01:12:32 +02:00
bodyComponent = (
<TextInput
autoFocus={true}
style={{flex: 1, textAlignVertical: 'top', fontFamily: 'monospace'}}
multiline={true}
value={note.body}
onChangeText={(text) => this.body_changeText(text)}
/>
);
2017-07-10 23:34:26 +02:00
}
let headerTitle = ''
if (folder) headerTitle = folder.title;
2017-07-14 01:35:37 +02:00
const renderActionButton = () => {
let buttons = [];
buttons.push({
title: _('Edit'),
icon: 'md-create',
onPress: () => {
this.setState({ mode: 'edit' });
},
});
if (this.state.mode == 'edit') return <ActionButton style={{display:'none'}}/>;
2017-07-15 01:12:32 +02:00
return <ActionButton multiStates={true} buttons={buttons} buttonIndex={0} />
2017-07-14 01:35:37 +02:00
}
const actionButtonComp = renderActionButton();
let showSaveButton = this.state.mode == 'edit';
let saveButtonDisabled = !this.isModified();
2017-05-12 22:23:54 +02:00
return (
2017-07-14 20:49:14 +02:00
<View style={this.styles().screen}>
<ScreenHeader
title={headerTitle}
navState={this.props.navigation.state}
menuOptions={this.menuOptions()}
showSaveButton={showSaveButton}
saveButtonDisabled={saveButtonDisabled}
onSaveButtonPress={() => this.saveNoteButton_press()}
/>
2017-05-24 22:51:50 +02:00
<View style={{ flexDirection: 'row' }}>
2017-07-15 01:12:32 +02:00
{ isTodo && <Checkbox checked={!!Number(note.todo_completed)} onChange={(checked) => { this.todoCheckbox_change(checked) }} /> }<TextInput style={{flex:1}} value={note.title} onChangeText={(text) => this.title_changeText(text)} />
2017-05-24 22:51:50 +02:00
</View>
{ bodyComponent }
2017-07-14 01:35:37 +02:00
{ actionButtonComp }
{ this.state.showNoteMetadata && <Text>{this.state.noteMetadata}</Text> }
2017-07-15 01:12:32 +02:00
<DialogBox ref={dialogbox => { this.dialogbox = dialogbox }}/>
2017-05-12 22:23:54 +02:00
</View>
);
}
}
const NoteScreen = connect(
(state) => {
return {
2017-05-22 22:22:50 +02:00
noteId: state.selectedNoteId,
folderId: state.selectedFolderId,
2017-05-24 22:51:50 +02:00
itemType: state.selectedItemType,
2017-05-12 22:23:54 +02:00
};
}
)(NoteScreenComponent)
export { NoteScreen };