All files / src/utils applyImage.js

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
 
 
 
 
 
 
 
 
 
 
 
 
2x
 
 
 
 
 
2x
 
 
1x
1x
1x
 
 
1x
 
1x
 
1x
 
1x
1x
 
 
 
 
 
 
 
1x
 
 
 
// @flow
 
function applyStyle(target, endStyle, withoutPlaceholder) {
  if (withoutPlaceholder) {
    target.style.opacity = 1; // eslint-disable-line
  } else {
    const style = target.getAttribute('style');
    target.setAttribute('style', `${style && style.includes('opacity') ? '' : 'opacity: 0;'}${style}${endStyle}`);
  }
}
 
export default function applyImage(target: any, image: Image, src: string) {
  Iif (this) {
    this.setState(previousState => ({
      mountedImages: new Set(previousState.mountedImages.add(target)),
    }));
    this.removeImgLoadingRef(image);
  } else {
    if (!target) return;
 
    /* eslint-disable */
    target.src = src;
    Eif (target.dataset.srcset) {
      target.srcset = target.dataset.srcset;
    }
 
    target.style.visibility = 'visible';
 
    const withoutPlaceholder = target.getAttribute('data-placeholder') === 'false';
    /* eslint-enable */
    const currentTarget = withoutPlaceholder ? target : target.nextSibling;
 
    Eif (currentTarget || withoutPlaceholder) {
      target.addEventListener('load', () => {
        if (target) {
          const endStyle = target.getAttribute('data-end-style') || '';
          applyStyle(currentTarget, endStyle, withoutPlaceholder);
          target.removeEventListener('load', applyStyle);
        }
      });
    }
    window.__REACT_SIMPLE_IMG__.imgLoadingRefs.delete(target);
  }
}