Skip to content
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.

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

feat: [iOS] add caretHeight and caretYoffset to TextInput component #37147

Closed
Show file tree
Hide file tree
Changes from all commits
Commits
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
Original file line number Diff line number Diff line change
Expand Up @@ -124,6 +124,8 @@ const RCTTextInputViewConfig = {
editable: true,
inputAccessoryViewID: true,
caretHidden: true,
caretHeight: true,
caretYOffset: true,
enablesReturnKeyAutomatically: true,
placeholderTextColor: {
process: require('../../StyleSheet/processColor').default,
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -668,6 +668,20 @@ export interface TextInputProps
*/
caretHidden?: boolean | undefined;

/**
* Allows to adjust caret height.
* The default value is 0, which means the height of the caret will be calculated automatically
* @platform ios
*/
caretHeight?: number | undefined;
sammy-SC marked this conversation as resolved.
Show resolved Hide resolved

/**
* Allows to adjust caret position relative to the Y axis
* The default value is 0.
* @platform ios
*/
caretYOffset?: number | undefined;
sammy-SC marked this conversation as resolved.
Show resolved Hide resolved

/**
* If true, context menu is hidden. The default value is false.
*/
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -591,6 +591,20 @@ export type Props = $ReadOnly<{|
*/
caretHidden?: ?boolean,

/**
* Allows to adjust caret height.
* The default value is 0, which means the height of the caret will be calculated automatically
* @platform ios
*/
caretYOffset?: ?number,
sammy-SC marked this conversation as resolved.
Show resolved Hide resolved

/**
* Allows to adjust caret position relative to the Y axis
* The default value is 0.
* @platform ios
*/
caretYHeight?: ?number,
sammy-SC marked this conversation as resolved.
Show resolved Hide resolved

/*
* If `true`, contextMenuHidden is hidden. The default value is `false`.
*/
Expand Down
14 changes: 14 additions & 0 deletions packages/react-native/Libraries/Components/TextInput/TextInput.js
Original file line number Diff line number Diff line change
Expand Up @@ -365,6 +365,20 @@ type IOSProps = $ReadOnly<{|
* @platform ios
*/
smartInsertDelete?: ?boolean,

/**
* Allows to adjust caret height.
* The default value is 0, which means the height of the caret will be calculated automatically
* @platform ios
*/
caretYOffset?: ?number,
sammy-SC marked this conversation as resolved.
Show resolved Hide resolved

/**
* Allows to adjust caret position relative to the Y axis
* The default value is 0.
* @platform ios
*/
caretHeight?: ?number,
sammy-SC marked this conversation as resolved.
Show resolved Hide resolved
|}>;

type AndroidProps = $ReadOnly<{|
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -35,6 +35,8 @@ NS_ASSUME_NONNULL_BEGIN
@property (nonatomic, assign) UITextFieldViewMode clearButtonMode;

@property (nonatomic, assign) BOOL caretHidden;
@property (nonatomic, assign) CGFloat caretYOffset;
@property (nonatomic, assign) CGFloat caretHeight;

@property (nonatomic, strong, nullable) NSString *inputAccessoryViewID;

Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -13,6 +13,33 @@
#import <React/RCTBackedTextInputDelegateAdapter.h>
#import <React/RCTTextAttributes.h>

// subclass needs to be created as UITextSelectionRect is an abstract base class
@interface RCTTextSelectionRect : UITextSelectionRect

@property (nonatomic, assign) CGRect rect;
@property (nonatomic, assign) NSWritingDirection writingDirection;
@property (nonatomic, assign) BOOL containsStart; // Returns YES if the rect contains the start of the selection.
@property (nonatomic, assign) BOOL containsEnd; // Returns YES if the rect contains the end of the selection.
@property (nonatomic, assign) BOOL isVertical; // Returns YES if the rect is for vertically oriented text.

@end

@implementation RCTTextSelectionRect {
CGRect _customRect;
NSWritingDirection _customWritingDirection;
BOOL _customContainsStart;
BOOL _customContainsEnd;
BOOL _customIsVertical;
}

@synthesize rect = _customRect;
@synthesize writingDirection = _customWritingDirection;
@synthesize containsStart = _customContainsStart;
@synthesize containsEnd = _customContainsEnd;
@synthesize isVertical = _customIsVertical;

@end

@implementation RCTUITextView {
UILabel *_placeholderView;
UITextView *_detachedTextView;
Expand Down Expand Up @@ -307,11 +334,44 @@ - (void)_updatePlaceholder

- (CGRect)caretRectForPosition:(UITextPosition *)position
{
CGRect originalRect = [super caretRectForPosition:position];

if (_caretHidden) {
return CGRectZero;
}

return [super caretRectForPosition:position];
if(_caretYOffset != 0) {
originalRect.origin.y += _caretYOffset;
}

if(_caretHeight != 0) {
originalRect.size.height = _caretHeight;
}

return originalRect;
}

- (NSArray<UITextSelectionRect *> *)selectionRectsForRange:(UITextRange *)range {
NSArray *superRects = [super selectionRectsForRange:range];
if(_caretYOffset != 0 && _caretHeight != 0) {
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Should this be ||, so this works if you specify either one of the properties?

Copy link
Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

The block should only be executed if both properties are set.

NSMutableArray *customTextSelectionRects = [NSMutableArray array];

for (UITextSelectionRect *rect in superRects) {
RCTTextSelectionRect *customTextRect = [[RCTTextSelectionRect alloc] init];

customTextRect.rect = CGRectMake(rect.rect.origin.x, rect.rect.origin.y + _caretYOffset, rect.rect.size.width, _caretHeight);
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This then needs to handle _caretHeight being potentially 0.

Copy link
Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

The block should only be executed if both properties are set.

customTextRect.writingDirection = rect.writingDirection;
customTextRect.containsStart = rect.containsStart;
customTextRect.containsEnd = rect.containsEnd;
customTextRect.isVertical = rect.isVertical;
[customTextSelectionRects addObject:customTextRect];
}

return customTextSelectionRects;

}
return superRects;

}

#pragma mark - Utility Methods
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -28,6 +28,8 @@ NS_ASSUME_NONNULL_BEGIN
@property (nonatomic, assign) BOOL contextMenuHidden;
@property (nonatomic, assign, getter=isEditable) BOOL editable;
@property (nonatomic, assign) BOOL caretHidden;
@property (nonatomic, assign) CGFloat caretYOffset;
@property (nonatomic, assign) CGFloat caretHeight;
@property (nonatomic, assign) BOOL enablesReturnKeyAutomatically;
@property (nonatomic, assign) UITextFieldViewMode clearButtonMode;
@property (nonatomic, getter=isScrollEnabled) BOOL scrollEnabled;
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -44,6 +44,8 @@ @implementation RCTBaseTextInputViewManager {
RCT_REMAP_VIEW_PROPERTY(selectionColor, backedTextInputView.tintColor, UIColor)
RCT_REMAP_VIEW_PROPERTY(spellCheck, backedTextInputView.spellCheckingType, UITextSpellCheckingType)
RCT_REMAP_VIEW_PROPERTY(caretHidden, backedTextInputView.caretHidden, BOOL)
RCT_REMAP_VIEW_PROPERTY(caretYOffset, backedTextInputView.caretYOffset, CGFloat)
RCT_REMAP_VIEW_PROPERTY(caretHeight, backedTextInputView.caretHeight, CGFloat)
RCT_REMAP_VIEW_PROPERTY(clearButtonMode, backedTextInputView.clearButtonMode, UITextFieldViewMode)
RCT_REMAP_VIEW_PROPERTY(scrollEnabled, backedTextInputView.scrollEnabled, BOOL)
RCT_REMAP_VIEW_PROPERTY(secureTextEntry, backedTextInputView.secureTextEntry, BOOL)
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -22,6 +22,8 @@ NS_ASSUME_NONNULL_BEGIN
@property (nonatomic, weak) id<RCTBackedTextInputDelegate> textInputDelegate;

@property (nonatomic, assign) BOOL caretHidden;
@property (nonatomic, assign) BOOL caretYOffset;
@property (nonatomic, assign) BOOL caretHeight;
@property (nonatomic, assign) BOOL contextMenuHidden;
@property (nonatomic, assign, readonly) BOOL textWasPasted;
@property (nonatomic, assign, readonly) BOOL dictationRecognizing;
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -2405,18 +2405,6 @@ declare export default HostComponent<NativeProps>;
"
`;

exports[`public API should not change unintentionally Libraries/Components/TextInput/InputAccessoryView.js 1`] = `
"type Props = $ReadOnly<{|
+children: React.Node,
nativeID?: ?string,
style?: ?ViewStyleProp,
backgroundColor?: ?ColorValue,
|}>;
declare const InputAccessoryView: React.AbstractComponent<Props>;
declare export default typeof InputAccessoryView;
"
`;

exports[`public API should not change unintentionally Libraries/Components/TextInput/RCTInputAccessoryViewNativeComponent.js 1`] = `
"export * from \\"../../../src/private/specs/components/RCTInputAccessoryViewNativeComponent\\";
declare export default typeof RCTInputAccessoryViewNativeComponent;
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -151,6 +151,14 @@ - (void)updateProps:(const Props::Shared &)props oldProps:(const Props::Shared &
_backedTextInputView.caretHidden = newTextInputProps.traits.caretHidden;
}

if(newTextInputProps.traits.caretYOffset != oldTextInputProps.traits.caretYOffset) {
_backedTextInputView.caretYOffset = newTextInputProps.traits.caretYOffset;
}

if(newTextInputProps.traits.caretHeight != oldTextInputProps.traits.caretHeight) {
_backedTextInputView.caretHeight = newTextInputProps.traits.caretHeight;
}

if (newTextInputProps.traits.clearButtonMode != oldTextInputProps.traits.clearButtonMode) {
_backedTextInputView.clearButtonMode =
RCTUITextFieldViewModeFromTextInputAccessoryVisibilityMode(newTextInputProps.traits.clearButtonMode);
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -38,6 +38,8 @@ void RCTCopyBackedTextInput(
toTextInput.keyboardAppearance = fromTextInput.keyboardAppearance;
toTextInput.spellCheckingType = fromTextInput.spellCheckingType;
toTextInput.caretHidden = fromTextInput.caretHidden;
toTextInput.caretYOffset = fromTextInput.caretYOffset;
toTextInput.caretHeight = fromTextInput.caretHeight;
toTextInput.clearButtonMode = fromTextInput.clearButtonMode;
toTextInput.scrollEnabled = fromTextInput.scrollEnabled;
toTextInput.secureTextEntry = fromTextInput.secureTextEntry;
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -155,6 +155,18 @@ class TextInputTraits final {
*/
bool caretHidden{false};

/*
* iOS-only (inherently iOS-specific)
* Default value: 0 with a default font.
*/
int caretHeight{0};

/*
* iOS-only (inherently iOS-specific)
* Default value: 0 means that the caret offset will have the default value
*/
int caretYOffset{0};

/*
* Controls the visibility of a `Clean` button.
* iOS-only (implemented only on iOS for now)
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -75,6 +75,18 @@ static TextInputTraits convertRawProp(
"caretHidden",
sourceTraits.caretHidden,
defaultTraits.caretHidden);
traits.caretYOffset = convertRawProp(
context,
rawProps,
"caretYOffset",
sourceTraits.caretYOffset,
defaultTraits.caretYOffset);
traits.caretHeight= convertRawProp(
context,
rawProps,
"caretHeight",
sourceTraits.caretHeight,
defaultTraits.caretHeight);
traits.clearButtonMode = convertRawProp(
context,
rawProps,
Expand Down