@peculiar/react-components 0.0.2-alpha.252 → 0.0.2-alpha.253
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.
- package/dist/cjs/hooks/use_image.js +10 -26
- package/dist/cjs/hooks/use_image.js.map +1 -1
- package/dist/esm/hooks/use_image.js +11 -27
- package/dist/esm/hooks/use_image.js.map +1 -1
- package/dist/esnext/hooks/use_image.js +11 -27
- package/dist/esnext/hooks/use_image.js.map +1 -1
- package/package.json +3 -3
|
@@ -8,46 +8,30 @@ function useImage(src, options) {
|
|
|
8
8
|
var onLoad = options.onLoad, onError = options.onError;
|
|
9
9
|
var _a = react_1.useState('pending'), status = _a[0], setStatus = _a[1];
|
|
10
10
|
var imageRef = react_1.useRef();
|
|
11
|
-
|
|
12
|
-
if (imageRef.current) {
|
|
13
|
-
imageRef.current.onload = null;
|
|
14
|
-
imageRef.current.onerror = null;
|
|
15
|
-
imageRef.current = undefined;
|
|
16
|
-
}
|
|
17
|
-
};
|
|
18
|
-
var load = react_1.useCallback(function () {
|
|
11
|
+
utils_1.useEnhancedEffect(function () {
|
|
19
12
|
if (!src) {
|
|
20
|
-
return;
|
|
13
|
+
return undefined;
|
|
21
14
|
}
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
15
|
+
setStatus('loading');
|
|
16
|
+
imageRef.current = new Image();
|
|
17
|
+
imageRef.current.src = src;
|
|
18
|
+
imageRef.current.onload = function (event) {
|
|
26
19
|
setStatus('loaded');
|
|
27
20
|
if (onLoad) {
|
|
28
21
|
onLoad(event);
|
|
29
22
|
}
|
|
30
23
|
};
|
|
31
|
-
|
|
32
|
-
|
|
24
|
+
imageRef.current.onerror = function (error) {
|
|
25
|
+
imageRef.current = undefined;
|
|
33
26
|
setStatus('failed');
|
|
34
27
|
if (onError) {
|
|
35
28
|
onError(error);
|
|
36
29
|
}
|
|
37
30
|
};
|
|
38
|
-
imageRef.current = img;
|
|
39
|
-
}, [src, onLoad, onError]);
|
|
40
|
-
react_1.useEffect(function () {
|
|
41
|
-
setStatus(src ? 'loading' : 'pending');
|
|
42
|
-
}, [src]);
|
|
43
|
-
utils_1.useEnhancedEffect(function () {
|
|
44
|
-
if (status === 'loading') {
|
|
45
|
-
load();
|
|
46
|
-
}
|
|
47
31
|
return function () {
|
|
48
|
-
|
|
32
|
+
imageRef.current = undefined;
|
|
49
33
|
};
|
|
50
|
-
}, [
|
|
34
|
+
}, [src]);
|
|
51
35
|
return { status: status, image: imageRef.current };
|
|
52
36
|
}
|
|
53
37
|
exports.useImage = useImage;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"use_image.js","sourceRoot":"","sources":["../../../src/hooks/use_image.ts"],"names":[],"mappings":";;;AAAA,+
|
|
1
|
+
{"version":3,"file":"use_image.js","sourceRoot":"","sources":["../../../src/hooks/use_image.ts"],"names":[],"mappings":";;;AAAA,+BAGe;AACf,kCAA6C;AAqC7C,SAAgB,QAAQ,CAAC,GAAW,EAAE,OAAiC;IAAjC,wBAAA,EAAA,YAAiC;IAEnE,IAAA,MAAM,GAEJ,OAAO,OAFH,EACN,OAAO,GACL,OAAO,QADF,CACG;IAEN,IAAA,KAAsB,gBAAQ,CAAS,SAAS,CAAC,EAAhD,MAAM,QAAA,EAAE,SAAS,QAA+B,CAAC;IACxD,IAAM,QAAQ,GAAG,cAAM,EAA+B,CAAC;IAEvD,yBAAiB,CAAC;QAChB,IAAI,CAAC,GAAG,EAAE;YACR,OAAO,SAAS,CAAC;SAClB;QAED,SAAS,CAAC,SAAS,CAAC,CAAC;QAErB,QAAQ,CAAC,OAAO,GAAG,IAAI,KAAK,EAAE,CAAC;QAC/B,QAAQ,CAAC,OAAO,CAAC,GAAG,GAAG,GAAG,CAAC;QAE3B,QAAQ,CAAC,OAAO,CAAC,MAAM,GAAG,UAAC,KAAK;YAC9B,SAAS,CAAC,QAAQ,CAAC,CAAC;YAEpB,IAAI,MAAM,EAAE;gBACV,MAAM,CAAC,KAAY,CAAC,CAAC;aACtB;QACH,CAAC,CAAC;QAEF,QAAQ,CAAC,OAAO,CAAC,OAAO,GAAG,UAAC,KAAK;YAC/B,QAAQ,CAAC,OAAO,GAAG,SAAS,CAAC;YAE7B,SAAS,CAAC,QAAQ,CAAC,CAAC;YAEpB,IAAI,OAAO,EAAE;gBACX,OAAO,CAAC,KAAY,CAAC,CAAC;aACvB;QACH,CAAC,CAAC;QAEF,OAAO;YACL,QAAQ,CAAC,OAAO,GAAG,SAAS,CAAC;QAC/B,CAAC,CAAC;IACJ,CAAC,EAAE,CAAC,GAAG,CAAC,CAAC,CAAC;IAEV,OAAO,EAAE,MAAM,QAAA,EAAE,KAAK,EAAE,QAAQ,CAAC,OAAO,EAAE,CAAC;AAC7C,CAAC;AA3CD,4BA2CC"}
|
|
@@ -1,50 +1,34 @@
|
|
|
1
|
-
import { useState,
|
|
1
|
+
import { useState, useRef, } from 'react';
|
|
2
2
|
import { useEnhancedEffect } from '../utils';
|
|
3
3
|
export function useImage(src, options) {
|
|
4
4
|
if (options === void 0) { options = {}; }
|
|
5
5
|
var onLoad = options.onLoad, onError = options.onError;
|
|
6
6
|
var _a = useState('pending'), status = _a[0], setStatus = _a[1];
|
|
7
7
|
var imageRef = useRef();
|
|
8
|
-
|
|
9
|
-
if (imageRef.current) {
|
|
10
|
-
imageRef.current.onload = null;
|
|
11
|
-
imageRef.current.onerror = null;
|
|
12
|
-
imageRef.current = undefined;
|
|
13
|
-
}
|
|
14
|
-
};
|
|
15
|
-
var load = useCallback(function () {
|
|
8
|
+
useEnhancedEffect(function () {
|
|
16
9
|
if (!src) {
|
|
17
|
-
return;
|
|
10
|
+
return undefined;
|
|
18
11
|
}
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
12
|
+
setStatus('loading');
|
|
13
|
+
imageRef.current = new Image();
|
|
14
|
+
imageRef.current.src = src;
|
|
15
|
+
imageRef.current.onload = function (event) {
|
|
23
16
|
setStatus('loaded');
|
|
24
17
|
if (onLoad) {
|
|
25
18
|
onLoad(event);
|
|
26
19
|
}
|
|
27
20
|
};
|
|
28
|
-
|
|
29
|
-
|
|
21
|
+
imageRef.current.onerror = function (error) {
|
|
22
|
+
imageRef.current = undefined;
|
|
30
23
|
setStatus('failed');
|
|
31
24
|
if (onError) {
|
|
32
25
|
onError(error);
|
|
33
26
|
}
|
|
34
27
|
};
|
|
35
|
-
imageRef.current = img;
|
|
36
|
-
}, [src, onLoad, onError]);
|
|
37
|
-
useEffect(function () {
|
|
38
|
-
setStatus(src ? 'loading' : 'pending');
|
|
39
|
-
}, [src]);
|
|
40
|
-
useEnhancedEffect(function () {
|
|
41
|
-
if (status === 'loading') {
|
|
42
|
-
load();
|
|
43
|
-
}
|
|
44
28
|
return function () {
|
|
45
|
-
|
|
29
|
+
imageRef.current = undefined;
|
|
46
30
|
};
|
|
47
|
-
}, [
|
|
31
|
+
}, [src]);
|
|
48
32
|
return { status: status, image: imageRef.current };
|
|
49
33
|
}
|
|
50
34
|
//# sourceMappingURL=use_image.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"use_image.js","sourceRoot":"","sources":["../../../src/hooks/use_image.ts"],"names":[],"mappings":"AAAA,OAAO,EACL,QAAQ,EACR,
|
|
1
|
+
{"version":3,"file":"use_image.js","sourceRoot":"","sources":["../../../src/hooks/use_image.ts"],"names":[],"mappings":"AAAA,OAAO,EACL,QAAQ,EACR,MAAM,GACP,MAAM,OAAO,CAAC;AACf,OAAO,EAAE,iBAAiB,EAAE,MAAM,UAAU,CAAC;AAqC7C,MAAM,UAAU,QAAQ,CAAC,GAAW,EAAE,OAAiC;IAAjC,wBAAA,EAAA,YAAiC;IAEnE,IAAA,MAAM,GAEJ,OAAO,OAFH,EACN,OAAO,GACL,OAAO,QADF,CACG;IAEN,IAAA,KAAsB,QAAQ,CAAS,SAAS,CAAC,EAAhD,MAAM,QAAA,EAAE,SAAS,QAA+B,CAAC;IACxD,IAAM,QAAQ,GAAG,MAAM,EAA+B,CAAC;IAEvD,iBAAiB,CAAC;QAChB,IAAI,CAAC,GAAG,EAAE;YACR,OAAO,SAAS,CAAC;SAClB;QAED,SAAS,CAAC,SAAS,CAAC,CAAC;QAErB,QAAQ,CAAC,OAAO,GAAG,IAAI,KAAK,EAAE,CAAC;QAC/B,QAAQ,CAAC,OAAO,CAAC,GAAG,GAAG,GAAG,CAAC;QAE3B,QAAQ,CAAC,OAAO,CAAC,MAAM,GAAG,UAAC,KAAK;YAC9B,SAAS,CAAC,QAAQ,CAAC,CAAC;YAEpB,IAAI,MAAM,EAAE;gBACV,MAAM,CAAC,KAAY,CAAC,CAAC;aACtB;QACH,CAAC,CAAC;QAEF,QAAQ,CAAC,OAAO,CAAC,OAAO,GAAG,UAAC,KAAK;YAC/B,QAAQ,CAAC,OAAO,GAAG,SAAS,CAAC;YAE7B,SAAS,CAAC,QAAQ,CAAC,CAAC;YAEpB,IAAI,OAAO,EAAE;gBACX,OAAO,CAAC,KAAY,CAAC,CAAC;aACvB;QACH,CAAC,CAAC;QAEF,OAAO;YACL,QAAQ,CAAC,OAAO,GAAG,SAAS,CAAC;QAC/B,CAAC,CAAC;IACJ,CAAC,EAAE,CAAC,GAAG,CAAC,CAAC,CAAC;IAEV,OAAO,EAAE,MAAM,QAAA,EAAE,KAAK,EAAE,QAAQ,CAAC,OAAO,EAAE,CAAC;AAC7C,CAAC"}
|
|
@@ -1,49 +1,33 @@
|
|
|
1
|
-
import { useState,
|
|
1
|
+
import { useState, useRef, } from 'react';
|
|
2
2
|
import { useEnhancedEffect } from '../utils';
|
|
3
3
|
export function useImage(src, options = {}) {
|
|
4
4
|
const { onLoad, onError, } = options;
|
|
5
5
|
const [status, setStatus] = useState('pending');
|
|
6
6
|
const imageRef = useRef();
|
|
7
|
-
|
|
8
|
-
if (imageRef.current) {
|
|
9
|
-
imageRef.current.onload = null;
|
|
10
|
-
imageRef.current.onerror = null;
|
|
11
|
-
imageRef.current = undefined;
|
|
12
|
-
}
|
|
13
|
-
};
|
|
14
|
-
const load = useCallback(() => {
|
|
7
|
+
useEnhancedEffect(() => {
|
|
15
8
|
if (!src) {
|
|
16
|
-
return;
|
|
9
|
+
return undefined;
|
|
17
10
|
}
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
11
|
+
setStatus('loading');
|
|
12
|
+
imageRef.current = new Image();
|
|
13
|
+
imageRef.current.src = src;
|
|
14
|
+
imageRef.current.onload = (event) => {
|
|
22
15
|
setStatus('loaded');
|
|
23
16
|
if (onLoad) {
|
|
24
17
|
onLoad(event);
|
|
25
18
|
}
|
|
26
19
|
};
|
|
27
|
-
|
|
28
|
-
|
|
20
|
+
imageRef.current.onerror = (error) => {
|
|
21
|
+
imageRef.current = undefined;
|
|
29
22
|
setStatus('failed');
|
|
30
23
|
if (onError) {
|
|
31
24
|
onError(error);
|
|
32
25
|
}
|
|
33
26
|
};
|
|
34
|
-
imageRef.current = img;
|
|
35
|
-
}, [src, onLoad, onError]);
|
|
36
|
-
useEffect(() => {
|
|
37
|
-
setStatus(src ? 'loading' : 'pending');
|
|
38
|
-
}, [src]);
|
|
39
|
-
useEnhancedEffect(() => {
|
|
40
|
-
if (status === 'loading') {
|
|
41
|
-
load();
|
|
42
|
-
}
|
|
43
27
|
return () => {
|
|
44
|
-
|
|
28
|
+
imageRef.current = undefined;
|
|
45
29
|
};
|
|
46
|
-
}, [
|
|
30
|
+
}, [src]);
|
|
47
31
|
return { status, image: imageRef.current };
|
|
48
32
|
}
|
|
49
33
|
//# sourceMappingURL=use_image.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"use_image.js","sourceRoot":"","sources":["../../../src/hooks/use_image.ts"],"names":[],"mappings":"AAAA,OAAO,EACL,QAAQ,EACR,
|
|
1
|
+
{"version":3,"file":"use_image.js","sourceRoot":"","sources":["../../../src/hooks/use_image.ts"],"names":[],"mappings":"AAAA,OAAO,EACL,QAAQ,EACR,MAAM,GACP,MAAM,OAAO,CAAC;AACf,OAAO,EAAE,iBAAiB,EAAE,MAAM,UAAU,CAAC;AAqC7C,MAAM,UAAU,QAAQ,CAAC,GAAW,EAAE,UAA+B,EAAE;IACrE,MAAM,EACJ,MAAM,EACN,OAAO,GACR,GAAG,OAAO,CAAC;IAEZ,MAAM,CAAC,MAAM,EAAE,SAAS,CAAC,GAAG,QAAQ,CAAS,SAAS,CAAC,CAAC;IACxD,MAAM,QAAQ,GAAG,MAAM,EAA+B,CAAC;IAEvD,iBAAiB,CAAC,GAAG,EAAE;QACrB,IAAI,CAAC,GAAG,EAAE;YACR,OAAO,SAAS,CAAC;SAClB;QAED,SAAS,CAAC,SAAS,CAAC,CAAC;QAErB,QAAQ,CAAC,OAAO,GAAG,IAAI,KAAK,EAAE,CAAC;QAC/B,QAAQ,CAAC,OAAO,CAAC,GAAG,GAAG,GAAG,CAAC;QAE3B,QAAQ,CAAC,OAAO,CAAC,MAAM,GAAG,CAAC,KAAK,EAAE,EAAE;YAClC,SAAS,CAAC,QAAQ,CAAC,CAAC;YAEpB,IAAI,MAAM,EAAE;gBACV,MAAM,CAAC,KAAY,CAAC,CAAC;aACtB;QACH,CAAC,CAAC;QAEF,QAAQ,CAAC,OAAO,CAAC,OAAO,GAAG,CAAC,KAAK,EAAE,EAAE;YACnC,QAAQ,CAAC,OAAO,GAAG,SAAS,CAAC;YAE7B,SAAS,CAAC,QAAQ,CAAC,CAAC;YAEpB,IAAI,OAAO,EAAE;gBACX,OAAO,CAAC,KAAY,CAAC,CAAC;aACvB;QACH,CAAC,CAAC;QAEF,OAAO,GAAG,EAAE;YACV,QAAQ,CAAC,OAAO,GAAG,SAAS,CAAC;QAC/B,CAAC,CAAC;IACJ,CAAC,EAAE,CAAC,GAAG,CAAC,CAAC,CAAC;IAEV,OAAO,EAAE,MAAM,EAAE,KAAK,EAAE,QAAQ,CAAC,OAAO,EAAE,CAAC;AAC7C,CAAC"}
|
package/package.json
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@peculiar/react-components",
|
|
3
3
|
"private": false,
|
|
4
|
-
"version": "0.0.2-alpha.
|
|
4
|
+
"version": "0.0.2-alpha.253+8cc4434",
|
|
5
5
|
"author": "PeculiarVentures Team",
|
|
6
6
|
"description": "A simple and customizable component library to build faster, beautiful, and more accessible React applications.",
|
|
7
7
|
"keywords": [
|
|
@@ -40,7 +40,7 @@
|
|
|
40
40
|
"dependencies": {
|
|
41
41
|
"@emotion/core": "^10.1.1",
|
|
42
42
|
"@emotion/css": "^11.1.3",
|
|
43
|
-
"@peculiar/color": "^0.0.2-alpha.
|
|
43
|
+
"@peculiar/color": "^0.0.2-alpha.253+8cc4434",
|
|
44
44
|
"@popperjs/core": "^2.9.3",
|
|
45
45
|
"@types/flat": "^5.0.2",
|
|
46
46
|
"@types/react-transition-group": "^4.4.2",
|
|
@@ -83,5 +83,5 @@
|
|
|
83
83
|
"node": ">=12.x"
|
|
84
84
|
},
|
|
85
85
|
"license": "MIT",
|
|
86
|
-
"gitHead": "
|
|
86
|
+
"gitHead": "8cc44346daf502ed608522165fe4818e90f000da"
|
|
87
87
|
}
|