Added onfocus, fixed autosearch clearing itself on widget reload

.gitignore

@@ -0,0 +1 @@
+node_modules

dist/tmp/widgets/Autosearch.xml

@@ -16,12 +16,31 @@
                         <attributeType name="String"/>
                     </attributeTypes>
                 </property>
+                <property key="editable" type="boolean" required="true" defaultValue="true">
+                    <caption>Editable</caption>
+                    <description/>
+                </property>
+                <property key="autoFocus" type="attribute">
+                    <caption>Auto focus</caption>
+                    <description>Boolean attribute to focus the element.</description>
+                    <attributeTypes>
+                        <attributeType name="Boolean"/>
+                    </attributeTypes>
+                </property>
             </propertyGroup>
             <propertyGroup caption="Events">
                 <property key="onChange" type="action" required="false">
                     <caption>On change</caption>
                     <description/>
                 </property>
+                <property key="onEnter" type="action" required="false">
+                    <caption>On focus</caption>
+                    <description/>
+                </property>
+                <property key="onLeave" type="action" required="false">
+                    <caption>On submit</caption>
+                    <description/>
+                </property>
             </propertyGroup>
             <propertyGroup caption="Common">
                 <systemProperty key="Name"/>

dist/tmp/widgets/incentro/autosearch/Autosearch.js

@@ -244,12 +244,15 @@ __webpack_require__.r(__webpack_exports__);
 const defaultStyle = {
     container: {},
     label: {
-        color: "#F6BB42"
+        color: "#003C85"
     },
-    input: {
-        height: 45,
-        borderBottomWidth: 1,
-        borderBottomColor: '#de712b',
+    input: {},
+    text: {
+        color: "#003C85",
+        fontSize: 15,
+        paddingTop: 10,
+        paddingLeft: 10,
+        paddingBottom: 10
     }
 };
 class Autosearch extends react__WEBPACK_IMPORTED_MODULE_0__["Component"] {
@@ -257,20 +260,56 @@ class Autosearch extends react__WEBPACK_IMPORTED_MODULE_0__["Component"] {
         super(props);
         this.styles = Object(_mendix_pluggable_widgets_tools__WEBPACK_IMPORTED_MODULE_2__["mergeNativeStyles"])(defaultStyle, this.props.style);
         this.onChangeHandler = this.onChange.bind(this);
+        this.onTouchStart = this.onTouch.bind(this);
+        this.onEndHandler = this.onEnd.bind(this);
+        this.onLeaveHandler = this.onLeave.bind(this);
+        this.inputRef = Object(react__WEBPACK_IMPORTED_MODULE_0__["createRef"])();
         this.state = {
-            textboxValue: '',
+            textboxValue: this.props.searchvalue.displayValue,
         };
     }
+    componentDidUpdate(prevProps) {
+        var _a;
+        if (prevProps.autoFocus !== this.props.autoFocus) {
+            if (this.props.autoFocus.value) {
+                setTimeout(() => {
+                    var _a;
+                    (_a = this.inputRef.current) === null || _a === void 0 ? void 0 : _a.focus();
+                    this.props.autoFocus.setValue(false);
+                    return;
+                }, 500);
+            }
+        }
+        if (prevProps.searchvalue !== this.props.searchvalue) {
+            if (this.props.searchvalue === undefined || this.props.searchvalue.displayValue === '') {
+                this.setState({ textboxValue: '' });
+                (_a = this.inputRef.current) === null || _a === void 0 ? void 0 : _a.clear;
+            }
+            else {
+                this.setState({ textboxValue: this.props.searchvalue.displayValue });
+            }
+        }
+    }
     render() {
-        return (Object(react__WEBPACK_IMPORTED_MODULE_0__["createElement"])(react_native__WEBPACK_IMPORTED_MODULE_1__["View"], { style: this.styles.container },
-            Object(react__WEBPACK_IMPORTED_MODULE_0__["createElement"])(react_native__WEBPACK_IMPORTED_MODULE_1__["TextInput"], { style: this.styles.input, value: this.state.textboxValue, onChangeText: this.onChangeHandler, placeholder: 'Zoeken...' })));
+        return (Object(react__WEBPACK_IMPORTED_MODULE_0__["createElement"])(react_native__WEBPACK_IMPORTED_MODULE_1__["View"], { style: this.styles.input },
+            Object(react__WEBPACK_IMPORTED_MODULE_0__["createElement"])(react_native__WEBPACK_IMPORTED_MODULE_1__["TextInput"], { style: this.styles.text, value: this.state.textboxValue, onChangeText: this.onChangeHandler, onFocus: this.onTouchStart, onSubmitEditing: this.onLeaveHandler, onEndEditing: this.onEndHandler, placeholder: 'Zoeken naar monumentenborden', placeholderTextColor: "#5997C0", editable: this.props.editable, ref: this.inputRef })));
     }
     onChange(text) {
-        var _a;
         this.setState({ textboxValue: text });
         this.props.searchvalue.setValue(text);
+    }
+    onTouch() {
+        var _a;
+        (_a = this.props.onEnter) === null || _a === void 0 ? void 0 : _a.execute();
+    }
+    onEnd() {
+        var _a;
         (_a = this.props.onChange) === null || _a === void 0 ? void 0 : _a.execute();
     }
+    onLeave() {
+        var _a;
+        (_a = this.props.onLeave) === null || _a === void 0 ? void 0 : _a.execute();
+    }
 }
 
 

src/Autosearch.tsx

@@ -1,4 +1,4 @@
-import { Component, ReactNode, createElement } from "react";
+import { Component, ReactNode, createElement, createRef } from "react";
 import { TextStyle, ViewStyle, TextInput, View } from "react-native";
 
 import { Style, mergeNativeStyles } from "@mendix/pluggable-widgets-tools";
@@ -16,32 +16,72 @@ interface State {
 }
 
 const defaultStyle: AutosearchStyle = {
-    container: {},
+    container: {
+    },
     label: {
-        color: "#F6BB42"
+        color: "#003C85"
     },
     input: {
-        height: 45,
-        borderBottomWidth: 1,
-        borderBottomColor: '#de712b',
+    },
+    text: {
+        color: "#003C85",
+        fontSize: 15,
+        paddingTop: 10,
+        paddingLeft: 10,
+        paddingBottom: 10
     }
 };
 
 export class Autosearch extends Component<AutosearchProps<AutosearchStyle>, State> {
     private readonly styles = mergeNativeStyles(defaultStyle, this.props.style);
     private readonly onChangeHandler = this.onChange.bind(this);
+    private readonly onTouchStart = this.onTouch.bind(this);
+    private readonly onEndHandler = this.onEnd.bind(this);
+    private readonly onLeaveHandler = this.onLeave.bind(this);
+    inputRef = createRef<TextInput>();
     constructor(props: AutosearchProps<AutosearchStyle>){
         super(props)
         this.state = {
-               textboxValue: '',
+               textboxValue: this.props.searchvalue.displayValue,
         }
     }
 
+    componentDidUpdate(prevProps: AutosearchProps<AutosearchStyle>) {
+        if (prevProps.autoFocus !== this.props.autoFocus) {
+            if (this.props.autoFocus.value) {
+                setTimeout(() => { 
+                    this.inputRef.current?.focus();
+                    this.props.autoFocus.setValue(false);
+                    return;
+                }, 500)
+            }
+        }
+        if (prevProps.searchvalue !== this.props.searchvalue) {
+            if (this.props.searchvalue === undefined || this.props.searchvalue.displayValue === '') {
+                this.setState({textboxValue: ''});
+                this.inputRef.current?.clear;
+            }
+            else {
+                this.setState({textboxValue: this.props.searchvalue.displayValue});
+            }
+        }
+    }
 
     render(): ReactNode {
         return (
-        <View style={this.styles.container}> 
-                <TextInput style={this.styles.input} value={this.state.textboxValue} onChangeText={this.onChangeHandler} placeholder={'Zoeken...'}></TextInput>
+        <View style={this.styles.input}> 
+                <TextInput style={this.styles.text} 
+                value={this.state.textboxValue} 
+                onChangeText={this.onChangeHandler}
+                onFocus={this.onTouchStart}
+                onSubmitEditing={this.onLeaveHandler}
+                onEndEditing={this.onEndHandler}
+                placeholder={'Zoeken naar monumentenborden'}
+                placeholderTextColor="#5997C0"
+                editable={this.props.editable}
+                ref={this.inputRef}
+                >
+                </TextInput>
         </View>
         )
     }
@@ -49,6 +89,17 @@ export class Autosearch extends Component<AutosearchProps<AutosearchStyle>, Stat
     private onChange(text: string) {
         this.setState({textboxValue: text});
         this.props.searchvalue.setValue(text);
+    }
+
+    private onTouch() {
+        this.props.onEnter?.execute();
+    }
+
+    private onEnd() {
         this.props.onChange?.execute();
     }
+
+    private onLeave() {
+        this.props.onLeave?.execute();
+    }
 }

src/Autosearch.xml

@@ -16,12 +16,31 @@
                         <attributeType name="String"/>
                     </attributeTypes>
                 </property>
+                <property key="editable" type="boolean" required="true" defaultValue="true">
+                    <caption>Editable</caption>
+                    <description/>
+                </property>
+                <property key="autoFocus" type="attribute">
+                    <caption>Auto focus</caption>
+                    <description>Boolean attribute to focus the element.</description>
+                    <attributeTypes>
+                        <attributeType name="Boolean"/>
+                    </attributeTypes>
+                </property>
             </propertyGroup>
             <propertyGroup caption="Events">
                 <property key="onChange" type="action" required="false">
                     <caption>On change</caption>
                     <description/>
                 </property>
+                <property key="onEnter" type="action" required="false">
+                    <caption>On focus</caption>
+                    <description/>
+                </property>
+                <property key="onLeave" type="action" required="false">
+                    <caption>On submit</caption>
+                    <description/>
+                </property>
             </propertyGroup>
             <propertyGroup caption="Common">
                 <systemProperty key="Name"/>

typings/AutosearchProps.d.ts

@@ -9,12 +9,20 @@ export interface AutosearchProps<Style> {
     name: string;
     style: Style[];
     searchvalue: EditableValue<string>;
+    editable: boolean;
+    autoFocus: EditableValue<boolean>;
     onChange?: ActionValue;
+    onEnter?: ActionValue;
+    onLeave?: ActionValue;
 }
 
 export interface AutosearchPreviewProps {
     class: string;
     style: string;
     searchvalue: string;
+    editable: boolean;
+    autoFocus: string;
     onChange: {} | null;
+    onEnter: {} | null;
+    onLeave: {} | null;
 }