@webority-technologies/mobile 0.0.1

package/lib/commonjs/components/Tooltip/Tooltip.js

@@ -0,0 +1,363 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = exports.Tooltip = void 0;
+var _react = _interopRequireWildcard(require("react"));
+var _reactNative = require("react-native");
+var _index = require("../../theme/index.js");
+var _jsxRuntime = require("react/jsx-runtime");
+function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function (e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != typeof e && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (const t in e) "default" !== t && {}.hasOwnProperty.call(e, t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, t)) && (i.get || i.set) ? o(f, t, i) : f[t] = e[t]); return f; })(e, t); }
+const TOOLTIP_GAP = 8;
+const SCREEN_PADDING = 8;
+const PRESS_AUTO_HIDE_MS = 4000;
+const ARROW_HALF_WIDTH = 4; // half of 8px arrow base
+const ARROW_HEIGHT = 6;
+const ARROW_CORNER_PADDING = 12;
+const Tooltip = props => {
+  const {
+    content,
+    children,
+    placement = 'auto',
+    trigger = 'longPress',
+    visible: controlledVisible,
+    onVisibleChange,
+    hideOnContentPress = true,
+    maxWidth = 240,
+    showArrow = true,
+    accessibilityLabel,
+    style,
+    testID
+  } = props;
+  const theme = (0, _index.useTheme)();
+  const styles = (0, _react.useMemo)(() => buildStyles(theme), [theme]);
+  const isControlled = trigger === 'manual' || typeof controlledVisible === 'boolean';
+  const [internalVisible, setInternalVisible] = (0, _react.useState)(false);
+  const visible = isControlled ? Boolean(controlledVisible) : internalVisible;
+  const [anchor, setAnchor] = (0, _react.useState)(null);
+  const [size, setSize] = (0, _react.useState)({
+    width: 0,
+    height: 0
+  });
+  const wrapperRef = (0, _react.useRef)(null);
+  const scale = (0, _react.useRef)(new _reactNative.Animated.Value(visible ? 1 : 0.85)).current;
+  const opacity = (0, _react.useRef)(new _reactNative.Animated.Value(visible ? 1 : 0)).current;
+  const autoHideTimer = (0, _react.useRef)(null);
+  const didMount = (0, _react.useRef)(false);
+  const setVisible = (0, _react.useCallback)(next => {
+    if (!isControlled) setInternalVisible(next);
+    onVisibleChange?.(next);
+  }, [isControlled, onVisibleChange]);
+  const measureAnchor = (0, _react.useCallback)(() => {
+    if (!wrapperRef.current) return;
+    wrapperRef.current.measureInWindow((x, y, width, height) => {
+      setAnchor({
+        x,
+        y,
+        width,
+        height
+      });
+    });
+  }, []);
+  const handleTrigger = (0, _react.useCallback)(_event => {
+    if (trigger === 'manual') return;
+    measureAnchor();
+    setVisible(true);
+  }, [trigger, measureAnchor, setVisible]);
+  const handleHide = (0, _react.useCallback)(() => {
+    setVisible(false);
+  }, [setVisible]);
+
+  // Animations + auto-hide
+  (0, _react.useEffect)(() => {
+    // On first mount, skip the entry animation if we're already visible
+    // (avoids native-driver bootstrap issues during render).
+    if (!didMount.current) {
+      didMount.current = true;
+      if (visible) {
+        measureAnchor();
+        if (trigger === 'press') {
+          if (autoHideTimer.current) clearTimeout(autoHideTimer.current);
+          autoHideTimer.current = setTimeout(() => {
+            handleHide();
+          }, PRESS_AUTO_HIDE_MS);
+        }
+      }
+      return () => {
+        if (autoHideTimer.current) {
+          clearTimeout(autoHideTimer.current);
+          autoHideTimer.current = null;
+        }
+      };
+    }
+    if (visible) {
+      measureAnchor();
+      _reactNative.Animated.parallel([_reactNative.Animated.spring(scale, {
+        toValue: 1,
+        damping: theme.motion.spring.snappy.damping,
+        stiffness: theme.motion.spring.snappy.stiffness,
+        mass: theme.motion.spring.snappy.mass,
+        useNativeDriver: true
+      }), _reactNative.Animated.timing(opacity, {
+        toValue: 1,
+        duration: theme.motion.duration.fast,
+        useNativeDriver: true
+      })]).start();
+      if (trigger === 'press') {
+        if (autoHideTimer.current) clearTimeout(autoHideTimer.current);
+        autoHideTimer.current = setTimeout(() => {
+          handleHide();
+        }, PRESS_AUTO_HIDE_MS);
+      }
+    } else {
+      _reactNative.Animated.parallel([_reactNative.Animated.timing(scale, {
+        toValue: 0.85,
+        duration: 150,
+        useNativeDriver: true
+      }), _reactNative.Animated.timing(opacity, {
+        toValue: 0,
+        duration: 150,
+        useNativeDriver: true
+      })]).start();
+      if (autoHideTimer.current) {
+        clearTimeout(autoHideTimer.current);
+        autoHideTimer.current = null;
+      }
+    }
+    return () => {
+      if (autoHideTimer.current) {
+        clearTimeout(autoHideTimer.current);
+        autoHideTimer.current = null;
+      }
+    };
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [visible]);
+  const handleContentLayout = e => {
+    const {
+      width,
+      height
+    } = e.nativeEvent.layout;
+    if (width !== size.width || height !== size.height) {
+      setSize({
+        width,
+        height
+      });
+    }
+  };
+  const position = (0, _react.useMemo)(() => {
+    const screen = _reactNative.Dimensions.get('window');
+    if (!anchor) {
+      // Fallback before measurement: render off-screen-ish at top-left, will reposition on layout.
+      return {
+        top: SCREEN_PADDING,
+        left: SCREEN_PADDING,
+        placement: 'bottom',
+        arrowOffset: 0
+      };
+    }
+    const tooltipWidth = size.width || Math.min(maxWidth, screen.width - SCREEN_PADDING * 2);
+    const tooltipHeight = size.height || 0;
+
+    // Choose placement.
+    let resolved;
+    if (placement === 'auto') {
+      const space = {
+        top: anchor.y,
+        bottom: screen.height - (anchor.y + anchor.height),
+        left: anchor.x,
+        right: screen.width - (anchor.x + anchor.width)
+      };
+      const max = Math.max(space.top, space.bottom, space.left, space.right);
+      if (max === space.bottom) resolved = 'bottom';else if (max === space.top) resolved = 'top';else if (max === space.right) resolved = 'right';else resolved = 'left';
+    } else {
+      resolved = placement;
+    }
+    let top = 0;
+    let left = 0;
+    if (resolved === 'top') {
+      top = anchor.y - tooltipHeight - TOOLTIP_GAP;
+      left = anchor.x + anchor.width / 2 - tooltipWidth / 2;
+    } else if (resolved === 'bottom') {
+      top = anchor.y + anchor.height + TOOLTIP_GAP;
+      left = anchor.x + anchor.width / 2 - tooltipWidth / 2;
+    } else if (resolved === 'left') {
+      top = anchor.y + anchor.height / 2 - tooltipHeight / 2;
+      left = anchor.x - tooltipWidth - TOOLTIP_GAP;
+    } else {
+      top = anchor.y + anchor.height / 2 - tooltipHeight / 2;
+      left = anchor.x + anchor.width + TOOLTIP_GAP;
+    }
+
+    // Clamp to screen.
+    left = Math.max(SCREEN_PADDING, Math.min(left, screen.width - tooltipWidth - SCREEN_PADDING));
+    top = Math.max(SCREEN_PADDING, Math.min(top, screen.height - tooltipHeight - SCREEN_PADDING));
+
+    // Compute arrow offset along the card's trigger-facing edge so the caret stays
+    // pointing at the trigger even after the card is clamped to the viewport.
+    let arrowOffset = 0;
+    if (resolved === 'top' || resolved === 'bottom') {
+      const triggerCenterX = anchor.x + anchor.width / 2;
+      const desired = triggerCenterX - left; // x-offset from card's left edge
+      const min = ARROW_CORNER_PADDING;
+      const max = Math.max(min, tooltipWidth - ARROW_CORNER_PADDING);
+      arrowOffset = Math.max(min, Math.min(desired, max));
+    } else {
+      const triggerCenterY = anchor.y + anchor.height / 2;
+      const desired = triggerCenterY - top;
+      const min = ARROW_CORNER_PADDING;
+      const max = Math.max(min, tooltipHeight - ARROW_CORNER_PADDING);
+      arrowOffset = Math.max(min, Math.min(desired, max));
+    }
+    return {
+      top,
+      left,
+      placement: resolved,
+      arrowOffset
+    };
+  }, [anchor, size, placement, maxWidth]);
+
+  // Build the cloned trigger.
+  const triggerProps = {};
+  if (trigger === 'longPress') {
+    triggerProps.onLongPress = handleTrigger;
+    triggerProps.accessibilityHint = 'Long press for more info';
+  } else if (trigger === 'press') {
+    const childOnPress = children.props.onPress;
+    triggerProps.onPress = e => {
+      childOnPress?.(e);
+      handleTrigger(e);
+    };
+  }
+  const clonedChild = /*#__PURE__*/_react.default.cloneElement(children, triggerProps);
+  const a11yLabel = accessibilityLabel ?? (typeof content === 'string' ? content : 'Tooltip');
+
+  // Arrow style: a CSS-triangle implemented via 0-width view with transparent
+  // borders. We rotate the base (placement='top' = arrow on bottom-edge pointing
+  // down) into the four cardinal orientations.
+  const arrowStyle = (0, _react.useMemo)(() => {
+    if (!showArrow) return null;
+    const arrowColor = theme.colors.background.inverse;
+    const base = {
+      position: 'absolute',
+      width: 0,
+      height: 0,
+      backgroundColor: 'transparent',
+      borderStyle: 'solid',
+      borderLeftWidth: ARROW_HALF_WIDTH,
+      borderRightWidth: ARROW_HALF_WIDTH,
+      borderBottomWidth: ARROW_HEIGHT,
+      borderTopWidth: 0,
+      borderLeftColor: 'transparent',
+      borderRightColor: 'transparent',
+      borderTopColor: 'transparent',
+      borderBottomColor: arrowColor
+    };
+    if (position.placement === 'top') {
+      // Card is above trigger; arrow on bottom edge, pointing down.
+      return {
+        ...base,
+        bottom: -ARROW_HEIGHT,
+        left: position.arrowOffset - ARROW_HALF_WIDTH,
+        transform: [{
+          rotate: '180deg'
+        }]
+      };
+    }
+    if (position.placement === 'bottom') {
+      // Card below trigger; arrow on top edge, pointing up.
+      return {
+        ...base,
+        top: -ARROW_HEIGHT,
+        left: position.arrowOffset - ARROW_HALF_WIDTH
+      };
+    }
+    if (position.placement === 'left') {
+      // Card left of trigger; arrow on right edge, pointing right.
+      return {
+        ...base,
+        right: -ARROW_HEIGHT,
+        top: position.arrowOffset - ARROW_HALF_WIDTH,
+        transform: [{
+          rotate: '90deg'
+        }]
+      };
+    }
+    // 'right': card right of trigger; arrow on left edge, pointing left.
+    return {
+      ...base,
+      left: -ARROW_HEIGHT,
+      top: position.arrowOffset - ARROW_HALF_WIDTH,
+      transform: [{
+        rotate: '-90deg'
+      }]
+    };
+  }, [showArrow, position, theme]);
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
+      ref: wrapperRef,
+      collapsable: false,
+      onLayout: measureAnchor,
+      testID: testID,
+      children: clonedChild
+    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Modal, {
+      visible: visible,
+      transparent: true,
+      statusBarTranslucent: true,
+      presentationStyle: "overFullScreen",
+      animationType: "none",
+      onRequestClose: handleHide,
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Pressable, {
+        style: _reactNative.StyleSheet.absoluteFill,
+        onPress: hideOnContentPress ? handleHide : undefined,
+        accessibilityLabel: "Close tooltip",
+        accessibilityRole: "button",
+        children: visible ? /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.Animated.View, {
+          accessibilityRole: 'tooltip',
+          accessibilityLiveRegion: "polite",
+          accessibilityLabel: a11yLabel,
+          onLayout: handleContentLayout,
+          style: [{
+            position: 'absolute',
+            top: position.top,
+            left: position.left,
+            maxWidth,
+            opacity,
+            transform: [{
+              scale
+            }]
+          }, style],
+          children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
+            style: [styles.tooltip, {
+              backgroundColor: theme.colors.background.inverse,
+              borderRadius: theme.radius.md,
+              paddingHorizontal: theme.spacing.md,
+              paddingVertical: theme.spacing.sm,
+              ...theme.shadows.lg,
+              shadowColor: theme.shadows.lg.shadowColor
+            }],
+            children: typeof content === 'string' ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
+              style: {
+                color: theme.colors.text.inverse,
+                fontSize: theme.typography.fontSize.sm,
+                lineHeight: 18
+              },
+              children: content
+            }) : content
+          }), arrowStyle ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
+            style: arrowStyle,
+            pointerEvents: "none"
+          }) : null]
+        }) : null
+      })
+    })]
+  });
+};
+exports.Tooltip = Tooltip;
+const buildStyles = _theme => _reactNative.StyleSheet.create({
+  tooltip: {
+    overflow: 'hidden'
+  }
+});
+var _default = exports.default = Tooltip;
+//# sourceMappingURL=Tooltip.js.map

package/lib/commonjs/components/Tooltip/index.js

@@ -0,0 +1,20 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+Object.defineProperty(exports, "Tooltip", {
+  enumerable: true,
+  get: function () {
+    return _Tooltip.Tooltip;
+  }
+});
+Object.defineProperty(exports, "default", {
+  enumerable: true,
+  get: function () {
+    return _Tooltip.default;
+  }
+});
+var _Tooltip = _interopRequireWildcard(require("./Tooltip.js"));
+function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function (e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != typeof e && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (const t in e) "default" !== t && {}.hasOwnProperty.call(e, t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, t)) && (i.get || i.set) ? o(f, t, i) : f[t] = e[t]); return f; })(e, t); }
+//# sourceMappingURL=index.js.map