@blocklet/pages-kit 0.2.451 → 0.2.453

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

@@ -1 +1,3 @@
-export { default as LanguageField } from './LanguageField';
+import ResponsiveImage from '../../components/ResponsiveImage';
+import LanguageField from './LanguageField';
+export { LanguageField, ResponsiveImage };

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

@@ -0,0 +1,65 @@
+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;
+};
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useTheme } from '@arcblock/ux/lib/Theme';
+import { Box } from '@mui/material';
+export default function ResponsiveImage(_a) {
+    var { src, sizesAttr, quality = 90, sx, alt } = _a, props = __rest(_a, ["src", "sizesAttr", "quality", "sx", "alt"]);
+    const theme = 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 (_jsx(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/esm/components/index.js

@@ -1,3 +1,4 @@
 import '../utils/inject-global-components';
 export { default as CustomComponentRenderer } from './CustomComponentRenderer';
 export * from './CustomComponentRenderer';
+export { default as ResponsiveImage } from './ResponsiveImage';