@garlicbed/react-native-slide360/lib/commonjs/index.js

A React Native component for interactive 360-degree product views

"use strict";

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.default = void 0;
var _react = require("react");
var _reactNative = require("react-native");
var _reactNativeGestureHandler = require("react-native-gesture-handler");
var _ImagePlaceholderComponent = _interopRequireDefault(require("./ImagePlaceholder.component.js"));
var _lodash = _interopRequireDefault(require("lodash.throttle"));
var _jsxRuntime = require("react/jsx-runtime");
function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
const Slide360View = ({
  images,
  dragDeltaX = 20,
  height = 200,
  containerStyle,
  onPressSlide,
  fallbackComponent,
  children,
  disabled
}) => {
  const [currentViewIndex, setcurrentViewIndex] = (0, _react.useState)(0);
  const lastActiveViewIndex = (0, _react.useRef)(0);
  const currentScrollItemPoint = (0, _react.useRef)(undefined);
  const totalImages = images.length || 0;
  const throttleSetState = (0, _react.useCallback)((0, _lodash.default)(newValue => setcurrentViewIndex(() => newValue), 200), []);
  const pan = _reactNativeGestureHandler.Gesture.Pan().minDistance(1).onUpdate(event => {
    let scrollItemPoint = Math.floor(-event.translationX / dragDeltaX);
    if (currentScrollItemPoint.current !== scrollItemPoint) {
      currentScrollItemPoint.current = scrollItemPoint;
      let cursorIndex = scrollItemPoint % totalImages;
      if (cursorIndex === -0) {
        cursorIndex = 0;
      } else if (cursorIndex < 0) {
        cursorIndex = Math.abs(cursorIndex + totalImages);
      }
      const nextSlideIndex = (cursorIndex + lastActiveViewIndex.current) % totalImages;
      throttleSetState(nextSlideIndex);
    }
  }).onEnd(() => {
    lastActiveViewIndex.current = currentViewIndex;
  }).runOnJS(true);
  const renderImage = (0, _react.useMemo)(() => {
    const handleOnPressImage = props => onPressSlide?.({
      ...props,
      index: currentViewIndex
    });
    return /*#__PURE__*/(0, _jsxRuntime.jsx)(_ImagePlaceholderComponent.default, {
      source: images[currentViewIndex],
      height: height,
      onPressImage: handleOnPressImage,
      fallbackComponent: fallbackComponent,
      disabled: disabled
    });
  }, [currentViewIndex, images, height, onPressSlide]);
  const rootContainerStyle = [styles.container, {
    height
  }, containerStyle];
  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNativeGestureHandler.GestureHandlerRootView, {
    style: rootContainerStyle,
    children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNativeGestureHandler.GestureDetector, {
      gesture: pan,
      children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
        collapsable: false,
        children: [renderImage, children]
      })
    })
  });
};
const styles = _reactNative.StyleSheet.create({
  container: {
    width: '100%',
    backgroundColor: 'white'
  },
  childrenContainer: {
    position: 'absolute'
  }
});
var _default = exports.default = Slide360View;
//# sourceMappingURL=index.js.map