@chaoswise/ui 2.3.16 → 2.3.18

package/lib/Radio/Group.js

@@ -53,7 +53,6 @@ var RadioGroup = /*#__PURE__*/function (_Component) {
       }
     });
     _defineProperty(_assertThisInitialized(_this), "renderGroup", function (_ref) {
-      var _classNames;
       var getPrefixCls = _ref.getPrefixCls;
       var _assertThisInitialize = _assertThisInitialized(_this),
         props = _assertThisInitialize.props;
@@ -66,7 +65,7 @@ var RadioGroup = /*#__PURE__*/function (_Component) {
         render = props.render;
       var prefixCls = getPrefixCls("radio", customizePrefixCls);
       var groupPrefixCls = "".concat(prefixCls, "-group");
-      var classString = classNames(groupPrefixCls, "".concat(groupPrefixCls, "-").concat(buttonStyle), (_classNames = {}, _defineProperty(_classNames, "".concat(groupPrefixCls, "-").concat(props.size), props.size), _defineProperty(_classNames, "".concat(groupPrefixCls, "-").concat(type), type == "radio_" ? true : false), _classNames), className);
+      var classString = classNames(groupPrefixCls, "".concat(groupPrefixCls, "-").concat(buttonStyle), _defineProperty(_defineProperty({}, "".concat(groupPrefixCls, "-").concat(props.size), props.size), "".concat(groupPrefixCls, "-").concat(type), type == "radio_" ? true : false), className);
       var children = props.children;
       if (options && options.length > 0) {
         children = options.map(function (option) {

package/lib/Radio/Radio.js

@@ -47,7 +47,6 @@ var Radio = /*#__PURE__*/function (_Component) {
       }
     });
     _defineProperty(_assertThisInitialized(_this), "renderRadio", function (_ref) {
-      var _classNames;
       var getPrefixCls = _ref.getPrefixCls;
       var _assertThisInitialize = _assertThisInitialized(_this),
         props = _assertThisInitialize.props,
@@ -70,7 +69,7 @@ var Radio = /*#__PURE__*/function (_Component) {
         radioProps.checked = props.value === radioGroup.value;
         radioProps.disabled = props.disabled || radioGroup.disabled;
       }
-      var wrapperClassString = classNames(className, (_classNames = {}, _defineProperty(_classNames, "".concat(prefixCls, "-wrapper"), true), _defineProperty(_classNames, "".concat(prefixCls, "-radio_-wrapper"), newTypeExist), _defineProperty(_classNames, "".concat(prefixCls, "-wrapper-checked"), radioProps.checked), _defineProperty(_classNames, "".concat(prefixCls, "-wrapper-disabled"), radioProps.disabled), _defineProperty(_classNames, "".concat(prefixCls, "-radio_-wrapper-checked"), radioProps.checked && newTypeExist), _defineProperty(_classNames, "".concat(prefixCls, "-radio_-wrapper-disabled"), radioProps.disabled && newTypeExist), _defineProperty(_classNames, "".concat(prefixCls, "-radio_-wrapper-custom"), render), _classNames));
+      var wrapperClassString = classNames(className, _defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty({}, "".concat(prefixCls, "-wrapper"), true), "".concat(prefixCls, "-radio_-wrapper"), newTypeExist), "".concat(prefixCls, "-wrapper-checked"), radioProps.checked), "".concat(prefixCls, "-wrapper-disabled"), radioProps.disabled), "".concat(prefixCls, "-radio_-wrapper-checked"), radioProps.checked && newTypeExist), "".concat(prefixCls, "-radio_-wrapper-disabled"), radioProps.disabled && newTypeExist), "".concat(prefixCls, "-radio_-wrapper-custom"), render));
       return (
         /*#__PURE__*/
         // eslint-disable-next-line jsx-a11y/label-has-associated-control

package/lib/SingleSpa/singleSpa/single-spa.dev.js

@@ -1416,10 +1416,9 @@ function reroute() {
     callCapturedEventListeners(eventArguments);
   }
   function getCustomEventDetail() {
-    var _appsByNewStatus;
     var isBeforeChanges = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : false;
     var newAppStatuses = {};
-    var appsByNewStatus = (_appsByNewStatus = {}, _defineProperty(_appsByNewStatus, MOUNTED, []), _defineProperty(_appsByNewStatus, NOT_MOUNTED, []), _defineProperty(_appsByNewStatus, NOT_LOADED, []), _defineProperty(_appsByNewStatus, SKIP_BECAUSE_BROKEN, []), _appsByNewStatus);
+    var appsByNewStatus = _defineProperty(_defineProperty(_defineProperty(_defineProperty({}, MOUNTED, []), NOT_MOUNTED, []), NOT_LOADED, []), SKIP_BECAUSE_BROKEN, []);
     if (isBeforeChanges) {
       appsToLoad.concat(appsToMount).forEach(function (app, index) {
         addApp(app, MOUNTED);

package/lib/TreeList/index.js

@@ -23,7 +23,6 @@ import './index.less';
  * 树形结构列表，自定义列表样式和内容，异步加载交互等
  */
 var TreeList = function TreeList(_ref) {
-  var _classNames;
   var renderNode = _ref.renderNode,
     loadData = _ref.loadData,
     treeData = _ref.treeData,
@@ -135,7 +134,7 @@ var TreeList = function TreeList(_ref) {
     }
     updateExpandedKeys(key);
   };
-  var wrapperClassName = classNames((_classNames = {}, _defineProperty(_classNames, 'cw-data-auth-tree', true), _defineProperty(_classNames, 'cw-data-auth-tree-no-data', treeData.length === 0), _classNames));
+  var wrapperClassName = classNames(_defineProperty(_defineProperty({}, 'cw-data-auth-tree', true), 'cw-data-auth-tree-no-data', treeData.length === 0));
   if (_loading) {
     return /*#__PURE__*/React.createElement("div", {
       className: wrapperClassName

package/lib/Watermark/context.js

@@ -0,0 +1,22 @@
+import { useEvent } from 'rc-util';
+import * as React from 'react';
+function voidFunc() {}
+var WatermarkContext = /*#__PURE__*/React.createContext({
+  add: voidFunc,
+  remove: voidFunc
+});
+export function usePanelRef(panelSelector) {
+  var watermark = React.useContext(WatermarkContext);
+  var panelEleRef = React.useRef();
+  var panelRef = useEvent(function (ele) {
+    if (ele) {
+      var innerContentEle = panelSelector ? ele.querySelector(panelSelector) : ele;
+      watermark.add(innerContentEle);
+      panelEleRef.current = innerContentEle;
+    } else {
+      watermark.remove(panelEleRef.current);
+    }
+  });
+  return panelRef;
+}
+export default WatermarkContext;

package/lib/Watermark/index.js

@@ -0,0 +1,306 @@
+function _toConsumableArray(arr) { return _arrayWithoutHoles(arr) || _iterableToArray(arr) || _unsupportedIterableToArray(arr) || _nonIterableSpread(); }
+function _nonIterableSpread() { throw new TypeError("Invalid attempt to spread non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
+function _iterableToArray(iter) { if (typeof Symbol !== "undefined" && iter[Symbol.iterator] != null || iter["@@iterator"] != null) return Array.from(iter); }
+function _arrayWithoutHoles(arr) { if (Array.isArray(arr)) return _arrayLikeToArray(arr); }
+function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
+function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
+function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
+function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) arr2[i] = arr[i]; return arr2; }
+function _iterableToArrayLimit(r, l) { var t = null == r ? null : "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"]; if (null != t) { var e, n, i, u, a = [], f = !0, o = !1; try { if (i = (t = t.call(r)).next, 0 === l) { if (Object(t) !== t) return; f = !1; } else for (; !(f = (e = i.call(t)).done) && (a.push(e.value), a.length !== l); f = !0); } catch (r) { o = !0, n = r; } finally { try { if (!f && null != t["return"] && (u = t["return"](), Object(u) !== u)) return; } finally { if (o) throw n; } } return a; } }
+function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
+import React, { useEffect } from 'react';
+import { useMutateObserver } from '@rc-component/mutate-observer';
+import classNames from 'classnames';
+import WatermarkContext from './context';
+import useClips, { FontGap } from './useClips';
+import useRafDebounce from './useRafDebounce';
+import useWatermark from './useWatermark';
+import { getPixelRatio, reRendering, verifyIsArrayOfNumberType } from './utils';
+import PropTypes from "prop-types";
+/**
+ * Only return `next` when size changed.
+ * This is only used for elements compare, not a shallow equal!
+ */
+function getSizeDiff(prev, next) {
+  return prev.size === next.size ? prev : next;
+}
+var DEFAULT_GAP_X = 100;
+var DEFAULT_GAP_Y = 100;
+var Watermark = function Watermark(props) {
+  var _a, _b;
+  var _props$zIndex = props.zIndex,
+    zIndex = _props$zIndex === void 0 ? 9 : _props$zIndex,
+    _props$rotate = props.rotate,
+    rotate = _props$rotate === void 0 ? -22 : _props$rotate,
+    width = props.width,
+    height = props.height,
+    image = props.image,
+    content = props.content,
+    _props$font = props.font,
+    font = _props$font === void 0 ? {} : _props$font,
+    style = props.style,
+    className = props.className,
+    rootClassName = props.rootClassName,
+    _props$gap = props.gap,
+    gap = _props$gap === void 0 ? [DEFAULT_GAP_X, DEFAULT_GAP_Y] : _props$gap,
+    offset = props.offset,
+    children = props.children,
+    _props$inherit = props.inherit,
+    inherit = _props$inherit === void 0 ? true : _props$inherit;
+  var _font$color = font.color,
+    color = _font$color === void 0 ? "rgba(0, 0, 0, 0.15)" : _font$color,
+    _font$fontSize = font.fontSize,
+    fontSize = _font$fontSize === void 0 ? 16 : _font$fontSize,
+    _font$fontWeight = font.fontWeight,
+    fontWeight = _font$fontWeight === void 0 ? 'normal' : _font$fontWeight,
+    _font$fontStyle = font.fontStyle,
+    fontStyle = _font$fontStyle === void 0 ? 'normal' : _font$fontStyle,
+    _font$fontFamily = font.fontFamily,
+    fontFamily = _font$fontFamily === void 0 ? 'sans-serif' : _font$fontFamily,
+    _font$textAlign = font.textAlign,
+    textAlign = _font$textAlign === void 0 ? 'center' : _font$textAlign;
+  var _gap = _slicedToArray(gap, 2),
+    _gap$ = _gap[0],
+    gapX = _gap$ === void 0 ? DEFAULT_GAP_X : _gap$,
+    _gap$2 = _gap[1],
+    gapY = _gap$2 === void 0 ? DEFAULT_GAP_Y : _gap$2;
+  var gapXCenter = gapX / 2;
+  var gapYCenter = gapY / 2;
+  var offsetLeft = (_a = offset === null || offset === void 0 ? void 0 : offset[0]) !== null && _a !== void 0 ? _a : gapXCenter;
+  var offsetTop = (_b = offset === null || offset === void 0 ? void 0 : offset[1]) !== null && _b !== void 0 ? _b : gapYCenter;
+  var markStyle = React.useMemo(function () {
+    var mergedStyle = {
+      zIndex: zIndex,
+      position: 'absolute',
+      left: 0,
+      top: 0,
+      width: '100%',
+      height: '100%',
+      pointerEvents: 'none',
+      backgroundRepeat: 'repeat'
+    };
+    /** Calculate the style of the offset */
+    var positionLeft = offsetLeft - gapXCenter;
+    var positionTop = offsetTop - gapYCenter;
+    if (positionLeft > 0) {
+      mergedStyle.left = "".concat(positionLeft, "px");
+      mergedStyle.width = "calc(100% - ".concat(positionLeft, "px)");
+      positionLeft = 0;
+    }
+    if (positionTop > 0) {
+      mergedStyle.top = "".concat(positionTop, "px");
+      mergedStyle.height = "calc(100% - ".concat(positionTop, "px)");
+      positionTop = 0;
+    }
+    mergedStyle.backgroundPosition = "".concat(positionLeft, "px ").concat(positionTop, "px");
+    return mergedStyle;
+  }, [zIndex, offsetLeft, gapXCenter, offsetTop, gapYCenter]);
+  var _React$useState = React.useState(),
+    _React$useState2 = _slicedToArray(_React$useState, 2),
+    container = _React$useState2[0],
+    setContainer = _React$useState2[1];
+  // Used for nest case like Modal, Drawer
+  var _React$useState3 = React.useState(new Set()),
+    _React$useState4 = _slicedToArray(_React$useState3, 2),
+    subElements = _React$useState4[0],
+    setSubElements = _React$useState4[1];
+  // Nest elements should also support watermark
+  var targetElements = React.useMemo(function () {
+    var list = container ? [container] : [];
+    return [].concat(list, _toConsumableArray(Array.from(subElements)));
+  }, [container, subElements]);
+  // ============================ Content =============================
+  /**
+   * Get the width and height of the watermark. The default values are as follows
+   * Image: [120, 64]; Content: It's calculated by content;
+   */
+  var getMarkSize = function getMarkSize(ctx) {
+    var defaultWidth = 120;
+    var defaultHeight = 64;
+    if (!image && ctx.measureText) {
+      ctx.font = "".concat(Number(fontSize), "px ").concat(fontFamily);
+      var contents = Array.isArray(content) ? content : [content];
+      var sizes = contents.map(function (item) {
+        var metrics = ctx.measureText(item);
+        return [metrics.width, metrics.fontBoundingBoxAscent + metrics.fontBoundingBoxDescent];
+      });
+      defaultWidth = Math.ceil(Math.max.apply(Math, _toConsumableArray(sizes.map(function (size) {
+        return size[0];
+      }))));
+      defaultHeight = Math.ceil(Math.max.apply(Math, _toConsumableArray(sizes.map(function (size) {
+        return size[1];
+      })))) * contents.length + (contents.length - 1) * FontGap;
+    }
+    return [width !== null && width !== void 0 ? width : defaultWidth, height !== null && height !== void 0 ? height : defaultHeight];
+  };
+  var getClips = useClips();
+  var _React$useState5 = React.useState(null),
+    _React$useState6 = _slicedToArray(_React$useState5, 2),
+    watermarkInfo = _React$useState6[0],
+    setWatermarkInfo = _React$useState6[1];
+  // Generate new Watermark content
+  var renderWatermark = function renderWatermark() {
+    var canvas = document.createElement('canvas');
+    var ctx = canvas.getContext('2d');
+    if (ctx) {
+      var ratio = getPixelRatio();
+      var _getMarkSize = getMarkSize(ctx),
+        _getMarkSize2 = _slicedToArray(_getMarkSize, 2),
+        markWidth = _getMarkSize2[0],
+        markHeight = _getMarkSize2[1];
+      var drawCanvas = function drawCanvas(drawContent) {
+        var _getClips = getClips(drawContent || '', rotate, ratio, markWidth, markHeight, {
+            color: color,
+            fontSize: fontSize,
+            fontStyle: fontStyle,
+            fontWeight: fontWeight,
+            fontFamily: fontFamily,
+            textAlign: textAlign
+          }, gapX, gapY),
+          _getClips2 = _slicedToArray(_getClips, 2),
+          nextClips = _getClips2[0],
+          clipWidth = _getClips2[1];
+        setWatermarkInfo([nextClips, clipWidth]);
+      };
+      if (image) {
+        var img = new Image();
+        img.onload = function () {
+          drawCanvas(img);
+        };
+        img.onerror = function () {
+          drawCanvas(content);
+        };
+        img.crossOrigin = 'anonymous';
+        img.referrerPolicy = 'no-referrer';
+        img.src = image;
+      } else {
+        drawCanvas(content);
+      }
+    }
+  };
+  var syncWatermark = useRafDebounce(renderWatermark);
+  // ============================= Effect =============================
+  // Append watermark to the container
+  var _useWatermark = useWatermark(markStyle),
+    _useWatermark2 = _slicedToArray(_useWatermark, 3),
+    appendWatermark = _useWatermark2[0],
+    removeWatermark = _useWatermark2[1],
+    isWatermarkEle = _useWatermark2[2];
+  useEffect(function () {
+    if (watermarkInfo) {
+      targetElements.forEach(function (holder) {
+        appendWatermark(watermarkInfo[0], watermarkInfo[1], holder);
+      });
+    }
+  }, [watermarkInfo, targetElements]);
+  // ============================ Observe =============================
+  var onMutate = function onMutate(mutations) {
+    mutations.forEach(function (mutation) {
+      if (reRendering(mutation, isWatermarkEle)) {
+        syncWatermark();
+      }
+    });
+  };
+  useMutateObserver(targetElements, onMutate);
+  useEffect(syncWatermark, [rotate, zIndex, width, height, image, content, color, fontSize, fontWeight, fontStyle, fontFamily, textAlign, gapX, gapY, offsetLeft, offsetTop]);
+  // ============================ Context =============================
+  var watermarkContext = React.useMemo(function () {
+    return {
+      add: function add(ele) {
+        setSubElements(function (prev) {
+          var clone = new Set(prev);
+          clone.add(ele);
+          return getSizeDiff(prev, clone);
+        });
+      },
+      remove: function remove(ele) {
+        removeWatermark(ele);
+        setSubElements(function (prev) {
+          var clone = new Set(prev);
+          clone["delete"](ele);
+          return getSizeDiff(prev, clone);
+        });
+      }
+    };
+  }, []);
+  // ============================= Render =============================
+  var childNode = inherit ? /*#__PURE__*/React.createElement(WatermarkContext.Provider, {
+    value: watermarkContext
+  }, children) : children;
+  return /*#__PURE__*/React.createElement("div", {
+    ref: setContainer,
+    className: classNames(className, rootClassName),
+    style: Object.assign({
+      position: 'relative'
+    }, style)
+  }, childNode);
+};
+if (process.env.NODE_ENV !== 'production') {
+  Watermark.displayName = 'Watermark';
+}
+
+//默认值
+Watermark.defaultProps = {
+  inherit: true,
+  rotate: -20,
+  zIndex: 9,
+  font: {
+    color: 'rgba(0,0,0,.15)',
+    fontSize: 16,
+    fontFamily: 'sans-serif',
+    fontStyle: 'normal'
+  },
+  gap: [100, 100],
+  offset: [50, 50]
+};
+
+//Api
+Watermark.propTypes = {
+  /**
+   * 宽度,水印的宽度，content 的默认值为自身的宽度
+   */
+  width: PropTypes.number,
+  /**
+   * 水印的高度，content 的默认值为自身的高度
+   */
+  height: PropTypes.number,
+  /**
+   * 是否将水印传导给弹出组件如 Modal、Drawer
+   */
+  inherit: PropTypes.bool,
+  /**
+   * 水印绘制时，旋转的角度，单位 °
+   */
+  rotate: PropTypes.number,
+  /**
+   * 追加的水印元素的 z-index
+   */
+  zIndex: PropTypes.number,
+  /**
+   * 图片源，建议导出 2 倍或 3 倍图，优先级高 (支持 base64 格式)
+   */
+  image: PropTypes.string,
+  /**
+   * 水印文字内容
+   */
+  content: PropTypes.oneOfType([PropTypes.string, PropTypes.arrayOf(PropTypes.string)]),
+  /**
+   * 文字样式<br/>
+   * color：字体颜色 <br/>
+   * fontSize：字体大小 (number) <br/>
+   * fontWeight：字体粗细 (normal | light | weight | number) <br/>
+   * fontFamily：字体类型 (string)<br/>
+   * fontStyle：字体样式 (none | normal | italic | oblique)<br/>
+   * textAlign：指定文本对齐方向 <br/>
+   */
+  font: PropTypes.object,
+  /**
+   * gap 水印之间的间距
+   */
+  gap: verifyIsArrayOfNumberType,
+  /**
+   * 水印距离容器左上角的偏移量，默认为 gap/2
+   */
+  offset: verifyIsArrayOfNumberType
+};
+export default Watermark;

package/lib/Watermark/useClips.js

@@ -0,0 +1,118 @@
+function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
+function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
+function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
+function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) arr2[i] = arr[i]; return arr2; }
+function _iterableToArrayLimit(r, l) { var t = null == r ? null : "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"]; if (null != t) { var e, n, i, u, a = [], f = !0, o = !1; try { if (i = (t = t.call(r)).next, 0 === l) { if (Object(t) !== t) return; f = !1; } else for (; !(f = (e = i.call(t)).done) && (a.push(e.value), a.length !== l); f = !0); } catch (r) { o = !0, n = r; } finally { try { if (!f && null != t["return"] && (u = t["return"](), Object(u) !== u)) return; } finally { if (o) throw n; } } return a; } }
+function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
+export var FontGap = 3;
+function prepareCanvas(width, height) {
+  var ratio = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : 1;
+  var canvas = document.createElement('canvas');
+  var ctx = canvas.getContext('2d');
+  var realWidth = width * ratio;
+  var realHeight = height * ratio;
+  canvas.setAttribute('width', "".concat(realWidth, "px"));
+  canvas.setAttribute('height', "".concat(realHeight, "px"));
+  ctx.save();
+  return [ctx, canvas, realWidth, realHeight];
+}
+/**
+ * Get the clips of text content.
+ * This is a lazy hook function since SSR no need this
+ */
+export default function useClips() {
+  // Get single clips
+  function getClips(content, rotate, ratio, width, height, font, gapX, gapY) {
+    // ================= Text / Image =================
+    var _prepareCanvas = prepareCanvas(width, height, ratio),
+      _prepareCanvas2 = _slicedToArray(_prepareCanvas, 4),
+      ctx = _prepareCanvas2[0],
+      canvas = _prepareCanvas2[1],
+      contentWidth = _prepareCanvas2[2],
+      contentHeight = _prepareCanvas2[3];
+    if (content instanceof HTMLImageElement) {
+      // Image
+      ctx.drawImage(content, 0, 0, contentWidth, contentHeight);
+    } else {
+      // Text
+      var color = font.color,
+        fontSize = font.fontSize,
+        fontStyle = font.fontStyle,
+        fontWeight = font.fontWeight,
+        fontFamily = font.fontFamily,
+        textAlign = font.textAlign;
+      var mergedFontSize = Number(fontSize) * ratio;
+      ctx.font = "".concat(fontStyle, " normal ").concat(fontWeight, " ").concat(mergedFontSize, "px/").concat(height, "px ").concat(fontFamily);
+      ctx.fillStyle = color;
+      ctx.textAlign = textAlign;
+      ctx.textBaseline = 'top';
+      var contents = Array.isArray(content) ? content : [content];
+      contents === null || contents === void 0 ? void 0 : contents.forEach(function (item, index) {
+        ctx.fillText(item !== null && item !== void 0 ? item : '', contentWidth / 2, index * (mergedFontSize + FontGap * ratio));
+      });
+    }
+    // ==================== Rotate ====================
+    var angle = Math.PI / 180 * Number(rotate);
+    var maxSize = Math.max(width, height);
+    var _prepareCanvas3 = prepareCanvas(maxSize, maxSize, ratio),
+      _prepareCanvas4 = _slicedToArray(_prepareCanvas3, 3),
+      rCtx = _prepareCanvas4[0],
+      rCanvas = _prepareCanvas4[1],
+      realMaxSize = _prepareCanvas4[2];
+    // Copy from `ctx` and rotate
+    rCtx.translate(realMaxSize / 2, realMaxSize / 2);
+    rCtx.rotate(angle);
+    if (contentWidth > 0 && contentHeight > 0) {
+      rCtx.drawImage(canvas, -contentWidth / 2, -contentHeight / 2);
+    }
+    // Get boundary of rotated text
+    function getRotatePos(x, y) {
+      var targetX = x * Math.cos(angle) - y * Math.sin(angle);
+      var targetY = x * Math.sin(angle) + y * Math.cos(angle);
+      return [targetX, targetY];
+    }
+    var left = 0;
+    var right = 0;
+    var top = 0;
+    var bottom = 0;
+    var halfWidth = contentWidth / 2;
+    var halfHeight = contentHeight / 2;
+    var points = [[0 - halfWidth, 0 - halfHeight], [0 + halfWidth, 0 - halfHeight], [0 + halfWidth, 0 + halfHeight], [0 - halfWidth, 0 + halfHeight]];
+    points.forEach(function (_ref) {
+      var _ref2 = _slicedToArray(_ref, 2),
+        x = _ref2[0],
+        y = _ref2[1];
+      var _getRotatePos = getRotatePos(x, y),
+        _getRotatePos2 = _slicedToArray(_getRotatePos, 2),
+        targetX = _getRotatePos2[0],
+        targetY = _getRotatePos2[1];
+      left = Math.min(left, targetX);
+      right = Math.max(right, targetX);
+      top = Math.min(top, targetY);
+      bottom = Math.max(bottom, targetY);
+    });
+    var cutLeft = left + realMaxSize / 2;
+    var cutTop = top + realMaxSize / 2;
+    var cutWidth = right - left;
+    var cutHeight = bottom - top;
+    // ================ Fill Alternate ================
+    var realGapX = gapX * ratio;
+    var realGapY = gapY * ratio;
+    var filledWidth = (cutWidth + realGapX) * 2;
+    var filledHeight = cutHeight + realGapY;
+    var _prepareCanvas5 = prepareCanvas(filledWidth, filledHeight),
+      _prepareCanvas6 = _slicedToArray(_prepareCanvas5, 2),
+      fCtx = _prepareCanvas6[0],
+      fCanvas = _prepareCanvas6[1];
+    function drawImg() {
+      var targetX = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : 0;
+      var targetY = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 0;
+      fCtx.drawImage(rCanvas, cutLeft, cutTop, cutWidth, cutHeight, targetX, targetY, cutWidth, cutHeight);
+    }
+    drawImg();
+    drawImg(cutWidth + realGapX, -cutHeight / 2 - realGapY / 2);
+    drawImg(cutWidth + realGapX, +cutHeight / 2 + realGapY / 2);
+    return [fCanvas.toDataURL(), filledWidth / ratio, filledHeight / ratio];
+  }
+  return getClips;
+}

package/lib/Watermark/useRafDebounce.js

@@ -0,0 +1,21 @@
+import React from 'react';
+import raf from 'rc-util/lib/raf';
+import { useEvent } from 'rc-util';
+/**
+ * Callback will only execute last one for each raf
+ */
+export default function useRafDebounce(callback) {
+  var executeRef = React.useRef(false);
+  var rafRef = React.useRef();
+  var wrapperCallback = useEvent(callback);
+  return function () {
+    if (executeRef.current) {
+      return;
+    }
+    executeRef.current = true;
+    wrapperCallback();
+    rafRef.current = raf(function () {
+      executeRef.current = false;
+    });
+  };
+}

package/lib/Watermark/useWatermark.js

@@ -0,0 +1,52 @@
+function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
+function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
+function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
+function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) arr2[i] = arr[i]; return arr2; }
+function _iterableToArrayLimit(r, l) { var t = null == r ? null : "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"]; if (null != t) { var e, n, i, u, a = [], f = !0, o = !1; try { if (i = (t = t.call(r)).next, 0 === l) { if (Object(t) !== t) return; f = !1; } else for (; !(f = (e = i.call(t)).done) && (a.push(e.value), a.length !== l); f = !0); } catch (r) { o = !0, n = r; } finally { try { if (!f && null != t["return"] && (u = t["return"](), Object(u) !== u)) return; } finally { if (o) throw n; } } return a; } }
+function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
+import * as React from 'react';
+import { getStyleStr } from './utils';
+/**
+ * Base size of the canvas, 1 for parallel layout and 2 for alternate layout
+ * Only alternate layout is currently supported
+ */
+export var BaseSize = 2;
+export var FontGap = 3;
+// Prevent external hidden elements from adding accent styles
+var EmphasizedStyles = {
+  visibility: 'visible !important'
+};
+export default function useWatermark(markStyle) {
+  var _React$useState = React.useState(function () {
+      return new Map();
+    }),
+    _React$useState2 = _slicedToArray(_React$useState, 1),
+    watermarkMap = _React$useState2[0];
+  var appendWatermark = function appendWatermark(base64Url, markWidth, container) {
+    if (container) {
+      if (!watermarkMap.get(container)) {
+        var newWatermarkEle = document.createElement('div');
+        watermarkMap.set(container, newWatermarkEle);
+      }
+      var watermarkEle = watermarkMap.get(container);
+      watermarkEle.setAttribute('style', getStyleStr(Object.assign(Object.assign(Object.assign({}, markStyle), {
+        backgroundImage: "url('".concat(base64Url, "')"),
+        backgroundSize: "".concat(Math.floor(markWidth), "px")
+      }), EmphasizedStyles)));
+      // Prevents using the browser `Hide Element` to hide watermarks
+      watermarkEle.removeAttribute('class');
+      container.append(watermarkEle);
+    }
+  };
+  var removeWatermark = function removeWatermark(container) {
+    var watermarkEle = watermarkMap.get(container);
+    if (watermarkEle && container) {
+      container.removeChild(watermarkEle);
+    }
+    watermarkMap["delete"](container);
+  };
+  var isWatermarkEle = function isWatermarkEle(ele) {
+    return Array.from(watermarkMap.values()).includes(ele);
+  };
+  return [appendWatermark, removeWatermark, isWatermarkEle];
+}

package/lib/Watermark/utils.js

@@ -0,0 +1,42 @@
+/** converting camel-cased strings to be lowercase and link it with Separato */
+export function toLowercaseSeparator(key) {
+  return key.replace(/([A-Z])/g, '-$1').toLowerCase();
+}
+export function getStyleStr(style) {
+  return Object.keys(style).map(function (key) {
+    return "".concat(toLowercaseSeparator(key), ": ").concat(style[key], ";");
+  }).join(' ');
+}
+/** Returns the ratio of the device's physical pixel resolution to the css pixel resolution */
+export function getPixelRatio() {
+  return window.devicePixelRatio || 1;
+}
+/** Whether to re-render the watermark */
+export var reRendering = function reRendering(mutation, isWatermarkEle) {
+  var flag = false;
+  // Whether to delete the watermark node
+  if (mutation.removedNodes.length) {
+    flag = Array.from(mutation.removedNodes).some(function (node) {
+      return isWatermarkEle(node);
+    });
+  }
+  // Whether the watermark dom property value has been modified
+  if (mutation.type === 'attributes' && isWatermarkEle(mutation.target)) {
+    flag = true;
+  }
+  return flag;
+};
+/**
+ * 自定义验证是否是数值类型组成的数组且长度为2
+ */
+export var verifyIsArrayOfNumberType = function verifyIsArrayOfNumberType(props, propName, componentName) {
+  if (props[propName] && props[propName].length !== 2) {
+    return new Error("Invalid prop ".concat(propName, " supplied to ").concat(componentName, ". Expected an array of length 2."));
+  }
+  if (props[propName] && !Array.isArray(props[propName])) {
+    return new Error("Invalid prop ".concat(propName, " supplied to ").concat(componentName, ". Expected an array."));
+  }
+  if (props[propName] && (typeof props[propName][0] !== 'number' || typeof props[propName][1] !== 'number')) {
+    return new Error("Invalid prop ".concat(propName, " supplied to ").concat(componentName, ". Expected an array of numbers."));
+  }
+};

package/lib/message/index.js

@@ -73,7 +73,6 @@ function notice(args) {
       return resolve(true);
     };
     getMessageInstance(function (instance) {
-      var _classnames;
       var iconNode = /*#__PURE__*/React.createElement(_Icon, {
         type: iconType,
         theme: iconType === "loading" ? "outlined" : "filled",
@@ -90,9 +89,9 @@ function notice(args) {
             "cw-message-wrapper-has-dec": args.dec
           })
         }, /*#__PURE__*/React.createElement("div", {
-          className: classnames((_classnames = {
+          className: classnames(_defineProperty(_defineProperty({
             "cw-message-title": true
-          }, _defineProperty(_classnames, "".concat(prefixCls, "-custom-content"), true), _defineProperty(_classnames, "".concat(prefixCls, "-").concat(args.type), args.type), _classnames))
+          }, "".concat(prefixCls, "-custom-content"), true), "".concat(prefixCls, "-").concat(args.type), args.type))
         }, args.icon ? args.icon : switchIconNode, /*#__PURE__*/React.createElement("span", {
           className: "cw-message-content"
         }, args.content), closable && /*#__PURE__*/React.createElement("span", {