summaryrefslogtreecommitdiffstats
path: root/web/react/components/setting_picture.jsx
diff options
context:
space:
mode:
Diffstat (limited to 'web/react/components/setting_picture.jsx')
-rw-r--r--web/react/components/setting_picture.jsx55
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>
+ );
+ }
+});