@ledgerhq/native-ui 0.8.1-nightly.0 → 0.8.2-yolo.0
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.
|
@@ -61,7 +61,15 @@ export declare type Props = React.PropsWithChildren<{
|
|
|
61
61
|
* Number of milliseconds a tap should not exceed to scroll to the netxt or precedent item.
|
|
62
62
|
*/
|
|
63
63
|
maxDurationOfTap?: number;
|
|
64
|
+
/**
|
|
65
|
+
* Called when the active carousel index is updated automaticly.
|
|
66
|
+
*/
|
|
67
|
+
onAutoChange?: (index: number) => void;
|
|
68
|
+
/**
|
|
69
|
+
* Called when the active carousel index is updated manually.
|
|
70
|
+
*/
|
|
71
|
+
onManualChange?: (index: number) => void;
|
|
64
72
|
}>;
|
|
65
|
-
declare function Carousel({ activeIndex, autoDelay, restartAfterEnd, scrollOnSidePress, containerProps, slideIndicatorContainerProps, scrollViewProps, onChange, onOverflow, IndicatorComponent, maxDurationOfTap, children, }: Props): JSX.Element;
|
|
73
|
+
declare function Carousel({ activeIndex, autoDelay, restartAfterEnd, scrollOnSidePress, containerProps, slideIndicatorContainerProps, scrollViewProps, onChange, onOverflow, IndicatorComponent, maxDurationOfTap, children, onAutoChange, onManualChange, }: Props): JSX.Element;
|
|
66
74
|
declare const _default: React.MemoExoticComponent<typeof Carousel>;
|
|
67
75
|
export default _default;
|
|
@@ -5,7 +5,7 @@ import { Flex, SlideIndicator } from "../index";
|
|
|
5
5
|
const HorizontalScrollView = styled.ScrollView.attrs({ horizontal: true }) `
|
|
6
6
|
flex: 1;
|
|
7
7
|
`;
|
|
8
|
-
function Carousel({ activeIndex = 0, autoDelay, restartAfterEnd = true, scrollOnSidePress = false, containerProps, slideIndicatorContainerProps, scrollViewProps, onChange, onOverflow, IndicatorComponent = SlideIndicator, maxDurationOfTap, children, }) {
|
|
8
|
+
function Carousel({ activeIndex = 0, autoDelay, restartAfterEnd = true, scrollOnSidePress = false, containerProps, slideIndicatorContainerProps, scrollViewProps, onChange, onOverflow, IndicatorComponent = SlideIndicator, maxDurationOfTap, children, onAutoChange, onManualChange, }) {
|
|
9
9
|
const [init, setInit] = useState(false);
|
|
10
10
|
const [activeIndexState, setActiveIndexState] = useState(activeIndex);
|
|
11
11
|
const disableTimer = useRef(false);
|
|
@@ -45,6 +45,7 @@ function Carousel({ activeIndex = 0, autoDelay, restartAfterEnd = true, scrollOn
|
|
|
45
45
|
if (tapPositionXPercent > 0.25) {
|
|
46
46
|
if (slidesLength > activeIndexState + 1) {
|
|
47
47
|
scrollToIndex(activeIndexState + 1, false);
|
|
48
|
+
onManualChange && onManualChange(activeIndexState + 1);
|
|
48
49
|
}
|
|
49
50
|
else {
|
|
50
51
|
onOverflow && onOverflow("end", false);
|
|
@@ -52,11 +53,12 @@ function Carousel({ activeIndex = 0, autoDelay, restartAfterEnd = true, scrollOn
|
|
|
52
53
|
}
|
|
53
54
|
else if (activeIndexState > 0) {
|
|
54
55
|
scrollToIndex(activeIndexState - 1, false);
|
|
56
|
+
onManualChange && onManualChange(activeIndexState - 1);
|
|
55
57
|
}
|
|
56
58
|
else {
|
|
57
59
|
onOverflow && onOverflow("start", false);
|
|
58
60
|
}
|
|
59
|
-
}, [slidesLength, activeIndexState, scrollToIndex, onOverflow, itemWidth]);
|
|
61
|
+
}, [slidesLength, activeIndexState, scrollToIndex, onOverflow, itemWidth, onManualChange]);
|
|
60
62
|
const onScroll = ({ nativeEvent: { contentOffset, contentSize }, }) => {
|
|
61
63
|
const newIndex = Math.abs(Math.round((contentOffset.x / contentSize.width) * slidesLength));
|
|
62
64
|
setActiveIndexState(newIndex);
|
|
@@ -68,6 +70,7 @@ function Carousel({ activeIndex = 0, autoDelay, restartAfterEnd = true, scrollOn
|
|
|
68
70
|
const interval = setTimeout(() => {
|
|
69
71
|
if (!disableTimer.current) {
|
|
70
72
|
const newIndex = typeof activeIndexState !== "undefined" ? (activeIndexState + 1) % slidesLength : 0;
|
|
73
|
+
onAutoChange && onAutoChange(newIndex);
|
|
71
74
|
if (restartAfterEnd || newIndex !== 0) {
|
|
72
75
|
scrollToIndex(newIndex);
|
|
73
76
|
}
|
|
@@ -88,6 +91,7 @@ function Carousel({ activeIndex = 0, autoDelay, restartAfterEnd = true, scrollOn
|
|
|
88
91
|
activeIndexState,
|
|
89
92
|
onOverflow,
|
|
90
93
|
restartAfterEnd,
|
|
94
|
+
onAutoChange,
|
|
91
95
|
]);
|
|
92
96
|
// Timestamp of start of click on the Carrousel
|
|
93
97
|
const [tapTime, setTapTime] = useState(0);
|
|
@@ -109,6 +113,7 @@ function Carousel({ activeIndex = 0, autoDelay, restartAfterEnd = true, scrollOn
|
|
|
109
113
|
React.createElement(Flex, Object.assign({ my: 8 }, slideIndicatorContainerProps), React.isValidElement(IndicatorComponent) ? (IndicatorComponent) : (React.createElement(IndicatorComponent, { activeIndex: activeIndexState || 0, onChange: (index) => {
|
|
110
114
|
scrollToIndex(index);
|
|
111
115
|
setResetTimer({});
|
|
116
|
+
onManualChange && onManualChange(index);
|
|
112
117
|
}, slidesLength: slidesLength, duration: autoDelay })))));
|
|
113
118
|
}
|
|
114
119
|
export default React.memo(Carousel);
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@ledgerhq/native-ui",
|
|
3
|
-
"version": "0.8.
|
|
3
|
+
"version": "0.8.2-yolo.0",
|
|
4
4
|
"description": "Ledger Live - Mobile UI",
|
|
5
5
|
"repository": "https://github.com/LedgerHQ/ui",
|
|
6
6
|
"license": "MIT",
|
|
@@ -25,7 +25,7 @@
|
|
|
25
25
|
"lib/**/*"
|
|
26
26
|
],
|
|
27
27
|
"dependencies": {
|
|
28
|
-
"@ledgerhq/icons-ui": "^0.2.
|
|
28
|
+
"@ledgerhq/icons-ui": "^0.2.7-yolo.0",
|
|
29
29
|
"@ledgerhq/ui-shared": "^0.1.9",
|
|
30
30
|
"@types/color": "^3.0.3",
|
|
31
31
|
"@types/react": "^17.0.39",
|