refactor(ui): apply tooltip mappings

src/framework/ui/common/mapping.json

@@ -2020,6 +2020,27 @@
           "popoverBackgroundColor": {
             "type": "string"
           },
+          "iconWidth": {
+            "type": "number"
+          },
+          "iconHeight": {
+            "type": "number"
+          },
+          "iconMarginHorizontal": {
+            "type": "number"
+          },
+          "iconTintColor": {
+            "type": "string"
+          },
+          "textMarginHorizontal": {
+            "type": "number"
+          },
+          "textFontSize": {
+            "type": "number"
+          },
+          "textLineHeight": {
+            "type": "number"
+          },
           "textColor": {
             "type": "string"
           }
@@ -2035,11 +2056,18 @@
       "appearances": {
         "default": {
           "mapping": {
-            "popoverPaddingHorizontal": 8,
-            "popoverPaddingVertical": 4,
+            "popoverPaddingHorizontal": 4,
+            "popoverPaddingVertical": 6,
             "popoverBorderRadius": 8,
-            "popoverBackgroundColor": "#0D1C2F",
-            "textColor": "text-primary-inverse"
+            "popoverBackgroundColor": "font-primary-color",
+            "iconWidth": 16,
+            "iconHeight": 16,
+            "iconMarginHorizontal": 4,
+            "iconTintColor": "color-white",
+            "textMarginHorizontal": 4,
+            "textFontSize": 11,
+            "textLineHeight": 16,
+            "textColor": "color-white"
           }
         }
       }

src/framework/ui/tooltip/tooltip.component.tsx

@@ -1,5 +1,10 @@
 import React from 'react';
-import { StyleSheet } from 'react-native';
+import {
+  ImageProps,
+  StyleSheet,
+  View,
+  ViewProps,
+} from 'react-native';
 import {
   styled,
   StyledComponentProps,
@@ -17,6 +22,7 @@ import { Omit } from '../common/type';
 
 interface TooltipProps {
   text: string;
+  icon?: (style: StyleType) => React.ReactElement<ImageProps>;
   children: React.ReactElement<any>;
 }
 
@@ -37,6 +43,13 @@ export class Tooltip extends React.Component<Props> {
       popoverPaddingVertical,
       popoverBorderRadius,
       popoverBackgroundColor,
+      iconWidth,
+      iconHeight,
+      iconMarginHorizontal,
+      iconTintColor,
+      textMarginHorizontal,
+      textFontSize,
+      textLineHeight,
       textColor,
     } = source;
 
@@ -46,33 +59,76 @@ export class Tooltip extends React.Component<Props> {
         paddingVertical: popoverPaddingVertical,
         borderRadius: popoverBorderRadius,
         backgroundColor: popoverBackgroundColor,
+        ...styles.popover,
+      },
+      content: styles.content,
+      icon: {
+        width: iconWidth,
+        height: iconHeight,
+        marginHorizontal: iconMarginHorizontal,
+        tintColor: iconTintColor,
+        ...styles.icon,
       },
       text: {
+        marginHorizontal: textMarginHorizontal,
+        fontSize: textFontSize,
+        lineHeight: textLineHeight,
         color: textColor,
+        ...styles.text,
       },
     };
   };
 
-  private renderPopoverContentElement = (style: StyleType): React.ReactElement<TextProps> => {
+  private renderTextElement = (style: StyleType): React.ReactElement<TextProps> => {
     const { text } = this.props;
 
     return (
       <Text
-        style={[style, styles.text]}>
+        key={1}
+        style={style}>
         {text}
       </Text>
     );
   };
 
+  private renderIconElement = (style: StyleType): React.ReactElement<ImageProps> => {
+    const { icon } = this.props;
+
+    const iconElement: React.ReactElement<ImageProps> = icon(style);
+
+    return React.cloneElement(iconElement, { key: 0 });
+  };
+
+  private renderContentElementChildren = (style: StyleType): React.ReactNode => {
+    const { icon } = this.props;
+
+    return [
+      icon ? this.renderIconElement(style.icon) : null,
+      this.renderTextElement(style.text),
+    ];
+  };
+
+  private renderPopoverContentElement = (style: StyleType): React.ReactElement<ViewProps> => {
+    const { content, ...childrenStyle } = style;
+
+    const contentChildren: React.ReactNode = this.renderContentElementChildren(childrenStyle);
+
+    return (
+      <View style={content}>
+        {contentChildren}
+      </View>
+    );
+  };
+
   public render(): React.ReactElement<PopoverProps> {
     const { style, children, themedStyle, ...derivedProps } = this.props;
-    const { popover, text } = this.getComponentStyle(themedStyle);
-    const contentElement: React.ReactElement<TextProps> = this.renderPopoverContentElement(text);
+    const { popover, ...componentStyle } = this.getComponentStyle(themedStyle);
+    const contentElement: React.ReactElement<TextProps> = this.renderPopoverContentElement(componentStyle);
 
     return (
       <Popover
         {...derivedProps}
-        style={[popover, style, styles.popover]}
+        style={[popover, style]}
         content={contentElement}>
         {children}
       </Popover>
@@ -82,6 +138,10 @@ export class Tooltip extends React.Component<Props> {
 
 const styles = StyleSheet.create({
   popover: {},
+  content: {
+    flexDirection: 'row',
+  },
+  icon: {},
   text: {
     alignSelf: 'center',
   },

src/playground/src/ui/screen/tooltip.component.tsx

@@ -3,23 +3,29 @@ import {
   View,
   Text,
   TouchableOpacity,
+  ImageProps,
+  Image,
+  ImageSourcePropType,
 } from 'react-native';
 import { NavigationScreenProps } from 'react-navigation';
 import {
   withStyles,
   ThemedComponentProps,
   ThemeType,
+  StyleType,
 } from '@kitten/theme';
 import { Tooltip } from '@kitten/ui';
 
 type Props = & ThemedComponentProps & NavigationScreenProps;
 
 const PLACEMENT: string = 'bottom';
+const ICON: ImageSourcePropType = { uri: 'https://akveo.github.io/eva-icons/fill/png/128/star.png' };
 
 interface State {
   startVisible: boolean;
   centerVisible: boolean;
   endVisible: boolean;
+  withIconVisible: boolean;
 }
 
 class TooltipScreen extends React.Component<Props, State> {
@@ -32,6 +38,7 @@ class TooltipScreen extends React.Component<Props, State> {
     startVisible: false,
     centerVisible: false,
     endVisible: false,
+    withIconVisible: false,
   };
 
   private onStartPress = () => {
@@ -52,6 +59,21 @@ class TooltipScreen extends React.Component<Props, State> {
     });
   };
 
+  private onWithIconPress = () => {
+    this.setState({
+      withIconVisible: !this.state.withIconVisible,
+    });
+  };
+
+  private renderIcon = (style: StyleType): React.ReactElement<ImageProps> => {
+    return (
+      <Image
+        style={style}
+        source={ICON}
+      />
+    );
+  };
+
   public render(): React.ReactNode {
     const { container, componentContainer, component, tip, text } = this.props.themedStyle;
 
@@ -62,7 +84,7 @@ class TooltipScreen extends React.Component<Props, State> {
             style={component}
             placement={`${PLACEMENT} start`}
             visible={this.state.startVisible}
-            text='❤️'
+            text='Place your text here️'
             onRequestClose={this.onStartPress}>
             <TouchableOpacity
               style={tip}
@@ -76,7 +98,7 @@ class TooltipScreen extends React.Component<Props, State> {
             style={component}
             placement={`${PLACEMENT}`}
             visible={this.state.centerVisible}
-            text='💛️'
+            text='Place your text here'
             onRequestClose={this.onCenterPress}>
             <TouchableOpacity
               style={tip}
@@ -90,7 +112,7 @@ class TooltipScreen extends React.Component<Props, State> {
             style={component}
             placement={`${PLACEMENT} end`}
             visible={this.state.endVisible}
-            text='💚'
+            text='Place your text here'
             onRequestClose={this.onEndPress}>
             <TouchableOpacity
               style={tip}
@@ -99,6 +121,20 @@ class TooltipScreen extends React.Component<Props, State> {
             </TouchableOpacity>
           </Tooltip>
         </View>
+        <View style={componentContainer}>
+          <Tooltip
+            style={component}
+            visible={this.state.withIconVisible}
+            text='Place your text here'
+            icon={this.renderIcon}
+            onRequestClose={this.onWithIconPress}>
+            <TouchableOpacity
+              style={tip}
+              onPress={this.onWithIconPress}>
+              <Text style={text}>WITH ICON</Text>
+            </TouchableOpacity>
+          </Tooltip>
+        </View>
       </View>
     );
   }