react-native-slider-intro
Version:
A simple and full customizable React Native package which implements a unique slider.
223 lines (222 loc) • 9.07 kB
JavaScript
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.default = exports.SliderContext = void 0;
var _react = _interopRequireWildcard(require("react"));
var _reactNative = require("react-native");
var _Button = require("../types/Button.types");
var _jsxRuntime = require("react/jsx-runtime");
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 defaultSlideState = {
active: 0,
previous: 0,
slideToValue: 0,
dotWidthToValue: 0,
expectOpacityOfNext: 1,
expectOpacityOfDone: 0,
expectOpacityOfSkip: 1
};
const deviceMaxWidth = _reactNative.Dimensions.get('window').width;
const SliderContext = exports.SliderContext = /*#__PURE__*/(0, _react.createContext)({
data: [],
children: null,
navigationBarBottom: 0,
navigationBarHeight: 70,
animateSlideSpeed: 15,
navContainerMaxSizePercent: 0.5,
dotWidth: 12,
fixDotOpacity: 0.35,
fixDotBackgroundColor: 'grey',
animatedDotBackgroundColor: 'white',
animateDotSpeed: 8,
animateDotBouncing: 2,
showLeftButton: true,
leftButtonType: _Button.ButtonType.Skip,
columnButtonStyle: false,
limitToSlide: deviceMaxWidth * 0.35,
renderSkipButton: () => null,
renderNextButton: () => null,
renderDoneButton: () => null,
skipLabel: _Button.ButtonType.Skip,
nextLabel: _Button.ButtonType.Next,
doneLabel: _Button.ButtonType.Done,
onDone: () => {},
onSkip: () => {},
numberOfSlides: 1,
navContainerMaxSize: 0,
dotMaxPossibleWidth: 0,
buttonsMaxSize: 0,
slidesMaxWidth: 0,
slide: defaultSlideState,
setDefaultState: () => {},
animations: Object.create(null),
goToNewSlide: () => {},
isLastSlide: false
});
const SliderProvider = props => {
const {
data = [],
children = null,
animateSlideSpeed = 15,
navContainerMaxSizePercent = 0.5,
dotWidth = 12,
animateDotSpeed = 8,
animateDotBouncing = 2,
onDone = () => {},
isCustomRender
} = props;
const numberOfSlides = isCustomRender ? props?.numberOfSlides ?? 1 : data?.length ?? 1;
const slidesMaxWidth = (numberOfSlides - 1) * deviceMaxWidth;
const navContainerMaxSize = deviceMaxWidth * navContainerMaxSizePercent;
const buttonsMaxSize = (deviceMaxWidth - navContainerMaxSize) / 2 - 1;
const dotMaxPossibleWidth = navContainerMaxSize / (numberOfSlides - 1) + 9;
const _moveSlideTranslateX = (0, _reactNative.useAnimatedValue)(0);
const _slideDotScaleX = (0, _reactNative.useAnimatedValue)(1);
const _slideDotTranslateX = (0, _reactNative.useAnimatedValue)(0);
const _opacityOfNextButton = (0, _reactNative.useAnimatedValue)(0);
const _opacityOfDoneButton = (0, _reactNative.useAnimatedValue)(0);
const _opacityOfSkipButton = (0, _reactNative.useAnimatedValue)(0);
const sliderState = (0, _react.useState)(defaultSlideState);
const [slide, setSlide] = sliderState;
const {
active,
slideToValue,
dotWidthToValue,
expectOpacityOfNext,
expectOpacityOfDone,
expectOpacityOfSkip
} = slide;
const slideAnimation = (0, _react.useMemo)(() => _reactNative.Animated.spring(_moveSlideTranslateX, {
toValue: slideToValue,
speed: animateSlideSpeed,
bounciness: animateDotBouncing,
useNativeDriver: true
}), [slideToValue, animateSlideSpeed, animateDotBouncing, _moveSlideTranslateX]);
const dotAnimation = (0, _react.useMemo)(() => _reactNative.Animated.spring(_slideDotScaleX, {
toValue: 1,
speed: animateDotSpeed,
bounciness: animateDotBouncing,
useNativeDriver: true
}), [_slideDotScaleX, animateDotBouncing, animateDotSpeed]);
const dotWidthAnimation = (0, _react.useMemo)(() => _reactNative.Animated.spring(_slideDotTranslateX, {
toValue: dotWidthToValue,
speed: animateDotSpeed,
bounciness: animateDotBouncing,
useNativeDriver: true
}), [dotWidthToValue, animateDotSpeed, animateDotBouncing, _slideDotTranslateX]);
const nextOpacityAnimation = (0, _react.useMemo)(() => _reactNative.Animated.timing(_opacityOfNextButton, {
toValue: expectOpacityOfNext,
duration: animateDotSpeed,
easing: _reactNative.Easing.inOut(_reactNative.Easing.ease),
useNativeDriver: true
}), [expectOpacityOfNext, animateDotSpeed, _opacityOfNextButton]);
const doneOpacityAnimation = (0, _react.useMemo)(() => _reactNative.Animated.timing(_opacityOfDoneButton, {
toValue: expectOpacityOfDone,
duration: animateDotSpeed,
easing: _reactNative.Easing.inOut(_reactNative.Easing.ease),
useNativeDriver: true
}), [expectOpacityOfDone, animateDotSpeed, _opacityOfDoneButton]);
const skipOpacityAnimation = (0, _react.useMemo)(() => _reactNative.Animated.timing(_opacityOfSkipButton, {
toValue: expectOpacityOfSkip,
duration: animateDotSpeed,
easing: _reactNative.Easing.inOut(_reactNative.Easing.ease),
useNativeDriver: true
}), [expectOpacityOfSkip, animateDotSpeed, _opacityOfSkipButton]);
(0, _react.useLayoutEffect)(() => {
const animationGroup = _reactNative.Animated.parallel([slideAnimation, dotAnimation, dotWidthAnimation, nextOpacityAnimation, doneOpacityAnimation, skipOpacityAnimation]);
animationGroup.start();
return () => animationGroup.stop();
// eslint-disable-next-line react-hooks/exhaustive-deps
}, [slide]);
const goToNewSlide = newSlide => {
if (newSlide < 0) {
return;
}
if (newSlide > numberOfSlides - 1) {
setSlide(defaultSlideState);
onDone();
return;
}
let opacityOfNext = 0;
let opacityOfDone = 0;
let opacityOfSkip = 0;
let expectedMarginLeft = 0;
let expectedMarginLeftDot = newSlide * (navContainerMaxSize - numberOfSlides * dotWidth) / (numberOfSlides - 1) + newSlide * dotWidth;
if (newSlide === numberOfSlides - 1) {
opacityOfNext = 0;
opacityOfDone = 1;
opacityOfSkip = 0;
} else {
opacityOfNext = 1;
opacityOfDone = 0;
opacityOfSkip = 1;
}
if (newSlide > active) {
expectedMarginLeft = -(newSlide * deviceMaxWidth);
} else if (newSlide < active) {
expectedMarginLeft = -(newSlide * deviceMaxWidth);
} else {
expectedMarginLeft = slideToValue;
}
setSlide({
active: newSlide,
previous: active,
dotWidthToValue: expectedMarginLeftDot,
slideToValue: expectedMarginLeft,
expectOpacityOfNext: opacityOfNext,
expectOpacityOfDone: opacityOfDone,
expectOpacityOfSkip: opacityOfSkip
});
};
const contextValue = {
data: props?.data ?? [],
children: props?.children ?? null,
navigationBarBottom: props?.navigationBarBottom ?? 0,
navigationBarHeight: props?.navigationBarHeight ?? 70,
animateSlideSpeed: props?.animateSlideSpeed ?? 15,
navContainerMaxSizePercent: props?.navContainerMaxSizePercent ?? 0.5,
dotWidth: props?.dotWidth ?? 12,
fixDotOpacity: props?.fixDotOpacity ?? 0.35,
fixDotBackgroundColor: props?.fixDotBackgroundColor ?? 'grey',
animatedDotBackgroundColor: props?.animatedDotBackgroundColor ?? 'white',
animateDotSpeed: props?.animateDotSpeed ?? 8,
animateDotBouncing: props?.animateDotBouncing ?? 2,
showLeftButton: props?.showLeftButton ?? true,
leftButtonType: props?.leftButtonType ?? _Button.ButtonType.Skip,
columnButtonStyle: !!props?.columnButtonStyle,
limitToSlide: props?.limitToSlide ?? deviceMaxWidth * 0.35,
renderSkipButton: props?.renderSkipButton,
renderNextButton: props?.renderNextButton,
renderDoneButton: props?.renderDoneButton,
onDone: props?.onDone,
onSkip: props?.onSkip,
skipLabel: props?.skipLabel ?? _Button.ButtonType.Skip,
doneLabel: props?.doneLabel ?? _Button.ButtonType.Done,
nextLabel: props?.nextLabel ?? _Button.ButtonType.Next,
slide,
setDefaultState: () => setSlide(defaultSlideState),
isLastSlide: active + 1 === numberOfSlides,
goToNewSlide,
animations: {
_moveSlideTranslateX,
_slideDotScaleX,
_slideDotTranslateX,
_opacityOfNextButton,
_opacityOfDoneButton,
_opacityOfSkipButton
},
slidesMaxWidth,
navContainerMaxSize,
buttonsMaxSize,
dotMaxPossibleWidth,
numberOfSlides
};
return /*#__PURE__*/(0, _jsxRuntime.jsx)(SliderContext.Provider, {
value: contextValue,
children: children
});
};
var _default = exports.default = SliderProvider;
//# sourceMappingURL=SliderProvider.js.map