[DRAFT] Tooltip Draft PR

.eslintrc.js

@@ -3,6 +3,7 @@ module.exports = {
     parser: 'babel-eslint',
     rules: {
         'react/jsx-filename-extension': [1, {extensions: ['.js']}],
+        'react/prop-types': [2, {ignore: ['children']}],
     },
     env: {
         jest: true

package.json

@@ -53,7 +53,7 @@
     "react-native-keyboard-spacer": "^0.4.1",
     "react-native-render-html": "^4.2.3",
     "react-native-safe-area-context": "^3.1.4",
-    "react-native-web": "^0.13.5",
+    "react-native-web": "^0.14.7",
     "react-native-webview": "^10.6.0",
     "react-router-dom": "^5.2.0",
     "react-router-native": "^5.2.0",

src/components/Tooltip/Triangle.js

@@ -0,0 +1,21 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import {View} from 'react-native';
+import styles from './styles';
+
+const propTypes = {
+    isPointingDown: PropTypes.bool
+};
+
+const defaultProps = {
+    isPointingDown: false
+};
+
+const Triangle = ({isPointingDown}) => (
+    <View style={[styles.triangle, isPointingDown ? styles.down : {}]} />
+);
+
+Triangle.propTypes = propTypes;
+Triangle.defaultProps = defaultProps;
+
+export default Triangle;

src/components/Tooltip/getTooltipCoordinates.js

@@ -0,0 +1,48 @@
+import {Dimensions} from 'react-native';
+
+/**
+ * ~Tooltip coordinate system:~
+ * The tooltip coordinates are based on the element which it is wrapping.
+ * If the element is too far to the left or right of the page, then we want the tooltip to
+ * be positioned on its right or left (respectively).
+ * If the element is on the top half of the page, we'll have the tooltip below it, and if
+ * the element is on the bottom half of the page, we'll have the tooltip above it.
+ *
+ * Currently we're using the value, 10, as a buffer distance from the tooltip to the element. 
+ *
+ * @param {number} componentWidth
+ * @param {number} componentHeight
+ * @param {number} xOffset The distance between the left side of the screen and the left side of the component.
+ * @param {number} yOffset The distance between the top of the screen and the top of the component.
+ *
+ * @returns {object} Returns coordinates for the top left corner of the tooltip RELATIVE to the element being hovered.
+ */
+export default function (componentWidth, componentHeight, xOffset, yOffset) {
+    const windowWidth = Dimensions.get('screen').width;
+    const windowHeight = Dimensions.get('screen').height;
+
+
+    const centerX = (componentWidth / 2);
+    const centerY = (componentHeight / 2);
+
+    let gutter = '';
+    let inBottom = yOffset > (windowHeight / 2);
+    let tooltipX = centerX;
+    let tooltipY = inBottom ? componentHeight + 15 : 15;
+
+    // Determine if we're in a danger gutter
+    // Left Gutter
+    if(centerX < 75 ) {
+        // letting 10 be the buffer distance between the element and the tooltip
+        gutter = 'left';
+        tooltipX = componentWidth + 3;
+    }
+    // Right Gutter
+    if (windowWidth - centerX < 75) {
+        gutter = 'right';
+        tooltipX = - 3;
+    }
+
+    console.log(`tooltipX: ${tooltipX}, tooltipY: ${tooltipY}, gutter: ${gutter}, inBottom: ${inBottom}`);
+    return [tooltipX, tooltipY, gutter, inBottom];
+}

src/components/Tooltip/index.js

@@ -0,0 +1,105 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import {
+    Animated, Pressable, Text, View
+} from 'react-native';
+
+import Triangle from './Triangle';
+import styles from './styles';
+
+const propTypes = {
+    textContent: PropTypes.string.isRequired,
+};
+
+class Tooltip extends React.Component {
+    constructor(props) {
+        super(props);
+
+        this.state = {
+            tooltipShown: false,
+            isAnimating: false,
+        };
+
+        this.animation = new Animated.Value(0);
+
+        // The outermost view rendered by this component
+        this.renderedContent = null;
+        this.wrappedElementWidth = 0;
+        this.wrappedElementHeight = 0;
+
+        // The distance between the left side of the rendered view and the left side of the window
+        this.xOffset = 0;
+
+        // The distance between the top of the rendered view and the top of the window
+        this.yOffset = 0;
+
+        this.getPosition = this.getPosition.bind(this);
+        this.toggleTooltip = this.toggleTooltip.bind(this);
+    }
+
+    getPosition() {
+        this.renderedContent.measureInWindow((x, y, width, height) => {
+            this.xOffset = x;
+            this.yOffset = y;
+            this.wrappedElementWidth = width;
+            this.wrappedElementHeight = height;
+        });
+    }
+
+    toggleTooltip() {
+        Animated.timing(this.animation, {
+            toValue: this.state.tooltipShown ? 0 : 1,
+            duration: 200,
+        }).start(() => {
+            this.setState(prevState => ({tooltipShown: !prevState.tooltipShown}));
+        });
+    }
+
+    render() {
+        const toolTipStyle = styles.getTooltipStyle(
+            this.wrappedElementWidth,
+            this.wrappedElementHeight,
+            this.xOffset,
+            this.yOffset,
+        );
+        const {pointerWrapperViewStyle, shouldPointDown} = styles.getPointerStyle(
+            this.wrappedElementWidth,
+            this.wrappedElementHeight,
+            this.xOffset,
+            this.yOffset,
+            toolTipStyle.top,
+        );
+        const interpolatedSize = this.animation.interpolate({
+            inputRange: [0, 1],
+            outputRange: [0, 1],
+        });
+
+        return (
+            <View
+                ref={e => (this.renderedContent = e)}
+                onLayout={e => (this.getPosition(e))}
+                collapsable={false}
+            >
+                <Pressable>
+                    {({hovered}) => {
+                        if (!this.state.isAnimating && this.state.tooltipShown !== hovered) {
+                            this.toggleTooltip();
+                        }
+                        return (this.props.children);
+                    }}
+                </Pressable>
+                <Animated.View style={{transform: [{scale: interpolatedSize}]}}>
+                    <View style={pointerWrapperViewStyle}>
+                        <Triangle isPointingDown={shouldPointDown} />
+                    </View>
+                    <View style={toolTipStyle}>
+                        <Text style={styles.tooltipText}>{this.props.textContent}</Text>
+                    </View>
+                </Animated.View>
+            </View>
+        );
+    }
+}
+
+Tooltip.propTypes = propTypes;
+export default Tooltip;

src/components/Tooltip/styles.js

@@ -0,0 +1,75 @@
+import gStyles, {colors} from '../../styles/StyleSheet';
+import getTooltipCoordinates from './getTooltipCoordinates';
+import {Dimensions} from 'react-native';
+
+const backgroundColor = `${colors.heading}cc`;
+
+function getTooltipStyle(elementWidth, elementHeight, xOffset, yOffset) {
+    const [x, y, gutter, inBottom] = getTooltipCoordinates(elementWidth, elementHeight, xOffset, yOffset);
+    const styles = {
+        position: 'absolute',
+        width: 150,
+        height: 60,
+        left: x,
+        color: colors.textReversed,
+        backgroundColor: colors.red,
+        display: 'flex',
+        flex: 1,
+        justifyContent: 'center',
+        alignItems: 'center',
+        borderRadius: 10,
+        padding: 10,
+    };
+    if (!gutter) {
+        // If we are NOT in a gutter, we will want to center the tooltip on the element
+        styles.transform = [{translateX: -75}];
+    } 
+    if (inBottom) {
+        // If we're on the bottom of the page, we'll want to use the bottom attribute rather than the top
+        // this allows us to position the tooltip without actually knowing how large it is.
+
+        styles.bottom = y;
+    } else {
+        styles.top = y;
+    }
+    return styles;
+}
+
+function getPointerStyle(elementWidth, elementHeight, xOffset, yOffset, tooltipY) {
+    const shouldPointDown = yOffset > Dimensions.get('screen').height / 2;
+    console.log(`yOffset ${yOffset}`);
+    console.log(`shouldPointDown ${shouldPointDown}`);
+    console.log(`Dimensions.get('screen').height ${Dimensions.get('screen').height}`);
+    return {
+        pointerWrapperViewStyle: {
+            position: 'absolute',
+            top: shouldPointDown ? -(elementHeight + 15) : 0,
+            left: ((elementWidth) / 2) - 7.5,
+        },
+        shouldPointDown,
+    };
+}
+
+export default {
+    getTooltipStyle,
+    getPointerStyle,
+    tooltipText: {
+        color: colors.text,
+        ...gStyles.textMicro,
+    },
+    triangle: {
+        width: 0,
+        height: 0,
+        backgroundColor: 'transparent',
+        borderStyle: 'solid',
+        borderLeftWidth: 8,
+        borderRightWidth: 8,
+        borderBottomWidth: 15,
+        borderLeftColor: 'transparent',
+        borderRightColor: 'transparent',
+        borderBottomColor: colors.red,
+    },
+    down: {
+        transform: [{rotate: '180deg'}],
+    },
+};