@kdcloudjs/kdesign 1.7.59 → 1.7.60

package/lib/_utils/domUtil.d.ts

@@ -0,0 +1,2 @@
+import React from 'react';
+export declare const scrollToDirectory: (ref: React.MutableRefObject<any>) => void;

package/lib/_utils/domUtil.js

@@ -0,0 +1,23 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime-corejs3/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.scrollToDirectory = void 0;
+var _domScrollIntoView = _interopRequireDefault(require("dom-scroll-into-view"));
+var scrollToDirectory = function scrollToDirectory(ref) {
+  var directoryElement = ref.current;
+  if (directoryElement) {
+    var rect = ref.current.getBoundingClientRect();
+    var parent = ref.current.parentElement;
+    var parentRect = parent.getBoundingClientRect();
+    var relativeTop = rect.top - parentRect.top;
+    var relativeBottom = rect.bottom - parentRect.top;
+    var isHide = relativeTop < 0 || relativeBottom > parent.clientHeight;
+    if (isHide) {
+      (0, _domScrollIntoView.default)(ref.current, ref.current.parentElement);
+    }
+  }
+};
+exports.scrollToDirectory = scrollToDirectory;

package/lib/cascader/cascader.js

@@ -8,10 +8,10 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = exports.CascaderPlacement = void 0;
-var _extends2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/extends"));
 var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/toConsumableArray"));
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/defineProperty"));
 var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/slicedToArray"));
+var _extends2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/extends"));
 var _getOwnPropertySymbols = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/object/get-own-property-symbols"));
 var _includes = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/instance/includes"));
 var _map = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/instance/map"));
@@ -24,6 +24,7 @@ var _type = require("../_utils/type");
 var _utils = require("../_utils");
 var _configProvider = require("../config-provider");
 var _usePopper = _interopRequireDefault(require("../_utils/usePopper"));
+var _domUtil = require("../_utils/domUtil");
 var _input = _interopRequireDefault(require("../input"));
 var _icon = _interopRequireDefault(require("../icon"));
 var _empty = _interopRequireDefault(require("../empty"));
@@ -42,6 +43,28 @@ var __rest = void 0 && (void 0).__rest || function (s, e) {
 };
 var CascaderPlacement = (0, _type.tuple)('topLeft', 'topRight', 'bottomLeft', 'bottomRight');
 exports.CascaderPlacement = CascaderPlacement;
+var CascaderMenuSubmenu = function CascaderMenuSubmenu(props) {
+  var optionProps = props.optionProps,
+    label = props.label,
+    children = props.children,
+    selected = props.selected,
+    isMultiple = props.isMultiple;
+  var ref = (0, _react.useRef)(null);
+  var isFirst = (0, _react.useRef)(!isMultiple);
+  (0, _react.useEffect)(function () {
+    if (typeof selected === 'boolean' && isFirst.current && ref.current) {
+      isFirst.current = false;
+      if (selected && !isMultiple) {
+        (0, _domUtil.scrollToDirectory)(ref);
+      }
+    }
+  }, [selected]);
+  return /*#__PURE__*/_react.default.createElement("li", (0, _extends2.default)({
+    ref: ref
+  }, optionProps, {
+    title: label
+  }), children);
+};
 var Cascader = /*#__PURE__*/_react.default.forwardRef(function (props, ref) {
   var _React$useContext = _react.default.useContext(_configProvider.ConfigContext),
     getPrefixCls = _React$useContext.getPrefixCls,
@@ -85,13 +108,18 @@ var Cascader = /*#__PURE__*/_react.default.forwardRef(function (props, ref) {
   var inputRef = (0, _react.useRef)();
   var suffixRef = (0, _react.useRef)(null);
   var wrapperRef = (0, _react.useRef)();
-  var _useState = (0, _react.useState)(!!props.popperVisible || !!props.popupVisible || defaultPopupVisible),
+  var _useState = (0, _react.useState)(false),
     _useState2 = (0, _slicedToArray2.default)(_useState, 2),
     visible = _useState2[0],
     setVisible = _useState2[1];
   _react.default.useEffect(function () {
     setVisible(!!props.popperVisible || !!props.popupVisible);
   }, [props.popperVisible, props.popupVisible]);
+  _react.default.useEffect(function () {
+    if (!!props.popperVisible || !!props.popupVisible || defaultPopupVisible) {
+      setVisible(true);
+    }
+  }, []);
   var _useState3 = (0, _react.useState)([options]),
     _useState4 = (0, _slicedToArray2.default)(_useState3, 2),
     menus = _useState4[0],
@@ -412,11 +440,11 @@ var Cascader = /*#__PURE__*/_react.default.forwardRef(function (props, ref) {
     }
     props.onChange && props.onChange(selectedValue, selectedOptions);
   };
-  var onVisibleChange = function onVisibleChange(visible) {
-    setVisible(visible);
-    onPopupVisibleChange && onPopupVisibleChange(visible);
-    onPopperVisibleChange && onPopperVisibleChange(visible);
-    visible && setSelectedOptions((0, _slice.default)(currentOptions).call(currentOptions, 0));
+  var onVisibleChange = function onVisibleChange(v) {
+    setVisible(v);
+    onPopupVisibleChange && onPopupVisibleChange(v);
+    onPopperVisibleChange && onPopperVisibleChange(v);
+    v && setSelectedOptions((0, _slice.default)(currentOptions).call(currentOptions, 0));
   };
   var cascaderMenus = /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, (options === null || options === void 0 ? void 0 : options.length) ? (menus === null || menus === void 0 ? void 0 : menus.length) && (0, _map.default)(menus).call(menus, function (opts, index) {
     return /*#__PURE__*/_react.default.createElement("ul", {
@@ -449,10 +477,13 @@ var Cascader = /*#__PURE__*/_react.default.forwardRef(function (props, ref) {
       }) : ((children === null || children === void 0 ? void 0 : children.length) || isLeaf === false) && (props.expandIcon || /*#__PURE__*/_react.default.createElement(_icon.default, {
         type: "arrow-right"
       })));
-      return /*#__PURE__*/_react.default.createElement("li", (0, _extends2.default)({
+      return /*#__PURE__*/_react.default.createElement(CascaderMenuSubmenu, (0, _extends2.default)({
         key: value
-      }, optionProps, {
-        title: label
+      }, {
+        isMultiple: isMultiple,
+        optionProps: optionProps,
+        label: label,
+        selected: selected
       }), isMultiple ? /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_checkbox.default, {
         checked: (0, _util.getChecked)(checkedKeys, value),
         indeterminate: (0, _util.getHalfChecked)(halfCheckedKeys, value),

package/lib/config-provider/compDefaultProps.d.ts

@@ -488,5 +488,12 @@ declare const compDefaultProps: {
         errorLevel: string;
         color: string;
     };
+    Signature: {
+        penColor: string;
+        backgroundColor: string;
+        containerWidth: number;
+        containerHeight: number;
+        canFullScreen: boolean;
+    };
 };
 export default compDefaultProps;

package/lib/config-provider/compDefaultProps.js

@@ -516,6 +516,13 @@ var compDefaultProps = {
     type: 'canvas',
     errorLevel: 'H',
     color: '#000000'
+  },
+  Signature: {
+    penColor: 'black',
+    backgroundColor: 'white',
+    containerWidth: 610,
+    containerHeight: 500,
+    canFullScreen: true
   }
 };
 var _default = compDefaultProps;

package/lib/date-picker/date-picker.js

@@ -114,10 +114,15 @@ var InternalDatePicker = function InternalDatePicker(props, ref) {
     _useMergedState2 = (0, _slicedToArray2.default)(_useMergedState, 2),
     dateValue = _useMergedState2[0],
     setDateValue = _useMergedState2[1];
-  var _React$useState = _react.default.useState(dateValue),
-    _React$useState2 = (0, _slicedToArray2.default)(_React$useState, 2),
-    selectedValue = _React$useState2[0],
-    setSelectedValue = _React$useState2[1];
+  var _useMergedState3 = (0, _hooks.useMergedState)(null, {
+      value: dateValue,
+      postState: function postState(v) {
+        return v && !(0, _dateFns.isValid)(v) ? null : v;
+      }
+    }),
+    _useMergedState4 = (0, _slicedToArray2.default)(_useMergedState3, 2),
+    selectedValue = _useMergedState4[0],
+    setSelectedValue = _useMergedState4[1];
   var hours;
   var minutes;
   var seconds;
@@ -148,7 +153,7 @@ var InternalDatePicker = function InternalDatePicker(props, ref) {
     viewDate = _useState2[0],
     setInnerViewDate = _useState2[1];
   var setViewDate = function setViewDate(date) {
-    setInnerViewDate((0, _dateFns.isDate)(date) ? date : new Date());
+    setInnerViewDate((0, _dateFns.isValid)(date) ? date : new Date());
   };
   (0, _react.useEffect)(function () {
     setViewDate(dateValue);
@@ -187,7 +192,7 @@ var InternalDatePicker = function InternalDatePicker(props, ref) {
     hoverValue = _useHoverValue2[0],
     onEnter = _useHoverValue2[1],
     onLeave = _useHoverValue2[2];
-  var _useMergedState3 = (0, _hooks.useMergedState)(false, {
+  var _useMergedState5 = (0, _hooks.useMergedState)(false, {
       value: open,
       defaultValue: defaultOpen,
       postState: function postState(postOpen) {
@@ -202,10 +207,10 @@ var InternalDatePicker = function InternalDatePicker(props, ref) {
         // }
       }
     }),
-    _useMergedState4 = (0, _slicedToArray2.default)(_useMergedState3, 2),
-    openValue = _useMergedState4[0],
-    triggerInnerOpen = _useMergedState4[1];
-  var _useMergedState5 = (0, _hooks.useMergedState)(function () {
+    _useMergedState6 = (0, _slicedToArray2.default)(_useMergedState5, 2),
+    openValue = _useMergedState6[0],
+    triggerInnerOpen = _useMergedState6[1];
+  var _useMergedState7 = (0, _hooks.useMergedState)(function () {
       if (picker === 'time') {
         return 'time';
       }
@@ -213,9 +218,9 @@ var InternalDatePicker = function InternalDatePicker(props, ref) {
     }, {
       value: mode
     }),
-    _useMergedState6 = (0, _slicedToArray2.default)(_useMergedState5, 2),
-    mergedMode = _useMergedState6[0],
-    setInnerMode = _useMergedState6[1];
+    _useMergedState8 = (0, _slicedToArray2.default)(_useMergedState7, 2),
+    mergedMode = _useMergedState8[0],
+    setInnerMode = _useMergedState8[1];
   var _useState3 = (0, _react.useState)(undefined),
     _useState4 = (0, _slicedToArray2.default)(_useState3, 2),
     innerPicker = _useState4[0],
@@ -243,9 +248,6 @@ var InternalDatePicker = function InternalDatePicker(props, ref) {
     }
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [picker]);
-  (0, _react.useEffect)(function () {
-    setSelectedValue(dateValue);
-  }, [dateValue]);
   (0, _hooks.useOnClickOutside)([popperRef, inputDivRef], function () {
     setViewDate(selectedValue || (0, _dateFns.newDate)());
     triggerOpen(false);

package/lib/date-picker/hooks/use-range-view-dates.js

@@ -60,6 +60,12 @@ function getRangeViewDate(values, index, picker) {
   }
   return startDate;
 }
+function checkViewDate(value) {
+  if (value && !(0, _dateFns.isValid)(value)) {
+    return false;
+  }
+  return value;
+}
 function useRangeViewDates(_ref) {
   var values = (0, _values.default)(_ref),
     picker = _ref.picker,
@@ -80,7 +86,7 @@ function useRangeViewDates(_ref) {
     if (defaultViewDates[index]) {
       return defaultViewDates[index];
     }
-    return (0, _utils.getValue)(viewDates, index) || getRangeViewDate(values, index, picker) || startDate || endDate || (0, _dateFns.newDate)();
+    return checkViewDate((0, _utils.getValue)(viewDates, index)) || checkViewDate(getRangeViewDate(values, index, picker)) || checkViewDate(startDate) || checkViewDate(endDate) || (0, _dateFns.newDate)();
   }
   function setViewDate(viewDate, index) {
     if (viewDate) {

package/lib/date-picker/range-picker.js

@@ -164,8 +164,11 @@ var InternalRangePicker = function InternalRangePicker(props, ref) {
         }
         // Fill disabled unit
         for (var i = 0; i < 2; i++) {
-          if (mergedDisabled[i] && !(0, _utils2.getValue)(postValues, i) && !(0, _utils2.getValue)(allowEmpty, i)) {
+          var v = (0, _utils2.getValue)(postValues, i);
+          if (mergedDisabled[i] && !v && !(0, _utils2.getValue)(allowEmpty, i)) {
             postValues = (0, _utils2.updateValues)(postValues, (0, _dateFns.newDate)(), i);
+          } else if (v && !(0, _dateFns.isValid)(v)) {
+            postValues = (0, _utils2.updateValues)(postValues, null, i);
           }
         }
         return postValues;

package/lib/index.d.ts

@@ -59,3 +59,4 @@ export { default as ColorPicker } from './color-picker';
 export { default as Clipboard } from './clipboard';
 export { default as QRCode } from './qr-code';
 export { default as Divider } from './divider';
+export { default as Signature } from './signature';

package/lib/index.js

@@ -277,6 +277,12 @@ Object.defineProperty(exports, "Select", {
     return _select.default;
   }
 });
+Object.defineProperty(exports, "Signature", {
+  enumerable: true,
+  get: function get() {
+    return _signature.default;
+  }
+});
 Object.defineProperty(exports, "Slider", {
   enumerable: true,
   get: function get() {
@@ -458,6 +464,7 @@ var _colorPicker = _interopRequireDefault(require("./color-picker"));
 var _clipboard = _interopRequireDefault(require("./clipboard"));
 var _qrCode = _interopRequireDefault(require("./qr-code"));
 var _divider = _interopRequireDefault(require("./divider"));
+var _signature = _interopRequireDefault(require("./signature"));
 function _getRequireWildcardCache(nodeInterop) { if (typeof _WeakMap !== "function") return null; var cacheBabelInterop = new _WeakMap(); var cacheNodeInterop = new _WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && _Object$getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? _Object$getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
 /* @remove-on-es-build-begin */

package/lib/locale/locale.d.ts

@@ -100,6 +100,11 @@ declare class LocaleCache {
         'Table.confirmFilter': string;
         'Select.selectAll': string;
         'Select.seleted': string;
+        'Signature.clickToSign': string;
+        'Signature.pleaseWriteHere': string;
+        'Signature.okText': string;
+        'Signature.cancelText': string;
+        'Signature.handwrittenSignature': string;
         'DatePicker.placeholder': string;
         'DatePicker.yearPlaceholder': string;
         'DatePicker.quarterPlaceholder': string;

package/lib/locale/zh-CN.d.ts

@@ -74,6 +74,11 @@ declare const locale: {
     'Table.confirmFilter': string;
     'Select.selectAll': string;
     'Select.seleted': string;
+    'Signature.clickToSign': string;
+    'Signature.pleaseWriteHere': string;
+    'Signature.okText': string;
+    'Signature.cancelText': string;
+    'Signature.handwrittenSignature': string;
     'DatePicker.placeholder': string;
     'DatePicker.yearPlaceholder': string;
     'DatePicker.quarterPlaceholder': string;

package/lib/locale/zh-CN.js

@@ -84,7 +84,12 @@ var locale = (0, _extends2.default)((0, _extends2.default)({
   'Table.resetFilter': '重置',
   'Table.confirmFilter': '确定',
   'Select.selectAll': '全选',
-  'Select.seleted': '已选{size}项'
+  'Select.seleted': '已选{size}项',
+  'Signature.clickToSign': '点击签名',
+  'Signature.pleaseWriteHere': '请在此处横向书写签名',
+  'Signature.okText': '确定',
+  'Signature.cancelText': '取消',
+  'Signature.handwrittenSignature': '手写签名'
 });
 var _default = locale;
 exports.default = _default;

package/lib/signature/drawingBoard.d.ts

@@ -0,0 +1,15 @@
+import React from 'react';
+import SignaturePad from './utils/signature_pad';
+export interface DrawingBoardProps {
+    prefixCls: string;
+    signatureLangMsg: any;
+    isEmpty: boolean;
+    setDataUrl: (dataUrl: string) => void;
+    setIsEmpty: (value: boolean) => void;
+    signaturePad: () => SignaturePad | null | undefined;
+    undo?: () => void;
+    redo?: () => void;
+    onClear?: () => void;
+}
+declare const DrawingBoard: React.ForwardRefExoticComponent<DrawingBoardProps & React.RefAttributes<unknown>>;
+export default DrawingBoard;

package/lib/signature/drawingBoard.js

@@ -0,0 +1,176 @@
+"use strict";
+
+var _typeof = require("@babel/runtime-corejs3/helpers/typeof");
+var _WeakMap = require("@babel/runtime-corejs3/core-js-stable/weak-map");
+var _Object$getOwnPropertyDescriptor = require("@babel/runtime-corejs3/core-js-stable/object/get-own-property-descriptor");
+var _interopRequireDefault = require("@babel/runtime-corejs3/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _slice = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/instance/slice"));
+var _concat = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/instance/concat"));
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/defineProperty"));
+var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/toConsumableArray"));
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/slicedToArray"));
+var _react = _interopRequireWildcard(require("react"));
+var _icon = _interopRequireDefault(require("../icon"));
+var _classnames = _interopRequireDefault(require("classnames"));
+function _getRequireWildcardCache(nodeInterop) { if (typeof _WeakMap !== "function") return null; var cacheBabelInterop = new _WeakMap(); var cacheNodeInterop = new _WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && _Object$getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? _Object$getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+var DrawingBoard = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
+  var _classNames;
+  var prefixCls = props.prefixCls,
+    isEmpty = props.isEmpty,
+    setIsEmpty = props.setIsEmpty,
+    onClear = props.onClear,
+    signaturePad = props.signaturePad,
+    undo = props.undo,
+    redo = props.redo,
+    signatureLangMsg = props.signatureLangMsg;
+  var _useState = (0, _react.useState)(-1),
+    _useState2 = (0, _slicedToArray2.default)(_useState, 2),
+    currentHistoryIndex = _useState2[0],
+    setCurrentHistoryIndex = _useState2[1];
+  var _useState3 = (0, _react.useState)([]),
+    _useState4 = (0, _slicedToArray2.default)(_useState3, 2),
+    signatureHistory = _useState4[0],
+    setSignatureHistory = _useState4[1];
+  var canvasRef = (0, _react.useRef)();
+  var canvasWrapperRef = (0, _react.useRef)();
+  var handleOnClear = function handleOnClear() {
+    var _a;
+    (_a = signaturePad()) === null || _a === void 0 ? void 0 : _a.clear();
+    setIsEmpty(true);
+    setSignatureHistory((0, _slice.default)(signatureHistory).call(signatureHistory, 0, 1));
+    setCurrentHistoryIndex(0);
+    onClear && onClear();
+  };
+  var saveSignatureToHistory = function saveSignatureToHistory() {
+    var _a;
+    if (signaturePad()) {
+      var data = (_a = signaturePad()) === null || _a === void 0 ? void 0 : _a.toDataURL();
+      if (data !== undefined) setSignatureHistory(function (prevHistory) {
+        var _context;
+        return (0, _concat.default)(_context = []).call(_context, (0, _toConsumableArray2.default)(prevHistory), [{
+          data: data
+        }]);
+      });
+      setCurrentHistoryIndex(function (prevIndex) {
+        return prevIndex + 1;
+      });
+    }
+  };
+  var handleUndo = function handleUndo() {
+    var _a, _b;
+    if (currentHistoryIndex > 0) {
+      setCurrentHistoryIndex(function (prevIndex) {
+        return prevIndex - 1;
+      });
+      var historyItem = signatureHistory[currentHistoryIndex - 1];
+      if (signaturePad() && historyItem) {
+        (_a = signaturePad()) === null || _a === void 0 ? void 0 : _a.clear();
+        (_b = signaturePad()) === null || _b === void 0 ? void 0 : _b.fromDataURL(historyItem.data, {
+          ratio: 1
+        });
+        undo && undo();
+      }
+    }
+  };
+  var handleRedo = function handleRedo() {
+    var _a;
+    if (currentHistoryIndex < signatureHistory.length - 1) {
+      setCurrentHistoryIndex(function (prevIndex) {
+        return prevIndex + 1;
+      });
+      var historyItem = signatureHistory[currentHistoryIndex + 1];
+      if (signaturePad() && historyItem) {
+        (_a = signaturePad()) === null || _a === void 0 ? void 0 : _a.fromDataURL(historyItem.data, {
+          ratio: 1
+        });
+        redo && redo();
+      }
+    }
+  };
+  (0, _react.useEffect)(function () {
+    currentHistoryIndex > 0 ? setIsEmpty(false) : setIsEmpty(true);
+  }, [currentHistoryIndex]);
+  (0, _react.useImperativeHandle)(ref, function () {
+    return {
+      getCanvasRef: function getCanvasRef() {
+        return canvasRef.current;
+      },
+      getCanvasWrapperRef: function getCanvasWrapperRef() {
+        return canvasWrapperRef.current;
+      },
+      saveSignatureToHistory: saveSignatureToHistory,
+      signatureHistory: signatureHistory,
+      setSignatureHistory: setSignatureHistory,
+      setCurrentHistoryIndex: setCurrentHistoryIndex
+    };
+  });
+  return /*#__PURE__*/_react.default.createElement("div", {
+    className: "".concat(prefixCls, "-drawing-board"),
+    ref: canvasWrapperRef
+  }, /*#__PURE__*/_react.default.createElement("div", {
+    className: (0, _classnames.default)((_classNames = {}, (0, _defineProperty2.default)(_classNames, "".concat(prefixCls, "-drawing-board-operation"), true), (0, _defineProperty2.default)(_classNames, "enabled", !isEmpty), _classNames))
+  }, undo ? /*#__PURE__*/_react.default.createElement("span", {
+    onClick: function onClick() {
+      return handleUndo();
+    }
+  }, /*#__PURE__*/_react.default.createElement("svg", {
+    width: "1em",
+    height: "1em",
+    viewBox: "0 0 32 32"
+  }, /*#__PURE__*/_react.default.createElement("g", {
+    id: "1016.\u64A4\u9500",
+    stroke: "none",
+    "stroke-width": "1",
+    fill: "none",
+    "fill-rule": "evenodd"
+  }, /*#__PURE__*/_react.default.createElement("g", {
+    id: "\u7F16\u7EC4",
+    transform: "translate(2.000000, 1.000000)",
+    fill: "#000000",
+    "fill-rule": "nonzero"
+  }, /*#__PURE__*/_react.default.createElement("path", {
+    d: "M9.16767025,16.9762781 C9.5300869,17.3386948 9.5300869,17.9262881 9.16767025,18.2887049 C8.84552213,18.6108529 8.34545651,18.6466472 7.98377112,18.3960875 L7.85524348,18.2887049 L0.815437446,11.2488988 C-0.203859357,10.229602 -0.267565411,8.61657722 0.624319283,7.52306442 L0.815437446,7.31161852 L7.85524348,0.271812484 C8.21766013,-0.0906041612 8.80525361,-0.0906041612 9.16767025,0.271812484 C9.48981838,0.593960608 9.5256126,1.09402626 9.27505297,1.45571158 L9.16767025,1.58423925 L2.39801882,8.35223283 L18.7197413,8.35223283 C24.8235066,8.35223283 28,11.88167 28,18.5605173 C28,25.0286774 25.0409921,28.8154573 19.1996764,29.6367412 L18.7197413,29.6968277 L3.87132753,29.6968277 C3.358793,29.6968277 2.94330165,29.2813365 2.94330165,28.7688019 C2.94330165,28.3132156 3.27159111,27.9343054 3.70451369,27.8557278 L3.87132753,27.840776 L18.6172581,27.846452 C23.6969089,27.2820464 26.1439483,24.2912204 26.1439483,18.5605173 C26.1439483,13.0283959 23.8870007,10.3626156 19.1446408,10.2148013 L18.7197413,10.2082845 L2.39987488,10.2082845 L9.16767025,16.9762781 Z",
+    id: "\u8DEF\u5F84",
+    fill: "currentColor"
+  }))))) : null, redo ? /*#__PURE__*/_react.default.createElement("span", {
+    onClick: function onClick() {
+      return handleRedo();
+    }
+  }, /*#__PURE__*/_react.default.createElement("svg", {
+    width: "1em",
+    height: "1em",
+    viewBox: "0 0 32 32"
+  }, /*#__PURE__*/_react.default.createElement("g", {
+    id: "1016.\u64A4\u9500",
+    stroke: "none",
+    "stroke-width": "1",
+    fill: "none",
+    "fill-rule": "evenodd"
+  }, /*#__PURE__*/_react.default.createElement("g", {
+    id: "\u7F16\u7EC4",
+    transform: "translate(2.000000, 1.000000)",
+    fill: "#000000",
+    "fill-rule": "nonzero"
+  }, /*#__PURE__*/_react.default.createElement("path", {
+    d: "M9.16767025,16.9762781 C9.5300869,17.3386948 9.5300869,17.9262881 9.16767025,18.2887049 C8.84552213,18.6108529 8.34545651,18.6466472 7.98377112,18.3960875 L7.85524348,18.2887049 L0.815437446,11.2488988 C-0.203859357,10.229602 -0.267565411,8.61657722 0.624319283,7.52306442 L0.815437446,7.31161852 L7.85524348,0.271812484 C8.21766013,-0.0906041612 8.80525361,-0.0906041612 9.16767025,0.271812484 C9.48981838,0.593960608 9.5256126,1.09402626 9.27505297,1.45571158 L9.16767025,1.58423925 L2.39801882,8.35223283 L18.7197413,8.35223283 C24.8235066,8.35223283 28,11.88167 28,18.5605173 C28,25.0286774 25.0409921,28.8154573 19.1996764,29.6367412 L18.7197413,29.6968277 L3.87132753,29.6968277 C3.358793,29.6968277 2.94330165,29.2813365 2.94330165,28.7688019 C2.94330165,28.3132156 3.27159111,27.9343054 3.70451369,27.8557278 L3.87132753,27.840776 L18.6172581,27.846452 C23.6969089,27.2820464 26.1439483,24.2912204 26.1439483,18.5605173 C26.1439483,13.0283959 23.8870007,10.3626156 19.1446408,10.2148013 L18.7197413,10.2082845 L2.39987488,10.2082845 L9.16767025,16.9762781 Z",
+    id: "\u8DEF\u5F84",
+    fill: "currentColor"
+  }))))) : null, onClear ? /*#__PURE__*/_react.default.createElement(_icon.default, {
+    type: "delete",
+    className: "".concat(prefixCls, "-drawing-board-clear"),
+    onClick: function onClick() {
+      return handleOnClear();
+    }
+  }) : null), /*#__PURE__*/_react.default.createElement("span", {
+    className: "".concat(prefixCls, "-drawing-board-tip")
+  }, isEmpty ? signatureLangMsg === null || signatureLangMsg === void 0 ? void 0 : signatureLangMsg.pleaseWriteHere : ''), /*#__PURE__*/_react.default.createElement("canvas", {
+    ref: canvasRef
+  }));
+});
+var _default = DrawingBoard;
+exports.default = _default;

package/lib/signature/index.d.ts

@@ -0,0 +1,3 @@
+import Signature from './signature';
+export * from './signature';
+export default Signature;

package/lib/signature/index.js

@@ -0,0 +1,27 @@
+"use strict";
+
+var _typeof = require("@babel/runtime-corejs3/helpers/typeof");
+var _WeakMap = require("@babel/runtime-corejs3/core-js-stable/weak-map");
+var _Object$getOwnPropertyDescriptor = require("@babel/runtime-corejs3/core-js-stable/object/get-own-property-descriptor");
+var _Object$keys = require("@babel/runtime-corejs3/core-js-stable/object/keys");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+var _exportNames = {};
+exports.default = void 0;
+var _signature = _interopRequireWildcard(require("./signature"));
+_Object$keys(_signature).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
+  if (key in exports && exports[key] === _signature[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function get() {
+      return _signature[key];
+    }
+  });
+});
+function _getRequireWildcardCache(nodeInterop) { if (typeof _WeakMap !== "function") return null; var cacheBabelInterop = new _WeakMap(); var cacheNodeInterop = new _WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && _Object$getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? _Object$getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+var _default = _signature.default;
+exports.default = _default;

package/lib/signature/signature.d.ts

@@ -0,0 +1,32 @@
+import React, { FunctionComponentElement } from 'react';
+export declare const DataUrlTypes: ["png", "jpeg", "svg"];
+export declare type DataUrlType = typeof DataUrlTypes[number];
+declare type CSSSelector = string;
+export interface ISignatureProps {
+    dataUrlType?: DataUrlType;
+    style?: Record<string, unknown>;
+    className?: string;
+    prefixCls?: string;
+    disabled?: boolean;
+    containerWidth?: number;
+    containerHeight?: number;
+    penColor?: string;
+    backgroundColor?: string;
+    children?: React.ReactNode;
+    title?: React.ReactNode;
+    preview?: boolean;
+    canFullScreen?: boolean;
+    getContainer?: HTMLElement | (() => HTMLElement | CSSSelector | null | false) | null | false;
+    undo?: () => void;
+    redo?: () => void;
+    onClear?: () => void;
+    onStart?: () => void;
+    onEnd?: () => void;
+    getSignatureData?: (dataUrl: string) => void;
+    onClose?: () => void;
+}
+declare const Signature: {
+    (props: ISignatureProps): FunctionComponentElement<ISignatureProps>;
+    displayName: string;
+};
+export default Signature;