techniquesoftware / react-json-schema Goto Github PK

I was trying to run your demo example, but it is not working post following your instructions. Could you please elaborate the configuration process bit more since I also feel I might be missing something. You can check the below image which is being displayed after making sure all the dependencies have been installed.

When I use this schema I get this error:
TypeError: Cannot read property 'hasOwnProperty' of undefined

Same happens when I use other HTML natives like 'div', but my custom components work fine as JS literals. Am I doing something wrong?

    const hey = new ReactJsonSchema();

   const schema = {
        'component': "form",
        'children': [ 
            {
                'component': Row,
                'children': [
                    {
                    'component': Input,
                    'inColumn': true,
                    'label': 'What\'s your name',
                    'name': 'fullname',
                    'value': 'testing'
                    },
                    {
                    'component': Input,
                    'inColumn': true,
                    'label': 'hey',
                    'name': 'hey',
                    'value': 'hello'
                    }
                ],
            }
        ]
    }

     {hey.parseSchema(schema)}

Hi,

I am using your nice plugin with a lot of satisfaction!

There is one issue when it comes to map an object literal using a pre-definite schema.

This is the required component structure:
const steps =
[
{name: 'Step 1', component: },
{name: 'Step 2', component: },
{name: 'Step 3', component: },
{name: 'Step 4', component: },
{name: 'Step 5', component: }
]

<div className='step-progress'>
    <StepZilla steps={steps}/>
</div>

I have tried to map it via following schema, but the Reference component is expecting an object literal with the following structure:

• {name: 'Step 1', component: },

The issue is in the children part as this in not an object like expected. I have tried just using:

• "component": "AxQlikVisualization" but it give sme
  Failed prop type: Invalid prop steps[0].component of type string supplied to StepZilla,

I am sure I miss out something...

{
"component": "Container",
"className": "Wizard",
"children": [
{
"component": "AxStepWizard",
"steps": [
{
"name": "Step 1",
**"children": [
{
"component": "AxQlikVisualization"

                    }
                ]**
            }
        ]
    }
]

}

Can you please assist me in this?

Thanks and regards,
Patric

React 0.14 should be supported, and if not included, rollback to 0.13. This will allow ReactDOM.render to work without giving a conflicting version error message. I don't know enough about React Native to know if there is any implementation details that apply under 0.14 as well, or if this library is even applicable.

What sort of level of effort are we talking about to enhance react-json-schema to support React Native usage? Would it even be possible to work in the native app component world as opposed to the DOM world?

@nlaffey @eiof
Does the current implementation support passing handler functions as function names to the schema?

I'm able to work with the below scenario:

{
    component: 'MyComponent,
    onClick: this.handleClickingMe.bind(this),
}

This one is possible if I'm creating using the schema just within the Component.

But it is not working with the below scenario, where I'd like to save and load the schema from the DB. In such cases, it is not possible to put the function reference directly, it would require function names to be saved instead.

{
    component: 'MyComponent,
    onClick: 'handleClickingMe',
}

I'd suggest something like below:

{
    component: 'MyComponent,
    handlers: [
            onClick: 'handleClickingMe',
    ]

}

Would be good if you could throw some insights on this. I'll find time to contribute for the same.

See #42 (comment) for context.

• Remove react-dom-factories from dependencies - users can set components from react-dom-factories using ReactJsonSchema.setComponentMap
• Write tests for setting components from DOM from react-dom-factories, and for elements from React Native
• Remove README bullet point for investigating React Native support

i want to pass a component to react json schema which is the imported from uniforms bootstrap4 this is the library for json forms i want to passs this component to react json schema like that
import AutoForm from 'uniforms-bootstrap4/AutoForm';
but when i am passing this to children it didn't render anything

`const schema = {
component: 'div',
children:[{
component:'AutoForm',
props: {
// validate:"onSubmit",
schema:loginSchema,
// onSubmit:(docs) =>{console.log('submit')},
// placeholder:true,
// label:true
},
}]

};

and here is my login schema

`const loginSchema = new SimpleSchema({
email: {
type: String,
max: 50,
regEx: SimpleSchema.RegEx.Email,
uniforms:{
placeholder:'Email',label:false,
type: 'email'
}
},
password:
{
type: String,
max: 100,
uniforms: {type: 'password',
placeholder:'Password',label:false

  }
  },

Remember: {
type: Boolean,
label:'Remember me',
defaultValue: false,
optional:true,
uniforms: {type: 'password',
placeholder:'Password',

}

},
});`
export default () => parseJsonSchema(schema);

other components are rendering but not this one

@nlaffey @eiof
The library no longer works with React 16. It is using DOM component from 'react', which is no longer available. It should be repaced with react-dom-factories.
Also the library is refering to the React.createClass, which was deprecated in React 15 and removed from React 16.

This has been updated in the PR #22. Would be great if someone could review the same.

Currently, the ReactJsonSchema distribution has to be used in a CommonJS capable environment. It may serve someone benefit for there to be a UMD distribution of ReactJsonSchema.

UMD = Universal Module Definition

These are modules which are capable of working everywhere, be it in the client, on the server or elsewhere.
(https://github.com/umdjs/umd)

I propose we add a the UMD distribution under a new directory, dist/umd. Weback is capable of outputting the additional distribution at build time.

We have bunch of JSON files which uses react-json-schema parser to parseSchema and render. We want to build Gulp task or any validator to validate the JSON files during build time.

Warning: Accessing PropTypes via the main React package is deprecated. Use the prop-types package from npm instead.

Warning: Uncontrolled(Dropdown): React.createClass is deprecated and will be removed in version 16. Use plain JavaScript classes instead. If you're not yet ready to migrate, create-react-class is available on npm as a drop-in replacement.

It'd be nice to have support for a, h1, sup, etc.

@elliottisonfire
JSON,
{
"component": "ActionForm",
"title": "Action Comment",
"columnUnit": 12,
"styles": "",
"children": [
{
"component": "Dropdown",
"label": "Reason",
"name": "Reason",
"dropdown_content": ["Unable to verify identity/Entity (L2)", "Unable to verify identity/Entity (L3)"],
"styles": ""
},
{
"component": "CheckboxField",
"styles": {
"margin": "10px"
},
"checkboxes": [
{
"label": "checkbox_item1_checked_default",
"key": 0
},
{
"label": "Possible Name Match",
"key": 1
},
{
"label": "Possible Business Name Match",
"key": 2
},
{
"label": "Physical Address Matches",
"key": 3
}
]
}
]
}

......
const componentMap = {
ActionForm,
Dropdown,
CheckboxField
}
const form = new ReactJsonSchema();
form.setComponentMap(componentMap);
const ActionFormComponent = () => form.parseSchema(actionFormSchema);

....

       <Route path="action/:actionId" component={ActionFormComponent} />

React-json-schema is intentionally minimal. It's purpose is to create React elements from JSON, and does not support configurations beyond this scope. However, there's an opportunity to define configuration beside component definitions (#24, #32, #33). Providing plugin support in react-json-schema will allow users to customize their react-json-schema implementation, and keep the core library small.

The thought is that plugins would be capable of modifying each subSchema before element creation.

We could migrate to a monorepo (using Lerna) so that all plugins are housed in the same repository, which is common for open source JavaScript (webpack, babel, etc.).

I'm personally exploring what this would look like. I'm open to suggestions.

I'd like to be able to support a private key that could hold implementation specific details that aren't necessarily relevant for the final rendered state of the schema. An example would be that it would be convenient for updating the schema if every element had some type of internal id that we could map to. This wouldn't be the same as the key prop because it's not a key for dynamic children, but a special identifier to get straight to the component in the schema. I don't want every component I render to have an ID prop, so having a place to store implementation specific details like that, where they won't be included in the final render would be nice.

I was thinking something like this

component : 'MyComponent',
'@meta' : {
  id: 'root',
}

which would render to this

<MyComponent />