SegmentedControlIOS.ios.js 3.5 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123
  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 strict-local
  9. */
  10. 'use strict';
  11. import * as React from 'react';
  12. import StyleSheet from '../../StyleSheet/StyleSheet';
  13. import type {OnChangeEvent} from './RCTSegmentedControlNativeComponent';
  14. import type {ViewProps} from '../View/ViewPropTypes';
  15. import RCTSegmentedControlNativeComponent from './RCTSegmentedControlNativeComponent';
  16. import type {SyntheticEvent} from 'react-native/Libraries/Types/CoreEventTypes';
  17. type SegmentedControlIOSProps = $ReadOnly<{|
  18. ...ViewProps,
  19. /**
  20. * The labels for the control's segment buttons, in order.
  21. */
  22. values?: $ReadOnlyArray<string>,
  23. /**
  24. * The index in `props.values` of the segment to be (pre)selected.
  25. */
  26. selectedIndex?: ?number,
  27. /**
  28. * If false the user won't be able to interact with the control.
  29. */
  30. enabled?: boolean,
  31. /**
  32. * Accent color of the control.
  33. */
  34. tintColor?: ?string,
  35. /**
  36. * If true, then selecting a segment won't persist visually.
  37. * The `onValueChange` callback will still work as expected.
  38. */
  39. momentary?: ?boolean,
  40. /**
  41. * Callback that is called when the user taps a segment
  42. */
  43. onChange?: ?(event: SyntheticEvent<OnChangeEvent>) => void,
  44. /**
  45. * Callback that is called when the user taps a segment;
  46. * passes the segment's value as an argument
  47. */
  48. onValueChange?: ?(value: number) => mixed,
  49. |}>;
  50. type Props = $ReadOnly<{|
  51. ...SegmentedControlIOSProps,
  52. forwardedRef: ?React.Ref<typeof RCTSegmentedControlNativeComponent>,
  53. |}>;
  54. /**
  55. * Use `SegmentedControlIOS` to render a UISegmentedControl iOS.
  56. *
  57. * #### Programmatically changing selected index
  58. *
  59. * The selected index can be changed on the fly by assigning the
  60. * selectedIndex prop to a state variable, then changing that variable.
  61. * Note that the state variable would need to be updated as the user
  62. * selects a value and changes the index, as shown in the example below.
  63. *
  64. * ````
  65. * <SegmentedControlIOS
  66. * values={['One', 'Two']}
  67. * selectedIndex={this.state.selectedIndex}
  68. * onChange={(event) => {
  69. * this.setState({selectedIndex: event.nativeEvent.selectedSegmentIndex});
  70. * }}
  71. * />
  72. * ````
  73. */
  74. class SegmentedControlIOS extends React.Component<Props> {
  75. static defaultProps = {
  76. values: [],
  77. enabled: true,
  78. };
  79. _onChange = (event: SyntheticEvent<OnChangeEvent>) => {
  80. this.props.onChange && this.props.onChange(event);
  81. this.props.onValueChange &&
  82. this.props.onValueChange(event.nativeEvent.value);
  83. };
  84. render() {
  85. const {forwardedRef, onValueChange, style, ...props} = this.props;
  86. return (
  87. <RCTSegmentedControlNativeComponent
  88. {...props}
  89. ref={forwardedRef}
  90. style={[styles.segmentedControl, style]}
  91. onChange={this._onChange}
  92. />
  93. );
  94. }
  95. }
  96. const styles = StyleSheet.create({
  97. segmentedControl: {
  98. height: 28,
  99. },
  100. });
  101. const SegmentedControlIOSWithRef = React.forwardRef(
  102. (
  103. props: SegmentedControlIOSProps,
  104. forwardedRef: ?React.Ref<typeof RCTSegmentedControlNativeComponent>,
  105. ) => {
  106. return <SegmentedControlIOS {...props} forwardedRef={forwardedRef} />;
  107. },
  108. );
  109. /* $FlowFixMe(>=0.89.0 site=react_native_ios_fb) This comment suppresses an
  110. * error found when Flow v0.89 was deployed. To see the error, delete this
  111. * comment and run Flow. */
  112. module.exports = (SegmentedControlIOSWithRef: NativeSegmentedControlIOS);