IntenseWebs/mattermost
3
0
Fork 0
mirror of https://github.com/mattermost/mattermost.git synced 2025-02-25 18:55:24 -06:00
Code Issues Packages Projects Releases Wiki Activity

Updating slack import UI with states

Browse Source
This commit is contained in:
Asaad Mahmood
2015-09-30 19:35:35 +05:00
parent 296b930768
commit 71dba4abcf
1 changed files with 33 additions and 59 deletions
Download Patch File Download Diff File Expand all files Collapse all files

92
web/react/components/setting_upload.jsx
View File

@@ -7,29 +7,31 @@ export default class SettingsUpload extends React.Component {
this.doFileSelect = this.doFileSelect.bind(this);
this.doSubmit = this.doSubmit.bind(this);
this.onFileSelect = this.onFileSelect.bind(this);
this.state = {
clientError: this.props.clientError,
serverError: this.props.serverError,
fileSelected: ''
filename: ''
};
}
componentWillReceiveProps() {
this.setState({
clientError: this.props.clientError,
serverError: this.props.serverError,
fileSelected: ''
serverError: this.props.serverError
});
}
doFileSelect(e) {
e.preventDefault();
var filename = $(e.target).val();
if (filename.substring(3, 11) === 'fakepath') {
filename = filename.substring(12);
}
this.setState({
clientError: '',
serverError: '',
fileSelected: ''
filename
});
}
@@ -43,71 +45,28 @@ export default class SettingsUpload extends React.Component {
}
}
onFileSelect(e) {
var filename = $(e.target).val();
if (filename.substring(3, 11) === 'fakepath') {
filename = filename.substring(12);
}
this.setState({
fileSelected: filename
});
}
render() {
var clientError = null;
let clientError = null;
if (this.state.clientError) {
clientError = (
<div className='file-status'>{this.state.clientError}</div>
);
}
var serverError = null;
let serverError = null;
if (this.state.serverError) {
serverError = (
<div className='file-status'>{this.state.serverError}</div>
);
}
var fileSelected = (
<div>
<span className='btn btn-sm btn-primary btn-file sel-btn'>
{'Select file'}
<input
ref='uploadinput'
accept={this.props.fileTypesAccepted}
type='file'
onChange={this.onFileSelect}
/>
</span>
<a
className={'btn btn-sm btn-primary disabled'}
onClick={this.doSubmit}
>
{'Import'}
</a>
<div className='file-status file-name hidden'></div>
</div>
);
if (this.state.fileSelected) {
fileSelected = (
<div>
<span className='btn btn-sm btn-primary btn-file sel-btn'>
{'Select file'}
<input
ref='uploadinput'
accept={this.props.fileTypesAccepted}
type='file'
onChange={this.onFileSelect}
/>
</span>
<a
className={'btn btn-sm btn-primary'}
onClick={this.doSubmit}
>
{'Import'}
</a>
<div className='file-status file-name'>{this.state.fileSelected}</div>
</div>
let fileNameText = null;
let submitButtonClass = 'btn btn-sm btn-primary disabled';
if (this.state.filename) {
fileNameText = (
<div className='file-status file-name'>{this.state.filename}</div>
);
submitButtonClass = 'btn btn-sm btn-primary';
}
return (
<ul className='section-max'>
<li className='col-sm-12 section-title'>{this.props.title}</li>
@@ -115,7 +74,22 @@ export default class SettingsUpload extends React.Component {
<li className='col-sm-offset-3 col-sm-9'>
<ul className='setting-list'>
<li className='setting-list-item'>
{fileSelected}
<span className='btn btn-sm btn-primary btn-file sel-btn'>
{'Select file'}
<input
ref='uploadinput'
accept={this.props.fileTypesAccepted}
type='file'
onChange={this.doFileSelect}
/>
</span>
<a
className={submitButtonClass}
onClick={this.doSubmit}
>
{'Import'}
</a>
{fileNameText}
{serverError}
{clientError}
</li>
@@ -133,4 +107,4 @@ SettingsUpload.propTypes = {
clientError: React.PropTypes.string,
serverError: React.PropTypes.string,
helpText: React.PropTypes.object
};
};