Skip to content

Commit 6cead90

Browse files
OtavioStasiakdiegolmello
OtavioStasiak
and
diegolmello
authored
fix: delete background taller than its row on ServersHistory (#7536)
* fix: delete background taller than its row on server items * chore: code improvements --------- Co-authored-by: Diego Mello <diegolmello@gmail.com>
1 parent 41e87a8 commit 6cead90

5 files changed

Lines changed: 108 additions & 147 deletions

File tree

‎app/containers/ServerItem/SwipeableDeleteItem/Actions.tsx‎

Lines changed: 77 additions & 82 deletions
Original file line numberDiff line numberDiff line change
@@ -19,123 +19,118 @@ import I18n from '../../../i18n';
1919
export interface IDeleteActionProps {
2020
transX: SharedValue<number>;
2121
width: number;
22-
rowHeight: number;
2322
actionWidth: number;
2423
longSwipe: number;
2524
onDeletePress(): void;
2625
testID?: string;
2726
}
2827

29-
const SERVER_ITEM_PADDING_VERTICAL = 12;
28+
export const DeleteAction = memo(({ transX, width, actionWidth, longSwipe, onDeletePress, testID }: IDeleteActionProps) => {
29+
const { colors } = useTheme();
3030

31-
export const DeleteAction = memo(
32-
({ transX, width, rowHeight, actionWidth, longSwipe, onDeletePress, testID }: IDeleteActionProps) => {
33-
const { colors } = useTheme();
31+
const translateXDelete = useSharedValue(0);
3432

35-
const translateXDelete = useSharedValue(0);
33+
const triggerDeleteAnimation = (toValue: number) => {
34+
Haptics.impactAsync(Haptics.ImpactFeedbackStyle.Light).catch(() => {});
35+
translateXDelete.value = withSpring(toValue, { overshootClamping: true, mass: 0.7 });
36+
};
3637

37-
const triggerDeleteAnimation = (toValue: number) => {
38-
Haptics.impactAsync(Haptics.ImpactFeedbackStyle.Light);
39-
translateXDelete.value = withSpring(toValue, { overshootClamping: true, mass: 0.7 });
40-
};
41-
42-
useAnimatedReaction(
43-
() => transX.value,
44-
(currentTransX, previousTransX) => {
45-
if (I18n.isRTL) {
46-
if (previousTransX && currentTransX > longSwipe && previousTransX <= longSwipe) {
47-
scheduleOnRN(triggerDeleteAnimation, actionWidth);
48-
} else if (previousTransX && currentTransX <= longSwipe && previousTransX > longSwipe) {
49-
scheduleOnRN(triggerDeleteAnimation, 0);
50-
}
51-
} else if (previousTransX && currentTransX < -longSwipe && previousTransX >= -longSwipe) {
52-
scheduleOnRN(triggerDeleteAnimation, -actionWidth);
53-
} else if (previousTransX && currentTransX >= -longSwipe && previousTransX < -longSwipe) {
38+
useAnimatedReaction(
39+
() => transX.value,
40+
(currentTransX, previousTransX) => {
41+
if (I18n.isRTL) {
42+
if (previousTransX && currentTransX > longSwipe && previousTransX <= longSwipe) {
43+
scheduleOnRN(triggerDeleteAnimation, actionWidth);
44+
} else if (previousTransX && currentTransX <= longSwipe && previousTransX > longSwipe) {
5445
scheduleOnRN(triggerDeleteAnimation, 0);
5546
}
47+
} else if (previousTransX && currentTransX < -longSwipe && previousTransX >= -longSwipe) {
48+
scheduleOnRN(triggerDeleteAnimation, -actionWidth);
49+
} else if (previousTransX && currentTransX >= -longSwipe && previousTransX < -longSwipe) {
50+
scheduleOnRN(triggerDeleteAnimation, 0);
5651
}
57-
);
52+
}
53+
);
5854

59-
const animatedDeleteButtonStyles = useAnimatedStyle(() => {
60-
if (I18n.isRTL) {
61-
// RTL: delete button appears from the left when swiping right
62-
if (transX.value > longSwipe && transX.value >= 2 * actionWidth) {
63-
const parallaxSwipe = interpolate(
64-
transX.value,
65-
[2 * actionWidth, longSwipe],
66-
[-actionWidth, -actionWidth - 0.1 * transX.value]
67-
);
68-
return {
69-
transform: [{ translateX: parallaxSwipe - translateXDelete.value }],
70-
left: 0,
71-
right: undefined
72-
};
73-
}
74-
return {
75-
transform: [{ translateX: transX.value - actionWidth - translateXDelete.value }],
76-
left: 0,
77-
right: undefined
78-
};
79-
}
80-
// LTR: delete button appears from the right when swiping left
81-
if (transX.value < -longSwipe && transX.value <= -2 * actionWidth) {
55+
const animatedDeleteButtonStyles = useAnimatedStyle(() => {
56+
if (I18n.isRTL) {
57+
// RTL: delete button appears from the left when swiping right
58+
if (transX.value > longSwipe && transX.value >= 2 * actionWidth) {
8259
const parallaxSwipe = interpolate(
8360
transX.value,
84-
[-2 * actionWidth, -longSwipe],
85-
[actionWidth, actionWidth + 0.1 * transX.value]
61+
[2 * actionWidth, longSwipe],
62+
[-actionWidth, -actionWidth - 0.1 * transX.value]
8663
);
8764
return {
88-
transform: [{ translateX: parallaxSwipe + translateXDelete.value }],
89-
right: 0,
90-
left: undefined
65+
transform: [{ translateX: parallaxSwipe - translateXDelete.value }],
66+
left: 0,
67+
right: undefined
9168
};
9269
}
9370
return {
94-
transform: [{ translateX: transX.value + actionWidth + translateXDelete.value }],
71+
transform: [{ translateX: transX.value - actionWidth - translateXDelete.value }],
72+
left: 0,
73+
right: undefined
74+
};
75+
}
76+
// LTR: delete button appears from the right when swiping left
77+
if (transX.value < -longSwipe && transX.value <= -2 * actionWidth) {
78+
const parallaxSwipe = interpolate(
79+
transX.value,
80+
[-2 * actionWidth, -longSwipe],
81+
[actionWidth, actionWidth + 0.1 * transX.value]
82+
);
83+
return {
84+
transform: [{ translateX: parallaxSwipe + translateXDelete.value }],
9585
right: 0,
9686
left: undefined
9787
};
98-
});
99-
const viewHeight = { height: rowHeight + SERVER_ITEM_PADDING_VERTICAL };
100-
101-
return (
102-
<View
103-
style={[styles.actionsLeftContainer, viewHeight, { backgroundColor: colors.buttonBackgroundDangerDefault }]}
104-
pointerEvents='box-none'>
105-
<Animated.View
106-
style={[
107-
styles.actionRightButtonContainer,
108-
{
109-
width
110-
},
111-
viewHeight,
112-
animatedDeleteButtonStyles
113-
]}>
114-
<RectButton
115-
accessible
116-
accessibilityLabel={I18n.t('Delete')}
117-
testID={testID}
118-
style={[styles.actionButton, { backgroundColor: colors.buttonBackgroundDangerDefault }]}
119-
onPress={onDeletePress}>
120-
<CustomIcon size={24} name='delete' color={colors.fontWhite} />
121-
</RectButton>
122-
</Animated.View>
123-
</View>
124-
);
125-
}
126-
);
88+
}
89+
return {
90+
transform: [{ translateX: transX.value + actionWidth + translateXDelete.value }],
91+
right: 0,
92+
left: undefined
93+
};
94+
});
95+
return (
96+
<View
97+
style={[styles.actionsLeftContainer, { backgroundColor: colors.buttonBackgroundDangerDefault }]}
98+
pointerEvents='box-none'>
99+
<Animated.View
100+
style={[
101+
styles.actionRightButtonContainer,
102+
{
103+
width
104+
},
105+
animatedDeleteButtonStyles
106+
]}>
107+
<RectButton
108+
accessible
109+
accessibilityLabel={I18n.t('Delete')}
110+
testID={testID}
111+
style={[styles.actionButton, { backgroundColor: colors.buttonBackgroundDangerDefault }]}
112+
onPress={onDeletePress}>
113+
<CustomIcon size={24} name='delete' color={colors.fontWhite} />
114+
</RectButton>
115+
</Animated.View>
116+
</View>
117+
);
118+
});
127119

128120
const styles = StyleSheet.create({
129121
actionsLeftContainer: {
130122
flexDirection: 'row',
131123
position: 'absolute',
124+
top: 0,
125+
bottom: 0,
132126
left: 0,
133127
right: 0
134128
},
135129
actionRightButtonContainer: {
136130
position: 'absolute',
137131
justifyContent: 'center',
138132
top: 0,
133+
bottom: 0,
139134
alignItems: 'flex-end'
140135
},
141136
actionButton: {

‎app/containers/ServerItem/SwipeableDeleteItem/Touchable.tsx‎

Lines changed: 0 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -18,7 +18,6 @@ export interface ISwipeableDeleteTouchableProps {
1818
children: ReactElement;
1919
testID: string;
2020
width: number;
21-
rowHeight: number;
2221
actionWidth: number;
2322
longSwipe: number;
2423
smallSwipe: number;
@@ -33,7 +32,6 @@ const SwipeableDeleteTouchable = ({
3332
width,
3433
children,
3534
testID,
36-
rowHeight,
3735
actionWidth,
3836
longSwipe,
3937
smallSwipe,
@@ -188,7 +186,6 @@ const SwipeableDeleteTouchable = ({
188186
<DeleteAction
189187
width={width}
190188
transX={transX}
191-
rowHeight={rowHeight}
192189
actionWidth={actionWidth}
193190
longSwipe={longSwipe}
194191
onDeletePress={handleDeletePress}

‎app/containers/ServerItem/Touchable.tsx‎

Lines changed: 1 addition & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,7 @@ import { type AccessibilityRole } from 'react-native';
33

44
import SwipeableDeleteTouchable from './SwipeableDeleteItem/Touchable';
55
import Touch from '../Touch';
6-
import { ACTION_WIDTH, LONG_SWIPE, SMALL_SWIPE, ROW_HEIGHT } from './styles';
6+
import { ACTION_WIDTH, LONG_SWIPE, SMALL_SWIPE } from './styles';
77
import { useTheme } from '../../theme';
88

99
export interface IServerItemTouchableProps {
@@ -34,7 +34,6 @@ const Touchable = ({
3434
<SwipeableDeleteTouchable
3535
width={width}
3636
testID={testID}
37-
rowHeight={ROW_HEIGHT}
3837
actionWidth={ACTION_WIDTH}
3938
longSwipe={LONG_SWIPE}
4039
smallSwipe={SMALL_SWIPE}

‎app/containers/ServerItem/__snapshots__/ServerItem.test.tsx.snap‎

Lines changed: 6 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -708,13 +708,12 @@ exports[`Story Snapshots: SwipeActions should match snapshot 1`] = `
708708
style={
709709
[
710710
{
711+
"bottom": 0,
711712
"flexDirection": "row",
712713
"left": 0,
713714
"position": "absolute",
714715
"right": 0,
715-
},
716-
{
717-
"height": 80,
716+
"top": 0,
718717
},
719718
{
720719
"backgroundColor": "#EC0D2A",
@@ -727,16 +726,14 @@ exports[`Story Snapshots: SwipeActions should match snapshot 1`] = `
727726
[
728727
{
729728
"alignItems": "flex-end",
729+
"bottom": 0,
730730
"justifyContent": "center",
731731
"position": "absolute",
732732
"top": 0,
733733
},
734734
{
735735
"width": 390,
736736
},
737-
{
738-
"height": 80,
739-
},
740737
[Function],
741738
]
742739
}
@@ -1070,13 +1067,12 @@ exports[`Story Snapshots: SwipeActions should match snapshot 1`] = `
10701067
style={
10711068
[
10721069
{
1070+
"bottom": 0,
10731071
"flexDirection": "row",
10741072
"left": 0,
10751073
"position": "absolute",
10761074
"right": 0,
1077-
},
1078-
{
1079-
"height": 80,
1075+
"top": 0,
10801076
},
10811077
{
10821078
"backgroundColor": "#EC0D2A",
@@ -1089,16 +1085,14 @@ exports[`Story Snapshots: SwipeActions should match snapshot 1`] = `
10891085
[
10901086
{
10911087
"alignItems": "flex-end",
1088+
"bottom": 0,
10921089
"justifyContent": "center",
10931090
"position": "absolute",
10941091
"top": 0,
10951092
},
10961093
{
10971094
"width": 390,
10981095
},
1099-
{
1100-
"height": 80,
1101-
},
11021096
[Function],
11031097
]
11041098
}

0 commit comments

Comments
 (0)