mirror of
https://github.com/status-im/react-native.git
synced 2025-02-23 14:48:25 +00:00
Summary: This is a recreation of #13924, rebased on top of master, as the former PR wasn't re-reviewed and automatically closed by the bot. iOS [Action Sheets docs](https://developer.apple.com/ios/human-interface-guidelines/ui-views/action-sheets/) say > Make destructive choices prominent. Use red for buttons that perform destructive or dangerous actions, and display these buttons at the top of an action sheet. Currently ActionSheetIOS's showActionSheetWithOptions only supports a single destructive button via the prop `destructiveButtonIndex`. This PR maintains backwards compatibility with `destructiveButtonIndex` while simultaneously supporting `destructiveButtonIndexes` allowing developers to pass an array of destructive indexes ```js ActionSheetIOS.showActionSheetWithOptions({ options: ['one', 'two', 'three'], destructiveButtonIndexes: [0, 1], }, () => {}); ``` <img width="282" alt="actionsheet" src="https://cloud.githubusercontent.com/assets/3091143/25963211/1c211a16-3646-11e7-9b7c-c9a2dbea7832.png"> Some additional tests, all working as expected (item only red if it is a matching index). ```js ActionSheetIOS.showActionSheetWithOptions({ options: ['one', 'two', 'three'], destructiveButtonIndexes: [0, 19], }, () => {}); ``` ```js ActionSheetIOS.showActionSheetWithOptions({ options: ['one', 'two', 'three'], destructiveButtonIndexes: [], }, () => {}); ``` ```js ActionSheetIOS.showActionSheetWithOptions({ options: ['one', 'two', 'three'], destructiveButtonIndexes: undefined, }, () => {}); ``` ```js ActionSheetIOS.showActionSheetWithOptions({ options: ['one', 'two', 'three'], }, () => {}); ``` ```js ActionSheetIOS.showActionSheetWithOptions({ options: ['one', 'two', 'three'], destructiveButtonIndexes: [0, 5, 0, 0], }, () => {}); ``` ```js ActionSheetIOS.showActionSheetWithOptions({ options: ['one', 'two', 'three'], destructiveButtonIndexes: [0, 5, 0, 0, 'non numeric', 12.34], }, () => {}); ``` The following will crash the app but I believe this is expected ```js ActionSheetIOS.showActionSheetWithOptions({ options: ['one', 'two', 'three'], destructiveButtonIndexes: 'not an array', }, () => {}); ``` ```js ActionSheetIOS.showActionSheetWithOptions({ options: ['one', 'two', 'three'], destructiveButtonIndexes: null, }, () => {}); ``` - [x] Explain the **motivation** for making this change. - [x] Provide a **test plan** demonstrating that the code is solid. - [x] Match the **code formatting** of the rest of the codebase. - [x] Target the `master` branch, NOT a "stable" branch. Pull Request resolved: https://github.com/facebook/react-native/pull/18254 Differential Revision: D13680516 Pulled By: hramos fbshipit-source-id: ac183cdcf5e1daef8e3c584dcf6a921bbecad475
112 lines
3.5 KiB
JavaScript
112 lines
3.5 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
|
|
*/
|
|
'use strict';
|
|
|
|
const RCTActionSheetManager = require('NativeModules').ActionSheetManager;
|
|
|
|
const invariant = require('invariant');
|
|
const processColor = require('processColor');
|
|
|
|
/**
|
|
* Display action sheets and share sheets on iOS.
|
|
*
|
|
* See http://facebook.github.io/react-native/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
|
|
*
|
|
* The 'callback' function takes one parameter, the zero-based index
|
|
* of the selected item.
|
|
*
|
|
* See http://facebook.github.io/react-native/docs/actionsheetios.html#showactionsheetwithoptions
|
|
*/
|
|
showActionSheetWithOptions(
|
|
options: {|
|
|
+title?: ?string,
|
|
+message?: ?string,
|
|
+options: Array<string>,
|
|
+destructiveButtonIndex?: ?number,
|
|
+cancelButtonIndex?: ?number,
|
|
+anchor?: ?number,
|
|
+tintColor?: number | string,
|
|
|},
|
|
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');
|
|
|
|
RCTActionSheetManager.showActionSheetWithOptions(
|
|
{...options, tintColor: processColor(options.tintColor)},
|
|
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 http://facebook.github.io/react-native/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',
|
|
);
|
|
RCTActionSheetManager.showShareActionSheetWithOptions(
|
|
{...options, tintColor: processColor(options.tintColor)},
|
|
failureCallback,
|
|
successCallback,
|
|
);
|
|
},
|
|
};
|
|
|
|
module.exports = ActionSheetIOS;
|