@kirz/react-native-toolkit/lib/module/components/TinderPhotoSwiper/TinderPhotoSwiper.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, { forwardRef, useCallback, useEffect, useImperativeHandle, useRef, useState } from 'react';
import { useSharedValue } from 'react-native-reanimated';
import { TinderPhotoSwiperCard } from './TinderPhotoSwiperCard';
import { View } from '../View';
function TinderPhotoSwiperInner(_ref, ref) {
  let {
    photos: initialPhotos,
    states,
    cardProps,
    likeActivationValue: likeActivationValueRef,
    dislikeActivationValue: dislikeActivationValueRef,
    favouriteActivationValue: favouriteActivationValueRef,
    windowSize = 3,
    onDecisionsChange,
    onFavoriteChange,
    onFinish,
    ...props
  } = _ref;
  const [photos] = useState(initialPhotos.map((x, idx) => ({
    ...x,
    index: idx
  })));

  // eslint-disable-next-line react-hooks/rules-of-hooks
  const likeActivationValue = likeActivationValueRef ?? useSharedValue(0);

  // eslint-disable-next-line react-hooks/rules-of-hooks
  const dislikeActivationValue = dislikeActivationValueRef ?? useSharedValue(0);
  const favouriteActivationValue =
  // eslint-disable-next-line react-hooks/rules-of-hooks
  favouriteActivationValueRef ?? useSharedValue(0);
  const decisionsRef = useRef(new Map());
  const cardsRef = useRef({});
  const activePhotoRef = useRef(photos[photos.length - 1]);
  const refreshActivePhoto = useCallback(() => {
    const activePhotos = photos.filter(photo => !decisionsRef.current.has(photo.id));
    activePhotoRef.current = activePhotos[activePhotos.length - 1];
  }, []);
  const commitDecision = useCallback(decision => {
    const newDecision = {
      date: new Date(),
      decision,
      photoId: activePhotoRef.current.id,
      asset: activePhotoRef.current
    };
    decisionsRef.current.set(activePhotoRef.current.id, newDecision);
    refreshStatuses();
    onDecisionsChange === null || onDecisionsChange === void 0 ? void 0 : onDecisionsChange(newDecision, decisionsRef.current.values());
  }, []);
  const revertDecision = useCallback(() => {
    const latest = [...decisionsRef.current.values()].sort((a, b) => b.date.valueOf() - a.date.valueOf())[0];
    if (!latest) {
      return;
    }
    decisionsRef.current.delete(latest.photoId);
    refreshStatuses();
    onDecisionsChange === null || onDecisionsChange === void 0 ? void 0 : onDecisionsChange(null, decisionsRef.current.values());
  }, []);
  const refreshStatuses = useCallback(() => {
    refreshActivePhoto();
    const activePhotoIndex = activePhotoRef.current ? activePhotoRef.current.index : 0;
    [activePhotoIndex - 1, activePhotoIndex, activePhotoIndex + 1].forEach(index => {
      var _cardsRef$current$pho, _decisionsRef$current, _cardsRef$current$pho2;
      const photo = photos[index];
      if (!photo) {
        return;
      }
      (_cardsRef$current$pho = cardsRef.current[photo.id]) === null || _cardsRef$current$pho === void 0 ? void 0 : _cardsRef$current$pho.setStatus(((_decisionsRef$current = decisionsRef.current.get(photo.id)) === null || _decisionsRef$current === void 0 ? void 0 : _decisionsRef$current.decision) ?? (photo.id === activePhotoRef.current.id ? 'active' : 'inactive'));
      (_cardsRef$current$pho2 = cardsRef.current[photo.id]) === null || _cardsRef$current$pho2 === void 0 ? void 0 : _cardsRef$current$pho2.setVisibility(index >= activePhotoIndex - windowSize && index <= activePhotoIndex + windowSize);
    });
    if (!activePhotoRef.current) {
      onFinish === null || onFinish === void 0 ? void 0 : onFinish();
    }
  }, []);
  const likePhoto = useCallback(() => {
    if (!activePhotoRef.current) {
      return;
    }
    commitDecision('like');
  }, []);
  const dislikePhoto = useCallback(() => {
    if (!activePhotoRef.current) {
      return;
    }
    commitDecision('dislike');
  }, []);
  const skipPhoto = useCallback(() => {
    if (!activePhotoRef.current) {
      return;
    }
    commitDecision('skip');
  }, []);
  const toggleFavorite = useCallback(() => {
    var _cardsRef$current$pho3;
    if (!activePhotoRef.current) {
      return;
    }
    const photo = photos[activePhotoRef.current.index];
    (_cardsRef$current$pho3 = cardsRef.current[photo === null || photo === void 0 ? void 0 : photo.id]) === null || _cardsRef$current$pho3 === void 0 ? void 0 : _cardsRef$current$pho3.toggleFavorite();
  }, []);
  useImperativeHandle(ref, () => ({
    likePhoto,
    dislikePhoto,
    skipPhoto,
    toggleFavorite,
    revertDecision
  }), []);
  useEffect(() => {
    refreshStatuses();
  }, []);
  return /*#__PURE__*/React.createElement(View, _extends({}, props, {
    style: [{
      flex: 1
    }, props.style]
  }), [...initialPhotos].reverse().map(photo => {
    return /*#__PURE__*/React.createElement(TinderPhotoSwiperCard, _extends({
      ref: r => {
        cardsRef.current[photo.id] = r;
      },
      likeActivationValue: likeActivationValue,
      dislikeActivationValue: dislikeActivationValue,
      favouriteActivationValue: favouriteActivationValue,
      key: photo.id,
      id: photo.id
    }, cardProps, {
      photo: photo,
      states: states,
      onLike: likePhoto,
      onDislike: dislikePhoto,
      onFavorite: (p, x) => {
        onFavoriteChange === null || onFavoriteChange === void 0 ? void 0 : onFavoriteChange(p, x);
      }
    }));
  }));
}
export const TinderPhotoSwiper = /*#__PURE__*/forwardRef(TinderPhotoSwiperInner);
//# sourceMappingURL=TinderPhotoSwiper.js.map