audibene-labs/react-jsonschema-form-layout

Simple Layout Field to offer a variety possibilities to react-jsonschema-forms

react-jsonschema-form-layout

Just a small custom field for the awesome react-jsonschema-form.

see DEMO

Key features:

• support bootstrap's grid
• add non-form elements in between
• ability to control display of elements based on form-state

Installation

yarn add react-jsonschema-form-layout

Usage:

Make sure you checkout the demo-src and the test-src

const schema = {
  title: 'Todo',
  type: 'object',
  required: ['title'],
  properties: {
    'password': {
      'type': 'string',
      'title': 'Password'
    },
    'lastName': {
      'type': 'string',
      'title': 'Last name'
    },
    'bio': {
      'type': 'string',
      'title': 'Bio'
    },
    'firstName': {
      'type': 'string',
      'title': 'First name'
    },
    'age': {
      'type': 'integer',
      'title': 'Age'
    }
  }
}

const fields = {
  layout: LayoutField
}

const uiSchema = {
  'ui:field': 'layout',
  'ui:layout': [
    {
      firstName: { md: 6 },
      lastName: { md: 6 }
    }, {
      bio: { md: 12 }
    }, {
      age: { md: 6 },
      password: { md: 6 }
    }
  ]
}

react-jsonschema-form-layout's Issues

Bug react-jsonschema-form-layout is outdated for the new react-jsonschema-form

ArrayField.js:614 Uncaught TypeError: Cannot read properties of undefined (reading 'object')
at node_modules/react-jsonschema-form/lib/components/fields/ArrayField.js (ArrayField.js:614:30)
at __require (chunk-AC2VUBZ6.js?v=53f7a059:11:50)
at node_modules/react-jsonschema-form/lib/components/fields/index.js (index.js:7:19)
at __require (chunk-AC2VUBZ6.js?v=53f7a059:11:50)
at node_modules/react-jsonschema-form/lib/utils.js (utils.js:101:11)
at __require (chunk-AC2VUBZ6.js?v=53f7a059:11:50)
at node_modules/react-jsonschema-form/lib/components/fields/ObjectField.js (ObjectField.js:15:14)
at __require (chunk-AC2VUBZ6.js?v=53f7a059:11:50)
at node_modules/react-jsonschema-form-layout/es/index.js (index.js:16:21)
at __require (chunk-AC2VUBZ6.js?v=53f7a059:11:50)

PropType undefined

doShow is undefined prop, using ;

React 15.6.1, "react-jsonschema-form": "^1.0.0",
react-jsonschema-form-layout": "^1.0.4",
"react-bootstrap": "^0.31.5",

Making a form column in one row

Hello can we make a react form in a one row

The form should display data in a grid format, showing the first name and last name in one row, followed by a description in the second row, and personal and work email in one row,

Issue regarding adding condition on embedded fields in an array

Hi,

I need help regarding the implementation of the certain requirement.

Suppose in the json schema I need to add a condition on showing a certain embedded field (username in user object) based upon a certain field (lastname)

Is there any provision for implementing the same?

Schema-

const schema = {
title: 'Tell m',
type: 'object',
required: ['firstName'],
properties: {
'image': {
type: 'string'
},
user: {
type: 'object',
'properties': {
'password': {
'type': 'string',
'title': 'Password'
},
'username': {
'type': 'string'
}
}
},
'lastName': {
'type': 'string',
'title': 'Last name'

}
}

ReferenceError: LayoutField is not defined

Below declaration gives me error "LayoutField" is not defined. Can you please help on this issue

const fields = {
layout: LayoutField
}

npm audit issues

I am getting these warning in nom audit for this package.

  Moderate        Remote Memory Exposure
  Package         request
  Patched in      >=2.68.0
  Dependency of   react-jsonschema-form-layout
  Path            react-jsonschema-form-layout > codecov.io > request
  More info       https://nodesecurity.io/advisories/309


  Moderate        Regular Expression Denial of Service
  Package         mime
  Patched in      >= 1.4.1 < 2.0.0 || >= 2.0.3
  Dependency of   react-jsonschema-form-layout
  Path            react-jsonschema-form-layout > codecov.io > request >form-data > mime
  More info       https://nodesecurity.io/advisories/535


  Moderate        Regular Expression Denial of Service
  Package         hawk
  Patched in      >=3.1.3 < 4.0.0 || >=4.1.1
  Dependency of   react-jsonschema-form-layout
  Path            react-jsonschema-form-layout > codecov.io > request > hawk
  More info       https://nodesecurity.io/advisories/77


  Moderate        Prototype pollution
  Package         hoek
  Patched in      > 4.2.0 < 5.0.0 || >= 5.0.3
  Dependency of   react-jsonschema-form-layout
  Path            react-jsonschema-form-layout > codecov.io > request > hawk > boom > hoek
  More info       https://nodesecurity.io/advisories/566


  Moderate        Prototype pollution
  Package         hoek
  Patched in      > 4.2.0 < 5.0.0 || >= 5.0.3
  Dependency of   react-jsonschema-form-layout
  Path            react-jsonschema-form-layout > codecov.io > request > hawk > cryptiles > boom > hoek
  More info       https://nodesecurity.io/advisories/566


  Moderate        Prototype pollution
  Package         hoek
  Patched in      > 4.2.0 < 5.0.0 || >= 5.0.3
  Dependency of   react-jsonschema-form-layout
  Path            react-jsonschema-form-layout > codecov.io > request > hawk > hoek
  More info       https://nodesecurity.io/advisories/566


  Moderate        Prototype pollution
  Package         hoek
  Patched in      > 4.2.0 < 5.0.0 || >= 5.0.3
  Dependency of   react-jsonschema-form-layout
  Path            react-jsonschema-form-layout > codecov.io > request > hawk > sntp > hoek
  More info       https://nodesecurity.io/advisories/566


  Moderate        Prototype pollution
  Package         hoek
  Patched in      > 4.2.0 < 5.0.0 || >= 5.0.3
  Dependency of   react-jsonschema-form-layout
  Path            react-jsonschema-form-layout > coveralls > request > hawk > boom > hoek
  More info       https://nodesecurity.io/advisories/566


  Moderate        Prototype pollution
  Package         hoek
  Patched in      > 4.2.0 < 5.0.0 || >= 5.0.3
  Dependency of   react-jsonschema-form-layout
  Path            react-jsonschema-form-layout > coveralls > request > hawk > cryptiles > boom > hoek
  More info       https://nodesecurity.io/advisories/566


  Moderate        Prototype pollution
  Package         hoek
  Patched in      > 4.2.0 < 5.0.0 || >= 5.0.3
  Dependency of   react-jsonschema-form-layout
  Path            react-jsonschema-form-layout > coveralls > request > hawk >hoek
  More info       https://nodesecurity.io/advisories/566


  Moderate        Memory Exposure
  Package         tunnel-agent
  Patched in      >=0.6.0
  Dependency of   react-jsonschema-form-layout
  Path            react-jsonschema-form-layout > codecov.io > request >  tunnel-agent
  More info       https://nodesecurity.io/advisories/598


  Moderate        Memory Exposure
  Package         tunnel-agent
  Patched in      >=0.6.0
  Dependency of   react-jsonschema-form-layout
  Path            react-jsonschema-form-layout > coveralls > request > tunnel-agent
  More info       https://nodesecurity.io/advisories/598

Maybe you need to update the dependencies.

Thanks,

support state-ful rendering

Proptypes are not defined when running on react v16.x

I believe Proptypes have been moved out of react and into its own package in v16, it had a warning since 15.6 so its a good time to include it?. This now crashing the application when your on the latest version of react, could be a simple fix to just add them?

I'm running react-create-app with the latest version of react and webpack.

using layouts for nested array items

How do I set layout properties for nest array inside an array item?