Few more tests with a little better desrciption

docs/documentation/docs/controls/ListItemAttachments.md

@@ -29,6 +29,25 @@ import { ListItemAttachments } from '@pnp/spfx-controls-react/lib/ListItemAttach
                      disabled={false} />
 ```
 
+- If You want to use `ListItemAttachments` controls with new form You have to use React.createRef.
+
+Following example will add selected attachments to list item with id = 1
+
+```TypeScript
+let listItemAttachmentsComponentReference = React.createRef<ListItemAttachments>();
+...
+      <ListItemAttachments 
+        ref={listItemAttachmentsComponentReference} 
+        context={this.props.context} 
+        listId="dfcfdb95-2488-4757-b55b-14d94166ad87" 
+        itemId={0} />
+...
+<PrimaryButton text="Save to Item with id 1" onClick={()=>{
+        //@ts-ignore
+        listItemAttachmentsComponentReference.current.uploadAttachments(1);
+      }} />
+```
+
 ## Implementation
 
 The `ListItemAttachments` control can be configured with the following properties:
@@ -37,7 +56,7 @@ The `ListItemAttachments` control can be configured with the following propertie
 | Property | Type | Required | Description |
 | ---- | ---- | ---- | ---- |
 | context | BaseComponentContext | yes | SPFx web part or extention context |
-| itemId | number | yes | List Item Id  |
+| itemId | number | no | List Item Id  |
 | listId | string | yes | Guid of the list. |
 | webUrl | string | no | URL of the site. By default it uses the current site URL. |
 | disabled | boolean | no | Specifies if the control is disabled or not. |

package.json

@@ -6,6 +6,7 @@
     "build": "gulp build",
     "clean": "gulp clean",
     "test": "gulp test",
+    "test:unit": "npx jest --silent --maxWorkers=4",
     "serve": "gulp serve",
     "prepublishOnly": "gulp",
     "versionUpdater": "gulp versionUpdater",
@@ -126,27 +127,8 @@
       "@microsoft/sp-webpart-base": "identity-obj-proxy",
       "@microsoft/sp-core-library": "identity-obj-proxy",
       "@microsoft/sp-application-base": "identity-obj-proxy",
-      "office-ui-fabric-react/lib/FocusZone": "identity-obj-proxy",
-      "office-ui-fabric-react/lib/List": "identity-obj-proxy",
-      "office-ui-fabric-react/lib/Spinner": "identity-obj-proxy",
-      "office-ui-fabric-react/lib/Image": "identity-obj-proxy",
-      "office-ui-fabric-react/lib/Button": "identity-obj-proxy",
-      "office-ui-fabric-react/lib/components/Button": "identity-obj-proxy",
-      "office-ui-fabric-react/lib/Selection": "identity-obj-proxy",
-      "office-ui-fabric-react/lib/Icon": "identity-obj-proxy",
-      "office-ui-fabric-react/lib/Styling": "identity-obj-proxy",
-      "office-ui-fabric-react/lib/Check": "identity-obj-proxy",
-      "office-ui-fabric-react/lib/DetailsList": "identity-obj-proxy",
-      "office-ui-fabric-react/lib/CommandBar": "identity-obj-proxy",
-      "office-ui-fabric-react/lib/ContextualMenu": "identity-obj-proxy",
-      "office-ui-fabric-react/lib/ScrollablePane": "identity-obj-proxy",
-      "office-ui-fabric-react/lib/Breadcrumb": "identity-obj-proxy",
-      "office-ui-fabric-react/lib/Link": "identity-obj-proxy",
-      "office-ui-fabric-react/lib/Dialog": "identity-obj-proxy",
-      "office-ui-fabric-react/lib/common/DirectionalHint": "identity-obj-proxy",
-      "office-ui-fabric-react/lib/Persona": "identity-obj-proxy",
-      "office-ui-fabric-react/lib/HoverCard": "identity-obj-proxy",
-      "office-ui-fabric-react/lib/components/Icon": "identity-obj-proxy",
+      "office-ui-fabric-react/lib/(.*)$": "office-ui-fabric-react/lib-commonjs/$1",
+      "src/common/telemetry/(.*)$":"identity-obj-proxy",
       "@pnp/sp": "identity-obj-proxy",
       "'@pnp/sp/fields": "identity-obj-proxy",
       "ControlStrings": "identity-obj-proxy",

src/controls/listItemAttachments/IListItemAttachmentsProps.ts

@@ -2,7 +2,7 @@ import { BaseComponentContext } from '@microsoft/sp-component-base';
 
 export interface IListItemAttachmentsProps {
   listId: string;
-  itemId: number;
+  itemId?: number;
   className?: string;
   webUrl?:string;
   disabled?: boolean;

src/controls/listItemAttachments/IListItemAttachmentsState.ts

@@ -8,4 +8,6 @@ export interface IListItemAttachmentsState {
       disableButton: boolean;
       showPlaceHolder: boolean;
       fireUpload: boolean;
+      filesToUpload?: File[];
+      itemId?: number;
 }

src/controls/listItemAttachments/IUploadAttachmentProps.ts

@@ -2,11 +2,11 @@ import { BaseComponentContext } from '@microsoft/sp-component-base';
 
 export interface IUploadAttachmentProps {
   listId: string;
-  itemId: number;
+  itemId?: number;
   className?: string;
-  webUrl?:string;
+  webUrl?: string;
   disabled?: boolean;
   context: BaseComponentContext;
-  fireUpload?:boolean;
-  onAttachmentUpload: () => void;
+  fireUpload?: boolean;
+  onAttachmentUpload: (file?: File) => void;
 }

src/controls/listItemAttachments/ListItemAttachments.tsx

@@ -29,14 +29,13 @@ interface IPreviewImageCollection {
 
 export class ListItemAttachments extends React.Component<IListItemAttachmentsProps, IListItemAttachmentsState> {
   private _spservice: SPservice;
-  private previewImages: IPreviewImageCollection;
+  private previewImages: IPreviewImageCollection = {};
   private _utilities: utilities;
 
   constructor(props: IListItemAttachmentsProps) {
     super(props);
 
     telemetry.track('ReactListItemAttachments', {});
-
     this.state = {
       file: null,
       hideDialog: true,
@@ -45,7 +44,9 @@ export class ListItemAttachments extends React.Component<IListItemAttachmentsPro
       deleteAttachment: false,
       disableButton: false,
       showPlaceHolder: false,
-      fireUpload: false
+      fireUpload: false,
+      filesToUpload: [],
+      itemId: props.itemId
     };
 
     // Get SPService Factory
@@ -56,8 +57,8 @@ export class ListItemAttachments extends React.Component<IListItemAttachmentsPro
   /**
    * componentDidMount lifecycle hook
    */
-  public componentDidMount() {
-    this.loadAttachments();
+  public async componentDidMount() {
+    await this.loadAttachments();
   }
 
   private async loadAttachmentPreview(file: IListItemAttachmentFile): Promise<IDocumentCardPreviewImage> {
@@ -73,34 +74,69 @@ export class ListItemAttachments extends React.Component<IListItemAttachmentsPro
     });
   }
 
-  /**
-   * Load Item Attachments
-   */
-  private async loadAttachments() {
-    this._spservice.getListItemAttachments(this.props.listId, this.props.itemId).then((files: IListItemAttachmentFile[]) => {
-      const filePreviewImages = files.map(file => this.loadAttachmentPreview(file));
-      return Promise.all(filePreviewImages).then(filePreviews => {
-        this.previewImages = {};
-        filePreviews.forEach(preview => {
-          this.previewImages[preview.name] = preview;
-        });
+  public async uploadAttachments(itemId: number){
+    if(this.state.filesToUpload){
+      await Promise.all(this.state.filesToUpload.map(file=>this._spservice.addAttachment(
+        this.props.listId,
+        itemId,
+        file.name,
+        file,
+        this.props.webUrl)));
+    }
+    return new Promise<void>((resolve,error)=>{
+      this.setState({
+      filesToUpload: [],
+      itemId: itemId
+    },()=>this.loadAttachments().then(resolve));
+    });
+  }
+  protected loadAttachmentsPreview(files: IListItemAttachmentFile[]){
+    const filePreviewImages = files.map(file => this.loadAttachmentPreview(file));
+    return Promise.all(filePreviewImages).then(filePreviews => {
+      filePreviews.forEach(preview => {
+        this.previewImages[preview.name] = preview;
+      });
 
-        this.setState({
+      this.setState({
           fireUpload: false,
           hideDialog: true,
           dialogMessage: '',
           attachments: files,
           showPlaceHolder: files.length === 0 ? true : false
         });
+    });
+  }
+  /**
+   * Load Item Attachments
+   */
+  private async loadAttachments() {
+    if(this.state.itemId){
+      await this._spservice.getListItemAttachments(this.props.listId, this.state.itemId).then(async (files: IListItemAttachmentFile[]) => {
+        await this.loadAttachmentsPreview(files);
+      }).catch((error: Error) => {
+        this.setState({
+          fireUpload: false,
+          hideDialog: false,
+          dialogMessage: strings.ListItemAttachmentserrorLoadAttachments.replace('{0}', error.message)
+        });
       });
-    }).catch((error: Error) => {
-      this.setState({
-        fireUpload: false,
-        hideDialog: false,
-        dialogMessage: strings.ListItemAttachmentserrorLoadAttachments.replace('{0}', error.message)
-      });
+  }
+  else if(this.state.filesToUpload && this.state.filesToUpload.length > 0){
+    let files = this.state.filesToUpload.map(file=>({
+      FileName: file.name,
+      ServerRelativeUrl: undefined
+    }));
+    await this.loadAttachmentsPreview(files);
+  }
+  else{
+    this.setState({
+      fireUpload: false,
+      hideDialog: true,
+      dialogMessage: '',
+      showPlaceHolder: true
     });
   }
+  }
 
   /**
    * Close the dialog
@@ -120,9 +156,16 @@ export class ListItemAttachments extends React.Component<IListItemAttachmentsPro
   /**
    * Attachment uploaded event handler
    */
-  private _onAttachmentUpload = () => {
+  private _onAttachmentUpload = async (file: File) => {
     // load Attachments
-    this.loadAttachments();
+    if(!this.state.itemId){
+      let files = this.state.filesToUpload || [];
+      files.push(file);
+      this.setState({
+        filesToUpload: [...files]
+      });
+    }
+    await this.loadAttachments();
   }
 
   /**
@@ -153,8 +196,26 @@ export class ListItemAttachments extends React.Component<IListItemAttachmentsPro
     });
 
     try {
-      await this._spservice.deleteAttachment(file.FileName, this.props.listId, this.props.itemId, this.props.webUrl);
+      if(this.state.itemId){
+        await this._spservice.deleteAttachment(file.FileName, this.props.listId, this.state.itemId, this.props.webUrl);
+      }
+      else{
+        let filesToUpload = this.state.filesToUpload;
+        let fileToRemove = filesToUpload.find(f=>f.name === file.FileName);
+        if(fileToRemove){
+          filesToUpload.splice(filesToUpload.indexOf(fileToRemove),1);
+        }
+        let attachments = this.state.attachments;
+        let attachmentToRemove = attachments.find(attachment => attachment.FileName === file.FileName);
+        if(attachmentToRemove){
+          attachments.splice(attachments.indexOf(attachmentToRemove),1);
 
+        }
+        this.setState({
+          filesToUpload: [...filesToUpload],
+          attachments: [...attachments]
+        });
+      }
       this.setState({
         fireUpload: false,
         hideDialog: false,
@@ -183,7 +244,7 @@ export class ListItemAttachments extends React.Component<IListItemAttachmentsPro
       <div className={styles.ListItemAttachments}>
         <UploadAttachment
           listId={this.props.listId}
-          itemId={this.props.itemId}
+          itemId={this.state.itemId}
           disabled={this.props.disabled}
           context={this.props.context}
           onAttachmentUpload={this._onAttachmentUpload}

src/controls/listItemAttachments/UploadAttachment.tsx

@@ -60,28 +60,34 @@ export class UploadAttachment extends React.Component<IUploadAttachmentProps, IU
 
     const reader = new FileReader();
     const file = e.target.files[0];
-
-    reader.onloadend = async () => {
-      this.setState({
-        file: file
-      });
-
-      try {
-        await this._spservice.addAttachment(this.props.listId, this.props.itemId, file.name, file, this.props.webUrl);
-
-        this.setState({
-          isLoading: false
-        });
-        this.props.onAttachmentUpload();
-      } catch (error) {
+    return new Promise<void>((resolve,errorCallback)=>{
+      reader.onloadend = async () => {
         this.setState({
-          hideDialog: false,
-          isLoading: false,
-          dialogMessage: strings.ListItemAttachmentsuploadAttachmentErrorMsg.replace('{0}', file.name).replace('{1}', error.message)
+          file: file
         });
-      }
-    };
-    reader.readAsDataURL(file);
+
+        try {
+          if(this.props.itemId && this.props.itemId > 0){
+            await this._spservice.addAttachment(this.props.listId, this.props.itemId, file.name, file, this.props.webUrl);
+          }
+
+          this.setState({
+            isLoading: false
+          });
+          this.props.onAttachmentUpload(file);
+          resolve();
+        } catch (error) {
+          this.setState({
+            hideDialog: false,
+            isLoading: false,
+            dialogMessage: strings.ListItemAttachmentsuploadAttachmentErrorMsg.replace('{0}', file.name).replace('{1}', error.message)
+          });
+          errorCallback(error);
+        }
+      };
+      reader.readAsDataURL(file);
+    });
+
   }
 
   /**

tests/controls/documentLibraryBrowser/DocumentLibraryBrowser.test.tsx

@@ -26,7 +26,7 @@ describe("<DocumentLibraryBrowser />", ()=>{
 
             }}
             />);
-        assert.equal(documentLibraryBrowser.getDOMNode().tagName, "SPINNER");
+        assert.equal(documentLibraryBrowser.getDOMNode().tagName, "DIV");
 
         await documentLibraryBrowser.instance().componentDidMount();
         documentLibraryBrowser.update();
@@ -53,8 +53,8 @@ describe("<DocumentLibraryBrowser />", ()=>{
         let libraryTitle = documentLibraryBrowser.instance()._onRenderLibraryTile(browserService.getSiteMediaLibrariesResult[0],0);
         let iconControl = libraryTitle.props.children.props.children.props.children[0];
         let buttonControl = libraryTitle.props.children.props.children.props.children[1];
-        assert.equal(iconControl.type,"Image");
-        assert.equal(buttonControl.type,"DefaultButton");
+        assert.equal(iconControl.type.displayName,"StyledImageBase");
+        assert.equal(buttonControl.type.displayName,"CustomizedDefaultButton");
     });
     test("should call onOpenLibrary", async ()=>{
         let asserted = false;