1
0
mirror of https://github.com/laurent22/joplin.git synced 2024-12-21 09:38:01 +02:00
joplin/ReactNativeClient/lib/components/screens/folder.js

129 lines
3.5 KiB
JavaScript
Raw Normal View History

2019-07-29 15:43:53 +02:00
const React = require('react');
2019-07-29 15:58:33 +02:00
const { View, TextInput, StyleSheet } = require('react-native');
const { connect } = require('react-redux');
const Folder = require('lib/models/Folder.js');
const BaseModel = require('lib/BaseModel.js');
const { ScreenHeader } = require('lib/components/screen-header.js');
const { BaseScreenComponent } = require('lib/components/base-screen.js');
const { dialogs } = require('lib/dialogs.js');
const { themeStyle } = require('lib/components/global-style.js');
const { _ } = require('lib/locale');
2017-05-15 21:10:00 +02:00
2017-07-14 20:49:14 +02:00
class FolderScreenComponent extends BaseScreenComponent {
static navigationOptions() {
2017-05-16 21:57:09 +02:00
return { header: null };
}
2017-05-15 21:10:00 +02:00
constructor() {
super();
2017-07-15 20:37:17 +02:00
this.state = {
folder: Folder.new(),
lastSavedFolder: null,
};
2017-08-01 19:59:01 +02:00
this.styles_ = {};
}
styles() {
2020-09-15 15:01:07 +02:00
const theme = themeStyle(this.props.themeId);
2017-08-01 19:59:01 +02:00
2020-09-15 15:01:07 +02:00
if (this.styles_[this.props.themeId]) return this.styles_[this.props.themeId];
2017-08-01 19:59:01 +02:00
this.styles_ = {};
const styles = {
2017-08-01 19:59:01 +02:00
textInput: {
color: theme.color,
paddingLeft: theme.marginLeft,
marginTop: theme.marginTop,
2017-08-01 19:59:01 +02:00
},
};
2020-09-15 15:01:07 +02:00
this.styles_[this.props.themeId] = StyleSheet.create(styles);
return this.styles_[this.props.themeId];
2017-05-15 21:10:00 +02:00
}
UNSAFE_componentWillMount() {
if (!this.props.folderId) {
2017-07-15 20:37:17 +02:00
const folder = Folder.new();
this.setState({
folder: folder,
lastSavedFolder: Object.assign({}, folder),
});
} else {
Folder.load(this.props.folderId).then(folder => {
2017-07-15 20:37:17 +02:00
this.setState({
folder: folder,
lastSavedFolder: Object.assign({}, folder),
});
});
}
2017-05-15 21:10:00 +02:00
}
2017-07-15 20:37:17 +02:00
isModified() {
if (!this.state.folder || !this.state.lastSavedFolder) return false;
const diff = BaseModel.diffObjects(this.state.folder, this.state.lastSavedFolder);
2017-07-15 20:37:17 +02:00
delete diff.type_;
return !!Object.getOwnPropertyNames(diff).length;
}
2017-06-06 22:01:43 +02:00
folderComponent_change(propName, propValue) {
this.setState((prevState) => {
const folder = Object.assign({}, prevState.folder);
2017-05-15 21:10:00 +02:00
folder[propName] = propValue;
2019-07-29 15:43:53 +02:00
return { folder: folder };
2017-05-15 21:10:00 +02:00
});
}
2017-06-06 22:01:43 +02:00
title_changeText(text) {
this.folderComponent_change('title', text);
2017-05-15 21:10:00 +02:00
}
2017-07-05 23:29:00 +02:00
async saveFolderButton_press() {
2017-07-15 20:37:17 +02:00
let folder = Object.assign({}, this.state.folder);
2017-07-05 23:29:00 +02:00
2017-07-15 18:25:33 +02:00
try {
2017-07-17 21:19:01 +02:00
folder = await Folder.save(folder, { userSideValidation: true });
2017-07-15 18:25:33 +02:00
} catch (error) {
dialogs.error(this, _('The notebook could not be saved: %s', error.message));
2017-07-15 18:25:33 +02:00
return;
}
2017-07-15 20:37:17 +02:00
this.setState({
lastSavedFolder: Object.assign({}, folder),
folder: folder,
});
2017-07-09 00:57:09 +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: folder.id,
});
2017-05-15 21:10:00 +02:00
}
render() {
const saveButtonDisabled = !this.isModified();
2020-09-15 15:01:07 +02:00
const theme = themeStyle(this.props.themeId);
2017-07-15 20:13:31 +02:00
2017-05-15 21:10:00 +02:00
return (
2020-09-15 15:01:07 +02:00
<View style={this.rootStyle(this.props.themeId).root}>
2019-07-29 15:43:53 +02:00
<ScreenHeader title={_('Edit notebook')} showSaveButton={true} saveButtonDisabled={saveButtonDisabled} onSaveButtonPress={() => this.saveFolderButton_press()} showSideMenuButton={false} showSearchButton={false} />
<TextInput placeholder={_('Enter notebook title')} placeholderTextColor={theme.colorFaded} underlineColorAndroid={theme.dividerColor} selectionColor={theme.textSelectionColor} keyboardAppearance={theme.keyboardAppearance} style={this.styles().textInput} autoFocus={true} value={this.state.folder.title} onChangeText={text => this.title_changeText(text)} />
<dialogs.DialogBox
ref={dialogbox => {
this.dialogbox = dialogbox;
}}
/>
2017-05-15 21:10:00 +02:00
</View>
);
}
}
const FolderScreen = connect(state => {
2019-07-29 15:43:53 +02:00
return {
folderId: state.selectedFolderId,
2020-09-15 15:01:07 +02:00
themeId: state.settings.theme,
2019-07-29 15:43:53 +02:00
};
})(FolderScreenComponent);
2017-05-15 21:10:00 +02:00
2019-07-29 15:43:53 +02:00
module.exports = { FolderScreen };