Added onSwipe callback + Fixed DatePicker inset icon (46.12.5) (#653)

* Added onSwipe to DeckSwiper and Swiper

* Fixed datepicker inset icon not properly positioned

* v46.12.5

Author: YoussefHenna

example/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@draftbit/example",
   "description": "Example app for @draftbit/ui",
-  "version": "46.12.4",
+  "version": "46.12.5",
   "private": true,
   "main": "__generated__/AppEntry.js",
   "scripts": {
@@ -15,8 +15,8 @@
     "clean:modules": "rimraf node_modules"
   },
   "dependencies": {
-    "@draftbit/maps": "46.12.4",
-    "@draftbit/ui": "46.12.4",
+    "@draftbit/maps": "46.12.5",
+    "@draftbit/ui": "46.12.5",
     "@expo/dev-server": "0.1.120",
     "@expo/webpack-config": "^0.17.0",
     "@react-navigation/drawer": "^5.7.7",

example/src/DeckSwiperExample.tsx

@@ -50,6 +50,7 @@ const DeckSwiperExample: React.FC = () => {
           infiniteSwiping
           visibleCardCount={2}
           data={sampleData}
+          onSwipe={(index) => console.log("Swiped", index)}
           onSwipedDown={(index) => console.log("Swiped down", index)}
           onSwipedUp={(index) => console.log("Swiped up", index)}
           onSwipedLeft={(index) => console.log("Swiped left", index)}

example/src/SwiperExample.js

@@ -36,6 +36,7 @@ function SwiperExample({ theme }) {
           style={{ width: "100%", height: 300 }}
           dotColor="green"
           dotActiveColor="red"
+          onSwipe={(index) => console.log("Swiped", index)}
           onSwipedNext={(index) => console.log("Swiped next", index)}
           onSwipedPrevious={(index) => console.log("Swiped previous", index)}
           onIndexChanged={(index) => console.log("onIndexChanged: ", index)}

lerna.json

@@ -1,5 +1,5 @@
 {
-  "version": "46.12.4",
+  "version": "46.12.5",
   "npmClient": "yarn",
   "useWorkspaces": true,
   "packages": ["packages/*", "example"],

packages/core/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@draftbit/core",
-  "version": "46.12.4",
+  "version": "46.12.5",
   "description": "Core (non-native) Components",
   "main": "lib/commonjs/index.js",
   "module": "lib/module/index.js",
@@ -41,7 +41,7 @@
   "dependencies": {
     "@date-io/date-fns": "^1.3.13",
     "@draftbit/react-theme-provider": "^2.1.1",
-    "@draftbit/types": "46.12.4",
+    "@draftbit/types": "46.12.5",
     "@material-ui/core": "^4.11.0",
     "@material-ui/pickers": "^3.2.10",
     "@react-native-community/slider": "4.2.3",

packages/core/src/components/DatePicker/DatePicker.tsx

@@ -315,6 +315,7 @@ const DatePicker: React.FC<React.PropsWithChildren<Props>> = ({
 
   const leftIconStyle: ImageStyle = {
     position: "absolute",
+    top: 0,
     marginTop:
       type === "solid"
         ? leftIconMode === "inset"

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

@@ -3,6 +3,7 @@ import { StyleProp, ViewStyle, StyleSheet, View } from "react-native";
 import DeckSwiperComponent from "react-native-deck-swiper";
 
 export interface DeckSwiperProps<T> {
+  onSwipe?: (index: number) => void;
   onSwipedLeft?: (index: number) => void;
   onSwipedRight?: (index: number) => void;
   onSwipedUp?: (index: number) => void;
@@ -21,6 +22,7 @@ export interface DeckSwiperProps<T> {
 }
 
 const DeckSwiper = <T extends object>({
+  onSwipe,
   onSwipedLeft,
   onSwipedRight,
   onSwipedUp,
@@ -121,10 +123,22 @@ const DeckSwiper = <T extends object>({
         backgroundColor="transparent"
         cardVerticalMargin={0}
         cardHorizontalMargin={0}
-        onSwipedLeft={onSwipedLeft}
-        onSwipedRight={onSwipedRight}
-        onSwipedTop={onSwipedUp}
-        onSwipedBottom={onSwipedDown}
+        onSwipedLeft={(index) => {
+          onSwipedLeft?.(index);
+          onSwipe?.(index);
+        }}
+        onSwipedRight={(index) => {
+          onSwipedRight?.(index);
+          onSwipe?.(index);
+        }}
+        onSwipedTop={(index) => {
+          onSwipedUp?.(index);
+          onSwipe?.(index);
+        }}
+        onSwipedBottom={(index) => {
+          onSwipedDown?.(index);
+          onSwipe?.(index);
+        }}
       />
     </View>
   );

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

@@ -3,6 +3,7 @@ import { View, StyleProp, ViewStyle } from "react-native";
 import SwiperComponent from "react-native-web-swiper";
 
 export interface SwiperProps<T> {
+  onSwipe?: (index: number) => void;
   onSwipedNext?: (index: number) => void;
   onSwipedPrevious?: (index: number) => void;
   vertical?: boolean;
@@ -41,6 +42,7 @@ const Swiper = ({
   renderItem,
   children,
   onIndexChanged: onIndexChangedProp,
+  onSwipe,
   onSwipedNext,
   onSwipedPrevious,
   style,
@@ -66,6 +68,7 @@ const Swiper = ({
     } else if (current < previous) {
       onSwipedPrevious?.(previous);
     }
+    onSwipe?.(previous);
   };
 
   return (

packages/maps/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@draftbit/maps",
-  "version": "46.12.4",
+  "version": "46.12.5",
   "description": "Map Components",
   "main": "lib/commonjs/index.js",
   "module": "lib/module/index.js",
@@ -39,8 +39,8 @@
   },
   "homepage": "https://github.com/draftbit/react-native-jigsaw#readme",
   "dependencies": {
-    "@draftbit/types": "46.12.4",
-    "@draftbit/web-maps": "46.12.4",
+    "@draftbit/types": "46.12.5",
+    "@draftbit/web-maps": "46.12.5",
     "react-native-maps": "0.31.1"
   },
   "react-native-builder-bob": {

packages/native/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@draftbit/native",
-  "version": "46.12.4",
+  "version": "46.12.5",
   "description": "Draftbit UI Components that Depend on Native Components",
   "main": "lib/commonjs/index.js",
   "module": "lib/module/index.js",
@@ -39,7 +39,7 @@
   },
   "homepage": "https://github.com/draftbit/react-native-jigsaw#readme",
   "dependencies": {
-    "@draftbit/types": "46.12.4",
+    "@draftbit/types": "46.12.5",
     "@expo/vector-icons": "^13.0.0",
     "@react-native-community/datetimepicker": "6.2.0",
     "@react-native-community/slider": "4.2.3",