@gravity-ui/page-constructor 6.8.2-alpha.0 → 6.8.2-alpha.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
|
@@ -39,7 +39,7 @@ const Image = (props) => {
|
|
|
39
39
|
disableCompress ||
|
|
40
40
|
!(0, imageCompress_1.isCompressible)(src) ||
|
|
41
41
|
imgLoadingError;
|
|
42
|
-
return ((0, jsx_runtime_1.jsxs)("picture", { className: containerClassName, "data-qa": qa, children: [(mobile || hideDevices.mobile) && ((0, jsx_runtime_1.jsx)(DeviceSpecificFragment, { src: mobile || exports.EMPTY_IMG, disableWebp: disableWebp, maxBreakpoint: constants_1.BREAKPOINTS.sm, qa: qaAttributes.mobileSource })), (tablet || hideDevices.tablet) && ((0, jsx_runtime_1.jsx)(DeviceSpecificFragment, { src: tablet || exports.EMPTY_IMG, disableWebp: disableWebp, maxBreakpoint: constants_1.BREAKPOINTS.md, minBreakpoint: constants_1.BREAKPOINTS.sm, qa: qaAttributes.tabletSource })), hideDevices.desktop && ((0, jsx_runtime_1.jsx)(DeviceSpecificFragment, { src: exports.EMPTY_IMG, disableWebp:
|
|
42
|
+
return ((0, jsx_runtime_1.jsxs)("picture", { className: containerClassName, "data-qa": qa, children: [(mobile || hideDevices.mobile) && ((0, jsx_runtime_1.jsx)(DeviceSpecificFragment, { src: mobile || exports.EMPTY_IMG, disableWebp: disableWebp || Boolean(hideDevices.mobile), maxBreakpoint: constants_1.BREAKPOINTS.sm, qa: qaAttributes.mobileSource })), (tablet || hideDevices.tablet) && ((0, jsx_runtime_1.jsx)(DeviceSpecificFragment, { src: tablet || exports.EMPTY_IMG, disableWebp: disableWebp || Boolean(hideDevices.tablet), maxBreakpoint: constants_1.BREAKPOINTS.md, minBreakpoint: constants_1.BREAKPOINTS.sm, qa: qaAttributes.tabletSource })), hideDevices.desktop && ((0, jsx_runtime_1.jsx)(DeviceSpecificFragment, { src: exports.EMPTY_IMG, disableWebp: true, minBreakpoint: constants_1.BREAKPOINTS.md, qa: qaAttributes.desktopSource })), src && !disableWebp && ((0, jsx_runtime_1.jsx)("source", { srcSet: checkWebP(src), type: "image/webp", "data-qa": qaAttributes.desktopSourceCompressed })), (0, jsx_runtime_1.jsx)(ImageBase_1.default, { className: className, alt: alt, src: src, style: style, fetchPriority: fetchPriority, loading: loading, onClick: onClick, onError: () => setImgLoadingError(true), onLoad: onLoad })] }));
|
|
43
43
|
};
|
|
44
44
|
exports.default = Image;
|
|
45
45
|
//# sourceMappingURL=Image.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Image.js","sourceRoot":"../../../../src","sources":["components/Image/Image.tsx"],"names":[],"mappings":";;;;;AAAA,qDAA+B;AAE/B,kDAA4C;AAC5C,0FAA4E;AAC5E,kDAAiF;AACjF,gDAA4C;AAC5C,gEAAyD;AACzD,kFAA+C;AAiB/C,MAAM,SAAS,GAAG,CAAC,GAAW,EAAE,EAAE;IAC9B,OAAO,GAAG,CAAC,QAAQ,CAAC,OAAO,CAAC,CAAC,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC,GAAG,GAAG,OAAO,CAAC;AACvD,CAAC,CAAC;AAEW,QAAA,SAAS,GAClB,wHAAwH,CAAC;AAE7H,MAAM,sBAAsB,GAAG,CAAC,EAC5B,WAAW,EACX,GAAG,EACH,aAAa,EACb,aAAa,EACb,EAAE,GACwB,EAAE,EAAE;IAC9B,MAAM,KAAK,GAAa,EAAE,CAAC;IAE3B,IAAI,aAAa,EAAE,CAAC;QAChB,KAAK,CAAC,IAAI,CAAC,eAAe,aAAa,KAAK,CAAC,CAAC;IAClD,CAAC;IAED,IAAI,aAAa,EAAE,CAAC;QAChB,KAAK,CAAC,IAAI,CAAC,eAAe,aAAa,KAAK,CAAC,CAAC;IAClD,CAAC;IAED,MAAM,WAAW,GAAG,KAAK,CAAC,IAAI,CAAC,OAAO,CAAC,CAAC;IAExC,OAAO,CACH,wBAAC,KAAK,CAAC,QAAQ,eACV,CAAC,WAAW,IAAI,CACb,mCACI,MAAM,EAAE,SAAS,CAAC,GAAG,CAAC,EACtB,IAAI,EAAC,YAAY,EACjB,KAAK,EAAE,WAAW,aACT,GAAG,EAAE,aAAa,GAC7B,CACL,EACD,mCAAQ,MAAM,EAAE,GAAG,EAAE,KAAK,EAAE,WAAW,aAAW,EAAE,GAAI,IAC3C,CACpB,CAAC;AACN,CAAC,CAAC;AAEF,MAAM,KAAK,GAAG,CAAC,KAAiB,EAAE,EAAE;IAChC,MAAM,eAAe,GAAG,KAAK,CAAC,UAAU,CAAC,+CAAsB,CAAC,CAAC;IACjE,MAAM,EACF,GAAG,EAAE,QAAQ,EACb,GAAG,EACH,eAAe,EACf,MAAM,EACN,OAAO,EACP,MAAM,EACN,KAAK,EACL,SAAS,EACT,OAAO,EACP,MAAM,EACN,kBAAkB,EAClB,EAAE,EACF,aAAa,EACb,OAAO,EACP,IAAI,GACP,GAAG,KAAK,CAAC;IACV,MAAM,CAAC,eAAe,EAAE,kBAAkB,CAAC,GAAG,KAAK,CAAC,QAAQ,CAAC,KAAK,CAAC,CAAC;IAEpE,MAAM,GAAG,GAAG,QAAQ,IAAI,OAAO,CAAC;IAEhC,MAAM,WAAW,GACb,OAAO,IAAI,KAAK,SAAS,IAAI,CAAC,IAAI;QAC9B,CAAC,CAAC,MAAM,CAAC,MAAM,CAAC,eAAM,CAAC,CAAC,MAAM,CACxB,CAAC,GAAG,EAAE,MAAM,EAAE,EAAE,CAAC,CAAC,EAAC,GAAG,GAAG,EAAE,CAAC,MAAM,CAAC,EAAE,OAAO,CAAC,IAAI,CAAC,EAAC,CAAC,EACpD,EAA6B,CAChC;QACH,CAAC,CAAC,IAAI,CAAC;IAEf,MAAM,YAAY,GAAG,IAAA,uBAAe,EAChC,EAAE,EACF,oBAAoB,EACpB,eAAe,EACf,oBAAoB,EACpB,eAAe,EACf,gBAAgB,EAChB,2BAA2B,CAC9B,CAAC;IAEF,MAAM,WAAW,GACb,CAAC,GAAG;QACJ,eAAe,CAAC,eAAe;QAC/B,eAAe;QACf,CAAC,IAAA,8BAAc,EAAC,GAAG,CAAC;QACpB,eAAe,CAAC;IAEpB,OAAO,CACH,qCAAS,SAAS,EAAE,kBAAkB,aAAW,EAAE,aAC9C,CAAC,MAAM,IAAI,WAAW,CAAC,MAAM,CAAC,IAAI,CAC/B,uBAAC,sBAAsB,IACnB,GAAG,EAAE,MAAM,IAAI,iBAAS,EACxB,WAAW,EAAE,WAAW,
|
|
1
|
+
{"version":3,"file":"Image.js","sourceRoot":"../../../../src","sources":["components/Image/Image.tsx"],"names":[],"mappings":"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","sourcesContent":["import * as React from 'react';\n\nimport {BREAKPOINTS} from '../../constants';\nimport {ProjectSettingsContext} from '../../context/projectSettingsContext';\nimport {Device, ImageDeviceProps, ImageObjectProps, QAProps} from '../../models';\nimport {getQaAttrubutes} from '../../utils';\nimport {isCompressible} from '../../utils/imageCompress';\nimport ImageBase from '../ImageBase/ImageBase';\n\nexport interface ImageProps extends Partial<ImageObjectProps>, Partial<ImageDeviceProps>, QAProps {\n style?: React.CSSProperties;\n className?: string;\n onClick?: React.MouseEventHandler;\n onLoad?: React.ReactEventHandler<HTMLDivElement>;\n containerClassName?: string;\n}\n\nexport interface DeviceSpecificFragmentProps extends QAProps {\n disableWebp: boolean;\n src: string;\n maxBreakpoint?: number;\n minBreakpoint?: number;\n}\n\nconst checkWebP = (src: string) => {\n return src.endsWith('.webp') ? src : src + '.webp';\n};\n\nexport const EMPTY_IMG =\n 'data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxIiBoZWlnaHQ9IjEiPjwvc3ZnPg==';\n\nconst DeviceSpecificFragment = ({\n disableWebp,\n src,\n maxBreakpoint,\n minBreakpoint,\n qa,\n}: DeviceSpecificFragmentProps) => {\n const media: string[] = [];\n\n if (maxBreakpoint) {\n media.push(`(max-width: ${maxBreakpoint}px)`);\n }\n\n if (minBreakpoint) {\n media.push(`(min-width: ${minBreakpoint}px)`);\n }\n\n const mediaString = media.join(' and ');\n\n return (\n <React.Fragment>\n {!disableWebp && (\n <source\n srcSet={checkWebP(src)}\n type=\"image/webp\"\n media={mediaString}\n data-qa={`${qa}-compressed`}\n />\n )}\n <source srcSet={src} media={mediaString} data-qa={qa} />\n </React.Fragment>\n );\n};\n\nconst Image = (props: ImageProps) => {\n const projectSettings = React.useContext(ProjectSettingsContext);\n const {\n src: imageSrc,\n alt,\n disableCompress,\n tablet,\n desktop,\n mobile,\n style,\n className,\n onClick,\n onLoad,\n containerClassName,\n qa,\n fetchPriority,\n loading,\n hide,\n } = props;\n const [imgLoadingError, setImgLoadingError] = React.useState(false);\n\n const src = imageSrc || desktop;\n\n const hideDevices =\n typeof hide === 'boolean' || !hide\n ? Object.values(Device).reduce(\n (acc, device) => ({...acc, [device]: Boolean(hide)}),\n {} as Record<Device, boolean>,\n )\n : hide;\n\n const qaAttributes = getQaAttrubutes(\n qa,\n 'mobile-webp-source',\n 'mobile-source',\n 'tablet-webp-source',\n 'tablet-source',\n 'desktop-source',\n 'desktop-source-compressed',\n );\n\n const disableWebp =\n !src ||\n projectSettings.disableCompress ||\n disableCompress ||\n !isCompressible(src) ||\n imgLoadingError;\n\n return (\n <picture className={containerClassName} data-qa={qa}>\n {(mobile || hideDevices.mobile) && (\n <DeviceSpecificFragment\n src={mobile || EMPTY_IMG}\n disableWebp={disableWebp || Boolean(hideDevices.mobile)}\n maxBreakpoint={BREAKPOINTS.sm}\n qa={qaAttributes.mobileSource}\n />\n )}\n {(tablet || hideDevices.tablet) && (\n <DeviceSpecificFragment\n src={tablet || EMPTY_IMG}\n disableWebp={disableWebp || Boolean(hideDevices.tablet)}\n maxBreakpoint={BREAKPOINTS.md}\n minBreakpoint={BREAKPOINTS.sm}\n qa={qaAttributes.tabletSource}\n />\n )}\n {hideDevices.desktop && (\n <DeviceSpecificFragment\n src={EMPTY_IMG}\n disableWebp\n minBreakpoint={BREAKPOINTS.md}\n qa={qaAttributes.desktopSource}\n />\n )}\n {src && !disableWebp && (\n <source\n srcSet={checkWebP(src)}\n type=\"image/webp\"\n data-qa={qaAttributes.desktopSourceCompressed}\n />\n )}\n <ImageBase\n className={className}\n alt={alt}\n src={src}\n style={style}\n fetchPriority={fetchPriority}\n loading={loading}\n onClick={onClick}\n onError={() => setImgLoadingError(true)}\n onLoad={onLoad}\n />\n </picture>\n );\n};\n\nexport default Image;\n"]}
|
|
@@ -35,7 +35,7 @@ const Image = (props) => {
|
|
|
35
35
|
disableCompress ||
|
|
36
36
|
!isCompressible(src) ||
|
|
37
37
|
imgLoadingError;
|
|
38
|
-
return (_jsxs("picture", { className: containerClassName, "data-qa": qa, children: [(mobile || hideDevices.mobile) && (_jsx(DeviceSpecificFragment, { src: mobile || EMPTY_IMG, disableWebp: disableWebp, maxBreakpoint: BREAKPOINTS.sm, qa: qaAttributes.mobileSource })), (tablet || hideDevices.tablet) && (_jsx(DeviceSpecificFragment, { src: tablet || EMPTY_IMG, disableWebp: disableWebp, maxBreakpoint: BREAKPOINTS.md, minBreakpoint: BREAKPOINTS.sm, qa: qaAttributes.tabletSource })), hideDevices.desktop && (_jsx(DeviceSpecificFragment, { src: EMPTY_IMG, disableWebp:
|
|
38
|
+
return (_jsxs("picture", { className: containerClassName, "data-qa": qa, children: [(mobile || hideDevices.mobile) && (_jsx(DeviceSpecificFragment, { src: mobile || EMPTY_IMG, disableWebp: disableWebp || Boolean(hideDevices.mobile), maxBreakpoint: BREAKPOINTS.sm, qa: qaAttributes.mobileSource })), (tablet || hideDevices.tablet) && (_jsx(DeviceSpecificFragment, { src: tablet || EMPTY_IMG, disableWebp: disableWebp || Boolean(hideDevices.tablet), maxBreakpoint: BREAKPOINTS.md, minBreakpoint: BREAKPOINTS.sm, qa: qaAttributes.tabletSource })), hideDevices.desktop && (_jsx(DeviceSpecificFragment, { src: EMPTY_IMG, disableWebp: true, minBreakpoint: BREAKPOINTS.md, qa: qaAttributes.desktopSource })), src && !disableWebp && (_jsx("source", { srcSet: checkWebP(src), type: "image/webp", "data-qa": qaAttributes.desktopSourceCompressed })), _jsx(ImageBase, { className: className, alt: alt, src: src, style: style, fetchPriority: fetchPriority, loading: loading, onClick: onClick, onError: () => setImgLoadingError(true), onLoad: onLoad })] }));
|
|
39
39
|
};
|
|
40
40
|
export default Image;
|
|
41
41
|
//# sourceMappingURL=Image.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Image.js","sourceRoot":"../../../../src","sources":["components/Image/Image.tsx"],"names":[],"mappings":"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
|
|
1
|
+
{"version":3,"file":"Image.js","sourceRoot":"../../../../src","sources":["components/Image/Image.tsx"],"names":[],"mappings":"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","sourcesContent":["import * as React from 'react';\n\nimport {BREAKPOINTS} from '../../constants';\nimport {ProjectSettingsContext} from '../../context/projectSettingsContext';\nimport {Device, ImageDeviceProps, ImageObjectProps, QAProps} from '../../models';\nimport {getQaAttrubutes} from '../../utils';\nimport {isCompressible} from '../../utils/imageCompress';\nimport ImageBase from '../ImageBase/ImageBase';\n\nexport interface ImageProps extends Partial<ImageObjectProps>, Partial<ImageDeviceProps>, QAProps {\n style?: React.CSSProperties;\n className?: string;\n onClick?: React.MouseEventHandler;\n onLoad?: React.ReactEventHandler<HTMLDivElement>;\n containerClassName?: string;\n}\n\nexport interface DeviceSpecificFragmentProps extends QAProps {\n disableWebp: boolean;\n src: string;\n maxBreakpoint?: number;\n minBreakpoint?: number;\n}\n\nconst checkWebP = (src: string) => {\n return src.endsWith('.webp') ? src : src + '.webp';\n};\n\nexport const EMPTY_IMG =\n 'data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxIiBoZWlnaHQ9IjEiPjwvc3ZnPg==';\n\nconst DeviceSpecificFragment = ({\n disableWebp,\n src,\n maxBreakpoint,\n minBreakpoint,\n qa,\n}: DeviceSpecificFragmentProps) => {\n const media: string[] = [];\n\n if (maxBreakpoint) {\n media.push(`(max-width: ${maxBreakpoint}px)`);\n }\n\n if (minBreakpoint) {\n media.push(`(min-width: ${minBreakpoint}px)`);\n }\n\n const mediaString = media.join(' and ');\n\n return (\n <React.Fragment>\n {!disableWebp && (\n <source\n srcSet={checkWebP(src)}\n type=\"image/webp\"\n media={mediaString}\n data-qa={`${qa}-compressed`}\n />\n )}\n <source srcSet={src} media={mediaString} data-qa={qa} />\n </React.Fragment>\n );\n};\n\nconst Image = (props: ImageProps) => {\n const projectSettings = React.useContext(ProjectSettingsContext);\n const {\n src: imageSrc,\n alt,\n disableCompress,\n tablet,\n desktop,\n mobile,\n style,\n className,\n onClick,\n onLoad,\n containerClassName,\n qa,\n fetchPriority,\n loading,\n hide,\n } = props;\n const [imgLoadingError, setImgLoadingError] = React.useState(false);\n\n const src = imageSrc || desktop;\n\n const hideDevices =\n typeof hide === 'boolean' || !hide\n ? Object.values(Device).reduce(\n (acc, device) => ({...acc, [device]: Boolean(hide)}),\n {} as Record<Device, boolean>,\n )\n : hide;\n\n const qaAttributes = getQaAttrubutes(\n qa,\n 'mobile-webp-source',\n 'mobile-source',\n 'tablet-webp-source',\n 'tablet-source',\n 'desktop-source',\n 'desktop-source-compressed',\n );\n\n const disableWebp =\n !src ||\n projectSettings.disableCompress ||\n disableCompress ||\n !isCompressible(src) ||\n imgLoadingError;\n\n return (\n <picture className={containerClassName} data-qa={qa}>\n {(mobile || hideDevices.mobile) && (\n <DeviceSpecificFragment\n src={mobile || EMPTY_IMG}\n disableWebp={disableWebp || Boolean(hideDevices.mobile)}\n maxBreakpoint={BREAKPOINTS.sm}\n qa={qaAttributes.mobileSource}\n />\n )}\n {(tablet || hideDevices.tablet) && (\n <DeviceSpecificFragment\n src={tablet || EMPTY_IMG}\n disableWebp={disableWebp || Boolean(hideDevices.tablet)}\n maxBreakpoint={BREAKPOINTS.md}\n minBreakpoint={BREAKPOINTS.sm}\n qa={qaAttributes.tabletSource}\n />\n )}\n {hideDevices.desktop && (\n <DeviceSpecificFragment\n src={EMPTY_IMG}\n disableWebp\n minBreakpoint={BREAKPOINTS.md}\n qa={qaAttributes.desktopSource}\n />\n )}\n {src && !disableWebp && (\n <source\n srcSet={checkWebP(src)}\n type=\"image/webp\"\n data-qa={qaAttributes.desktopSourceCompressed}\n />\n )}\n <ImageBase\n className={className}\n alt={alt}\n src={src}\n style={style}\n fetchPriority={fetchPriority}\n loading={loading}\n onClick={onClick}\n onError={() => setImgLoadingError(true)}\n onLoad={onLoad}\n />\n </picture>\n );\n};\n\nexport default Image;\n"]}
|