diff --git a/app/actions/index.jsx b/app/actions/index.jsx new file mode 100644 index 0000000..d137b51 --- /dev/null +++ b/app/actions/index.jsx @@ -0,0 +1,13 @@ +import * as types from '../constants' + +export function updateContextMenu(items) { + return { type: types.UPDATE_CONTEXT_MENU, items } +} + +export function openContextMenu(x, y){ + return {type: types.OPEN_CONTEXT_MENU, x, y} +} + +export function closeContextMenu(){ + return {type: types.CLOSE_CONTEXT_MENU} +} diff --git a/app/constants/index.jsx b/app/constants/index.jsx new file mode 100644 index 0000000..72dd52f --- /dev/null +++ b/app/constants/index.jsx @@ -0,0 +1,3 @@ +export const UPDATE_CONTEXT_MENU = "UPDATE_CONTEXT_MENU" +export const OPEN_CONTEXT_MENU = "OPEN_CONTEXT_MENU" +export const CLOSE_CONTEXT_MENU = "CLOSE_CONTEXT_MENU" diff --git a/app/main.jsx b/app/main.jsx index d58144a..5118131 100644 --- a/app/main.jsx +++ b/app/main.jsx @@ -11,6 +11,20 @@ import Delete from 'material-ui/lib/svg-icons/action/delete' import Divider from 'material-ui/lib/divider' import moment from 'moment' import mui from 'material-ui' +import {Provider} from 'react-redux' +import { createStore } from 'redux' +import rootReducer from './reducers' +import * as ContextMenuActions from './actions' + +import { bindActionCreators } from 'redux' +import { connect } from 'react-redux' + + +function getStore(reducer, initialState){ + return createStore(reducer, initialState) +} + +const store = getStore(rootReducer) const { Popover, @@ -43,11 +57,18 @@ class Main extends React.Component { createTables() this.state = { entries: [], - contextMenuOpen: false, - contextMenuItems: this.context.contextMenuItems } } + static get childContextTypes(){ + return {muiTheme: React.PropTypes.object} + } + + getChildContext() { + return { + muiTheme: getMuiTheme(DefaultRawTheme) + } + } entriesTapped = () => { r.table('notes').getAll('jyapayne@gmail.com', {index: 'account_id'}).run().then( @@ -58,33 +79,27 @@ class Main extends React.Component { }; handleRequestClose = () => { - this.setState({ - contextMenuOpen: false, - }) + this.props.contextMenuActions.closeContextMenu() }; - tapped = () => { - console.log('tapped') - console.log(this.context.contextMenuItems) - }; - render() { + const { contextMenu, contextMenuActions } = this.props return ( -
+
+ top: contextMenu.y, + left: contextMenu.x}} ref='menuPos'>
- {this.state.contextMenuItems.map(function (el, i){ + {contextMenu.items.map(function (el, i){ return el; })} @@ -94,39 +109,40 @@ class Main extends React.Component { id="library-nav" ref="libraryNav" entriesTapped={this.entriesTapped} - className="left inline fill-height"/> + className="left inline fill-height" + {...contextMenuActions} + />
) } - -} -class S extends React.Component { - static get childContextTypes(){ - return {muiTheme: React.PropTypes.object, - contextMenuItems: React.PropTypes.array} - } - - getChildContext() { - return { - muiTheme: getMuiTheme(DefaultRawTheme), - contextMenuItems: [] - } - } - - render(){ - return
- } - } +Main.propTypes = { + contextMenu: React.PropTypes.object.isRequired, + contextMenuActions: React.PropTypes.object.isRequired +} -Main.contextTypes = { - contextMenuItems: React.PropTypes.array.isRequired -}; +function mapStateToProps(state) { + return { + contextMenu: state.contextMenu + } +} +function mapDispatchToProps(dispatch) { + return { + contextMenuActions: bindActionCreators(ContextMenuActions, dispatch) + } +} + +let App = connect( + mapStateToProps, + mapDispatchToProps +)(Main) + +export default App ReactDOM.render( - , + , document.getElementById('main') ); diff --git a/app/modules/LibraryNav.jsx b/app/modules/LibraryNav.jsx index f4774df..d7eed06 100644 --- a/app/modules/LibraryNav.jsx +++ b/app/modules/LibraryNav.jsx @@ -1,4 +1,5 @@ import React from 'react' +import ReactDOM from 'react-dom' import mui from 'material-ui' import getMuiTheme from 'material-ui/lib/styles/getMuiTheme' @@ -18,6 +19,16 @@ import { SelectableContainerEnhance } from 'material-ui/lib/hoc/selectable-enhan const colors = styles.Colors +function eventFire(el, etype){ + if (el.fireEvent) { + el.fireEvent('on' + etype); + } else { + var evObj = document.createEvent('Events'); + evObj.initEvent(etype, true, false); + el.dispatchEvent(evObj); + } +} + const {AppBar, AppCanvas, FontIcon, @@ -71,7 +82,6 @@ export default class LibraryNav extends React.Component { constructor(props, context){ super(props, context) - console.log(this.state) this.state = { open: false, navItems: [ @@ -109,6 +119,17 @@ export default class LibraryNav extends React.Component { ], notebooks: [ {'state': 'editing', 'title': '', 'notes': 0}, + {'state': 'displaying', 'title': 'FieldNotes', 'notes': 10}, + {'state': 'displaying', 'title': 'FieldNotes', 'notes': 10}, + {'state': 'displaying', 'title': 'FieldNotes', 'notes': 10}, + {'state': 'displaying', 'title': 'FieldNotes', 'notes': 10}, + {'state': 'displaying', 'title': 'FieldNotes', 'notes': 10}, + {'state': 'displaying', 'title': 'FieldNotes', 'notes': 10}, + {'state': 'displaying', 'title': 'FieldNotes', 'notes': 10}, + {'state': 'displaying', 'title': 'FieldNotes', 'notes': 10}, + {'state': 'displaying', 'title': 'FieldNotes', 'notes': 10}, + {'state': 'displaying', 'title': 'FieldNotes', 'notes': 10}, + {'state': 'displaying', 'title': 'FieldNotes', 'notes': 10}, {'state': 'displaying', 'title': 'FieldNotes', 'notes': 10} ] } @@ -139,6 +160,10 @@ export default class LibraryNav extends React.Component { nb.state = 'displaying' this.setState({notebooks: this.state.notebooks}) } + else if(nb.title){ + nb.state = 'displaying' + this.setState({notebooks: this.state.notebooks}) + } }; addNotebookTapped = () => { @@ -160,49 +185,53 @@ export default class LibraryNav extends React.Component { } }; + renameTapped = (i) => { + var nbs = this.state.notebooks + nbs[i].state = 'editing' + this.setState({notebooks: nbs}) + this.props.closeContextMenu() + //ReactDOM.findDOMNode(this.refs[nbs[i].title+i]).click() + } + + deleteTapped = (i) => { + var nbs = this.state.notebooks + nbs.splice(i, 1) + this.setState({notebooks: nbs}) + this.props.closeContextMenu() + } + + contextMenuItems = (i) => { + return [ + } + onTouchTap={this.renameTapped.bind(this, i)}/>, + , + } /> + ] + + }; + noteBookTapped = (i, ev) => { var nativeEvent = ev.nativeEvent if(nativeEvent.button == 2){ //Right click var x = nativeEvent.pageX var y = nativeEvent.pageY - this.context.contextMenuItems = [ - } />, - , - } /> - ] - this.setState({ - popTop: y, - popLeft: x, - open: true - }) + this.props.updateContextMenu(this.contextMenuItems(i)) + this.props.openContextMenu(x, y) } - }; - handleRequestClose = () => { - this.setState({ - open: false, - }) - }; - render(){ return (
-
- - - } /> - - } /> - - {this.state.navItems.map((item, i) => { return +
NoteBooks
}> +
{this.state.notebooks.map((notebook, i) =>{ var l = null @@ -252,6 +283,7 @@ export default class LibraryNav extends React.Component { l = } @@ -260,14 +292,11 @@ export default class LibraryNav extends React.Component { } return l })} +
- +
) } } -LibraryNav.contextTypes = { - contextMenuItems: React.PropTypes.array.isRequired -}; - diff --git a/app/reducers/contextMenu.jsx b/app/reducers/contextMenu.jsx new file mode 100644 index 0000000..0ecbb0f --- /dev/null +++ b/app/reducers/contextMenu.jsx @@ -0,0 +1,31 @@ +import { UPDATE_CONTEXT_MENU, OPEN_CONTEXT_MENU, CLOSE_CONTEXT_MENU } from '../constants' + + +const initialState = + { + opened: false, + x: 0, + y: 0, + items: [] + } + +export default function contextMenu(state = initialState, action){ + switch (action.type) { + case UPDATE_CONTEXT_MENU: + return Object.assign({}, state,{ + items: action.items + }) + case OPEN_CONTEXT_MENU: + return Object.assign({}, state, { + opened: true, + x: action.x, + y: action.y + }) + case CLOSE_CONTEXT_MENU: + return Object.assign({}, state, { + opened: false + }) + default: + return state + } +} diff --git a/app/reducers/index.jsx b/app/reducers/index.jsx new file mode 100644 index 0000000..0ffef29 --- /dev/null +++ b/app/reducers/index.jsx @@ -0,0 +1,8 @@ +import { combineReducers } from 'redux' +import contextMenu from './contextMenu' + +const rootReducer = combineReducers({ + contextMenu +}) + +export default rootReducer diff --git a/index.html b/index.html index 236cd8a..58d415a 100644 --- a/index.html +++ b/index.html @@ -10,7 +10,7 @@ -
+
diff --git a/main.js b/main.js index 9948024..fbc1485 100644 --- a/main.js +++ b/main.js @@ -11,11 +11,7 @@ var mainWindow = null; // Quit when all windows are closed. app.on('window-all-closed', function() { - // On OS X it is common for applications and their menu bar - // to stay active until the user quits explicitly with Cmd + Q - if (process.platform != 'darwin') { app.quit(); - } }); // This method will be called when Electron has finished diff --git a/package.json b/package.json index 299c7cf..8caee7d 100644 --- a/package.json +++ b/package.json @@ -63,7 +63,9 @@ "react": "^0.14.7", "react-dom": "^0.14.7", "react-quill": "^0.4.1", + "react-redux": "^4.4.0", "react-tap-event-plugin": "^0.2.2", + "redux": "^3.3.1", "rethinkdbdash": "^2.2.17" }, "ppapi_flash_version": "", @@ -149,6 +151,7 @@ "babel-preset-stage-2": "^6.5.0", "babel-preset-stage-3": "^6.5.0", "http-server": "^0.8.4", + "redux-devtools": "^3.1.1", "webpack": "*", "webpack-dev-server": "^1.11.0" }, diff --git a/style.css b/style.css index 6aad9b3..fad1aa1 100644 --- a/style.css +++ b/style.css @@ -3,7 +3,6 @@ body, html{ height: 100%; } #main{ - min-height: 100%; } .fill-height{ height: 100%; @@ -23,4 +22,6 @@ body, html{ #library-nav{ border-right: solid 1px #d9d9d9; width: 300px; + height: 100%; + min-height: 100%; }