Feat/hint add props (#1399)

* Hint - add 'enableShadow' and 'removePaddings'; Adding reactions strip to demo.

* Adding elevation for Android

* improving example

* Removing white bg restriction for shadow

* improving example screen

Author: Inbal-Tish

demo/src/screens/componentScreens/HintsScreen.tsx

@@ -1,8 +1,11 @@
+import _ from 'lodash';
 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
+import {Colors, View, Text, Hint, Button, RadioGroup, RadioButton, Switch} from 'react-native-ui-lib';
+
 
 const settingsIcon = require('../../assets/icons/settings.png');
+const reactions = ['❤️', '😮', '😔', '😂', '😡'];
 
 type HintScreenProps = {};
 type HintScreenState = {
@@ -14,11 +17,14 @@ type HintScreenState = {
   useTargetFrame?: boolean;
   useSideTip?: boolean;
   showCustomContent?: boolean;
+  showReactionStrip?: boolean;
+  enableShadow?: boolean
 };
 
 export default class HintsScreen extends Component<HintScreenProps, HintScreenState> {
   constructor(props: HintScreenProps) {
     super(props);
+
     this.state = {
       showHint: true,
       useShortMessage: false,
@@ -27,20 +33,46 @@ export default class HintsScreen extends Component<HintScreenProps, HintScreenSt
       targetPosition: 'flex-start',
       // useTargetFrame: true,
       useSideTip: false,
-      showCustomContent: false
+      showCustomContent: false,
+      showReactionStrip: false,
+      enableShadow: false
     };
   }
 
-  componentDidMount() {}
-
   toggleHintPosition = () => {
     this.setState({
       showBottomHint: !this.state.showBottomHint
     });
   };
 
   onHintPressed = () => {
-    alert('Hint Pressed');
+    Alert.alert('Hint Pressed');
+  }
+
+  onReactionPress = () => {
+    Alert.alert('Reaction button pressed');
+  }
+
+  renderCustomContent() {
+    return (
+      <Text text70 white>
+        Click
+        <Text onPress={() => Alert.alert('custom content :)')} text70BO red40>
+          {' here '}
+        </Text>
+        for more information
+      </Text>
+    );
+  }
+
+  renderReactionStrip() {
+    return (
+      <View row padding-8>
+        {_.map(reactions, (item, index) => (
+          <Button round link key={index} label={item} onPress={this.onReactionPress}/>
+        ))}
+      </View>
+    );
   }
 
   render() {
@@ -52,12 +84,14 @@ export default class HintsScreen extends Component<HintScreenProps, HintScreenSt
       useShortMessage,
       useSideTip,
       useTargetFrame,
-      showCustomContent
+      showCustomContent,
+      showReactionStrip,
+      enableShadow
     } = this.state;
     const targetFrame = {x: 140, y: 100, width: 10, height: 10};
-    const message = useShortMessage
-      ? 'Add other cool and useful stuff.'
-      : 'Add other cool and useful stuff through adding apps to your visitors to enjoy.';
+    const message = useShortMessage ? 
+      'Add other cool and useful stuff.' : 
+      'Add other cool and useful stuff through adding apps to your visitors to enjoy.';
 
     return (
       <View flex>
@@ -95,16 +129,12 @@ export default class HintsScreen extends Component<HintScreenProps, HintScreenSt
             // 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
+              showCustomContent ? 
+                this.renderCustomContent() : showReactionStrip ? this.renderReactionStrip() : undefined
             }
+            color={!showCustomContent && showReactionStrip ? Colors.white : undefined}
+            removePaddings={!showCustomContent && showReactionStrip}
+            enableShadow={enableShadow}
             testID={'Hint'}
           >
             {!useTargetFrame && (
@@ -174,6 +204,11 @@ export default class HintsScreen extends Component<HintScreenProps, HintScreenSt
             <Text marginL-10>Toggle Icon</Text>
           </View>
 
+          <View row centerV marginV-10>
+            <Switch value={enableShadow} onValueChange={value => this.setState({enableShadow: value})}/>
+            <Text marginL-10>Toggle shadow</Text>
+          </View>
+
           <View row centerV marginV-10>
             <Switch value={useTargetFrame} onValueChange={value => this.setState({useTargetFrame: value})}/>
             <Text marginL-10>Use random position</Text>
@@ -183,6 +218,14 @@ export default class HintsScreen extends Component<HintScreenProps, HintScreenSt
             <Switch value={showCustomContent} onValueChange={value => this.setState({showCustomContent: value})}/>
             <Text marginL-10>Show custom content</Text>
           </View>
+
+          <View row centerV marginV-10>
+            <Switch 
+              value={showReactionStrip} 
+              onValueChange={value => this.setState({showReactionStrip: value, enableShadow: true})}
+            />
+            <Text marginL-10>Show reaction strip</Text>
+          </View>
         </View>
       </View>
     );

generatedTypes/components/hint/index.d.ts

@@ -95,6 +95,14 @@ export interface HintProps {
      * 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
      */
@@ -165,6 +173,7 @@ declare class Hint extends Component<HintProps, HintState> {
         }[];
     };
     getTipPosition(): Position;
+    shouldEnableShadow(): boolean | undefined;
     renderHintTip(): JSX.Element;
     renderContent(): JSX.Element;
     renderHint(): JSX.Element | undefined;

src/components/hint/index.tsx

@@ -124,7 +124,7 @@ export interface HintProps {
   /**
     * Callback for the background press
     */
-   onBackgroundPress?: (event: GestureResponderEvent) => void;
+  onBackgroundPress?: (event: GestureResponderEvent) => void;
   /**
    * The hint container width
    */
@@ -133,6 +133,14 @@ export interface HintProps {
    * 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
    */
@@ -198,6 +206,7 @@ class Hint extends Component<HintProps, HintState> {
     const {message} = this.props;
     const targetRefTag = findNodeHandle(this.targetRef);
     const hintRefTag = findNodeHandle(this.hintRef);
+    
     if (targetRefTag && _.isString(message)) {
       AccessibilityInfo.setAccessibilityFocus(targetRefTag);
     } else if (hintRefTag) {
@@ -253,6 +262,7 @@ class Hint extends Component<HintProps, HintState> {
     if (targetFrame) {
       return targetFrame;
     }
+
     return onBackgroundPress ? targetLayoutInWindow : targetLayout;
   }
 
@@ -280,12 +290,14 @@ class Hint extends Component<HintProps, HintState> {
     if (!_.isUndefined(useSideTip)) {
       return useSideTip;
     }
+
     return this.getTargetPositionOnScreen() !== TARGET_POSITIONS.CENTER;
   }
 
   getTargetPositionOnScreen() {
     if (this.targetLayout?.x && 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)) {
@@ -328,6 +340,7 @@ class Hint extends Component<HintProps, HintState> {
 
   getHintPadding() {
     const paddings: Paddings = {paddingVertical: this.hintOffset, paddingHorizontal: this.edgeMargins};
+    
     if (this.useSideTip && this.targetLayout?.x) {
       const targetPositionOnScreen = this.getTargetPositionOnScreen();
       if (targetPositionOnScreen === TARGET_POSITIONS.LEFT) {
@@ -336,12 +349,14 @@ class Hint extends Component<HintProps, HintState> {
         paddings.paddingRight = this.containerWidth - this.targetLayout.x - this.targetLayout.width;
       }
     }
+
     return paddings;
   }
 
   getHintAnimatedStyle = () => {
     const {position} = this.props;
     const translateY = position === HintPositions.TOP ? -10 : 10;
+    
     return {
       opacity: this.visibleAnimated,
       transform: [
@@ -437,14 +452,31 @@ class Hint extends Component<HintProps, HintState> {
   }
 
   renderContent() {
-    const {message, messageStyle, icon, iconStyle, borderRadius, color, customContent, testID} = this.props;
+    const {
+      message, 
+      messageStyle, 
+      icon, 
+      iconStyle, 
+      borderRadius, 
+      color, 
+      customContent, 
+      removePaddings, 
+      enableShadow,
+      testID
+    } = this.props;
 
     return (
       <View
         testID={`${testID}.message`}
         row
         centerV
-        style={[styles.hint, color && {backgroundColor: color}, !_.isUndefined(borderRadius) && {borderRadius}]}
+        style={[
+          styles.hint,
+          !removePaddings && styles.hintPaddings,
+          enableShadow && styles.containerShadow, 
+          color && {backgroundColor: color}, 
+          !_.isUndefined(borderRadius) && {borderRadius}
+        ]}
         ref={this.setHintRef}
       >
         {customContent}
@@ -511,6 +543,7 @@ class Hint extends Component<HintProps, HintState> {
 
   render() {
     const {onBackgroundPress, testID} = this.props;
+    
     if (!this.props.visible && this.state.hintUnmounted) {
       return this.props.children;
     }
@@ -541,7 +574,6 @@ class Hint extends Component<HintProps, HintState> {
 const styles = StyleSheet.create({
   container: {
     position: 'absolute'
-
   },
   // overlay: {
   //   position: 'absolute',
@@ -556,11 +588,20 @@ const styles = StyleSheet.create({
   },
   hint: {
     maxWidth: 400,
-    backgroundColor: DEFAULT_COLOR,
+    borderRadius: BorderRadiuses.br60,
+    backgroundColor: DEFAULT_COLOR
+  },
+  hintPaddings: {
     paddingHorizontal: Spacings.s5,
     paddingTop: Spacings.s3,
-    paddingBottom: Spacings.s4,
-    borderRadius: BorderRadiuses.br60
+    paddingBottom: Spacings.s4
+  },
+  containerShadow: {
+    shadowColor: Colors.dark40,
+    shadowOpacity: 0.25,
+    shadowRadius: 5,
+    shadowOffset: {height: 5, width: 0},
+    elevation: 2
   },
   hintMessage: {
     ...Typography.text70,