@king-design/intact 2.0.8 → 2.0.10

package/es/components/dialog/useEscClosable.js

@@ -1,3 +1,4 @@
+import _spliceInstanceProperty from "@babel/runtime-corejs3/core-js/instance/splice";
 import { useInstance, onUnmounted } from 'intact';
 import { SHOW, HIDE } from './constants'; // only close the top dialog when press ESC
 
@@ -22,14 +23,19 @@ export function useEscClosable() {
   });
 
   function onHide() {
-    var dialog = dialogs.pop(); // const dialog = dialogs.shift();
+    // the order is uncertain in different frameworks
+    var index = dialogs.indexOf(instance); // const dialog = dialogs.pop();
+    // const dialog = dialogs.shift();
 
     if (process.env.NODE_ENV !== 'production') {
-      if (dialog !== instance) {
-        throw new Error('The dialog has handled hide callback. It is a bug of KPC');
+      // if (dialog !== instance) {
+      if (index === -1) {
+        throw new Error('The dialog has handled hide callback. Maybe it is a bug of KPC');
       }
     }
 
+    _spliceInstanceProperty(dialogs).call(dialogs, 0, index);
+
     if (!dialogs.length) {
       document.removeEventListener('keydown', escClose);
     }

package/es/components/drawer/index.js

@@ -10,7 +10,8 @@ var typeDefs = _extends({}, BaseDialog.typeDefs, {
 
 var defaults = function defaults() {
   return _extends({}, BaseDialog.defaults(), {
-    placement: 'right'
+    placement: 'right',
+    draggable: false
   });
 };
 

package/es/components/portal.d.ts

@@ -10,6 +10,7 @@ export declare class Portal<T extends PortalProps = PortalProps> extends Compone
     private dialog;
     mountedQueue?: Function[];
     mountedDone?: boolean;
+    $isPortal: boolean;
     $render(lastVNode: VNodeComponentClass<this> | null, nextVNode: VNodeComponentClass<this>, parentDom: Element, anchor: IntactDom | null, mountedQueue: Function[]): void;
     $update(lastVNode: VNodeComponentClass<this>, nextVNode: VNodeComponentClass<this>, parentDom: Element, anchor: IntactDom | null, mountedQueue: Function[], force: boolean): void;
     $unmount(vNode: VNodeComponentClass<this>, nextVNode: VNodeComponentClass<this> | null): void;

package/es/components/portal.js

@@ -1,6 +1,6 @@
 import _inheritsLoose from "@babel/runtime-corejs3/helpers/inheritsLoose";
 import _concatInstanceProperty from "@babel/runtime-corejs3/core-js/instance/concat";
-import { Component, createCommentVNode, createTextVNode, mount, patch, remove, inject, callAll } from 'intact';
+import { Component, createCommentVNode, createTextVNode, mount, patch, remove, inject } from 'intact';
 import { isString } from 'intact-shared';
 import { DIALOG } from './dialog/constants';
 var typeDefs = {
@@ -23,6 +23,7 @@ export var Portal = /*#__PURE__*/function (_Component) {
     _this.dialog = inject(DIALOG, null);
     _this.mountedQueue = void 0;
     _this.mountedDone = void 0;
+    _this.$isPortal = true;
     return _this;
   }
 
@@ -39,41 +40,20 @@ export var Portal = /*#__PURE__*/function (_Component) {
   _proto.$render = function $render(lastVNode, nextVNode, parentDom, anchor, mountedQueue) {
     var _this2 = this;
 
+    /**
+     * In React, we cannot render real elements in mountedQueue.
+     * Because the rendering time of react element is uncontrollable
+     */
+    var nextProps = nextVNode.props;
+    var fakeContainer = document.createDocumentFragment();
     mountedQueue.push(function () {
-      var nextProps = nextVNode.props;
       var parentDom = _this2.$lastInput.dom.parentElement;
-      /**
-       * initialize a new mountedQueue to place the callbacks of sub-components to it,
-       * so that we can call them before the sibling components of the Portal
-       */
-
-      var mountedQueue = [];
 
       _this2.initContainer(nextProps.container, parentDom, anchor);
-      /**
-       * Because we render real elements following parent has rendered.
-       * In React, the $promises have done. Then we cannot add any promise to it.
-       * We should find the parent component who holds the $promises object, and
-       * reset it to let remaining element children add promise to it.
-       */
 
-
-      var parent = getParent(_this2);
-
-      if (parent) {
-        parent.$promises.reset();
-      }
-
-      mount(nextProps.children, _this2.container, _this2, _this2.$SVG, null, mountedQueue); // in react, we should wait for all promises to resolve
-
-      if (parent) {
-        Component.FakePromise.all(parent.$promises).then(function () {
-          callAll(mountedQueue);
-        });
-      } else {
-        callAll(mountedQueue);
-      }
+      _this2.container.appendChild(fakeContainer);
     });
+    mount(nextProps.children, fakeContainer, this, this.$SVG, null, mountedQueue);
 
     _Component.prototype.$render.call(this, lastVNode, nextVNode, parentDom, anchor, mountedQueue);
   };
@@ -117,26 +97,20 @@ export var Portal = /*#__PURE__*/function (_Component) {
 
     if (!this.container) {
       // find the closest dialog if exists
-      var tmp;
-
-      if ((tmp = this.dialog) && (tmp = tmp.dialogRef.value)) {
-        this.container = tmp;
-      } else {
-        this.container = document.body;
-      }
+      this.container = parentDom.closest('.k-dialog') || document.body;
+      /**
+       * @FIXME: We cannot get parent ref from sub component in Vue
+       */
+      // find the closest dialog if exists
+      // let tmp;
+      // if ((tmp = this.dialog) && (tmp !== this.$senior) && (tmp = tmp.dialogRef.value)) {
+      // this.container = tmp;
+      // } else {
+      // this.container = document.body;
+      // }
     }
   };
 
   return Portal;
 }(Component);
-Portal.typeDefs = typeDefs;
-
-function getParent($senior) {
-  while ($senior = $senior.$senior) {
-    if ($senior._reactInternals) {
-      return $senior;
-    }
-  }
-
-  return null;
-}
+Portal.typeDefs = typeDefs;

package/es/components/select/base.d.ts

@@ -35,6 +35,7 @@ export interface BaseSelectBlocks<V> {
     suffix: null;
 }
 export declare abstract class BaseSelect<T extends BaseSelectProps<any> = BaseSelectProps<any>, E extends BaseSelectEvents = BaseSelectEvents, B extends BaseSelectBlocks<any> = BaseSelectBlocks<any>> extends Component<T, E, B> {
+    static $doubleVNodes: boolean;
     static template: string | import("intact").Template<any>;
     static typeDefs: Required<TypeDefs<BaseSelectProps<any, boolean, any>>>;
     static defaults: () => Partial<BaseSelectProps<any, boolean, any>>;

package/es/components/select/base.js

@@ -138,6 +138,7 @@ export var BaseSelect = /*#__PURE__*/function (_Component) {
 
   return BaseSelect;
 }(Component);
+BaseSelect.$doubleVNodes = true;
 BaseSelect.template = template;
 BaseSelect.typeDefs = typeDefs;
 BaseSelect.defaults = defaults;

package/es/components/select/useBaseLabel.d.ts

@@ -2,6 +2,7 @@ import { Children, Component } from 'intact';
 declare type BaseLabelProps = {
     value: any;
     multiple: boolean;
+    filterable: boolean;
 };
 export declare function useBaseLabel<T, C extends Component<P>, P extends BaseLabelProps>(getChildren: () => T, findLabelFromChildren: (children: T, value: any) => Children): {
     getLabel: () => Children;

package/es/components/select/useBaseLabel.js

@@ -2,7 +2,7 @@ import _Map from "@babel/runtime-corejs3/core-js/map";
 import _includesInstanceProperty from "@babel/runtime-corejs3/core-js/instance/includes";
 import { useInstance } from 'intact';
 import { isNullOrUndefined, isStringOrNumber } from 'intact-shared';
-import { isEmptyString } from '../utils';
+import { isEmptyString, getTextByChildren } from '../utils';
 export function useBaseLabel(getChildren, findLabelFromChildren) {
   var instance = useInstance();
   var labelMap = new _Map();
@@ -36,6 +36,10 @@ export function useBaseLabel(getChildren, findLabelFromChildren) {
     if (isNullOrUndefined(label)) {
       label = labelMap.get(value);
     } else {
+      if (instance.get('filterable')) {
+        label = getTextByChildren(label);
+      }
+
       labelMap.set(value, label);
     }
 

package/es/hooks/useDraggable.d.ts

@@ -2,6 +2,7 @@ export declare type Options = {
     onStart?: (e: MouseEvent) => void;
     onMove: (e: MouseEvent) => void;
     onEnd?: (e?: MouseEvent) => void;
+    disable?: () => boolean;
 };
 export declare function useDraggable(options: Options): {
     start: (e: MouseEvent) => void;

package/es/hooks/useDraggable.js

@@ -5,7 +5,7 @@ export function useDraggable(options) {
 
   function start(e) {
     // ignore if it isn't left key
-    if (e.which !== 1) return;
+    if (e.which !== 1 || options.disable != null && options.disable()) return;
     dragging.set(true);
 
     if (options.onStart) {
@@ -17,6 +17,7 @@ export function useDraggable(options) {
   }
 
   function move(e) {
+    if (options.disable != null && options.disable()) return;
     e.preventDefault();
 
     if (dragging.value) {

package/es/index.d.ts

@@ -1,5 +1,5 @@
 /*!
- * @king-design v2.0.8
+ * @king-design v2.0.10
  *
  * Copyright (c) Kingsoft Cloud
  * Released under the MIT License
@@ -57,4 +57,4 @@ export * from './components/tree';
 export * from './components/treeSelect';
 export * from './components/upload';
 export * from './components/wave';
-export declare const version = "2.0.8";
+export declare const version = "2.0.10";

package/es/index.js

@@ -1,5 +1,5 @@
 /*!
- * @king-design v2.0.8
+ * @king-design v2.0.10
  *
  * Copyright (c) Kingsoft Cloud
  * Released under the MIT License
@@ -59,5 +59,5 @@ export * from './components/tree';
 export * from './components/treeSelect';
 export * from './components/upload';
 export * from './components/wave';
-export var version = '2.0.8';
+export var version = '2.0.10';
 /* generate end */

package/es/packages/kpc-react/__tests__/components/drawer.spec.js

@@ -5,6 +5,7 @@ import React from 'react';
 import * as ReactDOM from 'react-dom';
 import { Drawer, Card } from '../../';
 import { Component } from 'intact-react';
+import { wait, dispatchEvent } from '../../../../test/utils';
 describe('Drawer', function () {
   it('should render react element correctly', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee() {
     var container, Test;
@@ -43,4 +44,56 @@ describe('Drawer', function () {
       }
     }, _callee);
   })));
+  it('should handle event correctly', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee2() {
+    var container, click1, click2, _document$querySelect, element1, element2;
+
+    return _regeneratorRuntime.wrap(function _callee2$(_context2) {
+      while (1) {
+        switch (_context2.prev = _context2.next) {
+          case 0:
+            container = document.createElement('div');
+            document.body.appendChild(container);
+            click1 = sinon.spy(function () {
+              return console.log(1);
+            });
+            click2 = sinon.spy(function () {
+              return console.log(2);
+            });
+            ReactDOM.render( /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement(Drawer, {
+              value: true,
+              title: "1"
+            }, /*#__PURE__*/React.createElement("div", {
+              className: "click",
+              onClick: click1
+            }, "click")), /*#__PURE__*/React.createElement(Drawer, {
+              value: true,
+              placement: "left",
+              title: "2"
+            }, /*#__PURE__*/React.createElement(Card, null, /*#__PURE__*/React.createElement("div", {
+              className: "click",
+              onClick: click2
+            }, "click")))), container);
+            _document$querySelect = document.querySelectorAll('.click'), element1 = _document$querySelect[0], element2 = _document$querySelect[1];
+            dispatchEvent(element1, 'click');
+            _context2.next = 9;
+            return wait();
+
+          case 9:
+            expect(click1.callCount).to.eql(1);
+            dispatchEvent(element2, 'click');
+            _context2.next = 13;
+            return wait();
+
+          case 13:
+            expect(click2.callCount).to.eql(1);
+            ReactDOM.unmountComponentAtNode(container);
+            document.body.removeChild(container);
+
+          case 16:
+          case "end":
+            return _context2.stop();
+        }
+      }
+    }, _callee2);
+  })));
 });

package/es/packages/kpc-react/__tests__/components/dropdown.spec.js

@@ -1,9 +1,11 @@
+import _inheritsLoose from "@babel/runtime-corejs3/helpers/inheritsLoose";
 import _asyncToGenerator from "@babel/runtime-corejs3/helpers/asyncToGenerator";
 import _regeneratorRuntime from "@babel/runtime-corejs3/regenerator";
 import React, { createRef } from 'react';
 import * as ReactDOM from 'react-dom';
-import { Dropdown, DropdownMenu, DropdownItem } from '../../';
+import { Dropdown, DropdownMenu, DropdownItem, Dialog, Layout } from '../../';
 import { getElement, wait } from '../../../../test/utils';
+import { Component } from 'intact-react';
 describe('Dropdown', function () {
   it('should save original events', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee() {
     var click, container, button;
@@ -38,4 +40,108 @@ describe('Dropdown', function () {
       }
     }, _callee);
   })));
+  it('reproduce #764', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee2() {
+    var _mounted, _updated, Demo, FooDialog, Foo, set, Test, container;
+
+    return _regeneratorRuntime.wrap(function _callee2$(_context2) {
+      while (1) {
+        switch (_context2.prev = _context2.next) {
+          case 0:
+            _mounted = sinon.spy(function () {
+              return console.log('mounted');
+            });
+            _updated = sinon.spy(function () {
+              return console.log('updated');
+            });
+
+            Demo = /*#__PURE__*/function (_Component) {
+              _inheritsLoose(Demo, _Component);
+
+              function Demo() {
+                return _Component.apply(this, arguments) || this;
+              }
+
+              var _proto = Demo.prototype;
+
+              _proto.mounted = function mounted() {
+                _mounted();
+              };
+
+              _proto.updated = function updated() {
+                _updated();
+              };
+
+              return Demo;
+            }(Component);
+
+            Demo.template = "<div>demo {this.get('title')}</div>";
+
+            FooDialog = function FooDialog() {
+              var _React$useState = React.useState({
+                title: '0'
+              }),
+                  title = _React$useState[0],
+                  setTitle = _React$useState[1];
+
+              React.useEffect(function () {
+                setTitle({
+                  title: '1'
+                });
+              }, []);
+              return /*#__PURE__*/React.createElement(Dialog, {
+                title: title.title,
+                value: true
+              }, /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement(Demo, {
+                title: title.title
+              })));
+            };
+
+            Foo = function Foo(_ref3) {
+              var data = _ref3.data;
+              return /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement(FooDialog, null));
+            };
+
+            Test = function Test() {
+              var _React$useState2 = React.useState(false),
+                  isFoo = _React$useState2[0],
+                  setIsFoo = _React$useState2[1];
+
+              var _React$useState3 = React.useState([{
+                label: 1,
+                key: 1
+              }]),
+                  data = _React$useState3[0],
+                  setData = _React$useState3[1];
+
+              set = setIsFoo;
+              return /*#__PURE__*/React.createElement(Layout, null, /*#__PURE__*/React.createElement("div", {
+                onClick: function onClick() {
+                  return setIsFoo(!isFoo);
+                }
+              }, "toggle"), isFoo ? /*#__PURE__*/React.createElement(Foo, {
+                key: "foo",
+                data: data
+              }) : /*#__PURE__*/React.createElement("div", null, "test"));
+            };
+
+            container = document.createElement('div');
+            document.body.appendChild(container);
+            ReactDOM.render( /*#__PURE__*/React.createElement(Test, null), container);
+            set(true);
+            _context2.next = 13;
+            return wait(0);
+
+          case 13:
+            expect(getElement('.k-dialog')).to.be.exist;
+            expect(_mounted.calledBefore(_updated)).to.be.true;
+            ReactDOM.unmountComponentAtNode(container);
+            document.body.removeChild(container);
+
+          case 17:
+          case "end":
+            return _context2.stop();
+        }
+      }
+    }, _callee2);
+  })));
 });

package/es/packages/kpc-react/__tests__/components/menu.spec.js

@@ -0,0 +1,76 @@
+import _asyncToGenerator from "@babel/runtime-corejs3/helpers/asyncToGenerator";
+import _regeneratorRuntime from "@babel/runtime-corejs3/regenerator";
+import React, { useState } from 'react';
+import * as ReactDOM from 'react-dom';
+import { Menu, MenuItem } from '../../';
+import { getElement, wait } from '../../../../test/utils';
+describe('Menu', function () {
+  it('when we collapse menu, all dropdown menus should be hidden', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee() {
+    var container, AsideMenu, setCollapse, Test;
+    return _regeneratorRuntime.wrap(function _callee$(_context) {
+      while (1) {
+        switch (_context.prev = _context.next) {
+          case 0:
+            container = document.createElement('div');
+            document.body.appendChild(container);
+
+            AsideMenu = function AsideMenu(_ref2) {
+              var collapse = _ref2.collapse;
+
+              var _useState = useState(''),
+                  selectedKey = _useState[0],
+                  setSelectedKey = _useState[1];
+
+              return /*#__PURE__*/React.createElement(Menu, {
+                collapse: collapse,
+                selectedKey: selectedKey
+              }, /*#__PURE__*/React.createElement(MenuItem, {
+                key: "1"
+              }, "option 1", /*#__PURE__*/React.createElement(Menu, null, /*#__PURE__*/React.createElement(MenuItem, {
+                key: "1-1"
+              }, /*#__PURE__*/React.createElement("span", null, "option 1-1")))), /*#__PURE__*/React.createElement(MenuItem, {
+                key: "2"
+              }, "option 2", /*#__PURE__*/React.createElement(Menu, null, /*#__PURE__*/React.createElement(MenuItem, {
+                key: "2-1"
+              }, /*#__PURE__*/React.createElement("span", null, "option 2-1")))), /*#__PURE__*/React.createElement(MenuItem, {
+                key: "3"
+              }, "option 2", /*#__PURE__*/React.createElement(Menu, null, /*#__PURE__*/React.createElement(MenuItem, {
+                key: "2-1"
+              }, /*#__PURE__*/React.createElement("span", null, "option 2-1")), /*#__PURE__*/React.createElement(MenuItem, {
+                key: "2-2"
+              }, /*#__PURE__*/React.createElement("span", null, "option 2-1")))));
+            };
+
+            Test = function Test() {
+              var _useState2 = useState(false),
+                  collapse = _useState2[0],
+                  _setCollapse = _useState2[1];
+
+              setCollapse = _setCollapse;
+              return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("div", {
+                onClick: function onClick() {
+                  return _setCollapse(!collapse);
+                }
+              }, "click"), /*#__PURE__*/React.createElement(AsideMenu, {
+                collapse: collapse
+              }));
+            };
+
+            ReactDOM.render( /*#__PURE__*/React.createElement(Test, null), container);
+            setCollapse(true);
+            _context.next = 8;
+            return wait();
+
+          case 8:
+            expect(getElement('.k-dropdown-menu.k-menu')).to.be.not.exist;
+            ReactDOM.unmountComponentAtNode(container);
+            document.body.removeChild(container);
+
+          case 11:
+          case "end":
+            return _context.stop();
+        }
+      }
+    }, _callee);
+  })));
+});

package/es/packages/kpc-react/__tests__/components/select.spec.d.ts

@@ -0,0 +1 @@
+export {};

package/es/packages/kpc-react/__tests__/components/select.spec.js

@@ -0,0 +1,64 @@
+import _asyncToGenerator from "@babel/runtime-corejs3/helpers/asyncToGenerator";
+import _regeneratorRuntime from "@babel/runtime-corejs3/regenerator";
+import React, { useState } from 'react';
+import * as ReactDOM from 'react-dom';
+import { Select, OptionGroup, Option } from '../../';
+import { getElement, wait } from '../../../../test/utils';
+describe('Select', function () {
+  it('should conrrectly show value in filterable mode', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee() {
+    var container, Test, trigger, dropdown;
+    return _regeneratorRuntime.wrap(function _callee$(_context) {
+      while (1) {
+        switch (_context.prev = _context.next) {
+          case 0:
+            container = document.createElement('div');
+            document.body.appendChild(container);
+
+            Test = function Test() {
+              var _useState = useState(''),
+                  value = _useState[0],
+                  setValue = _useState[1];
+
+              var onChangeValue = function onChangeValue(v) {
+                setValue(v != null ? v : '');
+              };
+
+              return /*#__PURE__*/React.createElement(Select, {
+                value: value,
+                onChangeValue: onChangeValue,
+                card: true,
+                filterable: true
+              }, /*#__PURE__*/React.createElement(OptionGroup, {
+                slotLabel: /*#__PURE__*/React.createElement("div", null, "xxx")
+              }, /*#__PURE__*/React.createElement(Option, {
+                value: "q"
+              }, "Q"), /*#__PURE__*/React.createElement(Option, {
+                value: "p"
+              }, "P")));
+            };
+
+            ReactDOM.render( /*#__PURE__*/React.createElement(Test, null), container);
+            trigger = container.querySelector('.k-select');
+            trigger.click();
+            _context.next = 8;
+            return wait();
+
+          case 8:
+            dropdown = getElement('.k-select-menu');
+            dropdown.querySelector('.k-dropdown-item').click();
+            _context.next = 12;
+            return wait();
+
+          case 12:
+            expect(container.querySelector('.k-input-inner').value).to.eql('Q');
+            ReactDOM.unmountComponentAtNode(container);
+            document.body.removeChild(container);
+
+          case 15:
+          case "end":
+            return _context.stop();
+        }
+      }
+    }, _callee);
+  })));
+});

package/es/packages/kpc-react/__tests__/components/tooltip.spec.d.ts

@@ -0,0 +1 @@
+export {};

package/es/packages/kpc-react/__tests__/components/{form.spec.js → tooltip.spec.js}

@@ -4,7 +4,7 @@ import React from 'react';
 import * as ReactDOM from 'react-dom';
 import { Tooltip, Form, FormItem } from '../../';
 import { getElement, wait, dispatchEvent } from '../../../../test/utils';
-describe('Form', function () {
+describe('Tooltip', function () {
   it('should show Tooltip in append slot', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee() {
     var click, container, trigger;
     return _regeneratorRuntime.wrap(function _callee$(_context) {

package/hooks/useDraggable.ts

@@ -5,6 +5,7 @@ export type Options = {
     onStart?: (e: MouseEvent) => void,
     onMove: (e: MouseEvent) => void,
     onEnd?: (e?: MouseEvent) => void,
+    disable?: () => boolean,
 }
 
 export function useDraggable(options: Options) {
@@ -12,7 +13,7 @@ export function useDraggable(options: Options) {
 
     function start(e: MouseEvent) {
         // ignore if it isn't left key
-        if (e.which !== 1) return;
+        if (e.which !== 1 || options.disable?.()) return;
 
         dragging.set(true);
 
@@ -25,6 +26,8 @@ export function useDraggable(options: Options) {
     }
 
     function move(e: MouseEvent) {
+        if (options.disable?.()) return;
+
         e.preventDefault();
 
         if (dragging.value) {

package/index.ts

@@ -1,5 +1,5 @@
 /*!
- * @king-design v2.0.8
+ * @king-design v2.0.10
  *
  * Copyright (c) Kingsoft Cloud
  * Released under the MIT License
@@ -62,6 +62,6 @@ export * from './components/treeSelect';
 export * from './components/upload';
 export * from './components/wave';
 
-export const version = '2.0.8';
+export const version = '2.0.10';
 
 /* generate end */