rn-inkpad/dist/components/tooltip/Tooltip.js

<img src="https://res.cloudinary.com/fercloudinary/image/upload/v1715452841/packages/inkpad-banner_acl0xl.png" />

"use strict";
var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
    if (k2 === undefined) k2 = k;
    var desc = Object.getOwnPropertyDescriptor(m, k);
    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
      desc = { enumerable: true, get: function() { return m[k]; } };
    }
    Object.defineProperty(o, k2, desc);
}) : (function(o, m, k, k2) {
    if (k2 === undefined) k2 = k;
    o[k2] = m[k];
}));
var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
    Object.defineProperty(o, "default", { enumerable: true, value: v });
}) : function(o, v) {
    o["default"] = v;
});
var __importStar = (this && this.__importStar) || function (mod) {
    if (mod && mod.__esModule) return mod;
    var result = {};
    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
    __setModuleDefault(result, mod);
    return result;
};
Object.defineProperty(exports, "__esModule", { value: true });
exports.Tooltip = void 0;
const react_1 = __importStar(require("react"));
const react_native_1 = require("react-native");
const hooks_1 = require("../../hooks");
const Triangle_1 = require("./Triangle");
const Tooltip = ({ text, children }) => {
    const [tooltipVisible, setTooltipVisible] = (0, react_1.useState)(false);
    const [layout, setLayout] = (0, react_1.useState)({ x: 0, y: 0, width: 0, height: 0 });
    const [translateX, setTranslateX] = (0, react_1.useState)(0);
    const [isUp, setIsUp] = (0, react_1.useState)(true);
    const [position, setPosition] = (0, react_1.useState)({});
    const viewRef = (0, react_1.useRef)(null);
    const { opacity, fadeIn, fadeOut } = (0, hooks_1.useAnimation)();
    const { width, height } = react_native_1.Dimensions.get('screen');
    const handleLayout = (event) => {
        const { width, height } = event.nativeEvent.layout;
        if (!!viewRef.current) {
            viewRef.current.measureInWindow((x, y) => {
                setLayout({ x, y, width, height });
            });
        }
    };
    const tooltipLayout = (event) => {
        const lay = event.nativeEvent.layout;
        console.log('Coords:', layout);
        console.log('Width: ', width);
        console.log('C Width', lay);
        if (layout.y - lay.height < 30) {
            setPosition({
                bottom: -(layout.height + 12),
                left: lay.width,
            });
            setIsUp(false);
        }
        else {
            setPosition({
                bottom: layout.height + 12,
                left: width - 10 < layout.y
                    ? layout.y - (lay.width + (layout.y - width) + 25)
                    : lay.width - 15,
            });
            setIsUp(true);
        }
        setTranslateX(-lay.width + layout.width / 2);
    };
    const handleVisible = () => {
        if (tooltipVisible) {
            fadeOut(500);
            setTimeout(() => {
                setTooltipVisible(false);
            }, 500);
        }
        else {
            setTooltipVisible(true);
            fadeIn(500);
        }
    };
    return (<react_native_1.View style={styles.container} ref={viewRef} onLayout={handleLayout}>
      <react_native_1.TouchableOpacity onPress={handleVisible} activeOpacity={0.8}>
        {children}
      </react_native_1.TouchableOpacity>
      {tooltipVisible && (<react_native_1.Animated.View onLayout={tooltipLayout} style={{
                ...styles.tooltipContainer,
                maxWidth: width / 2,
                width: width / 2 > (text?.length ?? 0) * 5
                    ? (text?.length ?? 0) * 5 + 35
                    : width / 2,
                opacity,
                transform: [{ translateX }],
                left: position.left,
                bottom: position.bottom,
            }}>
          <react_native_1.Text style={styles.tooltipText}>{text}</react_native_1.Text>
          <Triangle_1.Triangle direction={isUp ? 'down' : 'up'} style={{
                position: 'absolute',
                top: isUp ? undefined : -12,
                bottom: isUp ? -12 : undefined,
                left: 5,
            }}/>
        </react_native_1.Animated.View>)}
    </react_native_1.View>);
};
exports.Tooltip = Tooltip;
const styles = react_native_1.StyleSheet.create({
    container: {
        position: 'relative',
    },
    tooltipContainer: {
        position: 'absolute',
        backgroundColor: 'rgba(0, 0, 0, 0.7)',
        // minWidth: 300,
        borderRadius: 4,
        padding: 10,
        zIndex: 99,
        flex: 1,
    },
    tooltipText: {
        color: '#FFF',
    },
});