#177 - Merge + code refactoring

Author: estruyf

docs/documentation/docs/controls/ListItemAttachments.md

@@ -1,7 +1,6 @@
-# List-Item-Attachments control
+# ListItemAttachments control
 
-This control allows you to manage list item attachments, you can add or delete associated attachments, the attachments are listed in tile view.
- 
+This control allows you to manage list item attachments, you can add or delete associated attachments. The attachments are listed in tile view.
 
 Here is an example of the control:
 
@@ -19,7 +18,6 @@ Here is an example of the control:
 - Import the control into your component:
 
 ```TypeScript
- 
 import { ListItemAttachments } from '@pnp/spfx-controls-react/listItemAttachments';
 ```
 - Use the `ListItemAttachments` control in your code as follows:

docs/documentation/mkdocs.yml

@@ -13,6 +13,7 @@ nav:
       - "Radar Chart": 'controls/charts/RadarChart.md'
       - "Scatter Chart": 'controls/charts/ScatterChart.md'
     - FileTypeIcon: 'controls/FileTypeIcon.md'
+    - ListItemAttachments: 'controls/ListItemAttachments.md'
     - ListItemPicker: 'controls/ListItemPicker.md'
     - ListPicker: 'controls/ListPicker.md'
     - ListView: 'controls/ListView.md'

src/controls/listItemAttachments/ListItemAttachments.module.scss

@@ -1,39 +1,43 @@
 
 .ListItemAttachments {
+  margin-bottom: 15px;
+
   .documentCard {
     -webkit-font-smoothing: antialiased;
     background-color: #ffffff;
     border: 1px solid #eaeaea;
-    -webkit-box-sizing: border-box;
     box-sizing: border-box;
     max-width: 320px;
     min-width: 187px;
-    -webkit-user-select: none;
-    -moz-user-select: none;
-    -ms-user-select: none;
     user-select: none;
     position: relative;
   }
+
   .documentCardWrapper {
-   margin-top: 15px;
-   min-Width: 187px;
-   width: 187px;
-   display: inline-block;
-   margin-Left: 12px
+    margin-top: 15px;
+    min-Width: 187px;
+    width: 187px;
+    display: inline-block;
+    margin-left: 12px
   }
 
   .fileLabel {
-    margin-Left: 12px;
-     margin-Right: 12px;
-     overflow: 'hidden';
-     white-Space: 'nowrap';
-     text-overflow: 'ellipsis';
-    }
+    margin-left: 12px;
+    margin-right: 12px;
+    overflow: 'hidden';
+    white-space: 'nowrap';
+    text-overflow: 'ellipsis';
+  }
+
   .uploadfile {
-    background-color:transparent !important;
+    background-color: transparent !important;
     font-size: 15px;
-    }
+  }
 }
 
+.uploadBar {
+  margin-top: 15px;
+  text-align: left;
+}
 
 

src/controls/listItemAttachments/ListItemAttachments.tsx

@@ -2,9 +2,7 @@
 import * as React from 'react';
 import { Dialog, DialogType, DialogFooter } from 'office-ui-fabric-react/lib/Dialog';
 import { PrimaryButton, DefaultButton } from 'office-ui-fabric-react/lib/Button';
-import { Icon, IconType } from 'office-ui-fabric-react/lib/Icon';
 import { Label } from "office-ui-fabric-react/lib/Label";
-import { Link } from 'office-ui-fabric-react/lib/Link';
 import * as strings from 'ControlStrings';
 import styles from './ListItemAttachments.module.scss';
 import { UploadAttachment } from './UploadAttachment';
@@ -13,7 +11,6 @@ import {
   DocumentCard,
   DocumentCardActions,
   DocumentCardPreview,
-  DocumentCardTitle,
   IDocumentCardPreviewImage
 } from 'office-ui-fabric-react/lib/DocumentCard';
 import { ImageFit } from 'office-ui-fabric-react/lib/Image';
@@ -43,65 +40,132 @@ export class ListItemAttachments extends React.Component<IListItemAttachmentsPro
       showPlaceHolder: false,
       fireUpload: false
     };
+
     // Get SPService Factory
     this._spservice = new SPservice(this.props.context);
     this._utilities = new utilities();
+  }
 
-    // registo de event handlers
-    this._onDeleteAttachment = this._onDeleteAttachment.bind(this);
-    this._closeDialog = this._closeDialog.bind(this);
-    this._onAttachmentpload = this._onAttachmentpload.bind(this);
-    this._onConfirmedDeleteAttachment = this._onConfirmedDeleteAttachment.bind(this);
+  /**
+   * componentDidMount lifecycle hook
+   */
+  public componentDidMount() {
+    this.loadAttachments();
   }
-  // Load Item Attachments
-  private async _loadAttachments() {
+
+  /**
+   * Load Item Attachments
+   */
+  private async loadAttachments() {
     this.previewImages = [];
     try {
       const files: IListItemAttachmentFile[] = await this._spservice.getListItemAttachments(this.props.listId, this.props.itemId);
-      for (const _file of files) {
 
-        const _previewImage = await this._utilities.GetFileImageUrl(_file);
+      for (const file of files) {
+        const _previewImage = await this._utilities.GetFileImageUrl(file);
         this.previewImages.push({
-          name: _file.FileName,
+          name: file.FileName,
           previewImageSrc: _previewImage,
           iconSrc: '',
           imageFit: ImageFit.center,
           width: 187,
           height: 130,
         });
       }
+
       this.setState({
         hideDialog: true,
         dialogMessage: '',
         attachments: files,
         showPlaceHolder: files.length === 0 ? true : false
-
       });
-    }
-    catch (error) {
+    } catch (error) {
       this.setState({
         hideDialog: true,
         dialogMessage: strings.ListItemAttachmentserrorLoadAttachments.replace('{0}', error.message)
       });
     }
   }
-  // LoadAttachments
-  public componentDidMount() {
 
-    this._loadAttachments();
+  /**
+   * Close the dialog
+   */
+  private _closeDialog = () => {
+    this.setState({
+      hideDialog: true,
+      dialogMessage: '',
+      file: null,
+      deleteAttachment: false,
+    });
+
+    this.loadAttachments();
+  }
+
+  /**
+   * Attachment uploaded event handler
+   */
+  private _onAttachmentUpload = () => {
+    // load Attachments
+    this.loadAttachments();
+  }
+
+  /**
+   * On delete attachment event handler
+   *
+   * @param file
+   */
+  private onDeleteAttachment = (file: IListItemAttachmentFile) => {
+    this.setState({
+      hideDialog: false,
+      deleteAttachment: true,
+      file: file,
+      dialogMessage: strings.ListItemAttachmentsconfirmDelete.replace('{0}', file.FileName),
+    });
+  }
+
+  /**
+   * Delete the attachment once it was confirmed
+   */
+  private onConfirmedDeleteAttachment = async () => {
+    // Delete Attachment
+    const { file } = this.state;
+
+    this.setState({
+      disableButton: true,
+    });
+
+    try {
+      await this._spservice.deleteAttachment(file.FileName, this.props.listId, this.props.itemId, this.props.webUrl);
+
+      this.setState({
+        hideDialog: false,
+        deleteAttachment: false,
+        disableButton: false,
+        file: null,
+        dialogMessage: strings.ListItemAttachmentsfileDeletedMsg.replace('{0}', file.FileName),
+      });
+    } catch (error) {
+      this.setState({
+        hideDialog: false,
+        file: null,
+        deleteAttachment: false,
+        dialogMessage: strings.ListItemAttachmentsfileDeleteError.replace('{0}', file.FileName).replace('{1}', error.message)
+      });
+    }
   }
 
-  // Render Attachments
+  /**
+   * Default React render method
+   */
   public render() {
     return (
-
       <div className={styles.ListItemAttachments}>
         <UploadAttachment
           listId={this.props.listId}
           itemId={this.props.itemId}
           disabled={this.props.disabled}
           context={this.props.context}
-          onAttachmentUpload={this._onAttachmentpload}
+          onAttachmentUpload={this._onAttachmentUpload}
           fireUpload={this.state.fireUpload}
         />
 
@@ -115,21 +179,21 @@ export class ListItemAttachments extends React.Component<IListItemAttachmentsPro
               onConfigure={() => this.setState({ fireUpload: true })} />
             :
 
-            this.state.attachments.map((_file, i: number) => {
+            this.state.attachments.map((file, i: number) => {
               return (
                 <div className={styles.documentCardWrapper}>
                   <TooltipHost
-                    content={_file.FileName}
+                    content={file.FileName}
                     calloutProps={{ gapSpace: 0, isBeakVisible: true }}
                     closeDelay={200}
                     directionalHint={DirectionalHint.rightCenter}>
 
                     <DocumentCard
-                      onClickHref={`${_file.ServerRelativeUrl}?web=1`}
+                      onClickHref={`${file.ServerRelativeUrl}?web=1`}
                       className={styles.documentCard}>
                       <DocumentCardPreview previewImages={[this.previewImages[i]]} />
                       <Label className={styles.fileLabel}>
-                        {_file.FileName}
+                        {file.FileName}
                       </Label>
                       <DocumentCardActions
                         actions={
@@ -145,7 +209,7 @@ export class ListItemAttachments extends React.Component<IListItemAttachmentsPro
                               onClick: (ev) => {
                                 ev.preventDefault();
                                 ev.stopPropagation();
-                                this._onDeleteAttachment(_file);
+                                this.onDeleteAttachment(file);
                               }
                             },
                           ]
@@ -174,11 +238,11 @@ export class ListItemAttachments extends React.Component<IListItemAttachmentsPro
             <DialogFooter>
               <div style={{ marginBottom: 7 }}>
                 {
-                  this.state.disableButton ? <Spinner size={SpinnerSize.medium} /> : ''
+                  this.state.disableButton ? <Spinner size={SpinnerSize.medium} /> : null
                 }
               </div>
               {
-                this.state.deleteAttachment ? (<PrimaryButton disabled={this.state.disableButton} onClick={this._onConfirmedDeleteAttachment}>{strings.ListItemAttachmentsdialogOKbuttonLabelOnDelete}</PrimaryButton>) : ""
+                this.state.deleteAttachment ? (<PrimaryButton disabled={this.state.disableButton} onClick={this.onConfirmedDeleteAttachment}>{strings.ListItemAttachmentsdialogOKbuttonLabelOnDelete}</PrimaryButton>) : null
               }
               {
                 this.state.deleteAttachment ? (<DefaultButton disabled={this.state.disableButton} onClick={this._closeDialog}>{strings.ListItemAttachmentsdialogCancelButtonLabel}</DefaultButton>)
@@ -190,68 +254,4 @@ export class ListItemAttachments extends React.Component<IListItemAttachmentsPro
       </div>
     );
   }
-
-  // close dialog
-  private _closeDialog(e) {
-    e.preventDefault();
-
-    this.setState({
-      hideDialog: true,
-      dialogMessage: '',
-      file: null,
-      deleteAttachment: false,
-    });
-    this._loadAttachments();
-  }
-
-  // On onAttachmentpload
-  private _onAttachmentpload() {
-    // load Attachments
-    this._loadAttachments();
-  }
-
-  // On _onDeleteAttachment
-  private _onDeleteAttachment(_file: IListItemAttachmentFile) {
-    this.setState({
-      hideDialog: false,
-      deleteAttachment: true,
-      file: _file,
-      dialogMessage: strings.ListItemAttachmentsconfirmDelete.replace('{0}', _file.FileName),
-    });
-  }
-  /*
-  * Confirmed Delete
-  */
-  private _onConfirmedDeleteAttachment() {
-    // Delete Attachment
-    const _file = this.state.file;
-
-    this.setState({
-      disableButton: true,
-    });
-
-    this._spservice.deleteAttachment(_file.FileName, this.props.listId, this.props.itemId, this.props.webUrl)
-      .then(() => {
-
-        this.setState({
-          hideDialog: false,
-          deleteAttachment: false,
-          disableButton: false,
-          file: null,
-          dialogMessage: strings.ListItemAttachmentsfileDeletedMsg.replace('{0}', _file.FileName),
-        });
-
-      })
-      .catch((reason) => {
-
-        this.setState({
-          hideDialog: false,
-          file: null,
-          deleteAttachment: false,
-          dialogMessage: strings.ListItemAttachmentsfileDeleteError.replace('{0}', _file.FileName).replace('{1}', reason)
-        });
-
-      });
-  }
 }
-export default ListItemAttachments;