mxw-public/autosearch
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Update incentro.Autosearch.mpk, Autosearch.xml, and 5 more files...

Browse Source
This commit is contained in:
Bart Onstee
2022-04-11 22:10:31 +02:00
parent e663626780
commit f3988753d5
7 changed files with 66 additions and 7 deletions
Download Patch File Download Diff File Expand all files Collapse all files

BIN
dist/1.0.0/incentro.Autosearch.mpk vendored
View File

Binary file not shown.

7
dist/tmp/widgets/Autosearch.xml vendored
View File

@@ -20,6 +20,13 @@
<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">

30
dist/tmp/widgets/incentro/autosearch/Autosearch.js vendored
View File

@@ -244,13 +244,15 @@ __webpack_require__.r(__webpack_exports__);
const defaultStyle = {
container: {},
label: {
color: "#5997C0"
color: "#003C85"
},
input: {},
text: {
color: "#5997C0",
color: "#003C85",
fontSize: 15,
padding: 10,
paddingTop: 10,
paddingLeft: 10,
paddingBottom: 10
}
};
class Autosearch extends react__WEBPACK_IMPORTED_MODULE_0__["Component"] {
@@ -260,13 +262,33 @@ class Autosearch extends react__WEBPACK_IMPORTED_MODULE_0__["Component"] {
this.onChangeHandler = this.onChange.bind(this);
this.onTouchStart = this.onTouch.bind(this);
this.onEndHandler = this.onEnd.bind(this);
this.inputRef = Object(react__WEBPACK_IMPORTED_MODULE_0__["createRef"])();
this.state = {
textboxValue: '',
};
}
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;
}
}
}
render() {
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, onTouchStart: this.onTouchStart, onEndEditing: this.onEndHandler, placeholder: 'Zoeken naar monumentenborden', placeholderTextColor: "#5997C0", editable: this.props.editable })));
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, onTouchStart: this.onTouchStart, onEndEditing: this.onEndHandler, placeholder: 'Zoeken naar monumentenborden', placeholderTextColor: "#5997C0", editable: this.props.editable, ref: this.inputRef })));
}
onChange(text) {
this.setState({ textboxValue: text });

2
dist/tmp/widgets/incentro/autosearch/Autosearch.js.map vendored
View File

File diff suppressed because one or more lines are too long

25
src/Autosearch.tsx
View File

@@ -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";
@@ -26,7 +26,9 @@ const defaultStyle: AutosearchStyle = {
text: {
color: "#003C85",
fontSize: 15,
padding: 10,
paddingTop: 10,
paddingLeft: 10,
paddingBottom: 10
}
};
@@ -35,6 +37,7 @@ export class Autosearch extends Component<AutosearchProps<AutosearchStyle>, Stat
private readonly onChangeHandler = this.onChange.bind(this);
private readonly onTouchStart = this.onTouch.bind(this);
private readonly onEndHandler = this.onEnd.bind(this);
inputRef = createRef<TextInput>();
constructor(props: AutosearchProps<AutosearchStyle>){
super(props)
this.state = {
@@ -42,6 +45,23 @@ export class Autosearch extends Component<AutosearchProps<AutosearchStyle>, Stat
}
}
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;
}
}
}
render(): ReactNode {
return (
@@ -54,6 +74,7 @@ export class Autosearch extends Component<AutosearchProps<AutosearchStyle>, Stat
placeholder={'Zoeken naar monumentenborden'}
placeholderTextColor="#5997C0"
editable={this.props.editable}
ref={this.inputRef}
>
</TextInput>
</View>

7
src/Autosearch.xml
View File

@@ -20,6 +20,13 @@
<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">

2
typings/AutosearchProps.d.ts vendored
View File

@@ -10,6 +10,7 @@ export interface AutosearchProps<Style> {
style: Style[];
searchvalue: EditableValue<string>;
editable: boolean;
autoFocus: EditableValue<boolean>;
onChange?: ActionValue;
onEnter?: ActionValue;
}
@@ -19,6 +20,7 @@ export interface AutosearchPreviewProps {
style: string;
searchvalue: string;
editable: boolean;
autoFocus: string;
onChange: {} | null;
onEnter: {} | null;
}