@imposium-hub/components 1.39.1 → 1.40.0

package/components/assets/AssetsUploadMenu.tsx

@@ -2,15 +2,19 @@ import * as React from 'react';
 import { assets as copy } from '../../constants/copy';
 import CheckboxField from '../checkbox-field/CheckboxField';
 import DeterminateLoader from '../determinate-loader/DeterminateLoader';
-import { toggleAutoTag, toggleAssignToStory } from '../../redux/actions/asset-uploads';
+import { toggleAutoTag, toggleAssignToStory, cancelAssetUpload } from '../../redux/actions/asset-uploads';
 import { bindActionCreators } from 'redux';
 import { connect } from 'react-redux';
+import {ICON_TIMES} from '../../constants/icons';
+import Button from '../button/Button';
+import {IImposiumAPI} from '../../services/API';
 
 interface IAssetsUploadMenuProps {
     assetUploads : any;
     api : any;
     toggleAutoTag : (toggle : boolean) => any;
     toggleAssignToStory : (toggle : boolean) => any;
+    cancelAssetUpload : (fileName : string, api : IImposiumAPI) => any;
 }
 
 class AssetsUploadMenu extends React.PureComponent<IAssetsUploadMenuProps, {}> {
@@ -18,21 +22,36 @@ class AssetsUploadMenu extends React.PureComponent<IAssetsUploadMenuProps, {}> {
         super(props);
     }
 
+   private handleCancelAssetUpload(fileName : string) {
+        const {api} = this.props;
+        this.props.cancelAssetUpload(fileName, api);
+    }
+
     public render = () : JSX.Element => {
         const {assetUploads: {uploads, autoTag, assignToStory}} = this.props;
-
         let uploadsListInner : JSX.Element[] | JSX.Element;
-
         if (uploads.length > 0) {
             uploadsListInner = uploads.map((u : any) => {
                 const {filename, percent} = u;
                 const loader : JSX.Element = (percent < 100)
                     ? (<DeterminateLoader progress = {u.percent} />)
                     : (<span>{copy.uploads.preparePhase}</span>);
+                const closeButton : JSX.Element = (percent < 100) && (
+                    <Button
+                        key = 'btn-cancel'
+                        onClick = {() => this.handleCancelAssetUpload(filename)}
+                        style = 'subtle'
+                    >
+                        {ICON_TIMES}
+                    </Button>
+                );
 
                 return (
                     <div className = 'ongoing-upload' key = {filename}>
-                        <span className = 'upload-filename'>{filename}</span>
+                        <div className='ongoing-upload-inner'>
+                            <div className = 'upload-filename'>{filename}</div>
+                            {closeButton}
+                        </div>
                         {loader}
                     </div>
                 );
@@ -66,7 +85,7 @@ class AssetsUploadMenu extends React.PureComponent<IAssetsUploadMenuProps, {}> {
 }
 
 const mapDispatchToProps = (dispatch) : any => {
-    return bindActionCreators({toggleAutoTag, toggleAssignToStory}, dispatch);
+    return bindActionCreators({toggleAutoTag, toggleAssignToStory, cancelAssetUpload}, dispatch);
 };
 
 const mapStateToProps = (state) : any => {