mopinion-react-native-sdk/dist/components/Tooltip.js

Collect in-app feedback with Mopinion for React Native. Built fully in React Native for optimal integration with your React Native app.

var _interopRequireDefault=require("@babel/runtime/helpers/interopRequireDefault");Object.defineProperty(exports,"__esModule",{value:true});exports.default=Tooltip;var _slicedToArray2=_interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));var _react=require("react");var _reactNative=require("react-native");var _Icon=_interopRequireDefault(require("./Icon"));var _styles=require("../styles");var _jsxRuntime=require("react/jsx-runtime");var styles=_reactNative.StyleSheet.create({button:{borderRadius:24,backgroundColor:'#b6b6b6',width:24,height:24,justifyContent:'center',alignItems:'center'},icon:{color:'#fff'},container:{position:'relative'},tooltip:{position:'absolute',top:0,right:0,opacity:0,zIndex:-1,backgroundColor:'rgba(0, 0, 0,.7)',padding:(0,_styles.spacing)(1),borderRadius:_styles.baseTheme.borderRadius},tooltipText:{display:'flex',color:'#fff',fontWeight:'600'}});function Tooltip(props){var title=props.title,_props$align=props.align,align=_props$align===void 0?'top':_props$align;var _useState=(0,_react.useState)(false),_useState2=(0,_slicedToArray2.default)(_useState,2),show=_useState2[0],setShow=_useState2[1];var _useState3=(0,_react.useState)(0),_useState4=(0,_slicedToArray2.default)(_useState3,2),height=_useState4[0],setHeight=_useState4[1];var _useWindowDimensions=(0,_reactNative.useWindowDimensions)(),width=_useWindowDimensions.width;var theme=(0,_styles.useTheme)();var handleTooltipLayout=function handleTooltipLayout(event){var layout=event.nativeEvent.layout;setHeight(layout.height);};var tooltipStyle=[styles.tooltip,{transform:[{translateY:align==='top'?-height-2:24+2}]},{opacity:show?1:0,maxWidth:width*0.5,width:title.length*3,zIndex:show?1:-1}];return(0,_jsxRuntime.jsx)(_reactNative.TouchableOpacity,{onPress:function onPress(){return setShow(function(prev){return!prev;});},children:(0,_jsxRuntime.jsxs)(_reactNative.View,{style:styles.container,children:[(0,_jsxRuntime.jsx)(_reactNative.View,{style:[styles.button,{backgroundColor:theme.darkGreyAccentColor}],children:(0,_jsxRuntime.jsx)(_Icon.default,{icon:"question",style:styles.icon})}),show&&(0,_jsxRuntime.jsx)(_reactNative.View,{style:tooltipStyle,onLayout:handleTooltipLayout,children:(0,_jsxRuntime.jsx)(_reactNative.Text,{numberOfLines:5,style:styles.tooltipText,children:title})})]})});}