@king-design/react 2.0.0-beta.0

package/components/dropdown/menu.js

@@ -0,0 +1,108 @@
+import _inheritsLoose from "@babel/runtime-corejs3/helpers/inheritsLoose";
+import _concatInstanceProperty from "@babel/runtime-corejs3/core-js/instance/concat";
+import { __decorate } from "tslib";
+import { Component, provide, inject, createRef, onUnmounted } from 'intact-react';
+import template from './menu.vdt';
+import { bind } from '../utils';
+import { DROPDOWN } from './dropdown';
+import { useTransition } from './useTransition';
+import { useMenuKeyboard } from './useKeyboard';
+import { useMouseOutsidable } from '../../hooks/useMouseOutsidable';
+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);
+    _this.keyboard = useKeyboardForDropdownMenu(_this.dropdown);
+    _this.transition = useTransition(function (callback) {
+      return _this.dropdown.position(callback);
+    });
+    return _this;
+  }
+
+  var _proto = DropdownMenu.prototype;
+
+  _proto.init = function init() {
+    provide(DROPDOWN_MENU, this);
+    useMouseOutsidable(this.elementRef);
+  } // 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];
+
+  var onShow = function onShow() {
+    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,
+  // if the dropdown has showed on mount the menu, add keydown listener
+
+
+  if (dropdown.get('value')) {
+    onShow();
+  }
+
+  dropdown.on('show', onShow);
+  dropdown.on('hide', onHide);
+  dropdown.on('shouldFocus', focus);
+  onUnmounted(function () {
+    dropdown.off('show', onShow);
+    dropdown.off('hide', onHide);
+    dropdown.off('shouldFocus', focus);
+  });
+  return {
+    lock: lock
+  };
+}
+
+export {normalize} from 'intact-react';

package/components/dropdown/menu.vdt.js

@@ -0,0 +1,53 @@
+import _extends from "@babel/runtime-corejs3/helpers/extends";
+import { createUnknownComponentVNode as _$cc, createElementVNode as _$ce, noop as _$no, className as _$cn } from 'intact-react';
+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;
+
+  var _this$get = this.get(),
+      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
+  }, transition, {
+    'children': _$ce(2, 'div', (_$blocks['children'] = function ($super) {
+      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,
+      'ev-mouseleave': trigger === 'hover' ? this.onMouseLeave : null
+    }, null, this.elementRef)
+  }));
+}
+;
+
+export {normalize} from 'intact-react';

package/components/dropdown/styles.d.ts

@@ -0,0 +1,6 @@
+import '../../styles/global';
+export declare function makeMenuStyles(): string;
+export declare function makeItemStyles(): string;
+
+
+export {normalize} from 'intact-react';

package/components/dropdown/styles.js

@@ -0,0 +1,58 @@
+import { css } from '@emotion/css';
+import { theme, setDefault } from '../../styles/theme';
+import { deepDefaults, getLeft, getRight } from '../../styles/utils';
+import '../../styles/global';
+var defaults = {
+  item: {
+    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;
+setDefault(function () {
+  dropdown = deepDefaults(theme, {
+    dropdown: defaults
+  }).dropdown;
+});
+export function makeMenuStyles() {
+  return /*#__PURE__*/css("position:absolute;min-width:", dropdown.menu.minWidth, ";background:", dropdown.menu.bgColor, ";border-radius:", dropdown.menu.borderRadius, ";box-shadow:", theme.boxShadow, ";font-size:", dropdown.menu.fontSize, ";z-index:", dropdown.menu.zIndex, ";top:0;left:0;.k-dropdown{display:block;}");
+}
+export function makeItemStyles() {
+  return /*#__PURE__*/css("padding:", dropdown.item.padding, ";cursor:pointer;white-space:nowrap;height:", dropdown.item.height, ";line-height:", dropdown.item.height, ";&.k-hover{background:", dropdown.item.hoverBgColor, ";}&:first-of-type{border-radius:", dropdown.menu.borderRadius, " ", dropdown.menu.borderRadius, " 0 0;}&:last-of-type{border-radius:0 0 ", dropdown.menu.borderRadius, " ", dropdown.menu.borderRadius, ";}&.k-disabled{background:", dropdown.item.disabledBgColor, ";color:", dropdown.item.disabledColor, ";cursor:not-allowed;}.k-checkbox,.k-radio{display:block;margin:0 -", getRight(dropdown.item.padding), " 0 -", getLeft(dropdown.item.padding), ";padding:", dropdown.item.padding, ";}.k-checkbox-wrapper,.k-radio-wrapper{vertical-align:text-bottom;}.k-checkbox-text,.k-radio-text{vertical-align:baseline;}");
+}
+
+export {normalize} from 'intact-react';

package/components/dropdown/useKeyboard.d.ts

@@ -0,0 +1,26 @@
+import { DropdownItem } from './item';
+interface ItemEvents {
+    onFocusin: () => void;
+    onFocusout: () => void;
+    onShowMenu: () => void;
+    onHideMenu: () => void;
+    onSelect: () => void;
+}
+export declare enum Direction {
+    Up = 0,
+    Down = 1
+}
+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 | undefined) => void, () => void];
+export declare function useItemKeyboard(itemEvents: Omit<ItemEvents, 'onFocusin' | 'onFocusout'>): {
+    onMouseEnter(e: MouseEvent): void;
+    onMouseLeave(e: MouseEvent): void;
+    isFocus: import("../../hooks/useState").State<boolean>;
+};
+export {};
+
+
+export {normalize} from 'intact-react';

package/components/dropdown/useKeyboard.js

@@ -0,0 +1,195 @@
+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 { 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';
+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
+  // 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);
+          }
+        } else if (isComponentFunction(vNode)) {
+          loop(_children);
+        } else if (hasVNodeChildren(vNode)) {
+          loop(_children);
+        } else if (hasMultipleChildren(vNode)) {
+          _children.forEach(loop);
+        }
+      }
+    };
+
+    loop(children);
+    return children;
+  }
+
+  onMounted(collect);
+  var oldFocusIndex;
+  onBeforeUpdate(function () {
+    oldFocusIndex = focusIndex;
+    reset();
+  });
+  onUpdated(function () {
+    collect();
+    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
+
+
+    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;
+      e.preventDefault();
+      itemEvents.get(items[focusIndex])[name]();
+    };
+  }
+
+  provide(MENU_KEYBOARD, {
+    reset: reset,
+    focus: function focus(item) {
+      // reset();
+      var index = items.indexOf(item);
+      if (index === -1) debugger;
+      focusIndex = index;
+      focusItem(item);
+    }
+  });
+  return [useKeyboard({
+    down: next,
+    up: prev,
+    right: makeEventCall('onShowMenu'),
+    left: makeEventCall('onHideMenu'),
+    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();
+    },
+    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);
+}
+
+export {normalize} from 'intact-react';

package/components/dropdown/usePosition.d.ts

@@ -0,0 +1,11 @@
+import { Feedback } from '../position';
+export declare type FeedbackCallback = (feedback: Feedback) => void;
+export declare function usePosition(): {
+    handle: (callback: FeedbackCallback) => void;
+    positioned: {
+        value: boolean;
+    };
+};
+
+
+export {normalize} from 'intact-react';

package/components/dropdown/usePosition.js

@@ -0,0 +1,115 @@
+import _extends from "@babel/runtime-corejs3/helpers/extends";
+import { useInstance, findDomFromVNode } from 'intact-react';
+import { position } from '../position';
+import { noop } from 'intact-shared';
+export function usePosition() {
+  var instance = useInstance();
+  var positioned = {
+    value: false
+  };
+  instance.watch('value', function (value) {
+    if (value) {
+      positioned.value = false;
+    }
+  });
+  ['of', 'position'].forEach(function (item) {
+    instance.watch(item, function () {
+      if (instance.get('value')) {
+        handle(noop);
+      }
+    }, {
+      presented: true,
+      inited: true
+    });
+  }); // 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':
+        pos = {
+          my: 'right-10 center',
+          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',
+          at: 'center top'
+        };
+        break;
+    }
+
+    position(findDomFromVNode(instance.menuVNode, true), _extends({
+      my: 'left top+8',
+      at: 'left bottom'
+    }, pos, {
+      of: ofElement,
+      using: function using(_feedback) {
+        feedback = _feedback;
+      }
+    }));
+    positioned.value = true;
+    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,
+          // when them show together
+
+          callback(p(ofElement, feedback));
+        };
+
+        parent.on('positioned', fn);
+      }
+    } else if (_of === 'self') {
+      callback(p(findDomFromVNode(instance.$vNode, true), null));
+    } else {
+      callback(p(_of, null));
+    }
+  }
+
+  return {
+    handle: handle,
+    positioned: positioned
+  };
+}
+
+export {normalize} from 'intact-react';

package/components/dropdown/useTransition.d.ts

@@ -0,0 +1,11 @@
+import { TransitionElement } from 'intact-react';
+import type { FeedbackCallback } from './usePosition';
+export declare function useTransition(getFeedback: (callback: FeedbackCallback) => void): {
+    onEnter: (el: TransitionElement, done: Function) => void;
+    onEnterCancelled: (el: TransitionElement) => void;
+    onLeave: (el: TransitionElement, done: Function) => void;
+    onLeaveCancelled: (el: TransitionElement) => void;
+};
+
+
+export {normalize} from 'intact-react';

package/components/dropdown/useTransition.js

@@ -0,0 +1,80 @@
+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);
+      var enterFromClass = transition + "-enter-from";
+      var enterActiveClass = transition + "-enter-active";
+      addTransitionClass(el, enterFromClass);
+      document.body.offsetWidth;
+      addTransitionClass(el, enterActiveClass);
+      removeTransitionClass(el, enterFromClass);
+      whenTransitionEnds(el, function () {
+        onEnterCancelled(el);
+        done();
+      });
+    });
+  }
+
+  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) {
+      transition = getTransition(feedback);
+      addTransitionClass(el, transition + "-leave-to");
+      addTransitionClass(el, transition + "-leave-active");
+      whenTransitionEnds(el, function () {
+        onLeaveCancelled(el);
+        done();
+      });
+    });
+  }
+
+  function onLeaveCancelled(el) {
+    removeTransitionClass(el, transition + "-leave-to");
+    removeTransitionClass(el, transition + "-leave-active");
+  }
+
+  return {
+    onEnter: onEnter,
+    onEnterCancelled: onEnterCancelled,
+    onLeave: onLeave,
+    onLeaveCancelled: onLeaveCancelled
+  };
+}
+
+function getTransition(feedback) {
+  var horizontal = feedback.horizontal;
+  var vertical = feedback.vertical;
+
+  if (feedback.important === 'horizontal') {
+    if (horizontal === 'left') {
+      return 'k-slideright';
+    } else if (horizontal === 'right') {
+      return 'k-slideleft';
+    } else if (vertical === 'bottom') {
+      return 'k-slideup';
+    } else if (vertical === 'top') {
+      return 'k-slidedown';
+    }
+  } else {
+    if (vertical === 'bottom') {
+      return 'k-slideup';
+    } else if (vertical === 'top') {
+      return 'k-slidedown';
+    } else if (horizontal === 'left') {
+      return 'k-slideright';
+    } else if (horizontal === 'right') {
+      return 'k-slideleft';
+    }
+  }
+
+  return 'k-slidedown';
+}
+
+export {normalize} from 'intact-react';