Skip to content

Instantly share code, notes, and snippets.

@Moistbobo

Moistbobo/react-native-picker-select+8.0.4.patch

Created January 11, 2022 04:21
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save Moistbobo/2b4bbc5a4a4a0b4c405b44024b5b8c82 to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save Moistbobo/2b4bbc5a4a4a0b4c405b44024b5b8c82 to your computer and use it in GitHub Desktop.
Download ZIP
react-native-picker-select android togglePicker patch-package
Raw
react-native-picker-select+8.0.4.patch
diff --git a/node_modules/react-native-picker-select/src/index.js b/node_modules/react-native-picker-select/src/index.js
index bcbc93e..9908f06 100644
--- a/node_modules/react-native-picker-select/src/index.js
+++ b/node_modules/react-native-picker-select/src/index.js
@@ -9,13 +9,13 @@ export default class RNPickerSelect extends PureComponent {
static propTypes = {
onValueChange: PropTypes.func.isRequired,
items: PropTypes.arrayOf(
- PropTypes.shape({
- label: PropTypes.string.isRequired,
- value: PropTypes.any.isRequired,
- inputLabel: PropTypes.string,
- key: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
- color: PropTypes.string,
- })
+ PropTypes.shape({
+ label: PropTypes.string.isRequired,
+ value: PropTypes.any.isRequired,
+ inputLabel: PropTypes.string,
+ key: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
+ color: PropTypes.string,
+ })
).isRequired,
value: PropTypes.any, // eslint-disable-line react/forbid-prop-types
placeholder: PropTypes.shape({
@@ -112,7 +112,6 @@ export default class RNPickerSelect extends PureComponent {
constructor(props) {
super(props);
-
const items = RNPickerSelect.handlePlaceholder({
placeholder: props.placeholder,
}).concat(props.items);
@@ -155,7 +154,7 @@ export default class RNPickerSelect extends PureComponent {
value: this.props.value,
});
const selectedItemChanged =
- !isEqual(this.props.value, undefined) && !isEqual(prevState.selectedItem, selectedItem);
+ !isEqual(this.props.value, undefined) && !isEqual(prevState.selectedItem, selectedItem);
if (itemsChanged || selectedItemChanged) {
this.props.onValueChange(selectedItem.value, idx);
@@ -239,23 +238,24 @@ export default class RNPickerSelect extends PureComponent {
Keyboard.dismiss();
}
+ if (this.pickerRef && Platform.OS == 'android') this.pickerRef.focus();
const animationType =
- modalProps && modalProps.animationType ? modalProps.animationType : 'slide';
+ modalProps && modalProps.animationType ? modalProps.animationType : 'slide';
this.triggerOpenCloseCallbacks();
this.setState(
- (prevState) => {
- return {
- animationType: animate ? animationType : undefined,
- showPicker: !prevState.showPicker,
- };
- },
- () => {
- if (postToggleCallback) {
- postToggleCallback();
- }
- }
+ (prevState) => {
+ return {
+ animationType: animate ? animationType : undefined,
+ showPicker: !prevState.showPicker,
+ };
+ },
+ () => {
+ if (postToggleCallback) {
+ postToggleCallback();
+ }
+ }
);
}
@@ -264,12 +264,12 @@ export default class RNPickerSelect extends PureComponent {
return items.map((item) => {
return (
- <Picker.Item
- label={item.label}
- value={item.value}
- key={item.key || item.label}
- color={item.color}
- />
+ <Picker.Item
+ label={item.label}
+ value={item.value}
+ key={item.key || item.label}
+ color={item.color}
+ />
);
});
}
@@ -292,73 +292,73 @@ export default class RNPickerSelect extends PureComponent {
}
return (
- <View
- style={[defaultStyles.modalViewMiddle, style.modalViewMiddle]}
- testID="input_accessory_view"
- >
- <View style={[defaultStyles.chevronContainer, style.chevronContainer]}>
- <TouchableOpacity
- activeOpacity={onUpArrow ? 0.5 : 1}
- onPress={onUpArrow ? this.onUpArrow : null}
- >
- <View
- style={[
- defaultStyles.chevron,
- style.chevron,
- defaultStyles.chevronUp,
- style.chevronUp,
- onUpArrow ? [defaultStyles.chevronActive, style.chevronActive] : {},
- ]}
- />
- </TouchableOpacity>
- <TouchableOpacity
- activeOpacity={onDownArrow ? 0.5 : 1}
- onPress={onDownArrow ? this.onDownArrow : null}
- >
- <View
- style={[
- defaultStyles.chevron,
- style.chevron,
- defaultStyles.chevronDown,
- style.chevronDown,
- onDownArrow
- ? [defaultStyles.chevronActive, style.chevronActive]
- : {},
- ]}
- />
- </TouchableOpacity>
- </View>
- <TouchableOpacity
- testID="done_button"
- onPress={() => {
- this.togglePicker(true, onDonePress);
- }}
- onPressIn={() => {
- this.setState({ doneDepressed: true });
- }}
- onPressOut={() => {
- this.setState({ doneDepressed: false });
- }}
- hitSlop={{ top: 4, right: 4, bottom: 4, left: 4 }}
- {...touchableDoneProps}
- >
- <View testID="needed_for_touchable">
- <Text
- testID="done_text"
- allowFontScaling={false}
- style={[
- defaultStyles.done,
- style.done,
- doneDepressed
- ? [defaultStyles.doneDepressed, style.doneDepressed]
- : {},
- ]}
- >
- {doneText}
- </Text>
- </View>
- </TouchableOpacity>
- </View>
+ <View
+ style={[defaultStyles.modalViewMiddle, style.modalViewMiddle]}
+ testID="input_accessory_view"
+ >
+ <View style={[defaultStyles.chevronContainer, style.chevronContainer]}>
+ <TouchableOpacity
+ activeOpacity={onUpArrow ? 0.5 : 1}
+ onPress={onUpArrow ? this.onUpArrow : null}
+ >
+ <View
+ style={[
+ defaultStyles.chevron,
+ style.chevron,
+ defaultStyles.chevronUp,
+ style.chevronUp,
+ onUpArrow ? [defaultStyles.chevronActive, style.chevronActive] : {},
+ ]}
+ />
+ </TouchableOpacity>
+ <TouchableOpacity
+ activeOpacity={onDownArrow ? 0.5 : 1}
+ onPress={onDownArrow ? this.onDownArrow : null}
+ >
+ <View
+ style={[
+ defaultStyles.chevron,
+ style.chevron,
+ defaultStyles.chevronDown,
+ style.chevronDown,
+ onDownArrow
+ ? [defaultStyles.chevronActive, style.chevronActive]
+ : {},
+ ]}
+ />
+ </TouchableOpacity>
+ </View>
+ <TouchableOpacity
+ testID="done_button"
+ onPress={() => {
+ this.togglePicker(true, onDonePress);
+ }}
+ onPressIn={() => {
+ this.setState({ doneDepressed: true });
+ }}
+ onPressOut={() => {
+ this.setState({ doneDepressed: false });
+ }}
+ hitSlop={{ top: 4, right: 4, bottom: 4, left: 4 }}
+ {...touchableDoneProps}
+ >
+ <View testID="needed_for_touchable">
+ <Text
+ testID="done_text"
+ allowFontScaling={false}
+ style={[
+ defaultStyles.done,
+ style.done,
+ doneDepressed
+ ? [defaultStyles.doneDepressed, style.doneDepressed]
+ : {},
+ ]}
+ >
+ {doneText}
+ </Text>
+ </View>
+ </TouchableOpacity>
+ </View>
);
}
@@ -370,12 +370,12 @@ export default class RNPickerSelect extends PureComponent {
}
return (
- <View
- testID="icon_container"
- style={[defaultStyles.iconContainer, style.iconContainer]}
- >
- <Icon testID="icon" />
- </View>
+ <View
+ testID="icon_container"
+ style={[defaultStyles.iconContainer, style.iconContainer]}
+ >
+ <Icon testID="icon" />
+ </View>
);
}
@@ -384,31 +384,31 @@ export default class RNPickerSelect extends PureComponent {
const { selectedItem } = this.state;
const containerStyle =
- Platform.OS === 'ios' ? style.inputIOSContainer : style.inputAndroidContainer;
+ Platform.OS === 'ios' ? style.inputIOSContainer : style.inputAndroidContainer;
if (children) {
return (
- <View pointerEvents="box-only" style={containerStyle}>
- {children}
- </View>
+ <View pointerEvents="box-only" style={containerStyle}>
+ {children}
+ </View>
);
}
return (
- <View pointerEvents="box-only" style={containerStyle}>
- <TextInput
- testID="text_input"
- style={[
- Platform.OS === 'ios' ? style.inputIOS : style.inputAndroid,
- this.getPlaceholderStyle(),
- ]}
- value={selectedItem.inputLabel ? selectedItem.inputLabel : selectedItem.label}
- ref={this.setInputRef}
- editable={false}
- {...textInputProps}
- />
- {this.renderIcon()}
- </View>
+ <View pointerEvents="box-only" style={containerStyle}>
+ <TextInput
+ testID="text_input"
+ style={[
+ Platform.OS === 'ios' ? style.inputIOS : style.inputAndroid,
+ this.getPlaceholderStyle(),
+ ]}
+ value={selectedItem.inputLabel ? selectedItem.inputLabel : selectedItem.label}
+ ref={this.setInputRef}
+ editable={false}
+ {...textInputProps}
+ />
+ {this.renderIcon()}
+ </View>
);
}
@@ -417,52 +417,52 @@ export default class RNPickerSelect extends PureComponent {
const { animationType, orientation, selectedItem, showPicker } = this.state;
return (
- <View style={[defaultStyles.viewContainer, style.viewContainer]}>
- <TouchableOpacity
- testID="ios_touchable_wrapper"
+ <View style={[defaultStyles.viewContainer, style.viewContainer]}>
+ <TouchableOpacity
+ testID="ios_touchable_wrapper"
+ onPress={() => {
+ this.togglePicker(true);
+ }}
+ activeOpacity={1}
+ {...touchableWrapperProps}
+ >
+ {this.renderTextInputOrChildren()}
+ </TouchableOpacity>
+ <Modal
+ testID="ios_modal"
+ visible={showPicker}
+ transparent
+ animationType={animationType}
+ supportedOrientations={['portrait', 'landscape']}
+ onOrientationChange={this.onOrientationChange}
+ {...modalProps}
+ >
+ <TouchableOpacity
+ style={[defaultStyles.modalViewTop, style.modalViewTop]}
+ testID="ios_modal_top"
onPress={() => {
this.togglePicker(true);
}}
- activeOpacity={1}
- {...touchableWrapperProps}
- >
- {this.renderTextInputOrChildren()}
- </TouchableOpacity>
- <Modal
- testID="ios_modal"
- visible={showPicker}
- transparent
- animationType={animationType}
- supportedOrientations={['portrait', 'landscape']}
- onOrientationChange={this.onOrientationChange}
- {...modalProps}
- >
- <TouchableOpacity
- style={[defaultStyles.modalViewTop, style.modalViewTop]}
- testID="ios_modal_top"
- onPress={() => {
- this.togglePicker(true);
- }}
- />
- {this.renderInputAccessoryView()}
- <View
- style={[
- defaultStyles.modalViewBottom,
- { height: orientation === 'portrait' ? 215 : 162 },
- style.modalViewBottom,
- ]}
- >
- <Picker
- testID="ios_picker"
- onValueChange={this.onValueChange}
- selectedValue={selectedItem.value}
- {...pickerProps}
- >
- {this.renderPickerItems()}
- </Picker>
- </View>
- </Modal>
- </View>
+ />
+ {this.renderInputAccessoryView()}
+ <View
+ style={[
+ defaultStyles.modalViewBottom,
+ { height: orientation === 'portrait' ? 215 : 162 },
+ style.modalViewBottom,
+ ]}
+ >
+ <Picker
+ testID="ios_picker"
+ onValueChange={this.onValueChange}
+ selectedValue={selectedItem.value}
+ {...pickerProps}
+ >
+ {this.renderPickerItems()}
+ </Picker>
+ </View>
+ </Modal>
+ </View>
);
}
@@ -477,58 +477,58 @@ export default class RNPickerSelect extends PureComponent {
fixAndroidTouchableBug,
} = this.props;
const { selectedItem } = this.state;
-
const Component = fixAndroidTouchableBug ? View : TouchableOpacity;
return (
- <Component
- testID="android_touchable_wrapper"
- onPress={onOpen}
- activeOpacity={1}
- {...touchableWrapperProps}
- >
- <View style={style.headlessAndroidContainer}>
- {this.renderTextInputOrChildren()}
- <Picker
- style={[
- Icon ? { backgroundColor: 'transparent' } : {}, // to hide native icon
- defaultStyles.headlessAndroidPicker,
- style.headlessAndroidPicker,
- ]}
- testID="android_picker_headless"
- enabled={!disabled}
- onValueChange={this.onValueChange}
- selectedValue={selectedItem.value}
- {...pickerProps}
- >
- {this.renderPickerItems()}
- </Picker>
- </View>
- </Component>
- );
- }
-
- renderAndroidNativePickerStyle() {
- const { disabled, Icon, style, pickerProps } = this.props;
- const { selectedItem } = this.state;
-
- return (
- <View style={[defaultStyles.viewContainer, style.viewContainer]}>
- <Picker
+ <Component
+ testID="android_touchable_wrapper"
+ onPress={onOpen}
+ activeOpacity={1}
+ {...touchableWrapperProps}
+ >
+ <View style={style.headlessAndroidContainer}>
+ {this.renderTextInputOrChildren()}
+ <Picker
+ ref={(ref) => (this.pickerRef = ref)}
style={[
Icon ? { backgroundColor: 'transparent' } : {}, // to hide native icon
- style.inputAndroid,
- this.getPlaceholderStyle(),
+ defaultStyles.headlessAndroidPicker,
+ style.headlessAndroidPicker,
]}
- testID="android_picker"
+ testID="android_picker_headless"
enabled={!disabled}
onValueChange={this.onValueChange}
selectedValue={selectedItem.value}
{...pickerProps}
- >
- {this.renderPickerItems()}
- </Picker>
- {this.renderIcon()}
- </View>
+ >
+ {this.renderPickerItems()}
+ </Picker>
+ </View>
+ </Component>
+ );
+ }
+
+ renderAndroidNativePickerStyle() {
+ const { disabled, Icon, style, pickerProps } = this.props;
+ const { selectedItem } = this.state;
+ return (
+ <View style={[defaultStyles.viewContainer, style.viewContainer]}>
+ <Picker
+ ref={(ref) => (this.pickerRef = ref)}
+ style={[
+ Icon ? { backgroundColor: 'transparent' } : {}, // to hide native icon
+ style.inputAndroid,
+ this.getPlaceholderStyle(),
+ ]}
+ testID="android_picker"
+ enabled={!disabled}
+ onValueChange={this.onValueChange}
+ selectedValue={selectedItem.value}
+ {...pickerProps}
+ >
+ {this.renderPickerItems()}
+ </Picker>
+ {this.renderIcon()}
+ </View>
);
}
@@ -537,22 +537,21 @@ export default class RNPickerSelect extends PureComponent {
const { selectedItem } = this.state;
return (
- <View style={[defaultStyles.viewContainer, style.viewContainer]}>
- <Picker
- style={[style.inputWeb]}
- testID="web_picker"
- enabled={!disabled}
- onValueChange={this.onValueChange}
- selectedValue={selectedItem.value}
- {...pickerProps}
- >
- {this.renderPickerItems()}
- </Picker>
- {this.renderIcon()}
- </View>
+ <View style={[defaultStyles.viewContainer, style.viewContainer]}>
+ <Picker
+ style={[style.inputWeb]}
+ testID="web_picker"
+ enabled={!disabled}
+ onValueChange={this.onValueChange}
+ selectedValue={selectedItem.value}
+ {...pickerProps}
+ >
+ {this.renderPickerItems()}
+ </Picker>
+ {this.renderIcon()}
+ </View>
);
}
-
render() {
const { children, useNativeAndroidPickerStyle } = this.props;
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment