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 ( +
+ Name: {name} + Label: {label} +
+ ); +}; + +// Bind React props to MSON component props +ReactCustomComponentJS = attach(['name', 'label'])(ReactCustomComponentJS); + +export { CustomComponentJS, ReactCustomComponentJS }; diff --git a/src/demo/components/custom-component-no-props.js b/src/demo/components/custom-component-no-props.js new file mode 100644 index 00000000..e9ce68c9 --- /dev/null +++ b/src/demo/components/custom-component-no-props.js @@ -0,0 +1,19 @@ +import React from 'react'; +import Typography from '@material-ui/core/Typography'; +import compile from 'mson/lib/compiler/compile'; + +const CustomComponentNoProps = compile({ + component: 'UIComponent', + name: 'CustomComponentNoProps', +}); + +const ReactCustomComponentNoProps = (/* props */) => { + const text = 'This text is private to the React component'; + return ( +
+ Text: {text} +
+ ); +}; + +export { CustomComponentNoProps, ReactCustomComponentNoProps }; diff --git a/src/demo/components/custom-component.js b/src/demo/components/custom-component.js index b624c3fa..25ae60f2 100644 --- a/src/demo/components/custom-component.js +++ b/src/demo/components/custom-component.js @@ -1,55 +1,27 @@ 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 CustomComponent extends UIComponent { - _className = 'CustomComponent'; - - _create(props) { - super._create(props); - - this.set({ - schema: new Form({ - fields: [ - new TextField({ - name: 'name', - }), - new TextField({ - name: 'label', - }), - ], - }), - }); - } -} - -// Or, you can use MSON instead of JS -// -// import compiler from 'mson/lib/compiler'; -// -// const CustomComponent = compiler.compile({ -// component: 'UIComponent', -// name: 'CustomComponent', -// schema: { -// component: 'Form', -// fields: [ -// { -// component: 'TextField', -// name: 'name' -// }, -// { -// component: 'TextField', -// name: 'label' -// } -// ] -// } -// }); - -let CustomComponentUI = (props) => { +import compile from 'mson/lib/compiler/compile'; + +const CustomComponent = compile({ + component: 'UIComponent', + name: 'CustomComponent', + schema: { + component: 'Form', + fields: [ + { + component: 'TextField', + name: 'name', + }, + { + component: 'TextField', + name: 'label', + }, + ], + }, +}); + +let ReactCustomComponent = (props) => { const { name, label } = props; return (
@@ -60,6 +32,6 @@ let CustomComponentUI = (props) => { }; // Bind React props to MSON component props -CustomComponentUI = attach(['name', 'label'])(CustomComponentUI); +ReactCustomComponent = attach(['name', 'label'])(ReactCustomComponent); -export { CustomComponent, CustomComponentUI }; +export { CustomComponent, ReactCustomComponent }; diff --git a/yarn.lock b/yarn.lock index d024427f..19f5e052 100644 --- a/yarn.lock +++ b/yarn.lock @@ -10218,10 +10218,10 @@ ms@^2.0.0, ms@^2.1.1: resolved "https://registry.yarnpkg.com/ms/-/ms-2.1.3.tgz#574c8138ce1d2b5861f0b44579dbadd60c6615b2" integrity sha512-6FlzubTLZG3J2a/NVCAleEhjzq5oxgHyaCU9yYXvcLsvoVaHJq/s5xXI6/XXP6tz7R9xAOtHnSO/tXtF3WRTlA== -mson@^2.5.0: - version "2.5.0" - resolved "https://registry.yarnpkg.com/mson/-/mson-2.5.0.tgz#9db555b97db9904a11f6177667298272c0922653" - integrity sha512-9BZTT41FXxh4cPzGkb+HTfaO+nYbRuIkr7KC6X7NGakRZ0EnFF1PR+2LewmPEWCc1B7N2I14hJtXq+jv9qPgZg== +mson@^2.7.0: + version "2.7.0" + resolved "https://registry.yarnpkg.com/mson/-/mson-2.7.0.tgz#1753cc60970f8eff0f96b806ae9a1adda8f2071c" + integrity sha512-sOY+qls0Xe0Xf/Vd/wcCtG9oE2iNHto182zYofcZ3HQ9sAgGbkaVSGEDK92Tw0Ov8svucrA6p1q8Foz5weQl2g== dependencies: "@babel/runtime" "^7.12.5" country-telephone-data "^0.6.3"