@tra-tech/react-native-kitra/lib/module/components/Swipe/index.js

UI kit for React Native

function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
import React, { useLayoutEffect, useRef } from 'react';
import { Animated, Dimensions, TouchableOpacity, I18nManager, StyleSheet, Text, View, Pressable } from 'react-native';
import { Swipeable } from 'react-native-gesture-handler';
import { applyDefaults } from '../../core/KitraProvider';
const AnimatedTouchableOpacity = Animated.createAnimatedComponent(Pressable);
const screenWith = Dimensions.get('screen').width;
let swipeWidth;
const Swipe = _ref => {
  let {
    children = /*#__PURE__*/React.createElement(View, null),
    theme,
    typography,
    variant = 'no-radius',
    rightActions,
    leftAction = {
      onPress: () => {}
    },
    ...props
  } = _ref;
  const swipeRef = useRef(null);
  const isRadius = variant === 'radius';
  useLayoutEffect(() => {
    if (rightActions) {
      const radiusValue = isRadius ? 5 + rightActions.length * 5 : 0;
      // @ts-expect-error
      swipeWidth = ((rightActions === null || rightActions === void 0 ? void 0 : rightActions.reduce((accumulator, currentValue) => {
        var _currentValue$style;
        return accumulator + ((currentValue === null || currentValue === void 0 ? void 0 : (_currentValue$style = currentValue.style) === null || _currentValue$style === void 0 ? void 0 : _currentValue$style.width) || (isRadius ? 50 : 82));
      }, 0)) || 0) + radiusValue;
    }
  }, [variant]);
  const renderLeftAction = (_progress, dragX) => {
    const trans = dragX.interpolate({
      inputRange: [0, screenWith],
      outputRange: [-20, screenWith / 2]
    });
    return /*#__PURE__*/React.createElement(TouchableOpacity, {
      style: [styles.leftAction, leftAction === null || leftAction === void 0 ? void 0 : leftAction.style],
      onPress: () => {
        var _leftAction$onPress;
        leftAction === null || leftAction === void 0 ? void 0 : (_leftAction$onPress = leftAction.onPress) === null || _leftAction$onPress === void 0 ? void 0 : _leftAction$onPress.call(leftAction, swipeRef);
        close();
      }
    }, /*#__PURE__*/React.createElement(Animated.View, {
      style: [styles.leftActionContainer, {
        transform: [{
          translateX: trans
        }]
      }]
    }, leftAction === null || leftAction === void 0 ? void 0 : leftAction.icon, /*#__PURE__*/React.createElement(Text, {
      style: [{
        color: theme === null || theme === void 0 ? void 0 : theme.white
      }, typography === null || typography === void 0 ? void 0 : typography.body.xsmedium, styles.actionText, leftAction === null || leftAction === void 0 ? void 0 : leftAction.textStyle]
    }, leftAction === null || leftAction === void 0 ? void 0 : leftAction.text)));
  };
  const renderRightAction = _ref2 => {
    let {
      item,
      dragValue,
      progress,
      index
    } = _ref2;
    const {
      text,
      style,
      icon,
      textStyle
    } = item;
    const trans = progress.interpolate({
      inputRange: [0, 1],
      outputRange: [dragValue, 0]
    });
    return /*#__PURE__*/React.createElement(AnimatedTouchableOpacity, {
      key: index,
      style: [{
        marginLeft: index === 0 && isRadius ? 5 : 0,
        transform: [{
          translateX: trans
        }],
        borderRadius: isRadius ? 10 : 0,
        width: isRadius ? 50 : 82
      }, styles.rightAction, style],
      onPress: () => {
        var _item$onPress;
        return (_item$onPress = item.onPress) === null || _item$onPress === void 0 ? void 0 : _item$onPress.call(item, swipeRef);
      }
    }, icon, !!text && /*#__PURE__*/React.createElement(Text, {
      style: [{
        color: theme === null || theme === void 0 ? void 0 : theme.white
      }, typography === null || typography === void 0 ? void 0 : typography.body.xsmedium, styles.actionText, textStyle, {
        marginTop: icon ? 10 : 0
      }]
    }, text));
  };
  const renderRightActions = (progress, _dragAnimatedValue) => /*#__PURE__*/React.createElement(View, {
    style: {
      width: swipeWidth,
      columnGap: isRadius ? 5 : 0,
      flexDirection: I18nManager.isRTL ? 'row-reverse' : 'row'
    }
  }, rightActions === null || rightActions === void 0 ? void 0 : rightActions.map((item, index) => {
    const dragValue = rightActions.slice(0, index * -1 + rightActions.length)
    // @ts-expect-error
    .reduce((accumulator, currentValue) => {
      var _currentValue$style2;
      return accumulator + ((currentValue === null || currentValue === void 0 ? void 0 : (_currentValue$style2 = currentValue.style) === null || _currentValue$style2 === void 0 ? void 0 : _currentValue$style2.width) || (isRadius ? 50 : 82));
    }, 0);
    return renderRightAction({
      item,
      dragValue,
      progress,
      index
    });
  }));
  const close = () => {
    var _swipeRef$current;
    swipeRef === null || swipeRef === void 0 ? void 0 : (_swipeRef$current = swipeRef.current) === null || _swipeRef$current === void 0 ? void 0 : _swipeRef$current.close();
  };
  return /*#__PURE__*/React.createElement(Swipeable, _extends({
    ref: swipeRef,
    friction: 2,
    enableTrackpadTwoFingerGesture: true,
    leftThreshold: 30,
    containerStyle: {
      borderRadius: isRadius ? 10 : 0
    },
    rightThreshold: 40,
    overshootRight: false,
    overshootLeft: false,
    renderLeftActions: leftAction && renderLeftAction,
    renderRightActions: renderRightActions
  }, props), React.Children.map(children, item => {
    var _item$props;
    return /*#__PURE__*/React.cloneElement(item, {
      style: [{
        backgroundColor: theme === null || theme === void 0 ? void 0 : theme.white,
        height: 82
      }, (_item$props = item.props) === null || _item$props === void 0 ? void 0 : _item$props.style, {
        borderRadius: isRadius ? 10 : 0,
        overflow: 'hidden'
      }]
    });
  }));
};
export default applyDefaults(Swipe);
const styles = StyleSheet.create({
  leftAction: {
    flex: 1,
    justifyContent: 'center'
  },
  actionText: {
    backgroundColor: 'transparent'
  },
  leftActionContainer: {
    justifyContent: 'center',
    alignItems: 'center',
    alignSelf: 'baseline'
  },
  rightAction: {
    alignItems: 'center',
    justifyContent: 'center'
  }
});
//# sourceMappingURL=index.js.map