fix: 🎨 setup autocomplete

Author: ahwelgemoed

packages/utilities/useDomLocation/package.json

@@ -11,8 +11,8 @@
     "node": ">=10"
   },
   "scripts": {
-    "start": "tsdx watch",
-    "build": "tsdx build",
+    "start": "npx tsdx watch",
+    "build": "npx tsdx build",
     "test": "tsdx test --passWithNoTests",
     "lint": "tsdx lint",
     "prepare": "tsdx build",

packages/utilities/useDomLocation/src/index.tsx

@@ -25,6 +25,8 @@ export function useDomLocation({
   };
 
   const onMutation = (): void => {
+    console.log('Mute Me Buddy 🧎🏽‍♂️🧎🏽‍♂️🧎🏽‍♂️🧎🏽‍♂️');
+
     setLastUpdateTime(new Date());
     if (useMendixNav) {
       const mxWindow = window.mx.ui.getContentForm();
@@ -88,7 +90,7 @@ export function useDomLocation({
       subtree: true,
     });
     lastScrollTopRef.current = observer;
-    window.onpopstate = function() {
+    window.onpopstate = function () {
       onMutation();
     };
   };

packages/web-widgets/auto-complete-widget/src/Autocompletewidget.tsx

@@ -6,7 +6,39 @@ import { AutocompletewidgetContainerProps } from "../typings/AutocompletewidgetP
 import "./ui/Autocompletewidget.css";
 
 export default class Autocompletewidget extends Component<AutocompletewidgetContainerProps> {
+    click = (object: any) => {
+        console.log(`object`, object);
+
+        this.props.volatileDate?.setValue(JSON.stringify(object));
+    };
     render(): ReactNode {
-        return <HelloWorldSample sampleText={this.props.sampleText ? this.props.sampleText : "World"} />;
+        console.log(`this.props`, this.props);
+
+        if (this.props.dataSourceOptions.status === "available") {
+            console.log(
+                this.props.dataSourceOptions.items?.map(item => {
+                    console.log(`item`, this.props.titleAttr(item));
+                })
+            );
+            return (
+                <div>
+                    {this.props.dataSourceOptions.items?.map(item => {
+                        return (
+                            <div>
+                                <span onClick={() => this.click(this.props.titleAttr(item).value)}>
+                                    {this.props.titleAttr(item).value}
+                                </span>
+                            </div>
+                        );
+                    })}
+                </div>
+            );
+        } else {
+            return <HelloWorldSample sampleText={this.props.sampleText ? this.props.sampleText : "World"} />;
+        }
     }
 }
+
+// call change on each select
+
+// On Close of drop down

packages/web-widgets/auto-complete-widget/src/Autocompletewidget.xml

@@ -23,6 +23,17 @@
                     <attributeType name="String"/>
                 </attributeTypes>
             </property>
+            <property key="volatileDate" type="attribute" required="false" onChange="onClick">
+                  <caption>Editable date</caption>
+                  <description>This attribute is used when a user clicks on a date in the calendar</description>
+                  <attributeTypes>
+                      <attributeType name="String"/>
+                  </attributeTypes>
+            </property>
+            <property key="onClick" type="action">
+                <caption>On click</caption>
+                <description>This action will not be called when secondary buttons are used.</description>
+            </property>
         </propertyGroup>
     </properties>
 </widget>

packages/web-widgets/auto-complete-widget/typings/AutocompletewidgetProps.d.ts

@@ -0,0 +1,29 @@
+/**
+ * This file was generated from Autocompletewidget.xml
+ * WARNING: All changes made to this file will be overwritten
+ * @author Mendix UI Content Team
+ */
+import { CSSProperties } from "react";
+import { ActionValue, EditableValue, ListValue, ListAttributeValue } from "mendix";
+
+export interface AutocompletewidgetContainerProps {
+    name: string;
+    class: string;
+    style?: CSSProperties;
+    tabIndex?: number;
+    sampleText: string;
+    dataSourceOptions: ListValue;
+    titleAttr: ListAttributeValue<string>;
+    volatileDate?: EditableValue<string>;
+    onClick?: ActionValue;
+}
+
+export interface AutocompletewidgetPreviewProps {
+    class: string;
+    style: string;
+    sampleText: string;
+    dataSourceOptions: {} | null;
+    titleAttr: string;
+    volatileDate: string;
+    onClick: {} | null;
+}

packages/web-widgets/call-on-land/.eslintrc.js

@@ -0,0 +1,5 @@
+const base = require("@mendix/pluggable-widgets-tools/configs/eslint.ts.base.json");
+
+module.exports = {
+    ...base
+};

packages/web-widgets/call-on-land/.gitattributes

@@ -0,0 +1,15 @@
+* text=auto
+*.ts text eol=lf
+*.tsx text eol=lf
+*.js text eol=lf
+*.jsx text eol=lf
+*.css text eol=lf
+*.scss text eol=lf
+*.json text eol=lf
+*.xml text eol=lf
+*.md text eol=lf
+*.gitattributes eol=lf
+*.gitignore eol=lf
+*.png binary
+*.jpg binary
+*.gif binary

packages/web-widgets/call-on-land/.gitignore

@@ -0,0 +1,5 @@
+dist/
+node_modules/
+tests/testProject/
+*.log
+.env

packages/web-widgets/call-on-land/.prettierignore

@@ -0,0 +1 @@
+tests/testProject/

packages/web-widgets/call-on-land/LICENSE

@@ -0,0 +1,15 @@
+The Apache License v2.0
+
+Copyright 2020 Mendix Technology BV
+
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+    http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.