Last active
October 16, 2023 04:25
-
-
Save markotom/5a3d2eb20da997430f72218f4a96dea7 to your computer and use it in GitHub Desktop.
Create column form layout using react-jsonschema-form and marble-seed
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
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 |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Can you update you solution? on a jsfiddle or codepen with the last version of react-jsonschema-form, with MUI