Skip to content

Commit

Permalink
Merge pull request #829 from gympass/EXUX-930
Browse files Browse the repository at this point in the history 
feat: [EXUX-930] Fix ellipsis/truncate problem on android
  • Loading branch information
@matheushdsbr
matheushdsbr authored Jun 13, 2024
2 parents d642a8c + aed4b6d commit 4e0848d
Show file tree
Hide file tree
Showing 7 changed files with 595 additions and 66 deletions.
2 changes: 2 additions & 0 deletions packages/yoga/src/Avatar/native/Avatar.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -50,6 +50,7 @@ const Avatar = forwardRef(
borderRadius,
width,
height,
onLayout,
...props
},
ref,
Expand All @@ -63,6 +64,7 @@ const Avatar = forwardRef(
justifyContent="center"
width={width}
height={height}
onLayout={onLayout}
overflow="hidden"
borderRadius={borderRadius}
{...props}
Expand Down
370 changes: 370 additions & 0 deletions packages/yoga/src/Result/native/Result/TextWithBadge/__snapshots__/index.test.tsx.snap
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,370 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP

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>
<View
alignItems="center"
bg="neon"
borderRadius="circle"
h="small"
justifyContent="center"
ml="xxxsmall"
style={
[
{
"alignItems": "center",
"backgroundColor": "#DCFF79",
"borderRadius": 9999,
"height": 16,
"justifyContent": "center",
"marginLeft": 4,
"width": 16,
},
]
}
w="small"
>
<RNSVGSvgView
aria-hidden={true}
bbHeight={10.67}
bbWidth={10.67}
fill="#231B22"
focusable={false}
height={10.67}
style={
[
{
"backgroundColor": "transparent",
"borderWidth": 0,
},
[
{
"height": 10.67,
"width": 10.67,
},
],
{
"opacity": 1,
},
{
"flex": 0,
"height": 10,
"width": 10,
},
]
}
width={10.67}
>
<RNSVGGroup
fill={
[
0,
4280490786,
]
}
fillOpacity={1}
fillRule={1}
font={{}}
matrix={
[
1,
0,
0,
1,
0,
0,
]
}
opacity={1}
originX={0}
originY={0}
propList={
[
"fill",
]
}
rotation={0}
scaleX={1}
scaleY={1}
skewX={0}
skewY={0}
stroke={null}
strokeDasharray={null}
strokeDashoffset={null}
strokeLinecap={0}
strokeLinejoin={0}
strokeMiterlimit={4}
strokeOpacity={1}
strokeWidth={1}
vectorEffect={0}
x={0}
y={0}
/>
</RNSVGSvgView>
</View>
</View>
`;

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>
<View
alignItems="center"
bg="neon"
borderRadius="circle"
h="small"
justifyContent="center"
ml="xxxsmall"
style={
[
{
"alignItems": "center",
"backgroundColor": "#DCFF79",
"borderRadius": 9999,
"height": 16,
"justifyContent": "center",
"marginLeft": 4,
"width": 16,
},
]
}
w="small"
>
<RNSVGSvgView
aria-hidden={true}
bbHeight={10.67}
bbWidth={10.67}
fill="#231B22"
focusable={false}
height={10.67}
style={
[
{
"backgroundColor": "transparent",
"borderWidth": 0,
},
[
{
"height": 10.67,
"width": 10.67,
},
],
{
"opacity": 1,
},
{
"flex": 0,
"height": 10,
"width": 10,
},
]
}
width={10.67}
>
<RNSVGGroup
fill={
[
0,
4280490786,
]
}
fillOpacity={1}
fillRule={1}
font={{}}
matrix={
[
1,
0,
0,
1,
0,
0,
]
}
opacity={1}
originX={0}
originY={0}
propList={
[
"fill",
]
}
rotation={0}
scaleX={1}
scaleY={1}
skewX={0}
skewY={0}
stroke={null}
strokeDasharray={null}
strokeDashoffset={null}
strokeLinecap={0}
strokeLinejoin={0}
strokeMiterlimit={4}
strokeOpacity={1}
strokeWidth={1}
vectorEffect={0}
x={0}
y={0}
/>
</RNSVGSvgView>
</View>
</View>
`;

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>
<View
alignItems="center"
bg="neon"
borderRadius="circle"
h="small"
justifyContent="center"
ml="xxxsmall"
style={
[
{
"alignItems": "center",
"backgroundColor": "#DCFF79",
"borderRadius": 9999,
"height": 16,
"justifyContent": "center",
"marginLeft": 4,
"width": 16,
},
]
}
w="small"
>
<View
aria-hidden={true}
fill="#231B22"
height={10.67}
style={
[
{
"height": 10.67,
"width": 10.67,
},
]
}
width={10.67}
/>
</View>
</View>
`;
Loading

0 comments on commit 4e0848d

Please sign in to comment.