Changed boolean to event, to execute in Mendix

README.md

@@ -1,25 +1,17 @@
 ## Backhandler
-Widget to disregard back events on page when using Mendix Native.
+[Disregard back events on page]
+
+## Features
+[feature highlights]
 
 ## Usage
-For development:
-
-Create customwidgets folder in root of project directory
-Git clone this repo into customwidgets folder
-Open command prompt in cloned folder
-npm i
-npm run dev / npm run build
-Widget can now be used inside Mendix.
-
-For plain usage:
-
-Copy MPK file in releases to widgets directory.
+[step by step instructions]
 
 ## Demo project
-Not available yet.
+[link to sandbox]
 
 ## Issues, suggestions and feature requests
-https://github.com/IncentroBA/backhandler/issues
+[link to GitHub issues]
 
 ## Development and contribution
-N/A
+[specify contribute]

dist/tmp/widgets/Backhandler.xml

@@ -7,13 +7,10 @@
     <description>Disregard back events on page</description>
     <icon/>
     <properties>
-        <propertyGroup caption="General">
-            <property key="disableBack" type="attribute" required="true">
-                <caption>Disable</caption>
-                <description>Boolean for enabling/disabling backhandler</description>
-                <attributeTypes>
-                    <attributeType name="Boolean"/>
-                </attributeTypes>
+        <propertyGroup caption="Events">
+            <property key="onBack" type="action" required="false">
+                <caption>On backpress</caption>
+                <description>Flow to call when hardware backbutton is used.</description>
             </property>
             </propertyGroup>
     </properties>

dist/tmp/widgets/incentro/backhandler/Backhandler.js

@@ -112,14 +112,14 @@ class Backhandler extends react__WEBPACK_IMPORTED_MODULE_0__["Component"] {
         return (Object(react__WEBPACK_IMPORTED_MODULE_0__["createElement"])(react_native__WEBPACK_IMPORTED_MODULE_1__["View"], null));
     }
     componentWillMount() {
-        if (this.props.disableBack) {
         react_native__WEBPACK_IMPORTED_MODULE_1__["BackHandler"].addEventListener('hardwareBackPress', this.handleBackButtonClick);
     }
-    }
     componentWillUnmount() {
         react_native__WEBPACK_IMPORTED_MODULE_1__["BackHandler"].removeEventListener('hardwareBackPress', this.handleBackButtonClick);
     }
     handleBackButtonClick() {
+        var _a;
+        (_a = this.props.onBack) === null || _a === void 0 ? void 0 : _a.execute();
         return true;
     }
 }

src/Backhandler.tsx

@@ -16,6 +16,7 @@ export class Backhandler extends Component<BackhandlerProps<CustomStyle>> {
         this.handleBackButtonClick = this.handleBackButtonClick.bind(this);
     }
 
+    //We have to have a render block, or else Mendix Native will crash. Render block is expected.
     render(): ReactNode {
         return (
         <View></View>
@@ -23,16 +24,15 @@ export class Backhandler extends Component<BackhandlerProps<CustomStyle>> {
     }
 
     componentWillMount() {
-        if (this.props.disableBack) {
         BackHandler.addEventListener('hardwareBackPress', this.handleBackButtonClick);
     }
-    }
     
     componentWillUnmount() {
         BackHandler.removeEventListener('hardwareBackPress', this.handleBackButtonClick);
     }
     
     handleBackButtonClick() {
+        this.props.onBack?.execute();
         return true;
     }
 }

src/Backhandler.xml

@@ -7,13 +7,10 @@
     <description>Disregard back events on page</description>
     <icon/>
     <properties>
-        <propertyGroup caption="General">
-            <property key="disableBack" type="attribute" required="true">
-                <caption>Disable</caption>
-                <description>Boolean for enabling/disabling backhandler</description>
-                <attributeTypes>
-                    <attributeType name="Boolean"/>
-                </attributeTypes>
+        <propertyGroup caption="Events">
+            <property key="onBack" type="action" required="false">
+                <caption>On backpress</caption>
+                <description>Flow to call when hardware backbutton is used.</description>
             </property>
             </propertyGroup>
     </properties>

typings/BackhandlerProps.d.ts

@@ -3,16 +3,16 @@
  * WARNING: All changes made to this file will be overwritten
  * @author Mendix UI Content Team
  */
-import { EditableValue } from "mendix";
+import { ActionValue } from "mendix";
 
 export interface BackhandlerProps<Style> {
     name: string;
     style: Style[];
-    disableBack: EditableValue<boolean>;
+    onBack?: ActionValue;
 }
 
 export interface BackhandlerPreviewProps {
     class: string;
     style: string;
-    disableBack: string;
+    onBack: {} | null;
 }