feat: gap between the tailView and main content, a callbeck on expand…

…ed status changed
lohenyumnam · Dec 11, 2023 · c98d42f · younes0 · Jan 10, 2024 · c98d42f
1 parent 0959120
commit c98d42f
Show file tree

Hide file tree

Showing 2 changed files with 30 additions and 3 deletions.
diff --git a/src/component/truncated_text_view.tsx b/src/component/truncated_text_view.tsx
@@ -1,4 +1,4 @@
-import React, { useCallback, useMemo } from 'react';
+import React, { useCallback, useEffect, useMemo } from 'react';
 import {
   LayoutAnimation,
   NativeSyntheticEvent,
@@ -33,6 +33,8 @@ export const TruncatedTextView = (props: TruncatedTextViewProps) => {
     containerStyle,
     textPropsRoot,
     textPropsChild,
+    numberOfLineGapOnExpanded = 1,
+    onChangeExpandedStatus,
   } = props;
   const {
     text: fullText,
@@ -116,6 +118,10 @@ export const TruncatedTextView = (props: TruncatedTextViewProps) => {
     numberOfLines,
   ]);
 
+  useEffect(() => {
+    onChangeExpandedStatus?.(isExpanded);
+  }, [isExpanded, onChangeExpandedStatus]);
+
   // this will hide the text view if the text is empty
   if (!fullText) return <View />;
 
@@ -140,7 +146,9 @@ export const TruncatedTextView = (props: TruncatedTextViewProps) => {
             {...textPropsRoot}
           >
             {fullText}
-            {_shouldShowTailView && '\n'}
+            {_shouldShowTailView &&
+              '\n'.repeat(numberOfLineGapOnExpanded) +
+                `${numberOfLineGapOnExpanded === 1 ? '‎ ' : ''}`}
           </Text>
 
           {_shouldShowTailView && (
@@ -153,6 +161,9 @@ export const TruncatedTextView = (props: TruncatedTextViewProps) => {
                 {
                   left: seeMorePosition,
                 },
+                isExpanded &&
+                  numberOfLineGapOnExpanded === 1 &&
+                  styles.expandedTailTextContainer,
               ]}
             >
               <Text
@@ -178,10 +189,15 @@ const styles = StyleSheet.create({
     bottom: 0,
   },
   container: {
-    backgroundColor: 'white',
+    // backgroundColor: 'white',
+    backgroundColor: 'lightblue',
   },
   tailText: {
     color: 'black',
     fontWeight: 'bold',
   },
+
+  expandedTailTextContainer: {
+    margin: -4,
+  },
 });
diff --git a/src/types/types.ts b/src/types/types.ts
@@ -70,4 +70,15 @@ export type TruncatedTextViewProps = {
    * Apply text props to child text
    */
   textPropsChild?: TextProps;
+
+  /**
+   * Number of Line Gap between the Tail Text and the main content
+   * @default is 1
+   */
+  numberOfLineGapOnExpanded?: number;
+
+  /**
+   * Called when expanded status changed
+   */
+  onChangeExpandedStatus?: (isExpanded: boolean) => void;
 };