diff --git a/ReactNativeClient/lib/components/action-button.js b/ReactNativeClient/lib/components/action-button.js index 58956496a..506a13036 100644 --- a/ReactNativeClient/lib/components/action-button.js +++ b/ReactNativeClient/lib/components/action-button.js @@ -1,9 +1,10 @@ import React, { Component } from 'react'; -import { StyleSheet } from 'react-native'; +import { StyleSheet, Text } 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 'lib/log.js' +import { _ } from 'lib/locale.js' const styles = StyleSheet.create({ actionButtonIcon: { @@ -15,6 +16,13 @@ const styles = StyleSheet.create({ class ActionButtonComponent extends React.Component { + constructor() { + super(); + this.state = { + toggled: false, + }; + } + newTodo_press() { this.props.dispatch({ type: 'Navigation/NAVIGATE', @@ -44,33 +52,73 @@ class ActionButtonComponent extends React.Component { } render() { - let buttons = []; + let buttons = this.props.buttons ? this.props.buttons : []; - if (this.props.folders.length) { - buttons.push( - { this.newTodo_press() }}> - - - ); + if (this.props.addFolderNoteButtons) { + if (this.props.folders.length) { + buttons.push({ + title: _('New todo'), + onPress: () => { this.newTodo_press() }, + color: '#9b59b6', + icon: 'md-checkbox-outline', + }); - buttons.push( - { this.newNote_press() }}> - + buttons.push({ + title: _('New note'), + onPress: () => { this.newNote_press() }, + color: '#9b59b6', + icon: 'md-document', + }); + } + + buttons.push({ + title: _('New folder'), + onPress: () => { this.newFolder_press() }, + color: '#3498db', + icon: 'md-folder', + }); + } + + let buttonComps = []; + for (let i = 0; i < buttons.length; i++) { + let button = buttons[i]; + let buttonTitle = button.title ? button.title : ''; + let key = buttonTitle.replace(/\s/g, '_') + '_' + button.icon; + buttonComps.push( + + ); } - buttons.push( - { this.newFolder_press() }}> - - - ); + if (!buttonComps.length && !this.props.mainButton) { + return + } - return ( - - { buttons } - - ); + let mainButton = this.props.mainButton ? this.props.mainButton : {}; + let mainIcon = mainButton.icon ? : +; + + if (this.props.isToggle) { + if (!this.props.buttons || this.props.buttons.length != 2) throw new Error('Toggle state requires two buttons'); + let button = this.props.buttons[this.state.toggled ? 1 : 0]; + let mainIcon = + return ( + { + let doToggle = button.onPress(this.state.toggled); + if (doToggle !== false) this.setState({ toggled: !this.state.toggled }); + }} + /> + ); + } else { + return ( + + { buttonComps } + + ); + } } } diff --git a/ReactNativeClient/lib/components/screens/folders.js b/ReactNativeClient/lib/components/screens/folders.js index e2ab75fae..f9ad3df22 100644 --- a/ReactNativeClient/lib/components/screens/folders.js +++ b/ReactNativeClient/lib/components/screens/folders.js @@ -18,7 +18,7 @@ class FoldersScreenComponent extends React.Component { - + ); } diff --git a/ReactNativeClient/lib/components/screens/note.js b/ReactNativeClient/lib/components/screens/note.js index adb847ef4..40516e151 100644 --- a/ReactNativeClient/lib/components/screens/note.js +++ b/ReactNativeClient/lib/components/screens/note.js @@ -4,6 +4,8 @@ import { connect } from 'react-redux' import { Log } from 'lib/log.js' import { Note } from 'lib/models/note.js' import { Folder } from 'lib/models/folder.js' +import { ActionButton } from 'lib/components/action-button.js'; +import Icon from 'react-native-vector-icons/Ionicons'; import { ScreenHeader } from 'lib/components/screen-header.js'; import { Checkbox } from 'lib/components/checkbox.js' import { _ } from 'lib/locale.js'; @@ -189,11 +191,10 @@ class NoteScreenComponent extends React.Component { bodyComponent = ( -