twisty / formsy-react-components

Bootstrap components for a formsy-react form.

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

Allow for global defaults

calvinfroedge opened this issue · comments

Current source:

layout: this.props.layout || 'horizontal',

Suggested source:

layout: this.props.layout || FormsyReactComponents.defaults.layout || 'horizontal'

Shall I send a PR?

It is possible to configure the layout by setting a layout prop on the parent form. You need to include the ParentContextMixin, and then child form components will inherit this layout property.

var Formsy = require('formsy-react');
var FRC = require('formsy-react-components');
var React = require('react');
var ReactDOMServer = require('react-dom/server');

var FRCForm = React.createClass({
    mixins: [FRC.ParentContextMixin],
    render: function() {
        return (
            <Formsy.Form className={this.getLayoutClassName()} {...this.props}>
                {this.props.children}
            </Formsy.Form>
        );
    }
});

console.log(
    ReactDOMServer.renderToStaticMarkup(
        <div>
            <FRCForm layout="vertical">
                <FRC.Input name="test" />
            </FRCForm>
            <FRCForm layout="elementOnly">
                <FRC.Input name="test" />
            </FRCForm>
        </div>
    )
);

Output:

<div>
    <form class="form-vertical">
        <div class="form-group">
            <label class="control-label" for="test-36467161"></label>
            <input class="form-control" name="test" type="text" id="test-36467161"/>
        </div>
    </form>
    <form class="form-elementOnly">
        <input class="form-control" name="test" type="text" id="test-36467161"/>
    </form>
</div>