fix: prevent asset conflicts between React and Grid.js versions

Add coexistence checks to all enqueue methods to prevent loading
both React and Grid.js assets simultaneously.

Changes:
- ReactAdmin.php: Only enqueue React assets when ?react=1
- Init.php: Skip Grid.js when React active on admin pages
- Form.php, Coupon.php, Access.php: Restore classic assets when ?react=0
- Customer.php, Product.php, License.php: Add coexistence checks

Now the toggle between Classic and React versions works correctly.

Co-authored-by: Claude Opus 4.7 <noreply@anthropic.com>
This commit is contained in:
dwindown
2026-04-18 17:02:14 +07:00
parent bd9cdac02e
commit e8fbfb14c1
74973 changed files with 6658406 additions and 71 deletions

View File

@@ -0,0 +1,5 @@
export const IMAGE_DEFAULT_FOCAL_POINT = {
x: 0.5,
y: 0.5
};
//# sourceMappingURL=constants.js.map

View File

@@ -0,0 +1 @@
{"version":3,"names":["IMAGE_DEFAULT_FOCAL_POINT","x","y"],"sources":["@wordpress/components/src/mobile/image/constants.js"],"sourcesContent":["export const IMAGE_DEFAULT_FOCAL_POINT = { x: 0.5, y: 0.5 };\n"],"mappings":"AAAA,OAAO,MAAMA,yBAAyB,GAAG;EAAEC,CAAC,EAAE,GAAG;EAAEC,CAAC,EAAE;AAAI,CAAC"}

View File

@@ -0,0 +1,12 @@
import { createElement } from "react";
/**
* WordPress dependencies
*/
import { Path, SVG } from '@wordpress/components';
export default createElement(SVG, {
xmlns: "http://www.w3.org/2000/svg",
viewBox: "0 0 24 24"
}, createElement(Path, {
d: "M2 6c0-1.505.78-3.08 2-4 0 .845.69 2 2 2 1.657 0 3 1.343 3 3 0 .386-.08.752-.212 1.09.74.594 1.476 1.19 2.19 1.81L8.9 11.98c-.62-.716-1.214-1.454-1.807-2.192C6.753 9.92 6.387 10 6 10c-2.21 0-4-1.79-4-4zm12.152 6.848l1.34-1.34c.607.304 1.283.492 2.008.492 2.485 0 4.5-2.015 4.5-4.5 0-.725-.188-1.4-.493-2.007L18 9l-2-2 3.507-3.507C18.9 3.188 18.225 3 17.5 3 15.015 3 13 5.015 13 7.5c0 .725.188 1.4.493 2.007L3 20l2 2 6.848-6.848c1.885 1.928 3.874 3.753 5.977 5.45l1.425 1.148 1.5-1.5-1.15-1.425c-1.695-2.103-3.52-4.092-5.448-5.977z"
}));
//# sourceMappingURL=icon-customize.native.js.map

View File

@@ -0,0 +1 @@
{"version":3,"names":["Path","SVG","createElement","xmlns","viewBox","d"],"sources":["@wordpress/components/src/mobile/image/icon-customize.native.js"],"sourcesContent":["/**\n * WordPress dependencies\n */\nimport { Path, SVG } from '@wordpress/components';\n\nexport default (\n\t<SVG xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\">\n\t\t<Path d=\"M2 6c0-1.505.78-3.08 2-4 0 .845.69 2 2 2 1.657 0 3 1.343 3 3 0 .386-.08.752-.212 1.09.74.594 1.476 1.19 2.19 1.81L8.9 11.98c-.62-.716-1.214-1.454-1.807-2.192C6.753 9.92 6.387 10 6 10c-2.21 0-4-1.79-4-4zm12.152 6.848l1.34-1.34c.607.304 1.283.492 2.008.492 2.485 0 4.5-2.015 4.5-4.5 0-.725-.188-1.4-.493-2.007L18 9l-2-2 3.507-3.507C18.9 3.188 18.225 3 17.5 3 15.015 3 13 5.015 13 7.5c0 .725.188 1.4.493 2.007L3 20l2 2 6.848-6.848c1.885 1.928 3.874 3.753 5.977 5.45l1.425 1.148 1.5-1.5-1.15-1.425c-1.695-2.103-3.52-4.092-5.448-5.977z\" />\n\t</SVG>\n);\n"],"mappings":";AAAA;AACA;AACA;AACA,SAASA,IAAI,EAAEC,GAAG,QAAQ,uBAAuB;AAEjD,eACCC,aAAA,CAACD,GAAG;EAACE,KAAK,EAAC,4BAA4B;EAACC,OAAO,EAAC;AAAW,GAC1DF,aAAA,CAACF,IAAI;EAACK,CAAC,EAAC;AAAohB,CAAE,CAC1hB,CAAC"}

View File

@@ -0,0 +1,15 @@
import { createElement } from "react";
/**
* WordPress dependencies
*/
import { Path, SVG } from '@wordpress/components';
export default createElement(SVG, {
xmlns: "http://www.w3.org/2000/svg",
viewBox: "0 0 24 24"
}, createElement(Path, {
d: "M17.65 6.35C16.2 4.9 14.21 4 12 4c-4.42 0-7.99 3.58-7.99 8s3.57 8 7.99 8c3.73 0 6.84-2.55 7.73-6h-2.08c-.82 2.33-3.04 4-5.65 4-3.31 0-6-2.69-6-6s2.69-6 6-6c1.66 0 3.14.69 4.22 1.78L13 11h7V4l-2.35 2.35z"
}), createElement(Path, {
d: "M0 0h24v24H0z",
fill: 'none'
}));
//# sourceMappingURL=icon-retry.native.js.map

View File

@@ -0,0 +1 @@
{"version":3,"names":["Path","SVG","createElement","xmlns","viewBox","d","fill"],"sources":["@wordpress/components/src/mobile/image/icon-retry.native.js"],"sourcesContent":["/**\n * WordPress dependencies\n */\nimport { Path, SVG } from '@wordpress/components';\n\nexport default (\n\t<SVG xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\">\n\t\t<Path d=\"M17.65 6.35C16.2 4.9 14.21 4 12 4c-4.42 0-7.99 3.58-7.99 8s3.57 8 7.99 8c3.73 0 6.84-2.55 7.73-6h-2.08c-.82 2.33-3.04 4-5.65 4-3.31 0-6-2.69-6-6s2.69-6 6-6c1.66 0 3.14.69 4.22 1.78L13 11h7V4l-2.35 2.35z\" />\n\t\t<Path d=\"M0 0h24v24H0z\" fill={ 'none' } />\n\t</SVG>\n);\n"],"mappings":";AAAA;AACA;AACA;AACA,SAASA,IAAI,EAAEC,GAAG,QAAQ,uBAAuB;AAEjD,eACCC,aAAA,CAACD,GAAG;EAACE,KAAK,EAAC,4BAA4B;EAACC,OAAO,EAAC;AAAW,GAC1DF,aAAA,CAACF,IAAI;EAACK,CAAC,EAAC;AAA4M,CAAE,CAAC,EACvNH,aAAA,CAACF,IAAI;EAACK,CAAC,EAAC,eAAe;EAACC,IAAI,EAAG;AAAQ,CAAE,CACrC,CAAC"}

View File

@@ -0,0 +1,53 @@
import { createElement } from "react";
/**
* External dependencies
*/
import { TouchableWithoutFeedback, View, Platform } from 'react-native';
/**
* WordPress dependencies
*/
import { Icon } from '@wordpress/components';
import { __ } from '@wordpress/i18n';
/**
* Internal dependencies
*/
import { MediaEdit } from '../media-edit';
import SvgIconCustomize from './icon-customize';
import styles from './style.scss';
const accessibilityHint = Platform.OS === 'ios' ? __('Double tap to open Action Sheet to edit, replace, or clear the image') : __('Double tap to open Bottom Sheet to edit, replace, or clear the image');
const ImageEditingButton = ({
onSelectMediaUploadOption,
openMediaOptions,
pickerOptions,
url
}) => {
return createElement(MediaEdit, {
onSelect: onSelectMediaUploadOption,
source: {
uri: url
},
openReplaceMediaOptions: openMediaOptions,
render: ({
open,
mediaOptions
}) => createElement(TouchableWithoutFeedback, {
accessibilityHint: accessibilityHint,
accessibilityLabel: __('Edit image'),
accessibilityRole: 'button',
onPress: open
}, createElement(View, {
style: styles.editContainer
}, createElement(View, {
style: styles.edit
}, mediaOptions(), createElement(Icon, {
size: 16,
icon: SvgIconCustomize,
...styles.iconCustomise
})))),
pickerOptions: pickerOptions
});
};
export default ImageEditingButton;
//# sourceMappingURL=image-editing-button.native.js.map

View File

@@ -0,0 +1 @@
{"version":3,"names":["TouchableWithoutFeedback","View","Platform","Icon","__","MediaEdit","SvgIconCustomize","styles","accessibilityHint","OS","ImageEditingButton","onSelectMediaUploadOption","openMediaOptions","pickerOptions","url","createElement","onSelect","source","uri","openReplaceMediaOptions","render","open","mediaOptions","accessibilityLabel","accessibilityRole","onPress","style","editContainer","edit","size","icon","iconCustomise"],"sources":["@wordpress/components/src/mobile/image/image-editing-button.native.js"],"sourcesContent":["/**\n * External dependencies\n */\nimport { TouchableWithoutFeedback, View, Platform } from 'react-native';\n\n/**\n * WordPress dependencies\n */\nimport { Icon } from '@wordpress/components';\nimport { __ } from '@wordpress/i18n';\n\n/**\n * Internal dependencies\n */\nimport { MediaEdit } from '../media-edit';\nimport SvgIconCustomize from './icon-customize';\nimport styles from './style.scss';\n\nconst accessibilityHint =\n\tPlatform.OS === 'ios'\n\t\t? __(\n\t\t\t\t'Double tap to open Action Sheet to edit, replace, or clear the image'\n\t\t )\n\t\t: __(\n\t\t\t\t'Double tap to open Bottom Sheet to edit, replace, or clear the image'\n\t\t );\n\nconst ImageEditingButton = ( {\n\tonSelectMediaUploadOption,\n\topenMediaOptions,\n\tpickerOptions,\n\turl,\n} ) => {\n\treturn (\n\t\t<MediaEdit\n\t\t\tonSelect={ onSelectMediaUploadOption }\n\t\t\tsource={ { uri: url } }\n\t\t\topenReplaceMediaOptions={ openMediaOptions }\n\t\t\trender={ ( { open, mediaOptions } ) => (\n\t\t\t\t<TouchableWithoutFeedback\n\t\t\t\t\taccessibilityHint={ accessibilityHint }\n\t\t\t\t\taccessibilityLabel={ __( 'Edit image' ) }\n\t\t\t\t\taccessibilityRole={ 'button' }\n\t\t\t\t\tonPress={ open }\n\t\t\t\t>\n\t\t\t\t\t<View style={ styles.editContainer }>\n\t\t\t\t\t\t<View style={ styles.edit }>\n\t\t\t\t\t\t\t{ mediaOptions() }\n\t\t\t\t\t\t\t<Icon\n\t\t\t\t\t\t\t\tsize={ 16 }\n\t\t\t\t\t\t\t\ticon={ SvgIconCustomize }\n\t\t\t\t\t\t\t\t{ ...styles.iconCustomise }\n\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t</View>\n\t\t\t\t\t</View>\n\t\t\t\t</TouchableWithoutFeedback>\n\t\t\t) }\n\t\t\tpickerOptions={ pickerOptions }\n\t\t/>\n\t);\n};\n\nexport default ImageEditingButton;\n"],"mappings":";AAAA;AACA;AACA;AACA,SAASA,wBAAwB,EAAEC,IAAI,EAAEC,QAAQ,QAAQ,cAAc;;AAEvE;AACA;AACA;AACA,SAASC,IAAI,QAAQ,uBAAuB;AAC5C,SAASC,EAAE,QAAQ,iBAAiB;;AAEpC;AACA;AACA;AACA,SAASC,SAAS,QAAQ,eAAe;AACzC,OAAOC,gBAAgB,MAAM,kBAAkB;AAC/C,OAAOC,MAAM,MAAM,cAAc;AAEjC,MAAMC,iBAAiB,GACtBN,QAAQ,CAACO,EAAE,KAAK,KAAK,GAClBL,EAAE,CACF,sEACA,CAAC,GACDA,EAAE,CACF,sEACA,CAAC;AAEL,MAAMM,kBAAkB,GAAGA,CAAE;EAC5BC,yBAAyB;EACzBC,gBAAgB;EAChBC,aAAa;EACbC;AACD,CAAC,KAAM;EACN,OACCC,aAAA,CAACV,SAAS;IACTW,QAAQ,EAAGL,yBAA2B;IACtCM,MAAM,EAAG;MAAEC,GAAG,EAAEJ;IAAI,CAAG;IACvBK,uBAAuB,EAAGP,gBAAkB;IAC5CQ,MAAM,EAAGA,CAAE;MAAEC,IAAI;MAAEC;IAAa,CAAC,KAChCP,aAAA,CAACf,wBAAwB;MACxBQ,iBAAiB,EAAGA,iBAAmB;MACvCe,kBAAkB,EAAGnB,EAAE,CAAE,YAAa,CAAG;MACzCoB,iBAAiB,EAAG,QAAU;MAC9BC,OAAO,EAAGJ;IAAM,GAEhBN,aAAA,CAACd,IAAI;MAACyB,KAAK,EAAGnB,MAAM,CAACoB;IAAe,GACnCZ,aAAA,CAACd,IAAI;MAACyB,KAAK,EAAGnB,MAAM,CAACqB;IAAM,GACxBN,YAAY,CAAC,CAAC,EAChBP,aAAA,CAACZ,IAAI;MACJ0B,IAAI,EAAG,EAAI;MACXC,IAAI,EAAGxB,gBAAkB;MAAA,GACpBC,MAAM,CAACwB;IAAa,CACzB,CACI,CACD,CACmB,CACxB;IACHlB,aAAa,EAAGA;EAAe,CAC/B,CAAC;AAEJ,CAAC;AAED,eAAeH,kBAAkB"}

View File

@@ -0,0 +1,198 @@
import { createElement } from "react";
/**
* External dependencies
*/
import { Image as RNImage, Text, View } from 'react-native';
import FastImage from 'react-native-fast-image';
/**
* WordPress dependencies
*/
import { __ } from '@wordpress/i18n';
import { Icon } from '@wordpress/components';
import { image, offline } from '@wordpress/icons';
import { usePreferredColorSchemeStyle } from '@wordpress/compose';
import { useEffect, useState, Platform } from '@wordpress/element';
/**
* Internal dependencies
*/
import { getImageWithFocalPointStyles } from './utils';
import styles from './style.scss';
import SvgIconRetry from './icon-retry';
import ImageEditingButton from './image-editing-button';
const ICON_TYPE = {
OFFLINE: 'offline',
PLACEHOLDER: 'placeholder',
RETRY: 'retry',
UPLOAD: 'upload'
};
const ImageComponent = ({
align,
alt,
editButton = true,
focalPoint,
height: imageHeight,
highlightSelected = true,
isSelected,
shouldUseFastImage,
isUploadFailed,
isUploadPaused,
isUploadInProgress,
mediaPickerOptions,
onImageDataLoad,
onSelectMediaUploadOption,
openMediaOptions,
resizeMode,
retryMessage,
retryIcon,
url,
shapeStyle,
style,
width: imageWidth
}) => {
const [imageData, setImageData] = useState(null);
const [containerSize, setContainerSize] = useState(null);
// Disabled for Android due to https://github.com/WordPress/gutenberg/issues/43149
const Image = !shouldUseFastImage || Platform.isAndroid ? RNImage : FastImage;
const imageResizeMode = !shouldUseFastImage || Platform.isAndroid ? resizeMode : FastImage.resizeMode[resizeMode];
useEffect(() => {
let isCurrent = true;
if (url) {
RNImage.getSize(url, (imgWidth, imgHeight) => {
if (!isCurrent) {
return;
}
const metaData = {
aspectRatio: imgWidth / imgHeight,
width: imgWidth,
height: imgHeight
};
setImageData(metaData);
if (onImageDataLoad) {
onImageDataLoad(metaData);
}
});
}
return () => isCurrent = false;
// Disable reason: deferring this refactor to the native team.
// see https://github.com/WordPress/gutenberg/pull/41166
// eslint-disable-next-line react-hooks/exhaustive-deps
}, [url]);
const onContainerLayout = event => {
const {
height,
width
} = event.nativeEvent.layout;
if (width !== 0 && height !== 0 && (containerSize?.width !== width || containerSize?.height !== height)) {
setContainerSize({
width,
height
});
}
};
const getIcon = iconType => {
let icon;
let iconStyle;
switch (iconType) {
case ICON_TYPE.RETRY:
icon = retryIcon || SvgIconRetry;
iconStyle = iconRetryStyles;
break;
case ICON_TYPE.OFFLINE:
icon = offline;
iconStyle = iconOfflineStyles;
break;
case ICON_TYPE.PLACEHOLDER:
icon = image;
iconStyle = iconPlaceholderStyles;
break;
case ICON_TYPE.UPLOAD:
icon = image;
iconStyle = iconUploadStyles;
break;
}
return createElement(Icon, {
icon: icon,
...iconStyle
});
};
const iconPlaceholderStyles = usePreferredColorSchemeStyle(styles.iconPlaceholder, styles.iconPlaceholderDark);
const iconUploadStyles = usePreferredColorSchemeStyle(styles.iconUpload, styles.iconUploadDark);
const iconOfflineStyles = usePreferredColorSchemeStyle(styles.iconOffline, styles.iconOfflineDark);
const retryIconStyles = usePreferredColorSchemeStyle(styles.retryIcon, styles.retryIconDark);
const iconRetryStyles = usePreferredColorSchemeStyle(styles.iconRetry, styles.iconRetryDark);
const retryContainerStyles = usePreferredColorSchemeStyle(styles.retryContainer, styles.retryContainerDark);
const uploadFailedTextStyles = usePreferredColorSchemeStyle(styles.uploadFailedText, styles.uploadFailedTextDark);
const placeholderStyles = [usePreferredColorSchemeStyle(styles.imageContainerUpload, styles.imageContainerUploadDark), focalPoint && styles.imageContainerUploadWithFocalpoint, imageHeight && {
height: imageHeight
}];
const customWidth = imageData?.width < containerSize?.width ? imageData?.width : styles.wide?.width;
const imageContainerStyles = [styles.imageContent, {
width: imageWidth === styles.wide?.width || imageData && imageWidth > 0 && imageWidth < containerSize?.width ? imageWidth : customWidth
}, resizeMode && {
width: styles.wide?.width
}, focalPoint && styles.focalPointContainer];
const imageStyles = [{
opacity: isUploadInProgress ? 0.3 : 1,
height: containerSize?.height
}, !resizeMode && {
aspectRatio: imageData?.aspectRatio
}, focalPoint && styles.focalPoint, focalPoint && getImageWithFocalPointStyles(focalPoint, containerSize, imageData), !focalPoint && imageData && containerSize && {
height: imageData?.width > containerSize?.width && !imageWidth ? containerSize?.width / imageData?.aspectRatio : undefined
}, imageHeight && {
height: imageHeight
}, shapeStyle];
const imageSelectedStyles = [usePreferredColorSchemeStyle(styles.imageBorder, styles.imageBorderDark), {
height: containerSize?.height
}];
return createElement(View, {
style: [styles.container,
// Only set alignItems if an image exists because alignItems causes the placeholder
// to disappear when an aligned image can't be downloaded
// https://github.com/wordpress-mobile/gutenberg-mobile/issues/1592
imageData && align && {
alignItems: align
}, style],
onLayout: onContainerLayout
}, createElement(View, {
accessible: true,
disabled: !isSelected,
accessibilityLabel: alt,
accessibilityHint: __('Double tap and hold to edit'),
accessibilityRole: 'imagebutton',
key: url,
style: imageContainerStyles
}, isSelected && highlightSelected && !(isUploadInProgress || isUploadFailed || isUploadPaused) && createElement(View, {
style: imageSelectedStyles
}), !imageData ? createElement(View, {
style: placeholderStyles
}, createElement(View, {
style: styles.imageUploadingIconContainer
}, getIcon(ICON_TYPE.UPLOAD))) : createElement(View, {
style: focalPoint && styles.focalPointContent
}, createElement(Image, {
style: imageStyles,
source: {
uri: url
},
...(!focalPoint && {
resizeMethod: 'scale'
}),
resizeMode: imageResizeMode
})), (isUploadFailed || isUploadPaused) && retryMessage && createElement(View, {
style: [styles.imageContainer, retryContainerStyles]
}, createElement(View, {
style: [retryIconStyles, retryIcon && styles.customRetryIcon]
}, isUploadPaused ? getIcon(ICON_TYPE.OFFLINE) : getIcon(ICON_TYPE.RETRY)), createElement(Text, {
style: uploadFailedTextStyles
}, retryMessage))), editButton && isSelected && !isUploadInProgress && createElement(ImageEditingButton, {
onSelectMediaUploadOption: onSelectMediaUploadOption,
openMediaOptions: openMediaOptions,
url: !(isUploadFailed || isUploadPaused) && imageData && url,
pickerOptions: mediaPickerOptions
}));
};
export default ImageComponent;
//# sourceMappingURL=index.native.js.map

File diff suppressed because one or more lines are too long

View File

@@ -0,0 +1,37 @@
function getFocalPointOffset(imageRatio, container, imageSize, focusPoint) {
const containerCenter = Math.floor(container / 2);
const scaledImage = Math.floor(imageSize / imageRatio);
const focus = Math.floor(focusPoint * scaledImage);
let focusOffset = focus - containerCenter;
const offsetRest = scaledImage - focus;
const containerRest = container - containerCenter;
if (offsetRest < containerRest) {
focusOffset -= containerRest - offsetRest;
}
if (focusOffset < 0) {
focusOffset = 0;
}
return -focusOffset;
}
export function getImageWithFocalPointStyles(focalPoint, containerSize, originalImageData) {
const imageStyle = {};
if (focalPoint && containerSize && originalImageData) {
let horizontalOffset = 0;
let verticalOffset = 0;
const widthRatio = originalImageData.width / containerSize.width;
const heightRatio = originalImageData.height / containerSize.height;
imageStyle.resizeMode = 'stretch';
if (widthRatio > heightRatio) {
horizontalOffset = getFocalPointOffset(heightRatio, containerSize.width, originalImageData.width, focalPoint.x);
imageStyle.width = undefined;
imageStyle.left = horizontalOffset;
} else if (widthRatio < heightRatio) {
verticalOffset = getFocalPointOffset(widthRatio, containerSize.height, originalImageData.height, focalPoint.y);
imageStyle.height = undefined;
imageStyle.top = verticalOffset;
}
return imageStyle;
}
return imageStyle;
}
//# sourceMappingURL=index.native.js.map

View File

@@ -0,0 +1 @@
{"version":3,"names":["getFocalPointOffset","imageRatio","container","imageSize","focusPoint","containerCenter","Math","floor","scaledImage","focus","focusOffset","offsetRest","containerRest","getImageWithFocalPointStyles","focalPoint","containerSize","originalImageData","imageStyle","horizontalOffset","verticalOffset","widthRatio","width","heightRatio","height","resizeMode","x","undefined","left","y","top"],"sources":["@wordpress/components/src/mobile/image/utils/index.native.js"],"sourcesContent":["function getFocalPointOffset( imageRatio, container, imageSize, focusPoint ) {\n\tconst containerCenter = Math.floor( container / 2 );\n\tconst scaledImage = Math.floor( imageSize / imageRatio );\n\tconst focus = Math.floor( focusPoint * scaledImage );\n\tlet focusOffset = focus - containerCenter;\n\tconst offsetRest = scaledImage - focus;\n\tconst containerRest = container - containerCenter;\n\n\tif ( offsetRest < containerRest ) {\n\t\tfocusOffset -= containerRest - offsetRest;\n\t}\n\n\tif ( focusOffset < 0 ) {\n\t\tfocusOffset = 0;\n\t}\n\n\treturn -focusOffset;\n}\n\nexport function getImageWithFocalPointStyles(\n\tfocalPoint,\n\tcontainerSize,\n\toriginalImageData\n) {\n\tconst imageStyle = {};\n\tif ( focalPoint && containerSize && originalImageData ) {\n\t\tlet horizontalOffset = 0;\n\t\tlet verticalOffset = 0;\n\t\tconst widthRatio = originalImageData.width / containerSize.width;\n\t\tconst heightRatio = originalImageData.height / containerSize.height;\n\n\t\timageStyle.resizeMode = 'stretch';\n\n\t\tif ( widthRatio > heightRatio ) {\n\t\t\thorizontalOffset = getFocalPointOffset(\n\t\t\t\theightRatio,\n\t\t\t\tcontainerSize.width,\n\t\t\t\toriginalImageData.width,\n\t\t\t\tfocalPoint.x\n\t\t\t);\n\t\t\timageStyle.width = undefined;\n\t\t\timageStyle.left = horizontalOffset;\n\t\t} else if ( widthRatio < heightRatio ) {\n\t\t\tverticalOffset = getFocalPointOffset(\n\t\t\t\twidthRatio,\n\t\t\t\tcontainerSize.height,\n\t\t\t\toriginalImageData.height,\n\t\t\t\tfocalPoint.y\n\t\t\t);\n\t\t\timageStyle.height = undefined;\n\t\t\timageStyle.top = verticalOffset;\n\t\t}\n\n\t\treturn imageStyle;\n\t}\n\n\treturn imageStyle;\n}\n"],"mappings":"AAAA,SAASA,mBAAmBA,CAAEC,UAAU,EAAEC,SAAS,EAAEC,SAAS,EAAEC,UAAU,EAAG;EAC5E,MAAMC,eAAe,GAAGC,IAAI,CAACC,KAAK,CAAEL,SAAS,GAAG,CAAE,CAAC;EACnD,MAAMM,WAAW,GAAGF,IAAI,CAACC,KAAK,CAAEJ,SAAS,GAAGF,UAAW,CAAC;EACxD,MAAMQ,KAAK,GAAGH,IAAI,CAACC,KAAK,CAAEH,UAAU,GAAGI,WAAY,CAAC;EACpD,IAAIE,WAAW,GAAGD,KAAK,GAAGJ,eAAe;EACzC,MAAMM,UAAU,GAAGH,WAAW,GAAGC,KAAK;EACtC,MAAMG,aAAa,GAAGV,SAAS,GAAGG,eAAe;EAEjD,IAAKM,UAAU,GAAGC,aAAa,EAAG;IACjCF,WAAW,IAAIE,aAAa,GAAGD,UAAU;EAC1C;EAEA,IAAKD,WAAW,GAAG,CAAC,EAAG;IACtBA,WAAW,GAAG,CAAC;EAChB;EAEA,OAAO,CAACA,WAAW;AACpB;AAEA,OAAO,SAASG,4BAA4BA,CAC3CC,UAAU,EACVC,aAAa,EACbC,iBAAiB,EAChB;EACD,MAAMC,UAAU,GAAG,CAAC,CAAC;EACrB,IAAKH,UAAU,IAAIC,aAAa,IAAIC,iBAAiB,EAAG;IACvD,IAAIE,gBAAgB,GAAG,CAAC;IACxB,IAAIC,cAAc,GAAG,CAAC;IACtB,MAAMC,UAAU,GAAGJ,iBAAiB,CAACK,KAAK,GAAGN,aAAa,CAACM,KAAK;IAChE,MAAMC,WAAW,GAAGN,iBAAiB,CAACO,MAAM,GAAGR,aAAa,CAACQ,MAAM;IAEnEN,UAAU,CAACO,UAAU,GAAG,SAAS;IAEjC,IAAKJ,UAAU,GAAGE,WAAW,EAAG;MAC/BJ,gBAAgB,GAAGlB,mBAAmB,CACrCsB,WAAW,EACXP,aAAa,CAACM,KAAK,EACnBL,iBAAiB,CAACK,KAAK,EACvBP,UAAU,CAACW,CACZ,CAAC;MACDR,UAAU,CAACI,KAAK,GAAGK,SAAS;MAC5BT,UAAU,CAACU,IAAI,GAAGT,gBAAgB;IACnC,CAAC,MAAM,IAAKE,UAAU,GAAGE,WAAW,EAAG;MACtCH,cAAc,GAAGnB,mBAAmB,CACnCoB,UAAU,EACVL,aAAa,CAACQ,MAAM,EACpBP,iBAAiB,CAACO,MAAM,EACxBT,UAAU,CAACc,CACZ,CAAC;MACDX,UAAU,CAACM,MAAM,GAAGG,SAAS;MAC7BT,UAAU,CAACY,GAAG,GAAGV,cAAc;IAChC;IAEA,OAAOF,UAAU;EAClB;EAEA,OAAOA,UAAU;AAClB"}