@tactics/toddle-styleguide 1.7.14 → 1.7.16

package/package.json

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

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

@@ -1,6 +1,7 @@
 import React from "react";
 interface CountProps {
     count: number;
+    disabled?: boolean;
 }
-export declare const Count: ({ count, }: CountProps) => React.JSX.Element;
+export declare const Count: ({ count, disabled }: CountProps) => React.JSX.Element;
 export {};

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

@@ -7,13 +7,15 @@ import { Paragraph } from "../paragraph-components";
 
 interface CountProps {
   count: number;
+  disabled?: boolean
 }
 
 export const Count = ({
   count,
+  disabled
 }: CountProps) => {
   const context = useContext(ThemeCtx);
-  const styles = Stylesheet(context);
+  const styles = Stylesheet(context, disabled);
   return <View style={styles.container}>
     <Paragraph addStyle={styles.text}>{count}</Paragraph>
   </View>;

package/src/components/atoms/count/count.styles.d.ts

@@ -1,4 +1,4 @@
-export function Stylesheet(context: any): {
+export function Stylesheet(context: any, disabled: any): {
     container: {
         borderWidth: number;
         borderColor: any;
@@ -16,5 +16,6 @@ export function Stylesheet(context: any): {
     text: {
         width: "auto";
         fontSize: number;
+        color: any;
     };
 };

package/src/components/atoms/count/count.styles.js

@@ -1,24 +1,25 @@
 import {StyleSheet} from 'react-native';
 import { Scale } from '../../../theme/scale';
 
-export const Stylesheet = (context) =>
+export const Stylesheet = (context, disabled) =>
   StyleSheet.create({
     container: {
         borderWidth: 1,
-        borderColor: context.colors.main['1'],
+        borderColor: disabled === true ? context.colors.ui.xlightgrey : context.colors.main['1'],
         borderRadius: 20,
         paddingVertical: Scale.xs,
         paddingHorizontal: Scale.m,
         minWidth: Scale.xxxl,
-        color: context.colors.main['2'],
+        color: disabled === true ? context.colors.ui.grey : context.colors.main['2'],
         display: 'flex',
         alignItems: 'center',
         justifyContent: 'center',
         flex: 0,
-        backgroundColor: context.colors.ui.white
+        backgroundColor: disabled === true ? context.colors.ui.xlightgrey : context.colors.ui.white
     },
     text: {
         width: 'auto',
-        fontSize: Scale.m
+        fontSize: Scale.m,
+        color: disabled === true ? context.colors.ui.grey : context.colors.main['2'],
     }
   });

package/src/components/molecules/amount/amount.component.d.ts

@@ -6,6 +6,7 @@ interface AmountProps {
     label: string;
     description?: string;
     onSave: (num: number) => void;
+    readonly: boolean;
 }
-export declare const Amount: ({ initialAmount, image, label, description, onSave }: AmountProps) => React.JSX.Element;
+export declare const Amount: ({ initialAmount, image, label, description, onSave, readonly }: AmountProps) => React.JSX.Element;
 export {};

package/src/components/molecules/amount/amount.component.tsx

@@ -14,7 +14,8 @@ interface AmountProps {
     image?: ImageSourcePropType;
     label: string;
     description?: string;
-    onSave: (num: number) => void
+    onSave: (num: number) => void;
+    readonly: boolean
 }
 
 export const Amount = ({
@@ -22,7 +23,8 @@ export const Amount = ({
     image,
     label,
     description,
-    onSave
+    onSave,
+    readonly
 }: AmountProps) => {
     const [editMode, setEditMode] = useState(false);
     const [countdown, setCountdown] = useState(0);
@@ -80,6 +82,32 @@ export const Amount = ({
         </>
     }
 
+    const renderInput = () => {
+        return <View style={styles.incrementContainer}>
+            {editMode ? (
+                <>
+                    <View>
+                        <IncrementInput value={amount} onPress={updateAmount} />
+                    </View>
+                    <PressableIcon
+                        onPress={saveChargedProduct}
+                        icon={
+                            <Icon key={label} name="check-circle" style="regular" />
+                        }
+                    />
+                </>
+            ) : (
+                <Pressable onPress={startEditMode}>
+                    <Count count={amount} />
+                </Pressable>
+            )}
+        </View>
+    }
+
+    const renderCount = () => {
+        return <Count disabled={true} count={amount} />
+    }
+
     return (
         <View style={styles.rootContainer}>
             <View style={styles.imageContainer}>
@@ -88,25 +116,7 @@ export const Amount = ({
             <View style={styles.container}>
                 <Paragraph bold={true} numberOfLines={1} ellipsizeMode="tail">{label}</Paragraph>
                 {description ? <Paragraph textColor={context.colors.ui.darkgrey} numberOfLines={1} ellipsizeMode="tail">{description}</Paragraph> : <></>}
-                <View style={styles.incrementContainer}>
-                    {editMode ? (
-                        <>
-                            <View>
-                                <IncrementInput value={amount} onPress={updateAmount} />
-                            </View>
-                            <PressableIcon
-                                onPress={saveChargedProduct}
-                                icon={
-                                    <Icon key={label} name="check-circle" style="regular" />
-                                }
-                            />
-                        </>
-                    ) : (
-                        <Pressable onPress={startEditMode}>
-                            <Count count={amount} />
-                        </Pressable>
-                    )}
-                </View>
+                {readonly ? renderCount() : renderInput()}
             </View>
         </View>
     );

package/src/components/molecules/amount/amount.preview.tsx

@@ -12,10 +12,14 @@ export const AmountPreview = ({}: {}) => {
           backgroundColor: 'white',
         }}
       >
-        <Amount initialAmount={9} label='Maaltijd' onSave={(num) => console.log(num)} />
-        <Amount initialAmount={2} image={require('./../../../../assets/components/avatar/baby.png')} label='Maaltijd' onSave={(num) => console.log(num)} />
-        <Amount initialAmount={5} label='Maaltijd veggy' description='Hmm, lekker hoor' onSave={(num) => console.log(num)} />
-        <Amount initialAmount={1} image={require('./../../../../assets/components/avatar/baby.png')} label='Maaltijd met een lekkere lange titel' description='Hmm, lekker hoor. Met een sappige beschrijving' onSave={(num) => console.log(num)} />
+        <Amount readonly={false} initialAmount={9} label='Maaltijd' onSave={(num) => console.log(num)} />
+        <Amount readonly={false} initialAmount={2} image={require('./../../../../assets/components/avatar/baby.png')} label='Maaltijd' onSave={(num) => console.log(num)} />
+        <Amount readonly={false} initialAmount={5} label='Maaltijd veggy' description='Hmm, lekker hoor' onSave={(num) => console.log(num)} />
+        <Amount readonly={false} initialAmount={1} image={require('./../../../../assets/components/avatar/baby.png')} label='Maaltijd met een lekkere lange titel' description='Hmm, lekker hoor. Met een sappige beschrijving' onSave={(num) => console.log(num)} />
+        <Amount readonly={true} initialAmount={9} label='Maaltijd' onSave={(num) => console.log(num)} />
+        <Amount readonly={true} initialAmount={2} image={require('./../../../../assets/components/avatar/baby.png')} label='Maaltijd' onSave={(num) => console.log(num)} />
+        <Amount readonly={true} initialAmount={5} label='Maaltijd veggy' description='Hmm, lekker hoor' onSave={(num) => console.log(num)} />
+        <Amount readonly={true} initialAmount={1} image={require('./../../../../assets/components/avatar/baby.png')} label='Maaltijd met een lekkere lange titel' description='Hmm, lekker hoor. Met een sappige beschrijving' onSave={(num) => console.log(num)} />
       </View>
     </ScrollView>
   );

package/src/components/molecules/calendar-select/calendar-select.component.tsx

@@ -9,79 +9,88 @@ import {Icon} from '../../../icons/index';
 import { useDebounce } from '../../../hooks/use-debounce';
 
 type CalendarSelectProps = {
-  onPressDate: (date: ToddleDateTime) => void;
-  startDate: ToddleDateTime;
-  onUpdateDate: (date: ToddleDateTime) => void;
+    onPressDate: (date: ToddleDateTime) => void;
+    startDate: ToddleDateTime;
+    onUpdateDate: (date: ToddleDateTime) => void;
+    labelForToday: string | undefined
 };
 
 const CalendarSelect = ({
-  onPressDate,
-  startDate,
-  onUpdateDate,
-}: CalendarSelectProps) => {
-  const context = useContext(ThemeCtx);
-  const styles = Stylesheet(context);
+                            onPressDate,
+                            startDate,
+                            onUpdateDate,
+                            labelForToday
+                        }: CalendarSelectProps) => {
+    const context = useContext(ThemeCtx);
+    const styles = Stylesheet(context);
 
-  const [visibleDate, setVisibleDate] = useState(startDate);
-  const debouncedVisibleDate = useDebounce<ToddleDateTime>(visibleDate, 500);
+    const today = ToddleDateTime.now();
+    const isToday = today.toISO() === startDate.toISO();
 
-  useEffect(() => {
-    setVisibleDate(startDate);
-  }, [startDate]);
+    const [visibleDate, setVisibleDate] = useState(startDate);
+    const debouncedVisibleDate = useDebounce<ToddleDateTime>(visibleDate, 500);
 
-  useEffect(() => {
-    // If they are the same dont trigger event again.
-    if (visibleDate !== startDate) {
-      onUpdateDate(debouncedVisibleDate);
-    }
-  }, [debouncedVisibleDate])
+    useEffect(() => {
+        setVisibleDate(startDate);
+    }, [startDate]);
 
-  return (
-    <View style={styles.container}>
-      <Pressable
-        onPress={() => {
-          setVisibleDate(visibleDate.minus({days: 1}));
-        }}
-        style={styles.arrowContainer}
-      >
-        <Icon
-          style={'regular'}
-          name={'chevron-left'}
-          color={context.colors.main['9']}
-        />
-      </Pressable>
+    useEffect(() => {
+        // If they are the same dont trigger event again.
+        if (visibleDate !== startDate) {
+            onUpdateDate(debouncedVisibleDate);
+        }
+    }, [debouncedVisibleDate])
 
-      <Pressable
-        onPress={() => onPressDate(visibleDate)}
-        style={styles.dateContainer}
-      >
-        <View style={styles.icon}>
-          <Icon
-            style={'regular'}
-            name={'calendar'}
-            color={context.colors.main['9']}
-          />
-        </View>
-        <View>
-          <Paragraph textColor={context.colors.main['9']}>
-            {visibleDate.toLocaleString({weekday: 'short', day: 'numeric', month: 'short', year: 'numeric'})}
-          </Paragraph>
-        </View>
-      </Pressable>
+    return (
+        <View style={styles.container}>
+            <Pressable
+                onPress={() => {
+                    setVisibleDate(visibleDate.minus({days: 1}));
+                }}
+                style={styles.arrowContainer}
+            >
+                <Icon
+                    style={'regular'}
+                    name={'chevron-left'}
+                    color={context.colors.main['9']}
+                />
+            </Pressable>
 
-      <Pressable
-        onPress={() => {
-          setVisibleDate(visibleDate.plus({days: 1}));
-        }}
-        style={styles.arrowContainer}
-      >
-        <Icon
-          style={'regular'}
-          name={'chevron-right'}
-          color={context.colors.main['9']}
-        />
-      </Pressable>
-    </View>
-  );
+            <Pressable
+                onPress={() => onPressDate(visibleDate)}
+                style={styles.dateContainer}
+            >
+                <View style={styles.icon}>
+                    <Icon
+                        style={'regular'}
+                        name={'calendar'}
+                        color={context.colors.main['9']}
+                    />
+                </View>
+                <View>
+                    <Paragraph textColor={context.colors.main['9']}>
+                        {
+                            isToday && labelForToday ?
+                                labelForToday :
+                                visibleDate.toLocaleString({weekday: 'short', day: 'numeric', month: 'short', year: 'numeric'})
+                        }
+                    </Paragraph>
+                </View>
+            </Pressable>
+
+            <Pressable
+                onPress={() => {
+                    setVisibleDate(visibleDate.plus({days: 1}));
+                }}
+                style={styles.arrowContainer}
+            >
+                <Icon
+                    style={'regular'}
+                    name={'chevron-right'}
+                    color={context.colors.main['9']}
+                />
+            </Pressable>
+        </View>
+    );
 };
 export {CalendarSelect as CalendarSelect};