@kdcloudjs/kdesign 1.6.13 → 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;
@@ -318,6 +319,7 @@ declare const compDefaultProps: {
     ToolTip: {
         placement: string;
         trigger: string;
+        arrow: boolean;
     };
     Tabs: {
         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',
@@ -332,7 +333,8 @@ var compDefaultProps = {
   TreeNode: {},
   ToolTip: {
     placement: 'top',
-    trigger: 'hover'
+    trigger: 'hover',
+    arrow: true
   },
   Tabs: {
     type: 'line',

package/es/date-picker/range-picker.js

@@ -407,33 +407,27 @@ var InternalRangePicker = function InternalRangePicker(props, ref) {
   var triggerChange = function triggerChange(newValue, sourceIndex) {
     var values = newValue;
     var startValue = getValue(values, 0);
-    var endValue = getValue(values, 1); // >>>>> Format start & end values
+    var endValue = getValue(values, 1);
 
     if (startValue && endValue && isAfter(startValue, endValue)) {
-      if ( // WeekPicker only compare week
-      picker === 'week' && !isSameWeek(startValue, endValue) || // QuotaPicker only compare week
-      picker === 'quarter' && !isSameQuarter(startValue, endValue) || // Other non-TimePicker compare date
-      picker !== 'week' && picker !== 'quarter' && picker !== 'time' && !isSameDay(startValue, endValue)) {
-        // Clean up end date when start date is after end date
+      if (picker === 'week' && !isSameWeek(startValue, endValue) || picker === 'quarter' && !isSameQuarter(startValue, endValue) || picker !== 'week' && picker !== 'quarter' && picker !== 'time' && !isSameDay(startValue, endValue)) {
         if (sourceIndex === 0) {
           values = [startValue, null];
           endValue = null;
         } else {
           startValue = null;
           values = [null, endValue];
-        } // Clean up cache since invalidate
-
+        }
 
         openRecordsRef.current = _defineProperty({}, sourceIndex, true);
       } else if (picker === 'time' && order === true) {
-        // Reorder when in same date
         values = reorderValues(values);
       }
     }
 
     setSelectedValue(values);
     var startStr = values && values[0] ? formatDate(values[0], _format) : '';
-    var endStr = values && values[1] ? formatDate(values[1], _format) : ''; // 外部回调
+    var endStr = values && values[1] ? formatDate(values[1], _format) : '';
 
     if (onCalendarChange) {
       var info = {
@@ -447,15 +441,12 @@ var InternalRangePicker = function InternalRangePicker(props, ref) {
     var canTrigger = values === null || canStartValueTrigger && canEndValueTrigger;
 
     if (canTrigger) {
-      // Trigger onChange only when value is validate
       setInnerValue(values);
 
-      if (onChange && (!isEqual(getValue(selectedValue, 0), startValue) || !isEqual(getValue(selectedValue, 1), endValue))) {
+      if (onChange && (!isEqual(getValue(dateValue, 0), startValue) || !isEqual(getValue(dateValue, 1), endValue))) {
         onChange(values, [startStr, endStr]);
       }
-    } // >>>>> Open picker when
-    // Always open another picker if possible
-
+    }
 
     var nextOpenIndex = null;
 
@@ -466,7 +457,6 @@ var InternalRangePicker = function InternalRangePicker(props, ref) {
     }
 
     if (nextOpenIndex !== null && nextOpenIndex !== mergedActivePickerIndex && (!openRecordsRef.current[nextOpenIndex] || !getValue(values, nextOpenIndex)) && getValue(values, sourceIndex)) {
-      // Delay to focus to avoid input blur trigger expired selectedValues
       triggerOpenAndFocus(nextOpenIndex);
     } else {
       triggerOpen(false, sourceIndex);
@@ -766,7 +756,6 @@ var InternalRangePicker = function InternalRangePicker(props, ref) {
     trigger: 'click',
     prefixCls: "".concat(datePickerPrefixCls, "-panel"),
     arrow: false,
-    popperClassName: className,
     popperStyle: style,
     visible: mergedOpen,
     placement: 'bottomLeft',

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

@@ -218,13 +218,13 @@
   white-space: nowrap;
 }
 .kd-date-picker-input input::-webkit-input-placeholder {
-  color: var(--kd-c-date-picker-input-color-placeholder, var(--kd-g-color-text-secondary, #666));
+  color: var(--kd-c-date-picker-input-color-placeholder, #f2f2f2);
 }
 .kd-date-picker-input input::-moz-input-placeholder {
-  color: var(--kd-c-date-picker-input-color-placeholder, var(--kd-g-color-text-secondary, #666));
+  color: var(--kd-c-date-picker-input-color-placeholder, #f2f2f2);
 }
 .kd-date-picker-input input::-ms-input-placeholder {
-  color: var(--kd-c-date-picker-input-color-placeholder, var(--kd-g-color-text-secondary, #666));
+  color: var(--kd-c-date-picker-input-color-placeholder, #f2f2f2);
 }
 .kd-date-picker-input input:focus {
   -webkit-box-shadow: none;
@@ -236,22 +236,22 @@
   background: transparent;
 }
 .kd-date-picker-input input::-webkit-input-placeholder {
-  color: var(--kd-c-date-picker-input-color-disabled, var(--kd-g-color-disabled, #b2b2b2));
+  color: var(--kd-c-date-picker-input-color-placeholder, #f2f2f2);
 }
 .kd-date-picker-input input::-moz-placeholder {
-  color: var(--kd-c-date-picker-input-color-disabled, var(--kd-g-color-disabled, #b2b2b2));
+  color: var(--kd-c-date-picker-input-color-placeholder, #f2f2f2);
 }
 .kd-date-picker-input input:-ms-input-placeholder {
-  color: var(--kd-c-date-picker-input-color-disabled, var(--kd-g-color-disabled, #b2b2b2));
+  color: var(--kd-c-date-picker-input-color-placeholder, #f2f2f2);
 }
 .kd-date-picker-input input::-ms-input-placeholder {
-  color: var(--kd-c-date-picker-input-color-disabled, var(--kd-g-color-disabled, #b2b2b2));
+  color: var(--kd-c-date-picker-input-color-placeholder, #f2f2f2);
 }
 .kd-date-picker-input input::placeholder {
-  color: var(--kd-c-date-picker-input-color-disabled, var(--kd-g-color-disabled, #b2b2b2));
+  color: var(--kd-c-date-picker-input-color-placeholder, #f2f2f2);
 }
 .kd-date-picker-input-placeholder > input {
-  color: var(--kd-c-date-picker-input-color-placeholder, var(--kd-g-color-text-secondary, #666));
+  color: var(--kd-c-date-picker-input-color-placeholder, #f2f2f2);
 }
 .kd-date-picker-range {
   display: -webkit-inline-box;

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

@@ -63,7 +63,7 @@
       }
 
       &::placeholder {
-        color: @date-input-color-disabled;
+        color: @date-input-color-placeholder;
       }
     }
 

package/es/date-picker/style/token.less

@@ -6,7 +6,7 @@
 @date-color-background-checked: var(~'@{date-picker-custom-prefix}-color-background-checked', @color-theme);
 @date-wrapper-color-background: var(~'@{date-picker-custom-prefix}-wrapper-color-background', @color-background);
 @date-input-color: var(~'@{date-picker-custom-prefix}-input-color', @color-text-primary);
-@date-input-color-placeholder: var(~'@{date-picker-custom-prefix}-input-color-placeholder', @color-text-secondary);
+@date-input-color-placeholder: var(~'@{date-picker-custom-prefix}-input-color-placeholder', #f2f2f2);
 @date-input-underline-color: var(~'@{date-picker-custom-prefix}-input-underline-color', #999);
 @date-input-color-border: var(~'@{date-picker-custom-prefix}-input-color-border', @color-border-strong);
 @date-input-color-disabled: var(~'@{date-picker-custom-prefix}-input-color-disabled', @color-disabled);

package/es/form/Field.js

@@ -1,5 +1,6 @@
 import _extends from "@babel/runtime-corejs3/helpers/extends";
 import _defineProperty from "@babel/runtime-corejs3/helpers/defineProperty";
+import _toConsumableArray from "@babel/runtime-corejs3/helpers/toConsumableArray";
 import _typeof from "@babel/runtime-corejs3/helpers/typeof";
 import _slicedToArray from "@babel/runtime-corejs3/helpers/slicedToArray";
 import _Object$getOwnPropertySymbols from "@babel/runtime-corejs3/core-js-stable/object/get-own-property-symbols";
@@ -99,13 +100,13 @@ var Field = function Field(props) {
       vertical = fieldContext.vertical,
       getDefaultValue = fieldContext.getDefaultValue,
       local = fieldContext.local,
-      setRules = fieldContext.setRules,
       formDisabled = fieldContext.disabled;
 
   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,
@@ -118,8 +119,7 @@ var Field = function Field(props) {
       labelWidth = props.labelWidth,
       labelAlign = props.labelAlign,
       required = props.required,
-      _props$rules = props.rules,
-      rules = _props$rules === void 0 ? [] : _props$rules,
+      rules = props.rules,
       wrapperWidth = props.wrapperWidth,
       validateTrigger = props.validateTrigger,
       defaultValue = props.defaultValue,
@@ -163,7 +163,7 @@ var Field = function Field(props) {
     }
   };
 
-  var rulesRequired = rules.some(function (rule) {
+  var mergedRequired = required || (rules === null || rules === void 0 ? void 0 : rules.some(function (rule) {
     if (rule && _typeof(rule) === 'object' && rule.required) {
       return true;
     }
@@ -174,50 +174,57 @@ var Field = function Field(props) {
     }
 
     return false;
-  });
-  var mergedRequired = required || rulesRequired;
+  }));
 
-  if (Array.isArray(rules) && !rules.some(function (rule) {
-    return Object.prototype.hasOwnProperty.call(rule, 'required');
-  }) && required) {
-    var _context2;
+  var mergeRule = function mergeRule() {
+    var mergeRules = Array.isArray(rules) ? _toConsumableArray(rules) : [];
 
-    rules.push({
-      required: true,
-      message: _concatInstanceProperty(_context2 = "".concat(local && local.requiredMessage)).call(_context2, label)
-    });
-  }
+    if (!mergeRules.some(function (rule) {
+      return Object.prototype.hasOwnProperty.call(rule, 'required');
+    }) && required) {
+      var _context2;
 
-  var mergeRules = rules;
+      mergeRules.push({
+        required: true,
+        message: _concatInstanceProperty(_context2 = "".concat(local && local.requiredMessage)).call(_context2, label)
+      });
+    }
 
-  if (mergeRules.length) {
-    mergeRules = _mapInstanceProperty(rules).call(rules, function (r) {
-      if (typeof r === 'function') {
-        return r(fieldContext);
-      }
+    if (mergeRules.length) {
+      mergeRules = _mapInstanceProperty(mergeRules).call(mergeRules, function (r) {
+        if (typeof r === 'function') {
+          return r(fieldContext);
+        }
 
-      return r;
-    });
-  }
+        return r;
+      });
+    }
+
+    return mergeRules;
+  };
 
-  var itemRef = React.useRef({
+  var item = {
     onStoreChange: onStoreChange,
     meta: {
-      rules: mergeRules,
+      rules: mergeRule(),
       name: name,
       trigger: validateTrigger
     }
-  });
+  };
+  var itemRef = React.useRef(item);
+  itemRef.current = item;
   useEffect(function () {
-    registerField(name, itemRef.current);
+    registerField(name, itemRef);
 
     if (defaultValue !== undefined) {
       setDefaultValues(_defineProperty({}, name, defaultValue));
     }
   }, [name, registerField]);
   useEffect(function () {
-    setRules(name, mergeRules);
-  }, [mergedRequired, name, mergeRules]);
+    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);
@@ -263,7 +270,7 @@ var Field = function Field(props) {
 
     var faChange = fa.onChange,
         faDisabled = fa.disabled,
-        rest = __rest(fa, ["onChange", "disabled"]);
+        faRest = __rest(fa, ["onChange", "disabled"]);
 
     var _ch$props = ch.props,
         chChange = _ch$props.onChange,
@@ -296,10 +303,37 @@ var Field = function Field(props) {
       forceUpdate();
     }
 
-    return _extends(_extends({}, rest), (_extends3 = {
+    var mergeResult = _extends(_extends({}, faRest), (_extends3 = {
       onChange: onChange,
       defaultValue: defaultValue
     }, _defineProperty(_extends3, innerValuePropName, fieldValue), _defineProperty(_extends3, "disabled", chDisabled !== undefined ? chDisabled : faDisabled !== undefined ? faDisabled : formDisabled), _extends3));
+
+    var mergeEventArray = [];
+
+    if (validateTrigger) {
+      if (Array.isArray(validateTrigger)) {
+        mergeEventArray.push.apply(mergeEventArray, _toConsumableArray(_filterInstanceProperty(validateTrigger).call(validateTrigger, function (v) {
+          return v !== DEFAULT_TRIGGER;
+        })));
+      } else if (validateTrigger !== DEFAULT_TRIGGER) {
+        mergeEventArray.push(validateTrigger);
+      }
+    }
+
+    mergeEventArray.forEach(function (eventName) {
+      mergeResult[eventName] = function () {
+        var _a;
+
+        if ((fa === null || fa === void 0 ? void 0 : fa[eventName]) && typeof fa[eventName] === 'function') {
+          fa[eventName]();
+        }
+
+        if (((_a = ch.props) === null || _a === void 0 ? void 0 : _a[eventName]) && typeof ch.props[eventName] === 'function') {
+          ch.props[eventName]();
+        }
+      };
+    });
+    return mergeResult;
   };
 
   return /*#__PURE__*/React.createElement("div", {

package/es/form/FieldContext.js

@@ -14,7 +14,6 @@ var context = /*#__PURE__*/React.createContext({
   resetFields: warningFunc,
   setFieldsValue: warningFunc,
   setFieldValue: warningFunc,
-  setRules: warningFunc,
   submit: warningFunc,
   validateFields: warningFunc,
   getInternalHooks: function getInternalHooks() {
@@ -23,6 +22,7 @@ var context = /*#__PURE__*/React.createContext({
       dispatch: warningFunc,
       setDefaultValues: warningFunc,
       registerField: warningFunc,
+      deleteField: warningFunc,
       setCallbacks: warningFunc
     };
   }