@uiw/react-watermark/cjs/index.js

React Monorepo Template.

"use strict";

var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault")["default"];
var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard")["default"];
Object.defineProperty(exports, "__esModule", {
  value: true
});
exports["default"] = void 0;
var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
var _objectSpread2 = _interopRequireDefault(require("@babel/runtime/helpers/objectSpread2"));
var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
var _react = _interopRequireWildcard(require("react"));
var _watermark = _interopRequireDefault(require("@uiw/watermark.js"));
var _jsxRuntime = require("react/jsx-runtime");
var _excluded = ["prefixCls", "text", "className", "markClassName", "markStyle", "content", "rotate", "image", "gapX", "gapY", "width", "height", "offsetLeft", "offsetTop", "fontSize", "fontFamily", "fontWeight", "fontColor", "fontStyle"];
function FancyWatermark(props, ref) {
  var _props$prefixCls = props.prefixCls,
    prefixCls = _props$prefixCls === void 0 ? 'w-watermark' : _props$prefixCls,
    text = props.text,
    className = props.className,
    markClassName = props.markClassName,
    markStyle = props.markStyle,
    content = props.content,
    rotate = props.rotate,
    image = props.image,
    _props$gapX = props.gapX,
    gapX = _props$gapX === void 0 ? 212 : _props$gapX,
    gapY = props.gapY,
    _props$width = props.width,
    width = _props$width === void 0 ? 120 : _props$width,
    height = props.height,
    offsetLeft = props.offsetLeft,
    offsetTop = props.offsetTop,
    fontSize = props.fontSize,
    fontFamily = props.fontFamily,
    fontWeight = props.fontWeight,
    fontColor = props.fontColor,
    fontStyle = props.fontStyle,
    other = (0, _objectWithoutProperties2["default"])(props, _excluded);
  var style = (0, _objectSpread2["default"])((0, _objectSpread2["default"])({}, props.style), {}, {
    position: 'relative'
  });
  var wrapperCls = ["".concat(prefixCls, "-wrapper"), className].filter(Boolean).join(' ');
  var waterMakrCls = [prefixCls, markClassName].filter(Boolean).join(' ');
  var _useState = (0, _react.useState)(''),
    _useState2 = (0, _slicedToArray2["default"])(_useState, 2),
    base64Url = _useState2[0],
    setBase64Url = _useState2[1];
  (0, _react.useEffect)(function () {
    var water = new _watermark["default"]({
      content: content,
      rotate: rotate,
      image: image,
      gapX: gapX,
      gapY: gapY,
      width: width,
      height: height,
      offsetLeft: offsetLeft,
      offsetTop: offsetTop,
      fontSize: fontSize,
      fontFamily: fontFamily,
      fontWeight: fontWeight,
      fontColor: fontColor,
      fontStyle: fontStyle
    });
    water.create().then(function (base64String) {
      return setBase64Url(base64String);
    })["catch"](function () {});
  }, [content, rotate, image, gapX, gapY, width, height, offsetLeft, offsetTop, fontSize, fontFamily, fontWeight, fontColor, fontStyle]);
  var watermarkStyle = (0, _objectSpread2["default"])((0, _objectSpread2["default"])({
    position: 'absolute',
    top: 0,
    left: 0,
    zIndex: 9,
    width: '100%',
    height: '100%',
    backgroundSize: "".concat(gapX + width, "px"),
    backgroundRepeat: 'repeat'
  }, markStyle), {}, {
    pointerEvents: 'none'
  });
  watermarkStyle.backgroundImage = "url(".concat(base64Url, ")");
  return /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", (0, _objectSpread2["default"])((0, _objectSpread2["default"])({
    ref: ref
  }, other), {}, {
    className: wrapperCls,
    style: style,
    children: [props.children, /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
      style: watermarkStyle,
      className: waterMakrCls
    })]
  }));
}
var Watermark = /*#__PURE__*/(0, _react.forwardRef)(FancyWatermark);
var _default = exports["default"] = Watermark;
module.exports = exports.default;