react-native-ui-lib 7.37.0-snapshot.6100 → 7.37.0-snapshot.6104

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-native-ui-lib",
-  "version": "7.37.0-snapshot.6100",
+  "version": "7.37.0-snapshot.6104",
   "main": "src/index.js",
   "types": "src/index.d.ts",
   "author": "Ethan Sharabi <ethan.shar@gmail.com>",

package/src/components/hint/Hint.driver.new.d.ts

@@ -0,0 +1,19 @@
+import { ComponentProps } from '../../testkit/new/Component.driver';
+export declare const HintDriver: (props: ComponentProps) => {
+    getHintBubble: () => {
+        getStyle: (flatten?: boolean) => any;
+        getElement: () => import("react-test-renderer").ReactTestInstance;
+        queryElement: () => import("react-test-renderer").ReactTestInstance | undefined;
+        exists: () => boolean;
+    };
+    getModal: () => {
+        isVisible: () => boolean;
+        pressOnBackground: () => void;
+        getElement: () => import("react-test-renderer").ReactTestInstance;
+        queryElement: () => import("react-test-renderer").ReactTestInstance | undefined;
+        exists: () => boolean;
+    };
+    getElement: () => import("react-test-renderer").ReactTestInstance;
+    queryElement: () => import("react-test-renderer").ReactTestInstance | undefined;
+    exists: () => boolean;
+};

package/src/components/hint/Hint.driver.new.js

@@ -0,0 +1,19 @@
+import { useComponentDriver } from "../../testkit/new/Component.driver";
+import { ModalDriver } from "../modal/Modal.driver.new";
+import { ViewDriver } from "../view/View.driver.new";
+export const HintDriver = props => {
+  const driver = useComponentDriver(props);
+  const hintBubbleDriver = ViewDriver({
+    renderTree: props.renderTree,
+    testID: `${props.testID}.message`
+  });
+  const modalDriver = ModalDriver({
+    renderTree: props.renderTree,
+    testID: `${props.testID}.message`
+  });
+  return {
+    ...driver,
+    getHintBubble: () => hintBubbleDriver,
+    getModal: () => modalDriver
+  };
+};

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

@@ -0,0 +1,13 @@
+import React from 'react';
+import { type LayoutRectangle } from 'react-native';
+import { LayoutStyle, HintProps, PaddingsStyle } from './types';
+interface HintAnchorProps extends HintProps {
+    showHint: boolean;
+    isUsingModal: boolean;
+    targetLayout?: LayoutRectangle;
+    hintContainerLayout: LayoutStyle;
+    hintPadding: PaddingsStyle;
+    hintAnimatedStyle: any;
+}
+export default function HintAnchor({ children, showHint, isUsingModal, targetLayout, containerWidth, testID, hintContainerLayout, hintPadding, hintAnimatedStyle, style, ...others }: HintAnchorProps): React.JSX.Element;
+export {};

package/src/components/hint/HintAnchor.js

@@ -0,0 +1,47 @@
+import React from 'react';
+import { StyleSheet } from 'react-native';
+import View from "../view";
+export default function HintAnchor({
+  children,
+  showHint,
+  isUsingModal,
+  targetLayout,
+  containerWidth,
+  testID,
+  hintContainerLayout,
+  hintPadding,
+  hintAnimatedStyle,
+  style,
+  ...others
+}) {
+  const renderHintContainer = () => {
+    if (showHint) {
+      return <View animated style={[{
+        width: containerWidth
+      }, styles.animatedContainer, hintContainerLayout, hintPadding, hintAnimatedStyle]} pointerEvents="box-none" testID={testID}>
+          {children}
+        </View>;
+    }
+  };
+  return <View {...others}
+  // Note: this view must be collapsable, don't pass testID or backgroundColor etc'.
+  collapsable testID={undefined} style={[styles.anchor, style, /*  containerPosition, */
+  {
+    left: targetLayout?.x,
+    top: targetLayout?.y
+  }, !isUsingModal && styles.anchorForScreenOverlay]}>
+      {renderHintContainer()}
+    </View>;
+}
+const styles = StyleSheet.create({
+  anchor: {
+    position: 'absolute'
+  },
+  anchorForScreenOverlay: {
+    zIndex: 10,
+    elevation: 10
+  },
+  animatedContainer: {
+    position: 'absolute'
+  }
+});

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

@@ -0,0 +1,12 @@
+import React from 'react';
+import { View as RNView, LayoutChangeEvent } from 'react-native';
+import { HintProps } from './types';
+interface HintBubbleProps extends Pick<HintProps, 'testID' | 'visible' | 'message' | 'messageStyle' | 'color' | 'removePaddings' | 'enableShadow' | 'borderRadius' | 'iconStyle' | 'icon' | 'customContent'> {
+    hintRef: React.RefObject<RNView>;
+    setHintLayout: (layoutChangeEvent: LayoutChangeEvent) => void;
+    hintPositionStyle: {
+        left: number;
+    };
+}
+export default function HintBubble({ visible, message, messageStyle, icon, iconStyle, borderRadius, removePaddings, enableShadow, color, customContent, testID, hintRef, hintPositionStyle, setHintLayout }: HintBubbleProps): React.JSX.Element;
+export {};

package/src/components/hint/HintBubble.js

@@ -0,0 +1,64 @@
+import _isUndefined from "lodash/isUndefined";
+import React from 'react';
+import { StyleSheet } from 'react-native';
+import { Constants } from "../../commons/new";
+import { BorderRadiuses, Colors, Shadows, Spacings, Typography } from "../../style";
+import View from "../view";
+import Text from "../text";
+import Image from "../image";
+const DEFAULT_COLOR = Colors.$backgroundPrimaryHeavy;
+// const HINT_MIN_WIDTH = 68;
+
+export default function HintBubble({
+  visible,
+  message,
+  messageStyle,
+  icon,
+  iconStyle,
+  borderRadius,
+  removePaddings,
+  enableShadow,
+  color,
+  customContent,
+  testID,
+  hintRef,
+  hintPositionStyle,
+  setHintLayout
+}) {
+  return <View testID={`${testID}.message`} row centerV style={[styles.hint, !removePaddings && styles.hintPaddings, visible && enableShadow && styles.containerShadow, {
+    backgroundColor: color
+  }, !_isUndefined(borderRadius) && {
+    borderRadius
+  }, hintPositionStyle]} onLayout={setHintLayout} ref={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>;
+}
+const styles = StyleSheet.create({
+  hint: {
+    // minWidth: HINT_MIN_WIDTH,
+    maxWidth: Math.min(Constants.windowWidth - 2 * Spacings.s4, 400),
+    borderRadius: BorderRadiuses.br60,
+    backgroundColor: DEFAULT_COLOR
+  },
+  hintPaddings: {
+    paddingHorizontal: Spacings.s5,
+    paddingTop: Spacings.s3,
+    paddingBottom: Spacings.s4
+  },
+  containerShadow: {
+    ...Shadows.sh30.bottom
+  },
+  hintMessage: {
+    ...Typography.text70,
+    color: Colors.white,
+    flexShrink: 1
+  },
+  icon: {
+    marginRight: Spacings.s4,
+    tintColor: Colors.white
+  }
+});

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

@@ -0,0 +1,8 @@
+import React from 'react';
+import { LayoutRectangle } from 'react-native';
+import { HintProps } from './types';
+interface HintMockChildrenProps extends Pick<HintProps, 'children' | 'backdropColor'> {
+    targetLayout?: LayoutRectangle;
+}
+export default function HintMockChildren({ children, backdropColor, targetLayout }: HintMockChildrenProps): React.JSX.Element | null;
+export {};

package/src/components/hint/HintMockChildren.js

@@ -0,0 +1,49 @@
+import React from 'react';
+import { StyleSheet } from 'react-native';
+import { Constants } from "../../commons/new";
+import View from "../view";
+export default function HintMockChildren({
+  children,
+  backdropColor,
+  targetLayout
+}) {
+  const isBackdropColorPassed = backdropColor !== undefined;
+  if (children && React.isValidElement(children)) {
+    const layout = {
+      width: targetLayout?.width,
+      height: targetLayout?.height,
+      right: Constants.isRTL ? targetLayout?.x : undefined,
+      top: targetLayout?.y,
+      left: Constants.isRTL ? undefined : 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>;
+  }
+  return null;
+}
+const styles = StyleSheet.create({
+  hidden: {
+    opacity: 0
+  },
+  mockChildrenContainer: {
+    position: 'absolute'
+  },
+  mockChildren: {
+    margin: undefined,
+    marginVertical: undefined,
+    marginHorizontal: undefined,
+    marginTop: undefined,
+    marginRight: undefined,
+    marginBottom: undefined,
+    marginLeft: undefined,
+    top: undefined,
+    left: undefined,
+    right: undefined,
+    bottom: undefined
+  }
+});

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

@@ -0,0 +1,196 @@
+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;
+    hintMessageWidth?: number;
+}
+/**
+ * @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: {
+        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;
+        hintMessageWidth: undefined;
+    };
+    visibleAnimated: Animated.Value;
+    componentDidMount(): void;
+    componentDidUpdate(prevProps: HintProps): void;
+    animateHint: () => void;
+    toggleAnimationEndedToRemoveHint: () => void;
+    focusAccessibilityOnHint: () => void;
+    setTargetRef: (ref: ElementRef<typeof RNView>) => void;
+    setHintLayout: ({ nativeEvent: { layout } }: LayoutChangeEvent) => 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 shouldUseSideTip(): boolean;
+    get isShortMessage(): undefined;
+    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>;
+        }[];
+    };
+    getTipPosition(): Position;
+    getHintOffsetForShortMessage: () => number;
+    isUsingModal: () => boolean | undefined;
+    renderOverlay(): React.JSX.Element | undefined;
+    renderHintTip(): React.JSX.Element;
+    renderHint(): React.JSX.Element;
+    renderHintContainer(): React.JSX.Element | undefined;
+    renderHintAnchor(): 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;
+export default _default;