ascribe/onion
1
0
Fork 0
mirror of https://github.com/ascribe/onion.git synced 2024-12-23 01:39:36 +01:00
Code Issues Releases Wiki Activity

Add prop to hide label of UploadButton

Browse Source
This commit is contained in:
Brett Sun 2015-12-21 11:46:46 +01:00
parent 3467e9f526
commit ebd575caa3
2 changed files with 38 additions and 32 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

47
js/components/ascribe_uploader/ascribe_upload_button/upload_button.js
View File

@ -1,6 +1,7 @@
'use strict'; 'use strict';
import React from 'react'; import React from 'react';
import classNames from 'classnames';
import { displayValidProgressFilesFilter } from '../react_s3_fine_uploader_utils'; import { displayValidProgressFilesFilter } from '../react_s3_fine_uploader_utils';
import { getLangText } from '../../../utils/lang_utils'; import { getLangText } from '../../../utils/lang_utils';
@ -9,7 +10,7 @@ import { truncateTextAtCharIndex } from '../../../utils/general_utils';
const { func, array, bool, shape, string } = React.PropTypes; const { func, array, bool, shape, string } = React.PropTypes;
export default function UploadButton({ className = 'btn btn-default btn-sm' } = {}) { export default function UploadButton({ className = 'btn btn-default btn-sm', showLabel = true } = {}) {
return React.createClass({ return React.createClass({
displayName: 'UploadButton', displayName: 'UploadButton',
@ -119,28 +120,28 @@ export default function UploadButton({ className = 'btn btn-default btn-sm' } =
}, },
getUploadedFileLabel() { getUploadedFileLabel() {
const uploadedFile = this.getUploadedFile(); if (showLabel) {
const uploadingFiles = this.getUploadingFiles(); const uploadedFile = this.getUploadedFile();
const uploadingFiles = this.getUploadingFiles();
if(uploadingFiles.length) { if (uploadingFiles.length) {
return ( return (
<span> <span>
{' ' + truncateTextAtCharIndex(uploadingFiles[0].name, 40) + ' '} {' ' + truncateTextAtCharIndex(uploadingFiles[0].name, 40) + ' '}
[<a onClick={this.onClickRemove}>{getLangText('cancel upload')}</a>] [<a onClick={this.onClickRemove}>{getLangText('cancel upload')}</a>]
</span> </span>
); );
} else if(uploadedFile) { } else if (uploadedFile) {
return ( return (
<span> <span>
<span className='ascribe-icon icon-ascribe-ok'/> <span className='ascribe-icon icon-ascribe-ok'/>
{' ' + truncateTextAtCharIndex(uploadedFile.name, 40) + ' '} {' ' + truncateTextAtCharIndex(uploadedFile.name, 40) + ' '}
[<a onClick={this.onClickRemove}>{getLangText('remove')}</a>] [<a onClick={this.onClickRemove}>{getLangText('remove')}</a>]
</span> </span>
); );
} else { } else {
return ( return <span>{getLangText('No file chosen')}</span>;
<span>{getLangText('No file chosen')}</span> }
);
} }
}, },
@ -158,7 +159,7 @@ export default function UploadButton({ className = 'btn btn-default btn-sm' } =
* Therefore the wrapping component needs to be an `anchor` tag instead of a `button` * Therefore the wrapping component needs to be an `anchor` tag instead of a `button`
*/ */
return ( return (
<div className="upload-button-wrapper"> <div className={classNames('ascribe-upload-button', {'ascribe-upload-button-has-label': showLabel})}>
{/* {/*
The button needs to be of `type="button"` as it would The button needs to be of `type="button"` as it would
otherwise submit the form its in. otherwise submit the form its in.

19
sass/ascribe_uploader.scss
View File

@ -189,15 +189,20 @@
height: 12px; height: 12px;
} }
.upload-button-wrapper { .ascribe-upload-button {
display: inline-block;
text-align: left; text-align: left;
.btn { &.ascribe-upload-button-has-label {
font-size: 1em; display: block;
margin-right: 1em;
}
span + .btn { .btn {
margin-left: 1em; font-size: 1em;
margin-right: 1em;
}
span + .btn {
margin-left: 1em;
}
} }
} }