@king-design/react 2.0.15 → 2.0.16

package/__tests__/__snapshots__/React Demos.md

@@ -964,7 +964,7 @@
 ####   `Select basic`
 
 ```
-"<div><div style=\"margin-bottom: 16px;\"><div class=\"k-select css-1k3uw7s k-dropdown-open\" tabindex=\"0\"><div class=\"k-select-main\"><input type=\"hidden\"><div class=\"k-select-placeholder c-ellipsis\">请选择</div></div><span class=\"k-select-suffix\"><span class=\"k-select-suffix-icon\"><i class=\"k-icon k-select-arrow ion-ios-arrow-down css-x0ey6t\"></i></span></span></div><!--portal-->You selected: </div><div class=\"k-select css-1k3uw7s\" tabindex=\"0\"><div class=\"k-select-main\"><input type=\"hidden\"><div class=\"k-select-placeholder c-ellipsis\">请选择</div></div><span class=\"k-select-suffix\"><span class=\"k-select-suffix-icon\"><i class=\"k-icon k-rotate ion-load-c css-x0ey6t\"></i></span></span></div><!--portal--></div>"
+"<div><div style=\"margin-bottom: 16px;\"><div class=\"k-select css-1k3uw7s\" tabindex=\"0\"><div class=\"k-select-main\"><input type=\"hidden\"><div class=\"k-select-placeholder c-ellipsis\">请选择</div></div><span class=\"k-select-suffix\"><span class=\"k-select-suffix-icon\"><i class=\"k-icon k-select-arrow ion-ios-arrow-down css-x0ey6t\"></i></span></span></div><!--portal-->You selected: </div><div class=\"k-select css-1k3uw7s\" tabindex=\"0\"><div class=\"k-select-main\"><input type=\"hidden\"><div class=\"k-select-placeholder c-ellipsis\">请选择</div></div><span class=\"k-select-suffix\"><span class=\"k-select-suffix-icon\"><i class=\"k-icon k-rotate ion-load-c css-x0ey6t\"></i></span></span></div><!--portal--></div>"
 ```
 
 ####   `Select clearable`

package/components/table/column.vdt.js

@@ -1,5 +1,5 @@
 import _sortInstanceProperty from "@babel/runtime-corejs3/core-js/instance/sort";
-import { createUnknownComponentVNode as _$cc, createElementVNode as _$ce, noop as _$no, className as _$cn, map as _$ma } from 'intact-react';
+import { createUnknownComponentVNode as _$cc, createElementVNode as _$ce, noop as _$no, className as _$cn, extend as _$ex, EMPTY_OBJ as _$em, map as _$ma } from 'intact-react';
 import { getClassAndStyleForFixed } from './useFixedColumns';
 import { Dropdown, DropdownMenu, DropdownItem } from '../dropdown';
 import { Button } from '../button';
@@ -14,13 +14,18 @@ import { context as TableContext } from './useColumns';
 import { context as ResizableContext } from './useResizable';
 import { context as FixedColumnsContext } from './useFixedColumns';
 import { stopPropagation } from '../utils';
+import { Input } from '../input';
+import { _$ } from '../../i18n';
 var _$tmp0 = {
   'className': 'ion-android-arrow-dropdown'
 };
 var _$tmp1 = {
-  'className': 'ion-android-arrow-dropup k-asc'
+  'className': 'ion-ios-search'
 };
 var _$tmp2 = {
+  'className': 'ion-android-arrow-dropup k-asc'
+};
+var _$tmp3 = {
   'className': 'ion-android-arrow-dropdown k-desc'
 };
 export default function ($props, $blocks, $__proto__) {
@@ -45,7 +50,9 @@ export default function ($props, $blocks, $__proto__) {
   var _this$group = this.group,
       onSelect = _this$group.onSelect,
       isChecked = _this$group.isChecked,
-      getGroupText = _this$group.getGroupText;
+      getGroupText = _this$group.getGroupText,
+      keywords = _this$group.keywords,
+      filteredGroup = _this$group.filteredGroup;
   return _$cc(TableContext.Consumer, {
     'children': function children(checkType) {
       return _$cc(GroupContext.Consumer, {
@@ -98,17 +105,46 @@ export default function ($props, $blocks, $__proto__) {
                           collision: 'flipfit'
                         },
                         'key': 'dropdown',
+                        'trigger': 'click',
+                        'ev-show': function evShow() {
+                          return keywords.set('');
+                        },
                         'children': [_$cc(Button, {
                           'icon': true,
                           'size': 'mini',
                           'className': 'k-table-group',
-                          'ev-click': stopPropagation,
+                          'ev-click': function evClick(e) {
+                            return e._ignoreSortable = true;
+                          },
                           'children': _$cc(Icon, _$tmp0)
                         }), _$cc(DropdownMenu, {
                           'className': _$cn((_$cn2 = {
                             "k-table-group-dropdown": true
                           }, _$cn2[makeGroupMenuStyles()] = true, _$cn2)),
-                          'children': _$ma(group, function ($value, $key) {
+                          'children': [_$ce(2, 'div', _$cc(Input, {
+                            'size': 'small',
+                            'fluid': true,
+                            'placeholder': _$('请输入关键字'),
+                            'value': keywords.value,
+                            'ev-$change:value': keywords.set,
+                            'clearable': true,
+                            '$blocks': function ($blocks) {
+                              var _$blocks = {},
+                                  __$blocks = _$ex({}, $blocks);
+
+                              return (_$blocks['suffix'] = function ($super) {
+                                return _$cc(Icon, _$tmp1);
+                              }, __$blocks['suffix'] = function ($super, data) {
+                                var block = $blocks['suffix'];
+
+                                var callBlock = function callBlock() {
+                                  return _$blocks['suffix'].call($this, $super, data);
+                                };
+
+                                return block ? block.call($this, callBlock, data) : callBlock();
+                              }), __$blocks;
+                            }.call($this, _$em)
+                          }), 2, 'k-table-group-header'), _$ce(2, 'div', _$ma(filteredGroup.value, function ($value, $key) {
                             return _$cc(DropdownItem, {
                               'ev-select': function evSelect() {
                                 return onSelect($value.value, groupValue, onChange);
@@ -122,9 +158,9 @@ export default function ($props, $blocks, $__proto__) {
                                 'children': $value.label
                               }) : _$ce(2, 'span', $value.label, 0)
                             });
-                          }, $this)
+                          }, $this), 4, 'k-table-group-body')]
                         })]
-                      }, 'dropdown') : undefined, sortable ? _$ce(2, 'div', [_$cc(Icon, _$tmp1), _$cc(Icon, _$tmp2)], 4, _$cn((_$cn3 = {
+                      }, 'dropdown') : undefined, sortable ? _$ce(2, 'div', [_$cc(Icon, _$tmp2), _$cc(Icon, _$tmp3)], 4, _$cn((_$cn3 = {
                         'k-column-sort': true
                       }, _$cn3["k-" + type] = type, _$cn3))) : undefined], 0, 'k-table-title')], 0, _$cn(classNameObj), {
                         'style': style,

package/components/table/index.spec.js

@@ -352,7 +352,7 @@ describe('Table', function () {
             _instance$refs4 = instance.refs, __test1 = _instance$refs4.__test1, __test2 = _instance$refs4.__test2;
             _element$querySelecto8 = element.querySelectorAll('.k-table'), table1 = _element$querySelecto8[0], table2 = _element$querySelecto8[1];
             icon = table1.querySelector('.k-table-group');
-            dispatchEvent(icon, 'mouseenter');
+            dispatchEvent(icon, 'click');
             _context7.next = 7;
             return wait();
 
@@ -370,7 +370,7 @@ describe('Table', function () {
             });
             expect(table1.innerHTML).to.matchSnapshot();
             icon2 = table2.querySelector('.k-table-group');
-            dispatchEvent(icon2, 'mouseenter');
+            dispatchEvent(icon2, 'click');
             _context7.next = 19;
             return wait();
 

package/components/table/styles.js

@@ -53,6 +53,12 @@ var defaults = {
 
     get activeColor() {
       return theme.color.primary;
+    },
+
+    headerPadding: "8px",
+
+    get headerBorder() {
+      return "1px solid " + theme.color.bg;
     }
 
   },
@@ -89,5 +95,5 @@ export function makeStyles() {
   }), ";");
 }
 export function makeGroupMenuStyles() {
-  return /*#__PURE__*/css("max-height:", table.group.menuMaxHeight, ";overflow:auto;.k-dropdown-item.k-active{color:", table.group.activeColor, ";}");
+  return /*#__PURE__*/css("max-height:", table.group.menuMaxHeight, ";overflow:auto;.k-dropdown-item.k-active{color:", table.group.activeColor, ";}.k-table-group-header{padding:", table.group.headerPadding, ";border-bottom:", table.group.headerBorder, ";}");
 }

package/components/table/useGroup.d.ts

@@ -1,3 +1,4 @@
+import type { TableColumnGroupItem } from './column';
 declare type ContextValue = {
     groupValue: any;
     onChange: (key: string, groupValue: any) => void;
@@ -10,5 +11,7 @@ export declare function useGroup(): {
     onSelect: (value: any, groupValue: any, onChange: ContextValue['onChange']) => void;
     isChecked: (value: any, groupValue: any) => any;
     getGroupText: (groupValue: any) => string | null;
+    keywords: import("../../hooks/useState").State<string>;
+    filteredGroup: import("../../hooks/useState").State<TableColumnGroupItem[] | undefined>;
 };
 export {};

package/components/table/useGroup.js

@@ -1,13 +1,17 @@
 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 { toggleArray } from '../utils';
 import { createContext } from '../context';
+import { useState, watchState } from '../../hooks/useState';
 export var context = createContext();
 export function useGroup() {
   var instance = useInstance();
+  var keywords = useState('');
+  var filteredGroup = useState(instance.get('group'));
 
   function onSelect(value, groupValue, onChange) {
     var _instance$get = instance.get(),
@@ -60,9 +64,28 @@ export function useGroup() {
     return null;
   }
 
+  watchState(keywords, function (v) {
+    var _instance$get4 = instance.get(),
+        _instance$get4$group = _instance$get4.group,
+        group = _instance$get4$group === void 0 ? [] : _instance$get4$group;
+
+    v = _trimInstanceProperty(v).call(v);
+
+    if (!v) {
+      filteredGroup.set(group);
+    } else {
+      filteredGroup.set(_filterInstanceProperty(group).call(group, function (item) {
+        var _context2, _context3;
+
+        return _includesInstanceProperty(_context2 = String(item.label)).call(_context2, v) || _includesInstanceProperty(_context3 = String(item.value)).call(_context3, v);
+      }));
+    }
+  });
   return {
     onSelect: onSelect,
     isChecked: isChecked,
-    getGroupText: getGroupText
+    getGroupText: getGroupText,
+    keywords: keywords,
+    filteredGroup: filteredGroup
   };
 }

package/components/table/useSortable.d.ts

@@ -3,5 +3,7 @@ export declare const context: {
     Consumer: import("intact").ComponentConstructor<import("intact").Component<import("../context").ConsumerProps<any>, {}, {}, {}>>;
 };
 export declare function useSortable(): {
-    onChange: (key: string) => void;
+    onChange: (key: string, event: Event & {
+        _ignoreSortable?: boolean;
+    }) => void;
 };

package/components/table/useSortable.js

@@ -8,7 +8,10 @@ export function useSortable() {
 
   var count = 0;
 
-  function onChange(key) {
+  function onChange(key, event) {
+    // ignore when click group dropdown menu
+    if (event._ignoreSortable) return;
+
     var sort = _extends({}, instance.get('sort'));
 
     if (sort.key === key) {

package/index.d.ts

@@ -1,5 +1,5 @@
 /*!
- * @king-design v2.0.15
+ * @king-design v2.0.16
  *
  * Copyright (c) Kingsoft Cloud
  * Released under the MIT License
@@ -57,7 +57,7 @@ export * from './components/tree';
 export * from './components/treeSelect';
 export * from './components/upload';
 export * from './components/wave';
-export declare const version = "2.0.15";
+export declare const version = "2.0.16";
 
 
 export {normalize} from 'intact-react';

package/index.js

@@ -1,5 +1,5 @@
 /*!
- * @king-design v2.0.15
+ * @king-design v2.0.16
  *
  * Copyright (c) Kingsoft Cloud
  * Released under the MIT License
@@ -59,7 +59,7 @@ export * from './components/tree';
 export * from './components/treeSelect';
 export * from './components/upload';
 export * from './components/wave';
-export var version = '2.0.15';
+export var version = '2.0.16';
 /* generate end */
 
 export {normalize} from 'intact-react';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@king-design/react",
-  "version": "2.0.15",
+  "version": "2.0.16",
   "description": "King-Design UI components for React.",
   "keywords": [
     "component",
@@ -37,7 +37,7 @@
     "dayjs": "^1.10.7",
     "downloadjs": "^1.4.7",
     "enquire.js": "^2.1.6",
-    "intact-react": "3.0.15",
+    "intact-react": "3.0.16",
     "monaco-editor": "^0.26.1",
     "mxgraphx": "^4.0.7",
     "resize-observer-polyfill": "^1.5.1",

package/yarn-error.log

@@ -14,12 +14,15 @@ Platform:
   linux x64
 
 Trace: 
-  Error: https://registry.npmmirror.com/dayjs/-/dayjs-1.10.7.tgz: ENOENT: no such file or directory, open '/home/javey/.cache/yarn/v6/npm-dayjs-1.10.7-2cf5f91add28116748440866a0a1d26f3a6ce468-integrity/node_modules/dayjs/.yarn-tarball.tgz'
+  Error: https://registry.npmjs.org/intact-react: ETIMEDOUT
+      at Timeout._onTimeout (/usr/share/yarn/lib/cli.js:141550:19)
+      at listOnTimeout (internal/timers.js:557:17)
+      at processTimers (internal/timers.js:500:7)
 
 npm manifest: 
   {
     "name": "@king-design/react",
-    "version": "2.0.13",
+    "version": "2.0.15",
     "description": "King-Design UI components for React.",
     "keywords": [
       "component",
@@ -56,7 +59,7 @@ npm manifest:
       "dayjs": "^1.10.7",
       "downloadjs": "^1.4.7",
       "enquire.js": "^2.1.6",
-      "intact-react": "3.0.14",
+      "intact-react": "3.0.16",
       "monaco-editor": "^0.26.1",
       "mxgraphx": "^4.0.7",
       "resize-observer-polyfill": "^1.5.1",
@@ -358,29 +361,29 @@ Lockfile:
       parent-module "^1.0.0"
       resolve-from "^4.0.0"
   
-  intact-react@3.0.13:
-    version "3.0.13"
-    resolved "https://registry.yarnpkg.com/intact-react/-/intact-react-3.0.13.tgz#bbe9bb5afa2c67cfc058a4557ce28b7a52f30952"
-    integrity sha512-RegeLioJOCneDDgg2BfPt5Zuzn0RL+FuvVhyyakc5nPvMfxKOKXY7VbvYGCV3DeYwpPPn+AmY5ZHAyoqPQCiGQ==
+  intact-react@3.0.15:
+    version "3.0.15"
+    resolved "https://registry.yarnpkg.com/intact-react/-/intact-react-3.0.15.tgz#d90d8171469807282555629b858083b2125c57cc"
+    integrity sha512-aCMFtThscRnqPao77MBUeDbFnQvJXkUFMoPfHHYuoMsmzZtvNc2wzzgw4WRwFMB9Dx8dQSFgs0MiyZERebQAJA==
     dependencies:
-      intact "^3.0.13"
+      intact "^3.0.15"
       tslib "^2.3.1"
   
-  intact-shared@^3.0.13:
-    version "3.0.13"
-    resolved "https://registry.yarnpkg.com/intact-shared/-/intact-shared-3.0.13.tgz#e8e6f36d95cded2d9d5a3e1302a3315e9d182cf6"
-    integrity sha512-DClf1YscE9RYOeYAY3BFv1UuFt5SvrO2kLL9QbZbWGDaroEVuX/2F2UcisjE3PNbDvVtZ8+pbRZ8P/kZy9YnNQ==
+  intact-shared@^3.0.15:
+    version "3.0.15"
+    resolved "https://registry.yarnpkg.com/intact-shared/-/intact-shared-3.0.15.tgz#7d87c3632496a735d4873abffc3ec77004d23047"
+    integrity sha512-b8AavWEKACuQC9WrkIaQ9PatjuPvTbo8mw+1JZTM8P0/w3fzgbS5CF9qxjWp+BvB2D9Wlg+oQgQAO73yyyxU8A==
   
-  intact@^3.0.13:
-    version "3.0.13"
-    resolved "https://registry.yarnpkg.com/intact/-/intact-3.0.13.tgz#19c7cb0424e532b68a4a3f5f43229ddd0d3f8709"
-    integrity sha512-RTZOY72BOXOcpb1BswmhDMtbOLo0EoiHFT/HBjpXUTRu2TRnNm5yFh0VIF7dL1ZREYxiKEpvPUFIoFhwjMRzRg==
+  intact@^3.0.15:
+    version "3.0.15"
+    resolved "https://registry.yarnpkg.com/intact/-/intact-3.0.15.tgz#3dede766b1cc95b4143842d5db520e900d548c76"
+    integrity sha512-dvQ6oUEIY0AUigKEw82k4u6KqTRK+C+7RNXr0E2puIytQG+VseUXj7JhbzH7eWELL7vKI/D9Pd7QexG0vKRbZA==
     dependencies:
-      intact-shared "^3.0.13"
-      misstime "^3.0.13"
+      intact-shared "^3.0.15"
+      misstime "^3.0.15"
       tslib "^2.2.0"
-      vdt "^3.0.13"
-      vdt-compiler "^3.0.13"
+      vdt "^3.0.15"
+      vdt-compiler "^3.0.15"
   
   is-arrayish@^0.2.1:
     version "0.2.1"
@@ -409,12 +412,12 @@ Lockfile:
     resolved "https://registry.npmmirror.com/lines-and-columns/-/lines-and-columns-1.2.4.tgz#eca284f75d2965079309dc0ad9255abb2ebc1632"
     integrity sha512-7ylylesZQ/PV29jhEDl3Ufjo6ZX7gCqJr5F7PKrqc93v7fzSymt1BpwEU8nAUXs8qzzvqhbjhK5QZg6Mt/HkBg==
   
-  misstime@^3.0.13:
-    version "3.0.13"
-    resolved "https://registry.yarnpkg.com/misstime/-/misstime-3.0.13.tgz#b9f614627eda9fe25b7db08768fa08858dce61e2"
-    integrity sha512-a5Md2dpyyT+0tRAHdIQi1NEWfFOPfPTvqpvqJ1CzT8zZDd/DesGjCt4+pAi88fBcDnmdw213PMe1lNwvSlmo0A==
+  misstime@^3.0.15:
+    version "3.0.15"
+    resolved "https://registry.yarnpkg.com/misstime/-/misstime-3.0.15.tgz#e530b432ca2156d0d4c6b4c26ddfd5edb3eb568b"
+    integrity sha512-1cJHhPXWud6BUtxHSspsFo+3NHB2m/sA3DY+bnI5bwad3MG9t8k8Gn/Kn6nEYcQ2WpTjP/OH1Alwo2pPlj2rvA==
     dependencies:
-      intact-shared "^3.0.13"
+      intact-shared "^3.0.15"
   
   monaco-editor@^0.26.1:
     version "0.26.1"
@@ -519,22 +522,22 @@ Lockfile:
     resolved "https://registry.npmmirror.com/tslib/-/tslib-2.3.1.tgz#e8a335add5ceae51aa261d32a490158ef042ef01"
     integrity sha512-77EbyPPpMz+FRFRuAFlWMtmgUWGe9UOG2Z25NqCwiIjRhOf5iKGuzSe5P2w1laq+FkRy4p+PCuVkJSGkzTEKVw==
   
-  vdt-compiler@^3.0.13:
-    version "3.0.13"
-    resolved "https://registry.yarnpkg.com/vdt-compiler/-/vdt-compiler-3.0.13.tgz#bfbf4f58b60ee4ad9b571c43e50bd872f62c59ff"
-    integrity sha512-lNTsB9M4mGmcUr21hro1lOcVHFXQBsO14c3K6WUlOGQgJvjp4ELhjIIbaL525Q//O08geviNuvf1V2gK/4Xtmg==
+  vdt-compiler@^3.0.15:
+    version "3.0.15"
+    resolved "https://registry.yarnpkg.com/vdt-compiler/-/vdt-compiler-3.0.15.tgz#3c2c84d06821015fe68b6d2fc5b933924ac1a182"
+    integrity sha512-iXRSJ0UtFJuhIYtpvMXnfecyHpUjYST3P4H5+GH531G8GcX4RY+fRMmlC+HJvJR97eBA7o9ocatmG62g2WTUGg==
     dependencies:
-      intact-shared "^3.0.13"
-      misstime "^3.0.13"
+      intact-shared "^3.0.15"
+      misstime "^3.0.15"
       tslib "^2.2.0"
   
-  vdt@^3.0.13:
-    version "3.0.13"
-    resolved "https://registry.yarnpkg.com/vdt/-/vdt-3.0.13.tgz#ca74d3469529468c997f0b7bf12c6a7c5ea81a59"
-    integrity sha512-AOzc0FInl4CfRod5p/dG5C54pocLOhr1W+e+vxeHpHs2RLAICyGXYEoUvQTwzEIJC4iXgD/unzsX+6BJTnintQ==
+  vdt@^3.0.15:
+    version "3.0.15"
+    resolved "https://registry.yarnpkg.com/vdt/-/vdt-3.0.15.tgz#80367a148eb8afdfd1a899ef0df94cba0caa7790"
+    integrity sha512-Fsl0wle7WxNh8z5mwDXqDrAUBdmnbtFFkIOa2ptnwRMqP2sIVzxurx6rh+S6Tat8FHnKkz79/s9+wHMg/Y/7zA==
     dependencies:
-      intact-shared "^3.0.13"
-      misstime "^3.0.13"
+      intact-shared "^3.0.15"
+      misstime "^3.0.15"
       tslib "^2.2.0"
   
   yaml@^1.7.2: