Fix listen to grid

Author: McDoyen

package-lock.json

@@ -45,19 +45,19 @@
     "@types/enzyme-adapter-react-16": "^1.0.2",
     "@types/jasmine": "^3.3.1",
     "@types/karma": "^3.0.1",
-    "@types/node": "^10.12.12",
-    "@types/react": "^16.7.13",
+    "@types/node": "^10.12.15",
+    "@types/react": "^16.7.17",
     "@types/react-dom": "^16.0.11",
     "@types/react-select": "^1.3.0",
     "@types/webdriverio": "^4.13.0",
     "check-dependencies": "^1.0.1",
     "copy-webpack-plugin": "^4.6.0",
     "core-js": "^2.6.0",
     "css-loader": "^2.0.0",
-    "enzyme": "^3.7.0",
+    "enzyme": "^3.8.0",
     "enzyme-adapter-react-16": "^1.7.1",
     "extract-text-webpack-plugin": "^4.0.0-beta.0",
-    "fork-ts-checker-webpack-plugin": "^0.5.0",
+    "fork-ts-checker-webpack-plugin": "^0.5.2",
     "grunt": "^1.0.3",
     "grunt-check-dependencies": "^1.0.0",
     "grunt-contrib-clean": "^2.0.0",
@@ -79,14 +79,14 @@
     "karma-sourcemap-loader": "^0.3.7",
     "karma-spec-reporter": "0.0.32",
     "karma-webpack": "^3.0.5",
-    "mendix-client": "^7.15.5",
-    "mendix-widget-build-script": "^1.0.0-rc2",
+    "mendix-client": "^7.15.6",
+    "mendix-widget-build-script": "^1.0.3",
     "node-sass": "^4.11.0",
     "pre-commit": "^1.2.2",
-    "raw-loader": "^0.5.1",
+    "raw-loader": "^1.0.0",
     "react": "^16.6.3",
     "react-dom": "^16.6.3",
-    "react-hot-loader": "^4.3.11",
+    "react-hot-loader": "^4.6.0",
     "react-test-renderer": "^16.6.3",
     "remap-istanbul": "^0.12.0",
     "sass-loader": "^7.0.3",
@@ -99,7 +99,7 @@
     "typescript": "^3.2.2",
     "wdio-dot-reporter": "0.0.10",
     "wdio-jasmine-framework": "^0.3.8",
-    "wdio-selenium-standalone-service": "0.0.11",
+    "wdio-selenium-standalone-service": "0.0.12",
     "wdio-spec-reporter": "^0.1.3",
     "webdriverio": "^4.14.1",
     "webpack": "^4.27.1",

package.json

@@ -47,6 +47,8 @@ export class DropdownReference extends Component<DropdownProps> {
         };
 
         if (this.props.readOnlyStyle === "control" || (this.props.readOnlyStyle === "text" && !this.props.isReadOnly)) {
+            const loadOptions = (input?: string) => (this.props.asyncData as (input?: string) => Promise<{}>)(input);
+
             return createElement("div", {
                 className: "widget-dropdown-reference",
                 onClick: this.setDropdownSize
@@ -58,7 +60,7 @@ export class DropdownReference extends Component<DropdownProps> {
                     })
                     : createElement(Async, {
                         searchPromptText: this.props.searchPromptText,
-                        loadOptions: debounce(this.props.asyncData, 200),
+                        loadOptions: debounce(loadOptions, 200),
                         ...commonProps
                     }),
                 createElement(Alert, { className: "widget-dropdown-reference-alert" }, this.props.alertMessage)

src/DropdownReference/components/DropdownReference.ts

@@ -73,10 +73,10 @@ class DropdownReferenceContainer extends Component<ContainerProps, ContainerStat
     }
 
     componentWillReceiveProps(newProps: ContainerProps) {
-        if (newProps.mxObject !== this.props.mxObject) {
+        if (newProps.mxObject && newProps.mxObject !== this.props.mxObject) {
             this.getSelectedValue(newProps);
             this.resetSubscriptions(newProps.mxObject);
-            if (this.props.selectType === "normal") {
+            if (this.props.selectType === "normal" && newProps.mxObject) {
                 this.retrieveOptions(newProps);
             }
         } else {
@@ -238,9 +238,6 @@ class DropdownReferenceContainer extends Component<ContainerProps, ContainerStat
             if (input && input.length >= this.props.minimumCharacter) {
                 return this.retrieveOptions(this.props, input)
                     .then(() => Promise.resolve({ options: this.state.options }));
-            } else {
-                return this.getSelectedValue(this.props)
-                    .then(() => Promise.resolve({ options: [] }));
             }
         }
 

src/DropdownReference/components/DropdownReferenceContainer.ts

@@ -10,7 +10,7 @@ import "react-select/dist/react-select.css";
 import "../../SharedResources/ui/Dropdown.scss";
 
 export interface ReferenceOption {
-    value: string | boolean;
+    value: string;
     label: string;
 }
 
@@ -54,6 +54,8 @@ export class DropdownReferenceSet extends Component<DropdownProps> {
         };
 
         if (this.props.readOnlyStyle === "control" || (this.props.readOnlyStyle === "text" && !this.props.isReadOnly)) {
+            const loadOptions = (input?: string) => (this.props.asyncData as (input?: string) => Promise<{}>)(input);
+
             return createElement("div", {
                 className: "widget-dropdown-reference-set",
                 onClick: this.setDropdownSize
@@ -74,7 +76,7 @@ export class DropdownReferenceSet extends Component<DropdownProps> {
                     : createElement(Async, {
                         autoload: false,
                         autoFocus: true,
-                        loadOptions: debounce(this.props.asyncData, 200),
+                        loadOptions: debounce(loadOptions, 200),
                         searchPromptText: this.props.searchPromptText,
                         ...commonProps
                     }),

src/DropdownReferenceSet/components/DropdownReferenceSet.ts

@@ -33,7 +33,7 @@ export interface ContainerProps extends WrapperProps, DropdownProps {
 export interface ContainerState {
     isClearable: boolean;
     options: ReferenceOption[];
-    selected: any;
+    selected: ReferenceOption[] | any;
 }
 
 class DropdownReferenceSetContainer extends Component<ContainerProps, ContainerState> {
@@ -45,7 +45,6 @@ class DropdownReferenceSetContainer extends Component<ContainerProps, ContainerS
 
     private subscriptionHandles: number[] = [];
     private association: string = this.props.entityPath.split("/")[0];
-    private readonly handleOnClick: (selectedOption: ReferenceOption | any) => void = this.onChange.bind(this);
 
     render() {
         return createElement(DropdownReferenceSet, {
@@ -54,7 +53,7 @@ class DropdownReferenceSetContainer extends Component<ContainerProps, ContainerS
             data: this.state.options,
             asyncData: this.setAsyncOptions,
             emptyOptionCaption: this.props.emptyOptionCaption,
-            handleOnchange: this.handleOnClick,
+            handleOnchange: this.onChange,
             isClearable: this.props.isClearable,
             selectType: this.props.selectType,
             lazyFilter: this.props.lazyFilter,
@@ -74,7 +73,7 @@ class DropdownReferenceSetContainer extends Component<ContainerProps, ContainerS
     }
 
     componentWillReceiveProps(newProps: ContainerProps) {
-        if (newProps.mxObject !== this.props.mxObject) {
+        if (newProps.mxObject && newProps.mxObject !== this.props.mxObject) {
             const selected = newProps.mxObject.get(this.association);
             this.getSelectedValues(newProps);
             this.resetSubscriptions(newProps.mxObject);
@@ -130,7 +129,7 @@ class DropdownReferenceSetContainer extends Component<ContainerProps, ContainerS
         }
     }
 
-    private onChange(recentSelection: ReferenceOption[]) {
+    private onChange = (recentSelection: ReferenceOption[] | any) => {
         if (this.props.mxObject) {
             const selectedOptions: string[] = [];
 
@@ -245,9 +244,6 @@ class DropdownReferenceSetContainer extends Component<ContainerProps, ContainerS
             if (input && input.length >= this.props.minimumCharacter) {
                 return this.retrieveOptions(this.props, input)
                     .then(() => Promise.resolve({ options: this.state.options }));
-            } else {
-                return this.getSelectedValues(this.props)
-                    .then(() => Promise.resolve({ options: [] }));
             }
         }
 

src/DropdownReferenceSet/components/DropdownReferenceSetContainer.ts

@@ -22,9 +22,9 @@ describe("Alert", () => {
     });
 
     it("renders with the specified class", () => {
-        const alert = renderAlert({ className: "widget-color-picker-alert" }, alertMessage);
+        const alert = renderAlert({ className: "widget-dropdown-reference-alert" }, alertMessage);
 
-        expect(alert).toHaveClass("widget-color-picker-alert");
+        expect(alert).toHaveClass("widget-dropdown-reference-alert");
     });
 
     it("with no bootstrap style specified renders with the class alert-danger", () => {

src/SharedResources/components/__tests__/Alert.spec.ts

@@ -1,5 +1,9 @@
 @import "variables";
 .widget-dropdown-reference, .widget-dropdown-reference-set {
+  .widget-dropdown-reference-alert {
+    margin-top: 5px;
+  }
+
   .Select-arrow {
     display: none;
   }

src/SharedResources/ui/Dropdown.scss

@@ -3,6 +3,7 @@ const path = require("path");
 const CopyWebpackPlugin = require("copy-webpack-plugin");
 const ForkTsCheckerWebpackPlugin = require("fork-ts-checker-webpack-plugin");
 
+const packageName = process.env.npm_package_name;
 const mxHost = process.env.npm_package_config_mendixHost || "http://localhost:8080";
 const developmentPort = process.env.npm_package_config_developmentPort || "3000";