@artsy/palette-mobile 24.9.0 → 24.10.0
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.
|
@@ -7,6 +7,11 @@ export interface ImageProps extends CustomFastImageProps {
|
|
|
7
7
|
aspectRatio?: number;
|
|
8
8
|
/** BlurHash code */
|
|
9
9
|
blurhash?: string | null | undefined;
|
|
10
|
+
/**
|
|
11
|
+
* Decode the blurhash placeholder on a background thread instead of the main thread.
|
|
12
|
+
* Defaults to true.
|
|
13
|
+
*/
|
|
14
|
+
blurhashDecodeAsync?: boolean;
|
|
10
15
|
/** Gemini resize_to param */
|
|
11
16
|
geminiResizeMode?: GeminiResizeMode;
|
|
12
17
|
/** Resize on the fly using Gemini. Defaults to true */
|
|
@@ -27,6 +32,8 @@ type ImageSkeletonProps = {
|
|
|
27
32
|
height: number;
|
|
28
33
|
};
|
|
29
34
|
blurhash?: string | null | undefined;
|
|
35
|
+
/** See `blurhashDecodeAsync` on `ImageProps`. Defaults to true. */
|
|
36
|
+
blurhashDecodeAsync?: boolean;
|
|
30
37
|
style?: StyleProp<ViewStyle>;
|
|
31
38
|
};
|
|
32
39
|
export declare const ImageSkeleton: React.FC<ImageSkeletonProps>;
|
|
@@ -36,8 +36,8 @@ var useScreenDimensions_1 = require("../../utils/hooks/useScreenDimensions");
|
|
|
36
36
|
var Flex_1 = require("../Flex");
|
|
37
37
|
var Skeleton_1 = require("../Skeleton");
|
|
38
38
|
exports.Image = (0, react_1.memo)(function (_a) {
|
|
39
|
-
var aspectRatio = _a.aspectRatio, width = _a.width, height = _a.height, _b = _a.performResize, performResize = _b === void 0 ? true : _b, src = _a.src, style = _a.style, resizeMode = _a.resizeMode, geminiResizeMode = _a.geminiResizeMode, _c = _a.showLoadingState, showLoadingState = _c === void 0 ? false : _c, blurhash = _a.blurhash, flexProps = __rest(_a, ["aspectRatio", "width", "height", "performResize", "src", "style", "resizeMode", "geminiResizeMode", "showLoadingState", "blurhash"]);
|
|
40
|
-
var
|
|
39
|
+
var aspectRatio = _a.aspectRatio, width = _a.width, height = _a.height, _b = _a.performResize, performResize = _b === void 0 ? true : _b, src = _a.src, style = _a.style, resizeMode = _a.resizeMode, geminiResizeMode = _a.geminiResizeMode, _c = _a.showLoadingState, showLoadingState = _c === void 0 ? false : _c, blurhash = _a.blurhash, _d = _a.blurhashDecodeAsync, blurhashDecodeAsync = _d === void 0 ? true : _d, flexProps = __rest(_a, ["aspectRatio", "width", "height", "performResize", "src", "style", "resizeMode", "geminiResizeMode", "showLoadingState", "blurhash", "blurhashDecodeAsync"]);
|
|
40
|
+
var _e = (0, react_1.useState)(true), isLoading = _e[0], setIsLoading = _e[1];
|
|
41
41
|
var dimensions = useImageDimensions({ aspectRatio: aspectRatio, width: width, height: height });
|
|
42
42
|
var color = (0, hooks_1.useColor)();
|
|
43
43
|
if (showLoadingState) {
|
|
@@ -53,7 +53,7 @@ exports.Image = (0, react_1.memo)(function (_a) {
|
|
|
53
53
|
], resizeMode: resizeMode, onLoadEnd: function () { return setIsLoading(false); }, source: {
|
|
54
54
|
priority: react_native_fast_image_1.default.priority.normal,
|
|
55
55
|
uri: (0, getImageURL_1.getImageURL)({ src: src, dimensions: dimensions, geminiResizeMode: geminiResizeMode, performResize: performResize }),
|
|
56
|
-
} }), isLoading && ((0, jsx_runtime_1.jsx)(Flex_1.Flex, { style: [dimensions, { position: "absolute" }], children: (0, jsx_runtime_1.jsx)(exports.ImageSkeleton, { dimensions: dimensions, blurhash: blurhash, style: { position: "absolute" } }) }))] })));
|
|
56
|
+
} }), isLoading && ((0, jsx_runtime_1.jsx)(Flex_1.Flex, { style: [dimensions, { position: "absolute" }], children: (0, jsx_runtime_1.jsx)(exports.ImageSkeleton, { dimensions: dimensions, blurhash: blurhash, blurhashDecodeAsync: blurhashDecodeAsync, style: { position: "absolute" } }) }))] })));
|
|
57
57
|
});
|
|
58
58
|
var useImageDimensions = function (props) {
|
|
59
59
|
var _a, _b;
|
|
@@ -77,9 +77,9 @@ var useImageDimensions = function (props) {
|
|
|
77
77
|
return dimensions;
|
|
78
78
|
};
|
|
79
79
|
var ImageSkeleton = function (_a) {
|
|
80
|
-
var dimensions = _a.dimensions, blurhash = _a.blurhash, style = _a.style;
|
|
80
|
+
var dimensions = _a.dimensions, blurhash = _a.blurhash, _b = _a.blurhashDecodeAsync, blurhashDecodeAsync = _b === void 0 ? true : _b, style = _a.style;
|
|
81
81
|
if (!!blurhash) {
|
|
82
|
-
return ((0, jsx_runtime_1.jsx)(Flex_1.Flex, __assign({ backgroundColor: "mono10" }, dimensions, { style: style, children: (0, jsx_runtime_1.jsx)(react_native_blurhash_1.Blurhash, { blurhash: blurhash, style: { flex: 1 }, decodeWidth: 16, decodeHeight: 16, decodeAsync:
|
|
82
|
+
return ((0, jsx_runtime_1.jsx)(Flex_1.Flex, __assign({ backgroundColor: "mono10" }, dimensions, { style: style, children: (0, jsx_runtime_1.jsx)(react_native_blurhash_1.Blurhash, { blurhash: blurhash, style: { flex: 1 }, decodeWidth: 16, decodeHeight: 16, decodeAsync: blurhashDecodeAsync }) })));
|
|
83
83
|
}
|
|
84
84
|
return ((0, jsx_runtime_1.jsx)(Flex_1.Flex, { style: style, children: (0, jsx_runtime_1.jsx)(Skeleton_1.Skeleton, { children: (0, jsx_runtime_1.jsx)(Skeleton_1.SkeletonBox, __assign({}, dimensions)) }) }));
|
|
85
85
|
};
|