Merge pull request #191 from data-driven-forms/fix-date-picker-initial-value

fix(pf3): stop date picker crash when value is string.

Author: rvsia

packages/pf3-component-mapper/demo/demo-schemas/sandbox.js

@@ -449,6 +449,7 @@ const output = {
                   title: 'Datepicker with past days',
                   component: components.DATE_PICKER,
                   variant: 'date-time',
+                  initialValue: '2019-11-04T12:31:00.000Z',
                 },
               ],
               component: components.SUB_FORM,

packages/pf3-component-mapper/src/form-fields/date-time-picker/date-time-picker.js

@@ -31,7 +31,7 @@ export class DateTimePicker extends React.Component {
     super(props);
     this.state = {
       positionLeft: 0,
-      selectedDay: props.value,
+      selectedDay: props.value ? typeof props.value === 'string' ? new Date(props.value) : props.value : undefined,
       selectingMonth: false,
       selectingYear: false,
       isOpen: false,
@@ -169,7 +169,7 @@ DateTimePicker.propTypes = {
   showTodayButton: PropTypes.bool,
   isDisabled: PropTypes.bool,
   disabledDays: PropTypes.array,
-  value: PropTypes.instanceOf(Date),
+  value: PropTypes.oneOfType([ PropTypes.instanceOf(Date), PropTypes.string ]),
   closeOnDaySelect: PropTypes.bool,
   onChange: PropTypes.func.isRequired,
   isClearable: PropTypes.bool,

packages/pf3-component-mapper/src/tests/form-fields/date-time-picker/date-time-picker.test.js

@@ -0,0 +1,22 @@
+import React from 'react';
+import { mount } from 'enzyme';
+
+import { DateTimePicker } from '../../../form-fields/date-time-picker/date-time-picker';
+
+describe('<DateTimePicker />', () => {
+  it('should use value of type Date', () => {
+    const wrapper = mount(<DateTimePicker value={ new Date() } />);
+    expect(wrapper.state().selectedDay).toBeInstanceOf(Date);
+  });
+
+  it('should convert string value into Date object', () => {
+    const wrapper = mount(<DateTimePicker value='2019-11-01T12:31:00.000Z' />);
+    expect(wrapper.state().selectedDay).toBeInstanceOf(Date);
+  });
+
+  it('should not set state for undefined value', () => {
+    const wrapper = mount(<DateTimePicker />);
+    expect(wrapper.state().selectedDay).toBeUndefined();
+  });
+});
+