react-native-slider-intro/lib/commonjs/index.js

A simple and full customizable React Native package which implements a unique slider.

"use strict";

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.default = void 0;
var _react = _interopRequireWildcard(require("react"));
var _reactNative = require("react-native");
var _Navigation = _interopRequireDefault(require("./components/Navigation"));
var _Slide = _interopRequireDefault(require("./components/Slide"));
var _SliderProvider = _interopRequireWildcard(require("./components/SliderProvider"));
var _jsxRuntime = require("react/jsx-runtime");
function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
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 styles = _reactNative.StyleSheet.create({
  wrapper: {
    flex: 1,
    flexDirection: 'row'
  }
});
const deviceMaxWidth = _reactNative.Dimensions.get('window').width;
const Slider = ({
  children
}) => {
  const {
    data,
    numberOfSlides,
    dotWidth = 12,
    slidesMaxWidth,
    limitToSlide,
    dotMaxPossibleWidth,
    slide,
    goToNewSlide,
    animations
  } = (0, _react.useContext)(_SliderProvider.SliderContext);
  const {
    active,
    slideToValue,
    dotWidthToValue
  } = slide;
  const {
    _moveSlideTranslateX,
    _slideDotScaleX,
    _slideDotTranslateX
  } = animations;
  const panResponderConfig = (0, _react.useMemo)(() => {
    const _onGestureEvent = translationX => {
      const newValue = translationX + slideToValue;
      const newDotWidthRawValue = dotMaxPossibleWidth / (deviceMaxWidth / translationX);
      const newDotWidthValue = translationX < 0 ? -1 * newDotWidthRawValue : newDotWidthRawValue;
      if (newValue > 0) {
        _slideDotTranslateX.setValue(dotWidthToValue);
        _moveSlideTranslateX.setValue(0);
        _slideDotScaleX.setValue(1);
        return;
      }
      if (newValue < -slidesMaxWidth) {
        _slideDotTranslateX.setValue(dotWidthToValue);
        _moveSlideTranslateX.setValue(slideToValue);
        _slideDotScaleX.setValue(1);
        return;
      }
      _moveSlideTranslateX.setValue(newValue);
      if (newDotWidthValue <= dotWidth) {
        _slideDotTranslateX.setValue(dotWidthToValue);
        _slideDotScaleX.setValue(1);
        return;
      }
      const newDotWidth = newDotWidthValue / dotWidth < 3 ? newDotWidthValue / dotWidth : 3;
      if (translationX < 0) {
        _slideDotTranslateX.setValue(dotWidthToValue + newDotWidthValue - dotWidth);
        _slideDotScaleX.setValue(newDotWidth);
        return;
      }
      _slideDotTranslateX.setValue(dotWidthToValue - newDotWidthValue + dotWidth);
      _slideDotScaleX.setValue(newDotWidth);
    };
    const _onHandlerStateChange = translationX => {
      const newValue = translationX + slideToValue;
      if (!(newValue <= 0 && newValue >= -slidesMaxWidth)) {
        return;
      }
      let absoluteTranslation = 0;
      if (translationX < 0) {
        absoluteTranslation = translationX * -1;
        if (limitToSlide && absoluteTranslation > limitToSlide) {
          goToNewSlide(active + 1);
          return;
        }
        goToNewSlide(active);
        return;
      }
      absoluteTranslation = translationX;
      if (limitToSlide && absoluteTranslation > limitToSlide) {
        goToNewSlide(active - 1);
        return;
      }
      goToNewSlide(active);
    };
    return {
      onStartShouldSetPanResponder: () => false,
      onMoveShouldSetPanResponder: (_, gestureState) => {
        return gestureState.dx !== 0 && gestureState.dy !== 0;
      },
      onMoveShouldSetPanResponderCapture: (_, gestureState) => {
        return gestureState.dx !== 0 && gestureState.dy !== 0;
      },
      onStartShouldSetPanResponderCapture: () => false,
      onPanResponderMove: (_, gesture) => {
        _onGestureEvent(gesture.dx);
      },
      onPanResponderRelease: (_, gesture) => {
        _onHandlerStateChange(gesture.dx);
      }
    };
  }, [_slideDotTranslateX, _slideDotScaleX, _moveSlideTranslateX, active, dotWidthToValue, dotMaxPossibleWidth, dotWidth, goToNewSlide, limitToSlide, slideToValue, slidesMaxWidth]);
  const panResponder = _reactNative.PanResponder.create(panResponderConfig);
  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Animated.View, {
    style: [styles.wrapper, {
      maxWidth: numberOfSlides * deviceMaxWidth,
      transform: [{
        translateX: _moveSlideTranslateX
      }]
    }],
    ...panResponder.panHandlers,
    children: children ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_jsxRuntime.Fragment, {
      children: children
    }) : /*#__PURE__*/(0, _jsxRuntime.jsx)(_jsxRuntime.Fragment, {
      children: data?.map((item, index) => /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
        style: {
          width: deviceMaxWidth
        },
        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Slide.default, {
          item: item
        })
      }, index))
    })
  });
};
const SliderIntro = props => /*#__PURE__*/(0, _jsxRuntime.jsxs)(_SliderProvider.default, {
  ...props,
  isCustomRender: !!props.children,
  children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(Slider, {
    children: props.children
  }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_Navigation.default, {})]
});
var _default = exports.default = SliderIntro;
//# sourceMappingURL=index.js.map