Mithril Bootstrap Forms

preview-form.jsx

import m from "mithril";

module.exports = (options, ...elements) => {

    return (
        <form {...options.attrs} class="form needs-validation">

            {
                elements.map(e => {

                    let details = {
                        for: `for${e.attrs.name}`,
                        help: `help${e.attrs.name}`,
                        style: (e.element == 'hidden') ? 'display:none' : null
                    }

                    switch (e.element) {
                        case 'text':
                        case 'email':
                        case 'password':
                        case 'file':
                        case 'hidden':

                            return (
                                <div class="form-group" style={details.style}>
                                    <label for={details.for} class="form-control-label">{e.label} {e.labelExtra}</label>
                                    <input class="form-control" id={details.for} aria-describedby={e.help ? details.help : null} {...e.attrs} />
                                    {e.invalid ? <div class="invalid-feedback">{e.invalid}</div> : null}
                                    {e.help ? <small id={details.help} class="form-text text-muted">{e.help}</small> : null}
                                </div>
                            );

                            break;
                        case 'checkbox':

                            return (
                                <div class="form-group">
                                    <label for={details.for} class="custom-control custom-checkbox">
                                        <input type="checkbox" id={details.for} aria-describedby={e.help ? details.help : null} class="custom-control-input" {...e.attrs} />
                                        <span class="custom-control-indicator"></span>
                                        <span class="custom-control-description">{e.label}</span>
                                    </label>
                                    {e.help ? <small id={details.help} class="form-text text-muted">{e.help}</small> : null}
                                </div>
                            );

                            break;
                        case 'textarea':

                            return (
                                <div class="form-group">
                                    <label for={details.for} class="form-control-label">{e.label} {e.labelExtra}</label>
                                    <textarea class="form-control" id={details.for} aria-describedby={e.help ? details.help : null} {...e.attrs}>{e.value}</textarea>
                                    {e.invalid ? <div class="invalid-feedback">{e.invalid}</div> : null}
                                    {e.help ? <small id={details.help} class="form-text text-muted">{e.help}</small> : null}
                                </div>
                            );

                            break;
                        case 'select':

                            return (
                                <div class="form-group">
                                    <label for={details.for} class="form-control-label">{e.label} {e.labelExtra}</label>
                                    <select class="form-control" id={details.for} aria-describedby={e.help ? details.help : null} {...e.attrs}>
                                        {e.keys.map(obj => {
                                            obj.select = e.value.includes(obj.key) ? true : false;
                                            if (obj.select) {
                                                return <option value={obj.key} selected>{obj.value}</option>
                                            } else {
                                                return <option value={obj.key}>{obj.value}</option>
                                            }
                                        })}
                                    </select>
                                    {e.invalid ? <div class="invalid-feedback">{e.invalid}</div> : null}
                                    {e.help ? <small id={details.help} class="form-text text-muted">{e.help}</small> : null}
                                </div>
                            );

                            break;
                        case 'radio':

                            return (
                                <fieldset class="form-group">
                                    <legend aria-describedby={e.help ? details.help : null}>{e.label}</legend>
                                    {e.keys.map(obj => {
                                        obj.checked = e.value.includes(obj.key) ? true : false;
                                        return (
                                            <div class="form-check">
                                                <label class="form-check-label" for={details.for + obj.key}>
                                                    {obj.checked ?
                                                        <input type="radio" class="form-check-input" name={obj.value} id={details.for + obj.key} checked {...e.attrs} />
                                                        :
                                                        <input type="radio" class="form-check-input" name={obj.value} id={details.for + obj.key} {...e.attrs} />
                                                    }
                                                    {obj.value}
                                                </label>
                                            </div>
                                        )
                                    })}
                                    {e.help ? <small id={details.help} class="form-text text-muted">{e.help}</small> : null}
                                </fieldset>
                            );

                            break;
                    }
                })
            }

            <button type="submit" class="btn btn-info btn-block"> {options.submit}</button>
        </form>
    )
};