@tactics/toddle-styleguide 4.1.0 → 4.2.0

package/package.json

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

package/src/components/molecules/swipeable/swipeable-action.component.tsx

@@ -31,6 +31,8 @@ export const SwipeableAction = ({
                 return context.colors.ui.warning.dark;
             case VisualState.INACTIVE:
                 return context.colors.ui.darkgrey;
+            case VisualState.DEFAULT:
+                return context.colors.main[5];
             default:
                 return context.colors.ui.darkgrey;
         }
@@ -43,7 +45,13 @@ export const SwipeableAction = ({
             style={[{backgroundColor: calculateBackgroundColor(visualState)},styles.container]}
         >
             {icon}
-            <Text style={styles.text}>{label}</Text>
+            <Text
+                numberOfLines={2}
+                ellipsizeMode="tail"
+                style={styles.text}
+            >
+                {label}
+            </Text>
         </RectButton>
     );
 };

package/src/components/molecules/swipeable/swipeable-action.styles.js

@@ -9,9 +9,12 @@ export const Stylesheet = () =>
             gap: Scale.xs,
             color: '#fff',
             paddingHorizontal: Scale.xl,
+            maxWidth: 130,
+            paddingTop: Scale.xs,
         },
         text: {
-            color: '#fff'
+            color: '#fff',
+            textAlign: 'center',
         }
     }
 );

package/src/components/molecules/swipeable/swipeable-container.component.d.ts

@@ -1,11 +1,14 @@
 import React from "react";
 import { VisualState } from "../../../types/visual-state.enum";
 type SwipeableContainerProps = {
+    actions: SwipeableContainerAction[];
+    children: React.ReactNode;
+};
+type SwipeableContainerAction = {
     visualState: VisualState;
     label: string;
     icon: React.ReactElement;
     onPress: () => void;
-    children: React.ReactNode;
 };
-export declare const SwipeableContainer: ({ label, icon, visualState, onPress, children }: SwipeableContainerProps) => React.JSX.Element;
+export declare const SwipeableContainer: ({ actions, children }: SwipeableContainerProps) => React.JSX.Element;
 export {};

package/src/components/molecules/swipeable/swipeable-container.component.tsx

@@ -6,25 +6,29 @@ import {Stylesheet} from './swipeable-container.styles';
 import {ThemeCtx} from '../../../context/theme.context';
 
 type SwipeableContainerProps = {
+    actions: SwipeableContainerAction[];
+    children: React.ReactNode;
+};
+
+type SwipeableContainerAction = {
     visualState: VisualState;
     label: string;
     icon: React.ReactElement;
     onPress: () => void;
-    children: React.ReactNode;
-};
+}
 
 export const SwipeableContainer = ({
-    label,
-    icon,
-    visualState,
-    onPress,
+    actions,
     children
 }: SwipeableContainerProps) => {
     const styles = Stylesheet();
     const swipeableRef = React.useRef<Swipeable>(null);
     const context = useContext(ThemeCtx);
 
-    const calculateBackgroundColor = (visualState: VisualState) => {
+    const calculateBackgroundColor = () => {
+        const lastAction = actions[actions.length - 1];
+        const visualState = lastAction?.visualState;
+
         switch (visualState) {
             case VisualState.ERROR:
                 return context.colors.ui.error.default;
@@ -34,27 +38,31 @@ export const SwipeableContainer = ({
                 return context.colors.ui.warning.dark;
             case VisualState.INACTIVE:
                 return context.colors.ui.darkgrey;
+            case VisualState.DEFAULT:
+                return context.colors.main[5];
             default:
                 return context.colors.ui.darkgrey;
         }
     };
 
     const renderLeftActions = () => {
-        return (
-            <SwipeableAction
-                label={label}
-                visualState={visualState}
-                icon={icon}
+        return actions.map(i => {
+            return <SwipeableAction
+                key={i.label}
+                label={i.label}
+                visualState={i.visualState}
+                icon={i.icon}
                 onPress={() => {
-                    onPress();
+                    i.onPress();
                     swipeableRef.current?.close();
                 }}
-            />
+                />
+            }
         );
     };
 
     return (
-        <Swipeable renderLeftActions={renderLeftActions} ref={swipeableRef} containerStyle={[{backgroundColor: calculateBackgroundColor(visualState)},styles.container]}>
+        <Swipeable renderLeftActions={renderLeftActions} ref={swipeableRef} containerStyle={[{backgroundColor: calculateBackgroundColor()},styles.container]}>
             {children}
         </Swipeable>
     );

package/src/components/organisms/child-list-item/child-list-item.preview.tsx

@@ -62,14 +62,28 @@ export const ChildListItemPreview = ({}: {}) => {
   const [isLoading, setIsLoading] = useState(false);
 
   const renderChildList = ({item}: any) => {
+    const swipeableActions = [
+      {
+        visualState: VisualState.ERROR,
+        label: 'Afwezig',
+        icon: <Icon name='clock' style='regular' size={20} color={context.colors.ui.white} />,
+        onPress: () => {
+          console.log('Afwezig');
+        },
+      },
+      {
+        visualState: VisualState.DEFAULT,
+        label: 'Planning Wissen',
+        icon: <Icon name='clock' style='regular' size={20} color={context.colors.ui.white} />,
+        onPress: () => {
+          console.log('Planning Wissen');
+        },
+      }
+    ];
+
     return (
       <SwipeableContainer
-        icon={<Icon name='clock' style='regular' size={20} color={context.colors.ui.white} />}
-        label='Afwezig'
-        visualState={VisualState.ERROR}
-        onPress={() => {
-          console.log('Afwezig');
-        }}
+        actions={swipeableActions}
       >
         <ChildListItem
           id={item.id}