From 5147bb096378374ba3f5afd9c4b22d4ae88411a4 Mon Sep 17 00:00:00 2001 From: ayushjainrksh Date: Thu, 11 Jun 2020 23:57:46 +0530 Subject: [PATCH 1/4] Update the button component * Update the title and prop description from docs. * Add default value to props. * Update platforms in props with platform annotation.. * Remove asterisks from the comments. * Add snack player and update multiple platform format. * Add example annotation to snackplayer --- Libraries/Components/Button.js | 185 ++++++++++++++++++++++++--------- 1 file changed, 136 insertions(+), 49 deletions(-) diff --git a/Libraries/Components/Button.js b/Libraries/Components/Button.js index d98766470b512d..b5b873e20e7f45 100644 --- a/Libraries/Components/Button.js +++ b/Libraries/Components/Button.js @@ -25,107 +25,194 @@ import type {ColorValue} from '../StyleSheet/StyleSheet'; type ButtonProps = $ReadOnly<{| /** - * Text to display inside the button + Text to display inside the button. On Android the given title will be converted to the uppercased form. */ title: string, /** - * Handler to be called when the user taps the button + Handler to be called when the user taps the button. The first function argument is an event in form of [PressEvent](pressevent). */ onPress: (event?: PressEvent) => mixed, /** - * If true, doesn't play system sound on touch (Android Only) - **/ + If `true`, doesn't play system sound on touch. + + @platform android + + @default false + */ touchSoundDisabled?: ?boolean, /** - * Color of the text (iOS), or background color of the button (Android) + Color of the text (iOS), or background color of the button (Android). + + @default {@platform android} '#2196F3' + @default {@platform ios} '#007AFF' */ color?: ?ColorValue, /** - * TV preferred focus (see documentation for the View component). + TV preferred focus. + + @platform tv + + @default false */ hasTVPreferredFocus?: ?boolean, /** - * TV next focus down (see documentation for the View component). - * - * @platform android + Designates the next view to receive focus when the user navigates down. See the [Android documentation](https://developer.android.com/reference/android/view/View.html#attr_android:nextFocusDown). + + @platform android, tv */ nextFocusDown?: ?number, /** - * TV next focus forward (see documentation for the View component). - * - * @platform android + Designates the next view to receive focus when the user navigates forward. See the [Android documentation](https://developer.android.com/reference/android/view/View.html#attr_android:nextFocusForward). + + @platform android, tv */ nextFocusForward?: ?number, /** - * TV next focus left (see documentation for the View component). - * - * @platform android + Designates the next view to receive focus when the user navigates left. See the [Android documentation](https://developer.android.com/reference/android/view/View.html#attr_android:nextFocusLeft). + + @platform android, tv */ nextFocusLeft?: ?number, /** - * TV next focus right (see documentation for the View component). - * - * @platform android + Designates the next view to receive focus when the user navigates right. See the [Android documentation](https://developer.android.com/reference/android/view/View.html#attr_android:nextFocusRight). + + @platform android, tv */ nextFocusRight?: ?number, /** - * TV next focus up (see documentation for the View component). - * - * @platform android + Designates the next view to receive focus when the user navigates up. See the [Android documentation](https://developer.android.com/reference/android/view/View.html#attr_android:nextFocusUp). + + @platform android, tv */ nextFocusUp?: ?number, /** - * Text to display for blindness accessibility features + Text to display for blindness accessibility features. */ accessibilityLabel?: ?string, /** - * If true, disable all interactions for this component. + If `true`, disable all interactions for this component. + + @default false */ disabled?: ?boolean, /** - * Used to locate this view in end-to-end tests. + Used to locate this view in end-to-end tests. */ testID?: ?string, |}>; /** - * A basic button component that should render nicely on any platform. Supports - * a minimal level of customization. - * - *
- * - * If this button doesn't look right for your app, you can build your own - * button using [TouchableOpacity](docs/touchableopacity.html) - * or [TouchableNativeFeedback](docs/touchablenativefeedback.html). - * For inspiration, look at the [source code for this button component](https://github.com/facebook/react-native/blob/master/Libraries/Components/Button.js). - * Or, take a look at the [wide variety of button components built by the community](https://js.coach/react-native?search=button). - * - * Example usage: - * - * ``` - * import { Button } from 'react-native'; - * ... - * - *