Added facility to add action on tab change (#4)

* added facility to add action on tab change * Update README.md --------- Co-authored-by: Amogh.Shah <[email protected]>
mendixlabs · Oct 26, 2023 · e0e6034 · e0e6034
1 parent 3699322
commit e0e6034
Show file tree

Hide file tree

Showing 7 changed files with 38 additions and 10 deletions.
diff --git a/README.md b/README.md
@@ -7,7 +7,8 @@ Use this pluggable widget to dynamically set the active tab page. The default Ta
 ## Features
 - Dynamically open tab page
 - Get tab page number on which user has clicked
-- Tested on Mendix 8.18.19, 9.1.1, 9.6.0, 9.7.0, 9.11.0 and 9.15.1
+- Call a Microflow on change of active tab
+- Tested on Mendix 8.18.19, 9.1.1, 9.6.0, 9.7.0, 9.11.0, 9.15.1, 9.24.9 and 10.3.1
 
 ## Demo and Playground
 Try-out this widget by visiting https://tabselectorwidgetapp-sandbox.mxapps.io/

diff --git a/package.json b/package.json
@@ -1,7 +1,7 @@
 {
   "name": "tabpageselector",
   "widgetName": "TabPageSelector",
-  "version": "1.0.1",
+  "version": "1.1.0",
   "description": "Use this widget to dynamically set the active tab page.",
   "copyright": "2020 Mendix Technology BV",
   "author": "Amogh Shah",

diff --git a/src/TabPageSelector.tsx b/src/TabPageSelector.tsx
@@ -2,7 +2,16 @@ import { Component, ReactNode } from "react";
 import { Big } from "big.js";
 import { TabPageSelectorContainerProps } from "../typings/TabPageSelectorProps";
 
-export default class TabPageSelector extends Component<TabPageSelectorContainerProps> {
+type TabPageSelectorState = { currentTabIndex: number };
+
+export default class TabPageSelector extends Component<TabPageSelectorContainerProps, TabPageSelectorState> {
+    constructor(props: TabPageSelectorContainerProps | Readonly<TabPageSelectorContainerProps>) {
+        super(props);
+        this.state = {
+            currentTabIndex: 0
+        };
+    }
+
     render(): ReactNode {
         if (this.props.paneIndexByAttr === undefined) {
             console.error("Tab page selector not specified. Please specify the attribute to determine tab pane index.");
@@ -24,11 +33,21 @@ export default class TabPageSelector extends Component<TabPageSelectorContainerP
             .querySelectorAll(".mx-name-" + this.props.targetTabCtrl + " > ul")
             .forEach((ultValue, _ulIndex, _listObj) => {
                 ultValue.querySelectorAll("li").forEach((currentValue, _currentIndex, _listObj) => {
-                    console.log(currentValue);
                     currentValue.addEventListener(
                         "click",
                         () => {
-                            this.props.paneIndexByAttr?.setValue(Big(_currentIndex + 1));
+                            if (_currentIndex !== this.state.currentTabIndex) {
+                                this.setState({ currentTabIndex: _currentIndex });
+                                this.props.paneIndexByAttr?.setValue(Big(_currentIndex + 1));
+                                if (
+                                    this.props.onChangeAction != undefined &&
+                                    this.props.onChangeAction.canExecute &&
+                                    !this.props.onChangeAction.isExecuting
+                                ) {
+                                    console.debug("Executing action for TabPageSelector ", this.props.name);
+                                    this.props.onChangeAction.execute();
+                                }
+                            }
                         },
                         false
                     );
@@ -37,7 +56,7 @@ export default class TabPageSelector extends Component<TabPageSelectorContainerP
     }
     componentDidUpdate(
         _prevProps: Readonly<TabPageSelectorContainerProps>,
-        _prevState: Readonly<{}>,
+        _prevState: Readonly<TabPageSelectorState>,
         // eslint-disable-next-line  @typescript-eslint/no-explicit-any
         _snapshot?: any
     ): void {
@@ -64,7 +83,7 @@ export default class TabPageSelector extends Component<TabPageSelectorContainerP
                     console.debug("Determined tab page number is: " + this.props.paneIndexByAttr.value);
                     console.error("Unable find tab page by specified number.");
                 }
-                if (li != null) {
+                if (li != null && !li.classList.contains("active")) {
                     li.click();
                 }
             }, this);

diff --git a/src/TabPageSelector.xml b/src/TabPageSelector.xml
@@ -18,6 +18,12 @@
                 <attributeTypes>
                     <attributeType name="Integer"/>
                 </attributeTypes>
+            </property>            
+        </propertyGroup>
+        <propertyGroup caption="Events">
+            <property key="onChangeAction" type="action" required="false">
+                <caption>On tab change</caption>
+                <description>Select an action to be performed when the active tab is changed</description>
             </property>
         </propertyGroup>
     </properties>

diff --git a/src/package.xml b/src/package.xml
@@ -1,6 +1,6 @@
 <?xml version="1.0" encoding="utf-8" ?>
 <package xmlns="http://www.mendix.com/package/1.0/">
-    <clientModule name="TabPageSelector" version="1.0.1" xmlns="http://www.mendix.com/clientModule/1.0/">
+    <clientModule name="TabPageSelector" version="1.1.0" xmlns="http://www.mendix.com/clientModule/1.0/">
         <widgetFiles>
             <widgetFile path="TabPageSelector.xml"/>
         </widgetFiles>

diff --git a/tsconfig.json b/tsconfig.json
@@ -1,3 +1,3 @@
 {
   "extends": "./node_modules/@mendix/pluggable-widgets-tools/configs/tsconfig.base.json"
-}
+}
diff --git a/typings/TabPageSelectorProps.d.ts b/typings/TabPageSelectorProps.d.ts
@@ -4,7 +4,7 @@
  * @author Mendix UI Content Team
  */
 import { CSSProperties } from "react";
-import { EditableValue } from "mendix";
+import { ActionValue, EditableValue } from "mendix";
 
 export interface TabPageSelectorContainerProps {
     name: string;
@@ -13,11 +13,13 @@ export interface TabPageSelectorContainerProps {
     tabIndex?: number;
     targetTabCtrl: string;
     paneIndexByAttr: EditableValue<BigJs.Big>;
+    onChangeAction?: ActionValue;
 }
 
 export interface TabPageSelectorPreviewProps {
     class: string;
     style: string;
     targetTabCtrl: string;
     paneIndexByAttr: string;
+    onChangeAction: {} | null;
 }