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

package/src/components/hint/index.js

@@ -1,324 +1,133 @@
-import _isUndefined from "lodash/isUndefined";
-import _isEqual from "lodash/isEqual";
-import _isString from "lodash/isString";
-import React, { Component, isValidElement } from 'react';
-import { Animated, StyleSheet, AccessibilityInfo, findNodeHandle, TouchableWithoutFeedback } from 'react-native';
+import React, { isValidElement, useMemo, useCallback, useRef, useEffect } from 'react';
+import { Animated, StyleSheet, TouchableWithoutFeedback } from 'react-native';
 import { Typography, Spacings, Colors, BorderRadiuses, Shadows } from "../../style";
 import { Constants, asBaseComponent } from "../../commons/new";
 import View from "../view";
-import Text from "../text";
 import Image from "../image";
 import Modal from "../modal";
 import TouchableOpacity from "../touchableOpacity";
+import { HintPositions, HintProps, TargetAlignments } from "./types";
+import useHintVisibility from "./hooks/useHintVisibility";
+import useHintLayout from "./hooks/useHintLayout";
+import useHintAccessibility from "./hooks/useHintAccessibility";
+import useHintPosition from "./hooks/useHintPosition";
+import HintMockChildren from "./HintMockChildren";
+import HintAnchor from "./HintAnchor";
+import HintBubble from "./HintBubble";
 const sideTip = require("./assets/hintTipSide.png");
 const middleTip = require("./assets/hintTipMiddle.png");
 const DEFAULT_COLOR = Colors.$backgroundPrimaryHeavy;
 const DEFAULT_HINT_OFFSET = Spacings.s4;
 const DEFAULT_EDGE_MARGINS = Spacings.s5;
-var TARGET_POSITIONS = /*#__PURE__*/function (TARGET_POSITIONS) {
-  TARGET_POSITIONS["LEFT"] = "left";
-  TARGET_POSITIONS["RIGHT"] = "right";
-  TARGET_POSITIONS["CENTER"] = "center";
-  return TARGET_POSITIONS;
-}(TARGET_POSITIONS || {});
-var HintPositions = /*#__PURE__*/function (HintPositions) {
-  HintPositions["TOP"] = "top";
-  HintPositions["BOTTOM"] = "bottom";
-  return HintPositions;
-}(HintPositions || {}); // TODO: unify with FeatureHighlightFrame
-/**
- * @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
- */
-class Hint extends Component {
-  static displayName = 'Hint';
-  static defaultProps = {
-    position: HintPositions.BOTTOM,
-    useModal: true
-  };
-  static positions = HintPositions;
-  targetRef = null;
-  hintRef = React.createRef();
-  animationDuration = 170;
-  state = {
-    targetLayoutInWindow: undefined,
-    targetLayout: this.props.targetFrame,
-    hintUnmounted: !this.props.visible
-  };
-  visibleAnimated = new Animated.Value(Number(!!this.props.visible));
-  componentDidMount() {
-    this.focusAccessibilityOnHint();
-  }
-  componentDidUpdate(prevProps) {
-    if (prevProps.visible !== this.props.visible) {
-      this.animateHint();
-    }
-  }
-  animateHint = () => {
-    Animated.timing(this.visibleAnimated, {
-      toValue: Number(!!this.props.visible),
-      duration: this.animationDuration,
-      useNativeDriver: true
-    }).start(this.toggleAnimationEndedToRemoveHint);
-  };
-  toggleAnimationEndedToRemoveHint = () => {
-    this.setState({
-      hintUnmounted: !this.props.visible
-    });
-  };
-  focusAccessibilityOnHint = () => {
-    const {
-      message
-    } = this.props;
-    const targetRefTag = findNodeHandle(this.targetRef);
-    const hintRefTag = findNodeHandle(this.hintRef.current);
-    if (targetRefTag && _isString(message)) {
-      AccessibilityInfo.setAccessibilityFocus(targetRefTag);
-    } else if (hintRefTag) {
-      AccessibilityInfo.setAccessibilityFocus(hintRefTag);
-    }
-  };
-  setTargetRef = ref => {
-    this.targetRef = ref;
-    this.focusAccessibilityOnHint();
-  };
-  onTargetLayout = ({
-    nativeEvent: {
-      layout
-    }
-  }) => {
-    if (!_isEqual(this.state.targetLayout, layout)) {
-      this.setState({
-        targetLayout: layout
-      });
-    }
-    if (!this.state.targetLayoutInWindow || this.props.onBackgroundPress) {
-      setTimeout(() => {
-        this.targetRef?.measureInWindow?.((x, y, width, height) => {
-          const targetLayoutInWindow = {
-            x,
-            y,
-            width,
-            height
-          };
-          this.setState({
-            targetLayoutInWindow
-          });
-        });
-      });
-    }
-  };
-  getAccessibilityInfo() {
-    const {
-      visible,
-      message
-    } = this.props;
-    if (visible && _isString(message)) {
-      return {
-        accessible: true,
-        accessibilityLabel: `hint: ${message}`
-      };
-    }
-  }
-  get containerWidth() {
-    const {
-      containerWidth = Constants.windowWidth
-    } = this.props;
-    return containerWidth;
-  }
-  get targetLayout() {
-    const {
-      onBackgroundPress,
-      useModal,
-      targetFrame
-    } = this.props;
-    const {
-      targetLayout,
-      targetLayoutInWindow
-    } = this.state;
-    if (targetFrame) {
-      return targetFrame;
-    }
-    return onBackgroundPress && useModal ? targetLayoutInWindow : targetLayout;
-  }
-  get showHint() {
-    return !!this.targetLayout;
-  }
-  get tipSize() {
-    return this.useSideTip ? {
-      width: 14,
-      height: 7
-    } : {
-      width: 20,
-      height: 7
-    };
-  }
-  get hintOffset() {
-    const {
-      offset = DEFAULT_HINT_OFFSET
-    } = this.props;
-    return offset;
-  }
-  get edgeMargins() {
-    const {
-      edgeMargins = DEFAULT_EDGE_MARGINS
-    } = this.props;
-    return edgeMargins;
-  }
-  get useSideTip() {
-    const {
-      useSideTip
-    } = this.props;
-    if (!_isUndefined(useSideTip)) {
-      return useSideTip;
-    }
-    return this.getTargetPositionOnScreen() !== TARGET_POSITIONS.CENTER;
-  }
-  getTargetPositionOnScreen() {
-    if (this.targetLayout?.x !== undefined && this.targetLayout?.width) {
-      const targetMidPosition = this.targetLayout.x + this.targetLayout.width / 2;
-      if (targetMidPosition > this.containerWidth * (2 / 3)) {
-        return TARGET_POSITIONS.RIGHT;
-      } else if (targetMidPosition < this.containerWidth * (1 / 3)) {
-        return TARGET_POSITIONS.LEFT;
-      }
-    }
-    return TARGET_POSITIONS.CENTER;
-  }
-  getContainerPosition() {
-    if (this.targetLayout) {
-      return {
-        top: this.targetLayout.y,
-        left: this.targetLayout.x
-      };
-    }
-  }
-  getHintPosition() {
-    const {
-      position
-    } = this.props;
-    const hintPositionStyle = {
-      alignItems: 'center'
-    };
-    if (this.targetLayout?.x !== undefined) {
-      hintPositionStyle.left = -this.targetLayout.x;
-    }
-    if (position === HintPositions.TOP) {
-      hintPositionStyle.bottom = 0;
-    } else if (this.targetLayout?.height) {
-      hintPositionStyle.top = this.targetLayout.height;
-    }
-    const targetPositionOnScreen = this.getTargetPositionOnScreen();
-    if (targetPositionOnScreen === TARGET_POSITIONS.RIGHT) {
-      hintPositionStyle.alignItems = Constants.isRTL ? 'flex-start' : 'flex-end';
-    } else if (targetPositionOnScreen === TARGET_POSITIONS.LEFT) {
-      hintPositionStyle.alignItems = Constants.isRTL ? 'flex-end' : 'flex-start';
-    }
-    return hintPositionStyle;
-  }
-  getHintPadding() {
-    const paddings = {
-      paddingVertical: this.hintOffset,
-      paddingHorizontal: this.edgeMargins
-    };
-    if (this.useSideTip && this.targetLayout?.x !== undefined) {
-      const targetPositionOnScreen = this.getTargetPositionOnScreen();
-      if (targetPositionOnScreen === TARGET_POSITIONS.LEFT) {
-        paddings.paddingLeft = this.targetLayout.x;
-      } else if (targetPositionOnScreen === TARGET_POSITIONS.RIGHT && this.targetLayout?.width) {
-        paddings.paddingRight = this.containerWidth - this.targetLayout.x - this.targetLayout.width;
-      }
-    }
-    return paddings;
-  }
-  getHintAnimatedStyle = () => {
-    const {
-      position
-    } = this.props;
+const HINT_MIN_WIDTH = 68;
+const Hint = props => {
+  const {
+    visible,
+    useModal,
+    position,
+    children,
+    message,
+    containerWidth = Constants.windowWidth,
+    offset = DEFAULT_HINT_OFFSET,
+    edgeMargins = DEFAULT_EDGE_MARGINS,
+    targetFrame,
+    useSideTip,
+    onPress,
+    onBackgroundPress,
+    backdropColor,
+    color = DEFAULT_COLOR,
+    icon,
+    iconStyle,
+    messageStyle,
+    removePaddings,
+    enableShadow,
+    borderRadius,
+    customContent,
+    testID
+  } = props;
+  const hintRef = useRef(null);
+  const isUsingModal = Boolean(onBackgroundPress && useModal);
+  const {
+    hintUnmounted,
+    visibilityProgress
+  } = useHintVisibility(visible);
+  const {
+    targetLayoutState,
+    targetLayoutInWindowState,
+    hintMessageWidth,
+    targetRef,
+    onTargetLayout,
+    setHintLayout
+  } = useHintLayout({
+    onBackgroundPress,
+    targetFrame
+  });
+  const {
+    focusAccessibilityOnHint,
+    accessibilityInfo
+  } = useHintAccessibility(message);
+  useEffect(() => {
+    if (targetRef.current && hintRef.current) {
+      focusAccessibilityOnHint(targetRef.current, hintRef.current);
+    }
+  }, []);
+  const targetLayout = useMemo(() => {
+    return isUsingModal ? targetLayoutInWindowState : targetLayoutState;
+  }, [isUsingModal, targetLayoutState, targetLayoutInWindowState]);
+  const setTargetRef = useCallback(ref => {
+    targetRef.current = ref;
+    if (hintRef.current) {
+      focusAccessibilityOnHint(targetRef.current, hintRef.current);
+    }
+  }, []);
+  const showHint = !!targetLayout;
+  const {
+    targetAlignmentOnScreen,
+    hintContainerLayout,
+    tipPositionStyle,
+    hintPadding,
+    hintPositionStyle,
+    targetScreenToRelativeOffset
+  } = useHintPosition({
+    isUsingModal,
+    useSideTip,
+    position,
+    offset,
+    targetLayoutState,
+    targetLayoutInWindowState,
+    containerWidth,
+    edgeMargins,
+    hintMessageWidth
+  });
+  const hintAnimatedStyle = useMemo(() => {
     const translateY = position === HintPositions.TOP ? -10 : 10;
     return {
-      opacity: this.visibleAnimated,
+      opacity: visibilityProgress,
       transform: [{
-        translateY: this.visibleAnimated.interpolate({
+        translateY: visibilityProgress.interpolate({
           inputRange: [0, 1],
           outputRange: [translateY, 0]
         })
       }]
     };
-  };
-  getTipPosition() {
-    const {
-      position
-    } = this.props;
-    const tipPositionStyle = {};
-    if (position === HintPositions.TOP) {
-      tipPositionStyle.bottom = this.hintOffset - this.tipSize.height;
-      !this.useSideTip ? tipPositionStyle.bottom += 1 : undefined;
-    } else {
-      tipPositionStyle.top = this.hintOffset - this.tipSize.height;
-    }
-    const layoutWidth = this.targetLayout?.width || 0;
-    if (this.targetLayout?.x !== undefined) {
-      const targetMidWidth = layoutWidth / 2;
-      const tipMidWidth = this.tipSize.width / 2;
-      const leftPosition = this.useSideTip ? this.targetLayout.x : this.targetLayout.x + targetMidWidth - tipMidWidth;
-      const rightPosition = this.useSideTip ? this.containerWidth - this.targetLayout.x - layoutWidth : this.containerWidth - this.targetLayout.x - targetMidWidth - tipMidWidth;
-      const targetPositionOnScreen = this.getTargetPositionOnScreen();
-      switch (targetPositionOnScreen) {
-        case TARGET_POSITIONS.LEFT:
-          tipPositionStyle.left = Constants.isRTL ? rightPosition : leftPosition;
-          break;
-        case TARGET_POSITIONS.RIGHT:
-          tipPositionStyle.right = Constants.isRTL ? leftPosition : rightPosition;
-          break;
-        case TARGET_POSITIONS.CENTER:
-        default:
-          tipPositionStyle.left = this.targetLayout.x + targetMidWidth - tipMidWidth;
-          break;
-      }
-    }
-    return tipPositionStyle;
-  }
-  isUsingModal = () => {
-    const {
-      onBackgroundPress,
-      useModal
-    } = this.props;
-    return onBackgroundPress && useModal;
-  };
-  renderOverlay() {
-    const {
-      targetLayoutInWindow
-    } = this.state;
-    const {
-      onBackgroundPress,
-      backdropColor,
-      testID
-    } = this.props;
-    if (targetLayoutInWindow) {
-      const containerPosition = this.getContainerPosition();
+  }, [position, visibilityProgress]);
+  const renderOverlay = () => {
+    if (targetLayoutInWindowState && targetScreenToRelativeOffset?.top !== undefined && targetScreenToRelativeOffset?.left !== undefined) {
       return <Animated.View style={[styles.overlay, {
-        top: containerPosition.top - targetLayoutInWindow.y,
-        left: containerPosition.left - targetLayoutInWindow.x,
+        ...targetScreenToRelativeOffset,
         backgroundColor: backdropColor,
-        opacity: this.visibleAnimated
+        opacity: visibilityProgress
       }]} pointerEvents="box-none" testID={`${testID}.overlay`}>
           {onBackgroundPress && <TouchableWithoutFeedback style={StyleSheet.absoluteFillObject} onPress={onBackgroundPress}>
               <View flex />
             </TouchableWithoutFeedback>}
         </Animated.View>;
     }
-  }
-  renderHintTip() {
-    const {
-      position,
-      color = DEFAULT_COLOR
-    } = this.props;
-    const source = this.useSideTip ? sideTip : middleTip;
+  };
+  const renderHintTip = () => {
+    const source = useSideTip ? sideTip : middleTip;
     const flipVertically = position === HintPositions.TOP;
-    const flipHorizontally = this.getTargetPositionOnScreen() === TARGET_POSITIONS.RIGHT;
+    const flipHorizontally = targetAlignmentOnScreen === TargetAlignments.RIGHT;
     const flipStyle = {
       transform: [{
         scaleY: flipVertically ? -1 : 1
@@ -326,121 +135,49 @@ class Hint extends Component {
         scaleX: flipHorizontally ? -1 : 1
       }]
     };
-    return <Image tintColor={color} source={source} style={[styles.hintTip, this.getTipPosition(), flipStyle]} />;
-  }
-  renderContent() {
-    const {
-      message,
-      messageStyle,
-      icon,
-      iconStyle,
-      borderRadius,
-      color = DEFAULT_COLOR,
-      customContent,
-      removePaddings,
-      enableShadow,
-      visible,
-      testID
-    } = this.props;
-    return <View testID={`${testID}.message`} row centerV style={[styles.hint, !removePaddings && styles.hintPaddings, visible && enableShadow && styles.containerShadow, {
-      backgroundColor: color
-    }, !_isUndefined(borderRadius) && {
-      borderRadius
-    }]} ref={this.hintRef}>
-        {customContent}
-        {!customContent && icon && <Image source={icon} style={[styles.icon, iconStyle]} />}
-        {!customContent && <Text recorderTag={'unmask'} style={[styles.hintMessage, messageStyle]} testID={`${testID}.message.text`}>
-            {message}
-          </Text>}
-      </View>;
-  }
-  renderHint() {
-    const {
-      onPress,
-      testID
-    } = this.props;
+    return <Image tintColor={color} source={source} style={[styles.hintTip, tipPositionStyle, flipStyle]} />;
+  };
+  const renderHint = () => {
+    return <HintBubble visible={visible} message={message} messageStyle={messageStyle} color={color} removePaddings={removePaddings} enableShadow={enableShadow} borderRadius={borderRadius} icon={icon} iconStyle={iconStyle} customContent={customContent} testID={testID} hintRef={hintRef} setHintLayout={setHintLayout} hintPositionStyle={hintPositionStyle} />;
+  };
+  const renderHintAnchor = () => {
     const opacity = onPress ? 0.9 : 1.0;
-    if (this.showHint) {
-      return <View animated style={[{
-        width: this.containerWidth
-      }, styles.animatedContainer, this.getHintPosition(), this.getHintPadding(), this.getHintAnimatedStyle()]} pointerEvents="box-none" testID={testID}>
-          <TouchableOpacity activeOpacity={opacity} onPress={onPress}>
-            {this.renderContent()}
-          </TouchableOpacity>
-          {this.renderHintTip()}
-        </View>;
-    }
-  }
-  renderHintContainer() {
-    const {
-      style,
-      ...others
-    } = this.props;
-    return <View {...others}
-    // this view must be collapsable, don't pass testID or backgroundColor etc'.
-    collapsable testID={undefined} style={[styles.container, style, this.getContainerPosition(), !this.isUsingModal() && styles.overlayContainer]}>
-        {this.renderHint()}
-      </View>;
-  }
-  renderMockChildren() {
-    const {
-      children,
-      backdropColor
-    } = this.props;
-    const isBackdropColorPassed = backdropColor !== undefined;
-    if (children && React.isValidElement(children)) {
-      const layout = {
-        ...this.getContainerPosition(),
-        width: this.targetLayout?.width,
-        height: this.targetLayout?.height,
-        right: Constants.isRTL ? this.targetLayout?.x : undefined,
-        left: Constants.isRTL ? undefined : this.targetLayout?.x
-      };
-      return <View style={[styles.mockChildrenContainer, layout, !isBackdropColorPassed && styles.hidden]}>
-          {React.cloneElement(children, {
-          collapsable: false,
-          key: 'mock',
-          style: [children.props.style, styles.mockChildren]
-        })}
-        </View>;
-    }
-  }
-  renderChildren() {
-    const {
-      targetFrame
-    } = this.props;
-    if (!targetFrame && isValidElement(this.props.children)) {
-      return React.cloneElement(this.props.children, {
+    return <HintAnchor {...props} showHint={showHint} containerWidth={containerWidth} hintContainerLayout={hintContainerLayout} hintPadding={hintPadding} hintAnimatedStyle={hintAnimatedStyle} isUsingModal={isUsingModal} targetLayout={targetLayout}>
+        <TouchableOpacity activeOpacity={opacity} onPress={onPress}>
+          {renderHint()}
+        </TouchableOpacity>
+        {renderHintTip()}
+      </HintAnchor>;
+  };
+  const renderMockChildren = () => {
+    return <HintMockChildren children={children} backdropColor={backdropColor} targetLayout={targetLayout} />;
+  };
+  const renderChildren = () => {
+    if (!targetFrame && isValidElement(children)) {
+      return React.cloneElement(children, {
         key: 'clone',
         collapsable: false,
-        onLayout: this.onTargetLayout,
-        ref: this.setTargetRef,
-        ...this.getAccessibilityInfo()
+        onLayout: onTargetLayout,
+        ref: setTargetRef,
+        ...accessibilityInfo
       });
     }
-  }
-  render() {
-    const {
-      onBackgroundPress,
-      backdropColor,
-      testID
-    } = this.props;
-    if (!this.props.visible && this.state.hintUnmounted) {
-      return this.props.children || null;
-    }
-    return <>
-        {this.renderChildren()}
-        {this.isUsingModal() ? <Modal visible={this.showHint} animationType={backdropColor ? 'fade' : 'none'} overlayBackgroundColor={backdropColor} transparent onBackgroundPress={onBackgroundPress} onRequestClose={onBackgroundPress} testID={`${testID}.modal`}>
-            {this.renderMockChildren()}
-            {this.renderHintContainer()}
-          </Modal> : <>
-            {this.renderOverlay()}
-            {this.renderMockChildren()}
-            {this.renderHintContainer()}
-          </>}
-      </>;
-  }
-}
+  };
+  if (!visible && hintUnmounted) {
+    return children || null;
+  }
+  return <>
+      {renderChildren()}
+      {isUsingModal ? <Modal visible={showHint} animationType={backdropColor ? 'fade' : 'none'} overlayBackgroundColor={backdropColor} transparent onBackgroundPress={onBackgroundPress} onRequestClose={onBackgroundPress} testID={`${testID}.modal`}>
+          {renderMockChildren()}
+          {renderHintAnchor()}
+        </Modal> : <>
+          {renderOverlay()}
+          {renderMockChildren()}
+          {renderHintAnchor()}
+        </>}
+    </>;
+};
 const styles = StyleSheet.create({
   container: {
     position: 'absolute'
@@ -480,6 +217,7 @@ const styles = StyleSheet.create({
     position: 'absolute'
   },
   hint: {
+    minWidth: HINT_MIN_WIDTH,
     maxWidth: Math.min(Constants.windowWidth - 2 * Spacings.s4, 400),
     borderRadius: BorderRadiuses.br60,
     backgroundColor: DEFAULT_COLOR
@@ -502,4 +240,13 @@ const styles = StyleSheet.create({
     tintColor: Colors.white
   }
 });
+Hint.displayName = 'Hint';
+Hint.defaultProps = {
+  position: HintPositions.BOTTOM,
+  useModal: true
+};
+Hint.positions = HintPositions;
+export { HintProps, Hint };
+
+// @ts-expect-error
 export default asBaseComponent(Hint);