|
12 | 12 |
|
13 | 13 | // TODO(macOS ISS#2323203) |
14 | 14 |
|
15 | | -module.exports = require('../UnimplementedViews/UnimplementedView'); |
| 15 | +'use strict'; |
| 16 | + |
| 17 | +const React = require('react'); |
| 18 | +const ReactNative = require('../../Renderer/shims/ReactNative'); |
| 19 | +const StyleSheet = require('../../StyleSheet/StyleSheet'); |
| 20 | +const View = require('../View/View'); |
| 21 | +const processColor = require('../../StyleSheet/processColor'); |
| 22 | +const RCTPickerNativeComponent = require('./RCTPickerNativeComponent'); |
| 23 | + |
| 24 | +import type {SyntheticEvent} from '../../Types/CoreEventTypes'; |
| 25 | +import type {ColorValue} from '../../StyleSheet/StyleSheetTypes'; |
| 26 | +import type {ViewProps} from '../View/ViewPropTypes'; |
| 27 | +import type {TextStyleProp} from '../../StyleSheet/StyleSheet'; |
| 28 | +import type {NativeOrDynamicColorType} from '../../Color/NativeOrDynamicColorType'; // TODO(macOS ISS#2323203) |
| 29 | + |
| 30 | +type PickerIOSChangeEvent = SyntheticEvent< |
| 31 | + $ReadOnly<{| |
| 32 | + newValue: number | string, |
| 33 | + newIndex: number, |
| 34 | + |}>, |
| 35 | +>; |
| 36 | + |
| 37 | +type RCTPickerIOSItemType = $ReadOnly<{| |
| 38 | + label: ?Label, |
| 39 | + value: ?(number | string), |
| 40 | + textColor: ?(number | NativeOrDynamicColorType), // TODO(macOS ISS#2323203) |
| 41 | +|}>; |
| 42 | + |
| 43 | +type RCTPickerIOSType = Class< |
| 44 | + ReactNative.NativeComponent< |
| 45 | + $ReadOnly<{| |
| 46 | + items: $ReadOnlyArray<RCTPickerIOSItemType>, |
| 47 | + onChange: (event: PickerIOSChangeEvent) => void, |
| 48 | + onResponderTerminationRequest: () => boolean, |
| 49 | + onStartShouldSetResponder: () => boolean, |
| 50 | + selectedIndex: number, |
| 51 | + style?: ?TextStyleProp, |
| 52 | + testID?: ?string, |
| 53 | + |}>, |
| 54 | + >, |
| 55 | +>; |
| 56 | + |
| 57 | +type Label = Stringish | number; |
| 58 | + |
| 59 | +type Props = $ReadOnly<{| |
| 60 | + ...ViewProps, |
| 61 | + children: React.ChildrenArray<React.Element<typeof PickerIOSItem>>, |
| 62 | + itemStyle?: ?TextStyleProp, |
| 63 | + onChange?: ?(event: PickerIOSChangeEvent) => mixed, |
| 64 | + onValueChange?: ?(itemValue: string | number, itemIndex: number) => mixed, |
| 65 | + selectedValue: ?(number | string), |
| 66 | +|}>; |
| 67 | + |
| 68 | +type State = {| |
| 69 | + selectedIndex: number, |
| 70 | + items: $ReadOnlyArray<RCTPickerIOSItemType>, |
| 71 | +|}; |
| 72 | + |
| 73 | +type ItemProps = $ReadOnly<{| |
| 74 | + label: ?Label, |
| 75 | + value?: ?(number | string), |
| 76 | + color?: ?ColorValue, |
| 77 | +|}>; |
| 78 | + |
| 79 | +const PickerIOSItem = (props: ItemProps) => { |
| 80 | + return null; |
| 81 | +}; |
| 82 | + |
| 83 | +class PickerIOS extends React.Component<Props, State> { |
| 84 | + _picker: ?React.ElementRef<RCTPickerIOSType> = null; |
| 85 | + |
| 86 | + state = { |
| 87 | + selectedIndex: 0, |
| 88 | + items: [], |
| 89 | + }; |
| 90 | + |
| 91 | + static Item = PickerIOSItem; |
| 92 | + |
| 93 | + static getDerivedStateFromProps(props: Props): State { |
| 94 | + let selectedIndex = 0; |
| 95 | + const items = []; |
| 96 | + React.Children.toArray(props.children) |
| 97 | + .filter(child => child !== null) |
| 98 | + .forEach(function(child, index) { |
| 99 | + if (child.props.value === props.selectedValue) { |
| 100 | + selectedIndex = index; |
| 101 | + } |
| 102 | + items.push({ |
| 103 | + value: child.props.value, |
| 104 | + label: child.props.label, |
| 105 | + textColor: processColor(child.props.color), |
| 106 | + }); |
| 107 | + }); |
| 108 | + return {selectedIndex, items}; |
| 109 | + } |
| 110 | + |
| 111 | + render() { |
| 112 | + return ( |
| 113 | + <View style={this.props.style}> |
| 114 | + <RCTPickerNativeComponent |
| 115 | + ref={picker => { |
| 116 | + this._picker = picker; |
| 117 | + }} |
| 118 | + testID={this.props.testID} |
| 119 | + style={[styles.pickerIOS, this.props.itemStyle]} |
| 120 | + items={this.state.items} |
| 121 | + selectedIndex={this.state.selectedIndex} |
| 122 | + onChange={this._onChange} |
| 123 | + onStartShouldSetResponder={() => true} |
| 124 | + onResponderTerminationRequest={() => false} |
| 125 | + /> |
| 126 | + </View> |
| 127 | + ); |
| 128 | + } |
| 129 | + |
| 130 | + _onChange = event => { |
| 131 | + if (this.props.onChange) { |
| 132 | + this.props.onChange(event); |
| 133 | + } |
| 134 | + if (this.props.onValueChange) { |
| 135 | + this.props.onValueChange( |
| 136 | + event.nativeEvent.newValue, |
| 137 | + event.nativeEvent.newIndex, |
| 138 | + ); |
| 139 | + } |
| 140 | + |
| 141 | + // The picker is a controlled component. This means we expect the |
| 142 | + // on*Change handlers to be in charge of updating our |
| 143 | + // `selectedValue` prop. That way they can also |
| 144 | + // disallow/undo/mutate the selection of certain values. In other |
| 145 | + // words, the embedder of this component should be the source of |
| 146 | + // truth, not the native component. |
| 147 | + if ( |
| 148 | + this._picker && |
| 149 | + this.state.selectedIndex !== event.nativeEvent.newIndex |
| 150 | + ) { |
| 151 | + this._picker.setNativeProps({ |
| 152 | + selectedIndex: this.state.selectedIndex, |
| 153 | + }); |
| 154 | + } |
| 155 | + }; |
| 156 | +} |
| 157 | + |
| 158 | +const styles = StyleSheet.create({ |
| 159 | + pickerIOS: { |
| 160 | + // The picker will conform to whatever width is given, but we do |
| 161 | + // have to set the component's height explicitly on the |
| 162 | + // surrounding view to ensure it gets rendered. |
| 163 | + height: 216, |
| 164 | + }, |
| 165 | +}); |
| 166 | + |
| 167 | +module.exports = PickerIOS; |
0 commit comments