Migrate Hint component to TypeScript (#1281)

* Move Hint component to TS

* Update HintPosition static, move Hint example screen to TS

* Remove TODO comment

* Remove the use of getThemeProps

* PR review changes

* Fix any type on refs

* update generatedTypes

* Apply suggestions from code review

Co-authored-by: Miki Leib <[email protected]>

* rename import

Co-authored-by: Miki Leib <[email protected]>

Author: saulve

demo/src/screens/componentScreens/HintsScreen.js renamed to demo/src/screens/componentScreens/HintsScreen.tsx

@@ -1,11 +1,21 @@
 import React, {Component} from 'react';
 import {View, Text, Hint, Button, RadioGroup, RadioButton, Switch} from 'react-native-ui-lib'; //eslint-disable-line
 
-
 const settingsIcon = require('../../assets/icons/settings.png');
 
-export default class HintsScreen extends Component {
-  constructor(props) {
+type HintScreenProps = {};
+type HintScreenState = {
+  showHint: boolean,
+  useShortMessage: boolean,
+  showBottomHint: boolean,
+  showIcon: boolean,
+  targetPosition: string,
+  useTargetFrame?: boolean,
+  useSideTip?: boolean
+};
+
+export default class HintsScreen extends Component<HintScreenProps, HintScreenState> {
+  constructor(props: HintScreenProps) {
     super(props);
     this.state = {
       showHint: true,
@@ -14,7 +24,7 @@ export default class HintsScreen extends Component {
       showIcon: false,
       targetPosition: 'flex-start',
       // useTargetFrame: true,
-      useSideTip: null
+      useSideTip: false
     };
   }
 
@@ -109,7 +119,7 @@ export default class HintsScreen extends Component {
             centerV
             marginB-20
             initialValue={targetPosition}
-            onValueChange={value => this.setState({targetPosition: value})}
+            onValueChange={(value: string) => this.setState({targetPosition: value})}
           >
             <Text marginR-10>Button Position:</Text>
             <RadioButton value={'flex-start'} label={'Left'} marginR-10/>
@@ -122,10 +132,9 @@ export default class HintsScreen extends Component {
             centerV
             marginB-20
             initialValue={useSideTip}
-            onValueChange={value => this.setState({useSideTip: value})}
+            onValueChange={(value: boolean) => this.setState({useSideTip: value})}
           >
             <Text marginR-10>Tip:</Text>
-            <RadioButton value={null} label={'Default'} marginR-10/>
             <RadioButton value label={'Side Tip'} marginR-10/>
             <RadioButton value={false} label={'Middle Tip'} marginR-10/>
           </RadioGroup>

generatedTypes/components/hint/index.d.ts

@@ -0,0 +1,163 @@
+import React, { Component, ReactElement, ElementRef } from 'react';
+import { Animated, GestureResponderEvent, ImageSourcePropType, ImageStyle, StyleProp, TextStyle, ViewStyle, LayoutChangeEvent, View as ViewRN } 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;
+}
+interface Position {
+    top?: number;
+    bottom?: number;
+    left?: number;
+    right?: number;
+}
+interface HintPositionStyle extends Position {
+    alignItems?: string;
+}
+interface Paddings {
+    paddingLeft?: number;
+    paddingRight?: number;
+    paddingVertical?: number;
+    paddingHorizontal?: number;
+}
+export interface HintProps {
+    /**
+      * Control the visibility of the hint
+      */
+    visible?: boolean;
+    /**
+      * The hint background color
+      */
+    color?: string;
+    /**
+      * The hint message
+      */
+    message?: string | ReactElement;
+    /**
+      * 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;
+    /**
+      * 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 the background press
+      */
+    onBackgroundPress?: (event: GestureResponderEvent) => void;
+    /**
+      * The hint container width
+      */
+    containerWidth?: number;
+    /**
+      * The hint's test identifier
+      */
+    testID?: string;
+    /**
+     * Additional styling
+     */
+    style?: StyleProp<ViewStyle>;
+}
+interface HintState {
+    targetLayout?: HintTargetFrame;
+    targetLayoutInWindow?: HintTargetFrame;
+}
+/**
+ * @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.js
+ * @notes: You can either wrap a component or pass a specific targetFrame
+ */
+declare class Hint extends Component<HintProps, HintState> {
+    static displayName: string;
+    static defaultProps: {
+        position: HintPositions;
+    };
+    static positions: typeof HintPositions;
+    targetRef: ElementRef<typeof ViewRN> | null;
+    hintRef: ElementRef<typeof ViewRN> | null;
+    state: {
+        targetLayoutInWindow: undefined;
+        targetLayout: HintTargetFrame | undefined;
+    };
+    visibleAnimated: Animated.Value;
+    componentDidUpdate(prevProps: HintProps): void;
+    focusAccessibilityOnHint: () => void;
+    setTargetRef: (ref: ElementRef<typeof ViewRN>) => void;
+    setHintRef: (ref: ElementRef<typeof ViewRN>) => 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;
+        }[];
+    };
+    getTipPosition(): Position;
+    renderHintTip(): JSX.Element;
+    renderHint(): JSX.Element | undefined;
+    renderHintContainer(): JSX.Element;
+    renderChildren(): React.ReactElement<any, string | ((props: any) => React.ReactElement<any, any> | null) | (new (props: any) => React.Component<any, any, any>)> | undefined;
+    render(): {} | null | undefined;
+}
+declare const _default: React.ComponentClass<HintProps & {
+    useCustomTheme?: boolean | undefined;
+}, any> & typeof Hint;
+export default _default;