Facebook/react-native
1
0
Fork 0
mirror of https://github.com/facebook/react-native.git synced 2025-11-01 09:14:26 +00:00
Code Issues Packages Projects Releases Wiki Activity

Merge AlertIOSExample page into AlertExample page (#35586)

Browse Source 
Summary:
`AlertIOS` was deprecated and removed long ago (https://github.com/facebook/react-native/commit/e2bd7db732602b2c477fe040f2946bd8293df297) but there continues to be a test page with the name `AlertIOS` in RN-Tester. `AlertIOSExample.js` contains valid examples of how to use `Alert.prompt()` so it's worth keeping them around. Let's move those into `AlertExample.js` and remove `AlertIOSExample.js`. While we're here, let's do some extra fixes to the test page:

- Remove `showsIndividualExamples = true`. For whatever reason, I needed to remove this to show the examples properly...
- Convert all uses of `<TouchableHighlight>` with `<Pressable>`. The latter replaces the former, so I thought that made sense..

Some extra context:

In React Native macOS, we had forked `AlertIOS` into `AlertMacOS`, with a corresponding example page. This PR was made while working on removing those (https://github.com/microsoft/react-native-macos/pull/1548/).

## Changelog

[INTERNAL] [CHANGED] - Moved `Alert.prompt` examples into common rn-tester test page

Pull Request resolved: https://github.com/facebook/react-native/pull/35586

Test Plan:
Test page shows up fine on iOS .

![Simulator Screen Recording - iPhone 14 Pro - 2022-12-07 at 15 15 40](https://user-images.githubusercontent.com/6722175/206318170-1893c8f6-0596-4825-8312-f45e45557095.gif)

Reviewed By: lunaleaps

Differential Revision: D41825889

Pulled By: NickGerleman

fbshipit-source-id: 82e4405b1f3a1ccb558b5a5038a90416e7a32c29
This commit is contained in:
Saad Najmi
2022-12-07 18:30:49 -08:00
committed by Facebook GitHub Bot
parent 74859c7f0d
commit 76bf71e2cc
4 changed files with 157 additions and 229 deletions
Download Patch File Download Diff File Expand all files Collapse all files
Libraries/Alert/Alert.d.ts
Vendored
+2 -2
View File
@@ -33,8 +33,8 @@ interface AlertOptions {
* button will be an 'OK' button.
*
* This is an API that works both on iOS and Android and can show static
* alerts. To show an alert that prompts the user to enter some information,
* see `AlertIOS`; entering text in an alert is common on iOS only.
* alerts. On iOS, you can show an alert that prompts the user to enter
* some information.
*
* ## iOS
*
packages/rn-tester/js/examples/Alert/AlertExample.js
+152 -16
View File
@@ -10,7 +10,7 @@
import * as React from 'react';
import type {RNTesterModule} from '../../types/RNTesterTypes';
import {Alert, StyleSheet, Text, TouchableHighlight, View} from 'react-native';
import {Alert, StyleSheet, Text, Pressable, View} from 'react-native';
// Shows log on the screen
const Log = ({message}: {message: string}) =>
@@ -31,14 +31,14 @@ const AlertWithDefaultButton = () => {
return (
<View>
<TouchableHighlight
<Pressable
testID="alert-with-default-button"
style={styles.wrapper}
onPress={() => Alert.alert('Alert', alertMessage)}>
<View style={styles.button}>
<Text>Tap to view alert</Text>
</View>
</TouchableHighlight>
</Pressable>
</View>
);
};
@@ -50,7 +50,7 @@ const AlertWithTwoButtons = () => {
return (
<View>
<TouchableHighlight
<Pressable
style={styles.wrapper}
onPress={() =>
Alert.alert('Action Required!', alertMessage, [
@@ -61,7 +61,7 @@ const AlertWithTwoButtons = () => {
<View style={styles.button}>
<Text>Tap to view alert</Text>
</View>
</TouchableHighlight>
</Pressable>
<Log message={message} />
</View>
);
@@ -74,7 +74,7 @@ const AlertWithThreeButtons = () => {
return (
<View>
<TouchableHighlight
<Pressable
testID="alert-with-three-buttons"
style={styles.wrapper}
onPress={() =>
@@ -87,7 +87,7 @@ const AlertWithThreeButtons = () => {
<View style={styles.button}>
<Text>Tap to view alert</Text>
</View>
</TouchableHighlight>
</Pressable>
<Log message={message} />
</View>
);
@@ -102,7 +102,7 @@ const AlertWithManyButtons = () => {
return (
<View>
<TouchableHighlight
<Pressable
style={styles.wrapper}
onPress={() =>
Alert.alert(
@@ -117,7 +117,7 @@ const AlertWithManyButtons = () => {
<View style={styles.button}>
<Text>Tap to view alert</Text>
</View>
</TouchableHighlight>
</Pressable>
<Log message={message} />
</View>
);
@@ -130,7 +130,7 @@ const AlertWithCancelableTrue = () => {
return (
<View>
<TouchableHighlight
<Pressable
style={styles.wrapper}
onPress={() =>
Alert.alert(
@@ -149,7 +149,7 @@ const AlertWithCancelableTrue = () => {
<View style={styles.button}>
<Text>Tap to view alert</Text>
</View>
</TouchableHighlight>
</Pressable>
<Log message={message} />
</View>
);
@@ -162,7 +162,7 @@ const AlertWithStyles = () => {
return (
<View>
<TouchableHighlight
<Pressable
style={styles.wrapper}
onPress={() =>
Alert.alert('Styled Buttons!', alertMessage, [
@@ -186,7 +186,7 @@ const AlertWithStyles = () => {
<View style={styles.button}>
<Text>Tap to view alert</Text>
</View>
</TouchableHighlight>
</Pressable>
<Log message={message} />
</View>
);
@@ -200,7 +200,7 @@ const AlertWithStylesPreferred = () => {
return (
<View>
<TouchableHighlight
<Pressable
style={styles.wrapper}
onPress={() =>
Alert.alert('Foo Title', alertMessage, [
@@ -219,12 +219,132 @@ const AlertWithStylesPreferred = () => {
<View style={styles.button}>
<Text>Tap to view alert</Text>
</View>
</TouchableHighlight>
</Pressable>
<Log message={message} />
</View>
);
};
const PromptOptions = () => {
const [promptValue, setPromptValue] = React.useState<string>('');
const customButtons = [
{
text: 'Custom OK',
onPress: setPromptValue,
},
{
text: 'Custom Cancel',
style: 'cancel',
},
];
return (
<View>
<Text style={styles.promptValue}>
<Text style={styles.bold}>Prompt value:</Text> {promptValue}
</Text>
<Pressable
style={styles.wrapper}
onPress={() => Alert.prompt('Type a value', null, setPromptValue)}>
<View style={styles.button}>
<Text>prompt with title & callback</Text>
</View>
</Pressable>
<Pressable
style={styles.wrapper}
onPress={() => Alert.prompt('Type a value', null, customButtons)}>
<View style={styles.button}>
<Text>prompt with title & custom buttons</Text>
</View>
</Pressable>
<Pressable
style={styles.wrapper}
onPress={() =>
Alert.prompt(
'Type a phone number',
null,
null,
'plain-text',
undefined,
'phone-pad',
)
}>
<View style={styles.button}>
<Text>prompt with title & custom keyboard</Text>
</View>
</Pressable>
<Pressable
style={styles.wrapper}
onPress={() =>
Alert.prompt(
'Type a value',
null,
setPromptValue,
undefined,
'Default value',
)
}>
<View style={styles.button}>
<Text>prompt with title, callback & default value</Text>
</View>
</Pressable>
<Pressable
style={styles.wrapper}
onPress={() =>
Alert.prompt(
'Type a value',
null,
customButtons,
'login-password',
'admin@site.com',
)
}>
<View style={styles.button}>
<Text>
prompt with title, custom buttons, login/password & default value
</Text>
</View>
</Pressable>
</View>
);
};
const PromptTypes = () => {
return (
<View>
<Pressable
style={styles.wrapper}
onPress={() => Alert.prompt('Plain Text Entry')}>
<View style={styles.button}>
<Text>plain-text</Text>
</View>
</Pressable>
<Pressable
style={styles.wrapper}
onPress={() => Alert.prompt('Secure Text', null, null, 'secure-text')}>
<View style={styles.button}>
<Text>secure-text</Text>
</View>
</Pressable>
<Pressable
style={styles.wrapper}
onPress={() =>
Alert.prompt('Login & Password', null, null, 'login-password')
}>
<View style={styles.button}>
<Text>login-password</Text>
</View>
</Pressable>
</View>
);
};
const styles = StyleSheet.create({
wrapper: {
borderRadius: 5,
@@ -241,6 +361,9 @@ const styles = StyleSheet.create({
bold: {
fontWeight: 'bold',
},
promptValue: {
marginBottom: 10,
},
});
export const examples = [
@@ -301,6 +424,20 @@ export const examples = [
return <AlertWithStylesPreferred />;
},
},
{
title: 'Prompt Options',
platform: 'ios',
render(): React.Node {
return <PromptOptions />;
},
},
{
title: 'Prompt Types',
platform: 'ios',
render(): React.Node {
return <PromptTypes />;
},
},
];
export default ({
@@ -310,6 +447,5 @@ export default ({
documentationURL: 'https://reactnative.dev/docs/alert',
description:
'Alerts display a concise and informative message and prompt the user to make a decision.',
showIndividualExamples: true,
examples,
}: RNTesterModule);
packages/rn-tester/js/examples/Alert/AlertIOSExample.js
-208
View File
@@ -1,208 +0,0 @@
/**
* Copyright (c) Meta Platforms, Inc. and affiliates.
*
* This source code is licensed under the MIT license found in the
* LICENSE file in the root directory of this source tree.
*
* @format
* @flow
*/
'use strict';
const React = require('react');
const {
StyleSheet,
View,
Text,
TouchableHighlight,
Alert,
} = require('react-native');
import {examples as SharedAlertExamples} from './AlertExample';
import type {RNTesterModuleExample} from '../../types/RNTesterTypes';
type Props = $ReadOnly<{||}>;
type State = {|promptValue: ?string|};
class PromptOptions extends React.Component<Props, State> {
customButtons: Array<Object>;
constructor(props: void | Props) {
super(props);
/* $FlowFixMe[cannot-write] this seems to be a Flow bug, `saveResponse` is
* defined below */
// $FlowFixMe[method-unbinding] added when improving typing for this parameters
this.saveResponse = this.saveResponse.bind(this);
this.customButtons = [
{
text: 'Custom OK',
onPress: this.saveResponse,
},
{
text: 'Custom Cancel',
style: 'cancel',
},
];
this.state = {
promptValue: undefined,
};
}
render(): React.Node {
return (
<View>
<Text style={styles.promptValue}>
<Text style={styles.promptValueLabel}>Prompt value:</Text>{' '}
{this.state.promptValue}
</Text>
<TouchableHighlight
style={styles.wrapper}
// $FlowFixMe[method-unbinding] added when improving typing for this parameters
// $FlowFixMe[incompatible-call]
onPress={() => Alert.prompt('Type a value', null, this.saveResponse)}>
<View style={styles.button}>
<Text>prompt with title & callback</Text>
</View>
</TouchableHighlight>
<TouchableHighlight
style={styles.wrapper}
onPress={() =>
Alert.prompt('Type a value', null, this.customButtons)
}>
<View style={styles.button}>
<Text>prompt with title & custom buttons</Text>
</View>
</TouchableHighlight>
<TouchableHighlight
style={styles.wrapper}
onPress={() =>
Alert.prompt(
'Type a phone number',
null,
null,
'plain-text',
undefined,
'phone-pad',
)
}>
<View style={styles.button}>
<Text>prompt with title & custom keyboard</Text>
</View>
</TouchableHighlight>
<TouchableHighlight
style={styles.wrapper}
onPress={() =>
Alert.prompt(
'Type a value',
null,
// $FlowFixMe[method-unbinding] added when improving typing for this parameters
// $FlowFixMe[incompatible-call]
this.saveResponse,
undefined,
'Default value',
)
}>
<View style={styles.button}>
<Text>prompt with title, callback & default value</Text>
</View>
</TouchableHighlight>
<TouchableHighlight
style={styles.wrapper}
onPress={() =>
Alert.prompt(
'Type a value',
null,
this.customButtons,
'login-password',
'admin@site.com',
)
}>
<View style={styles.button}>
<Text>
prompt with title, custom buttons, login/password & default value
</Text>
</View>
</TouchableHighlight>
</View>
);
}
saveResponse(promptValue: any) {
this.setState({promptValue: JSON.stringify(promptValue)});
}
}
const styles = StyleSheet.create({
wrapper: {
borderRadius: 5,
marginBottom: 5,
},
button: {
backgroundColor: '#eeeeee',
padding: 10,
},
promptValue: {
marginBottom: 10,
},
promptValueLabel: {
fontWeight: 'bold',
},
});
exports.framework = 'React';
exports.title = 'Alerts';
exports.description = 'iOS alerts and action sheets';
exports.documentationURL = 'https://reactnative.dev/docs/alert';
exports.examples = ([
...SharedAlertExamples,
{
title: 'Prompt Options',
render(): React.Element<any> {
return <PromptOptions />;
},
},
{
title: 'Prompt Types',
render(): React.Node {
return (
<View>
<TouchableHighlight
style={styles.wrapper}
onPress={() => Alert.prompt('Plain Text Entry')}>
<View style={styles.button}>
<Text>plain-text</Text>
</View>
</TouchableHighlight>
<TouchableHighlight
style={styles.wrapper}
onPress={() =>
Alert.prompt('Secure Text', null, null, 'secure-text')
}>
<View style={styles.button}>
<Text>secure-text</Text>
</View>
</TouchableHighlight>
<TouchableHighlight
style={styles.wrapper}
onPress={() =>
Alert.prompt('Login & Password', null, null, 'login-password')
}>
<View style={styles.button}>
<Text>login-password</Text>
</View>
</TouchableHighlight>
</View>
);
},
},
]: Array<RNTesterModuleExample>);
packages/rn-tester/js/utils/RNTesterList.ios.js
+3 -3
View File
@@ -154,9 +154,9 @@ const APIs: Array<RNTesterModuleInfo> = [
category: 'iOS',
},
{
key: 'AlertIOSExample',
module: require('../examples/Alert/AlertIOSExample'),
category: 'iOS',
key: 'AlertExample',
module: require('../examples/Alert/AlertExample').default,
category: 'UI',
},
{
key: 'AnimatedIndex',