cozy-ui 57.9.2 → 58.1.1

package/CHANGELOG.md

@@ -1,3 +1,45 @@
+## [58.1.1](https://github.com/cozy/cozy-ui/compare/v58.1.0...v58.1.1) (2021-12-07)
+
+
+### Bug Fixes
+
+* Replace jest function in documentation ([cdbc01f](https://github.com/cozy/cozy-ui/commit/cdbc01f))
+
+# [58.1.0](https://github.com/cozy/cozy-ui/compare/v58.0.0...v58.1.0) (2021-12-06)
+
+
+### Features
+
+* Add realtime to FileImageLoader component ([621fe47](https://github.com/cozy/cozy-ui/commit/621fe47))
+
+# [58.0.0](https://github.com/cozy/cozy-ui/compare/v57.10.0...v58.0.0) (2021-12-03)
+
+
+### Features
+
+* Renamed ImageLoader & Exposed it directly ([2ca789b](https://github.com/cozy/cozy-ui/commit/2ca789b))
+
+
+### BREAKING CHANGES
+
+* `ImageLoader` is rename `FileImageLoader`.
+If you were previously importing `ImageLoader`
+via the `Viewer`like this
+`import ImageLoader from 'cozy-ui/transpiled/react/Viewer/ImageLoader'`
+this no longer works, there is a more direct path:
+`import ImageLoader from 'cozy-ui/transpiled/react/ImageLoader`.
+The method `checkImageSource` has been moved also
+from `Viewer` folder to `ImageLoader` folder.
+
+Co-authored-by: JF-Cozy
+
+# [57.10.0](https://github.com/cozy/cozy-ui/compare/v57.9.2...v57.10.0) (2021-11-29)
+
+
+### Features
+
+* Forward remaining props to AppIcon ([ed86adf](https://github.com/cozy/cozy-ui/commit/ed86adf))
+
 ## [57.9.2](https://github.com/cozy/cozy-ui/compare/v57.9.1...v57.9.2) (2021-11-23)
 
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "cozy-ui",
-  "version": "57.9.2",
+  "version": "58.1.1",
   "description": "Cozy apps UI SDK",
   "main": "./index.js",
   "bin": {
@@ -140,7 +140,7 @@
     "stylus": "0.54.7",
     "stylus-loader": "3.0.2",
     "svg-sprite-loader": "4.1.6",
-    "svgstore-cli": "1.3.1",
+    "svgstore-cli": "1.3.2",
     "url-loader": "1.1.2",
     "webpack": "4.39.3"
   },

package/react/FileImageLoader/Readme.md

@@ -0,0 +1,48 @@
+### FileImageLoader
+
+A component to get the image in `links` prop of a file, according to its class (could be `image` or `pdf`).
+
+```jsx
+import DemoProvider from '../Viewer/docs/DemoProvider'
+
+import FileImageLoader from 'cozy-ui/transpiled/react/FileImageLoader'
+import Icon from 'cozy-ui/transpiled/react/Icon'
+import FileDuotoneIcon from "cozy-ui/transpiled/react/Icons/FileDuotone"
+import BankIcon from "cozy-ui/transpiled/react/Icons/Bank"
+
+const file = {
+  _id: 'image',
+  class: 'image',
+  name: 'Demo.img',
+  mime: 'application/jpeg',
+  links: {
+    large: 'https://viewerdemo.cozycloud.cc/IMG_0062.PNG'
+  }
+}
+
+const onImageError = () => console.info('image errored')
+const onImageLoad = () => console.info('image loaded!')
+const FallbackComp = () => {
+  return (
+    <div>fallback component</div>
+  )
+}
+
+;
+
+<DemoProvider>
+  <FileImageLoader
+    file={file}
+    linkType="large"
+    onError={onImageError}
+    render={src => (
+      <img
+        src={src}
+        height={300}
+        onLoad={onImageLoad}
+      />
+    )}
+    renderFallback={() => <FallbackComp />}
+  />
+</DemoProvider>
+```

package/react/{Viewer → FileImageLoader}/checkImageSource.js

@@ -1,8 +1,12 @@
-const TTL = 10000
-
-export const checkImageSource = src => {
+/**
+ * @param {string} src - Image source
+ * @returns {Promise<void>}
+ */
+export const checkImageSource = async src => {
+  const TTL = 10000
   let timeout = null
   let img = null
+
   const cleanImageLoader = () => {
     clearTimeout(timeout)
     img.onload = img.onerror = null

package/react/{Viewer/ImageLoader.jsx → FileImageLoader/index.jsx}

@@ -1,4 +1,4 @@
-import React from 'react'
+import { Component } from 'react'
 import PropTypes from 'prop-types'
 import { withClient } from 'cozy-client'
 import logger from 'cozy-logger'
@@ -11,7 +11,8 @@ const FAILED = 'FAILED'
 const GET_LINK = 'GET_LINK'
 
 import { checkImageSource } from './checkImageSource'
-export class ImageLoader extends React.Component {
+
+export class FileImageLoader extends Component {
   state = {
     src: null
   }
@@ -19,9 +20,13 @@ export class ImageLoader extends React.Component {
   _mounted = false
 
   componentDidMount() {
+    const { client } = this.props
     this._mounted = true
     this.status = PENDING
     this.loadNextSrc()
+    this.realtime = client.plugins.realtime
+    this.type = 'io.cozy.files.thumbnails'
+    this.realtime.subscribe('created', this.type, this.handleCreate)
   }
 
   componentWillUnmount() {
@@ -30,6 +35,19 @@ export class ImageLoader extends React.Component {
       this.img.onload = this.img.onerror = null
       this.img.src = ''
     }
+    this.realtime &&
+      this.realtime.unsubscribe('created', this.type, this.handleCreate)
+  }
+
+  /**
+   * Reload the link when realtime tell us that the
+   * thumbnail is created. By default linkType === small
+   */
+  handleCreate = doc => {
+    const { file, linkType } = this.props
+    if (file._id === doc._id && doc.format === linkType) {
+      this.loadLink()
+    }
   }
 
   getFileId(file) {
@@ -51,6 +69,7 @@ export class ImageLoader extends React.Component {
     const response = await this.props.client
       .collection('io.cozy.files')
       .get(this.getFileId(file))
+
     if (!response.data.links) throw new Error('Could not fetch file links')
     return response.data.links
   }
@@ -63,6 +82,7 @@ export class ImageLoader extends React.Component {
       const link = file.links ? file.links[linkType] : false
 
       if (!link) throw new Error(`${linkType} link is not available`)
+
       const src = client.getStackClient().uri + link
       await checkImageSource(src)
       if (this._mounted) {
@@ -72,10 +92,10 @@ export class ImageLoader extends React.Component {
         })
       }
     } catch (e) {
-      logger.error(e)
       this.loadNextSrc(e)
     }
   }
+
   async loadLink() {
     this.status = LOADING_LINK
     const { file, linkType, client } = this.props
@@ -105,7 +125,7 @@ export class ImageLoader extends React.Component {
     const { file, client } = this.props
 
     try {
-      // ImageLoader can also be used for pdf files, because on mobile a preview image is
+      // FileImageLoader can also be used for pdf files, because on mobile a preview image is
       // generated and the pdf is therefore treated as an image.
       // But the fallback allows to display the original file as an image if there is an error
       // during the preview recovery. This principle is not possible with a pdf file.
@@ -137,17 +157,17 @@ export class ImageLoader extends React.Component {
   }
 }
 
-ImageLoader.propTypes = {
+FileImageLoader.propTypes = {
   file: PropTypes.object.isRequired,
   render: PropTypes.func.isRequired,
-  linkType: PropTypes.oneOf(['small', 'medium', 'large', 'preview']),
+  linkType: PropTypes.oneOf(['small', 'medium', 'large', 'preview', 'icon']),
   onError: PropTypes.func,
   renderFallback: PropTypes.func
 }
 
-ImageLoader.defaultProps = {
+FileImageLoader.defaultProps = {
   linkType: 'small',
   onError: () => {}
 }
 
-export default withClient(ImageLoader)
+export default withClient(FileImageLoader)

package/react/{Viewer/ImageLoader.spec.jsx → FileImageLoader/index.spec.jsx}

@@ -4,7 +4,7 @@ import { render, waitFor } from '@testing-library/react'
 import { createMockClient } from 'cozy-client'
 import logger from 'cozy-logger'
 
-import { ImageLoader } from './ImageLoader'
+import { FileImageLoader } from '.'
 import { checkImageSource } from './checkImageSource'
 
 jest.mock('./checkImageSource', () => ({
@@ -21,6 +21,11 @@ client.collection = jest.fn(() => ({
   getDownloadLinkById: getDownloadLinkByIdMock,
   get: getMock
 }))
+client.plugins.realtime = {
+  subscribe: jest.fn(),
+  unsubscribe: jest.fn(),
+  unsubscribeAll: jest.fn()
+}
 
 const file = {
   _id: 'image',
@@ -34,11 +39,18 @@ const file = {
 
 const setup = ({ file }) => {
   const root = render(
-    <ImageLoader
+    <FileImageLoader
       file={file}
       linkType="large"
       key={file.id}
       render={src => <img alt={file.name} src={src} data-testid="img_image" />}
+      renderFallback={() => (
+        <img
+          alt="render fallback"
+          src="http://url.img_image_render_fallback/"
+          data-testid="img_image_renderFallback"
+        />
+      )}
       client={client}
     />
   )
@@ -46,10 +58,11 @@ const setup = ({ file }) => {
   return { root }
 }
 
-describe('ImageLoader', () => {
+describe('FileImageLoader', () => {
   afterEach(() => {
     jest.restoreAllMocks()
   })
+
   it('should set the source of image to links.large if no error', async () => {
     const { root } = setup({ file })
     const { getByTestId } = root
@@ -115,4 +128,30 @@ describe('ImageLoader', () => {
     const img = getByTestId('img_image')
     expect(img.src).toEqual('http://valid/')
   })
+
+  it('should render fallback component if other request failed & file is a PDF', async () => {
+    const file = {
+      _id: 'pdf',
+      class: 'pdf',
+      name: 'Demo.pdf',
+      mime: 'application/pdf',
+      links: {
+        icon: 'https://url.not.valid.anymore'
+      }
+    }
+    checkImageSource.mockRejectedValueOnce('KO')
+    const { root } = setup({ file })
+    const { getByTestId } = root
+    getMock.mockResolvedValue({
+      data: {
+        links: {
+          icon: 'http://urlnotvalidneither'
+        }
+      }
+    })
+    await waitFor(() => getByTestId('img_image_renderFallback'))
+
+    const img = getByTestId('img_image_renderFallback')
+    expect(img.src).toEqual('http://url.img_image_render_fallback/')
+  })
 })

package/react/SquareAppIcon/Readme.md

@@ -10,6 +10,7 @@ import { useCozyTheme } from 'cozy-ui/transpiled/react/CozyTheme'
 import cloudWallpaper from '../../docs/cloud-wallpaper.jpg'
 
 const theme = useCozyTheme()
+const app = { name: "Test App", slug: "testapp", type: "app" }
 
 ;
 
@@ -17,13 +18,13 @@ const theme = useCozyTheme()
 <Grid container spacing={1} style={{ background: `center / cover no-repeat url(${cloudWallpaper})` }}
 >
   <Grid item>
-    <SquareAppIcon app="testapp" name="Normal" />
+    <SquareAppIcon app={app} name="Normal" />
   </Grid>
   <Grid item>
-    <SquareAppIcon app="testapp" name="Maintenance" variant="maintenance" />
+    <SquareAppIcon app={app} name="Maintenance" variant="maintenance" />
   </Grid>
   <Grid item>
-    <SquareAppIcon app="testapp" name="Error" variant="error" />
+    <SquareAppIcon app={app} name="Error" variant="error" />
   </Grid>
   <Grid item>
     <SquareAppIcon name="Add" variant="add" />

package/react/SquareAppIcon/index.jsx

@@ -2,13 +2,13 @@ import React from 'react'
 import cx from 'classnames'
 import PropTypes from 'prop-types'
 import { makeStyles } from '@material-ui/styles'
+import get from 'lodash/get'
 
 import AppIcon from '../AppIcon'
 import Badge from '../Badge'
 import InfosBadge from '../InfosBadge'
 import { nameToColor } from '../Avatar'
 import Typography from '../Typography'
-import { AppDoctype } from '../proptypes'
 import Icon from '../Icon'
 import iconPlus from '../Icons/Plus'
 import iconWarning from '../Icons/WarningCircle'
@@ -61,9 +61,15 @@ const useStyles = makeStyles(theme => ({
   }
 }))
 
-export const SquareAppIcon = ({ app, type, name, variant, IconContent }) => {
+export const SquareAppIcon = ({
+  name,
+  variant,
+  IconContent,
+  ...appIconProps
+}) => {
   const classes = useStyles()
-  const appName = name || (app && app.name) || app || ''
+  const appName =
+    name || get(appIconProps, 'app.name') || get(appIconProps, 'app') || ''
   const letter = appName[0] || ''
 
   return (
@@ -119,7 +125,7 @@ export const SquareAppIcon = ({ app, type, name, variant, IconContent }) => {
               ) : IconContent ? (
                 IconContent
               ) : (
-                <AppIcon app={app} type={type} />
+                <AppIcon {...appIconProps} />
               )}
             </div>
           )}
@@ -137,7 +143,6 @@ export const SquareAppIcon = ({ app, type, name, variant, IconContent }) => {
 }
 
 SquareAppIcon.propTypes = {
-  app: PropTypes.oneOfType([AppDoctype, PropTypes.string]),
   name: PropTypes.string,
   variant: PropTypes.oneOf([
     'ghost',
@@ -146,8 +151,7 @@ SquareAppIcon.propTypes = {
     'add',
     'shortcut'
   ]),
-  IconContent: PropTypes.node,
-  type: PropTypes.oneOf(['app', 'konnector'])
+  IconContent: PropTypes.node
 }
 
 export default SquareAppIcon

package/react/Viewer/ImageViewer.jsx

@@ -1,8 +1,9 @@
 import React, { Component } from 'react'
 import Hammer from 'hammerjs'
 
+import FileImageLoader from '../FileImageLoader'
+
 import ViewerSpinner from './ViewerSpinner'
-import ImageLoader from './ImageLoader'
 import NoNetworkViewer from './NoNetworkViewer'
 
 import styles from './styles.styl'
@@ -222,7 +223,7 @@ class ImageViewer extends Component {
       <div className={styles['viewer-imageviewer']}>
         {loading && <ViewerSpinner />}
         {file && (
-          <ImageLoader
+          <FileImageLoader
             file={file}
             linkType="large"
             onError={this.onImageError}

package/react/Viewer/ImageViewer.spec.jsx

@@ -4,11 +4,11 @@ import { render, waitFor } from '@testing-library/react'
 import { BreakpointsProvider } from '../hooks/useBreakpoints'
 
 import DemoProvider from './docs/DemoProvider'
-import { checkImageSource } from './checkImageSource'
+import { checkImageSource } from '../FileImageLoader/checkImageSource'
 import ImageViewer from './ImageViewer'
 
-jest.mock('./checkImageSource', () => ({
-  ...jest.requireActual('./checkImageSource'),
+jest.mock('../FileImageLoader/checkImageSource', () => ({
+  ...jest.requireActual('../FileImageLoader/checkImageSource'),
   checkImageSource: jest.fn()
 }))
 

package/react/Viewer/PdfMobileViewer.jsx

@@ -7,10 +7,10 @@ import { isMobileApp } from 'cozy-device-helper'
 import Alerter from '../Alerter'
 import Spinner from '../Spinner'
 import Button from '../Button'
+import FileImageLoader from '../FileImageLoader'
 
 import { withViewerLocales } from './withViewerLocales'
 import DownloadButton from './NoViewer/DownloadButton'
-import ImageLoader from './ImageLoader'
 import NoViewer from './NoViewer'
 
 import styles from './styles.styl'
@@ -80,7 +80,7 @@ export const PdfMobileViewer = ({ file, t, gestures }) => {
     <div className={styles['viewer-pdfMobile']}>
       {loading && <Spinner size="xxlarge" middle noMargin />}
       {file && (
-        <ImageLoader
+        <FileImageLoader
           file={file}
           linkType="preview"
           onError={onImageError}

package/react/Viewer/PdfMobileViewer.spec.jsx

@@ -20,6 +20,11 @@ const client = createMockClient({})
 client.collection = jest.fn(() => ({
   getDownloadLinkById: jest.fn()
 }))
+client.plugins.realtime = {
+  subscribe: jest.fn(),
+  unsubscribe: jest.fn(),
+  unsubscribeAll: jest.fn()
+}
 
 const file = {
   _id: 'pdf',

package/react/index.js

@@ -97,3 +97,4 @@ export { default as Paper } from './Paper'
 export { default as ProgressionBanner } from './ProgressionBanner'
 export { default as Fab } from './Fab'
 export { default as SquareAppIcon } from './SquareAppIcon'
+export { default as FileImageLoader } from './FileImageLoader'

package/transpiled/react/FileImageLoader/checkImageSource.js

@@ -0,0 +1,49 @@
+import _regeneratorRuntime from "@babel/runtime/regenerator";
+import _asyncToGenerator from "@babel/runtime/helpers/asyncToGenerator";
+
+/**
+ * @param {string} src - Image source
+ * @returns {Promise<void>}
+ */
+export var checkImageSource = /*#__PURE__*/function () {
+  var _ref = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee(src) {
+    var TTL, timeout, img, cleanImageLoader;
+    return _regeneratorRuntime.wrap(function _callee$(_context) {
+      while (1) {
+        switch (_context.prev = _context.next) {
+          case 0:
+            TTL = 10000;
+            timeout = null;
+            img = null;
+
+            cleanImageLoader = function cleanImageLoader() {
+              clearTimeout(timeout);
+              img.onload = img.onerror = null;
+              img.src = '';
+              img = null;
+            };
+
+            return _context.abrupt("return", new Promise(function (resolve, reject) {
+              img = new Image();
+              img.onload = resolve;
+              img.onerror = reject;
+              img.src = src;
+              timeout = setTimeout(function () {
+                return reject(new Error('Loading image took too long'));
+              }, TTL);
+            }).then(function () {
+              return cleanImageLoader();
+            }));
+
+          case 5:
+          case "end":
+            return _context.stop();
+        }
+      }
+    }, _callee);
+  }));
+
+  return function checkImageSource(_x) {
+    return _ref.apply(this, arguments);
+  };
+}();

package/transpiled/react/{Viewer/ImageLoader.js → FileImageLoader/index.js}

@@ -7,7 +7,7 @@ import _getPrototypeOf from "@babel/runtime/helpers/getPrototypeOf";
 import _assertThisInitialized from "@babel/runtime/helpers/assertThisInitialized";
 import _inherits from "@babel/runtime/helpers/inherits";
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
-import React from 'react';
+import { Component } from 'react';
 import PropTypes from 'prop-types';
 import { withClient } from 'cozy-client';
 import logger from 'cozy-logger';
@@ -17,22 +17,22 @@ var LOADING_FALLBACK = 'LOADING_FALLBACK';
 var LOADED = 'LOADED';
 var FAILED = 'FAILED';
 var GET_LINK = 'GET_LINK';
-import { checkImageSource } from "cozy-ui/transpiled/react/Viewer/checkImageSource";
-export var ImageLoader = /*#__PURE__*/function (_React$Component) {
-  _inherits(ImageLoader, _React$Component);
+import { checkImageSource } from "cozy-ui/transpiled/react/FileImageLoader/checkImageSource";
+export var FileImageLoader = /*#__PURE__*/function (_Component) {
+  _inherits(FileImageLoader, _Component);
 
-  function ImageLoader() {
+  function FileImageLoader() {
     var _getPrototypeOf2;
 
     var _this;
 
-    _classCallCheck(this, ImageLoader);
+    _classCallCheck(this, FileImageLoader);
 
     for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
       args[_key] = arguments[_key];
     }
 
-    _this = _possibleConstructorReturn(this, (_getPrototypeOf2 = _getPrototypeOf(ImageLoader)).call.apply(_getPrototypeOf2, [this].concat(args)));
+    _this = _possibleConstructorReturn(this, (_getPrototypeOf2 = _getPrototypeOf(FileImageLoader)).call.apply(_getPrototypeOf2, [this].concat(args)));
 
     _defineProperty(_assertThisInitialized(_this), "state", {
       src: null
@@ -40,15 +40,29 @@ export var ImageLoader = /*#__PURE__*/function (_React$Component) {
 
     _defineProperty(_assertThisInitialized(_this), "_mounted", false);
 
+    _defineProperty(_assertThisInitialized(_this), "handleCreate", function (doc) {
+      var _this$props = _this.props,
+          file = _this$props.file,
+          linkType = _this$props.linkType;
+
+      if (file._id === doc._id && doc.format === linkType) {
+        _this.loadLink();
+      }
+    });
+
     return _this;
   }
 
-  _createClass(ImageLoader, [{
+  _createClass(FileImageLoader, [{
     key: "componentDidMount",
     value: function componentDidMount() {
+      var client = this.props.client;
       this._mounted = true;
       this.status = PENDING;
       this.loadNextSrc();
+      this.realtime = client.plugins.realtime;
+      this.type = 'io.cozy.files.thumbnails';
+      this.realtime.subscribe('created', this.type, this.handleCreate);
     }
   }, {
     key: "componentWillUnmount",
@@ -59,7 +73,14 @@ export var ImageLoader = /*#__PURE__*/function (_React$Component) {
         this.img.onload = this.img.onerror = null;
         this.img.src = '';
       }
+
+      this.realtime && this.realtime.unsubscribe('created', this.type, this.handleCreate);
     }
+    /**
+     * Reload the link when realtime tell us that the
+     * thumbnail is created. By default linkType === small
+     */
+
   }, {
     key: "getFileId",
     value: function getFileId(file) {
@@ -120,14 +141,14 @@ export var ImageLoader = /*#__PURE__*/function (_React$Component) {
     key: "getLink",
     value: function () {
       var _getLink = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee2() {
-        var _this$props, file, linkType, client, link, src;
+        var _this$props2, file, linkType, client, link, src;
 
         return _regeneratorRuntime.wrap(function _callee2$(_context2) {
           while (1) {
             switch (_context2.prev = _context2.next) {
               case 0:
                 this.status = GET_LINK;
-                _this$props = this.props, file = _this$props.file, linkType = _this$props.linkType, client = _this$props.client;
+                _this$props2 = this.props, file = _this$props2.file, linkType = _this$props2.linkType, client = _this$props2.client;
                 _context2.prev = 2;
                 link = file.links ? file.links[linkType] : false;
 
@@ -151,16 +172,15 @@ export var ImageLoader = /*#__PURE__*/function (_React$Component) {
                   });
                 }
 
-                _context2.next = 16;
+                _context2.next = 15;
                 break;
 
               case 12:
                 _context2.prev = 12;
                 _context2.t0 = _context2["catch"](2);
-                logger.error(_context2.t0);
                 this.loadNextSrc(_context2.t0);
 
-              case 16:
+              case 15:
               case "end":
                 return _context2.stop();
             }
@@ -178,14 +198,14 @@ export var ImageLoader = /*#__PURE__*/function (_React$Component) {
     key: "loadLink",
     value: function () {
       var _loadLink = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee3() {
-        var _this$props2, file, linkType, client, links, link, src;
+        var _this$props3, file, linkType, client, links, link, src;
 
         return _regeneratorRuntime.wrap(function _callee3$(_context3) {
           while (1) {
             switch (_context3.prev = _context3.next) {
               case 0:
                 this.status = LOADING_LINK;
-                _this$props2 = this.props, file = _this$props2.file, linkType = _this$props2.linkType, client = _this$props2.client;
+                _this$props3 = this.props, file = _this$props3.file, linkType = _this$props3.linkType, client = _this$props3.client;
                 _context3.prev = 2;
                 _context3.next = 5;
                 return this.fetchFileLinks(file);
@@ -241,14 +261,14 @@ export var ImageLoader = /*#__PURE__*/function (_React$Component) {
     key: "loadFallback",
     value: function () {
       var _loadFallback = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee4() {
-        var _this$props3, file, client, src;
+        var _this$props4, file, client, src;
 
         return _regeneratorRuntime.wrap(function _callee4$(_context4) {
           while (1) {
             switch (_context4.prev = _context4.next) {
               case 0:
                 this.status = LOADING_FALLBACK;
-                _this$props3 = this.props, file = _this$props3.file, client = _this$props3.client;
+                _this$props4 = this.props, file = _this$props4.file, client = _this$props4.client;
                 _context4.prev = 2;
 
                 if (!(file.class === 'pdf')) {
@@ -301,24 +321,24 @@ export var ImageLoader = /*#__PURE__*/function (_React$Component) {
     key: "render",
     value: function render() {
       var src = this.state.src;
-      var _this$props4 = this.props,
-          render = _this$props4.render,
-          renderFallback = _this$props4.renderFallback;
+      var _this$props5 = this.props,
+          render = _this$props5.render,
+          renderFallback = _this$props5.renderFallback;
       if (src) return render(src);else if (renderFallback) return renderFallback();else return null;
     }
   }]);
 
-  return ImageLoader;
-}(React.Component);
-ImageLoader.propTypes = {
+  return FileImageLoader;
+}(Component);
+FileImageLoader.propTypes = {
   file: PropTypes.object.isRequired,
   render: PropTypes.func.isRequired,
-  linkType: PropTypes.oneOf(['small', 'medium', 'large', 'preview']),
+  linkType: PropTypes.oneOf(['small', 'medium', 'large', 'preview', 'icon']),
   onError: PropTypes.func,
   renderFallback: PropTypes.func
 };
-ImageLoader.defaultProps = {
+FileImageLoader.defaultProps = {
   linkType: 'small',
   onError: function onError() {}
 };
-export default withClient(ImageLoader);
+export default withClient(FileImageLoader);

package/transpiled/react/SquareAppIcon/index.js

@@ -1,14 +1,15 @@
+import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
 import React from 'react';
 import cx from 'classnames';
 import PropTypes from 'prop-types';
 import { makeStyles } from '@material-ui/styles';
+import get from 'lodash/get';
 import AppIcon from "cozy-ui/transpiled/react/AppIcon";
 import Badge from "cozy-ui/transpiled/react/Badge";
 import InfosBadge from "cozy-ui/transpiled/react/InfosBadge";
 import { nameToColor } from "cozy-ui/transpiled/react/Avatar";
 import Typography from "cozy-ui/transpiled/react/Typography";
-import { AppDoctype } from "cozy-ui/transpiled/react/proptypes";
 import Icon from "cozy-ui/transpiled/react/Icon";
 import iconPlus from "cozy-ui/transpiled/react/Icons/Plus";
 import iconWarning from "cozy-ui/transpiled/react/Icons/WarningCircle";
@@ -74,13 +75,13 @@ var useStyles = makeStyles(function (theme) {
 export var SquareAppIcon = function SquareAppIcon(_ref) {
   var _cx;
 
-  var app = _ref.app,
-      type = _ref.type,
-      name = _ref.name,
+  var name = _ref.name,
       variant = _ref.variant,
-      IconContent = _ref.IconContent;
+      IconContent = _ref.IconContent,
+      appIconProps = _objectWithoutProperties(_ref, ["name", "variant", "IconContent"]);
+
   var classes = useStyles();
-  var appName = name || app && app.name || app || '';
+  var appName = name || get(appIconProps, 'app.name') || get(appIconProps, 'app') || '';
   var letter = appName[0] || '';
   return React.createElement("div", {
     "data-testid": "square-app-icon",
@@ -115,20 +116,15 @@ export var SquareAppIcon = function SquareAppIcon(_ref) {
   }, variant === 'add' ? React.createElement(Icon, {
     icon: iconPlus,
     color: color
-  }) : IconContent ? IconContent : React.createElement(AppIcon, {
-    app: app,
-    type: type
-  })))), React.createElement(Typography, {
+  }) : IconContent ? IconContent : React.createElement(AppIcon, appIconProps)))), React.createElement(Typography, {
     className: cx(classes.name, 'u-spacellipsis'),
     variant: "h6",
     align: "center"
   }, appName));
 };
 SquareAppIcon.propTypes = {
-  app: PropTypes.oneOfType([AppDoctype, PropTypes.string]),
   name: PropTypes.string,
   variant: PropTypes.oneOf(['ghost', 'maintenance', 'error', 'add', 'shortcut']),
-  IconContent: PropTypes.node,
-  type: PropTypes.oneOf(['app', 'konnector'])
+  IconContent: PropTypes.node
 };
 export default SquareAppIcon;

package/transpiled/react/Viewer/ImageViewer.js

@@ -8,8 +8,8 @@ import _inherits from "@babel/runtime/helpers/inherits";
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
 import React, { Component } from 'react';
 import Hammer from 'hammerjs';
+import FileImageLoader from "cozy-ui/transpiled/react/FileImageLoader";
 import ViewerSpinner from "cozy-ui/transpiled/react/Viewer/ViewerSpinner";
-import ImageLoader from "cozy-ui/transpiled/react/Viewer/ImageLoader";
 import NoNetworkViewer from "cozy-ui/transpiled/react/Viewer/NoNetworkViewer";
 var styles = {
   "CozyTheme--inverted": "styles__CozyTheme--inverted___1II8o",
@@ -269,7 +269,7 @@ var ImageViewer = /*#__PURE__*/function (_Component) {
       };
       return React.createElement("div", {
         className: styles['viewer-imageviewer']
-      }, loading && React.createElement(ViewerSpinner, null), file && React.createElement(ImageLoader, {
+      }, loading && React.createElement(ViewerSpinner, null), file && React.createElement(FileImageLoader, {
         file: file,
         linkType: "large",
         onError: this.onImageError,

package/transpiled/react/Viewer/PdfMobileViewer.js

@@ -8,9 +8,9 @@ import { isMobileApp } from 'cozy-device-helper';
 import Alerter from "cozy-ui/transpiled/react/Alerter";
 import Spinner from "cozy-ui/transpiled/react/Spinner";
 import Button from "cozy-ui/transpiled/react/Button";
+import FileImageLoader from "cozy-ui/transpiled/react/FileImageLoader";
 import { withViewerLocales } from "cozy-ui/transpiled/react/Viewer/withViewerLocales";
 import DownloadButton from "cozy-ui/transpiled/react/Viewer/NoViewer/DownloadButton";
-import ImageLoader from "cozy-ui/transpiled/react/Viewer/ImageLoader";
 import NoViewer from "cozy-ui/transpiled/react/Viewer/NoViewer";
 var styles = {
   "CozyTheme--inverted": "styles__CozyTheme--inverted___1II8o",
@@ -146,7 +146,7 @@ export var PdfMobileViewer = function PdfMobileViewer(_ref) {
     size: "xxlarge",
     middle: true,
     noMargin: true
-  }), file && React.createElement(ImageLoader, {
+  }), file && React.createElement(FileImageLoader, {
     file: file,
     linkType: "preview",
     onError: onImageError,

package/transpiled/react/index.js

@@ -74,4 +74,5 @@ export { default as CozyTheme } from './CozyTheme';
 export { default as Paper } from './Paper';
 export { default as ProgressionBanner } from './ProgressionBanner';
 export { default as Fab } from './Fab';
-export { default as SquareAppIcon } from './SquareAppIcon';
+export { default as SquareAppIcon } from './SquareAppIcon';
+export { default as FileImageLoader } from './FileImageLoader';

package/transpiled/react/Viewer/checkImageSource.js

@@ -1,24 +0,0 @@
-var TTL = 10000;
-export var checkImageSource = function checkImageSource(src) {
-  var timeout = null;
-  var img = null;
-
-  var cleanImageLoader = function cleanImageLoader() {
-    clearTimeout(timeout);
-    img.onload = img.onerror = null;
-    img.src = '';
-    img = null;
-  };
-
-  return new Promise(function (resolve, reject) {
-    img = new Image();
-    img.onload = resolve;
-    img.onerror = reject;
-    img.src = src;
-    timeout = setTimeout(function () {
-      return reject(new Error('Loading image took too long'));
-    }, TTL);
-  }).then(function () {
-    return cleanImageLoader();
-  });
-};