Feat/ Add custom content to Hint (#1302)

* Feat/ Add custom content to Hint

* fix pressing issue with Android

Author: lidord-wix

demo/src/screens/componentScreens/HintsScreen.tsx

@@ -1,17 +1,19 @@
 import React, {Component} from 'react';
+import {Alert} from 'react-native';
 import {View, Text, Hint, Button, RadioGroup, RadioButton, Switch} from 'react-native-ui-lib'; //eslint-disable-line
 
 const settingsIcon = require('../../assets/icons/settings.png');
 
 type HintScreenProps = {};
 type HintScreenState = {
-  showHint: boolean,
-  useShortMessage: boolean,
-  showBottomHint: boolean,
-  showIcon: boolean,
-  targetPosition: string,
-  useTargetFrame?: boolean,
-  useSideTip?: boolean
+  showHint: boolean;
+  useShortMessage: boolean;
+  showBottomHint: boolean;
+  showIcon: boolean;
+  targetPosition: string;
+  useTargetFrame?: boolean;
+  useSideTip?: boolean;
+  showCustomContent?: boolean;
 };
 
 export default class HintsScreen extends Component<HintScreenProps, HintScreenState> {
@@ -24,7 +26,8 @@ export default class HintsScreen extends Component<HintScreenProps, HintScreenSt
       showIcon: false,
       targetPosition: 'flex-start',
       // useTargetFrame: true,
-      useSideTip: false
+      useSideTip: false,
+      showCustomContent: false
     };
   }
 
@@ -44,7 +47,8 @@ export default class HintsScreen extends Component<HintScreenProps, HintScreenSt
       targetPosition,
       useShortMessage,
       useSideTip,
-      useTargetFrame
+      useTargetFrame,
+      showCustomContent
     } = this.state;
     const targetFrame = {x: 140, y: 100, width: 10, height: 10};
     const message = useShortMessage
@@ -56,7 +60,7 @@ export default class HintsScreen extends Component<HintScreenProps, HintScreenSt
         <View
           flex
           padding-20
-          paddingT-120
+          paddingT-100
           bg-dark80
           style={{zIndex: 10}}
           key={useTargetFrame ? 'withTargetFrame' : 'withElement'}
@@ -85,6 +89,17 @@ export default class HintsScreen extends Component<HintScreenProps, HintScreenSt
             // borderRadius={BorderRadiuses.br40}
             // edgeMargins={30}
             // onBackgroundPress={() => this.setState({showHint: !showHint})}
+            customContent={
+              showCustomContent ? (
+                <Text text70 white>
+                  Click
+                  <Text onPress={() => Alert.alert('custom content :)')} text70BO red40>
+                    {' here '}
+                  </Text>
+                  for more information
+                </Text>
+              ) : undefined
+            }
             testID={'Hint'}
           >
             {!useTargetFrame && (
@@ -158,6 +173,11 @@ export default class HintsScreen extends Component<HintScreenProps, HintScreenSt
             <Switch value={useTargetFrame} onValueChange={value => this.setState({useTargetFrame: value})}/>
             <Text marginL-10>Use random position</Text>
           </View>
+
+          <View row centerV marginV-10>
+            <Switch value={showCustomContent} onValueChange={value => this.setState({showCustomContent: value})}/>
+            <Text marginL-10>Show custom content</Text>
+          </View>
         </View>
       </View>
     );

generatedTypes/components/hint/index.d.ts

@@ -32,64 +32,68 @@ interface Paddings {
 }
 export interface HintProps {
     /**
-      * Control the visibility of the hint
-      */
+     * Control the visibility of the hint
+     */
     visible?: boolean;
     /**
-      * The hint background color
-      */
+     * The hint background color
+     */
     color?: string;
     /**
-      * The hint message
-      */
+     * The hint message
+     */
     message?: string | ReactElement;
     /**
-      * The hint message custom style
-      */
+     * The hint message custom style
+     */
     messageStyle?: StyleProp<TextStyle>;
     /**
-      * Icon to show next to the hint's message
-      */
+     * Icon to show next to the hint's message
+     */
     icon?: ImageSourcePropType;
     /**
-      * The icon's style
-      */
+     * The icon's style
+     */
     iconStyle?: StyleProp<ImageStyle>;
     /**
-      * The hint's position
-      */
+     * The hint's position
+     */
     position?: HintPositions;
     /**
-      * Provide custom target position instead of wrapping a child
-      */
+     * Provide custom target position instead of wrapping a child
+     */
     targetFrame?: HintTargetFrame;
     /**
-      * Show side tips instead of the middle tip
-      */
+     * Show side tips instead of the middle tip
+     */
     useSideTip?: boolean;
     /**
-      * The hint's border radius
-      */
+     * The hint's border radius
+     */
     borderRadius?: number;
     /**
-      * Hint margins from screen edges
-      */
+     * Hint margins from screen edges
+     */
     edgeMargins?: number;
     /**
-      * Hint offset from target
-      */
+     * Hint offset from target
+     */
     offset?: number;
     /**
-      * Callback for the background press
-      */
+     * Callback for the background press
+     */
     onBackgroundPress?: (event: GestureResponderEvent) => void;
     /**
-      * The hint container width
-      */
+     * The hint container width
+     */
     containerWidth?: number;
     /**
-      * The hint's test identifier
-      */
+     * Custom content element to render inside the hint container
+     */
+    customContent?: JSX.Element;
+    /**
+     * The hint's test identifier
+     */
     testID?: string;
     /**
      * Additional styling
@@ -152,6 +156,7 @@ declare class Hint extends Component<HintProps, HintState> {
     };
     getTipPosition(): Position;
     renderHintTip(): JSX.Element;
+    renderContent(): 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;