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

779 lines
24 KiB
JavaScript
Raw Normal View History

const React = require('react'); const Component = React.Component;
const { Platform, Clipboard, Keyboard, BackHandler, View, Button, TextInput, WebView, Text, StyleSheet, Linking, Image, Share } = require('react-native');
const { connect } = require('react-redux');
const { uuid } = require('lib/uuid.js');
const RNFS = require('react-native-fs');
const Note = require('lib/models/Note.js');
const BaseItem = require('lib/models/BaseItem.js');
const Setting = require('lib/models/Setting.js');
const Resource = require('lib/models/Resource.js');
const Folder = require('lib/models/Folder.js');
const { BackButtonService } = require('lib/services/back-button.js');
const NavService = require('lib/services/NavService.js');
const BaseModel = require('lib/BaseModel.js');
const { ActionButton } = require('lib/components/action-button.js');
const Icon = require('react-native-vector-icons/Ionicons').default;
const { fileExtension, basename, safeFileExtension } = require('lib/path-utils.js');
const mimeUtils = require('lib/mime-utils.js').mime;
const { ScreenHeader } = require('lib/components/screen-header.js');
2018-03-18 01:00:01 +02:00
const NoteTagsDialog = require('lib/components/screens/NoteTagsDialog');
const { time } = require('lib/time-utils.js');
const { Checkbox } = require('lib/components/checkbox.js');
const { _ } = require('lib/locale.js');
const { reg } = require('lib/registry.js');
const { shim } = require('lib/shim.js');
const ResourceFetcher = require('lib/services/ResourceFetcher');
const { BaseScreenComponent } = require('lib/components/base-screen.js');
const { globalStyle, themeStyle } = require('lib/components/global-style.js');
const { dialogs } = require('lib/dialogs.js');
const DialogBox = require('react-native-dialogbox').default;
const { NoteBodyViewer } = require('lib/components/note-body-viewer.js');
const RNFetchBlob = require('rn-fetch-blob').default;
const { DocumentPicker, DocumentPickerUtil } = require('react-native-document-picker');
const ImageResizer = require('react-native-image-resizer').default;
const shared = require('lib/components/shared/note-screen-shared.js');
const ImagePicker = require('react-native-image-picker');
const AlarmService = require('lib/services/AlarmService.js');
const { SelectDateTimeDialog } = require('lib/components/select-date-time-dialog.js');
const ShareExtension = require('react-native-share-extension').default;
2018-10-13 11:32:44 +02:00
const CameraView = require('lib/components/CameraView');
const SearchEngine = require('lib/services/SearchEngine');
2017-05-12 22:23:54 +02:00
import FileViewer from 'react-native-file-viewer';
2017-07-14 20:49:14 +02:00
class NoteScreenComponent extends BaseScreenComponent {
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-24 23:52:30 +02:00
isLoading: true,
titleTextInputHeight: 20,
2017-09-10 18:56:27 +02:00
alarmDialogShown: false,
2018-03-18 01:00:01 +02:00
heightBumpView:0,
noteTagDialogShown: false,
fromShare: false,
2018-10-13 11:32:44 +02:00
showCamera: false,
// HACK: For reasons I can't explain, when the WebView is present, the TextInput initially does not display (It's just a white rectangle with
// no visible text). It will only appear when tapping it or doing certain action like selecting text on the webview. The bug started to
// appear one day and did not go away - reverting to an old RN version did not help, undoing all
// the commits till a working version did not help. The bug also does not happen in the simulator which makes it hard to fix.
// Eventually, a way that "worked" is to add a 1px margin on top of the text input just after the webview has loaded, then removing this
// margin. This forces RN to update the text input and to display it. Maybe that hack can be removed once RN is upgraded.
// See https://github.com/laurent22/joplin/issues/1057
HACK_webviewLoadingState: 0,
2017-07-16 23:17:22 +02:00
};
2017-11-19 17:19:36 +02:00
// iOS doesn't support multiline text fields properly so disable it
this.enableMultilineTitle_ = Platform.OS !== 'ios';
2017-12-19 22:14:40 +02:00
2017-07-16 23:17:22 +02:00
this.saveButtonHasBeenShown_ = false;
2017-07-15 01:12:32 +02:00
2017-08-01 20:53:50 +02:00
this.styles_ = {};
const saveDialog = async () => {
if (this.isModified()) {
let buttonId = await dialogs.pop(this, _('This note has been modified:'), [
{ text: _('Save changes'), id: 'save' },
{ text: _('Discard changes'), id: 'discard' },
{ text: _('Cancel'), id: 'cancel' },
]);
if (buttonId == 'cancel') return true;
if (buttonId == 'save') await this.saveNoteButton_press();
}
return false;
}
this.navHandler = async () => {
return await saveDialog();
}
this.backHandler = async () => {
const r = await saveDialog();
if (r) return r;
if (!this.state.note.id) {
return false;
}
if (this.state.mode == 'edit') {
Keyboard.dismiss()
this.setState({
note: Object.assign({}, this.state.lastSavedNote),
mode: 'view',
});
return true;
}
return false;
};
2018-03-18 01:00:01 +02:00
this.noteTagDialog_closeRequested = () => {
this.setState({ noteTagDialogShown: false });
}
this.onJoplinLinkClick_ = async (msg) => {
try {
if (msg.indexOf('joplin://') === 0) {
const itemId = msg.substr('joplin://'.length);
const item = await BaseItem.loadItemById(itemId);
if (!item) throw new Error(_('No item with ID %s', itemId));
if (item.type_ === BaseModel.TYPE_NOTE) {
// Easier to just go back, then go to the note since
// the Note screen doesn't handle reloading a different note
this.props.dispatch({
type: 'NAV_BACK',
});
setTimeout(() => {
this.props.dispatch({
type: 'NAV_GO',
routeName: 'Note',
noteId: item.id,
});
}, 5);
} else if (item.type_ === BaseModel.TYPE_RESOURCE) {
if (!(await Resource.isReady(item))) throw new Error(_('This attachment is not downloaded or not decrypted yet.'));
const resourcePath = Resource.fullPath(item);
await FileViewer.open(resourcePath);
} else {
throw new Error(_('The Joplin mobile app does not currently support this type of link: %s', BaseModel.modelTypeToName(item.type_)));
}
} else {
Linking.openURL(msg);
}
} catch (error) {
dialogs.error(this, error.message);
}
}
this.resourceFetcher_downloadComplete = async (resource) => {
if (!this.state.note || !this.state.note.body) return;
const resourceIds = await Note.linkedResourceIds(this.state.note.body);
if (resourceIds.indexOf(resource.id) >= 0 && this.refs.noteBodyViewer) {
this.refs.noteBodyViewer.rebuildMd();
}
}
2018-10-13 11:32:44 +02:00
this.takePhoto_onPress = this.takePhoto_onPress.bind(this);
2018-10-13 11:32:44 +02:00
this.cameraView_onPhoto = this.cameraView_onPhoto.bind(this);
this.cameraView_onCancel = this.cameraView_onCancel.bind(this);
2017-07-15 01:12:32 +02:00
}
2017-08-01 20:53:50 +02:00
styles() {
const themeId = this.props.theme;
const theme = themeStyle(themeId);
if (this.styles_[themeId]) return this.styles_[themeId];
this.styles_ = {};
let styles = {
bodyTextInput: {
flex: 1,
paddingLeft: theme.marginLeft,
paddingRight: theme.marginRight,
textAlignVertical: 'top',
2017-08-01 20:53:50 +02:00
color: theme.color,
backgroundColor: theme.backgroundColor,
fontSize: theme.fontSize,
},
noteBodyViewer: {
flex: 1,
paddingLeft: theme.marginLeft,
paddingRight: theme.marginRight,
paddingTop: theme.marginTop,
paddingBottom: theme.marginBottom,
},
2017-08-02 19:47:25 +02:00
metadata: {
paddingLeft: globalStyle.marginLeft,
paddingRight: globalStyle.marginRight,
color: theme.color,
},
2017-08-01 20:53:50 +02:00
};
styles.titleContainer = {
flex: 0,
flexDirection: 'row',
2017-08-01 20:53:50 +02:00
paddingLeft: theme.marginLeft,
paddingRight: theme.marginRight,
borderBottomColor: theme.dividerColor,
borderBottomWidth: 1,
};
styles.titleContainerTodo = Object.assign({}, styles.titleContainer);
2017-08-21 20:32:43 +02:00
styles.titleContainerTodo.paddingLeft = 0;
2017-08-01 20:53:50 +02:00
this.styles_[themeId] = StyleSheet.create(styles);
return this.styles_[themeId];
}
2017-07-15 01:12:32 +02:00
isModified() {
return shared.isModified(this);
2017-05-12 22:23:54 +02:00
}
async UNSAFE_componentWillMount() {
BackButtonService.addHandler(this.backHandler);
NavService.addHandler(this.navHandler);
2017-07-15 01:12:32 +02:00
ResourceFetcher.instance().on('downloadComplete', this.resourceFetcher_downloadComplete);
await shared.initState(this);
2017-07-23 16:11:44 +02:00
this.refreshNoteMetadata();
2017-07-13 23:50:21 +02:00
}
2017-11-05 20:36:27 +02:00
refreshNoteMetadata(force = null) {
return shared.refreshNoteMetadata(this, force);
2017-05-12 22:23:54 +02:00
}
2017-07-15 01:12:32 +02:00
componentWillUnmount() {
BackButtonService.removeHandler(this.backHandler);
NavService.removeHandler(this.navHandler);
ResourceFetcher.instance().off('downloadComplete', this.resourceFetcher_downloadComplete);
if (Platform.OS !== 'ios' && this.state.fromShare) {
ShareExtension.close();
}
}
2017-06-06 22:01:43 +02:00
title_changeText(text) {
shared.noteComponent_change(this, 'title', text);
this.setState({ newAndNoTitleChangeNoteId: null });
2017-05-12 22:23:54 +02:00
}
2017-06-06 22:01:43 +02:00
body_changeText(text) {
shared.noteComponent_change(this, 'body', text);
}
async saveNoteButton_press(folderId = null) {
await shared.saveNoteButton_press(this, folderId);
2017-07-17 22:22:05 +02:00
2017-09-24 16:48:23 +02:00
Keyboard.dismiss();
2017-05-12 22:23:54 +02:00
}
async saveOneProperty(name, value) {
await shared.saveOneProperty(this, name, value);
}
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?'));
2017-07-15 01:12:32 +02:00
if (!ok) return;
let folderId = note.parent_id;
await Note.delete(note.id);
2017-07-16 23:17:22 +02:00
2017-07-25 20:09:01 +02:00
this.props.dispatch({
type: 'NAV_GO',
routeName: 'Notes',
2017-07-25 20:09:01 +02:00
folderId: folderId,
});
2017-06-04 17:01:52 +02:00
}
2017-08-01 23:40:14 +02:00
async pickDocument() {
return new Promise((resolve, reject) => {
DocumentPicker.show({ filetype: [DocumentPickerUtil.allFiles()] }, (error,res) => {
2017-08-01 23:40:14 +02:00
if (error) {
2017-09-10 18:57:06 +02:00
// Also returns an error if the user doesn't pick a file
// so just resolve with null.
console.info('pickDocument error:', error);
2017-09-10 18:57:06 +02:00
resolve(null);
2017-08-01 23:40:14 +02:00
return;
}
resolve(res);
});
});
}
2017-08-02 19:47:25 +02:00
async imageDimensions(uri) {
return new Promise((resolve, reject) => {
Image.getSize(uri, (width, height) => {
resolve({ width: width, height: height });
}, (error) => { reject(error) });
2017-08-02 19:47:25 +02:00
});
}
showImagePicker(options) {
return new Promise((resolve, reject) => {
ImagePicker.launchImageLibrary(options, (response) => {
resolve(response);
});
});
}
2017-08-01 23:40:14 +02:00
async resizeImage(localFilePath, targetPath, mimeType) {
const maxSize = Resource.IMAGE_MAX_DIMENSION;
2017-08-02 19:47:25 +02:00
let dimensions = await this.imageDimensions(localFilePath);
reg.logger().info('Original dimensions ', dimensions);
if (dimensions.width > maxSize || dimensions.height > maxSize) {
dimensions.width = maxSize;
dimensions.height = maxSize;
}
reg.logger().info('New dimensions ', dimensions);
const format = mimeType == 'image/png' ? 'PNG' : 'JPEG';
reg.logger().info('Resizing image ' + localFilePath);
2017-11-20 00:08:58 +02:00
const resizedImage = await ImageResizer.createResizedImage(localFilePath, dimensions.width, dimensions.height, format, 85); //, 0, targetPath);
2017-12-19 22:14:40 +02:00
const resizedImagePath = resizedImage.uri;
reg.logger().info('Resized image ', resizedImagePath);
reg.logger().info('Moving ' + resizedImagePath + ' => ' + targetPath);
2017-12-19 22:14:40 +02:00
2017-11-20 00:08:58 +02:00
await RNFS.copyFile(resizedImagePath, targetPath);
2017-12-19 22:14:40 +02:00
try {
2017-11-20 00:08:58 +02:00
await RNFS.unlink(resizedImagePath);
} catch (error) {
reg.logger().warn('Error when unlinking cached file: ', error);
}
}
2018-10-13 11:32:44 +02:00
async attachFile(pickerResponse, fileType) {
if (!pickerResponse) {
reg.logger().warn('Got no response from picker');
2017-11-01 19:39:56 +02:00
return;
}
2017-08-01 23:40:14 +02:00
if (pickerResponse.error) {
reg.logger().warn('Got error from picker', pickerResponse.error);
2017-11-01 19:39:56 +02:00
return;
}
2017-08-02 19:47:25 +02:00
if (pickerResponse.didCancel) {
reg.logger().info('User cancelled picker');
return;
}
2017-08-02 19:47:25 +02:00
const localFilePath = pickerResponse.uri;
2017-11-20 00:08:58 +02:00
let mimeType = pickerResponse.type;
if (!mimeType) {
const ext = fileExtension(localFilePath);
mimeType = mimeUtils.fromFileExtension(ext);
}
2017-08-02 19:47:25 +02:00
if (!mimeType && fileType === 'image') {
2017-11-20 21:18:49 +02:00
// Assume JPEG if we couldn't determine the file type. It seems to happen with the image picker
// when the file path is something like content://media/external/images/media/123456
// If the image is not a JPEG, something will throw an error below, but there's a good chance
// it will work.
reg.logger().info('Missing file type and could not detect it - assuming image/jpg');
mimeType = 'image/jpg';
2017-11-20 21:18:49 +02:00
}
reg.logger().info('Got file: ' + localFilePath);
reg.logger().info('Got type: ' + mimeType);
2017-08-01 23:40:14 +02:00
let resource = Resource.new();
resource.id = uuid.create();
2017-11-20 00:08:58 +02:00
resource.mime = mimeType;
resource.title = pickerResponse.fileName ? pickerResponse.fileName : '';
2018-10-13 11:32:44 +02:00
resource.file_extension = safeFileExtension(fileExtension(pickerResponse.fileName ? pickerResponse.fileName : localFilePath));
if (!resource.mime) resource.mime = 'application/octet-stream';
2017-08-01 23:40:14 +02:00
2017-08-02 19:47:25 +02:00
let targetPath = Resource.fullPath(resource);
2017-11-20 00:08:58 +02:00
try {
if (mimeType == 'image/jpeg' || mimeType == 'image/jpg' || mimeType == 'image/png') {
2017-11-20 00:08:58 +02:00
await this.resizeImage(localFilePath, targetPath, pickerResponse.mime);
} else {
if (fileType === 'image') {
dialogs.error(this, _('Unsupported image type: %s', mimeType));
2017-11-20 00:08:58 +02:00
return;
} else {
await shim.fsDriver().copy(localFilePath, targetPath);
const stat = await shim.fsDriver().stat(targetPath);
if (stat.size >= 10000000) {
await shim.fsDriver().remove(targetPath);
throw new Error('Resources larger than 10 MB are not currently supported as they may crash the mobile applications. The issue is being investigated and will be fixed at a later time.');
}
2017-11-20 00:08:58 +02:00
}
2017-08-02 19:47:25 +02:00
}
2017-11-20 00:08:58 +02:00
} catch (error) {
reg.logger().warn('Could not attach file:', error);
await dialogs.error(this, error.message);
2017-11-20 00:08:58 +02:00
return;
2017-08-02 19:47:25 +02:00
}
2017-08-01 23:40:14 +02:00
await Resource.save(resource, { isNew: true });
const resourceTag = Resource.markdownTag(resource);
2017-08-02 19:47:25 +02:00
const newNote = Object.assign({}, this.state.note);
newNote.body += "\n" + resourceTag;
this.setState({ note: newNote });
}
async attachPhoto_onPress() {
const response = await this.showImagePicker({ mediaType: 'photo' });
await this.attachFile(response, 'image');
}
takePhoto_onPress() {
2018-10-13 11:32:44 +02:00
this.setState({ showCamera: true });
}
cameraView_onPhoto(data) {
this.attachFile({
uri: data.uri,
didCancel: false,
error: null,
type: 'image/jpg',
}, 'image');
this.setState({ showCamera: false });
}
cameraView_onCancel() {
this.setState({ showCamera: false });
}
async attachFile_onPress() {
const response = await this.pickDocument();
await this.attachFile(response, 'all');
}
2017-07-30 21:51:18 +02:00
toggleIsTodo_onPress() {
shared.toggleIsTodo_onPress(this);
2017-07-17 22:22:05 +02:00
}
tags_onPress() {
if (!this.state.note || !this.state.note.id) return;
2018-03-18 01:00:01 +02:00
this.setState({ noteTagDialogShown: true });
}
async share_onPress() {
await Share.share({
message: this.state.note.title + '\n\n' + this.state.note.body,
title: this.state.note.title,
});
}
2017-09-10 18:56:27 +02:00
setAlarm_onPress() {
this.setState({ alarmDialogShown: true });
}
async onAlarmDialogAccept(date) {
let newNote = Object.assign({}, this.state.note);
newNote.todo_due = date ? date.getTime() : 0;
await this.saveOneProperty('todo_due', date ? date.getTime() : 0);
this.setState({ alarmDialogShown: false });
2017-09-10 18:56:27 +02:00
}
onAlarmDialogReject() {
this.setState({ alarmDialogShown: false });
}
showMetadata_onPress() {
shared.showMetadata_onPress(this);
2017-06-04 17:01:52 +02:00
}
async showOnMap_onPress() {
if (!this.state.note.id) return;
let note = await Note.load(this.state.note.id);
try {
const url = Note.geolocationUrl(note);
Linking.openURL(url);
} catch (error) {
await dialogs.error(this, error.message);
}
}
async showSource_onPress() {
if (!this.state.note.id) return;
let note = await Note.load(this.state.note.id);
try {
Linking.openURL(note.source_url);
} catch (error) {
await dialogs.error(this, error.message);
}
}
copyMarkdownLink_onPress() {
const note = this.state.note;
Clipboard.setString(Note.markdownTag(note));
}
2017-06-06 22:01:43 +02:00
menuOptions() {
2017-07-17 22:22:05 +02:00
const note = this.state.note;
2017-09-10 18:57:06 +02:00
const isTodo = note && !!note.is_todo;
const isSaved = note && note.id;
const hasSource = note && note.source_url;
2017-07-17 22:22:05 +02:00
2017-09-10 18:57:06 +02:00
let output = [];
2017-11-20 21:01:19 +02:00
// The file attachement modules only work in Android >= 5 (Version 21)
// https://github.com/react-community/react-native-image-picker/issues/606
let canAttachPicture = true;
if (Platform.OS === 'android' && Platform.Version < 21) canAttachPicture = false;
if (canAttachPicture) {
output.push({ title: _('Take photo'), onPress: () => { this.takePhoto_onPress(); } });
2018-10-13 11:32:44 +02:00
output.push({ title: _('Attach photo'), onPress: () => { this.attachPhoto_onPress(); } });
output.push({ title: _('Attach any file'), onPress: () => { this.attachFile_onPress(); } });
output.push({ isDivider: true });
2017-11-20 21:01:19 +02:00
}
2017-07-17 22:22:05 +02:00
if (isTodo) {
output.push({ title: _('Set alarm'), onPress: () => { this.setState({ alarmDialogShown: true }) }});;
}
2017-09-10 18:57:06 +02:00
output.push({ title: _('Share'), onPress: () => { this.share_onPress(); } });
if (isSaved) output.push({ title: _('Tags'), onPress: () => { this.tags_onPress(); } });
output.push({ title: isTodo ? _('Convert to note') : _('Convert to todo'), onPress: () => { this.toggleIsTodo_onPress(); } });
if (isSaved) output.push({ title: _('Copy Markdown link'), onPress: () => { this.copyMarkdownLink_onPress(); } });
output.push({ isDivider: true });
if (this.props.showAdvancedOptions) output.push({ title: this.state.showNoteMetadata ? _('Hide metadata') : _('Show metadata'), onPress: () => { this.showMetadata_onPress(); } });
output.push({ title: _('View on map'), onPress: () => { this.showOnMap_onPress(); } });
if (hasSource) output.push({ title: _('Go to source URL'), onPress: () => { this.showSource_onPress(); } });
output.push({ isDivider: true });
output.push({ title: _('Delete'), onPress: () => { this.deleteNote_onPress(); } });
2017-09-10 18:57:06 +02:00
return output;
2017-06-04 17:01:52 +02:00
}
2017-07-16 18:06:05 +02:00
async todoCheckbox_change(checked) {
await this.saveOneProperty('todo_completed', checked ? time.unixMs() : 0);
2017-07-15 01:12:32 +02:00
}
titleTextInput_contentSizeChange(event) {
2017-11-19 17:19:36 +02:00
if (!this.enableMultilineTitle_) return;
let height = event.nativeEvent.contentSize.height;
this.setState({ titleTextInputHeight: height });
}
2017-05-12 22:23:54 +02:00
render() {
2017-07-24 23:52:30 +02:00
if (this.state.isLoading) {
return (
<View style={this.styles().screen}>
<ScreenHeader/>
2017-07-24 23:52:30 +02:00
</View>
);
}
2017-08-01 20:53:50 +02:00
const theme = themeStyle(this.props.theme);
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-07-24 23:52:30 +02:00
const isNew = !note.id;
2017-05-24 22:51:50 +02:00
2018-10-13 11:32:44 +02:00
if (this.state.showCamera) {
return <CameraView theme={this.props.theme} style={{flex:1}} onPhoto={this.cameraView_onPhoto} onCancel={this.cameraView_onCancel}/>
}
2017-07-10 23:34:26 +02:00
let bodyComponent = null;
if (this.state.mode == 'view') {
const onCheckboxChange = (newBody) => {
this.saveOneProperty('body', newBody);
2017-07-30 21:51:18 +02:00
};
2017-07-17 23:34:08 +02:00
let keywords = [];
if (this.props.searchQuery) {
const parsedQuery = SearchEngine.instance().parseQuery(this.props.searchQuery);
keywords = SearchEngine.instance().allParsedQueryTerms(parsedQuery);
}
bodyComponent = <NoteBodyViewer
onJoplinLinkClick={this.onJoplinLinkClick_}
ref="noteBodyViewer"
style={this.styles().noteBodyViewer}
webViewStyle={theme}
note={note}
highlightedKeywords={keywords}
onCheckboxChange={(newBody) => { onCheckboxChange(newBody) }}
onLoadEnd={() => {
setTimeout(() => {
this.setState({ HACK_webviewLoadingState: this.state.HACK_webviewLoadingState + 1 });
setTimeout(() => {
this.setState({ HACK_webviewLoadingState: this.state.HACK_webviewLoadingState + 1 });
}, 50);
}, 50);
}}
/>
2017-07-10 23:34:26 +02:00
} else {
2017-07-24 23:52:30 +02:00
const focusBody = !isNew && !!note.title;
// Note: blurOnSubmit is necessary to get multiline to work.
// See https://github.com/facebook/react-native/issues/12717#issuecomment-327001997
2017-07-15 01:12:32 +02:00
bodyComponent = (
<TextInput
2017-07-16 18:31:42 +02:00
autoCapitalize="sentences"
2017-07-24 23:52:30 +02:00
autoFocus={focusBody}
2017-08-01 20:53:50 +02:00
style={this.styles().bodyTextInput}
2017-07-15 01:12:32 +02:00
multiline={true}
value={note.body}
onChangeText={(text) => this.body_changeText(text)}
blurOnSubmit={false}
selectionColor={theme.textSelectionColor}
2017-07-15 01:12:32 +02:00
/>
);
2017-07-10 23:34:26 +02:00
}
2017-07-14 01:35:37 +02:00
const renderActionButton = () => {
let buttons = [];
buttons.push({
title: _('Edit'),
icon: 'md-create',
2017-07-14 01:35:37 +02:00
onPress: () => {
this.setState({ mode: 'edit' });
2017-07-14 01:35:37 +02:00
},
});
if (this.state.mode == 'edit') return null;//<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' || this.isModified() || this.saveButtonHasBeenShown_;
let saveButtonDisabled = !this.isModified();
2017-07-16 23:17:22 +02:00
if (showSaveButton) this.saveButtonHasBeenShown_ = true;
2017-08-01 20:53:50 +02:00
const titleContainerStyle = isTodo ? this.styles().titleContainerTodo : this.styles().titleContainer;
let titleTextInputStyle = {
flex: 1,
marginTop: 0,
2017-08-01 20:53:50 +02:00
paddingLeft: 0,
color: theme.color,
backgroundColor: theme.backgroundColor,
fontWeight: 'bold',
2017-08-01 20:53:50 +02:00
fontSize: theme.fontSize,
2017-11-19 17:19:36 +02:00
paddingTop: 10, // Added for iOS (Not needed for Android??)
paddingBottom: 10, // Added for iOS (Not needed for Android??)
2017-08-01 20:53:50 +02:00
};
2017-07-21 23:40:02 +02:00
2017-11-19 17:19:36 +02:00
if (this.enableMultilineTitle_) titleTextInputStyle.height = this.state.titleTextInputHeight;
2017-08-21 20:32:43 +02:00
let checkboxStyle = {
color: theme.color,
paddingRight: 10,
paddingLeft: theme.marginLeft,
2017-11-19 17:19:36 +02:00
paddingTop: 10, // Added for iOS (Not needed for Android??)
paddingBottom: 10, // Added for iOS (Not needed for Android??)
}
2017-08-21 20:32:43 +02:00
if (this.state.HACK_webviewLoadingState === 1) {
titleTextInputStyle.marginTop = 1;
}
2017-09-10 18:56:27 +02:00
const dueDate = isTodo && note.todo_due ? new Date(note.todo_due) : null;
const titleComp = (
<View style={titleContainerStyle}>
{ isTodo && <Checkbox style={checkboxStyle} checked={!!Number(note.todo_completed)} onChange={(checked) => { this.todoCheckbox_change(checked) }} /> }
<TextInput
onContentSizeChange={(event) => this.titleTextInput_contentSizeChange(event)}
autoFocus={isNew}
2017-11-19 17:19:36 +02:00
multiline={this.enableMultilineTitle_}
underlineColorAndroid="#ffffff00"
autoCapitalize="sentences"
style={titleTextInputStyle}
value={note.title}
onChangeText={(text) => this.title_changeText(text)}
selectionColor={theme.textSelectionColor}
/>
</View>
);
2018-03-18 01:00:01 +02:00
const noteTagDialog = !this.state.noteTagDialogShown ? null : <NoteTagsDialog onCloseRequested={this.noteTagDialog_closeRequested}/>;
2017-05-12 22:23:54 +02:00
return (
<View style={this.rootStyle(this.props.theme).root}>
<ScreenHeader
folderPickerOptions={{
enabled: true,
selectedFolderId: folder ? folder.id : null,
2017-07-16 18:06:05 +02:00
onValueChange: async (itemValue, itemIndex) => {
if (!note.id) {
await this.saveNoteButton_press(itemValue);
} else {
await Note.moveToFolder(note.id, itemValue);
}
2017-07-16 18:06:05 +02:00
note.parent_id = itemValue;
const folder = await Folder.load(note.parent_id);
this.setState({
lastSavedNote: Object.assign({}, note),
note: note,
folder: folder,
});
},
2017-07-16 18:06:05 +02:00
}}
menuOptions={this.menuOptions()}
showSaveButton={showSaveButton}
saveButtonDisabled={saveButtonDisabled}
onSaveButtonPress={() => this.saveNoteButton_press()}
/>
{ titleComp }
{ bodyComponent }
{ actionButtonComp }
{ this.state.showNoteMetadata && <Text style={this.styles().metadata}>{this.state.noteMetadata}</Text> }
<SelectDateTimeDialog
shown={this.state.alarmDialogShown}
date={dueDate}
onAccept={(date) => this.onAlarmDialogAccept(date) }
onReject={() => this.onAlarmDialogReject() }
2018-03-09 19:49:35 +02:00
/>
<DialogBox ref={dialogbox => { this.dialogbox = dialogbox }}/>
2018-03-18 01:00:01 +02:00
{ noteTagDialog }
</View>
2017-05-12 22:23:54 +02:00
);
}
2017-05-12 22:23:54 +02:00
}
const NoteScreen = connect(
(state) => {
return {
noteId: state.selectedNoteIds.length ? state.selectedNoteIds[0] : null,
folderId: state.selectedFolderId,
itemType: state.selectedItemType,
folders: state.folders,
searchQuery: state.searchQuery,
theme: state.settings.theme,
sharedData: state.sharedData,
showAdvancedOptions: state.settings.showAdvancedOptions,
};
}
)(NoteScreenComponent)
module.exports = { NoteScreen };