react-native-ui-lib 7.36.0 → 7.37.0-snapshot.6102

package/src/components/hint/hooks/useHintPosition.js

@@ -0,0 +1,119 @@
+import _clamp from "lodash/clamp";
+import { useMemo } from 'react';
+import { Constants } from "../../../commons/new";
+import { HintPositions, TargetAlignments } from "../types";
+export default function useHintPosition({
+  isUsingModal,
+  targetLayoutState,
+  targetLayoutInWindowState,
+  position,
+  containerWidth,
+  useSideTip,
+  offset,
+  edgeMargins,
+  hintMessageWidth
+}) {
+  const targetMidPosition = useMemo(() => {
+    if (targetLayoutInWindowState?.x !== undefined && targetLayoutInWindowState?.width) {
+      const midPosition = targetLayoutInWindowState?.x + targetLayoutInWindowState?.width / 2;
+      return Constants.isRTL ? containerWidth - midPosition : midPosition;
+    }
+  }, [targetLayoutInWindowState, containerWidth]);
+  const tipSize = useMemo(() => {
+    return useSideTip ? {
+      width: 14,
+      height: 7
+    } : {
+      width: 20,
+      height: 7
+    };
+  }, [useSideTip]);
+
+  // Calculate target's horizontal position on screen (left, center, right)
+  const targetAlignmentOnScreen = useMemo(() => {
+    const _containerWidth = containerWidth - edgeMargins * 2;
+    if (targetMidPosition !== undefined) {
+      if (targetMidPosition > _containerWidth * (4 / 5)) {
+        return TargetAlignments.RIGHT;
+      } else if (targetMidPosition < _containerWidth * (1 / 5)) {
+        return TargetAlignments.LEFT;
+      }
+    }
+    return TargetAlignments.CENTER;
+  }, [targetMidPosition, containerWidth, edgeMargins]);
+
+  // Calc the hint container - a full width rectangle that contains the hint bubble message
+  const hintContainerLayout = useMemo(() => {
+    const containerStyle = {
+      alignItems: 'flex-start'
+    };
+    if (targetLayoutInWindowState?.x !== undefined) {
+      containerStyle.left = -targetLayoutInWindowState.x;
+    }
+    if (position === HintPositions.TOP) {
+      containerStyle.bottom = 0;
+    } else if (targetLayoutInWindowState?.height) {
+      containerStyle.top = targetLayoutInWindowState.height;
+    }
+    return containerStyle;
+  }, [position, targetLayoutInWindowState]);
+  const hintPositionStyle = useMemo(() => {
+    const positionStyle = {
+      left: 0
+    };
+    if (targetMidPosition !== undefined && hintMessageWidth !== undefined) {
+      positionStyle.left = targetMidPosition;
+      positionStyle.left -= hintMessageWidth / 2;
+      positionStyle.left = _clamp(positionStyle.left, edgeMargins, containerWidth - edgeMargins - hintMessageWidth);
+    }
+    return positionStyle;
+  }, [hintMessageWidth, edgeMargins, containerWidth, targetMidPosition]);
+  const tipPositionStyle = useMemo(() => {
+    const positionStyle = {};
+    const _containerWidth = containerWidth - (isUsingModal ? 0 : edgeMargins);
+    if (position === HintPositions.TOP) {
+      positionStyle.bottom = offset - tipSize.height;
+      !useSideTip ? positionStyle.bottom += 1 : undefined;
+    } else {
+      positionStyle.top = offset - tipSize.height;
+    }
+    if (targetMidPosition !== undefined && targetLayoutInWindowState?.x !== undefined && targetLayoutInWindowState?.width && hintMessageWidth !== undefined) {
+      const layoutWidth = targetLayoutInWindowState?.width || 0;
+      const targetMidWidth = layoutWidth / 2;
+      const tipMidWidth = tipSize.width / 2;
+      let sideTipPosition = 0;
+      if (targetAlignmentOnScreen === TargetAlignments.LEFT || targetAlignmentOnScreen === TargetAlignments.CENTER) {
+        sideTipPosition = Math.max(hintPositionStyle.left, targetLayoutInWindowState.x);
+      } else if (targetAlignmentOnScreen === TargetAlignments.RIGHT) {
+        sideTipPosition = Math.min(hintPositionStyle.left + hintMessageWidth, targetLayoutInWindowState.x + targetLayoutInWindowState.width) - edgeMargins;
+      }
+      const leftPosition = useSideTip ? sideTipPosition : targetMidPosition - tipMidWidth;
+      const rightPosition = useSideTip ? _containerWidth - targetLayoutInWindowState.x - layoutWidth : _containerWidth - targetLayoutInWindowState.x - targetMidWidth - tipMidWidth;
+      positionStyle.left = Constants.isRTL ? rightPosition : leftPosition;
+    }
+    return positionStyle;
+  }, [targetMidPosition, targetLayoutInWindowState, hintMessageWidth, hintPositionStyle, containerWidth, position, targetAlignmentOnScreen, offset, useSideTip, tipSize, isUsingModal, edgeMargins]);
+  const hintPadding = useMemo(() => {
+    const paddings = {
+      paddingVertical: offset
+    };
+    return paddings;
+  }, [offset]);
+
+  // This is the offset between the target relative position and its absolute position on the screen
+  const targetScreenToRelativeOffset = useMemo(() => {
+    return {
+      left: (targetLayoutState?.x ?? 0) - (targetLayoutInWindowState?.x ?? 0),
+      top: (targetLayoutState?.y ?? 0) - (targetLayoutInWindowState?.y ?? 0)
+    };
+  }, [targetLayoutState, targetLayoutInWindowState]);
+  return {
+    tipSize,
+    targetAlignmentOnScreen,
+    hintContainerLayout,
+    tipPositionStyle,
+    hintPadding,
+    hintPositionStyle,
+    targetScreenToRelativeOffset
+  };
+}

package/src/components/hint/hooks/useHintVisibility.d.ts

@@ -0,0 +1,6 @@
+import { Animated } from 'react-native';
+export default function useHintVisibility(visible?: boolean): {
+    hintUnmounted: boolean;
+    visibilityProgress: Animated.Value;
+    animateHint: () => void;
+};

package/src/components/hint/hooks/useHintVisibility.js

@@ -0,0 +1,26 @@
+import { useRef, useCallback, useState } from 'react';
+import { Animated } from 'react-native';
+import { useDidUpdate } from "../../../hooks";
+const ANIMATION_DURATION = 170;
+export default function useHintVisibility(visible) {
+  const [hintUnmounted, setHintUnmounted] = useState(!visible);
+  const visibleAnimated = useRef(new Animated.Value(Number(!!visible)));
+  useDidUpdate(() => {
+    animateHint();
+  }, [visible]);
+  const toggleAnimationEndedToRemoveHint = useCallback(() => {
+    setHintUnmounted(!visible);
+  }, [visible]);
+  const animateHint = useCallback(() => {
+    Animated.timing(visibleAnimated.current, {
+      toValue: Number(!!visible),
+      duration: ANIMATION_DURATION,
+      useNativeDriver: true
+    }).start(toggleAnimationEndedToRemoveHint);
+  }, [visible, toggleAnimationEndedToRemoveHint]);
+  return {
+    hintUnmounted,
+    visibilityProgress: visibleAnimated.current,
+    animateHint
+  };
+}

package/src/components/hint/index.d.ts

@@ -1,191 +1,22 @@
-import React, { Component, ReactElement, ElementRef } from 'react';
-import { Animated, GestureResponderEvent, ImageSourcePropType, ImageStyle, StyleProp, TextStyle, ViewStyle, LayoutChangeEvent, View as RNView } from 'react-native';
-declare enum TARGET_POSITIONS {
-    LEFT = "left",
-    RIGHT = "right",
-    CENTER = "center"
-}
-declare enum HintPositions {
-    TOP = "top",
-    BOTTOM = "bottom"
-}
-interface HintTargetFrame {
-    x?: number;
-    y?: number;
-    width?: number;
-    height?: number;
-}
-type Position = Pick<ViewStyle, 'top' | 'bottom' | 'left' | 'right'>;
-type HintPositionStyle = Position & Pick<ViewStyle, 'alignItems'>;
-type Paddings = Pick<ViewStyle, 'paddingLeft' | 'paddingRight' | 'paddingVertical' | 'paddingHorizontal'>;
-type ContentType = string | ReactElement;
-export interface HintProps {
-    /**
-     * Control the visibility of the hint
-     */
-    visible?: boolean;
-    /**
-     * The hint background color
-     */
-    color?: string;
-    /**
-     * The hint message
-     */
-    message?: ContentType | ContentType[];
-    /**
-     * The hint message custom style
-     */
-    messageStyle?: StyleProp<TextStyle>;
-    /**
-     * Icon to show next to the hint's message
-     */
-    icon?: ImageSourcePropType;
-    /**
-     * The icon's style
-     */
-    iconStyle?: StyleProp<ImageStyle>;
-    /**
-     * The hint's position
-     */
-    position?: HintPositions;
-    /**
-     * Provide custom target position instead of wrapping a child
-     */
-    targetFrame?: HintTargetFrame;
-    /**
-     * Open the hint using a Modal component
-     */
-    useModal?: boolean;
-    /**
-     * Show side tips instead of the middle tip
-     */
-    useSideTip?: boolean;
-    /**
-     * The hint's border radius
-     */
-    borderRadius?: number;
-    /**
-     * Hint margins from screen edges
-     */
-    edgeMargins?: number;
-    /**
-     * Hint offset from target
-     */
-    offset?: number;
-    /**
-     * Callback for Hint press
-     */
-    onPress?: () => void;
-    /**
-     * Callback for the background press
-     */
-    onBackgroundPress?: (event: GestureResponderEvent) => void;
-    /**
-     * Color for background overlay (require onBackgroundPress)
-     */
-    backdropColor?: string;
-    /**
-     * The hint container width
-     */
-    containerWidth?: number;
-    /**
-     * Custom content element to render inside the hint container
-     */
-    customContent?: JSX.Element;
-    /**
-     * Remove all hint's paddings
-     */
-    removePaddings?: boolean;
-    /**
-     * Enable shadow (for hint with white background only)
-     */
-    enableShadow?: boolean;
-    /**
-     * The hint's test identifier
-     */
-    testID?: string;
-    /**
-     * Additional styling
-     */
-    style?: StyleProp<ViewStyle>;
-    children?: React.ReactNode;
-}
-interface HintState {
-    targetLayout?: HintTargetFrame;
-    targetLayoutInWindow?: HintTargetFrame;
-    hintUnmounted: boolean;
-}
-/**
- * @description: Hint component for displaying a tooltip over wrapped component
- * @example: https://github.com/wix/react-native-ui-lib/blob/master/demo/src/screens/componentScreens/HintsScreen.tsx
- * @notes: You can either wrap a component or pass a specific targetFrame
- * @gif: https://github.com/wix/react-native-ui-lib/blob/master/demo/showcase/Hint/Hint.gif?raw=true
- */
-declare class Hint extends Component<HintProps, HintState> {
-    static displayName: string;
-    static defaultProps: {
+import React from 'react';
+import { HintPositions, HintProps } from './types';
+declare const Hint: {
+    (props: HintProps): string | number | true | React.JSX.Element | Iterable<React.ReactNode> | null;
+    displayName: string;
+    defaultProps: {
         position: HintPositions;
         useModal: boolean;
     };
-    static positions: typeof HintPositions;
-    targetRef: ElementRef<typeof RNView> | null;
-    hintRef: React.RefObject<RNView>;
-    animationDuration: number;
-    state: {
-        targetLayoutInWindow: {
-            x: number;
-            y: number;
-            width: number;
-            height: number;
-        } | undefined;
-        targetLayout: HintTargetFrame | undefined;
-        hintUnmounted: boolean;
-    };
-    visibleAnimated: Animated.Value;
-    componentDidMount(): void;
-    componentDidUpdate(prevProps: HintProps): void;
-    animateHint: () => void;
-    toggleAnimationEndedToRemoveHint: () => void;
-    focusAccessibilityOnHint: () => void;
-    setTargetRef: (ref: ElementRef<typeof RNView>) => void;
-    onTargetLayout: ({ nativeEvent: { layout } }: LayoutChangeEvent) => void;
-    getAccessibilityInfo(): {
-        accessible: boolean;
-        accessibilityLabel: string;
-    } | undefined;
-    get containerWidth(): number;
-    get targetLayout(): HintTargetFrame | undefined;
-    get showHint(): boolean;
-    get tipSize(): {
-        width: number;
-        height: number;
-    };
-    get hintOffset(): number;
-    get edgeMargins(): number;
-    get useSideTip(): boolean;
-    getTargetPositionOnScreen(): TARGET_POSITIONS;
-    getContainerPosition(): {
-        top: number | undefined;
-        left: number | undefined;
-    } | undefined;
-    getHintPosition(): HintPositionStyle;
-    getHintPadding(): Paddings;
-    getHintAnimatedStyle: () => {
-        opacity: Animated.Value;
-        transform: {
-            translateY: Animated.AnimatedInterpolation<string | number>;
-        }[];
+    positions: typeof HintPositions;
+};
+export { HintProps, Hint };
+declare const _default: React.ForwardRefExoticComponent<HintProps & React.RefAttributes<any>> & {
+    (props: HintProps): string | number | true | React.JSX.Element | Iterable<React.ReactNode> | null;
+    displayName: string;
+    defaultProps: {
+        position: HintPositions;
+        useModal: boolean;
     };
-    getTipPosition(): Position;
-    isUsingModal: () => boolean | undefined;
-    renderOverlay(): React.JSX.Element | undefined;
-    renderHintTip(): React.JSX.Element;
-    renderContent(): React.JSX.Element;
-    renderHint(): React.JSX.Element | undefined;
-    renderHintContainer(): React.JSX.Element;
-    renderMockChildren(): React.JSX.Element | undefined;
-    renderChildren(): React.ReactElement<any, string | React.JSXElementConstructor<any>> | undefined;
-    render(): string | number | true | React.JSX.Element | Iterable<React.ReactNode> | null;
-}
-declare const _default: React.ForwardRefExoticComponent<HintProps & React.RefAttributes<any>> & typeof Hint;
+    positions: typeof HintPositions;
+};
 export default _default;