cdslibrary 1.1.6 → 1.1.7
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/package.json +1 -1
- package/components/CDSOnboarding.jsx +0 -69
package/package.json
CHANGED
|
@@ -1,69 +0,0 @@
|
|
|
1
|
-
import React, { act, useRef, useState } from "react";
|
|
2
|
-
import { Dimensions } from "react-native";
|
|
3
|
-
import {CDSBottomSheet} from "./CDSBottomSheet";
|
|
4
|
-
import {CDSCarousel} from "./CDSCarousel";
|
|
5
|
-
import { useTheme } from "../context/CDSThemeContext";
|
|
6
|
-
const { width } = Dimensions.get("window");
|
|
7
|
-
|
|
8
|
-
export const CDSOnboarding = () => {
|
|
9
|
-
const { isDarkMode } = useTheme();
|
|
10
|
-
const scrollViewRef = useRef(null);
|
|
11
|
-
const [activeIndex, setActiveIndex] = useState(0);
|
|
12
|
-
const [isLastSlide, setIsLastSlide] = useState(false);
|
|
13
|
-
|
|
14
|
-
const images = !isDarkMode
|
|
15
|
-
? [
|
|
16
|
-
require("../assets/onboarding/image1.png"),
|
|
17
|
-
require("../assets/onboarding/image2.png"),
|
|
18
|
-
require("../assets/onboarding/image3.png"),
|
|
19
|
-
]
|
|
20
|
-
: [
|
|
21
|
-
require("../assets/onboarding/image1D.png"),
|
|
22
|
-
require("../assets/onboarding/image2D.png"),
|
|
23
|
-
require("../assets/onboarding/image3D.png"),
|
|
24
|
-
];
|
|
25
|
-
|
|
26
|
-
const handleScroll = (event) => {
|
|
27
|
-
const index = Math.round(event.nativeEvent.contentOffset.x / width);
|
|
28
|
-
setActiveIndex(index);
|
|
29
|
-
setIsLastSlide(index === images.length - 1);
|
|
30
|
-
};
|
|
31
|
-
|
|
32
|
-
const handleNext = () =>
|
|
33
|
-
!isLastSlide &&
|
|
34
|
-
scrollViewRef.current.scrollTo({
|
|
35
|
-
x: (activeIndex + 1) * width,
|
|
36
|
-
animated: true,
|
|
37
|
-
});
|
|
38
|
-
|
|
39
|
-
return (
|
|
40
|
-
<CDSBottomSheet
|
|
41
|
-
isVisible
|
|
42
|
-
customSlot={
|
|
43
|
-
<CDSCarousel
|
|
44
|
-
activeIndex={activeIndex}
|
|
45
|
-
scrollViewRef={scrollViewRef}
|
|
46
|
-
onScroll={handleScroll}
|
|
47
|
-
images={images}
|
|
48
|
-
/>
|
|
49
|
-
}
|
|
50
|
-
title={
|
|
51
|
-
(activeIndex === 0 && "Tus boletas en un solo lugar") ||
|
|
52
|
-
(activeIndex === 1 && "Realiza tus pagos") ||
|
|
53
|
-
(activeIndex === 2 && "Tu eliges cuánto pagar")
|
|
54
|
-
}
|
|
55
|
-
description={
|
|
56
|
-
(activeIndex === 0 &&
|
|
57
|
-
"Conoce el estado general de tus boletas y dales seguimiento desde la aplicación.") ||
|
|
58
|
-
(activeIndex === 1 &&
|
|
59
|
-
"Puedes refrendar o pagar tus desempeños con diferentes métodos de pago.") ||
|
|
60
|
-
(activeIndex === 2 &&
|
|
61
|
-
"Con “Pagos libres” elige la cantidad, reduce los intereses y abona a capital desde el primer día.")
|
|
62
|
-
}
|
|
63
|
-
primaryButtonLabel={!isLastSlide ? "Siguiente" : "Finalizar"}
|
|
64
|
-
primaryButtonOnPress={handleNext}
|
|
65
|
-
onFinish={isLastSlide && true}
|
|
66
|
-
secondaryButtonLabel="Ahora no"
|
|
67
|
-
/>
|
|
68
|
-
);
|
|
69
|
-
};
|