react-native-date-picker - npm Package Compare versions

Comparing version 3.4.3 to 4.0.0-0

package.json

 {
   "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": {

src/DatePickerAndroid.js

 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()

src/DatePickerIOS.js

@@ -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 @@ )

src/index.js

@@ -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)

src/propChecker.js

 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,
+]

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Native code

Supply chain risk

Contains native code (e.g., compiled binaries or shared libraries). Including native code can obscure malicious behavior.

Found 10 instances in 1 package

No v1

Quality

Package is not semver >=1. This means it is not stable and does not support ^ ranges.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

1258127

increased by667.05%

Number of package files

231

increased by138.14%

Lines of code

631

increased by25.2%

Worsened metrics

Number of low quality alerts

1

increased byInfinity%

Number of medium supply chain risk alerts

10

increased byInfinity%

No dependency changes