From 01856633a1d42ed3b26e7cc93a007d7948e1f76e Mon Sep 17 00:00:00 2001 From: Muhammad Numan Date: Wed, 22 Sep 2021 10:38:43 -0700 Subject: [PATCH] feat: add cancelButtonTintColor props in ActionSheetIOS for change cancel button tint color (#31972) Summary: we need to change the text color of the cancel button in `ActionSheetIOS` but `tintColor` changes the all button text color except `destructiveButtonIndex` so I have added `cancelButtonTintColor` prop to change only the text color of the cancel button ## Changelog [General] [Changed] - added `cancelButtonTintColor` prop for `ActionSheetIOS` to change only the text color of the cancel button Pull Request resolved: https://github.com/facebook/react-native/pull/31972 Test Plan: With this PR you can change the cancel text button of `ActionSheetIOS` by this `cancelButtonTintColor` prop | | | | |-|-|-| Reviewed By: lunaleaps Differential Revision: D30878022 Pulled By: yungsters fbshipit-source-id: c70204f9f2510c75d8e9bed4e0fba79f1c941a1f --- Libraries/ActionSheetIOS/ActionSheetIOS.js | 15 ++++++- .../NativeActionSheetManager.js | 2 + React/CoreModules/RCTActionSheetManager.mm | 19 ++++++--- .../ActionSheetIOS/ActionSheetIOSExample.js | 41 +++++++++++++++++++ 4 files changed, 71 insertions(+), 6 deletions(-) diff --git a/Libraries/ActionSheetIOS/ActionSheetIOS.js b/Libraries/ActionSheetIOS/ActionSheetIOS.js index 786839498f334f..889832df1b77e5 100644 --- a/Libraries/ActionSheetIOS/ActionSheetIOS.js +++ b/Libraries/ActionSheetIOS/ActionSheetIOS.js @@ -47,6 +47,7 @@ const ActionSheetIOS = { +cancelButtonIndex?: ?number, +anchor?: ?number, +tintColor?: ColorValue | ProcessedColorValue, + +cancelButtonTintColor?: ColorValue | ProcessedColorValue, +userInterfaceStyle?: string, +disabledButtonIndices?: Array, |}, @@ -59,7 +60,12 @@ const ActionSheetIOS = { invariant(typeof callback === 'function', 'Must provide a valid callback'); invariant(RCTActionSheetManager, "ActionSheetManager doesn't exist"); - const {tintColor, destructiveButtonIndex, ...remainingOptions} = options; + const { + tintColor, + cancelButtonTintColor, + destructiveButtonIndex, + ...remainingOptions + } = options; let destructiveButtonIndices = null; if (Array.isArray(destructiveButtonIndex)) { @@ -69,14 +75,21 @@ const ActionSheetIOS = { } const processedTintColor = processColor(tintColor); + const processedCancelButtonTintColor = processColor(cancelButtonTintColor); invariant( processedTintColor == null || typeof processedTintColor === 'number', 'Unexpected color given for ActionSheetIOS.showActionSheetWithOptions tintColor', ); + invariant( + processedCancelButtonTintColor == null || + typeof processedCancelButtonTintColor === 'number', + 'Unexpected color given for ActionSheetIOS.showActionSheetWithOptions cancelButtonTintColor', + ); RCTActionSheetManager.showActionSheetWithOptions( { ...remainingOptions, tintColor: processedTintColor, + cancelButtonTintColor: processedCancelButtonTintColor, destructiveButtonIndices, }, callback, diff --git a/Libraries/ActionSheetIOS/NativeActionSheetManager.js b/Libraries/ActionSheetIOS/NativeActionSheetManager.js index 7c48f8e2d4bbc3..56429c658ac0a6 100644 --- a/Libraries/ActionSheetIOS/NativeActionSheetManager.js +++ b/Libraries/ActionSheetIOS/NativeActionSheetManager.js @@ -22,6 +22,7 @@ export interface Spec extends TurboModule { +cancelButtonIndex?: ?number, +anchor?: ?number, +tintColor?: ?number, + +cancelButtonTintColor?: ?number, +userInterfaceStyle?: ?string, +disabledButtonIndices?: Array, |}, @@ -34,6 +35,7 @@ export interface Spec extends TurboModule { +subject?: ?string, +anchor?: ?number, +tintColor?: ?number, + +cancelButtonTintColor?: ?number, +excludedActivityTypes?: ?Array, +userInterfaceStyle?: ?string, |}, diff --git a/React/CoreModules/RCTActionSheetManager.mm b/React/CoreModules/RCTActionSheetManager.mm index 76918d9ab79655..5cd782ea70a83b 100644 --- a/React/CoreModules/RCTActionSheetManager.mm +++ b/React/CoreModules/RCTActionSheetManager.mm @@ -94,6 +94,8 @@ - (void)presentViewController:(UIViewController *)alertController UIViewController *controller = RCTPresentedViewController(); NSNumber *anchor = [RCTConvert NSNumber:options.anchor() ? @(*options.anchor()) : nil]; UIColor *tintColor = [RCTConvert UIColor:options.tintColor() ? @(*options.tintColor()) : nil]; + UIColor *cancelButtonTintColor = + [RCTConvert UIColor:options.cancelButtonTintColor() ? @(*options.cancelButtonTintColor()) : nil]; if (controller == nil) { RCTLogError( @@ -105,6 +107,7 @@ - (void)presentViewController:(UIViewController *)alertController @"destructiveButtonIndices" : destructiveButtonIndices, @"anchor" : anchor, @"tintColor" : tintColor, + @"cancelButtonTintColor" : cancelButtonTintColor, @"disabledButtonIndices" : disabledButtonIndices, }); return; @@ -122,20 +125,26 @@ - (void)presentViewController:(UIViewController *)alertController preferredStyle:UIAlertControllerStyleActionSheet]; NSInteger index = 0; + bool isCancelButtonIndex = false; for (NSString *option in buttons) { UIAlertActionStyle style = UIAlertActionStyleDefault; if ([destructiveButtonIndices containsObject:@(index)]) { style = UIAlertActionStyleDestructive; } else if (index == cancelButtonIndex) { style = UIAlertActionStyleCancel; + isCancelButtonIndex = true; } NSInteger localIndex = index; - [alertController addAction:[UIAlertAction actionWithTitle:option - style:style - handler:^(__unused UIAlertAction *action) { - callback(@[ @(localIndex) ]); - }]]; + UIAlertAction *actionButton = [UIAlertAction actionWithTitle:option + style:style + handler:^(__unused UIAlertAction *action) { + callback(@[ @(localIndex) ]); + }]; + if (isCancelButtonIndex) { + [actionButton setValue:cancelButtonTintColor forKey:@"titleTextColor"]; + } + [alertController addAction:actionButton]; index++; } diff --git a/packages/rn-tester/js/examples/ActionSheetIOS/ActionSheetIOSExample.js b/packages/rn-tester/js/examples/ActionSheetIOS/ActionSheetIOSExample.js index 917cba05c0ce09..dae3c572a55057 100644 --- a/packages/rn-tester/js/examples/ActionSheetIOS/ActionSheetIOSExample.js +++ b/packages/rn-tester/js/examples/ActionSheetIOS/ActionSheetIOSExample.js @@ -93,6 +93,41 @@ class ActionSheetTintExample extends React.Component< }; } +class ActionSheetCancelButtonTintExample extends React.Component< + $FlowFixMeProps, + $FlowFixMeState, +> { + state = { + clicked: 'none', + }; + + render() { + return ( + + + Click to show the ActionSheet + + Clicked button: {this.state.clicked} + + ); + } + + showActionSheet = () => { + ActionSheetIOS.showActionSheetWithOptions( + { + options: BUTTONS, + cancelButtonIndex: CANCEL_INDEX, + destructiveButtonIndex: DESTRUCTIVE_INDEX, + tintColor: 'green', + cancelButtonTintColor: 'brown', + }, + buttonIndex => { + this.setState({clicked: BUTTONS[buttonIndex]}); + }, + ); + }; +} + class ActionSheetAnchorExample extends React.Component< $FlowFixMeProps, $FlowFixMeState, @@ -342,6 +377,12 @@ exports.examples = [ return ; }, }, + { + title: 'Show Action Sheet with cancel tinted button', + render(): React.Element { + return ; + }, + }, { title: 'Show Action Sheet with anchor', render(): React.Element {