-
Notifications
You must be signed in to change notification settings - Fork 24.3k
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
[createReactClass] remove createReactClass from SegmentedControlIOS.ios.js #21888
Changes from 3 commits
File filter
Filter by extension
Conversations
Jump to
Diff view
Diff view
There are no files selected for viewing
Original file line number | Diff line number | Diff line change | ||||
---|---|---|---|---|---|---|
|
@@ -10,39 +10,59 @@ | |||||
|
||||||
'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'; | ||||||
import type {NativeComponent} from 'ReactNative'; | ||||||
|
||||||
const RCTSegmentedControl = requireNativeComponent('RCTSegmentedControl'); | ||||||
|
||||||
type DefaultProps = { | ||||||
values: $ReadOnlyArray<string>, | ||||||
enabled: boolean, | ||||||
}; | ||||||
|
||||||
type Props = $ReadOnly<{| | ||||||
type SegmentedControlIOSProps = $ReadOnly<{| | ||||||
...ViewProps, | ||||||
values?: ?$ReadOnlyArray<string>, | ||||||
/** | ||||||
* The labels for the control's segment buttons, in order. | ||||||
*/ | ||||||
values: $ReadOnlyArray<string>, | ||||||
/** | ||||||
* 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, | ||||||
enabled?: ?boolean, | ||||||
/** | ||||||
* If false the user won't be able to interact with the control. | ||||||
* Default value is true. | ||||||
*/ | ||||||
enabled: boolean, | ||||||
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. Unfortunately, due to this being passed through
Suggested change
|
||||||
/** | ||||||
* 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 Props = $ReadOnly<{| | ||||||
...SegmentedControlIOSProps, | ||||||
forwardedRef: ?React.Ref<typeof RCTSegmentedControl>, | ||||||
|}>; | ||||||
|
||||||
type Event = Object; | ||||||
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. You can type the event like this: // Need to add this to your imports
import type {SyntheticEvent} from 'CoreEventTypes';
type Event = SyntheticEvent<
$ReadOnly<{|
value: number,
selectedSegmentIndex: number,
|}>,
>; |
||||||
type NativeSegmentedControlIOS = Class< | ||||||
NativeComponent<SegmentedControlIOSProps>, | ||||||
>; | ||||||
|
||||||
/** | ||||||
* Use `SegmentedControlIOS` to render a UISegmentedControl iOS. | ||||||
|
@@ -64,83 +84,50 @@ 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, | ||||||
const RCTSegmentedControl = ((requireNativeComponent( | ||||||
'RCTSegmentedControl', | ||||||
): any): NativeSegmentedControlIOS); | ||||||
|
||||||
/** | ||||||
* Callback that is called when the user taps a segment; | ||||||
* passes the event as an argument | ||||||
*/ | ||||||
onChange: PropTypes.func, | ||||||
class SegmentedControlIOS extends React.Component<Props> { | ||||||
static defaultProps = { | ||||||
values: [], | ||||||
enabled: true, | ||||||
}; | ||||||
|
||||||
/** | ||||||
* 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, | ||||||
|
||||||
/** | ||||||
* 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, | ||||||
}; | ||||||
}, | ||||||
|
||||||
_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() { | ||||||
const {forwardedRef, ...props} = this.props; | ||||||
return ( | ||||||
<RCTSegmentedControl | ||||||
{...this.props} | ||||||
ref={SEGMENTED_CONTROL_REFERENCE} | ||||||
{...props} | ||||||
ref={forwardedRef} | ||||||
style={[styles.segmentedControl, this.props.style]} | ||||||
onChange={this._onChange} | ||||||
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. I'm not sure why we have the string ref here. Pretty sure we can get rid of it, since it's not used anywhere in this file. There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. 👍 |
||||||
/> | ||||||
); | ||||||
}, | ||||||
}); | ||||||
} | ||||||
} | ||||||
|
||||||
const styles = StyleSheet.create({ | ||||||
segmentedControl: { | ||||||
height: 28, | ||||||
}, | ||||||
}); | ||||||
|
||||||
module.exports = ((SegmentedControlIOS: any): Class< | ||||||
ReactNative.NativeComponent<Props>, | ||||||
>); | ||||||
// $FlowFixMe - TODO T29156721 `React.forwardRef` is not defined in Flow, yet. | ||||||
const SegmentedControlIOSWithRef = React.forwardRef( | ||||||
( | ||||||
props: SegmentedControlIOSProps, | ||||||
forwardedRef: ?React.Ref<typeof RCTSegmentedControl>, | ||||||
) => { | ||||||
return <SegmentedControlIOS {...props} forwardedRef={forwardedRef} />; | ||||||
}, | ||||||
); | ||||||
|
||||||
module.exports = (SegmentedControlIOSWithRef: NativeSegmentedControlIOS); |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Once the event is typed, you could type these callbacks like: