@kdcloudjs/kdesign 1.8.15 → 1.8.17

package/es/popper/style/index.css

@@ -130,7 +130,7 @@
           transform: rotate(45deg);
 }
 .kd-popper[data-popper-placement^='top'] .arrow {
-  bottom: calc(1.1 * var(--arrowSize));
+  bottom: calc(1.05 * var(--arrowSize));
 }
 .kd-popper[data-popper-placement^='top'] .arrow::before {
   left: calc(-1 * var(--arrowSize));
@@ -138,7 +138,7 @@
   border-left-color: transparent;
 }
 .kd-popper[data-popper-placement^='bottom'] .arrow {
-  top: calc(-0.8 * var(--arrowSize));
+  top: calc(-0.85 * var(--arrowSize));
 }
 .kd-popper[data-popper-placement^='bottom'] .arrow::before {
   left: calc(-1 * var(--arrowSize));
@@ -146,7 +146,7 @@
   border-right-color: transparent;
 }
 .kd-popper[data-popper-placement^='left'] .arrow {
-  right: calc(1.1 * var(--arrowSize));
+  right: calc(1.05 * var(--arrowSize));
 }
 .kd-popper[data-popper-placement^='left'] .arrow::before {
   top: calc(-1 * var(--arrowSize));
@@ -154,7 +154,7 @@
   border-bottom-color: transparent;
 }
 .kd-popper[data-popper-placement^='right'] .arrow {
-  left: calc(-0.8 * var(--arrowSize));
+  left: calc(-0.85 * var(--arrowSize));
 }
 .kd-popper[data-popper-placement^='right'] .arrow::before {
   top: calc(-1 * var(--arrowSize));

package/es/popper/style/index.less

@@ -29,7 +29,7 @@
   }
 
   &[data-popper-placement^='top'] .arrow {
-    bottom: calc(1.1 * var(--arrowSize));
+    bottom: calc(1.05 * var(--arrowSize));
 
     &::before {
       left: calc(-1 * var(--arrowSize));
@@ -39,7 +39,7 @@
   }
 
   &[data-popper-placement^='bottom'] .arrow {
-    top: calc(-0.8 * var(--arrowSize));
+    top: calc(-0.85 * var(--arrowSize));
 
     &::before {
       left: calc(-1 * var(--arrowSize));
@@ -49,7 +49,7 @@
   }
 
   &[data-popper-placement^='left'] .arrow {
-    right: calc(1.1 * var(--arrowSize));
+    right: calc(1.05 * var(--arrowSize));
 
     &::before {
       top: calc(-1 * var(--arrowSize));
@@ -59,7 +59,7 @@
   }
 
   &[data-popper-placement^='right'] .arrow {
-    left: calc(-0.8 * var(--arrowSize));
+    left: calc(-0.85 * var(--arrowSize));
 
     &::before {
       top: calc(-1 * var(--arrowSize));
@@ -97,5 +97,3 @@
 .popper-motion(~'@{popper-prefix-cls}-bottom-end', kdZoomTopRight);
 .popper-motion(~'@{popper-prefix-cls}-right-start', kdZoomTopLeft);
 .popper-motion(~'@{popper-prefix-cls}-bottom-start', kdZoomTopLeft);
-
-

package/es/signature/signature.d.ts

@@ -16,6 +16,7 @@ export interface ISignatureProps {
     title?: React.ReactNode;
     preview?: boolean;
     canFullScreen?: boolean;
+    resizable?: boolean;
     getContainer?: HTMLElement | (() => HTMLElement | CSSSelector | null | false) | null | false;
     undo?: () => void;
     redo?: () => void;

package/es/signature/signature.js

@@ -2,6 +2,7 @@ import _extends from "@babel/runtime-corejs3/helpers/extends";
 import _slicedToArray from "@babel/runtime-corejs3/helpers/slicedToArray";
 import _defineProperty from "@babel/runtime-corejs3/helpers/defineProperty";
 import _Object$getOwnPropertySymbols from "@babel/runtime-corejs3/core-js-stable/object/get-own-property-symbols";
+import _mapInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/map";
 var __rest = this && this.__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];
@@ -55,11 +56,12 @@ var Signature = function Signature(props) {
     _signatureProps$dataU = signatureProps.dataUrlType,
     dataUrlType = _signatureProps$dataU === void 0 ? 'png' : _signatureProps$dataU,
     title = signatureProps.title,
+    resizable = signatureProps.resizable,
     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"]);
+    restProps = __rest(signatureProps, ["className", "style", "prefixCls", "containerWidth", "containerHeight", "getSignatureData", "onStart", "onEnd", "onClear", "undo", "redo", "penColor", "backgroundColor", "dataUrlType", "title", "resizable", "onClose", "disabled", "preview", "canFullScreen"]);
   var signaturePrefixCls = getPrefixCls(prefixCls, 'signature', customPrefixcls);
   var signatureClass = classNames(signaturePrefixCls, className, _defineProperty({}, "".concat(signaturePrefixCls, "-disabled"), disabled));
   var _useState = useState(false),
@@ -78,6 +80,7 @@ var Signature = function Signature(props) {
     _useState8 = _slicedToArray(_useState7, 2),
     isFullScreen = _useState8[0],
     setIsFullScreen = _useState8[1];
+  var isFirstSignatureRef = useRef(true);
   var modalRef = useRef();
   var modalBodyRef = useRef();
   var triggerRef = useRef();
@@ -115,13 +118,41 @@ var Signature = function Signature(props) {
     setIsFullScreen(true);
     type === 'open' ? setIsFullScreen(true) : setIsFullScreen(false);
   };
-  useResizeObserver(modalRef.current, function (rect) {
+  var handleResize = function handleResize(rect) {
+    var _a, _b;
     var width = rect.width,
       height = rect.height;
     var canvas = modalBodyRef.current.getCanvasRef();
-    canvas.width = width - 40;
-    canvas.height = height - 142;
-  });
+    var originalWidth = canvas.width;
+    var originalHeight = canvas.height;
+    var newWidth = width - 40;
+    var newHeight = height - 142;
+    canvas.width = newWidth;
+    canvas.height = newHeight;
+    if (isFirstSignatureRef.current) return;
+    var tempData = (_a = signaturePadRef.current) === null || _a === void 0 ? void 0 : _a.toData();
+    var scaleX = newWidth / originalWidth;
+    var scaleY = newHeight / originalHeight;
+    if (tempData && tempData.length > 0) {
+      var scaledData = _mapInstanceProperty(tempData).call(tempData, function (group) {
+        var _context;
+        return _extends(_extends({}, group), {
+          points: _mapInstanceProperty(_context = group.points).call(_context, function (point) {
+            return _extends(_extends({}, point), {
+              x: point.x * scaleX,
+              y: point.y * scaleY
+            });
+          })
+        });
+      });
+      (_b = signaturePadRef.current) === null || _b === void 0 ? void 0 : _b.fromData(scaledData);
+    }
+  };
+  useResizeObserver(modalRef.current, handleResize);
+  var handleClear = function handleClear() {
+    onClear === null || onClear === void 0 ? void 0 : onClear();
+    isFirstSignatureRef.current = true;
+  };
   useEffect(function () {
     if (modalBodyRef.current) {
       var canvas = modalBodyRef.current.getCanvasRef();
@@ -133,6 +164,7 @@ var Signature = function Signature(props) {
         onStart && onStart();
       });
       signaturePadRef.current.addEventListener('endStroke', function () {
+        isFirstSignatureRef.current = false;
         modalBodyRef.current.saveSignatureToHistory();
         onEnd && onEnd();
       });
@@ -144,14 +176,16 @@ var Signature = function Signature(props) {
     };
   }, []);
   useEffect(function () {
-    var _a, _b;
+    var _a, _b, _c;
     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();
+      (_c = signaturePadRef.current) === null || _c === void 0 ? void 0 : _c.clear();
       modalBodyRef.current.setSignatureHistory([]);
       modalBodyRef.current.setCurrentHistoryIndex(-1);
+      isFirstSignatureRef.current = true;
     }
   }, [modalVisible]);
   useEffect(function () {
@@ -163,7 +197,7 @@ var Signature = function Signature(props) {
     undo: undo,
     redo: redo,
     isEmpty: isEmpty,
-    onClear: onClear,
+    onClear: handleClear,
     setDataUrl: setDataUrl,
     setIsEmpty: setIsEmpty,
     signaturePad: function signaturePad() {
@@ -258,7 +292,7 @@ var Signature = function Signature(props) {
     visible: modalVisible,
     onOk: handleModalOk,
     onCancel: handleModalCancel,
-    resizable: true,
+    resizable: resizable,
     title: title || (signatureLangMsg === null || signatureLangMsg === void 0 ? void 0 : signatureLangMsg.handwrittenSignature),
     titleIcon: canFullScreen && titleIcon,
     body: React.createElement(DrawingBoard, _extends({}, DrawingBoardProps, {

package/es/tree/tree.d.ts

@@ -44,6 +44,7 @@ export interface TreeProps {
     style?: React.CSSProperties;
     className?: string;
     expandOnFilterNode?: boolean;
+    renderExtra?: (node: any) => ReactNode;
 }
 export declare type TreeNodeData = {
     checkable?: boolean;

package/es/tree/tree.js

@@ -83,7 +83,8 @@ var InternalTree = React.forwardRef(function (props, ref) {
     notFoundContent = TreeProps.notFoundContent,
     showLine = TreeProps.showLine,
     expandOnFilterNode = TreeProps.expandOnFilterNode,
-    others = __rest(TreeProps, ["prefixCls", "treeData", "virtual", "showIcon", "switcherIcon", "icon", "checkable", "checkStrictly", "disabled", "draggable", "scrollToKey", "expandedKeys", "checkedKeys", "defaultExpandRoot", "defaultExpandAll", "defaultExpandParent", "defaultExpandedKeys", "defaultCheckedKeys", "defaultSelectedKeys", "height", "onCheck", "onExpand", "onDragStart", "onDragOver", "onDragLeave", "onDragEnter", "onDragEnd", "onDrop", "onSelect", "selectedKeys", "setTreeNodeStyle", "setTreeNodeClassName", "estimatedItemSize", "style", "className", "filterTreeNode", "filterValue", "expandOnClickNode", "onlyExpandOnClickIcon", "loadData", "notFoundContent", "showLine", "expandOnFilterNode"]);
+    renderExtra = TreeProps.renderExtra,
+    others = __rest(TreeProps, ["prefixCls", "treeData", "virtual", "showIcon", "switcherIcon", "icon", "checkable", "checkStrictly", "disabled", "draggable", "scrollToKey", "expandedKeys", "checkedKeys", "defaultExpandRoot", "defaultExpandAll", "defaultExpandParent", "defaultExpandedKeys", "defaultCheckedKeys", "defaultSelectedKeys", "height", "onCheck", "onExpand", "onDragStart", "onDragOver", "onDragLeave", "onDragEnter", "onDragEnd", "onDrop", "onSelect", "selectedKeys", "setTreeNodeStyle", "setTreeNodeClassName", "estimatedItemSize", "style", "className", "filterTreeNode", "filterValue", "expandOnClickNode", "onlyExpandOnClickIcon", "loadData", "notFoundContent", "showLine", "expandOnFilterNode", "renderExtra"]);
   var treePrefixCls = getPrefixCls(prefixCls, 'tree', customPrefixcls);
   var treeNodeClassName = classNames(className, (_classNames = {}, _defineProperty(_classNames, "".concat(treePrefixCls), true), _defineProperty(_classNames, "".concat(treePrefixCls, "-show-line"), showLine), _classNames));
   var treeRootClassName = "".concat(treePrefixCls, "-root");
@@ -433,6 +434,7 @@ var InternalTree = React.forwardRef(function (props, ref) {
     item.isActiveLine = showLine && isSelectedNodeChildrenKey(item.pathParentKeys);
     return React.createElement(TreeNode, _extends({}, item, {
       key: item.key,
+      renderExtra: renderExtra,
       ref: treeNodeRef,
       activeLevel: seletedKeyLevel
     }));

package/es/tree/treeNode.d.ts

@@ -27,6 +27,7 @@ export interface TreeNodeProps {
     isLeaf?: boolean;
     expandOnClickNode?: boolean;
     onlyExpandOnClickIcon?: boolean;
+    renderExtra?: (node: any) => React.ReactNode;
     onCheck?: (key: string, value: boolean, node: React.ReactNode, event: React.MouseEvent<MouseEvent>, pos: string) => void;
     onSelect?: (event: React.MouseEvent<MouseEvent>, node: React.ReactNode, key: string) => void;
     onExpand?: (value: boolean, node: React.ReactNode) => void;

package/es/tree/treeNode.js

@@ -63,7 +63,8 @@ var TreeNode = React.forwardRef(function (props) {
     onDragEnd = TreeNodeProps.onDragEnd,
     onDrop = TreeNodeProps.onDrop,
     onSelect = TreeNodeProps.onSelect,
-    others = __rest(TreeNodeProps, ["nodeKey", "prefixCls", "selectable", "checkable", "className", "icon", "switcherIcon", "disabled", "draggable", "pos", "checked", "level", "getDragNode", "hasChildNode", "expand", "title", "isActiveLine", "activeLevel", "showIcon", "selected", "setDragNode", "style", "indeterminate", "estimatedItemSize", "dragOver", "dropPosition", "expandOnClickNode", "onlyExpandOnClickIcon", "loading", "onExpand", "onCheck", "onDragStart", "onDragOver", "onDragLeave", "onDragEnter", "onDragEnd", "onDrop", "onSelect"]);
+    renderExtra = TreeNodeProps.renderExtra,
+    others = __rest(TreeNodeProps, ["nodeKey", "prefixCls", "selectable", "checkable", "className", "icon", "switcherIcon", "disabled", "draggable", "pos", "checked", "level", "getDragNode", "hasChildNode", "expand", "title", "isActiveLine", "activeLevel", "showIcon", "selected", "setDragNode", "style", "indeterminate", "estimatedItemSize", "dragOver", "dropPosition", "expandOnClickNode", "onlyExpandOnClickIcon", "loading", "onExpand", "onCheck", "onDragStart", "onDragOver", "onDragLeave", "onDragEnter", "onDragEnd", "onDrop", "onSelect", "renderExtra"]);
   var nodeData = React.useMemo(function () {
     return _extends({
       selectable: selectable,
@@ -217,7 +218,7 @@ var TreeNode = React.forwardRef(function (props) {
       className: classNames("".concat(treeNodePrefixCls, "-title"), _defineProperty({}, "".concat(treeNodePrefixCls, "-title-disabled"), disabled))
     }, title)) : React.createElement("span", {
       className: classNames("".concat(treeNodePrefixCls, "-title"), _defineProperty({}, "".concat(treeNodePrefixCls, "-title-disabled"), disabled))
-    }, title), showDragLine && dropPosition === 1 && React.createElement("span", {
+    }, title), renderExtra === null || renderExtra === void 0 ? void 0 : renderExtra(nodeData), showDragLine && dropPosition === 1 && React.createElement("span", {
       className: classNames("".concat(treeNodePrefixCls, "-drag-line-bottom"))
     }))));
   };

package/lib/breadcrumb/breadcrumb.js

@@ -154,8 +154,8 @@ var Breadcrumb = function Breadcrumb(props) {
   };
   (0, _react.useEffect)(function () {
     var isMore = itemsConfig === null || itemsConfig === void 0 ? void 0 : itemsConfig.some(function (item) {
-      var _a, _b;
-      return ((_b = (_a = item === null || item === void 0 ? void 0 : item.title) === null || _a === void 0 ? void 0 : _a.props) === null || _b === void 0 ? void 0 : _b.children.type.displayName) === 'Tooltip';
+      var _a, _b, _c, _d;
+      return ((_d = (_c = (_b = (_a = item === null || item === void 0 ? void 0 : item.title) === null || _a === void 0 ? void 0 : _a.props) === null || _b === void 0 ? void 0 : _b.children) === null || _c === void 0 ? void 0 : _c.type) === null || _d === void 0 ? void 0 : _d.displayName) === 'Tooltip';
     });
     setOpenEllipsis(isMore && itemsConfig.length === MIN_ITEM);
   }, [itemsConfig]);

package/lib/button/group.d.ts

@@ -1,6 +1,6 @@
 import React, { CSSProperties, ReactNode } from 'react';
-import { PopperProps } from '../_utils/usePopper';
 import { ButtonType, ButtonSize } from './button';
+import { PopperProps } from '../popper';
 export declare const ButtonGroupTypes: ["basic", "similar"];
 export declare type ButtonGroupType = typeof ButtonGroupTypes[number];
 export interface OverlayType {

package/lib/button/group.js

@@ -18,9 +18,9 @@ var _classnames = _interopRequireDefault(require("classnames"));
 var _ConfigContext = _interopRequireDefault(require("../config-provider/ConfigContext"));
 var _utils = require("../_utils");
 var _index = require("../index");
-var _usePopper = _interopRequireDefault(require("../_utils/usePopper"));
 var _reactChildren = require("../_utils/react-children");
 var _type = require("../_utils/type");
+var _popper = _interopRequireDefault(require("../popper"));
 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 ButtonGroupTypes = (0, _type.tuple)('basic', 'similar');
@@ -50,7 +50,7 @@ var InternalButtonGroup = function InternalButtonGroup(props, ref) {
     _useState2 = (0, _slicedToArray2.default)(_useState, 2),
     optionShow = _useState2[0],
     setOptionShow = _useState2[1];
-  var refBtnGroup = _react.default.useRef(null) || ref;
+  var refBtnGroup = ref || _react.default.createRef();
   var triggerRef = _react.default.useRef(null);
   var isBsicType = type === 'basic';
   var btnGroupPrefixCls = getPrefixCls(prefixCls, 'btn-group', customPrefixcls);
@@ -133,7 +133,9 @@ var InternalButtonGroup = function InternalButtonGroup(props, ref) {
       return isBsicType ? locatorNode : triggerRef.current;
     }
   });
-  return (0, _usePopper.default)(renderTriggerButton(), renderContent(), popperProps);
+  return _react.default.createElement(_popper.default, (0, _extends2.default)({
+    tip: renderContent()
+  }, popperProps), renderTriggerButton());
 };
 var ButtonGroup = _react.default.forwardRef(InternalButtonGroup);
 ButtonGroup.displayName = 'ButtonGroup';

package/lib/city-picker/city-picker.js

@@ -483,6 +483,7 @@ var InternalSelect = function InternalSelect(props, ref) {
     defaultVisible: optionShow,
     visible: optionShow,
     onVisibleChange: handleVisibleChange,
+    clickToClose: !searchValue,
     onTransitionEnd: function onTransitionEnd() {
       if (optionShow === false) {
         handleClear();

package/lib/city-picker/style/index.css

@@ -270,6 +270,14 @@
   -webkit-box-shadow: 0 4px 10px 0 rgba(0, 0, 0, 0.2);
           box-shadow: 0 4px 10px 0 rgba(0, 0, 0, 0.2);
 }
+.kd-city-picker-dropdown.kd-popper-bottom-start-in {
+  -webkit-animation-name: kdSlideUpIn;
+          animation-name: kdSlideUpIn;
+}
+.kd-city-picker-dropdown.kd-popper-bottom-start-out {
+  -webkit-animation-name: kdSlideUpOut;
+          animation-name: kdSlideUpOut;
+}
 .kd-city-picker-dropdown .kd-tabs-tab-list {
   width: 100%;
 }

package/lib/city-picker/style/index.less

@@ -4,6 +4,7 @@
 
 @city-picker-prefix-cls: ~'@{kd-prefix}-city-picker';
 @tabs-prefix-cls: ~'@{kd-prefix}-tabs';
+@popper-prefix-cls: ~'@{kd-prefix}-popper';
 
 .@{city-picker-prefix-cls} {
   position: relative;
@@ -156,6 +157,15 @@
     outline: none;
     box-shadow: 0 4px 10px 0 rgba(0, 0, 0, 0.2);
 
+    &.@{popper-prefix-cls}-bottom-start {
+      &-in {
+        animation-name: kdSlideUpIn;
+      }
+
+      &-out {
+        animation-name: kdSlideUpOut;
+      }
+    }
     // 调整tabs样式
     .@{tabs-prefix-cls}-tab-list {
       width: 100%;