Picker.js 4.3 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165
  1. /**
  2. * Copyright (c) Facebook, Inc. and its affiliates.
  3. *
  4. * This source code is licensed under the MIT license found in the
  5. * LICENSE file in the root directory of this source tree.
  6. *
  7. * @format
  8. * @flow
  9. */
  10. 'use strict';
  11. const PickerAndroid = require('./PickerAndroid');
  12. const PickerIOS = require('./PickerIOS');
  13. const Platform = require('../../Utilities/Platform');
  14. const React = require('react');
  15. const UnimplementedView = require('../UnimplementedViews/UnimplementedView');
  16. import type {TextStyleProp} from '../../StyleSheet/StyleSheet';
  17. import type {ColorValue} from '../../StyleSheet/StyleSheetTypes';
  18. const MODE_DIALOG = 'dialog';
  19. const MODE_DROPDOWN = 'dropdown';
  20. type PickerItemProps = $ReadOnly<{|
  21. /**
  22. * Text to display for this item.
  23. */
  24. label: string,
  25. /**
  26. * The value to be passed to picker's `onValueChange` callback when
  27. * this item is selected. Can be a string or an integer.
  28. */
  29. value?: ?(number | string),
  30. /**
  31. * Color of this item's text.
  32. * @platform android
  33. */
  34. color?: ColorValue,
  35. /**
  36. * Used to locate the item in end-to-end tests.
  37. */
  38. testID?: string,
  39. |}>;
  40. /**
  41. * Individual selectable item in a Picker.
  42. */
  43. export type {PickerItem};
  44. class PickerItem extends React.Component<PickerItemProps> {
  45. render() {
  46. // The items are not rendered directly
  47. throw null;
  48. }
  49. }
  50. type PickerProps = $ReadOnly<{|
  51. children?: React.Node,
  52. style?: ?TextStyleProp,
  53. /**
  54. * Value matching value of one of the items. Can be a string or an integer.
  55. */
  56. selectedValue?: ?(number | string),
  57. /**
  58. * Callback for when an item is selected. This is called with the following parameters:
  59. * - `itemValue`: the `value` prop of the item that was selected
  60. * - `itemIndex`: the index of the selected item in this picker
  61. */
  62. onValueChange?: ?(itemValue: string | number, itemIndex: number) => mixed,
  63. /**
  64. * If set to false, the picker will be disabled, i.e. the user will not be able to make a
  65. * selection.
  66. * @platform android
  67. */
  68. enabled?: ?boolean,
  69. /**
  70. * On Android, specifies how to display the selection items when the user taps on the picker:
  71. *
  72. * - 'dialog': Show a modal dialog. This is the default.
  73. * - 'dropdown': Shows a dropdown anchored to the picker view
  74. *
  75. * @platform android
  76. */
  77. mode?: ?('dialog' | 'dropdown'),
  78. /**
  79. * Style to apply to each of the item labels.
  80. * @platform ios
  81. */
  82. itemStyle?: ?TextStyleProp,
  83. /**
  84. * Color of the item background.
  85. * @platform android
  86. */
  87. backgroundColor?: ColorValue,
  88. /**
  89. * Prompt string for this picker, used on Android in dialog mode as the title of the dialog.
  90. * @platform android
  91. */
  92. prompt?: ?string,
  93. /**
  94. * Used to locate this view in end-to-end tests.
  95. */
  96. testID?: ?string,
  97. /**
  98. * The string used for the accessibility label. Will be read once focused on the picker but not on change.
  99. */
  100. accessibilityLabel?: ?string,
  101. |}>;
  102. /**
  103. * Renders the native picker component on iOS and Android. Example:
  104. *
  105. * <Picker
  106. * selectedValue={this.state.language}
  107. * onValueChange={(itemValue, itemIndex) => this.setState({language: itemValue})}>
  108. * <Picker.Item label="Java" value="java" />
  109. * <Picker.Item label="JavaScript" value="js" />
  110. * </Picker>
  111. */
  112. class Picker extends React.Component<PickerProps> {
  113. /**
  114. * On Android, display the options in a dialog.
  115. */
  116. static MODE_DIALOG: $TEMPORARY$string<'dialog'> = MODE_DIALOG;
  117. /**
  118. * On Android, display the options in a dropdown (this is the default).
  119. */
  120. static MODE_DROPDOWN: $TEMPORARY$string<'dropdown'> = MODE_DROPDOWN;
  121. static Item: typeof PickerItem = PickerItem;
  122. static defaultProps: {|mode: $TEMPORARY$string<'dialog'>|} = {
  123. mode: MODE_DIALOG,
  124. };
  125. render(): React.Node {
  126. if (Platform.OS === 'ios') {
  127. /* $FlowFixMe(>=0.81.0 site=react_native_ios_fb) This suppression was
  128. * added when renaming suppression sites. */
  129. return <PickerIOS {...this.props}>{this.props.children}</PickerIOS>;
  130. } else if (Platform.OS === 'android') {
  131. return (
  132. /* $FlowFixMe(>=0.81.0 site=react_native_android_fb) This suppression
  133. * was added when renaming suppression sites. */
  134. <PickerAndroid {...this.props}>{this.props.children}</PickerAndroid>
  135. );
  136. } else {
  137. return <UnimplementedView />;
  138. }
  139. }
  140. }
  141. module.exports = Picker;