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,
            '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() {
        const {
            className,
            ...rest
        } = this.props;
        const classes = classNames(
            'form__label',//deprecated
            'form-label',
            className
        );

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

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

        this.state = {
        }
    }

    render() {
        const {
            className,
            ...rest
        } = this.props;

        const classes = classNames(
            'form__control',//deprecated
            'form-control',
            className
        );

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

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

export default Form