@novin-dev/formalite
Version:
Generate MUI form with few line of code
45 lines (42 loc) • 2.36 kB
JavaScript
import { __rest, __assign } from 'tslib';
import React from 'react';
import { LazyLoadImage } from 'react-lazy-load-image-component';
import { Box } from '@mui/material';
function Image(_a) {
var ratio = _a.ratio, _b = _a.disabledEffect, disabledEffect = _b === void 0 ? false : _b, _c = _a.effect, effect = _c === void 0 ? "blur" : _c, sx = _a.sx, other = __rest(_a, ["ratio", "disabledEffect", "effect", "sx"]);
if (ratio) {
return (React.createElement(Box, { component: "span", sx: __assign({ width: 1, lineHeight: 0, display: "block", overflow: "hidden", position: "relative", pt: getRatio(ratio), "& .wrapper": {
top: 0,
left: 0,
right: 0,
bottom: 0,
lineHeight: 0,
position: "absolute",
backgroundSize: "cover !important",
} }, sx) },
React.createElement(Box, __assign({ component: LazyLoadImage, wrapperClassName: "wrapper", effect: disabledEffect ? undefined : effect, placeholderSrc: "https://zone-assets-api.vercel.app/assets/img_placeholder.svg", sx: { width: 1, height: 1, objectFit: "cover" } }, other))));
}
return (React.createElement(Box, { component: "span", sx: __assign({ lineHeight: 0, display: "block", overflow: "hidden", "& .wrapper": {
width: 1,
height: 1,
backgroundSize: "cover !important",
} }, sx) },
React.createElement(Box, __assign({ component: LazyLoadImage, wrapperClassName: "wrapper", effect: disabledEffect ? undefined : effect, placeholderSrc: "https://zone-assets-api.vercel.app/assets/img_placeholder.svg", sx: { width: 1, height: 1, objectFit: "cover" } }, other))));
}
// ----------------------------------------------------------------------
function getRatio(ratio) {
if (ratio === void 0) { ratio = "1/1"; }
return {
"4/3": "calc(100% / 4 * 3)",
"3/4": "calc(100% / 3 * 4)",
"6/4": "calc(100% / 6 * 4)",
"4/6": "calc(100% / 4 * 6)",
"16/9": "calc(100% / 16 * 9)",
"9/16": "calc(100% / 9 * 16)",
"21/9": "calc(100% / 21 * 9)",
"9/21": "calc(100% / 9 * 21)",
"1/1": "100%",
}[ratio];
}
export { Image };
//# sourceMappingURL=Image.js.map