Issue434 - Clear date in DatePickerSingle and DatePickerRange

CHANGELOG.md

@@ -2,6 +2,10 @@
 All notable changes to this project will be documented in this file.
 This project adheres to [Semantic Versioning](http://semver.org/).
 
+## [Unreleased]
+### Fixed
+- Clear date in DatePickerSingle and DatePickerRange [#434](https://github.com/plotly/dash-core-components/issues/434)
+
 ## [0.42.1] - 2019-01-07
 ### Fixed
 - Fix `dcc.Store` type changes [#427](https://github.com/plotly/dash-core-components/pull/427)

dash_core_components/metadata.json

@@ -2789,6 +2789,9 @@
             },
             {
               "name": "string"
+            },
+            {
+              "name": "bool"
             }
           ]
         },

src/components/DatePickerRange.react.js

@@ -1,9 +1,9 @@
 import {DateRangePicker} from 'react-dates';
-import moment from 'moment';
 import PropTypes from 'prop-types';
 import R from 'ramda';
 import React, {Component} from 'react';
-import './css/[email protected]';
+
+import convertToMoment from '../utils/convertToMoment';
 
 /**
  * DatePickerRange is a tailor made component designed for selecting
@@ -30,22 +30,15 @@ export default class DatePickerRange extends Component {
          * - user modifiable attributes
          * - moment converted attributes
          */
-        const newState = {};
-        const momentProps = [
+
+        const newState = convertToMoment(newProps, [
             'start_date',
             'end_date',
             'initial_visible_month',
             'max_date_allowed',
             'min_date_allowed',
-        ];
-        momentProps.forEach(prop => {
-            if (R.type(newProps[prop]) !== 'Undefined') {
-                newState[prop] = moment(newProps[prop]);
-            }
-            if (prop === 'max_date_allowed' && R.has(prop, newState)) {
-                newState[prop].add(1, 'days');
-            }
-        });
+        ]);
+
         this.setState(newState);
     }
 

src/components/DatePickerSingle.react.js

@@ -4,6 +4,8 @@ import PropTypes from 'prop-types';
 import R from 'ramda';
 import React, {Component} from 'react';
 
+import convertToMoment from '../utils/convertToMoment';
+
 /**
  * DatePickerSingle is a tailor made component designed for selecting
  * a single day off of a calendar.
@@ -15,6 +17,7 @@ import React, {Component} from 'react';
  * This component is based off of Airbnb's react-dates react component
  * which can be found here: https://github.com/airbnb/react-dates
  */
+
 export default class DatePickerSingle extends Component {
     constructor() {
         super();
@@ -29,21 +32,14 @@ export default class DatePickerSingle extends Component {
          * - user modifiable attributes
          * - moment converted attributes
          */
-        const newState = {};
-        const momentProps = [
+
+        const newState = convertToMoment(newProps, [
             'date',
             'initial_visible_month',
             'max_date_allowed',
             'min_date_allowed',
-        ];
-        momentProps.forEach(prop => {
-            if (R.type(newProps[prop]) !== 'Undefined') {
-                newState[prop] = moment(newProps[prop]);
-            }
-            if (prop === 'max_date_allowed' && R.has(prop, newState)) {
-                newState[prop].add(1, 'days');
-            }
-        });
+        ]);
+
         this.setState(newState);
     }
 

src/index.js

@@ -22,6 +22,8 @@ import Tab from './components/Tab.react';
 import Store from './components/Store.react';
 import LogoutButton from './components/LogoutButton.react';
 
+import './components/css/[email protected]';
+
 export {
     Checklist,
     ConfirmDialog,

src/utils/convertToMoment.js

@@ -0,0 +1,26 @@
+import moment from 'moment';
+import R from 'ramda';
+
+export default (newProps, momentProps) => {
+    const dest = {};
+
+    momentProps.forEach(key => {
+        const value = newProps[key];
+
+        switch (R.type(value)) {
+            case 'Undefined':
+                return;
+            case 'Null':
+                dest[key] = null;
+                return;
+            default:
+                dest[key] = moment(value);
+        }
+
+        if (key === 'max_date_allowed' && R.has(key, dest)) {
+            dest[key].add(1, 'days');
+        }
+    });
+
+    return dest;
+};

test/unit/DatePickerRange.test.js

@@ -0,0 +1,46 @@
+import DatePickerRange from '../../src/components/DatePickerRange.react';
+import R from 'ramda';
+import React from 'react';
+import { mount, render } from 'enzyme';
+
+test('DatePickerRange renders', () => {
+    const dps = render(<DatePickerRange />);
+
+    expect(dps.html()).toBeDefined();
+});
+
+describe('Date can be set properly', () => {
+    const defaultProps = {
+
+    };
+
+    test('null date is not converted by moment', () => {
+        const props = R.merge(defaultProps, {
+            end_date: null,
+            start_date: null
+        });
+
+        const dps = mount(<DatePickerRange {...props} />);
+
+        expect(dps.props()).toBeDefined();
+        expect(dps.props().end_date).toEqual(props.end_date);
+        expect(dps.state().end_date).toEqual(null);
+        expect(dps.props().start_date).toEqual(props.start_date);
+        expect(dps.state().start_date).toEqual(null);
+    });
+
+    test('valid date is not converted by moment', () => {
+        const props = R.merge(defaultProps, {
+            end_date: "2019-01-01",
+            start_date: "2019-01-01"
+        });
+
+        const dps = mount(<DatePickerRange {...props} />);
+
+        expect(dps.props()).toBeDefined();
+        expect(dps.props().end_date).toEqual(props.end_date);
+        expect(dps.state().end_date).not.toEqual(null);
+        expect(dps.props().start_date).toEqual(props.start_date);
+        expect(dps.state().start_date).not.toEqual(null);
+    });
+});

test/unit/DatePickerSingle.test.js

@@ -0,0 +1,40 @@
+import DatePickerSingle from '../../src/components/DatePickerSingle.react';
+import R from 'ramda';
+import React from 'react';
+import { mount, render } from 'enzyme';
+
+test('DatePickerSingle renders', () => {
+    const dps = render(<DatePickerSingle />);
+
+    expect(dps.html()).toBeDefined();
+});
+
+describe('Date can be set properly', () => {
+    const defaultProps = {
+
+    };
+
+    test('null date is not converted by moment', () => {
+        const props = R.merge(defaultProps, {
+            date: null
+        });
+
+        const dps = mount(<DatePickerSingle {...props} />);
+
+        expect(dps.props()).toBeDefined();
+        expect(dps.props().date).toEqual(props.date);
+        expect(dps.state().date).toEqual(null);
+    });
+
+    test('valid date is not converted by moment', () => {
+        const props = R.merge(defaultProps, {
+            date: "2019-01-01"
+        });
+
+        const dps = mount(<DatePickerSingle {...props} />);
+
+        expect(dps.props()).toBeDefined();
+        expect(dps.props().date).toEqual(props.date);
+        expect(dps.state().date).not.toEqual(null);
+    });
+});