@kdcloudjs/kdesign 1.7.1 → 1.7.2

package/es/color-picker/constant/colorTypes.js

@@ -3,11 +3,11 @@ export var colorTypes = [{
   value: '#b2b2b2'
 }, {
   type: 'HSB',
-  value: 'hsb(0,0%,70%)'
+  value: 'hsb(0, 0%, 70%)'
 }, {
   type: 'RGB',
-  value: 'rgb(178,178,178)'
+  value: 'rgb(178, 178, 178)'
 }, {
   type: 'HSL',
-  value: 'hsl(0,0%,70%)'
+  value: 'hsl(0, 0%, 70%)'
 }];

package/es/color-picker/style/index.css

@@ -254,8 +254,14 @@
           box-shadow: 0 4px 10px 0 rgba(0, 0, 0, 0.2);
   border-radius: 2px;
 }
-.kd-color-picker-pop .kd-color-picker-panel-input .kd-select .kd-select-dropdown {
-  overflow: hidden;
+.kd-color-picker-pop .kd-color-picker-panel-input .kd-select .kd-select-dropdown .kd-select-item-option {
+  display: -webkit-box;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-box-pack: center;
+      -ms-flex-pack: center;
+          justify-content: center;
+  min-width: unset;
 }
 .kd-color-picker-pop .kd-color-picker-panel-input .kd-select-bordered {
   border-radius: 2px;

package/es/color-picker/style/index.less

@@ -179,7 +179,11 @@
                 }
 
                 .@{kd-prefix}-select-dropdown {
-                    overflow: hidden;
+                    .@{kd-prefix}-select-item-option {
+                        display: flex;
+                        justify-content: center;
+                        min-width: unset;
+                    }
                 }
             }
 

package/es/dropdown/dropdown.js

@@ -16,7 +16,7 @@ var findItem = function findItem(element) {
   }
 };
 var Dropdown = /*#__PURE__*/React.forwardRef(function (props, ref) {
-  var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q;
+  var _a, _b, _c;
   var _React$useContext = React.useContext(ConfigContext),
     getPrefixCls = _React$useContext.getPrefixCls,
     pkgPrefixCls = _React$useContext.prefixCls,
@@ -74,12 +74,7 @@ var Dropdown = /*#__PURE__*/React.forwardRef(function (props, ref) {
     onClick: handleItemClick,
     selectable: menuSelectable
   });
-  var isItem = React.Children.count((_d = menu.props) === null || _d === void 0 ? void 0 : _d.children) === 1 && ((_g = (_f = (_e = menu.props) === null || _e === void 0 ? void 0 : _e.children) === null || _f === void 0 ? void 0 : _f.type) === null || _g === void 0 ? void 0 : _g.displayName) === 'DropdownMenuItem' || Array.isArray((_k = (_j = (_h = menu.props) === null || _h === void 0 ? void 0 : _h.children) === null || _j === void 0 ? void 0 : _j.props) === null || _k === void 0 ? void 0 : _k.children) || ((_p = (_o = (_m = (_l = menu.props) === null || _l === void 0 ? void 0 : _l.children) === null || _m === void 0 ? void 0 : _m.props) === null || _o === void 0 ? void 0 : _o.children.type) === null || _p === void 0 ? void 0 : _p.displayName) === 'DropdownMenuItem';
-  var menuElement = isMenu ? Array.isArray((_q = menu.props) === null || _q === void 0 ? void 0 : _q.children) || isItem ? cloneObj : /*#__PURE__*/React.createElement("ul", {
-    className: "".concat(prefixCls, "-menu"),
-    onClick: handleItemClick,
-    role: "menu"
-  }, menu.props.children) : /*#__PURE__*/React.createElement("ul", {
+  var menuElement = isMenu ? cloneObj : /*#__PURE__*/React.createElement("ul", {
     className: "".concat(prefixCls, "-menu"),
     onClick: handleItemClick,
     role: "menu"

package/es/dropdown/menu.js

@@ -30,6 +30,9 @@ var Menu = /*#__PURE__*/React.forwardRef(function (props, ref) {
   // className前缀
   var prefixCls = getPrefixCls(pkgPrefixCls, 'dropdown-menu', customPrefixcls);
   var cloneItem = function cloneItem(item, index) {
+    if (! /*#__PURE__*/React.isValidElement(item)) {
+      return item;
+    }
     var key = item.key || index;
     var selected = selectable && String(selectedKey) === String(key);
     return /*#__PURE__*/React.cloneElement(item, {

package/es/modal/modal.d.ts

@@ -1,5 +1,6 @@
 import React, { ReactNode, CSSProperties } from 'react';
 import { IButtonProps } from '../button/button';
+import type { DraggableBounds, DraggableEventHandler } from 'react-draggable';
 declare type CSSSelector = string;
 export declare const ConfirmModalTypes: string[];
 export declare const ModalTypes: ["confirm", "warning", "error", "normal"];
@@ -8,6 +9,7 @@ export interface IModalProps {
     body?: ReactNode;
     bodyClassName?: string;
     bodyStyle?: CSSProperties;
+    style?: CSSProperties;
     cancelButtonProps?: IButtonProps;
     cancelText?: ReactNode;
     className?: string;
@@ -40,6 +42,10 @@ export interface IModalProps {
     visible?: boolean;
     width?: number;
     showline?: boolean;
+    bounds?: DraggableBounds | string | false;
+    onDragStart?: DraggableEventHandler;
+    onDrag?: DraggableEventHandler;
+    onDragStop?: DraggableEventHandler;
 }
-declare const Modal: React.FC<IModalProps>;
+declare const Modal: React.ForwardRefExoticComponent<IModalProps & React.RefAttributes<unknown>>;
 export default Modal;

package/es/modal/modal.js

@@ -1,8 +1,17 @@
 import _defineProperty from "@babel/runtime-corejs3/helpers/defineProperty";
 import _extends from "@babel/runtime-corejs3/helpers/extends";
 import _slicedToArray from "@babel/runtime-corejs3/helpers/slicedToArray";
+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 _concatInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/concat";
+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];
+  if (s != null && typeof _Object$getOwnPropertySymbols === "function") for (var i = 0, p = _Object$getOwnPropertySymbols(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;
+};
 import React, { useContext, useEffect, useState, useRef, useCallback } from 'react';
 import { Icon } from '../index';
 import Button from '../button/button';
@@ -17,7 +26,7 @@ import { getLangMsg } from '../locale/locale';
 import { useHideDocumentScrollBar } from '../_utils/hooks';
 export var ConfirmModalTypes = ['confirm', 'normal'];
 export var ModalTypes = tuple('confirm', 'warning', 'error', 'normal');
-var Modal = function Modal(props) {
+var InternalModal = function InternalModal(props, ref) {
   var _classNames3, _classNames4, _context2, _context3;
   var _useContext = useContext(ConfigContext),
     getPrefixCls = _useContext.getPrefixCls,
@@ -55,14 +64,20 @@ var Modal = function Modal(props) {
     type = modalProps.type,
     visible = modalProps.visible,
     width = modalProps.width,
-    showline = modalProps.showline;
+    showline = modalProps.showline,
+    onDragStart = modalProps.onDragStart,
+    onDrag = modalProps.onDrag,
+    onDragStop = modalProps.onDragStop,
+    bounds = modalProps.bounds,
+    others = __rest(modalProps, ["body", "bodyClassName", "bodyStyle", "cancelButtonProps", "cancelText", "className", "closable", "closeIcon", "destroyOnClose", "draggable", "focusTriggerAfterClose", "footer", "footerClassName", "footerStyle", "footerBtnOrder", "getContainer", "height", "keyboard", "mask", "maskClosable", "maskStyle", "okButtonProps", "okText", "onCancel", "onOk", "prefixCls", "title", "titleIcon", "type", "visible", "width", "showline", "onDragStart", "onDrag", "onDragStop", "bounds"]);
   var isForceController = visible !== undefined;
   var _useState = useState(isForceController ? visible : true),
     _useState2 = _slicedToArray(_useState, 2),
     innerVisible = _useState2[0],
     setInnerVisible = _useState2[1]; // 需要根据visible来判断，不能一开始为true再去设置false
   var previousActiveElement = useRef(null);
-  var containerRef = useRef(null);
+  var innerRef = useRef(null);
+  var containerRef = ref || innerRef;
   var modalPrefixCls = getPrefixCls(prefixCls, 'modal', customPrefixcls);
   devWarning(ModalTypes.indexOf(type) === -1, 'modal', "cannot found modal type '".concat(type, "'"));
   var modalContainer = typeof getContainer === 'function' ? getContainer() : getContainer;
@@ -207,6 +222,10 @@ var Modal = function Modal(props) {
   }, footer || generatorFooterByType(type)));
   // 没有容器应该是不用居中的
   // 但仍可拖拽
+  var handleDragStart = function handleDragStart(e, data) {
+    e === null || e === void 0 ? void 0 : e.stopPropagation();
+    onDragStart === null || onDragStart === void 0 ? void 0 : onDragStart(e, data);
+  };
   var defaultPosition = modalContainer ? {
     x: -(width / 2),
     y: -(height / 2)
@@ -214,9 +233,9 @@ var Modal = function Modal(props) {
     x: 0,
     y: 0
   };
-  var comp = /*#__PURE__*/React.createElement("div", {
+  var comp = /*#__PURE__*/React.createElement("div", _extends({
     className: modalClasses
-  }, mask && /*#__PURE__*/React.createElement("div", {
+  }, others), mask && /*#__PURE__*/React.createElement("div", {
     onClick: handleMaskClick,
     className: "".concat(modalPrefixCls, "-mask"),
     style: maskStyle
@@ -224,11 +243,16 @@ var Modal = function Modal(props) {
     defaultPosition: defaultPosition,
     handle: ".".concat(headerClass),
     disabled: !draggable,
+    onStart: handleDragStart,
+    onDrag: onDrag,
+    onStop: onDragStop,
+    bounds: bounds,
     cancel: _concatInstanceProperty(_context3 = ".".concat(modalPrefixCls, "-title-container, .")).call(_context3, modalPrefixCls, "-close-icon")
   }, container));
   var renderComp = ((isForceController ? visible : innerVisible) || !destroyOnClose) && comp;
   if (modalContainer && renderComp) return /*#__PURE__*/ReactDOM.createPortal(renderComp, modalContainer);
   return renderComp || null;
 };
+var Modal = /*#__PURE__*/React.forwardRef(InternalModal);
 Modal.displayName = 'Modal';
 export default Modal;

package/lib/color-picker/constant/colorTypes.js

@@ -9,12 +9,12 @@ var colorTypes = [{
   value: '#b2b2b2'
 }, {
   type: 'HSB',
-  value: 'hsb(0,0%,70%)'
+  value: 'hsb(0, 0%, 70%)'
 }, {
   type: 'RGB',
-  value: 'rgb(178,178,178)'
+  value: 'rgb(178, 178, 178)'
 }, {
   type: 'HSL',
-  value: 'hsl(0,0%,70%)'
+  value: 'hsl(0, 0%, 70%)'
 }];
 exports.colorTypes = colorTypes;

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

@@ -254,8 +254,14 @@
           box-shadow: 0 4px 10px 0 rgba(0, 0, 0, 0.2);
   border-radius: 2px;
 }
-.kd-color-picker-pop .kd-color-picker-panel-input .kd-select .kd-select-dropdown {
-  overflow: hidden;
+.kd-color-picker-pop .kd-color-picker-panel-input .kd-select .kd-select-dropdown .kd-select-item-option {
+  display: -webkit-box;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-box-pack: center;
+      -ms-flex-pack: center;
+          justify-content: center;
+  min-width: unset;
 }
 .kd-color-picker-pop .kd-color-picker-panel-input .kd-select-bordered {
   border-radius: 2px;

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

@@ -179,7 +179,11 @@
                 }
 
                 .@{kd-prefix}-select-dropdown {
-                    overflow: hidden;
+                    .@{kd-prefix}-select-item-option {
+                        display: flex;
+                        justify-content: center;
+                        min-width: unset;
+                    }
                 }
             }
 

package/lib/dropdown/dropdown.js

@@ -28,7 +28,7 @@ var findItem = function findItem(element) {
   }
 };
 var Dropdown = /*#__PURE__*/React.forwardRef(function (props, ref) {
-  var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q;
+  var _a, _b, _c;
   var _React$useContext = React.useContext(_ConfigContext.default),
     getPrefixCls = _React$useContext.getPrefixCls,
     pkgPrefixCls = _React$useContext.prefixCls,
@@ -86,12 +86,7 @@ var Dropdown = /*#__PURE__*/React.forwardRef(function (props, ref) {
     onClick: handleItemClick,
     selectable: menuSelectable
   });
-  var isItem = React.Children.count((_d = menu.props) === null || _d === void 0 ? void 0 : _d.children) === 1 && ((_g = (_f = (_e = menu.props) === null || _e === void 0 ? void 0 : _e.children) === null || _f === void 0 ? void 0 : _f.type) === null || _g === void 0 ? void 0 : _g.displayName) === 'DropdownMenuItem' || Array.isArray((_k = (_j = (_h = menu.props) === null || _h === void 0 ? void 0 : _h.children) === null || _j === void 0 ? void 0 : _j.props) === null || _k === void 0 ? void 0 : _k.children) || ((_p = (_o = (_m = (_l = menu.props) === null || _l === void 0 ? void 0 : _l.children) === null || _m === void 0 ? void 0 : _m.props) === null || _o === void 0 ? void 0 : _o.children.type) === null || _p === void 0 ? void 0 : _p.displayName) === 'DropdownMenuItem';
-  var menuElement = isMenu ? Array.isArray((_q = menu.props) === null || _q === void 0 ? void 0 : _q.children) || isItem ? cloneObj : /*#__PURE__*/React.createElement("ul", {
-    className: "".concat(prefixCls, "-menu"),
-    onClick: handleItemClick,
-    role: "menu"
-  }, menu.props.children) : /*#__PURE__*/React.createElement("ul", {
+  var menuElement = isMenu ? cloneObj : /*#__PURE__*/React.createElement("ul", {
     className: "".concat(prefixCls, "-menu"),
     onClick: handleItemClick,
     role: "menu"

package/lib/dropdown/menu.js

@@ -42,6 +42,9 @@ var Menu = /*#__PURE__*/React.forwardRef(function (props, ref) {
   // className前缀
   var prefixCls = getPrefixCls(pkgPrefixCls, 'dropdown-menu', customPrefixcls);
   var cloneItem = function cloneItem(item, index) {
+    if (! /*#__PURE__*/React.isValidElement(item)) {
+      return item;
+    }
     var key = item.key || index;
     var selected = selectable && String(selectedKey) === String(key);
     return /*#__PURE__*/React.cloneElement(item, {

package/lib/modal/modal.d.ts

@@ -1,5 +1,6 @@
 import React, { ReactNode, CSSProperties } from 'react';
 import { IButtonProps } from '../button/button';
+import type { DraggableBounds, DraggableEventHandler } from 'react-draggable';
 declare type CSSSelector = string;
 export declare const ConfirmModalTypes: string[];
 export declare const ModalTypes: ["confirm", "warning", "error", "normal"];
@@ -8,6 +9,7 @@ export interface IModalProps {
     body?: ReactNode;
     bodyClassName?: string;
     bodyStyle?: CSSProperties;
+    style?: CSSProperties;
     cancelButtonProps?: IButtonProps;
     cancelText?: ReactNode;
     className?: string;
@@ -40,6 +42,10 @@ export interface IModalProps {
     visible?: boolean;
     width?: number;
     showline?: boolean;
+    bounds?: DraggableBounds | string | false;
+    onDragStart?: DraggableEventHandler;
+    onDrag?: DraggableEventHandler;
+    onDragStop?: DraggableEventHandler;
 }
-declare const Modal: React.FC<IModalProps>;
+declare const Modal: React.ForwardRefExoticComponent<IModalProps & React.RefAttributes<unknown>>;
 export default Modal;

package/lib/modal/modal.js

@@ -8,11 +8,12 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = exports.ModalTypes = exports.ConfirmModalTypes = void 0;
-var _includes = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/instance/includes"));
-var _concat = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/instance/concat"));
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/defineProperty"));
 var _extends2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/extends"));
 var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/slicedToArray"));
+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 _concat = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/instance/concat"));
 var _react = _interopRequireWildcard(require("react"));
 var _index = require("../index");
 var _button = _interopRequireDefault(require("../button/button"));
@@ -27,11 +28,19 @@ var _locale = require("../locale/locale");
 var _hooks = require("../_utils/hooks");
 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 ConfirmModalTypes = ['confirm', 'normal'];
 exports.ConfirmModalTypes = ConfirmModalTypes;
 var ModalTypes = (0, _type.tuple)('confirm', 'warning', 'error', 'normal');
 exports.ModalTypes = ModalTypes;
-var Modal = function Modal(props) {
+var InternalModal = function InternalModal(props, ref) {
   var _classNames3, _classNames4, _context2, _context3;
   var _useContext = (0, _react.useContext)(_ConfigContext.default),
     getPrefixCls = _useContext.getPrefixCls,
@@ -69,14 +78,20 @@ var Modal = function Modal(props) {
     type = modalProps.type,
     visible = modalProps.visible,
     width = modalProps.width,
-    showline = modalProps.showline;
+    showline = modalProps.showline,
+    onDragStart = modalProps.onDragStart,
+    onDrag = modalProps.onDrag,
+    onDragStop = modalProps.onDragStop,
+    bounds = modalProps.bounds,
+    others = __rest(modalProps, ["body", "bodyClassName", "bodyStyle", "cancelButtonProps", "cancelText", "className", "closable", "closeIcon", "destroyOnClose", "draggable", "focusTriggerAfterClose", "footer", "footerClassName", "footerStyle", "footerBtnOrder", "getContainer", "height", "keyboard", "mask", "maskClosable", "maskStyle", "okButtonProps", "okText", "onCancel", "onOk", "prefixCls", "title", "titleIcon", "type", "visible", "width", "showline", "onDragStart", "onDrag", "onDragStop", "bounds"]);
   var isForceController = visible !== undefined;
   var _useState = (0, _react.useState)(isForceController ? visible : true),
     _useState2 = (0, _slicedToArray2.default)(_useState, 2),
     innerVisible = _useState2[0],
     setInnerVisible = _useState2[1]; // 需要根据visible来判断，不能一开始为true再去设置false
   var previousActiveElement = (0, _react.useRef)(null);
-  var containerRef = (0, _react.useRef)(null);
+  var innerRef = (0, _react.useRef)(null);
+  var containerRef = ref || innerRef;
   var modalPrefixCls = getPrefixCls(prefixCls, 'modal', customPrefixcls);
   (0, _devwarning.default)(ModalTypes.indexOf(type) === -1, 'modal', "cannot found modal type '".concat(type, "'"));
   var modalContainer = typeof getContainer === 'function' ? getContainer() : getContainer;
@@ -221,6 +236,10 @@ var Modal = function Modal(props) {
   }, footer || generatorFooterByType(type)));
   // 没有容器应该是不用居中的
   // 但仍可拖拽
+  var handleDragStart = function handleDragStart(e, data) {
+    e === null || e === void 0 ? void 0 : e.stopPropagation();
+    onDragStart === null || onDragStart === void 0 ? void 0 : onDragStart(e, data);
+  };
   var defaultPosition = modalContainer ? {
     x: -(width / 2),
     y: -(height / 2)
@@ -228,9 +247,9 @@ var Modal = function Modal(props) {
     x: 0,
     y: 0
   };
-  var comp = /*#__PURE__*/_react.default.createElement("div", {
+  var comp = /*#__PURE__*/_react.default.createElement("div", (0, _extends2.default)({
     className: modalClasses
-  }, mask && /*#__PURE__*/_react.default.createElement("div", {
+  }, others), mask && /*#__PURE__*/_react.default.createElement("div", {
     onClick: handleMaskClick,
     className: "".concat(modalPrefixCls, "-mask"),
     style: maskStyle
@@ -238,12 +257,17 @@ var Modal = function Modal(props) {
     defaultPosition: defaultPosition,
     handle: ".".concat(headerClass),
     disabled: !draggable,
+    onStart: handleDragStart,
+    onDrag: onDrag,
+    onStop: onDragStop,
+    bounds: bounds,
     cancel: (0, _concat.default)(_context3 = ".".concat(modalPrefixCls, "-title-container, .")).call(_context3, modalPrefixCls, "-close-icon")
   }, container));
   var renderComp = ((isForceController ? visible : innerVisible) || !destroyOnClose) && comp;
   if (modalContainer && renderComp) return /*#__PURE__*/_reactDom.default.createPortal(renderComp, modalContainer);
   return renderComp || null;
 };
+var Modal = /*#__PURE__*/_react.default.forwardRef(InternalModal);
 Modal.displayName = 'Modal';
 var _default = Modal;
 exports.default = _default;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@kdcloudjs/kdesign",
-  "version": "1.7.1",
+  "version": "1.7.2",
   "description": "KDesign 金蝶前端react 组件库",
   "title": "kdesign",
   "keywords": [