@kdcloudjs/kdesign 1.7.17 → 1.7.19

package/es/select/select.js

@@ -53,7 +53,8 @@ var InternalSelect = function InternalSelect(props, ref) {
     children = selectProps.children,
     options = selectProps.options,
     placeholder = selectProps.placeholder,
-    dropdownStyle = selectProps.dropdownStyle,
+    _selectProps$dropdown = selectProps.dropdownStyle,
+    dropdownStyle = _selectProps$dropdown === void 0 ? {} : _selectProps$dropdown,
     style = selectProps.style,
     clearIcon = selectProps.clearIcon,
     filterOption = selectProps.filterOption,
@@ -82,6 +83,7 @@ var InternalSelect = function InternalSelect(props, ref) {
     selectMulOpts: []
   }); // 多选ref已选中项
   var measureRef = useRef(null);
+  var clearRef = useRef(null);
   var _useState = useState([]),
     _useState2 = _slicedToArray(_useState, 2),
     mulOptions = _useState2[0],
@@ -122,7 +124,7 @@ var InternalSelect = function InternalSelect(props, ref) {
   // 多选底部样式
   var multipleFooterCls = classNames(_defineProperty({}, "".concat(selectPrefixCls, "-multiple-footer"), true));
   // 多选，单选公共样式
-  var commCls = classNames((_classNames6 = {}, _defineProperty(_classNames6, "".concat(selectPrefixCls, "-bordered"), borderType === 'bordered'), _defineProperty(_classNames6, "".concat(selectPrefixCls, "-underline"), borderType === 'underline'), _defineProperty(_classNames6, "".concat(selectPrefixCls, "-borderless"), borderType === 'none'), _defineProperty(_classNames6, _concatInstanceProperty(_context = "".concat(selectPrefixCls, "-size-")).call(_context, size), size), _defineProperty(_classNames6, "".concat(selectPrefixCls, "-wrapper"), true), _defineProperty(_classNames6, "".concat(selectPrefixCls, "-show-search"), isShowSearch), _classNames6));
+  var commCls = classNames((_classNames6 = {}, _defineProperty(_classNames6, "".concat(selectPrefixCls, "-bordered"), borderType === 'bordered'), _defineProperty(_classNames6, "".concat(selectPrefixCls, "-underline"), borderType === 'underline'), _defineProperty(_classNames6, "".concat(selectPrefixCls, "-borderless"), borderType === 'none'), _defineProperty(_classNames6, _concatInstanceProperty(_context = "".concat(selectPrefixCls, "-size-")).call(_context, size), size), _defineProperty(_classNames6, "".concat(selectPrefixCls, "-wrapper"), true), _defineProperty(_classNames6, "".concat(selectPrefixCls, "-show-search"), isShowSearch && focusd), _classNames6));
   useEffect(function () {
     if (typeof props.visible !== 'undefined') {
       setOptionShow(props.visible);
@@ -268,7 +270,7 @@ var InternalSelect = function InternalSelect(props, ref) {
   }, [optionLabelProp, selectProps]);
   // 点击下拉列表中某项回调
   var handleOption = function handleOption(key, label, isSelected) {
-    var _a;
+    var _a, _b;
     var onSelect = selectProps.onSelect,
       onDeselect = selectProps.onDeselect,
       labelInValue = selectProps.labelInValue,
@@ -283,6 +285,8 @@ var InternalSelect = function InternalSelect(props, ref) {
     })) || {};
     if (isMultiple) {
       (_a = searchRef.current) === null || _a === void 0 ? void 0 : _a.focus();
+    } else {
+      (_b = searchRef.current) === null || _b === void 0 ? void 0 : _b.blur();
     }
     var optionsObj = obj.props ? obj.props : obj || {};
     if (value !== undefined) {
@@ -439,17 +443,17 @@ var InternalSelect = function InternalSelect(props, ref) {
   var renderSuffix = function renderSuffix() {
     var _classNames7;
     var suffixIcon = selectProps.suffixIcon;
-    var selectedVal = multipleRef.current.selectedVal;
     // 选择器下拉icon样式
     var arrowIconCls = classNames((_classNames7 = {}, _defineProperty(_classNames7, "".concat(selectPrefixCls, "-icon-arrow"), true), _defineProperty(_classNames7, "".concat(selectPrefixCls, "-icon-arrow-up"), optionShow), _defineProperty(_classNames7, "".concat(selectPrefixCls, "-icon-arrow-down"), !optionShow), _defineProperty(_classNames7, "".concat(selectPrefixCls, "-icon-arrow-focus"), optionShow), _classNames7));
-    var iconShow = allowClear && !disabled && ((isMultiple ? mulOptions.length > 0 : (selectedVal !== null && selectedVal !== void 0 ? selectedVal : '') !== '') || searchValue);
+    var iconShow = allowClear && !disabled && ((isMultiple ? mulOptions.length > 0 : (singleVal !== null && singleVal !== void 0 ? singleVal : '') !== '') || searchValue);
     var clearIconCls = classNames(_defineProperty({}, "".concat(selectPrefixCls, "-icon-clear"), true));
     return /*#__PURE__*/React.createElement(React.Fragment, null, iconShow && /*#__PURE__*/React.createElement("span", {
       onClick: handleReset,
       onMouseDown: function onMouseDown(e) {
         return e.preventDefault();
       },
-      className: clearIconCls
+      className: clearIconCls,
+      ref: clearRef
     }, clearIcon || /*#__PURE__*/React.createElement(Icon, {
       type: "close-solid"
     })), showArrow && /*#__PURE__*/React.createElement("span", {
@@ -545,9 +549,6 @@ var InternalSelect = function InternalSelect(props, ref) {
       maxHeight: listHeight || '300px'
     };
     // 下拉框style属性
-    var dropDownStyle = _extends({
-      width: style === null || style === void 0 ? void 0 : style.width
-    }, dropdownStyle);
     var checkboxStyle = {
       height: '30px',
       background: 'none'
@@ -556,7 +557,7 @@ var InternalSelect = function InternalSelect(props, ref) {
     var checked = mulOptions.length === filledOptions.length;
     return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("div", {
       className: dropDownCls,
-      style: dropDownStyle,
+      style: dropdownStyle,
       ref: dropDownRef
     }, !dropdownRender && childrenToRender.length > 0 && dropRender(eleOptionList, heightStyle), renderNotContent(), /*#__PURE__*/React.createElement("div", null, dropdownRender && dropdownRender(dropRender(childrenToRender, heightStyle))), isMultiple && realChildren.length > 0 && /*#__PURE__*/React.createElement("div", {
       className: multipleFooterCls
@@ -720,7 +721,18 @@ var InternalSelect = function InternalSelect(props, ref) {
       onDropdownVisibleChange && onDropdownVisibleChange(true);
     }
   }, [optionShow]);
-  var _useState13 = useState(getActiveIndex(0)),
+  useEffect(function () {
+    var _a;
+    var fn = function fn(e) {
+      e.stopPropagation();
+    };
+    (_a = clearRef.current) === null || _a === void 0 ? void 0 : _a.addEventListener('mouseup', fn);
+    return function () {
+      var _a;
+      (_a = clearRef.current) === null || _a === void 0 ? void 0 : _a.removeEventListener('mouseup', fn);
+    };
+  }, [singleVal, mulOptions]);
+  var _useState13 = useState(isShowSearch ? getActiveIndex(0) : -1),
     _useState14 = _slicedToArray(_useState13, 2),
     activeIndex = _useState14[0],
     setActiveIndex = _useState14[1];
@@ -814,13 +826,19 @@ var InternalSelect = function InternalSelect(props, ref) {
     if (selectRef === null || selectRef === void 0 ? void 0 : selectRef.current) {
       var _ref2 = (_a = selectRef.current) === null || _a === void 0 ? void 0 : _a.getBoundingClientRect(),
         width = _ref2.width;
-      return _extends({
-        width: (dropdownStyle === null || dropdownStyle === void 0 ? void 0 : dropdownStyle.width) || (width > 75 ? width : 75),
+      return _extends(_extends(_extends({
+        minWidth: width,
+        maxWidth: 600
+      }, dropdownStyle), {
+        width: (dropdownStyle === null || dropdownStyle === void 0 ? void 0 : dropdownStyle.width) || 'auto',
         zIndex: 1050
-      }, popperStyle);
+      }), popperStyle);
     }
   };
   var handleVisibleChange = function handleVisibleChange(visible) {
+    if (!visible) {
+      setActiveIndex(isShowSearch ? getActiveIndex(0) : -1);
+    }
     if (visible !== optionShow) {
       props.visible === undefined && setOptionShow(visible);
       onVisibleChange && onVisibleChange(visible);

package/es/select/style/index.css

@@ -249,7 +249,7 @@
 .kd-select-visible .kd-select-icon-active {
   color: #3761ca;
 }
-.kd-select-visible .kd-select-selection-item {
+.kd-select-visible div.kd-select-show-search .kd-select-selection-item {
   color: var(--kd-c-select-placeholder-color-text, #b2b2b2);
 }
 .kd-select-icon-arrow {
@@ -277,9 +277,6 @@
   transition: transform calc(0.3s - 0.1s) cubic-bezier(0.4, 0, 0.6, 1);
   transition: transform calc(0.3s - 0.1s) cubic-bezier(0.4, 0, 0.6, 1), -webkit-transform calc(0.3s - 0.1s) cubic-bezier(0.4, 0, 0.6, 1);
 }
-.kd-select-icon-arrow-focus {
-  color: var(--kd-c-select-color-border-foucs, var(--kd-g-color-theme, #5582f3));
-}
 .kd-select-icon-clear {
   opacity: 0;
   z-index: 1;
@@ -362,7 +359,7 @@
   z-index: var(--kd-c-select-z-index, var(--kd-g-z-index-popper, 1050));
   -webkit-box-sizing: border-box;
           box-sizing: border-box;
-  padding: 4px 0;
+  padding: 8px 0;
   margin: 0;
   overflow: auto;
   font-size: var(--kd-c-select-dropdown-font-size, 12px);
@@ -415,9 +412,6 @@
 .kd-select-item-option-content .kd-checkbox .kd-checkbox-children {
   display: inline-block;
 }
-.kd-select-item-option:hover:not(.kd-select-item-option-selected):not(.kd-select-item-option-disabled) {
-  background-color: var(--kd-c-select-color-background, #f5f5f5);
-}
 .kd-select-item-option-active:not(.kd-select-item-option-disabled) {
   background-color: var(--kd-c-select-color-background, #f5f5f5);
 }

package/es/select/style/index.less

@@ -21,7 +21,8 @@
     .@{select-prefix-cls}-icon-active {
       color: #3761ca;
     }
-    .@{select-prefix-cls}-selection-item {
+
+    & div.@{select-prefix-cls}-show-search .@{select-prefix-cls}-selection-item {
       color: @select-placeholder-color;
     }
   }
@@ -40,10 +41,6 @@
         transform: rotate(0deg);
         transition: transform calc(@transition-duration - 0.1s) @ease;
       }
-
-      &-focus {
-        color: @select-g-color-border-foucs;
-      }
     }
 
     &-clear {
@@ -135,7 +132,7 @@
     left: 0;
     z-index: @select-z-index;
     box-sizing: border-box;
-    padding: 4px 0; // update
+    padding: 8px 0; // update
     margin: 0;
     overflow: auto;
     font-size: @select-list-font-size; // update
@@ -184,10 +181,6 @@
         }
       }
 
-      &:hover:not(&-selected):not(&-disabled) {
-        background-color: @select-item-active-bg;
-      }
-
       &-active:not(&-disabled) {
         background-color: @select-item-active-bg;
       }

package/es/upload/upload.js

@@ -37,7 +37,7 @@ var __awaiter = this && this.__awaiter || function (thisArg, _arguments, P, gene
     step((generator = generator.apply(thisArg, _arguments || [])).next());
   });
 };
-import React, { Children } from 'react';
+import React, { Children, forwardRef, useContext, useEffect, useImperativeHandle, useRef, useState } from 'react';
 import classNames from 'classnames';
 import ConfigContext from '../config-provider/ConfigContext';
 import { getCompProps } from '../_utils';
@@ -73,12 +73,11 @@ function abort(file) {
 }
 var InternalUpload = function InternalUpload(props, ref) {
   var _context5, _classNames, _context6, _context7;
-  var _React$useContext = React.useContext(ConfigContext),
-    getPrefixCls = _React$useContext.getPrefixCls,
-    pkgPrefixCls = _React$useContext.prefixCls,
-    userDefaultProps = _React$useContext.compDefaultProps;
-  var innerRef = React.useRef();
-  var mergedRef = ref || innerRef;
+  var _useContext = useContext(ConfigContext),
+    getPrefixCls = _useContext.getPrefixCls,
+    pkgPrefixCls = _useContext.prefixCls,
+    userDefaultProps = _useContext.compDefaultProps;
+  var inputRef = useRef(null);
   var allProps = getCompProps('Upload', userDefaultProps, props); // 属性需要合并一遍用户定义的默认属性
   var type = allProps.type,
     style = allProps.style,
@@ -94,15 +93,15 @@ var InternalUpload = function InternalUpload(props, ref) {
     showUploadList = allProps.showUploadList,
     customPrefixcls = allProps.prefixCls,
     onPreview = allProps.onPreview;
-  var _React$useState = React.useState(props.fileList || props.defaultFileList || []),
-    _React$useState2 = _slicedToArray(_React$useState, 2),
-    fileList = _React$useState2[0],
-    setFileList = _React$useState2[1];
+  var _useState = useState(props.fileList || props.defaultFileList || []),
+    _useState2 = _slicedToArray(_useState, 2),
+    fileList = _useState2[0],
+    setFileList = _useState2[1];
   var hasChildren = children && Children.toArray(children).length > 0;
-  React.useEffect(function () {
+  useEffect(function () {
     props.fileList && setFileList(props.fileList);
   }, [props.fileList]);
-  React.useEffect(function () {
+  useEffect(function () {
     return abort;
   }, []);
   var onClick = function onClick(e) {
@@ -122,20 +121,22 @@ var InternalUpload = function InternalUpload(props, ref) {
     });
   };
   var uploadFiles = function uploadFiles(files) {
-    var _context2;
-    files.forEach(function (file) {
-      file.originFileObj = new File([file], file.name, {
-        type: file.type
+    if (Array.isArray(files) && files.length) {
+      var _context2;
+      files.forEach(function (file) {
+        file.originFileObj = new File([file], file.name, {
+          type: file.type
+        });
+        file.uid = getUid();
+        file.status = 'notStart';
+        file.fileName = allProps.name || file.name;
       });
-      file.uid = getUid();
-      file.status = 'notStart';
-      file.fileName = allProps.name || file.name;
-    });
-    var newFileList = _concatInstanceProperty(_context2 = []).call(_context2, _toConsumableArray(fileList), _toConsumableArray(files));
-    files.forEach(function (file) {
-      props.fileList === undefined && setFileList(fileList);
-      upload(file, newFileList);
-    });
+      var newFileList = _concatInstanceProperty(_context2 = []).call(_context2, _toConsumableArray(fileList), _toConsumableArray(files));
+      files.forEach(function (file) {
+        props.fileList === undefined && setFileList(fileList);
+        upload(file, newFileList);
+      });
+    }
   };
   var upload = function upload(file, fileList) {
     if (props.beforeUpload) {
@@ -264,40 +265,53 @@ var InternalUpload = function InternalUpload(props, ref) {
       });
     });
   };
-  var handleRemove = function handleRemove(file, e) {
-    e.preventDefault();
-    var files = _filterInstanceProperty(fileList).call(fileList, function (fileItem) {
-      return fileItem.uid !== file.uid;
-    });
-    if (onRemove) {
-      var remove = onRemove(file);
-      if (remove && typeof remove !== 'boolean' && remove.then) {
-        remove.then(function (flag) {
-          if (flag) {
-            onFileListChange(file, files);
-            abort(file);
-          }
-        }).catch(function (e) {
-          console.log(e);
-        });
-      } else if (remove !== false) {
+  var handleRemove = function handleRemove(originFile) {
+    var e = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : undefined;
+    if (e) {
+      e.preventDefault();
+    }
+    if (originFile) {
+      var file = _extends(_extends({}, originFile), {
+        status: 'removed'
+      });
+      var files = _filterInstanceProperty(fileList).call(fileList, function (fileItem) {
+        return fileItem.uid !== file.uid;
+      });
+      if (onRemove) {
+        var remove = onRemove(file);
+        if (remove && typeof remove !== 'boolean' && remove.then) {
+          remove.then(function (flag) {
+            if (flag) {
+              onFileListChange(file, files);
+              abort(file);
+            }
+          }).catch(function (e) {
+            console.log(e);
+          });
+        } else if (remove !== false) {
+          onFileListChange(file, files);
+          abort(file);
+        }
+      } else {
         onFileListChange(file, files);
         abort(file);
       }
-    } else {
-      onFileListChange(file, files);
-      abort(file);
     }
   };
-  var handleReUpload = function handleReUpload(file, e) {
-    e.preventDefault();
-    file.percent = 0;
-    file.status = 'uploading';
-    var files = _mapInstanceProperty(fileList).call(fileList, function (fileItem) {
-      return fileItem.uid === file.uid ? file : fileItem;
-    });
-    onFileListChange(file, files);
-    upload(file, files);
+  var handleReUpload = function handleReUpload(file) {
+    var e = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : undefined;
+    if (e) {
+      e.preventDefault();
+    }
+    if (file) {
+      file.percent = 0;
+      file.status = 'uploading';
+      var files = _mapInstanceProperty(fileList).call(fileList, function (fileItem) {
+        return fileItem.uid === file.uid ? file : fileItem;
+      });
+      onFileListChange(file, files);
+      upload(file, files);
+    }
   };
   var prefixCls = getPrefixCls(pkgPrefixCls, 'upload', customPrefixcls);
   var inputFileProps = {
@@ -310,10 +324,10 @@ var InternalUpload = function InternalUpload(props, ref) {
     webkitdirectory: directory ? 'webkitdirectory' : undefined
   };
   var dragEvents = {};
-  var _React$useState3 = React.useState(false),
-    _React$useState4 = _slicedToArray(_React$useState3, 2),
-    hover = _React$useState4[0],
-    setHover = _React$useState4[1];
+  var _useState3 = useState(false),
+    _useState4 = _slicedToArray(_useState3, 2),
+    hover = _useState4[0],
+    setHover = _useState4[1];
   if (type === 'drag') {
     var onFileDrop = function onFileDrop(e) {
       e.preventDefault();
@@ -349,7 +363,7 @@ var InternalUpload = function InternalUpload(props, ref) {
     dragEvents.onDragOver = onFileLeave;
     dragEvents.onDragLeave = onFileLeave;
   }
-  React.useEffect(function () {
+  useEffect(function () {
     if (type === 'drag') {
       var stopDrop = function stopDrop(e) {
         return e.preventDefault();
@@ -362,6 +376,16 @@ var InternalUpload = function InternalUpload(props, ref) {
       };
     }
   }, [type]);
+  useImperativeHandle(ref, function () {
+    return {
+      fileList: fileList,
+      uploadFiles: uploadFiles,
+      reUploadFile: handleReUpload,
+      removeFile: handleRemove,
+      abortFile: abort,
+      input: inputRef.current
+    };
+  });
   return /*#__PURE__*/React.createElement("div", {
     className: classNames(prefixCls, {
       disabled: disabled
@@ -377,7 +401,7 @@ var InternalUpload = function InternalUpload(props, ref) {
     title: "",
     type: "file"
   }, inputFileProps, {
-    ref: mergedRef
+    ref: inputRef
   })))), (listType === 'picture' || !(listType === 'text' && (!showUploadList || !fileList.length))) && /*#__PURE__*/React.createElement("ul", {
     className: _concatInstanceProperty(_context6 = "".concat(prefixCls, "-")).call(_context6, listType, "-list")
   }, listType === 'picture' && hasChildren && /*#__PURE__*/React.createElement("li", {
@@ -392,7 +416,7 @@ var InternalUpload = function InternalUpload(props, ref) {
     title: "",
     type: "file"
   }, inputFileProps, {
-    ref: mergedRef
+    ref: inputRef
   }))))), showUploadList && _mapInstanceProperty(fileList).call(fileList, function (file) {
     return itemRender ? itemRender( /*#__PURE__*/React.createElement(Item, _extends({}, {
       file: file,
@@ -502,6 +526,6 @@ var Item = function Item(_ref3) {
     })]
   }));
 };
-var Upload = /*#__PURE__*/React.forwardRef(InternalUpload);
+var Upload = /*#__PURE__*/forwardRef(InternalUpload);
 Upload.displayName = 'Upload';
 export default Upload;

package/lib/carousel/style/index.css

@@ -167,9 +167,11 @@
 }
 .kd-carousel-list-fade .kd-carousel-list-item-not-hidden {
   opacity: 1;
+  z-index: 1;
 }
 .kd-carousel-list-fade .kd-carousel-list-item-hidden {
   opacity: 0;
+  z-index: 0;
 }
 .kd-carousel-list-display {
   width: 100%;
@@ -187,6 +189,7 @@
   position: absolute;
   list-style: none;
   padding: 0;
+  z-index: 1;
 }
 .kd-carousel-slidebar-left {
   display: -webkit-box;
@@ -299,6 +302,7 @@
   right: 16px;
   -webkit-transform: translateY(-50%);
           transform: translateY(-50%);
+  z-index: 1;
 }
 .kd-carousel-jump-left {
   left: 16px;

package/lib/carousel/style/index.less

@@ -1,6 +1,7 @@
 @import '../../style/themes/index';
 @import './mixin.less';
 @carousel-prefix-cls: ~'@{kd-prefix}-carousel';
+
 .@{carousel-prefix-cls} {
   &-root {
     position: relative;
@@ -27,18 +28,23 @@
 
     &-slide {
       width: 100%;
+
       .@{carousel-prefix-cls}-list-item {
         opacity: 1;
         border-radius: @carousel-boder-radius;
+
         &-animation {
           transition: opacity 0.3s ease;
         }
+
         &-none-animation {
           transition: none;
         }
+
         &-not-hidden {
           opacity: 1;
         }
+
         &-hidden {
           opacity: 0;
         }
@@ -47,30 +53,40 @@
 
     &-fade {
       flex: 1;
+
       .@{carousel-prefix-cls}-list-item {
         opacity: 1;
+
         &-animation {
           transition: opacity 0.3s ease;
         }
+
         &-none-animation {
           transition: none;
         }
+
         &-not-hidden {
           opacity: 1;
+          z-index: 1;
         }
+
         &-hidden {
           opacity: 0;
+          z-index: 0;
         }
       }
     }
 
     &-display {
       width: 100%;
+
       .@{carousel-prefix-cls}-list-item {
         display: block;
+
         &-not-hidden {
           display: block;
         }
+
         &-hidden {
           display: none;
         }
@@ -82,25 +98,29 @@
     position: absolute;
     list-style: none;
     padding: 0;
+    z-index: 1;
 
     &-left {
       .vertical;
       left: @carousel-dots-margin-left;
     }
+
     &-right {
       .vertical;
       right: @carousel-dots-margin-right;
     }
+
     &-bottom {
       .horizontal;
       bottom: @carousel-dots-margin-bottom;
     }
+
     &-top {
       .horizontal;
       top: @carousel-dots-margin-top;
     }
 
-    &-dot > button {
+    &-dot>button {
       display: block;
       border-radius: @carousel-dots-boder-radius;
       box-sizing: border-box;
@@ -123,9 +143,11 @@
       width: 100%;
       cursor: pointer;
       outline: none;
+
       &-active {
         opacity: 1;
-        & > button {
+
+        &>button {
           background-color: @carousel-dots-color-background-active;
           opacity: 1;
         }
@@ -139,6 +161,7 @@
     left: unset;
     right: 16px;
     transform: translateY(-50%);
+    z-index: 1;
 
     &-left {
       left: 16px;
@@ -149,7 +172,7 @@
       cursor: pointer;
     }
 
-    > *:first-child {
+    >*:first-child {
       display: flex;
       align-items: center;
       justify-content: center;
@@ -173,12 +196,14 @@
     }
   }
 }
+
 .vertical {
   display: flex;
   flex-direction: column;
   top: 50%;
   transform: translateY(-50%);
-  & > li {
+
+  &>li {
     margin: @carousel-dots-marigin 0;
     width: @carousel-dots-height;
     height: @carousel-dots-width;
@@ -190,7 +215,8 @@
   flex-direction: row;
   left: 50%;
   transform: translateX(-50%);
-  & > li {
+
+  &>li {
     margin: 0 @carousel-dots-marigin;
     height: @carousel-dots-height;
     width: @carousel-dots-width;