@king-design/intact 2.0.11 → 2.0.12

package/components/cascader/styles.ts

@@ -33,7 +33,7 @@ setDefault(() => {
 export function makeMenuStyles() {
     return css`
         min-width: ${cascader.width} !important;
-        height: ${cascader.height};
+        min-height: ${cascader.height};
         .k-cascader-arrow {
             float: right;
             height: 100%;

package/components/form/demos/basic.md

@@ -23,7 +23,7 @@ order: 0
     12. `min {number}`：请输入不小于n的数
     13. `range {Array<number>}`：请输入min到max之间的数
     14. `step {number}`：请输入步长为n的数
-    15. `equalTo {string}`：两次输入不一致
+    15. `equal {string}`：两次输入不一致
 3. 给`FormItem`添加`messages`属性，指定验证失败时展示的错误提示。默认内容如上所示
 4. 给`FormItem`添加`classNames`属性，指定验证失败时错误元素需要额外添加的`className`，默认不添加
 

package/components/form/index.md

@@ -31,9 +31,9 @@ sidebar: doc
 | fluid | `FormItem`的宽度默认是被子元素撑开的，添加该属性可以渲染`100%`的宽度 | `boolean` | `false` |
 
 ```ts
-type Method = (value: any, param: any) => boolean | string
-type Message = string | ((value: any, param: any) => string)
-type ClassName = string | ((value: any, param: any) => string)
+export declare type Method = (value: any, param: any) => boolean | string | Promise<boolean | string>
+export declare type Message = string | ((value: any, param: any) => string)
+export declare type ClassName = string | ((value: any, param: any) => string)
 ```
 
 # 扩展点
@@ -72,9 +72,12 @@ type ClassName = string | ((value: any, param: any) => string)
 
 | 方法名 | 说明 | 参数 | 返回值 |
 | --- | --- | --- | --- |
-| addMethod | 添加全局验证规则，这样在所有`FormItem`中如果需要使用该规则，只需要在`rules`中写上该规则名即可 | 1. `name` 指定规则名称，不能重复 <br /> 2. `method` 指定该规则的验证函数，该函数返回`true`或`false`来标识验证成功或失败，如果返回字符串，则直接当做错误文案展示，该函数将传入3个参数：1. 当前验证的值，2. 当前验证的`FormItem`实例，3. 当前规则的参数，即使用该规则时指定的值 <br /> 3. `message` 验证失败时的错误提示文案，该值可以为字符串或者函数，如果为函数，传入参数同`method`，用于个性化文案提示 <br /> 4. `className` 验证失败时添加的类名 | `undefined` |
+| addMethod | 添加全局验证规则，这样在所有`FormItem`中如果需要使用该规则，只需要在`rules`中写上该规则名即可 | 1. `name` 指定规则名称，不能重复 <br /> 2. `method` 指定该规则的验证函数，该函数返回`true`或`false`来标识验证成功或失败，如果返回字符串，则直接当做错误文案展示，该函数将传入2个参数：1. 当前验证的值，2. 当前规则的参数，即使用该规则时指定的值 <br /> 3. `message` 验证失败时的错误提示文案，该值可以为字符串或者函数，如果为函数，传入参数同`method`，用于个性化文案提示 <br /> 4. `className` 验证失败时添加的类名 | `undefined` |
 
 ```ts
+export declare type Method = (value: any, param: any) => boolean | string | Promise<boolean | string>
+export declare type Message = string | ((value: any, param: any) => string)
+export declare type ClassName = string | ((value: any, param: any) => string)
 export declare const addMethod: (
     name: string,
     method: Method,

package/components/form/methods.ts

@@ -1,7 +1,8 @@
 import {_$} from '../../i18n';
 import {isNumber, isNullOrUndefined, isString} from 'intact-shared';
 
-export type Method = (value: any, param: any) => boolean | string
+export type MethodReturn = boolean | string
+export type Method = (value: any, param: any) => MethodReturn | Promise<MethodReturn> 
 export type Message = string | ((value: any, param: any) => string)
 export type ClassName = string | ((value: any, param: any) => string)
 

package/components/table/table.ts

@@ -185,7 +185,6 @@ export class Table<
         this.scroll,
         this.width.tableRef,
         this.fixedColumns.setScrollPosition,
-        this.width.tableWidth,
     );
 
     public checkAll() {

package/components/table/useResizeObserver.ts

@@ -0,0 +1,22 @@
+import {onMounted, onBeforeUnmount, RefObject, useInstance} from "intact";
+import {debounce} from '../utils';
+import ResizeObserver from 'resize-observer-polyfill';
+
+export function useResizeObserver(elementRef: RefObject<HTMLElement>, callback: Function) {
+    const instance = useInstance()!;
+
+    let ro: ResizeObserver;
+    onMounted(() => {
+        // use debounce instead of throttle, because if there is
+        // transition on parent container, the width is weired
+        // #342
+        ro = new ResizeObserver(debounce(() => {
+            if (instance.$unmounted) return;
+            callback();
+        }, 100, true));
+        ro.observe(elementRef.value!);
+    });
+    onBeforeUnmount(() => {
+        ro.disconnect();
+    });
+}

package/components/table/useStickyScrollbar.ts

@@ -5,13 +5,13 @@ import type {Table} from './';
 import {isStringOrNumber, isNull} from 'intact-shared';
 import {debounce} from '../utils';
 import type {useScroll} from './useScroll';
+import {useResizeObserver} from './useResizeObserver';
 
 export function useStickyScrollbar(
     elementRef: RefObject<HTMLElement>,
     {scrollRef, callbacks}: ReturnType<typeof useScroll>,
     tableRef: RefObject<HTMLElement>,
     tableScroll: (scrollLeft: number) => void,
-    tableWidth: State<number | null>,
 ) {
     const instance = useInstance() as Table;
     const stick = useState<number | null>(null);
@@ -23,13 +23,7 @@ export function useStickyScrollbar(
         stick.set(v === true ? 0 : isStringOrNumber(v) ? +v : null);
     });
 
-    watchState(tableWidth, v => {
-        if (v) {
-            tableActualWidth.set(v + 'px');
-        } else {
-            setTableActualWidth();
-        }
-    });
+    useResizeObserver(scrollRef, setTableActualWidth);
 
     onMounted(() => {
         setTableActualWidth();

package/components/table/useWidth.ts

@@ -1,10 +1,9 @@
-import {useInstance, RefObject, onMounted, onBeforeUnmount, VNodeComponentClass, createRef} from 'intact';
-import ResizeObserver from 'resize-observer-polyfill';
+import {useInstance, RefObject, onMounted, VNodeComponentClass, createRef} from 'intact';
 import type {Table, TableRowKey} from './table';
 import type {TableColumn} from './column';
 import {useState} from '../../hooks/useState';
-import {debounce} from '../utils';
 import {scrollbarWidth} from '../position';
+import {useResizeObserver} from './useResizeObserver';
 
 const hasLocalStorage = typeof localStorage !== 'undefined';
 
@@ -19,21 +18,8 @@ export function useWidth(
 
     initWidthFromStore();
 
-    let ro: ResizeObserver;
-    onMounted(() => {
-        checkTableWidth(true);
-        // use debounce instead of throttle, because if there is
-        // transition on parent container, the width is weired
-        // #342
-        ro = new ResizeObserver(debounce(() => {
-            if (instance.$unmounted) return;
-            checkTableWidth(false);
-        }, 100, true));
-        ro.observe(scrollRef.value!);
-    });
-    onBeforeUnmount(() => {
-        ro.disconnect();
-    });
+    onMounted(() => checkTableWidth(true));
+    useResizeObserver(scrollRef, () => checkTableWidth(false));
 
     // if exist widthStoreKey, we get the default width from localStorage
     function initWidthFromStore() {

package/es/components/cascader/styles.js

@@ -43,7 +43,7 @@ setDefault(function () {
   }).cascader;
 });
 export function makeMenuStyles() {
-  return /*#__PURE__*/css("min-width:", cascader.width, "!important;height:", cascader.height, ";.k-cascader-arrow{float:right;height:100%;margin-left:", cascader.arrowGap, ";line-height:inherit;}.k-cascader-loading{display:block;text-align:center;margin-top:", cascader.loadingGap, ";}.k-cascader-empty{padding:", cascader.empty.padding, ";color:", cascader.empty.color, ";text-align:center;}.k-cascader-option{&.k-selected{color:", cascader.selectedColor, ";}&.k-active{background:", cascader.activeBgColor, ";}}");
+  return /*#__PURE__*/css("min-width:", cascader.width, "!important;min-height:", cascader.height, ";.k-cascader-arrow{float:right;height:100%;margin-left:", cascader.arrowGap, ";line-height:inherit;}.k-cascader-loading{display:block;text-align:center;margin-top:", cascader.loadingGap, ";}.k-cascader-empty{padding:", cascader.empty.padding, ";color:", cascader.empty.color, ";text-align:center;}.k-cascader-option{&.k-selected{color:", cascader.selectedColor, ";}&.k-active{background:", cascader.activeBgColor, ";}}");
 }
 export function makeFilterMenuStyles() {
   return /*#__PURE__*/css("min-width:", _filterInstanceProperty(cascader).minWidth, "!important;height:auto;max-height:", _filterInstanceProperty(cascader).maxHeight, ";em{font-style:normal;color:", _filterInstanceProperty(cascader).highlightColor, ";}");

package/es/components/form/methods.d.ts

@@ -1,4 +1,5 @@
-export declare type Method = (value: any, param: any) => boolean | string;
+export declare type MethodReturn = boolean | string;
+export declare type Method = (value: any, param: any) => MethodReturn | Promise<MethodReturn>;
 export declare type Message = string | ((value: any, param: any) => string);
 export declare type ClassName = string | ((value: any, param: any) => string);
 export declare const methods: Record<string, Method>;

package/es/components/table/table.js

@@ -106,7 +106,7 @@ export var Table = /*#__PURE__*/function (_Component) {
     _this.selected = useSelected();
     _this.resetRowStatus = useRestRowStatus(_this.disableRow.getAllKeys);
     _this.draggable = useDraggable();
-    _this.stickyScrollbar = useStickyScrollbar(_this.stickyHeader.elementRef, _this.scroll, _this.width.tableRef, _this.fixedColumns.setScrollPosition, _this.width.tableWidth);
+    _this.stickyScrollbar = useStickyScrollbar(_this.stickyHeader.elementRef, _this.scroll, _this.width.tableRef, _this.fixedColumns.setScrollPosition);
     return _this;
   }
 

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

@@ -0,0 +1,2 @@
+import { RefObject } from "intact";
+export declare function useResizeObserver(elementRef: RefObject<HTMLElement>, callback: Function): void;

package/es/components/table/useResizeObserver.js

@@ -0,0 +1,20 @@
+import { onMounted, onBeforeUnmount, useInstance } from "intact";
+import { debounce } from '../utils';
+import ResizeObserver from 'resize-observer-polyfill';
+export function useResizeObserver(elementRef, callback) {
+  var instance = useInstance();
+  var ro;
+  onMounted(function () {
+    // use debounce instead of throttle, because if there is
+    // transition on parent container, the width is weired
+    // #342
+    ro = new ResizeObserver(debounce(function () {
+      if (instance.$unmounted) return;
+      callback();
+    }, 100, true));
+    ro.observe(elementRef.value);
+  });
+  onBeforeUnmount(function () {
+    ro.disconnect();
+  });
+}

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

@@ -2,7 +2,7 @@ import { RefObject } from 'intact';
 import { ShouldFixParam } from '../affix';
 import { State } from '../../hooks/useState';
 import type { useScroll } from './useScroll';
-export declare function useStickyScrollbar(elementRef: RefObject<HTMLElement>, { scrollRef, callbacks }: ReturnType<typeof useScroll>, tableRef: RefObject<HTMLElement>, tableScroll: (scrollLeft: number) => void, tableWidth: State<number | null>): {
+export declare function useStickyScrollbar(elementRef: RefObject<HTMLElement>, { scrollRef, callbacks }: ReturnType<typeof useScroll>, tableRef: RefObject<HTMLElement>, tableScroll: (scrollLeft: number) => void): {
     shouldStickScrollbar: ({ offsetBottom, viewportHeight }: ShouldFixParam) => boolean;
     stick: State<number | null>;
     style: State<Record<string, string> | null>;

package/es/components/table/useStickyScrollbar.js

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

package/es/components/table/useWidth.js

@@ -1,10 +1,9 @@
 import _mapInstanceProperty from "@babel/runtime-corejs3/core-js/instance/map";
 import _JSON$stringify from "@babel/runtime-corejs3/core-js/json/stringify";
-import { useInstance, onMounted, onBeforeUnmount, createRef } from 'intact';
-import ResizeObserver from 'resize-observer-polyfill';
+import { useInstance, onMounted, createRef } from 'intact';
 import { useState } from '../../hooks/useState';
-import { debounce } from '../utils';
 import { scrollbarWidth } from '../position';
+import { useResizeObserver } from './useResizeObserver';
 var hasLocalStorage = typeof localStorage !== 'undefined';
 export function useWidth(scrollRef, getColumns) {
   var instance = useInstance();
@@ -12,20 +11,11 @@ export function useWidth(scrollRef, getColumns) {
   var widthMap = useState({});
   var tableWidth = useState(null);
   initWidthFromStore();
-  var ro;
   onMounted(function () {
-    checkTableWidth(true); // use debounce instead of throttle, because if there is
-    // transition on parent container, the width is weired
-    // #342
-
-    ro = new ResizeObserver(debounce(function () {
-      if (instance.$unmounted) return;
-      checkTableWidth(false);
-    }, 100, true));
-    ro.observe(scrollRef.value);
+    return checkTableWidth(true);
   });
-  onBeforeUnmount(function () {
-    ro.disconnect();
+  useResizeObserver(scrollRef, function () {
+    return checkTableWidth(false);
   }); // if exist widthStoreKey, we get the default width from localStorage
 
   function initWidthFromStore() {

package/es/index.d.ts

@@ -1,5 +1,5 @@
 /*!
- * @king-design v2.0.11
+ * @king-design v2.0.12
  *
  * 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.11";
+export declare const version = "2.0.12";

package/es/index.js

@@ -1,5 +1,5 @@
 /*!
- * @king-design v2.0.11
+ * @king-design v2.0.12
  *
  * 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.11';
+export var version = '2.0.12';
 /* generate end */

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

@@ -1,20 +1,41 @@
 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 from 'react';
+import React, { useState } from 'react';
 import * as ReactDOM from 'react-dom';
 import { Drawer, Card, Button } from '../../';
 import { Component } from 'intact-react';
 import { wait, dispatchEvent } from '../../../../test/utils';
 describe('Drawer', function () {
+  var container;
+  beforeEach(function () {
+    container = document.createElement('div');
+    document.body.appendChild(container);
+  });
+  afterEach(function () {
+    ReactDOM.unmountComponentAtNode(container);
+    document.body.removeChild(container);
+  });
   it('should render react element correctly', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee() {
-    var container, Test;
+    var Test, App;
     return _regeneratorRuntime.wrap(function _callee$(_context) {
       while (1) {
         switch (_context.prev = _context.next) {
           case 0:
-            container = document.createElement('div');
-            document.body.appendChild(container);
+            App = function _App() {
+              var _useState = useState(false),
+                  show = _useState[0],
+                  setShow = _useState[1];
+
+              return /*#__PURE__*/React.createElement(Card, null, /*#__PURE__*/React.createElement("div", {
+                onClick: function onClick() {
+                  return setShow(true);
+                }
+              }, "show"), /*#__PURE__*/React.createElement(Drawer, {
+                value: show,
+                mode: "destroy"
+              }, /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement(Test, null))));
+            };
 
             Test = /*#__PURE__*/function (_Component) {
               _inheritsLoose(Test, _Component);
@@ -33,11 +54,9 @@ describe('Drawer', function () {
             }(Component);
 
             Test.template = "<div ref=\"a\">test</div>";
-            ReactDOM.render( /*#__PURE__*/React.createElement(Card, null, /*#__PURE__*/React.createElement(Drawer, null, /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement(Test, null)))), container);
-            ReactDOM.unmountComponentAtNode(container);
-            document.body.removeChild(container);
+            ReactDOM.render( /*#__PURE__*/React.createElement(App, null), container);
 
-          case 7:
+          case 4:
           case "end":
             return _context.stop();
         }
@@ -45,14 +64,12 @@ describe('Drawer', function () {
     }, _callee);
   })));
   it('should handle event correctly', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee2() {
-    var container, click1, click2, _document$querySelect, element1, element2;
+    var 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);
             });
@@ -83,20 +100,19 @@ describe('Drawer', function () {
             }, "click")))), container);
             _document$querySelect = document.querySelectorAll('.click'), element1 = _document$querySelect[0], element2 = _document$querySelect[1];
             dispatchEvent(element1, 'click');
-            _context2.next = 9;
+            _context2.next = 7;
             return wait();
 
-          case 9:
+          case 7:
             expect(click1.callCount).to.eql(1);
             dispatchEvent(element2, 'click');
-            _context2.next = 13;
+            _context2.next = 11;
             return wait();
 
-          case 13:
-            expect(click2.callCount).to.eql(1); // ReactDOM.unmountComponentAtNode(container);
-            // document.body.removeChild(container);
+          case 11:
+            expect(click2.callCount).to.eql(1);
 
-          case 14:
+          case 12:
           case "end":
             return _context2.stop();
         }

package/index.ts

@@ -1,5 +1,5 @@
 /*!
- * @king-design v2.0.11
+ * @king-design v2.0.12
  *
  * 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.11';
+export const version = '2.0.12';
 
 /* generate end */

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@king-design/intact",
-  "version": "2.0.11",
+  "version": "2.0.12",
   "description": "A component library written in Intact for Intact, Vue, React and Angular",
   "main": "es/index.js",
   "scripts": {
@@ -116,7 +116,7 @@
     "highlight.js": "^10.4.1",
     "history": "^5.0.0",
     "html-webpack-plugin": "5.3.1",
-    "intact-react": "^3.0.12",
+    "intact-react": "^3.0.13",
     "istanbul-instrumenter-loader": "^3.0.0",
     "js-yaml": "^4.1.0",
     "karma": "^6.3.2",
@@ -178,7 +178,7 @@
     "dayjs": "^1.10.7",
     "downloadjs": "^1.4.7",
     "enquire.js": "^2.1.6",
-    "intact": "^3.0.12",
+    "intact": "^3.0.13",
     "monaco-editor": "^0.26.1",
     "mxgraphx": "^4.0.7",
     "resize-observer-polyfill": "^1.5.1",