schemata.jsx

let OrgType = Enum.of(['Nonprofit', 'SocialEnterprise'])

// let OrgName = String.with(ShorterThan(40), LongerThan(1))

let Location = Dict({
    autocomplete: Geoid,
    fallback: Dict({
        countryGeoid: Geoid,
        
    })
})


let OrgNameType = Schemata.subType(String,...);



let schema = {     // fancy boy
    type: s.OrgType,
    name: s.OrgName,
    location: s.Location
}


// full auto
render() {
    return <Form schema={schema}/>
}


// custom rendering
render() {
    return <Form schema={schema}>
        <p>A paragraph of UI text!</p>
        <OrgType path="type"/>

        <p>Another paragraph of text!</p>
        <LocationWidget path="location"/>

        {this.state.exactMatch 
        ? <ExactMatch match={this.state.exactMatch}/>
        : <OrgName path="name" onExactMatch={...}/>
        }
    </Form>
}


class LocationWidget {

    render() {
        return this.mode == 'autocomplete'
        ? <AutocompleteLocation root={this.props.path} child='autocomplete' />
        : <FallbackLocation root={this.props.path} child='fallback'}/>;
    }
}


function schemata(type) {
    return decorator(cls) {
        Schemata.registerComponentForType(type, cls);
        Object.assign(cls.prototype, {
            getKeypath: () => this.props.path.split('.')
            getField: () => this.context.schema.getIn(this.getKeypath()),
            getRoot: () => this.context.schema,
            getParent: () => this.context.schema.getIn(this.getKeypath().slice(0, -1))
        })
        if (!cls.contextTypes) {
            cls.contextTypes = {};
        }
        Object.assign(cls.contextTypes, SCHEMATA_CONTEXT_TYPES)
    }
}


class Form extends React.Component {
    getChildContext() {
        return {
            schema: this.props.schema,
            form: this
        };
    }

    renderChild(path, dom) {
        return dom(this.shellFor(path), this.validationFor(path), this.helpFor(path));
    }
    
    traverse() {
        return this.props.schema.reduce( ... ??? wtfbbqrotflmao)
    }
    
    render() {
        return <form ....>
            {React.Children.count(this.props.children) === 0
             ? this.traverse()
             : this.props.children}
        </form>
    }
}

Form.childContextTypes = SCHEMATA_CONTEXT_TYPES = Object.freeze({
    schema: React.PropTypes.obj,
    form: React.PropTypes.obj
});


@schemata(OrgNameType)
class OrgName extends React.Component {
    onDeduperResults(results) {
        if (results.exactMatch) {
            // affect UI
        }
    }
    
    onInput(event) {
        this.getField().updateValue(event.target.value);
        this.context.schema.getIn(this.props.path).updateValue(event.target.value);
    }
    
    render() {
        return this.context.form.renderChild(this.props.path, 
            (Shell, Validation, Help) => {
                return <Shell ...>
                    <Help/>
                    <input onChange={this.onInput.bind(this)}/>
                    <Validation />
                </Shell>
            })
    }
}