From 149568e34c7d53407de83f3f190f6d1f6a7b3954 Mon Sep 17 00:00:00 2001
From: chiuam <67026167+chiuam@users.noreply.github.com>
Date: Fri, 29 Jan 2021 15:37:33 -0500
Subject: [PATCH] Add Tooltip support (#701)

---
 Libraries/Components/Button.js                |   6 +
 Libraries/Components/Slider/Slider.js         |   4 +
 Libraries/Components/TextInput/TextInput.js   |   4 +
 Libraries/Image/ImageProps.js                 |   5 +
 Libraries/Text/Text.js                        |   1 +
 Libraries/Text/TextProps.js                   |   9 ++
 .../js/examples/Tooltip/TooltipExample.js     | 120 ++++++++++++++++++
 RNTester/js/utils/RNTesterList.ios.js         |   5 +
 8 files changed, 154 insertions(+)
 create mode 100644 RNTester/js/examples/Tooltip/TooltipExample.js

diff --git a/Libraries/Components/Button.js b/Libraries/Components/Button.js
index 4beed029ab2248..a784aa01fe1a08 100644
--- a/Libraries/Components/Button.js
+++ b/Libraries/Components/Button.js
@@ -154,6 +154,10 @@ type ButtonProps = $ReadOnly<{|
    * For arrow keys, add "ArrowLeft", "ArrowRight", "ArrowUp", "ArrowDown",
    */
   validKeysUp?: ?Array<string>,
+  /*
+   * Specifies the Tooltip for the view
+   */
+  tooltip?: string,
   // ]TODO(OSS Candidate ISS#2710739)
 |}>;
 
@@ -211,6 +215,7 @@ class Button extends React.Component<ButtonProps> {
       validKeysDown,
       validKeysUp,
       onKeyUp,
+      tooltip,
     } = this.props;
     const buttonStyles = [styles.button];
     const textStyles = [styles.text];
@@ -261,6 +266,7 @@ class Button extends React.Component<ButtonProps> {
         onKeyUp={onKeyUp}
         validKeysDown={validKeysDown}
         validKeysUp={validKeysUp}
+        tooltip={tooltip}
         touchSoundDisabled={touchSoundDisabled}>
         <View style={buttonStyles}>
           <Text style={textStyles} disabled={disabled}>
diff --git a/Libraries/Components/Slider/Slider.js b/Libraries/Components/Slider/Slider.js
index 2f4981beac92ab..308d659caf2360 100644
--- a/Libraries/Components/Slider/Slider.js
+++ b/Libraries/Components/Slider/Slider.js
@@ -132,6 +132,10 @@ type Props = $ReadOnly<{|
    * Used to locate this view in UI automation tests.
    */
   testID?: ?string,
+  /**
+   * Specifies the tooltip.
+   */
+  tooltip?: ?string,
 |}>;
 
 /**
diff --git a/Libraries/Components/TextInput/TextInput.js b/Libraries/Components/TextInput/TextInput.js
index dc65b89fd4387e..0d83a97f3ec1c1 100644
--- a/Libraries/Components/TextInput/TextInput.js
+++ b/Libraries/Components/TextInput/TextInput.js
@@ -694,6 +694,10 @@ export type Props = $ReadOnly<{|
   forwardedRef?: ?ReactRefSetter<
     React.ElementRef<HostComponent<mixed>> & ImperativeMethods,
   >,
+  /*
+   * Specifies the tooltip.
+   */
+  tooltip?: ?string,
 |}>;
 
 type ImperativeMethods = $ReadOnly<{|
diff --git a/Libraries/Image/ImageProps.js b/Libraries/Image/ImageProps.js
index b3098a814debeb..522f2c78e3e4e9 100644
--- a/Libraries/Image/ImageProps.js
+++ b/Libraries/Image/ImageProps.js
@@ -171,4 +171,9 @@ export type ImageProps = {|
 
   src?: empty,
   children?: empty,
+
+  /**
+   * Specifies the Tooltip for the view
+   */
+  tooltip?: ?string,
 |};
diff --git a/Libraries/Text/Text.js b/Libraries/Text/Text.js
index 92da79d44901fc..764e19d4e88576 100644
--- a/Libraries/Text/Text.js
+++ b/Libraries/Text/Text.js
@@ -68,6 +68,7 @@ const viewConfig = {
     onTextLayout: true,
     onInlineViewLayout: true,
     dataDetectorType: true,
+    tooltip: true,
   },
   directEventTypes: {
     topTextLayout: {
diff --git a/Libraries/Text/TextProps.js b/Libraries/Text/TextProps.js
index b14dfbfa88cdfc..eb2c6de624408c 100644
--- a/Libraries/Text/TextProps.js
+++ b/Libraries/Text/TextProps.js
@@ -187,4 +187,13 @@ export type TextProps = $ReadOnly<{|
    * See https://facebook.github.io/react-native/docs/text.html#supperhighlighting
    */
   suppressHighlighting?: ?boolean,
+
+  /**
+   * macOS Only
+   */
+
+  /**
+   * Specifies the Tooltip for the button view
+   */
+  tooltip?: ?string,
 |}>;
diff --git a/RNTester/js/examples/Tooltip/TooltipExample.js b/RNTester/js/examples/Tooltip/TooltipExample.js
new file mode 100644
index 00000000000000..a649275b9c8b77
--- /dev/null
+++ b/RNTester/js/examples/Tooltip/TooltipExample.js
@@ -0,0 +1,120 @@
+/**
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ * @flow
+ * @format
+ */
+
+'use strict';
+
+const React = require('react');
+const {
+  Button,
+  Image,
+  Slider,
+  StyleSheet,
+  Text,
+  TextInput,
+  View,
+} = require('react-native');
+
+const styles = StyleSheet.create({
+  image: {
+    width: 38,
+    height: 38,
+  },
+  textInput: {
+    borderWidth: StyleSheet.hairlineWidth,
+    borderColor: '#0f0f0f',
+    flex: 1,
+    fontSize: 13,
+    padding: 4,
+  },
+  view: {
+    backgroundColor: '#3CE8DA',
+    padding: 10,
+  },
+});
+
+const image = {
+  uri: 'https://www.facebook.com/favicon.ico',
+};
+
+function SliderExample(props: React.ElementConfig<typeof Slider>) {
+  const [value, setValue] = React.useState(0);
+
+  return (
+    <View>
+      <Text>{value.toFixed(3)}</Text>
+      <Slider
+        {...props}
+        onValueChange={newValue => setValue(newValue)}
+        tooltip={value.toFixed(3)}
+      />
+    </View>
+  );
+}
+
+exports.displayName = 'TooltipExample';
+exports.framework = 'React';
+exports.title = 'Tooltip';
+exports.description = 'Examples that showcase tooltip in various components.';
+
+exports.examples = [
+  {
+    title: 'Button',
+    description: ('Simple button to showcase tooltip.': string),
+    render: function(): React.Node {
+      return (
+        <Button
+          title="Hover me"
+          onPress={() => {}}
+          tooltip={'Button tooltip'}
+        />
+      );
+    },
+  },
+  {
+    title: 'Text',
+    description: ('Simple text string to showcase tooltip.': string),
+    render: function(): React.Node {
+      return (
+        <Text tooltip={'Text tooltip'}>
+          Simple text string to showcase tooltip.
+        </Text>
+      );
+    },
+  },
+  {
+    title: 'Image',
+    description: ('Image to showcase tooltip.': string),
+    render: function(): React.Node {
+      return (
+        <Image source={image} style={styles.image} tooltip={'Facebook logo'} />
+      );
+    },
+  },
+  {
+    title: 'View',
+    description: ('Background color view to showcase tooltip.': string),
+    render: function(): React.Node {
+      return <View style={styles.view} tooltip={'Turquoise'} />;
+    },
+  },
+  {
+    title: 'Slider',
+    description: ('Tooltip displays the current value.': string),
+    render(): React.Element<any> {
+      return <SliderExample />;
+    },
+  },
+  {
+    title: 'TextInput',
+    render: function(): React.Node {
+      return <TextInput style={styles.textInput} tooltip={'Name'} />;
+    },
+  },
+];
diff --git a/RNTester/js/utils/RNTesterList.ios.js b/RNTester/js/utils/RNTesterList.ios.js
index 9abe4a26324fe9..8936c6bd36ddda 100644
--- a/RNTester/js/utils/RNTesterList.ios.js
+++ b/RNTester/js/utils/RNTesterList.ios.js
@@ -196,6 +196,11 @@ const ComponentExamples: Array<RNTesterExample> = [
     module: require('../examples/TextInput/TextInputExample.ios'),
     supportsTVOS: true,
   },
+  {
+    key: 'TooltipExample',
+    module: require('../examples/Tooltip/TooltipExample'),
+    supportsTVOS: true,
+  },
   {
     key: 'TouchableExample',
     module: require('../examples/Touchable/TouchableExample'),