From 117026c9d66bee4e1d310ec202a3d472ba44ddef Mon Sep 17 00:00:00 2001 From: nd-02110114 Date: Mon, 22 Oct 2018 15:37:04 +0900 Subject: [PATCH 1/6] delete createReactClass --- .../SegmentedControlIOS.ios.js | 106 +++++++----------- 1 file changed, 41 insertions(+), 65 deletions(-) diff --git a/Libraries/Components/SegmentedControlIOS/SegmentedControlIOS.ios.js b/Libraries/Components/SegmentedControlIOS/SegmentedControlIOS.ios.js index e8e6d3d57ab65c..cf64ba70eff3f0 100644 --- a/Libraries/Components/SegmentedControlIOS/SegmentedControlIOS.ios.js +++ b/Libraries/Components/SegmentedControlIOS/SegmentedControlIOS.ios.js @@ -10,19 +10,13 @@ 'use strict'; -const DeprecatedViewPropTypes = require('DeprecatedViewPropTypes'); -const NativeMethodsMixin = require('NativeMethodsMixin'); -const PropTypes = require('prop-types'); const React = require('React'); -const ReactNative = require('ReactNative'); const StyleSheet = require('StyleSheet'); -const createReactClass = require('create-react-class'); const requireNativeComponent = require('requireNativeComponent'); import type {ViewProps} from 'ViewPropTypes'; - -const RCTSegmentedControl = requireNativeComponent('RCTSegmentedControl'); +import type {NativeComponent} from 'ReactNative'; type DefaultProps = { values: $ReadOnlyArray, @@ -31,18 +25,44 @@ type DefaultProps = { type Props = $ReadOnly<{| ...ViewProps, + /** + * The labels for the control's segment buttons, in order. + */ values?: ?$ReadOnlyArray, + /** + * The index in `props.values` of the segment to be (pre)selected. + */ selectedIndex?: ?number, + /** + * Callback that is called when the user taps a segment; + * passes the segment's value as an argument + */ onValueChange?: ?Function, + /** + * Callback that is called when the user taps a segment; + * passes the event as an argument + */ onChange?: ?Function, + /** + * If false the user won't be able to interact with the control. + * Default value is true. + */ enabled?: ?boolean, + /** + * Accent color of the control. + */ tintColor?: ?string, + /** + * If true, then selecting a segment won't persist visually. + * The `onValueChange` callback will still work as expected. + */ momentary?: ?boolean, |}>; const SEGMENTED_CONTROL_REFERENCE = 'segmentedcontrol'; type Event = Object; +type NativeSegmentedControlIOS = Class>; /** * Use `SegmentedControlIOS` to render a UISegmentedControl iOS. @@ -64,66 +84,24 @@ type Event = Object; * /> * ```` */ -const SegmentedControlIOS = createReactClass({ - displayName: 'SegmentedControlIOS', - mixins: [NativeMethodsMixin], - - propTypes: { - ...DeprecatedViewPropTypes, - /** - * The labels for the control's segment buttons, in order. - */ - values: PropTypes.arrayOf(PropTypes.string), - - /** - * The index in `props.values` of the segment to be (pre)selected. - */ - selectedIndex: PropTypes.number, - - /** - * Callback that is called when the user taps a segment; - * passes the segment's value as an argument - */ - onValueChange: PropTypes.func, - - /** - * Callback that is called when the user taps a segment; - * passes the event as an argument - */ - onChange: PropTypes.func, - - /** - * If false the user won't be able to interact with the control. - * Default value is true. - */ - enabled: PropTypes.bool, - /** - * Accent color of the control. - */ - tintColor: PropTypes.string, +const RCTSegmentedControl = ((requireNativeComponent( + 'RCTSegmentedControl', +): any): NativeSegmentedControlIOS); - /** - * If true, then selecting a segment won't persist visually. - * The `onValueChange` callback will still work as expected. - */ - momentary: PropTypes.bool, - }, - - getDefaultProps: function(): DefaultProps { - return { - values: [], - enabled: true, - }; - }, +class SegmentedControlIOS extends React.Component { + static defaultProps: DefaultProps = { + values: [], + enabled: true, + }; - _onChange: function(event: Event) { + _onChange = (event: Event) => { this.props.onChange && this.props.onChange(event); this.props.onValueChange && this.props.onValueChange(event.nativeEvent.value); - }, + }; - render: function() { + render() { return ( ); - }, -}); + } +} const styles = StyleSheet.create({ segmentedControl: { @@ -141,6 +119,4 @@ const styles = StyleSheet.create({ }, }); -module.exports = ((SegmentedControlIOS: any): Class< - ReactNative.NativeComponent, ->); +module.exports = SegmentedControlIOS; From c803d17e61b6a8d2f433d2fe15b75ba4495f6856 Mon Sep 17 00:00:00 2001 From: nd-02110114 Date: Mon, 22 Oct 2018 15:48:38 +0900 Subject: [PATCH 2/6] fix flow --- .../SegmentedControlIOS/SegmentedControlIOS.ios.js | 5 ++++- 1 file changed, 4 insertions(+), 1 deletion(-) diff --git a/Libraries/Components/SegmentedControlIOS/SegmentedControlIOS.ios.js b/Libraries/Components/SegmentedControlIOS/SegmentedControlIOS.ios.js index cf64ba70eff3f0..882ac9f75e4aed 100644 --- a/Libraries/Components/SegmentedControlIOS/SegmentedControlIOS.ios.js +++ b/Libraries/Components/SegmentedControlIOS/SegmentedControlIOS.ios.js @@ -119,4 +119,7 @@ const styles = StyleSheet.create({ }, }); -module.exports = SegmentedControlIOS; +// $FlowFixMe - TODO T29156721 `React.forwardRef` is not defined in Flow, yet. +const SegmentedControlIOSWithRef = React.forwardRef(SegmentedControlIOS); + +module.exports = (SegmentedControlIOSWithRef: NativeSegmentedControlIOS); From 58c4b7e55a7c28b96c5a512e2f3191eeba8ec489 Mon Sep 17 00:00:00 2001 From: nd-02110114 Date: Tue, 23 Oct 2018 22:45:01 +0900 Subject: [PATCH 3/6] fix flow error --- .../SegmentedControlIOS.ios.js | 36 +++++++++++-------- 1 file changed, 22 insertions(+), 14 deletions(-) diff --git a/Libraries/Components/SegmentedControlIOS/SegmentedControlIOS.ios.js b/Libraries/Components/SegmentedControlIOS/SegmentedControlIOS.ios.js index 882ac9f75e4aed..784431131ff092 100644 --- a/Libraries/Components/SegmentedControlIOS/SegmentedControlIOS.ios.js +++ b/Libraries/Components/SegmentedControlIOS/SegmentedControlIOS.ios.js @@ -18,17 +18,12 @@ const requireNativeComponent = require('requireNativeComponent'); import type {ViewProps} from 'ViewPropTypes'; import type {NativeComponent} from 'ReactNative'; -type DefaultProps = { - values: $ReadOnlyArray, - enabled: boolean, -}; - -type Props = $ReadOnly<{| +type SegmentedControlIOSProps = $ReadOnly<{| ...ViewProps, /** * The labels for the control's segment buttons, in order. */ - values?: ?$ReadOnlyArray, + values: $ReadOnlyArray, /** * The index in `props.values` of the segment to be (pre)selected. */ @@ -47,7 +42,7 @@ type Props = $ReadOnly<{| * If false the user won't be able to interact with the control. * Default value is true. */ - enabled?: ?boolean, + enabled: boolean, /** * Accent color of the control. */ @@ -59,10 +54,15 @@ type Props = $ReadOnly<{| momentary?: ?boolean, |}>; -const SEGMENTED_CONTROL_REFERENCE = 'segmentedcontrol'; +type Props = $ReadOnly<{| + ...SegmentedControlIOSProps, + forwardedRef: ?React.Ref, +|}>; type Event = Object; -type NativeSegmentedControlIOS = Class>; +type NativeSegmentedControlIOS = Class< + NativeComponent, +>; /** * Use `SegmentedControlIOS` to render a UISegmentedControl iOS. @@ -90,7 +90,7 @@ const RCTSegmentedControl = ((requireNativeComponent( ): any): NativeSegmentedControlIOS); class SegmentedControlIOS extends React.Component { - static defaultProps: DefaultProps = { + static defaultProps = { values: [], enabled: true, }; @@ -102,10 +102,11 @@ class SegmentedControlIOS extends React.Component { }; render() { + const {forwardedRef, ...props} = this.props; return ( @@ -120,6 +121,13 @@ const styles = StyleSheet.create({ }); // $FlowFixMe - TODO T29156721 `React.forwardRef` is not defined in Flow, yet. -const SegmentedControlIOSWithRef = React.forwardRef(SegmentedControlIOS); +const SegmentedControlIOSWithRef = React.forwardRef( + ( + props: SegmentedControlIOSProps, + forwardedRef: ?React.Ref, + ) => { + return ; + }, +); module.exports = (SegmentedControlIOSWithRef: NativeSegmentedControlIOS); From d32247f9773bb80fbc1d98371d2d770d1e8a9554 Mon Sep 17 00:00:00 2001 From: nd-02110114 Date: Mon, 29 Oct 2018 22:01:49 +0900 Subject: [PATCH 4/6] fix for comment --- .../SegmentedControlIOS.ios.js | 15 +++++++++++---- 1 file changed, 11 insertions(+), 4 deletions(-) diff --git a/Libraries/Components/SegmentedControlIOS/SegmentedControlIOS.ios.js b/Libraries/Components/SegmentedControlIOS/SegmentedControlIOS.ios.js index 784431131ff092..ef95a5d74c1b61 100644 --- a/Libraries/Components/SegmentedControlIOS/SegmentedControlIOS.ios.js +++ b/Libraries/Components/SegmentedControlIOS/SegmentedControlIOS.ios.js @@ -15,9 +15,17 @@ const StyleSheet = require('StyleSheet'); const requireNativeComponent = require('requireNativeComponent'); +import type {SyntheticEvent} from 'CoreEventTypes'; import type {ViewProps} from 'ViewPropTypes'; import type {NativeComponent} from 'ReactNative'; +type Event = SyntheticEvent< + $ReadOnly<{| + value: number, + selectedSegmentIndex: number, + |}>, +>; + type SegmentedControlIOSProps = $ReadOnly<{| ...ViewProps, /** @@ -32,17 +40,17 @@ type SegmentedControlIOSProps = $ReadOnly<{| * Callback that is called when the user taps a segment; * passes the segment's value as an argument */ - onValueChange?: ?Function, + onValueChange?: ?(value: number) => mixed, /** * Callback that is called when the user taps a segment; * passes the event as an argument */ - onChange?: ?Function, + onChange?: ?(event: Event) => mixed, /** * If false the user won't be able to interact with the control. * Default value is true. */ - enabled: boolean, + enabled?: boolean, /** * Accent color of the control. */ @@ -59,7 +67,6 @@ type Props = $ReadOnly<{| forwardedRef: ?React.Ref, |}>; -type Event = Object; type NativeSegmentedControlIOS = Class< NativeComponent, >; From fc8e5e77c8136e7a06f28c1979578878bdb4bfb8 Mon Sep 17 00:00:00 2001 From: nd-02110114 Date: Mon, 29 Oct 2018 22:04:41 +0900 Subject: [PATCH 5/6] trigger ci From 98212bc09e5c51ade66c63dc504c3e5f91be847b Mon Sep 17 00:00:00 2001 From: nd-02110114 Date: Mon, 29 Oct 2018 22:12:10 +0900 Subject: [PATCH 6/6] fix --- .../Components/SegmentedControlIOS/SegmentedControlIOS.ios.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/Libraries/Components/SegmentedControlIOS/SegmentedControlIOS.ios.js b/Libraries/Components/SegmentedControlIOS/SegmentedControlIOS.ios.js index ef95a5d74c1b61..540a31838b5a0b 100644 --- a/Libraries/Components/SegmentedControlIOS/SegmentedControlIOS.ios.js +++ b/Libraries/Components/SegmentedControlIOS/SegmentedControlIOS.ios.js @@ -31,7 +31,7 @@ type SegmentedControlIOSProps = $ReadOnly<{| /** * The labels for the control's segment buttons, in order. */ - values: $ReadOnlyArray, + values?: $ReadOnlyArray, /** * The index in `props.values` of the segment to be (pre)selected. */