feat(Thumbnail + Gallery): Initial files thumbnail support (FineUploa…

…der#77)

* New `fromServer` property available on `<Thumbnail />`.
* `<Gallery />` will attempt to render the `<Thumbnail />` for an initial file using the image URL associated with the corresponding initial file record. 

closes FineUploader#51

README.md

@@ -829,6 +829,8 @@ The `<Thumbnail />` component allows you to easily render Fine Uploader generate
 
 - `waitingPlaceholder` - A custom element to display while waiting for the thumbnail.
 
+- `fromServer` - Specify whether the current file was set from [initial file](https://docs.fineuploader.com/branch/master/features/session.html)
+
 Suppose you wanted to render a thumbnail for each file as new files are submitted to Fine Uploader. Your React component may look like this:
 
 Note: This assumes you have additional components or code to allow files to actually be submitted to Fine Uploader.

package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-fine-uploader",
-  "version": "0.5.0",
+  "version": "0.6.0",
   "license": "MIT",
   "description": "React UI components for using Fine Uploader in a React-based project.",
   "author":     {

src/gallery/index.jsx

@@ -53,16 +53,22 @@ class Gallery extends Component {
         }
 
         this._onStatusChange = (id, oldStatus, status) => {
-            if (status === 'submitted') {
-                const visibleFiles = this.state.visibleFiles
+            const visibleFiles = this.state.visibleFiles
 
+            if (status === 'submitted') {
                 visibleFiles.push({ id })
                 this.setState({ visibleFiles })
             }
             else if (isFileGone(status)) {
                 this._removeVisibleFile(id)
             }
             else if (status === 'upload successful' || status === 'upload failed') {
+                if (status === 'upload successful') {
+                    const visibleFileIndex = this._findFileIndex(id)
+                    if (visibleFileIndex < 0) {
+                        visibleFiles.push({ id, fromServer: true })
+                    } 
+                }
                 this._updateVisibleFileStatus(id, status)
             }
         }
@@ -116,7 +122,7 @@ class Gallery extends Component {
                                          transitionName='react-fine-uploader-gallery-files'
                 >
                 {
-                    this.state.visibleFiles.map(({ id, status }) => (
+                    this.state.visibleFiles.map(({ id, status, fromServer }) => (
                         <li key={ id }
                              className='react-fine-uploader-gallery-file'
                         >
@@ -127,6 +133,7 @@ class Gallery extends Component {
                             />
                             <Thumbnail className='react-fine-uploader-gallery-thumbnail'
                                        id={ id }
+                                       fromServer={ fromServer }
                                        uploader={ uploader }
                                        { ...thumbnailProps }
                             />
@@ -196,14 +203,7 @@ class Gallery extends Component {
     }
 
     _removeVisibleFile(id) {
-        let visibleFileIndex = -1
-
-        this.state.visibleFiles.some((file, index) => {
-            if (file.id === id) {
-                visibleFileIndex = index
-                return true
-            }
-        })
+        const visibleFileIndex = this._findFileIndex(id)
 
         if (visibleFileIndex >= 0) {
             const visibleFiles = this.state.visibleFiles
@@ -222,6 +222,19 @@ class Gallery extends Component {
             }
         })
     }
+
+    _findFileIndex(id) {
+        let visibleFileIndex = -1
+
+        this.state.visibleFiles.some((file, index) => {
+            if (file.id === id) {
+                visibleFileIndex = index
+                return true
+            }
+        })
+
+        return visibleFileIndex
+    }
 }
 
 const MaybeDropzone = ({ children, content, hasVisibleFiles, uploader, ...props }) => {

src/test/unit/gallery.spec.jsx

@@ -9,6 +9,7 @@ import Gallery from 'src/gallery'
 const isMobile = !!('ontouchstart' in window)
 const sampleBlob = new Blob(['hi!'], { type : 'text/plain' })
 const sampleBlobWrapper = { blob: sampleBlob, name: 'test' }
+const sampleCannedFile = { name: 'test', uuid: 'test uuid', thumbnailUrl: 'http://localhost/images/test.jpg' }
 
 describe('<Gallery />', () => {
     let uploader
@@ -106,4 +107,17 @@ describe('<Gallery />', () => {
             }, 100)
         }, 100)
     })
+
+    it('renders a tile for each initial file', done => {
+        const GalleryComponent = TestUtils.renderIntoDocument(<Gallery uploader={ uploader } />)        
+
+        uploader.methods.addInitialFiles([sampleCannedFile])
+
+        setTimeout(() => {
+            const tiles = TestUtils.scryRenderedDOMComponentsWithClass(GalleryComponent, 'react-fine-uploader-gallery-file')
+
+            expect(tiles.length).toBe(1)
+            done()
+        }, 100)
+    })
 })

src/test/unit/thumbnail/index.spec.jsx

@@ -26,7 +26,7 @@ describe('<Thumbnail />', () => {
         )
 
         expect(ThumbnailComponent.refs.canvas.hasAttribute('hidden')).toBeFalsy()
-        expect(drawThumbnail).toHaveBeenCalledWith(3, ThumbnailComponent.refs.canvas, defaultMaxSize)
+        expect(drawThumbnail).toHaveBeenCalledWith(3, ThumbnailComponent.refs.canvas, defaultMaxSize, undefined)
     })
 
     it('renders thumbnail as canvas using passed size', () => {
@@ -38,7 +38,19 @@ describe('<Thumbnail />', () => {
         )
 
         expect(ThumbnailComponent.refs.canvas.hasAttribute('hidden')).toBeFalsy()
-        expect(drawThumbnail).toHaveBeenCalledWith(3, ThumbnailComponent.refs.canvas, 333)
+        expect(drawThumbnail).toHaveBeenCalledWith(3, ThumbnailComponent.refs.canvas, 333, undefined)
+    })
+
+    it('renders thumbnail as canvas using passed thumbnail origin', () => {
+        qqPromise.success()
+        drawThumbnail.and.returnValue(qqPromise)
+
+        const ThumbnailComponent = TestUtils.renderIntoDocument(
+            <Thumbnail id={ 3 } maxSize={ 333 } uploader={ uploader } fromServer={ true }/>
+        )
+
+        expect(ThumbnailComponent.refs.canvas.hasAttribute('hidden')).toBeFalsy()
+        expect(drawThumbnail).toHaveBeenCalledWith(3, ThumbnailComponent.refs.canvas, 333, true)
     })
 
     it('renders default waiting placeholder until thumbnail generation is complete', () => {

src/thumbnail/index.jsx

@@ -34,7 +34,8 @@ class Thumbnail extends Component {
         this.props.uploader.methods.drawThumbnail(
             this.props.id,
             this.refs.canvas,
-            this.props.maxSize
+            this.props.maxSize,
+            this.props.fromServer
         )
             .then(
                 () => {