Skip to content

Commit

Permalink
6.6.0 (#288)
Browse files Browse the repository at this point in the history 
* 6.6.0

* add test
  • Loading branch information
@lfkwtz
lfkwtz committed Mar 6, 2020
1 parent fa485c0 commit 10a7732
Show file tree
Hide file tree
Showing 8 changed files with 84 additions and 19 deletions.
9 changes: 9 additions & 0 deletions CHANGELOG.md
View file
Original file line number Diff line number Diff line change
@@ -1,3 +1,12 @@
### 6.6.0

##### New

- Updated touchables to all be all TouchableOpacity (with override props available)
- Done text now animates on depress like native select dialog (#215)

---

### 6.5.1

##### Bugfix
Expand Down
10 changes: 5 additions & 5 deletions CONTRIBUTING.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,16 +2,16 @@

#### **Did you write a patch that fixes a bug?**

* Ensure that you link your PR to an open issue. If one is not open, use the "Bug report" template to create one.
- Ensure that you link your PR to an open issue. If one is not open, use the "Bug report" template to create one.

#### **Do you intend to add a new feature or change an existing one?**

* First create an issue using the "Feature request" template and make a note that you intend to make this change.
- First create an issue using the "Feature request" template and make a note that you intend to make this change.

* Before opening the PR, please wait for a response from our team.
- Before opening the PR, please wait for a response from our team.

#### **Looking for inspiration?**

* See the [Feature Requests](https://github.com/lawnstarter/react-native-picker-select/projects/1) board and feel free to submit a PR for anything in the "To do" column.
- See the [Feature Requests](https://github.com/lawnstarter/react-native-picker-select/projects/1) board and feel free to submit a PR for anything in the "To do" column.

* If you're interested in working on anything in the "Under consideration" column - please first respond to the issue with your ideas on how you'd implement the feature.
- If you're interested in working on anything in the "Under consideration" column - please first respond to the issue with your ideas on how you'd implement the feature.
2 changes: 2 additions & 0 deletions README.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -63,6 +63,7 @@ export const Dropdown = () => {
| `pickerProps` | Additional props to pass to the Picker (some props are used in core functionality so use this carefully) | object |
| `Icon` | Custom icon component to be rendered.<br>_More details in [styling](#styling)_ | Component |
| `textInputProps` | Additional props to pass to the TextInput (some props are used in core functionality so use this carefully). This is iOS only unless `useNativeAndroidPickerStyle={false}`. | object |
| `touchableWrapperProps` | Additional props to pass to the touchable wrapping the TextInput (some props are used in core functionality so use this carefully) | object |
| `onOpen`<br> | Callback triggered right before the opening of the picker<br>_Not supported when `useNativeAndroidPickerStyle={true}`_ | function |
| `useNativeAndroidPickerStyle`<br>_Android only_ | The component defaults to using the native Android Picker in its un-selected state. Setting this flag to `false` will mimic the default iOS presentation where a tappable TextInput is displayed.<br>_More details in [styling](#styling)_ | boolean |
| `InputAccessoryView`<br>_iOS only_ | Replace the InputAcessoryView section (bar with tabbing arrown and Done button) of the opened picker with your own custom component. Can also return `null` here to hide completely. While this bar is typical on `select` elements on the web, the [interface guidelines](https://developer.apple.com/ios/human-interface-guidelines/controls/pickers/) does not include it. View the [snack](https://snack.expo.io/@lfkwtz/react-native-picker-select) to see examples on how this can be customized. | boolean |
Expand All @@ -71,6 +72,7 @@ export const Dropdown = () => {
| `onDonePress`<br>_iOS only_ | Callback when the 'Done' button is pressed | function |
| `onClose`<br>_iOS only_ | Callback triggered right before the closing of the picker | function |
| `modalProps`<br>_iOS only_ | Additional props to pass to the Modal (some props are used in core functionality so use this carefully) | object |
| `touchableDoneProps`<br>_iOS only_ | Additional props to pass to the Done touchable (some props are used in core functionality so use this carefully) | object |

### Styling

Expand Down
2 changes: 2 additions & 0 deletions index.d.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -29,6 +29,8 @@ declare module 'react-native-picker-select' {
modalProps?: object;
textInputProps?: object;
pickerProps?: object;
touchableDoneProps?: object;
touchableWrapperProps?: object;
Icon?: React.ReactNode;
InputAccessoryView?: React.ReactNode;
}
Expand Down
2 changes: 1 addition & 1 deletion package.json
View file
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
{
"name": "react-native-picker-select",
"version": "6.5.1",
"version": "6.6.0",
"description": "A Picker component for React Native which emulates the native <select> interfaces for each platform",
"license": "MIT",
"author": "Michael Lefkowitz <lefkowitz.michael@gmail.com>",
Expand Down
57 changes: 46 additions & 11 deletions src/index.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -8,7 +8,6 @@ import {
Text,
TextInput,
TouchableOpacity,
TouchableWithoutFeedback,
View,
} from 'react-native';
import PropTypes from 'prop-types';
Expand Down Expand Up @@ -59,6 +58,12 @@ export default class RNPickerSelect extends PureComponent {
// Picker props
pickerProps: PropTypes.shape({}),

// Touchable Done props (iOS only)
touchableDoneProps: PropTypes.shape({}),

// Touchable wrapper props
touchableWrapperProps: PropTypes.shape({}),

// Custom Icon
Icon: PropTypes.func,
InputAccessoryView: PropTypes.func,
Expand Down Expand Up @@ -87,6 +92,8 @@ export default class RNPickerSelect extends PureComponent {
modalProps: {},
textInputProps: {},
pickerProps: {},
touchableDoneProps: {},
touchableWrapperProps: {},
Icon: null,
InputAccessoryView: null,
};
Expand Down Expand Up @@ -163,6 +170,7 @@ export default class RNPickerSelect extends PureComponent {
showPicker: false,
animationType: undefined,
orientation: 'portrait',
doneDepressed: false,
};

this.onUpArrow = this.onUpArrow.bind(this);
Expand Down Expand Up @@ -291,8 +299,11 @@ export default class RNPickerSelect extends PureComponent {
onDownArrow,
onDonePress,
style,
touchableDoneProps,
} = this.props;

const { doneDepressed } = this.state;

// deprecated
if (hideDoneBar) {
return null;
Expand Down Expand Up @@ -339,19 +350,36 @@ export default class RNPickerSelect extends PureComponent {
/>
</TouchableOpacity>
</View>
<TouchableWithoutFeedback
<TouchableOpacity
onPress={() => {
this.togglePicker(true, onDonePress);
}}
onPressIn={() => {
this.setState({ doneDepressed: true });
}}
onPressOut={() => {
this.setState({ doneDepressed: false });
}}
hitSlop={{ top: 4, right: 4, bottom: 4, left: 4 }}
testID="done_button"
{...touchableDoneProps}
>
<View testID="needed_for_touchable">
<Text allowFontScaling={false} style={[defaultStyles.done, style.done]}>
<Text
testID="done_text"
allowFontScaling={false}
style={[
defaultStyles.done,
style.done,
doneDepressed
? [defaultStyles.doneDepressed, style.doneDepressed]
: {},
]}
>
{doneText}
</Text>
</View>
</TouchableWithoutFeedback>
</TouchableOpacity>
</View>
);
}
Expand Down Expand Up @@ -407,19 +435,21 @@ export default class RNPickerSelect extends PureComponent {
}

renderIOS() {
const { style, modalProps, pickerProps } = this.props;
const { style, modalProps, pickerProps, touchableWrapperProps } = this.props;
const { animationType, orientation, selectedItem, showPicker } = this.state;

return (
<View style={[defaultStyles.viewContainer, style.viewContainer]}>
<TouchableWithoutFeedback
<TouchableOpacity
testID="ios_touchable_wrapper"
onPress={() => {
this.togglePicker(true);
}}
testID="ios_touchable_wrapper"
activeOpacity={1}
{...touchableWrapperProps}
>
{this.renderTextInputOrChildren()}
</TouchableWithoutFeedback>
</TouchableOpacity>
<Modal
testID="ios_modal"
visible={showPicker}
Expand Down Expand Up @@ -459,11 +489,16 @@ export default class RNPickerSelect extends PureComponent {
}

renderAndroidHeadless() {
const { disabled, Icon, style, pickerProps, onOpen } = this.props;
const { disabled, Icon, style, pickerProps, onOpen, touchableWrapperProps } = this.props;
const { selectedItem } = this.state;

return (
<TouchableWithoutFeedback onPress={onOpen} testID="android_touchable_wrapper">
<TouchableOpacity
onPress={onOpen}
testID="android_touchable_wrapper"
activeOpacity={1}
{...touchableWrapperProps}
>
<View style={style.headlessAndroidContainer}>
{this.renderTextInputOrChildren()}
<Picker
Expand All @@ -481,7 +516,7 @@ export default class RNPickerSelect extends PureComponent {
{this.renderPickerItems()}
</Picker>
</View>
</TouchableWithoutFeedback>
</TouchableOpacity>
);
}

Expand Down
3 changes: 3 additions & 0 deletions src/styles.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -51,6 +51,9 @@ export const defaultStyles = StyleSheet.create({
paddingTop: 1,
paddingRight: 11,
},
doneDepressed: {
fontSize: 19,
},
modalViewBottom: {
justifyContent: 'center',
backgroundColor: '#d0d4da',
Expand Down
18 changes: 16 additions & 2 deletions test/test.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -148,7 +148,7 @@ describe('RNPickerSelect', () => {
<RNPickerSelect items={selectItems} placeholder={placeholder} onValueChange={noop} />
);

const touchable = wrapper.find('TouchableWithoutFeedback').at(1);
const touchable = wrapper.find('TouchableOpacity').at(1);
touchable.simulate('press');
expect(wrapper.state().showPicker).toEqual(true);
});
Expand All @@ -163,7 +163,7 @@ describe('RNPickerSelect', () => {
/>
);

const touchable = wrapper.find('TouchableWithoutFeedback').at(1);
const touchable = wrapper.find('TouchableOpacity').at(1);
touchable.simulate('press');
expect(wrapper.state().showPicker).toEqual(false);
});
Expand Down Expand Up @@ -338,6 +338,20 @@ describe('RNPickerSelect', () => {
wrapper.find('[testID="done_button"]').simulate('press');

expect(onDonePressSpy).toHaveBeenCalledWith();
expect(onDonePressSpy).toHaveBeenCalledTimes(1);
});

it('should update the Done styling during a press (iOS)', () => {
Platform.OS = 'ios';
const wrapper = shallow(<RNPickerSelect items={selectItems} onValueChange={noop} />);

const done_button = wrapper.find('[testID="done_button"]');

done_button.simulate('pressIn');
expect(wrapper.state().doneDepressed).toEqual(true);

done_button.simulate('pressOut');
expect(wrapper.state().doneDepressed).toEqual(false);
});

it('should call the onShow callback when set (iOS)', () => {
Expand Down

0 comments on commit 10a7732

Please sign in to comment.