1
0
mirror of https://github.com/BoostIo/Boostnote synced 2025-12-13 17:56:25 +00:00

add ModalBase, LaunchModal & install Reflux

This commit is contained in:
Rokt33r
2015-07-09 01:48:49 +09:00
parent 27701bbe1b
commit 472d79cbf2
18 changed files with 415 additions and 24 deletions

View File

@@ -28,11 +28,11 @@ module.exports = React.createClass({
<form onSubmit={this.handleSubmit}>
<div className='form-group'>
<label>E-mail</label>
<input valueLink={this.linkState('email')} type='text' placeholder='E-mail'/>
<input className='block-input' valueLink={this.linkState('email')} type='text' placeholder='E-mail'/>
</div>
<div className='form-group'>
<label>Password</label>
<input valueLink={this.linkState('password')} onChange={this.handleChange} type='password' placeholder='Password'/>
<input className='block-input' valueLink={this.linkState('password')} onChange={this.handleChange} type='password' placeholder='Password'/>
</div>
<div className='form-group'>
<button className='btn-primary btn-block' type='submit'><i className='fa fa-sign-in'></i> Login</button>

View File

@@ -2,6 +2,8 @@ var React = require('react/addons')
var RouteHandler = require('react-router').RouteHandler
var ReactRouter = require('react-router')
var Link = ReactRouter.Link
var ModalBase = require('../Components/ModalBase')
var LaunchModal = require('../Components/LaunchModal')
var userPlanets = [
{
@@ -62,6 +64,22 @@ var SideNavigator = React.createClass({
name: React.PropTypes.string
})
},
getInitialState: function () {
return {
isLaunchModalOpen: false
}
},
openLaunchModal: function () {
console.log('and...OPEN!!')
this.setState({isLaunchModalOpen: true})
},
closeLaunchModal: function () {
this.setState({isLaunchModalOpen: false})
},
submitLaunchModal: function (ret) {
console.log(ret)
this.setState({isLaunchModalOpen: false})
},
render: function () {
var currentPlanetName = this.props.currentPlanet.name
@@ -73,9 +91,12 @@ var SideNavigator = React.createClass({
<i className='fa fa-chevron-down'></i>
</button>
</div>
<button className='btn-primary btn-block'>
<button onClick={this.openLaunchModal} className='btn-primary btn-block'>
<i className='fa fa-rocket fa-fw'/> Launch
</button>
<ModalBase isOpen={this.state.isLaunchModalOpen} close={this.closeLaunchModal}>
<LaunchModal submit={this.submitLaunchModal} close={this.closeLaunchModal}/>
</ModalBase>
<nav>
<Link to='dashboard' params={{planetName: currentPlanetName}}>
<i className='fa fa-home fa-fw'/> Home

View File

@@ -30,20 +30,20 @@ module.exports = React.createClass({
<form onSubmit={this.handleSubmit}>
<div className='form-group'>
<label>E-mail</label>
<input valueLink={this.linkState('email')} type='text' placeholder='E-mail'/>
<input className='block-input' valueLink={this.linkState('email')} type='text' placeholder='E-mail'/>
</div>
<div className='form-group'>
<label>Password</label>
<input valueLink={this.linkState('password')} type='password' placeholder='Password'/>
<input className='block-input' valueLink={this.linkState('password')} type='password' placeholder='Password'/>
</div>
<hr></hr>
<div className='form-group'>
<label>User name</label>
<input valueLink={this.linkState('name')} type='text' placeholder='name'/>
<input className='block-input' valueLink={this.linkState('name')} type='text' placeholder='name'/>
</div>
<div className='form-group'>
<label>Profile name</label>
<input valueLink={this.linkState('profileName')} type='text' placeholder='Profile name'/>
<input className='block-input' valueLink={this.linkState('profileName')} type='text' placeholder='Profile name'/>
</div>
<div className='form-group'>
<button className='btn-primary btn-block' type='submit'><i className='fa fa-sign-in'></i> Register</button>

View File

@@ -32,7 +32,7 @@ var SnippetList = React.createClass({
return (
<div className='SnippetList'>
<div className='search form-group'><input type='text' placeholder='Search...'/></div>
<div className='search'><input className='block-input' type='text' placeholder='Search...'/></div>
<ul>
{snippets}
</ul>
@@ -106,10 +106,58 @@ var SnippetContainer = React.createClass({
selectSnippet: function (snippet) {
this.setState({currentSnippet: snippet})
},
updateSnippet: function (snippet) {
var snippets = this.state.snippets.map(function (_snippet) {
if (snippet.id === _snippet.id) {
return snippet
}
return _snippet
})
var currentSnippet = this.state.currentSnippet.id === snippet.id ? snippet : this.state.currentSnippet
this.setState({snippets: snippets, currentSnippet: currentSnippet})
},
destroySnippet: function (snippet) {
var snippets = this.state.snippets
var currentSnippet = this.state.currentSnippet
if (currentSnippet.id === snippet.id) {
var index
snippets.some(function (_snippet, _index) {
if (snippet.id === _snippet.id) {
index = _index
return true
}
return false
})
if (index == null) {
index = 0
} else if (index > snippet.length - 1) {
index--
} else {
index++
}
if (snippets.length > 0) {
currentSnippet = snippets[index]
} else {
currentSnippet = {}
}
}
snippets = snippets.filter(function (_snippet, index) {
if (snippet.id === _snippet.id) {
return false
}
return true
})
this.setState({snippets: snippets, currentSnippet: currentSnippet})
},
render: function () {
return (
<div className='SnippetContainer'>
<SnippetList selectSnippet={this.selectSnippet} snippets={this.state.snippets}/>
<SnippetList selectSnippet={this.selectSnippet} snippets={this.state.snippets} currentSnippet={this.state.currentSnippet}/>
<SnippetViewer snippet={this.state.currentSnippet}/>
</div>
)