Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

We can now use a custom DatePicker component #115

Merged
merged 4 commits into from
Feb 13, 2018
Merged

We can now use a custom DatePicker component #115

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
ab591c5
We can now use a custom DatePicker component
SudoPlz Dec 5, 2017
dd1c56d
No longer require neverDisableConfirmIOS for customDatePickerIOS to work
SudoPlz Feb 1, 2018
529591a
Added an example link for our customDatePickerIOS on Readme
SudoPlz Feb 1, 2018
2652664
Merge branch 'master' into master
SudoPlz Feb 1, 2018
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 2 additions & 0 deletions README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -73,6 +73,7 @@ export default class DateTimePickerTester extends Component {
| customConfirmButtonIOS | node | | A custom component for the confirm button on iOS |
| neverDisableConfirmIOS | bool | false | If true, do not disable the confirm button on any touch events; see [#82](https://github.com/mmazzarolo/react-native-modal-datetime-picker/issues/82) |
| customTitleContainerIOS | node | | A custom component for the title container on iOS |
| customDatePickerIOS | node | | A custom component that will replace the default DatePicker on iOS [(Example)](https://github.com/mmazzarolo/react-native-modal-datetime-picker/pull/115#issue-279547697)|
| datePickerContainerStyleIOS | style | | The style of the container on iOS |
| reactNativeModalPropsIOS | object | | Additional props for [react-native-modal](https://github.com/react-native-community/react-native-modal) on iOS |
| date | obj | new Date() | Initial selected date/time |
Expand All @@ -81,6 +82,7 @@ export default class DateTimePickerTester extends Component {
| datePickerModeAndroid | string | 'calendar' | Display as 'spinner' or 'calendar'|
| onConfirm | func | **REQUIRED** | Function called on date or time picked. It returns the date or time as a JavaScript Date object. |
| onHideAfterConfirm | func | () => {} | Called after the hiding animation if a date was picked |
| pickerRefCb | func | | Called after picker has mounted, contains a ref |
| onCancel | func | **REQUIRED** | Function called on dismiss |
| titleIOS | string | 'Pick a date' | The title text on iOS |
| titleStyle | style | | The style of the title text on iOS |
Expand Down
27 changes: 21 additions & 6 deletions src/CustomDatePickerIOS/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -14,12 +14,17 @@ export default class CustomDatePickerIOS extends PureComponent {
neverDisableConfirmIOS: PropTypes.bool,
customConfirmButtonWhileInteractingIOS: PropTypes.node,
customTitleContainerIOS: PropTypes.node,
customDatePickerIOS: PropTypes.oneOfType([
PropTypes.node,
PropTypes.func,
]),
contentContainerStyleIOS: PropTypes.any,
datePickerContainerStyleIOS: PropTypes.any,
date: PropTypes.instanceOf(Date),
mode: PropTypes.oneOf(['date', 'time', 'datetime']),
onConfirm: PropTypes.func.isRequired,
onHideAfterConfirm: PropTypes.func,
pickerRefCb: PropTypes.func,
onCancel: PropTypes.func.isRequired,
titleIOS: PropTypes.string,
isVisible: PropTypes.bool,
Expand Down Expand Up @@ -79,9 +84,12 @@ export default class CustomDatePickerIOS extends PureComponent {
};

_handleUserTouchInit = () => {
this.setState({
userIsInteractingWithPicker: true,
});
// custom date picker shouldn't change this param
if(!customDatePickerIOS){
this.setState({
userIsInteractingWithPicker: true,
})
}
return false;
};

Expand All @@ -96,6 +104,7 @@ export default class CustomDatePickerIOS extends PureComponent {
customConfirmButtonIOS,
neverDisableConfirmIOS,
customConfirmButtonWhileInteractingIOS,
customDatePickerIOS,
contentContainerStyleIOS,
customTitleContainerIOS,
datePickerContainerStyleIOS,
Expand All @@ -104,6 +113,7 @@ export default class CustomDatePickerIOS extends PureComponent {
titleStyle,
confirmTextStyle,
cancelTextStyle,
pickerRefCb,
minuteInterval,
...otherProps
} = this.props;
Expand All @@ -124,7 +134,9 @@ export default class CustomDatePickerIOS extends PureComponent {
// We no longer allow our user to tap the confirm button unless the picker is still.
// They can always tap the cancel button anyway.
if (customConfirmButtonIOS) {
if (customConfirmButtonWhileInteractingIOS && this.state.userIsInteractingWithPicker) {
if (customConfirmButtonWhileInteractingIOS
&& this.state.userIsInteractingWithPicker
) {
confirmButton = customConfirmButtonWhileInteractingIOS;
} else {
confirmButton = customConfirmButtonIOS;
Expand All @@ -133,6 +145,8 @@ export default class CustomDatePickerIOS extends PureComponent {
confirmButton = <Text style={[styles.confirmText, confirmTextStyle]}>{confirmTextIOS}</Text>;
}
const cancelButton = <Text style={[styles.cancelText, cancelTextStyle]}>{cancelTextIOS}</Text>;
const DatePickerComponent = customDatePickerIOS || DatePickerIOS;

return (
<ReactNativeModal
isVisible={isVisible}
Expand All @@ -148,8 +162,9 @@ export default class CustomDatePickerIOS extends PureComponent {
>
<View style={[styles.datepickerContainer, datePickerContainerStyleIOS]}>
{customTitleContainerIOS || titleContainer}
<View onStartShouldSetResponderCapture={this._handleUserTouchInit}>
<DatePickerIOS
<View onStartShouldSetResponderCapture={neverDisableConfirmIOS !== true ? this._handleUserTouchInit : null}>
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

You should revert this to <View onStartShouldSetResponderCapture={this._handleUserTouchInit}>

Copy link
Contributor Author

@SudoPlz SudoPlz Feb 1, 2018 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Hmm any reason why we should do that?
People may want to disable the confirmation buttons while the date picker is scrolling, even if they're not using a Custom date picker.

Can you think of any scenarios were that becomes a problem?

Copy link
Contributor

@abarisic86 abarisic86 Feb 1, 2018 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Is there any reason to make this change? any scenario where we need this condition?

Although it doesn't generate any bugs:

  • neverDisableConfirmIOS feature works without this condition (when using default datepicker)
  • The main problem I see is readability. It's easier to follow code if we leave this condition out
  • "neverDisableConfirmIOS !== true" is confusing

So, can we leave it out?

<DatePickerComponent
ref={pickerRefCb}
date={this.state.date}
mode={mode}
onDateChange={this._handleDateChange}
Expand Down
6 changes: 6 additions & 0 deletions src/index.d.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -43,6 +43,12 @@ interface DateTimePickerProps {
*/
customTitleContainerIOS?: JSX.Element

/**
* A custom component that will replace the default DatePicker on iOS
*/
customDatePickerIOS?: JSX.Element


/**
* The style of the container on iOS
*/
Expand Down