Skip to content

Commit a7c1c5a

Browse files
lukewalczakfacebook-github-bot
authored andcommitted
Add possibility to disable buttons in action sheet ios (#28979)
Summary: _**Fixed**_ version of [the previous PR](#28792) after reverting [changes](c8d678a#commitcomment-39299254) ---- I've noticed that currently there is no option to disable button within the `ActionSheetIOS`. It can be really useful and decided to extend the API to support that functionality. I added a new option called `disabledButtonsIndices` to `ActionSheetIOS` which is an array of button indices which should be disabled. `ActionSheetIOS` documentation - PR facebook/react-native-website#1898 ## Changelog [iOS] [Added] - Add disableButtonsIndices option to ActionSheetIOS component Pull Request resolved: #28979 Test Plan: 1. Run the `RNTester` 2. Choose `ActionSheetIOS` 3. Check the fourth example `Show Action Sheet with disabled buttons` 4. `Option 1` and `Option 2` should be disabled screenshot | gif --- | --- <img width="493" alt="Screenshot 2020-04-30 at 15 16 22" src="https://user-images.githubusercontent.com/22746080/80739025-1ec52780-8b16-11ea-8b1c-30bb40ad8c99.png"> | <img src="https://user-images.githubusercontent.com/22746080/80739043-24227200-8b16-11ea-8bcb-af25eb57baac.gif" width="493" /> Reviewed By: sammy-SC Differential Revision: D21727497 Pulled By: PeteTheHeat fbshipit-source-id: 749b6c623eb8a44fe2bd96829ce89be5310e2368
1 parent 130618f commit a7c1c5a

File tree

4 files changed

+59
-0
lines changed

4 files changed

+59
-0
lines changed

Libraries/ActionSheetIOS/ActionSheetIOS.js

+2
Original file line numberDiff line numberDiff line change
@@ -33,6 +33,7 @@ const ActionSheetIOS = {
3333
* - `destructiveButtonIndex` (int or array of ints) - index or indices of destructive buttons in `options`
3434
* - `title` (string) - a title to show above the action sheet
3535
* - `message` (string) - a message to show below the title
36+
* - `disabledButtonIndices` (array of numbers) - a list of button indices which should be disabled
3637
*
3738
* The 'callback' function takes one parameter, the zero-based index
3839
* of the selected item.
@@ -49,6 +50,7 @@ const ActionSheetIOS = {
4950
+anchor?: ?number,
5051
+tintColor?: ColorValue | ProcessedColorValue,
5152
+userInterfaceStyle?: string,
53+
+disabledButtonIndices?: Array<number>,
5254
|},
5355
callback: (buttonIndex: number) => void,
5456
) {

Libraries/ActionSheetIOS/NativeActionSheetManager.js

+1
Original file line numberDiff line numberDiff line change
@@ -25,6 +25,7 @@ export interface Spec extends TurboModule {
2525
+anchor?: ?number,
2626
+tintColor?: ?number,
2727
+userInterfaceStyle?: ?string,
28+
+disabledButtonIndices?: Array<number>,
2829
|},
2930
callback: (buttonIndex: number) => void,
3031
) => void;

React/CoreModules/RCTActionSheetManager.mm

+18
Original file line numberDiff line numberDiff line change
@@ -73,9 +73,15 @@ - (void)presentViewController:(UIViewController *)alertController
7373
NSArray<NSString *> *buttons = RCTConvertOptionalVecToArray(options.options(), ^id(NSString *element) {
7474
return element;
7575
});
76+
NSArray<NSNumber *> *disabledButtonIndices;
7677
NSInteger cancelButtonIndex =
7778
options.cancelButtonIndex() ? [RCTConvert NSInteger:@(*options.cancelButtonIndex())] : -1;
7879
NSArray<NSNumber *> *destructiveButtonIndices;
80+
if (options.disabledButtonIndices()) {
81+
disabledButtonIndices = RCTConvertVecToArray(*options.disabledButtonIndices(), ^id(double element) {
82+
return @(element);
83+
});
84+
}
7985
if (options.destructiveButtonIndices()) {
8086
destructiveButtonIndices = RCTConvertVecToArray(*options.destructiveButtonIndices(), ^id(double element) {
8187
return @(element);
@@ -98,6 +104,7 @@ - (void)presentViewController:(UIViewController *)alertController
98104
@"destructiveButtonIndices" : destructiveButtonIndices,
99105
@"anchor" : anchor,
100106
@"tintColor" : tintColor,
107+
@"disabledButtonIndices" : disabledButtonIndices,
101108
});
102109
return;
103110
}
@@ -132,6 +139,17 @@ - (void)presentViewController:(UIViewController *)alertController
132139
index++;
133140
}
134141

142+
if (disabledButtonIndices) {
143+
for (NSNumber *disabledButtonIndex in disabledButtonIndices) {
144+
if ([disabledButtonIndex integerValue] < buttons.count) {
145+
[alertController.actions[[disabledButtonIndex integerValue]] setEnabled:false];
146+
} else {
147+
RCTLogError(@"Index %@ from `disabledButtonIndices` is out of bounds. Maximum index value is %@.", @([disabledButtonIndex integerValue]), @(buttons.count - 1));
148+
return;
149+
}
150+
}
151+
}
152+
135153
alertController.view.tintColor = tintColor;
136154
#if defined(__IPHONE_OS_VERSION_MAX_ALLOWED) && defined(__IPHONE_13_0) && \
137155
__IPHONE_OS_VERSION_MAX_ALLOWED >= __IPHONE_13_0

packages/rn-tester/js/examples/ActionSheetIOS/ActionSheetIOSExample.js

+38
Original file line numberDiff line numberDiff line change
@@ -25,6 +25,7 @@ const ScreenshotManager = NativeModules.ScreenshotManager;
2525
const BUTTONS = ['Option 0', 'Option 1', 'Option 2', 'Delete', 'Cancel'];
2626
const DESTRUCTIVE_INDEX = 3;
2727
const CANCEL_INDEX = 4;
28+
const DISABLED_BUTTON_INDICES = [1, 2];
2829

2930
type Props = $ReadOnly<{||}>;
3031
type State = {|clicked: string|};
@@ -138,6 +139,37 @@ class ActionSheetAnchorExample extends React.Component<
138139
};
139140
}
140141

142+
class ActionSheetDisabledExample extends React.Component<Props, State> {
143+
state = {
144+
clicked: 'none',
145+
};
146+
147+
render() {
148+
return (
149+
<View>
150+
<Text onPress={this.showActionSheet} style={style.button}>
151+
Click to show the ActionSheet
152+
</Text>
153+
<Text>Clicked button: {this.state.clicked}</Text>
154+
</View>
155+
);
156+
}
157+
158+
showActionSheet = () => {
159+
ActionSheetIOS.showActionSheetWithOptions(
160+
{
161+
options: BUTTONS,
162+
cancelButtonIndex: CANCEL_INDEX,
163+
destructiveButtonIndex: DESTRUCTIVE_INDEX,
164+
disabledButtonIndices: DISABLED_BUTTON_INDICES,
165+
},
166+
buttonIndex => {
167+
this.setState({clicked: BUTTONS[buttonIndex]});
168+
},
169+
);
170+
};
171+
}
172+
141173
class ShareActionSheetExample extends React.Component<
142174
$FlowFixMeProps,
143175
$FlowFixMeState,
@@ -316,6 +348,12 @@ exports.examples = [
316348
return <ActionSheetAnchorExample />;
317349
},
318350
},
351+
{
352+
title: 'Show Action Sheet with disabled buttons',
353+
render(): React.Element<any> {
354+
return <ActionSheetDisabledExample />;
355+
},
356+
},
319357
{
320358
title: 'Show Share Action Sheet',
321359
render(): React.Element<any> {

0 commit comments

Comments
 (0)