Skip to content

Commit

Permalink
Release/v1.1.1 (#10)
Browse files Browse the repository at this point in the history 
* feat: show or hide by visible prop

* Example in flat list or scroll view (#7)

* feat: 눌러서 닫기 작동 안 할 수 있게 props 추가

* chore: add Example

* chore: 조금 더 다양한 상황 고려하여 수정

* docs: 변경점 고려하여 문서 업데이트

* docs: 변경점 고려하여 문서 업데이트
  • Loading branch information
@WayneKim92
WayneKim92 authored Aug 29, 2024
1 parent 1ea0297 commit e4a88d2
Show file tree
Hide file tree
Showing 3 changed files with 99 additions and 54 deletions.
36 changes: 19 additions & 17 deletions README.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -37,7 +37,7 @@ import Tooltip from 'react-native-good-tooltip';
<table>
<tr>
<td>
<video src="https://github.com/user-attachments/assets/b7c69e2f-ef99-476b-bca7-bd9bed3c65bf" width="300" height="600" />
<video src="https://github.com/user-attachments/assets/ba8f7cec-8361-4e3d-b24a-88b23f258d18" width="300" height="600" />
</td>
</tr>
</table>
Expand All @@ -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

Expand Down
95 changes: 60 additions & 35 deletions example/src/App.tsx
View file
Original file line number Diff line number Diff line change
@@ -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';

Expand All @@ -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 (
<SafeAreaView style={styles.container}>
Expand Down Expand Up @@ -103,38 +111,55 @@ export default function App() {
/>
</Tooltip>

{/*<FlatList*/}
{/* data={data}*/}
{/* keyExtractor={(item) => item.toString()}*/}
{/* CellRendererComponent={({ index, style, ...props }) => {*/}
{/* return (*/}
{/* <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>*/}
{/* );*/}
{/* }}*/}
{/*/>*/}
<View style={{ height: 100 }} />

<FlatList
data={[0]}
style={{ backgroundColor: 'blue', zIndex: 100, overflow: 'visible' }}
renderItem={() => (
<Tooltip
placement={'top'}
text={'overflowed ui in FlatList can not touch'}
disableAutoHide
numberOfLines={-1}
>
<Tooltip placement={'bottom'} text={'In FlatList'} disableAutoHide>
<TextInput
placeholder={'Input text'}
value={inputTextInScrollVIew}
style={{ padding: 16, backgroundColor: 'gray' }}
onChangeText={setInputTextInScrollVIew}
/>
</Tooltip>
</Tooltip>
)}
/>

<View style={{ height: 50, zIndex: 200 }} />

<ScrollView
style={{
backgroundColor: 'green',
overflow: 'visible',
zIndex: 300,
}}
>
<Tooltip
placement={'top'}
text={'overflowed ui in ScrollView can not touch'}
disableAutoHide
numberOfLines={-1}
>
<Tooltip placement={'bottom'} text={'In ScrollView'} disableAutoHide>
<TextInput
placeholder={'Input text'}
value={inputTextInScrollVIew}
style={{ padding: 16, backgroundColor: 'gray' }}
onChangeText={setInputTextInScrollVIew}
/>
</Tooltip>
</Tooltip>
</ScrollView>
</SafeAreaView>
);
}
Expand Down
22 changes: 20 additions & 2 deletions src/index.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -60,6 +60,8 @@ interface ToolTipProps {
delayShowTime?: number;
autoHideTime?: number;
disableAutoHide?: boolean;
disablePressToClose?: boolean;
numberOfLines?: number;
}

const Tooltip = ({
Expand All @@ -80,6 +82,8 @@ const Tooltip = ({
delayShowTime = 0,
autoHideTime = 5000,
disableAutoHide,
disablePressToClose = true,
numberOfLines = 2,
}: ToolTipProps) => {
const animatedValue = useMemo(() => new Animated.Value(0), []);

Expand Down Expand Up @@ -283,7 +287,7 @@ const Tooltip = ({
<TouchableOpacity
activeOpacity={1}
onPress={() => {
if (!onPress) {
if (!disablePressToClose) {
return;
}

Expand All @@ -306,7 +310,21 @@ const Tooltip = ({
) : (
<Text
style={{ flexShrink: 1, color: 'white' }}
numberOfLines={2}
numberOfLines={(() => {
if (numberOfLines > 0) {
return numberOfLines;
}

if (
numberOfLines < 0 ||
numberOfLines === null ||
numberOfLines === undefined
) {
return undefined;
}

return 2;
})()}
children={text}
/>
)}
Expand Down

0 comments on commit e4a88d2

Please sign in to comment.