@king-design/react 2.1.4 → 2.1.6

package/components/dropdown/item.js

@@ -13,19 +13,25 @@ var typeDefs = {
   hideOnSelect: Boolean,
   _isFocus: null
 };
+
 var defaults = function defaults() {
   return {
     hideOnSelect: true
   };
 };
+
 export var DropdownItem = /*#__PURE__*/function (_Component) {
   _inheritsLoose(DropdownItem, _Component);
+
   function DropdownItem() {
     var _context;
+
     var _this;
+
     for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
       args[_key] = arguments[_key];
     }
+
     _this = _Component.call.apply(_Component, _concatInstanceProperty(_context = [this]).call(_context, args)) || this;
     _this.parentDropdown = void 0;
     _this.dropdown = null;
@@ -33,28 +39,35 @@ export var DropdownItem = /*#__PURE__*/function (_Component) {
     _this.dropdownMenu = null;
     return _this;
   }
+
   var _proto = DropdownItem.prototype;
+
   _proto.init = function init() {
     this.dropdown = inject(DROPDOWN);
     this.parentDropdown = this.hasSubMenu();
     this.dropdownMenu = inject(DROPDOWN_MENU);
     this.keyboard = useKeyboardForDropdownItem(this);
   };
+
   _proto.select = function select() {
-    if (this.parentDropdown) return;
-    // trigger select event firstly for Cascader update values
+    if (this.parentDropdown) return; // trigger select event firstly for Cascader update values
+
     this.trigger('select');
+
     if (this.get('hideOnSelect')) {
       // hide all dropdowns
       var dropdown = this.dropdown;
+
       do {
         dropdown.hide(true);
       } while (dropdown = dropdown.dropdown);
     }
   };
+
   _proto.hasSubMenu = function hasSubMenu() {
     // wrapped by Dropdown rather than DropdownMenu
     var parent = this.$senior;
+
     while (parent) {
       // Tooltip extends Dropdown, it's also a instance of Dropdown
       // so use constructor to detect
@@ -62,37 +75,45 @@ export var DropdownItem = /*#__PURE__*/function (_Component) {
       if (parent.constructor === ExportDropdownMenu) {
         return;
       }
+
       if (parent.constructor === ExportDropdown) {
         return parent;
       }
+
       parent = parent.$senior;
     }
   };
+
   _proto.onClick = function onClick(e) {
-    if (this.get('disabled')) return;
-    // Some cases, the item may been removed after click immediately
+    if (this.get('disabled')) return; // Some cases, the item may been removed after click immediately
     // and the menu will hide, because it can't detect it contains
     // the removed item.
     // Set the ignore flag to prevent menu from hidding
     // 
     // @Change Cascader need click item to toggle show an hide
     // (e as IgnoreClickEvent)._ignore = true;
+
     this.trigger('click', e);
     this.select();
   };
+
   return DropdownItem;
 }(Component);
 DropdownItem.template = template;
 DropdownItem.typeDefs = typeDefs;
 DropdownItem.defaults = defaults;
+
 __decorate([bind], DropdownItem.prototype, "onClick", null);
+
 function useKeyboardForDropdownItem(instance) {
   var dropdownMenu = inject(DROPDOWN_MENU);
+
   var showMenu = function showMenu() {
     if (instance.parentDropdown) {
       instance.parentDropdown.show(true);
     }
   };
+
   return useItemKeyboard({
     onShowMenu: showMenu,
     onHideMenu: function onHideMenu() {

package/components/dropdown/item.vdt.js

@@ -4,15 +4,18 @@ import { getRestProps } from '../utils';
 import { makeItemStyles } from './styles';
 export default function ($props, $blocks, $__proto__) {
   var _classNameObj;
+
   $blocks || ($blocks = {});
   $props || ($props = {});
   var $this = this;
+
   var _this$get = this.get(),
-    children = _this$get.children,
-    disabled = _this$get.disabled,
-    className = _this$get.className,
-    hideOnSelect = _this$get.hideOnSelect,
-    _isFocus = _this$get._isFocus;
+      children = _this$get.children,
+      disabled = _this$get.disabled,
+      className = _this$get.className,
+      hideOnSelect = _this$get.hideOnSelect,
+      _isFocus = _this$get._isFocus;
+
   var classNameObj = (_classNameObj = {
     'k-dropdown-item': true,
     'k-disabled': disabled

package/components/dropdown/menu.js

@@ -12,12 +12,16 @@ import { usePositionForDropdownMenu } from './usePosition';
 export var DROPDOWN_MENU = 'DropdownMenu';
 export var DropdownMenu = /*#__PURE__*/function (_Component) {
   _inheritsLoose(DropdownMenu, _Component);
+
   function DropdownMenu() {
     var _context;
+
     var _this;
+
     for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
       args[_key] = arguments[_key];
     }
+
     _this = _Component.call.apply(_Component, _concatInstanceProperty(_context = [this]).call(_context, args)) || this;
     _this.elementRef = createRef();
     _this.dropdown = inject(DROPDOWN);
@@ -27,56 +31,69 @@ export var DropdownMenu = /*#__PURE__*/function (_Component) {
     });
     return _this;
   }
+
   var _proto = DropdownMenu.prototype;
+
   _proto.init = function init() {
     provide(DROPDOWN_MENU, this);
     useMouseOutsidable(this.elementRef);
     usePositionForDropdownMenu();
-  }
-  // no matter what the trigger is, we should show menu when enter into it.
+  } // no matter what the trigger is, we should show menu when enter into it.
   ;
+
   _proto.onMouseEnter = function onMouseEnter(e) {
     var dropdown = this.dropdown;
     dropdown.show();
     dropdown.trigger('mouseenter', e);
   };
+
   _proto.onMouseLeave = function onMouseLeave(e) {
     var dropdown = this.dropdown;
     dropdown.hide();
     dropdown.trigger('mouseleave', e);
   };
+
   return DropdownMenu;
 }(Component);
 DropdownMenu.template = template;
+
 __decorate([bind], DropdownMenu.prototype, "onMouseEnter", null);
+
 __decorate([bind], DropdownMenu.prototype, "onMouseLeave", null);
+
 function useKeyboardForDropdownMenu(dropdown) {
   var parentDropdownMenu = inject(DROPDOWN_MENU, null);
+
   var _useMenuKeyboard = useMenuKeyboard(),
-    _useMenuKeyboard$ = _useMenuKeyboard[0],
-    addKeydown = _useMenuKeyboard$[0],
-    removeKeydown = _useMenuKeyboard$[1],
-    lock = _useMenuKeyboard$[2],
-    focusByIndex = _useMenuKeyboard[1],
-    reset = _useMenuKeyboard[2];
+      _useMenuKeyboard$ = _useMenuKeyboard[0],
+      addKeydown = _useMenuKeyboard$[0],
+      removeKeydown = _useMenuKeyboard$[1],
+      lock = _useMenuKeyboard$[2],
+      focusByIndex = _useMenuKeyboard[1],
+      reset = _useMenuKeyboard[2];
+
   var onShow = function onShow() {
-    addKeydown();
-    // lock parent dropdown menu, prevent it from operating by keyboard
+    addKeydown(); // lock parent dropdown menu, prevent it from operating by keyboard
+
     parentDropdownMenu && parentDropdownMenu.keyboard.lock(true);
   };
+
   var onHide = function onHide() {
     reset();
     removeKeydown();
     parentDropdownMenu && parentDropdownMenu.keyboard.lock(false);
   };
+
   var focus = function focus() {
     return focusByIndex(0);
-  };
-  // In Cascader the menu may have been replaced by another menu, in this case,
+  }; // In Cascader the menu may have been replaced by another menu, in this case,
   // if the dropdown has showed while we mounted the menu, add keydown listener
+
+
   if (dropdown.get('value')) {
     onShow();
   }
+
   dropdown.on('show', onShow);
   dropdown.on('hide', onHide);
   dropdown.on('shouldFocus', focus);

package/components/dropdown/menu.vdt.js

@@ -4,24 +4,30 @@ import { Transition } from 'intact';
 import { makeMenuStyles } from './styles';
 export default function ($props, $blocks, $__proto__) {
   var _classNameObj;
+
   $blocks || ($blocks = {});
   $props || ($props = {});
   var $this = this;
   var _$blocks = {};
   var __$blocks = {};
+
   var _this$dropdown$get = this.dropdown.get(),
-    value = _this$dropdown$get.value,
-    trigger = _this$dropdown$get.trigger,
-    container = _this$dropdown$get.container;
+      value = _this$dropdown$get.value,
+      trigger = _this$dropdown$get.trigger,
+      container = _this$dropdown$get.container;
+
   var _this$get = this.get(),
-    children = _this$get.children,
-    className = _this$get.className;
+      children = _this$get.children,
+      className = _this$get.className;
+
   var classNameObj = (_classNameObj = {
     'k-dropdown-menu': true
   }, _classNameObj[className] = className, _classNameObj[$props.className] = $props.className, _classNameObj[makeMenuStyles()] = true, _classNameObj);
+
   var transition = $props.transition || _extends({
     css: false
   }, this.transition);
+
   return _$cc(Transition, _extends({
     'show': 'value' in $props ? $props.value : !!value,
     'appear': true
@@ -30,9 +36,11 @@ export default function ($props, $blocks, $__proto__) {
       return children;
     }, __$blocks['children'] = function ($super, data) {
       var block = $blocks['children'];
+
       var callBlock = function callBlock() {
         return _$blocks['children'].call($this, $super, data);
       };
+
       return block ? block.call($this, callBlock, data) : callBlock();
     }, __$blocks['children'](_$no)), 0, _$cn(classNameObj), {
       'ev-mouseenter': this.onMouseEnter,

package/components/dropdown/styles.js

@@ -7,30 +7,39 @@ var defaults = {
     get height() {
       return theme.default.height;
     },
+
     get padding() {
       return "0 " + theme.default.padding;
     },
+
     get hoverBgColor() {
       return theme.color.bg;
     },
+
     // disabled
     get disabledBgColor() {
       return theme.color.disabledBg;
     },
+
     get disabledColor() {
       return theme.color.disabled;
     }
+
   },
   menu: {
     minWidth: '100px',
     bgColor: '#fff',
+
     get borderRadius() {
       return theme.borderRadius;
     },
+
     fontSize: '12px',
+
     get zIndex() {
       return theme.midZIndex;
     }
+
   }
 };
 var dropdown;

package/components/dropdown/useKeyboard.d.ts

@@ -10,11 +10,11 @@ export declare enum Direction {
     Up = 0,
     Down = 1
 }
-export type MenuKeyboardMethods = {
+export declare type MenuKeyboardMethods = {
     reset: () => void;
     focus: (item: DropdownItem) => void;
 };
-export declare function useMenuKeyboard(): readonly [readonly [() => void, () => void, (v: boolean) => boolean], (index: number, direction?: Direction) => void, () => void];
+export declare function useMenuKeyboard(): readonly [readonly [() => void, () => void, (v: boolean) => boolean], (index: number, direction?: Direction | undefined) => void, () => void];
 export declare function useItemKeyboard(itemEvents: Omit<ItemEvents, 'onFocusin' | 'onFocusout'>): {
     onMouseEnter(e: MouseEvent): void;
     onMouseLeave(e: MouseEvent): void;

package/components/dropdown/useKeyboard.js

@@ -4,34 +4,39 @@ import { useRecordParent, useRecordItem } 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 { 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';
 export function useMenuKeyboard() {
   var items = [];
   var itemEvents = useRecordParent(ITEM_EVENTS, true);
   var instance = useInstance();
-  var focusIndex = -1;
-  // we can't use the way that DropdownItem push itself to DropdownMenu to collect the items
+  var focusIndex = -1; // we can't use the way that DropdownItem push itself to DropdownMenu to collect the items
   // because it can't guarantee the order
+
   function collect() {
     items.length = 0;
     var children = instance.$lastInput;
+
     var loop = function loop(vNode) {
       if (isComponentVNode(vNode, DropdownItem)) {
         items.push(vNode.children);
       } else {
         var _children = vNode.children;
+
         if (isComponentClass(vNode)) {
           var tag = vNode.tag;
+
           if (tag !== DropdownMenu && !(tag.prototype instanceof DropdownMenu)) {
             loop(_children.$lastInput);
           }
@@ -44,9 +49,11 @@ export function useMenuKeyboard() {
         }
       }
     };
+
     loop(children);
     return children;
   }
+
   onMounted(collect);
   var oldFocusIndex;
   onBeforeUpdate(function () {
@@ -58,43 +65,52 @@ export function useMenuKeyboard() {
     if (oldFocusIndex < 0) return;
     focusByIndex(oldFocusIndex, Direction.Up);
   });
+
   function next(e) {
     e.preventDefault();
     focusByIndex(focusIndex + 1, Direction.Down);
   }
+
   function prev(e) {
     e.preventDefault();
     focusByIndex(focusIndex - 1, Direction.Up);
   }
+
   function focusByIndex(index, direction) {
     var max = items.length - 1;
     index = fixIndex(index, max);
     reset();
     var item = items[index];
     var i = 0;
+
     while (i <= max && item && item.get('disabled')) {
       index = fixIndex(direction === Direction.Down ? index + 1 : index - 1, max);
       item = items[index];
       i++;
-    }
-    // all items are disabled
+    } // all items are disabled
+
+
     if (i > max) return;
     focusIndex = index;
     focusItem(item);
   }
+
   function focusItem(item) {
     itemEvents.get(item).onFocusin();
     var el = findDomFromVNode(item.$lastInput, true);
     var menuEl = findDomFromVNode(instance.$vNode, false);
     scrollToView(el, menuEl);
   }
+
   function reset() {
     var item = items[focusIndex];
+
     if (focusIndex > -1 && item) {
       itemEvents.get(item).onFocusout();
       focusIndex = -1;
     }
   }
+
   function makeEventCall(name) {
     return function (e) {
       if (focusIndex < 0) return;
@@ -102,12 +118,13 @@ export function useMenuKeyboard() {
       itemEvents.get(items[focusIndex])[name]();
     };
   }
+
   provide(MENU_KEYBOARD, {
     reset: reset,
     focus: function focus(item) {
       // reset();
-      var index = items.indexOf(item);
-      // if (index === -1) debugger
+      var index = items.indexOf(item); // if (index === -1) debugger
+
       focusIndex = index;
       focusItem(item);
     }
@@ -145,26 +162,31 @@ export function useItemKeyboard(itemEvents) {
     isFocus: isFocus
   };
 }
+
 function fixIndex(index, max) {
   if (index > max) {
     index = 0;
   } else if (index < 0) {
     index = max;
   }
+
   return index;
 }
+
 function scrollToView(el, menuEl) {
   var elRect = el.getBoundingClientRect();
   var pEl = getScrollParent(el.parentElement, menuEl);
   var pElRect = pEl.getBoundingClientRect();
   var bottomOverflowDistance = elRect.bottom - pElRect.bottom;
   var topOverflowDistance = elRect.top - pElRect.top;
+
   if (bottomOverflowDistance > 0) {
     pEl.scrollTop += bottomOverflowDistance;
   } else if (topOverflowDistance < 0) {
     pEl.scrollTop += topOverflowDistance;
   }
 }
+
 function getScrollParent(node, breakEl) {
   if (node === breakEl || node.scrollHeight > node.clientHeight) return node;
   return getScrollParent(node.parentElement, breakEl);

package/components/dropdown/usePosition.d.ts

@@ -1,5 +1,5 @@
 import { Feedback } from '../position';
-export type FeedbackCallback = (feedback: Feedback) => void;
+export declare type FeedbackCallback = (feedback: Feedback) => void;
 export declare function usePosition(): {
     handle: (callback: FeedbackCallback) => void;
     positioned: {

package/components/dropdown/usePosition.js

@@ -15,31 +15,29 @@ export function usePosition() {
   });
   ['of', 'position'].forEach(function (item) {
     instance.watch(item, function (newValue, oldValue) {
-      if (!instance.get('value') ||
-      // return if object is the same
-      isObject(newValue) && isObject(oldValue) &&
-      // is not event object
+      if (!instance.get('value') || // return if object is the same
+      isObject(newValue) && isObject(oldValue) && // is not event object
       !(newValue instanceof Event) && isEqualObject(newValue, oldValue)) return;
       handle(noop);
     }, {
       presented: true,
       inited: true
     });
-  });
-  // watch container, it is not commonly used
+  }); // watch container, it is not commonly used
+
   instance.watch('container', function (newValue, oldValue) {
-    if (!instance.get('value') ||
-    // return if function is the same. Not rigorous!
+    if (!instance.get('value') || // return if function is the same. Not rigorous!
     isFunction(newValue) && isFunction(oldValue) && newValue.toString() === oldValue.toString()) return;
     handle(noop);
   }, {
     presented: true,
     inited: true
-  });
-  // if the dropdown is nested, we must show child after parent has positioned
+  }); // if the dropdown is nested, we must show child after parent has positioned
+
   function p(ofElement, parentFeedback) {
     var feedback;
     var pos = instance.get('position');
+
     switch (pos) {
       case 'left':
       case 'left':
@@ -48,18 +46,21 @@ export function usePosition() {
           at: 'left center'
         };
         break;
+
       case 'bottom':
         pos = {
           my: 'center top+10',
           at: 'center bottom'
         };
         break;
+
       case 'right':
         pos = {
           my: 'left+10 center',
           at: 'right center'
         };
         break;
+
       case 'top':
         pos = {
           my: 'center bottom-10',
@@ -67,6 +68,7 @@ export function usePosition() {
         };
         break;
     }
+
     position(findDomFromVNode(instance.menuVNode, true), _extends({
       my: 'left top+8',
       at: 'left bottom',
@@ -81,26 +83,32 @@ export function usePosition() {
     instance.trigger('positioned', parentFeedback || feedback);
     return parentFeedback || feedback;
   }
+
   function handle(callback) {
     var _of = instance.get('of');
+
     if (_of === 'parent') {
       var parent = instance.dropdown;
+
       if (process.env.NODE_ENV !== 'production') {
         if (!parent) {
           throw new Error('The dropdown has not parent, so you can not use `parent` as `of`.');
         }
       }
+
       var ofElement = findDomFromVNode(parent.menuVNode, true);
+
       if (parent.positionHook.positioned.value) {
         callback(p(ofElement, null));
       } else {
         // wait the parent has positioned
         var fn = function fn(feedback) {
-          parent.off('positioned', fn);
-          // let the child menu has the same transtion with parent menu,
+          parent.off('positioned', fn); // let the child menu has the same transtion with parent menu,
           // when them show together
+
           callback(p(ofElement, feedback));
         };
+
         parent.on('positioned', fn);
       }
     } else if (_of === 'self') {
@@ -109,6 +117,7 @@ export function usePosition() {
       callback(p(_of, null));
     }
   }
+
   return {
     handle: handle,
     positioned: positioned
@@ -121,6 +130,7 @@ export function usePositionForDropdownMenu() {
    * so, we must reset the positioned.value beforeUnmount
    * #956
    */
+
   onBeforeUnmount(function () {
     instance.dropdown.positionHook.positioned.value = false;
   });

package/components/dropdown/useTransition.js

@@ -1,6 +1,7 @@
 import { addTransitionClass, removeTransitionClass, whenTransitionEnds } from 'intact-react';
 export function useTransition(getFeedback) {
   var transition = 'k-slidedown';
+
   function onEnter(el, done) {
     getFeedback(function (feedback) {
       transition = getTransition(feedback);
@@ -16,9 +17,11 @@ export function useTransition(getFeedback) {
       });
     });
   }
+
   function onEnterCancelled(el) {
     removeTransitionClass(el, transition + "-enter-active");
   }
+
   function onLeave(el, done) {
     // maybe the position has changed, so we re-get it
     getFeedback(function (feedback) {
@@ -31,10 +34,12 @@ export function useTransition(getFeedback) {
       });
     });
   }
+
   function onLeaveCancelled(el) {
     removeTransitionClass(el, transition + "-leave-to");
     removeTransitionClass(el, transition + "-leave-active");
   }
+
   return {
     onEnter: onEnter,
     onEnterCancelled: onEnterCancelled,
@@ -42,9 +47,11 @@ export function useTransition(getFeedback) {
     onLeaveCancelled: onLeaveCancelled
   };
 }
+
 function getTransition(feedback) {
   var horizontal = feedback.horizontal;
   var vertical = feedback.vertical;
+
   if (feedback.important === 'horizontal') {
     if (horizontal === 'left') {
       return 'k-slideright';
@@ -66,5 +73,6 @@ function getTransition(feedback) {
       return 'k-slideleft';
     }
   }
+
   return 'k-slidedown';
 }

package/components/editable/index.d.ts

@@ -1,6 +1,6 @@
 import { Component, TypeDefs } from 'intact-react';
 import type { Events } from '../types';
-type Value = string | number;
+declare type Value = string | number;
 export interface EditableProps<V extends Value = Value> {
     editing?: boolean;
     value?: V;