zarm/lib/water-mark/WaterMark.js

基于 React 的移动端UI库

"use strict";

var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");

var _typeof = require("@babel/runtime/helpers/typeof");

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.default = void 0;

var _regenerator = _interopRequireDefault(require("@babel/runtime/regenerator"));

var _asyncToGenerator2 = _interopRequireDefault(require("@babel/runtime/helpers/asyncToGenerator"));

var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));

var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));

var React = _interopRequireWildcard(require("react"));

var ReactDOM = _interopRequireWildcard(require("react-dom"));

var _bem = require("@zarm-design/bem");

var _hooks = require("../utils/hooks");

var _configProvider = require("../config-provider");

var _defaults = require("./defaults");

var _utils = require("./utils");

var _utils2 = require("../utils");

function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }

function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof(e) && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) { if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } } return n.default = e, t && t.set(e, n), n; }

function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }

function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { (0, _defineProperty2.default)(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }

var MUTATION_OBSERVER_CONFIG = {
  childList: true,
  subtree: true,
  attributeFilter: ['class', 'style', 'data-watermark'],
  attributeOldValue: true
};

var WaterMark = function WaterMark(props) {
  var uuid = React.useRef((0, _utils.getUUID)());
  var className = props.className,
      text = props.text,
      image = props.image,
      mode = props.mode,
      monitor = props.monitor,
      children = props.children;
  var watermark = React.useRef(null);

  var _React$useState = React.useState(_defaults.WATERMARK_DEFAULT_STYLES),
      _React$useState2 = (0, _slicedToArray2.default)(_React$useState, 2),
      styles = _React$useState2[0],
      setStyels = _React$useState2[1];

  var _React$useContext = React.useContext(_configProvider.ConfigContext),
      prefixCls = _React$useContext.prefixCls;

  var bem = (0, _bem.createBEM)('water-mark', {
    prefixCls: prefixCls
  });

  var textStyle = _objectSpread(_objectSpread({}, _defaults.TEXT_STYLE_DEFAULT), props.textStyle);

  var imageStyle = _objectSpread(_objectSpread({}, _defaults.IMAGE_STYLE_DEFAULT), props.imageStyle);

  var markStyle = _objectSpread(_objectSpread({}, _defaults.MARK_STYLE_DEFAULT), props.markStyle);

  var rerender = _utils2.noop;

  var _useMutationObserverR = (0, _hooks.useMutationObserverRef)(function (records, observer) {
    // 重置监听状态
    var reset = function reset(target, cb) {
      if (!target) return;
      observer.disconnect();
      cb === null || cb === void 0 ? void 0 : cb();
      observer.observe(target, MUTATION_OBSERVER_CONFIG);
    };

    records.forEach(function (record) {
      var type = record.type,
          target = record.target,
          attributeName = record.attributeName,
          addedNodes = record.addedNodes,
          removedNodes = record.removedNodes;
      var source = watermark.current;
      if (!source) return; // style 发生变化

      // style 发生变化
      if (type === 'attributes' && target.contains(source)) {
        var _watermark$current;

        attributeName === 'class' && (source === null || source === void 0 ? void 0 : source.removeAttribute('class'));
        attributeName === 'style' && rerender();
        attributeName === 'data-watermark' && reset((_watermark$current = watermark.current) === null || _watermark$current === void 0 ? void 0 : _watermark$current.parentNode, function () {
          return source === null || source === void 0 ? void 0 : source.setAttribute('data-watermark', String(uuid.current));
        });
      } // 篡改节点标签名


      // 篡改节点标签名
      if (type === 'childList' && addedNodes.length) {
        var _element = Array.from(addedNodes).find(function (node) {
          return (0, _utils.compareUUID)(node, source);
        });

        _element && target.removeChild(_element);
      } // 移除节点


      // 移除节点
      if (type === 'childList' && (0, _utils.isContainNode)(removedNodes, source)) {
        reset(target, function () {
          ReactDOM.unmountComponentAtNode(source);
          target.appendChild(source);
        });
      }
    });
  }, MUTATION_OBSERVER_CONFIG),
      _useMutationObserverR2 = (0, _slicedToArray2.default)(_useMutationObserverR, 2),
      setNode = _useMutationObserverR2[1]; // 渲染水印


  rerender = /*#__PURE__*/function () {
    var _ref = (0, _asyncToGenerator2.default)( /*#__PURE__*/_regenerator.default.mark(function _callee() {
      var style, _watermark$current2, rest, _yield$draw, url, ratio, width, height;

      return _regenerator.default.wrap(function _callee$(_context) {
        while (1) {
          switch (_context.prev = _context.next) {
            case 0:
              style = _objectSpread({}, _defaults.WATERMARK_DEFAULT_STYLES);
              _context.prev = 1;
              rest = {
                text: text,
                image: image,
                textStyle: textStyle,
                imageStyle: imageStyle,
                markStyle: markStyle
              };
              _context.next = 5;
              return (0, _utils.draw)(rest);

            case 5:
              _yield$draw = _context.sent;
              url = _yield$draw.url;
              ratio = _yield$draw.ratio;
              width = _yield$draw.width;
              height = _yield$draw.height;

              if (url) {
                _context.next = 12;
                break;
              }

              return _context.abrupt("return");

            case 12:
              if (mode === 'repeat') {
                style.backgroundImage = "url(".concat(url, ")");
              } else {
                style.backgroundImage = "url(".concat(url, "), url(").concat(url, ")");
                style.backgroundRepeat = 'repeat, repeat';
                style.backgroundPosition = "".concat(width / 2, "px ").concat(height / 2, "px, 0 0");
              }

              style.backgroundSize = "".concat(width / ratio, "px");
              setStyels(style);
              setNode(monitor ? (_watermark$current2 = watermark.current) === null || _watermark$current2 === void 0 ? void 0 : _watermark$current2.parentElement : null);
              _context.next = 21;
              break;

            case 18:
              _context.prev = 18;
              _context.t0 = _context["catch"](1);
              console.error(_context.t0.message);

            case 21:
            case "end":
              return _context.stop();
          }
        }
      }, _callee, null, [[1, 18]]);
    }));

    return function rerender() {
      return _ref.apply(this, arguments);
    };
  }();

  var isContains = /*#__PURE__*/React.isValidElement(children);
  React.useEffect(function () {
    rerender();
  }, [textStyle.color, textStyle.fontStyle, textStyle.fontWeight, textStyle.fontSize, textStyle.fontFamily, textStyle.fontVariant, textStyle.textAlign, textStyle.textBaseline, imageStyle.width, imageStyle.height, markStyle.width, markStyle.height, markStyle.rotate, markStyle.opacity, markStyle.gapX, markStyle.gapY, markStyle.offsetLeft, markStyle.offsetTop, text, image, mode, monitor, isContains]);
  var style = React.useMemo(function () {
    var properties = _objectSpread(_objectSpread({
      zIndex: markStyle.zIndex
    }, styles), props.style);

    if (isContains) {
      properties.position = 'absolute';
    } // 监视模式写入样式到节点


    if (monitor && watermark.current) {
      var _watermark$current3;

      (_watermark$current3 = watermark.current) === null || _watermark$current3 === void 0 ? void 0 : _watermark$current3.setAttribute('style', (0, _utils.plainStyle)(properties));
    }

    return properties;
  }, [markStyle.zIndex, monitor, styles, props.style, isContains]);
  var element = /*#__PURE__*/React.createElement("div", {
    ref: watermark,
    "data-watermark": uuid.current,
    style: style
  });
  if (isContains) return /*#__PURE__*/React.createElement("div", {
    className: bem([className])
  }, children, element);
  return element;
};

WaterMark.displayName = 'WaterMark';
WaterMark.defaultProps = {
  textStyle: _defaults.TEXT_STYLE_DEFAULT,
  imageStyle: _defaults.IMAGE_STYLE_DEFAULT,
  markStyle: _defaults.MARK_STYLE_DEFAULT,
  mode: 'interval',
  monitor: true
};
var _default = WaterMark;
exports.default = _default;