cozy-ui 57.10.0 → 58.0.0

package/CHANGELOG.md

@@ -1,3 +1,24 @@
+# [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)
 
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "cozy-ui",
-  "version": "57.10.0",
+  "version": "58.0.0",
   "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
   }
@@ -51,6 +52,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 +65,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 +75,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 +108,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 +140,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', () => ({
@@ -34,11 +34,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 +53,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 +123,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/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/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
@@ -43,7 +43,7 @@ export var ImageLoader = /*#__PURE__*/function (_React$Component) {
     return _this;
   }
 
-  _createClass(ImageLoader, [{
+  _createClass(FileImageLoader, [{
     key: "componentDidMount",
     value: function componentDidMount() {
       this._mounted = true;
@@ -151,16 +151,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();
             }
@@ -308,17 +307,17 @@ export var ImageLoader = /*#__PURE__*/function (_React$Component) {
     }
   }]);
 
-  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/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();
-  });
-};