@rc-component/tour/es/Mask.js

React tour Component

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;