diff options
author | =Corey Hulen <corey@hulen.com> | 2015-06-14 23:53:32 -0800 |
---|---|---|
committer | =Corey Hulen <corey@hulen.com> | 2015-06-14 23:53:32 -0800 |
commit | cf7a05f80f68b5b1c8bcc0089679dd497cec2506 (patch) | |
tree | 70007378570a6962d7c175ca96af732b71aeb6da /web/react/components/setting_picture.jsx | |
download | chat-cf7a05f80f68b5b1c8bcc0089679dd497cec2506.tar.gz chat-cf7a05f80f68b5b1c8bcc0089679dd497cec2506.tar.bz2 chat-cf7a05f80f68b5b1c8bcc0089679dd497cec2506.zip |
first commit
Diffstat (limited to 'web/react/components/setting_picture.jsx')
-rw-r--r-- | web/react/components/setting_picture.jsx | 55 |
1 files changed, 55 insertions, 0 deletions
diff --git a/web/react/components/setting_picture.jsx b/web/react/components/setting_picture.jsx new file mode 100644 index 000000000..62c889b7f --- /dev/null +++ b/web/react/components/setting_picture.jsx @@ -0,0 +1,55 @@ +// Copyright (c) 2015 Spinpunch, Inc. All Rights Reserved. +// See License.txt for license information. + +module.exports = React.createClass({ + setPicture: function(file) { + if (file) { + var reader = new FileReader(); + + var img = this.refs.image.getDOMNode(); + reader.onload = function (e) { + $(img).attr('src', e.target.result) + }; + + reader.readAsDataURL(file); + } + }, + componentWillReceiveProps: function(nextProps) { + if (nextProps.picture) { + this.setPicture(nextProps.picture); + } + }, + render: function() { + var client_error = this.props.client_error ? <div className='form-group has-error'><label className='control-label'>{ this.props.client_error }</label></div> : null; + var server_error = this.props.server_error ? <div className='form-group has-error'><label className='control-label'>{ this.props.server_error }</label></div> : null; + + var img = null; + if (this.props.picture) { + img = (<img ref="image" className="col-xs-5 profile-img" src=""/>); + } else { + img = (<img ref="image" className="col-xs-5 profile-img" src={this.props.src}/>); + } + + var self = this; + + return ( + <ul className="section-max"> + <li className="col-xs-12 section-title">{this.props.title}</li> + <li className="col-xs-offset-3 col-xs-8"> + <ul className="setting-list"> + <li className="row setting-list-item"> + {img} + </li> + <li className="setting-list-item"> + { server_error } + { client_error } + <span className="btn btn-sm btn-primary btn-file sel-btn">Upload<input ref="input" accept=".jpg,.png,.bmp" type="file" onChange={this.props.pictureChange}/></span> + <a className={this.props.submitActive ? "btn btn-sm btn-primary" : "btn btn-sm btn-inactive disabled"} onClick={this.props.submit}>Save</a> + <a className="btn btn-sm theme" href="#" onClick={self.props.updateSection}>Cancel</a> + </li> + </ul> + </li> + </ul> + ); + } +}); |