Skip to content

Commit 80c84af

Browse files
YoussefHennaYoussefHenna
authored
Added swipe callbacks for Swiper and DeckSwiper (v46.12.4) (#648)
* Added 'onSwipedX' callbacks to DeckSwiper * Added 'onSwipedX' callbacks to Swiper * v46.12.4 * Uncomment swiper example * Use onSwipedNext/Previous for Swiper
1 parent 503b801 commit 80c84af

File tree

12 files changed

+117
-72
lines changed

12 files changed

+117
-72
lines changed

‎example/package.json‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
{
22
"name": "@draftbit/example",
33
"description": "Example app for @draftbit/ui",
4-
"version": "46.12.3",
4+
"version": "46.12.4",
55
"private": true,
66
"main": "__generated__/AppEntry.js",
77
"scripts": {
@@ -15,8 +15,8 @@
1515
"clean:modules": "rimraf node_modules"
1616
},
1717
"dependencies": {
18-
"@draftbit/maps": "46.12.3",
19-
"@draftbit/ui": "46.12.3",
18+
"@draftbit/maps": "46.12.4",
19+
"@draftbit/ui": "46.12.4",
2020
"@expo/dev-server": "0.1.120",
2121
"@expo/webpack-config": "^0.17.0",
2222
"@react-navigation/drawer": "^5.7.7",

‎example/src/DeckSwiperExample.tsx‎

Lines changed: 17 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -45,7 +45,23 @@ const DeckSwiperExample: React.FC = () => {
4545
</DeckSwiperCard>
4646
</DeckSwiper>
4747
</Section>
48-
48+
<Section title="Lazy Rendering (renderItem)" style={{}}>
49+
<DeckSwiper
50+
infiniteSwiping
51+
visibleCardCount={2}
52+
data={sampleData}
53+
onSwipedDown={(index) => console.log("Swiped down", index)}
54+
onSwipedUp={(index) => console.log("Swiped up", index)}
55+
onSwipedLeft={(index) => console.log("Swiped left", index)}
56+
onSwipedRight={(index) => console.log("Swiped right", index)}
57+
renderItem={({ item }) => (
58+
<DeckSwiperCard>
59+
<Text>{item.fullName}</Text>
60+
</DeckSwiperCard>
61+
)}
62+
keyExtractor={(item) => item.id.toString()}
63+
/>
64+
</Section>
4965
<Section title="Infinite swiper with images" style={{}}>
5066
<DeckSwiper infiniteSwiping visibleCardCount={2}>
5167
<DeckSwiperCard>
@@ -68,20 +84,6 @@ const DeckSwiperExample: React.FC = () => {
6884
</DeckSwiperCard>
6985
</DeckSwiper>
7086
</Section>
71-
72-
<Section title="Lazy Rendering (renderItem)" style={{}}>
73-
<DeckSwiper
74-
infiniteSwiping
75-
visibleCardCount={2}
76-
data={sampleData}
77-
renderItem={({ item }) => (
78-
<DeckSwiperCard>
79-
<Text>{item.fullName}</Text>
80-
</DeckSwiperCard>
81-
)}
82-
keyExtractor={(item) => item.id.toString()}
83-
/>
84-
</Section>
8587
</Container>
8688
);
8789
};

‎example/src/SwiperExample.js‎

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -36,7 +36,9 @@ function SwiperExample({ theme }) {
3636
style={{ width: "100%", height: 300 }}
3737
dotColor="green"
3838
dotActiveColor="red"
39-
onIndexChanged={index => console.log("onIndexChanged: ", index)}
39+
onSwipedNext={(index) => console.log("Swiped next", index)}
40+
onSwipedPrevious={(index) => console.log("Swiped previous", index)}
41+
onIndexChanged={(index) => console.log("onIndexChanged: ", index)}
4042
>
4143
<SwiperItem style={[style.item, { backgroundColor: "#fdd3d3" }]}>
4244
<Text>Test Slide 1</Text>

‎lerna.json‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
{
2-
"version": "46.12.3",
2+
"version": "46.12.4",
33
"npmClient": "yarn",
44
"useWorkspaces": true,
55
"packages": ["packages/*", "example"],

‎packages/core/package.json‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
{
22
"name": "@draftbit/core",
3-
"version": "46.12.3",
3+
"version": "46.12.4",
44
"description": "Core (non-native) Components",
55
"main": "lib/commonjs/index.js",
66
"module": "lib/module/index.js",
@@ -41,7 +41,7 @@
4141
"dependencies": {
4242
"@date-io/date-fns": "^1.3.13",
4343
"@draftbit/react-theme-provider": "^2.1.1",
44-
"@draftbit/types": "46.12.3",
44+
"@draftbit/types": "46.12.4",
4545
"@material-ui/core": "^4.11.0",
4646
"@material-ui/pickers": "^3.2.10",
4747
"@react-native-community/slider": "4.2.3",

‎packages/core/src/components/DeckSwiper/DeckSwiper.tsx‎

Lines changed: 12 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -3,6 +3,10 @@ import { StyleProp, ViewStyle, StyleSheet, View } from "react-native";
33
import DeckSwiperComponent from "react-native-deck-swiper";
44

55
export interface DeckSwiperProps<T> {
6+
onSwipedLeft?: (index: number) => void;
7+
onSwipedRight?: (index: number) => void;
8+
onSwipedUp?: (index: number) => void;
9+
onSwipedDown?: (index: number) => void;
610
onIndexChanged?: (index: number) => void;
711
onEndReached?: () => void;
812
startCardIndex?: number;
@@ -17,6 +21,10 @@ export interface DeckSwiperProps<T> {
1721
}
1822

1923
const DeckSwiper = <T extends object>({
24+
onSwipedLeft,
25+
onSwipedRight,
26+
onSwipedUp,
27+
onSwipedDown,
2028
onIndexChanged,
2129
onEndReached,
2230
startCardIndex = 0,
@@ -113,6 +121,10 @@ const DeckSwiper = <T extends object>({
113121
backgroundColor="transparent"
114122
cardVerticalMargin={0}
115123
cardHorizontalMargin={0}
124+
onSwipedLeft={onSwipedLeft}
125+
onSwipedRight={onSwipedRight}
126+
onSwipedTop={onSwipedUp}
127+
onSwipedBottom={onSwipedDown}
116128
/>
117129
</View>
118130
);

‎packages/core/src/components/Swiper/Swiper.tsx‎

Lines changed: 68 additions & 39 deletions
Original file line numberDiff line numberDiff line change
@@ -3,6 +3,8 @@ import { View, StyleProp, ViewStyle } from "react-native";
33
import SwiperComponent from "react-native-web-swiper";
44

55
export interface SwiperProps<T> {
6+
onSwipedNext?: (index: number) => void;
7+
onSwipedPrevious?: (index: number) => void;
68
vertical?: boolean;
79
loop?: boolean;
810
from?: number;
@@ -38,47 +40,74 @@ const Swiper = ({
3840
keyExtractor,
3941
renderItem,
4042
children,
41-
onIndexChanged,
43+
onIndexChanged: onIndexChangedProp,
44+
onSwipedNext,
45+
onSwipedPrevious,
4246
style,
43-
}: SwiperProps<any>) => (
44-
<View style={style}>
45-
{/* @ts-ignore */}
46-
<SwiperComponent
47-
from={from}
48-
loop={loop}
49-
timeout={timeout}
50-
vertical={vertical}
51-
onIndexChanged={onIndexChanged}
52-
controlsProps={{
53-
prevTitle,
54-
nextTitle,
55-
prevTitleStyle: { color: prevTitleColor },
56-
nextTitleStyle: { color: nextTitleColor },
57-
dotsTouchable,
58-
...(dotColor
59-
? { dotProps: { badgeStyle: { backgroundColor: dotColor } } }
60-
: {}),
61-
...(dotActiveColor
62-
? { dotActiveStyle: { backgroundColor: dotActiveColor } }
63-
: {}),
64-
}}
65-
>
66-
{data && renderItem
67-
? data.map((item, index) => {
68-
const component = renderItem({ item, index });
47+
}: SwiperProps<any>) => {
48+
const [currentIndex, setCurrentIndex] = React.useState(0);
49+
const numberOfItems = data?.length ?? React.Children.count(children);
6950

70-
if (!component) {
71-
return null;
72-
}
51+
const onIndexChanged = (index: number) => {
52+
const previous = currentIndex;
53+
const current = index;
7354

74-
const key = keyExtractor ? keyExtractor(item, index) : index;
75-
return React.cloneElement(component, {
76-
key,
77-
});
78-
})
79-
: children}
80-
</SwiperComponent>
81-
</View>
82-
);
55+
onIndexChangedProp?.(index);
56+
setCurrentIndex(index);
57+
58+
if (previous === numberOfItems - 1 && current === 0) {
59+
//Last -> first swipe
60+
onSwipedNext?.(previous);
61+
} else if (previous === 0 && current === numberOfItems - 1) {
62+
//First -> last swipe
63+
onSwipedPrevious?.(previous);
64+
} else if (current > previous) {
65+
onSwipedNext?.(previous);
66+
} else if (current < previous) {
67+
onSwipedPrevious?.(previous);
68+
}
69+
};
70+
71+
return (
72+
<View style={style}>
73+
{/* @ts-ignore */}
74+
<SwiperComponent
75+
from={from}
76+
loop={loop}
77+
timeout={timeout}
78+
vertical={vertical}
79+
onIndexChanged={onIndexChanged}
80+
controlsProps={{
81+
prevTitle,
82+
nextTitle,
83+
prevTitleStyle: { color: prevTitleColor },
84+
nextTitleStyle: { color: nextTitleColor },
85+
dotsTouchable,
86+
...(dotColor
87+
? { dotProps: { badgeStyle: { backgroundColor: dotColor } } }
88+
: {}),
89+
...(dotActiveColor
90+
? { dotActiveStyle: { backgroundColor: dotActiveColor } }
91+
: {}),
92+
}}
93+
>
94+
{data && renderItem
95+
? data.map((item, index) => {
96+
const component = renderItem({ item, index });
97+
98+
if (!component) {
99+
return null;
100+
}
101+
102+
const key = keyExtractor ? keyExtractor(item, index) : index;
103+
return React.cloneElement(component, {
104+
key,
105+
});
106+
})
107+
: children}
108+
</SwiperComponent>
109+
</View>
110+
);
111+
};
83112

84113
export default Swiper;

‎packages/maps/package.json‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
{
22
"name": "@draftbit/maps",
3-
"version": "46.12.3",
3+
"version": "46.12.4",
44
"description": "Map Components",
55
"main": "lib/commonjs/index.js",
66
"module": "lib/module/index.js",
@@ -39,8 +39,8 @@
3939
},
4040
"homepage": "https://github.com/draftbit/react-native-jigsaw#readme",
4141
"dependencies": {
42-
"@draftbit/types": "46.12.3",
43-
"@draftbit/web-maps": "46.12.3",
42+
"@draftbit/types": "46.12.4",
43+
"@draftbit/web-maps": "46.12.4",
4444
"react-native-maps": "0.31.1"
4545
},
4646
"react-native-builder-bob": {

‎packages/native/package.json‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
{
22
"name": "@draftbit/native",
3-
"version": "46.12.3",
3+
"version": "46.12.4",
44
"description": "Draftbit UI Components that Depend on Native Components",
55
"main": "lib/commonjs/index.js",
66
"module": "lib/module/index.js",
@@ -39,7 +39,7 @@
3939
},
4040
"homepage": "https://github.com/draftbit/react-native-jigsaw#readme",
4141
"dependencies": {
42-
"@draftbit/types": "46.12.3",
42+
"@draftbit/types": "46.12.4",
4343
"@expo/vector-icons": "^13.0.0",
4444
"@react-native-community/datetimepicker": "6.2.0",
4545
"@react-native-community/slider": "4.2.3",

‎packages/types/package.json‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
{
22
"name": "@draftbit/types",
3-
"version": "46.12.3",
3+
"version": "46.12.4",
44
"description": "Shared constants and types between native and core components",
55
"main": "lib/commonjs/index.js",
66
"module": "lib/module/index.js",

0 commit comments

Comments
 (0)