@king-design/react 2.0.0-beta.0

package/components/layout/layout.d.ts

@@ -0,0 +1,18 @@
+import { Component } from 'intact-react';
+export declare class Layout extends Component {
+    static template: string | import("intact").Template<any>;
+    parse: () => {
+        hasAside: boolean;
+        hasFixedHeader: boolean;
+        headerHeight: string | number;
+        hasFixedAside: boolean;
+        asideWidth: string | number;
+    };
+    layout: Layout | null;
+    init(): void;
+    private getClassNames;
+    private getStyles;
+}
+
+
+export {normalize} from 'intact-react';

package/components/layout/layout.js

@@ -0,0 +1,75 @@
+import _inheritsLoose from "@babel/runtime-corejs3/helpers/inheritsLoose";
+import _concatInstanceProperty from "@babel/runtime-corejs3/core-js/instance/concat";
+import { Component, inject, provide } from 'intact-react';
+import template from './template.vdt';
+import { makeLayoutStyles } from './styles';
+import { addStyle } from '../utils';
+import { ROOT_LAYOUT, LAYOUT, getStyle } from './helpers';
+import { useParse } from './useParse';
+export var Layout = /*#__PURE__*/function (_Component) {
+  _inheritsLoose(Layout, _Component);
+
+  function Layout() {
+    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.parse = useParse();
+    _this.layout = inject(LAYOUT, null);
+    return _this;
+  }
+
+  var _proto = Layout.prototype;
+
+  _proto.init = function init() {
+    provide(LAYOUT, this);
+
+    if (!this.layout) {
+      provide(ROOT_LAYOUT, this);
+    }
+  };
+
+  _proto.getClassNames = function getClassNames() {
+    var _ref;
+
+    var _this$get = this.get(),
+        className = _this$get.className,
+        children = _this$get.children;
+
+    var _this$parse = this.parse(),
+        hasAside = _this$parse.hasAside;
+
+    return _ref = {
+      'k-layout': true
+    }, _ref["k-has-aside"] = hasAside, _ref[makeLayoutStyles()] = true, _ref[className] = className, _ref;
+  };
+
+  _proto.getStyles = function getStyles() {
+    var style = this.get('style');
+    var layout = this.layout;
+    if (!layout) return style;
+
+    var _layout$parse = layout.parse(),
+        hasFixedHeader = _layout$parse.hasFixedHeader,
+        headerHeight = _layout$parse.headerHeight,
+        hasFixedAside = _layout$parse.hasFixedAside,
+        asideWidth = _layout$parse.asideWidth;
+
+    if (!hasFixedHeader && !hasFixedAside) return style; // add margin-top if the parent layout has fixed header
+
+    return addStyle(style, {
+      marginTop: hasFixedHeader ? getStyle(headerHeight) : null,
+      paddingLeft: hasFixedAside ? getStyle(asideWidth) : null
+    });
+  };
+
+  return Layout;
+}(Component);
+Layout.template = template;
+
+export {normalize} from 'intact-react';

package/components/layout/styles.d.ts

@@ -0,0 +1,9 @@
+import '../../styles/global';
+export declare const themes: readonly ["light", "dark", "white"];
+export declare function getCollapseWidth(): any;
+export declare function makeLayoutStyles(): string;
+export declare function makeHeaderStyles(): string;
+export declare function makeAsideStyles(): string;
+
+
+export {normalize} from 'intact-react';

package/components/layout/styles.js

@@ -0,0 +1,81 @@
+import _mapInstanceProperty from "@babel/runtime-corejs3/core-js/instance/map";
+import { css } from '@emotion/css';
+import { theme, setDefault } from '../../styles/theme';
+import { deepDefaults, getLeft } from '../../styles/utils';
+import '../../styles/global';
+import { menu } from '../menu/styles';
+var sizes = ['small', 'large'];
+export var themes = ['light', 'dark', 'white'];
+var defaults = {
+  get color() {
+    return menu.item.color;
+  },
+
+  get bgColor() {
+    return menu.bgColor;
+  },
+
+  light: {
+    get color() {
+      return menu.light.bgColor;
+    },
+
+    get bgColor() {
+      return menu.light.bgColor;
+    },
+
+    get border() {
+      return menu.light.border;
+    }
+
+  },
+  white: {
+    get color() {
+      return menu.white.bgColor;
+    },
+
+    get bgColor() {
+      return menu.white.bgColor;
+    },
+
+    get border() {
+      return menu.white.border;
+    }
+
+  },
+
+  get collapsedWidth() {
+    return "calc(" + getLeft(menu.item.padding) + " * 2 + " + menu.icon.width + ")";
+  },
+
+  footerPadding: '24px 50px' // bodyMargin: '0 20px',
+
+};
+var layout;
+setDefault(function () {
+  layout = deepDefaults(theme, {
+    layout: defaults
+  }).layout;
+});
+export function getCollapseWidth() {
+  return layout.collapsedWidth;
+}
+export function makeLayoutStyles() {
+  return /*#__PURE__*/css("display:flex;flex-direction:column;flex:1;transition:padding-left ", theme.transition, ";&.k-has-aside{flex-direction:row;}.k-layout-footer{padding:", layout.footerPadding, ";}.k-layout-body{flex:1;}");
+}
+export function makeHeaderStyles() {
+  return /*#__PURE__*/css("display:flex;align-items:center;color:", layout.color, ";background:", layout.bgColor, ";left:0;transition:left ", theme.transition, ";&.k-fixed{position:fixed;left:0;right:0;top:0;z-index:", theme.midZIndex + 1, ";}", _mapInstanceProperty(themes).call(themes, function (theme) {
+    if (theme === 'dark') return;
+    var styles = layout[theme];
+    return /*#__PURE__*/css("&.k-", theme, "{background:", styles.bgColor, ";color:", styles.color, ";border-bottom:", styles.border, ";}");
+  }), ";");
+}
+export function makeAsideStyles() {
+  return /*#__PURE__*/css("transition:width ", theme.transition, ";display:flex;flex-direction:column;background:", layout.bgColor, ";color:", layout.color, ";", _mapInstanceProperty(themes).call(themes, function (theme) {
+    if (theme === 'dark') return;
+    var styles = layout[theme];
+    return /*#__PURE__*/css("&.k-", theme, "{background:", styles.bgColor, ";color:", styles.color, ";border-right:", styles.border, ";}");
+  }), " &.k-fixed{position:fixed;overflow:auto;left:0;top:0;bottom:0;z-index:", theme.midZIndex, ";}.k-menu{width:auto!important;}");
+}
+
+export {normalize} from 'intact-react';

package/components/layout/template.vdt.js

@@ -0,0 +1,20 @@
+import _extends from "@babel/runtime-corejs3/helpers/extends";
+import { createVNode as _$cv, className as _$cn } from 'intact-react';
+import { getRestProps } from '../utils';
+export default function ($props, $blocks, $__proto__) {
+  $blocks || ($blocks = {});
+  $props || ($props = {});
+  var $this = this;
+
+  var _this$get = this.get(),
+      children = _this$get.children,
+      style = _this$get.style;
+
+  return _$cv('div', _extends({
+    'className': _$cn(this.getClassNames()),
+    'style': this.getStyles ? this.getStyles() : style
+  }, getRestProps(this)), children);
+}
+;
+
+export {normalize} from 'intact-react';

package/components/layout/useParse.d.ts

@@ -0,0 +1,10 @@
+export declare function useParse(): () => {
+    hasAside: boolean;
+    hasFixedHeader: boolean;
+    headerHeight: string | number;
+    hasFixedAside: boolean;
+    asideWidth: string | number;
+};
+
+
+export {normalize} from 'intact-react';

package/components/layout/useParse.js

@@ -0,0 +1,65 @@
+import { useInstance, onBeforeMount, onBeforeUpdate } from 'intact-react';
+import { isComponentVNode, eachChildren } from '../utils';
+import { getCollapseWidth } from './styles';
+import { defaultHeight, defaultWidth } from './helpers';
+import { Aside } from './aside';
+import { Header } from './header';
+import { EMPTY_OBJ } from 'intact-shared';
+export function useParse() {
+  var instance = useInstance();
+  var hasAside;
+  var hasFixedHeader;
+  var headerHeight;
+  var hasFixedAside;
+  var asideWidth;
+  onBeforeMount(parse);
+  onBeforeUpdate(parse);
+
+  function parse() {
+    hasAside = false;
+    hasFixedHeader = false;
+    headerHeight = defaultHeight;
+    hasFixedAside = false;
+    asideWidth = defaultWidth;
+    eachChildren(instance.get('children'), function (vNode) {
+      if (isComponentVNode(vNode, Aside)) {
+        hasAside = true;
+        var props = vNode.props || EMPTY_OBJ;
+
+        if (props.width) {
+          asideWidth = props.width;
+        }
+
+        if (props.collapse) {
+          asideWidth = getCollapseWidth();
+        }
+
+        if (props.fixed) {
+          hasFixedAside = true;
+        }
+      } else if (isComponentVNode(vNode, Header)) {
+        var _props = vNode.props || EMPTY_OBJ;
+
+        if (_props.height) {
+          headerHeight = _props.height;
+        }
+
+        if (_props.fixed) {
+          hasFixedHeader = true;
+        }
+      }
+    });
+  }
+
+  return function () {
+    return {
+      hasAside: hasAside,
+      hasFixedHeader: hasFixedHeader,
+      headerHeight: headerHeight,
+      hasFixedAside: hasFixedAside,
+      asideWidth: asideWidth
+    };
+  };
+}
+
+export {normalize} from 'intact-react';

package/components/menu/index.d.ts

@@ -0,0 +1,5 @@
+export * from './menu';
+export * from './item';
+
+
+export {normalize} from 'intact-react';

package/components/menu/index.js

@@ -0,0 +1,4 @@
+export * from './menu';
+export * from './item';
+
+export {normalize} from 'intact-react';

package/components/menu/index.spec.d.ts

@@ -0,0 +1,4 @@
+export {};
+
+
+export {normalize} from 'intact-react';

package/components/menu/index.spec.js

@@ -0,0 +1,218 @@
+import _asyncToGenerator from "@babel/runtime-corejs3/helpers/asyncToGenerator";
+import _regeneratorRuntime from "@babel/runtime-corejs3/regenerator";
+import CollapseDemo from '~/components/menu/demos/collapse';
+import AccordionDemo from '~/components/menu/demos/accordion';
+import { mount, unmount, dispatchEvent, getElement, wait } from '../../test/utils';
+describe('Menu', function () {
+  afterEach(function () {
+    return unmount();
+  });
+  it('expand and shrink sub menu', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee() {
+    var _mount, instance, element, title;
+
+    return _regeneratorRuntime.wrap(function _callee$(_context) {
+      while (1) {
+        switch (_context.prev = _context.next) {
+          case 0:
+            _mount = mount(CollapseDemo), instance = _mount[0], element = _mount[1];
+            title = element.querySelector('.k-expanded .k-menu-title');
+            title.click();
+            _context.next = 5;
+            return wait(300);
+
+          case 5:
+            expect(element.outerHTML).to.matchSnapshot();
+            expect(instance.get('expandedKeys')).to.eql([]);
+            title.click();
+            _context.next = 10;
+            return wait(300);
+
+          case 10:
+            expect(element.outerHTML).to.matchSnapshot();
+            expect(instance.get('expandedKeys')).to.eql(['3']);
+
+          case 12:
+          case "end":
+            return _context.stop();
+        }
+      }
+    }, _callee);
+  })));
+  it('select', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee2() {
+    var _mount2, instance, element, menu, _element$querySelecto, title, disabledTitle, subTitle;
+
+    return _regeneratorRuntime.wrap(function _callee2$(_context2) {
+      while (1) {
+        switch (_context2.prev = _context2.next) {
+          case 0:
+            _mount2 = mount(CollapseDemo), instance = _mount2[0], element = _mount2[1];
+            menu = instance.refs.__test;
+            _element$querySelecto = element.querySelectorAll('.k-menu-title'), title = _element$querySelecto[0], disabledTitle = _element$querySelecto[1];
+            title.click();
+            _context2.next = 6;
+            return wait();
+
+          case 6:
+            expect(element.outerHTML).to.matchSnapshot();
+            expect(menu.get('selectedKey')).to.eql('1');
+            disabledTitle.click();
+            _context2.next = 11;
+            return wait();
+
+          case 11:
+            expect(element.outerHTML).to.matchSnapshot();
+            expect(menu.get('selectedKey')).to.eql('1');
+            subTitle = element.querySelector('.k-expanded .k-menu .k-menu-title');
+            subTitle.click();
+            _context2.next = 17;
+            return wait();
+
+          case 17:
+            expect(element.outerHTML).to.matchSnapshot();
+            expect(menu.get('selectedKey')).to.eql('3-1');
+
+          case 19:
+          case "end":
+            return _context2.stop();
+        }
+      }
+    }, _callee2);
+  })));
+  it('collapse', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee3() {
+    var _mount3, instance, element, title, dropdown;
+
+    return _regeneratorRuntime.wrap(function _callee3$(_context3) {
+      while (1) {
+        switch (_context3.prev = _context3.next) {
+          case 0:
+            _mount3 = mount(CollapseDemo), instance = _mount3[0], element = _mount3[1];
+            instance.set('collapse', true);
+            _context3.next = 4;
+            return wait();
+
+          case 4:
+            expect(element.outerHTML).to.matchSnapshot(); // show sub menu
+
+            title = element.querySelector('.k-menu-item:nth-child(3) .k-menu-title');
+            dispatchEvent(title, 'mouseenter');
+            _context3.next = 9;
+            return wait();
+
+          case 9:
+            dropdown = getElement('.k-dropdown-menu.k-menu');
+            expect(dropdown.innerHTML).to.matchSnapshot();
+            dispatchEvent(dropdown.querySelector('.k-menu-item:nth-child(4) .k-menu-title'), 'mouseenter');
+            _context3.next = 14;
+            return wait();
+
+          case 14:
+            expect(getElement('.k-dropdown-menu.k-menu').innerHTML).to.matchSnapshot(); // hide all
+
+            dispatchEvent(document, 'click');
+            _context3.next = 18;
+            return wait(500);
+
+          case 18:
+            expect(getElement('.k-dropdown-menu.k-menu')).to.be.undefined;
+
+          case 19:
+          case "end":
+            return _context3.stop();
+        }
+      }
+    }, _callee3);
+  })));
+  it('select collapsed menu', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee4() {
+    var _mount4, instance, element, title, dropdown;
+
+    return _regeneratorRuntime.wrap(function _callee4$(_context4) {
+      while (1) {
+        switch (_context4.prev = _context4.next) {
+          case 0:
+            _mount4 = mount(CollapseDemo), instance = _mount4[0], element = _mount4[1];
+            instance.set('collapse', true);
+            title = element.querySelector('.k-menu-title');
+            title.click();
+            _context4.next = 6;
+            return wait();
+
+          case 6:
+            expect(element.outerHTML).to.matchSnapshot();
+            title = element.querySelector('.k-menu-item:nth-child(3) .k-menu-title');
+            dispatchEvent(title, 'mouseenter');
+            _context4.next = 11;
+            return wait();
+
+          case 11:
+            dropdown = getElement('.k-dropdown-menu.k-menu');
+            dropdown.querySelector('.k-menu-title').click();
+            _context4.next = 15;
+            return wait();
+
+          case 15:
+            expect(dropdown.innerHTML).to.matchSnapshot(); // should hide when select
+
+            _context4.next = 18;
+            return wait(500);
+
+          case 18:
+            expect(getElement('.k-dropdown-menu.k-menu')).to.be.undefined;
+
+          case 19:
+          case "end":
+            return _context4.stop();
+        }
+      }
+    }, _callee4);
+  })));
+  it('accordion', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee5() {
+    var _mount5, instance, element, menu3, subMenu1, subMenu4, menu1;
+
+    return _regeneratorRuntime.wrap(function _callee5$(_context5) {
+      while (1) {
+        switch (_context5.prev = _context5.next) {
+          case 0:
+            _mount5 = mount(AccordionDemo), instance = _mount5[0], element = _mount5[1];
+            menu3 = element.children[2];
+            subMenu1 = menu3.querySelector('.k-menu').firstElementChild.querySelector('.k-menu-title');
+            subMenu1.click();
+            _context5.next = 6;
+            return wait();
+
+          case 6:
+            expect(element.innerHTML).to.matchSnapshot();
+            expect(instance.get('expandedKeys')).to.eql(['3', '3-1']);
+            subMenu4 = menu3.querySelector('.k-menu').lastElementChild.querySelector('.k-menu-title');
+            subMenu4.click();
+            _context5.next = 12;
+            return wait();
+
+          case 12:
+            expect(element.innerHTML).to.matchSnapshot();
+            expect(instance.get('expandedKeys')).to.eql(['3', '3-4']);
+            menu1 = element.firstElementChild.querySelector('.k-menu-title');
+            menu1.click();
+            _context5.next = 18;
+            return wait();
+
+          case 18:
+            expect(element.innerHTML).to.matchSnapshot();
+            expect(instance.get('expandedKeys')).to.eql(['3-4', '1']);
+            menu3.querySelector('.k-menu-title').click();
+            _context5.next = 23;
+            return wait();
+
+          case 23:
+            expect(element.innerHTML).to.matchSnapshot();
+            expect(instance.get('expandedKeys')).to.eql(['3-4', '3']);
+
+          case 25:
+          case "end":
+            return _context5.stop();
+        }
+      }
+    }, _callee5);
+  })));
+});
+
+export {normalize} from 'intact-react';

package/components/menu/item.d.ts

@@ -0,0 +1,29 @@
+import { Component, TypeDefs, Key } from 'intact-react';
+import { Menu } from './menu';
+export interface MenuItemProps {
+    key: Key;
+    to?: string;
+    dot?: boolean;
+    disabled?: boolean;
+}
+export interface MenuItemEvents {
+    click: [MouseEvent];
+    select: [MenuItem, MouseEvent];
+}
+export declare const MENU_ITEM = "MenuItem";
+export declare class MenuItem extends Component<MenuItemProps, MenuItemEvents> {
+    static template: string | import("intact").Template<any>;
+    static typeDefs: Required<TypeDefs<MenuItemProps>>;
+    rootMenu: Menu<Key>;
+    parentMenu: Menu<Key>;
+    parentMenuItem: MenuItem | null;
+    private expanded;
+    private highlight;
+    private dropdown;
+    private router;
+    init(): void;
+    onClick(hasSubMenu: Menu, e: MouseEvent): void;
+}
+
+
+export {normalize} from 'intact-react';

package/components/menu/item.js

@@ -0,0 +1,88 @@
+import _inheritsLoose from "@babel/runtime-corejs3/helpers/inheritsLoose";
+import _concatInstanceProperty from "@babel/runtime-corejs3/core-js/instance/concat";
+import { __decorate } from "tslib";
+import { Component, inject, provide } from 'intact-react';
+import { ROOT_MENU, MENU } from './menu';
+import template from './item.vdt';
+import { bind, isExternalLink } from '../utils';
+import { useHighlight } from './useHighlight';
+import { useExpanded } from './useExpanded';
+import { useDropdown } from './useDropdown';
+import { useRouter } from '../../hooks/useRouter';
+var typeDefs = {
+  key: {
+    type: [String, Number],
+    required: true
+  },
+  to: String,
+  dot: Boolean,
+  disabled: Boolean
+};
+export var MENU_ITEM = 'MenuItem';
+export var MenuItem = /*#__PURE__*/function (_Component) {
+  _inheritsLoose(MenuItem, _Component);
+
+  function MenuItem() {
+    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.rootMenu = inject(ROOT_MENU);
+    _this.parentMenu = inject(MENU);
+    _this.parentMenuItem = inject(MENU_ITEM, null);
+    _this.expanded = useExpanded(_this.rootMenu, _this.parentMenu);
+    _this.highlight = useHighlight(_this.rootMenu, _this.parentMenuItem);
+    _this.dropdown = useDropdown(_this.rootMenu, _this.parentMenu);
+    _this.router = useRouter();
+    return _this;
+  }
+
+  var _proto = MenuItem.prototype;
+
+  _proto.init = function init() {
+    provide(MENU_ITEM, this);
+  };
+
+  _proto.onClick = function onClick(hasSubMenu, e) {
+    var _this$get = this.get(),
+        disabled = _this$get.disabled,
+        to = _this$get.to;
+
+    if (disabled) return;
+
+    if (hasSubMenu) {
+      this.expanded.toggle();
+    } else {
+      this.highlight.select();
+    }
+
+    this.trigger('click', e);
+
+    if (!hasSubMenu) {
+      this.trigger('select', this, e);
+
+      if (to) {
+        var router = this.router.value;
+
+        if (router && !isExternalLink(to)) {
+          router.push(to);
+        } else {
+          location.href = to;
+        }
+      }
+    }
+  };
+
+  return MenuItem;
+}(Component);
+MenuItem.template = template;
+MenuItem.typeDefs = typeDefs;
+
+__decorate([bind], MenuItem.prototype, "onClick", null);
+
+export {normalize} from 'intact-react';