Feat/ Add custom content to Hint

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 violet50>
+                    {' 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

@@ -87,6 +87,10 @@ export interface HintProps {
       * The hint container width
       */
     containerWidth?: number;
+    /**
+      * Custom content element to render inside the hint container
+      */
+    customContent?: JSX.Element;
     /**
       * The hint's test identifier
       */

src/components/hint/index.tsx

@@ -124,6 +124,10 @@ export interface HintProps {
     * The hint container width
     */
    containerWidth?: number;
+  /**
+    * Custom content element to render inside the hint container
+    */
+   customContent?: JSX.Element;
   /**
     * The hint's test identifier
     */
@@ -411,7 +415,7 @@ class Hint extends Component<HintProps, HintState> {
   }
 
   renderHint() {
-    const {message, messageStyle, icon, iconStyle, borderRadius, color, testID} = this.props;
+    const {message, messageStyle, icon, iconStyle, borderRadius, color, customContent, testID} = this.props;
 
     if (this.showHint) {
       return (
@@ -435,8 +439,9 @@ class Hint extends Component<HintProps, HintState> {
             style={[styles.hint, color && {backgroundColor: color}, !_.isUndefined(borderRadius) && {borderRadius}]}
             ref={this.setHintRef}
           >
-            {icon && <Image source={icon} style={[styles.icon, iconStyle]}/>}
-            <Text style={[styles.hintMessage, messageStyle]}>{message}</Text>
+            {customContent}
+            {!customContent && icon && <Image source={icon} style={[styles.icon, iconStyle]}/>}
+            {!customContent && <Text style={[styles.hintMessage, messageStyle]}>{message}</Text>}
           </View>
         </View>
       );