next: Pattern for reusable forms

[bsr203]

as commented here https://github.com/prometheusresearch/react-forms/commit/2b31b0dba261d75984245869cc378f43fa359e24

The example is not working, and seems like the schema is not structured properly. Though I tried with a nested object schema, the keypath is setting incorrect and the value has wrong structure. I couldn't see the default values set either. So, what is the correct schema, field structure for this example.

Uncaught Error: {"mother":{"type":"object","properties":{"firstName":{"type":"string"},"lastName":{"type":"string"}}},"father":{"type":"object","properties":{"firstName":{"type":"string"},"lastName":{"type":"string"}}}} mother_select @ Schema.js:90
select @ Schema.js:59
ValueLeaf @ Value.js:11
select @ Value.js:18
_createClass.get @ Component.js:68
getChildContext @ Component.js:40

I tried with following schema

let schema = {
  type: 'object',
  properties: {
    mother: IndividualFieldset.schema,
    father: IndividualFieldset.schema
  }
};

but resulted in

[bsr203]

this seems work.

since IndividualFieldset is extending Fieldset, having a Fieldset inside the render method causes to apply double selector. Let me know if this below is the intended behavior.

'use strict';

import React from 'react';
import {Field, Fieldset, Value} from 'react-forms';

class IndividualFieldset extends Fieldset {

  static schema = {
    type: 'object',
    properties: {
      firstName: {type: 'string'},
      lastName: {type: 'string'}
    }
  }

  static value = {
    firstName: 'John',
    lastName: 'Doe'
  }

  render() {
    let {label, ...props} = this.props;
    return (
      <div {...props}>
        <label>{label}</label>
        <Field
          select="firstName"
          label="First name"
          />
        <Field
          select="lastName"
          label="Last name"
          />
      </div>
    );
  }
}

let schema = {
  type: 'object',
  properties: {
    mother: IndividualFieldset.schema,
    father: IndividualFieldset.schema
  }
};

// let schema = {
//   mother: IndividualFieldset.schema,
//   father: IndividualFieldset.schema
// };

let value = {
  mother: IndividualFieldset.value,
  father: IndividualFieldset.value
};

export default class FamilyForm extends React.Component {

  constructor(props) {
    super(props);
    this.state = {formValue: Value(schema, value, this.onChange)};
  }

  onChange = (nextFormValue) => {
    console.log('form value', nextFormValue.value);
    this.setState({formValue: nextFormValue});
  }

  render() {
    return (
      <Fieldset formValue={this.state.formValue}>
        <IndividualFieldset
          select="mother"
          label="Mother"
          />
        <IndividualFieldset
          select="father"
          label="Father"
          />
      </Fieldset>
    );
  }
}