Added action button

pull/41/head
Laurent Cozic 2017-05-16 21:05:53 +00:00
parent 9f578b0b8c
commit 49dc7d8bc5
7 changed files with 65 additions and 19 deletions

View File

@ -138,3 +138,5 @@ task copyDownloadableDepsToLibs(type: Copy) {
from configurations.compile
into 'libs'
}
apply from: "../../node_modules/react-native-vector-icons/fonts.gradle"

View File

@ -9,6 +9,7 @@
"dependencies": {
"react": "16.0.0-alpha.6",
"react-native": "0.44.0",
"react-native-action-button": "^2.6.9",
"react-native-checkbox": "^1.1.0",
"react-native-popup-menu": "^0.7.4",
"react-native-vector-icons": "^2.0.3",

View File

@ -0,0 +1,55 @@
import React, { Component } from 'react';
import { StyleSheet } from 'react-native';
import Icon from 'react-native-vector-icons/Ionicons';
import ReactNativeActionButton from 'react-native-action-button';
import { connect } from 'react-redux'
import { Log } from 'src/log.js'
const styles = StyleSheet.create({
actionButtonIcon: {
fontSize: 20,
height: 22,
color: 'white',
},
});
class ActionButtonComponent extends React.Component {
newNote_press() {
this.props.dispatch({
type: 'Navigation/NAVIGATE',
routeName: 'Note',
noteId: null,
folderId: this.props.parentFolderId,
});
}
newFolder_press() {
this.props.dispatch({
type: 'Navigation/NAVIGATE',
routeName: 'Folder',
folderId: null,
});
}
render() {
return (
<ReactNativeActionButton buttonColor="rgba(231,76,60,1)">
<ReactNativeActionButton.Item buttonColor='#9b59b6' title="New note" onPress={() => { this.newNote_press() }}>
<Icon name="md-document" style={styles.actionButtonIcon} />
</ReactNativeActionButton.Item>
<ReactNativeActionButton.Item buttonColor='#3498db' title="New folder" onPress={() => { this.newFolder_press() }}>
<Icon name="md-folder" style={styles.actionButtonIcon} />
</ReactNativeActionButton.Item>
</ReactNativeActionButton>
);
}
}
const ActionButton = connect(
(state) => {
return {};
}
)(ActionButtonComponent)
export { ActionButton };

View File

@ -1,10 +1,11 @@
import React, { Component } from 'react';
import { View, Button, Picker, Text } from 'react-native';
import { View, Button, Picker, Text, StyleSheet } from 'react-native';
import { connect } from 'react-redux'
import { Log } from 'src/log.js'
import { FolderList } from 'src/components/folder-list.js'
import { ScreenHeader } from 'src/components/screen-header.js';
import { _ } from 'src/locale.js';
import { ActionButton } from 'src/components/action-button.js';
class FoldersScreenComponent extends React.Component {
@ -12,20 +13,12 @@ class FoldersScreenComponent extends React.Component {
return { header: null };
}
createFolderButton_press = () => {
this.props.dispatch({
type: 'Navigation/NAVIGATE',
routeName: 'Folder',
folderId: null,
});
}
render() {
return (
<View style={{flex: 1}}>
<ScreenHeader navState={this.props.navigation.state} />
<FolderList style={{flex: 1}}/>
<Button title="Create folder" onPress={this.createFolderButton_press} />
<ActionButton></ActionButton>
</View>
);
}

View File

@ -48,6 +48,8 @@ class NoteScreenComponent extends React.Component {
}
render() {
Log.info(this.state.note);
return (
<View style={{flex: 1}}>
<ScreenHeader navState={this.props.navigation.state} />

View File

@ -7,6 +7,7 @@ import { Folder } from 'src/models/folder.js'
import { ScreenHeader } from 'src/components/screen-header.js';
import { MenuOption, Text } from 'react-native-popup-menu';
import { _ } from 'src/locale.js';
import { ActionButton } from 'src/components/action-button.js';
class NotesScreenComponent extends React.Component {
@ -77,11 +78,10 @@ class NotesScreenComponent extends React.Component {
<ScreenHeader title={title} navState={this.props.navigation.state} menuOptions={this.menuOptions()} />
<NoteList style={{flex: 1}}/>
<View style={{flexDirection: 'row'}}>
<Button title="Create note" onPress={this.createNoteButton_press} />
<Button title="Create folder" onPress={this.createFolderButton_press} />
<Button title="Login" onPress={this.loginButton_press} />
<Button title="Sync" onPress={this.syncButton_press} />
</View>
<ActionButton parentFolderId={this.props.selectedFolderId}></ActionButton>
</View>
);
}

View File

@ -18,15 +18,8 @@ import { FolderScreen } from 'src/components/screens/folder.js'
import { FoldersScreen } from 'src/components/screens/folders.js'
import { LoginScreen } from 'src/components/screens/login.js'
import { Setting } from 'src/models/setting.js'
import { MenuContext } from 'react-native-popup-menu';
let defaultState = {
notes: [],
folders: [],