@kdcloudjs/kdesign 1.6.34 → 1.6.36

package/es/image-cropper/cropper.js

@@ -2,10 +2,10 @@ import _Promise from "@babel/runtime-corejs3/core-js-stable/promise";
 import _sliceInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/slice";
 import React, { forwardRef, useEffect, useImperativeHandle, useRef, useMemo } from 'react';
 import CropperJS from 'cropperjs';
-import { tuple } from '../_utils/type'; // crop 形成新的裁剪框
+import { tuple } from '../_utils/type';
+// crop 形成新的裁剪框
 // move 图片可移动
 // none 都不能移动
-
 export var DragModeTypes = tuple('crop', 'move', 'none');
 var Cropper = /*#__PURE__*/forwardRef(function (props, forwardedRef) {
   var containerRef = useRef(null);
@@ -22,17 +22,17 @@ var Cropper = /*#__PURE__*/forwardRef(function (props, forwardedRef) {
     };
   });
   var className = props.className,
-      _props$imgSrc = props.imgSrc,
-      imgSrc = _props$imgSrc === void 0 ? '' : _props$imgSrc,
-      dragMode = props.dragMode,
-      viewMode = props.viewMode,
-      aspectRatio = props.aspectRatio,
-      _props$modal = props.modal,
-      modal = _props$modal === void 0 ? true : _props$modal,
-      _props$zoomOnWheel = props.zoomOnWheel,
-      zoomOnWheel = _props$zoomOnWheel === void 0 ? true : _props$zoomOnWheel,
-      _props$cropBoxMovable = props.cropBoxMovable,
-      cropBoxMovable = _props$cropBoxMovable === void 0 ? true : _props$cropBoxMovable;
+    _props$imgSrc = props.imgSrc,
+    imgSrc = _props$imgSrc === void 0 ? '' : _props$imgSrc,
+    dragMode = props.dragMode,
+    viewMode = props.viewMode,
+    aspectRatio = props.aspectRatio,
+    _props$modal = props.modal,
+    modal = _props$modal === void 0 ? true : _props$modal,
+    _props$zoomOnWheel = props.zoomOnWheel,
+    zoomOnWheel = _props$zoomOnWheel === void 0 ? true : _props$zoomOnWheel,
+    _props$cropBoxMovable = props.cropBoxMovable,
+    cropBoxMovable = _props$cropBoxMovable === void 0 ? true : _props$cropBoxMovable;
   var options = useMemo(function () {
     return {
       aspectRatio: aspectRatio,
@@ -49,16 +49,13 @@ var Cropper = /*#__PURE__*/forwardRef(function (props, forwardedRef) {
   useEffect(function () {
     if (!imgRef.current) return;
     if (!imgSrc) return;
-
     if (cropperRef.current) {
       cropperRef.current.destroy();
     }
-
     imgRef.current.onload = function () {
       var img = imgRef.current;
       cropperRef.current = new CropperJS(img, options);
     };
-
     return function () {
       if (cropperRef.current) {
         cropperRef.current.destroy();
@@ -72,13 +69,11 @@ var Cropper = /*#__PURE__*/forwardRef(function (props, forwardedRef) {
       }
     };
   }, []);
-
   var getImage = function getImage() {
     return new _Promise(function (resolve) {
       if (!cropperRef.current) return resolve(null);
       cropperRef.current.getCroppedCanvas().toBlob(function (blob) {
         var _context;
-
         if (!blob) return resolve(null);
         resolve(new File([blob], "".concat(_sliceInstanceProperty(_context = Math.random().toString(36)).call(_context, -8), ".png"), {
           type: blob.type
@@ -86,27 +81,22 @@ var Cropper = /*#__PURE__*/forwardRef(function (props, forwardedRef) {
       });
     });
   };
-
   var reset = function reset() {
     if (!cropperRef.current) return;
     cropperRef.current.reset();
   };
-
   var rotate = function rotate() {
     if (!cropperRef.current) return;
     cropperRef.current.rotate(-90);
   };
-
   var zoom = function zoom(num) {
     if (!cropperRef.current) return;
     cropperRef.current.zoom(num);
   };
-
   var replace = function replace(src) {
     if (!cropperRef.current) return;
     cropperRef.current.replace(src);
   };
-
   var imgStyle = {
     display: 'none'
   };

package/es/image-cropper/image-cropper.js

@@ -3,14 +3,12 @@ import _slicedToArray from "@babel/runtime-corejs3/helpers/slicedToArray";
 import _regeneratorRuntime from "@babel/runtime-corejs3/regenerator";
 import _Promise from "@babel/runtime-corejs3/core-js-stable/promise";
 import _Object$getOwnPropertySymbols from "@babel/runtime-corejs3/core-js-stable/object/get-own-property-symbols";
-
 var __awaiter = this && this.__awaiter || function (thisArg, _arguments, P, generator) {
   function adopt(value) {
     return value instanceof P ? value : new P(function (resolve) {
       resolve(value);
     });
   }
-
   return new (P || (P = _Promise))(function (resolve, reject) {
     function fulfilled(value) {
       try {
@@ -19,7 +17,6 @@ var __awaiter = this && this.__awaiter || function (thisArg, _arguments, P, gene
         reject(e);
       }
     }
-
     function rejected(value) {
       try {
         step(generator["throw"](value));
@@ -27,28 +24,20 @@ var __awaiter = this && this.__awaiter || function (thisArg, _arguments, P, gene
         reject(e);
       }
     }
-
     function step(result) {
       result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected);
     }
-
     step((generator = generator.apply(thisArg, _arguments || [])).next());
   });
 };
-
 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];
-  }
-
+  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, { useRef, forwardRef, useState, useEffect } from 'react';
 import Modal from '../modal';
 import { getCompProps } from '../_utils';
@@ -56,92 +45,74 @@ import ConfigContext from '../config-provider/ConfigContext';
 import Cropper from './cropper';
 import OperationBar from './operation-bar';
 import classNames from 'classnames';
-
 var InternalImageCropper = function InternalImageCropper(props, forwardedRef) {
   var _useState = useState(props.image || ''),
-      _useState2 = _slicedToArray(_useState, 2),
-      cropperSrc = _useState2[0],
-      setCropperSrc = _useState2[1];
-
+    _useState2 = _slicedToArray(_useState, 2),
+    cropperSrc = _useState2[0],
+    setCropperSrc = _useState2[1];
   var innerRef = useRef(null);
   var cropperRef = forwardedRef || innerRef;
-
   var _React$useContext = React.useContext(ConfigContext),
-      getPrefixCls = _React$useContext.getPrefixCls,
-      pkgPrefixCls = _React$useContext.prefixCls,
-      userDefaultProps = _React$useContext.compDefaultProps;
-
+    getPrefixCls = _React$useContext.getPrefixCls,
+    pkgPrefixCls = _React$useContext.prefixCls,
+    userDefaultProps = _React$useContext.compDefaultProps;
   var _a = getCompProps('ImageCropper', userDefaultProps, props),
-      customPrefixcls = _a.prefixCls,
-      containerWidth = _a.containerWidth,
-      containerHeight = _a.containerHeight,
-      title = _a.title,
-      visible = _a.visible,
-      onClose = _a.onClose,
-      onCropSuccess = _a.onCropSuccess,
-      onCropFailed = _a.onCropFailed,
-      dragMode = _a.dragMode,
-      viewMode = _a.viewMode,
-      aspectRatio = _a.aspectRatio,
-      modal = _a.modal,
-      okText = _a.okText,
-      okBtn = _a.okBtn,
-      _a$image = _a.image,
-      image = _a$image === void 0 ? '' : _a$image,
-      zoomOnWheel = _a.zoomOnWheel,
-      imageMaxSize = _a.imageMaxSize,
-      cropBoxMovable = _a.cropBoxMovable,
-      customComponents = _a.customComponents,
-      showDeaultToolbar = _a.showDeaultToolbar,
-      restProps = __rest(_a, ["prefixCls", "containerWidth", "containerHeight", "title", "visible", "onClose", "onCropSuccess", "onCropFailed", "dragMode", "viewMode", "aspectRatio", "modal", "okText", "okBtn", "image", "zoomOnWheel", "imageMaxSize", "cropBoxMovable", "customComponents", "showDeaultToolbar"]);
-
+    customPrefixcls = _a.prefixCls,
+    containerWidth = _a.containerWidth,
+    containerHeight = _a.containerHeight,
+    title = _a.title,
+    visible = _a.visible,
+    onClose = _a.onClose,
+    onCropSuccess = _a.onCropSuccess,
+    onCropFailed = _a.onCropFailed,
+    dragMode = _a.dragMode,
+    viewMode = _a.viewMode,
+    aspectRatio = _a.aspectRatio,
+    modal = _a.modal,
+    okText = _a.okText,
+    okBtn = _a.okBtn,
+    _a$image = _a.image,
+    image = _a$image === void 0 ? '' : _a$image,
+    zoomOnWheel = _a.zoomOnWheel,
+    imageMaxSize = _a.imageMaxSize,
+    cropBoxMovable = _a.cropBoxMovable,
+    customComponents = _a.customComponents,
+    showDeaultToolbar = _a.showDeaultToolbar,
+    restProps = __rest(_a, ["prefixCls", "containerWidth", "containerHeight", "title", "visible", "onClose", "onCropSuccess", "onCropFailed", "dragMode", "viewMode", "aspectRatio", "modal", "okText", "okBtn", "image", "zoomOnWheel", "imageMaxSize", "cropBoxMovable", "customComponents", "showDeaultToolbar"]);
   var prefixCls = getPrefixCls(pkgPrefixCls, 'image-cropper', customPrefixcls);
-
   var handleOkClick = function handleOkClick() {
     return __awaiter(void 0, void 0, void 0, /*#__PURE__*/_regeneratorRuntime.mark(function _callee() {
       var imgFile;
       return _regeneratorRuntime.wrap(function _callee$(_context) {
-        while (1) {
-          switch (_context.prev = _context.next) {
-            case 0:
-              _context.next = 2;
-              return cropperRef.current.getImage();
-
-            case 2:
-              imgFile = _context.sent;
-              imgFile ? onCropSuccess === null || onCropSuccess === void 0 ? void 0 : onCropSuccess(imgFile) : onCropFailed === null || onCropFailed === void 0 ? void 0 : onCropFailed(imgFile);
-
-            case 4:
-            case "end":
-              return _context.stop();
-          }
+        while (1) switch (_context.prev = _context.next) {
+          case 0:
+            _context.next = 2;
+            return cropperRef.current.getImage();
+          case 2:
+            imgFile = _context.sent;
+            imgFile ? onCropSuccess === null || onCropSuccess === void 0 ? void 0 : onCropSuccess(imgFile) : onCropFailed === null || onCropFailed === void 0 ? void 0 : onCropFailed(imgFile);
+          case 4:
+          case "end":
+            return _context.stop();
         }
       }, _callee);
     }));
   };
-
   var handleRotate = function handleRotate() {
     var _a;
-
     (_a = cropperRef.current) === null || _a === void 0 ? void 0 : _a.rotate();
   };
-
   var handleRevert = function handleRevert() {
     var _a;
-
     (_a = cropperRef.current) === null || _a === void 0 ? void 0 : _a.reset();
   };
-
   var handleZoom = function handleZoom(num) {
     var _a;
-
     (_a = cropperRef.current) === null || _a === void 0 ? void 0 : _a.zoom(num);
   };
-
   var handleReplace = function handleReplace(src) {
     setCropperSrc(src);
   };
-
   useEffect(function () {
     setCropperSrc(image);
   }, [image]);
@@ -183,7 +154,6 @@ var InternalImageCropper = function InternalImageCropper(props, forwardedRef) {
     onCancel: onClose
   }, restProps));
 };
-
 var ImageCropper = /*#__PURE__*/forwardRef(InternalImageCropper);
 ImageCropper.displayName = 'ImageCropper';
 export default ImageCropper;

package/es/image-cropper/operation-bar.js

@@ -9,59 +9,47 @@ import Icon from '../icon';
 import Upload from '../upload';
 import devWarning from '../_utils/devwarning';
 var ImageFileTypes = ['image/jpeg', 'image/jpg', 'image/png'];
-
 var OperationBar = function OperationBar(props) {
   var className = props.className,
-      btnClassName = props.btnClassName,
-      customComponents = props.customComponents,
-      _props$imageMaxSize = props.imageMaxSize,
-      imageMaxSize = _props$imageMaxSize === void 0 ? 2 : _props$imageMaxSize,
-      okText = props.okText,
-      okBtn = props.okBtn,
-      _props$showDeaultTool = props.showDeaultToolbar,
-      showDeaultToolbar = _props$showDeaultTool === void 0 ? true : _props$showDeaultTool,
-      getCropper = props.getCropper,
-      onClick = props.onClick,
-      onRevert = props.onRevert,
-      onRotate = props.onRotate,
-      onZoom = props.onZoom,
-      onReplace = props.onReplace;
-
+    btnClassName = props.btnClassName,
+    customComponents = props.customComponents,
+    _props$imageMaxSize = props.imageMaxSize,
+    imageMaxSize = _props$imageMaxSize === void 0 ? 2 : _props$imageMaxSize,
+    okText = props.okText,
+    okBtn = props.okBtn,
+    _props$showDeaultTool = props.showDeaultToolbar,
+    showDeaultToolbar = _props$showDeaultTool === void 0 ? true : _props$showDeaultTool,
+    getCropper = props.getCropper,
+    onClick = props.onClick,
+    onRevert = props.onRevert,
+    onRotate = props.onRotate,
+    onZoom = props.onZoom,
+    onReplace = props.onReplace;
   var handleBtnClick = function handleBtnClick() {
     onClick === null || onClick === void 0 ? void 0 : onClick();
   };
-
   var handleRotate = function handleRotate() {
     onRotate === null || onRotate === void 0 ? void 0 : onRotate();
   };
-
   var handleRevert = function handleRevert() {
     onRevert === null || onRevert === void 0 ? void 0 : onRevert();
   };
-
   var handleZoom = function handleZoom(value) {
     onZoom === null || onZoom === void 0 ? void 0 : onZoom(value);
   };
-
   var beforeUpload = useCallback(function (file) {
     var isImg = _includesInstanceProperty(ImageFileTypes).call(ImageFileTypes, file.type);
-
     if (!isImg) {
       devWarning(true, 'image-cropper', 'You can only upload JPG/PNG file!');
     }
-
     var sizeOk = file.size <= 1024 * 1024 * imageMaxSize;
-
     if (!sizeOk) {
       devWarning(true, 'image-cropper', "Please upload a picture smaller than ".concat(imageMaxSize, " MB."));
     }
-
     if (isImg && sizeOk) {
       var src = _URL.createObjectURL(file);
-
       onReplace === null || onReplace === void 0 ? void 0 : onReplace(src);
     }
-
     return false;
   }, [onReplace, imageMaxSize]);
   var accept = useMemo(function () {
@@ -108,5 +96,4 @@ var OperationBar = function OperationBar(props) {
     onClick: handleBtnClick
   }, okText));
 };
-
 export default OperationBar;

package/es/image-cropper/style/index.css

@@ -139,10 +139,21 @@
 .kd-image-cropper-bar-container .kd-image-cropper-btn-container.default {
   border-right: 1px solid #ccc;
 }
-.kd-image-cropper-bar-container .kd-image-cropper-btn-container i {
+.kd-image-cropper-bar-container .kd-image-cropper-btn-container > i,
+.kd-image-cropper-bar-container .kd-image-cropper-btn-container > .kd-upload {
   margin-right: 20px;
   cursor: pointer;
 }
+.kd-image-cropper-bar-container .kd-image-cropper-btn-container .kd-upload {
+  display: -webkit-box;
+  display: -ms-flexbox;
+  display: flex;
+}
+.kd-image-cropper-bar-container .kd-image-cropper-btn-container .kd-upload-handle {
+  display: -webkit-box;
+  display: -ms-flexbox;
+  display: flex;
+}
 .kd-image-cropper-bar-container .ok-btn {
   height: 100%;
 }

package/es/image-cropper/style/index.less

@@ -20,7 +20,7 @@
   height: 44px;
   background: @bg2;
   border-radius: 4px;
-  
+
   .@{image-cropper-prefix-cls}-btn-container {
     padding-left: 28px;
     font-size: 24px;
@@ -31,10 +31,19 @@
       border-right: 1px solid #ccc;
     }
 
-    i {
+    & > i,
+    & > .@{kd-prefix}-upload {
       margin-right: 20px;
       cursor: pointer;
     }
+
+    .@{kd-prefix}-upload {
+      display: flex;
+
+      &-handle {
+        display: flex;
+      }
+    }
   }
 
   .ok-btn {

package/es/index.js

@@ -1,5 +1,3 @@
-
-
 export { default as Alert } from './alert';
 export { default as Button } from './button';
 export { default as Card } from './card';

package/es/input/ClearableLabeledInput.js

@@ -9,48 +9,41 @@ var ClearableInputType = tuple('input', 'text');
 export function hasPrefixSuffix(props) {
   return !!(props.prefix || props.suffix || props.allowClear || !!props.inputCount);
 }
-
 var ClearableInput = function ClearableInput(props) {
   var prefixCls = props.prefixCls,
-      prefix = props.prefix,
-      suffix = props.suffix,
-      allowClear = props.allowClear,
-      value = props.value,
-      disabled = props.disabled,
-      inputType = props.inputType,
-      handleReset = props.handleReset,
-      element = props.element,
-      className = props.className,
-      size = props.size,
-      borderType = props.borderType,
-      style = props.style,
-      addonBefore = props.addonBefore,
-      addonAfter = props.addonAfter,
-      focused = props.focused,
-      numberMark = props.numberMark,
-      inputCount = props.inputCount,
-      count = props.count;
-
+    prefix = props.prefix,
+    suffix = props.suffix,
+    allowClear = props.allowClear,
+    value = props.value,
+    disabled = props.disabled,
+    inputType = props.inputType,
+    handleReset = props.handleReset,
+    element = props.element,
+    className = props.className,
+    size = props.size,
+    borderType = props.borderType,
+    style = props.style,
+    addonBefore = props.addonBefore,
+    addonAfter = props.addonAfter,
+    focused = props.focused,
+    numberMark = props.numberMark,
+    inputCount = props.inputCount,
+    count = props.count;
   var _useState = useState(false),
-      _useState2 = _slicedToArray(_useState, 2),
-      isMouseEnter = _useState2[0],
-      setIsMouseEnter = _useState2[1];
-
+    _useState2 = _slicedToArray(_useState, 2),
+    isMouseEnter = _useState2[0],
+    setIsMouseEnter = _useState2[1];
   var mouseEnterHandle = function mouseEnterHandle() {
     setIsMouseEnter(true);
   };
-
   var mouseLeaveHandle = function mouseLeaveHandle() {
     setIsMouseEnter(false);
   };
-
   var renderClearIcon = function renderClearIcon() {
     var _classNames;
-
     if (!allowClear) {
       return null;
     }
-
     var needClear = !disabled && value && isMouseEnter;
     var clearIconclasses = classNames((_classNames = {}, _defineProperty(_classNames, "".concat(prefixCls, "-textarea-clear-icon"), inputType === ClearableInputType[1]), _defineProperty(_classNames, "".concat(prefixCls, "-clear-icon"), inputType === ClearableInputType[0]), _defineProperty(_classNames, "".concat(prefixCls, "-clear-icon-hidden"), !needClear), _defineProperty(_classNames, "".concat(prefixCls, "-clear-icon-rightSpace"), suffix), _classNames));
     return /*#__PURE__*/React.createElement("span", {
@@ -60,7 +53,6 @@ var ClearableInput = function ClearableInput(props) {
       type: "close-solid"
     }) : allowClear);
   };
-
   var renderSuffix = function renderSuffix() {
     if (suffix || !disabled && !!allowClear || inputCount) {
       return /*#__PURE__*/React.createElement("span", {
@@ -71,17 +63,13 @@ var ClearableInput = function ClearableInput(props) {
         }
       }, inputCount), /*#__PURE__*/React.createElement("span", null, suffix));
     }
-
     return null;
   };
-
   var renderInputWithFixNode = function renderInputWithFixNode(originElement) {
     var _context, _classNames2;
-
     if (!hasPrefixSuffix(props) && !count) {
       return originElement;
     }
-
     var suffixNode = renderSuffix();
     var prefixNode = prefix ? /*#__PURE__*/React.createElement("span", {
       className: "".concat(prefixCls, "-prefix")
@@ -96,14 +84,11 @@ var ClearableInput = function ClearableInput(props) {
       style: null
     }), suffixNode);
   };
-
   var renderInputWithLabel = function renderInputWithLabel(originElement) {
     var _classNames4, _context2, _classNames5;
-
     if (!addonBefore && !addonAfter && !count) {
       return originElement;
     }
-
     var addonClassName = classNames("".concat(prefixCls, "-group-addon"), (_classNames4 = {}, _defineProperty(_classNames4, "".concat(prefixCls, "-group-addon-borderless"), borderType === 'none'), _defineProperty(_classNames4, "".concat(prefixCls, "-group-addon-underline"), borderType === 'underline'), _defineProperty(_classNames4, "".concat(prefixCls, "-group-addon-disabled"), disabled), _classNames4));
     var addonBeforeNode = addonBefore ? /*#__PURE__*/React.createElement("span", {
       className: addonClassName
@@ -121,20 +106,17 @@ var ClearableInput = function ClearableInput(props) {
       style: null
     }), addonAfterNode));
   };
-
   var renderTextAreaWithLabel = function renderTextAreaWithLabel(originElement) {
     if (!allowClear) {
       return originElement;
     }
-
     var _ref = style || {},
-        width = _ref.width,
-        margin = _ref.margin,
-        marginLeft = _ref.marginLeft,
-        marginRight = _ref.marginRight,
-        marginTop = _ref.marginTop,
-        marginBottom = _ref.marginBottom;
-
+      width = _ref.width,
+      margin = _ref.margin,
+      marginLeft = _ref.marginLeft,
+      marginRight = _ref.marginRight,
+      marginTop = _ref.marginTop,
+      marginBottom = _ref.marginBottom;
     var wrapperStyle = style ? {
       width: width,
       margin: margin,
@@ -143,13 +125,11 @@ var ClearableInput = function ClearableInput(props) {
       marginTop: marginTop,
       marginBottom: marginBottom
     } : {};
-
     for (var key in wrapperStyle) {
       if (wrapperStyle[key] === undefined) {
         delete wrapperStyle[key];
       }
     }
-
     var textAreaWrapperClasses = classNames(className, _defineProperty({}, "".concat(prefixCls, "-wrapper-textarea"), true));
     return /*#__PURE__*/React.createElement("span", {
       className: textAreaWrapperClasses,
@@ -158,12 +138,9 @@ var ClearableInput = function ClearableInput(props) {
       onMouseLeave: mouseLeaveHandle
     }, originElement, renderClearIcon(), numberMark && numberMark);
   };
-
   if (inputType === ClearableInputType[0]) {
     return renderInputWithLabel(renderInputWithFixNode(element));
   }
-
   return renderTextAreaWithLabel(element);
 };
-
 export default ClearableInput;