Skip to content

Destructure all overridden props #44910

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Closed
pieterv wants to merge 2 commits into from
Closed

Destructure all overridden props #44910

Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
c5c29ec
Fork onPress callbacks for ios highlighting
pieterv Jun 12, 2024
0603d5e
Destructure all overridden props (#44910)
pieterv Jun 12, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
111 changes: 60 additions & 51 deletions packages/react-native/Libraries/Text/Text.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -42,8 +42,10 @@ const Text: React.AbstractComponent<
'aria-label': ariaLabel,
'aria-selected': ariaSelected,
ellipsizeMode,
disabled,
id,
nativeID,
numberOfLines,
onLongPress,
onPress,
onPressIn,
Expand All @@ -55,7 +57,10 @@ const Text: React.AbstractComponent<
onResponderTerminationRequest,
onStartShouldSetResponder,
pressRetentionOffset,
selectable,
selectionColor,
suppressHighlighting,
style,
...restProps
} = props;

Expand Down Expand Up @@ -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 ||
Expand All @@ -101,41 +106,47 @@ const Text: React.AbstractComponent<
_disabled !== true;

const initialized = useLazyInitialization(isPressable);
const config = useMemo(
() =>
initialized
? {
disabled: !isPressable,
pressRectOffset: pressRetentionOffset,
onLongPress,
onPress,
onPressIn(event: PressEvent) {
// Updating isHighlighted causes unnecessary re-renders for platforms that don't use it
// in the best case, and cause issues with text selection in the worst case. Forcing
// the isHighlighted prop to false on all platforms except iOS.
setHighlighted(
(suppressHighlighting == null || !suppressHighlighting) &&
Platform.OS === 'ios',
);
onPressIn?.(event);
},
onPressOut(event: PressEvent) {
setHighlighted(false);
onPressOut?.(event);
},
}
: null,
[
initialized,
isPressable,
pressRetentionOffset,
const config = useMemo(() => {
if (!initialized) {
return null;
}

let _onPressIn = onPressIn;
let _onPressOut = onPressOut;

// Updating isHighlighted causes unnecessary re-renders for platforms that don't use it
// in the best case, and cause issues with text selection in the worst case. Forcing
// the isHighlighted prop to false on all platforms except iOS.
if (Platform.OS === 'ios') {
_onPressIn = (event: PressEvent) => {
setHighlighted(suppressHighlighting == null || !suppressHighlighting);
onPressIn?.(event);
};

_onPressOut = (event: PressEvent) => {
setHighlighted(false);
onPressOut?.(event);
};
}

return {
disabled: !isPressable,
pressRectOffset: pressRetentionOffset,
onLongPress,
onPress,
onPressIn,
onPressOut,
suppressHighlighting,
],
);
onPressIn: _onPressIn,
onPressOut: _onPressOut,
};
}, [
initialized,
isPressable,
pressRetentionOffset,
onLongPress,
onPress,
onPressIn,
onPressOut,
suppressHighlighting,
]);

const eventHandlers = usePressability(config);
const eventHandlersForText = useMemo(
Expand Down Expand Up @@ -189,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 <Text> must be a non-negative number, received: ${numberOfLines}. The value will be set to 0.`,
`'numberOfLines' in <Text> 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]
Expand Down Expand Up @@ -246,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}
/>
);
}
Expand Down Expand Up @@ -286,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}
/>
</TextAncestor.Provider>
Expand Down