feat(devices) scroll overflow devices texts on hover (#12974)

react/features/base/ui/components/web/ContextMenuItem.tsx

@@ -5,6 +5,9 @@ import { makeStyles } from 'tss-react/mui';
 import { showOverflowDrawer } from '../../../../toolbox/functions.web';
 import Icon from '../../../icons/components/Icon';
 import { withPixelLineHeight } from '../../../styles/functions.web';
+import { TEXT_OVERFLOW_TYPES } from '../../constants.any';
+
+import TextWithOverflow from './TextWithOverflow';
 
 export interface IProps {
 
@@ -59,6 +62,11 @@ export interface IProps {
      */
     onKeyPress?: (e?: React.KeyboardEvent) => void;
 
+    /**
+     * Overflow type for item text.
+     */
+    overflowType?: TEXT_OVERFLOW_TYPES;
+
     /**
      * Whether the item is marked as selected.
      */
@@ -149,6 +157,7 @@ const ContextMenuItem = ({
     onClick,
     onKeyDown,
     onKeyPress,
+    overflowType,
     selected,
     testId,
     text,
@@ -180,12 +189,13 @@ const ContextMenuItem = ({
                     size = { 20 }
                     src = { icon } />}
             {text && (
-                <span
+                <TextWithOverflow
                     className = { cx(styles.text,
-                _overflowDrawer && styles.drawerText,
-                textClassName) }>
+                    _overflowDrawer && styles.drawerText,
+                    textClassName) }
+                    overflowType = { overflowType } >
                     {text}
-                </span>
+                </TextWithOverflow>
             )}
             {children}
         </div>

react/features/base/ui/components/web/TextWithOverflow.tsx

@@ -0,0 +1,74 @@
+import React, { ReactNode, useRef } from 'react';
+import { keyframes } from 'styled-components';
+import { makeStyles } from 'tss-react/mui';
+
+import { TEXT_OVERFLOW_TYPES } from '../../constants.web';
+
+interface ITextWithOverflowProps {
+  children: ReactNode;
+  className?: string;
+  overflowType?: TEXT_OVERFLOW_TYPES;
+}
+
+const useStyles = makeStyles<{ translateDiff: number; }>()((_, { translateDiff }) => {
+    return {
+        animation: {
+            '&:hover': {
+                animation: `${keyframes`
+                    0%, 20% {
+                        transform: translateX(0%);
+                        left: 0%;
+                    }
+                    80%, 100% {
+                        transform: translateX(-${translateDiff}px);
+                        left: 100%;
+                    }
+                `} ${Math.max(translateDiff * 50, 2000)}ms infinite alternate linear;`
+            }
+        },
+        textContainer: {
+            overflow: 'hidden'
+        },
+        [TEXT_OVERFLOW_TYPES.ELLIPSIS]: {
+            display: 'block',
+            overflow: 'hidden',
+            textOverflow: 'ellipsis',
+            whiteSpace: 'nowrap'
+        },
+        [TEXT_OVERFLOW_TYPES.SCROLL_ON_HOVER]: {
+            display: 'inline-block',
+            overflow: 'visible',
+            whiteSpace: 'nowrap'
+        }
+    };
+});
+
+const TextWithOverflow = ({
+    className,
+    overflowType = TEXT_OVERFLOW_TYPES.ELLIPSIS,
+    children
+}: ITextWithOverflowProps) => {
+    const containerRef = useRef<HTMLDivElement>(null);
+    const contentRef = useRef<HTMLSpanElement>(null);
+    const shouldAnimateOnHover = overflowType === TEXT_OVERFLOW_TYPES.SCROLL_ON_HOVER
+        && containerRef.current
+        && contentRef.current
+        && containerRef.current.clientWidth < contentRef.current.clientWidth;
+
+    const translateDiff = shouldAnimateOnHover ? contentRef.current.clientWidth - containerRef.current.clientWidth : 0;
+    const { classes: styles, cx } = useStyles({ translateDiff });
+
+    return (
+        <div
+            className = { cx(className, styles.textContainer) }
+            ref = { containerRef }>
+            <span
+                className = { cx(styles[overflowType], shouldAnimateOnHover && styles.animation) }
+                ref = { contentRef }>
+                {children}
+            </span>
+        </div>
+    );
+};
+
+export default TextWithOverflow;