MATRIX-5759 integration with others property react sdk

package.json

@@ -38,10 +38,12 @@
     "ts-loader": "^9.4.2",
     "typescript": "^4.1.5",
     "webpack": "^5.75.0",
-    "webpack-cli": "^5.0.1"
+    "webpack-cli": "^5.0.1",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0"
   },
   "dependencies": {
-    "matrix-requirements-api": "^1.0.19",
+    "matrix-requirements-api": "^1.0.20",
     "matrixrequirements-type-declarations": "^1.0.4"
   }
 }

src/BPP/Control/Control.tsx

@@ -0,0 +1,61 @@
+/// <reference types="matrixrequirements-type-declarations" />
+/// <reference types="matrix-requirements-api" />
+import {IPluginFieldOptions, IPluginFieldParameter, IPluginFieldValue, IPluginPrintParams} from "../Interfaces";
+import * as React from "react";
+import {FieldHandler} from "./FieldHandler";
+import * as ReactDOM from "react-dom";
+import {ControlComponent} from "./ControlComponent";
+
+
+export class Control extends matrixApi.ControlCore<IPluginFieldOptions, FieldHandler> {
+
+
+    /** default configuration of control */
+    protected controlConfig: IPluginFieldParameter = {
+        options: {}
+    };
+
+    /** method to call to initialize the editor, e.g. to attach handlers to checkboxes etc */
+    initEditor() {
+        let that = this;
+    }
+
+    /** this method is called by the UI to retrieve the string to be saved in the database */
+    getValue(): string {
+        return this.fieldHandler.getData();
+    }
+
+    /** interactive radio control */
+    protected renderEditor(fieldId: string, value: IPluginFieldValue, options: IPluginFieldOptions) {
+        this.fieldHandler.setValue(value);
+        let container = document.createElement("div");
+        ReactDOM.render(<ControlComponent print={false} valueChanged={(data) => {
+            this.handleValueChange(data)
+        }}
+                                          value={value}/>, container)
+        return $(container);
+    }
+
+    /**  readonly printing for custom section, tooltip, zen or user without right to edit */
+    protected renderPrint(fieldId: string, value: IPluginFieldValue, options: IPluginFieldOptions, params: IPluginPrintParams) {
+        this.fieldHandler.setValue(value);
+        let container = document.createElement("div");
+        ReactDOM.render(<ControlComponent print={true} value={value} valueChanged={(data) => {
+        }}/>, container)
+        return $(container);
+    }
+
+    /** this method compares the to value of the control to another previous value */
+    protected isSame(a: IPluginFieldValue, b: IPluginFieldValue) {
+        return JSON.stringify(a) === JSON.stringify(b);
+    }
+
+    private handleValueChange(data: IPluginFieldValue) {
+        this.fieldHandler.setValue(data)
+        this.hasChanged();
+        if (this && this.settings && this.settings.valueChanged) {
+            // Call hook to notify the form that the value has changed.
+            this.settings.valueChanged();
+        }
+    }
+}

src/BPP/Control/ControlComponent.tsx

@@ -0,0 +1,26 @@
+/**
+ * This implements a field which can be added to a category to be displayed when editing an item.
+ *
+ * These fields can be printed in using the custom print sections.
+ *
+ */
+import * as React from "react";
+import {IControlProp} from "../Interfaces";
+
+
+export const ControlComponent = (props: IControlProp) => {
+    const [value, setValue] = React.useState(props.value);
+    const handleChange = (val: string) => {
+        setValue({value: val});
+        props.valueChanged({value: val});
+    }
+    if (props.print) {
+        return <div>{value?.value}</div>
+    }
+    return <>
+        <div>
+            <span> <input autoComplete="off" className="lineInput form-control" value={value?.value}
+                          onChange={(event) => handleChange(event.target.value)}/> </span>
+        </div>
+    </>
+}