christianalfoni / formsy-react

A form input builder and validator for React JS
MIT License
2.59k stars 436 forks source link

Combined input support #140

Closed endragor closed 9 years ago

endragor commented 9 years ago

I'm implementing DateTimeInput component. Logically and visually it's a combination of DateInput and TimeInput components. So, naturally, I was going to do something like this:

render() {
  return (
    <div>
      <DateInput name={this.props.name + '-date'} ref="date"/>
      <TimeInput name={this.props.name + '-time'} ref="time"/>
    </div>
  );
}

(plus there is logic to update value of the parent input whenever nested inputs change)

However, currently such use case is not supported, because traverseChildrenAndRegisterInputs in Mixin.js stops recursion whenever it meets a component with name property set. Perhaps fixing it to continue further would be enough, but I'm not sure if it might bring other side effects.

christianalfoni commented 9 years ago

Hi @endragor ,

There are two ways to fix this. Either you make pure versions of DateInput and TimeInput, which is not Formsy related. Then you create a small wrapper for DateInput and TimeInput, which uses the mixin. That leaves you open to create a DateTimeInput, using the pure DateInput and TimeInput and exposing its name: "dateAndTime" or whatever which holds both values, date and time... does that make sense?

In the next version of Formsy the traverseChildrenAndRegisterInputs will not be used. It will use context instead, which means that this should probably work.

Keep an eye out for the preview and we can try it out :-)

christianalfoni commented 9 years ago

Closing old issue