GT2/GT2-Android/node_modules/react-native/Libraries/Components/Picker/PickerIOS.ios.js

138 lines
3.9 KiB
JavaScript
Raw Normal View History

/**
* Copyright (c) 2015-present, Facebook, Inc.
* All rights reserved.
*
* This source code is licensed under the BSD-style license found in the
* LICENSE file in the root directory of this source tree. An additional grant
* of patent rights can be found in the PATENTS file in the same directory.
*
* @providesModule PickerIOS
*
* This is a controlled component version of RCTPickerIOS
*/
'use strict';
var NativeMethodsMixin = require('NativeMethodsMixin');
var React = require('React');
const PropTypes = require('prop-types');
var StyleSheet = require('StyleSheet');
var StyleSheetPropType = require('StyleSheetPropType');
var TextStylePropTypes = require('TextStylePropTypes');
var View = require('View');
const ViewPropTypes = require('ViewPropTypes');
var processColor = require('processColor');
var createReactClass = require('create-react-class');
var itemStylePropType = StyleSheetPropType(TextStylePropTypes);
var requireNativeComponent = require('requireNativeComponent');
var PickerIOS = createReactClass({
displayName: 'PickerIOS',
mixins: [NativeMethodsMixin],
propTypes: {
...ViewPropTypes,
itemStyle: itemStylePropType,
onValueChange: PropTypes.func,
selectedValue: PropTypes.any, // string or integer basically
},
getInitialState: function() {
return this._stateFromProps(this.props);
},
componentWillReceiveProps: function(nextProps) {
this.setState(this._stateFromProps(nextProps));
},
// Translate PickerIOS prop and children into stuff that RCTPickerIOS understands.
_stateFromProps: function(props) {
var selectedIndex = 0;
var items = [];
React.Children.toArray(props.children).forEach(function (child, index) {
if (child.props.value === props.selectedValue) {
selectedIndex = index;
}
items.push({
value: child.props.value,
label: child.props.label,
textColor: processColor(child.props.color),
});
});
return {selectedIndex, items};
},
render: function() {
return (
<View style={this.props.style}>
<RCTPickerIOS
ref={picker => this._picker = picker}
style={[styles.pickerIOS, this.props.itemStyle]}
items={this.state.items}
selectedIndex={this.state.selectedIndex}
onChange={this._onChange}
onStartShouldSetResponder={() => true}
onResponderTerminationRequest={() => false}
/>
</View>
);
},
_onChange: function(event) {
if (this.props.onChange) {
this.props.onChange(event);
}
if (this.props.onValueChange) {
this.props.onValueChange(event.nativeEvent.newValue, event.nativeEvent.newIndex);
}
// The picker is a controlled component. This means we expect the
// on*Change handlers to be in charge of updating our
// `selectedValue` prop. That way they can also
// disallow/undo/mutate the selection of certain values. In other
// words, the embedder of this component should be the source of
// truth, not the native component.
if (this._picker && this.state.selectedIndex !== event.nativeEvent.newIndex) {
this._picker.setNativeProps({
selectedIndex: this.state.selectedIndex
});
}
},
});
PickerIOS.Item = class extends React.Component {
static propTypes = {
value: PropTypes.any, // string or integer basically
label: PropTypes.string,
color: PropTypes.string,
};
render() {
// These items don't get rendered directly.
return null;
}
};
var styles = StyleSheet.create({
pickerIOS: {
// The picker will conform to whatever width is given, but we do
// have to set the component's height explicitly on the
// surrounding view to ensure it gets rendered.
height: 216,
},
});
var RCTPickerIOS = requireNativeComponent('RCTPicker', {
propTypes: {
style: itemStylePropType,
},
}, {
nativeOnly: {
items: true,
onChange: true,
selectedIndex: true,
},
});
module.exports = PickerIOS;