diff --git a/Libraries/Components/TextInput/RCTTextInputViewConfig.js b/Libraries/Components/TextInput/RCTTextInputViewConfig.js index 2b1c192b2ea3f6..c5c0de0f9ef6da 100644 --- a/Libraries/Components/TextInput/RCTTextInputViewConfig.js +++ b/Libraries/Components/TextInput/RCTTextInputViewConfig.js @@ -163,6 +163,7 @@ const RCTTextInputViewConfig = { pastedTypes: true, submitKeyEvents: true, tooltip: true, + cursorColor: {process: require('../../StyleSheet/processColor').default}, // macOS] ...ConditionallyIgnoredEventHandlers({ onChange: true, diff --git a/Libraries/Components/TextInput/TextInput.js b/Libraries/Components/TextInput/TextInput.js index eca234e99bf8a2..3d25eabc93a80c 100644 --- a/Libraries/Components/TextInput/TextInput.js +++ b/Libraries/Components/TextInput/TextInput.js @@ -612,7 +612,8 @@ type AndroidProps = $ReadOnly<{| * When provided it will set the color of the cursor (or "caret") in the component. * Unlike the behavior of `selectionColor` the cursor color will be set independently * from the color of the text selection box. - * @platform android + // [macOS] + * @platform android macos */ cursorColor?: ?ColorValue, diff --git a/Libraries/Text/TextInput/Multiline/RCTUITextView.h b/Libraries/Text/TextInput/Multiline/RCTUITextView.h index 3f9b7cf224cd1b..3e5d9c77904807 100644 --- a/Libraries/Text/TextInput/Multiline/RCTUITextView.h +++ b/Libraries/Text/TextInput/Multiline/RCTUITextView.h @@ -47,7 +47,8 @@ NS_ASSUME_NONNULL_BEGIN #if TARGET_OS_OSX // [macOS @property (nonatomic, getter=isScrollEnabled) BOOL scrollEnabled; -@property (nonatomic, strong, nullable) RCTUIColor *selectionColor; // TODO(OSS Candidate ISS#2710739) +@property (nonatomic, strong, nullable) RCTUIColor *selectionColor; +@property (nonatomic, strong, nullable) RCTUIColor *cursorColor; @property (nonatomic, assign) UIEdgeInsets textContainerInsets; @property (nonatomic, copy) NSString *text; @property (nonatomic, assign) NSTextAlignment textAlignment; diff --git a/Libraries/Text/TextInput/Multiline/RCTUITextView.m b/Libraries/Text/TextInput/Multiline/RCTUITextView.m index 829d7ad86e3482..2159c5515703e1 100644 --- a/Libraries/Text/TextInput/Multiline/RCTUITextView.m +++ b/Libraries/Text/TextInput/Multiline/RCTUITextView.m @@ -152,7 +152,7 @@ - (void)setSelectionColor:(RCTUIColor *)selectionColor NSMutableDictionary *selectTextAttributes = self.selectedTextAttributes.mutableCopy; selectTextAttributes[NSBackgroundColorAttributeName] = selectionColor ?: [NSColor selectedControlColor]; self.selectedTextAttributes = selectTextAttributes.copy; - self.insertionPointColor = self.selectionColor ?: [NSColor textColor]; + self.insertionPointColor = _cursorColor ?: self.selectionColor ?: [NSColor textColor]; } - (RCTUIColor*)selectionColor @@ -160,6 +160,12 @@ - (RCTUIColor*)selectionColor return (RCTUIColor*)self.selectedTextAttributes[NSBackgroundColorAttributeName]; } +- (void)setCursorColor:(NSColor *)cursorColor +{ + _cursorColor = cursorColor; + self.insertionPointColor = cursorColor; +} + - (void)setEnabledTextCheckingTypes:(NSTextCheckingTypes)checkingType { [super setEnabledTextCheckingTypes:checkingType]; diff --git a/Libraries/Text/TextInput/RCTBaseTextInputView.h b/Libraries/Text/TextInput/RCTBaseTextInputView.h index 93d49da3255030..d230825f3def83 100644 --- a/Libraries/Text/TextInput/RCTBaseTextInputView.h +++ b/Libraries/Text/TextInput/RCTBaseTextInputView.h @@ -50,6 +50,7 @@ NS_ASSUME_NONNULL_BEGIN @property (nonatomic, assign) BOOL clearTextOnSubmit; @property (nonatomic, copy, nullable) RCTDirectEventBlock onSubmitEditing; @property (nonatomic, copy) NSArray *submitKeyEvents; +@property (nonatomic, strong, nullable) RCTUIColor *cursorColor; #endif // macOS] @property (nonatomic, assign) NSInteger mostRecentEventCount; @property (nonatomic, assign, readonly) NSInteger nativeEventCount; diff --git a/Libraries/Text/TextInput/RCTBaseTextInputViewManager.m b/Libraries/Text/TextInput/RCTBaseTextInputViewManager.m index b84453912a17a8..5e0eb6a23d3a28 100644 --- a/Libraries/Text/TextInput/RCTBaseTextInputViewManager.m +++ b/Libraries/Text/TextInput/RCTBaseTextInputViewManager.m @@ -74,6 +74,8 @@ @implementation RCTBaseTextInputViewManager { RCT_EXPORT_VIEW_PROPERTY(clearTextOnSubmit, BOOL); RCT_EXPORT_VIEW_PROPERTY(onSubmitEditing, RCTBubblingEventBlock); RCT_EXPORT_VIEW_PROPERTY(submitKeyEvents, NSArray); + +RCT_REMAP_VIEW_PROPERTY(cursorColor, backedTextInputView.cursorColor, UIColor) #endif // macOS] RCT_EXPORT_VIEW_PROPERTY(onChange, RCTBubblingEventBlock) diff --git a/Libraries/Text/TextInput/Singleline/RCTUITextField.m b/Libraries/Text/TextInput/Singleline/RCTUITextField.m index 561a2b18ec5299..3514aadf98bf27 100644 --- a/Libraries/Text/TextInput/Singleline/RCTUITextField.m +++ b/Libraries/Text/TextInput/Singleline/RCTUITextField.m @@ -30,6 +30,7 @@ @interface RCTUITextFieldCell : NSTextFieldCell @property (nonatomic, getter=isContinuousSpellCheckingEnabled) BOOL continuousSpellCheckingEnabled; @property (nonatomic, getter=isGrammarCheckingEnabled) BOOL grammarCheckingEnabled; @property (nonatomic, strong, nullable) RCTUIColor *selectionColor; +@property (nonatomic, strong, nullable) RCTUIColor *insertionPointColor; @end @@ -77,7 +78,8 @@ - (NSText *)setUpFieldEditorAttributes:(NSText *)textObj fieldEditor.grammarCheckingEnabled = self.isGrammarCheckingEnabled; NSMutableDictionary *selectTextAttributes = fieldEditor.selectedTextAttributes.mutableCopy; selectTextAttributes[NSBackgroundColorAttributeName] = self.selectionColor ?: [NSColor selectedControlColor]; - fieldEditor.selectedTextAttributes = selectTextAttributes; + fieldEditor.selectedTextAttributes = selectTextAttributes; + fieldEditor.insertionPointColor = self.insertionPointColor ?: [NSColor textColor]; return fieldEditor; } @@ -262,6 +264,16 @@ - (RCTUIColor*)selectionColor { return ((RCTUITextFieldCell*)self.cell).selectionColor; } + +- (void)setCursorColor:(NSColor *)cursorColor +{ + ((RCTUITextFieldCell*)self.cell).insertionPointColor = cursorColor; +} + +- (RCTUIColor*)cursorColor +{ + return ((RCTUITextFieldCell*)self.cell).insertionPointColor; +} - (void)setFont:(UIFont *)font { diff --git a/packages/rn-tester/js/examples/TextInput/TextInputExample.ios.js b/packages/rn-tester/js/examples/TextInput/TextInputExample.ios.js index e22619f37eb902..4972774dd07645 100644 --- a/packages/rn-tester/js/examples/TextInput/TextInputExample.ios.js +++ b/packages/rn-tester/js/examples/TextInput/TextInputExample.ios.js @@ -1107,6 +1107,55 @@ if (Platform.OS === 'macos') { return ; }, }, + { + title: 'Cursor color', + render: function (): React.Node { + return ( + + + + + + + ); + }, + }, ); } // [macOS]