From e4a88d205bc713f3362f90db9fb2ee216d0e35b0 Mon Sep 17 00:00:00 2001
From: Wayne <75321423+WayneKim92@users.noreply.github.com>
Date: Thu, 29 Aug 2024 23:34:54 +0900
Subject: [PATCH] Release/v1.1.1 (#10)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit
* feat: show or hide by visible prop
* Example in flat list or scroll view (#7)
* feat: 눌러서 닫기 작동 안 할 수 있게 props 추가
* chore: add Example
* chore: 조금 더 다양한 상황 고려하여 수정
* docs: 변경점 고려하여 문서 업데이트
* docs: 변경점 고려하여 문서 업데이트
---
README.md | 36 +++++++++--------
example/src/App.tsx | 95 ++++++++++++++++++++++++++++-----------------
src/index.tsx | 22 ++++++++++-
3 files changed, 99 insertions(+), 54 deletions(-)
diff --git a/README.md b/README.md
index 30a72c8..0518322 100644
--- a/README.md
+++ b/README.md
@@ -37,7 +37,7 @@ import Tooltip from 'react-native-good-tooltip';
@@ -46,22 +46,24 @@ import Tooltip from 'react-native-good-tooltip';
## Props
-| Prop | Type | Default | Description |
-|------------------------|----------------------------------------------------------------------|----------------------------------------|-----------------------------------------------------------------------------------------------|
-| `placement` | `'top' \| 'bottom' \| 'left' \| 'right'` | **required** | The position of the tooltip relative to the anchor. |
-| `anchor` | `'center' \| 'left' \| 'right' \| 'top' \| 'bottom'` | `'center'` | The alignment of the tooltip relative to the anchor. |
-| `text` | `string \| React.ReactElement` | **required** | The content of the tooltip. |
-| `isVisible` | `boolean` | **required** | Whether the tooltip is visible. |
-| `offset` | `{ position?: { x?: number, y?: number }, arrow?: { x?: number, y?: number } }` | `undefined` | The offset for the tooltip and arrow position. |
-| `arrowElement` | `React.ReactElement` | `undefined` | Custom arrow element. |
-| `styles` | `{color?: ColorValue,containerStyle?: ViewStyle,tooltipStyle?: ViewStyle,arrowSize?: { width?: number, height?: number },closeSize?: { width?: number, height?: number} }` | `undefined` | Custom styles for the tooltip. |
-| `children` | `React.ReactElement` | `undefined` | The element to which the tooltip is anchored. |
-| `onPress` | `() => void` | `undefined` | Function to call when the tooltip is pressed. |
-| `onVisibleChange` | `(isVisible: boolean) => void` | `undefined` | Function to call when the visibility of the tooltip changes. |
-| `disableAutoHide` | `boolean` | `false` | Whether to disable the auto-hide feature. |
-| `delayShowTime` | `number` | `0` | The delay time before showing the tooltip. |
-| `autoHideTime` | `number` | `5000` | The time after which the tooltip will automatically hide. |
-| `requiredConfirmation` | `boolean` | `false` | Whether the tooltip requires confirmation to hide. |
+| Prop | Type | Default | Description |
+|------------------------|--------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|----------------------------------------|-----------------------------------------------------------------------------------------------|
+| `visible` | `boolean` | `undefined` | Whether the tooltip is visible. |
+| `rerenderKey` | `any` | `undefined` | Key to force re-rendering of the tooltip. |
+| `placement` | `'top' \| 'bottom' \| 'left' \| 'right'` | **required** | The position of the tooltip relative to the anchor. |
+| `anchor` | `'center' \| 'left' \| 'right' \| 'top' \| 'bottom'` | `'center'` | The alignment of the tooltip relative to the anchor. |
+| `offset` | `{ position?: { x?: number, y?: number }, arrow?: { x?: number, y?: number } }` | `undefined` | The offset for the tooltip and arrow position. |
+| `arrowElement` | `React.ReactElement` | `undefined` | Custom arrow element. |
+| `styles` | `{color?: ColorValue \| 'primary', containerStyle?: ViewStyle, tooltipStyle?: ViewStyle, arrowSize?: { width?: number, height?: number }, closeSize?: { width?: number, height?: number} }` | `undefined` | Custom styles for the tooltip. |
+| `text` | `string \| React.ReactElement` | **required** | The content of the tooltip. |
+| `children` | `React.ReactElement` | `undefined` | The element to which the tooltip is anchored. |
+| `onPress` | `() => void` | `undefined` | Function to call when the tooltip is pressed. |
+| `onVisibleChange` | `(isVisible: boolean) => void` | `undefined` | Function to call when the visibility of the tooltip changes. |
+| `delayShowTime` | `number` | `0` | The delay time before showing the tooltip. |
+| `autoHideTime` | `number` | `5000` | The time after which the tooltip will automatically hide. |
+| `disableAutoHide` | `boolean` | `false` | Whether to disable the auto-hide feature. |
+| `disablePressToClose` | `boolean` | `false` | Whether to disable the press-to-close feature. |
+| `numberOfLines` | `number` | `2` | The number of lines to display in the tooltip text. |
## Contributing
diff --git a/example/src/App.tsx b/example/src/App.tsx
index 473bb21..e6a61fb 100644
--- a/example/src/App.tsx
+++ b/example/src/App.tsx
@@ -1,4 +1,12 @@
-import { SafeAreaView, StyleSheet, Text, View, TextInput } from 'react-native';
+import {
+ SafeAreaView,
+ StyleSheet,
+ Text,
+ View,
+ TextInput,
+ ScrollView,
+ FlatList,
+} from 'react-native';
import Tooltip from 'react-native-good-tooltip';
import { useState } from 'react';
@@ -8,8 +16,8 @@ export default function App() {
const [tooltipMessage, setTooltipMessage] = useState('Hello');
const [isFocused, setIsFocused] = useState(false);
- // Example - FlatList
- // const data = [1, 2, 3];
+ // Example - ScrollView and FlatList
+ const [inputTextInScrollVIew, setInputTextInScrollVIew] = useState('');
return (
@@ -103,38 +111,55 @@ export default function App() {
/>
- {/* item.toString()}*/}
- {/* CellRendererComponent={({ index, style, ...props }) => {*/}
- {/* return (*/}
- {/* */}
- {/* );*/}
- {/* }}*/}
- {/* renderItem={() => {*/}
- {/* console.log('####################################');*/}
- {/* console.log('리렌더링?');*/}
- {/* console.log('####################################');*/}
- {/* return (*/}
- {/* */}
- {/* */}
- {/* */}
- {/* );*/}
- {/* }}*/}
- {/*/>*/}
+
+
+ (
+
+
+
+
+
+ )}
+ />
+
+
+
+
+
+
+
+
+
+
);
}
diff --git a/src/index.tsx b/src/index.tsx
index bc3a300..880c7f7 100644
--- a/src/index.tsx
+++ b/src/index.tsx
@@ -60,6 +60,8 @@ interface ToolTipProps {
delayShowTime?: number;
autoHideTime?: number;
disableAutoHide?: boolean;
+ disablePressToClose?: boolean;
+ numberOfLines?: number;
}
const Tooltip = ({
@@ -80,6 +82,8 @@ const Tooltip = ({
delayShowTime = 0,
autoHideTime = 5000,
disableAutoHide,
+ disablePressToClose = true,
+ numberOfLines = 2,
}: ToolTipProps) => {
const animatedValue = useMemo(() => new Animated.Value(0), []);
@@ -283,7 +287,7 @@ const Tooltip = ({
{
- if (!onPress) {
+ if (!disablePressToClose) {
return;
}
@@ -306,7 +310,21 @@ const Tooltip = ({
) : (
{
+ if (numberOfLines > 0) {
+ return numberOfLines;
+ }
+
+ if (
+ numberOfLines < 0 ||
+ numberOfLines === null ||
+ numberOfLines === undefined
+ ) {
+ return undefined;
+ }
+
+ return 2;
+ })()}
children={text}
/>
)}