antd
Version:
An enterprise-class UI design language and React components implementation
202 lines (194 loc) • 8.54 kB
JavaScript
import _extends from "@babel/runtime/helpers/esm/extends";
import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
import { TinyColor } from '@ctrl/tinycolor';
import { genModalMaskStyle } from '../../modal/style';
import { initZoomMotion } from '../../style/motion';
import { genComponentStyleHook, mergeToken } from '../../theme';
import { resetComponent } from '../../style';
export var genBoxStyle = function genBoxStyle(position) {
return {
position: position || 'absolute',
inset: 0
};
};
export var genImageMaskStyle = function genImageMaskStyle(token) {
var iconCls = token.iconCls,
motionDurationSlow = token.motionDurationSlow,
paddingXXS = token.paddingXXS,
marginXXS = token.marginXXS,
prefixCls = token.prefixCls;
return _defineProperty({
position: 'absolute',
inset: 0,
display: 'flex',
alignItems: 'center',
justifyContent: 'center',
color: '#fff',
background: new TinyColor('#000').setAlpha(0.5).toRgbString(),
cursor: 'pointer',
opacity: 0,
transition: "opacity ".concat(motionDurationSlow)
}, ".".concat(prefixCls, "-mask-info"), _defineProperty({
padding: "0 ".concat(paddingXXS, "px"),
overflow: 'hidden',
whiteSpace: 'nowrap',
textOverflow: 'ellipsis'
}, iconCls, {
marginInlineEnd: marginXXS
}));
};
export var genPreviewOperationsStyle = function genPreviewOperationsStyle(token) {
var _extends2;
var modalMaskBg = token.modalMaskBg,
paddingSM = token.paddingSM,
imagePreviewOperationDisabledColor = token.imagePreviewOperationDisabledColor;
return _extends(_extends({}, resetComponent(token)), (_extends2 = {
position: 'absolute',
insetBlockStart: 0,
insetInlineEnd: 0,
zIndex: 1,
display: 'flex',
flexDirection: 'row-reverse',
alignItems: 'center',
width: '100%',
color: token.imagePreviewOperationColor,
listStyle: 'none',
background: new TinyColor(modalMaskBg).setAlpha(0.1).toRgbString(),
pointerEvents: 'auto'
}, _defineProperty(_extends2, "&-operation", {
marginInlineStart: paddingSM,
padding: paddingSM,
cursor: 'pointer',
'&-disabled': {
color: imagePreviewOperationDisabledColor,
pointerEvents: 'none'
},
'&:last-of-type': {
marginInlineStart: 0
}
}), _defineProperty(_extends2, "&-progress", {
position: 'absolute',
left: {
_skip_check_: true,
value: '50%'
},
transform: 'translateX(-50%)'
}), _defineProperty(_extends2, "&-icon", {
fontSize: token.imagePreviewOperationSize
}), _extends2));
};
export var genPreviewSwitchStyle = function genPreviewSwitchStyle(token) {
var _ref2;
var modalMaskBg = token.modalMaskBg,
iconCls = token.iconCls,
imagePreviewOperationDisabledColor = token.imagePreviewOperationDisabledColor,
previewCls = token.previewCls;
return _ref2 = {
position: 'absolute',
insetBlockStart: '50%',
zIndex: 1,
display: 'flex',
alignItems: 'center',
justifyContent: 'center',
width: token.imagePreviewSwitchSize,
height: token.imagePreviewSwitchSize,
marginTop: -token.imagePreviewSwitchSize / 2,
color: token.imagePreviewOperationColor,
background: new TinyColor(modalMaskBg).setAlpha(0.1).toRgbString(),
borderRadius: '50%',
cursor: 'pointer',
pointerEvents: 'auto'
}, _defineProperty(_ref2, "".concat(previewCls, "-disabled"), _defineProperty({
color: imagePreviewOperationDisabledColor,
cursor: 'not-allowed'
}, "> ".concat(iconCls), {
cursor: 'not-allowed'
})), _defineProperty(_ref2, "> ".concat(iconCls), {
fontSize: token.imagePreviewOperationSize
}), _ref2;
};
export var genImagePreviewStyle = function genImagePreviewStyle(token) {
var _$concat4;
var motionEaseOut = token.motionEaseOut,
previewCls = token.previewCls,
motionDurationSlow = token.motionDurationSlow,
componentCls = token.componentCls;
return [_defineProperty({}, "".concat(componentCls, "-preview-root"), (_$concat4 = {}, _defineProperty(_$concat4, previewCls, {
height: '100%',
textAlign: 'center',
pointerEvents: 'none'
}), _defineProperty(_$concat4, "".concat(previewCls, "-body"), _extends(_extends({}, genBoxStyle()), {
overflow: 'hidden'
})), _defineProperty(_$concat4, "".concat(previewCls, "-img"), {
maxWidth: '100%',
maxHeight: '100%',
verticalAlign: 'middle',
transform: 'scale3d(1, 1, 1)',
cursor: 'grab',
transition: "transform ".concat(motionDurationSlow, " ").concat(motionEaseOut, " 0s"),
userSelect: 'none',
pointerEvents: 'auto',
'&-wrapper': _extends(_extends({}, genBoxStyle()), {
transition: "transform ".concat(motionDurationSlow, " ").concat(motionEaseOut, " 0s"),
'&::before': {
display: 'inline-block',
width: 1,
height: '50%',
marginInlineEnd: -1,
content: '""'
}
})
}), _defineProperty(_$concat4, "".concat(previewCls, "-moving"), _defineProperty({}, "".concat(previewCls, "-preview-img"), {
cursor: 'grabbing',
'&-wrapper': {
transitionDuration: '0s'
}
})), _defineProperty(_$concat4, "".concat(previewCls, "-operations"), _extends({}, genPreviewOperationsStyle(token))), _defineProperty(_$concat4, "".concat(previewCls, "-switch-left, ").concat(previewCls, "-switch-right"), _extends({}, genPreviewSwitchStyle(token))), _defineProperty(_$concat4, "".concat(previewCls, "-switch-left"), {
insetInlineStart: token.marginSM
}), _defineProperty(_$concat4, "".concat(previewCls, "-switch-right"), {
insetInlineEnd: token.marginSM
}), _$concat4)), // Override
_defineProperty({}, "".concat(componentCls, "-preview-root"), _defineProperty({}, "".concat(previewCls, "-wrap"), {
zIndex: token.zIndexPopup
}))];
};
var genImageStyle = function genImageStyle(token) {
var _componentCls;
var componentCls = token.componentCls;
return _defineProperty({}, componentCls, (_componentCls = {
position: 'relative',
display: 'inline-block'
}, _defineProperty(_componentCls, "".concat(componentCls, "-img"), {
width: '100%',
height: 'auto',
verticalAlign: 'middle'
}), _defineProperty(_componentCls, "".concat(componentCls, "-img-placeholder"), {
backgroundColor: token.colorBgContainerDisabled,
backgroundImage: "url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTYiIGhlaWdodD0iMTYiIHZpZXdCb3g9IjAgMCAxNiAxNiIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48cGF0aCBkPSJNMTQuNSAyLjVoLTEzQS41LjUgMCAwIDAgMSAzdjEwYS41LjUgMCAwIDAgLjUuNWgxM2EuNS41IDAgMCAwIC41LS41VjNhLjUuNSAwIDAgMC0uNS0uNXpNNS4yODEgNC43NWExIDEgMCAwIDEgMCAyIDEgMSAwIDAgMSAwLTJ6bTguMDMgNi44M2EuMTI3LjEyNyAwIDAgMS0uMDgxLjAzSDIuNzY5YS4xMjUuMTI1IDAgMCAxLS4wOTYtLjIwN2wyLjY2MS0zLjE1NmEuMTI2LjEyNiAwIDAgMSAuMTc3LS4wMTZsLjAxNi4wMTZMNy4wOCAxMC4wOWwyLjQ3LTIuOTNhLjEyNi4xMjYgMCAwIDEgLjE3Ny0uMDE2bC4wMTUuMDE2IDMuNTg4IDQuMjQ0YS4xMjcuMTI3IDAgMCAxLS4wMi4xNzV6IiBmaWxsPSIjOEM4QzhDIiBmaWxsLXJ1bGU9Im5vbnplcm8iLz48L3N2Zz4=')",
backgroundRepeat: 'no-repeat',
backgroundPosition: 'center center',
backgroundSize: '30%'
}), _defineProperty(_componentCls, "".concat(componentCls, "-mask"), _extends({}, genImageMaskStyle(token))), _defineProperty(_componentCls, "".concat(componentCls, "-mask:hover"), {
opacity: 1
}), _defineProperty(_componentCls, "".concat(componentCls, "-placeholder"), _extends({}, genBoxStyle())), _componentCls));
};
var genPreviewMotion = function genPreviewMotion(token) {
var previewCls = token.previewCls;
return _defineProperty({}, "".concat(previewCls, "-root"), initZoomMotion(token, 'zoom'));
}; // ============================== Export ==============================
export default genComponentStyleHook('Image', function (token) {
var imagePreviewOperationColor = new TinyColor(token.colorTextLightSolid);
var imageToken = mergeToken(token, {
previewCls: "".concat(token.componentCls, "-preview"),
imagePreviewOperationColor: imagePreviewOperationColor.toRgbString(),
imagePreviewOperationDisabledColor: new TinyColor(imagePreviewOperationColor).setAlpha(0.25).toRgbString(),
modalMaskBg: new TinyColor('#000').setAlpha(0.45).toRgbString(),
imagePreviewOperationSize: token.fontSizeIcon * 1.5,
imagePreviewSwitchSize: token.controlHeightLG
});
return [genImageStyle(imageToken), genImagePreviewStyle(imageToken), genModalMaskStyle(imageToken), genPreviewMotion(imageToken)];
}, function (token) {
return {
zIndexPopup: token.zIndexPopupBase + 80
};
});