From a237e8da7a2f7c1adf95fe5080d8eba2191ce725 Mon Sep 17 00:00:00 2001 From: Pieter Vanderwerff Date: Thu, 13 Jun 2024 10:14:56 -0700 Subject: [PATCH] Destructure all overridden props (#44910) Summary: Pull Request resolved: https://github.com/facebook/react-native/pull/44910 Props within the `Text` component are accessed both via destructuring the props object but also in some cases by using a "dot" access on the destructured `restProps`. However in all of the "dot" access cases the property is being overrided. Which means in the final JSX these properties get set twice, e.g. via the `restProps` spread then overrrided by static properties. This change just destructures all values to avoid this inefficiency. Changelog: [Internal] Reviewed By: javache Differential Revision: D58446569 fbshipit-source-id: 12a800f5e2218a1d95d57cc689a4c79caab480b4 --- packages/react-native/Libraries/Text/Text.js | 39 +++++++++++--------- 1 file changed, 21 insertions(+), 18 deletions(-) diff --git a/packages/react-native/Libraries/Text/Text.js b/packages/react-native/Libraries/Text/Text.js index bf59b66e6a4..f40e628b411 100644 --- a/packages/react-native/Libraries/Text/Text.js +++ b/packages/react-native/Libraries/Text/Text.js @@ -42,8 +42,10 @@ const Text: React.AbstractComponent< 'aria-label': ariaLabel, 'aria-selected': ariaSelected, ellipsizeMode, + disabled, id, nativeID, + numberOfLines, onLongPress, onPress, onPressIn, @@ -55,7 +57,10 @@ const Text: React.AbstractComponent< onResponderTerminationRequest, onStartShouldSetResponder, pressRetentionOffset, + selectable, + selectionColor, suppressHighlighting, + style, ...restProps } = props; @@ -92,7 +97,7 @@ const Text: React.AbstractComponent< } const _accessibilityStateDisabled = _accessibilityState?.disabled; - const _disabled = restProps.disabled ?? _accessibilityStateDisabled; + const _disabled = disabled ?? _accessibilityStateDisabled; const isPressable = (onPress != null || @@ -195,29 +200,26 @@ const Text: React.AbstractComponent< ); // TODO: Move this processing to the view configuration. - const selectionColor = - restProps.selectionColor == null - ? null - : processColor(restProps.selectionColor); + const _selectionColor = + selectionColor == null ? null : processColor(selectionColor); - let style = restProps.style; + let _style = style; if (__DEV__) { if (PressabilityDebug.isEnabled() && onPress != null) { - style = [restProps.style, {color: 'magenta'}]; + _style = [style, {color: 'magenta'}]; } } - let numberOfLines = restProps.numberOfLines; - if (numberOfLines != null && !(numberOfLines >= 0)) { + let _numberOfLines = numberOfLines; + if (_numberOfLines != null && !(_numberOfLines >= 0)) { console.error( - `'numberOfLines' in must be a non-negative number, received: ${numberOfLines}. The value will be set to 0.`, + `'numberOfLines' in must be a non-negative number, received: ${_numberOfLines}. The value will be set to 0.`, ); - numberOfLines = 0; + _numberOfLines = 0; } - let _selectable = restProps.selectable; - - const processedStyle = flattenStyle(style); + let _selectable = selectable; + const processedStyle = flattenStyle(_style); if (processedStyle != null) { if (typeof processedStyle.fontWeight === 'number') { // $FlowFixMe[cannot-write] @@ -252,11 +254,12 @@ const Text: React.AbstractComponent< isHighlighted={isHighlighted} isPressable={isPressable} nativeID={_nativeID} - numberOfLines={numberOfLines} + numberOfLines={_numberOfLines} ref={forwardedRef} selectable={_selectable} - selectionColor={selectionColor} + selectionColor={_selectionColor} style={processedStyle} + disabled={disabled} /> ); } @@ -292,10 +295,10 @@ const Text: React.AbstractComponent< ellipsizeMode={ellipsizeMode ?? 'tail'} isHighlighted={isHighlighted} nativeID={_nativeID} - numberOfLines={numberOfLines} + numberOfLines={_numberOfLines} ref={forwardedRef} selectable={_selectable} - selectionColor={selectionColor} + selectionColor={_selectionColor} style={processedStyle} />