@kdcloudjs/kdesign 1.6.14 → 1.6.15

package/es/_utils/usePopper.d.ts

@@ -20,6 +20,7 @@ export interface PopperProps {
     placement?: PlacementType;
     popperStyle?: React.CSSProperties;
     trigger?: TriggerType | Array<TriggerType>;
+    clickToClose?: boolean;
     onTrigger?: (trigger: TriggerType) => void;
     onVisibleChange?: (visible: boolean) => void;
     getTriggerElement?: (locatorNode: HTMLElement) => HTMLElement;

package/es/_utils/usePopper.js

@@ -152,6 +152,8 @@ function usePopper(locatorElement, popperElement, props) {
       defaultVisible = _props$defaultVisible === void 0 ? false : _props$defaultVisible,
       _props$autoPlacement = props.autoPlacement,
       autoPlacement = _props$autoPlacement === void 0 ? true : _props$autoPlacement,
+      _props$clickToClose = props.clickToClose,
+      clickToClose = _props$clickToClose === void 0 ? true : _props$clickToClose,
       _props$getTriggerElem = props.getTriggerElement,
       getTriggerElement = _props$getTriggerElem === void 0 ? function (locatorNode) {
     return locatorNode;
@@ -635,7 +637,7 @@ function usePopper(locatorElement, popperElement, props) {
             return showPopper(e.type);
           }, mouseEnterDelay * 1000);
         } else if (e.type === 'mouseup' && visible) {
-          hidePopper();
+          clickToClose && hidePopper();
         } else {
           showPopper(e.type);
         }

package/es/button/button.js

@@ -129,7 +129,7 @@ var InternalButton = function InternalButton(props, ref) {
         className: btnClasses,
         onClick: handleClick,
         disabled: disabled
-      }, others), children);
+      }, others), iconNode, children);
 
     default:
       return /*#__PURE__*/React.createElement("button", _extends({

package/es/button/style/index.css

@@ -338,6 +338,9 @@
   padding: 0;
   min-width: auto;
 }
+.kd-btn-text .kd-btn-iconWrapper-left {
+  margin-right: var(--kd-c-button-text-icon-spacing-margin-right, 4px);
+}
 .kd-btn-text:hover {
   color: var(--kd-c-button-text-color-text-hover, var(--kd-g-color-theme-5, #87adff));
 }

package/es/button/style/index.less

@@ -201,6 +201,10 @@
     padding: 0;
     min-width: auto;
 
+    .@{btn-prefix-cls}-iconWrapper-left {
+      margin-right: @btn-text-icon-margin-right;
+    }
+
     &:hover {
       color: @btn-text-g-text-color-hover;
     }

package/es/button/style/token.less

@@ -104,3 +104,4 @@
 @btn-large-padding-horizontal: var(~'@{button-custom-prefix}-spacing-padding-horizontal-large', 8px); // 大号 内间距 横向
 @btn-group-dropdown-item-horizontal: var(~'@{button-custom-prefix}-group-dropdown-item-horizonta', 12px);
 @btn-icon-padding-horizontal: var(~'@{button-custom-prefix}-icon-spacing-padding-horizontal', 4px);
+@btn-text-icon-margin-right: var(~'@{button-custom-prefix}-text-icon-spacing-margin-right', 4px);

package/es/carousel/carousel.d.ts

@@ -5,6 +5,7 @@ export declare const EffectTypes: ["scrollx", "fade"];
 export declare type EffectType = typeof EffectTypes[number];
 export interface CarouselProps {
     autoplay?: boolean;
+    jumpNode?: boolean | React.ReactNode[];
     children?: React.ReactNode;
     dotPosition?: string;
     dots?: boolean | {

package/es/carousel/carousel.js

@@ -1,7 +1,8 @@
+import _extends from "@babel/runtime-corejs3/helpers/extends";
 import _defineProperty from "@babel/runtime-corejs3/helpers/defineProperty";
 import _slicedToArray from "@babel/runtime-corejs3/helpers/slicedToArray";
 import _concatInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/concat";
-import React, { useContext, useImperativeHandle } from 'react';
+import React, { isValidElement, useContext, useImperativeHandle } from 'react';
 import classNames from 'classnames';
 import ConfigContext from '../config-provider/ConfigContext';
 import { getCompProps } from '../_utils';
@@ -13,6 +14,7 @@ import { FadeList } from './fadeList';
 import { SlideList } from './slideList';
 import { DisplayList } from './displayList';
 import { Slidebar } from './slidebar';
+import Icon from '../icon';
 export var DotPositionTypes = tuple('top', 'left', 'bottom', 'right');
 export var EffectTypes = tuple('scrollx', 'fade');
 
@@ -24,6 +26,7 @@ var InternalCarousel = function InternalCarousel(props, ref) {
 
   var carouselProps = getCompProps('Carousel', userDefaultProps, props);
   var autoplay = carouselProps.autoplay,
+      jumpNode = carouselProps.jumpNode,
       dotPosition = carouselProps.dotPosition,
       children = carouselProps.children,
       dots = carouselProps.dots,
@@ -237,6 +240,66 @@ var InternalCarousel = function InternalCarousel(props, ref) {
     return content;
   };
 
+  var renderJumpNode = function renderJumpNode() {
+    if ((children === null || children === void 0 ? void 0 : children.length) && jumpNode) {
+      var jumpClassPrefix = "".concat(carouselPrefixCls, "-jump");
+
+      var leftClick = function leftClick(e) {
+        e.stopPropagation();
+
+        if (currentIndex !== 0) {
+          prev();
+        }
+      };
+
+      var rightClick = function rightClick(e) {
+        e.stopPropagation();
+
+        if (currentIndex !== children.length - 1) {
+          next();
+        }
+      };
+
+      var mergeNode = function mergeNode(node, type) {
+        var onClick = function onClick(evt) {
+          var chClick = node.props.onClick;
+
+          if (type === 'left') {
+            leftClick(evt);
+          } else {
+            rightClick(evt);
+          }
+
+          if (typeof chClick === 'function') {
+            chClick(evt);
+          }
+        };
+
+        return _extends(_extends({}, node.props), {
+          onClick: onClick
+        });
+      };
+
+      var leftNode = /*#__PURE__*/React.createElement("div", {
+        className: classNames(jumpClassPrefix, "".concat(jumpClassPrefix, "-left"), _defineProperty({}, "".concat(jumpClassPrefix, "-disabled"), currentIndex <= 0))
+      }, Array.isArray(jumpNode) && jumpNode.length > 0 && /*#__PURE__*/isValidElement(jumpNode[0]) ? /*#__PURE__*/React.cloneElement(jumpNode[0], mergeNode(jumpNode[0], 'left')) : /*#__PURE__*/React.createElement(Icon, {
+        className: "".concat(jumpClassPrefix, "-icon"),
+        type: 'arrow-left-circle-solid',
+        onClick: leftClick
+      }));
+      var rightNode = /*#__PURE__*/React.createElement("div", {
+        className: classNames(jumpClassPrefix, "".concat(jumpClassPrefix, "-right"), _defineProperty({}, "".concat(jumpClassPrefix, "-disabled"), currentIndex >= children.length - 1))
+      }, Array.isArray(jumpNode) && jumpNode.length > 1 && /*#__PURE__*/isValidElement(jumpNode[1]) ? /*#__PURE__*/React.cloneElement(jumpNode[1], mergeNode(jumpNode[1], 'right')) : /*#__PURE__*/React.createElement(Icon, {
+        className: "".concat(jumpClassPrefix, "-icon"),
+        type: 'arrow-right-circle-solid',
+        onClick: rightClick
+      }));
+      return /*#__PURE__*/React.createElement(React.Fragment, null, leftNode, rightNode);
+    }
+
+    return null;
+  };
+
   return /*#__PURE__*/React.createElement("div", {
     className: rootClassName,
     ref: carouselRef,
@@ -246,14 +309,14 @@ var InternalCarousel = function InternalCarousel(props, ref) {
     style: style,
     onMouseEnter: handleMouseEnter,
     onMouseLeave: handleMouseLeave
-  }, (children === null || children === void 0 ? void 0 : children.length) && renderDisplayList(), (children === null || children === void 0 ? void 0 : children.length) && showDot() && /*#__PURE__*/React.createElement(Slidebar, {
+  }, (children === null || children === void 0 ? void 0 : children.length) ? renderDisplayList() : null, (children === null || children === void 0 ? void 0 : children.length) && showDot() ? /*#__PURE__*/React.createElement(Slidebar, {
     number: children.length,
     currentIndex: currentIndex,
     dotsClassName: dots,
     parentPrefixCls: carouselPrefixCls,
     dotPosition: dotPosition,
     onClick: handleClick
-  }));
+  }) : null, renderJumpNode());
 };
 
 var Carousel = /*#__PURE__*/React.forwardRef(InternalCarousel);

package/es/carousel/style/index.css

@@ -290,6 +290,45 @@
   background-color: var(--kd-c-carousel-dots-color-hover, #666666);
   opacity: 1;
 }
+.kd-carousel-jump {
+  position: absolute;
+  top: 50%;
+  left: unset;
+  right: 16px;
+  -webkit-transform: translateY(-50%);
+          transform: translateY(-50%);
+}
+.kd-carousel-jump-left {
+  left: 16px;
+  right: unset;
+}
+.kd-carousel-jump:not(.kd-carousel-jump-disabled) {
+  cursor: pointer;
+}
+.kd-carousel-jump > *:first-child {
+  display: -webkit-box;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-box-align: center;
+      -ms-flex-align: center;
+          align-items: center;
+  -webkit-box-pack: center;
+      -ms-flex-pack: center;
+          justify-content: center;
+}
+.kd-carousel-jump-icon {
+  font-size: 20px;
+  color: var(--kd-c-carousel-jump-icon-color, #D9D9D9);
+}
+.kd-carousel-jump-icon:hover {
+  color: var(--kd-c-carousel-jump-icon-color-hover, #666666);
+}
+.kd-carousel-jump-disabled {
+  cursor: not-allowed;
+}
+.kd-carousel-jump-disabled .kd-carousel-jump-icon:hover {
+  color: var(--kd-c-carousel-jump-icon-color, #D9D9D9);
+}
 .vertical {
   display: -webkit-box;
   display: -ms-flexbox;

package/es/carousel/style/index.less

@@ -132,6 +132,46 @@
       }
     }
   }
+
+  &-jump {
+    position: absolute;
+    top: 50%;
+    left: unset;
+    right: 16px;
+    transform: translateY(-50%);
+
+    &-left {
+      left: 16px;
+      right: unset;
+    }
+
+    &:not(.@{carousel-prefix-cls}-jump-disabled) {
+      cursor: pointer;
+    }
+
+    > *:first-child {
+      display: flex;
+      align-items: center;
+      justify-content: center;
+    }
+
+    &-icon {
+      font-size: 20px;
+      color: @carousel-jump-icon-color;
+
+      &:hover {
+        color: @carousel-jump-icon-color-hover;
+      }
+    }
+
+    &-disabled {
+      cursor: not-allowed;
+
+      .@{carousel-prefix-cls}-jump-icon:hover {
+        color: @carousel-jump-icon-color;
+      }
+    }
+  }
 }
 .vertical {
   display: flex;

package/es/carousel/style/token.less

@@ -3,6 +3,8 @@
 // color
 @carousel-dots-color-background: var(~'@{carousel-prefix}-dots-color-background', #D8D8D8); // 面板指示点的背景色
 @carousel-dots-color-background-active: var(~'@{carousel-prefix}-dots-color-hover', #666666); // 面板指示点的背景色
+@carousel-jump-icon-color: var(~'@{carousel-prefix}-jump-icon-color', #D9D9D9);
+@carousel-jump-icon-color-hover: var(~'@{carousel-prefix}-jump-icon-color-hover', #666666);
 
 // radius
 @carousel-dots-boder-radius: var(~'@{carousel-prefix}-dots-border-radius', 2px); // 面板指示点的圆角

package/es/config-provider/compDefaultProps.d.ts

@@ -141,6 +141,7 @@ declare const compDefaultProps: {
     };
     Image: {
         preview: boolean;
+        scales: number[];
     };
     InputNumber: {
         type: string;

package/es/config-provider/compDefaultProps.js

@@ -146,7 +146,8 @@ var compDefaultProps = {
     optionFilterProp: 'label'
   },
   Image: {
-    preview: true
+    preview: true,
+    scales: [25, 50, 75, 100, 125, 150, 200]
   },
   InputNumber: {
     type: 'text',

package/es/form/Field.js

@@ -105,7 +105,8 @@ var Field = function Field(props) {
   var _getInternalHooks = getInternalHooks(INTERNAL_HOOK_KEY),
       registerField = _getInternalHooks.registerField,
       dispatch = _getInternalHooks.dispatch,
-      setDefaultValues = _getInternalHooks.setDefaultValues;
+      setDefaultValues = _getInternalHooks.setDefaultValues,
+      deleteField = _getInternalHooks.deleteField;
 
   var name = props.name,
       customizeHtmlFor = props.htmlFor,
@@ -219,6 +220,11 @@ var Field = function Field(props) {
       setDefaultValues(_defineProperty({}, name, defaultValue));
     }
   }, [name, registerField]);
+  useEffect(function () {
+    return function () {
+      deleteField(name);
+    };
+  }, []);
   var formPrefixCls = getPrefixCls === null || getPrefixCls === void 0 ? void 0 : getPrefixCls(prefixCls, 'form', customizePrefixcls);
   var formItemClassName = classnames((_classnames = {}, _defineProperty(_classnames, "".concat(formPrefixCls), true), _defineProperty(_classnames, "".concat(formPrefixCls, "-field"), true), _defineProperty(_classnames, "".concat(formPrefixCls, "-field-hidden"), hidden), _defineProperty(_classnames, "".concat(formPrefixCls, "-field-vertical"), vertical), _classnames), className);
   var value = getFieldValue(name);

package/es/form/FieldContext.js

@@ -22,6 +22,7 @@ var context = /*#__PURE__*/React.createContext({
       dispatch: warningFunc,
       setDefaultValues: warningFunc,
       registerField: warningFunc,
+      deleteField: warningFunc,
       setCallbacks: warningFunc
     };
   }

package/es/form/hooks/useForm.js

@@ -11,8 +11,7 @@ import Schema from 'async-validator';
 import cloneDeep from 'lodash/cloneDeep';
 import get from 'lodash/get';
 import merge from 'lodash/merge';
-import set from 'lodash/set'; // import useForceUpdate from './useForceUpdate'
-
+import set from 'lodash/set';
 import devwarning from '../../_utils/devwarning';
 export var INTERNAL_HOOK_KEY = '__KD_INTERNAL_FORM_HOOK__';
 
@@ -21,15 +20,12 @@ var FormStore = /*#__PURE__*/_createClass(function FormStore() {
 
   _classCallCheck(this, FormStore);
 
-  this.isMounted = false; // private forceRootUpdate:() => void
-
+  this.isMounted = false;
   this.defaultValues = {};
   this.store = {};
   this.fields = {};
   this.errorMessages = {};
-  this.callbacks = {}; // constructor (forceRootUpdate: () => void) {
-  //   this.forceRootUpdate = forceRootUpdate
-  // }
+  this.callbacks = {};
 
   this.getForm = function () {
     return {
@@ -58,7 +54,8 @@ var FormStore = /*#__PURE__*/_createClass(function FormStore() {
       dispatch: _this.dispatch,
       setDefaultValues: _this.setDefaultValues,
       setCallbacks: _this.setCallbacks,
-      registerField: _this.registerField
+      registerField: _this.registerField,
+      deleteField: _this.deleteField
     };
   };
 
@@ -229,13 +226,6 @@ var FormStore = /*#__PURE__*/_createClass(function FormStore() {
       onValuesChange(_defineProperty({}, name, value), cloneDeep(_this.store));
     }
   };
-  /**
-   * 注册 Field
-   * Field 如果带有验证规则的话，则注册时进行校验
-   * @param name Field 名称
-   * @param field Field 实例
-   */
-
 
   this.registerField = function (name, field) {
     _this.warningUnhooked();
@@ -243,6 +233,14 @@ var FormStore = /*#__PURE__*/_createClass(function FormStore() {
     _this.fields[name] = field;
   };
 
+  this.deleteField = function (name) {
+    _this.warningUnhooked();
+
+    Object.hasOwnProperty.call(_this.fields, name) && delete _this.fields[name];
+    Object.hasOwnProperty.call(_this.errorMessages, name) && delete _this.errorMessages[name];
+    Object.hasOwnProperty.call(_this.store, name) && delete _this.store[name];
+  };
+
   this.validateFields = function (namePathList) {
     _this.warningUnhooked();
 
@@ -340,16 +338,12 @@ var FormStore = /*#__PURE__*/_createClass(function FormStore() {
 });
 
 function useForm(form) {
-  var formRef = React.useRef(); // const forceUpdate = useForceUpdate()
+  var formRef = React.useRef();
 
   if (!formRef.current) {
     if (form) {
       formRef.current = form;
     } else {
-      // Create a new FormStore if not provided
-      // const forceReRender = () => {
-      //   forceUpdate()
-      // }
       var formStore = new FormStore();
       formRef.current = formStore.getForm();
     }

package/es/form/interface.d.ts

@@ -75,6 +75,7 @@ export interface InternalHooks {
     registerField: (name: NamePath, field: {
         current: FieldInstance;
     }) => void;
+    deleteField: (name: NamePath) => void;
 }
 export declare type NotifySource = 'externalUpdateValue' | 'updateValue' | 'reset' | 'validateField' | 'validateFinish';
 export interface ValidateErrorEntity<Values = any> {

package/es/image/preview.d.ts

@@ -5,6 +5,7 @@ export interface PreviewProps {
     alt?: string;
     name?: string;
     size?: string;
+    scales?: Array<number>;
     visible: boolean;
     type?: PreviewType;
     className?: string;

package/es/image/preview.js

@@ -1,5 +1,6 @@
 import _extends from "@babel/runtime-corejs3/helpers/extends";
 import _slicedToArray from "@babel/runtime-corejs3/helpers/slicedToArray";
+import _findInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/find";
 import _concatInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/concat";
 import * as React from 'react';
 import ReactDOM from 'react-dom';
@@ -24,6 +25,7 @@ var Preview = function Preview(props) {
       alt = allProps.alt,
       name = allProps.name,
       size = allProps.size,
+      scales = allProps.scales,
       visible = allProps.visible,
       onClose = allProps.onClose,
       current = allProps.current,
@@ -53,14 +55,28 @@ var Preview = function Preview(props) {
       scale = _React$useState6[0],
       setScale = _React$useState6[1];
 
+  var maxScale = scales[scales.length - 1] / 100;
+  var minScale = scales[0] / 100;
   React.useEffect(function () {
     if (show) {
       document.body.style.overflow = 'hidden';
       var throMouseWheel = throttle(function (e) {
         if (e.wheelDelta > 0) {
-          setScale(scale + 0.1);
+          if (scale > maxScale) return;
+
+          if (scale + 0.1 > maxScale) {
+            setScale(maxScale);
+          } else {
+            setScale(scale + 0.1);
+          }
         } else if (e.wheelDelta < 0) {
-          if (scale > 1) setScale(scale - 0.1);
+          if (scale < minScale) return;
+
+          if (scale - 0.1 < minScale) {
+            setScale(minScale);
+          } else {
+            setScale(scale - 0.1);
+          }
         }
       }, 200);
       document.addEventListener('mousewheel', throMouseWheel);
@@ -74,12 +90,18 @@ var Preview = function Preview(props) {
   }, [show, scale]);
 
   var handleZoomOut = function handleZoomOut() {
-    var newScale = scale - 1;
-    setScale(Math.max(newScale, 1));
+    var nextScale = scales.findLast(function (s) {
+      return s / 100 < scale;
+    });
+    if (nextScale !== undefined) setScale(nextScale / 100);
   };
 
   var handleZoomIn = function handleZoomIn() {
-    setScale(scale + 1);
+    var nextScale = _findInstanceProperty(scales).call(scales, function (s) {
+      return s / 100 > scale;
+    });
+
+    if (nextScale !== undefined) setScale(nextScale / 100);
   };
 
   var previewImgProps = {
@@ -121,11 +143,14 @@ var Preview = function Preview(props) {
   }), /*#__PURE__*/React.createElement(Icon, {
     type: "shrink",
     className: classNames({
-      disabled: scale <= 1
+      disabled: scale <= minScale
     }),
     onClick: handleZoomOut
   }), /*#__PURE__*/React.createElement(Icon, {
     type: "zoom",
+    className: classNames({
+      disabled: scale >= maxScale
+    }),
     onClick: handleZoomIn
   }), props.type !== 'upload' && operations, props.type !== 'upload' && length && /*#__PURE__*/React.createElement(Icon, {
     type: "arrow-right",

package/es/input/style/index.css

@@ -259,6 +259,7 @@ textarea {
   padding: var(--kd-c-input-spacing-padding-vertical-small, 3px) var(--kd-c-input-spacing-padding-horizontal-small, 9px);
 }
 .kd-input-wrapper {
+  padding-left: var(--kd-c-input-wrapper-padding-left, 0px) !important;
   width: 100%;
   min-width: 0;
   border: var(--kd-c-input-sizing-border, 1px) solid var(--kd-c-input-color-border-disabled, var(--kd-g-color-border-strong, #d9d9d9));
@@ -306,7 +307,7 @@ textarea {
 }
 .kd-input-wrapper .kd-input {
   border: none;
-  padding-left: 0;
+  padding-left: var(--kd-c-input-padding-left, 9px);
   padding-right: 0;
   height: 100%;
 }
@@ -453,8 +454,8 @@ textarea {
   font-size: 14px;
   font-variant: tabular-nums;
   list-style: none;
-  -webkit-font-feature-settings: "tnum";
-          font-feature-settings: "tnum";
+  -webkit-font-feature-settings: 'tnum';
+          font-feature-settings: 'tnum';
   position: relative;
   display: -webkit-box;
   display: -ms-flexbox;