From ef765d423cb188957a9fb2fd92c62b0efe8a36a6 Mon Sep 17 00:00:00 2001 From: Tim Yung Date: Thu, 28 Jan 2021 14:04:36 -0800 Subject: [PATCH] RN: Move `TOUCH_TARGET_DEBUG` to PressabilityDebug Summary: This is just cleanup. When I migrated components to `Pressability` instead of `Touchable`, I left `TOUCH_TARGET_DEBUG` alone to minimize moving pieces. But I had created `PressabilityDebug` as the eventual destination for this logic. Now that `Text` is migrated away from `Touchable` (see D26106824 (https://github.com/facebook/react-native/commit/f275514f275fdc404a853a1a2ab46620eea484f0)), this cleans up the final internal reference to `Touchable`. Changelog: [General][Changed] - `Touchable.renderDebugView` now accepts `ColorValue` instead of `string | number`. [General][Removed] - Removed `Touchable.TOUCH_TARGET_DEBUG` property. Reviewed By: kacieb Differential Revision: D26108570 fbshipit-source-id: 2694c9a9c29182ae04a77ba6c2e4406fcd5a277e --- Libraries/Components/Touchable/Touchable.js | 53 +++------------------ Libraries/Inspector/Inspector.js | 6 +-- Libraries/Pressability/PressabilityDebug.js | 11 ++++- 3 files changed, 18 insertions(+), 52 deletions(-) diff --git a/Libraries/Components/Touchable/Touchable.js b/Libraries/Components/Touchable/Touchable.js index aae584d497337d..6f05d2ea14b374 100644 --- a/Libraries/Components/Touchable/Touchable.js +++ b/Libraries/Components/Touchable/Touchable.js @@ -14,13 +14,12 @@ const BoundingDimensions = require('./BoundingDimensions'); const Platform = require('../../Utilities/Platform'); const Position = require('./Position'); const React = require('react'); -const StyleSheet = require('../../StyleSheet/StyleSheet'); const UIManager = require('../../ReactNative/UIManager'); -const View = require('../View/View'); const SoundManager = require('../Sound/SoundManager'); -const normalizeColor = require('../../StyleSheet/normalizeColor'); +import {PressabilityDebugView} from '../../Pressability/PressabilityDebug'; +import type {ColorValue} from '../../StyleSheet/StyleSheet'; import type {EdgeInsetsProp} from '../../StyleSheet/EdgeInsetsPropType'; import type {PressEvent} from '../../Types/CoreEventTypes'; @@ -899,7 +898,6 @@ TouchableMixin.withoutDefaultFocusAndBlur = TouchableMixinWithoutDefaultFocusAnd const Touchable = { Mixin: TouchableMixin, - TOUCH_TARGET_DEBUG: false, // Highlights all touchable targets. Toggle with Inspector. /** * Renders a debugging overlay to visualize touch target with hitSlop (might not work on Android). */ @@ -907,54 +905,15 @@ const Touchable = { color, hitSlop, }: { - color: string | number, + color: ColorValue, hitSlop: EdgeInsetsProp, ... }): null | React.Node => { - if (!Touchable.TOUCH_TARGET_DEBUG) { - return null; + if (__DEV__) { + return ; } - if (!__DEV__) { - throw Error( - 'Touchable.TOUCH_TARGET_DEBUG should not be enabled in prod!', - ); - } - const debugHitSlopStyle = {}; - hitSlop = hitSlop || {top: 0, bottom: 0, left: 0, right: 0}; - for (const key in hitSlop) { - debugHitSlopStyle[key] = -hitSlop[key]; - } - const normalizedColor = normalizeColor(color); - if (typeof normalizedColor !== 'number') { - return null; - } - const hexColor = - '#' + ('00000000' + normalizedColor.toString(16)).substr(-8); - return ( - =0.111.0 site=react_native_fb) This comment suppresses - * an error found when Flow v0.111 was deployed. To see the error, - * delete this comment and run Flow. */ - { - borderColor: hexColor.slice(0, -2) + '55', // More opaque - backgroundColor: hexColor.slice(0, -2) + '0F', // Less opaque - ...debugHitSlopStyle, - }, - ]} - /> - ); + return null; }, }; -const styles = StyleSheet.create({ - debug: { - position: 'absolute', - borderWidth: 1, - borderStyle: 'dashed', - }, -}); - module.exports = Touchable; diff --git a/Libraries/Inspector/Inspector.js b/Libraries/Inspector/Inspector.js index 2394a3dded98a1..470897d223bbca 100644 --- a/Libraries/Inspector/Inspector.js +++ b/Libraries/Inspector/Inspector.js @@ -14,10 +14,10 @@ const Dimensions = require('../Utilities/Dimensions'); const InspectorOverlay = require('./InspectorOverlay'); const InspectorPanel = require('./InspectorPanel'); const Platform = require('../Utilities/Platform'); +const PressabilityDebug = require('../Pressability/PressabilityDebug'); const React = require('react'); const ReactNative = require('../Renderer/shims/ReactNative'); const StyleSheet = require('../StyleSheet/StyleSheet'); -const Touchable = require('../Components/Touchable/Touchable'); const View = require('../Components/View/View'); const invariant = require('invariant'); @@ -279,7 +279,7 @@ class Inspector extends React.Component< } setTouchTargeting(val: boolean) { - Touchable.TOUCH_TARGET_DEBUG = val; + PressabilityDebug.setEnabled(val); this.props.onRequestRerenderApp(inspectedView => { this.setState({inspectedView}); }); @@ -318,7 +318,7 @@ class Inspector extends React.Component< hierarchy={this.state.hierarchy} selection={this.state.selection} setSelection={this.setSelection.bind(this)} - touchTargeting={Touchable.TOUCH_TARGET_DEBUG} + touchTargeting={PressabilityDebug.isEnabled()} setTouchTargeting={this.setTouchTargeting.bind(this)} networking={this.state.networking} setNetworking={this.setNetworking.bind(this)} diff --git a/Libraries/Pressability/PressabilityDebug.js b/Libraries/Pressability/PressabilityDebug.js index dd8ecdd2d172e0..9b693dfd43e124 100644 --- a/Libraries/Pressability/PressabilityDebug.js +++ b/Libraries/Pressability/PressabilityDebug.js @@ -13,7 +13,6 @@ import normalizeColor from '../StyleSheet/normalizeColor'; import type {ColorValue} from '../StyleSheet/StyleSheet'; -import Touchable from '../Components/Touchable/Touchable'; import View from '../Components/View/View'; import * as React from 'react'; @@ -73,9 +72,17 @@ export function PressabilityDebugView({color, hitSlop}: Props): React.Node { return null; } +let isDebugEnabled = false; + export function isEnabled(): boolean { if (__DEV__) { - return Touchable.TOUCH_TARGET_DEBUG; + return isDebugEnabled; } return false; } + +export function setEnabled(value: boolean): void { + if (__DEV__) { + isDebugEnabled = value; + } +}