mirror of
https://github.com/laurent22/joplin.git
synced 2024-12-24 10:27:10 +02:00
side menu
This commit is contained in:
parent
3078797134
commit
c5584d70a6
@ -1,90 +1,3 @@
|
||||
import { main } from 'src/main.js';
|
||||
|
||||
main();
|
||||
|
||||
|
||||
// let defaultState = {
|
||||
// 'myButtonLabel': 'click',
|
||||
// 'counter': 0,
|
||||
// }
|
||||
|
||||
// function shallowcopy(a) {
|
||||
// return Object.assign({}, a);
|
||||
// }
|
||||
|
||||
// let store = createStore(reducer, defaultState);
|
||||
|
||||
// function reducer(state, action) {
|
||||
// switch (action.type) {
|
||||
|
||||
// case 'SET_BUTTON_NAME':
|
||||
|
||||
// var state = shallowcopy(state);
|
||||
// state.myButtonLabel = action.name;
|
||||
// return state;
|
||||
|
||||
// case 'INC_COUNTER':
|
||||
|
||||
// var state = shallowcopy(state);
|
||||
// state.counter++;
|
||||
// return state;
|
||||
|
||||
// }
|
||||
|
||||
// return state;
|
||||
// }
|
||||
|
||||
// class MyInput extends Component {
|
||||
|
||||
// render() {
|
||||
// return <TextInput onChangeText={this.props.onChangeText} />
|
||||
// }
|
||||
|
||||
// }
|
||||
|
||||
// const mapStateToInputProps = function(state) {
|
||||
// return {}
|
||||
// }
|
||||
|
||||
// const mapDispatchToInputProps = function(dispatch) {
|
||||
// return {
|
||||
// onChangeText(text) {
|
||||
// dispatch({
|
||||
// type: 'SET_BUTTON_NAME',
|
||||
// name: text
|
||||
// });
|
||||
// }
|
||||
// }
|
||||
// }
|
||||
|
||||
// const MyConnectionInput = connect(
|
||||
// mapStateToInputProps,
|
||||
// mapDispatchToInputProps
|
||||
// )(MyInput)
|
||||
|
||||
// class App extends Component {
|
||||
|
||||
// render() {
|
||||
// return (
|
||||
// <Provider store={store}>
|
||||
// <View>
|
||||
// <MyConnectionInput />
|
||||
// <LoginButton />
|
||||
// </View>
|
||||
// </Provider>
|
||||
// )
|
||||
// }
|
||||
|
||||
// }
|
||||
|
||||
// let api = new WebApi('http://192.168.1.2');
|
||||
// let sessionService = new SessionService(api);
|
||||
// sessionService.login('laurent@cozic.net', '12345678', clientId).then((session) => {
|
||||
// console.info('GOT DATA:');
|
||||
// console.info(session);
|
||||
// }).catch(function(error) {
|
||||
// console.warn('GOT ERROR:');
|
||||
// console.warn(error);
|
||||
// })
|
||||
|
||||
// AppRegistry.registerComponent('AwesomeProject', () => App);
|
||||
main();
|
@ -28,6 +28,10 @@ class ScreenHeaderComponent extends Component {
|
||||
return this.props.navState.routeName != 'Folders';
|
||||
}
|
||||
|
||||
sideMenuButton_press = () => {
|
||||
this.props.dispatch({ type: 'SIDE_MENU_TOGGLE' });
|
||||
}
|
||||
|
||||
backButton_press = () => {
|
||||
this.props.dispatch({ type: 'Navigation/BACK' });
|
||||
}
|
||||
@ -90,6 +94,7 @@ class ScreenHeaderComponent extends Component {
|
||||
|
||||
return (
|
||||
<View style={{ flexDirection: 'row', padding: 10, backgroundColor: '#ffffff', alignItems: 'center' }} >
|
||||
<Button title="☰" onPress={this.sideMenuButton_press} />
|
||||
<Button disabled={!this.showBackButton()} title="<" onPress={this.backButton_press}></Button>
|
||||
<Text style={{ flex:1, marginLeft: 10 }} >{title}</Text>
|
||||
<Menu onSelect={this.menu_select}>
|
||||
|
79
ReactNativeClient/src/components/side-menu-content.js
Normal file
79
ReactNativeClient/src/components/side-menu-content.js
Normal file
@ -0,0 +1,79 @@
|
||||
import { connect } from 'react-redux'
|
||||
import { Button } from 'react-native';
|
||||
import { Log } from 'src/log.js';
|
||||
|
||||
const React = require('react');
|
||||
const {
|
||||
Dimensions,
|
||||
StyleSheet,
|
||||
ScrollView,
|
||||
View,
|
||||
Image,
|
||||
Text,
|
||||
} = require('react-native');
|
||||
const { Component } = React;
|
||||
|
||||
const window = Dimensions.get('window');
|
||||
|
||||
const styles = StyleSheet.create({
|
||||
menu: {
|
||||
flex: 1,
|
||||
backgroundColor: 'white',
|
||||
padding: 20,
|
||||
},
|
||||
name: {
|
||||
position: 'absolute',
|
||||
left: 70,
|
||||
top: 20,
|
||||
},
|
||||
item: {
|
||||
fontSize: 14,
|
||||
fontWeight: '300',
|
||||
paddingTop: 5,
|
||||
},
|
||||
button: {
|
||||
flex: 1,
|
||||
textAlign: 'left',
|
||||
}
|
||||
});
|
||||
|
||||
class SideMenuContentComponent extends Component {
|
||||
|
||||
folder_press(folder) {
|
||||
this.props.dispatch({
|
||||
type: 'Navigation/NAVIGATE',
|
||||
routeName: 'Notes',
|
||||
folderId: folder.id,
|
||||
});
|
||||
|
||||
this.props.dispatch({
|
||||
type: 'SIDE_MENU_CLOSE',
|
||||
});
|
||||
}
|
||||
|
||||
render() {
|
||||
let buttons = [];
|
||||
for (let i = 0; i < this.props.folders.length; i++) {
|
||||
let f = this.props.folders[i];
|
||||
buttons.push(
|
||||
<Button style={styles.button} title={f.title} onPress={() => { this.folder_press(f) }} key={f.id} />
|
||||
);
|
||||
}
|
||||
|
||||
return (
|
||||
<ScrollView scrollsToTop={false} style={styles.menu}>
|
||||
{ buttons }
|
||||
</ScrollView>
|
||||
);
|
||||
}
|
||||
};
|
||||
|
||||
const SideMenuContent = connect(
|
||||
(state) => {
|
||||
return {
|
||||
folders: state.folders,
|
||||
};
|
||||
}
|
||||
)(SideMenuContentComponent)
|
||||
|
||||
export { SideMenuContent };
|
16
ReactNativeClient/src/components/side-menu.js
Normal file
16
ReactNativeClient/src/components/side-menu.js
Normal file
@ -0,0 +1,16 @@
|
||||
import React, { Component } from 'react';
|
||||
import { connect } from 'react-redux'
|
||||
import { Log } from 'src/log.js';
|
||||
import SideMenu_ from 'react-native-side-menu';
|
||||
|
||||
class SideMenuComponent extends SideMenu_ {};
|
||||
|
||||
const SideMenu = connect(
|
||||
(state) => {
|
||||
return {
|
||||
isOpen: state.showSideMenu,
|
||||
};
|
||||
}
|
||||
)(SideMenuComponent)
|
||||
|
||||
export { SideMenu };
|
@ -1,101 +0,0 @@
|
||||
const React = require('react');
|
||||
const {
|
||||
Dimensions,
|
||||
StyleSheet,
|
||||
ScrollView,
|
||||
View,
|
||||
Image,
|
||||
Text,
|
||||
} = require('react-native');
|
||||
const { Component } = React;
|
||||
|
||||
const window = Dimensions.get('window');
|
||||
const uri = 'https://pickaface.net/gallery/avatar/Opi51c74d0125fd4.png';
|
||||
|
||||
const styles = StyleSheet.create({
|
||||
menu: {
|
||||
flex: 1,
|
||||
width: window.width,
|
||||
height: window.height,
|
||||
backgroundColor: 'gray',
|
||||
padding: 20,
|
||||
},
|
||||
avatarContainer: {
|
||||
marginBottom: 20,
|
||||
marginTop: 20,
|
||||
},
|
||||
avatar: {
|
||||
width: 48,
|
||||
height: 48,
|
||||
borderRadius: 24,
|
||||
flex: 1,
|
||||
},
|
||||
name: {
|
||||
position: 'absolute',
|
||||
left: 70,
|
||||
top: 20,
|
||||
},
|
||||
item: {
|
||||
fontSize: 14,
|
||||
fontWeight: '300',
|
||||
paddingTop: 5,
|
||||
},
|
||||
});
|
||||
|
||||
module.exports = class Menu extends Component {
|
||||
static propTypes = {
|
||||
onItemSelected: React.PropTypes.func.isRequired,
|
||||
};
|
||||
|
||||
render() {
|
||||
return (
|
||||
<ScrollView scrollsToTop={false} style={styles.menu}>
|
||||
<View style={styles.avatarContainer}>
|
||||
<Image
|
||||
style={styles.avatar}
|
||||
source={{ uri, }}/>
|
||||
<Text style={styles.name}>Your name</Text>
|
||||
</View>
|
||||
|
||||
<Text
|
||||
onPress={() => this.props.onItemSelected('About')}
|
||||
style={styles.item}>
|
||||
About
|
||||
</Text>
|
||||
|
||||
<Text
|
||||
onPress={() => this.props.onItemSelected('Contacts')}
|
||||
style={styles.item}>
|
||||
Contacts
|
||||
</Text>
|
||||
|
||||
<Text style={styles.item}>Contacts</Text>
|
||||
<Text style={styles.item}>Contacts</Text>
|
||||
<Text style={styles.item}>Contacts</Text>
|
||||
<Text style={styles.item}>Contacts</Text>
|
||||
<Text style={styles.item}>Contacts</Text>
|
||||
<Text style={styles.item}>Contacts</Text>
|
||||
<Text style={styles.item}>Contacts</Text>
|
||||
<Text style={styles.item}>Contacts</Text>
|
||||
<Text style={styles.item}>Contacts</Text>
|
||||
<Text style={styles.item}>Contacts</Text>
|
||||
<Text style={styles.item}>Contacts</Text>
|
||||
<Text style={styles.item}>Contacts</Text>
|
||||
<Text style={styles.item}>Contacts</Text>
|
||||
<Text style={styles.item}>Contacts</Text>
|
||||
<Text style={styles.item}>Contacts</Text>
|
||||
<Text style={styles.item}>Contacts</Text>
|
||||
<Text style={styles.item}>Contacts</Text>
|
||||
<Text style={styles.item}>Contacts</Text>
|
||||
<Text style={styles.item}>Contacts</Text>
|
||||
<Text style={styles.item}>Contacts</Text>
|
||||
<Text style={styles.item}>Contacts</Text>
|
||||
<Text style={styles.item}>Contacts</Text>
|
||||
<Text style={styles.item}>Contacts</Text>
|
||||
<Text style={styles.item}>Contacts</Text>
|
||||
<Text style={styles.item}>Contacts</Text>
|
||||
<Text style={styles.item}>ContactsLL</Text>
|
||||
</ScrollView>
|
||||
);
|
||||
}
|
||||
};
|
@ -21,6 +21,9 @@ import { LoginScreen } from 'src/components/screens/login.js'
|
||||
import { Setting } from 'src/models/setting.js'
|
||||
import { Synchronizer } from 'src/synchronizer.js'
|
||||
import { MenuContext } from 'react-native-popup-menu';
|
||||
//import SideMenu from 'react-native-side-menu';
|
||||
import { SideMenu } from 'src/components/side-menu.js';
|
||||
import { SideMenuContent } from 'src/components/side-menu-content.js';
|
||||
|
||||
let defaultState = {
|
||||
notes: [],
|
||||
@ -29,6 +32,7 @@ let defaultState = {
|
||||
selectedFolderId: null,
|
||||
listMode: 'view',
|
||||
user: { email: 'laurent@cozic.net', session: null },
|
||||
showSideMenu: false,
|
||||
};
|
||||
|
||||
const reducer = (state = defaultState, action) => {
|
||||
@ -144,6 +148,24 @@ const reducer = (state = defaultState, action) => {
|
||||
newState.nav = Object.assign({}, state.nav);
|
||||
break;
|
||||
|
||||
case 'SIDE_MENU_TOGGLE':
|
||||
|
||||
newState = Object.assign({}, state);
|
||||
newState.showSideMenu = !newState.showSideMenu
|
||||
break;
|
||||
|
||||
case 'SIDE_MENU_OPEN':
|
||||
|
||||
newState = Object.assign({}, state);
|
||||
newState.showSideMenu = true
|
||||
break;
|
||||
|
||||
case 'SIDE_MENU_CLOSE':
|
||||
|
||||
newState = Object.assign({}, state);
|
||||
newState.showSideMenu = false
|
||||
break;
|
||||
|
||||
}
|
||||
|
||||
return newState;
|
||||
@ -159,11 +181,6 @@ const AppNavigator = StackNavigator({
|
||||
Login: {screen: LoginScreen},
|
||||
});
|
||||
|
||||
const SideMenu = require('react-native-side-menu');
|
||||
|
||||
import Menu from 'src/menu.js';
|
||||
|
||||
|
||||
class AppComponent extends React.Component {
|
||||
|
||||
componentDidMount() {
|
||||
@ -211,11 +228,19 @@ class AppComponent extends React.Component {
|
||||
});
|
||||
}
|
||||
|
||||
sideMenu_change = (isOpen) => {
|
||||
// Make sure showSideMenu property of state is updated
|
||||
// when the menu is open/closed.
|
||||
this.props.dispatch({
|
||||
type: isOpen ? 'SIDE_MENU_OPEN' : 'SIDE_MENU_CLOSE',
|
||||
});
|
||||
}
|
||||
|
||||
render() {
|
||||
const menu = <Menu/>;
|
||||
const sideMenuContent = <SideMenuContent/>;
|
||||
|
||||
return (
|
||||
<SideMenu menu={menu}>
|
||||
<SideMenu menu={sideMenuContent} onChange={this.sideMenu_change}>
|
||||
<MenuContext style={{ flex: 1 }}>
|
||||
<AppNavigator navigation={addNavigationHelpers({
|
||||
dispatch: this.props.dispatch,
|
||||
|
Loading…
Reference in New Issue
Block a user