@tactics/toddle-styleguide 1.7.17 → 1.7.18

package/package.json

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

package/src/components/molecules/select-list-item/select-list-item-preview.tsx

@@ -27,6 +27,14 @@ export const SelectListItemPreview = ({}: {}) => {
         inverse={true}
         onPress={() => console.log('clicked')}
       />
+      <SelectListItem
+        title="Vlindertjes"
+        subtitle={'Leeftijd 2 tot 4 jaar'}
+        icon={<Icon style={'regular'} name={'office-building'} size={27} />}
+        inverse={true}
+        onPress={() => console.log('clicked')}
+        image={require('./../../../../assets/components/avatar/baby.png')}
+      />
     </View>
   );
 };

package/src/components/molecules/select-list-item/select-list-item.component.d.ts

@@ -1,10 +1,12 @@
 import * as React from 'react';
+import { ImageSourcePropType } from 'react-native';
 type SelectListProps = {
     title: string;
     subtitle?: string;
     icon: React.ReactElement;
     onPress?: () => void;
     inverse?: boolean;
+    image?: ImageSourcePropType;
 };
-declare const SelectListItem: ({ title, subtitle, icon, onPress, inverse, }: SelectListProps) => React.JSX.Element;
+declare const SelectListItem: ({ title, subtitle, icon, onPress, inverse, image }: SelectListProps) => React.JSX.Element;
 export { SelectListItem as SelectListItem };

package/src/components/molecules/select-list-item/select-list-item.component.tsx

@@ -2,7 +2,7 @@ import * as React from 'react';
 import {useContext} from 'react';
 
 import {ThemeCtx} from '../../../context/theme.context';
-import {Pressable, View} from 'react-native';
+import {ImageSourcePropType, ImageStyle, Image, Pressable, View} from 'react-native';
 import {Stylesheet} from './select-list-item.styles';
 import {Icon} from '../../../icons/index';
 import {Heading2} from '../../atoms/heading-components';
@@ -14,6 +14,7 @@ type SelectListProps = {
   icon: React.ReactElement;
   onPress?: () => void;
   inverse?: boolean;
+  image?: ImageSourcePropType
 };
 
 const SelectListItem = ({
@@ -22,6 +23,7 @@ const SelectListItem = ({
   icon,
   onPress,
   inverse,
+  image
 }: SelectListProps) => {
   const context = useContext(ThemeCtx);
   const styles = Stylesheet(context, inverse);
@@ -32,10 +34,18 @@ const SelectListItem = ({
     })
   );
 
+  const renderIconOrImage = () => {
+    if (image) {
+      return <Image source={image} style={styles.image as ImageStyle} />
+    } else {
+      return <View>{inverse ? invertedIcon : icon}</View>
+    }
+  }
+
   return (
     <Pressable onPress={onPress} style={styles.container}>
       <View style={styles.iconCircle}>
-        <View>{inverse ? invertedIcon : icon}</View>
+        {renderIconOrImage()}
       </View>
       <View style={styles.textContainer}>
         <View>

package/src/components/molecules/select-list-item/select-list-item.styles.d.ts

@@ -1,4 +1,4 @@
-export function Stylesheet(context: any, inverse: any): {
+export function Stylesheet(context: any, inverse: any): StyleSheet.NamedStyles<any> | StyleSheet.NamedStyles<{
     container: {
         width: "100%";
         flexDirection: "row";
@@ -13,6 +13,12 @@ export function Stylesheet(context: any, inverse: any): {
         borderRadius: number;
         marginRight: number;
     };
+    image: {
+        position: string;
+        width: string;
+        height: string;
+        borderRadius: number;
+    }[];
     textContainer: {
         flex: number;
         flexDirection: "column";
@@ -26,4 +32,5 @@ export function Stylesheet(context: any, inverse: any): {
         marginLeft: number;
         marginRight: number;
     };
-};
+}>;
+import { StyleSheet } from 'react-native';

package/src/components/molecules/select-list-item/select-list-item.styles.js

@@ -19,6 +19,14 @@ export const Stylesheet = (context, inverse) =>
       borderRadius: 62 / 2,
       marginRight: Scale.m,
     },
+    image: [
+      {
+        position: 'absolute',
+        width: '90%',
+        height: '90%',
+        borderRadius: 50,
+      },
+    ],
     textContainer: {
       flex: 1,
       flexDirection: 'column',