Files
react-native/Libraries/ActionSheetIOS/ActionSheetIOS.js
T
Muhammad NumanandFacebook GitHub Bot 01856633a1 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

<!-- Help reviewers and the release process by writing your own changelog entry. For an example, see:
https://github.com/facebook/react-native/wiki/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

| <img src="https://user-images.githubusercontent.com/36044436/128414537-c4454786-a5cf-49d2-8225-1ff26c9c5058.png"  /> | <img src="https://user-images.githubusercontent.com/36044436/128414549-74a21509-711e-48e0-baf1-3718beae1598.png"  /> | <img src="https://user-images.githubusercontent.com/36044436/128414559-4bee9d1a-ac9f-4cd2-b158-5c4c441158ec.png"  /> |
|-|-|-|

Reviewed By: lunaleaps

Differential Revision: D30878022

Pulled By: yungsters

fbshipit-source-id: c70204f9f2510c75d8e9bed4e0fba79f1c941a1f
2021-09-22 10:44:17 -07:00

149 lines
5.0 KiB
JavaScript

/**
* Copyright (c) Facebook, Inc. and its affiliates.
*
* This source code is licensed under the MIT license found in the
* LICENSE file in the root directory of this source tree.
*
* @flow
* @format
*/
import RCTActionSheetManager from './NativeActionSheetManager';
const invariant = require('invariant');
const processColor = require('../StyleSheet/processColor');
import type {ColorValue} from '../StyleSheet/StyleSheet';
import type {ProcessedColorValue} from '../StyleSheet/processColor';
/**
* Display action sheets and share sheets on iOS.
*
* See https://reactnative.dev/docs/actionsheetios.html
*/
const ActionSheetIOS = {
/**
* Display an iOS action sheet.
*
* The `options` object must contain one or more of:
*
* - `options` (array of strings) - a list of button titles (required)
* - `cancelButtonIndex` (int) - index of cancel button in `options`
* - `destructiveButtonIndex` (int or array of ints) - index or indices of destructive buttons in `options`
* - `title` (string) - a title to show above the action sheet
* - `message` (string) - a message to show below the title
* - `disabledButtonIndices` (array of numbers) - a list of button indices which should be disabled
*
* The 'callback' function takes one parameter, the zero-based index
* of the selected item.
*
* See https://reactnative.dev/docs/actionsheetios.html#showactionsheetwithoptions
*/
showActionSheetWithOptions(
options: {|
+title?: ?string,
+message?: ?string,
+options: Array<string>,
+destructiveButtonIndex?: ?number | ?Array<number>,
+cancelButtonIndex?: ?number,
+anchor?: ?number,
+tintColor?: ColorValue | ProcessedColorValue,
+cancelButtonTintColor?: ColorValue | ProcessedColorValue,
+userInterfaceStyle?: string,
+disabledButtonIndices?: Array<number>,
|},
callback: (buttonIndex: number) => void,
) {
invariant(
typeof options === 'object' && options !== null,
'Options must be a valid object',
);
invariant(typeof callback === 'function', 'Must provide a valid callback');
invariant(RCTActionSheetManager, "ActionSheetManager doesn't exist");
const {
tintColor,
cancelButtonTintColor,
destructiveButtonIndex,
...remainingOptions
} = options;
let destructiveButtonIndices = null;
if (Array.isArray(destructiveButtonIndex)) {
destructiveButtonIndices = destructiveButtonIndex;
} else if (typeof destructiveButtonIndex === 'number') {
destructiveButtonIndices = [destructiveButtonIndex];
}
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,
);
},
/**
* Display the iOS share sheet. The `options` object should contain
* one or both of `message` and `url` and can additionally have
* a `subject` or `excludedActivityTypes`:
*
* - `url` (string) - a URL to share
* - `message` (string) - a message to share
* - `subject` (string) - a subject for the message
* - `excludedActivityTypes` (array) - the activities to exclude from
* the ActionSheet
* - `tintColor` (color) - tint color of the buttons
*
* The 'failureCallback' function takes one parameter, an error object.
* The only property defined on this object is an optional `stack` property
* of type `string`.
*
* The 'successCallback' function takes two parameters:
*
* - a boolean value signifying success or failure
* - a string that, in the case of success, indicates the method of sharing
*
* See https://reactnative.dev/docs/actionsheetios.html#showshareactionsheetwithoptions
*/
showShareActionSheetWithOptions(
options: Object,
failureCallback: Function,
successCallback: Function,
) {
invariant(
typeof options === 'object' && options !== null,
'Options must be a valid object',
);
invariant(
typeof failureCallback === 'function',
'Must provide a valid failureCallback',
);
invariant(
typeof successCallback === 'function',
'Must provide a valid successCallback',
);
invariant(RCTActionSheetManager, "ActionSheetManager doesn't exist");
RCTActionSheetManager.showShareActionSheetWithOptions(
{...options, tintColor: processColor(options.tintColor)},
failureCallback,
successCallback,
);
},
};
module.exports = ActionSheetIOS;