feat: render components instead of elements

package.json

@@ -60,7 +60,7 @@
   "devDependencies": {
     "@babel/core": "^7.14.3",
     "@babel/plugin-transform-react-jsx": "^7.14.3",
-    "@bpmn-io/properties-panel": "^0.10.2",
+    "@bpmn-io/properties-panel": "^0.11.0",
     "@rollup/plugin-alias": "^3.1.2",
     "@rollup/plugin-babel": "^5.3.0",
     "@rollup/plugin-commonjs": "^19.0.0",

src/provider/bpmn/properties/CompensationProps.js

@@ -45,12 +45,12 @@ export function CompensationProps(props) {
   return [
     {
       id: 'waitForCompletion',
-      component: <WaitForCompletion element={ element } />,
+      component: WaitForCompletion,
       isEdited: isCheckboxEntryEdited
     },
     {
       id: 'activityRef',
-      component: <ActivityRef element={ element } />,
+      component: ActivityRef,
       isEdited: isSelectEntryEdited
     }
   ];

src/provider/bpmn/properties/DocumentationProps.js

@@ -32,15 +32,15 @@ export function DocumentationProps(props) {
   const entries = [
     {
       id: 'documentation',
-      component: <ElementDocumentationProperty element={ element } />,
+      component: ElementDocumentationProperty,
       isEdited: isTextAreaEntryEdited
     }
   ];
 
   if (hasProcessRef(element)) {
     entries.push({
       id: 'processDocumentation',
-      component: <ProcessDocumentationProperty element={ element } />,
+      component: ProcessDocumentationProperty,
       isEdited: isTextAreaEntryEdited
     });
   }

src/provider/bpmn/properties/ErrorProps.js

@@ -56,7 +56,7 @@ export function ErrorProps(props) {
   let entries = [
     {
       id: 'errorRef',
-      component: <ErrorRef element={ element } />,
+      component: ErrorRef,
       isEdited: isSelectEntryEdited
     }
   ];
@@ -66,12 +66,12 @@ export function ErrorProps(props) {
       ...entries,
       {
         id: 'errorName',
-        component: <ErrorName element={ element } />,
+        component: ErrorName,
         isEdited: isTextFieldEntryEdited
       },
       {
         id: 'errorCode',
-        component: <ErrorCode element={ element } />,
+        component: ErrorCode,
         isEdited: isTextFieldEntryEdited
       }
     ];

src/provider/bpmn/properties/EscalationProps.js

@@ -55,7 +55,7 @@ export function EscalationProps(props) {
   let entries = [
     {
       id: 'escalationRef',
-      component: <EscalationRef element={ element } />,
+      component: EscalationRef,
       isEdited: isSelectEntryEdited
     }
   ];
@@ -65,12 +65,12 @@ export function EscalationProps(props) {
       ...entries,
       {
         id: 'escalationName',
-        component: <EscalationName element={ element } />,
+        component: EscalationName,
         isEdited: isTextFieldEntryEdited
       },
       {
         id: 'escalationCode',
-        component: <EscalationCode element={ element } />,
+        component: EscalationCode,
         isEdited: isTextFieldEntryEdited
       }
     ];

src/provider/bpmn/properties/ExecutableProps.js

@@ -28,7 +28,7 @@ export function ExecutableProps(props) {
   return [
     {
       id: 'isExecutable',
-      component: <Executable element={ element } />,
+      component: Executable,
       isEdited: isCheckboxEntryEdited
     }
   ];

src/provider/bpmn/properties/IdProps.js

@@ -21,15 +21,11 @@ import {
 /**
  * @returns {Array<Entry>} entries
  */
-export function IdProps(props) {
-  const {
-    element
-  } = props;
-
+export function IdProps() {
   return [
     {
       id: 'id',
-      component: <Id element={ element } />,
+      component: Id,
       isEdited: isTextFieldEntryEdited
     }
   ];

src/provider/bpmn/properties/LinkProps.js

@@ -28,7 +28,7 @@ export function LinkProps(props) {
   return [
     {
       id: 'linkName',
-      component: <LinkName element={ element } />,
+      component: LinkName,
       isEdited: isTextFieldEntryEdited
     },
   ];

src/provider/bpmn/properties/MessageProps.js

@@ -52,7 +52,7 @@ export function MessageProps(props) {
   let entries = [
     {
       id: 'messageRef',
-      component: <MessageRef element={ element } />,
+      component: MessageRef,
       isEdited: isSelectEntryEdited
     }
   ];
@@ -62,7 +62,7 @@ export function MessageProps(props) {
       ...entries,
       {
         id: 'messageName',
-        component: <MessageName element={ element } />,
+        component: MessageName,
         isEdited: isTextFieldEntryEdited
       },
     ];

src/provider/bpmn/properties/MultiInstanceProps.js

@@ -32,12 +32,12 @@ export function MultiInstanceProps(props) {
   const entries = [
     {
       id: 'loopCardinality',
-      component: <LoopCardinality element={ element } />,
+      component: LoopCardinality,
       isEdited: isTextFieldEntryEdited
     },
     {
       id: 'completionCondition',
-      component: <CompletionCondition element={ element } />,
+      component: CompletionCondition,
       isEdited: isTextFieldEntryEdited
     }
   ];

src/provider/bpmn/properties/NameProps.js

@@ -34,7 +34,7 @@ export function NameProps(props) {
   return [
     {
       id: 'name',
-      component: <Name element={ element } />,
+      component: Name,
       isEdited: isTextFieldEntryEdited
     }
   ];

src/provider/bpmn/properties/ProcessProps.js

@@ -29,12 +29,12 @@ export function ProcessProps(props) {
   return [
     {
       id: 'processId',
-      component: <ProcessId element={ element } />,
+      component: ProcessId,
       isEdited: isTextFieldEntryEdited
     },
     {
       id: 'processName',
-      component: <ProcessName element={ element } />,
+      component: ProcessName,
       isEdited: isTextFieldEntryEdited
     }
   ];

src/provider/bpmn/properties/SignalProps.js

@@ -52,7 +52,7 @@ export function SignalProps(props) {
   let entries = [
     {
       id: 'signalRef',
-      component: <SignalRef element={ element } />,
+      component: SignalRef,
       isEdited: isSelectEntryEdited
     }
   ];
@@ -62,7 +62,7 @@ export function SignalProps(props) {
       ...entries,
       {
         id: 'signalName',
-        component: <SignalName element={ element } />,
+        component: SignalName,
         isEdited: isTextFieldEntryEdited
       },
     ];

src/provider/bpmn/properties/TimerProps.js

@@ -56,15 +56,19 @@ export function TimerProps(props) {
 
   entries.push({
     id: getId(idPrefix, 'timerEventDefinitionType'),
-    component: <TimerEventDefinitionType element={ element } timerEventDefinition={ timerEventDefinition } timerEventDefinitionType={ timerEventDefinitionType } />,
-    isEdited: isSelectEntryEdited
+    component: TimerEventDefinitionType,
+    isEdited: isSelectEntryEdited,
+    timerEventDefinition,
+    timerEventDefinitionType
   });
 
   if (timerEventDefinitionType) {
     entries.push({
       id: getId(idPrefix, 'timerEventDefinitionValue'),
-      component: <TimerEventDefinitionValue element={ element } timerEventDefinition={ timerEventDefinition } timerEventDefinitionType={ timerEventDefinitionType } />,
-      isEdited: isTextFieldEntryEdited
+      component: TimerEventDefinitionValue,
+      isEdited: isTextFieldEntryEdited,
+      timerEventDefinition,
+      timerEventDefinitionType
     });
   }
 

src/provider/camunda-platform/properties/AsynchronousContinuationsProps.js

@@ -30,12 +30,12 @@ export function AsynchronousContinuationsProps(props) {
     entries.push(
       {
         id: 'asynchronousContinuationBefore',
-        component: <AsynchronousContinuationBefore element={ element } />,
+        component: AsynchronousContinuationBefore,
         isEdited: isCheckboxEntryEdited
       },
       {
         id: 'asynchronousContinuationAfter',
-        component: <AsynchronousContinuationAfter element={ element } />,
+        component: AsynchronousContinuationAfter,
         isEdited: isCheckboxEntryEdited
       }
     );
@@ -44,7 +44,7 @@ export function AsynchronousContinuationsProps(props) {
       entries.push(
         {
           id: 'exclusive',
-          component: <Exclusive element={ element } />,
+          component: Exclusive,
           isEdited: checkboxIsEditedInverted
         }
       );

src/provider/camunda-platform/properties/BusinessKeyProps.js

@@ -28,7 +28,7 @@ export function BusinessKeyProps(props) {
   return [
     {
       id: 'businessKey',
-      component: <BusinessKey element={ element } />,
+      component: BusinessKey,
       isEdited: isSelectEntryEdited
     },
   ];

src/provider/camunda-platform/properties/CallActivityProps.js

@@ -45,7 +45,7 @@ export function CallActivityProps(props) {
 
   entries.push({
     id: 'calledElementType',
-    component: <CalledElementType element={ element } />,
+    component: CalledElementType,
     isEdited: isSelectEntryEdited
   });
 
@@ -130,15 +130,15 @@ function BusinessKeyProps(props) {
   const entries = [
     {
       id: 'calledElementBusinessKey',
-      component: <BusinessKey element={ element } />,
+      component: BusinessKey,
       isEdited: isCheckboxEntryEdited
     }
   ];
 
   if (hasBusinessKey(element)) {
     entries.push({
       id: 'calledElementBusinessKeyExpression',
-      component: <BusinessKeyExpression element={ element } />,
+      component: BusinessKeyExpression,
       isEdited: isTextFieldEntryEdited
     });
   }

src/provider/camunda-platform/properties/CalledBpmnProps.js

@@ -24,17 +24,17 @@ export function CalledBpmnProps(props) {
   const entries = [
     {
       id: 'calledElement',
-      component: <CalledElement element={ element } />,
+      component: CalledElement,
       isEdited: isTextFieldEntryEdited
     },
     {
       id: 'calledElementBinding',
-      component: <CalledElementBinding element={ element } />,
+      component: CalledElementBinding,
       isEdited: isSelectEntryEdited
     },
     {
       id: 'calledElementTenantId',
-      component: <CalledElementTenantId element={ element } />,
+      component: CalledElementTenantId,
       isEdited: isTextFieldEntryEdited
     }
   ];
@@ -44,15 +44,15 @@ export function CalledBpmnProps(props) {
     entries.splice(-1, 0,
       {
         id: 'calledElementVersion',
-        component: <CalledElementVersion element={ element } />,
+        component: CalledElementVersion,
         isEdited: isTextFieldEntryEdited
       }
     );
   } else if (binding === 'versionTag') {
     entries.splice(-1, 0,
       {
         id: 'calledElementVersionTag',
-        component: <CalledElementVersionTag element={ element } />,
+        component: CalledElementVersionTag,
         isEdited: isTextFieldEntryEdited
       }
     );

src/provider/camunda-platform/properties/CalledCmmnProps.js

@@ -23,17 +23,17 @@ export function CalledCmmnProps(props) {
   const entries = [
     {
       id: 'calledElementCaseRef',
-      component: <CaseRef element={ element } />,
+      component: CaseRef,
       isEdited: isTextFieldEntryEdited
     },
     {
       id: 'calledElementCaseBinding',
-      component: <CaseBinding element={ element } />,
+      component: CaseBinding,
       isEdited: isSelectEntryEdited
     },
     {
       id: 'calledElementCaseTenantId',
-      component: <CaseTenantId element={ element } />,
+      component: CaseTenantId,
       isEdited: isTextFieldEntryEdited
     }
   ];
@@ -42,7 +42,7 @@ export function CalledCmmnProps(props) {
     entries.splice(-1, 0,
       {
         id: 'calledElementCaseVersion',
-        component: <CaseVersion element={ element } />,
+        component: CaseVersion,
         isEdited: isTextFieldEntryEdited
       }
     );

src/provider/camunda-platform/properties/CandidateStarterProps.js

@@ -25,12 +25,12 @@ export function CandidateStarterProps(props) {
   return [
     {
       id: 'candidateStarterGroups',
-      component: <CandidateStarterGroups element={ element } />,
+      component: CandidateStarterGroups,
       isEdited: isTextFieldEntryEdited
     },
     {
       id: 'candidateStarterUsers',
-      component: <CandidateStarterUsers element={ element } />,
+      component: CandidateStarterUsers,
       isEdited: isTextFieldEntryEdited
     }
   ];