⭐️ Impl: Ex - Update CardLogDisplay

Summary: Implement `shouldShowTimestamp` prop.
dominicstop · Mar 3, 2023 · 8c6756a · 8c6756a
1 parent ee08b09
commit 8c6756a
Show file tree

Hide file tree

Showing 3 changed files with 18 additions and 3 deletions.
diff --git a/example/src/components/Card/CardLogDisplay/CardLogDisplay.tsx b/example/src/components/Card/CardLogDisplay/CardLogDisplay.tsx
@@ -83,6 +83,7 @@ export const CardLogDisplay = React.forwardRef<
             <CardLogDisplayListRow
               key={`event-${item.timestamp}-${item.title}`}
               item={item}
+              shouldShowTimestamp={props.shouldShowTimestamp ?? true}
             />
           ))}
         </View>
@@ -117,6 +118,7 @@ export const CardLogDisplay = React.forwardRef<
             <CardLogDisplayListRow
               key={`event-${item.timestamp}-${item.title}`}
               item={item}
+              shouldShowTimestamp={props.shouldShowTimestamp ?? true}
             />
           ))}
         </ScrollView>

diff --git a/example/src/components/Card/CardLogDisplay/CardLogDisplayListRow.tsx b/example/src/components/Card/CardLogDisplay/CardLogDisplayListRow.tsx
@@ -5,7 +5,10 @@ import type { CardLogDisplayItem } from './CardLogDisplayTypes';
 
 import * as Helpers from '../../../functions/Helpers';
 
-export function CardLogDisplayListRow(props: { item: CardLogDisplayItem }) {
+export function CardLogDisplayListRow(props: { 
+  item: CardLogDisplayItem;
+  shouldShowTimestamp: boolean;
+}) {
   const { item } = props;
   const date = new Date(item.timestamp);
 
@@ -19,10 +22,19 @@ export function CardLogDisplayListRow(props: { item: CardLogDisplayItem }) {
   return (
     <View style={styles.logListItemContainer}>
       <Text style={styles.logItemIndexText}>
+        {/* Col - Index */}
         {`${Helpers.pad(item.index, 3)}`}
       </Text>
-      <Text style={styles.logItemTimestampText}>{timeString}</Text>
-      <Text style={styles.logItemTypeText}>{item.title}</Text>
+      {props.shouldShowTimestamp && (
+        <Text style={styles.logItemTimestampText}>
+          {/* Col - Timestamp */}
+          {timeString}
+        </Text>
+      )}
+      <Text style={styles.logItemTypeText}>
+        {/* Col - Title */}
+        {item.title}
+      </Text>
     </View>
   );
 }

diff --git a/example/src/components/Card/CardLogDisplay/CardLogDisplayTypes.ts b/example/src/components/Card/CardLogDisplay/CardLogDisplayTypes.ts
@@ -24,6 +24,7 @@ export type CardLogDisplayBaseProps = {
   style?: ViewStyle;
   initialLogItems?: Array<CardLogDisplayItem>;
   listEmptyMessage?: string;
+  shouldShowTimestamp?: boolean;
 };
 
 export type CardLogDisplayProps = CardLogDisplayBaseProps & DisplayListModeProp;