@tactics/toddle-styleguide 1.2.8 → 1.3.0

package/src/components/organisms/journal-entry/journal-entry.component.tsx

@@ -0,0 +1,139 @@
+import React, {useContext, useRef} from 'react';
+import {
+  Animated,
+  Platform,
+  UIManager,
+  useWindowDimensions,
+  View,
+} from 'react-native';
+import {ThemeCtx} from '../../../context/theme.context';
+import {Stylesheet} from './journal-entry.styles';
+import {JournalEntryType} from './components';
+import {ToddleDateTime} from '../../../utilities/toddle-datetime/toddle-datetime.class';
+import {TextBubble} from '../text-bubble/text-bubble.component';
+import {VisualState} from '../../../types/visual-state.enum';
+import {BubbleAlignment} from '../../../types/bubble-alignment.enum';
+import {Line} from '../../atoms/line/line.component';
+import {LoadingIndicator} from '../loading-indicator/loading-indicator.component';
+
+interface JournalEntryProps {
+  id: string;
+  prio: boolean;
+  happenedAt: ToddleDateTime;
+  type: string;
+  text: string;
+  visualState: VisualState;
+  bubbleAlignment: BubbleAlignment;
+  createdAt?: ToddleDateTime;
+  timestampLabel?: string;
+  sendOrReceived: boolean;
+  onFail?: (id: string) => void;
+  onEdit?: (id: string) => void;
+  onDelete?: (id: string) => void;
+  afterAnimationComplete?: () => void;
+  loadingNewEntry?: boolean;
+}
+
+export const JournalEntry = ({
+  id,
+  prio,
+  happenedAt,
+  type,
+  text,
+  visualState,
+  bubbleAlignment,
+  createdAt,
+  timestampLabel,
+  sendOrReceived,
+  onFail,
+  onEdit,
+  onDelete,
+  afterAnimationComplete,
+  loadingNewEntry,
+}: JournalEntryProps) => {
+  const context = useContext(ThemeCtx);
+  const styles = Stylesheet(context, bubbleAlignment, createdAt);
+
+  const {width} = useWindowDimensions();
+  const animatedValue = useRef(
+    new Animated.Value(loadingNewEntry ? 0 : 0.5)
+  ).current;
+
+  if (Platform.OS === 'android') {
+    UIManager.setLayoutAnimationEnabledExperimental(true);
+  }
+
+  if (loadingNewEntry) {
+    Animated.timing(animatedValue, {
+      toValue: 0.5,
+      duration: 400,
+      useNativeDriver: true,
+    }).start(() => {
+      if (afterAnimationComplete) {
+        afterAnimationComplete();
+      }
+    });
+  }
+
+  const deleteJournalEntryHandler = (id: string) => {
+    Animated.timing(animatedValue, {
+      toValue: -1,
+      duration: 400,
+      useNativeDriver: true,
+    }).start(() => {
+      if (onDelete) onDelete(id);
+    });
+  };
+
+  const translateX = animatedValue.interpolate({
+    inputRange: [0, 0.5, 1],
+    outputRange: [-width, 0, width],
+  });
+  const opacity = animatedValue.interpolate({
+    inputRange: [0, 0.5, 1],
+    outputRange: [0, 1, 0],
+  });
+  return (
+    <Animated.View
+      style={[
+        styles.rootContainer,
+        {
+          transform: [{translateX: translateX}],
+          opacity: opacity,
+        },
+      ]}
+    >
+      <View style={styles.entryTypeContainer}>
+        <JournalEntryType
+          prio={prio}
+          type={type}
+          happenedAt={happenedAt}
+          loading={loadingNewEntry}
+          send={sendOrReceived}
+        />
+      </View>
+      {loadingNewEntry ? (
+        <View style={{height: 80, justifyContent: 'center'}}>
+          <LoadingIndicator color={context.colors.main[5]} />
+        </View>
+      ) : (
+        <TextBubble
+          id={id}
+          text={text}
+          visualState={visualState}
+          bubbleAlignment={bubbleAlignment}
+          timestamp={createdAt}
+          timestampLabel={timestampLabel}
+          sendOrReceived={sendOrReceived}
+          onDelete={deleteJournalEntryHandler}
+          onEdit={onEdit}
+          onFail={onFail}
+        />
+      )}
+
+      <View style={styles.horizontalLineContainer}>
+        <Line />
+      </View>
+    </Animated.View>
+  );
+};

package/src/components/organisms/journal-entry/journal-entry.preview.d.ts

@@ -0,0 +1 @@
+export declare const JournalEntryPreview: () => JSX.Element;

package/src/components/organisms/journal-entry/journal-entry.preview.tsx

@@ -0,0 +1,212 @@
+import {FlatList, LayoutAnimation, ListRenderItem, View} from 'react-native';
+
+import {JournalEntry} from './journal-entry.component';
+import {ToddleDateTime} from '../../../utilities/toddle-datetime/toddle-datetime.class';
+import {VisualState} from '../../../types/visual-state.enum';
+import {BubbleAlignment} from '../../../types/bubble-alignment.enum';
+import {useRef, useState} from 'react';
+import {PressableIcon} from '../../molecules/pressable-icon/pressable-icon.component';
+import {Icon} from '../../../icons/index';
+
+const DATA = [
+  {
+    picture: '',
+    prio: true,
+    uuid: '35dc156d-6e59-4628-abf8-cddd9b836875',
+    happened_at: 1691394300,
+    type: 'GENERAL',
+    message: 'We kijken uit naar een leuke dag met Mattis',
+    subscription_day: 'c45cbc3d-7698-4f2d-b892-b634bf016497',
+    sender: 'STAFF_MEMBER',
+    send: true,
+  },
+  {
+    picture: '',
+    prio: false,
+    uuid: 'f776461d-1b74-48be-9b52-5a225b411323',
+    happened_at: 1691395200,
+    type: 'GENERAL',
+    message:
+      'Mattis kijkt er ook naar uit! Hij staat al heel het weekend te springen om terug naar de creche te gaan.',
+    subscription_day: 'c45cbc3d-7698-4f2d-b892-b634bf016497',
+    sender: 'PARENT',
+    send: false,
+  },
+  {
+    picture: '',
+    prio: false,
+    uuid: 'f451f76e-8573-4130-8c72-28d6a90f164d',
+    happened_at: 1691397000,
+    type: 'GENERAL',
+    message: 'Test bericht met het uur voor Mattis',
+    subscription_day: 'c45cbc3d-7698-4f2d-b892-b634bf016497',
+    sender: 'STAFF_MEMBER',
+    send: true,
+  },
+  {
+    picture: '',
+    prio: true,
+    uuid: 'ee25c811-ff66-439b-8f09-50224e1252e3',
+    happened_at: 1691402400,
+    type: 'ACTIVITY',
+    message: 'Vandaag gaan we knutselen met heel de groep!',
+    subscription_day: 'c45cbc3d-7698-4f2d-b892-b634bf016497',
+    sender: 'STAFF_MEMBER',
+    send: false,
+  },
+  {
+    picture: '',
+    prio: false,
+    uuid: '4b858f01-25ae-4a7d-9671-627379494fff',
+    happened_at: 1691402400,
+    type: 'ACTIVITY',
+    message: 'Klaar voor onze schilders schorten aan te doen!',
+    subscription_day: 'c45cbc3d-7698-4f2d-b892-b634bf016497',
+    sender: 'STAFF_MEMBER',
+    send: true,
+  },
+  {
+    picture: '',
+    prio: false,
+    uuid: '3edb8d39-9d12-43dd-929e-98b834f2f325',
+    happened_at: 1691409600,
+    type: 'NUTRITION',
+    message:
+      'Onze prachtige kunstwerken zijn aan het drogen, tijd voor een lekkere maaltijd',
+    subscription_day: 'c45cbc3d-7698-4f2d-b892-b634bf016497',
+    sender: 'STAFF_MEMBER',
+    send: true,
+  },
+  {
+    picture: '',
+    prio: false,
+    uuid: '6cab5367-d10a-41ec-bb8b-5151df8385f0',
+    happened_at: 1691413200,
+    type: 'NUTRITION',
+    message:
+      'Mattis heeft flink zijn buikje vol gegeten. Straks een goed dutje!',
+    subscription_day: 'c45cbc3d-7698-4f2d-b892-b634bf016497',
+    sender: 'STAFF_MEMBER',
+    send: true,
+  },
+  {
+    picture: '',
+    prio: true,
+    uuid: '23afaef6-fa4a-43f6-adab-1772b226fb54',
+    happened_at: 1691416800,
+    type: 'SLEEP',
+    message: 'Tijd voor een welverdiend dutje',
+    subscription_day: 'c45cbc3d-7698-4f2d-b892-b634bf016497',
+    sender: 'STAFF_MEMBER',
+    send: true,
+  },
+];
+
+interface JournalEntry {
+  picture: string;
+  prio: boolean;
+  uuid: string;
+  happened_at: number;
+  type: string;
+  message: string;
+  subscription_day: string;
+  sender: string;
+  loadingNewEntry?: boolean;
+  send: boolean;
+}
+
+export const JournalEntryPreview = () => {
+  const [entries, setEntries] = useState(DATA);
+  const flatListRef = useRef<FlatList | null>(null);
+
+  const addJournalEntry = (newEntry: JournalEntry) => {
+    setEntries((prevEntries) => [
+      ...prevEntries,
+      {...newEntry, loadingNewEntry: true},
+    ]);
+
+    setTimeout(() => {
+      setEntries((prevEntries) =>
+        prevEntries.map((entry) =>
+          entry.uuid === newEntry.uuid
+            ? {...entry, loadingNewEntry: false}
+            : entry
+        )
+      );
+    }, 3000); // Simulating a delay to demonstrate loading state
+  };
+
+  const deleteJournalEntry = (entryId: string) => {
+    LayoutAnimation.configureNext(LayoutAnimation.Presets.easeInEaseOut);
+    const newData = entries.filter((journal) => journal.uuid !== entryId);
+    setEntries(newData);
+  };
+
+  const renderJournalEntryList: ListRenderItem<JournalEntry> = ({item}) => {
+    return (
+      <JournalEntry
+        key={item.uuid}
+        id={item.uuid}
+        prio={item.prio}
+        type={item.type}
+        happenedAt={ToddleDateTime.fromSeconds(item.happened_at, {zone: 'utc'})}
+        text={item.message}
+        visualState={item.prio ? VisualState.WARNING : VisualState.DEFAULT}
+        bubbleAlignment={
+          item.sender === 'STAFF_MEMBER'
+            ? BubbleAlignment.SENT
+            : BubbleAlignment.RECEIVE
+        }
+        createdAt={ToddleDateTime.fromSeconds(item.happened_at, {zone: 'utc'})}
+        timestampLabel={'ingevuld op'}
+        sendOrReceived={item.send}
+        onDelete={deleteJournalEntry}
+        onEdit={() => console.log('edit entry')}
+        onFail={() => console.log('resend')}
+        afterAnimationComplete={() => console.log('animation done')}
+        loadingNewEntry={item.loadingNewEntry}
+      />
+    );
+  };
+
+  return (
+    <View
+      style={{
+        flex: 1,
+        backgroundColor: 'white',
+        justifyContent: 'flex-start',
+        alignItems: 'stretch',
+        paddingLeft: 16,
+        paddingRight: 16,
+        paddingTop: 16,
+        paddingBottom: 40,
+      }}
+    >
+      <View style={{alignItems: 'center', marginBottom: 16}}>
+        <PressableIcon
+          icon={<Icon key={'1'} style={'regular'} name={'plus-sm'} />}
+          onPress={() =>
+            addJournalEntry({
+              picture: '',
+              prio: false,
+              uuid: `${Math.random()}-23afaef6-fa4a-43f6-adab-1772b226fb54`,
+              happened_at: 1691416800,
+              type: 'SLEEP',
+              message: 'Tijd voor een welverdiend dutje',
+              subscription_day: 'c45cbc3d-7698-4f2d-b892-b634bf016497',
+              sender: 'STAFF_MEMBER',
+              send: true,
+            })
+          }
+        />
+      </View>
+      <FlatList
+        style={{flex: 1}}
+        ref={flatListRef}
+        data={entries}
+        renderItem={renderJournalEntryList}
+        keyExtractor={(item) => item.uuid}
+      />
+    </View>
+  );
+};

package/src/components/organisms/journal-entry/journal-entry.styles.d.ts

@@ -0,0 +1,42 @@
+export function Stylesheet(
+  context: any,
+  bubbleAlignment: any,
+  createdAt: any
+):
+  | StyleSheet.NamedStyles<any>
+  | StyleSheet.NamedStyles<{
+      rootContainer: {
+        borderLeftWidth: number;
+        borderLeftColor: any;
+        marginLeft: number;
+        paddingTop: number;
+      };
+      entryTypeContainer: {
+        position: 'absolute';
+        top: number;
+        left: number;
+        flexDirection: 'row';
+        alignItems: 'center';
+        gap: number;
+        marginBottom: number;
+      };
+      horizontalLineContainer: (
+        | {
+            maxWidth: string;
+            width: string;
+            alignSelf: string;
+            marginTop: number;
+            marginBottom: number;
+            marginLeft?: undefined;
+          }
+        | {
+            marginLeft: number;
+            maxWidth?: undefined;
+            width?: undefined;
+            alignSelf?: undefined;
+            marginTop?: undefined;
+            marginBottom?: undefined;
+          }
+      )[];
+    }>;
+import {StyleSheet} from 'react-native/Libraries/StyleSheet/StyleSheet';

package/src/components/organisms/journal-entry/journal-entry.styles.js

@@ -0,0 +1,35 @@
+import {StyleSheet} from 'react-native';
+import {Scale} from '../../../theme/scale/index';
+import {BubbleAlignment} from '../../../types/bubble-alignment.enum';
+
+export const Stylesheet = (context, bubbleAlignment, createdAt) =>
+  StyleSheet.create({
+    rootContainer: {
+      borderLeftWidth: 1,
+      borderLeftColor: context.colors.ui.xlightgrey,
+      marginLeft: Scale.s,
+      paddingTop: Scale.m * 2.25,
+    },
+    entryTypeContainer: {
+      position: 'absolute',
+      top: 0,
+      left: -16,
+      flexDirection: 'row',
+      alignItems: 'center',
+      gap: Scale.s,
+      marginBottom: Scale.m,
+    },
+    horizontalLineContainer: [
+      {
+        maxWidth: '80%',
+        width: '100%',
+        alignSelf:
+          bubbleAlignment === BubbleAlignment.SENT ? 'flex-end' : 'flex-start',
+        marginTop: createdAt ? Scale.xxxs : Scale.m,
+        marginBottom: Scale.s,
+      },
+      bubbleAlignment === BubbleAlignment.RECEIVE && {
+        marginLeft: Scale.l,
+      },
+    ],
+  });