54 lines
1.5 KiB
TypeScript
54 lines
1.5 KiB
TypeScript
import React from "react";
|
|
import { View } from "react-native";
|
|
import { TooltipProps } from "../../../App/common/interface/components/TooltipData";
|
|
import styles from "./TooltipStyle";
|
|
|
|
const Tooltip = ({ children, tooltipStyle }: TooltipProps) => {
|
|
const {
|
|
containerStyle,
|
|
contentBoxStyle,
|
|
tooltipSize = 6,
|
|
} = tooltipStyle || {};
|
|
|
|
const borderColor = contentBoxStyle?.borderColor || "black";
|
|
const backgroundColor = contentBoxStyle?.backgroundColor || "black";
|
|
const borderWidth = contentBoxStyle?.borderWidth || 0;
|
|
return (
|
|
<View style={[styles.container, containerStyle]}>
|
|
<View>
|
|
<View
|
|
style={[
|
|
styles.tooltipBorder,
|
|
{
|
|
borderBottomColor: borderColor,
|
|
borderLeftWidth: tooltipSize + borderWidth,
|
|
borderRightWidth: tooltipSize + borderWidth,
|
|
borderBottomWidth: tooltipSize + borderWidth,
|
|
},
|
|
]}
|
|
/>
|
|
<View
|
|
style={[
|
|
styles.tooltipInner,
|
|
{
|
|
borderBottomColor: backgroundColor,
|
|
borderLeftWidth: tooltipSize,
|
|
borderRightWidth: tooltipSize,
|
|
borderBottomWidth: tooltipSize,
|
|
marginTop: borderWidth * 2,
|
|
marginLeft: borderWidth,
|
|
},
|
|
]}
|
|
/>
|
|
</View>
|
|
<View
|
|
style={[{ borderColor, backgroundColor, borderWidth }, contentBoxStyle]}
|
|
>
|
|
{children}
|
|
</View>
|
|
</View>
|
|
);
|
|
};
|
|
|
|
export default Tooltip;
|