@tactics/toddle-styleguide 0.1.6 → 0.1.8

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tactics/toddle-styleguide",
-  "version": "0.1.6",
+  "version": "0.1.8",
   "main": "index.tsx",
   "types": "index.d.ts",
   "prepublish": "tsc",

package/src/components/atoms/swipe/Swipe.styles.d.ts

@@ -1,7 +1,7 @@
 export function Stylesheet(context: any): {
-  container: {
-    alignItems: 'center';
-    justifyContent: 'center';
-    height: number;
-  };
+    container: {
+        alignItems: "center";
+        justifyContent: "center";
+        height: number;
+    };
 };

package/src/components/atoms/swipe/swipe.component.d.ts

@@ -1,6 +1,7 @@
 import React from 'react';
 declare type SwipeProps = {
     children: React.ReactNode;
+    onIndexChanged?: (index: number) => void;
 };
-declare const Swipe: ({ children }: SwipeProps) => JSX.Element;
+declare const Swipe: ({ children, onIndexChanged }: SwipeProps) => JSX.Element;
 export { Swipe as Swipe };

package/src/components/atoms/swipe/swipe.component.tsx

@@ -2,28 +2,28 @@ import React, {Children, useContext} from 'react';
 import {ThemeCtx} from '../../../context/theme.context';
 import Swiper from 'react-native-swiper';
 import {View} from 'react-native';
-import {Button} from '../button/button.component';
 import {Stylesheet} from './Swipe.styles';
 import {ChevronLeftIcon} from '../../../icons/outline/chevron-left/chevron-left.icon';
 import {ChevronRightIcon} from '../../../icons/outline/chevron-right/chevron-right.icon';
-import {Pill} from '../pill/pill.component';
 
 type SwipeProps = {
   children: React.ReactNode;
+  onIndexChanged?: (index: number) => void;
 };
 
-const Swipe = ({children}: SwipeProps) => {
+const Swipe = ({children, onIndexChanged}: SwipeProps) => {
   const context = useContext(ThemeCtx);
   const styles = Stylesheet(context);
   const count = Children.count(children);
 
   if (count > 5) {
-    console.warn(' for more then 5 children, use another way to show');
+    console.warn(' for more then 5 child-components, use another way to show');
   }
 
   return (
     <View style={styles.container}>
       <Swiper
+        onIndexChanged={onIndexChanged}
         paginationStyle={{bottom: 0}}
         showsButtons={true}
         dotColor={context.colors.ui.lightgrey}

package/src/components/atoms/swipe/swipe.preview.tsx

@@ -8,7 +8,7 @@ import {VisualState} from '../../../types/visual-state.enum';
 export const SwipePreview = ({}: {}) => {
   return (
     <View>
-      <Swipe>
+      <Swipe onIndexChanged={(index) => console.log(index)}>
         <View
           style={{
             marginRight: 15,