mirror of
https://github.com/facebook/react-native.git
synced 2025-11-01 09:14:26 +00:00
Evan Charlton
04fb0122b2
Summary: ## Summary: The modal tester in the sandbox was lacking a bit of functionality that the Modal component exposes -- especially on Android. This change revamps the Modal page to more-closely resemble the API documentation by exposing all of the options, and annotating which ones are reserved for the different platforms. Additionally, this change puts the modal controls into the created modal itself. This allows the user to more-easily test what happens if the props change during the lifespan of the modal (related PR: https://github.com/facebook/react-native/issues/38947). ## Changelog: <!-- Help reviewers and the release process by writing your own changelog entry. Pick one each for the category and type tags: [ANDROID|GENERAL|IOS|INTERNAL] [BREAKING|ADDED|CHANGED|DEPRECATED|REMOVED|FIXED|SECURITY] - Message For more details, see: https://reactnative.dev/contributing/changelogs-in-pull-requests --> [INTERNAL] [CHANGED] - Revamp Modal tester in rn-tester Pull Request resolved: https://github.com/facebook/react-native/pull/38977 Test Plan: | Control page | Modal (with `transparent=true` on Android) | |:--:|:--:| |  |  | Reviewed By: yungsters Differential Revision: D48414351 Pulled By: NickGerleman fbshipit-source-id: 54bece639f4c64132dfb21c54c91d46972f5a335
89 lines
2.3 KiB
JavaScript
89 lines
2.3 KiB
JavaScript
/**
|
|
* 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 strict-local
|
|
*/
|
|
|
|
'use strict';
|
|
|
|
import * as React from 'react';
|
|
import {Text, Pressable, StyleSheet, View} from 'react-native';
|
|
import type {PressEvent} from 'react-native/Libraries/Types/CoreEventTypes';
|
|
import type {ViewStyleProp} from 'react-native/Libraries/StyleSheet/StyleSheet';
|
|
import {RNTesterThemeContext} from './RNTesterTheme';
|
|
|
|
type Props = $ReadOnly<{|
|
|
testID?: ?string,
|
|
label: string,
|
|
onPress?: ?(event: PressEvent) => mixed,
|
|
selected?: ?boolean,
|
|
multiSelect?: ?boolean,
|
|
disabled?: ?boolean,
|
|
style?: ViewStyleProp,
|
|
|}>;
|
|
|
|
/**
|
|
* A reusable toggle button component for RNTester. Highlights when selected.
|
|
*/
|
|
export default function RNTOption(props: Props): React.Node {
|
|
const [pressed, setPressed] = React.useState(false);
|
|
const theme = React.useContext(RNTesterThemeContext);
|
|
|
|
return (
|
|
<Pressable
|
|
accessibilityState={{selected: !!props.selected}}
|
|
disabled={
|
|
props.disabled === false || props.multiSelect === true
|
|
? false
|
|
: props.selected
|
|
}
|
|
hitSlop={4}
|
|
onPress={props.disabled === true ? undefined : props.onPress}
|
|
onPressIn={() => setPressed(true)}
|
|
onPressOut={() => setPressed(false)}
|
|
testID={props.testID}>
|
|
<View
|
|
style={[
|
|
styles.container,
|
|
props.selected === true ? styles.selected : null,
|
|
pressed && props.selected !== true ? styles.pressed : null,
|
|
props.disabled === true
|
|
? [
|
|
styles.disabled,
|
|
{backgroundColor: theme.TertiarySystemFillColor},
|
|
]
|
|
: null,
|
|
props.style,
|
|
]}>
|
|
<Text style={styles.label}>{props.label}</Text>
|
|
</View>
|
|
</Pressable>
|
|
);
|
|
}
|
|
|
|
const styles = StyleSheet.create({
|
|
pressed: {
|
|
backgroundColor: 'rgba(100,215,255,.3)',
|
|
},
|
|
label: {
|
|
color: 'black',
|
|
},
|
|
selected: {
|
|
backgroundColor: 'rgba(100,215,255,.3)',
|
|
borderColor: 'rgba(100,215,255,.3)',
|
|
},
|
|
disabled: {borderWidth: 0},
|
|
container: {
|
|
borderColor: 'rgba(0,0,0, 0.1)',
|
|
borderWidth: 1,
|
|
borderRadius: 16,
|
|
padding: 6,
|
|
paddingHorizontal: 10,
|
|
alignItems: 'center',
|
|
},
|
|
});
|