essa-platform / es-ng-antd

Blame view

src/Select/Select.js 4.12 KB
Edit Raw Normal View History
3a3ecabe   Imshann   init 
1
 
  import template from "./Select.html";
dd962f77   Imshann   优化 
2
3
 
  import style from "antd/lib/select/style/index.css";
3a3ecabe   Imshann   init 
4
 
  class Select {
dd962f77   Imshann   优化 
5
6
 
      useModules = ["$compile", "$timeout", "esNgAntd"];
3a3ecabe   Imshann   init 
7
8
 
      props = {
          value: String,
a468667f   Imshann   优化 
9
 
          defaultValue: String,
3a3ecabe   Imshann   init 
10
11
12
13
14
15
16
17
18
19
 
          placeholder: String,
          onChange: Function,
          placeholder: String,
          getPopupContainer: Function,
      };
  
      state = {
          open: false,
          childrens: [],
          label: null,
a468667f   Imshann   优化 
20
 
          value: this.props.value || this.props.defaultValue,
3a3ecabe   Imshann   init 
21
22
23
24
25
 
          popup: null,
      };
  
      template = template;
dd962f77   Imshann   优化 
26
27
 
      constructor(esForm, esFormItem) {
          esNgAntd.createStyle("ant-select", style);
a468667f   Imshann   优化 
28
29
30
31
32
33
34
35
36
37
38
39
40
41
 
          if (esForm) {
              this.esForm = esForm.getContext();
              this.esForm.state.formItems.push($scope);
          }
          if (esFormItem) {
              this.esFormItem = esFormItem.getContext();
          }
  
          $timeout(function () {
              this.setValue(this.props.value || this.props.defaultValue);
          }, 100);
      }
  
      setValue(value) {
3a3ecabe   Imshann   init 
42
 
          let option = this.state.childrens.find(function (option) {
a468667f   Imshann   优化 
43
 
              return option.value === value;
3a3ecabe   Imshann   init 
44
 
          });
dd962f77   Imshann   优化 
45
 
          if (option) {
a468667f   Imshann   优化 
46
 
              option.label = option.element.text();
dd962f77   Imshann   优化 
47
 
              this.state.label = option.label;
a468667f   Imshann   优化 
48
49
50
51
 
              this.state.value = option.value;
          } else {
              this.state.label = null;
              this.state.value = null;
dd962f77   Imshann   优化 
52
 
          }
3a3ecabe   Imshann   init 
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
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
 
      }
  
      addOption(option) {
          this.state.childrens.push(option);
      }
  
      handleClick(option) {
          this.state.open = !this.state.open;
          this.state.label = option.label;
          this.state.value = option.value;
          this.props.onChange({
              value: this.state.value,
          });
      }
  
      getOffset(ele) {
          if (!ele || ele.nodeType != 1) {
              return;
          }
          let func = this.props.getPopupContainer();
          if (typeof func === "function" && func() !== undefined) {
              return {
                  top: $element[0].offsetTop,
                  left: $element[0].offsetLeft,
              };
          } else {
              let rect = ele.getBoundingClientRect();
              let doc = ele.ownerDocument.documentElement;
              return {
                  top: rect.top + window.pageYOffset - doc.clientTop,
                  left: rect.left + window.pageXOffset - doc.clientLeft,
              };
          }
      }
  
      myEvent() {
          $timeout(() => {
              this.state.open = false;
              document.body.removeEventListener("click", this.myEvent);
          }, 0);
      }
  
      handleBlur() {
          // 事件绑定
          document.body.addEventListener("click", this.myEvent);
      }
  
      handleOpen(event) {
          event.stopPropagation();
          const { height, width } = $element[0].getBoundingClientRect();
          const { top, left } = this.getOffset($element[0]);
dd962f77   Imshann   优化 
104
105
106
107
 
  
          // 处理标签
          this.state.childrens.forEach(function (item) {
              item.label = item.element.text();
a468667f   Imshann   优化 
108
 
          });
dd962f77   Imshann   优化 
109
3a3ecabe   Imshann   init 
110
111
112
113
114
115
 
          let div = document.createElement("div");
          div.style.position = "absolute";
          div.style.left = 0;
          div.style.top = 0;
          div.style.width = "100%";
          div.appendChild(
a468667f   Imshann   优化 
116
117
118
 
              $compile(`<div><div ng-class="'ant-select-dropdown ant-select-dropdown-placement-bottomLeft'+(!state.open?' ant-select-dropdown-hidden':'')" style="width: ${width}px; left: ${left}px; top: ${
                  top + height + 2
              }px;">
dd962f77   Imshann   优化 
119
120
121
 
              <div class="ant-select-item ant-select-item-option" ng-click="handleClick(option)" ng-repeat="option in state.childrens">
                  <div class="ant-select-item-option-content">{{option.label}}</div>
              </div>
3a3ecabe   Imshann   init 
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
 
          </div></div>`)($scope)[0]
          );
          if (this.state.popup === null) {
              let func = this.props.getPopupContainer();
              if (typeof func === "function" && func() !== undefined) {
                  $element[0].style.position = "relative";
                  this.props.getPopupContainer()().appendChild(div);
              } else {
                  document.body.appendChild(div);
              }
              this.state.popup = div;
          }
          this.state.open = !this.state.open;
          this.handleBlur();
      }
  }