Pedido

[Jose Figueredo]

Hola, me gustaría usar Poncho en sistemas de ingreso de formularios complejos dentro de sitios single page apps (en react) y solo veo ejemplos para páginas del estilo blog o institucionales informativas. Aplicando poncho como viene, el estilo en general me queda muy grande visualmente y me acota la cantidad de información que puedo mostrar. Tienen pensado hacer estilos específicos para este tipo de sitios que les detallo ?

Muchas gracias.

[Fernando Neto]

Podrías utilizar el sistema de grid heredado de bootstrap y los estilos disponibles para los inputs de poncho para crear los componentes de tu formulario dimensionables y configurables via props.

Por ejemplo:

Input y select como stateless components: src/ui/form/components/formcomps.js

import React, { Component } from 'react';

function definirAlto(altura) {
    switch (altura) {
        case "bajo":
            return "input-sm";
        case "alto":
            return "input-lg"
        default:
            return "input-default"
    }
}

export const InputPoncho = (props) => {
    /* Componente funcional input que acepte propiedades sin definición*/
    let {tipo, altura, largo, id, nombre, ...otras} = props
    return (
        <div className={"col-md-" + props.largo}>
            <label className="control-label" htmlFor={props.id}>{props.nombre}</label>
            <input id={props.id} 
                   className={definirAlto(props.altura) + " form-control"} 
                   type={props.tipo} 
                   {...otras} />
        </div>
        )
    };

export const SelectPoncho = (props) => {
    /* Componente funcional select, si vas a tener muchos 
    podrías usar un HOC para cargarles las opciones */
    return(
        <div className={"col-md-" + props.largo + " form-group"}>
            <label htmlFor={props.id} className="control-label">{props.nombre}</label>
            <select className={definirAlto(props.altura) + " form-control"}>
                {/* Map para generar <option> en base a props */
                    props.opciones.map((opcion) => {
                    return(
                        <option value={opcion.id} key={opcion.id + opcion.valor}>{opcion.valor}</option>
                        )
                    })
                };
            </select>
        </div>
        )   
    };

Un container para renderizar los anteriores con props: src/ui/form/containers/formcontainer.js

import React, { Component } from 'react';
import {InputPoncho, SelectPoncho} from '../components/formcomps'

export default class FormPoncho extends Component {
    /* Clase formulario que renderizará los campos */
    constructor(props){
        super(props);
        this.state = {
            opciones: []
        }
        this.procesarForm = this.procesarForm.bind(this);
    }
    componentDidMount(){
        /* Acá lo más probable es que quieras cargar data 
        desde un server con fetch o axios, esto es a modo ejemplo 
        */
        let response = 
            {
                "data": [
                    {
                        "id": 1,
                        "valor": "rojo"
                    },
                    {
                        "id": 2,
                        "valor": "azul"
                    }
                ]
            };
        this.setState({opciones: response.data})
    };
    procesarForm(){
        /* Validaciones, POST al server, etc */
    }
    render() {
        return (
            <form className="form-vertical" onSubmit={this.procesarForm}>
                <div className="form-group row">
                    <InputPoncho largo="6"
                                 altura="bajo"
                                 id="dir"
                                 nombre="Input bajo" />
                    <SelectPoncho opciones={this.state.opciones}
                                  largo="3"
                                  altura="alto"
                                  id="color"
                                  nombre="Select alto" />
                    <InputPoncho largo="3"
                                 altura="bajo"
                                 id="edad"
                                 nombre="Número" 
                                 tipo="number"/>
                </div>
                <div className="form-group row">
                    <InputPoncho largo="3"
                                 altura="bajo"
                                 id="ro"
                                 nombre="Solo lectura" 
                                 readOnly />
                    <InputPoncho largo="3"
                                 altura="default"
                                 id="defa"
                                 nombre="Tamaño default" />
                    <InputPoncho largo="3"
                                 altura="default"
                                 id="disab"
                                 nombre="Deshabilitado" 
                                 tipo="number" 
                                 disabled/>
                    <InputPoncho largo="3"
                                 altura="bajo"
                                 id="max3"
                                 nombre="Tamaño máx. 3"  
                                 maxLength="3"/>
                </div>
                <div className="form-group row text-center">
                <input type="submit"
                       className="btn btn-success"
                       value="Enviar"/>
                </div>
            </form>
        );
    }
}

El index src/ui/forms/index.js para renderizar el container quedaría así:

import React, { Component } from 'react';
import FormPoncho from './containers/formcontainer'

export default class IndexForm extends Component {
    render() {
        return (
            <div>
                <div className="col-md-6 col-md-offset-3">
                    <h2 className="text-center">José form</h2>
                    <FormPoncho />
                </div>
            </div>
        );
    }
}

Espero que te sea útil!

[Jose Figueredo]

Muchas gracias !