diff --git a/package.json b/package.json index 1a6f53a4..c8654f1d 100644 --- a/package.json +++ b/package.json @@ -11,7 +11,7 @@ "@material-ui/core": "^4.11.0", "@material-ui/pickers": "^3.2.10", "date-fns": "^2.15.0", - "mson": "^2.5.0", + "mson": "^2.7.0", "prop-types": "^15.6.2", "react": "^16.13.1", "react-dom": "^16.13.1" @@ -50,7 +50,7 @@ "gh-pages": "^3.1.0", "jest-environment-jsdom-fourteen": "^1.0.1", "lint-staged": "^10.5.3", - "mson": "^2.5.0", + "mson": "^2.7.0", "prettier": "^2.2.1", "prop-types": "^15.6.2", "react": "^17.0.1", diff --git a/src/demo/app.js b/src/demo/app.js index 0e7e4909..32c2c5cf 100644 --- a/src/demo/app.js +++ b/src/demo/app.js @@ -7,10 +7,19 @@ import FieldEditorFormUI from '../field-editor-form'; import FormEditor from 'mson/lib/form/form-editor'; import FormEditorUI from '../form-editor'; import FormBuilder from 'mson/lib/form/form-builder'; + import { CustomComponent, - CustomComponentUI, + ReactCustomComponent, } from './components/custom-component'; +import { + CustomComponentJS, + ReactCustomComponentJS, +} from './components/custom-component-js'; +import { + CustomComponentNoProps, + ReactCustomComponentNoProps, +} from './components/custom-component-no-props'; // Set the site key when using the ReCAPTCHAField globals.set({ reCAPTCHASiteKey: '6LdIbGMUAAAAAJnipR9t-SnWzCbn0ZX2myXBIauh' }); @@ -24,7 +33,11 @@ compiler.registerComponent('FormBuilder', FormBuilder); // Register any custom components written in JS and not MSON compiler.registerComponent('CustomComponent', CustomComponent); -uiComponents.CustomComponent = CustomComponentUI; +uiComponents.CustomComponent = ReactCustomComponent; +compiler.registerComponent('CustomComponentJS', CustomComponentJS); +uiComponents.CustomComponentJS = ReactCustomComponentJS; +compiler.registerComponent('CustomComponentNoProps', CustomComponentNoProps); +uiComponents.CustomComponentNoProps = ReactCustomComponentNoProps; // Register all the components for (let name in components) { diff --git a/src/demo/components/app.js b/src/demo/components/app.js index 426e76c4..d7ab1d2a 100644 --- a/src/demo/components/app.js +++ b/src/demo/components/app.js @@ -74,13 +74,6 @@ const app = { component: 'app.EditContact', }, }, - { - path: '/contact-no-mson', - label: 'Contact No MSON', - content: { - component: 'app.ContactNoMSON', - }, - }, { path: '/grid', label: 'Grid', @@ -124,13 +117,42 @@ const app = { hidden: true, // Register route, but don't expose it in the menu }, { - path: '/custom-component', - label: 'Custom Component', - content: { - component: 'CustomComponent', - name: 'my-custom-component', - label: 'My Custom Component', - }, + path: '/custom-components', + label: 'Custom Components', + items: [ + { + path: '/custom-components/mson', + label: 'Custom Component', + content: { + component: 'CustomComponent', + name: 'my-custom-component', + label: 'My Custom Component', + }, + }, + { + path: '/custom-components/js', + label: 'Custom Component JS', + content: { + component: 'CustomComponentJS', + name: 'my-custom-component-js', + label: 'My Custom Component JS', + }, + }, + { + path: '/custom-components/no-props', + label: 'Custom Component No Props', + content: { + component: 'CustomComponentNoProps', + }, + }, + { + path: '/custom-components/contact-no-mson', + label: 'Contact No MSON', + content: { + component: 'app.ContactNoMSON', + }, + }, + ], }, ], }, diff --git a/src/demo/components/contact-no-mson.js b/src/demo/components/contact-no-mson.js index 4f4fbb54..3bbe8808 100644 --- a/src/demo/components/contact-no-mson.js +++ b/src/demo/components/contact-no-mson.js @@ -7,8 +7,8 @@ import globals from 'mson/lib/globals'; // const Form = compiler.getCompiledComponent('Form'); class ContactNoMSON extends Form { - _create(props) { - super._create(props); + create(props) { + super.create(props); this.set({ fields: [ diff --git a/src/demo/components/custom-component-js.js b/src/demo/components/custom-component-js.js new file mode 100644 index 00000000..8ac8d07b --- /dev/null +++ b/src/demo/components/custom-component-js.js @@ -0,0 +1,44 @@ +import React from 'react'; +import attach from '../../attach'; +import Typography from '@material-ui/core/Typography'; + +import UIComponent from 'mson/lib/ui-component'; +import Form from 'mson/lib/form'; +import TextField from 'mson/lib/fields/text-field'; + +class CustomComponentJS extends UIComponent { + // className is needed as JS minification strips the constructor name + className = 'CustomComponentJS'; + + create(props) { + super.create(props); + + this.set({ + schema: new Form({ + fields: [ + new TextField({ + name: 'name', + }), + new TextField({ + name: 'label', + }), + ], + }), + }); + } +} + +let ReactCustomComponentJS = (props) => { + const { name, label } = props; + return ( +