self-hosted/joplin
1
0
Fork 0
mirror of https://github.com/laurent22/joplin.git synced 2024-11-27 08:21:03 +02:00
Code Issues Releases Activity

implemented own navigator

Browse Source
This commit is contained in:
Laurent Cozic 2017-07-14 18:49:14 +00:00
parent 4dc540e589
commit 18b5453146
14 changed files with 104 additions and 54 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

36
ReactNativeClient/lib/components/app-nav.js Normal file
View File

@ -0,0 +1,36 @@
import React, { Component } from 'react';
import { connect } from 'react-redux'
import { View } from 'react-native';
import { _ } from 'lib/locale.js';
class AppNavComponent extends Component {
constructor() {
super();
this.screenCache_ = [];
}
render() {
if (!this.props.route) throw new Error('Route must not be null');
let route = this.props.route;
let Screen = this.props.screens[route.routeName].screen;
return (
<View style={{flex:1}}>
<Screen style={{backgroundColor: '#f00'}} navigation={{ state: route }} />
</View>
);
}
}
const AppNav = connect(
(state) => {
return {
route: state.route,
};
}
)(AppNavComponent)
export { AppNav };

19
ReactNativeClient/lib/components/base-screen.js Normal file
View File

@ -0,0 +1,19 @@
import React, { Component } from 'react';
import { StyleSheet } from 'react-native';
const styles_ = StyleSheet.create({
screen: {
flex: 1,
backgroundColor: "#E9E9E9",
},
});
class BaseScreenComponent extends React.Component {
styles() {
return styles_;
}
}
export { BaseScreenComponent };

5
ReactNativeClient/lib/components/screens/folder.js
View File

@ -6,8 +6,9 @@ import { Folder } from 'lib/models/folder.js'
import { BaseModel } from 'lib/base-model.js'
import { ScreenHeader } from 'lib/components/screen-header.js';
import { NotesScreenUtils } from 'lib/components/screens/notes-utils.js'
import { BaseScreenComponent } from 'lib/components/base-screen.js';
class FolderScreenComponent extends React.Component {
class FolderScreenComponent extends BaseScreenComponent {
static navigationOptions(options) {
return { header: null };
@ -57,7 +58,7 @@ class FolderScreenComponent extends React.Component {
render() {
return (
<View style={{flex: 1}}>
<View style={this.styles().screen}>
<ScreenHeader navState={this.props.navigation.state} />
<TextInput value={this.state.folder.title} onChangeText={(text) => this.title_changeText(text)} />
<Button title="Save folder" onPress={() => this.saveFolderButton_press()} />

5
ReactNativeClient/lib/components/screens/folders.js
View File

@ -6,8 +6,9 @@ import { FolderList } from 'lib/components/folder-list.js'
import { ScreenHeader } from 'lib/components/screen-header.js';
import { _ } from 'lib/locale.js';
import { ActionButton } from 'lib/components/action-button.js';
import { BaseScreenComponent } from 'lib/components/base-screen.js';
class FoldersScreenComponent extends React.Component {
class FoldersScreenComponent extends BaseScreenComponent {
static navigationOptions(options) {
return { header: null };
@ -15,7 +16,7 @@ class FoldersScreenComponent extends React.Component {
render() {
return (
<View style={{flex: 1}}>
<View style={this.styles().screen}>
<ScreenHeader navState={this.props.navigation.state} />
<FolderList noItemMessage={_('There is currently no notebook. Create one by clicking on the (+) button.')} style={{flex: 1}}/>
<ActionButton addFolderNoteButtons={true}></ActionButton>

5
ReactNativeClient/lib/components/screens/log.js
View File

@ -6,8 +6,9 @@ import { reg } from 'lib/registry.js'
import { ScreenHeader } from 'lib/components/screen-header.js';
import { time } from 'lib/time-utils'
import { Logger } from 'lib/logger.js';
import { BaseScreenComponent } from 'lib/components/base-screen.js';
class LogScreenComponent extends React.Component {
class LogScreenComponent extends BaseScreenComponent {
static navigationOptions(options) {
return { header: null };
@ -54,7 +55,7 @@ class LogScreenComponent extends React.Component {
// `enableEmptySections` is to fix this warning: https://github.com/FaridSafi/react-native-gifted-listview/issues/39
return (
<View style={{flex: 1}}>
<View style={this.styles().screen}>
<ScreenHeader navState={this.props.navigation.state} />
<ListView
dataSource={this.state.dataSource}

5
ReactNativeClient/lib/components/screens/note.js
View File

@ -10,6 +10,7 @@ import { ScreenHeader } from 'lib/components/screen-header.js';
import { Checkbox } from 'lib/components/checkbox.js'
import { _ } from 'lib/locale.js';
import marked from 'lib/marked.js';
import { BaseScreenComponent } from 'lib/components/base-screen.js';
const styles = StyleSheet.create({
webView: {
@ -17,7 +18,7 @@ const styles = StyleSheet.create({
},
});
class NoteScreenComponent extends React.Component {
class NoteScreenComponent extends BaseScreenComponent {
static navigationOptions(options) {
return { header: null };
@ -231,7 +232,7 @@ class NoteScreenComponent extends React.Component {
const actionButtonComp = renderActionButton();
return (
<View style={{flex: 1}}>
<View style={this.styles().screen}>
<ScreenHeader navState={this.props.navigation.state} menuOptions={this.menuOptions()} title={title} />
<View style={{ flexDirection: 'row' }}>
{ isTodo && <Checkbox checked={!!Number(note.todo_completed)} /> }<TextInput style={{flex:1}} value={note.title} onChangeText={(text) => this.title_changeText(text)} />

5
ReactNativeClient/lib/components/screens/notes.js
View File

@ -11,8 +11,9 @@ import { ActionButton } from 'lib/components/action-button.js';
import { dialogs } from 'lib/dialogs.js';
import { NotesScreenUtils } from 'lib/components/screens/notes-utils.js'
import DialogBox from 'react-native-dialogbox';
import { BaseScreenComponent } from 'lib/components/base-screen.js';
class NotesScreenComponent extends React.Component {
class NotesScreenComponent extends BaseScreenComponent {
static navigationOptions(options) {
return { header: null };
@ -52,7 +53,7 @@ class NotesScreenComponent extends React.Component {
const { navigate } = this.props.navigation;
return (
<View style={{flex: 1}}>
<View style={this.styles().screen}>
<ScreenHeader title={title} navState={this.props.navigation.state} menuOptions={this.menuOptions()} />
<NoteList noItemMessage={_('There are currently no notes. Create one by clicking on the (+) button.')} style={{flex: 1}}/>
<ActionButton addFolderNoteButtons={true} parentFolderId={this.props.selectedFolderId}></ActionButton>

5
ReactNativeClient/lib/components/screens/onedrive-login.js
View File

@ -7,8 +7,9 @@ import { Setting } from 'lib/models/setting.js'
import { ScreenHeader } from 'lib/components/screen-header.js';
import { reg } from 'lib/registry.js';
import { _ } from 'lib/locale.js';
import { BaseScreenComponent } from 'lib/components/base-screen.js';
class OneDriveLoginScreenComponent extends React.Component {
class OneDriveLoginScreenComponent extends BaseScreenComponent {
static navigationOptions(options) {
return { header: null };
@ -85,7 +86,7 @@ class OneDriveLoginScreenComponent extends React.Component {
}
return (
<View style={{flex: 1}}>
<View style={this.styles().screen}>
<ScreenHeader navState={this.props.navigation.state} />
<WebView
source={source}

5
ReactNativeClient/lib/components/screens/status.js
View File

@ -10,8 +10,9 @@ import { BaseItem } from 'lib/models/base-item.js';
import { Folder } from 'lib/models/folder.js';
import { ReportService } from 'lib/services/report.js';
import { _ } from 'lib/locale.js';
import { BaseScreenComponent } from 'lib/components/base-screen.js';
class StatusScreenComponent extends React.Component {
class StatusScreenComponent extends BaseScreenComponent {
static navigationOptions(options) {
return { header: null };
@ -65,7 +66,7 @@ class StatusScreenComponent extends React.Component {
let body = renderBody(this.state.report);
return (
<View style={{flex: 1}}>
<View style={this.styles().screen}>
<ScreenHeader navState={this.props.navigation.state} />
<View style={{flex: 1}}>
{ body }

5
ReactNativeClient/lib/components/screens/welcome.js
View File

@ -4,9 +4,10 @@ import { connect } from 'react-redux'
import { Log } from 'lib/log.js'
import { ScreenHeader } from 'lib/components/screen-header.js';
import { ActionButton } from 'lib/components/action-button.js';
import { BaseScreenComponent } from 'lib/components/base-screen.js';
import { _ } from 'lib/locale.js';
class WelcomeScreenComponent extends React.Component {
class WelcomeScreenComponent extends BaseScreenComponent {
static navigationOptions(options) {
return { header: null };
@ -23,7 +24,7 @@ class WelcomeScreenComponent extends React.Component {
let message = this.props.folders.length ? _('Click on the (+) button to create a new note or notebook. Click on the side menu to access your existing notebooks.') : _('You currently have no notebook. Create one by clicking on (+) button.');
return (
<View style={{flex: 1}}>
<View style={this.styles().screen} >
<ScreenHeader navState={this.props.navigation.state}/>
<Text>{message}</Text>
<ActionButton addFolderNoteButtons={true}/>

2
ReactNativeClient/lib/components/side-menu-content.js
View File

@ -16,8 +16,6 @@ const {
} = require('react-native');
const { Component } = React;
const window = Dimensions.get('window');
const styles = StyleSheet.create({
menu: {
flex: 1,

7
ReactNativeClient/lib/components/style.js Normal file
View File

@ -0,0 +1,7 @@
const styles = StyleSheet.create({
webView: {
fontSize: 10,
},
});
export { styles }

1
ReactNativeClient/package.json
View File

@ -22,7 +22,6 @@
"react-native-side-menu": "^0.20.1",
"react-native-sqlite-storage": "3.3.*",
"react-native-vector-icons": "^2.0.3",
"react-navigation": "^1.0.0-beta.9",
"react-redux": "4.4.8",
"redux": "3.6.0",
"uuid": "^3.0.1"

53
ReactNativeClient/root.js
View File

@ -2,9 +2,9 @@ import React, { Component } from 'react';
import { BackHandler, Keyboard } from 'react-native';
import { connect, Provider } from 'react-redux'
import { createStore } from 'redux';
import { StackNavigator, addNavigationHelpers } from 'react-navigation';
import { shimInit } from 'lib/shim-init-react.js';
import { Log } from 'lib/log.js'
import { AppNav } from 'lib/components/app-nav.js'
import { Logger } from 'lib/logger.js'
import { Note } from 'lib/models/note.js'
import { Folder } from 'lib/models/folder.js'
@ -52,6 +52,8 @@ const initialRoute = {
params: {}
};
defaultState.route = initialRoute;
let navHistory = [];
navHistory.push(initialRoute);
@ -73,8 +75,7 @@ const reducer = (state = defaultState, action) => {
case 'Navigation/NAVIGATE':
const r = state.nav.routes;
const currentRoute = r.length ? r[r.length - 1] : null;
const currentRoute = state.route;
const currentRouteName = currentRoute ? currentRoute.routeName : '';
reg.logger().info('Route: ' + currentRouteName + ' => ' + action.routeName);
@ -93,27 +94,15 @@ const reducer = (state = defaultState, action) => {
newState.selectedItemType = action.itemType;
}
if ('screens' in action) {
for (let n in action.screens) {
if (!action.screens.hasOwnProperty(n)) continue;
newState.screens[n] = action.screens[n];
}
}
if (currentRouteName == action.routeName) {
// If the current screen is already the requested screen, don't do anything
} else {
const nextStateNav = AppNavigator.router.getStateForAction(action, state.nav);
if (nextStateNav) {
newState.nav = nextStateNav;
navHistory.push(action);
}
newState.route = action;
navHistory.push(action);
}
newState.historyCanGoBack = navHistory.length >= 2;
console.info(navHistory);
Keyboard.dismiss(); // TODO: should probably be in some middleware
break;
@ -217,16 +206,6 @@ const reducer = (state = defaultState, action) => {
let store = createStore(reducer);
const AppNavigator = StackNavigator({
Notes: { screen: NotesScreen },
Note: { screen: NoteScreen },
Folder: { screen: FolderScreen },
Welcome: { screen: WelcomeScreen },
OneDriveLogin: { screen: OneDriveLoginScreen },
Log: { screen: LogScreen },
Status: { screen: StatusScreen },
});
let initializationState_ = 'waiting';
async function initialize(dispatch, backButtonHandler) {
@ -337,24 +316,28 @@ class AppComponent extends React.Component {
render() {
const sideMenuContent = <SideMenuContent/>;
const appNavInit = {
Welcome: { screen: WelcomeScreen },
Notes: { screen: NotesScreen },
Note: { screen: NoteScreen },
Folder: { screen: FolderScreen },
OneDriveLogin: { screen: OneDriveLoginScreen },
Log: { screen: LogScreen },
Status: { screen: StatusScreen },
};
return (
<SideMenu menu={sideMenuContent} onChange={(isOpen) => this.sideMenu_change(isOpen)}>
<MenuContext style={{ flex: 1 }}>
<AppNavigator navigation={addNavigationHelpers({
dispatch: this.props.dispatch,
state: this.props.nav,
})} />
<AppNav screens={appNavInit} />
</MenuContext>
</SideMenu>
);
}
}
defaultState.nav = AppNavigator.router.getStateForAction(initialRoute);
const mapStateToProps = (state) => {
return {
nav: state.nav,
historyCanGoBack: state.historyCanGoBack,
showSideMenu: state.showSideMenu,
};
@ -366,7 +349,7 @@ class Root extends React.Component {
render() {
return (
<Provider store={store}>
<App />
<App/>
</Provider>
);
}