cozy-ui 62.2.0 → 62.4.1

package/CHANGELOG.md

@@ -1,3 +1,24 @@
+## [62.4.1](https://github.com/cozy/cozy-ui/compare/v62.4.0...v62.4.1) (2022-03-28)
+
+
+### Bug Fixes
+
+* bump @semantic-release/npm from 5.3.4 to 9.0.1 ([cfb30eb](https://github.com/cozy/cozy-ui/commit/cfb30eb))
+
+# [62.4.0](https://github.com/cozy/cozy-ui/compare/v62.3.0...v62.4.0) (2022-03-28)
+
+
+### Features
+
+* Add tiny size for FileImageLoader ([ae6ba29](https://github.com/cozy/cozy-ui/commit/ae6ba29))
+
+# [62.3.0](https://github.com/cozy/cozy-ui/compare/v62.2.0...v62.3.0) (2022-03-25)
+
+
+### Features
+
+* Implement openApp animation from cozy-ui ([45e9e3b](https://github.com/cozy/cozy-ui/commit/45e9e3b))
+
 # [62.2.0](https://github.com/cozy/cozy-ui/compare/v62.1.4...v62.2.0) (2022-03-22)
 
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "cozy-ui",
-  "version": "62.2.0",
+  "version": "62.4.1",
   "description": "Cozy apps UI SDK",
   "main": "./index.js",
   "bin": {
@@ -76,7 +76,7 @@
     "@material-ui/core": "4.12.3",
     "@semantic-release/changelog": "5.0.1",
     "@semantic-release/git": "7.0.18",
-    "@semantic-release/npm": "5.3.4",
+    "@semantic-release/npm": "9.0.1",
     "@svgr/cli": "^5.4.0",
     "@testing-library/jest-dom": "^5.14.1",
     "@testing-library/react": "11.2.7",

package/react/AppIcon/index.jsx

@@ -111,8 +111,9 @@ export class AppIcon extends Component {
           <img
             alt={alt}
             className={cx(styles['c-app-icon'], className)}
-            src={icon}
             onError={this.handleError}
+            ref={this.props.iconRef}
+            src={icon}
           />
         )
       case ERRORED:
@@ -128,6 +129,7 @@ export class AppIcon extends Component {
             icon={fallbackIcon || CubeIcon}
             width="100%"
             color={palette['coolGrey']}
+            iconRef={this.props.iconRef}
           />
         )
     }

package/react/AppLinker/index.jsx

@@ -1,5 +1,6 @@
 import React from 'react'
 import PropTypes from 'prop-types'
+
 import {
   checkApp,
   startApp,
@@ -9,6 +10,8 @@ import {
   isAndroid,
   isFlagshipApp
 } from 'cozy-device-helper'
+import { WebviewContext } from 'cozy-intent'
+import logger from 'cozy-logger'
 
 import {
   generateUniversalLink,
@@ -17,7 +20,6 @@ import {
 } from './native'
 import { NATIVE_APP_INFOS } from './native.config'
 import expiringMemoize from './expiringMemoize'
-import { WebviewContext } from 'cozy-intent'
 
 const expirationDelay = 10 * 1000
 const memoizedCheckApp = expiringMemoize(
@@ -36,6 +38,13 @@ export class AppLinker extends React.Component {
 
   constructor(props) {
     super(props)
+
+    this.imgRef = null
+  }
+
+  setImgRef = img => {
+    this.imgRef = img
+    this.setState({ imgRef: this.imgRef })
   }
 
   componentDidMount() {
@@ -69,7 +78,7 @@ export class AppLinker extends React.Component {
     }
   }
 
-  static getOnClickHref(props, nativeAppIsAvailable, context) {
+  static getOnClickHref(props, nativeAppIsAvailable, context, imgRef) {
     const { app, nativePath } = props
     const slug = AppLinker.getSlug(props)
     let href = props.href
@@ -79,15 +88,21 @@ export class AppLinker extends React.Component {
 
     if (isFlagshipApp()) {
       if (!context)
-        console.warn(
-          'FlagshipApp detected but no context found. Is the app wrapped in WebviewIntentProvider?'
+        logger.warn(
+          'FlagshipApp detected but no context found. Is the app wrapped in <WebviewIntentProvider? />'
         )
 
       if (context) {
+        const imgPayload =
+          imgRef &&
+          JSON.stringify({
+            ...imgRef.getBoundingClientRect().toJSON()
+          })
+
         return {
           onClick: event => {
             event.preventDefault()
-            context.call('openApp', href, app)
+            context.call('openApp', href, app, imgPayload)
           },
           href: '#'
         }
@@ -180,9 +195,16 @@ export class AppLinker extends React.Component {
     const { href, onClick } = AppLinker.getOnClickHref(
       this.props,
       nativeAppIsAvailable,
-      this.context
+      this.context,
+      this.state.imgRef
     )
-    return children({ ...appInfo, onClick: onClick, href })
+
+    return children({
+      ...appInfo,
+      iconRef: this.setImgRef,
+      onClick: onClick,
+      href
+    })
   }
 }
 

package/react/FileImageLoader/index.jsx

@@ -160,7 +160,14 @@ export class FileImageLoader extends Component {
 FileImageLoader.propTypes = {
   file: PropTypes.object.isRequired,
   render: PropTypes.func.isRequired,
-  linkType: PropTypes.oneOf(['small', 'medium', 'large', 'preview', 'icon']),
+  linkType: PropTypes.oneOf([
+    'tiny',
+    'small',
+    'medium',
+    'large',
+    'preview',
+    'icon'
+  ]),
   onError: PropTypes.func,
   renderFallback: PropTypes.func
 }

package/react/Icons/Cube.jsx

@@ -1,9 +1,9 @@
 // Automatically created, please run `scripts/generate-svg-icon.sh assets/icons/ui/cube.svg` to regenerate;
 import React from 'react'
 
-function SvgCube(props) {
+function SvgCube({ iconRef, ...props }) {
   return (
-    <svg viewBox="0 0 16 16" {...props}>
+    <svg viewBox="0 0 16 16" {...props} ref={iconRef}>
       <path d="M1 11.009V5.5c0-.55.39-.773.872-.498l5.256 3.003c.476.272.872.944.872 1.495v5.508c0 .549-.39.772-.872.497l-5.256-3.003C1.396 12.231 1 11.56 1 11.01zm15 0c0 .55-.396 1.222-.872 1.494l-5.256 3.003c-.481.275-.872.052-.872-.497V9.5c0-.55.396-1.223.872-1.495l5.256-3.003c.481-.275.872-.052.872.498v5.508zM9.35 6.982c-.47.288-1.237.284-1.7 0l-4.8-2.954c-.47-.29-.463-.732.027-.995L7.623.477c.485-.261 1.264-.264 1.754 0l4.746 2.556c.485.26.49.71.027.995l-4.8 2.954z" />
     </svg>
   )

package/transpiled/react/AppIcon/index.js

@@ -175,8 +175,9 @@ export var AppIcon = /*#__PURE__*/function (_Component) {
           return /*#__PURE__*/React.createElement("img", {
             alt: alt,
             className: cx(styles['c-app-icon'], className),
-            src: icon,
-            onError: this.handleError
+            onError: this.handleError,
+            ref: this.props.iconRef,
+            src: icon
           });
 
         case ERRORED:
@@ -186,7 +187,8 @@ export var AppIcon = /*#__PURE__*/function (_Component) {
             height: "100%",
             icon: fallbackIcon || CubeIcon,
             width: "100%",
-            color: palette['coolGrey']
+            color: palette['coolGrey'],
+            iconRef: this.props.iconRef
           });
       }
     }

package/transpiled/react/AppLinker/index.js

@@ -20,10 +20,11 @@ function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Re
 import React from 'react';
 import PropTypes from 'prop-types';
 import { checkApp, startApp, isMobileApp, isMobile, openDeeplinkOrRedirect, isAndroid, isFlagshipApp } from 'cozy-device-helper';
+import { WebviewContext } from 'cozy-intent';
+import logger from 'cozy-logger';
 import { generateUniversalLink, generateWebLink, getUniversalLinkDomain } from "cozy-ui/transpiled/react/AppLinker/native";
 import { NATIVE_APP_INFOS } from "cozy-ui/transpiled/react/AppLinker/native.config";
 import expiringMemoize from "cozy-ui/transpiled/react/AppLinker/expiringMemoize";
-import { WebviewContext } from 'cozy-intent';
 var expirationDelay = 10 * 1000;
 var memoizedCheckApp = expiringMemoize(function (appInfo) {
   return checkApp(appInfo).catch(function () {
@@ -49,6 +50,15 @@ export var AppLinker = /*#__PURE__*/function (_React$Component) {
       isFetchingAppInfo: false
     });
 
+    _defineProperty(_assertThisInitialized(_this), "setImgRef", function (img) {
+      _this.imgRef = img;
+
+      _this.setState({
+        imgRef: _this.imgRef
+      });
+    });
+
+    _this.imgRef = null;
     return _this;
   }
 
@@ -110,11 +120,12 @@ export var AppLinker = /*#__PURE__*/function (_React$Component) {
       var nativeAppIsAvailable = this.state.nativeAppIsAvailable;
       var appInfo = NATIVE_APP_INFOS[slug];
 
-      var _AppLinker$getOnClick = AppLinker.getOnClickHref(this.props, nativeAppIsAvailable, this.context),
+      var _AppLinker$getOnClick = AppLinker.getOnClickHref(this.props, nativeAppIsAvailable, this.context, this.state.imgRef),
           href = _AppLinker$getOnClick.href,
           onClick = _AppLinker$getOnClick.onClick;
 
       return children(_objectSpread(_objectSpread({}, appInfo), {}, {
+        iconRef: this.setImgRef,
         onClick: onClick,
         href: href
       }));
@@ -137,7 +148,7 @@ export var AppLinker = /*#__PURE__*/function (_React$Component) {
     }
   }, {
     key: "getOnClickHref",
-    value: function getOnClickHref(props, nativeAppIsAvailable, context) {
+    value: function getOnClickHref(props, nativeAppIsAvailable, context, imgRef) {
       var app = props.app,
           nativePath = props.nativePath;
       var slug = AppLinker.getSlug(props);
@@ -147,13 +158,14 @@ export var AppLinker = /*#__PURE__*/function (_React$Component) {
       var appInfo = NATIVE_APP_INFOS[slug];
 
       if (isFlagshipApp()) {
-        if (!context) console.warn('FlagshipApp detected but no context found. Is the app wrapped in WebviewIntentProvider?');
+        if (!context) logger.warn('FlagshipApp detected but no context found. Is the app wrapped in <WebviewIntentProvider? />');
 
         if (context) {
+          var imgPayload = imgRef && JSON.stringify(_objectSpread({}, imgRef.getBoundingClientRect().toJSON()));
           return {
             onClick: function onClick(event) {
               event.preventDefault();
-              context.call('openApp', href, app);
+              context.call('openApp', href, app, imgPayload);
             },
             href: '#'
           };

package/transpiled/react/FileImageLoader/index.js

@@ -338,7 +338,7 @@ export var FileImageLoader = /*#__PURE__*/function (_Component) {
 FileImageLoader.propTypes = {
   file: PropTypes.object.isRequired,
   render: PropTypes.func.isRequired,
-  linkType: PropTypes.oneOf(['small', 'medium', 'large', 'preview', 'icon']),
+  linkType: PropTypes.oneOf(['tiny', 'small', 'medium', 'large', 'preview', 'icon']),
   onError: PropTypes.func,
   renderFallback: PropTypes.func
 };

package/transpiled/react/Icons/Cube.js

@@ -1,11 +1,18 @@
 import _extends from "@babel/runtime/helpers/extends";
+import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
+var _excluded = ["iconRef"];
 // Automatically created, please run `scripts/generate-svg-icon.sh assets/icons/ui/cube.svg` to regenerate;
 import React from 'react';
 
-function SvgCube(props) {
+function SvgCube(_ref) {
+  var iconRef = _ref.iconRef,
+      props = _objectWithoutProperties(_ref, _excluded);
+
   return /*#__PURE__*/React.createElement("svg", _extends({
     viewBox: "0 0 16 16"
-  }, props), /*#__PURE__*/React.createElement("path", {
+  }, props, {
+    ref: iconRef
+  }), /*#__PURE__*/React.createElement("path", {
     d: "M1 11.009V5.5c0-.55.39-.773.872-.498l5.256 3.003c.476.272.872.944.872 1.495v5.508c0 .549-.39.772-.872.497l-5.256-3.003C1.396 12.231 1 11.56 1 11.01zm15 0c0 .55-.396 1.222-.872 1.494l-5.256 3.003c-.481.275-.872.052-.872-.497V9.5c0-.55.396-1.223.872-1.495l5.256-3.003c.481-.275.872-.052.872.498v5.508zM9.35 6.982c-.47.288-1.237.284-1.7 0l-4.8-2.954c-.47-.29-.463-.732.027-.995L7.623.477c.485-.261 1.264-.264 1.754 0l4.746 2.556c.485.26.49.71.027.995l-4.8 2.954z"
   }));
 }