Input.js
2.37 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
import style from "antd/lib/input/style/index.css";
class Input {
useModules = ["$compile", "esNgAntd"];
props = {
value: String,
placeholder: String,
addonBefore: String,
addonAfter: String,
disabled: Boolean,
onChange: Function,
maxLength: Number
};
state = {
inputEventTarget: null,
}
constructor(esFormItem, esForm) {
esNgAntd.createStyle("ant-input", style);
this.esForm = esForm.getContext();
this.esFormItem = esFormItem.getContext();
this.props.style = $attrs.style;
this.esForm.state.formItems.push($scope);
$element.replaceWith($compile(this.getTemplate())($scope));
}
handleClick(event) {
this.state.inputEventTarget = event;
}
handleChange() {
this.props.onChange({
event: this.state.inputEventTarget
});
}
getTemplate() {
let maxLengthAttribute = "";
let styleAttribute = "";
let idAttribute = "";
if (this.props.maxLength) {
maxLengthAttribute = `maxlength="${this.props.maxLength}"`;
}
if (this.props.style) {
styleAttribute = `style="${this.props.style}"`
}
if (this.esFormItem && this.esFormItem.name) {
idAttribute = `id="${this.esFormItem.name}"`;
}
let templates = [
`<input type="text" class="ant-input" placeholder={{placeholder}} ng-change="handleChange()" ng-model="value" ng-focus="handleClick($event)" ng-disabled="disabled==='true'" ${styleAttribute} ${maxLengthAttribute} ${idAttribute}/>`,
`<span class="ant-input-group-wrapper" ng-if="addonBefore||addonAfter">
<span class="ant-input-wrapper ant-input-group" style="">
<span class="ant-input-group-addon" ng-if="addonBefore">{{addonBefore}}</span>
<input type="text" class="ant-input" ng-change="handleChange()" ng-model="value" ng-focus="handleClick($event)" ng-disabled="disabled==='true'" style="${this.props.style}" ${styleAttribute} ${maxLengthAttribute} ${idAttribute}/>
<span class="ant-input-group-addon" ng-if="addonAfter">{{addonAfter}}</span>
</span>
</span>`,
];
if (this.props.addonBefore || this.props.addonAfter) {
return templates[1]
} else {
return templates[0];
}
}
}