one/dist/cjs/platform/ui/Image.cjs

One is a React framework for web, iOS, and Android apps.

var __defProp = Object.defineProperty;
var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
var __getOwnPropNames = Object.getOwnPropertyNames;
var __hasOwnProp = Object.prototype.hasOwnProperty;
var __export = (target, all) => {
	for (var name in all) __defProp(target, name, {
		get: all[name],
		enumerable: true
	});
};
var __copyProps = (to, from, except, desc) => {
	if (from && typeof from === "object" || typeof from === "function") {
		for (let key of __getOwnPropNames(from)) if (!__hasOwnProp.call(to, key) && key !== except) __defProp(to, key, {
			get: () => from[key],
			enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable
		});
	}
	return to;
};
var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
var Image_exports = {};
__export(Image_exports, { Image: () => Image });
module.exports = __toCommonJS(Image_exports);
var import_react = require("react");
var import_DomView = require("../web/DomView.cjs");
var import_jsx_runtime = require("react/jsx-runtime");
const OBJECT_FIT = {
	cover: "cover",
	contain: "contain",
	center: "none",
	stretch: "fill"
};
function webUri(source) {
	if (typeof source === "number") {
		throw new Error("One.UI.Image on web takes a url or { uri }, not an asset id");
	}
	return typeof source === "string" ? source : source.uri;
}
function Image({ source, resizeMode = "cover", onLoadStart, onLoad, onError, onLoadEnd, style, testID, nativeID, accessibilityLabel, alt }) {
	const uri = webUri(source);
	(0, import_react.useEffect)(() => {
		onLoadStart?.();
	}, [uri]);
	return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("img", {
		src: uri,
		alt: alt ?? accessibilityLabel ?? "",
		"data-testid": testID,
		id: nativeID,
		draggable: false,
		style: {
			display: "block",
			objectFit: OBJECT_FIT[resizeMode],
			...(0, import_DomView.domStyle)(style)
		},
		onLoad: (event) => {
			const { naturalWidth: width, naturalHeight: height } = event.currentTarget;
			onLoad?.({ nativeEvent: { source: {
				uri,
				width,
				height
			} } });
			onLoadEnd?.();
		},
		onError: () => {
			onError?.({ nativeEvent: { error: `failed to load ${uri}` } });
			onLoadEnd?.();
		}
	});
}