Merge pull request #832 from gympass/EXUX-952

refactor: [EXUX-952] Revert unnecessary logic from text badge
gympass · Jun 21, 2024 · dadbc2b · dadbc2b
2 parents dfce300 + 0cb6609
commit dadbc2b
Show file tree

Hide file tree

Showing 6 changed files with 13 additions and 143 deletions.
diff --git a/packages/yoga/src/Avatar/native/Avatar.jsx b/packages/yoga/src/Avatar/native/Avatar.jsx
@@ -50,7 +50,6 @@ const Avatar = forwardRef(
       borderRadius,
       width,
       height,
-      onLayout,
       ...props
     },
     ref,
@@ -64,7 +63,6 @@ const Avatar = forwardRef(
         justifyContent="center"
         width={width}
         height={height}
-        onLayout={onLayout}
         overflow="hidden"
         borderRadius={borderRadius}
         {...props}

diff --git a/packages/yoga/src/Result/native/Result/TextWithBadge/__snapshots__/index.test.tsx.snap b/packages/yoga/src/Result/native/Result/TextWithBadge/__snapshots__/index.test.tsx.snap
@@ -2,42 +2,30 @@
 
 exports[`TextWithBadge should match snapshot 1`] = `
 <View
-  containerWidth={0}
   style={
     [
       {
         "alignItems": "center",
         "flexDirection": "row",
-        "justifyContent": "flex-end",
-        "position": "relative",
-        "width": 0,
       },
     ]
   }
 >
   <Text
     bold={true}
     numberOfLines={1}
-    onLayout={[Function]}
     style={
       [
         {
           "color": "#231B22",
-          "flexBasis": 0,
-          "flexGrow": 1,
           "flexShrink": 1,
           "fontFamily": "Rubik",
           "fontSize": 16,
           "fontWeight": "500",
-          "left": 0,
           "lineHeight": 24,
-          "paddingRight": 20,
-          "position": "absolute",
-          "width": "",
         },
       ]
     }
-    textWidth={null}
   >
     Text with badge
   </Text>
@@ -146,42 +134,30 @@ exports[`TextWithBadge should match snapshot 1`] = `
 
 exports[`TextWithBadge should match snapshot with long title 1`] = `
 <View
-  containerWidth={0}
   style={
     [
       {
         "alignItems": "center",
         "flexDirection": "row",
-        "justifyContent": "flex-end",
-        "position": "relative",
-        "width": 0,
       },
     ]
   }
 >
   <Text
     bold={true}
     numberOfLines={1}
-    onLayout={[Function]}
     style={
       [
         {
           "color": "#231B22",
-          "flexBasis": 0,
-          "flexGrow": 1,
           "flexShrink": 1,
           "fontFamily": "Rubik",
           "fontSize": 16,
           "fontWeight": "500",
-          "left": 0,
           "lineHeight": 24,
-          "paddingRight": 20,
-          "position": "absolute",
-          "width": "",
         },
       ]
     }
-    textWidth={null}
   >
     This is an example of a very long title that should be truncated
   </Text>
@@ -290,42 +266,30 @@ exports[`TextWithBadge should match snapshot with long title 1`] = `
 
 exports[`TextWithBadge should match snapshot without badgeIcon 1`] = `
 <View
-  containerWidth={0}
   style={
     [
       {
         "alignItems": "center",
         "flexDirection": "row",
-        "justifyContent": "flex-end",
-        "position": "relative",
-        "width": 0,
       },
     ]
   }
 >
   <Text
     bold={true}
     numberOfLines={1}
-    onLayout={[Function]}
     style={
       [
         {
           "color": "#231B22",
-          "flexBasis": 0,
-          "flexGrow": 1,
           "flexShrink": 1,
           "fontFamily": "Rubik",
           "fontSize": 16,
           "fontWeight": "500",
-          "left": 0,
           "lineHeight": 24,
-          "paddingRight": 20,
-          "position": "absolute",
-          "width": "",
         },
       ]
     }
-    textWidth={null}
   >
     Title without Badge
   </Text>

diff --git a/packages/yoga/src/Result/native/Result/TextWithBadge/index.tsx b/packages/yoga/src/Result/native/Result/TextWithBadge/index.tsx
@@ -1,57 +1,18 @@
-import React, { ReactNode, useCallback, useState } from 'react';
-import { useWindowDimensions } from 'react-native';
+import React, { ReactNode } from 'react';
 
 import Badge from '../../Badge';
 
 import { StyledBoxContainer, StyledText } from './styles';
 
 interface TextWithBadgeProps {
-  avatarWidth: number;
   badgeIcon: ReactNode;
   title: string;
 }
 
-const SCREEN_PADDINGS = 20;
-const CONTENT_MARGINS = 20;
-const AVATAR_CONTENT_MARGINS = 16;
-const BADGE_LIMIT = 20;
-
-const TextWithBadge = ({
-  avatarWidth,
-  badgeIcon,
-  title,
-}: TextWithBadgeProps) => {
-  const [textSize, setTextSize] = useState<number>(0);
-  const { width: windowWidth } = useWindowDimensions();
-
-  const textMaxSize =
-    windowWidth -
-    (SCREEN_PADDINGS + CONTENT_MARGINS + AVATAR_CONTENT_MARGINS + avatarWidth);
-  const shouldTruncate = textSize >= textMaxSize - BADGE_LIMIT;
-  const containerWidth = shouldTruncate ? null : textSize;
-  const textWidth = shouldTruncate ? '100%' : null;
-
-  const onTextLayout = useCallback(
-    ({
-      nativeEvent: {
-        layout: { width },
-      },
-    }) => {
-      if (textSize === 0) {
-        setTextSize(width);
-      }
-    },
-    [textSize],
-  );
-
+const TextWithBadge = ({ badgeIcon, title }: TextWithBadgeProps) => {
   return (
-    <StyledBoxContainer containerWidth={containerWidth}>
-      <StyledText
-        onLayout={onTextLayout}
-        bold
-        numberOfLines={1}
-        textWidth={textWidth}
-      >
+    <StyledBoxContainer>
+      <StyledText bold numberOfLines={1}>
         {title}
       </StyledText>
       <Badge

diff --git a/packages/yoga/src/Result/native/Result/TextWithBadge/styles.ts b/packages/yoga/src/Result/native/Result/TextWithBadge/styles.ts
@@ -1,42 +1,17 @@
-import React, { ReactNode } from 'react';
-import styled, { css } from 'styled-components';
+import React from 'react';
+import styled from 'styled-components';
 import Text from '../../../../Text';
 import Box from '../../../../Box';
 
-export const StyledBoxContainer = styled(Box)<{
-  containerWidth?: number | null;
-  children: ReactNode;
-}>`
-  ${({ containerWidth }) =>
-    css`
-      flex-direction: row;
-      align-items: center;
-      justify-content: flex-end;
-      position: relative;
-      width: ${containerWidth}px;
-    `}
+export const StyledBoxContainer = styled(Box)`
+  flex-direction: row;
+  align-items: center;
 `;
 
 export const StyledText = styled(Text.Body1)<{
-  onLayout: ({ nativeEvent: { layout } }) => void;
-  textWidth?: string | null;
   numberOfLines: number;
   bold: boolean;
   children: React.ReactNode;
 }>`
-  ${({
-    textWidth,
-    theme: {
-      yoga: {
-        spacing: { medium },
-      },
-    },
-  }) =>
-    css`
-      position: absolute;
-      left: 0;
-      padding-right: ${medium};
-      flex: 1;
-      width: ${textWidth};
-    `}
+  flex-shrink: 1;
 `;
diff --git a/packages/yoga/src/Result/native/Result/__snapshots__/index.test.jsx.snap b/packages/yoga/src/Result/native/Result/__snapshots__/index.test.jsx.snap
@@ -24,7 +24,6 @@ exports[`<Result /> should match snapshot 1`] = `
     display="flex"
     height={48}
     justifyContent="center"
-    onLayout={[Function]}
     overflow="hidden"
     style={
       [
@@ -1050,7 +1049,6 @@ exports[`<Result /> should match snapshot without attendence 1`] = `
     display="flex"
     height={48}
     justifyContent="center"
-    onLayout={[Function]}
     overflow="hidden"
     style={
       [
@@ -1561,7 +1559,6 @@ exports[`<Result /> should match snapshot without limitLabel prop 1`] = `
     display="flex"
     height={48}
     justifyContent="center"
-    onLayout={[Function]}
     overflow="hidden"
     style={
       [

diff --git a/packages/yoga/src/Result/native/Result/index.jsx b/packages/yoga/src/Result/native/Result/index.jsx
@@ -1,4 +1,4 @@
-import React, { isValidElement, useCallback, useState } from 'react';
+import React, { isValidElement } from 'react';
 import { arrayOf, string, shape, func, bool, node } from 'prop-types';
 
 import Text from '../../../Text';
@@ -23,30 +23,9 @@ const Result = ({
   attendancesColor,
   badgeIcon,
 }) => {
-  const [avatarWidth, setAvatarWidth] = useState(0);
-
-  const onAvatarLayout = useCallback(
-    ({
-      nativeEvent: {
-        layout: { width },
-      },
-    }) => {
-      setAvatarWidth(width);
-    },
-    [],
-  );
-
   return (
     <StyledBox divided={divided} display="flex" flexDirection="row">
-      {Avatar && (
-        <>
-          {isValidElement(Avatar) ? (
-            React.cloneElement(Avatar, { onLayout: onAvatarLayout })
-          ) : (
-            <Avatar onLayout={onAvatarLayout} />
-          )}
-        </>
-      )}
+      {Avatar && isValidElement(Avatar) ? Avatar : <Avatar />}
       <Content>
         {!!attendances?.length && (
           <Attendances
@@ -56,11 +35,7 @@ const Result = ({
           />
         )}
         {badgeIcon ? (
-          <TextWithBadge
-            avatarWidth={avatarWidth}
-            badgeIcon={badgeIcon}
-            title={title}
-          />
+          <TextWithBadge badgeIcon={badgeIcon} title={title} />
         ) : (
           <Box>
             <Text.Body1 bold numberOfLines={1}>