@king-design/intact 2.0.17-beta.0 → 2.1.1

package/es/components/table/useDraggable.js

@@ -2,7 +2,7 @@ import _sliceInstanceProperty from "@babel/runtime-corejs3/core-js/instance/slic
 import _spliceInstanceProperty from "@babel/runtime-corejs3/core-js/instance/splice";
 import { useInstance, nextTick } from 'intact';
 import { useState } from '../../hooks/useState';
-export function useDraggable() {
+export function useDraggable(data) {
   var instance = useInstance();
   var draggingKey = useState(null);
   var originIndex;
@@ -13,7 +13,7 @@ export function useDraggable() {
     draggingIndex = originIndex = tableRow.get('index');
     var key = tableRow.get('key');
     draggingKey.set(key);
-    originData = instance.get('data');
+    originData = data.value;
     instance.trigger('dragstart', {
       key: key,
       from: draggingIndex
@@ -28,20 +28,23 @@ export function useDraggable() {
     var newIndex = tableRow.get('index');
     if (newIndex === draggingIndex) return; // swap data
 
-    var data = _sliceInstanceProperty(_context = instance.get('data')).call(_context);
+    var newData = _sliceInstanceProperty(_context = data.value).call(_context);
 
-    var item = _spliceInstanceProperty(data).call(data, draggingIndex, 1)[0];
+    var item = _spliceInstanceProperty(newData).call(newData, draggingIndex, 1)[0];
 
-    _spliceInstanceProperty(data).call(data, newIndex, 0, item);
+    _spliceInstanceProperty(newData).call(newData, newIndex, 0, item);
 
     draggingIndex = newIndex;
-    instance.set('data', data);
+    data.set(newData);
   }
 
   function onRowDragEnd(e, tableRow) {
-    e.preventDefault();
-    instance.set('data', originData);
+    e.preventDefault(); // revert to origin data, then set to new data to trigger animation
+
+    var newData = data.value;
+    data.set(originData);
     nextTick(function () {
+      data.set(newData);
       draggingKey.set(null);
       instance.trigger('dragend', {
         key: tableRow.get('key'),

package/es/components/table/useGroup.js

@@ -12,6 +12,9 @@ export function useGroup() {
   var instance = useInstance();
   var keywords = useState('');
   var filteredGroup = useState(instance.get('group'));
+  instance.on('$receive:group', function (group) {
+    return filteredGroup.set(group);
+  });
 
   function onSelect(value, groupValue, onChange) {
     var _instance$get = instance.get(),

package/es/components/table/useMerge.d.ts

@@ -1,5 +1,6 @@
 import { Props } from 'intact';
 import type { TableColumnProps } from './column';
+import { State } from '../../hooks/useState';
 export declare type TableMerge<T = any, CheckType = 'checkbox'> = (row: T, column: CheckType extends 'none' ? Props<TableColumnProps> : Props<TableColumnProps> | null, rowIndex: number, columnIndex: number) => TableMergeConfig | undefined;
 export declare type TableMergeConfig = {
     colspan?: number;
@@ -10,6 +11,6 @@ export declare type TableGridItem = {
     spans: TableMergeConfig | undefined;
 };
 export declare type TableGrid = TableGridItem[][];
-export declare function useMerge(getCols: () => Props<TableColumnProps>[]): {
+export declare function useMerge(getCols: () => Props<TableColumnProps>[], data: State<unknown[] | undefined>): {
     getGrid: () => TableGrid;
 };

package/es/components/table/useMerge.js

@@ -1,5 +1,6 @@
 import { useInstance } from 'intact';
-export function useMerge(getCols) {
+import { watchState } from '../../hooks/useState';
+export function useMerge(getCols, data) {
   var instance = useInstance();
   var grid = [];
 
@@ -8,12 +9,11 @@ export function useMerge(getCols) {
 
     var _instance$get = instance.get(),
         merge = _instance$get.merge,
-        data = _instance$get.data,
         checkType = _instance$get.checkType;
 
-    if (!data || !data.length || !merge) return;
+    if (!data.value || !data.value.length || !merge) return;
     var cols = getCols();
-    data.forEach(function (data, rowIndex) {
+    data.value.forEach(function (data, rowIndex) {
       var currentRow = [];
       grid.push(currentRow);
       var columnIndexOffset = 0;
@@ -71,6 +71,7 @@ export function useMerge(getCols) {
   }
 
   instance.on('$receive:children', handleSpans);
+  watchState(data, handleSpans);
   return {
     getGrid: getGrid
   };

package/es/components/table/usePagination.d.ts

@@ -0,0 +1,8 @@
+import { Pagination, PaginationChangeData } from '../pagination';
+export declare function usePagination(): {
+    data: import("../../hooks/useState").State<any[] | undefined>;
+    value: import("../../hooks/useState").State<number>;
+    limit: import("../../hooks/useState").State<number>;
+    onChange: (data: PaginationChangeData) => void;
+    paginationRef: import("intact").RefObject<Pagination>;
+};

package/es/components/table/usePagination.js

@@ -0,0 +1,81 @@
+import _extends from "@babel/runtime-corejs3/helpers/extends";
+import _sliceInstanceProperty from "@babel/runtime-corejs3/core-js/instance/slice";
+import { useInstance, createRef } from 'intact';
+import { useState } from '../../hooks/useState';
+import { Pagination } from '../pagination';
+import { isObject } from 'intact-shared';
+import { useReceive } from '../../hooks/useReceive';
+var defaultPagination = Pagination.defaults();
+export function usePagination() {
+  var instance = useInstance();
+  var data = useState(instance.get('data'));
+  var value = useState(defaultPagination.value);
+  var limit = useState(defaultPagination.limit);
+  var paginationRef = createRef(); // for unit test
+
+  useReceive(['data', 'pagination'], function () {
+    handleData();
+  });
+
+  function handleData() {
+    var _instance$get = instance.get(),
+        _data = _instance$get.data,
+        pagination = _instance$get.pagination;
+
+    if (!_data) {
+      data.set(undefined);
+      return;
+    }
+
+    if (!pagination) {
+      data.set(_data);
+      return;
+    }
+
+    if (isObject(pagination)) {
+      if (pagination.value) {
+        value.set(pagination.value);
+      }
+
+      if (pagination.limit) {
+        limit.set(pagination.limit);
+      }
+    }
+
+    updateDataByPage();
+  }
+
+  function updateDataByPage() {
+    var _instance$get2 = instance.get(),
+        _data = _instance$get2.data;
+
+    var index = (value.value - 1) * limit.value;
+    data.set(_sliceInstanceProperty(_data).call(_data, index, index + limit.value));
+  }
+
+  function onChange(data) {
+    var _instance$get3 = instance.get(),
+        pagination = _instance$get3.pagination;
+
+    value.set(data.value);
+    limit.set(data.limit);
+    updateDataByPage();
+
+    if (isObject(pagination)) {
+      instance.set('pagination', _extends({}, pagination, {
+        value: value.value,
+        limit: limit.value
+      }));
+    }
+
+    instance.trigger('changePage', data);
+  }
+
+  return {
+    data: data,
+    value: value,
+    limit: limit,
+    onChange: onChange,
+    paginationRef: paginationRef
+  };
+}

package/es/components/table/useTree.d.ts

@@ -1,5 +1,6 @@
 import type { TableRowKey } from './table';
-export declare function useTree(): {
+import { State } from '../../hooks/useState';
+export declare function useTree(data: State<any[] | undefined>): {
     isSpreaded: (key: TableRowKey) => boolean;
     toggleSpreadRow: (key: TableRowKey) => void;
     loopData: <T>(cb: (value: any, index: number, level: number, meta: T | null) => T, shouldBreak?: boolean) => void;

package/es/components/table/useTree.js

@@ -1,7 +1,7 @@
 import { useInstance } from 'intact';
 import { inArray } from './useChecked';
 import { toggleArray } from '../utils';
-export function useTree() {
+export function useTree(data) {
   var instance = useInstance();
 
   function isSpreaded(key) {
@@ -18,10 +18,9 @@ export function useTree() {
     }
 
     var _instance$get = instance.get(),
-        childrenKey = _instance$get.childrenKey,
-        data = _instance$get.data;
+        childrenKey = _instance$get.childrenKey;
 
-    loopDataWithChildrenKey(data, childrenKey, cb, shouldBreak);
+    loopDataWithChildrenKey(data.value, childrenKey, cb, shouldBreak);
   }
 
   return {

package/es/components/tooltip/content.d.ts

@@ -12,6 +12,7 @@ export declare class TooltipContent extends DropdownMenu<TooltipContentProps, To
     private arrow;
     init(): void;
     private onEnter;
+    private onAfterLeave;
     protected onMouseEnter(e: MouseEvent): void;
     private ok;
     private cancel;

package/es/components/tooltip/content.js

@@ -5,6 +5,7 @@ import { DropdownMenu } from '../dropdown/menu';
 import template from './content.vdt';
 import { bind } from '../utils';
 import { useArrow } from './useArrow';
+import { tooltip as tooltipTheme } from './styles';
 export var TooltipContent = /*#__PURE__*/function (_DropdownMenu) {
   _inheritsLoose(TooltipContent, _DropdownMenu);
 
@@ -35,10 +36,24 @@ export var TooltipContent = /*#__PURE__*/function (_DropdownMenu) {
     });
   };
 
-  _proto.onEnter = function onEnter() {
+  _proto.onEnter = function onEnter(elem) {
+    // fix the width, https://github.com/ksc-fe/kpc/issues/873
+    var maxWidth = parseInt(tooltipTheme.maxWidth);
+    var width = elem.offsetWidth;
+
+    if (width === maxWidth) {
+      elem.style.width = width + "px";
+    }
+
     this.dropdown.position();
   };
 
+  _proto.onAfterLeave = function onAfterLeave(elem) {
+    // remove the position after leave, https://github.com/ksc-fe/kpc/issues/873
+    var style = elem.style;
+    style.left = style.top = style.width = '';
+  };
+
   _proto.onMouseEnter = function onMouseEnter(e) {
     var dropdown = this.dropdown;
 
@@ -67,6 +82,8 @@ TooltipContent.template = template;
 
 __decorate([bind], TooltipContent.prototype, "onEnter", null);
 
+__decorate([bind], TooltipContent.prototype, "onAfterLeave", null);
+
 __decorate([bind], TooltipContent.prototype, "onMouseEnter", null);
 
 __decorate([bind], TooltipContent.prototype, "ok", null);

package/es/components/tooltip/content.vdt.js

@@ -38,7 +38,9 @@ export default function ($props, $blocks, $__proto__) {
     'value': !!value && !this.isEmptyChildren,
     'transition': {
       name: 'k-fade',
-      onEnter: this.onEnter
+      onEnter: this.onEnter,
+      onAfterLeave: this.onAfterLeave,
+      onLeaveCancelled: this.onAfterLeave
     },
     'className': _$cn(classNameObj)
   }, function ($blocks) {

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

@@ -12,7 +12,9 @@ import ContentDemo from '~/components/tooltip/demos/content';
 import ConfirmDemo from '~/components/tooltip/demos/confirm';
 import AlwaysDemo from '~/components/tooltip/demos/always';
 import { Tooltip } from './';
+import { Dialog } from '../dialog';
 import { mount, unmount, dispatchEvent, getElement, wait } from '../../test/utils';
+import { tooltip as tooltipTheme } from './styles';
 describe('Tooltip', function () {
   afterEach(function (done) {
     unmount();
@@ -540,8 +542,10 @@ describe('Tooltip', function () {
 
               _proto.mounted = function mounted() {
                 var element = findDomFromVNode(this.$lastInput, true);
-                var windowHeight = window.innerHeight || document.documentElement.clientHeight;
-                element.parentNode.style.height = windowHeight * 2 + "px";
+                var style = element.style;
+                style.position = 'fixed';
+                style.top = '-200px'; // const windowHeight = window.innerHeight || document.documentElement.clientHeight;
+                // (element.parentNode as HTMLElement).style.height = `${windowHeight * 2}px`;
               };
 
               return Demo;
@@ -555,27 +559,130 @@ describe('Tooltip', function () {
               };
             };
 
-            _mount9 = mount(Demo), i = _mount9[0];
-            _context11.next = 6;
-            return wait(500);
+            _mount9 = mount(Demo), i = _mount9[0]; // await wait(500);
+            // window.scrollTo(0, 10000);
 
-          case 6:
-            window.scrollTo(0, 10000);
             i.set('show', true);
-            _context11.next = 10;
+            _context11.next = 7;
             return wait(500);
 
-          case 10:
+          case 7:
             content = getElement('.k-tooltip-content');
             console.log(content.outerHTML);
             console.log(_JSON$stringify(content.getBoundingClientRect()));
             expect(content.getBoundingClientRect().top < 0).to.be.true;
 
-          case 14:
+          case 11:
           case "end":
             return _context11.stop();
         }
       }
     }, _callee9);
   })));
+  it('should add className', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee10() {
+    var Demo, _mount10, instance, element, trigger, dropdown;
+
+    return _regeneratorRuntime.wrap(function _callee10$(_context13) {
+      while (1) {
+        switch (_context13.prev = _context13.next) {
+          case 0:
+            Demo = /*#__PURE__*/function (_Component3) {
+              _inheritsLoose(Demo, _Component3);
+
+              function Demo() {
+                var _context12;
+
+                var _this3;
+
+                for (var _len3 = arguments.length, args = new Array(_len3), _key3 = 0; _key3 < _len3; _key3++) {
+                  args[_key3] = arguments[_key3];
+                }
+
+                _this3 = _Component3.call.apply(_Component3, _concatInstanceProperty(_context12 = [this]).call(_context12, args)) || this;
+                _this3.Tooltip = Tooltip;
+                return _this3;
+              }
+
+              return Demo;
+            }(Component);
+
+            Demo.template = "\n                const Tooltip = this.Tooltip;\n                <div>\n                    <Tooltip content=\"hello\" class=\"a\">\n                        <div ref=\"test\" class=\"b\">test</div>\n                    </Tooltip>\n                </div>\n            ";
+            _mount10 = mount(Demo), instance = _mount10[0], element = _mount10[1];
+            trigger = instance.refs.test;
+            expect(trigger.className).to.eql('b a');
+            dispatchEvent(trigger, 'mouseenter');
+            _context13.next = 8;
+            return wait();
+
+          case 8:
+            dropdown = getElement('.k-tooltip-content');
+            expect(dropdown.classList.contains('a')).to.be.true;
+
+          case 10:
+          case "end":
+            return _context13.stop();
+        }
+      }
+    }, _callee10);
+  })));
+  it('should fix the width in small container', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee11() {
+    var Demo, _mount11, instance, element, trigger, expecedWidth, content, width, newWidth;
+
+    return _regeneratorRuntime.wrap(function _callee11$(_context15) {
+      while (1) {
+        switch (_context15.prev = _context15.next) {
+          case 0:
+            Demo = /*#__PURE__*/function (_Component4) {
+              _inheritsLoose(Demo, _Component4);
+
+              function Demo() {
+                var _context14;
+
+                var _this4;
+
+                for (var _len4 = arguments.length, args = new Array(_len4), _key4 = 0; _key4 < _len4; _key4++) {
+                  args[_key4] = arguments[_key4];
+                }
+
+                _this4 = _Component4.call.apply(_Component4, _concatInstanceProperty(_context14 = [this]).call(_context14, args)) || this;
+                _this4.Tooltip = Tooltip;
+                _this4.Dialog = Dialog;
+                return _this4;
+              }
+
+              return Demo;
+            }(Component);
+
+            Demo.template = "\n                const {Tooltip, Dialog} = this;\n                <div style=\"text-align: right; position: relative; width: 300px;\">\n                    <Tooltip content=\"\u8FD9\u662F\u4E00\u6BB5\u5F88\u957F\u7684\u63CF\u8FF0\u6587\u5B57\uFF0C\u8FD9\u662F\u4E00\u6BB5\u5F88\u957F\u7684\u63CF\u8FF0\u6587\u5B57\" container={dom => dom}>\n                        <span class=\"trigger\">test</span>\n                    </Tooltip>\n                </div>\n            ";
+            _mount11 = mount(Demo), instance = _mount11[0], element = _mount11[1];
+            trigger = element.querySelector('.trigger');
+            expecedWidth = parseInt(tooltipTheme.maxWidth);
+            dispatchEvent(trigger, 'mouseenter');
+            _context15.next = 8;
+            return wait();
+
+          case 8:
+            content = getElement('.k-tooltip-content');
+            width = content.offsetWidth;
+            expect(width).to.eql(expecedWidth);
+            dispatchEvent(trigger, 'mouseleave');
+            _context15.next = 14;
+            return wait();
+
+          case 14:
+            dispatchEvent(trigger, 'mouseenter');
+            _context15.next = 17;
+            return wait();
+
+          case 17:
+            newWidth = content.offsetWidth;
+            expect(newWidth).to.eql(width);
+
+          case 19:
+          case "end":
+            return _context15.stop();
+        }
+      }
+    }, _callee11);
+  })));
 });

package/es/components/tooltip/styles.d.ts

@@ -1,4 +1,26 @@
 import '../../styles/global';
+declare const defaults: {
+    padding: string;
+    readonly color: string;
+    bgColor: string;
+    lineHeight: number;
+    maxWidth: string;
+    arrow: {
+        borderColor: string;
+        width: string;
+    };
+    confirm: {
+        gaps: string;
+    };
+    dark: {
+        readonly bgColor: string;
+        color: string;
+        readonly arrowBorderColor: string;
+    };
+    smallPadding: string;
+};
+export declare let tooltip: typeof defaults;
 export declare type Theme = 'dark' | 'light';
 export declare const themes: Theme[];
 export default function makeStyles(): string;
+export {};

package/es/components/tooltip/styles.js

@@ -38,7 +38,7 @@ var defaults = {
   },
   smallPadding: '4px'
 };
-var tooltip;
+export var tooltip;
 setDefault(function () {
   tooltip = deepDefaults(theme, {
     tooltip: defaults

package/es/components/tooltip/tooltip.d.ts

@@ -23,5 +23,6 @@ export declare class Tooltip<T extends TooltipProps = TooltipProps, E extends To
     static typeDefs: Required<TypeDefs<TooltipProps>>;
     static defaults: () => Partial<TooltipProps>;
     static events: Events<TooltipEvents>;
+    show(shouldFocus?: boolean): void;
     hide(immediately: boolean): void;
 }

package/es/components/tooltip/tooltip.js

@@ -25,6 +25,7 @@ var defaults = function defaults() {
       at: 'center top',
       collision: 'flipfit'
     },
+    collison: 'flipfit',
     hoverable: false,
     always: false,
     confirm: false,
@@ -48,6 +49,16 @@ export var Tooltip = /*#__PURE__*/function (_Dropdown) {
 
   var _proto = Tooltip.prototype;
 
+  _proto.show = function show(shouldFocus) {
+    if (shouldFocus === void 0) {
+      shouldFocus = false;
+    }
+
+    if (this.get('disabled')) return;
+    clearTimeout(this.timer);
+    this.set('value', true);
+  };
+
   _proto.hide = function hide(immediately) {
     if (this.get('always')) return;
 

package/es/components/virtual.d.ts

@@ -0,0 +1,8 @@
+import { Component, VNode } from 'intact';
+export declare class Virtual extends Component<any> {
+    static template(this: Virtual): VNode<import("intact").VNodeTag>;
+    private vNodeProps;
+    private getVNodeProps;
+    private getEventProps;
+    private callEvent;
+}

package/es/components/virtual.js

@@ -0,0 +1,126 @@
+import _extends from "@babel/runtime-corejs3/helpers/extends";
+import _objectWithoutPropertiesLoose from "@babel/runtime-corejs3/helpers/objectWithoutPropertiesLoose";
+import _inheritsLoose from "@babel/runtime-corejs3/helpers/inheritsLoose";
+var _excluded = ["children"];
+import _concatInstanceProperty from "@babel/runtime-corejs3/core-js/instance/concat";
+import _startsWithInstanceProperty from "@babel/runtime-corejs3/core-js/instance/starts-with";
+import { Component, directClone, createVNode } from 'intact';
+import { isTextChildren } from './utils';
+import { EMPTY_OBJ, isFunction, hasOwn } from 'intact-shared';
+import { cx } from '@emotion/css';
+var reactEventReg = /on[A-Z]/;
+export var Virtual = /*#__PURE__*/function (_Component) {
+  _inheritsLoose(Virtual, _Component);
+
+  function Virtual() {
+    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.vNodeProps = null;
+    return _this;
+  }
+
+  Virtual.template = function template() {
+    var _cx;
+
+    var _this$get = this.get(),
+        children = _this$get.children,
+        props = _objectWithoutPropertiesLoose(_this$get, _excluded);
+
+    if (process.env.NODE_ENV !== 'production') {
+      if (!children || Array.isArray(children) && children.length !== 1) {
+        throw new Error('Component must receive one children');
+      }
+    }
+
+    var vNode = Array.isArray(children) ? children[0] : children;
+    var clonedVNode = isTextChildren(vNode) ? createVNode('span', null, vNode) : directClone(vNode);
+    var vNodeProps = this.vNodeProps = this.getVNodeProps(clonedVNode.props || EMPTY_OBJ);
+    var eventProps = this.getEventProps(); //  merge className 
+
+    var className = clonedVNode.className || vNodeProps.className;
+    className = cx((_cx = {}, _cx[className] = !!className, _cx[props.className] = !!props.className, _cx));
+    clonedVNode.props = _extends({}, props, vNodeProps, eventProps, {
+      className: className
+    });
+    clonedVNode.className = className;
+    return clonedVNode;
+  };
+
+  var _proto = Virtual.prototype;
+
+  _proto.getVNodeProps = function getVNodeProps(props) {
+    var vnode = props.vnode;
+    if (!vnode) return props; // maybe we render the intact component in react slot property, in this case
+    // the $isReact is false. so use the vnode $$typeof field as gauge
+
+    if (vnode.$$typeof || vnode.__v_isVNode
+    /* vue3 vnode */
+    ) {
+      var _props = vnode.props;
+      if (!_props) return props;
+      var events = {};
+
+      for (var key in _props) {
+        if (reactEventReg.test(key)) {
+          events["ev-" + key.substring(2).toLowerCase()] = _props[key];
+        }
+      }
+
+      return _extends({}, props, events, {
+        className: _props.className || _props.class
+        /* vue-next */
+
+      });
+    } else if (hasOwn.call(vnode, 'componentOptions')
+    /* vue2 vnode */
+    ) {
+      var data = vnode.data;
+      var on = data && data.on || EMPTY_OBJ;
+      var _events = {};
+
+      for (var _key2 in on) {
+        _events["ev-" + _key2] = on[_key2];
+      }
+
+      return _extends({}, props, _events);
+    }
+
+    return props;
+  };
+
+  _proto.getEventProps = function getEventProps() {
+    var _this2 = this;
+
+    var props = {};
+
+    var _loop = function _loop(prop) {
+      if (_startsWithInstanceProperty(prop).call(prop, 'ev-')) {
+        props[prop] = function (e) {
+          return _this2.callEvent(prop, e);
+        };
+      }
+    };
+
+    for (var prop in this.get()) {
+      _loop(prop);
+    }
+
+    return props;
+  };
+
+  _proto.callEvent = function callEvent(name, e) {
+    var callback = this.vNodeProps[name];
+    var callbackOnVirtual = this.get(name);
+    if (isFunction(callback)) callback(e);
+    if (isFunction(callbackOnVirtual)) callbackOnVirtual(e);
+  };
+
+  return Virtual;
+}(Component);