@kirz/react-native-toolkit
Version:
Toolkit to speed up React Native development
147 lines (144 loc) • 7.26 kB
JavaScript
;
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.TinderPhotoSwiper = void 0;
var _react = _interopRequireWildcard(require("react"));
var _reactNativeReanimated = require("react-native-reanimated");
var _TinderPhotoSwiperCard = require("./TinderPhotoSwiperCard");
var _View = require("../View");
function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
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); }
function TinderPhotoSwiperInner(_ref, ref) {
let {
photos: initialPhotos,
states,
cardProps,
likeActivationValue: likeActivationValueRef,
dislikeActivationValue: dislikeActivationValueRef,
favouriteActivationValue: favouriteActivationValueRef,
windowSize = 3,
onDecisionsChange,
onFavoriteChange,
onFinish,
...props
} = _ref;
const [photos] = (0, _react.useState)(initialPhotos.map((x, idx) => ({
...x,
index: idx
})));
// eslint-disable-next-line react-hooks/rules-of-hooks
const likeActivationValue = likeActivationValueRef ?? (0, _reactNativeReanimated.useSharedValue)(0);
// eslint-disable-next-line react-hooks/rules-of-hooks
const dislikeActivationValue = dislikeActivationValueRef ?? (0, _reactNativeReanimated.useSharedValue)(0);
const favouriteActivationValue =
// eslint-disable-next-line react-hooks/rules-of-hooks
favouriteActivationValueRef ?? (0, _reactNativeReanimated.useSharedValue)(0);
const decisionsRef = (0, _react.useRef)(new Map());
const cardsRef = (0, _react.useRef)({});
const activePhotoRef = (0, _react.useRef)(photos[photos.length - 1]);
const refreshActivePhoto = (0, _react.useCallback)(() => {
const activePhotos = photos.filter(photo => !decisionsRef.current.has(photo.id));
activePhotoRef.current = activePhotos[activePhotos.length - 1];
}, []);
const commitDecision = (0, _react.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 = (0, _react.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 = (0, _react.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 = (0, _react.useCallback)(() => {
if (!activePhotoRef.current) {
return;
}
commitDecision('like');
}, []);
const dislikePhoto = (0, _react.useCallback)(() => {
if (!activePhotoRef.current) {
return;
}
commitDecision('dislike');
}, []);
const skipPhoto = (0, _react.useCallback)(() => {
if (!activePhotoRef.current) {
return;
}
commitDecision('skip');
}, []);
const toggleFavorite = (0, _react.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();
}, []);
(0, _react.useImperativeHandle)(ref, () => ({
likePhoto,
dislikePhoto,
skipPhoto,
toggleFavorite,
revertDecision
}), []);
(0, _react.useEffect)(() => {
refreshStatuses();
}, []);
return /*#__PURE__*/_react.default.createElement(_View.View, _extends({}, props, {
style: [{
flex: 1
}, props.style]
}), [...initialPhotos].reverse().map(photo => {
return /*#__PURE__*/_react.default.createElement(_TinderPhotoSwiperCard.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);
}
}));
}));
}
const TinderPhotoSwiper = /*#__PURE__*/(0, _react.forwardRef)(TinderPhotoSwiperInner);
exports.TinderPhotoSwiper = TinderPhotoSwiper;
//# sourceMappingURL=TinderPhotoSwiper.js.map