react-jam-ui/components/Form/index.js

React JAM UI components

import React from 'react';
import classNames from 'classnames';
import './styles.styl'

class Form extends React.Component {
    constructor() {
        super();

        this.state = {
        }
    }

    render() {
        let classes = classNames('form', this.props.className);
        if (this.props.tag == 'div') {
            return <div className={ classes }>{this.props.children}</div>
        } else {            
            return <form className={ classes }
                        name={this.props.name}
                        onSubmit={this.props.onSubmit}>{this.props.children}</form>
        }
        
    }
}

class Row extends React.Component {
    constructor() {
        super();

        this.state = {
        }
    }

    render() {
        let classes = classNames({
            'form__row': !this.props.type,
            [`form__row-${this.props.type}`]: this.props.type,
            'form__row-inline': this.props.inline
        }, this.props.className);

        return (
            <div className={ classes }>{this.props.children}</div>
        )
    }
}

class Label extends React.Component {
    constructor() {
        super();

        this.state = {
        }
    }

    render() {
        let classes = classNames('form__label', this.props.className);

        return (
            <div className={ classes }><label>{ this.props.children }</label></div>
        )
    }
}

class Control extends React.Component {
    constructor() {
        super();

        this.state = {
        }
    }

    render() {
        let classes = classNames('form__control', this.props.className);

        return (
            <div className={ classes }>{ this.props.children }</div>
        )
    }
}

Form.Row = Row;
Form.Label = Label;
Form.Control = Control;

export default Form