@kdcloudjs/kdesign 1.7.59 → 1.7.61

package/lib/select/select.js

@@ -517,7 +517,7 @@ var InternalSelect = function InternalSelect(props, ref) {
       className: clearIconCls,
       ref: clearRef
     }, clearIcon || /*#__PURE__*/_react.default.createElement(_index.Icon, {
-      type: "close-solid"
+      type: "close"
     })) : null, showArrow ? /*#__PURE__*/_react.default.createElement("span", {
       className: arrowIconCls
     }, suffixIcon || /*#__PURE__*/_react.default.createElement(_index.Icon, {

package/lib/select/style/index.css

@@ -542,10 +542,10 @@
   opacity: 1;
 }
 .kd-select .kd-select-single .kd-select-icon-clear {
-  color: var(--kd-c-select-icon-clear-color-text, #d9d9d9);
+  color: var(--kd-c-select-icon-clear-color-text, #666);
 }
 .kd-select .kd-select-single .kd-select-icon-clear:hover {
-  color: var(--kd-c-select-icon-clear-color-text-hover, #999);
+  color: var(--kd-c-select-icon-clear-color-text-hover, var(--kd-g-color-theme, #5582f3));
 }
 .kd-select .kd-select-single-text {
   color: var(--kd-c-select-single-color-text, var(--kd-g-color-text-primary, #212121));
@@ -660,10 +660,10 @@
   opacity: 1;
 }
 .kd-select-multiple .kd-select-icon-clear {
-  color: var(--kd-c-select-icon-clear-color-text, #d9d9d9);
+  color: var(--kd-c-select-icon-clear-color-text, #666);
 }
 .kd-select-multiple .kd-select-icon-clear:hover {
-  color: var(--kd-c-select-icon-clear-color-text-hover, #999);
+  color: var(--kd-c-select-icon-clear-color-text-hover, var(--kd-g-color-theme, #5582f3));
 }
 .kd-select-multiple-selector {
   position: relative;

package/lib/select/style/token.less

@@ -20,8 +20,8 @@
 @select-color-text-disabled: var(~'@{select-custom-prefix}-color-text-disabled', @color-disabled);
 @select-arrow-icon-color-text-disabled: var(~'@{select-custom-prefix}-arrow-icon-color-text-disabled', #b2b2b2);
 @select-single-color-text: var(~'@{select-custom-prefix}-single-color-text', @color-text-primary);
-@select-clear-color: var(~'@{select-custom-prefix}-icon-clear-color-text', #d9d9d9);
-@select-clear-color-hover: var(~'@{select-custom-prefix}-icon-clear-color-text-hover', #999);
+@select-clear-color: var(~'@{select-custom-prefix}-icon-clear-color-text', #666);
+@select-clear-color-hover: var(~'@{select-custom-prefix}-icon-clear-color-text-hover', @color-theme);
 @select-error-color: var(~'@{select-custom-prefix}-color-error', @color-error);
 
 // font

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;

package/lib/signature/signature.js

@@ -0,0 +1,282 @@
+"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 = exports.DataUrlTypes = void 0;
+var _extends2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/extends"));
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/slicedToArray"));
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/defineProperty"));
+var _getOwnPropertySymbols = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/object/get-own-property-symbols"));
+var _react = _interopRequireWildcard(require("react"));
+var _classnames = _interopRequireDefault(require("classnames"));
+var _signature_pad = _interopRequireDefault(require("./utils/signature_pad"));
+var _modal = _interopRequireDefault(require("../modal"));
+var _icon = _interopRequireDefault(require("../icon"));
+var _image = _interopRequireDefault(require("../image"));
+var _button = _interopRequireDefault(require("../button"));
+var _drawingBoard = _interopRequireDefault(require("./drawingBoard"));
+var _ConfigContext = _interopRequireDefault(require("../config-provider/ConfigContext"));
+var _utils = require("../_utils");
+var _hooks = require("../_utils/hooks");
+var _type = require("../_utils/type");
+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 __rest = void 0 && (void 0).__rest || function (s, e) {
+  var t = {};
+  for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0) t[p] = s[p];
+  if (s != null && typeof _getOwnPropertySymbols.default === "function") for (var i = 0, p = (0, _getOwnPropertySymbols.default)(s); i < p.length; i++) {
+    if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i])) t[p[i]] = s[p[i]];
+  }
+  return t;
+};
+var DataUrlTypes = (0, _type.tuple)('png', 'jpeg', 'svg');
+exports.DataUrlTypes = DataUrlTypes;
+var typeMapping = {
+  png: 'image/png',
+  jpeg: 'image/jpeg',
+  svg: 'image/svg+xml'
+};
+var Signature = function Signature(props) {
+  var _classNames2;
+  var _useContext = (0, _react.useContext)(_ConfigContext.default),
+    getPrefixCls = _useContext.getPrefixCls,
+    prefixCls = _useContext.prefixCls,
+    userDefaultProps = _useContext.compDefaultProps,
+    locale = _useContext.locale;
+  var signatureProps = (0, _utils.getCompProps)('Signature', userDefaultProps, props);
+  var signatureLangMsg = locale.getCompLangMsg({
+    componentName: 'Signature'
+  });
+  var className = signatureProps.className,
+    style = signatureProps.style,
+    customPrefixcls = signatureProps.prefixCls,
+    containerWidth = signatureProps.containerWidth,
+    containerHeight = signatureProps.containerHeight,
+    getSignatureData = signatureProps.getSignatureData,
+    onStart = signatureProps.onStart,
+    onEnd = signatureProps.onEnd,
+    onClear = signatureProps.onClear,
+    undo = signatureProps.undo,
+    redo = signatureProps.redo,
+    penColor = signatureProps.penColor,
+    backgroundColor = signatureProps.backgroundColor,
+    _signatureProps$dataU = signatureProps.dataUrlType,
+    dataUrlType = _signatureProps$dataU === void 0 ? 'png' : _signatureProps$dataU,
+    title = signatureProps.title,
+    onClose = signatureProps.onClose,
+    disabled = signatureProps.disabled,
+    preview = signatureProps.preview,
+    canFullScreen = signatureProps.canFullScreen,
+    restProps = __rest(signatureProps, ["className", "style", "prefixCls", "containerWidth", "containerHeight", "getSignatureData", "onStart", "onEnd", "onClear", "undo", "redo", "penColor", "backgroundColor", "dataUrlType", "title", "onClose", "disabled", "preview", "canFullScreen"]);
+  var signaturePrefixCls = getPrefixCls(prefixCls, 'signature', customPrefixcls);
+  var signatureClass = (0, _classnames.default)(signaturePrefixCls, className, (0, _defineProperty2.default)({}, "".concat(signaturePrefixCls, "-disabled"), disabled));
+  var _useState = (0, _react.useState)(false),
+    _useState2 = (0, _slicedToArray2.default)(_useState, 2),
+    modalVisible = _useState2[0],
+    setModalVisible = _useState2[1];
+  var _useState3 = (0, _react.useState)(''),
+    _useState4 = (0, _slicedToArray2.default)(_useState3, 2),
+    dataUrl = _useState4[0],
+    setDataUrl = _useState4[1];
+  var _useState5 = (0, _react.useState)(true),
+    _useState6 = (0, _slicedToArray2.default)(_useState5, 2),
+    isEmpty = _useState6[0],
+    setIsEmpty = _useState6[1];
+  var _useState7 = (0, _react.useState)(false),
+    _useState8 = (0, _slicedToArray2.default)(_useState7, 2),
+    isFullScreen = _useState8[0],
+    setIsFullScreen = _useState8[1];
+  var modalRef = (0, _react.useRef)();
+  var modalBodyRef = (0, _react.useRef)();
+  var triggerRef = (0, _react.useRef)();
+  var signaturePadRef = (0, _react.useRef)();
+  var handleOnClick = function handleOnClick() {
+    if (disabled) return;
+    setModalVisible(true);
+  };
+  var setJpegBgColor = function setJpegBgColor() {
+    var canvas = modalBodyRef.current.getCanvasRef();
+    var ctx = canvas.getContext('2d');
+    ctx.globalCompositeOperation = 'destination-over';
+    ctx.fillStyle = backgroundColor;
+    ctx.fillRect(0, 0, canvas.width, canvas.height);
+  };
+  var handleModalOk = function handleModalOk() {
+    var _a, _b;
+    var type = typeMapping[dataUrlType] || '';
+    if (type === 'image/jpeg') setJpegBgColor();
+    var result = (_a = signaturePadRef.current) === null || _a === void 0 ? void 0 : _a.toDataURL(type);
+    result && setDataUrl(result);
+    getSignatureData && getSignatureData(result);
+    (_b = signaturePadRef.current) === null || _b === void 0 ? void 0 : _b.clear();
+    setModalVisible(false);
+  };
+  var handleDelete = function handleDelete() {
+    if (disabled) return;
+    setDataUrl('');
+  };
+  var handleModalCancel = function handleModalCancel() {
+    onClose && onClose();
+    setModalVisible(false);
+  };
+  var handleFullScreen = function handleFullScreen(type) {
+    setIsFullScreen(true);
+    type === 'open' ? setIsFullScreen(true) : setIsFullScreen(false);
+  };
+  (0, _hooks.useResizeObserver)(modalRef.current, function (rect) {
+    var width = rect.width,
+      height = rect.height;
+    var canvas = modalBodyRef.current.getCanvasRef();
+    canvas.width = width - 40;
+    canvas.height = height - 142;
+  });
+  (0, _react.useEffect)(function () {
+    if (modalBodyRef.current) {
+      var canvas = modalBodyRef.current.getCanvasRef();
+      signaturePadRef.current = new _signature_pad.default(canvas, {
+        penColor: penColor
+      });
+      signaturePadRef.current.addEventListener('beginStroke', function () {
+        setIsEmpty(false);
+        onStart && onStart();
+      });
+      signaturePadRef.current.addEventListener('endStroke', function () {
+        modalBodyRef.current.saveSignatureToHistory();
+        onEnd && onEnd();
+      });
+    }
+    return function () {
+      if (signaturePadRef.current) {
+        signaturePadRef.current.off();
+      }
+    };
+  }, []);
+  (0, _react.useEffect)(function () {
+    var _a, _b;
+    if (modalVisible) {
+      (_a = signaturePadRef.current) === null || _a === void 0 ? void 0 : _a.on();
+      modalBodyRef.current.saveSignatureToHistory();
+    } else {
+      (_b = signaturePadRef.current) === null || _b === void 0 ? void 0 : _b.off();
+      modalBodyRef.current.setSignatureHistory([]);
+      modalBodyRef.current.setCurrentHistoryIndex(-1);
+    }
+  }, [modalVisible]);
+  (0, _react.useEffect)(function () {
+    signaturePadRef.current && (signaturePadRef.current.penColor = penColor);
+  }, [penColor]);
+  var DrawingBoardProps = {
+    prefixCls: signaturePrefixCls,
+    signatureLangMsg: signatureLangMsg,
+    undo: undo,
+    redo: redo,
+    isEmpty: isEmpty,
+    onClear: onClear,
+    setDataUrl: setDataUrl,
+    setIsEmpty: setIsEmpty,
+    signaturePad: function signaturePad() {
+      return signaturePadRef.current;
+    }
+  };
+  var modalClasses = (0, _classnames.default)((_classNames2 = {}, (0, _defineProperty2.default)(_classNames2, "".concat(signaturePrefixCls, "-modal"), true), (0, _defineProperty2.default)(_classNames2, "".concat(signaturePrefixCls, "-modal-fullscreen"), isFullScreen), _classNames2));
+  var footer = /*#__PURE__*/_react.default.createElement("div", {
+    className: "".concat(signaturePrefixCls, "-modal-footer")
+  }, /*#__PURE__*/_react.default.createElement(_button.default, {
+    onClick: handleModalCancel
+  }, signatureLangMsg === null || signatureLangMsg === void 0 ? void 0 : signatureLangMsg.cancelText), /*#__PURE__*/_react.default.createElement(_button.default, {
+    type: "primary",
+    onClick: handleModalOk,
+    disabled: isEmpty
+  }, signatureLangMsg === null || signatureLangMsg === void 0 ? void 0 : signatureLangMsg.okText));
+  var titleIcon = /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, !isFullScreen ? /*#__PURE__*/_react.default.createElement("span", {
+    className: "kd-modal-expand-icon",
+    onClick: function onClick() {
+      return handleFullScreen('open');
+    }
+  }, /*#__PURE__*/_react.default.createElement("svg", {
+    width: "1em",
+    height: "1em",
+    viewBox: "0 0 32 32"
+  }, /*#__PURE__*/_react.default.createElement("g", {
+    id: "977.\u5168\u5C4F",
+    stroke: "none",
+    "stroke-width": "1",
+    fill: "none",
+    "fill-rule": "evenodd"
+  }, /*#__PURE__*/_react.default.createElement("g", {
+    id: "\u7F16\u7EC4",
+    transform: "translate(2.000000, 2.000000)",
+    fill: "#000000",
+    "fill-rule": "nonzero"
+  }, /*#__PURE__*/_react.default.createElement("path", {
+    d: "M1.07692308,17.4339622 C1.67169125,17.4339622 2.15384615,17.9161171 2.15384615,18.5108853 L2.15169231,24.8518084 L8.50424095,18.2911144 C8.91128276,17.8706218 9.58213195,17.8597178 10.0026246,18.2667596 L10.0077312,18.2717362 C10.4291221,18.6851765 10.4378354,19.3612143 10.0272402,19.7853779 L4.12030769,25.8856545 L10.2510885,25.8867924 C10.8346347,25.8867924 11.3076923,26.35985 11.3076923,26.9433963 C11.3076923,27.5269424 10.8346347,28 10.2510885,28 L1.0566038,28 C0.473057639,28 0,27.5269424 0,26.9433963 L0,18.5108853 C0,17.9161171 0.4821549,17.4339622 1.07692308,17.4339622 Z M26.9230769,16.9056604 C27.5178452,16.9056604 28,17.3878153 28,17.9825835 L28,17.9825835 L28,26.4150942 C28,26.9986405 27.5269424,27.4716981 26.9433963,27.4716981 L26.9433963,27.4716981 L17.7489115,27.4716981 C17.1653653,27.4716981 16.6923077,26.9986405 16.6923077,26.4150942 C16.6923077,25.8315482 17.1653653,25.3584905 17.7489115,25.3584905 L17.7489115,25.3584905 L25.8461538,25.3573527 L25.8461538,17.9825835 C25.8461538,17.3878153 26.3283087,16.9056604 26.9230769,16.9056604 Z M26.9433963,0 C27.5269424,0 28,0.473057639 28,1.0566038 L28,9.48911467 C28,10.0838829 27.5178452,10.5660378 26.9230769,10.5660378 C26.3283087,10.5660378 25.8461538,10.0838829 25.8461538,9.48911467 L25.8483077,3.1481916 L19.495759,9.70888562 C19.0887172,10.1293782 18.417868,10.1402822 17.9973754,9.73324042 L17.9922688,9.72826376 C17.5708779,9.31482358 17.5621646,8.63878569 17.9727599,8.21462222 L23.8796923,2.11434544 L17.7489115,2.11320756 C17.1653653,2.11320756 16.6923077,1.64014992 16.6923077,1.0566038 C16.6923077,0.473057639 17.1653653,0 17.7489115,0 L26.9433963,0 Z M10.2510885,0 C10.8346347,0 11.3076923,0.473057639 11.3076923,1.0566038 C11.3076923,1.64014992 10.8346347,2.11320756 10.2510885,2.11320756 L10.2510885,2.11320756 L2.15384615,2.11434544 L2.15384615,9.48911467 C2.15384615,10.0838829 1.67169125,10.5660378 1.07692308,10.5660378 C0.4821549,10.5660378 0,10.0838829 0,9.48911467 L0,9.48911467 L0,1.0566038 C0,0.473057639 0.473057639,0 1.0566038,0 L1.0566038,0 L10.2510885,0 Z",
+    id: "\u5F62\u72B6",
+    fill: "#666666"
+  }))))) : /*#__PURE__*/_react.default.createElement("span", {
+    className: "kd-modal-expand-icon",
+    onClick: function onClick() {
+      return handleFullScreen('close');
+    }
+  }, /*#__PURE__*/_react.default.createElement("svg", {
+    width: "16px",
+    height: "16px",
+    viewBox: "0 0 32 32"
+  }, /*#__PURE__*/_react.default.createElement("g", {
+    id: "1226-\u5173\u95ED\u5168\u5C4F",
+    stroke: "none",
+    "stroke-width": "1",
+    fill: "none",
+    "fill-rule": "evenodd"
+  }, /*#__PURE__*/_react.default.createElement("g", {
+    id: "\u7F16\u7EC4",
+    transform: "translate(4.000000, 4.000000)",
+    fill: "#000000",
+    "fill-rule": "nonzero"
+  }, /*#__PURE__*/_react.default.createElement("path", {
+    d: "M15.9569224,17.3691573 L15.9569224,22.6490507 C15.9569224,23.385811 16.0714999,23.9626957 15.336072,23.9626957 C14.6019762,23.9626957 14.6566004,23.385811 14.6566004,22.6490507 L14.6566004,15.9875652 C14.6566004,15.5932053 14.8191407,15.2747863 15.076274,15.0549573 C15.3252286,14.7994658 15.66681,14.6553386 16.0235372,14.6552681 L22.6370601,14.6552681 C23.3711558,14.6552681 23.9520373,14.6073054 23.9520373,15.3427334 C23.9520373,16.0794937 23.3711558,15.9022982 22.6370601,15.9022982 L17.2545798,15.9022982 L15.9569224,17.367825 L15.9569224,17.3691573 Z M8.00977019,17.4064616 L6.7107805,15.9382702 L1.32963251,15.9382702 C0.595536804,15.9382702 0.0146552671,16.116798 0.0146552671,15.3800378 C0.0146552671,14.6446098 0.595536804,14.6939048 1.32963251,14.6939048 L7.94315534,14.6939048 C8.31486623,14.6939048 8.6492728,14.8471189 8.88908626,15.0935939 C9.16260631,15.3252747 9.31724071,15.6678192 9.31009215,16.0262018 L9.31009215,22.6876874 C9.31009215,23.4231154 9.36471634,24 8.63062063,24 C7.89519263,24 8.00977017,23.4231153 8.00977019,22.6863551 L8.00977019,17.4064616 L8.00977019,17.4064616 Z M15.9569224,6.59487065 L17.2559121,8.06172976 L22.6370601,8.06172976 C23.3711558,8.06172976 23.9520373,7.88453425 23.9520373,8.62129455 C23.9520373,9.35539026 23.3711558,9.30742755 22.6370601,9.30742755 L16.0235372,9.30742755 C15.66681,9.30735708 15.3252286,9.16322991 15.076274,8.90773844 C14.8032501,8.675801 14.649122,8.33329396 14.6566004,7.97513047 L14.6566004,1.31364494 C14.6552817,0.578216941 14.6019762,0 15.3347396,0 C16.0701676,0 15.9555901,0.578216941 15.9555901,1.31364494 L15.9555901,6.59487065 L15.9569224,6.59487065 Z M7.9951149,6.59487065 L7.9951149,1.31364494 C7.99378262,0.578216941 7.88053736,0 8.61596536,0 C9.34872876,0 9.29543688,0.578216941 9.29543688,1.31364494 L9.29543688,7.97513047 C9.30291535,8.33329396 9.14878718,8.675801 8.87576331,8.90773844 C8.62648612,9.16356115 8.2843572,9.30771659 7.92716776,9.30742755 L1.31497725,9.30742755 C0.579549251,9.30742755 0,9.35539026 0,8.61996227 C0,7.88453427 0.579549251,8.06172978 1.31497725,8.06172976 L6.69612523,8.06172976 L7.99378262,6.59487065 L7.9951149,6.59487065 Z",
+    id: "\u5F62\u72B6",
+    fill: "#666666"
+  }))))));
+  return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, dataUrl ? /*#__PURE__*/_react.default.createElement(_image.default, {
+    preview: preview,
+    src: dataUrl,
+    title: "\u5220\u9664",
+    operations: !disabled ? [/*#__PURE__*/_react.default.createElement(_icon.default, {
+      type: "delete",
+      key: "delete",
+      onClick: function onClick() {
+        return handleDelete();
+      }
+    })] : undefined
+  }) : /*#__PURE__*/_react.default.createElement("div", {
+    className: signatureClass,
+    ref: triggerRef,
+    onClick: handleOnClick,
+    style: style
+  }, /*#__PURE__*/_react.default.createElement(_icon.default, {
+    type: "edit"
+  }), /*#__PURE__*/_react.default.createElement("span", null, signatureLangMsg === null || signatureLangMsg === void 0 ? void 0 : signatureLangMsg.clickToSign)), /*#__PURE__*/_react.default.createElement(_modal.default, (0, _extends2.default)({
+    width: containerWidth,
+    height: containerHeight,
+    ref: modalRef,
+    className: modalClasses,
+    visible: modalVisible,
+    onOk: handleModalOk,
+    onCancel: handleModalCancel,
+    resizable: true,
+    title: title || (signatureLangMsg === null || signatureLangMsg === void 0 ? void 0 : signatureLangMsg.handwrittenSignature),
+    titleIcon: canFullScreen && titleIcon,
+    body: /*#__PURE__*/_react.default.createElement(_drawingBoard.default, (0, _extends2.default)({}, DrawingBoardProps, {
+      ref: modalBodyRef
+    })),
+    footer: footer
+  }, restProps)));
+};
+Signature.displayName = 'Signature';
+var _default = Signature;
+exports.default = _default;

package/lib/signature/style/css.js

@@ -0,0 +1,4 @@
+"use strict";
+
+require("../../style/index.css");
+require("./index.css");