@chaoswise/ui 2.3.16 → 2.3.17

package/README.md

@@ -5,7 +5,7 @@
 基于antd3.x根据公司UIUE规范进行二次封装的前端公共组件库，用于统一公司产品风格，提高研发人员开发效率
 
 # Features
-#### 1. 包含符合UIUE的公共组件
+#### 1. 包含符合UIUE设计规范的公共组件，设计规范和使用规范参考[YXD-用户体验设计平台](https://yunzhihui.feishu.cn/wiki/wikcnkFSNhaqVDdYNNH5K6NNy7f)
 #### 2. 支持antd全部组件，引用和使用方法参考[antd官方文档](https://3x.ant.design/docs/react/introduce-cn)
 #### 3. 支持按需加载
 

package/lib/CWRangePicker/utils/index.js

@@ -297,14 +297,36 @@ export var cloneChangeDate = function cloneChangeDate(currentDate_0, currentDate
         cloneCurrentDate_1 = moment();
         switchInitial = true;
       } else {
-        // 非极限时间，但是超过最大的时间边界跨度
-        // 先将currentDate_0和currentDate_1二者进行相减在这个基础上增加(timeSpanBoundary - 二者相减） / 2 ,左右各增加减少这个数值
-        var initialTimeDiff = computeTimeDiff([cloneCurrentDate_0, cloneCurrentDate_1], "s");
-        var needChangeTimeDiff = Math.ceil(initialTimeDiff - timeSpanBoundary) / 2;
         var clone0 = currentDate_0.clone();
         var clone1 = currentDate_1.clone();
-        cloneCurrentDate_0 = clone0.subtract(moment.duration(needChangeTimeDiff, "s"));
-        cloneCurrentDate_1 = clone1.add(moment.duration(needChangeTimeDiff, "s"));
+        var initialTimeDiff = computeTimeDiff([clone0, clone1], "s");
+        if (timeSpanBoundary > initialTimeDiff) {
+          var needChangeTimeDiff = Math.ceil(timeSpanBoundary - initialTimeDiff) / 2;
+          cloneCurrentDate_0 = clone0.subtract(moment.duration(needChangeTimeDiff, "s"));
+          cloneCurrentDate_1 = clone1.add(moment.duration(needChangeTimeDiff, "s"));
+          // 计算最大值的时间差
+          var _maxTimeDiff2 = computeTimeDiff([cloneCurrentDate_1, moment()]);
+          if (_maxTimeDiff2 <= 0) {
+            // 当前时间已经是极限了
+            // 已经是极限直接当前时间向前推进timeSpanBoundary即可
+            cloneCurrentDate_0 = moment().subtract(moment.duration(timeSpanBoundary, "s"));
+            cloneCurrentDate_1 = moment();
+            switchInitial = true;
+          }
+        } else {
+          cloneCurrentDate_1 = clone1.add(moment.duration(timeSpanBoundary, "s"));
+          var clone = cloneCurrentDate_1.clone();
+          cloneCurrentDate_0 = clone.subtract(moment.duration(timeSpanBoundary, "s"));
+          // 计算最大值的时间差
+          var _maxTimeDiff3 = computeTimeDiff([cloneCurrentDate_1, moment()]);
+          if (_maxTimeDiff3 <= 0) {
+            // 当前时间已经是极限了
+            // 已经是极限直接当前时间向前推进timeSpanBoundary即可
+            cloneCurrentDate_0 = moment().subtract(moment.duration(timeSpanBoundary, "s"));
+            cloneCurrentDate_1 = moment();
+            switchInitial = true;
+          }
+        }
       }
     } else {
       if (_maxTimeDiff <= 0) {

package/lib/CWTable/CWTable.js

@@ -239,14 +239,17 @@ var CWTable = function CWTable(_ref, ref) {
   var resetSortDataSource = function resetSortDataSource() {
     var _dataSource = _toConsumableArray(dataSource);
     if (frontPagination) {
-      var current = pageInfo.current;
-      var pageSize = pageInfo.pageSize;
-      var total = dataSource.length;
+      var _current = pagination.current,
+        _pageSize = pagination.pageSize,
+        _total = pagination.total;
+      var current = _current || pageInfo.current;
+      var pageSize = _pageSize || pageInfo.pageSize;
+      var total = _total || dataSource.length;
       _dataSource = _dataSource.slice((current - 1) * pageSize, current * pageSize > total ? total : current * pageSize);
     }
     setFinalDataSource(_dataSource);
   };
-  useEffect(resetSortDataSource, [frontPagination, pageInfo.current, pageInfo.pageSize, dataSource]);
+  useEffect(resetSortDataSource, [frontPagination, pagination, pageInfo.current, pageInfo.pageSize, dataSource]);
   useEffect(function () {
     if (!autoHeight) {
       return;
@@ -652,13 +655,14 @@ var CWTable = function CWTable(_ref, ref) {
       onShowSizeChange: onShowSizeChange,
       size: size == 'small' ? 'small' : ''
     });
-    if (frontPagination) {
-      return _objectSpread(_objectSpread({}, common), {}, {
-        current: pageInfo.current,
-        pageSize: pageInfo.pageSize,
-        total: dataSource.length
-      });
-    }
+    // if (frontPagination) {
+    //   return {
+    //     ...common,
+    //     current: pageInfo.current,
+    //     pageSize: pageInfo.pageSize,
+    //     total: dataSource.length,
+    //   }
+    // }
     return _objectSpread(_objectSpread({}, common), {}, {
       current: current || pageInfo.current,
       pageSize: pageSize || pageInfo.pageSize,

package/lib/FilterDropDown/assets/ShowSvgIcon.js

@@ -0,0 +1,14 @@
+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 * as React from "react";
+var SvgShowIcon = function SvgShowIcon(props) {
+  return /*#__PURE__*/React.createElement("svg", _extends({
+    xmlns: "http://www.w3.org/2000/svg",
+    width: 14,
+    height: 14
+  }, props), /*#__PURE__*/React.createElement("path", {
+    fill: "currentColor",
+    fillRule: "evenodd",
+    d: "m7.778.922.308.047.036.007a.439.439 0 0 1 .333.277l.02.075.215 1.162c.396.148.768.348 1.111.594l.252.193 1.111-.395a.44.44 0 0 1 .416.068l.064.062.025.029c.408.48.735 1.015.976 1.593l.114.292.012.036c.051.143.025.3-.066.416l-.061.065-.896.765c.028.174.048.35.057.526l.003.11h-.982a3.875 3.875 0 0 0-.02-.266l-.028-.208-.09-.546 1.022-.873a5.208 5.208 0 0 0-.415-.767l-.167-.24-1.27.45-.429-.353a3.844 3.844 0 0 0-.852-.53l-.232-.096-.52-.195-.245-1.326a5.169 5.169 0 0 0-.873-.025l-.29.025-.244 1.328-.518.196a3.814 3.814 0 0 0-.877.472l-.2.153-.429.354-1.277-.454a5.095 5.095 0 0 0-.458.742l-.124.264 1.032.882-.089.547a3.769 3.769 0 0 0-.027 1.038l.027.206.09.547-1.033.882c.117.266.255.523.415.767l.167.239 1.277-.454.43.354c.259.214.543.39.845.529l.23.096.517.198.245 1.33c.182.02.365.03.549.032v.98a6.145 6.145 0 0 1-.705-.044l-.348-.053-.037-.007a.439.439 0 0 1-.332-.277l-.02-.074-.217-1.168a4.754 4.754 0 0 1-1.146-.623l-.207-.161-1.12.398a.44.44 0 0 1-.416-.069l-.064-.061-.025-.03a6.077 6.077 0 0 1-.976-1.592l-.113-.292-.013-.036a.439.439 0 0 1 .066-.417l.062-.064.906-.774a4.786 4.786 0 0 1-.035-1.303l.035-.258-.906-.774a.44.44 0 0 1-.15-.395l.022-.086.013-.036a6.09 6.09 0 0 1 .892-1.64l.197-.245.025-.03a.437.437 0 0 1 .393-.15l.087.021 1.12.398c.325-.268.682-.49 1.063-.664l.29-.12.216-1.168a.438.438 0 0 1 .279-.331l.074-.02.037-.008A6.185 6.185 0 0 1 7.778.922Zm4.833 10.844a.5.5 0 1 1 0 1h-4.5a.5.5 0 1 1 0-1h4.5Zm0-2a.5.5 0 1 1 0 1h-4.5a.5.5 0 1 1 0-1h4.5ZM7 4.457c1.274 0 2.316.99 2.4 2.242l.005.145H8.53a1.522 1.522 0 0 0-.346-.95l-.102-.114A1.52 1.52 0 0 0 7 5.332a1.52 1.52 0 0 0-1.083.448c-.288.29-.448.674-.448 1.083a1.526 1.526 0 0 0 1.38 1.524l.116.005v.877a2.406 2.406 0 0 1-2.366-2.241l-.005-.165A2.406 2.406 0 0 1 7 4.457Zm5.611 3.309a.5.5 0 1 1 0 1h-4.5a.5.5 0 1 1 0-1h4.5Z"
+  }));
+};
+export default SvgShowIcon;

package/lib/FilterDropDown/index.js

@@ -22,8 +22,10 @@ import classnames from "classnames";
 import PropTypes from "prop-types";
 import { HTML5Backend } from "react-dnd-html5-backend";
 import { DndProvider } from "react-dnd";
-import "./index.less";
 import { getLocale } from "./locale";
+import useConfigContext from '../useConfigContext';
+import ShowSvgIcon from './assets/ShowSvgIcon';
+import "./index.less";
 var CheckboxGroup = _Checkbox.Group;
 function FilterDropDown(props) {
   var selectItems = props.selectItems,
@@ -68,6 +70,9 @@ function FilterDropDown(props) {
     _ConfigProvider$useLo2 = _ConfigProvider$useLo.locale,
     locale = _ConfigProvider$useLo2 === void 0 ? "zh" : _ConfigProvider$useLo2;
   var localeObj = getLocale(locale);
+  var _useConfigContext = useConfigContext(),
+    getPrefixCls = _useConfigContext.getPrefixCls;
+  var prefixCls = getPrefixCls();
   useEffect(function () {
     document.addEventListener("click", clickBody);
     return function () {
@@ -199,8 +204,8 @@ function FilterDropDown(props) {
     onClick: toggoleShow,
     ref: addRef
   }, colsFilterTitle ? colsFilterTitle : /*#__PURE__*/React.createElement(_Button, {
-    icon: "unordered-list"
-  })), showList && /*#__PURE__*/React.createElement(Fragment, null, isDrag ? /*#__PURE__*/React.createElement(DndProvider, {
+    className: "".concat(prefixCls, "-btn-icon-only")
+  }, /*#__PURE__*/React.createElement(ShowSvgIcon, null))), showList && /*#__PURE__*/React.createElement(Fragment, null, isDrag ? /*#__PURE__*/React.createElement(DndProvider, {
     backend: HTML5Backend
   }, renderDropdown()) : /*#__PURE__*/React.createElement(Fragment, null, renderDropdown())));
 }

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,308 @@
+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 = {
+  width: 120,
+  height: 64,
+  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/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@chaoswise/ui",
-  "version": "2.3.16",
+  "version": "2.3.17",
   "description": "公共UI库",
   "keywords": [
     "ui",
@@ -76,6 +76,7 @@
     "@formily/antd": "^1.3.17",
     "@formily/antd-components": "^1.3.17",
     "@icon-park/react": "^1.4.2",
+    "@rc-component/mutate-observer": "^1.1.0",
     "ant-design-draggable-modal": "0.0.16",
     "antd": "^3.26.19",
     "axios": "^0.21.1",
@@ -142,5 +143,5 @@
     "access": "public"
   },
   "license": "MIT",
-  "gitHead": "3ac90ca01a9631654721a2050fc95678b7975fd5"
+  "gitHead": "dbf844ed6b6556903c5aae1176312a47d3c97065"
 }