State progress update
This commit is contained in:
Joey Payne
parent
42822d2ec9
commit
9821373504
3 changed files with 179 additions and 55 deletions
88
app/main.jsx
88
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,22 +36,18 @@ 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: []}
|
||||
this.state = {
|
||||
entries: [],
|
||||
contextMenuOpen: false,
|
||||
contextMenuItems: this.context.contextMenuItems
|
||||
}
|
||||
}
|
||||
|
||||
static get childContextTypes(){
|
||||
return {muiTheme: React.PropTypes.object}
|
||||
}
|
||||
|
||||
getChildContext() {
|
||||
return {
|
||||
muiTheme: ThemeManager.getMuiTheme(DefaultRawTheme)
|
||||
}
|
||||
}
|
||||
|
||||
entriesTapped = () => {
|
||||
r.table('notes').getAll('jyapayne@gmail.com', {index: 'account_id'}).run().then(
|
||||
|
|
@ -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 (
|
||||
<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')
|
||||
);
|
||||
|
||||
|
|
|
|||
|
|
@ -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)
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -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,17 +152,66 @@ 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 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(function(item, i){
|
||||
{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>
|
||||
|
|
@ -162,7 +221,7 @@ export default class LibraryNav extends React.Component {
|
|||
<IconButton
|
||||
onTouchTap={this.addNotebookTapped}
|
||||
tooltip="Add New Notebook"
|
||||
style={{'zIndex': 10000}}
|
||||
style={{'zIndex': 1000}}
|
||||
className="right inline">
|
||||
<AddCircleOutline
|
||||
color={colors.grey500}/>
|
||||
|
|
@ -194,6 +253,7 @@ 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} />}
|
||||
/>
|
||||
|
|
@ -207,3 +267,7 @@ export default class LibraryNav extends React.Component {
|
|||
}
|
||||
}
|
||||
|
||||
LibraryNav.contextTypes = {
|
||||
contextMenuItems: React.PropTypes.array.isRequired
|
||||
};
|
||||
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue