Blame view

src/Input/Input.js 2.27 KB
3a3ecabe   Imshann   init
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
  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) {
          esNgAntd.createStyle("ant-input", style);
          this.esFormItem = esFormItem.getContext();
          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.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];
          }
      }
  }