Create column form layout using react-jsonschema-form and marble-seed

columns-template.js

import React, { Component } from 'react'
import api from '~base/api'
import classNames from 'classnames'

import {
  BaseForm,
  TextWidget,
  EmailWidget,
  NumberWidget
} from '~base/components/base-form'

function columnsObjectFieldTemplate ({ properties, description }) {
  return (
    <div>
      <div className='columns is-multiline has-form-columns'>
        {properties.map(prop => {
          const uiSchema = prop.content.props.uiSchema
          const className = classNames('column', uiSchema['ui:column'] || 'is-12')
          return <div key={prop.content.key} className={className}>
            {prop.content}
          </div>
        })}
      </div>
      {description}
    </div>
  )
}

class ColumnForm extends Component {
  render () {
    const schema = {
      type: 'object',
      title: '',
      required: [
        'name'
      ],
      properties: {
        name: {type: 'string', title: 'Nombre'},
        phone: {type: 'string', title: 'Teléfono'},
        email: {type: 'string', title: 'Correo'}
      }
    }

    const uiSchema = {
      name: {'ui:widget': TextWidget, 'ui:column': 'is-6'},
      email: {'ui:widget': EmailWidget, 'ui:column': 'is-6'},
      phone: {'ui:widget': NumberWidget, 'ui:column': 'is-12'}
    }

    return (
      <BaseForm
        schema={schema}
        uiSchema={uiSchema}
        formData={{}}
        ObjectFieldTemplate={columnsObjectFieldTemplate}
      />
    )
  }
}

export default ColumnForm