parent
f24cb32e99
commit
d0e2733f63
@ -0,0 +1,17 @@ |
|||||||
|
import PureRenderMixin from 'react-addons-pure-render-mixin'; |
||||||
|
|
||||||
|
const Drawer = React.createClass({ |
||||||
|
|
||||||
|
mixins: [PureRenderMixin], |
||||||
|
|
||||||
|
render () { |
||||||
|
return ( |
||||||
|
<div style={{ width: '280px', boxSizing: 'border-box', background: '#454b5e', margin: '10px', marginRight: '0', padding: '0', display: 'flex', flexDirection: 'column' }}> |
||||||
|
{this.props.children} |
||||||
|
</div> |
||||||
|
); |
||||||
|
} |
||||||
|
|
||||||
|
}); |
||||||
|
|
||||||
|
export default Drawer; |
@ -0,0 +1,40 @@ |
|||||||
|
import IconButton from './icon_button'; |
||||||
|
import PureRenderMixin from 'react-addons-pure-render-mixin'; |
||||||
|
|
||||||
|
const FollowForm = React.createClass({ |
||||||
|
|
||||||
|
propTypes: { |
||||||
|
text: React.PropTypes.string.isRequired, |
||||||
|
is_submitting: React.PropTypes.bool, |
||||||
|
onChange: React.PropTypes.func.isRequired, |
||||||
|
onSubmit: React.PropTypes.func.isRequired |
||||||
|
}, |
||||||
|
|
||||||
|
mixins: [PureRenderMixin], |
||||||
|
|
||||||
|
handleChange (e) { |
||||||
|
this.props.onChange(e.target.value); |
||||||
|
}, |
||||||
|
|
||||||
|
handleKeyUp (e) { |
||||||
|
if (e.keyCode === 13) { |
||||||
|
this.props.onSubmit(); |
||||||
|
} |
||||||
|
}, |
||||||
|
|
||||||
|
handleSubmit () { |
||||||
|
this.props.onSubmit(); |
||||||
|
}, |
||||||
|
|
||||||
|
render () { |
||||||
|
return ( |
||||||
|
<div style={{ display: 'flex', lineHeight: '20px', padding: '10px', background: '#373b4a' }}> |
||||||
|
<input type='text' disabled={this.props.is_submitting} placeholder='username@domain' value={this.props.text} onKeyUp={this.handleKeyUp} onChange={this.handleChange} className='follow-form__input' style={{ flex: '1 1 auto', boxSizing: 'border-box', display: 'block', border: 'none', padding: '10px', fontFamily: 'Roboto', color: '#282c37', fontSize: '14px', margin: '0' }} /> |
||||||
|
<div style={{ padding: '10px', paddingRight: '0' }}><IconButton title='Follow' size={20} icon='user-plus' onClick={this.handleSubmit} disabled={this.props.is_submitting} /></div> |
||||||
|
</div> |
||||||
|
); |
||||||
|
} |
||||||
|
|
||||||
|
}); |
||||||
|
|
||||||
|
export default FollowForm; |
@ -0,0 +1,24 @@ |
|||||||
|
import { connect } from 'react-redux'; |
||||||
|
import FollowForm from '../components/follow_form'; |
||||||
|
import { changeFollow, submitFollow } from '../actions/follow'; |
||||||
|
|
||||||
|
const mapStateToProps = function (state, props) { |
||||||
|
return { |
||||||
|
text: state.getIn(['follow', 'text']), |
||||||
|
is_submitting: state.getIn(['follow', 'is_submitting']) |
||||||
|
}; |
||||||
|
}; |
||||||
|
|
||||||
|
const mapDispatchToProps = function (dispatch) { |
||||||
|
return { |
||||||
|
onChange: function (text) { |
||||||
|
dispatch(changeFollow(text)); |
||||||
|
}, |
||||||
|
|
||||||
|
onSubmit: function () { |
||||||
|
dispatch(submitFollow()); |
||||||
|
} |
||||||
|
} |
||||||
|
}; |
||||||
|
|
||||||
|
export default connect(mapStateToProps, mapDispatchToProps)(FollowForm); |
Loading…
Reference in new issue