Input.js
2.64 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
70
71
72
73
74
75
76
77
78
79
import style from "antd/lib/input/style/index.css";
class Input {
useModules = ["$compile", "esNgAntd"];
require = ["^?antdFormItem", "^?antdForm"];
state = {
inputEventTarget: null,
}
constructor($element, $attrs, $controllers) {
let [antdForm, antdFormItem] = $controllers;
esNgAntd.createStyle("ant-input", style);
if (antdFormItem) {
this.antdFormItem = antdFormItem.getContext();
}
// 上下文
if (antdForm) {
this.antdForm = antdForm.getContext();
this.antdForm.state.formItems.push($scope);
}
this.props.style = $attrs.style;
$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.antdFormItem && this.antdFormItem.name) {
idAttribute = `id="${this.antdFormItem.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];
}
}
}
Input.propTypes = {
value: PropTypes.string,
placeholder: PropTypes.string,
addonBefore: PropTypes.string,
addonAfter: PropTypes.string,
disabled: PropTypes.boolean,
onChange: PropTypes.function,
maxLength: PropTypes.number,
};