feat: update example

alantoa · Jan 8, 2023 · ab863ab · ab863ab
1 parent 7a30101
commit ab863ab
Show file tree

Hide file tree

Showing 5 changed files with 179 additions and 67 deletions.
diff --git a/example/App.tsx b/example/App.tsx
@@ -1,12 +1,18 @@
 import { useState } from "react";
 import * as Tooltip from "universal-tooltip";
+import type { ContentProps } from "universal-tooltip";
+
 import {
   StyleSheet,
   Text,
   View,
   Pressable,
   Platform,
   StatusBar,
+  ViewStyle,
+  ViewProps,
+  Image,
+  TouchableOpacity,
 } from "react-native";
 import { NavigationContainer } from "@react-navigation/native";
 import { createNativeStackNavigator } from "@react-navigation/native-stack";
@@ -21,62 +27,176 @@ import {
 } from "./src/navigation/tab-bar-icon";
 StatusBar.setBarStyle("light-content");
 const Tab = createBottomTabNavigator();
-const TriggerView = Platform.OS === "web" ? View : Pressable;
+const TriggerView = Platform.OS === "web" ? View : (TouchableOpacity as any);
 
-function HomeScreen() {
+const RenderTooltip = ({
+  side = "top",
+  text,
+  backgroundColor = "#fff",
+  customView,
+  disableDismissWhenTouchOutside,
+  children,
+  ...rest
+}: ViewProps &
+  ContentProps & {
+    text: string;
+    customView?: JSX.Element;
+    disableDismissWhenTouchOutside?: boolean;
+  }) => {
   const [open, setOpen] = useState(false);
   return (
-    <View className="flex-1 items-center justify-center bg-black">
-      {/* <Tooltip.Root
-        {...Platform.select({
-          web: {},
-          default: {
-            open,
-            onDismiss: () => {
-              console.log("onDismiss HomeScreen");
-              setOpen(false);
-            },
+    <Tooltip.Root
+      {...Platform.select({
+        web: {},
+        default: {
+          open,
+          onDismiss: () => {
+            setOpen(false);
           },
-        })}
-      >
-        <Tooltip.Trigger>
-          <TriggerView
-            {...Platform.select({
-              web: {},
-              default: {
-                open,
-                onPress: () => {
-                  setOpen(true);
-                },
+        },
+      })}
+      disableDismissWhenTouchOutside={disableDismissWhenTouchOutside}
+    >
+      <Tooltip.Trigger>
+        <TriggerView
+          {...Platform.select({
+            web: {},
+            default: {
+              open,
+              onPress: () => {
+                setOpen(true);
               },
-            })}
+            },
+          })}
+        >
+          {children ? (
+            children
+          ) : (
+            <View className="h-8 bg-black border border-gray-100 justify-center items-center rounded-md px-2">
+              <Text className="text-sm text-white font-medium">{text}</Text>
+            </View>
+          )}
+        </TriggerView>
+      </Tooltip.Trigger>
+      <Tooltip.Content
+        sideOffset={3}
+        containerStyle={{
+          paddingLeft: 16,
+          paddingRight: 16,
+          paddingTop: 8,
+          paddingBottom: 8,
+        }}
+        onTap={() => {
+          setOpen(false);
+          console.log("onTap");
+        }}
+        dismissDuration={500}
+        disableTapToDismiss
+        side={side}
+        presetAnimation="fadeIn"
+        backgroundColor={backgroundColor}
+        borderRadius={999}
+        {...rest}
+      >
+        {customView ? (
+          customView
+        ) : (
+          <Tooltip.Text text="Tooltip" textColor="#000" />
+        )}
+      </Tooltip.Content>
+    </Tooltip.Root>
+  );
+};
+
+function HomeScreen() {
+  return (
+    <View className="flex-1 bg-black px-4 pt-32">
+      <View className="flex-row flex-wrap">
+        <View className="absolute left-0 top-12">
+          <RenderTooltip
+            text="Show in right"
+            disableDismissWhenTouchOutside
+            side="right"
+          />
+        </View>
+        <View className="absolute right-8">
+          <RenderTooltip
+            text="Show in left"
+            disableDismissWhenTouchOutside
+            side="left"
+          />
+        </View>
+        <View className="absolute left-4 top-32">
+          <RenderTooltip
+            text="Show in top"
+            disableDismissWhenTouchOutside
+            side="top"
+          />
+        </View>
+        <View className="absolute left-36 top-28">
+          <RenderTooltip
+            text="Custom view"
+            backgroundColor="rgba(31,41,55,1)"
+            customView={
+              <View className="bg-gray-800 rounded-md px-2 py-2 w-56 h-40">
+                <Image
+                  source={{
+                    uri: "https://pbs.twimg.com/profile_images/1507747390790377479/F9abCIUR_400x400.jpg",
+                  }}
+                  className="w-12 h-12 rounded-full"
+                />
+                <View className="absolute right-2 bg-gray-100 px-4 py-2 top-2 rounded-full">
+                  <Text className="text-gray-900 font-bold text-xs">
+                    Follow
+                  </Text>
+                </View>
+                <View className="px-2 mt-1">
+                  <Text className="text-gray-100 font-bold text-sm">Alan</Text>
+                  <Text className="text-gray-400 font-bold text-xs">
+                    @alantoa
+                  </Text>
+                  <Text className="text-gray-100 font-bold text-md mt-2">
+                    software engineer https://github.com/alantoa
+                  </Text>
+                </View>
+              </View>
+            }
+            side="bottom"
           >
-            <Text>Hello!👋</Text>
-          </TriggerView>
-        </Tooltip.Trigger>
-        <Tooltip.Content
-          sideOffset={3}
-          containerStyle={{
-            paddingLeft: 16,
-            paddingRight: 16,
-            paddingTop: 8,
-            paddingBottom: 8,
-          }}
-          onTap={() => {
-            console.log("onTap");
-          }}
-          dismissDuration={500}
-          disableTapToDismiss
-          side="right"
-          presetAnimation="fadeIn"
-          textSize={16}
-          backgroundColor="black"
-          fontWeight="bold"
-          borderRadius={999}
-          textColor="#fff"
-          text="Tooltip"
-        />
-      </Tooltip.Root> */}
+            <View className="border border-gray-600 rounded-full">
+              <Image
+                source={{
+                  uri: "https://pbs.twimg.com/profile_images/1507747390790377479/F9abCIUR_400x400.jpg",
+                }}
+                className="w-12 h-12 rounded-full"
+              />
+            </View>
+          </RenderTooltip>
+        </View>
+        <View className="absolute right-0 top-28">
+          <RenderTooltip
+            text="Show in bottom"
+            disableDismissWhenTouchOutside
+            side="bottom"
+          />
+        </View>
+        <View className="absolute left-20 top-48">
+          <RenderTooltip
+            text="Zoom in"
+            disableDismissWhenTouchOutside
+            side="bottom"
+            presetAnimation="zoomIn"
+          />
+        </View>
+        <View className="absolute left-56 top-56">
+          <RenderTooltip
+            text="None"
+            disableDismissWhenTouchOutside
+            side="bottom"
+            presetAnimation="none"
+          />
+        </View>
+      </View>
     </View>
   );
 }
@@ -118,7 +238,7 @@ export default function App() {
         tabBar={(props) => <BottomTabbar {...props} />}
       >
         <Tab.Screen
-          name="Feed"
+          name="Tooltip Example"
           options={{
             tabBarIcon: TabBarHomeIcon,
           }}

diff --git a/example/src/navigation/tab-bar-icon.tsx b/example/src/navigation/tab-bar-icon.tsx
@@ -74,7 +74,7 @@ export function TabBarLikeIcon({ color, focused, onPress }: TabBarIconProps) {
         side="top"
         presetAnimation="fadeIn"
         backgroundColor="#fff"
-        borderRadius={999}
+        borderRadius={12}
       >
         <Tooltip.Text textSize={12} textColor="#000" text="You got 12 likes" />
       </Tooltip.Content>

diff --git a/ios/UniversalTooltipView.swift b/ios/UniversalTooltipView.swift
@@ -37,10 +37,10 @@ class UniversalTooltipView: ExpoView, EasyTipViewDelegate {
 
   public func easyTipViewDidTap(_ tipView: EasyTipView) {
     onTap()
-    opened = false
   }
 
   public func easyTipViewDidDismiss(_ tipView: EasyTipView) {
+    print("easyTipViewDidDismiss")
     onDismiss()
   }
   override func didUpdateReactSubviews() {
@@ -106,7 +106,7 @@ class UniversalTooltipView: ExpoView, EasyTipViewDelegate {
     }
     preferences.positioning.contentInsets = UIEdgeInsets(top: 0, left: 0, bottom: 0, right: 0)
     tipView = DismissibleEasyTipView(contentView: contentView!, preferences: preferences, delegate: self)
-    tipView?.show(on: self)
+    show()
   }
 
   public func openByText() {
@@ -121,6 +121,9 @@ class UniversalTooltipView: ExpoView, EasyTipViewDelegate {
 
     preferences.positioning.contentInsets = UIEdgeInsets(top: top, left: left, bottom: bottom, right: right)
     tipView = DismissibleEasyTipView(text: text!, preferences: preferences, delegate: self)
+    show()
+  }
+  public func show(){
     if(disableDismissWhenTouchOutside){
       tipView?.show(forView: self)
     }else{
@@ -133,11 +136,10 @@ class UniversalTooltipView: ExpoView, EasyTipViewDelegate {
     }else{
       tipView?.hide()
     }
-    tipView?.dismiss()
   }
   override func willMove(toWindow newWindow: UIWindow?) {
     dismiss()
   }
-
+  
 }
 
diff --git a/src/index.ts b/src/index.ts
@@ -1,5 +1,3 @@
-import type { UniversalTooltipViewProps } from "./universal-tooltip.types";
-
-export { UniversalTooltipViewProps };
+export * from "./universal-tooltip.types";
 
 export * from "./universal-tooltip";
diff --git a/src/universal-tooltip.tsx b/src/universal-tooltip.tsx
@@ -69,11 +69,3 @@ export const Content = createComponent<ContentProps>(
 export const Text = createComponent<TextProps>(({ children }) => {
   return <>{children}</>;
 }, "Text");
-
-// Todo: support custom view
-export const CustomView = createComponent<ViewProps>(
-  ({ children, ...rest }) => {
-    return <View {...rest}>{children}</View>;
-  },
-  "CustomView"
-);