@bpmn-io/form-js-playground 0.9.9 → 0.10.0-alpha.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/assets/form-js-playground.css +2 -2
- package/dist/form-playground.umd.js +20628 -21693
- package/dist/index.cjs +18 -30
- package/dist/index.cjs.map +1 -1
- package/dist/index.es.js +19 -31
- package/dist/index.es.js.map +1 -1
- package/dist/types/components/JSONEditor.d.ts +4 -0
- package/package.json +5 -4
package/dist/index.cjs
CHANGED
|
@@ -14,6 +14,7 @@ var jsxRuntime = require('preact/jsx-runtime');
|
|
|
14
14
|
var codemirror = require('codemirror');
|
|
15
15
|
var view = require('@codemirror/view');
|
|
16
16
|
var state = require('@codemirror/state');
|
|
17
|
+
var lint = require('@codemirror/lint');
|
|
17
18
|
var langJson = require('@codemirror/lang-json');
|
|
18
19
|
|
|
19
20
|
function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
|
|
@@ -31,7 +32,6 @@ function Modal(props) {
|
|
|
31
32
|
props.onClose();
|
|
32
33
|
}
|
|
33
34
|
}
|
|
34
|
-
|
|
35
35
|
document.addEventListener('keydown', handleKey);
|
|
36
36
|
return () => {
|
|
37
37
|
document.removeEventListener('keydown', handleKey);
|
|
@@ -110,7 +110,9 @@ function EmbedModal(props) {
|
|
|
110
110
|
children: snippet
|
|
111
111
|
})]
|
|
112
112
|
});
|
|
113
|
-
}
|
|
113
|
+
}
|
|
114
|
+
|
|
115
|
+
// helpers ///////////
|
|
114
116
|
|
|
115
117
|
function serializeValue(obj) {
|
|
116
118
|
return JSON.stringify(JSON.stringify(obj)).replace(/</g, '<').replace(/>/g, '>');
|
|
@@ -123,14 +125,13 @@ function JSONEditor(options = {}) {
|
|
|
123
125
|
} = options;
|
|
124
126
|
let language = new state.Compartment().of(langJson.json());
|
|
125
127
|
let tabSize = new state.Compartment().of(state.EditorState.tabSize.of(2));
|
|
126
|
-
|
|
128
|
+
const linterExtension = lint.linter(langJson.jsonParseLinter());
|
|
127
129
|
function createState(doc, extensions = []) {
|
|
128
130
|
return state.EditorState.create({
|
|
129
131
|
doc,
|
|
130
|
-
extensions: [codemirror.basicSetup, language, tabSize, ...extensions]
|
|
132
|
+
extensions: [codemirror.basicSetup, language, tabSize, linterExtension, lint.lintGutter(), ...extensions]
|
|
131
133
|
});
|
|
132
134
|
}
|
|
133
|
-
|
|
134
135
|
function createView(readonly) {
|
|
135
136
|
const updateListener = view.EditorView.updateListener.of(update => {
|
|
136
137
|
if (update.docChanged) {
|
|
@@ -143,36 +144,28 @@ function JSONEditor(options = {}) {
|
|
|
143
144
|
const view$1 = new view.EditorView({
|
|
144
145
|
state: createState('', [updateListener, editable])
|
|
145
146
|
});
|
|
146
|
-
|
|
147
147
|
view$1.setValue = function (value) {
|
|
148
148
|
this.setState(createState(value, [updateListener, editable]));
|
|
149
149
|
};
|
|
150
|
-
|
|
151
150
|
return view$1;
|
|
152
151
|
}
|
|
153
|
-
|
|
154
152
|
const view$1 = createView(readonly);
|
|
155
|
-
|
|
156
153
|
this.setValue = function (value) {
|
|
157
154
|
view$1.setValue(value);
|
|
158
155
|
};
|
|
159
|
-
|
|
160
156
|
this.getValue = function () {
|
|
161
157
|
return view$1.state.doc.toString();
|
|
162
158
|
};
|
|
163
|
-
|
|
164
159
|
this.on = emitter.on;
|
|
165
160
|
this.off = emitter.off;
|
|
166
|
-
|
|
161
|
+
this.emit = emitter.emit;
|
|
167
162
|
this.attachTo = function (container) {
|
|
168
163
|
container.appendChild(view$1.dom);
|
|
169
164
|
};
|
|
170
|
-
|
|
171
165
|
this.destroy = function () {
|
|
172
166
|
if (view$1.dom.parentNode) {
|
|
173
167
|
view$1.dom.parentNode.removeChild(view$1.dom);
|
|
174
168
|
}
|
|
175
|
-
|
|
176
169
|
view$1.destroy();
|
|
177
170
|
};
|
|
178
171
|
}
|
|
@@ -204,7 +197,6 @@ function Section(props) {
|
|
|
204
197
|
})]
|
|
205
198
|
});
|
|
206
199
|
}
|
|
207
|
-
|
|
208
200
|
Section.HeaderItem = function (props) {
|
|
209
201
|
return props.children;
|
|
210
202
|
};
|
|
@@ -239,8 +231,9 @@ function PlaygroundRoot(props) {
|
|
|
239
231
|
const [initialSchema, setInitialSchema] = hooks.useState(props.schema);
|
|
240
232
|
const [data, setData] = hooks.useState(props.data || {});
|
|
241
233
|
const [schema, setSchema] = hooks.useState(props.schema);
|
|
242
|
-
const [resultData, setResultData] = hooks.useState({});
|
|
234
|
+
const [resultData, setResultData] = hooks.useState({});
|
|
243
235
|
|
|
236
|
+
// pipe to playground API
|
|
244
237
|
hooks.useEffect(() => {
|
|
245
238
|
props.onInit({
|
|
246
239
|
attachDataContainer: node => dataEditorRef.current.attachTo(node),
|
|
@@ -298,7 +291,9 @@ function PlaygroundRoot(props) {
|
|
|
298
291
|
dataEditor.on('changed', event => {
|
|
299
292
|
try {
|
|
300
293
|
setData(JSON.parse(event.value));
|
|
301
|
-
} catch (
|
|
294
|
+
} catch (error) {
|
|
295
|
+
// notify interested about input data error
|
|
296
|
+
emit('formPlayground.inputDataError', error);
|
|
302
297
|
}
|
|
303
298
|
});
|
|
304
299
|
const formContainer = formContainerRef.current;
|
|
@@ -402,7 +397,9 @@ function PlaygroundRoot(props) {
|
|
|
402
397
|
ref: propertiesPanelContainerRef
|
|
403
398
|
})]
|
|
404
399
|
});
|
|
405
|
-
}
|
|
400
|
+
}
|
|
401
|
+
|
|
402
|
+
// helpers ///////////////
|
|
406
403
|
|
|
407
404
|
function toJSON(obj) {
|
|
408
405
|
return JSON.stringify(obj, null, ' ');
|
|
@@ -423,37 +420,32 @@ function Playground(options) {
|
|
|
423
420
|
let ref;
|
|
424
421
|
const container = document.createElement('div');
|
|
425
422
|
container.classList.add('fjs-pgl-parent');
|
|
426
|
-
|
|
427
423
|
if (parent) {
|
|
428
424
|
parent.appendChild(container);
|
|
429
425
|
}
|
|
430
|
-
|
|
431
426
|
const handleDrop = fileDrop__default['default']('Drop a form file', function (files) {
|
|
432
427
|
const file = files[0];
|
|
433
|
-
|
|
434
428
|
if (file) {
|
|
435
429
|
try {
|
|
436
430
|
ref.setSchema(JSON.parse(file.contents));
|
|
437
|
-
} catch (err) {
|
|
431
|
+
} catch (err) {
|
|
432
|
+
|
|
433
|
+
// TODO(nikku): indicate JSON parse error
|
|
438
434
|
}
|
|
439
435
|
}
|
|
440
436
|
});
|
|
441
|
-
|
|
442
437
|
const withRef = function (fn) {
|
|
443
438
|
return function (...args) {
|
|
444
439
|
if (!ref) {
|
|
445
440
|
throw new Error('Playground is not initialized.');
|
|
446
441
|
}
|
|
447
|
-
|
|
448
442
|
return fn(...args);
|
|
449
443
|
};
|
|
450
444
|
};
|
|
451
|
-
|
|
452
445
|
const onInit = function (_ref) {
|
|
453
446
|
ref = _ref;
|
|
454
447
|
emitter.emit('formPlayground.init');
|
|
455
448
|
};
|
|
456
|
-
|
|
457
449
|
container.addEventListener('dragover', handleDrop);
|
|
458
450
|
preact.render(jsxRuntime.jsx(PlaygroundRoot, {
|
|
459
451
|
data: data,
|
|
@@ -472,11 +464,9 @@ function Playground(options) {
|
|
|
472
464
|
this.on('destroy', function () {
|
|
473
465
|
parent.removeChild(container);
|
|
474
466
|
});
|
|
475
|
-
|
|
476
467
|
this.getState = function () {
|
|
477
468
|
return state;
|
|
478
469
|
};
|
|
479
|
-
|
|
480
470
|
this.getSchema = withRef(() => ref.getSchema());
|
|
481
471
|
this.setSchema = withRef(schema => ref.setSchema(schema));
|
|
482
472
|
this.saveSchema = withRef(() => ref.saveSchema());
|
|
@@ -485,11 +475,9 @@ function Playground(options) {
|
|
|
485
475
|
this.getEditor = withRef(() => ref.getEditor());
|
|
486
476
|
this.getForm = withRef((name, strict) => ref.getForm(name, strict));
|
|
487
477
|
this.getResultView = withRef(() => ref.getResultView());
|
|
488
|
-
|
|
489
478
|
this.destroy = function () {
|
|
490
479
|
this.emit('destroy');
|
|
491
480
|
};
|
|
492
|
-
|
|
493
481
|
this.attachEditorContainer = withRef(node => ref.attachEditorContainer(node));
|
|
494
482
|
this.attachPreviewContainer = withRef(node => ref.attachFormContainer(node));
|
|
495
483
|
this.attachDataContainer = withRef(node => ref.attachDataContainer(node));
|
package/dist/index.cjs.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.cjs","sources":["../src/components/Modal.js","../src/components/EmbedModal.js","../src/components/JSONEditor.js","../src/components/Section.js","../src/components/PlaygroundRoot.js","../src/Playground.js"],"sourcesContent":["import { useEffect } from 'preact/hooks';\n\nexport function Modal(props) {\n\n useEffect(() => {\n function handleKey(event) {\n\n if (event.key === 'Escape') {\n event.stopPropagation();\n\n props.onClose();\n }\n }\n\n document.addEventListener('keydown', handleKey);\n\n return () => {\n document.removeEventListener('keydown', handleKey);\n };\n });\n\n return (\n <div class=\"fjs-pgl-modal\">\n <div class=\"fjs-pgl-modal-backdrop\" onClick={ props.onClose }></div>\n <div class=\"fjs-pgl-modal-content\">\n <h1 class=\"fjs-pgl-modal-header\">{ props.name }</h1>\n <div class=\"fjs-pgl-modal-body\">\n { props.children }\n </div>\n <div class=\"fjs-pgl-modal-footer\">\n <button class=\"fjs-pgl-button fjs-pgl-button-default\" onClick={ props.onClose }>Close</button>\n </div>\n </div>\n </div>\n );\n}\n","import { useEffect, useRef } from 'preact/hooks';\n\nimport { Modal } from './Modal';\n\n\nexport function EmbedModal(props) {\n\n const schema = serializeValue(props.schema);\n const data = serializeValue(props.data || {});\n\n const fieldRef = useRef();\n\n const snippet = `<!-- styles needed for rendering -->\n<link rel=\"stylesheet\" href=\"https://unpkg.com/@bpmn-io/form-js@0.2.4/dist/assets/form-js.css\">\n\n<!-- container to render the form into -->\n<div class=\"fjs-pgl-form-container\"></div>\n\n<!-- scripts needed for embedding -->\n<script src=\"https://unpkg.com/@bpmn-io/form-js@0.2.4/dist/form-viewer.umd.js\"></script>\n\n<!-- actual script to instantiate the form and load form schema + data -->\n<script>\n const data = JSON.parse(${data});\n const schema = JSON.parse(${schema});\n\n const form = new FormViewer.Form({\n container: document.querySelector(\".fjs-pgl-form-container\")\n });\n\n form.on(\"submit\", (event) => {\n console.log(event.data, event.errors);\n });\n\n form.importSchema(schema, data).catch(err => {\n console.error(\"Failed to render form\", err);\n });\n</script>\n `.trim();\n\n useEffect(() => {\n fieldRef.current.select();\n });\n\n return (\n <Modal name=\"Embed form\" onClose={ props.onClose }>\n <p>Use the following HTML snippet to embed your form with <a href=\"https://github.com/bpmn-io/form-js\">form-js</a>:</p>\n\n <textarea spellCheck=\"false\" ref={ fieldRef }>{snippet}</textarea>\n </Modal>\n );\n}\n\n\n// helpers ///////////\n\nfunction serializeValue(obj) {\n return JSON.stringify(JSON.stringify(obj)).replace(/</g, '<').replace(/>/g, '>');\n}","import mitt from 'mitt';\n\nimport { basicSetup } from 'codemirror';\nimport { EditorView } from '@codemirror/view';\nimport { EditorState, Compartment } from '@codemirror/state';\nimport { json } from '@codemirror/lang-json';\n\n\nexport function JSONEditor(options = {}) {\n\n const emitter = mitt();\n\n const {\n readonly = false\n } = options;\n\n let language = new Compartment().of(json());\n let tabSize = new Compartment().of(EditorState.tabSize.of(2));\n\n function createState(doc, extensions = []) {\n return EditorState.create({\n doc,\n extensions: [\n basicSetup,\n language,\n tabSize,\n ...extensions\n ]\n });\n }\n\n function createView(readonly) {\n\n const updateListener = EditorView.updateListener.of(update => {\n if (update.docChanged) {\n emitter.emit('changed', {\n value: update.view.state.doc.toString()\n });\n }\n });\n\n const editable = EditorView.editable.of(!readonly);\n\n const view = new EditorView({\n state: createState('', [ updateListener, editable ])\n });\n\n view.setValue = function(value) {\n this.setState(createState(value, [ updateListener, editable ]));\n };\n\n return view;\n }\n\n const view = createView(readonly);\n\n this.setValue = function(value) {\n view.setValue(value);\n };\n\n this.getValue = function() {\n return view.state.doc.toString();\n };\n\n this.on = emitter.on;\n this.off = emitter.off;\n\n this.attachTo = function(container) {\n container.appendChild(view.dom);\n };\n\n this.destroy = function() {\n if (view.dom.parentNode) {\n view.dom.parentNode.removeChild(view.dom);\n }\n\n view.destroy();\n };\n}\n","export function Section(props) {\n\n const elements =\n Array.isArray(props.children)\n ? props.children :\n [ props.children ];\n\n const {\n headerItems,\n children\n } = elements.reduce((_, child) => {\n const bucket =\n child.type === Section.HeaderItem\n ? _.headerItems\n : _.children;\n\n bucket.push(child);\n\n return _;\n }, { headerItems: [], children: [] });\n\n return (\n <div class=\"fjs-pgl-section\">\n <h1 class=\"header\">{ props.name } { headerItems.length ? <span class=\"header-items\">{ headerItems }</span> : null }</h1>\n <div class=\"body\">\n { children }\n </div>\n </div>\n );\n}\n\nSection.HeaderItem = function(props) {\n return props.children;\n};","import { useRef, useEffect, useState, useCallback } from 'preact/hooks';\n\nimport download from 'downloadjs';\n\nimport classNames from 'classnames';\n\nimport {\n Form\n} from '@bpmn-io/form-js-viewer';\n\nimport {\n FormEditor\n} from '@bpmn-io/form-js-editor';\n\nimport { EmbedModal } from './EmbedModal';\nimport { JSONEditor } from './JSONEditor';\nimport { Section } from './Section';\n\n\nimport './FileDrop.css';\nimport './PlaygroundRoot.css';\n\n\nexport function PlaygroundRoot(props) {\n\n const {\n actions: actionsConfig = {},\n editor: editorConfig = {},\n emit,\n exporter: exporterConfig = {}\n } = props;\n\n const {\n display: displayActions = true\n } = actionsConfig;\n\n const {\n inlinePropertiesPanel = true\n } = editorConfig;\n\n const paletteContainerRef = useRef();\n const editorContainerRef = useRef();\n const formContainerRef = useRef();\n const dataContainerRef = useRef();\n const resultContainerRef = useRef();\n const propertiesPanelContainerRef = useRef();\n\n const paletteRef = useRef();\n const formEditorRef = useRef();\n const formRef = useRef();\n const dataEditorRef = useRef();\n const resultViewRef = useRef();\n const propertiesPanelRef = useRef();\n\n const [ showEmbed, setShowEmbed ] = useState(false);\n\n const [ initialData ] = useState(props.data || {});\n const [ initialSchema, setInitialSchema ] = useState(props.schema);\n\n const [ data, setData ] = useState(props.data || {});\n const [ schema, setSchema ] = useState(props.schema);\n\n const [ resultData, setResultData ] = useState({});\n\n // pipe to playground API\n useEffect(() => {\n props.onInit({\n attachDataContainer: (node) => dataEditorRef.current.attachTo(node),\n attachEditorContainer: (node) => formEditorRef.current.attachTo(node),\n attachFormContainer: (node) => formRef.current.attachTo(node),\n attachPaletteContainer: (node) => paletteRef.current.attachTo(node),\n attachPropertiesPanelContainer: (node) => propertiesPanelRef.current.attachTo(node),\n attachResultContainer: (node) => resultViewRef.current.attachTo(node),\n get: (name, strict) => formEditorRef.current.get(name, strict),\n getDataEditor: () => dataEditorRef.current,\n getEditor: () => formEditorRef.current,\n getForm: () => formRef.current,\n getResultView: () => resultViewRef.current,\n getSchema: () => formEditorRef.current.getSchema(),\n setSchema: setInitialSchema,\n saveSchema: () => formEditorRef.current.saveSchema()\n });\n });\n\n useEffect(() => {\n setInitialSchema(props.schema || {});\n }, [ props.schema ]);\n\n useEffect(() => {\n const dataEditor = dataEditorRef.current = new JSONEditor({\n value: toJSON(data)\n });\n\n const resultView = resultViewRef.current = new JSONEditor({\n readonly: true,\n value: toJSON(resultData)\n });\n\n const form = formRef.current = new Form();\n const formEditor = formEditorRef.current = new FormEditor({\n renderer: {\n compact: true\n },\n palette: {\n parent: paletteContainerRef.current\n },\n propertiesPanel: {\n parent: !inlinePropertiesPanel && propertiesPanelContainerRef.current\n },\n exporter: exporterConfig\n });\n\n paletteRef.current = formEditor.get('palette');\n propertiesPanelRef.current = formEditor.get('propertiesPanel');\n\n formEditor.on('changed', () => {\n setSchema(formEditor.getSchema());\n });\n\n formEditor.on('formEditor.rendered', () => {\n\n // notifiy interested parties after render\n emit('formPlayground.rendered');\n });\n\n form.on('changed', () => {\n setResultData(form._getSubmitData());\n });\n\n dataEditor.on('changed', event => {\n\n try {\n setData(JSON.parse(event.value));\n } catch (err) {\n\n // TODO(nikku): indicate JSON parse error\n }\n });\n\n const formContainer = formContainerRef.current;\n const editorContainer = editorContainerRef.current;\n const dataContainer = dataContainerRef.current;\n const resultContainer = resultContainerRef.current;\n\n dataEditor.attachTo(dataContainer);\n resultView.attachTo(resultContainer);\n form.attachTo(formContainer);\n formEditor.attachTo(editorContainer);\n\n return () => {\n dataEditor.destroy();\n resultView.destroy();\n form.destroy();\n formEditor.destroy();\n };\n }, []);\n\n useEffect(() => {\n dataEditorRef.current.setValue(toJSON(initialData));\n }, [ initialData ]);\n\n useEffect(() => {\n initialSchema && formEditorRef.current.importSchema(initialSchema);\n }, [ initialSchema ]);\n\n useEffect(() => {\n schema && formRef.current.importSchema(schema, data);\n }, [ schema, data ]);\n\n useEffect(() => {\n resultViewRef.current.setValue(toJSON(resultData));\n }, [ resultData ]);\n\n useEffect(() => {\n props.onStateChanged({\n schema,\n data\n });\n }, [ schema, data ]);\n\n const handleDownload = useCallback(() => {\n\n download(JSON.stringify(schema, null, ' '), 'form.json', 'text/json');\n }, [ schema ]);\n\n const hideEmbedModal = useCallback(() => {\n setShowEmbed(false);\n }, []);\n\n const showEmbedModal = useCallback(() => {\n setShowEmbed(true);\n }, []);\n\n return (\n <div class={ classNames(\n 'fjs-container',\n 'fjs-pgl-root',\n { 'fjs-pgl-inline-editor-panel': inlinePropertiesPanel }) }>\n <div class=\"fjs-pgl-modals\">\n { showEmbed ? <EmbedModal schema={ schema } data={ data } onClose={ hideEmbedModal } /> : null }\n </div>\n <div class=\"fjs-pgl-palette-container\" ref={ paletteContainerRef } />\n <div class=\"fjs-pgl-main\">\n\n <Section name=\"Form Definition\">\n\n {\n displayActions && <Section.HeaderItem>\n <button\n class=\"fjs-pgl-button\"\n title=\"Download form definition\"\n onClick={ handleDownload }\n >Download</button>\n </Section.HeaderItem>\n }\n\n {\n displayActions && <Section.HeaderItem>\n <button\n class=\"fjs-pgl-button\"\n onClick={ showEmbedModal }\n >Embed</button>\n </Section.HeaderItem>\n }\n\n <div ref={ editorContainerRef } class=\"fjs-pgl-form-container\"></div>\n </Section>\n <Section name=\"Form Preview\">\n <div ref={ formContainerRef } class=\"fjs-pgl-form-container\"></div>\n </Section>\n <Section name=\"Form Data (Input)\">\n <div ref={ dataContainerRef } class=\"fjs-pgl-text-container\"></div>\n </Section>\n <Section name=\"Form Data (Submit)\">\n <div ref={ resultContainerRef } class=\"fjs-pgl-text-container\"></div>\n </Section>\n </div>\n <div class=\"fjs-pgl-properties-container\" ref={ propertiesPanelContainerRef } />\n </div>\n );\n}\n\n\n// helpers ///////////////\n\nfunction toJSON(obj) {\n return JSON.stringify(obj, null, ' ');\n}","import { render } from 'preact';\n\nimport fileDrop from 'file-drops';\n\nimport mitt from 'mitt';\n\nimport { PlaygroundRoot } from './components/PlaygroundRoot';\n\n/**\n * @typedef { {\n * actions?: { display: Boolean }\n * container?: Element\n * data: any\n * editor?: { inlinePropertiesPanel: Boolean }\n * exporter?: { name: String, version: String }\n * schema: any\n * } } FormPlaygroundOptions\n */\n\n/**\n * @param {FormPlaygroundOptions} options\n */\nexport default function Playground(options) {\n\n const {\n container: parent,\n schema,\n data,\n ...rest\n } = options;\n\n const emitter = mitt();\n\n let state = { data, schema };\n let ref;\n\n const container = document.createElement('div');\n\n container.classList.add('fjs-pgl-parent');\n\n if (parent) {\n parent.appendChild(container);\n }\n\n const handleDrop = fileDrop('Drop a form file', function(files) {\n const file = files[0];\n\n if (file) {\n try {\n ref.setSchema(JSON.parse(file.contents));\n } catch (err) {\n\n // TODO(nikku): indicate JSON parse error\n }\n }\n });\n\n const withRef = function(fn) {\n return function(...args) {\n if (!ref) {\n throw new Error('Playground is not initialized.');\n }\n\n return fn(...args);\n };\n };\n\n const onInit = function(_ref) {\n ref = _ref;\n emitter.emit('formPlayground.init');\n };\n\n container.addEventListener('dragover', handleDrop);\n\n render(\n <PlaygroundRoot\n data={ data }\n emit={ emitter.emit }\n onInit={ onInit }\n onStateChanged={ (_state) => state = _state }\n schema={ schema }\n { ...rest }\n />,\n container\n );\n\n this.on = emitter.on;\n this.off = emitter.off;\n\n this.emit = emitter.emit;\n\n this.on('destroy', function() {\n render(null, container);\n });\n\n this.on('destroy', function() {\n parent.removeChild(container);\n });\n\n this.getState = function() {\n return state;\n };\n\n this.getSchema = withRef(() => ref.getSchema());\n\n this.setSchema = withRef((schema) => ref.setSchema(schema));\n\n this.saveSchema = withRef(() => ref.saveSchema());\n\n this.get = withRef((name, strict) => ref.get(name, strict));\n\n this.getDataEditor = withRef(() => ref.getDataEditor());\n\n this.getEditor = withRef(() => ref.getEditor());\n\n this.getForm = withRef((name, strict) => ref.getForm(name, strict));\n\n this.getResultView = withRef(() => ref.getResultView());\n\n this.destroy = function() {\n this.emit('destroy');\n };\n\n this.attachEditorContainer = withRef((node) => ref.attachEditorContainer(node));\n\n this.attachPreviewContainer = withRef((node) => ref.attachFormContainer(node));\n\n this.attachDataContainer = withRef((node) => ref.attachDataContainer(node));\n\n this.attachResultContainer = withRef((node) => ref.attachResultContainer(node));\n\n this.attachPaletteContainer = withRef((node) => ref.attachPaletteContainer(node));\n\n this.attachPropertiesPanelContainer = withRef((node) => ref.attachPropertiesPanelContainer(node));\n}"],"names":["Modal","props","useEffect","handleKey","event","key","stopPropagation","onClose","document","addEventListener","removeEventListener","_jsxs","_jsx","name","children","EmbedModal","schema","serializeValue","data","fieldRef","useRef","snippet","trim","current","select","obj","JSON","stringify","replace","JSONEditor","options","emitter","mitt","readonly","language","Compartment","of","json","tabSize","EditorState","createState","doc","extensions","create","basicSetup","createView","updateListener","EditorView","update","docChanged","emit","value","view","state","toString","editable","setValue","setState","getValue","on","off","attachTo","container","appendChild","dom","destroy","parentNode","removeChild","Section","elements","Array","isArray","headerItems","reduce","_","child","bucket","type","HeaderItem","push","length","PlaygroundRoot","actions","actionsConfig","editor","editorConfig","exporter","exporterConfig","display","displayActions","inlinePropertiesPanel","paletteContainerRef","editorContainerRef","formContainerRef","dataContainerRef","resultContainerRef","propertiesPanelContainerRef","paletteRef","formEditorRef","formRef","dataEditorRef","resultViewRef","propertiesPanelRef","showEmbed","setShowEmbed","useState","initialData","initialSchema","setInitialSchema","setData","setSchema","resultData","setResultData","onInit","attachDataContainer","node","attachEditorContainer","attachFormContainer","attachPaletteContainer","attachPropertiesPanelContainer","attachResultContainer","get","strict","getDataEditor","getEditor","getForm","getResultView","getSchema","saveSchema","dataEditor","toJSON","resultView","form","Form","formEditor","FormEditor","renderer","compact","palette","parent","propertiesPanel","_getSubmitData","parse","err","formContainer","editorContainer","dataContainer","resultContainer","importSchema","onStateChanged","handleDownload","useCallback","download","hideEmbedModal","showEmbedModal","classNames","Playground","rest","ref","createElement","classList","add","handleDrop","fileDrop","files","file","contents","withRef","fn","args","Error","_ref","render","_state","getState","attachPreviewContainer"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"index.cjs","sources":["../src/components/Modal.js","../src/components/EmbedModal.js","../src/components/JSONEditor.js","../src/components/Section.js","../src/components/PlaygroundRoot.js","../src/Playground.js"],"sourcesContent":["import { useEffect } from 'preact/hooks';\n\nexport function Modal(props) {\n\n useEffect(() => {\n function handleKey(event) {\n\n if (event.key === 'Escape') {\n event.stopPropagation();\n\n props.onClose();\n }\n }\n\n document.addEventListener('keydown', handleKey);\n\n return () => {\n document.removeEventListener('keydown', handleKey);\n };\n });\n\n return (\n <div class=\"fjs-pgl-modal\">\n <div class=\"fjs-pgl-modal-backdrop\" onClick={ props.onClose }></div>\n <div class=\"fjs-pgl-modal-content\">\n <h1 class=\"fjs-pgl-modal-header\">{ props.name }</h1>\n <div class=\"fjs-pgl-modal-body\">\n { props.children }\n </div>\n <div class=\"fjs-pgl-modal-footer\">\n <button class=\"fjs-pgl-button fjs-pgl-button-default\" onClick={ props.onClose }>Close</button>\n </div>\n </div>\n </div>\n );\n}\n","import { useEffect, useRef } from 'preact/hooks';\n\nimport { Modal } from './Modal';\n\n\nexport function EmbedModal(props) {\n\n const schema = serializeValue(props.schema);\n const data = serializeValue(props.data || {});\n\n const fieldRef = useRef();\n\n const snippet = `<!-- styles needed for rendering -->\n<link rel=\"stylesheet\" href=\"https://unpkg.com/@bpmn-io/form-js@0.2.4/dist/assets/form-js.css\">\n\n<!-- container to render the form into -->\n<div class=\"fjs-pgl-form-container\"></div>\n\n<!-- scripts needed for embedding -->\n<script src=\"https://unpkg.com/@bpmn-io/form-js@0.2.4/dist/form-viewer.umd.js\"></script>\n\n<!-- actual script to instantiate the form and load form schema + data -->\n<script>\n const data = JSON.parse(${data});\n const schema = JSON.parse(${schema});\n\n const form = new FormViewer.Form({\n container: document.querySelector(\".fjs-pgl-form-container\")\n });\n\n form.on(\"submit\", (event) => {\n console.log(event.data, event.errors);\n });\n\n form.importSchema(schema, data).catch(err => {\n console.error(\"Failed to render form\", err);\n });\n</script>\n `.trim();\n\n useEffect(() => {\n fieldRef.current.select();\n });\n\n return (\n <Modal name=\"Embed form\" onClose={ props.onClose }>\n <p>Use the following HTML snippet to embed your form with <a href=\"https://github.com/bpmn-io/form-js\">form-js</a>:</p>\n\n <textarea spellCheck=\"false\" ref={ fieldRef }>{snippet}</textarea>\n </Modal>\n );\n}\n\n\n// helpers ///////////\n\nfunction serializeValue(obj) {\n return JSON.stringify(JSON.stringify(obj)).replace(/</g, '<').replace(/>/g, '>');\n}","import mitt from 'mitt';\n\nimport { basicSetup } from 'codemirror';\nimport { EditorView } from '@codemirror/view';\nimport { EditorState, Compartment } from '@codemirror/state';\nimport { lintGutter, linter } from '@codemirror/lint';\nimport { json, jsonParseLinter } from '@codemirror/lang-json';\n\n\nexport function JSONEditor(options = {}) {\n\n const emitter = mitt();\n\n const {\n readonly = false\n } = options;\n\n let language = new Compartment().of(json());\n let tabSize = new Compartment().of(EditorState.tabSize.of(2));\n\n const linterExtension = linter(jsonParseLinter());\n\n function createState(doc, extensions = []) {\n return EditorState.create({\n doc,\n extensions: [\n basicSetup,\n language,\n tabSize,\n linterExtension,\n lintGutter(),\n ...extensions\n ]\n });\n }\n\n function createView(readonly) {\n\n const updateListener = EditorView.updateListener.of(update => {\n if (update.docChanged) {\n emitter.emit('changed', {\n value: update.view.state.doc.toString()\n });\n }\n });\n\n const editable = EditorView.editable.of(!readonly);\n\n const view = new EditorView({\n state: createState('', [ updateListener, editable ])\n });\n\n view.setValue = function(value) {\n this.setState(createState(value, [ updateListener, editable ]));\n };\n\n return view;\n }\n\n const view = createView(readonly);\n\n this.setValue = function(value) {\n view.setValue(value);\n };\n\n this.getValue = function() {\n return view.state.doc.toString();\n };\n\n this.on = emitter.on;\n this.off = emitter.off;\n this.emit = emitter.emit;\n\n this.attachTo = function(container) {\n container.appendChild(view.dom);\n };\n\n this.destroy = function() {\n if (view.dom.parentNode) {\n view.dom.parentNode.removeChild(view.dom);\n }\n\n view.destroy();\n };\n}\n","export function Section(props) {\n\n const elements =\n Array.isArray(props.children)\n ? props.children :\n [ props.children ];\n\n const {\n headerItems,\n children\n } = elements.reduce((_, child) => {\n const bucket =\n child.type === Section.HeaderItem\n ? _.headerItems\n : _.children;\n\n bucket.push(child);\n\n return _;\n }, { headerItems: [], children: [] });\n\n return (\n <div class=\"fjs-pgl-section\">\n <h1 class=\"header\">{ props.name } { headerItems.length ? <span class=\"header-items\">{ headerItems }</span> : null }</h1>\n <div class=\"body\">\n { children }\n </div>\n </div>\n );\n}\n\nSection.HeaderItem = function(props) {\n return props.children;\n};","import { useRef, useEffect, useState, useCallback } from 'preact/hooks';\n\nimport download from 'downloadjs';\n\nimport classNames from 'classnames';\n\nimport {\n Form\n} from '@bpmn-io/form-js-viewer';\n\nimport {\n FormEditor\n} from '@bpmn-io/form-js-editor';\n\nimport { EmbedModal } from './EmbedModal';\nimport { JSONEditor } from './JSONEditor';\nimport { Section } from './Section';\n\n\nimport './FileDrop.css';\nimport './PlaygroundRoot.css';\n\n\nexport function PlaygroundRoot(props) {\n\n const {\n actions: actionsConfig = {},\n editor: editorConfig = {},\n emit,\n exporter: exporterConfig = {}\n } = props;\n\n const {\n display: displayActions = true\n } = actionsConfig;\n\n const {\n inlinePropertiesPanel = true\n } = editorConfig;\n\n const paletteContainerRef = useRef();\n const editorContainerRef = useRef();\n const formContainerRef = useRef();\n const dataContainerRef = useRef();\n const resultContainerRef = useRef();\n const propertiesPanelContainerRef = useRef();\n\n const paletteRef = useRef();\n const formEditorRef = useRef();\n const formRef = useRef();\n const dataEditorRef = useRef();\n const resultViewRef = useRef();\n const propertiesPanelRef = useRef();\n\n const [ showEmbed, setShowEmbed ] = useState(false);\n\n const [ initialData ] = useState(props.data || {});\n const [ initialSchema, setInitialSchema ] = useState(props.schema);\n\n const [ data, setData ] = useState(props.data || {});\n const [ schema, setSchema ] = useState(props.schema);\n\n const [ resultData, setResultData ] = useState({});\n\n // pipe to playground API\n useEffect(() => {\n props.onInit({\n attachDataContainer: (node) => dataEditorRef.current.attachTo(node),\n attachEditorContainer: (node) => formEditorRef.current.attachTo(node),\n attachFormContainer: (node) => formRef.current.attachTo(node),\n attachPaletteContainer: (node) => paletteRef.current.attachTo(node),\n attachPropertiesPanelContainer: (node) => propertiesPanelRef.current.attachTo(node),\n attachResultContainer: (node) => resultViewRef.current.attachTo(node),\n get: (name, strict) => formEditorRef.current.get(name, strict),\n getDataEditor: () => dataEditorRef.current,\n getEditor: () => formEditorRef.current,\n getForm: () => formRef.current,\n getResultView: () => resultViewRef.current,\n getSchema: () => formEditorRef.current.getSchema(),\n setSchema: setInitialSchema,\n saveSchema: () => formEditorRef.current.saveSchema()\n });\n });\n\n useEffect(() => {\n setInitialSchema(props.schema || {});\n }, [ props.schema ]);\n\n useEffect(() => {\n const dataEditor = dataEditorRef.current = new JSONEditor({\n value: toJSON(data)\n });\n\n const resultView = resultViewRef.current = new JSONEditor({\n readonly: true,\n value: toJSON(resultData)\n });\n\n const form = formRef.current = new Form();\n const formEditor = formEditorRef.current = new FormEditor({\n renderer: {\n compact: true\n },\n palette: {\n parent: paletteContainerRef.current\n },\n propertiesPanel: {\n parent: !inlinePropertiesPanel && propertiesPanelContainerRef.current\n },\n exporter: exporterConfig\n });\n\n paletteRef.current = formEditor.get('palette');\n propertiesPanelRef.current = formEditor.get('propertiesPanel');\n\n formEditor.on('changed', () => {\n setSchema(formEditor.getSchema());\n });\n\n formEditor.on('formEditor.rendered', () => {\n\n // notifiy interested parties after render\n emit('formPlayground.rendered');\n });\n\n form.on('changed', () => {\n setResultData(form._getSubmitData());\n });\n\n dataEditor.on('changed', event => {\n try {\n setData(JSON.parse(event.value));\n } catch (error) {\n\n // notify interested about input data error\n emit('formPlayground.inputDataError', error);\n }\n });\n\n const formContainer = formContainerRef.current;\n const editorContainer = editorContainerRef.current;\n const dataContainer = dataContainerRef.current;\n const resultContainer = resultContainerRef.current;\n\n dataEditor.attachTo(dataContainer);\n resultView.attachTo(resultContainer);\n form.attachTo(formContainer);\n formEditor.attachTo(editorContainer);\n\n return () => {\n dataEditor.destroy();\n resultView.destroy();\n form.destroy();\n formEditor.destroy();\n };\n }, []);\n\n useEffect(() => {\n dataEditorRef.current.setValue(toJSON(initialData));\n }, [ initialData ]);\n\n useEffect(() => {\n initialSchema && formEditorRef.current.importSchema(initialSchema);\n }, [ initialSchema ]);\n\n useEffect(() => {\n schema && formRef.current.importSchema(schema, data);\n }, [ schema, data ]);\n\n useEffect(() => {\n resultViewRef.current.setValue(toJSON(resultData));\n }, [ resultData ]);\n\n useEffect(() => {\n props.onStateChanged({\n schema,\n data\n });\n }, [ schema, data ]);\n\n const handleDownload = useCallback(() => {\n\n download(JSON.stringify(schema, null, ' '), 'form.json', 'text/json');\n }, [ schema ]);\n\n const hideEmbedModal = useCallback(() => {\n setShowEmbed(false);\n }, []);\n\n const showEmbedModal = useCallback(() => {\n setShowEmbed(true);\n }, []);\n\n return (\n <div class={ classNames(\n 'fjs-container',\n 'fjs-pgl-root',\n { 'fjs-pgl-inline-editor-panel': inlinePropertiesPanel }) }>\n <div class=\"fjs-pgl-modals\">\n { showEmbed ? <EmbedModal schema={ schema } data={ data } onClose={ hideEmbedModal } /> : null }\n </div>\n <div class=\"fjs-pgl-palette-container\" ref={ paletteContainerRef } />\n <div class=\"fjs-pgl-main\">\n\n <Section name=\"Form Definition\">\n\n {\n displayActions && <Section.HeaderItem>\n <button\n class=\"fjs-pgl-button\"\n title=\"Download form definition\"\n onClick={ handleDownload }\n >Download</button>\n </Section.HeaderItem>\n }\n\n {\n displayActions && <Section.HeaderItem>\n <button\n class=\"fjs-pgl-button\"\n onClick={ showEmbedModal }\n >Embed</button>\n </Section.HeaderItem>\n }\n\n <div ref={ editorContainerRef } class=\"fjs-pgl-form-container\"></div>\n </Section>\n <Section name=\"Form Preview\">\n <div ref={ formContainerRef } class=\"fjs-pgl-form-container\"></div>\n </Section>\n <Section name=\"Form Data (Input)\">\n <div ref={ dataContainerRef } class=\"fjs-pgl-text-container\"></div>\n </Section>\n <Section name=\"Form Data (Submit)\">\n <div ref={ resultContainerRef } class=\"fjs-pgl-text-container\"></div>\n </Section>\n </div>\n <div class=\"fjs-pgl-properties-container\" ref={ propertiesPanelContainerRef } />\n </div>\n );\n}\n\n\n// helpers ///////////////\n\nfunction toJSON(obj) {\n return JSON.stringify(obj, null, ' ');\n}","import { render } from 'preact';\n\nimport fileDrop from 'file-drops';\n\nimport mitt from 'mitt';\n\nimport { PlaygroundRoot } from './components/PlaygroundRoot';\n\n/**\n * @typedef { {\n * actions?: { display: Boolean }\n * container?: Element\n * data: any\n * editor?: { inlinePropertiesPanel: Boolean }\n * exporter?: { name: String, version: String }\n * schema: any\n * } } FormPlaygroundOptions\n */\n\n/**\n * @param {FormPlaygroundOptions} options\n */\nexport default function Playground(options) {\n\n const {\n container: parent,\n schema,\n data,\n ...rest\n } = options;\n\n const emitter = mitt();\n\n let state = { data, schema };\n let ref;\n\n const container = document.createElement('div');\n\n container.classList.add('fjs-pgl-parent');\n\n if (parent) {\n parent.appendChild(container);\n }\n\n const handleDrop = fileDrop('Drop a form file', function(files) {\n const file = files[0];\n\n if (file) {\n try {\n ref.setSchema(JSON.parse(file.contents));\n } catch (err) {\n\n // TODO(nikku): indicate JSON parse error\n }\n }\n });\n\n const withRef = function(fn) {\n return function(...args) {\n if (!ref) {\n throw new Error('Playground is not initialized.');\n }\n\n return fn(...args);\n };\n };\n\n const onInit = function(_ref) {\n ref = _ref;\n emitter.emit('formPlayground.init');\n };\n\n container.addEventListener('dragover', handleDrop);\n\n render(\n <PlaygroundRoot\n data={ data }\n emit={ emitter.emit }\n onInit={ onInit }\n onStateChanged={ (_state) => state = _state }\n schema={ schema }\n { ...rest }\n />,\n container\n );\n\n this.on = emitter.on;\n this.off = emitter.off;\n\n this.emit = emitter.emit;\n\n this.on('destroy', function() {\n render(null, container);\n });\n\n this.on('destroy', function() {\n parent.removeChild(container);\n });\n\n this.getState = function() {\n return state;\n };\n\n this.getSchema = withRef(() => ref.getSchema());\n\n this.setSchema = withRef((schema) => ref.setSchema(schema));\n\n this.saveSchema = withRef(() => ref.saveSchema());\n\n this.get = withRef((name, strict) => ref.get(name, strict));\n\n this.getDataEditor = withRef(() => ref.getDataEditor());\n\n this.getEditor = withRef(() => ref.getEditor());\n\n this.getForm = withRef((name, strict) => ref.getForm(name, strict));\n\n this.getResultView = withRef(() => ref.getResultView());\n\n this.destroy = function() {\n this.emit('destroy');\n };\n\n this.attachEditorContainer = withRef((node) => ref.attachEditorContainer(node));\n\n this.attachPreviewContainer = withRef((node) => ref.attachFormContainer(node));\n\n this.attachDataContainer = withRef((node) => ref.attachDataContainer(node));\n\n this.attachResultContainer = withRef((node) => ref.attachResultContainer(node));\n\n this.attachPaletteContainer = withRef((node) => ref.attachPaletteContainer(node));\n\n this.attachPropertiesPanelContainer = withRef((node) => ref.attachPropertiesPanelContainer(node));\n}"],"names":["Modal","props","useEffect","handleKey","event","key","stopPropagation","onClose","document","addEventListener","removeEventListener","_jsxs","_jsx","name","children","EmbedModal","schema","serializeValue","data","fieldRef","useRef","snippet","trim","current","select","obj","JSON","stringify","replace","JSONEditor","options","emitter","mitt","readonly","language","Compartment","of","json","tabSize","EditorState","linterExtension","linter","jsonParseLinter","createState","doc","extensions","create","basicSetup","lintGutter","createView","updateListener","EditorView","update","docChanged","emit","value","view","state","toString","editable","setValue","setState","getValue","on","off","attachTo","container","appendChild","dom","destroy","parentNode","removeChild","Section","elements","Array","isArray","headerItems","reduce","_","child","bucket","type","HeaderItem","push","length","PlaygroundRoot","actions","actionsConfig","editor","editorConfig","exporter","exporterConfig","display","displayActions","inlinePropertiesPanel","paletteContainerRef","editorContainerRef","formContainerRef","dataContainerRef","resultContainerRef","propertiesPanelContainerRef","paletteRef","formEditorRef","formRef","dataEditorRef","resultViewRef","propertiesPanelRef","showEmbed","setShowEmbed","useState","initialData","initialSchema","setInitialSchema","setData","setSchema","resultData","setResultData","onInit","attachDataContainer","node","attachEditorContainer","attachFormContainer","attachPaletteContainer","attachPropertiesPanelContainer","attachResultContainer","get","strict","getDataEditor","getEditor","getForm","getResultView","getSchema","saveSchema","dataEditor","toJSON","resultView","form","Form","formEditor","FormEditor","renderer","compact","palette","parent","propertiesPanel","_getSubmitData","parse","error","formContainer","editorContainer","dataContainer","resultContainer","importSchema","onStateChanged","handleDownload","useCallback","download","hideEmbedModal","showEmbedModal","classNames","Playground","rest","ref","createElement","classList","add","handleDrop","fileDrop","files","file","contents","err","withRef","fn","args","Error","_ref","render","_state","getState","attachPreviewContainer"],"mappings":"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"}
|
package/dist/index.es.js
CHANGED
|
@@ -10,7 +10,8 @@ import { jsxs, jsx } from 'preact/jsx-runtime';
|
|
|
10
10
|
import { basicSetup } from 'codemirror';
|
|
11
11
|
import { EditorView } from '@codemirror/view';
|
|
12
12
|
import { Compartment, EditorState } from '@codemirror/state';
|
|
13
|
-
import {
|
|
13
|
+
import { linter, lintGutter } from '@codemirror/lint';
|
|
14
|
+
import { json, jsonParseLinter } from '@codemirror/lang-json';
|
|
14
15
|
|
|
15
16
|
function Modal(props) {
|
|
16
17
|
useEffect(() => {
|
|
@@ -20,7 +21,6 @@ function Modal(props) {
|
|
|
20
21
|
props.onClose();
|
|
21
22
|
}
|
|
22
23
|
}
|
|
23
|
-
|
|
24
24
|
document.addEventListener('keydown', handleKey);
|
|
25
25
|
return () => {
|
|
26
26
|
document.removeEventListener('keydown', handleKey);
|
|
@@ -99,7 +99,9 @@ function EmbedModal(props) {
|
|
|
99
99
|
children: snippet
|
|
100
100
|
})]
|
|
101
101
|
});
|
|
102
|
-
}
|
|
102
|
+
}
|
|
103
|
+
|
|
104
|
+
// helpers ///////////
|
|
103
105
|
|
|
104
106
|
function serializeValue(obj) {
|
|
105
107
|
return JSON.stringify(JSON.stringify(obj)).replace(/</g, '<').replace(/>/g, '>');
|
|
@@ -112,14 +114,13 @@ function JSONEditor(options = {}) {
|
|
|
112
114
|
} = options;
|
|
113
115
|
let language = new Compartment().of(json());
|
|
114
116
|
let tabSize = new Compartment().of(EditorState.tabSize.of(2));
|
|
115
|
-
|
|
117
|
+
const linterExtension = linter(jsonParseLinter());
|
|
116
118
|
function createState(doc, extensions = []) {
|
|
117
119
|
return EditorState.create({
|
|
118
120
|
doc,
|
|
119
|
-
extensions: [basicSetup, language, tabSize, ...extensions]
|
|
121
|
+
extensions: [basicSetup, language, tabSize, linterExtension, lintGutter(), ...extensions]
|
|
120
122
|
});
|
|
121
123
|
}
|
|
122
|
-
|
|
123
124
|
function createView(readonly) {
|
|
124
125
|
const updateListener = EditorView.updateListener.of(update => {
|
|
125
126
|
if (update.docChanged) {
|
|
@@ -132,36 +133,28 @@ function JSONEditor(options = {}) {
|
|
|
132
133
|
const view = new EditorView({
|
|
133
134
|
state: createState('', [updateListener, editable])
|
|
134
135
|
});
|
|
135
|
-
|
|
136
136
|
view.setValue = function (value) {
|
|
137
137
|
this.setState(createState(value, [updateListener, editable]));
|
|
138
138
|
};
|
|
139
|
-
|
|
140
139
|
return view;
|
|
141
140
|
}
|
|
142
|
-
|
|
143
141
|
const view = createView(readonly);
|
|
144
|
-
|
|
145
142
|
this.setValue = function (value) {
|
|
146
143
|
view.setValue(value);
|
|
147
144
|
};
|
|
148
|
-
|
|
149
145
|
this.getValue = function () {
|
|
150
146
|
return view.state.doc.toString();
|
|
151
147
|
};
|
|
152
|
-
|
|
153
148
|
this.on = emitter.on;
|
|
154
149
|
this.off = emitter.off;
|
|
155
|
-
|
|
150
|
+
this.emit = emitter.emit;
|
|
156
151
|
this.attachTo = function (container) {
|
|
157
152
|
container.appendChild(view.dom);
|
|
158
153
|
};
|
|
159
|
-
|
|
160
154
|
this.destroy = function () {
|
|
161
155
|
if (view.dom.parentNode) {
|
|
162
156
|
view.dom.parentNode.removeChild(view.dom);
|
|
163
157
|
}
|
|
164
|
-
|
|
165
158
|
view.destroy();
|
|
166
159
|
};
|
|
167
160
|
}
|
|
@@ -193,7 +186,6 @@ function Section(props) {
|
|
|
193
186
|
})]
|
|
194
187
|
});
|
|
195
188
|
}
|
|
196
|
-
|
|
197
189
|
Section.HeaderItem = function (props) {
|
|
198
190
|
return props.children;
|
|
199
191
|
};
|
|
@@ -228,8 +220,9 @@ function PlaygroundRoot(props) {
|
|
|
228
220
|
const [initialSchema, setInitialSchema] = useState(props.schema);
|
|
229
221
|
const [data, setData] = useState(props.data || {});
|
|
230
222
|
const [schema, setSchema] = useState(props.schema);
|
|
231
|
-
const [resultData, setResultData] = useState({});
|
|
223
|
+
const [resultData, setResultData] = useState({});
|
|
232
224
|
|
|
225
|
+
// pipe to playground API
|
|
233
226
|
useEffect(() => {
|
|
234
227
|
props.onInit({
|
|
235
228
|
attachDataContainer: node => dataEditorRef.current.attachTo(node),
|
|
@@ -287,7 +280,9 @@ function PlaygroundRoot(props) {
|
|
|
287
280
|
dataEditor.on('changed', event => {
|
|
288
281
|
try {
|
|
289
282
|
setData(JSON.parse(event.value));
|
|
290
|
-
} catch (
|
|
283
|
+
} catch (error) {
|
|
284
|
+
// notify interested about input data error
|
|
285
|
+
emit('formPlayground.inputDataError', error);
|
|
291
286
|
}
|
|
292
287
|
});
|
|
293
288
|
const formContainer = formContainerRef.current;
|
|
@@ -391,7 +386,9 @@ function PlaygroundRoot(props) {
|
|
|
391
386
|
ref: propertiesPanelContainerRef
|
|
392
387
|
})]
|
|
393
388
|
});
|
|
394
|
-
}
|
|
389
|
+
}
|
|
390
|
+
|
|
391
|
+
// helpers ///////////////
|
|
395
392
|
|
|
396
393
|
function toJSON(obj) {
|
|
397
394
|
return JSON.stringify(obj, null, ' ');
|
|
@@ -412,37 +409,32 @@ function Playground(options) {
|
|
|
412
409
|
let ref;
|
|
413
410
|
const container = document.createElement('div');
|
|
414
411
|
container.classList.add('fjs-pgl-parent');
|
|
415
|
-
|
|
416
412
|
if (parent) {
|
|
417
413
|
parent.appendChild(container);
|
|
418
414
|
}
|
|
419
|
-
|
|
420
415
|
const handleDrop = fileDrop('Drop a form file', function (files) {
|
|
421
416
|
const file = files[0];
|
|
422
|
-
|
|
423
417
|
if (file) {
|
|
424
418
|
try {
|
|
425
419
|
ref.setSchema(JSON.parse(file.contents));
|
|
426
|
-
} catch (err) {
|
|
420
|
+
} catch (err) {
|
|
421
|
+
|
|
422
|
+
// TODO(nikku): indicate JSON parse error
|
|
427
423
|
}
|
|
428
424
|
}
|
|
429
425
|
});
|
|
430
|
-
|
|
431
426
|
const withRef = function (fn) {
|
|
432
427
|
return function (...args) {
|
|
433
428
|
if (!ref) {
|
|
434
429
|
throw new Error('Playground is not initialized.');
|
|
435
430
|
}
|
|
436
|
-
|
|
437
431
|
return fn(...args);
|
|
438
432
|
};
|
|
439
433
|
};
|
|
440
|
-
|
|
441
434
|
const onInit = function (_ref) {
|
|
442
435
|
ref = _ref;
|
|
443
436
|
emitter.emit('formPlayground.init');
|
|
444
437
|
};
|
|
445
|
-
|
|
446
438
|
container.addEventListener('dragover', handleDrop);
|
|
447
439
|
render(jsx(PlaygroundRoot, {
|
|
448
440
|
data: data,
|
|
@@ -461,11 +453,9 @@ function Playground(options) {
|
|
|
461
453
|
this.on('destroy', function () {
|
|
462
454
|
parent.removeChild(container);
|
|
463
455
|
});
|
|
464
|
-
|
|
465
456
|
this.getState = function () {
|
|
466
457
|
return state;
|
|
467
458
|
};
|
|
468
|
-
|
|
469
459
|
this.getSchema = withRef(() => ref.getSchema());
|
|
470
460
|
this.setSchema = withRef(schema => ref.setSchema(schema));
|
|
471
461
|
this.saveSchema = withRef(() => ref.saveSchema());
|
|
@@ -474,11 +464,9 @@ function Playground(options) {
|
|
|
474
464
|
this.getEditor = withRef(() => ref.getEditor());
|
|
475
465
|
this.getForm = withRef((name, strict) => ref.getForm(name, strict));
|
|
476
466
|
this.getResultView = withRef(() => ref.getResultView());
|
|
477
|
-
|
|
478
467
|
this.destroy = function () {
|
|
479
468
|
this.emit('destroy');
|
|
480
469
|
};
|
|
481
|
-
|
|
482
470
|
this.attachEditorContainer = withRef(node => ref.attachEditorContainer(node));
|
|
483
471
|
this.attachPreviewContainer = withRef(node => ref.attachFormContainer(node));
|
|
484
472
|
this.attachDataContainer = withRef(node => ref.attachDataContainer(node));
|