Skip to content

Instantly share code, notes, and snippets.

@markotom
Last active October 16, 2023 04:25
Show Gist options
  • Save markotom/5a3d2eb20da997430f72218f4a96dea7 to your computer and use it in GitHub Desktop.
Save markotom/5a3d2eb20da997430f72218f4a96dea7 to your computer and use it in GitHub Desktop.
Create column form layout using react-jsonschema-form and marble-seed
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
@markotom
Copy link
Author

markotom commented May 29, 2018

const uiSchema = {
  organization: {'ui:widget': SelectWidget, 'ui:column': 'is-6'},
  project: { 'ui:widget': SelectWidget, 'ui:column': 'is-6' },
  name: {'ui:widget': TextWidget, 'ui:column': 'is-6'},
  email: {'ui:widget': EmailWidget, 'ui:column': 'is-6'},
  phone: {'ui:widget': NumberWidget, 'ui:column': 'is-6'},
  dateBirth: {'ui:widget': DateWidget, 'ui:column': 'is-6'},
  location: {'ui:widget': SelectWidget},
  priority: {'ui:widget': SelectWidget, 'ui:column': 'is-4'},
  source: {'ui:widget': TextWidget, 'ui:column': 'is-4'},
  status: {'ui:widget': SelectWidget, 'ui:column': 'is-4'}
}

The schema above will shows:

screen shot 2018-05-28 at 10 45 11 pm

@justin-good
Copy link

I am trying to make this work on my own react-jsonschema-form playground but the rendering never changes even though the field template is used and the fields seemingly have the right class names. I was not able able to figure out what your "base-form" really entailed, versus the standard "Form" from react-jsonschema-form, and I fear there is some additional magic. If you could get this going on a jsfiddle or codepen it would really help.

@Dannergal
Copy link

Can you update you solution? on a jsfiddle or codepen with the last version of react-jsonschema-form, with MUI

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment