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

React JAM UI components

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

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

        this.state = {
        }
    }

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

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

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

        this.state = {
        }
    }

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

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

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

        this.state = {
        }
    }

    render() {
        let arr = [];

        Object.keys(this.props.breakpoints).forEach((key) => {
            arr.push(`col-${key}-${this.props.breakpoints[key]}`)
        });

        let classes = classNames(arr, this.props.className);

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

Grid.Row = Row;
Grid.Col = Col;

export default Grid