@king-design/react 3.0.0-beta.0 → 3.0.0-beta.2

package/components/table/useDisableRow.d.ts

@@ -1,6 +1,7 @@
 import type { TableRowKey } from './table';
 import type { useTree } from './useTree';
-export declare function useDisableRow(loopData: ReturnType<typeof useTree>['loopData']): {
+import { State } from '../../hooks/useState';
+export declare function useDisableRow(loopData: ReturnType<typeof useTree>['loopData'], data: State<any[] | undefined>): {
     isDisabled: (data: any, index: number, key: TableRowKey) => boolean;
     getEnableKeys: () => TableRowKey[];
     isDisabledKey: (key: TableRowKey) => boolean;

package/components/table/useDisableRow.js

@@ -1,5 +1,6 @@
 import { useInstance } from 'intact-react';
-export function useDisableRow(loopData) {
+import { watchState } from '../../hooks/useState';
+export function useDisableRow(loopData, data) {
   var instance = useInstance();
   var enabledKeys = [];
   var disabledKeys = [];
@@ -45,9 +46,8 @@ export function useDisableRow(loopData) {
     return allKeys;
   }
 
-  instance.on('$receive:children', setDisabledKeys); // for draggable
-
-  instance.on('$change:data', setDisabledKeys);
+  instance.on('$receive:children', setDisabledKeys);
+  watchState(data, setDisabledKeys);
   return {
     isDisabled: isDisabled,
     getEnableKeys: getEnableKeys,

package/components/table/useDraggable.d.ts

@@ -1,8 +1,9 @@
 import type { TableRowKey } from './table';
+import { State } from '../../hooks/useState';
 import type { TableRow } from './row';
-export declare function useDraggable(): {
+export declare function useDraggable(data: State<unknown[] | undefined>): {
     onRowDragStart: (e: MouseEvent, tableRow: TableRow) => void;
     onRowDragOver: (e: MouseEvent, tableRow: TableRow) => void;
     onRowDragEnd: (e: MouseEvent, tableRow: TableRow) => void;
-    draggingKey: import("../../hooks/useState").State<TableRowKey | null>;
+    draggingKey: State<TableRowKey | null>;
 };

package/components/table/useDraggable.js

@@ -1,8 +1,7 @@
-import _sliceInstanceProperty from "@babel/runtime-corejs3/core-js/instance/slice";
-import _spliceInstanceProperty from "@babel/runtime-corejs3/core-js/instance/splice";
 import { useInstance, nextTick } from 'intact-react';
 import { useState } from '../../hooks/useState';
-export function useDraggable() {
+import { swap } from '../utils';
+export function useDraggable(data) {
   var instance = useInstance();
   var draggingKey = useState(null);
   var originIndex;
@@ -13,7 +12,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
@@ -21,27 +20,24 @@ export function useDraggable() {
   }
 
   function onRowDragOver(e, tableRow) {
-    var _context;
-
     e.preventDefault();
     e.stopPropagation();
+    if (draggingKey.value === null) return;
     var newIndex = tableRow.get('index');
     if (newIndex === draggingIndex) return; // swap data
 
-    var data = _sliceInstanceProperty(_context = instance.get('data')).call(_context);
-
-    var item = _spliceInstanceProperty(data).call(data, draggingIndex, 1)[0];
-
-    _spliceInstanceProperty(data).call(data, newIndex, 0, item);
-
+    var newData = swap(data.value, draggingIndex, newIndex);
     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/components/table/useGroup.d.ts

@@ -1,4 +1,5 @@
 import type { TableColumnGroupItem } from './column';
+import type { Dropdown } from '../dropdown';
 declare type ContextValue = {
     groupValue: any;
     onChange: (key: string, groupValue: any) => void;
@@ -8,10 +9,15 @@ export declare const context: {
     Consumer: import("intact").ComponentConstructor<import("intact").Component<import("../context").ConsumerProps<ContextValue>, {}, {}, {}>>;
 };
 export declare function useGroup(): {
-    onSelect: (value: any, groupValue: any, onChange: ContextValue['onChange']) => void;
-    isChecked: (value: any, groupValue: any) => any;
-    getGroupText: (groupValue: any) => string | null;
+    onSelect: (value: any, onChange: ContextValue['onChange']) => void;
+    isChecked: (value: any) => any;
     keywords: import("../../hooks/useState").State<string>;
     filteredGroup: import("../../hooks/useState").State<TableColumnGroupItem[] | undefined>;
+    onShow: (groupValue: any) => void;
+    reset: () => void;
+    confirm: (onChange: ContextValue['onChange']) => void;
+    dropdownRef: import("intact").RefObject<Dropdown>;
+    localGroupValue: import("../../hooks/useState").State<any>;
+    isEmptyValue: (groupValue: any) => boolean | undefined;
 };
 export {};

package/components/table/useGroup.js

@@ -1,9 +1,8 @@
 import _includesInstanceProperty from "@babel/runtime-corejs3/core-js/instance/includes";
-import _mapInstanceProperty from "@babel/runtime-corejs3/core-js/instance/map";
-import _filterInstanceProperty from "@babel/runtime-corejs3/core-js/instance/filter";
 import _trimInstanceProperty from "@babel/runtime-corejs3/core-js/instance/trim";
-import { useInstance } from 'intact-react';
-import { isNullOrUndefined } from 'intact-shared';
+import _filterInstanceProperty from "@babel/runtime-corejs3/core-js/instance/filter";
+import { useInstance, createRef } from 'intact-react';
+import { isArray } from 'intact-shared';
 import { toggleArray } from '../utils';
 import { createContext } from '../context';
 import { useState, watchState } from '../../hooks/useState';
@@ -12,23 +11,37 @@ export function useGroup() {
   var instance = useInstance();
   var keywords = useState('');
   var filteredGroup = useState(instance.get('group'));
+  var localGroupValue = useState(null);
+  var dropdownRef = createRef();
+  instance.on('$receive:group', function (group) {
+    return filteredGroup.set(group);
+  });
+
+  function onShow(groupValue) {
+    keywords.set('');
+    localGroupValue.set(groupValue);
+  }
 
-  function onSelect(value, groupValue, onChange) {
+  function onSelect(value, onChange) {
     var _instance$get = instance.get(),
         multiple = _instance$get.multiple,
         key = _instance$get.key;
 
     if (multiple) {
-      value = toggleArray(groupValue, value);
+      // should click confirm button when it is multiple selection
+      localGroupValue.set(toggleArray(localGroupValue.value, value));
+    } else {
+      // change immediately when it is single selection
+      onChange(key, value);
     }
-
-    onChange(key, value);
   }
 
-  function isChecked(value, groupValue) {
+  function isChecked(value) {
     var _instance$get2 = instance.get(),
         multiple = _instance$get2.multiple;
 
+    var groupValue = localGroupValue.value;
+
     if (multiple) {
       return groupValue && _includesInstanceProperty(groupValue).call(groupValue, value);
     }
@@ -36,38 +49,31 @@ export function useGroup() {
     return groupValue === value;
   }
 
-  function getGroupText(groupValue) {
+  function confirm(onChange) {
     var _instance$get3 = instance.get(),
-        multiple = _instance$get3.multiple,
-        group = _instance$get3.group;
+        key = _instance$get3.key;
 
-    if (isNullOrUndefined(groupValue)) return null;
-
-    if (!multiple) {
-      groupValue = [groupValue];
-    }
-
-    if (group) {
-      var _context;
+    onChange(key, localGroupValue.value);
+    dropdownRef.value.hide(true);
+  }
 
-      var ret = _mapInstanceProperty(_context = _filterInstanceProperty(group).call(group, function (item) {
-        return _includesInstanceProperty(groupValue).call(groupValue, item.value);
-      })).call(_context, function (item) {
-        return item.label;
-      }).join(', ');
+  function reset() {
+    localGroupValue.set([]);
+  }
 
-      if (ret) {
-        return "(" + ret + ")";
-      }
-    }
+  function isEmptyValue(groupValue) {
+    var _instance$get4 = instance.get(),
+        multiple = _instance$get4.multiple;
 
-    return null;
+    return !groupValue || multiple && (!isArray(groupValue) || groupValue.every(function (value) {
+      return !value;
+    }));
   }
 
   watchState(keywords, function (v) {
-    var _instance$get4 = instance.get(),
-        _instance$get4$group = _instance$get4.group,
-        group = _instance$get4$group === void 0 ? [] : _instance$get4$group;
+    var _instance$get5 = instance.get(),
+        _instance$get5$group = _instance$get5.group,
+        group = _instance$get5$group === void 0 ? [] : _instance$get5$group;
 
     v = _trimInstanceProperty(v).call(v);
 
@@ -75,17 +81,22 @@ export function useGroup() {
       filteredGroup.set(group);
     } else {
       filteredGroup.set(_filterInstanceProperty(group).call(group, function (item) {
-        var _context2, _context3;
+        var _context, _context2;
 
-        return _includesInstanceProperty(_context2 = String(item.label)).call(_context2, v) || _includesInstanceProperty(_context3 = String(item.value)).call(_context3, v);
+        return _includesInstanceProperty(_context = String(item.label)).call(_context, v) || _includesInstanceProperty(_context2 = String(item.value)).call(_context2, v);
       }));
     }
   });
   return {
     onSelect: onSelect,
     isChecked: isChecked,
-    getGroupText: getGroupText,
     keywords: keywords,
-    filteredGroup: filteredGroup
+    filteredGroup: filteredGroup,
+    onShow: onShow,
+    reset: reset,
+    confirm: confirm,
+    dropdownRef: dropdownRef,
+    localGroupValue: localGroupValue,
+    isEmptyValue: isEmptyValue
   };
 }

package/components/table/useMerge.d.ts

@@ -1,5 +1,6 @@
 import { Props } from 'intact-react';
 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/components/table/useMerge.js

@@ -1,5 +1,6 @@
 import { useInstance } from 'intact-react';
-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/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-react').RefObject<Pagination>;
+};

package/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-react';
+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/components/table/useStickyScrollbar.js

@@ -2,7 +2,7 @@ import { createRef, useInstance, onMounted, nextTick } from 'intact-react';
 import { useState } from '../../hooks/useState';
 import { isStringOrNumber, isNull } from 'intact-shared';
 import { debounce } from '../utils';
-import { useResizeObserver } from './useResizeObserver';
+import { useResizeObserver } from '../../hooks/useResizeObserver';
 export function useStickyScrollbar(elementRef, _ref, tableRef, tableScroll) {
   var scrollRef = _ref.scrollRef,
       callbacks = _ref.callbacks;
@@ -14,7 +14,7 @@ export function useStickyScrollbar(elementRef, _ref, tableRef, tableScroll) {
   instance.on('$receive:stickScrollbar', function (v) {
     stick.set(v === true ? 0 : isStringOrNumber(v) ? +v : null);
   });
-  useResizeObserver(scrollRef, setTableActualWidth);
+  useResizeObserver(scrollRef, setTableActualWidth, true);
   onMounted(function () {
     setTableActualWidth();
   });

package/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/components/table/useTree.js

@@ -1,7 +1,7 @@
 import { useInstance } from 'intact-react';
 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/components/table/useWidth.js

@@ -3,7 +3,7 @@ import _JSON$stringify from "@babel/runtime-corejs3/core-js/json/stringify";
 import { useInstance, onMounted, createRef } from 'intact-react';
 import { useState } from '../../hooks/useState';
 import { scrollbarWidth } from '../position';
-import { useResizeObserver } from './useResizeObserver';
+import { useResizeObserver } from '../../hooks/useResizeObserver';
 var hasLocalStorage = typeof localStorage !== 'undefined';
 export function useWidth(scrollRef, getColumns) {
   var instance = useInstance();
@@ -16,7 +16,7 @@ export function useWidth(scrollRef, getColumns) {
   });
   useResizeObserver(scrollRef, function () {
     return checkTableWidth(false);
-  }); // if exist widthStoreKey, we get the default width from localStorage
+  }, true); // if exist widthStoreKey, we get the default width from localStorage
 
   function initWidthFromStore() {
     var _instance$get = instance.get(),

package/components/tabs/index.d.ts

@@ -7,7 +7,7 @@ export interface TabsProps<T = any> {
     value?: T;
     vertical?: boolean;
     size?: Sizes;
-    type?: 'default' | 'card' | 'border-card' | 'no-border-card' | 'flat-card';
+    type?: 'default' | 'card' | 'flat-card';
     closable?: boolean;
     beforeChange?: (value: T) => boolean | Promise<boolean>;
 }

package/components/tabs/index.js

@@ -13,7 +13,7 @@ var typeDefs = {
   value: null,
   vertical: Boolean,
   size: sizes,
-  type: ['default', 'card', 'border-card', 'no-border-card', 'flat-card'],
+  type: ['default', 'card', 'flat-card'],
   closable: Boolean,
   beforeChange: Function
 };

package/components/tabs/index.spec.js

@@ -1,8 +1,12 @@
+import _inheritsLoose from "@babel/runtime-corejs3/helpers/inheritsLoose";
 import _asyncToGenerator from "@babel/runtime-corejs3/helpers/asyncToGenerator";
+import _concatInstanceProperty from "@babel/runtime-corejs3/core-js/instance/concat";
 import _regeneratorRuntime from "@babel/runtime-corejs3/regenerator";
 import ClosableDemo from '~/components/tabs/demos/closable';
 import BeforeChangeDemo from '~/components/tabs/demos/beforeChange';
 import { mount, unmount, wait } from '../../test/utils';
+import { Tabs, Tab } from './';
+import { Component } from 'intact-react';
 describe('Tabs', function () {
   afterEach(function () {
     return unmount();
@@ -93,4 +97,67 @@ describe('Tabs', function () {
       }
     }, _callee2);
   })));
+  it('vertical scroll', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee3() {
+    var Demo, _mount3, instance, element, prev, next;
+
+    return _regeneratorRuntime.wrap(function _callee3$(_context4) {
+      while (1) {
+        switch (_context4.prev = _context4.next) {
+          case 0:
+            Demo = /*#__PURE__*/function (_Component) {
+              _inheritsLoose(Demo, _Component);
+
+              function Demo() {
+                var _context3;
+
+                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(_context3 = [this]).call(_context3, args)) || this;
+                _this.Tabs = Tabs;
+                _this.Tab = Tab;
+                return _this;
+              }
+
+              Demo.defaults = function defaults() {
+                return {
+                  tab: 0
+                };
+              };
+
+              return Demo;
+            }(Component);
+
+            Demo.template = "\n                const { Tabs, Tab } = this;\n                <Tabs v-model=\"tab\" vertical style=\"height: 200px;\">\n                    <Tab v-for={new Array(10).fill(0)} value={$key}>\n                        {$key}\n                    </Tab>\n                </Tabs>\n            ";
+            _mount3 = mount(Demo), instance = _mount3[0], element = _mount3[1];
+            _context4.next = 5;
+            return wait(100);
+
+          case 5:
+            expect(element.innerHTML).to.matchSnapshot();
+            prev = element.querySelector('.k-tabs-prev');
+            next = element.querySelector('.k-tabs-next');
+            next.click();
+            _context4.next = 11;
+            return wait();
+
+          case 11:
+            expect(element.innerHTML).to.matchSnapshot();
+            prev.click();
+            _context4.next = 15;
+            return wait();
+
+          case 15:
+            expect(element.innerHTML).to.matchSnapshot();
+
+          case 16:
+          case "end":
+            return _context4.stop();
+        }
+      }
+    }, _callee3);
+  })));
 });

package/components/tabs/index.vdt.js

@@ -3,6 +3,7 @@ import { createVNode as _$cv, className as _$cn, createUnknownComponentVNode as
 import { Button } from '../button';
 import { getRestProps } from '../utils';
 import { makeStyles } from './styles';
+import { Icon } from '../icon';
 export default function ($props, $blocks, $__proto__) {
   var _classNameObj;
 
@@ -19,7 +20,7 @@ export default function ($props, $blocks, $__proto__) {
 
   var _this$scroll = this.scroll,
       isScroll = _this$scroll.isScroll,
-      left = _this$scroll.left,
+      offset = _this$scroll.offset,
       enablePrev = _this$scroll.enablePrev,
       enableNext = _this$scroll.enableNext,
       prev = _this$scroll.prev,
@@ -39,12 +40,14 @@ export default function ($props, $blocks, $__proto__) {
     'size': size,
     'disabled': !enablePrev.value,
     'ev-click': prev,
-    'children': _$ce(2, 'i', null, 1, 'ion-ios-arrow-left')
+    'children': _$cc(Icon, {
+      'className': _$cn(vertical ? "k-icon-up" : "k-icon-left")
+    })
   }, 'prev') : undefined, _$ce(2, 'div', _$ce(2, 'div', [children, _$ce(2, 'div', null, 1, 'k-tabs-active-bar', {
     'style': this.activeBar.value
   })], 0, 'k-tabs-wrapper', {
     'style': {
-      transform: "translateX(" + left.value + "px)"
+      transform: vertical ? "translateY(" + offset.value + "px)" : "translateX(" + offset.value + "px)"
     }
   }, null, wrapperRef), 2, 'k-tabs-scroll c-clearfix', null, null, scrollRef), isScroll.value ? _$cc(Button, {
     'className': 'k-tabs-next',
@@ -54,7 +57,9 @@ export default function ($props, $blocks, $__proto__) {
     'size': size,
     'disabled': !enableNext.value,
     'ev-click': next,
-    'children': _$ce(2, 'i', null, 1, 'ion-ios-arrow-right')
+    'children': _$cc(Icon, {
+      'className': _$cn(vertical ? "k-icon-down" : "k-icon-right")
+    })
   }, 'next') : undefined]);
 }
 ;