From f26243a040d508c46bd59a8771ea9b07b9da8886 Mon Sep 17 00:00:00 2001 From: HeyImChris <48299693+HeyImChris@users.noreply.github.com> Date: Tue, 9 Feb 2021 10:18:01 -0800 Subject: [PATCH] Cherry pick tooltip support to 0.63 branch (#713) * Add nullability checks (#704) * Update RCTCxxBridge.mm * add nullability checks * 63 tooltips * Add Tooltip support (#701) Co-authored-by: chiuam <67026167+chiuam@users.noreply.github.com> --- 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 7bb0f5111a639d..f2783ca4e25a41 100644 --- a/Libraries/Components/Button.js +++ b/Libraries/Components/Button.js @@ -135,6 +135,10 @@ type ButtonProps = $ReadOnly<{| * For arrow keys, add "ArrowLeft", "ArrowRight", "ArrowUp", "ArrowDown", */ validKeysUp?: ?Array, + /* + * Specifies the Tooltip for the view + */ + tooltip?: string, // ]TODO(OSS Candidate ISS#2710739) |}>; @@ -189,6 +193,7 @@ class Button extends React.Component { validKeysDown, validKeysUp, onKeyUp, + tooltip, } = this.props; const buttonStyles = [styles.button]; const textStyles = [styles.text]; @@ -237,6 +242,7 @@ class Button extends React.Component { onKeyUp={onKeyUp} validKeysDown={validKeysDown} validKeysUp={validKeysUp} + tooltip={tooltip} touchSoundDisabled={touchSoundDisabled}> 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 d6220055e79b3a..3a76f0a3d0fb32 100644 --- a/Libraries/Components/TextInput/TextInput.js +++ b/Libraries/Components/TextInput/TextInput.js @@ -714,6 +714,10 @@ export type Props = $ReadOnly<{| forwardedRef?: ?ReactRefSetter< React.ElementRef> & ImperativeMethods, >, + /* + * Specifies the tooltip. + */ + tooltip?: ?string, |}>; type ImperativeMethods = $ReadOnly<{| diff --git a/Libraries/Image/ImageProps.js b/Libraries/Image/ImageProps.js index 8f8512e06cb861..2218270ec0f89b 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 660dd87976121f..8a33e8558f0aed 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 009929e8ff7076..191c5df185a7c5 100644 --- a/Libraries/Text/TextProps.js +++ b/Libraries/Text/TextProps.js @@ -187,4 +187,13 @@ export type TextProps = $ReadOnly<{| * See https://reactnative.dev/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) { + const [value, setValue] = React.useState(0); + + return ( + + {value.toFixed(3)} + setValue(newValue)} + tooltip={value.toFixed(3)} + /> + + ); +} + +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 ( +