fix: add observer for long value component (#221)

gravity-ui · Aug 20, 2024 · 836ab26 · 836ab26
1 parent 2f7e358
commit 836ab26
Show file tree

Hide file tree

Showing 2 changed files with 38 additions and 18 deletions.
diff --git a/src/lib/kit/components/LongValue/LongValue.tsx b/src/lib/kit/components/LongValue/LongValue.tsx
@@ -1,20 +1,20 @@
 import React from 'react';
 
-import {Text} from '@gravity-ui/uikit';
+import once from 'lodash/once';
+
+import {Text, type TextProps} from '@gravity-ui/uikit';
 
 import {block} from '../../utils';
 
 import './LongValue.scss';
 
 const b = block('long-value');
 
-export interface LongValueProps {
+export interface LongValueProps extends TextProps {
     value?: string | number | boolean;
-    className?: string;
 }
 
-export const LongValue: React.FC<LongValueProps> = ({value, className}) => {
-    const prevValue = React.useRef<typeof value | null>(null);
+export const LongValue: React.FC<LongValueProps> = ({value, className, ...restProps}) => {
     const ref = React.useRef<HTMLDivElement>(null);
     const [open, setOpen] = React.useState(false);
     const [long, setLong] = React.useState(false);
@@ -23,10 +23,10 @@ export const LongValue: React.FC<LongValueProps> = ({value, className}) => {
 
     React.useEffect(() => {
         if (ref.current) {
-            if (value !== prevValue.current) {
-                const {offsetWidth, scrollWidth} = ref.current;
+            const {offsetWidth, scrollWidth} = ref.current;
 
-                if (offsetWidth < scrollWidth) {
+            const setFlags = once((offsetW: number, scrollW: number) => {
+                if (offsetW < scrollW) {
                     if (!long) {
                         setLong(true);
                     }
@@ -39,15 +39,37 @@ export const LongValue: React.FC<LongValueProps> = ({value, className}) => {
                         setOpen(false);
                     }
                 }
+            });
+
+            // element has been rendered, but is not displayed on the page
+            if (offsetWidth === 0 && scrollWidth === 0) {
+                const observer = new IntersectionObserver((entries) => {
+                    const entry = entries.find((e) => e.target === ref.current);
 
-                prevValue.current = value;
+                    if (entry && entry.isIntersecting) {
+                        const target = entry.target as HTMLDivElement;
+
+                        setFlags(target.offsetWidth, target.scrollWidth);
+                    }
+                });
+
+                observer.observe(ref.current);
+
+                return () => {
+                    observer.disconnect();
+                };
+            } else {
+                setFlags(offsetWidth, scrollWidth);
             }
         }
-    });
+
+        return;
+    }, [value]);
 
     return (
         <Text
             as="div"
+            {...restProps}
             ref={ref}
             className={b({open, long}, className)}
             // @ts-ignore

diff --git a/src/stories/components/InputPreview/InputPreview.tsx b/src/stories/components/InputPreview/InputPreview.tsx
@@ -175,14 +175,12 @@ export const InputPreview: React.FC<InputPreviewProps> = ({
                                 search={searchInput}
                             />
                         </div>
-                        {togglerInput === 'view' ? (
-                            <div className={b('input-view')}>
-                                <DynamicView
-                                    value={form.values.input}
-                                    spec={transformIncorrect(form.values.options)}
-                                />
-                            </div>
-                        ) : null}
+                        <div className={b('input-view', {hidden: togglerInput !== 'view'})}>
+                            <DynamicView
+                                value={form.values.input}
+                                spec={transformIncorrect(form.values.options)}
+                            />
+                        </div>
                         {togglerInput === 'json' ? (
                             <div className={b('monaco')}>{renderMonaco(form.values.input)}</div>
                         ) : null}