@uncinc/uncinc-react-kitchen-sink 2.8.16 → 2.8.19
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
|
@@ -6,8 +6,9 @@ function _iterableToArrayLimit(arr, i) { var _i = null == arr ? null : "undefine
|
|
|
6
6
|
function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
|
|
7
7
|
import React from 'react';
|
|
8
8
|
import c from 'classnames';
|
|
9
|
-
import '
|
|
9
|
+
import urlParse from 'url';
|
|
10
10
|
import { isValidImage, useImageLoader, calculateTargetSrc } from '../helpers';
|
|
11
|
+
import './style.scss';
|
|
11
12
|
|
|
12
13
|
// extend html img props
|
|
13
14
|
|
|
@@ -44,19 +45,30 @@ var AdaptivePicture = function AdaptivePicture(_ref) {
|
|
|
44
45
|
if (!container) return;
|
|
45
46
|
var resizeObserver = new ResizeObserver(function (entries) {
|
|
46
47
|
var widthAfterResize = entries[0].contentRect.width;
|
|
48
|
+
var newSrcRequired = false;
|
|
47
49
|
if (image.width < widthAfterResize) {
|
|
48
50
|
var newTargetSrc = calculateTargetSrc(image.width, validatedSources, fallbackImage);
|
|
49
51
|
if (targetSrc !== newTargetSrc) {
|
|
50
52
|
setTargetSrc(newTargetSrc);
|
|
53
|
+
newSrcRequired = true;
|
|
51
54
|
}
|
|
52
55
|
} else {
|
|
53
56
|
var _newTargetSrc = calculateTargetSrc(widthAfterResize, validatedSources, fallbackImage);
|
|
54
57
|
if (targetSrc !== _newTargetSrc) {
|
|
55
58
|
setTargetSrc(_newTargetSrc);
|
|
59
|
+
newSrcRequired = true;
|
|
56
60
|
}
|
|
57
61
|
}
|
|
58
62
|
if (status === 'PENDING') {
|
|
59
63
|
setStatus('INITIAL_BREAKPOINT_CALCULATED');
|
|
64
|
+
|
|
65
|
+
// We always load the smallest source. If that's also the source we need
|
|
66
|
+
// set INITIAL_LOADED directly.
|
|
67
|
+
// With caching turned on, the onLoad function on the img would only trigger once
|
|
68
|
+
// and thus never unblur the smallest
|
|
69
|
+
if (!newSrcRequired) {
|
|
70
|
+
setStatus('INITIAL_LOADED');
|
|
71
|
+
}
|
|
60
72
|
}
|
|
61
73
|
});
|
|
62
74
|
resizeObserver.observe(container);
|
|
@@ -86,7 +98,11 @@ var AdaptivePicture = function AdaptivePicture(_ref) {
|
|
|
86
98
|
if (_onLoad) {
|
|
87
99
|
_onLoad(e);
|
|
88
100
|
}
|
|
89
|
-
|
|
101
|
+
|
|
102
|
+
// To handle relative URLs
|
|
103
|
+
var current = urlParse.parse(e.target.src);
|
|
104
|
+
var target = urlParse.parse(targetSrc);
|
|
105
|
+
if (status === 'INITIAL_BREAKPOINT_CALCULATED' && current.pathname === target.pathname) {
|
|
90
106
|
setStatus('INITIAL_LOADED');
|
|
91
107
|
}
|
|
92
108
|
},
|
|
@@ -6,7 +6,7 @@ function _iterableToArrayLimit(arr, i) { var _i = null == arr ? null : "undefine
|
|
|
6
6
|
function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
|
|
7
7
|
import path from 'path';
|
|
8
8
|
import { useEffect, useState } from 'react';
|
|
9
|
-
var breakpoints = [
|
|
9
|
+
var breakpoints = [256, 512, 1024, 2048];
|
|
10
10
|
var mimeTypes = {
|
|
11
11
|
'.gif': 'image/gif',
|
|
12
12
|
'.png': 'image/png',
|