feat: show or hide by visible prop (#8)

WayneKim92 · Aug 29, 2024 · 835f008 · 835f008
1 parent 5191b35
commit 835f008
Show file tree

Hide file tree

Showing 2 changed files with 71 additions and 29 deletions.
diff --git a/example/src/App.tsx b/example/src/App.tsx
@@ -3,7 +3,13 @@ import Tooltip from 'react-native-good-tooltip';
 import { useState } from 'react';
 
 export default function App() {
-  const [inputText, setInputText] = useState('초기 텍스트');
+  // Example - TextInput
+  const [inputText, setInputText] = useState('');
+  const [tooltipMessage, setTooltipMessage] = useState('Hello');
+  const [isFocused, setIsFocused] = useState(false);
+
+  // Example - FlatList
+  // const data = [1, 2, 3];
 
   return (
     <SafeAreaView style={styles.container}>
@@ -66,27 +72,68 @@ export default function App() {
         </View>
       </View>
 
-      <Tooltip placement={'bottom'} text={'Input Text'} visible={true}>
+      <Tooltip
+        placement={'bottom'}
+        anchor={'left'}
+        text={tooltipMessage}
+        visible={isFocused}
+        disableAutoHide
+        styles={{
+          color: tooltipMessage === 'Correct!' ? 'blue' : undefined,
+        }}
+      >
         <TextInput
           value={inputText}
-          placeholder={'Input text'}
-          onChangeText={setInputText}
-          style={{ padding: 16, backgroundColor: 'gray' }}
+          placeholder={'Input secret password'}
+          placeholderTextColor={'#6cbd67'}
+          onChangeText={(text) => {
+            setInputText(text);
+            if (text.toLowerCase() === 'world') {
+              setTooltipMessage('Correct!');
+              setTimeout(() => {
+                setIsFocused(false);
+              }, 1500);
+            }
+          }}
+          style={{ padding: 16, backgroundColor: 'gray', color: 'white' }}
+          onFocus={() => setIsFocused(true)}
+          onBlur={() => {
+            setIsFocused(false);
+          }}
         />
       </Tooltip>
 
       {/*<FlatList*/}
-      {/*  data={[1, 2, 3]}*/}
-      {/*  renderItem={() => {*/}
+      {/*  data={data}*/}
+      {/*  keyExtractor={(item) => item.toString()}*/}
+      {/*  CellRendererComponent={({ index, style, ...props }) => {*/}
       {/*    return (*/}
-      {/*      <TextInput*/}
-      {/*        value={inputText}*/}
-      {/*        onChangeText={setInputText}*/}
-      {/*        placeholder={'Input text'}*/}
-      {/*        style={{ padding: 16, backgroundColor: 'gray' }}*/}
+      {/*      <View*/}
+      {/*        style={[*/}
+      {/*          style,*/}
+      {/*          {*/}
+      {/*            zIndex: data.length - index,*/}
+      {/*          },*/}
+      {/*        ]}*/}
+      {/*        {...props}*/}
       {/*      />*/}
       {/*    );*/}
       {/*  }}*/}
+      {/*  renderItem={() => {*/}
+      {/*    console.log('####################################');*/}
+      {/*    console.log('리렌더링?');*/}
+      {/*    console.log('####################################');*/}
+      {/*    return (*/}
+      {/*      <MemoizedTooltip placement={'bottom'} text={'This is a tooltip'}>*/}
+      {/*        <TextInput*/}
+      {/*          value={inputText}*/}
+      {/*          onChangeText={setInputText}*/}
+      {/*          placeholder={'Input text'}*/}
+      {/*          style={{ padding: 16, backgroundColor: 'gray' }}*/}
+      {/*        />*/}
+      {/*      </MemoizedTooltip>*/}
+      {/*    );*/}
+      {/*  }}*/}
       {/*/>*/}
     </SafeAreaView>
   );

diff --git a/src/index.tsx b/src/index.tsx
@@ -1,10 +1,4 @@
-import React, {
-  useCallback,
-  useEffect,
-  useMemo,
-  useRef,
-  useState,
-} from 'react';
+import React, { useCallback, useEffect, useMemo, useState } from 'react';
 import {
   Animated,
   Dimensions,
@@ -65,6 +59,7 @@ interface ToolTipProps {
   onVisibleChange?: (isVisible: boolean) => void;
   delayShowTime?: number;
   autoHideTime?: number;
+  disableAutoHide?: boolean;
 }
 
 const Tooltip = ({
@@ -84,9 +79,8 @@ const Tooltip = ({
   onVisibleChange,
   delayShowTime = 0,
   autoHideTime = 5000,
+  disableAutoHide,
 }: ToolTipProps) => {
-  const showAnimationRef = useRef(false);
-  const hideAnimationRef = useRef(false);
   const animatedValue = useMemo(() => new Animated.Value(0), []);
 
   const [tooltipPosition, setTooltipPosition] = useState({
@@ -120,27 +114,21 @@ const Tooltip = ({
   const runAnimation = useCallback(
     (isShowAnimation: boolean) => {
       if (isShowAnimation) {
-        if (showAnimationRef.current) return;
-
         Animated.spring(animatedValue, {
           toValue: 1,
           speed: 6,
           useNativeDriver: true,
         }).start(() => {
           onVisibleChange && onVisibleChange(true);
         });
-        showAnimationRef.current = true;
       } else {
-        if (hideAnimationRef.current) return;
-
         Animated.timing(animatedValue, {
           toValue: 0,
           duration: 300,
           useNativeDriver: true,
         }).start(() => {
           onVisibleChange && onVisibleChange(false);
         });
-        hideAnimationRef.current = true;
       }
     },
     [animatedValue, onVisibleChange]
@@ -159,12 +147,19 @@ const Tooltip = ({
 
   // hide animation
   useEffect(() => {
-    if (onPress) return;
+    if (onPress || disableAutoHide) return;
 
     setTimeout(() => {
       runAnimation(false);
     }, delayShowTime + autoHideTime);
-  }, [autoHideTime, delayShowTime, onPress, runAnimation]);
+  }, [autoHideTime, delayShowTime, disableAutoHide, onPress, runAnimation]);
+
+  // hide by props.visible
+  useEffect(() => {
+    if (visible === false) {
+      runAnimation(false);
+    }
+  }, [runAnimation, visible]);
 
   const handleVerticalTooltipLayout = (event: LayoutChangeEvent) => {
     const { width, height } = event.nativeEvent.layout;