@blocklet/pages-kit 0.2.451 → 0.2.453

package/lib/cjs/builtin/components/index.js

@@ -3,6 +3,8 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.LanguageField = void 0;
-var LanguageField_1 = require("./LanguageField");
-Object.defineProperty(exports, "LanguageField", { enumerable: true, get: function () { return __importDefault(LanguageField_1).default; } });
+exports.ResponsiveImage = exports.LanguageField = void 0;
+const ResponsiveImage_1 = __importDefault(require("../../components/ResponsiveImage"));
+exports.ResponsiveImage = ResponsiveImage_1.default;
+const LanguageField_1 = __importDefault(require("./LanguageField"));
+exports.LanguageField = LanguageField_1.default;

package/lib/cjs/components/ResponsiveImage/index.js

@@ -0,0 +1,68 @@
+"use strict";
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.default = ResponsiveImage;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const Theme_1 = require("@arcblock/ux/lib/Theme");
+const material_1 = require("@mui/material");
+function ResponsiveImage(_a) {
+    var { src, sizesAttr, quality = 90, sx, alt } = _a, props = __rest(_a, ["src", "sizesAttr", "quality", "sx", "alt"]);
+    const theme = (0, Theme_1.useTheme)();
+    const breakpoints = theme.breakpoints.values;
+    // Generate srcset based on each breakpoint width
+    const generateSrcSet = (baseUrl, breakpointWidths) => {
+        var _a;
+        // Check if URL already has query parameters
+        if (baseUrl.includes('?')) {
+            return '';
+        }
+        // Check file extension
+        const fileExtension = (_a = baseUrl.split('.').pop()) === null || _a === void 0 ? void 0 : _a.toLowerCase();
+        const supportedExtensions = ['png', 'jpg', 'jpeg', 'webp', 'gif'];
+        if (!fileExtension || !supportedExtensions.includes(fileExtension)) {
+            return '';
+        }
+        // Get unique widths and their 2x versions
+        const widths = new Set(Object.values(breakpointWidths)
+            .flatMap((width) => [width, width * 2])
+            .sort((a, b) => a - b));
+        return Array.from(widths)
+            .map((width) => {
+            const resizeParams = `?imageFilter=resize&w=${Math.round(width)}&q=${quality}&f=webp`;
+            return `${baseUrl}${resizeParams} ${width}w`;
+        })
+            .join(', ');
+    };
+    // Generate sizes attribute based on breakpoint widths
+    const generateSizes = (breakpointWidths) => {
+        if (!breakpointWidths) {
+            return '';
+        }
+        const entries = Object.entries(breakpointWidths);
+        return entries
+            .sort(([a], [b]) => breakpoints[a] - breakpoints[b])
+            .map(([breakpoint, width], index) => {
+            // Check if breakpoint exists in theme breakpoints
+            if (!(breakpoint in breakpoints)) {
+                return null;
+            }
+            if (index === entries.length - 1) {
+                return `${width}px`;
+            }
+            return `(max-width: ${breakpoints[breakpoint]}px) ${width}px`;
+        })
+            .filter((size) => size !== null)
+            .join(', ');
+    };
+    return ((0, jsx_runtime_1.jsx)(material_1.Box, Object.assign({ component: "img", src: src, srcSet: generateSrcSet(src, sizesAttr), sizes: generateSizes(sizesAttr), alt: alt !== null && alt !== void 0 ? alt : '', loading: "lazy", sx: sx }, props)));
+}

package/lib/cjs/components/index.js

@@ -17,8 +17,10 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.CustomComponentRenderer = void 0;
+exports.ResponsiveImage = exports.CustomComponentRenderer = void 0;
 require("../utils/inject-global-components");
 var CustomComponentRenderer_1 = require("./CustomComponentRenderer");
 Object.defineProperty(exports, "CustomComponentRenderer", { enumerable: true, get: function () { return __importDefault(CustomComponentRenderer_1).default; } });
 __exportStar(require("./CustomComponentRenderer"), exports);
+var ResponsiveImage_1 = require("./ResponsiveImage");
+Object.defineProperty(exports, "ResponsiveImage", { enumerable: true, get: function () { return __importDefault(ResponsiveImage_1).default; } });