diff --git a/example/main.jsx b/example/main.jsx index 57f3f49..d7945e3 100644 --- a/example/main.jsx +++ b/example/main.jsx @@ -206,6 +206,7 @@ function FormBuilderDemo() { select: true, radio: true, number: true, + file: true, button: true, }, }, diff --git a/package.json b/package.json index 4daa64d..3a1b606 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "react-formio-engine", - "version": "2.0.3", + "version": "2.0.4", "description": "Form engine with builder and renderer - formiojs-powered with React functional components", "type": "module", "main": "dist/form-engine.umd.js", diff --git a/src/index.js b/src/index.js index 3bade3f..cd39181 100644 --- a/src/index.js +++ b/src/index.js @@ -75,6 +75,51 @@ if (NumberComponent?.prototype?.createNumberMask) { }; } +// Patch 4: File component — default imageSize to '100' (formio's default is '200') +// +// Two parts: (a) wrap the static schema so newly added File components in the +// builder and runtime defaults for forms whose JSON omits imageSize both pick +// up '100'. User-provided imageSize in form JSON still wins via lodash _.merge. +// (b) Walk the File editForm definition and disable clearOnHide on the +// imageSize textfield. The textfield is conditionally hidden until "Display +// as image(s)" is checked, and inherits clearOnHide:true, so without this +// formio strips data.imageSize the moment the edit dialog renders — leaving +// the preview with style="width:px" and the field showing only its +// placeholder until the user retypes a number. +const FileComponent = Components.components?.file; +if (FileComponent?.schema) { + const _origFileSchema = FileComponent.schema.bind(FileComponent); + FileComponent.schema = function (...extend) { + return _origFileSchema({ imageSize: '100' }, ...extend); + }; +} +if (FileComponent?.editForm) { + const _origFileEditForm = FileComponent.editForm; + FileComponent.editForm = function (...args) { + const result = _origFileEditForm.apply(this, args); + const walk = (comps) => { + if (!Array.isArray(comps)) return; + for (const c of comps) { + if (!c || typeof c !== 'object') continue; + if (c.key === 'imageSize') { + c.clearOnHide = false; + } + if (Array.isArray(c.components)) walk(c.components); + if (Array.isArray(c.columns)) { + c.columns.forEach((col) => walk(col?.components)); + } + if (Array.isArray(c.rows)) { + c.rows.forEach( + (row) => Array.isArray(row) && row.forEach((col) => walk(col?.components)), + ); + } + } + }; + walk(result?.components); + return result; + }; +} + // --------------------------------------------------------------------------- // ReactComponent (Field class) for backward compat with custom components