Merge pull request #487 from appirio-tech/feature/file-deletion-confirmation

Feature/file deletion confirmation

Author: vikasrohit

src/components/FileList/FileList.jsx

@@ -1,11 +1,42 @@
 import React, {PropTypes} from 'react'
+import Panel from '../Panel/Panel'
 import FileListItem from './FileListItem'
+import cn from 'classnames'
+import uncontrollable from 'uncontrollable'
+import FileDeletionConfirmModal from './FileDeletionConfirmModal'
 import './FileList.scss'
 
-const FileList = ({children}) => (
-  <div className="file-list">
-    {children}
-  </div>
+const FileList = ({files, onDelete, onSave, deletingFile, onDeleteIntent}) => (
+  <Panel className={cn('file-list', {'modal-active': deletingFile})}>
+    {deletingFile && <div className="modal-overlay" />}
+    {
+      files.map((file, i) => {
+        const _onConfirmDelete = () => {
+          onDelete(file.id)
+          onDeleteIntent(null)
+        }
+        const _onFileDeleteCancel = () => onDeleteIntent(null)
+        if (deletingFile === file.id) {
+          return (
+            <FileDeletionConfirmModal
+              key={i}
+              fileName={ file.title }
+              onConfirm={ _onConfirmDelete }
+              onCancel={ _onFileDeleteCancel }
+            />
+          )
+        }
+        return (
+          <FileList.Item
+            {...file}
+            key={i}
+            onDelete={ onDeleteIntent }
+            onSave={ onSave }
+          />
+        )
+      })
+    }
+  </Panel>
 )
 
 FileList.propTypes = {
@@ -14,4 +45,6 @@ FileList.propTypes = {
 
 FileList.Item = FileListItem
 
-export default FileList
+export default uncontrollable(FileList, {
+  deletingFile: 'onDeleteIntent'
+})

src/components/FileList/FileList.scss

@@ -1,6 +1,9 @@
 @import 'tc-includes';
 
 .file-list {
+  // reset styles of panel class, we need panel class to activate the modal-overlay
+  border: none;
+  box-shadow: none;
   > h4 {
 
     @include roboto-medium;
@@ -97,33 +100,5 @@
 }
 
 .delete-file-modal {
-  &:focus {
-    // outline: none;
-  }
-}
-
-.file-deletion-dialog-overlay {
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  background-color: $tc-gray-neutral-dark;
-  position          : fixed;
-  top               : 0;
-  left              : 0;
-  right             : 0;
-  bottom            : 0;
-  z-index: 21;/* +1 of the z-index of the topbar */
-}
 
-.file-deletion-dialog {
-  top: 0px;
-  left: 0px;
-}
-.file-deletion-dialog-close {
-  cursor: pointer;
-  position: absolute;
-  top: 25px;
-  right: 25px;
-  width: 14px;
-  height: 14px;
 }

src/components/FileList/FileListItem.jsx

@@ -1,9 +1,7 @@
 import _ from 'lodash'
 import React, {PropTypes} from 'react'
-import Modal from 'react-modal'
 import filesize from 'filesize'
 import { Icons } from 'appirio-tech-react-components'
-import FileDeletionConfirmModal from './FileDeletionConfirmModal'
 
 const { TrashIcon, CloseIcon, EditIcon, SaveIcon } = Icons
 
@@ -14,21 +12,17 @@ export default class FileListItem extends React.Component {
     this.state = {
       title: props.title,
       description: props.description,
-      isEditing: false,
-      showDeletionDialog: false
+      isEditing: false
     }
     this.handleSave = this.handleSave.bind(this)
     this.startEdit = this.startEdit.bind(this)
     this.onDelete = this.onDelete.bind(this)
-    this.showDeletionDialog = this.showDeletionDialog.bind(this)
-    this.hideDeletionDialog = this.hideDeletionDialog.bind(this)
     this.validateForm = this.validateForm.bind(this)
     this.validateTitle = this.validateTitle.bind(this)
     this.onTitleChange = this.onTitleChange.bind(this)
   }
 
   onDelete() {
-    this.setState({ showDeletionDialog : false })
     this.props.onDelete(this.props.id)
   }
 
@@ -73,14 +67,6 @@ export default class FileListItem extends React.Component {
     this.setState({ errors })
   }
 
-  showDeletionDialog() {
-    this.setState({ showDeletionDialog : true })
-  }
-
-  hideDeletionDialog() {
-    this.setState({ showDeletionDialog : false })
-  }
-
   renderEditing() {
     const {title, description} = this.props
     const { errors } = this.state
@@ -103,28 +89,16 @@ export default class FileListItem extends React.Component {
 
   renderReadOnly() {
     const {title, downloadUrl, description, size, isEditable} = this.props
-    const { showDeletionDialog } = this.state
     return (
       <div>
-        <Modal
-          isOpen={ showDeletionDialog }
-          className="file-deletion-dialog"
-          overlayClassName="file-deletion-dialog-overlay"
-          onRequestClose={ this.hideDeletionDialog }
-        >
-          <FileDeletionConfirmModal fileName={ title } onConfirm={ this.onDelete } onCancel={ this.hideDeletionDialog } />
-          <div onClick={ this.hideDeletionDialog } className="file-deletion-dialog-close">
-            <Icons.XMarkIcon />
-          </div>
-        </Modal>
         <div className="title">
           <h4><a href={downloadUrl} target="_blank" rel="noopener noreferrer">{title}</a></h4>
           <div className="size">
             {filesize(size)}
           </div>
           {isEditable && <div className="edit-icons">
             <i className="icon-edit" onClick={this.startEdit}><EditIcon /></i>
-            <i className="icon-trash" onClick={this.showDeletionDialog}><TrashIcon /></i>
+            <i className="icon-trash" onClick={this.onDelete}><TrashIcon /></i>
           </div>}
         </div>
         <p>{description}</p>
@@ -133,7 +107,7 @@ export default class FileListItem extends React.Component {
   }
 
   render() {
-    const {isEditing} = this.state
+    const { isEditing } = this.state
     let iconPath
     try {
       iconPath = require('./images/' + this.props.contentType.split('/')[1] +'.svg')

src/projects/detail/components/FileListContainer.jsx

@@ -42,15 +42,7 @@ class FileListContainer extends Component {
     const storePath = `${PROJECT_ATTACHMENTS_FOLDER}/${projectId}/`
     return (
       <div>
-        <FileList>
-          {files.map((file, i) =>
-            <FileList.Item
-              {...file}
-              key={i}
-              onDelete={this.deleteFile}
-              onSave={this.updateFile}
-            />)}
-        </FileList>
+        <FileList files={files} onDelete={ this.deleteFile } onSave={ this.updateFile } />
         <AddFiles successHandler={this.processUploadedFiles} storePath={storePath} category={'appDefinition'} />
       </div>
     )