essa-platform / es-ng-antd

Blame view

src/Image/Image.js 6.35 KB
Edit Raw Normal View History
3a3ecabe   Imshann   init 
1
2
3
4
 
  import template from "./Image.html";
  import style from "antd/lib/image/style/index.css";
  
  class Image {
3a3ecabe   Imshann   init 
5
 
      state = {
822d1c49   Imshann   升级Image和ImagePrev... 
6
 
          src: this.props.fallback || "data:image/png;base64,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",
3a3ecabe   Imshann   init 
7
8
9
10
 
          // 可见性
          visible: false,
          // 有图片？
          hasImage: false,
1b6f912f   Imshann   优化 
11
12
 
          // 索引
          index: null,
3a3ecabe   Imshann   init 
13
14
 
      };
9dc592c0   Imshann   升级Image和ImagePrev... 
15
 
      require = ["^?antdImagePreviewGroup"];
3a3ecabe   Imshann   init 
16
17
18
 
  
      useModules = ["$timeout", "esNgAntd", "$compile"];
9dc592c0   Imshann   升级Image和ImagePrev... 
19
 
      constructor($element, $attrs, $controllers) {
3a3ecabe   Imshann   init 
20
21
 
          esNgAntd.createStyle("ant-image", style);
          let src = this.state.src;
9dc592c0   Imshann   升级Image和ImagePrev... 
22
23
 
          let [antdImagePreviewGroup] = $controllers;
3a3ecabe   Imshann   init 
24
25
26
27
28
29
 
          $element.children("img")[0].onerror = function () {
              $timeout(function () {
                  this.state.hasImage = false;
                  this.state.src = src;
              }, 0);
          };
3a3ecabe   Imshann   init 
30
81f8a467   Imshann   调整组件前缀 
31
32
33
 
          if (antdImagePreviewGroup) {
              this.antdImagePreviewGroup = antdImagePreviewGroup.getContext();
              this.state.index = this.antdImagePreviewGroup.addChildren($scope);
3a3ecabe   Imshann   init 
34
35
36
37
38
 
          } else {
              this.handlePreview();
          }
      }
9dc592c0   Imshann   升级Image和ImagePrev... 
39
40
41
42
43
44
45
46
47
 
      componentDidUpdate() {
          if (prevProps.dSrc !== this.props.dSrc) {
              if (!["undefined", undefined, null, ""].includes(newVal)) {
                  this.state.hasImage = true;
                  this.state.src = newVal;
              }
          }
      }
3a3ecabe   Imshann   init 
48
 
      handleOpen() {
81f8a467   Imshann   调整组件前缀 
49
50
 
          if (this.antdImagePreviewGroup) {
              this.antdImagePreviewGroup.handleOpen(this.state.index);
1b6f912f   Imshann   优化 
51
52
 
              return;
          }
3a3ecabe   Imshann   init 
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
 
          this.state.visible = true;
      }
  
      handleClose() {
          this.state.visible = false;
      }
  
      handlePreview() {
          let div = document.createElement("div");
          div.innerHTML = `
              <div class="ant-image-preview-root">
                  <div class="ant-image-preview-mask" ng-if="state.visible"></div>
                  <div class="ant-image-preview-wrap" ng-show="state.visible">
                      <div class="ant-image-preview">
                          <div class="ant-image-preview-content">
                              <div class="ant-image-preview-body">
                                  <ul class="ant-image-preview-operations">
                                      <li class="ant-image-preview-operations-operation">
                                          <span class="anticon anticon-close ant-image-preview-operations-icon" ng-click="handleClose()">
81f8a467   Imshann   调整组件前缀 
72
 
                                              <antd-icon type="CloseOutlined"></antd-icon>
3a3ecabe   Imshann   init 
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
 
                                          </span>
                                      </li> 
                                  </ul>
                                  <div class="ant-image-preview-img-wrapper">
                                      <img class="ant-image-preview-img" ng-src="{{state.src}}"/>
                                  </div>
                              </div>
                          </div>
                      </div>
                  </div>
              </div>
          `;
          document.body.appendChild(div);
          $compile(div)($scope);
      }
9dc592c0   Imshann   升级Image和ImagePrev... 
88
89
90
91
 
  
      render() {
          return template;
      }
3a3ecabe   Imshann   init 
92
 
  }
9dc592c0   Imshann   升级Image和ImagePrev... 
93
94
95
96
 
  
  Image.propTypes = {
      src: PropTypes.string,
      dSrc: PropTypes.string,
822d1c49   Imshann   升级Image和ImagePrev... 
97
 
      fallback: PropTypes.string,
9dc592c0   Imshann   升级Image和ImagePrev... 
98
99
100
101
 
      width: PropTypes.number,
      height: PropTypes.number,
      preview: PropTypes.boolean,
  };