@king-design/react 3.6.0 → 3.6.2-beta.0

package/components/datepicker/useValueBase.js

@@ -189,8 +189,11 @@ export function useValueBase(_ref, _ref2, panel, shouldUpdateValue, updateValueO
       }
     }
     var valueStr = convertToValueString(_value);
-    instance.set('value', valueStr);
-    instance.resetKeywords();
+    // only trigger change event once
+    if (!isEqualArray(valueStr, instance.get('value'))) {
+      instance.set('value', valueStr);
+      instance.resetKeywords();
+    }
   }
   // TODO
   function setMoment() {

package/components/dropdown/constants.d.ts

@@ -0,0 +1,22 @@
+import { Component } from 'intact-react';
+import type { DropdownItem } from './item';
+export interface ItemEvents {
+    onFocusin: () => void;
+    onFocusout: () => void;
+    onShowMenu: () => void;
+    onHideMenu: () => void;
+    onSelect: () => void;
+}
+export declare enum Direction {
+    Up = 0,
+    Down = 1
+}
+export type MenuKeyboardMethods = {
+    reset: () => void;
+    focus: (item: DropdownItem) => void;
+};
+export type ItemComponent = Component<{
+    disabled: boolean;
+}>;
+export declare const ITEM_EVENTS = "ItemEvents";
+export declare const MENU_KEYBOARD = "MenuKeyboard";

package/components/dropdown/constants.js

@@ -0,0 +1,7 @@
+export var Direction;
+(function (Direction) {
+  Direction[Direction["Up"] = 0] = "Up";
+  Direction[Direction["Down"] = 1] = "Down";
+})(Direction || (Direction = {}));
+export var ITEM_EVENTS = 'ItemEvents';
+export var MENU_KEYBOARD = 'MenuKeyboard';

package/components/dropdown/item.js

@@ -4,7 +4,7 @@ import { __decorate } from "tslib";
 import { Component, inject } from 'intact-react';
 import template from './item.vdt';
 import { bind } from '../utils';
-import { useItemKeyboard } from './useKeyboard';
+import { useItemKeyboard } from './useItemKeyboard';
 import { DROPDOWN } from './dropdown';
 import { DROPDOWN_MENU } from './menu';
 import { Dropdown as ExportDropdown, DropdownMenu as ExportDropdownMenu } from '.';

package/components/dropdown/menu.js

@@ -6,7 +6,7 @@ import template from './menu.vdt';
 import { bind } from '../utils';
 import { DROPDOWN } from './dropdown';
 import { useTransition } from './useTransition';
-import { useMenuKeyboard } from './useKeyboard';
+import { useMenuKeyboard } from './useMenuKeyboard';
 import { useMouseOutsidable } from '../../hooks/useMouseOutsidable';
 import { useConfigContext } from '../config';
 import { usePositionForDropdownMenu } from './usePosition';

package/components/dropdown/useItemKeyboard.d.ts

@@ -0,0 +1,6 @@
+import { ItemEvents } from './constants';
+export declare function useItemKeyboard(itemEvents: Omit<ItemEvents, 'onFocusin' | 'onFocusout'>): {
+    onMouseEnter(e: MouseEvent): void;
+    onMouseLeave(e: MouseEvent): void;
+    isFocus: import("../../hooks/useState").State<boolean>;
+};

package/components/dropdown/useItemKeyboard.js

@@ -0,0 +1,32 @@
+import _extends from "@babel/runtime-corejs3/helpers/extends";
+import { useInstance, inject } from 'intact-react';
+import { useRecordItem } from '../../hooks/useRecordComponent';
+import { useState } from '../../hooks/useState';
+import { MENU_KEYBOARD, ITEM_EVENTS } from './constants';
+export function useItemKeyboard(itemEvents) {
+  var isFocus = useState(false);
+  var keyboard = inject(MENU_KEYBOARD);
+  var instance = useInstance();
+  useRecordItem(ITEM_EVENTS, instance, _extends({}, itemEvents, {
+    onFocusin: function onFocusin() {
+      isFocus.set(true);
+    },
+    onFocusout: function onFocusout() {
+      isFocus.set(false);
+    }
+  }));
+  return {
+    onMouseEnter: function onMouseEnter(e) {
+      instance.trigger('mouseenter', e);
+      if (instance.get('disabled')) return;
+      keyboard.focus(instance);
+    },
+    onMouseLeave: function onMouseLeave(e) {
+      instance.trigger('mouseleave', e);
+      keyboard.reset();
+      // If it is a virtual item, it needs to be reset manually because the DOM is reused.
+      isFocus.set(false);
+    },
+    isFocus: isFocus
+  };
+}

package/components/dropdown/useMenuKeyboard.d.ts

@@ -0,0 +1,2 @@
+import { Direction } from './constants';
+export declare function useMenuKeyboard(): readonly [readonly [() => void, () => void, (v: boolean) => boolean], (index: number, direction?: Direction) => void, () => void];

package/components/dropdown/{useKeyboard.js → useMenuKeyboard.js}

@@ -1,20 +1,12 @@
-import _extends from "@babel/runtime-corejs3/helpers/extends";
-import { onBeforeUpdate, onMounted, onUpdated, useInstance, findDomFromVNode, provide, inject, isComponentClass, isComponentFunction, hasVNodeChildren, hasMultipleChildren } from 'intact-react';
-import { useRecordParent, useRecordItem } from '../../hooks/useRecordComponent';
+import { onBeforeUpdate, onMounted, onUpdated, useInstance, findDomFromVNode, provide, isComponentClass, isComponentFunction, hasVNodeChildren, hasMultipleChildren } from 'intact-react';
+import { useRecordParent } from '../../hooks/useRecordComponent';
 import { useKeyboard } from '../../hooks/useKeyboard';
-import { useState } from '../../hooks/useState';
 import { isComponentVNode } from '../utils';
 import { DropdownItem } from './item';
 // can not import DropdownMenu from index.ts, otherwise it will cause circle reference
 // import {DropdownMenu} from './';
 import { DropdownMenu } from './menu';
-export var Direction;
-(function (Direction) {
-  Direction[Direction["Up"] = 0] = "Up";
-  Direction[Direction["Down"] = 1] = "Down";
-})(Direction || (Direction = {}));
-var ITEM_EVENTS = 'ItemEvents';
-var MENU_KEYBOARD = 'MenuKeyboard';
+import { ITEM_EVENTS, Direction, MENU_KEYBOARD } from './constants';
 export function useMenuKeyboard() {
   var items = [];
   var itemEvents = useRecordParent(ITEM_EVENTS, true);
@@ -121,33 +113,6 @@ export function useMenuKeyboard() {
     enter: makeEventCall('onSelect')
   }), focusByIndex, reset];
 }
-export function useItemKeyboard(itemEvents) {
-  var isFocus = useState(false);
-  var keyboard = inject(MENU_KEYBOARD);
-  var instance = useInstance();
-  useRecordItem(ITEM_EVENTS, instance, _extends({}, itemEvents, {
-    onFocusin: function onFocusin() {
-      isFocus.set(true);
-    },
-    onFocusout: function onFocusout() {
-      isFocus.set(false);
-    }
-  }));
-  return {
-    onMouseEnter: function onMouseEnter(e) {
-      instance.trigger('mouseenter', e);
-      if (instance.get('disabled')) return;
-      keyboard.focus(instance);
-    },
-    onMouseLeave: function onMouseLeave(e) {
-      instance.trigger('mouseleave', e);
-      keyboard.reset();
-      // If it is a virtual item, it needs to be reset manually because the DOM is reused.
-      isFocus.set(false);
-    },
-    isFocus: isFocus
-  };
-}
 function fixIndex(index, max) {
   if (index > max) {
     index = 0;

package/components/form/form.d.ts

@@ -32,6 +32,7 @@ export declare class Form extends Component<FormProps, FormEvents> {
     init(): void;
     validate(): Promise<boolean>;
     getFirstInvalidFormItem(): FormItem | undefined;
+    getAllInvalidFormItems(): FormItem[];
     submit(e: Event): void;
     reset(): void;
     private onSubmit;

package/components/form/form.js

@@ -3,6 +3,7 @@ import _concatInstanceProperty from "@babel/runtime-corejs3/core-js/instance/con
 import _Promise from "@babel/runtime-corejs3/core-js/promise";
 import _mapInstanceProperty from "@babel/runtime-corejs3/core-js/instance/map";
 import _findInstanceProperty from "@babel/runtime-corejs3/core-js/instance/find";
+import _filterInstanceProperty from "@babel/runtime-corejs3/core-js/instance/filter";
 import { __decorate } from "tslib";
 import { Component, provide } from 'intact-react';
 import template from './form.vdt';
@@ -59,6 +60,12 @@ export var Form = /*#__PURE__*/function (_Component) {
       }
     });
   };
+  _proto.getAllInvalidFormItems = function getAllInvalidFormItems() {
+    var _context4;
+    return _filterInstanceProperty(_context4 = this.items).call(_context4, function (item) {
+      return !item.isValid();
+    });
+  };
   _proto.submit = function submit(e) {
     var _this2 = this;
     this.validate().then(function (valid) {

package/components/form/index.spec.js

@@ -32,7 +32,7 @@ describe('Form', function () {
     return unmount();
   });
   it('validate', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee() {
-    var _mount, instance, element, form, item, input;
+    var _mount, instance, element, form, item, items, input;
     return _regeneratorRuntime.wrap(function _callee$(_context) {
       while (1) switch (_context.prev = _context.next) {
         case 0:
@@ -44,24 +44,26 @@ describe('Form', function () {
           expect(element.innerHTML).to.matchSnapshot();
           item = form.getFirstInvalidFormItem();
           expect(item.get('label')).to.eql('Input');
+          items = form.getAllInvalidFormItems();
+          expect(items.length).to.eql(10);
           instance.reset();
-          _context.next = 10;
+          _context.next = 12;
           return wait();
-        case 10:
+        case 12:
           expect(instance.get('model')).to.matchSnapshot();
           // validate on focusout
           input = element.querySelector('input');
           dispatchEvent(input, 'focus');
-          _context.next = 15;
+          _context.next = 17;
           return wait();
-        case 15:
+        case 17:
           expect(element.innerHTML).to.matchSnapshot();
           dispatchEvent(input, 'focusout');
-          _context.next = 19;
+          _context.next = 21;
           return wait();
-        case 19:
+        case 21:
           expect(element.innerHTML).to.matchSnapshot();
-        case 20:
+        case 22:
         case "end":
           return _context.stop();
       }

package/components/menu/index.spec.js

@@ -8,6 +8,7 @@ import BasicDemo from '~/components/menu/demos/basic';
 import CollapseDemo from '~/components/menu/demos/collapse';
 import AccordionDemo from '~/components/menu/demos/accordion';
 import CollapseArrowDemo from '~/components/menu/demos/showCollapseArrow';
+import HorizontalDemo from '~/components/menu/demos/horizontal';
 import { mount, unmount, dispatchEvent, getElement, wait } from '../../test/utils';
 import { Menu, MenuItem } from './';
 describe('Menu', function () {
@@ -271,4 +272,31 @@ describe('Menu', function () {
       }
     }, _callee7);
   })));
+  it('detecting pop-up position during rapid mouse hover over menus', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee8() {
+    var _mount8, instance, element, _element$querySelecto2, menu3, menu4, dropdownmenu1, top1, dropdownmenu2, top2;
+    return _regeneratorRuntime.wrap(function _callee8$(_context9) {
+      while (1) switch (_context9.prev = _context9.next) {
+        case 0:
+          _mount8 = mount(HorizontalDemo), instance = _mount8[0], element = _mount8[1];
+          _element$querySelecto2 = element.querySelectorAll('.k-menu-item-title'), menu3 = _element$querySelecto2[2], menu4 = _element$querySelecto2[3];
+          dispatchEvent(menu3, 'mouseenter');
+          _context9.next = 5;
+          return wait(500);
+        case 5:
+          dropdownmenu1 = getElement('.k-dropdown-menu');
+          top1 = dropdownmenu1.getBoundingClientRect().top;
+          dispatchEvent(menu3, 'mouseleave');
+          dispatchEvent(menu4, 'mouseenter');
+          _context9.next = 11;
+          return wait(1000);
+        case 11:
+          dropdownmenu2 = getElement('.k-dropdown-menu');
+          top2 = dropdownmenu2.getBoundingClientRect().top;
+          expect(top1).to.eql(top2);
+        case 14:
+        case "end":
+          return _context9.stop();
+      }
+    }, _callee8);
+  })));
 });

package/components/menu/styles.js

@@ -21,7 +21,7 @@ var defaults = {
   item: {
     height: '40px',
     padding: '0 12px',
-    bodyPadding: '0 4px',
+    bodyPadding: '4px',
     color: '#aeaeb9',
     hoverColor: '#fff',
     disabledColor: '#53535a',
@@ -115,7 +115,7 @@ export var makeMenuStyles = cache(function makeMenuStyles(k) {
   return /*#__PURE__*/css("&.", k, "-menu{width:", menu.width, ";transition:width ", menu.transition, ";background:", menu.bgColor, ";font-size:", menu.fontSize, ";position:relative;}.", k, "-icon{width:", menu.icon.width, ";margin-right:", menu.icon.gap, ";text-align:center;flex-shrink:0;}.", k, "-menu-header{height:", menu.header.height, ";padding:0 16px;color:", menu.header.color, ";font-size:", menu.header.fontSize, ";font-weight:bold;}.", k, "-menu-body{padding:", menu.item.bodyPadding, ";max-height:calc(100% - ", menu.header.height, ");overflow-y:auto;overflow-x:hidden;scrollbar-width:none;}.", k, "-menu-title{height:", menu.title.height, ";border-top:", menu.border, ";margin-top:4px;.", k, "-menu-name{transition:all ", menu.transition, ";height:", menu.title.height, ";color:", menu.title.color, ";font-weight:bold;}}.", k, "-menu-arrow-box{width:14px;height:60px;cursor:pointer;background:", menu.bgColor, ";border-radius:0 8px 8px 0;position:absolute;display:flex;align-items:center;justify-content:center;top:50%;left:calc(", menu.width, " - 2px);transition:left ", menu.transition, ";transform:translateY(-50%);border:", menu.border, ";border-left:none;.", k, "-icon{margin-right:0;}&:hover{.", k, "-menu-arrow:before{color:", menu.item.activeBgColor, ";}}}&.", k, "-light{border-right:1px solid ", theme.color.disabledBg, ";background:", menu.light.bgColor, ";.", k, "-menu-header{color:", menu.light.title.color, ";}.", k, "-menu-item{.", k, "-menu-item-title{color:", menu.light.item.color, ";&:hover{background:", menu.light.item.hoverBg, ";}}.", k, "-menu-item-arrow{color:", menu.light.item.color, ";}&.", k, "-highlighted{>.", k, "-menu-item-title{color:", menu.light.item.hoverColor, ";}}&.", k, "-disabled{>.", k, "-menu-item-title{color:", menu.light.item.disabledColor, "!important;}}}.", k, "-menu-title{border-top:", menu.light.border, ";.", k, "-menu-name{color:", menu.light.title.color, ";}}.", k, "-menu-arrow-box{background:", menu.light.bgColor, ";border:", menu.light.border, ";border-left:none;&:hover{.", k, "-menu-arrow:before{color:", menu.light.active.color, ";}}}.", k, "-menu:not(.", k, "-dropdown-menu){background:", menu.light.bgColor, ";}&.", k, "-horizontal{.", k, "-menu-header{border-right:", menu.light.border, ";}.", k, "-menu-body>.", k, "-menu-title{border-right:", menu.light.border, ";}}.", k, "-menu-item.", k, "-active{>.", k, "-menu-item-title{color:", menu.light.active.color, "!important;background:", menu.light.active.bgColor, ";}}.", k, "-sub-menu{.", k, "-menu-item-title,.", k, "-menu-item-arrow{color:", menu.light.item.subTitleColor, "!important;}}}", _mapInstanceProperty(sizes).call(sizes, function (size) {
     var styles = menu[size];
     return /*#__PURE__*/css("&.", k, "-", size, "{width:", styles.width, ";font-size:", styles.fontSize, ";.", k, "-menu{font-size:", styles.fontSize, ";}.", k, "-menu-arrow-box{left:calc(", styles.width, " - 2px);}}");
-  }), "&.", k, "-collapsed{width:calc(", menu.icon.width, " + (", getLeft(menu.item.padding), " + ", getLeft(menu.item.bodyPadding), ") * 2);.", k, "-icon{margin-right:0;}.", k, "-menu-item-arrow{display:none;}}&.", k, "-collapsed-arrow{width:0px;border-left:none;.", k, "-menu-header{padding:0;}.", k, "-menu-body{overflow:hidden;padding:0;}.", k, "-menu-arrow-box{left:0;.", k, "-menu-arrow:before{transform:rotateY(180deg);}}}&.", k, "-dropdown-menu{width:fit-content;min-width:", menu.dropdown.minWidth, ";.", k, "-menu-item-arrow{transform:rotate(-90deg);}}&.", k, "-horizontal{width:auto;display:flex;.", k, "-menu-body{display:flex;align-items:center;.", k, "-menu-title{border-top:none;border-right:", menu.border, ";}}}");
+  }), "&.", k, "-collapsed{width:calc(", menu.icon.width, " + (", getLeft(menu.item.padding), " + ", getLeft(menu.item.bodyPadding), ") * 2);.", k, "-icon{margin-right:0;}.", k, "-menu-item-arrow{display:none;}}&.", k, "-collapsed-arrow{width:0px;border-left:none;.", k, "-menu-header{padding:0;}.", k, "-menu-body{overflow:hidden;padding:0;}.", k, "-menu-arrow-box{left:0;.", k, "-menu-arrow:before{transform:rotateY(180deg);}}}&.", k, "-dropdown-menu{width:fit-content;min-width:", menu.dropdown.minWidth, ";position:absolute;.", k, "-menu-item-arrow{transform:rotate(-90deg);}}&.", k, "-horizontal{width:auto;display:flex;.", k, "-menu-body{display:flex;align-items:center;.", k, "-menu-title{border-top:none;border-right:", menu.border, ";}}}");
 });
 export var makeTitleStyles = cache(function makeTitleStyles(k) {
   var item = menu.item;