cozy-ui 74.3.0 → 74.4.2

package/CHANGELOG.md

@@ -1,3 +1,30 @@
+## [74.4.2](https://github.com/cozy/cozy-ui/compare/v74.4.1...v74.4.2) (2022-09-08)
+
+
+### Bug Fixes
+
+* isLoadingContacts on useReferencedContactName hook  ([dab3e09](https://github.com/cozy/cozy-ui/commit/dab3e09))
+
+## [74.4.1](https://github.com/cozy/cozy-ui/compare/v74.4.0...v74.4.1) (2022-09-08)
+
+
+### Bug Fixes
+
+* Restore BottomSheet items' gap in `FooterContent` container ([7ba1caf](https://github.com/cozy/cozy-ui/commit/7ba1caf))
+
+# [74.4.0](https://github.com/cozy/cozy-ui/compare/v74.3.0...v74.4.0) (2022-09-06)
+
+
+### Bug Fixes
+
+* Add a mid ellipsis to the filename in the qualification list ([4f30229](https://github.com/cozy/cozy-ui/commit/4f30229))
+* Add a missing `overflow: hidden;` property to the viewer filename ([6d9b5c2](https://github.com/cozy/cozy-ui/commit/6d9b5c2))
+
+
+### Features
+
+* Display Viewer's Download button on iOS Flagship app ([b21726c](https://github.com/cozy/cozy-ui/commit/b21726c)), closes [cozy/cozy-ui#2215](https://github.com/cozy/cozy-ui/issues/2215)
+
 # [74.3.0](https://github.com/cozy/cozy-ui/compare/v74.2.0...v74.3.0) (2022-09-02)
 
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "cozy-ui",
-  "version": "74.3.0",
+  "version": "74.4.2",
   "description": "Cozy apps UI SDK",
   "main": "./index.js",
   "bin": {
@@ -65,6 +65,7 @@
     "intersection-observer"
   ],
   "devDependencies": {
+    "@argos-ci/cli": "^0.2.1",
     "@babel/cli": "7.17.6",
     "@babel/core": "7.17.8",
     "@babel/helper-builder-react-jsx": "7.16.7",
@@ -80,7 +81,6 @@
     "@testing-library/react": "11.2.7",
     "@testing-library/react-hooks": "^3.2.1",
     "@testing-library/user-event": "^14.4.2",
-    "argos-cli": "^0.3.3",
     "autoprefixer-stylus": "1.0.0",
     "babel-loader": "8.2.4",
     "babel-plugin-css-modules-transform": "1.6.2",

package/react/Viewer/Footer/FooterContent.jsx

@@ -1,6 +1,7 @@
 import React, { useMemo, Children, cloneElement, isValidElement } from 'react'
 import PropTypes from 'prop-types'
 import { makeStyles } from '@material-ui/core/styles'
+import cx from 'classnames'
 
 import BottomSheet, { BottomSheetHeader } from '../../BottomSheet'
 
@@ -18,6 +19,9 @@ const useStyles = makeStyles(theme => ({
     paddingRight: '1rem',
     borderTop: `1px solid ${theme.palette.divider}`,
     columnGap: '0.5rem'
+  },
+  bottomSheetHeader: {
+    columnGap: '0.5rem'
   }
 }))
 
@@ -46,7 +50,9 @@ const FooterContent = ({ file, toolbarRef, children }) => {
   if (isValidForPanel({ file }) && !isLoadingContacts) {
     return (
       <BottomSheet toolbarProps={toolbarProps}>
-        <BottomSheetHeader className="u-ph-1 u-pb-1">
+        <BottomSheetHeader
+          className={cx('u-ph-1 u-pb-1', styles.bottomSheetHeader)}
+        >
           {FooterActionButtonsWithFile}
         </BottomSheetHeader>
         <BottomSheetContent file={file} contactsFullname={contactName} />

package/react/Viewer/Footer/ForwardOrDownloadButton.jsx

@@ -2,7 +2,6 @@ import React from 'react'
 import PropTypes from 'prop-types'
 
 import { useClient } from 'cozy-client'
-import { isFlagshipApp, isIOS } from 'cozy-device-helper'
 
 import ForwardButton from './ForwardButton'
 import DownloadButton from './DownloadButton'
@@ -15,10 +14,7 @@ const ForwardOrDownloadButton = ({ file }) => {
     ? ForwardButton
     : DownloadButton
 
-  // Temporarily disable Download button on iOS Flagship app until
-  // the download feature is fixed on this platform
-  // When fixed on this platform, revert this commit from PR #2215
-  return isFlagshipApp() && isIOS() ? null : <FileActionButton file={file} />
+  return <FileActionButton file={file} />
 }
 
 ForwardOrDownloadButton.propTypes = {

package/react/Viewer/Footer/useReferencedContactName.jsx

@@ -10,17 +10,20 @@ const useReferencedContactName = file => {
   const contactIds = getReferencedBy(file, 'io.cozy.contacts').map(
     ref => ref.id
   )
+  const isContactByIdsQueryEnabled = contactIds.length > 0
+
   const contactByIdsQuery = buildContactByIdsQuery(contactIds)
   const { data: contacts, ...contactsQueryResult } = useQuery(
     contactByIdsQuery.definition,
     {
       ...contactByIdsQuery.options,
-      enabled: contactIds.length > 0
+      enabled: isContactByIdsQueryEnabled
     }
   )
 
   const isLoadingContacts =
-    isQueryLoading(contactsQueryResult) || contactsQueryResult.hasMore
+    isContactByIdsQueryEnabled &&
+    (isQueryLoading(contactsQueryResult) || contactsQueryResult.hasMore)
 
   const contactName =
     contacts && contacts.length > 0

package/react/Viewer/Panel/Qualification.jsx

@@ -7,6 +7,7 @@ import List from '../../MuiCozyTheme/List'
 import ListItem from '../../MuiCozyTheme/ListItem'
 import QualificationListItemText from './QualificationListItemText'
 import { withViewerLocales } from '../withViewerLocales'
+import MidEllipsis from '../../MidEllipsis'
 
 const {
   document: {
@@ -53,9 +54,13 @@ const Qualification = ({ file = {}, contactsFullname, t, f, lang }) => {
         <QualificationListItemText
           primary={t('Viewer.panel.qualification.label.title')}
           secondary={
-            pageLabel
-              ? t(`Viewer.panel.qualification.label.${pageLabel}`)
-              : filename
+            <MidEllipsis
+              text={
+                pageLabel
+                  ? t(`Viewer.panel.qualification.label.${pageLabel}`)
+                  : filename
+              }
+            />
           }
         />
       </ListItem>

package/react/Viewer/Readme.md

@@ -73,8 +73,15 @@ const files = [
   {
     _id: 'text',
     class: 'text',
-    name: 'Demo.txt',
-    mime: 'text/plain'
+    name: 'LoremipsumdolorsitametconsecteturadipiscingelitSednonrisusSuspendisselectustortordignissimsitametadipiscingnecultriciesseddolorCraselementumultricesdiamMaecenasligulamassavariusasempercongueeuismodnonmiProinporttitororcinecnonummymolestieenimesteleifendminonfermentumdiamnislsitameteratDuissemperDuisarcumassascelerisquevitaeconsequatinpretiumaenimPellentesquecongueUtinrisusvolutpatliberopharetratemporCrasvestibulumbibendumauguePraesentegestasleoinpedePraesentblanditodioeuenimPellentesquesedduiutaugueblanditsodalesVestibulumanteipsumprimisinfaucibusorciluctusetultricesposuerecubiliaCuraeAliquamnibhMaurisacmaurissedpedepellentesquefermentumMaecenasadipiscingantenondiamsodaleshendrerit.txt',
+    mime: 'text/plain',
+    metadata: {
+      datetime: "2022-01-01T12:00:00.000Z",
+      datetimeLabel: "datetime",
+      qualification: {
+        label: 'tax_notice'
+      }
+    }
   },
     {
     _id: 'text',

package/react/Viewer/styles.styl

@@ -75,6 +75,7 @@ $viewerMarginTopMedium = $toolbarHeightMedium - $footerHeight
 .viewer-filename
     max-width     90%
     text-overflow ellipsis
+    overflow hidden
 
 .viewer-pdfviewer-pdf
     overflow auto

package/transpiled/react/Viewer/Footer/FooterContent.js

@@ -1,6 +1,7 @@
 import React, { useMemo, Children, cloneElement, isValidElement } from 'react';
 import PropTypes from 'prop-types';
 import { makeStyles } from '@material-ui/core/styles';
+import cx from 'classnames';
 import BottomSheet, { BottomSheetHeader } from "cozy-ui/transpiled/react/BottomSheet";
 import { isValidForPanel } from "cozy-ui/transpiled/react/Viewer/helpers";
 import BottomSheetContent from "cozy-ui/transpiled/react/Viewer/Footer/BottomSheetContent";
@@ -16,6 +17,9 @@ var useStyles = makeStyles(function (theme) {
       paddingRight: '1rem',
       borderTop: "1px solid ".concat(theme.palette.divider),
       columnGap: '0.5rem'
+    },
+    bottomSheetHeader: {
+      columnGap: '0.5rem'
     }
   };
 });
@@ -48,7 +52,7 @@ var FooterContent = function FooterContent(_ref) {
     return /*#__PURE__*/React.createElement(BottomSheet, {
       toolbarProps: toolbarProps
     }, /*#__PURE__*/React.createElement(BottomSheetHeader, {
-      className: "u-ph-1 u-pb-1"
+      className: cx('u-ph-1 u-pb-1', styles.bottomSheetHeader)
     }, FooterActionButtonsWithFile), /*#__PURE__*/React.createElement(BottomSheetContent, {
       file: file,
       contactsFullname: contactName

package/transpiled/react/Viewer/Footer/ForwardOrDownloadButton.js

@@ -1,7 +1,6 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import { useClient } from 'cozy-client';
-import { isFlagshipApp, isIOS } from 'cozy-device-helper';
 import ForwardButton from "cozy-ui/transpiled/react/Viewer/Footer/ForwardButton";
 import DownloadButton from "cozy-ui/transpiled/react/Viewer/Footer/DownloadButton";
 import { shouldBeForwardButton } from "cozy-ui/transpiled/react/Viewer/Footer/helpers";
@@ -9,11 +8,8 @@ import { shouldBeForwardButton } from "cozy-ui/transpiled/react/Viewer/Footer/he
 var ForwardOrDownloadButton = function ForwardOrDownloadButton(_ref) {
   var file = _ref.file;
   var client = useClient();
-  var FileActionButton = shouldBeForwardButton(client) ? ForwardButton : DownloadButton; // Temporarily disable Download button on iOS Flagship app until
-  // the download feature is fixed on this platform
-  // When fixed on this platform, revert this commit from PR #2215
-
-  return isFlagshipApp() && isIOS() ? null : /*#__PURE__*/React.createElement(FileActionButton, {
+  var FileActionButton = shouldBeForwardButton(client) ? ForwardButton : DownloadButton;
+  return /*#__PURE__*/React.createElement(FileActionButton, {
     file: file
   });
 };

package/transpiled/react/Viewer/Footer/useReferencedContactName.js

@@ -14,15 +14,16 @@ var useReferencedContactName = function useReferencedContactName(file) {
   var contactIds = getReferencedBy(file, 'io.cozy.contacts').map(function (ref) {
     return ref.id;
   });
+  var isContactByIdsQueryEnabled = contactIds.length > 0;
   var contactByIdsQuery = buildContactByIdsQuery(contactIds);
 
   var _useQuery = useQuery(contactByIdsQuery.definition, _objectSpread(_objectSpread({}, contactByIdsQuery.options), {}, {
-    enabled: contactIds.length > 0
+    enabled: isContactByIdsQueryEnabled
   })),
       contacts = _useQuery.data,
       contactsQueryResult = _objectWithoutProperties(_useQuery, _excluded);
 
-  var isLoadingContacts = isQueryLoading(contactsQueryResult) || contactsQueryResult.hasMore;
+  var isLoadingContacts = isContactByIdsQueryEnabled && (isQueryLoading(contactsQueryResult) || contactsQueryResult.hasMore);
   var contactName = contacts && contacts.length > 0 ? contacts.map(function (contact) {
     return "".concat(getDisplayName(contact));
   }).join(', ') : '';

package/transpiled/react/Viewer/Panel/Qualification.js

@@ -5,6 +5,7 @@ import List from "cozy-ui/transpiled/react/MuiCozyTheme/List";
 import ListItem from "cozy-ui/transpiled/react/MuiCozyTheme/ListItem";
 import QualificationListItemText from "cozy-ui/transpiled/react/Viewer/Panel/QualificationListItemText";
 import { withViewerLocales } from "cozy-ui/transpiled/react/Viewer/withViewerLocales";
+import MidEllipsis from "cozy-ui/transpiled/react/MidEllipsis";
 var getBoundT = models.document.locales.getBoundT;
 
 var Qualification = function Qualification(_ref) {
@@ -39,7 +40,9 @@ var Qualification = function Qualification(_ref) {
     className: 'u-ph-2'
   }, /*#__PURE__*/React.createElement(QualificationListItemText, {
     primary: t('Viewer.panel.qualification.label.title'),
-    secondary: pageLabel ? t("Viewer.panel.qualification.label.".concat(pageLabel)) : filename
+    secondary: /*#__PURE__*/React.createElement(MidEllipsis, {
+      text: pageLabel ? t("Viewer.panel.qualification.label.".concat(pageLabel)) : filename
+    })
   })), /*#__PURE__*/React.createElement(ListItem, {
     className: 'u-ph-2'
   }, /*#__PURE__*/React.createElement(QualificationListItemText, {