fix(plasma-web,plasma-b2c): Add useResizeObserver and fix behavior wi…

…th resize
sberdevices · Apr 11, 2022 · bcae028 · bcae028
1 parent 27e93af
commit bcae028
Show file tree

Hide file tree

Showing 2 changed files with 53 additions and 8 deletions.
diff --git a/packages/plasma-b2c/src/components/TextArea/TextArea.tsx b/packages/plasma-b2c/src/components/TextArea/TextArea.tsx
@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { createRef, useMemo, useState } from 'react';
 import styled from 'styled-components';
 import {
     TextFieldRoot,
@@ -7,6 +7,7 @@ import {
     primary,
     secondary,
     tertiary,
+    useResizeObserver,
 } from '@sberdevices/plasma-core';
 import type { TextAreaProps as BaseProps } from '@sberdevices/plasma-core';
 
@@ -44,6 +45,10 @@ const StyledTextArea = styled(BaseArea)`
     }
 `;
 
+const StyledFieldHelpers = styled(FieldHelpers)<{ width: number }>`
+    width: ${({ width }) => width}px;
+`;
+
 /**
  * Поле ввода многострочного текста.
  */
@@ -66,10 +71,21 @@ export const TextArea = React.forwardRef<HTMLTextAreaElement, TextAreaProps>(
             className,
             ...rest
         },
-        ref,
+        outerRef,
     ) => {
+        const [width, setWidth] = useState(0);
+        const ref = useMemo(() => (outerRef && 'current' in outerRef ? outerRef : createRef<HTMLTextAreaElement>()), [
+            outerRef,
+        ]);
+
         const placeLabel = (label || placeholder) as string | undefined;
 
+        useResizeObserver(ref, (currentElement) => {
+            const { width: elementWidth } = currentElement.getBoundingClientRect();
+
+            setWidth(elementWidth);
+        });
+
         return (
             <TextFieldRoot
                 status={status}
@@ -92,10 +108,10 @@ export const TextArea = React.forwardRef<HTMLTextAreaElement, TextAreaProps>(
                         aria-describedby={id ? `${id}-helper` : undefined}
                         {...rest}
                     />
-                    <FieldHelpers id={id ? `${id}-helper` : undefined}>
+                    <StyledFieldHelpers width={width} id={id ? `${id}-helper` : undefined}>
                         <FieldHelper as={TextFieldHelper}>{leftHelper}</FieldHelper>
                         <FieldHelper>{rightHelper}</FieldHelper>
-                    </FieldHelpers>
+                    </StyledFieldHelpers>
                 </FieldWrapper>
             </TextFieldRoot>
         );

diff --git a/packages/plasma-web/src/components/TextArea/TextArea.tsx b/packages/plasma-web/src/components/TextArea/TextArea.tsx
@@ -1,6 +1,12 @@
-import React, { forwardRef } from 'react';
+import React, { forwardRef, useState, useMemo, createRef } from 'react';
 import styled from 'styled-components';
-import { FieldRoot, FieldContent, FieldHelper, TextArea as BaseArea } from '@sberdevices/plasma-core';
+import {
+    FieldRoot,
+    FieldContent,
+    FieldHelper,
+    TextArea as BaseArea,
+    useResizeObserver,
+} from '@sberdevices/plasma-core';
 import type { TextAreaProps as BaseProps } from '@sberdevices/plasma-core';
 
 import { applyInputStyles } from '../Field';
@@ -16,14 +22,35 @@ const StyledTextArea = styled(BaseArea)`
     ${applyInputStyles}
 `;
 
+const StyledFieldHelperWrapper = styled.div<{ width: number }>`
+    position: absolute;
+    top: 0;
+
+    display: flex;
+    justify-content: flex-end;
+
+    width: ${({ width }) => width}px;
+`;
+
 /**
  * Поле ввода многострочного текста.
  */
 // eslint-disable-next-line prefer-arrow-callback
 export const TextArea = forwardRef<HTMLTextAreaElement, TextAreaProps>(function TextArea(
     { id, disabled, status, label, placeholder, contentRight, helperText, style, className, ...rest },
-    ref,
+    outerRef,
 ) {
+    const [width, setWidth] = useState(0);
+    const ref = useMemo(() => (outerRef && 'current' in outerRef ? outerRef : createRef<HTMLTextAreaElement>()), [
+        outerRef,
+    ]);
+
+    useResizeObserver(ref, (currentElement) => {
+        const { width: elementWidth } = currentElement.getBoundingClientRect();
+
+        setWidth(elementWidth);
+    });
+
     const placeLabel = (label || placeholder) as string | undefined;
 
     return (
@@ -44,8 +71,10 @@ export const TextArea = forwardRef<HTMLTextAreaElement, TextAreaProps>(function
                 aria-describedby={id ? `${id}-helpertext` : undefined}
                 {...rest}
             />
-            {contentRight && <FieldContent pos="right">{contentRight}</FieldContent>}
             {helperText && <FieldHelper id={id ? `${id}-helpertext` : undefined}>{helperText}</FieldHelper>}
+            <StyledFieldHelperWrapper width={width}>
+                {contentRight && <FieldContent pos="right">{contentRight}</FieldContent>}
+            </StyledFieldHelperWrapper>
         </FieldRoot>
     );
 });