Merge pull request #1875 from cozy/fix--Change-text-orientation-in-Mi…

…dEllipsis

fix: Change text orientation in MidEllipsis

react/MidEllipsis/Readme.md

@@ -4,3 +4,21 @@
 import MidEllipsis from 'cozy-ui/transpiled/react/MidEllipsis';
 <MidEllipsis text={content.ada.short} />
 ```
+
+#### Ellipsis in directory tree
+```
+import MidEllipsis from 'cozy-ui/transpiled/react/MidEllipsis';
+<MidEllipsis text="/Administratif/Netflix" />
+```
+
+#### Ellipsis in directory tree with complex names
+```
+import MidEllipsis from 'cozy-ui/transpiled/react/MidEllipsis';
+<MidEllipsis text="/Administratif/Ameli//1 88 88 88 888 888" />
+```
+
+#### Ellipsis in directory tree with complex names and unusual characters
+```
+import MidEllipsis from 'cozy-ui/transpiled/react/MidEllipsis';
+<MidEllipsis text="/Partages reçus/Cozy 🗄 - Team/Customers & Partners 🛒/Xxxxxx (Xxxxxxxx)/4_Suivi opérationnel/Point de synchro" />
+```

react/MidEllipsis/index.jsx

@@ -2,6 +2,18 @@ import React from 'react'
 import cx from 'classnames'
 import PropTypes from 'prop-types'
 
+/** The left-to-right mark (LRM) is a control character (an invisible formatting character)
+ * used in computerized typesetting (including word processing in a program like Microsoft Word)
+ * of text that contains a mixture of left-to-right text (such as English or Russian)
+ * and right-to-left text (such as Arabic, Persian or Hebrew).
+ * It is used to set the way adjacent characters are grouped with respect to text direction.
+ * https://en.wikipedia.org/wiki/Left-to-right_mark
+ *
+ * In this case it allows us to hack the RTL direction of the {lastPart} in order to keep it LTR-looking
+ * while still benefitting from the desired RTL overflow direction.
+ * */
+const LRM = <>&#8206;</>
+
 const MidEllipsis = props => {
   const { text, className } = props
   const partLength = Math.round(text.length / 2)
@@ -11,7 +23,11 @@ const MidEllipsis = props => {
   return (
     <div className={cx('u-midellipsis', className)}>
       <span>{firstPart}</span>
-      <span>{lastPart}</span>
+      <span>
+        {LRM}
+        {lastPart}
+        {LRM}
+      </span>
     </div>
   )
 }

react/__snapshots__/examples.spec.jsx.snap

@@ -7044,7 +7044,7 @@ exports[`ListItemText should render examples: ListItemText 2`] = `
 
 exports[`ListItemText should render examples: ListItemText 3`] = `
 "<div>
-  <div class=\\"MuiListItemText-root\\"><span class=\\"MuiTypography-root u-db u-ellipsis MuiListItemText-primary MuiTypography-body1 MuiTypography-displayBlock\\"><p class=\\"MuiTypography-root MuiTypography-body1\\">I'm a primary text</p><span class=\\"MuiTypography-root MuiTypography-caption MuiTypography-colorTextSecondary\\" tag=\\"a\\" href=\\"http://cozy.io\\"><div class=\\"u-midellipsis\\"><span>Augusta Ada King-Noel, Countess of Lovelace (née Byron; 10 December 1815 – 27 November 1852) was an English mathematician and writer, chiefly known for her work on Charles Babbage's proposed mechanical general-purpose computer, the Analytical Engine. She was the first to recognis</span><span>e that the machine had applications beyond pure calculation, and published the first algorithm intended to be carried out by such a machine. As a result, she is often regarded as the first to recognise the full potential of a \\"computing machine\\" and the first computer programmer.</span></div></span></span>
+  <div class=\\"MuiListItemText-root\\"><span class=\\"MuiTypography-root u-db u-ellipsis MuiListItemText-primary MuiTypography-body1 MuiTypography-displayBlock\\"><p class=\\"MuiTypography-root MuiTypography-body1\\">I'm a primary text</p><span class=\\"MuiTypography-root MuiTypography-caption MuiTypography-colorTextSecondary\\" tag=\\"a\\" href=\\"http://cozy.io\\"><div class=\\"u-midellipsis\\"><span>Augusta Ada King-Noel, Countess of Lovelace (née Byron; 10 December 1815 – 27 November 1852) was an English mathematician and writer, chiefly known for her work on Charles Babbage's proposed mechanical general-purpose computer, the Analytical Engine. She was the first to recognis</span><span>‎e that the machine had applications beyond pure calculation, and published the first algorithm intended to be carried out by such a machine. As a result, she is often regarded as the first to recognise the full potential of a \\"computing machine\\" and the first computer programmer.‎</span></div></span></span>
 </div>
 </div>"
 `;