Hello everyone;
I am trying to implement my properties panel provider for the FormModeler.
I followed both custom components ( form-js-examples/custom-components at master · bpmn-io/form-js-examples) and custom button ( form-js-examples/custom-button at master · bpmn-io/form-js-examples) examples.
Setup of provider and linking it to FormModeler (via additionalModules) are all fine. I can modify groups and entries in them but having context (Preact related?) error when trying to re-use any entry component from @bpmn-io/properties-panel.
This is my code:
import { isNumberFieldEntryEdited, NumberFieldEntry } from '@bpmn-io/properties-panel';
export default class DSFormPropertiesProvider {
// registraton is fine
constructor(propertiesPanel) {
propertiesPanel.registerProvider(this, LOW_PRIORITY);
}
getGroups(field, editField) {
return (groups) => {
// please see below for how group entries are created
groups.push(this.createMyCustomGroup(field, editField));
return groups;
};
}
createMyCustomGroup(field, editField) {
// these functions are mostly copy paste from samples:
const onChange = (key) => {
return (value) => {
const style = get(field, ['style'], {});
editField(field, ['style'], set(style, [key], value));
};
};
const getValue = (key) => {
return () => {
return get(field, ['style', key]);
};
};
const debounce = (fn) => fn;
return {
id: 'style',
label: 'Style',
entries: [
{
id: 'my-custom-property-id',
// I have context related error here
component: () => NumberFieldEntry({
debounce,
element: field,
getValue: getValue('min'),
id,
label: 'Minimum',
setValue: onChange('min')
}),
getValue,
field,
isEdited: isNumberFieldEntryEdited,
onChange
}
]
};
}
// inject panel
DSFormPropertiesProvider.$inject = [
"propertiesPanel"
];
The error is:
Uncaught TypeError: Cannot read properties of null (reading 'context')
at q2 (index.js:344:19)
at useError (useError.js:6:22)
at NumberFieldEntry (NumberField.js:117:23)
at x.component [as constructor] (DSFormPropertiesProvider.js:55:38)
at x.B [as render] (index.js:659:14)
at j (index.js:240:14)
at $ (children.js:96:16)
at j (index.js:262:13)
at $ (children.js:96:16)
at N (index.js:527:4)
I have same problem with TextFieldEntry, SelectEntry etc. Seems like useError hook in entry components try to find ErrorContext but something is wrong.
I implemented a custom properties panel provider for BPMN Modeler too and had no problem re-using eg TextFieldEntry the same way.
The only difference I can see from samples are they are using FormPlayground and linking custom provider using editorAdditionalModules. Instead I am using FormModeler directly and linking my provider via additionalModules as in here:
....
new FormEditor({
container: container,
additionalModules: [
DSFormPropertiesProvider // my provider
]
});
....
This is a React + Vite project I am working on. What is it I am doing wrong ?
Thank you.