@king-design/intact 2.1.2 → 2.1.4

package/components/cascader/index.spec.ts

@@ -135,6 +135,14 @@ describe('Cascader', () => {
         dropdown1.querySelector<HTMLElement>('.k-dropdown-item')!.click();
         await wait();
         expect(instance.get('value')).to.eql(['hunan', 'yueyang', 'yueyanglou']);
+
+        // show again to test the position
+        input.click();
+        await wait();
+        const [_dropdown1, _dropdown2, _dropdown3] = getElements('.k-cascader-menu')!;
+        expect(_dropdown1.style.top).not.eql('0px');
+        expect(_dropdown2.style.top).not.eql('0px');
+        expect(_dropdown3.style.top).not.eql('0px');
     });
 
     it('no data for init data', async () => {
@@ -261,4 +269,45 @@ describe('Cascader', () => {
         expect(element.innerHTML).to.matchSnapshot();
         expect(instance.get('value')).to.eql(['beijing', 'haidian']);
     });
+
+    it('should select correct value', async () => {
+         class Demo extends Component {
+            static template = `
+                const {Cascader} = this;
+                <Cascader data={this.get('data')} v-model="value" />
+            `;
+            static defaults() {
+                return {
+                    value: ['beijing', 'haidian'],
+                    data: [
+                        {
+                            value: 'beijing',
+                            label: '北京',
+                            children: [
+                                {
+                                    value: 'haidian',
+                                    label: '海淀区'
+                                },
+                            ]
+                        },
+                        {
+                            value: 'hunan',
+                            label: '湖南',
+                        },
+                    ]
+                }
+            }
+            private Cascader = Cascader;
+        }
+
+        const [instance, element] = mount(Demo);
+        dispatchEvent(element, 'click');
+        await wait();
+
+        const [dropdown1, dropdown2] = getElements('.k-cascader-menu');
+        const [item1, item2] = dropdown1.querySelectorAll(':scope > .k-dropdown-item');
+        dispatchEvent(item2, 'click');
+        await wait();
+        expect(instance.get('value')).to.eql(['hunan']);
+    });
 });

package/components/cascader/useValue.ts

@@ -80,7 +80,7 @@ export function useValue() {
         // maybe the showedValue has the leaf value when we set it on show menu,
         // if we select by clicking, the showedValue has not the leaf value,
         // no matter which case, we set the last value by level
-        const newValue = showedValue.value.slice(0);
+        const newValue = showedValue.value.slice(0, level);
         newValue[level] = value;
         setValue(newValue);
     }

package/components/dialog/index.spec.ts

@@ -295,7 +295,38 @@ describe('Dialog', () => {
         instance.refs.dialog.close();
 
         await wait();
-        expect(document.body.getAttribute('style')).to.be.null;
+        const style = document.body.getAttribute('style');
+        expect(!!style).to.be.false;
+    });
+
+    it('should update position when change container', async () => {
+        class Demo extends Component<{show: boolean, container: any}> {
+            static template = `
+                var Dialog = this.Dialog;
+                <Dialog value={true} container={this.get('container')} ref="dialog">test</Dialog>
+            `;
+
+            private Dialog = Dialog;
+
+            static defaults() {
+                return {
+                    container: (parentDom: HTMLElement) => parentDom,
+                };
+            }
+        }
+
+        const [instance, element] = mount(Demo);
+
+        await wait();
+        instance.set('container', undefined);
+        await wait();
+        const dialogDom = instance.refs.dialog.dialogRef.value;
+        const style = dialogDom.style;
+        expect(style.left).not.eql('');
+        expect(style.top).not.eql('');
+
+        // should append to body
+        expect(dialogDom.closest('.k-dialog-wrapper').parentElement).to.eql(document.body);
     });
 
     // it('should handle v-if and v-model at the same time correctly in Vue', async () => {

package/components/dialog/usePosition.ts

@@ -8,6 +8,10 @@ export function usePosition(elementRef: RefObject<HTMLDivElement>) {
 
     instance.on(SHOW, center);
     instance.on('afterClose', onAfterLeave);
+    instance.watch('container', () => {
+        if (!instance.get('value')) return;
+        center();
+    }, { presented: true, inited: true });
 
     function center() {
         position(elementRef.value!, {

package/components/dropdown/menu.ts

@@ -6,6 +6,7 @@ import {useTransition} from './useTransition';
 import {useMenuKeyboard} from './useKeyboard';
 import {useMouseOutsidable} from '../../hooks/useMouseOutsidable';
 import {FeedbackCallback} from './usePosition';
+import { usePositionForDropdownMenu } from './usePosition';
 
 export interface DropdownMenuProps { }
 export interface DropdownMenuEvents { }
@@ -29,6 +30,7 @@ export class DropdownMenu<
     init() {
         provide(DROPDOWN_MENU, this);
         useMouseOutsidable(this.elementRef);
+        usePositionForDropdownMenu();
     }
 
     // no matter what the trigger is, we should show menu when enter into it.
@@ -78,4 +80,4 @@ function useKeyboardForDropdownMenu(dropdown: Dropdown) {
     });
 
     return {lock};
-}
+}

package/components/dropdown/usePosition.ts

@@ -1,8 +1,8 @@
-import {useInstance, findDomFromVNode} from 'intact';
-import type {Dropdown} from './';
+import {useInstance, findDomFromVNode, onBeforeUnmount} from 'intact';
+import type {Dropdown, DropdownMenu} from './';
 import {Options, position, Feedback} from '../position';
-import {noop} from 'intact-shared';
-import {isObject} from 'intact-shared';
+import {noop, isObject, isFunction} from 'intact-shared';
+import { isEqualObject } from '../utils';
 
 export type FeedbackCallback = (feedback: Feedback) => void;
 
@@ -18,21 +18,32 @@ export function usePosition() {
 
     (['of', 'position'] as const).forEach(item => {
         instance.watch(item, (newValue, oldValue) => {
-            // return if object is the same
             if (
+                !instance.get('value') ||
+                // return if object is the same
                 isObject(newValue) && isObject(oldValue) &&
                 // is not event object
                 !(newValue instanceof Event) &&
-                JSON.stringify(newValue) === JSON.stringify(oldValue)
-            )  {
-                return;
-            }
-            if (instance.get('value')) {
-                handle(noop);
-            }
+                isEqualObject(newValue, oldValue)
+            ) return;
+
+            handle(noop);
         }, {presented: true, inited: true});
     });
 
+    // watch container, it is not commonly used
+    instance.watch('container', (newValue, oldValue) => {
+        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
     function p(
         ofElement: HTMLElement | MouseEvent | undefined,
@@ -104,3 +115,15 @@ export function usePosition() {
 
     return {handle, positioned};
 }
+
+export function usePositionForDropdownMenu() {
+    const instance = useInstance() as DropdownMenu;
+    /**
+     * Meybe the DropdownMenu has changed by specified key
+     * so, we must reset the positioned.value beforeUnmount
+     * #956
+     */
+    onBeforeUnmount(() => {
+        instance.dropdown.positionHook.positioned.value = false;
+    });
+}

package/components/portal.ts

@@ -10,6 +10,8 @@ import {
     remove,
     TypeDefs,
     inject,
+    unmount,
+    removeVNodeDom,
 } from 'intact';
 import {isString} from 'intact-shared';
 import {DIALOG} from './dialog/constants';
@@ -57,7 +59,9 @@ export class Portal<T extends PortalProps = PortalProps> extends Component<T> {
         const fakeContainer = document.createDocumentFragment();
 
         (mountedQueue.priority || mountedQueue).push(() => {
-            const parentDom = this.$lastInput!.dom!.parentElement!;
+            const parentDom = this.$lastInput!.dom!.parentElement;
+            // maybe the <!-- portal --> has been removed by react, #938
+            if (!parentDom) return;
             this.initContainer(nextProps.container, parentDom, anchor);
             this.container!.appendChild(fakeContainer);
         });
@@ -128,8 +132,13 @@ export class Portal<T extends PortalProps = PortalProps> extends Component<T> {
     }
 
     $unmount(vNode: VNodeComponentClass<this>, nextVNode: VNodeComponentClass<this> | null) {
-        remove(vNode.props!.children as VNode, this.container!, false);
-        // removeVNodeDom(vNode.props!.children as VNode, this.container!);
+        const children = vNode.props!.children as VNode;
+        unmount(children, null);
+        if (this.container) {
+            // maybe the <!-- portal --> has been removed by react, #938
+            // remove(children, this.container, false);
+            removeVNodeDom(children, this.container);
+        }
         super.$unmount(vNode, nextVNode);
     }
 
@@ -140,7 +149,11 @@ export class Portal<T extends PortalProps = PortalProps> extends Component<T> {
             } else {
                 this.container = container(parentDom, anchor);
             }
+        } else {
+            // let below logic to set container to default if container does not exist.
+            this.container = null;
         }
+
         if (!this.container) {
             if (this.$senior instanceof BaseDialog) {
                 // Dialog and Drawer must be inserted into document.body

package/components/select/useFocusout.ts

@@ -3,7 +3,7 @@ import {BaseSelect} from './base';
 
 /**
  * don't trigger focusout event when layer is showing,
- * only trigger focusout when it hidden to make FormItem to validate it
+ * only trigger focusout when it is hidden to make FormItem to validate it
  * #449
  */
 export function useFocusout() {

package/components/table/row.ts

@@ -12,6 +12,7 @@ import type {TableColumnProps} from './column';
 import type {TableProps, TableRowKey} from './table';
 import {bind} from '../utils';
 import type {TableGrid} from './useMerge';
+import { isEqualObject } from '../utils';
 
 export interface TableRowProps {
     key: TableRowKey
@@ -65,7 +66,14 @@ export class TableRow extends Component<TableRowProps> {
         for (key in lastProps) {
             // ignore index
             if (key === 'index') continue;
-            if (lastProps[key] !== nextProps[key]) {
+            const lastValue = lastProps[key];
+            const nextValue = nextProps[key];
+            // deeply compare for offsetMap
+            if (key === 'offsetMap' && isEqualObject(lastValue, nextValue)) {
+                continue;
+            }
+
+            if (lastValue !== nextValue) {
                 isSame = false;
                 break;
             }

package/components/utils.ts

@@ -288,6 +288,21 @@ export function isEqualArray(a: EqualArrayValue, b: EqualArrayValue): boolean {
     return false;
 }
 
+export function isEqualObject(a: Record<string, any>, b: Record<string, any>): boolean {
+    if (a === b) return true;
+    if (a && b) {
+        const keysA = Object.keys(a);
+        const keysB = Object.keys(b);
+        if (keysA.length !== keysB.length) return false;
+
+        return keysA.every((key) => {
+            return a[key] === b[key];
+        });
+    }
+
+    return false;
+}
+
 export function last<T>(arr: T[]): T | undefined {
     return arr[arr.length - 1];
 }

package/components/virtual.ts

@@ -64,13 +64,15 @@ export class Virtual extends Component<any> {
             return {...props, ...events, className: _props.className || _props.class /* vue-next */};
         } else if (hasOwn.call(vnode, 'componentOptions') /* vue2 vnode */) {
             const data = vnode.data;
-            const on = data && data.on || EMPTY_OBJ;
+            if (!data) return props;
+
+            const on = data.on || EMPTY_OBJ;
             const events: Record<string, Function> = {};
             for (let key in on) {
                 events[`ev-${key}`] = on[key];
             }
 
-            return {...props, ...events};
+            return {...props, ...events, className: data.staticClass};
         }
 
         return props;

package/es/components/affix/index.d.ts

@@ -8,7 +8,7 @@ export interface AffixProps {
 export interface AffixEvents {
     change: [boolean];
 }
-export declare type ExcludeParam = {
+export type ExcludeParam = {
     offsetTop?: number;
     offsetBottom?: number;
     top: number;
@@ -16,7 +16,7 @@ export declare type ExcludeParam = {
     width: number;
     height: number;
 };
-export declare type ShouldFixParam = {
+export type ShouldFixParam = {
     offsetTop?: number;
     offsetBottom?: number;
     viewportHeight?: number;

package/es/components/affix/index.js

@@ -11,22 +11,17 @@ var typeDefs = {
 };
 export var Affix = /*#__PURE__*/function (_Component) {
   _inheritsLoose(Affix, _Component);
-
   function Affix() {
     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.style = useStyle(_this.elementRef);
     return _this;
   }
-
   return Affix;
 }(Component);
 Affix.template = template;

package/es/components/affix/index.spec.js

@@ -9,121 +9,97 @@ describe('Affix', function () {
   });
   it('basic test', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee() {
     var _mount, instance, element, _element$querySelecto, affix1, affix2, _element$querySelecto2, wrapper1, wrapper2, test;
-
     return _regeneratorRuntime.wrap(function _callee$(_context) {
-      while (1) {
-        switch (_context.prev = _context.next) {
-          case 0:
-            this.timeout(0);
-            _mount = mount(BasicDemo, {
-              marginTop: '200px'
-            }), instance = _mount[0], element = _mount[1];
-            _element$querySelecto = element.querySelectorAll('.k-affix'), affix1 = _element$querySelecto[0], affix2 = _element$querySelecto[1];
-            _element$querySelecto2 = element.querySelectorAll('.k-affix-wrapper'), wrapper1 = _element$querySelecto2[0], wrapper2 = _element$querySelecto2[1];
-
-            test = function test(height1, style1, height2, style2) {
-              expect(affix1.style.height).to.eql(height1);
-              expect(wrapper1.getAttribute('style')).to.eql(style1);
-              expect(affix2.style.height).to.eql(height2);
-              expect(wrapper2.getAttribute('style')).to.eql(style2);
-            }; // browser may scroll to the last position of page
-
-
-            _context.next = 7;
-            return wait(100);
-
-          case 7:
-            window.scrollTo(0, document.scrollingElement.scrollHeight - 1080);
-            _context.next = 10;
-            return wait(100);
-
-          case 10:
-            test(wrapper1.offsetHeight + "px", "position: fixed; width: 800px; top: 87px;", '', null); // scroll to the top
-
-            window.scrollTo(0, 0);
-            _context.next = 14;
-            return wait(100);
-
-          case 14:
-            test("", null, '', null); // change bottom
-
-            instance.set('bottom', 900);
-            _context.next = 18;
-            return wait(100);
-
-          case 18:
-            test("", null, wrapper2.offsetHeight + "px", "position: fixed; width: 800px; bottom: 900px;");
-
-          case 19:
-          case "end":
-            return _context.stop();
-        }
+      while (1) switch (_context.prev = _context.next) {
+        case 0:
+          this.timeout(0);
+          _mount = mount(BasicDemo, {
+            marginTop: '200px'
+          }), instance = _mount[0], element = _mount[1];
+          _element$querySelecto = element.querySelectorAll('.k-affix'), affix1 = _element$querySelecto[0], affix2 = _element$querySelecto[1];
+          _element$querySelecto2 = element.querySelectorAll('.k-affix-wrapper'), wrapper1 = _element$querySelecto2[0], wrapper2 = _element$querySelecto2[1];
+          test = function test(height1, style1, height2, style2) {
+            expect(affix1.style.height).to.eql(height1);
+            expect(wrapper1.getAttribute('style')).to.eql(style1);
+            expect(affix2.style.height).to.eql(height2);
+            expect(wrapper2.getAttribute('style')).to.eql(style2);
+          }; // browser may scroll to the last position of page
+          _context.next = 7;
+          return wait(100);
+        case 7:
+          window.scrollTo(0, document.scrollingElement.scrollHeight - 1080);
+          _context.next = 10;
+          return wait(100);
+        case 10:
+          test(wrapper1.offsetHeight + "px", "position: fixed; width: 800px; top: 87px;", '', null);
+          // scroll to the top
+          window.scrollTo(0, 0);
+          _context.next = 14;
+          return wait(100);
+        case 14:
+          test("", null, '', null);
+          // change bottom
+          instance.set('bottom', 900);
+          _context.next = 18;
+          return wait(100);
+        case 18:
+          test("", null, wrapper2.offsetHeight + "px", "position: fixed; width: 800px; bottom: 900px;");
+        case 19:
+        case "end":
+          return _context.stop();
       }
     }, _callee, this);
   })));
   it('custom fix rule', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee2() {
     var _mount2, instance, element, _element$querySelecto3, affix1, affix2, _element$querySelecto4, wrapper1, wrapper2, test;
-
     return _regeneratorRuntime.wrap(function _callee2$(_context2) {
-      while (1) {
-        switch (_context2.prev = _context2.next) {
-          case 0:
-            this.timeout(0);
-            _mount2 = mount(CustomDemo, {
-              marginTop: '200px'
-            }), instance = _mount2[0], element = _mount2[1];
-            _element$querySelecto3 = element.querySelectorAll('.k-affix'), affix1 = _element$querySelecto3[0], affix2 = _element$querySelecto3[1];
-            _element$querySelecto4 = element.querySelectorAll('.k-affix-wrapper'), wrapper1 = _element$querySelecto4[0], wrapper2 = _element$querySelecto4[1];
-
-            test = function test(height1, style1, height2, style2) {
-              expect(affix1.style.height).to.eql(height1);
-              expect(wrapper1.getAttribute('style')).to.eql(style1);
-              expect(affix2.style.height).to.eql(height2);
-              expect(wrapper2.getAttribute('style')).to.eql(style2);
-            }; // browser may scroll to the last position of page
-
-
-            _context2.next = 7;
-            return wait(100);
-
-          case 7:
-            window.scrollTo(0, document.scrollingElement.scrollHeight - 1080);
-            _context2.next = 10;
-            return wait(100);
-
-          case 10:
-            test(wrapper1.offsetHeight + "px", "position: fixed; width: 800px; top: 150px;", '', null); // scroll to the top
-
-            window.scrollTo(0, 0);
-            _context2.next = 14;
-            return wait(100);
-
-          case 14:
-            test("", null, '', null); // change bottom
-
-            element.style.marginTop = '900px';
-            instance.set('bottom', 500);
-            _context2.next = 19;
-            return wait();
-
-          case 19:
-            document.scrollingElement.scrollTop = document.scrollingElement.scrollHeight;
-            _context2.next = 22;
-            return wait(100);
-
-          case 22:
-            test(wrapper1.offsetHeight + "px", "position: fixed; width: 800px; top: 150px;", wrapper2.offsetHeight + "px", "position: fixed; width: 800px; bottom: 500px;");
-            window.scrollTo(0, 0);
-            _context2.next = 26;
-            return wait(100);
-
-          case 26:
-            test("", null, '', null);
-
-          case 27:
-          case "end":
-            return _context2.stop();
-        }
+      while (1) switch (_context2.prev = _context2.next) {
+        case 0:
+          this.timeout(0);
+          _mount2 = mount(CustomDemo, {
+            marginTop: '200px'
+          }), instance = _mount2[0], element = _mount2[1];
+          _element$querySelecto3 = element.querySelectorAll('.k-affix'), affix1 = _element$querySelecto3[0], affix2 = _element$querySelecto3[1];
+          _element$querySelecto4 = element.querySelectorAll('.k-affix-wrapper'), wrapper1 = _element$querySelecto4[0], wrapper2 = _element$querySelecto4[1];
+          test = function test(height1, style1, height2, style2) {
+            expect(affix1.style.height).to.eql(height1);
+            expect(wrapper1.getAttribute('style')).to.eql(style1);
+            expect(affix2.style.height).to.eql(height2);
+            expect(wrapper2.getAttribute('style')).to.eql(style2);
+          }; // browser may scroll to the last position of page
+          _context2.next = 7;
+          return wait(100);
+        case 7:
+          window.scrollTo(0, document.scrollingElement.scrollHeight - 1080);
+          _context2.next = 10;
+          return wait(100);
+        case 10:
+          test(wrapper1.offsetHeight + "px", "position: fixed; width: 800px; top: 150px;", '', null);
+          // scroll to the top
+          window.scrollTo(0, 0);
+          _context2.next = 14;
+          return wait(100);
+        case 14:
+          test("", null, '', null);
+          // change bottom
+          element.style.marginTop = '900px';
+          instance.set('bottom', 500);
+          _context2.next = 19;
+          return wait();
+        case 19:
+          document.scrollingElement.scrollTop = document.scrollingElement.scrollHeight;
+          _context2.next = 22;
+          return wait(100);
+        case 22:
+          test(wrapper1.offsetHeight + "px", "position: fixed; width: 800px; top: 150px;", wrapper2.offsetHeight + "px", "position: fixed; width: 800px; bottom: 500px;");
+          window.scrollTo(0, 0);
+          _context2.next = 26;
+          return wait(100);
+        case 26:
+          test("", null, '', null);
+        case 27:
+        case "end":
+          return _context2.stop();
       }
     }, _callee2, this);
   })));

package/es/components/affix/index.vdt.js

@@ -4,19 +4,16 @@ import { getRestProps, addStyle } from '../utils';
 import { makeStyles } 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,
-      className = _this$get.className,
-      style = _this$get.style;
-
+    children = _this$get.children,
+    className = _this$get.className,
+    style = _this$get.style;
   var _this$style = this.style,
-      _style = _this$style.style,
-      containerStyle = _this$style.containerStyle;
+    _style = _this$style.style,
+    containerStyle = _this$style.containerStyle;
   var classNameObj = (_classNameObj = {
     'k-affix': true,
     'k-fixed': _style.value