essa-platform / es-ng-antd

Blame view

src/ImagePreviewGroup/ImagePreviewGroup.js 3.81 KB
Edit Raw Normal View History
3a3ecabe   Imshann   init 
1
2
3
 
  import template from "./ImagePreviewGroup.html";
  
  class ImagePreviewGroup {
1b6f912f   Imshann   优化 
4
9dc592c0   Imshann   升级Image和ImagePrev... 
5
 
      useModules = ["esNgAntd"];
4c519425   Imshann   优化图片组件 
6
9dc592c0   Imshann   升级Image和ImagePrev... 
7
 
      context = true;
1b6f912f   Imshann   优化 
8
9
10
11
12
13
14
15
 
  
      state = {
          current: 0,
          visible: false,
          src: null,
          childrens: [],
      };
9dc592c0   Imshann   升级Image和ImagePrev... 
16
 
      constructor($element, $attrs) {
1b6f912f   Imshann   优化 
17
18
19
20
21
22
23
24
 
          this.handlePreview();
      }
  
      addChildren(children) {
          this.state.childrens.push(children);
          return this.state.childrens.length - 1;
      }
4c519425   Imshann   优化图片组件 
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
 
      setCurrent(value) {
          this.state.current = value;
          if (
              typeof this.props.preview === "object" &&
              typeof this.props.preview.onCurrentChange === "function"
          ) {
              this.props.preview.onCurrentChange(value);
          }
      }
  
      setVisible(value) {
          this.state.visible = value;
          if (
              typeof this.props.preview === "object" &&
              typeof this.props.preview.onVisibleChange === "function"
          ) {
              this.props.preview.onVisibleChange(value);
          }
      }
1b6f912f   Imshann   优化 
45
 
      handleOpen(index) {
4c519425   Imshann   优化图片组件 
46
 
          this.setCurrent(index);
1b6f912f   Imshann   优化 
47
 
          this.state.src = this.state.childrens[index].state.src;
4c519425   Imshann   优化图片组件 
48
 
          this.setVisible(true)
1b6f912f   Imshann   优化 
49
50
51
 
      }
  
      handleClose() {
4c519425   Imshann   优化图片组件 
52
 
          this.setVisible(false)
1b6f912f   Imshann   优化 
53
54
55
 
      }
  
      handlePrev() {
4c519425   Imshann   优化图片组件 
56
 
          this.setCurrent(this.state.current > 0 ? this.state.current - 1 : 0);
1b6f912f   Imshann   优化 
57
58
59
60
 
          this.state.src = this.state.childrens[this.state.current].state.src;
      }
  
      handleNext() {
4c519425   Imshann   优化图片组件 
61
 
          this.setCurrent(
1b6f912f   Imshann   优化 
62
63
 
              this.state.current < this.state.childrens.length - 1
                  ? this.state.current + 1
4c519425   Imshann   优化图片组件 
64
65
 
                  : this.state.childrens.length - 1
          );
1b6f912f   Imshann   优化 
66
67
68
69
 
          this.state.src = this.state.childrens[this.state.current].state.src;
      }
  
      handlePreview() {
4c519425   Imshann   优化图片组件 
70
71
72
73
 
          let className;
          if ($attrs.class) {
              className = ` ${$attrs.class}`;
          }
1b6f912f   Imshann   优化 
74
75
 
          esNgAntd.createLayer(
              `
4c519425   Imshann   优化图片组件 
76
 
              <div class="ant-image-preview-root${className}">
1b6f912f   Imshann   优化 
77
78
79
80
81
82
83
84
 
                  <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   调整组件前缀 
85
 
                                              <antd-icon type="CloseOutlined"></antd-icon>
1b6f912f   Imshann   优化 
86
87
88
89
90
91
92
 
                                          </span>
                                      </li> 
                                  </ul>
                                  <div class="ant-image-preview-img-wrapper">
                                      <img class="ant-image-preview-img" ng-src="{{state.src}}"/>
                                  </div>
                                  <div ng-class="{'ant-image-preview-switch-left': true, 'ant-image-preview-switch-left-disabled': state.current===0}" ng-click="handlePrev()">
81f8a467   Imshann   调整组件前缀 
93
 
                                      <antd-icon type="LeftOutlined"></antd-icon>
1b6f912f   Imshann   优化 
94
95
 
                                  </div>
                                  <div ng-class="{'ant-image-preview-switch-right': true,'ant-image-preview-switch-right-disabled': (state.childrens.length-1)===state.current}"  ng-click="handleNext()">
81f8a467   Imshann   调整组件前缀 
96
 
                                      <antd-icon type="RightOutlined"></antd-icon>
1b6f912f   Imshann   优化 
97
98
99
100
101
102
103
104
105
 
                                  </div>
                              </div>
                          </div>
                      </div>
                  </div>
              </div>
          `,
              $scope
          );
3a3ecabe   Imshann   init 
106
 
      }
9dc592c0   Imshann   升级Image和ImagePrev... 
107
108
109
110
111
112
113
114
 
  
      render() {
          return template;
      }
  }
  
  ImagePreviewGroup.propTypes = {
      preview: propTypes.object
3a3ecabe   Imshann   init 
115
 
  }