react-native-zoom-toolkit
Version:
Smoothly zoom any image, video or component you want!
159 lines (157 loc) • 7.56 kB
JavaScript
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.default = void 0;
var _react = _interopRequireWildcard(require("react"));
var _reactNative = require("react-native");
var _reactNativeReanimated = _interopRequireWildcard(require("react-native-reanimated"));
var _reactNativeGestureHandler = require("react-native-gesture-handler");
var _useVector = require("../../commons/hooks/useVector");
var _useSizeVector = require("../../commons/hooks/useSizeVector");
var _resizeToAspectRatio = require("../../commons/utils/resizeToAspectRatio");
var _withSnapbackValidation = _interopRequireDefault(require("../../commons/hoc/withSnapbackValidation"));
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
const DEFAULT_HITSLOP = {
vertical: 0,
horizontal: 0
};
const SnapbackZoom = ({
children,
hitSlop = DEFAULT_HITSLOP,
resizeConfig,
timingConfig,
gesturesEnabled = true,
onTap,
onDoubleTap,
onPinchStart,
onPinchEnd,
onGestureActive,
onGestureEnd
}) => {
const [internalGesturesEnabled, setGesturesEnabled] = (0, _react.useState)(true);
const switchGestureStatus = enabled => {
setGesturesEnabled(enabled);
};
const position = (0, _useVector.useVector)(0, 0);
const translate = (0, _useVector.useVector)(0, 0);
const origin = (0, _useVector.useVector)(0, 0);
const scale = (0, _reactNativeReanimated.useSharedValue)(1);
const containerSize = (0, _useSizeVector.useSizeVector)((resizeConfig === null || resizeConfig === void 0 ? void 0 : resizeConfig.size.width) ?? 0, (resizeConfig === null || resizeConfig === void 0 ? void 0 : resizeConfig.size.height) ?? 0);
const childrenSize = (0, _reactNativeReanimated.useDerivedValue)(() => {
return (0, _resizeToAspectRatio.resizeToAspectRatio)({
resizeConfig,
width: containerSize.width.value,
height: containerSize.height.value,
scale: scale.value
});
}, [resizeConfig, scale, containerSize]);
const containerRef = (0, _reactNativeReanimated.useAnimatedRef)();
const measurePinchContainer = () => {
'worklet';
const measuremet = (0, _reactNativeReanimated.measure)(containerRef);
if (measuremet !== null) {
containerSize.width.value = measuremet.width;
containerSize.height.value = measuremet.height;
position.x.value = measuremet.pageX;
position.y.value = measuremet.pageY;
}
};
(0, _reactNativeReanimated.useDerivedValue)(() => {
const {
width,
height
} = childrenSize.value;
onGestureActive === null || onGestureActive === void 0 || onGestureActive({
x: position.x.value,
y: position.y.value,
width: containerSize.width.value,
height: containerSize.height.value,
resizedWidth: resizeConfig ? width : undefined,
resizedHeight: resizeConfig ? height : undefined,
translateX: translate.x.value,
translateY: translate.y.value,
scale: scale.value
});
}, [position, translate, scale, containerSize, childrenSize]);
const pinch = _reactNativeGestureHandler.Gesture.Pinch().hitSlop(hitSlop).enabled(gesturesEnabled && internalGesturesEnabled).onStart(e => {
onPinchStart && (0, _reactNativeReanimated.runOnJS)(onPinchStart)(e);
measurePinchContainer();
origin.x.value = e.focalX - containerSize.width.value / 2;
origin.y.value = e.focalY - containerSize.height.value / 2;
}).onUpdate(e => {
const deltaX = e.focalX - containerSize.width.value / 2 - origin.x.value;
const deltaY = e.focalY - containerSize.height.value / 2 - origin.y.value;
const toX = -1 * (origin.x.value * e.scale - origin.x.value) + deltaX;
const toY = -1 * (origin.y.value * e.scale - origin.y.value) + deltaY;
translate.x.value = toX;
translate.y.value = toY;
scale.value = e.scale;
}).onEnd(e => {
(0, _reactNativeReanimated.runOnJS)(switchGestureStatus)(false);
onPinchEnd && (0, _reactNativeReanimated.runOnJS)(onPinchEnd)(e);
translate.x.value = (0, _reactNativeReanimated.withTiming)(0, timingConfig);
translate.y.value = (0, _reactNativeReanimated.withTiming)(0, timingConfig);
scale.value = (0, _reactNativeReanimated.withTiming)(1, timingConfig, _ => {
(0, _reactNativeReanimated.runOnJS)(switchGestureStatus)(true);
onGestureEnd && (0, _reactNativeReanimated.runOnJS)(onGestureEnd)();
});
});
const tap = _reactNativeGestureHandler.Gesture.Tap().enabled(gesturesEnabled && internalGesturesEnabled).maxDuration(250).numberOfTaps(1).runOnJS(true).onEnd(e => onTap === null || onTap === void 0 ? void 0 : onTap(e));
const doubleTap = _reactNativeGestureHandler.Gesture.Tap().enabled(gesturesEnabled && internalGesturesEnabled).numberOfTaps(2).maxDuration(250).runOnJS(true).onEnd(e => onDoubleTap === null || onDoubleTap === void 0 ? void 0 : onDoubleTap(e));
const containerStyle = (0, _reactNativeReanimated.useAnimatedStyle)(() => {
const width = containerSize.width.value;
const height = containerSize.height.value;
return {
width: width === 0 ? undefined : width,
height: height === 0 ? undefined : height
};
}, [containerSize]);
const childrenStyle = (0, _reactNativeReanimated.useAnimatedStyle)(() => {
const {
width,
height,
deltaX,
deltaY
} = childrenSize.value;
return {
width: width === 0 ? undefined : width,
height: height === 0 ? undefined : height,
transform: [{
translateX: translate.x.value - deltaX
}, {
translateY: translate.y.value - deltaY
}, {
scale: scale.value
}]
};
}, [resizeConfig, containerSize, childrenSize, translate, scale]);
const composedTapGesture = _reactNativeGestureHandler.Gesture.Exclusive(doubleTap, tap);
return /*#__PURE__*/_react.default.createElement(_reactNativeReanimated.default.View, {
style: [containerStyle, styles.center]
}, /*#__PURE__*/_react.default.createElement(_reactNativeReanimated.default.View, {
ref: containerRef,
style: childrenStyle
}, children), /*#__PURE__*/_react.default.createElement(_reactNativeGestureHandler.GestureDetector, {
gesture: _reactNativeGestureHandler.Gesture.Race(pinch, composedTapGesture)
}, /*#__PURE__*/_react.default.createElement(_reactNativeReanimated.default.View, {
collapsable: false,
pointerEvents: gesturesEnabled ? undefined : 'none',
style: styles.absolute
})));
};
const styles = _reactNative.StyleSheet.create({
center: {
justifyContent: 'center',
alignItems: 'center'
},
absolute: {
height: '100%',
width: '100%',
position: 'absolute'
}
});
var _default = exports.default = (0, _withSnapbackValidation.default)(SnapbackZoom);
//# sourceMappingURL=SnapbackZoom.js.map