Merge pull request #198 from data-driven-forms/date-picker-initialize

fix(pf3): fixed date picker initialization.

Author: rvsia

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 ? typeof props.value === 'string' ? new Date(props.value) : props.value : undefined,
+      selectedDay: this.createDate(),
       selectingMonth: false,
       selectingYear: false,
       isOpen: false,
@@ -45,67 +45,69 @@ export class DateTimePicker extends React.Component {
     });
   }
 
+  createDate = () => this.props.value ? typeof this.props.value === 'string' ? new Date(this.props.value) : this.props.value : undefined;
+
   handleOverlayToggle = isOpen => this.setState({ isOpen })
 
-  handleDayChange = day => this.setState(prevProps => ({
-    selectedDay: new Date(
+  handleDayChange = day => {
+    const prevDate = this.createDate();
+    const newDate = new Date(
       day.getFullYear(),
       day.getMonth(),
       day.getDate(),
-      prevProps.selectedDay && prevProps.selectedDay.getHours() || new Date().getHours(),
-      prevProps.selectedDay && prevProps.selectedDay.getMinutes() || new Date().getMinutes()
-    ),
-    isOpen: !this.props.closeOnDaySelect,
-  }), () => this.props.onChange(this.state.selectedDay));
-
-  handleYearChange = year => this.setState(({ selectedDay = new Date() }) => ({
-    selectedDay: selectValidDate(new Date(
+      prevDate && prevDate.getHours() || new Date().getHours(),
+      prevDate && prevDate.getMinutes() || new Date().getMinutes()
+    );
+    this.setState({
+      isOpen: this.props.closeOnDaySelect,
+    });
+    return this.props.onChange(newDate);
+  };
+
+  handleYearChange = year => {
+    const prevDate = this.createDate();
+    const newDate = selectValidDate(new Date(
       year,
-      selectedDay.getMonth(),
-      selectedDay.getDate(),
-      selectedDay.getHours(),
-      selectedDay.getMinutes()
-    ), this.props.disabledDays),
-  }), () => this.props.onChange(this.state.selectedDay))
-
-  handleMonthChange = month => this.setState(({ selectedDay = new Date() }) => ({
-    selectedDay: selectValidDate(new Date(
-      selectedDay.getFullYear(),
+      prevDate.getMonth(),
+      prevDate.getDate(),
+      prevDate.getHours(),
+      prevDate.getMinutes()
+    ), this.props.disabledDays);
+    return this.props.onChange(newDate);
+  }
+
+  handleMonthChange = month => {
+    const prevDate = this.createDate();
+    const newDate = selectValidDate(new Date(
+      prevDate.getFullYear(),
       month,
-      selectedDay.getDate(),
-      selectedDay.getHours(),
-      selectedDay.getMinutes()
-    ), this.props.disabledDays),
-  }), () => this.props.onChange(this.state.selectedDay));
+      prevDate.getDate(),
+      prevDate.getHours(),
+      prevDate.getMinutes()
+    ), this.props.disabledDays);
+    return this.props.onChange(newDate);
+  }
 
   toggleSelectingMonth = selectingMonth => this.setState({ selectingMonth })
 
   toggleSelectingYear = selectingYear => this.setState({ selectingYear })
 
-  handleChangeHours = hours => this.setState(({ selectedDay = new Date() }) => ({
-    selectedDay: new Date(
-      selectedDay.getFullYear(),
-      selectedDay.getMonth(),
-      selectedDay.getDate(),
-      hours,
-      selectedDay.getMinutes()
-    ),
-  }), () => this.props.onChange(this.state.selectedDay))
-
-  handleChangeMinutes = minutes => this.setState(({ selectedDay = new Date() }) => ({
-    selectedDay: new Date(
-      selectedDay.getFullYear(),
-      selectedDay.getMonth(),
-      selectedDay.getDate(),
-      selectedDay.getHours(),
-      minutes
-    ),
-  }), () => this.props.onChange(this.state.selectedDay))
-
-  clearValue = () => this.setState({ selectedDay: undefined })
+  handleChangeHours = hours => {
+    const prevDate = this.createDate() || new Date();
+    prevDate.setHours(hours);
+    return this.props.onChange(new Date(prevDate));
+  }
+
+  handleChangeMinutes = minutes => {
+    const prevDate = this.createDate() || new Date();
+    prevDate.setMinutes(minutes);
+    return this.props.onChange(new Date(prevDate));
+  }
+
+  clearValue = () => this.props.onChange(undefined)
 
   render() {
-    const { isOpen, selectedDay, selectingYear, selectingMonth } = this.state;
+    const { isOpen, selectingYear, selectingMonth } = this.state;
     const {
       placeholder,
       variant,
@@ -116,14 +118,15 @@ export class DateTimePicker extends React.Component {
       disabledDays,
       isClearable,
     } = this.props;
+    const value = this.createDate();
     const inputPlaceholder = getPlaceholder(variant, placeholder);
     const cleanDisabledDays = createDisabledDays(disabledDays);
     return (
       <div style={{ position: 'relative' }} ref={ this.wrapperRef } >
         <PickerInput
           handleOverlayToggle={ this.handleOverlayToggle }
           placeholder={ inputPlaceholder }
-          selectedDay={ selectedDay }
+          selectedDay={ value }
           variant={ variant }
           locale={ locale }
           isDisabled={ isDisabled }
@@ -140,7 +143,7 @@ export class DateTimePicker extends React.Component {
         >
           <PopoverRoot
             onDayClick={ this.handleDayChange }
-            selectedDay={ selectedDay }
+            selectedDay={ value }
             toggleSelectingMonth={ this.toggleSelectingMonth }
             toggleSelectingYear={ this.toggleSelectingYear }
             selectingYear={ selectingYear }
@@ -173,6 +176,7 @@ DateTimePicker.propTypes = {
   closeOnDaySelect: PropTypes.bool,
   onChange: PropTypes.func.isRequired,
   isClearable: PropTypes.bool,
+  pristine: PropTypes.bool,
 };
 
 DateTimePicker.defaultProps = {

packages/pf3-component-mapper/src/form-fields/form-fields.js

@@ -28,6 +28,7 @@ const selectComponent = ({
   noCheckboxLabel,
   initialValue,
   loadOptions,
+  meta,
   ...rest
 }) => ({
   [componentTypes.TEXT_FIELD]: () =>
@@ -66,7 +67,7 @@ const selectComponent = ({
       checked={ input.value }
       onChange={ ({ target: { checked }}) => input.onChange(checked) }
     />,
-  [componentTypes.DATE_PICKER]: () => <DateTimePicker onChange={ input.onChange } value={ input.value } isDisabled={ isDisabled } { ...rest } />,
+  [componentTypes.DATE_PICKER]: () => <DateTimePicker pristine={ meta.pristine } onChange={ input.onChange } value={ input.value } isDisabled={ isDisabled } { ...rest } />,
 })[componentType];
 
 const renderHelperText = (error, description) => (error // eslint-disable-line no-nested-ternary
@@ -92,7 +93,7 @@ const FinalFormField = ({
             { rest.isRequired ? <RequiredLabel label={ label } /> : label }
             { helperText && <FieldLevelHelp content={ helperText } /> }
           </ControlLabel> }
-      { selectComponent({ ...rest, invalid, label })() }
+      { selectComponent({ ...rest, invalid, label, meta })() }
       { renderHelperText(invalid && meta.error, description) }
     </FormGroup>
   );

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

@@ -19,4 +19,3 @@ describe('<DateTimePicker />', () => {
     expect(wrapper.state().selectedDay).toBeUndefined();
   });
 });
-