-
Notifications
You must be signed in to change notification settings - Fork 1.1k
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
feat(ReactPickerView): Add ReactPickerView
ReactPicker provides access to native selector UI components for React Native JavaScript applications. - PR comments implemented Fixes #231
- Loading branch information
Showing
6 changed files
with
193 additions
and
45 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file was deleted.
Oops, something went wrong.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,20 @@ | ||
| /** | ||
| * 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 PickerAndroid | ||
| */ | ||
| 'use strict'; | ||
|
|
||
| var React = require('React'); | ||
|
|
||
| var PickerAndroid = React.createClass({ | ||
| render: function() { | ||
| }, | ||
| }); | ||
|
|
||
| module.exports = PickerAndroid; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,20 @@ | ||
| /** | ||
| * 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 | ||
| */ | ||
| 'use strict'; | ||
|
|
||
| var React = require('React'); | ||
|
|
||
| var PickerIOS = React.createClass({ | ||
| render: function() { | ||
| }, | ||
| }); | ||
|
|
||
| module.exports = PickerIOS; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,137 @@ | ||
| /** | ||
| * 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 PickerWindows | ||
| * @flow | ||
| */ | ||
|
|
||
| 'use strict'; | ||
|
|
||
| var ColorPropType = require('ColorPropType'); | ||
| var React = require('React'); | ||
| var ReactChildren = require('ReactChildren'); | ||
| var ReactPropTypes = require('ReactPropTypes'); | ||
| var StyleSheet = require('StyleSheet'); | ||
| var StyleSheetPropType = require('StyleSheetPropType'); | ||
| var View = require('View'); | ||
| var ViewStylePropTypes = require('ViewStylePropTypes'); | ||
|
|
||
| var processColor = require('processColor'); | ||
| var requireNativeComponent = require('requireNativeComponent'); | ||
|
|
||
| var REF_PICKER = 'picker'; | ||
|
|
||
| var pickerStyleType = StyleSheetPropType({ | ||
| ...ViewStylePropTypes, | ||
| color: ColorPropType, | ||
| }); | ||
|
|
||
| type Event = Object; | ||
|
|
||
| /** | ||
| * Not exposed as a public API - use <Picker> instead. | ||
| */ | ||
| var PickerWindows = React.createClass({ | ||
|
|
||
| propTypes: { | ||
| ...View.propTypes, | ||
| style: pickerStyleType, | ||
| items: React.PropTypes.any, | ||
| selected: React.PropTypes.number, | ||
| selectedValue: React.PropTypes.any, | ||
| enabled: ReactPropTypes.bool, | ||
| onValueChange: ReactPropTypes.func, | ||
| prompt: ReactPropTypes.string, | ||
| testID: ReactPropTypes.string, | ||
| }, | ||
|
|
||
| getInitialState: function() { | ||
| return this._stateFromProps(this.props); | ||
| }, | ||
|
|
||
| componentWillReceiveProps: function(nextProps) { | ||
| this.setState(this._stateFromProps(nextProps)); | ||
| }, | ||
|
|
||
| // Translate prop and children into stuff that the native picker understands. | ||
| _stateFromProps: function(props) { | ||
| var selectedIndex = 0; | ||
| let items = ReactChildren.map(props.children, (child, index) => { | ||
| if (child.props.value === props.selectedValue) { | ||
| selectedIndex = index; | ||
| } | ||
| let childProps = { | ||
| value: child.props.value, | ||
| label: child.props.label, | ||
| }; | ||
| if (child.props.color) { | ||
| childProps.color = processColor(child.props.color); | ||
| } | ||
| return childProps; | ||
| }); | ||
| return {selectedIndex, items}; | ||
| }, | ||
|
|
||
| render: function() { | ||
| var Picker = ComboBoxPicker; | ||
|
|
||
| var nativeProps = { | ||
| enabled: this.props.enabled, | ||
| items: this.state.items, | ||
| onSelect: this._onChange, | ||
| prompt: this.props.prompt, | ||
| selected: this.state.selectedIndex, | ||
| testID: this.props.testID, | ||
| style: [styles.pickerWindows, this.props.style], | ||
| }; | ||
|
|
||
| return <Picker ref={REF_PICKER} {...nativeProps} />; | ||
| }, | ||
|
|
||
| _onChange: function(event: Object) { | ||
| if (this.props.onValueChange) { | ||
| var position = event.nativeEvent.position; | ||
| if (position >= 0) { | ||
| var value = this.props.children[position].props.value; | ||
| this.props.onValueChange(value, position); | ||
| } else { | ||
| this.props.onValueChange(null, position); | ||
| } | ||
| } | ||
|
|
||
| // 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.refs[REF_PICKER] && this.state.selectedIndex !== event.nativeEvent.position) { | ||
| this.refs[REF_PICKER].setNativeProps({selected: this.state.selectedIndex}); | ||
| } | ||
| }, | ||
| }); | ||
|
|
||
| var styles = StyleSheet.create({ | ||
| pickerWindows: { | ||
| // 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. | ||
| // TODO would be better to export a native constant for this, | ||
| // like in iOS the RCTDatePickerManager.m | ||
| height: 40, | ||
| }, | ||
| }); | ||
|
|
||
| var cfg = { | ||
| nativeOnly: { | ||
| } | ||
| }; | ||
|
|
||
| var ComboBoxPicker = requireNativeComponent('RCTPicker', PickerWindows, PickerWindows, cfg); | ||
|
|
||
| module.exports = PickerWindows; |