EXT-7 introduced onIndexChanged event (#534)

* introduced onIndexChanged event

* swiper lint fix

* Update Trigger

Co-authored-by: Brian Luerssen <[email protected]>
Co-authored-by: Brian Luerssen <[email protected]>

Author: gunjankothari

example/src/SwiperExample.js

@@ -36,6 +36,7 @@ function SwiperExample({ theme }) {
           style={{ width: "100%", height: 300 }}
           dotColor="green"
           dotActiveColor="red"
+          onIndexChanged={index => console.log("onIndexChanged: ", index)}
         >
           <SwiperItem style={[style.item, { backgroundColor: "#fdd3d3" }]}>
             <Text>Test Slide 1</Text>

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

@@ -19,6 +19,7 @@ export interface SwiperProps<T> {
   keyExtractor: (item: T, index: number) => string;
   renderItem?: ({ item, index }: { item: T; index: number }) => JSX.Element;
   style?: StyleProp<ViewStyle>;
+  onIndexChanged?: (index: number) => void;
 }
 
 const Swiper = ({
@@ -37,6 +38,7 @@ const Swiper = ({
   keyExtractor,
   renderItem,
   children,
+  onIndexChanged,
   style,
 }: SwiperProps<any>) => (
   <View style={style}>
@@ -46,6 +48,7 @@ const Swiper = ({
       loop={loop}
       timeout={timeout}
       vertical={vertical}
+      onIndexChanged={onIndexChanged}
       controlsProps={{
         prevTitle,
         nextTitle,

packages/core/src/mappings/Swiper.ts

@@ -5,6 +5,8 @@ import {
   createTextProp,
   createColorProp,
   GROUPS,
+  Triggers,
+  createActionProp,
 } from "@draftbit/types";
 
 export const SEED_DATA = {
@@ -16,7 +18,9 @@ export const SEED_DATA = {
     height: 300,
     width: "100%",
   },
+  triggers: [Triggers.OnIndexChanged],
   props: {
+    onIndexChanged: createActionProp(),
     from: createNumberProp({
       group: GROUPS.basic,
       label: "Initial Slide",

packages/types/src/component-types.ts

@@ -14,6 +14,7 @@ export const Triggers = {
   OnCheck: "ON_CHECK",
   OnUncheck: "ON_UNCHECK",
   OnPressIcon: "ON_PRESS_ICON",
+  OnIndexChanged: "ON_INDEX_CHANGED",
   OnEndReached: "ON_END_REACHED",
 };