Wrapping react components

[enyachoke]

Am currently trying out react-serial-forms for a json-based form rendering component to replace an angular implementation (https://github.com/AMPATH/openmrs-angularFormentry.git) used in https://github.com/AMPATH/ng-amrs which has run into crippling performance issues components https://github.com/enyachoke/React-FormEntry. So far the rendering is super fast but I have run into a small issue extending the datetimepicker from https://jquense.github.io/react-widgets/docs/#/datetime-picker. It seems to work okay and the value in serialized object gets updated as expected but the required validation fails for some reason. Any ideas will really be appreciated am sure am missing something.All the other widgets work great. Keep up the good work.

import React from 'react';
import {InputBase} from 'react-serial-forms';
import 'react-widgets/lib/less/react-widgets.less'
import DateTimePicker from 'react-widgets/lib/DateTimePicker'
import Moment from 'moment'
import momentLocalizer from 'react-widgets/lib/localizers/moment'
momentLocalizer(Moment)

export default class DateField extends InputBase {
  constructor(props) {
    super(props);
  }
  onChange(event) {
      this.updateValue(new Date(event));
      if (typeof this.props.onChange === 'function') {
        this.props.onChange(new Date(event));
      }
  }
  render() {
    let errMessage = <span />;
    const attrs = this.attrs();

    if (attrs.className) {
      attrs.className += ` ${this.getClassName()}`;
    } else {
      attrs.className = this.getClassName();
    }

    if (this.state.error) {
      console.log(this.state.error);
      errMessage = (
        <span className='err-msg'>
          {this.state.error.message}
        </span>
      );}
    return (
      <div>
        <DateTimePicker {...attrs}/>
        {errMessage}
      </div>
    );
  }
}

[psaia]

Your implementation looks great! What validator are you trying to use? required?

[enyachoke]

Yeah am using the required validator I just can't understand why the field is invalid even though it has a value and the serialized object has a valid value too.

[psaia]

Fixed the issue - new Date() was passing true to lodash's isEmpty and isObject. I added a special check for Date objects using _.isDate in 742afbd5aec713cf04dd3ebeee21df607fe2e849. Let me know if that fixes it for you in 2.0.6. Thanks again for posting.