@kirz/react-native-toolkit/lib/module/components/TinderPhotoSwiper/TinderPhotoSwiperCard.js

Toolkit to speed up React Native development

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 from 'react';
import { forwardRef, useEffect, useImperativeHandle, useRef, useState } from 'react';
import { Dimensions, Image } from 'react-native';
import { Gesture, GestureDetector } from 'react-native-gesture-handler';
import Animated, { Easing, useAnimatedStyle, useSharedValue, withTiming, runOnJS, interpolate, Extrapolate } from 'react-native-reanimated';
const dimensions = Dimensions.get('screen');
function TinderPhotoSwiperCardInner(_ref) {
  let {
    status,
    likeActivationValue,
    dislikeActivationValue,
    favouriteActivationValue,
    photo,
    imageProps,
    states,
    resetAnimation = {
      duration: 300,
      easing: Easing.out(Easing.ease)
    },
    swipeAnimation = {
      duration: 700,
      easing: Easing.out(Easing.ease)
    },
    maxActivationTranslation = {
      x: dimensions.width / 4,
      y: dimensions.height / 5
    },
    onLike,
    onDislike,
    onFavorite,
    ...props
  } = _ref;
  const state = useSharedValue(states[status]);
  const handleFavorite = () => {
    // @ts-ignore
    onFavorite === null || onFavorite === void 0 ? void 0 : onFavorite();
  };
  const pan = Gesture.Pan().onUpdate(e => {
    state.value = {
      ...state.value,
      left: e.translationX,
      top: e.translationY
    };
    dislikeActivationValue.value = Math.abs(Math.min(e.translationX, 0)) / maxActivationTranslation.x;
    likeActivationValue.value = Math.abs(Math.max(e.translationX, 0)) / maxActivationTranslation.x;
    favouriteActivationValue.value = interpolate(Math.abs(Math.min(e.translationY, 0)) / maxActivationTranslation.y, [0, 1], !(photo !== null && photo !== void 0 && photo.favorite) ? [0, 1] : [1, 0], Extrapolate.CLAMP);
  }).onEnd(e => {
    if (status !== 'active') {
      return;
    }
    dislikeActivationValue.value = withTiming(0, resetAnimation);
    likeActivationValue.value = withTiming(0, resetAnimation);
    if (Math.abs(Math.min(e.translationX, 0)) > maxActivationTranslation.x) {
      runOnJS(onDislike)();
      return;
    }
    if (Math.abs(Math.max(e.translationX, 0)) > maxActivationTranslation.x) {
      runOnJS(onLike)();
      return;
    }
    if (Math.abs(Math.min(e.translationY, 0)) > maxActivationTranslation.y && photo) {
      runOnJS(handleFavorite)();
    } else {
      favouriteActivationValue.value = interpolate(0, [0, 1], !(photo !== null && photo !== void 0 && photo.favorite) ? [0, 1] : [1, 0], Extrapolate.CLAMP);
    }
    state.value = withTiming({
      ...state.value,
      left: 0,
      top: 0
    }, resetAnimation);
  }).enabled(status === 'active');
  const animatedStyle = useAnimatedStyle(() => ({
    left: state.value.left ?? 0,
    top: state.value.top ?? 0,
    opacity: state.value.opacity ?? 1,
    transform: [{
      scale: state.value.scale ?? 1
    }, {
      rotate: `${state.value.rotation ?? 0}deg`
    }]
  }), []);
  const overlayAnimatedStyle = useAnimatedStyle(() => ({
    ...(state.value.overlayColor && {
      backgroundColor: `rgba(${state.value.overlayColor[0]}, ${state.value.overlayColor[1]}, ${state.value.overlayColor[2]}, ${state.value.overlayColor[3]})`
    })
  }), []);
  useEffect(() => {
    const newState = states[status];
    state.value = withTiming(newState, swipeAnimation);
  }, [status]);
  useEffect(() => {
    if (status !== 'active') {
      return;
    }
    favouriteActivationValue.value = photo !== null && photo !== void 0 && photo.favorite ? 1 : 0;
  }, [status, photo === null || photo === void 0 ? void 0 : photo.favorite]);
  return /*#__PURE__*/React.createElement(GestureDetector, {
    gesture: pan
  }, /*#__PURE__*/React.createElement(Animated.View, _extends({}, props, {
    pointerEvents: status === 'active' ? 'auto' : 'none',
    style: [{
      position: 'absolute',
      left: 0,
      top: 0,
      width: '100%',
      height: '100%'
    }, props.style, animatedStyle]
  }), photo && /*#__PURE__*/React.createElement(Image, _extends({
    resizeMode: "cover"
  }, imageProps, {
    source: {
      uri: photo.uri
    },
    style: [{
      flex: 1,
      backgroundColor: 'rgba(255,255,255,0.05)'
    }, imageProps === null || imageProps === void 0 ? void 0 : imageProps.style]
  })), /*#__PURE__*/React.createElement(Animated.View, {
    style: [{
      position: 'absolute',
      left: -3,
      right: -3,
      top: -3,
      bottom: -3
    }, overlayAnimatedStyle, imageProps === null || imageProps === void 0 ? void 0 : imageProps.style]
  })));
}
function TinderPhotoSwiperCardWrapper(_ref2, ref) {
  let {
    likeActivationValue,
    dislikeActivationValue,
    favouriteActivationValue,
    photo: initialPhoto,
    imageProps,
    states,
    resetAnimation = {
      duration: 300,
      easing: Easing.out(Easing.ease)
    },
    swipeAnimation = {
      duration: 700,
      easing: Easing.out(Easing.ease)
    },
    maxActivationTranslation = {
      x: dimensions.width / 4,
      y: dimensions.height / 4
    },
    onLike,
    onDislike,
    onFavorite,
    ...props
  } = _ref2;
  const photoLoaderRef = useRef(initialPhoto);
  const [photo, setPhoto] = useState(!photoLoaderRef.current.loader ? photoLoaderRef.current : null);
  const [status, setStatus] = useState('inactive');
  const [isVisible, setIsVisible] = useState(false);
  const isPhotoLoaded = useRef(false);
  const toggleFavorite = () => {
    setPhoto(x => x ? {
      ...x,
      favorite: !x.favorite
    } : x);
  };
  useImperativeHandle(ref, () => ({
    setStatus(value) {
      setStatus(value);
    },
    setVisibility(value) {
      setIsVisible(value);
    },
    toggleFavorite
  }), []);
  useEffect(() => {
    if (!photoLoaderRef.current.loader || !isVisible || photo) {
      return;
    }
    (async () => {
      const value = await photoLoaderRef.current.loader();
      setPhoto(value);
    })();
  }, [photo, isVisible]);
  useEffect(() => {
    if (!photo) {
      return;
    }
    if (!isPhotoLoaded.current) {
      isPhotoLoaded.current = true;
      return;
    }
    onFavorite(photo, !!photo.favorite);
  }, [photo === null || photo === void 0 ? void 0 : photo.favorite]);
  if (!isVisible) {
    return null;
  }
  return /*#__PURE__*/React.createElement(TinderPhotoSwiperCardInner, _extends({
    status,
    likeActivationValue,
    dislikeActivationValue,
    favouriteActivationValue,
    photo,
    imageProps,
    states,
    resetAnimation,
    swipeAnimation,
    maxActivationTranslation,
    onLike,
    onDislike,
    onFavorite: toggleFavorite
  }, props));
}
export const TinderPhotoSwiperCard = /*#__PURE__*/forwardRef(TinderPhotoSwiperCardWrapper);
//# sourceMappingURL=TinderPhotoSwiperCard.js.map