1// @ts-nocheck
2import React, { Component } from 'react';
3import { Animated, StyleSheet, Text, View } from 'react-native';
4import { RectButton } from 'react-native-gesture-handler';
5import Swipeable from 'react-native-gesture-handler/Swipeable';
6
7export default class AppleStyleSwipeableRow extends Component {
8  _swipeableRow?: Swipeable;
9
10  renderLeftActions = (progress: Animated.Value, dragX: Animated.Value) => {
11    const trans = dragX.interpolate({
12      inputRange: [0, 50, 100, 101],
13      outputRange: [-20, 0, 0, 1],
14    });
15    return (
16      <RectButton style={styles.leftAction} onPress={this.close}>
17        <Animated.Text
18          style={[
19            styles.actionText,
20            {
21              transform: [{ translateX: trans }],
22            },
23          ]}>
24          Archive
25        </Animated.Text>
26      </RectButton>
27    );
28  };
29  renderRightAction = (text: string, color: string, x: number, progress: Animated.Value) => {
30    const trans = progress.interpolate({
31      inputRange: [0, 1],
32      outputRange: [x, 0],
33    });
34    const pressHandler = () => {
35      this.close();
36      alert(text);
37    };
38    return (
39      <Animated.View style={{ flex: 1, transform: [{ translateX: trans }] }}>
40        <RectButton style={[styles.rightAction, { backgroundColor: color }]} onPress={pressHandler}>
41          <Text style={styles.actionText}>{text}</Text>
42        </RectButton>
43      </Animated.View>
44    );
45  };
46  renderRightActions = (progress: Animated.Value) => (
47    <View style={{ width: 192, flexDirection: 'row' }}>
48      {this.renderRightAction('More', '#C8C7CD', 192, progress)}
49      {this.renderRightAction('Flag', '#ffab00', 128, progress)}
50      {this.renderRightAction('More', '#dd2c00', 64, progress)}
51    </View>
52  );
53  updateRef = (ref: Swipeable) => {
54    this._swipeableRow = ref;
55  };
56  close = () => {
57    this._swipeableRow!.close();
58  };
59  render() {
60    const { children } = this.props;
61    return (
62      <Swipeable
63        ref={this.updateRef}
64        friction={2}
65        leftThreshold={30}
66        rightThreshold={40}
67        renderLeftActions={this.renderLeftActions}
68        renderRightActions={this.renderRightActions}>
69        {children}
70      </Swipeable>
71    );
72  }
73}
74
75const styles = StyleSheet.create({
76  leftAction: {
77    flex: 1,
78    backgroundColor: '#497AFC',
79    justifyContent: 'center',
80  },
81  actionText: {
82    color: 'white',
83    fontSize: 16,
84    backgroundColor: 'transparent',
85    padding: 10,
86  },
87  rightAction: {
88    alignItems: 'center',
89    flex: 1,
90    justifyContent: 'center',
91  },
92});
93