@metamask/design-system-react-native
Version:
74 lines • 3.4 kB
JavaScript
;
var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
if (k2 === undefined) k2 = k;
var desc = Object.getOwnPropertyDescriptor(m, k);
if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
desc = { enumerable: true, get: function() { return m[k]; } };
}
Object.defineProperty(o, k2, desc);
}) : (function(o, m, k, k2) {
if (k2 === undefined) k2 = k;
o[k2] = m[k];
}));
var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
Object.defineProperty(o, "default", { enumerable: true, value: v });
}) : function(o, v) {
o["default"] = v;
});
var __importStar = (this && this.__importStar) || function (mod) {
if (mod && mod.__esModule) return mod;
var result = {};
if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
__setModuleDefault(result, mod);
return result;
};
Object.defineProperty(exports, "__esModule", { value: true });
exports.ImageOrSvg = void 0;
const react_1 = __importStar(require("react"));
const react_native_1 = require("react-native/index.js");
const react_native_svg_1 = require("react-native-svg");
const ImageOrSvg = ({ src, width, height, onImageLoad, onImageError, onSvgError, style, imageProps, svgProps, }) => {
// CASE 1: local image (src is a number)
if (typeof src === 'number') {
return (<react_native_1.Image source={src} style={[{ width, height }, style]} resizeMode="contain" onLoad={onImageLoad} onError={onImageError} {...imageProps}/>);
}
// CASE 2: Local SVG component (src is a React component)
if (typeof src === 'function') {
const LocalSvg = src;
return <LocalSvg width={width} height={height} {...svgProps}/>;
}
// CASE 3: Remote image or SVG (src is an object with a uri)
const [isSvg, setIsSvg] = (0, react_1.useState)(false);
const checkSvgContentType = (0, react_1.useCallback)(async (uri) => {
try {
const response = await fetch(uri, { method: 'HEAD' });
// If no header is returned, fallback to an empty string.
const contentType = response.headers.get('Content-Type') || '';
return contentType.includes('image/svg+xml');
}
catch {
return false;
}
}, []);
(0, react_1.useEffect)(() => {
if (src.uri) {
const uriLower = src.uri.toLowerCase();
const isLikelySvg = uriLower.endsWith('.svg') || uriLower.startsWith('data:image/svg+xml');
if (!src.uri.startsWith('data:')) {
checkSvgContentType(src.uri).then(setIsSvg);
}
else {
setIsSvg(isLikelySvg);
}
}
else {
setIsSvg(false);
}
}, [src, checkSvgContentType]);
if (isSvg && typeof src === 'object' && 'uri' in src && src.uri) {
return (<react_native_svg_1.SvgUri uri={src.uri} width={width} height={height} onError={onSvgError} style={style} {...svgProps}/>);
}
return (<react_native_1.Image source={src} style={[{ width, height }, style]} resizeMode="contain" onLoad={onImageLoad} onError={onImageError} {...imageProps}/>);
};
exports.ImageOrSvg = ImageOrSvg;
//# sourceMappingURL=ImageOrSvg.cjs.map