jyapayne/TechNote
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

State progress update

Browse source
This commit is contained in:
Joey Payne 2016-02-18 20:34:05 -07:00
commit 9821373504
3 changed files with 179 additions and 55 deletions
Download patch file Download diff file Expand all files Collapse all files

96
app/main.jsx
View file

@ -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){
super(props)
constructor(props, context){
super(props, context)
createTables()
this.state = {entries: []}
}
static get childContextTypes(){
return {muiTheme: React.PropTypes.object}
}
getChildContext() {
return {
muiTheme: ThemeManager.getMuiTheme(DefaultRawTheme)
this.state = {
entries: [],
contextMenuOpen: false,
contextMenuItems: this.context.contextMenuItems
}
}
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
id="library-nav"
entriesTapped={this.entriesTapped}
className="left inline fill-height"/>
<div onTouchTap={this.tapped}>
<div style={{position: 'absolute',
width: 1,
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')
);

4
app/modules/EntrySelector.jsx
View file

@ -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)
}
}

134
app/modules/LibraryNav.jsx
View file

@ -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){
super(props)
constructor(props, context){
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 || ""}>
<SelectableList subheader="Library">
{this.state.navItems.map(function(item, i){
return <ListItem
primaryText={item.name}
key={i}
leftIcon={item.icon}
rightIcon={<Badge badgeContent={item.notes} />}
value={i}
className="noselect"/>;
})}
</SelectableList>
<Divider />
<List subheader={<div>
<div className="inline">NoteBooks</div>
<IconButton
onTouchTap={this.addNotebookTapped}
tooltip="Add New Notebook"
style={{'zIndex': 10000}}
className="right inline">
<AddCircleOutline
color={colors.grey500}/>
</IconButton>
</div>}>
<div id={this.props.id} className={this.props.className || ""}>
<div style={{position: 'absolute', width: 1, height: 1, top: this.state.popTop, left: this.state.popLeft}} ref='menuPos'></div>
<Popover
open={this.state.open}
anchorEl={this.refs.menuPos}
anchorOrigin={{horizontal: 'middle', vertical: 'bottom'}}
targetOrigin={{horizontal: 'left', vertical: 'top'}}
onRequestClose={this.handleRequestClose}>
<Menu desktop={true}>
<MenuItem primaryText="Rename" leftIcon={<Edit />} />
<Divider />
<MenuItem primaryText="Delete" leftIcon={<Delete />} />
</Menu>
</Popover>
<SelectableList subheader="Library">
{this.state.navItems.map((item, i) => {
return <ListItem
primaryText={item.name}
key={i}
leftIcon={item.icon}
rightIcon={<Badge badgeContent={item.notes} />}
value={i}
onTouchTap={this.menuItemClicked.bind(this, i)}
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
};