react-native-date-picker
Advanced tools
Comparing version 3.4.3 to 4.0.0-0
{ | ||
"name": "react-native-date-picker", | ||
"version": "3.4.3", | ||
"description": "A Cross Platform React Native Picker", | ||
"version": "4.0.0-0", | ||
"description": "A datetime picker for React Native. As modal or stand alone. Supports Android and iOS.", | ||
"main": "src/index.js", | ||
@@ -6,0 +6,0 @@ "scripts": { |
import React from 'react' | ||
import { StyleSheet, requireNativeComponent } from 'react-native' | ||
import { | ||
StyleSheet, | ||
requireNativeComponent, | ||
NativeModules, | ||
NativeEventEmitter, | ||
} from 'react-native' | ||
@@ -19,17 +24,49 @@ function addMinutes(date, minutesToAdd) { | ||
class DatePickerAndroid extends React.PureComponent { | ||
render() { | ||
return ( | ||
<NativeDatePicker | ||
{...this.props} | ||
date={this._date()} | ||
minimumDate={this._minimumDate()} | ||
maximumDate={this._maximumDate()} | ||
onChange={this._onChange} | ||
style={this.getStyle()} | ||
utc={this.props.timeZoneOffsetInMinutes !== undefined} | ||
/> | ||
componentDidMount() { | ||
const { onConfirm, onCancel } = this.props | ||
const eventEmitter = new NativeEventEmitter(NativeModules.RNDatePicker) | ||
this.confirmListener = eventEmitter.addListener( | ||
'onConfirm', | ||
({ date: isoDate }) => { | ||
if (onConfirm) { | ||
onConfirm(this._fromIsoWithTimeZoneOffset(isoDate)) | ||
} | ||
} | ||
) | ||
this.cancelListener = eventEmitter.addListener('onCancel', () => { | ||
if (onCancel) onCancel() | ||
}) | ||
} | ||
getStyle = () => { | ||
componentWillUnmount() { | ||
this.confirmListener.remove() | ||
this.cancelListener.remove() | ||
} | ||
render() { | ||
const props = this.getProps() | ||
if (props.modal) { | ||
if (props.open) { | ||
NativeModules.RNDatePicker.openPicker({ | ||
...props, | ||
confirmText: this.props.confirmText ?? 'Confirm', | ||
cancelText: this.props.cancelText ?? 'Cancel', | ||
}) | ||
} | ||
return null | ||
} | ||
return <NativeDatePicker {...props} onChange={this._onChange} /> | ||
} | ||
getProps = () => ({ | ||
...this.props, | ||
date: this._date(), | ||
minimumDate: this._minimumDate(), | ||
maximumDate: this._maximumDate(), | ||
utc: this.props.timeZoneOffsetInMinutes !== undefined, | ||
style: this._getStyle(), | ||
}) | ||
_getStyle = () => { | ||
const width = this.props.mode === 'time' ? timeModeWidth : defaultWidth | ||
@@ -39,3 +76,3 @@ return [{ width, height }, this.props.style] | ||
_onChange = e => { | ||
_onChange = (e) => { | ||
const jsDate = this._fromIsoWithTimeZoneOffset(e.nativeEvent.date) | ||
@@ -58,3 +95,3 @@ this.props.onDateChange && this.props.onDateChange(jsDate) | ||
_fromIsoWithTimeZoneOffset = timestamp => { | ||
_fromIsoWithTimeZoneOffset = (timestamp) => { | ||
const date = new Date(timestamp) | ||
@@ -65,3 +102,3 @@ if (this.props.timeZoneOffsetInMinutes === undefined) return date | ||
_toIsoWithTimeZoneOffset = date => { | ||
_toIsoWithTimeZoneOffset = (date) => { | ||
if (this.props.timeZoneOffsetInMinutes === undefined) | ||
@@ -68,0 +105,0 @@ return date.toISOString() |
@@ -1,3 +0,8 @@ | ||
import React from 'react' | ||
import { StyleSheet, View, requireNativeComponent } from 'react-native' | ||
import React, { useEffect } from 'react' | ||
import { | ||
StyleSheet, | ||
View, | ||
requireNativeComponent, | ||
NativeModules, | ||
} from 'react-native' | ||
@@ -20,3 +25,3 @@ const RCTDatePickerIOS = requireNativeComponent('RNDatePicker') | ||
_onChange = event => { | ||
_onChange = (event) => { | ||
const nativeTimeStamp = event.nativeEvent.timestamp | ||
@@ -27,27 +32,41 @@ this.props.onDateChange && | ||
_toIosProps = (props) => { | ||
return { | ||
...props, | ||
style: [styles.datePickerIOS, props.style], | ||
date: props.date ? props.date.getTime() : undefined, | ||
locale: props.locale ? props.locale : undefined, | ||
maximumDate: props.maximumDate ? props.maximumDate.getTime() : undefined, | ||
minimumDate: props.minimumDate ? props.minimumDate.getTime() : undefined, | ||
} | ||
} | ||
_onConfirm = ({ timestamp }) => { | ||
this.props.onConfirm(new Date(timestamp)) | ||
} | ||
render() { | ||
const { props } = this | ||
const props = this._toIosProps(this.props) | ||
if (props.modal) { | ||
if (props.open) { | ||
NativeModules.RNDatePickerManager.openPicker( | ||
props, | ||
this._onConfirm, | ||
props.onCancel | ||
) | ||
} | ||
return null | ||
} | ||
return ( | ||
<RCTDatePickerIOS | ||
testID={props.testID} | ||
key={props.textColor} // preventing "Today" string keep old text color when text color changes | ||
ref={picker => { | ||
ref={(picker) => { | ||
this._picker = picker | ||
}} | ||
style={[styles.datePickerIOS, props.style]} | ||
date={props.date ? props.date.getTime() : undefined} | ||
locale={props.locale ? props.locale : undefined} | ||
maximumDate={ | ||
props.maximumDate ? props.maximumDate.getTime() : undefined | ||
} | ||
minimumDate={ | ||
props.minimumDate ? props.minimumDate.getTime() : undefined | ||
} | ||
mode={props.mode} | ||
minuteInterval={props.minuteInterval} | ||
timeZoneOffsetInMinutes={props.timeZoneOffsetInMinutes} | ||
onChange={this._onChange} | ||
onStartShouldSetResponder={() => true} | ||
onResponderTerminationRequest={() => false} | ||
textColor={props.textColor} | ||
{...props} | ||
/> | ||
@@ -54,0 +73,0 @@ ) |
@@ -18,4 +18,11 @@ import React from 'react' | ||
const DatePickerWrapper = props => { | ||
const { textColor, fadeToColor, innerRef, ...rest } = props | ||
const DatePickerWrapper = (props) => { | ||
const { | ||
textColor, | ||
fadeToColor, | ||
confirmText = 'Confirm', | ||
cancelText = 'Cancel', | ||
innerRef, | ||
...rest | ||
} = props | ||
if (__DEV__) throwIfInvalidProps(props) | ||
@@ -27,2 +34,5 @@ return ( | ||
fadeToColor={colorToHex(fadeToColor)} | ||
title={getTitle(props)} | ||
confirmText={confirmText} | ||
cancelText={cancelText} | ||
{...rest} | ||
@@ -33,2 +43,10 @@ /> | ||
const getTitle = (props) => { | ||
const { title, mode } = props | ||
if (title === null) return '' | ||
if (title) return title | ||
if (mode === 'time') return 'Select time' | ||
return 'Select date' | ||
} | ||
export default React.memo(DatePickerWrapper) |
export function throwIfInvalidProps(props) { | ||
checks.forEach(check => check.validate(props)) | ||
checks.forEach((check) => check.validate(props)) | ||
} | ||
@@ -10,3 +10,3 @@ | ||
} | ||
validate = props => { | ||
validate = (props) => { | ||
if (this.isInvalid(props)) { | ||
@@ -20,4 +20,9 @@ throw new Error( | ||
const dateCheck = new PropCheck( | ||
(props) => props && !(props.date instanceof Date), | ||
'Invalid or missing Date prop. Must be a Date object.' | ||
) | ||
const widthCheck = new PropCheck( | ||
props => | ||
(props) => | ||
props && | ||
@@ -31,3 +36,3 @@ props.style && | ||
const heightCheck = new PropCheck( | ||
props => | ||
(props) => | ||
props && | ||
@@ -41,3 +46,3 @@ props.style && | ||
const modeCheck = new PropCheck( | ||
props => | ||
(props) => | ||
props && props.mode && !['datetime', 'date', 'time'].includes(props.mode), | ||
@@ -48,7 +53,15 @@ "Invalid mode. Valid modes: 'datetime', 'date', 'time'" | ||
const androidVariantCheck = new PropCheck( | ||
props => | ||
props && props.androidVariant && !['nativeAndroid', 'iosClone'].includes(props.androidVariant), | ||
(props) => | ||
props && | ||
props.androidVariant && | ||
!['nativeAndroid', 'iosClone'].includes(props.androidVariant), | ||
"Invalid android variant. Valid modes: 'nativeAndroid', 'iosClone'" | ||
) | ||
const checks = [widthCheck, heightCheck, modeCheck, androidVariantCheck] | ||
const checks = [ | ||
dateCheck, | ||
widthCheck, | ||
heightCheck, | ||
modeCheck, | ||
androidVariantCheck, | ||
] |
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
License Policy Violation
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
No v1
QualityPackage is not semver >=1. This means it is not stable and does not support ^ ranges.
Found 1 instance in 1 package
License Policy Violation
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
1258127
231
631
1