Default datepicker value (#484)

* Removed yarn lockfile so that travis builds properly Initial implementation of the default value in date pickers Small adjustments * Updated Travis config * Updated docs
gcanti · May 18, 2018 · 143b137 · 143b137
1 parent c8ffb9e
commit 143b137
Show file tree

Hide file tree

Showing 7 changed files with 2,437 additions and 48 deletions.
diff --git a/.travis.yml b/.travis.yml
@@ -1,6 +1,6 @@
 language: node_js
 node_js:
-  - "5.0.0"
+  - "5.7.0"
 before_script:
   - export DISPLAY=:99.0
   - sh -e /etc/init.d/xvfb start
diff --git a/README.md b/README.md
@@ -556,6 +556,7 @@ The bundled template will render an iOS `UIDatePicker` component, but collapsed
 | `animation` | The animation to collapse the date picker. Defaults to `Animated.timing`. |
 | `animationConfig` | The animation configuration object. Defaults to `{duration: 200}` for the default animation. |
 | `format` | A `(date) => String(date)` kind of function to provide a custom date format parsing to display the value. Optional, defaults to `(date) => String(date)`.
+| `defaultValueText` | An `string` to customize the default value of the `null` date value text. |
 
 For the collapsible customization, look at the `dateTouchable` and `dateValue` keys in the stylesheet file.
 
@@ -567,7 +568,8 @@ When using a `t.Date` type in Android, it can be configured through a `config` o
 |-----|-------|
 | ``background`` | Determines the type of background drawable that's going to be used to display feedback. Optional, defaults to ``TouchableNativeFeedback.SelectableBackground``. |
 | ``format`` | A ``(date) => String(date)`` kind of function to provide a custom date format parsing to display the value. Optional, defaults to ``(date) => String(date)``.
-| ``dialogMode`` | Determines the type of datepicker mode for Android (`default`, `spinner` or `calendar`).
+| ``dialogMode`` | Determines the type of datepicker mode for Android (`default`, `spinner` or `calendar`). |
+| `defaultValueText` | An `string` to customize the default value of the `null` date value text. |
 
 ### Enums
 

diff --git a/lib/components.js b/lib/components.js
@@ -265,7 +265,6 @@ class Textbox extends Component {
     locals.keyboardType = this.getKeyboardType();
     locals.underlineColorAndroid =
       this.props.options.underlineColorAndroid || "transparent";
-
     [
       "help",
       "autoCapitalize",
@@ -321,7 +320,6 @@ class Checkbox extends Component {
       this.props.ctx.auto !== "none"
         ? locals.label || this.getDefaultLabel()
         : null;
-
     ["help", "disabled", "onTintColor", "thumbTintColor", "tintColor"].forEach(
       name => (locals[name] = this.props.options[name])
     );
@@ -374,7 +372,6 @@ class Select extends Component {
   getLocals() {
     const locals = super.getLocals();
     locals.options = this.getOptions();
-
     ["help", "enabled", "mode", "prompt", "itemStyle"].forEach(
       name => (locals[name] = this.props.options[name])
     );
@@ -414,7 +411,7 @@ class DatePicker extends Component {
 }
 
 DatePicker.transformer = {
-  format: value => (Nil.is(value) ? new Date() : value),
+  format: value => (Nil.is(value) ? null : value),
   parse: value => value
 };
 

diff --git a/lib/templates/bootstrap/datepicker.android.js b/lib/templates/bootstrap/datepicker.android.js
@@ -46,26 +46,38 @@ function datepicker(locals) {
    * `locals.config.dateFormat`: Date only format
    * `locals.config.timeFormat`: Time only format
    */
-  var formattedValue = String(locals.value);
+  var formattedValue = locals.value ? String(locals.value) : "";
   var background = TouchableNativeFeedback.SelectableBackground(); // eslint-disable-line new-cap
   var dialogMode = "default";
-  var formattedDateValue = locals.value.toDateString();
-  var formattedTimeValue = locals.value.toTimeString();
+  var formattedDateValue = locals.value ? locals.value.toDateString() : "";
+  var formattedTimeValue = locals.value ? locals.value.toTimeString() : "";
   if (locals.config) {
-    if (locals.config.format) {
+    if (locals.config.format && formattedValue) {
       formattedValue = locals.config.format(locals.value);
+    } else if (!formattedValue) {
+      formattedValue = locals.config.defaultValueText
+        ? locals.config.defaultValueText
+        : "Tap here to select a date";
     }
     if (locals.config.background) {
       background = locals.config.background;
     }
     if (locals.config.dialogMode) {
       dialogMode = locals.config.dialogMode;
     }
-    if (locals.config.dateFormat) {
+    if (locals.config.dateFormat && formattedDateValue) {
       formattedDateValue = locals.config.dateFormat(locals.value);
+    } else if (!formattedDateValue) {
+      formattedDateValue = locals.config.defaultValueText
+        ? locals.config.defaultValueText
+        : "Tap here to select a date";
     }
-    if (locals.config.timeFormat) {
+    if (locals.config.timeFormat && formattedTimeValue) {
       formattedTimeValue = locals.config.timeFormat(locals.value);
+    } else if (!formattedTimeValue) {
+      formattedTimeValue = locals.config.defaultValueText
+        ? locals.config.defaultValueText
+        : "Tap here to select a time";
     }
   }
 
@@ -81,7 +93,7 @@ function datepicker(locals) {
         {locals.error}
       </Text>
     ) : null;
-  var value = locals.value ? (
+  var value = formattedValue ? (
     <Text style={dateValueStyle}>{formattedValue}</Text>
   ) : null;
 

diff --git a/lib/templates/bootstrap/datepicker.ios.js b/lib/templates/bootstrap/datepicker.ios.js
@@ -1,24 +1,59 @@
 import React from "react";
 import PropTypes from "prop-types";
 import {
-  Animated,
-  View,
-  TouchableOpacity,
   Text,
-  DatePickerIOS
+  View,
+  Animated,
+  DatePickerIOS,
+  TouchableOpacity
 } from "react-native";
 
 const UIPICKER_HEIGHT = 216;
 
 class CollapsibleDatePickerIOS extends React.Component {
   constructor(props) {
     super(props);
+    this._onDateChange = this.onDateChange.bind(this);
+    this._onPress = this.onPress.bind(this);
     this.state = {
       isCollapsed: true,
       height: new Animated.Value(0)
     };
   }
 
+  onDateChange(value) {
+    this.props.locals.onChange(value);
+  }
+
+  onPress() {
+    const locals = this.props.locals;
+    let animation = Animated.timing;
+    let animationConfig = {
+      duration: 200
+    };
+    if (locals.config) {
+      if (locals.config.animation) {
+        animation = locals.config.animation;
+      }
+      if (locals.config.animationConfig) {
+        animationConfig = locals.config.animationConfig;
+      }
+    }
+    animation(
+      this.state.height,
+      Object.assign(
+        {
+          toValue: this.state.isCollapsed ? UIPICKER_HEIGHT : 0
+        },
+        animationConfig
+      )
+    ).start();
+    this.setState({ isCollapsed: !this.state.isCollapsed });
+    if (typeof locals.onPress === "function") {
+      locals.onPress();
+    }
+  }
+
   render() {
     const locals = this.props.locals;
     const stylesheet = locals.stylesheet;
@@ -30,20 +65,14 @@ class CollapsibleDatePickerIOS extends React.Component {
       datepickerStyle = stylesheet.datepicker.error;
       dateValueStyle = stylesheet.dateValue.error;
     }
-    let formattedValue = String(locals.value);
-    let animation = Animated.timing;
-    let animationConfig = {
-      duration: 200
-    };
+    let formattedValue = locals.value ? String(locals.value) : "";
     if (locals.config) {
-      if (locals.config.format) {
+      if (locals.config.format && formattedValue) {
         formattedValue = locals.config.format(locals.value);
-      }
-      if (locals.config.animation) {
-        animation = locals.config.animation;
-      }
-      if (locals.config.animationConfig) {
-        animationConfig = locals.config.animationConfig;
+      } else if (!formattedValue) {
+        formattedValue = locals.config.defaultValueText
+          ? locals.config.defaultValueText
+          : "Tap here to select a date";
       }
     }
     const height = this.state.isCollapsed ? 0 : UIPICKER_HEIGHT;
@@ -52,21 +81,7 @@ class CollapsibleDatePickerIOS extends React.Component {
         <TouchableOpacity
           style={touchableStyle}
           disabled={locals.disabled}
-          onPress={() => {
-            animation(
-              this.state.height,
-              Object.assign(
-                {
-                  toValue: this.state.isCollapsed ? UIPICKER_HEIGHT : 0
-                },
-                animationConfig
-              )
-            ).start();
-            this.setState({ isCollapsed: !this.state.isCollapsed });
-            if (typeof locals.onPress === "function") {
-              locals.onPress();
-            }
-          }}
+          onPress={this._onPress}
         >
           <Text style={dateValueStyle}>{formattedValue}</Text>
         </TouchableOpacity>
@@ -77,11 +92,12 @@ class CollapsibleDatePickerIOS extends React.Component {
             ref="input"
             accessibilityLabel={locals.label}
             date={locals.value}
+            initialDate={new Date()}
             maximumDate={locals.maximumDate}
             minimumDate={locals.minimumDate}
             minuteInterval={locals.minuteInterval}
             mode={locals.mode}
-            onDateChange={value => locals.onChange(value)}
+            onDateChange={this._onDateChange}
             timeZoneOffsetInMinutes={locals.timeZoneOffsetInMinutes}
             style={[datepickerStyle, { height: height }]}
           />

diff --git a/package.json b/package.json
@@ -26,9 +26,9 @@
     "@types/prettier": "^1.7.0",
     "babel": "5.8.34",
     "babel-core": "5.8.34",
-    "eslint": "^4.9.0",
-    "eslint-config-prettier": "^2.6.0",
-    "eslint-plugin-prettier": "^2.3.1",
+    "eslint": "^4.19.1",
+    "eslint-config-prettier": "^2.9.0",
+    "eslint-plugin-prettier": "^2.6.0",
     "eslint-plugin-react": "2.5.2",
     "prettier": "^1.7.4",
     "prop-types": "^15.5.10",