cozy-ui 90.5.0 → 90.7.0

package/CHANGELOG.md

@@ -1,3 +1,17 @@
+# [90.7.0](https://github.com/cozy/cozy-ui/compare/v90.6.0...v90.7.0) (2023-08-09)
+
+
+### Features
+
+* **ListItemFile:** Use Filename to show the primary text ([38c2bd2](https://github.com/cozy/cozy-ui/commit/38c2bd2))
+
+# [90.6.0](https://github.com/cozy/cozy-ui/compare/v90.5.0...v90.6.0) (2023-08-08)
+
+
+### Features
+
+* **Filename:** Add midEllipsis prop ([1f9df73](https://github.com/cozy/cozy-ui/commit/1f9df73))
+
 # [90.5.0](https://github.com/cozy/cozy-ui/compare/v90.4.0...v90.5.0) (2023-08-07)
 
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "cozy-ui",
-  "version": "90.5.0",
+  "version": "90.7.0",
   "description": "Cozy apps UI SDK",
   "main": "./index.js",
   "bin": {

package/react/Filename/Readme.md

@@ -1,29 +1,25 @@
 #### Filename with extension (ellipsis by default)
 
 ```jsx
-import Filename from 'cozy-ui/transpiled/react/Filename';
-<div>
-  <Filename filename="Lacinia condimentum potenti id est tortor dictumst lectus tincidunt hac ultricies, curae mattis nisi neque sodales sagittis dui nulla aliquam turpis eros, finibus ac iaculis dictum et orci elit posuere ex" extension=".pdf" />
-</div>
-```
-
-#### Filename with extension and icon
+import Filename from 'cozy-ui/transpiled/react/Filename'
+import FileIcon from 'cozy-ui/transpiled/react/Icons/File'
+import Variants from 'cozy-ui/docs/components/Variants'
 
-```jsx
-import Filename from 'cozy-ui/transpiled/react/Filename';
-import FileIcon from 'cozy-ui/transpiled/react/Icons/File';
+const initialVariants = [
+  { midEllipsis: false, icon: false, body1Variant: false, noExtension: false }
+]
 
-<div>
-  <Filename icon={FileIcon} filename="my_awesome_paper" extension=".pdf" />
-</div>
-```
-
-#### Filename with custom variant
-
-```jsx
-import Filename from 'cozy-ui/transpiled/react/Filename';
+;
 
-<div>
-  <Filename variant={'body1'} filename="my_awesome_paper" extension=".pdf" />
-</div>
+<Variants initialVariants={initialVariants} screenshotAllVariants>
+  {variant => (
+    <Filename
+      icon={variant.icon ? FileIcon : undefined}
+      variant={variant.body1Variant ? 'body1' : undefined}
+      midEllipsis={variant.midEllipsis}
+      filename="Lacinia condimentum potenti id est tortor dictumst lectus tincidunt hac ultricies, curae mattis nisi neque sodales sagittis dui nulla aliquam turpis eros, finibus ac iaculis dictum et orci elit posuere ex"
+      extension={variant.noExtension ? undefined : ".pdf"}
+    />
+  )}
+</Variants>
 ```

package/react/Filename/index.jsx

@@ -5,9 +5,11 @@ import cx from 'classnames'
 import { Media, Bd, Img } from '../deprecated/Media'
 import Icon from '../Icon'
 import Typography from '../Typography'
+import MidEllipsis from '../MidEllipsis'
+
 import styles from './styles.styl'
 
-const Filename = ({ icon, filename, extension, variant }) => {
+const Filename = ({ icon, filename, extension, midEllipsis, variant }) => {
   return (
     <Media>
       {icon && (
@@ -21,9 +23,12 @@ const Filename = ({ icon, filename, extension, variant }) => {
             <Typography
               variant={variant}
               component="span"
-              className={cx(styles['c-filename-name'], 'u-ellipsis')}
+              className={cx(styles['c-filename-name'], {
+                'u-ellipsis': !midEllipsis,
+                'u-ov-hidden': midEllipsis
+              })}
             >
-              {filename}
+              {midEllipsis ? <MidEllipsis text={filename} /> : filename}
             </Typography>
           )}
           {extension && (
@@ -52,11 +57,14 @@ Filename.propTypes = {
   filename: PropTypes.string,
   /** If a file name, you can specify the extension */
   extension: PropTypes.string,
+  /** To replace the end ellipsis by a middle on in the filename */
+  midEllipsis: PropTypes.bool,
   variant: PropTypes.string
 }
 
 Filename.defaultProps = {
-  variant: 'h6'
+  variant: 'h6',
+  midEllipsis: false
 }
 
 export default Filename

package/react/ListItem/ListItemFile/PrimaryText.jsx

@@ -1,19 +1,34 @@
+import React from 'react'
 import PropTypes from 'prop-types'
 
-import { useI18n } from '../../I18n'
+import { splitFilename } from 'cozy-client/dist/models/file'
 
-import withListItemLocales from '../hoc/withListItemLocales'
+import Filename from '../../Filename'
+import useBreakpoints from '../../hooks/useBreakpoints'
 
 const PrimaryText = ({ primary, file }) => {
-  const { t } = useI18n()
+  const { isMobile } = useBreakpoints()
 
   if (primary) return primary
 
-  const pageQualification = file?.metadata?.qualification?.page
-
-  return pageQualification === 'front' || pageQualification === 'back'
-    ? t(`ListItem.file.page.${pageQualification}`)
-    : file.name
+  return (
+    <Filename
+      variant="body1"
+      midEllipsis={isMobile}
+      filename={
+        splitFilename({
+          name: file.name,
+          type: 'file'
+        }).filename
+      }
+      extension={
+        splitFilename({
+          name: file.name,
+          type: 'file'
+        }).extension
+      }
+    />
+  )
 }
 
 PrimaryText.propTypes = {
@@ -21,4 +36,4 @@ PrimaryText.propTypes = {
   file: PropTypes.object
 }
 
-export default withListItemLocales(PrimaryText)
+export default PrimaryText

package/transpiled/react/Filename/index.js

@@ -4,6 +4,7 @@ import cx from 'classnames';
 import { Media, Bd, Img } from "cozy-ui/transpiled/react/deprecated/Media";
 import Icon from "cozy-ui/transpiled/react/Icon";
 import Typography from "cozy-ui/transpiled/react/Typography";
+import MidEllipsis from "cozy-ui/transpiled/react/MidEllipsis";
 var styles = {
   "c-filename-wrapper": "styles__c-filename-wrapper___3tVpA",
   "c-filename-name": "styles__c-filename-name___1jDMz"
@@ -13,6 +14,7 @@ var Filename = function Filename(_ref) {
   var icon = _ref.icon,
       filename = _ref.filename,
       extension = _ref.extension,
+      midEllipsis = _ref.midEllipsis,
       variant = _ref.variant;
   return /*#__PURE__*/React.createElement(Media, null, icon && /*#__PURE__*/React.createElement(Img, null, /*#__PURE__*/React.createElement(Icon, {
     className: 'u-mr-1',
@@ -24,8 +26,13 @@ var Filename = function Filename(_ref) {
   }, filename && /*#__PURE__*/React.createElement(Typography, {
     variant: variant,
     component: "span",
-    className: cx(styles['c-filename-name'], 'u-ellipsis')
-  }, filename), extension && /*#__PURE__*/React.createElement(Typography, {
+    className: cx(styles['c-filename-name'], {
+      'u-ellipsis': !midEllipsis,
+      'u-ov-hidden': midEllipsis
+    })
+  }, midEllipsis ? /*#__PURE__*/React.createElement(MidEllipsis, {
+    text: filename
+  }) : filename), extension && /*#__PURE__*/React.createElement(Typography, {
     variant: variant,
     component: "span",
     color: "textSecondary"
@@ -41,9 +48,13 @@ Filename.propTypes = {
 
   /** If a file name, you can specify the extension */
   extension: PropTypes.string,
+
+  /** To replace the end ellipsis by a middle on in the filename */
+  midEllipsis: PropTypes.bool,
   variant: PropTypes.string
 };
 Filename.defaultProps = {
-  variant: 'h6'
+  variant: 'h6',
+  midEllipsis: false
 };
 export default Filename;

package/transpiled/react/ListItem/ListItemFile/PrimaryText.js

@@ -1,23 +1,33 @@
+import React from 'react';
 import PropTypes from 'prop-types';
-import { useI18n } from "cozy-ui/transpiled/react/I18n";
-import withListItemLocales from "cozy-ui/transpiled/react/ListItem/hoc/withListItemLocales";
+import { splitFilename } from 'cozy-client/dist/models/file';
+import Filename from "cozy-ui/transpiled/react/Filename";
+import useBreakpoints from "cozy-ui/transpiled/react/hooks/useBreakpoints";
 
 var PrimaryText = function PrimaryText(_ref) {
-  var _file$metadata, _file$metadata$qualif;
-
   var primary = _ref.primary,
       file = _ref.file;
 
-  var _useI18n = useI18n(),
-      t = _useI18n.t;
+  var _useBreakpoints = useBreakpoints(),
+      isMobile = _useBreakpoints.isMobile;
 
   if (primary) return primary;
-  var pageQualification = file === null || file === void 0 ? void 0 : (_file$metadata = file.metadata) === null || _file$metadata === void 0 ? void 0 : (_file$metadata$qualif = _file$metadata.qualification) === null || _file$metadata$qualif === void 0 ? void 0 : _file$metadata$qualif.page;
-  return pageQualification === 'front' || pageQualification === 'back' ? t("ListItem.file.page.".concat(pageQualification)) : file.name;
+  return /*#__PURE__*/React.createElement(Filename, {
+    variant: "body1",
+    midEllipsis: isMobile,
+    filename: splitFilename({
+      name: file.name,
+      type: 'file'
+    }).filename,
+    extension: splitFilename({
+      name: file.name,
+      type: 'file'
+    }).extension
+  });
 };
 
 PrimaryText.propTypes = {
   primary: PropTypes.node,
   file: PropTypes.object
 };
-export default withListItemLocales(PrimaryText);
+export default PrimaryText;