Skip to content

Commit 496a73c

Browse files
StringsaeedStringsaeed
authored
Merge pull request #6 from Stringsaeed/feat-add-render-pointer-prop
Feat add render pointer prop
2 parents b750802 + 626f39b commit 496a73c

File tree

3 files changed

+21
-20
lines changed

3 files changed

+21
-20
lines changed

‎README.md‎

Lines changed: 15 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -152,20 +152,21 @@ const styles = StyleSheet.create({
152152
153153
## Props
154154
155-
| Name | Type | ? | Default | Description |
156-
| --------------- | ------------------ | --- | ------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
157-
| `isVisible` | `boolean` | ✅ | `undefined` | Determines whether the tooltip is visible or not. |
158-
| `renderContent` | `() => ReactNode` | ✅ | `undefined` | the content of the tooltip |
159-
| `children` | `ReactNode` | ✅ | `undefined` | the children component that the tooltip will point to |
160-
| `withOverlay` | `boolean` | ❌ | `undefined` | whether or not to render overlay behind the `children` and the `Tooltip` |
161-
| `onDismiss` | `() => void` | ❌ | `undefined` | a function to be called when the user presses on the overlay |
162-
| `overlayStyle` | `ViewStyle` | ❌ | `undefined` | a style object to customize how `Overlay` looks |
163-
| `offset` | `number` | ❌ | `0` | a distance added between the `Tooltip` and the `children`, Please note that the `Pointer` size is calculated separately |
164-
| `pointerStyle` | `ViewStyle` | ❌ | `undefined` | a style object to customize `Pointer` looks, <br />Please note: the only available styles in only `width` and `height` |
165-
| `pointerColor` | `string` | ❌ | `"#000000"` | The `Pointer`'s color |
166-
| `position` | `string` | ❌ | `top` | `top`, `bottom`, `left`, and `right`, to control the placement of the `Tooltip` |
167-
| `timingConfig` | `WithTimingConfig` | ❌ | `{ duration: 300 }` | the timing config for animating opening and closing of the `Tooltip` and `Overlay`, <br />Please note: that is from [`react-native-reanimated`](https://docs.swmansion.com/react-native-reanimated/docs/api/animations/withTiming) |
168-
| `childrenStyle` | `ViewStyle` | ❌ | `undefined` | the style of `children` |
155+
| ? | Name | Type | Default | Description |
156+
| --- | --------------- | ------------------------------------ | ------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
157+
| ✅ | `isVisible` | `boolean` | `undefined` | Determines whether the tooltip is visible or not. |
158+
| ✅ | `renderContent` | `() => ReactNode` | `undefined` | the content of the tooltip |
159+
| ✅ | `children` | `ReactNode` | `undefined` | the children component that the tooltip will point to |
160+
| ❌ | `withOverlay` | `boolean` | `undefined` | whether or not to render overlay behind the `children` and the `Tooltip` |
161+
| ❌ | `onDismiss` | `() => void` | `undefined` | a function to be called when the user presses on the overlay |
162+
| ❌ | `overlayStyle` | `ViewStyle` | `undefined` | a style object to customize how `Overlay` looks |
163+
| ❌ | `offset` | `number` | `0` | a distance added between the `Tooltip` and the `children`, Please note that the `Pointer` size is calculated separately |
164+
| ❌ | `pointerStyle` | `ViewStyle` | `undefined` | a style object to customize `Pointer` looks, <br />Please note: the only available styles in only `width` and `height` |
165+
| ❌ | `pointerColor` | `string` | `"#000000"` | The `Pointer`'s color |
166+
| ❌ | `position` | `string` | `top` | `top`, `bottom`, `left`, and `right`, to control the placement of the `Tooltip` |
167+
| ❌ | `timingConfig` | `WithTimingConfig` | `{ duration: 300 }` | the timing config for animating opening and closing of the `Tooltip` and `Overlay`, <br />Please note: that is from [`react-native-reanimated`](https://docs.swmansion.com/react-native-reanimated/docs/api/animations/withTiming) |
168+
| ❌ | `childrenStyle` | `ViewStyle` | `undefined` | the style of `children` |
169+
| ❌ | `renderPointer` | `(props: PointerProps) => ReactNode` | `undefined` | a render function for the pointer component takes the pointer props that you pass them as a props |
169170
170171
171172

‎src/components/PointerWrapper/PointerWrapper.tsx‎

Lines changed: 5 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -2,14 +2,17 @@ import React, { useMemo } from 'react';
22
import { StyleSheet, View } from 'react-native';
33

44
import { getPointerWrapperStyle } from '../../utils';
5-
import type { PointerWrapperProps } from '../../types';
5+
import type { PointerProps, PointerWrapperProps } from '../../types';
66

77
import Pointer from '../Pointer';
88

99
import styles from './styles';
1010

11+
const _renderPointer = (props: PointerProps) => <Pointer {...props} />;
12+
1113
const PointerWrapper: React.FC<PointerWrapperProps> = ({
1214
tooltipLayout,
15+
renderPointer = _renderPointer,
1316
...pointerProps
1417
}) => {
1518
const pointerStyles = useMemo(
@@ -21,11 +24,7 @@ const PointerWrapper: React.FC<PointerWrapperProps> = ({
2124
[pointerProps, tooltipLayout]
2225
);
2326

24-
return (
25-
<View style={pointerStyles}>
26-
<Pointer {...pointerProps} />
27-
</View>
28-
);
27+
return <View style={pointerStyles}>{renderPointer(pointerProps)}</View>;
2928
};
3029

3130
export default PointerWrapper;

‎src/types/ComponentsProps.ts‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -27,6 +27,7 @@ export interface OverlayProps
2727

2828
export interface PointerWrapperProps extends PointerProps {
2929
tooltipLayout?: LayoutRectangle;
30+
renderPointer?: (props: PointerProps) => ReactNode;
3031
}
3132

3233
export interface TooltipWrapperProps

0 commit comments

Comments
 (0)