@kdcloudjs/kdesign 1.7.58 → 1.7.60

package/es/_utils/domUtil.d.ts

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

package/es/_utils/domUtil.js

@@ -0,0 +1,15 @@
+import scrollIntoView from 'dom-scroll-into-view';
+export 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) {
+      scrollIntoView(ref.current, ref.current.parentElement);
+    }
+  }
+};

package/es/cascader/cascader.js

@@ -1,7 +1,7 @@
-import _extends from "@babel/runtime-corejs3/helpers/extends";
 import _toConsumableArray from "@babel/runtime-corejs3/helpers/toConsumableArray";
 import _defineProperty from "@babel/runtime-corejs3/helpers/defineProperty";
 import _slicedToArray from "@babel/runtime-corejs3/helpers/slicedToArray";
+import _extends from "@babel/runtime-corejs3/helpers/extends";
 import _Object$getOwnPropertySymbols from "@babel/runtime-corejs3/core-js-stable/object/get-own-property-symbols";
 import _includesInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/includes";
 import _mapInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/map";
@@ -22,6 +22,7 @@ import { tuple } from '../_utils/type';
 import { getCompProps } from '../_utils';
 import { ConfigContext } from '../config-provider';
 import usePopper from '../_utils/usePopper';
+import { scrollToDirectory } from '../_utils/domUtil';
 import Input from '../input';
 import Icon from '../icon';
 import Empty from '../empty';
@@ -29,6 +30,28 @@ import Checkbox from '../checkbox';
 import Tag from '../tag';
 import { flattenAll, useChecked, getHalfChecked, getChecked, getMultipleCheckValue, getAllCheckedKeys } from './util';
 export var CascaderPlacement = tuple('topLeft', 'topRight', 'bottomLeft', 'bottomRight');
+var CascaderMenuSubmenu = function CascaderMenuSubmenu(props) {
+  var optionProps = props.optionProps,
+    label = props.label,
+    children = props.children,
+    selected = props.selected,
+    isMultiple = props.isMultiple;
+  var ref = useRef(null);
+  var isFirst = useRef(!isMultiple);
+  useEffect(function () {
+    if (typeof selected === 'boolean' && isFirst.current && ref.current) {
+      isFirst.current = false;
+      if (selected && !isMultiple) {
+        scrollToDirectory(ref);
+      }
+    }
+  }, [selected]);
+  return /*#__PURE__*/React.createElement("li", _extends({
+    ref: ref
+  }, optionProps, {
+    title: label
+  }), children);
+};
 var Cascader = /*#__PURE__*/React.forwardRef(function (props, ref) {
   var _React$useContext = React.useContext(ConfigContext),
     getPrefixCls = _React$useContext.getPrefixCls,
@@ -72,13 +95,18 @@ var Cascader = /*#__PURE__*/React.forwardRef(function (props, ref) {
   var inputRef = useRef();
   var suffixRef = useRef(null);
   var wrapperRef = useRef();
-  var _useState = useState(!!props.popperVisible || !!props.popupVisible || defaultPopupVisible),
+  var _useState = useState(false),
     _useState2 = _slicedToArray(_useState, 2),
     visible = _useState2[0],
     setVisible = _useState2[1];
   React.useEffect(function () {
     setVisible(!!props.popperVisible || !!props.popupVisible);
   }, [props.popperVisible, props.popupVisible]);
+  React.useEffect(function () {
+    if (!!props.popperVisible || !!props.popupVisible || defaultPopupVisible) {
+      setVisible(true);
+    }
+  }, []);
   var _useState3 = useState([options]),
     _useState4 = _slicedToArray(_useState3, 2),
     menus = _useState4[0],
@@ -399,11 +427,11 @@ var Cascader = /*#__PURE__*/React.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(_sliceInstanceProperty(currentOptions).call(currentOptions, 0));
+  var onVisibleChange = function onVisibleChange(v) {
+    setVisible(v);
+    onPopupVisibleChange && onPopupVisibleChange(v);
+    onPopperVisibleChange && onPopperVisibleChange(v);
+    v && setSelectedOptions(_sliceInstanceProperty(currentOptions).call(currentOptions, 0));
   };
   var cascaderMenus = /*#__PURE__*/React.createElement(React.Fragment, null, (options === null || options === void 0 ? void 0 : options.length) ? (menus === null || menus === void 0 ? void 0 : menus.length) && _mapInstanceProperty(menus).call(menus, function (opts, index) {
     return /*#__PURE__*/React.createElement("ul", {
@@ -436,10 +464,13 @@ var Cascader = /*#__PURE__*/React.forwardRef(function (props, ref) {
       }) : ((children === null || children === void 0 ? void 0 : children.length) || isLeaf === false) && (props.expandIcon || /*#__PURE__*/React.createElement(Icon, {
         type: "arrow-right"
       })));
-      return /*#__PURE__*/React.createElement("li", _extends({
+      return /*#__PURE__*/React.createElement(CascaderMenuSubmenu, _extends({
         key: value
-      }, optionProps, {
-        title: label
+      }, {
+        isMultiple: isMultiple,
+        optionProps: optionProps,
+        label: label,
+        selected: selected
       }), isMultiple ? /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Checkbox, {
         checked: getChecked(checkedKeys, value),
         indeterminate: getHalfChecked(halfCheckedKeys, value),

package/es/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/es/config-provider/compDefaultProps.js

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

package/es/date-picker/date-picker.js

@@ -12,7 +12,7 @@ import InputDate from './single/input-date';
 import { getDefaultFormat, getDataOrAriaProps, getInternalNextMode, generateUnits } from './utils';
 import useValueTexts from './hooks/use-value-texts';
 import useHoverValue from './hooks/use-hover-value';
-import { formatDate, getHours, getLowerBoundTime, getMinutes, getSeconds, isEqual, isValid, newDate, parseDate, setTime, isDate } from './utils/date-fns';
+import { formatDate, getHours, getLowerBoundTime, getMinutes, getSeconds, isEqual, isValid, newDate, parseDate, setTime } from './utils/date-fns';
 import useTextValueMapping from './hooks/use-text-value-mapping';
 import getExtraFooter from './utils/get-extra-footer';
 import getRanges from './utils/get-ranges';
@@ -102,10 +102,15 @@ var InternalDatePicker = function InternalDatePicker(props, ref) {
     _useMergedState2 = _slicedToArray(_useMergedState, 2),
     dateValue = _useMergedState2[0],
     setDateValue = _useMergedState2[1];
-  var _React$useState = React.useState(dateValue),
-    _React$useState2 = _slicedToArray(_React$useState, 2),
-    selectedValue = _React$useState2[0],
-    setSelectedValue = _React$useState2[1];
+  var _useMergedState3 = useMergedState(null, {
+      value: dateValue,
+      postState: function postState(v) {
+        return v && !isValid(v) ? null : v;
+      }
+    }),
+    _useMergedState4 = _slicedToArray(_useMergedState3, 2),
+    selectedValue = _useMergedState4[0],
+    setSelectedValue = _useMergedState4[1];
   var hours;
   var minutes;
   var seconds;
@@ -136,7 +141,7 @@ var InternalDatePicker = function InternalDatePicker(props, ref) {
     viewDate = _useState2[0],
     setInnerViewDate = _useState2[1];
   var setViewDate = function setViewDate(date) {
-    setInnerViewDate(isDate(date) ? date : new Date());
+    setInnerViewDate(isValid(date) ? date : new Date());
   };
   useEffect(function () {
     setViewDate(dateValue);
@@ -175,7 +180,7 @@ var InternalDatePicker = function InternalDatePicker(props, ref) {
     hoverValue = _useHoverValue2[0],
     onEnter = _useHoverValue2[1],
     onLeave = _useHoverValue2[2];
-  var _useMergedState3 = useMergedState(false, {
+  var _useMergedState5 = useMergedState(false, {
       value: open,
       defaultValue: defaultOpen,
       postState: function postState(postOpen) {
@@ -190,10 +195,10 @@ var InternalDatePicker = function InternalDatePicker(props, ref) {
         // }
       }
     }),
-    _useMergedState4 = _slicedToArray(_useMergedState3, 2),
-    openValue = _useMergedState4[0],
-    triggerInnerOpen = _useMergedState4[1];
-  var _useMergedState5 = useMergedState(function () {
+    _useMergedState6 = _slicedToArray(_useMergedState5, 2),
+    openValue = _useMergedState6[0],
+    triggerInnerOpen = _useMergedState6[1];
+  var _useMergedState7 = useMergedState(function () {
       if (picker === 'time') {
         return 'time';
       }
@@ -201,9 +206,9 @@ var InternalDatePicker = function InternalDatePicker(props, ref) {
     }, {
       value: mode
     }),
-    _useMergedState6 = _slicedToArray(_useMergedState5, 2),
-    mergedMode = _useMergedState6[0],
-    setInnerMode = _useMergedState6[1];
+    _useMergedState8 = _slicedToArray(_useMergedState7, 2),
+    mergedMode = _useMergedState8[0],
+    setInnerMode = _useMergedState8[1];
   var _useState3 = useState(undefined),
     _useState4 = _slicedToArray(_useState3, 2),
     innerPicker = _useState4[0],
@@ -231,9 +236,6 @@ var InternalDatePicker = function InternalDatePicker(props, ref) {
     }
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [picker]);
-  useEffect(function () {
-    setSelectedValue(dateValue);
-  }, [dateValue]);
   useOnClickOutside([popperRef, inputDivRef], function () {
     setViewDate(selectedValue || newDate());
     triggerOpen(false);

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

@@ -2,7 +2,7 @@ import _slicedToArray from "@babel/runtime-corejs3/helpers/slicedToArray";
 import _valuesInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/values";
 import * as React from 'react';
 import { getValue, updateValues, getClosingViewDate } from '../utils';
-import { newDate, isSameYear, isSameMonth } from '../utils/date-fns';
+import { newDate, isSameYear, isSameMonth, isValid } from '../utils/date-fns';
 // import { getClosingViewDate, isSameYear, isSameMonth, isSameDecade } from '../utils/dateUtil'
 function getStartEndDistance(startDate, endDate, picker) {
   var startNext = getClosingViewDate(startDate, picker, 1);
@@ -48,6 +48,12 @@ function getRangeViewDate(values, index, picker) {
   }
   return startDate;
 }
+function checkViewDate(value) {
+  if (value && !isValid(value)) {
+    return false;
+  }
+  return value;
+}
 export default function useRangeViewDates(_ref) {
   var values = _valuesInstanceProperty(_ref),
     picker = _ref.picker,
@@ -68,7 +74,7 @@ export default function useRangeViewDates(_ref) {
     if (defaultViewDates[index]) {
       return defaultViewDates[index];
     }
-    return getValue(viewDates, index) || getRangeViewDate(values, index, picker) || startDate || endDate || newDate();
+    return checkViewDate(getValue(viewDates, index)) || checkViewDate(getRangeViewDate(values, index, picker)) || checkViewDate(startDate) || checkViewDate(endDate) || newDate();
   }
   function setViewDate(viewDate, index) {
     if (viewDate) {

package/es/date-picker/panel/time/time.js

@@ -6,7 +6,7 @@ import _filterInstanceProperty from "@babel/runtime-corejs3/core-js-stable/insta
 import * as React from 'react';
 import classNames from 'classnames';
 import TimeColumn from './time-column';
-import { formatDate, newDate, setTime as utilSetTime } from '../../utils/date-fns';
+import { formatDate, newDate, setTime as utilSetTime, isValid } from '../../utils/date-fns';
 import Context from '../../context';
 import useStateMemo from '../../hooks/use-state-memo';
 import { leftPad } from '../../utils';
@@ -39,7 +39,9 @@ function TimePanel(props) {
     minutes = _context$minutes === void 0 ? [] : _context$minutes,
     _context$seconds = context.seconds,
     seconds = _context$seconds === void 0 ? [] : _context$seconds,
-    disabledTimePanel = context.disabledTimePanel;
+    disabledTimePanel = context.disabledTimePanel,
+    rangeValue = context.rangeValue,
+    panelPosition = context.panelPosition;
   var picker = props.picker,
     _props$format = props.format,
     format = _props$format === void 0 ? 'HH:mm:ss' : _props$format,
@@ -72,9 +74,22 @@ function TimePanel(props) {
   var hour = originHour;
   // const minute = value ? getMinutes(value) : -1
   // const second = value ? getSeconds(value) : -1
+  var getDefaultDate = function getDefaultDate() {
+    if (panelPosition) {
+      if (rangeValue && rangeValue[0] && isValid(rangeValue[0])) {
+        return rangeValue[0];
+      }
+      if (rangeValue && rangeValue[1] && isValid(rangeValue[1])) {
+        return rangeValue[1];
+      }
+    } else if (value && isValid(value)) {
+      return value;
+    }
+    return newDate();
+  };
   var setTime = function setTime(isPM, newHour, newMinute, newSecond) {
     var _a, _b, _c;
-    var date = value || newDate();
+    var date = getDefaultDate();
     var _hour = newHour > -1 ? newHour : (_a = _findInstanceProperty(rawHours).call(rawHours, function (n) {
       return !n.disabled;
     })) === null || _a === void 0 ? void 0 : _a.value;

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

@@ -30,14 +30,6 @@ function reorderValues(values) {
   }
   return values;
 }
-// 范围时间顺序错误时报错
-function isErrorValues(values) {
-  if (values && values[0] && values[1] && isAfter(values[0], values[1])) {
-    console.error('开始日期在结束日期之后');
-    return true;
-  }
-  return false;
-}
 // 是否可以切换选择器
 function canValueTrigger(value, index, disabled, allowEmpty) {
   if (value) {
@@ -145,17 +137,7 @@ var InternalRangePicker = function InternalRangePicker(props, ref) {
   // 原始数据
   var _useMergedState3 = useMergedState(null, {
       value: value,
-      defaultValue: defaultValue,
-      postState: function postState(values) {
-        if (picker === 'time' || picker === 'date' && showTime) {
-          return order ? reorderValues(values) : values;
-        } else {
-          if (isErrorValues(values)) {
-            return [values[0], null];
-          }
-          return values;
-        }
-      }
+      defaultValue: defaultValue
     }),
     _useMergedState4 = _slicedToArray(_useMergedState3, 2),
     dateValue = _useMergedState4[0],
@@ -170,8 +152,11 @@ var InternalRangePicker = function InternalRangePicker(props, ref) {
         }
         // Fill disabled unit
         for (var i = 0; i < 2; i++) {
-          if (mergedDisabled[i] && !getValue(postValues, i) && !getValue(allowEmpty, i)) {
+          var v = getValue(postValues, i);
+          if (mergedDisabled[i] && !v && !getValue(allowEmpty, i)) {
             postValues = updateValues(postValues, newDate(), i);
+          } else if (v && !isValid(v)) {
+            postValues = updateValues(postValues, null, i);
           }
         }
         return postValues;
@@ -352,12 +337,20 @@ var InternalRangePicker = function InternalRangePicker(props, ref) {
       }
     }, 0);
   };
+  var triggerChangeInner = function triggerChangeInner(values) {
+    if (typeof value === 'undefined') {
+      setInnerValue(values);
+    }
+    if (onChange && (!isEqual(getValue(dateValue, 0), getValue(values, 0)) || !isEqual(getValue(dateValue, 1), getValue(values, 1)))) {
+      onChange(values, [values && values[0] ? formatDate(values[0], _format) : '', values && values[1] ? formatDate(values[1], _format) : '']);
+    }
+  };
   var triggerChange = function triggerChange(newValue, sourceIndex) {
     var values = newValue;
     var startValue = getValue(values, 0);
     var endValue = getValue(values, 1);
     if (startValue && endValue && isAfter(startValue, endValue)) {
-      if (picker === 'week' && !isSameWeek(startValue, endValue) || picker === 'quarter' && !isSameQuarter(startValue, endValue) || picker !== 'week' && picker !== 'quarter' && picker !== 'time' && !isSameDay(startValue, endValue)) {
+      if (picker === 'week' && !isSameWeek(startValue, endValue) || picker === 'quarter' && !isSameQuarter(startValue, endValue) || picker === 'time' && !isEqual(startValue, endValue) || picker !== 'week' && picker !== 'quarter' && picker !== 'time' && !isSameDay(startValue, endValue)) {
         if (sourceIndex === 0) {
           values = [startValue, null];
           endValue = null;
@@ -366,8 +359,6 @@ var InternalRangePicker = function InternalRangePicker(props, ref) {
           values = [null, endValue];
         }
         openRecordsRef.current = _defineProperty({}, sourceIndex, true);
-      } else if (picker === 'time' && order === true) {
-        values = reorderValues(values);
       }
     }
     setSelectedValue(values);
@@ -383,11 +374,10 @@ var InternalRangePicker = function InternalRangePicker(props, ref) {
     var canEndValueTrigger = canValueTrigger(endValue, 1, mergedDisabled, allowEmpty);
     var canTrigger = values === null || canStartValueTrigger && canEndValueTrigger;
     if (canTrigger) {
-      if (typeof value === 'undefined') {
-        setInnerValue(values);
-      }
-      if (onChange && (!isEqual(getValue(dateValue, 0), startValue) || !isEqual(getValue(dateValue, 1), endValue))) {
-        onChange(values, [startStr, endStr]);
+      if (order) {
+        triggerChangeInner(reorderValues(values));
+      } else {
+        triggerChangeInner(values);
       }
     }
     var curValue = getValue(values, sourceIndex);

package/es/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/es/index.js

@@ -58,4 +58,5 @@ export { default as TreeSelect } from './tree-select';
 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 Divider } from './divider';
+export { default as Signature } from './signature';

package/es/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/es/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/es/locale/zh-CN.js

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

package/es/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/es/signature/drawingBoard.js

@@ -0,0 +1,163 @@
+import _defineProperty from "@babel/runtime-corejs3/helpers/defineProperty";
+import _toConsumableArray from "@babel/runtime-corejs3/helpers/toConsumableArray";
+import _slicedToArray from "@babel/runtime-corejs3/helpers/slicedToArray";
+import _sliceInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/slice";
+import _concatInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/concat";
+import React, { useState, useEffect, useRef, forwardRef, useImperativeHandle } from 'react';
+import Icon from '../icon';
+import classNames from 'classnames';
+var DrawingBoard = /*#__PURE__*/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 = useState(-1),
+    _useState2 = _slicedToArray(_useState, 2),
+    currentHistoryIndex = _useState2[0],
+    setCurrentHistoryIndex = _useState2[1];
+  var _useState3 = useState([]),
+    _useState4 = _slicedToArray(_useState3, 2),
+    signatureHistory = _useState4[0],
+    setSignatureHistory = _useState4[1];
+  var canvasRef = useRef();
+  var canvasWrapperRef = useRef();
+  var handleOnClear = function handleOnClear() {
+    var _a;
+    (_a = signaturePad()) === null || _a === void 0 ? void 0 : _a.clear();
+    setIsEmpty(true);
+    setSignatureHistory(_sliceInstanceProperty(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 _concatInstanceProperty(_context = []).call(_context, _toConsumableArray(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();
+      }
+    }
+  };
+  useEffect(function () {
+    currentHistoryIndex > 0 ? setIsEmpty(false) : setIsEmpty(true);
+  }, [currentHistoryIndex]);
+  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.createElement("div", {
+    className: "".concat(prefixCls, "-drawing-board"),
+    ref: canvasWrapperRef
+  }, /*#__PURE__*/React.createElement("div", {
+    className: classNames((_classNames = {}, _defineProperty(_classNames, "".concat(prefixCls, "-drawing-board-operation"), true), _defineProperty(_classNames, "enabled", !isEmpty), _classNames))
+  }, undo ? /*#__PURE__*/React.createElement("span", {
+    onClick: function onClick() {
+      return handleUndo();
+    }
+  }, /*#__PURE__*/React.createElement("svg", {
+    width: "1em",
+    height: "1em",
+    viewBox: "0 0 32 32"
+  }, /*#__PURE__*/React.createElement("g", {
+    id: "1016.\u64A4\u9500",
+    stroke: "none",
+    "stroke-width": "1",
+    fill: "none",
+    "fill-rule": "evenodd"
+  }, /*#__PURE__*/React.createElement("g", {
+    id: "\u7F16\u7EC4",
+    transform: "translate(2.000000, 1.000000)",
+    fill: "#000000",
+    "fill-rule": "nonzero"
+  }, /*#__PURE__*/React.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.createElement("span", {
+    onClick: function onClick() {
+      return handleRedo();
+    }
+  }, /*#__PURE__*/React.createElement("svg", {
+    width: "1em",
+    height: "1em",
+    viewBox: "0 0 32 32"
+  }, /*#__PURE__*/React.createElement("g", {
+    id: "1016.\u64A4\u9500",
+    stroke: "none",
+    "stroke-width": "1",
+    fill: "none",
+    "fill-rule": "evenodd"
+  }, /*#__PURE__*/React.createElement("g", {
+    id: "\u7F16\u7EC4",
+    transform: "translate(2.000000, 1.000000)",
+    fill: "#000000",
+    "fill-rule": "nonzero"
+  }, /*#__PURE__*/React.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.createElement(Icon, {
+    type: "delete",
+    className: "".concat(prefixCls, "-drawing-board-clear"),
+    onClick: function onClick() {
+      return handleOnClear();
+    }
+  }) : null), /*#__PURE__*/React.createElement("span", {
+    className: "".concat(prefixCls, "-drawing-board-tip")
+  }, isEmpty ? signatureLangMsg === null || signatureLangMsg === void 0 ? void 0 : signatureLangMsg.pleaseWriteHere : ''), /*#__PURE__*/React.createElement("canvas", {
+    ref: canvasRef
+  }));
+});
+export default DrawingBoard;

package/es/signature/index.d.ts

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

package/es/signature/index.js

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