106 lines
3.3 KiB
JavaScript
106 lines
3.3 KiB
JavaScript
function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
|
|
import React from 'react';
|
|
import { clsx } from 'clsx';
|
|
import Portal from '@rc-component/portal';
|
|
import useId from "@rc-component/util/es/hooks/useId";
|
|
const COVER_PROPS = {
|
|
fill: 'transparent',
|
|
pointerEvents: 'auto'
|
|
};
|
|
const Mask = props => {
|
|
const {
|
|
prefixCls,
|
|
rootClassName,
|
|
pos,
|
|
showMask,
|
|
style = {},
|
|
fill = 'rgba(0,0,0,0.5)',
|
|
open,
|
|
animated,
|
|
zIndex,
|
|
disabledInteraction,
|
|
styles,
|
|
classNames: tourClassNames,
|
|
getPopupContainer,
|
|
onEsc
|
|
} = props;
|
|
const id = useId();
|
|
const maskId = `${prefixCls}-mask-${id}`;
|
|
const mergedAnimated = typeof animated === 'object' ? animated?.placeholder : animated;
|
|
const isSafari = typeof navigator !== 'undefined' && /^((?!chrome|android).)*safari/i.test(navigator.userAgent);
|
|
const maskRectSize = isSafari ? {
|
|
width: '100%',
|
|
height: '100%'
|
|
} : {
|
|
width: '100vw',
|
|
height: '100vh'
|
|
};
|
|
const inlineMode = getPopupContainer === false;
|
|
return /*#__PURE__*/React.createElement(Portal, {
|
|
open: open,
|
|
autoLock: !inlineMode,
|
|
getContainer: getPopupContainer,
|
|
onEsc: onEsc
|
|
}, /*#__PURE__*/React.createElement("div", {
|
|
className: clsx(`${prefixCls}-mask`, rootClassName, tourClassNames?.mask),
|
|
style: {
|
|
position: inlineMode ? 'absolute' : 'fixed',
|
|
left: 0,
|
|
right: 0,
|
|
top: 0,
|
|
bottom: 0,
|
|
zIndex,
|
|
pointerEvents: pos && !disabledInteraction ? 'none' : 'auto',
|
|
...style,
|
|
...styles?.mask
|
|
}
|
|
}, showMask ? /*#__PURE__*/React.createElement("svg", {
|
|
style: {
|
|
width: '100%',
|
|
height: '100%'
|
|
}
|
|
}, /*#__PURE__*/React.createElement("defs", null, /*#__PURE__*/React.createElement("mask", {
|
|
id: maskId
|
|
}, /*#__PURE__*/React.createElement("rect", _extends({
|
|
x: "0",
|
|
y: "0"
|
|
}, maskRectSize, {
|
|
fill: "white"
|
|
})), pos && /*#__PURE__*/React.createElement("rect", {
|
|
x: pos.left,
|
|
y: pos.top,
|
|
rx: pos.radius,
|
|
width: pos.width,
|
|
height: pos.height,
|
|
fill: "black",
|
|
className: mergedAnimated ? `${prefixCls}-placeholder-animated` : ''
|
|
}))), /*#__PURE__*/React.createElement("rect", {
|
|
x: "0",
|
|
y: "0",
|
|
width: "100%",
|
|
height: "100%",
|
|
fill: fill,
|
|
mask: `url(#${maskId})`
|
|
}), pos && /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("rect", _extends({}, COVER_PROPS, {
|
|
x: "0",
|
|
y: "0",
|
|
width: "100%",
|
|
height: Math.max(pos.top, 0)
|
|
})), /*#__PURE__*/React.createElement("rect", _extends({}, COVER_PROPS, {
|
|
x: "0",
|
|
y: "0",
|
|
width: Math.max(pos.left, 0),
|
|
height: "100%"
|
|
})), /*#__PURE__*/React.createElement("rect", _extends({}, COVER_PROPS, {
|
|
x: "0",
|
|
y: pos.top + pos.height,
|
|
width: "100%",
|
|
height: `calc(100% - ${pos.top + pos.height}px)`
|
|
})), /*#__PURE__*/React.createElement("rect", _extends({}, COVER_PROPS, {
|
|
x: pos.left + pos.width,
|
|
y: "0",
|
|
width: `calc(100% - ${pos.left + pos.width}px)`,
|
|
height: "100%"
|
|
})))) : null));
|
|
};
|
|
export default Mask; |