Prepare for 1.1.0

Author: JelteMX

README.md

@@ -53,6 +53,10 @@ Place the widget inside or outside a context object, based on if you need this f
 
 Test-project can be found here: [https://dropdownpluginwidg-sandbox.mxapps.io](https://dropdownpluginwidg-sandbox.mxapps.io)
 
+## Known issues
+
+- **(Platform issue)** __A Dropdown container cannot be used directly in a listview, only a dataview.__ If you want to use a dropdown in a listview, make sure you surround your container with a dataview. Obviously this should be the same as the context. One way to do this is to add a dataview with a Nanoflow datasource. The Nanoflow simply passes the context object to the dataview
+
 ## Issues, suggestions and feature requests
 
 Please report your issues/suggestions [here](https://github.com/JelteMX/mendix-dropdown-container/issues)

package.json

@@ -1,7 +1,7 @@
 {
   "name": "dropdowncontainer",
   "widgetName": "DropdownContainer",
-  "version": "1.0.0",
+  "version": "1.1.0",
   "description": "Place Mendix components in a dropdown",
   "copyright": "Mendix 2019",
   "author": "Jelte Lagendijk <jelte.lagendijk@mendix.com>",

src/DropdownContainer.tsx

@@ -1,36 +1,26 @@
-import { Component, ReactNode, createElement } from "react";
+import { ReactNode, createElement } from "react";
 import { DropDown, getFilteredProps, DropDownProps } from "./components/DropDown";
 import { hot } from "react-hot-loader/root";
 import { DropdownContainerContainerProps } from "../typings/DropdownContainerProps";
 
 import "./ui/DropdownContainer.scss";
 
-class DropdownContainer extends Component<DropdownContainerContainerProps> {
-    constructor(props: DropdownContainerContainerProps) {
-        super(props);
+const DropdownContainer = (props: DropdownContainerContainerProps): ReactNode => {
+    const filteredProps: DropDownProps = getFilteredProps(props);
+    const { generalButtonText, style, splitButtonSplitButtonClicked } = props;
 
-        this.handleClick = this.handleClick.bind(this);
-    }
-
-    render(): ReactNode {
-        const filteredProps: DropDownProps = getFilteredProps(this.props);
-        const { generalButtonText, style } = this.props;
-
-        if (!generalButtonText) {
-            return null;
+    const handleClick = (): void => {
+        if (splitButtonSplitButtonClicked && splitButtonSplitButtonClicked.canExecute) {
+            splitButtonSplitButtonClicked.execute();
         }
-        const buttonText = generalButtonText.status === "available" ? generalButtonText.value : "";
+    };
 
-        return (
-            <DropDown {...filteredProps} buttonText={buttonText} splitButtonAction={this.handleClick} style={style} />
-        );
+    if (!generalButtonText) {
+        return null;
     }
+    const buttonText = generalButtonText.status === "available" ? generalButtonText.value : "";
 
-    private handleClick(): void {
-        if (this.props.splitButtonSplitButtonClicked && this.props.splitButtonSplitButtonClicked.canExecute) {
-            this.props.splitButtonSplitButtonClicked.execute();
-        }
-    }
-}
+    return <DropDown {...filteredProps} buttonText={buttonText} splitButtonAction={handleClick} style={style} />;
+};
 
 export default hot(DropdownContainer);

src/DropdownContainer.xml

@@ -1,5 +1,5 @@
 <?xml version="1.0" encoding="utf-8" ?>
-<widget id="mendix.dropdowncontainer.DropdownContainer" pluginWidget="true" needsEntityContext="true" offlineCapable="true"
+<widget id="mendix.dropdowncontainer.DropdownContainer" pluginWidget="true" offlineCapable="true"
         supportedPlatform="Web"
         xmlns="http://www.mendix.com/widget/1.0/" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
         xsi:schemaLocation="http://www.mendix.com/widget/1.0/ ../node_modules/mendix/custom_widget.xsd">

src/components/DropDown.tsx

@@ -98,7 +98,7 @@ export class DropDownInternal extends Component<DropDownProps, DropDownState> {
         $menu.find("button, a").each(function() {
             const $el = $(this);
 
-            if (!$el.data(dropDownDataAttribute)) {
+            if ($el && !$el.data(dropDownDataAttribute)) {
                 $el.data(dropDownDataAttribute, true);
                 const el = $el.get(0) as HTMLElement;
                 el.addEventListener("click", closeMenu);
@@ -108,7 +108,7 @@ export class DropDownInternal extends Component<DropDownProps, DropDownState> {
         $menu.find(".mx-listview-clickable .mx-list").each(function() {
             const $el = $(this);
 
-            if (!$el.data(dropDownDataAttribute)) {
+            if ($el && !$el.data(dropDownDataAttribute)) {
                 $el.data(dropDownDataAttribute, true);
                 const el = $el.get(0) as HTMLElement;
                 el.addEventListener("click", closeMenu, true);

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="DropdownContainer" version="1.0.0" xmlns="http://www.mendix.com/clientModule/1.0/">
+    <clientModule name="DropdownContainer" version="1.1.0" xmlns="http://www.mendix.com/clientModule/1.0/">
         <widgetFiles>
             <widgetFile path="DropdownContainer.xml"/>
         </widgetFiles>