@uxf/core 11.20.0 → 11.21.5
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/package.json +1 -1
- package/types/index.d.ts +8 -0
- package/utils/composeRefs.d.ts +3 -0
- package/utils/composeRefs.js +3 -0
- package/utils/image.d.ts +6 -5
- package/utils/image.js +72 -52
package/package.json
CHANGED
package/types/index.d.ts
CHANGED
package/utils/composeRefs.d.ts
CHANGED
package/utils/composeRefs.js
CHANGED
|
@@ -1,6 +1,9 @@
|
|
|
1
1
|
"use strict";
|
|
2
2
|
Object.defineProperty(exports, "__esModule", { value: true });
|
|
3
3
|
exports.composeRefs = void 0;
|
|
4
|
+
/**
|
|
5
|
+
* @deprecated Use import from @uxf/core-react instead.
|
|
6
|
+
*/
|
|
4
7
|
function composeRefs(...refs) {
|
|
5
8
|
return (value) => refs.forEach((ref) => {
|
|
6
9
|
if (!ref) {
|
package/utils/image.d.ts
CHANGED
|
@@ -1,10 +1,11 @@
|
|
|
1
|
-
import
|
|
1
|
+
import React from "react";
|
|
2
2
|
import { ImageResponse, ImageSource, ResizerImageProps, StaticImageData } from "./resizer";
|
|
3
3
|
export type Dimension = number | "auto";
|
|
4
4
|
export type Format = "avif" | "webp" | "original";
|
|
5
5
|
export type Quality = number | Record<Format, number>;
|
|
6
|
-
export declare function
|
|
7
|
-
export declare function
|
|
6
|
+
export declare function isSrcString(src: ImageSource): src is string;
|
|
7
|
+
export declare function isSrcImageResponse(src: ImageSource): src is ImageResponse;
|
|
8
|
+
export declare function isSrcStaticImageData(src: ImageSource): src is StaticImageData;
|
|
8
9
|
export declare function parseImgExtension(src: string): string | undefined;
|
|
9
10
|
export declare function getSvgImgUrl(src: ImageSource): string | undefined;
|
|
10
11
|
export declare function getImgQuality(quality: Quality | undefined, format: Format): number | undefined;
|
|
@@ -14,7 +15,7 @@ export declare function getImgElementWidth(src: ImageSource, width: number | und
|
|
|
14
15
|
export type GetImgSrcSetOptions = ResizerImageProps & {
|
|
15
16
|
maxHiDpi?: 3 | 2 | 1;
|
|
16
17
|
};
|
|
17
|
-
export declare function getImgSrcSet(src
|
|
18
|
+
export declare function getImgSrcSet(src: ImageSource, width?: Dimension, height?: Dimension, options?: GetImgSrcSetOptions): string | undefined;
|
|
18
19
|
/**
|
|
19
20
|
* @deprecated Use import from @uxf/ui instead.
|
|
20
21
|
*/
|
|
@@ -34,5 +35,5 @@ interface ImageSourcesProps {
|
|
|
34
35
|
/**
|
|
35
36
|
* @deprecated Use import from @uxf/ui instead.
|
|
36
37
|
*/
|
|
37
|
-
export declare
|
|
38
|
+
export declare function ImgSources(props: ImageSourcesProps): React.JSX.Element | null;
|
|
38
39
|
export {};
|
package/utils/image.js
CHANGED
|
@@ -3,96 +3,119 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
|
|
|
3
3
|
return (mod && mod.__esModule) ? mod : { "default": mod };
|
|
4
4
|
};
|
|
5
5
|
Object.defineProperty(exports, "__esModule", { value: true });
|
|
6
|
-
exports.ImgSources = exports.getImgSrcSet = exports.getImgElementWidth = exports.getImgElementHeight = exports.getImgUniqueIdentifier = exports.getImgQuality = exports.getSvgImgUrl = exports.parseImgExtension = exports.
|
|
6
|
+
exports.ImgSources = exports.getImgSrcSet = exports.getImgElementWidth = exports.getImgElementHeight = exports.getImgUniqueIdentifier = exports.getImgQuality = exports.getSvgImgUrl = exports.parseImgExtension = exports.isSrcStaticImageData = exports.isSrcImageResponse = exports.isSrcString = void 0;
|
|
7
7
|
const hide_1 = require("@uxf/core-react/components/hide");
|
|
8
8
|
const react_1 = __importDefault(require("react"));
|
|
9
9
|
const file_1 = require("./file");
|
|
10
|
+
const is_empty_1 = require("./is-empty");
|
|
11
|
+
const is_not_nil_1 = require("./is-not-nil");
|
|
10
12
|
const resizer_1 = require("./resizer");
|
|
11
|
-
function
|
|
12
|
-
return typeof src
|
|
13
|
+
function isSrcString(src) {
|
|
14
|
+
return typeof src === "string";
|
|
13
15
|
}
|
|
14
|
-
exports.
|
|
15
|
-
function
|
|
16
|
-
return
|
|
16
|
+
exports.isSrcString = isSrcString;
|
|
17
|
+
function isSrcImageResponse(src) {
|
|
18
|
+
return !isSrcString(src) && "uuid" in src;
|
|
17
19
|
}
|
|
18
|
-
exports.
|
|
20
|
+
exports.isSrcImageResponse = isSrcImageResponse;
|
|
21
|
+
function isSrcStaticImageData(src) {
|
|
22
|
+
return !isSrcString(src) && "src" in src;
|
|
23
|
+
}
|
|
24
|
+
exports.isSrcStaticImageData = isSrcStaticImageData;
|
|
19
25
|
function parseImgExtension(src) {
|
|
20
26
|
const ext = src.slice(src.lastIndexOf(".") + 1);
|
|
21
27
|
return ext.length > 1 ? ext : undefined;
|
|
22
28
|
}
|
|
23
29
|
exports.parseImgExtension = parseImgExtension;
|
|
30
|
+
function isSvgExtension(src) {
|
|
31
|
+
return parseImgExtension(src) === "svg";
|
|
32
|
+
}
|
|
24
33
|
function getSvgImgUrl(src) {
|
|
25
|
-
if (
|
|
34
|
+
if (isSrcString(src) && isSvgExtension(src)) {
|
|
26
35
|
return src;
|
|
27
36
|
}
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
return (0, file_1.getFileUrl)(imageResponse);
|
|
37
|
+
if (isSrcImageResponse(src) && isSvgExtension(src.extension)) {
|
|
38
|
+
return (0, file_1.getFileUrl)(src);
|
|
31
39
|
}
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
return staticImageData.src;
|
|
40
|
+
if (isSrcStaticImageData(src) && isSvgExtension(src.src)) {
|
|
41
|
+
return src.src;
|
|
35
42
|
}
|
|
36
43
|
return undefined;
|
|
37
44
|
}
|
|
38
45
|
exports.getSvgImgUrl = getSvgImgUrl;
|
|
39
46
|
function getImgQuality(quality, format) {
|
|
40
|
-
|
|
47
|
+
if (typeof quality === "number") {
|
|
48
|
+
return quality;
|
|
49
|
+
}
|
|
50
|
+
return quality ? quality[format] : undefined;
|
|
41
51
|
}
|
|
42
52
|
exports.getImgQuality = getImgQuality;
|
|
43
53
|
function getImgUniqueIdentifier(src) {
|
|
44
|
-
|
|
45
|
-
|
|
54
|
+
return isSrcString(src)
|
|
55
|
+
? src
|
|
56
|
+
: isSrcImageResponse(src)
|
|
57
|
+
? src.uuid
|
|
58
|
+
: isSrcStaticImageData(src)
|
|
59
|
+
? src.src
|
|
60
|
+
: undefined;
|
|
46
61
|
}
|
|
47
62
|
exports.getImgUniqueIdentifier = getImgUniqueIdentifier;
|
|
48
63
|
function getImgElementHeight(src, width, height) {
|
|
49
64
|
var _a, _b;
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
65
|
+
if (isSrcString(src) || (0, is_not_nil_1.isNotNil)(height)) {
|
|
66
|
+
return height;
|
|
67
|
+
}
|
|
68
|
+
const calculatedHeight = Math.floor((((_a = src.height) !== null && _a !== void 0 ? _a : 0) / ((_b = src.width) !== null && _b !== void 0 ? _b : 0)) * (width !== null && width !== void 0 ? width : 0));
|
|
69
|
+
return calculatedHeight === 0 ? undefined : calculatedHeight;
|
|
53
70
|
}
|
|
54
71
|
exports.getImgElementHeight = getImgElementHeight;
|
|
55
72
|
function getImgElementWidth(src, width, height) {
|
|
56
73
|
var _a, _b;
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
|
|
74
|
+
if (isSrcString(src) || (0, is_not_nil_1.isNotNil)(width)) {
|
|
75
|
+
return width;
|
|
76
|
+
}
|
|
77
|
+
const calculatedWidth = Math.floor(((_a = src.width) !== null && _a !== void 0 ? _a : 0) / ((_b = src.height) !== null && _b !== void 0 ? _b : 0)) * (height !== null && height !== void 0 ? height : 0);
|
|
78
|
+
return calculatedWidth === 0 ? undefined : calculatedWidth;
|
|
60
79
|
}
|
|
61
80
|
exports.getImgElementWidth = getImgElementWidth;
|
|
81
|
+
function isDimensionNumber(value) {
|
|
82
|
+
return typeof value === "number";
|
|
83
|
+
}
|
|
84
|
+
function getDimension(dimension, size) {
|
|
85
|
+
return isDimensionNumber(dimension) ? dimension * size : "auto";
|
|
86
|
+
}
|
|
62
87
|
const HIDPI_SIZES = [3, 2, 1];
|
|
63
88
|
function getImgSrcSet(src, width, height, options = {}) {
|
|
64
89
|
var _a, _b;
|
|
65
|
-
if (!src) {
|
|
66
|
-
return undefined;
|
|
67
|
-
}
|
|
68
90
|
let toFormat;
|
|
69
91
|
let h = height !== null && height !== void 0 ? height : "auto";
|
|
70
92
|
let w = width !== null && width !== void 0 ? width : "auto";
|
|
71
|
-
if (
|
|
93
|
+
if (isSrcString(src)) {
|
|
94
|
+
if ((0, is_empty_1.isEmpty)(src)) {
|
|
95
|
+
return undefined;
|
|
96
|
+
}
|
|
72
97
|
toFormat = parseImgExtension(src);
|
|
73
98
|
}
|
|
74
|
-
|
|
75
|
-
|
|
76
|
-
if (!imageResponse.uuid) {
|
|
99
|
+
if (isSrcImageResponse(src)) {
|
|
100
|
+
if ((0, is_empty_1.isEmpty)(src.uuid)) {
|
|
77
101
|
return undefined;
|
|
78
102
|
}
|
|
79
|
-
toFormat = parseImgExtension(
|
|
80
|
-
h = (_a = (h ||
|
|
81
|
-
w = (_b = (w ||
|
|
103
|
+
toFormat = parseImgExtension(src.extension);
|
|
104
|
+
h = (_a = (h || src.height)) !== null && _a !== void 0 ? _a : "auto";
|
|
105
|
+
w = (_b = (w || src.width)) !== null && _b !== void 0 ? _b : "auto";
|
|
82
106
|
}
|
|
83
|
-
|
|
84
|
-
|
|
85
|
-
if (!staticImageData.src) {
|
|
107
|
+
if (isSrcStaticImageData(src)) {
|
|
108
|
+
if ((0, is_empty_1.isEmpty)(src.src)) {
|
|
86
109
|
return undefined;
|
|
87
110
|
}
|
|
88
|
-
toFormat = parseImgExtension(
|
|
89
|
-
h = h ||
|
|
90
|
-
w = w ||
|
|
111
|
+
toFormat = parseImgExtension(src.src);
|
|
112
|
+
h = h || src.height;
|
|
113
|
+
w = w || src.width;
|
|
91
114
|
}
|
|
92
115
|
const { maxHiDpi, ...restOptions } = options;
|
|
93
|
-
if (
|
|
116
|
+
if (isDimensionNumber(h) || isDimensionNumber(w)) {
|
|
94
117
|
return (maxHiDpi ? HIDPI_SIZES.slice(-maxHiDpi) : HIDPI_SIZES)
|
|
95
|
-
.map((size) => (0, resizer_1.resizerImageUrl)(src,
|
|
118
|
+
.map((size) => (0, resizer_1.resizerImageUrl)(src, getDimension(w, size), getDimension(h, size), {
|
|
96
119
|
toFormat,
|
|
97
120
|
...restOptions,
|
|
98
121
|
}) + (size > 1 ? ` ${size}x` : ""))
|
|
@@ -104,23 +127,20 @@ exports.getImgSrcSet = getImgSrcSet;
|
|
|
104
127
|
/**
|
|
105
128
|
* @deprecated Use import from @uxf/ui instead.
|
|
106
129
|
*/
|
|
107
|
-
|
|
130
|
+
function ImgSources(props) {
|
|
108
131
|
var _a, _b, _c, _d, _e;
|
|
109
|
-
if (
|
|
132
|
+
if (isSrcString(props.src) && (0, is_empty_1.isEmpty)(props.src)) {
|
|
110
133
|
return null;
|
|
111
134
|
}
|
|
112
|
-
|
|
113
|
-
if (imageResponse && !imageResponse.uuid) {
|
|
135
|
+
if (isSrcImageResponse(props.src) && (0, is_empty_1.isEmpty)(props.src.uuid)) {
|
|
114
136
|
return null;
|
|
115
137
|
}
|
|
116
|
-
|
|
117
|
-
if (staticImageData && !staticImageData.src) {
|
|
138
|
+
if (isSrcStaticImageData(props.src) && (0, is_empty_1.isEmpty)(props.src.src)) {
|
|
118
139
|
return null;
|
|
119
140
|
}
|
|
120
|
-
|
|
121
|
-
|
|
122
|
-
|
|
123
|
-
}
|
|
141
|
+
const media = (0, is_not_nil_1.isNotNil)(props.breakpoints) && (0, is_not_nil_1.isNotNil)(props.breakpointIndex)
|
|
142
|
+
? `(min-width: ${props.breakpoints[props.breakpointIndex]})`
|
|
143
|
+
: undefined;
|
|
124
144
|
return (react_1.default.createElement(react_1.default.Fragment, null,
|
|
125
145
|
react_1.default.createElement(hide_1.Hide, { when: Boolean((_a = props.options) === null || _a === void 0 ? void 0 : _a.isAvifDisabled) },
|
|
126
146
|
react_1.default.createElement("source", { media: media, srcSet: getImgSrcSet(props.src, props.width, props.height, {
|
|
@@ -138,5 +158,5 @@ const ImgSources = (props) => {
|
|
|
138
158
|
...((_e = props.options) !== null && _e !== void 0 ? _e : {}),
|
|
139
159
|
quality: getImgQuality(props.quality, "original"),
|
|
140
160
|
}) })));
|
|
141
|
-
}
|
|
161
|
+
}
|
|
142
162
|
exports.ImgSources = ImgSources;
|