Merge pull request #102 from henninghall/add-invalid-prop-errors

Improve invalid prop errors

DatePickerAndroid.js

@@ -1,62 +1,64 @@
 import React from 'react';
 import { DatePickerIOS, requireNativeComponent, StyleSheet } from 'react-native';
 import moment from 'moment'
+import { throwIfInvalidProps } from "./propChecker"
 
 const NativeDatePicker = requireNativeComponent(`DatePickerManager`, DatePickerAndroid, { nativeOnly: { onChange: true } });
 
 class DatePickerAndroid extends React.PureComponent {
 
-    static defaultProps = {
-        mode: 'datetime',
-        minuteInterval: 1,
-    };
+  static defaultProps = {
+    mode: 'datetime',
+    minuteInterval: 1,
+  };
 
-    render(){
-        return (
-            <NativeDatePicker
-                {...this.props}
-                date={this._date()}
-                minimumDate={this._minimumDate()}
-                maximumDate={this._maximumDate()}
-                onChange={this._onChange}
-                style={[styles.picker, this.props.style]}
-                utc={this.props.timeZoneOffsetInMinutes !== undefined}
-            />
-        )
-    }
+  render() {
+    if (__DEV__) throwIfInvalidProps(this.props)
+    return (
+      <NativeDatePicker
+        {...this.props}
+        date={this._date()}
+        minimumDate={this._minimumDate()}
+        maximumDate={this._maximumDate()}
+        onChange={this._onChange}
+        style={[styles.picker, this.props.style]}
+        utc={this.props.timeZoneOffsetInMinutes !== undefined}
+      />
+    )
+  }
 
-    _onChange = e => {
-        const jsDate = this._fromIsoWithTimeZoneOffset(e.nativeEvent.date).toDate()
-        this.props.onDateChange(jsDate)
-    }
+  _onChange = e => {
+    const jsDate = this._fromIsoWithTimeZoneOffset(e.nativeEvent.date).toDate()
+    this.props.onDateChange(jsDate)
+  }
 
-    _maximumDate = () => this.props.maximumDate && this._toIsoWithTimeZoneOffset(this.props.maximumDate);
+  _maximumDate = () => this.props.maximumDate && this._toIsoWithTimeZoneOffset(this.props.maximumDate);
 
-    _minimumDate = () => this.props.minimumDate && this._toIsoWithTimeZoneOffset(this.props.minimumDate);
+  _minimumDate = () => this.props.minimumDate && this._toIsoWithTimeZoneOffset(this.props.minimumDate);
 
-    _date = () => this._toIsoWithTimeZoneOffset(this.props.date);
+  _date = () => this._toIsoWithTimeZoneOffset(this.props.date);
 
-    _fromIsoWithTimeZoneOffset = date => {
-        if (this.props.timeZoneOffsetInMinutes === undefined)
-            return moment(date)
+  _fromIsoWithTimeZoneOffset = date => {
+    if (this.props.timeZoneOffsetInMinutes === undefined)
+      return moment(date)
 
-        return moment.utc(date).subtract(this.props.timeZoneOffsetInMinutes, 'minutes')
-    }
+    return moment.utc(date).subtract(this.props.timeZoneOffsetInMinutes, 'minutes')
+  }
 
-    _toIsoWithTimeZoneOffset = date => {
-        if (this.props.timeZoneOffsetInMinutes === undefined)
-            return moment(date).toISOString()
+  _toIsoWithTimeZoneOffset = date => {
+    if (this.props.timeZoneOffsetInMinutes === undefined)
+      return moment(date).toISOString()
 
-        return moment.utc(date).add(this.props.timeZoneOffsetInMinutes, 'minutes').toISOString()
-    }
+    return moment.utc(date).add(this.props.timeZoneOffsetInMinutes, 'minutes').toISOString()
+  }
 
 }
 
 const styles = StyleSheet.create({
-    picker: {
-        width: 310,
-        height: 180,
-    }
+  picker: {
+    width: 310,
+    height: 180,
+  }
 })
 
 DatePickerAndroid.propTypes = DatePickerIOS.propTypes;

DatePickerIOS.js

@@ -15,6 +15,7 @@
 
 import React from 'react';
 import { StyleSheet, View, requireNativeComponent } from 'react-native';
+import { throwIfInvalidProps } from "./propChecker"
 const invariant = require('fbjs/lib/invariant');
 
 import type { ViewProps } from 'ViewPropTypes';
@@ -133,6 +134,7 @@ export default class DatePickerIOS extends React.Component {
 
   render() {
     const props = this.props;
+    if (__DEV__) throwIfInvalidProps(props)
     invariant(
       props.date || props.initialDate,
       'A selected date or initial date should be specified.',

propChecker.js

@@ -0,0 +1,36 @@
+export function throwIfInvalidProps(props) {
+    checks.forEach(check => check.validate(props))
+}
+
+class PropCheck {
+    constructor(isInvalid, errorText) {
+        this.isInvalid = isInvalid
+        this.errorText = errorText
+    }
+    validate = (props) => {
+        if (this.isInvalid(props)) {
+            throw new Error(`${this.errorText} Check usage of react-native-date-picker.`)
+        }
+    }
+}
+
+const widthCheck = new PropCheck(
+    (props) => props && props.style && props.style.width && typeof props.style.width !== "number",
+    "Invalid style: width. Width needs to be a number. Percentages or other values are not supported."
+)
+
+const heightCheck = new PropCheck(
+    (props) => props && props.style && props.style.height && typeof props.style.height !== "number",
+    "Invalid style: height. Height needs to be a number. Percentages or other values are not supported."
+)
+
+const modeCheck = new PropCheck(
+    (props) => props && props.mode && !["datetime", "date", "time"].includes(props.mode),
+    "Invalid mode. Valid modes: 'datetime', 'date', 'time'"
+)
+
+const checks = [
+    widthCheck,
+    heightCheck,
+    modeCheck,
+]