State progress update

app/main.jsx

@@ -1,13 +1,21 @@
 import React from 'react'
 import injectTapEventPlugin from "react-tap-event-plugin"
 injectTapEventPlugin()
-import ThemeManager from 'material-ui/lib/styles/theme-manager'
+import getMuiTheme from 'material-ui/lib/styles/getMuiTheme'
 import ReactDOM from 'react-dom'
 import LibraryNav from 'LibraryNav'
 import Styles from 'material-ui/lib/styles'
 import Rethink from 'rethinkdbdash'
+import Edit from 'material-ui/lib/svg-icons/editor/mode-edit'
+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'
 
+const {
+    Popover,
+    Menu,
+    MenuItem} = mui
 
 const DefaultRawTheme = Styles.LightRawTheme
 
@@ -28,23 +36,19 @@ function createTables(){
     r.tableCreate('accounts').run().error(function(){})
 }
 
+
 class Main extends React.Component {
-    constructor(props){
+    constructor(props, context){
-        super(props)
+        super(props, context)
         createTables()
-        this.state = {entries: []}
+        this.state = {
-    }
+            entries: [],
-
+            contextMenuOpen: false,
-    static get childContextTypes(){
+            contextMenuItems: this.context.contextMenuItems
-        return {muiTheme: React.PropTypes.object}
-    }
-
-    getChildContext() {
-        return {
-            muiTheme: ThemeManager.getMuiTheme(DefaultRawTheme)
         }
     }
 
+
     entriesTapped = () => {
         r.table('notes').getAll('jyapayne@gmail.com', {index: 'account_id'}).run().then(
             function(notes){
@@ -53,20 +57,76 @@ class Main extends React.Component {
         )
     };
 
+  	handleRequestClose = () => {
+		this.setState({
+		  contextMenuOpen: false,
+		})
+  	};
+
+    tapped = () => {
+        console.log('tapped')
+        console.log(this.context.contextMenuItems)
+    };
+
     render() {
     
         return (
-            <LibraryNav
+            <div onTouchTap={this.tapped}>
-                id="library-nav"
+                <div style={{position: 'absolute',
-                entriesTapped={this.entriesTapped}
+                             width: 1,
-                className="left inline fill-height"/>
+                             height: 1,
+                             top: this.state.popTop,
+                             left: this.state.popLeft}} ref='menuPos'></div>
+                <Popover
+                    open={this.state.contextMenuOpen}
+                    anchorEl={this.refs.menuPos}
+          			anchorOrigin={{horizontal: 'middle', vertical: 'bottom'}}
+          			targetOrigin={{horizontal: 'left', vertical: 'top'}}
+                    onRequestClose={this.handleRequestClose}>
+                    <Menu desktop={true}>
+                        {this.state.contextMenuItems.map(function (el, i){
+                            return el;
+                        })}
+                    </Menu>
+                </Popover>
+
+                <LibraryNav
+                    id="library-nav"
+                    ref="libraryNav"
+                    entriesTapped={this.entriesTapped}
+                    className="left inline fill-height"/>
+            </div>
         )
     }
 
 }
+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 />
+    }
+
+}
+
+
+Main.contextTypes = {
+    contextMenuItems: React.PropTypes.array.isRequired
+};
+
 
 ReactDOM.render(
-    <Main />,
+    <S />,
     document.getElementById('main')
 );
 

app/modules/EntrySelector.jsx

@@ -1,7 +1,7 @@
 import React from 'react'
 
 import mui from 'material-ui'
-import ThemeManager from 'material-ui/lib/styles/theme-manager'
+import getMuiTheme from 'material-ui/lib/styles/getMuiTheme'
 
 import List from 'material-ui/lib/lists/list'
 import ListItem from 'material-ui/lib/lists/list-item'
@@ -46,7 +46,7 @@ export default class EntrySelector extends React.Component {
 
     getChildContext() {
         return {
-            muiTheme: ThemeManager.getMuiTheme(DefaultRawTheme)
+            muiTheme: getMuiTheme(DefaultRawTheme)
         }
     }
 

app/modules/LibraryNav.jsx

@@ -1,7 +1,7 @@
 import React from 'react'
 
 import mui from 'material-ui'
-import ThemeManager from 'material-ui/lib/styles/theme-manager'
+import getMuiTheme from 'material-ui/lib/styles/getMuiTheme'
 
 import styles from 'material-ui/lib/styles'
 import List from 'material-ui/lib/lists/list'
@@ -11,6 +11,7 @@ import NoteBook from 'material-ui/lib/svg-icons/action/class'
 import History from 'material-ui/lib/svg-icons/action/history'
 import AddCircleOutline from 'material-ui/lib/svg-icons/content/add-circle-outline'
 import Folder from 'material-ui/lib/svg-icons/file/folder'
+import Edit from 'material-ui/lib/svg-icons/editor/mode-edit'
 import Delete from 'material-ui/lib/svg-icons/action/delete'
 import Divider from 'material-ui/lib/divider'
 import { SelectableContainerEnhance } from 'material-ui/lib/hoc/selectable-enhance'
@@ -24,9 +25,11 @@ const {AppBar,
       EnhancedButton,
       NavigationClose,
       Menu,
+      MenuItem,
       Mixins,
       RaisedButton,
       FlatButton,
+      Popover,
       Badge,
       TextField,
       Dialog,
@@ -66,35 +69,41 @@ const DefaultRawTheme = Styles.LightRawTheme
 
 export default class LibraryNav extends React.Component {
 
-    constructor(props){
+    constructor(props, context){
-        super(props)
+        super(props, context)
+        console.log(this.state)
         this.state = {
             open: false,
             navItems: [
                 {
                     'name': 'Entries',
                     'icon': <img src="images/note.svg"/>,
-                    'notes': 10
+                    'notes': 10,
+                    'clicked': this.props.entriesTapped || this.entriesTapped
                 },
                 {
                     'name': 'Starred',
                     'icon': <ActionGrade color={colors.amberA700}/>,
-                    'notes': 1
+                    'notes': 1,
+                    'clicked': this.props.starredTapped || this.starredTapped
                 },
                 {
                     'name': 'Recents',
                     'icon': <History color="#4BAE4E"/>,
-                    'notes': 10
+                    'notes': 10,
+                    'clicked': this.props.recentsTapped || this.recentsTapped
                 },
                 {
                     'name': 'Trash',
                     'icon': <Delete color={colors.grey500}/>,
-                    'notes': 0
+                    'notes': 0,
+                    'clicked': this.props.trashTapped || this.trashTapped
                 },
                 {
                     'name': 'All Notes',
                     'icon': <Folder color="#FFCC5F" />,
-                    'notes': 0
+                    'notes': 0,
+                    'clicked': this.props.allNotesTapped || this.allNotesTapped
                 },
 
             ],
@@ -109,9 +118,10 @@ export default class LibraryNav extends React.Component {
         return {muiTheme: React.PropTypes.object}
     }
 
+
     getChildContext() {
         return {
-            muiTheme: ThemeManager.getMuiTheme(DefaultRawTheme)
+            muiTheme: getMuiTheme(DefaultRawTheme)
         }
     }
 
@@ -142,32 +152,81 @@ export default class LibraryNav extends React.Component {
     newNotebookTyped = (i) => {
     };
 
+    menuItemClicked = (i, ev) => {
+        var nativeEvent = ev.nativeEvent
+        if(nativeEvent.button == 2){
+            //Right click
+
+        }
+    };
+
+    noteBookTapped = (i, ev) => {
+        var nativeEvent = ev.nativeEvent
+        if(nativeEvent.button == 2){
+            //Right click
+            var x = nativeEvent.pageX
+            var y = nativeEvent.pageY
+            this.context.contextMenuItems = [
+                        <MenuItem primaryText="Rename" leftIcon={<Edit />} />,
+                        <Divider />,
+                        <MenuItem primaryText="Delete" leftIcon={<Delete />} />
+            ]
+
+            this.setState({
+                popTop: y,
+                popLeft: x,
+                open: true 
+            })
+        }
+    
+    };
+
+  	handleRequestClose = () => {
+		this.setState({
+		  open: false,
+		})
+  	};
+
     render(){
         return (
-              <div id={this.props.id} className={this.props.className || ""}>
+            <div id={this.props.id} className={this.props.className || ""}>
-                  <SelectableList subheader="Library">
+                <div style={{position: 'absolute', width: 1, height: 1, top: this.state.popTop, left: this.state.popLeft}} ref='menuPos'></div>
-                    {this.state.navItems.map(function(item, i){
+                <Popover
-                        return <ListItem
+                    open={this.state.open}
-                                primaryText={item.name}
+                    anchorEl={this.refs.menuPos}
-                                key={i}
+          			anchorOrigin={{horizontal: 'middle', vertical: 'bottom'}}
-                                leftIcon={item.icon}
+          			targetOrigin={{horizontal: 'left', vertical: 'top'}}
-                                rightIcon={<Badge badgeContent={item.notes} />}
+                    onRequestClose={this.handleRequestClose}>
-								value={i}
+                    <Menu desktop={true}>
-                                className="noselect"/>;
+                        <MenuItem primaryText="Rename" leftIcon={<Edit />} />
-                    })}
+                        <Divider />
-                </SelectableList>
+                        <MenuItem primaryText="Delete" leftIcon={<Delete />} />
-                <Divider />
+                    </Menu>
-                <List subheader={<div>
+                </Popover>
-                                    <div className="inline">NoteBooks</div>
+                <SelectableList subheader="Library">
-                                    <IconButton
+                        {this.state.navItems.map((item, i) => {
-                                        onTouchTap={this.addNotebookTapped}
+                            return <ListItem
-                                        tooltip="Add New Notebook"
+                                    primaryText={item.name}
-                                        style={{'zIndex': 10000}}
+                                    key={i}
-                                        className="right inline">
+                                    leftIcon={item.icon}
-                                        <AddCircleOutline
+                                    rightIcon={<Badge badgeContent={item.notes} />}
-                                            color={colors.grey500}/>
+                                    value={i}
-                                    </IconButton>
+                                    onTouchTap={this.menuItemClicked.bind(this, i)}
-                                </div>}>
+                                    className="noselect"/>;
+                        })}
+                  </SelectableList>
+                  <Divider />
+                  <List subheader={<div>
+                                        <div className="inline">NoteBooks</div>
+                                        <IconButton
+                                            onTouchTap={this.addNotebookTapped}
+                                            tooltip="Add New Notebook"
+                                            style={{'zIndex': 1000}}
+                                            className="right inline">
+                                            <AddCircleOutline
+                                                color={colors.grey500}/>
+                                        </IconButton>
+                                    </div>}>
 
                         {this.state.notebooks.map((notebook, i) =>{
                             var l = null
@@ -194,16 +253,21 @@ export default class LibraryNav extends React.Component {
                                         key={i}
                                         primaryText={notebook.title}
                                         className="noselect"
+                                        onTouchTap={this.noteBookTapped.bind(this, i)}
                                         leftIcon={<NoteBook color={colors.grey500}/>}
                                         rightIcon={<Badge badgeContent={notebook.notes} />}
                                     />
                             }
                             return l
                         })}
-                </List>
+                  </List>
 
-              </div>
+            </div>
         )
     }
 }
 
+LibraryNav.contextTypes = {
+    contextMenuItems: React.PropTypes.array.isRequired
+};
+