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

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

"use strict";

import React, { useContext, useMemo } from 'react';
import { Animated, Dimensions, PanResponder, StyleSheet, View } from 'react-native';
import Navigation from './components/Navigation';
import Slide from './components/Slide';
import SliderProvider, { SliderContext } from './components/SliderProvider';
import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
const styles = StyleSheet.create({
  wrapper: {
    flex: 1,
    flexDirection: 'row'
  }
});
const deviceMaxWidth = Dimensions.get('window').width;
const Slider = ({
  children
}) => {
  const {
    data,
    numberOfSlides,
    dotWidth = 12,
    slidesMaxWidth,
    limitToSlide,
    dotMaxPossibleWidth,
    slide,
    goToNewSlide,
    animations
  } = useContext(SliderContext);
  const {
    active,
    slideToValue,
    dotWidthToValue
  } = slide;
  const {
    _moveSlideTranslateX,
    _slideDotScaleX,
    _slideDotTranslateX
  } = animations;
  const panResponderConfig = 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 = PanResponder.create(panResponderConfig);
  return /*#__PURE__*/_jsx(Animated.View, {
    style: [styles.wrapper, {
      maxWidth: numberOfSlides * deviceMaxWidth,
      transform: [{
        translateX: _moveSlideTranslateX
      }]
    }],
    ...panResponder.panHandlers,
    children: children ? /*#__PURE__*/_jsx(_Fragment, {
      children: children
    }) : /*#__PURE__*/_jsx(_Fragment, {
      children: data?.map((item, index) => /*#__PURE__*/_jsx(View, {
        style: {
          width: deviceMaxWidth
        },
        children: /*#__PURE__*/_jsx(Slide, {
          item: item
        })
      }, index))
    })
  });
};
const SliderIntro = props => /*#__PURE__*/_jsxs(SliderProvider, {
  ...props,
  isCustomRender: !!props.children,
  children: [/*#__PURE__*/_jsx(Slider, {
    children: props.children
  }), /*#__PURE__*/_jsx(Navigation, {})]
});
export default SliderIntro;
//# sourceMappingURL=index.js.map