feat(MidEllipsis): Use ui.midellipsis-lib.enabled flag for better one

react/MidEllipsis/Readme.md

@@ -1,39 +1,11 @@
 #### Ellipsis in the middle
 
-```jsx
-import MidEllipsis from 'cozy-ui/transpiled/react/MidEllipsis';
-
-<MidEllipsis text={content.ada.short} />
-```
-
-#### Ellipsis in directory tree
-
-```jsx
-import MidEllipsis from 'cozy-ui/transpiled/react/MidEllipsis';
-
-<MidEllipsis text="/Administratif/Netflix" />
-```
-
-#### Ellipsis with React string children
+Text can be passed in `text` prop or as `child`.
 
 ```jsx
-import MidEllipsis from 'cozy-ui/transpiled/react/MidEllipsis';
+import MidEllipsis from 'cozy-ui/transpiled/react/MidEllipsis'
 
-<MidEllipsis>/Administratif/Netflix</MidEllipsis>
-```
-
-#### Ellipsis in directory tree with complex names
-
-```jsx
-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
+;
 
-```jsx
-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" />
+<MidEllipsis text={content.ada.short} />
 ```

react/MidEllipsis/index.jsx

@@ -1,6 +1,8 @@
 import React, { forwardRef } from 'react'
-import cx from 'classnames'
 import PropTypes from 'prop-types'
+import cx from 'classnames'
+import MiddleEllipsis from 'react-middle-ellipsis'
+import flag from 'cozy-flags'
 
 /** 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)
@@ -14,7 +16,7 @@ import PropTypes from 'prop-types'
  * */
 const LRM = <>&#8206;</>
 
-const MidEllipsis = forwardRef(
+const MidEllipsisLegacy = forwardRef(
   ({ text, className, children, ...props }, ref) => {
     if (text && typeof text !== 'string')
       throw new Error('The "text" prop of MidEllipsis can only be a string')
@@ -41,11 +43,36 @@ const MidEllipsis = forwardRef(
   }
 )
 
-MidEllipsis.displayName = 'MidEllipsis'
+MidEllipsisLegacy.displayName = 'MidEllipsis'
 
-MidEllipsis.propTypes = {
+MidEllipsisLegacy.propTypes = {
   text: PropTypes.string,
   className: PropTypes.string
 }
 
+// --
+// This is new component based on react-middle-ellipsis
+// We will delete all other stuff if perf test are successful with this one
+const styles = { whiteSpace: 'nowrap', overflow: 'hidden' }
+
+const MidEllipsisWithLib = forwardRef(({ text, ...props }, ref) => {
+  return (
+    <span style={styles}>
+      <MiddleEllipsis {...props} ref={ref}>
+        <span>{text}</span>
+      </MiddleEllipsis>
+    </span>
+  )
+})
+//
+// --
+
+const MidEllipsis = forwardRef((props, ref) => {
+  if (flag('ui.midellipsis-lib.enabled')) {
+    return <MidEllipsisWithLib {...props} ref={ref} />
+  }
+
+  return <MidEllipsisLegacy {...props} ref={ref} />
+})
+
 export default MidEllipsis