@king-design/intact 3.0.0-beta.0 → 3.0.0-beta.1

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);

package/es/hooks/useResizeObserver.d.ts

@@ -1,2 +1,2 @@
 import { RefObject } from 'intact';
-export declare function useResizeObserver(elementRef: RefObject<HTMLElement>, callback: () => void): void;
+export declare function useResizeObserver(elementRef: RefObject<HTMLElement>, callback: () => void, useDebounce?: boolean): void;

package/es/hooks/useResizeObserver.js

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

package/es/i18n/en-US.d.ts

@@ -70,7 +70,7 @@ declare const i18n: {
     '\u8BF7\u9009\u62E9 {n} \u5230 {m} \u9879': string;
     '\u8BF7\u8F93\u5165 {n} \u5230 {m} \u4E2A\u5B57\u7B26': string;
     '{n} \u6761 / \u9875': string;
-    跳至: string;
+    前往: string;
     页: string;
     '\u5171 {n} \u6761': string;
     '/(\u3112o\u3112)/~~ \u6CA1\u6709\u627E\u5230\u4EB2\u8981\u7684\u6570\u636E\u54E6~': string;
@@ -89,5 +89,8 @@ declare const i18n: {
     '"{name}" \u8D85\u51FA\u6587\u4EF6\u6700\u5927\u9650\u5236\uFF1A{maxSize}kb': string;
     '"{name}" \u6587\u4EF6\u7C7B\u578B\u4E0D\u5408\u6CD5': string;
     请输入关键字: string;
+    复制成功: string;
+    复制失败: string;
+    复制: string;
 };
 export default i18n;

package/es/i18n/en-US.js

@@ -76,7 +76,7 @@ var i18n = {
   '请输入 {n} 到 {m} 个字符': 'Please enter {n}~{m} character{s:m}.',
   // pagination
   '{n} 条 / 页': '{n} / page',
-  '跳至': 'Goto',
+  '前往': 'Goto',
   '页': '',
   '共 {n} 条': 'Total {n}',
   // table
@@ -99,7 +99,11 @@ var i18n = {
   '"{name}" 超出文件最大限制：{maxSize}kb': '"{name}" exceeds the maximum size of file: {maxSize}kb',
   '"{name}" 文件类型不合法': '"{name}" invalid file type',
   // search
-  '请输入关键字': 'Please enter keywords'
+  '请输入关键字': 'Please enter keywords',
+  // copy
+  '复制成功': 'Copy successfully!',
+  '复制失败': 'Copy failed!',
+  '复制': 'Copy'
 };
 export default i18n;
 

package/es/index.d.ts

@@ -1,5 +1,5 @@
 /*!
- * @king-design v3.0.0-beta.0
+ * @king-design v3.0.0-beta.1
  *
  * Copyright (c) Kingsoft Cloud
  * Released under the MIT License
@@ -9,7 +9,7 @@
  */
 export { _$, localize } from './i18n';
 export { bind } from './components/utils';
-export { setTheme } from './styles/theme';
+export { setTheme, theme } from './styles/theme';
 export * from './components/affix';
 export * from './components/badge';
 export * from './components/breadcrumb';
@@ -20,6 +20,7 @@ export * from './components/cascader';
 export * from './components/checkbox';
 export * from './components/collapse';
 export * from './components/colorpicker';
+export * from './components/copy';
 export * from './components/datepicker';
 export * from './components/dialog';
 export * from './components/drawer';
@@ -33,6 +34,7 @@ export * from './components/layout';
 export * from './components/menu';
 export * from './components/message';
 export * from './components/pagination';
+export * from './components/popover';
 export * from './components/progress';
 export * from './components/radio';
 export * from './components/rate';
@@ -57,4 +59,4 @@ export * from './components/tree';
 export * from './components/treeSelect';
 export * from './components/upload';
 export * from './components/wave';
-export declare const version = "3.0.0-beta.0";
+export declare const version = "3.0.0-beta.1";

package/es/index.js

@@ -1,5 +1,5 @@
 /*!
- * @king-design v3.0.0-beta.0
+ * @king-design v3.0.0-beta.1
  *
  * Copyright (c) Kingsoft Cloud
  * Released under the MIT License
@@ -9,7 +9,7 @@
  */
 export { _$, localize } from './i18n';
 export { bind } from './components/utils';
-export { setTheme } from './styles/theme';
+export { setTheme, theme } from './styles/theme';
 /* generate start */
 
 export * from './components/affix';
@@ -22,6 +22,7 @@ export * from './components/cascader';
 export * from './components/checkbox';
 export * from './components/collapse';
 export * from './components/colorpicker';
+export * from './components/copy';
 export * from './components/datepicker';
 export * from './components/dialog';
 export * from './components/drawer';
@@ -35,6 +36,7 @@ export * from './components/layout';
 export * from './components/menu';
 export * from './components/message';
 export * from './components/pagination';
+export * from './components/popover';
 export * from './components/progress';
 export * from './components/radio';
 export * from './components/rate';
@@ -59,5 +61,5 @@ export * from './components/tree';
 export * from './components/treeSelect';
 export * from './components/upload';
 export * from './components/wave';
-export var version = '3.0.0-beta.0';
+export var version = '3.0.0-beta.1';
 /* generate end */

package/es/packages/kpc-react/__tests__/components/cascader.spec.d.ts

@@ -0,0 +1 @@
+export {};

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

@@ -0,0 +1,79 @@
+import _asyncToGenerator from "@babel/runtime-corejs3/helpers/asyncToGenerator";
+import _regeneratorRuntime from "@babel/runtime-corejs3/regenerator";
+import React, { useState } from 'react';
+import * as ReactDOM from 'react-dom';
+import { Cascader } from '../../';
+import { getElement, wait } from '../../../../test/utils';
+describe('Cascader', function () {
+  var container;
+  beforeEach(function () {
+    container = document.createElement('div');
+    document.body.appendChild(container);
+  });
+  afterEach(function () {
+    ReactDOM.unmountComponentAtNode(container);
+    document.body.removeChild(container);
+  });
+  it('should hide all menu on selected', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee() {
+    var App, select, dropdown1, _dropdown1$querySelec, item1, dropdown2, _dropdown2$querySelec, item11;
+
+    return _regeneratorRuntime.wrap(function _callee$(_context) {
+      while (1) {
+        switch (_context.prev = _context.next) {
+          case 0:
+            App = function _App() {
+              var _useState = useState([]),
+                  value = _useState[0],
+                  setValue = _useState[1];
+
+              return /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement(Cascader, {
+                data: [{
+                  value: 'a',
+                  label: 'a',
+                  children: [{
+                    value: 'b',
+                    label: 'b'
+                  }]
+                }],
+                value: value,
+                multiple: true,
+                filterable: true,
+                onChangeValue: function onChangeValue(v) {
+                  setValue(v);
+                }
+              }));
+            };
+
+            ReactDOM.render( /*#__PURE__*/React.createElement(App, null), container);
+            select = container.querySelector('.k-cascader');
+            select.click();
+            _context.next = 6;
+            return wait();
+
+          case 6:
+            dropdown1 = getElement('.k-cascader-menu');
+            _dropdown1$querySelec = dropdown1.querySelectorAll(':scope > .k-dropdown-item'), item1 = _dropdown1$querySelec[0];
+            item1.click();
+            _context.next = 11;
+            return wait();
+
+          case 11:
+            dropdown2 = getElement('.k-cascader-menu');
+            _dropdown2$querySelec = dropdown2.querySelectorAll(':scope > .k-dropdown-item'), item11 = _dropdown2$querySelec[0];
+            item11.click();
+            _context.next = 16;
+            return wait(500);
+
+          case 16:
+            // should hide all menu
+            expect(dropdown1.style.display).to.eql('none');
+            expect(dropdown2.style.display).to.eql('none');
+
+          case 18:
+          case "end":
+            return _context.stop();
+        }
+      }
+    }, _callee);
+  })));
+});

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

@@ -3,7 +3,7 @@ import _asyncToGenerator from "@babel/runtime-corejs3/helpers/asyncToGenerator";
 import _regeneratorRuntime from "@babel/runtime-corejs3/regenerator";
 import React, { useState, useEffect } from 'react';
 import * as ReactDOM from 'react-dom';
-import { Drawer, Card, Button, Select, Option } from '../../';
+import { Drawer, Card, Button, Select, Option, Cascader } from '../../';
 import { Component } from 'intact-react';
 import { wait, dispatchEvent } from '../../../../test/utils';
 describe('Drawer', function () {
@@ -11,11 +11,11 @@ describe('Drawer', function () {
   beforeEach(function () {
     container = document.createElement('div');
     document.body.appendChild(container);
-  });
-  afterEach(function () {
-    ReactDOM.unmountComponentAtNode(container);
-    document.body.removeChild(container);
-  });
+  }); // afterEach(() => {
+  // ReactDOM.unmountComponentAtNode(container);
+  // document.body.removeChild(container);
+  // });
+
   it('should render react element correctly', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee() {
     var Test, App;
     return _regeneratorRuntime.wrap(function _callee$(_context) {
@@ -174,4 +174,72 @@ describe('Drawer', function () {
       }
     }, _callee3);
   })));
+  it('reproduce #832', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee4() {
+    var Test, Wrapper, App;
+    return _regeneratorRuntime.wrap(function _callee4$(_context4) {
+      while (1) {
+        switch (_context4.prev = _context4.next) {
+          case 0:
+            App = function _App3() {
+              var _useState4 = useState(false),
+                  value = _useState4[0],
+                  setValue = _useState4[1];
+
+              return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("div", {
+                onClick: function onClick() {
+                  return setValue(true);
+                },
+                className: "click"
+              }, "show"), /*#__PURE__*/React.createElement(Test, {
+                value: value
+              }));
+            };
+
+            Wrapper = function _Wrapper(props) {
+              return /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement(Card, null, /*#__PURE__*/React.createElement("div", {
+                className: "test"
+              }, "a")), /*#__PURE__*/React.createElement("div", null, props.children));
+            };
+
+            Test = function _Test(_ref5) {
+              var value = _ref5.value;
+
+              var _useState3 = useState([]),
+                  data = _useState3[0],
+                  setData = _useState3[1];
+
+              useEffect(function () {
+                if (!value) return;
+                setData([{
+                  value: 'beijing',
+                  label: '北京',
+                  children: [{
+                    value: 'haidian',
+                    label: '海淀区'
+                  }, {
+                    value: 'chaoyang',
+                    label: '朝阳区'
+                  }, {
+                    value: 'fengtai',
+                    label: '丰台区'
+                  }]
+                }]);
+              }, [value]);
+              return /*#__PURE__*/React.createElement(Card, null, value && /*#__PURE__*/React.createElement(Wrapper, null, /*#__PURE__*/React.createElement(Cascader, {
+                data: data
+              })));
+            };
+
+            ReactDOM.render( /*#__PURE__*/React.createElement(App, null), container); // const click = container.querySelector<HTMLElement>('.click')!;
+            // click.click();
+            // await wait();
+            // expect(container.querySelector<HTMLElement>('.test')).to.be.exist;
+
+          case 4:
+          case "end":
+            return _context4.stop();
+        }
+      }
+    }, _callee4);
+  })));
 });

package/es/site/data/components/button/demos/basic/react.js

@@ -27,7 +27,9 @@ var Demo = /*#__PURE__*/function (_React$Component) {
       type: "none"
     }, "none"), /*#__PURE__*/React.createElement(Button, {
       type: "link"
-    }, "link"));
+    }, "link"), /*#__PURE__*/React.createElement(Button, {
+      type: "flat"
+    }, "flat"));
   };
 
   return Demo;

package/es/site/data/components/button/demos/group/react.js

@@ -37,6 +37,12 @@ var Demo = /*#__PURE__*/function (_React$Component) {
       type: "danger"
     }, "\u5173\u673A"), /*#__PURE__*/React.createElement(Button, {
       type: "danger"
+    }, "\u91CD\u542F")), /*#__PURE__*/React.createElement(ButtonGroup, null, /*#__PURE__*/React.createElement(Button, {
+      type: "flat"
+    }, "\u5F00\u673A"), /*#__PURE__*/React.createElement(Button, {
+      type: "flat"
+    }, "\u5173\u673A"), /*#__PURE__*/React.createElement(Button, {
+      type: "flat"
     }, "\u91CD\u542F")), /*#__PURE__*/React.createElement(ButtonGroup, null, /*#__PURE__*/React.createElement(Button, {
       type: "primary"
     }, /*#__PURE__*/React.createElement("i", {
@@ -72,6 +78,26 @@ var Demo = /*#__PURE__*/function (_React$Component) {
       value: "guangzhou"
     }, "\u5E7F\u5DDE"), /*#__PURE__*/React.createElement(Button, {
       value: "shenzhen"
+    }, "\u6DF1\u5733")), /*#__PURE__*/React.createElement(ButtonGroup, {
+      checkType: "radio",
+      value: this.state.city,
+      onChangeValue: function onChangeValue(city) {
+        return _this2.setState({
+          city: city
+        });
+      }
+    }, /*#__PURE__*/React.createElement(Button, {
+      type: "flat",
+      value: "beijing"
+    }, "\u5317\u4EAC"), /*#__PURE__*/React.createElement(Button, {
+      type: "flat",
+      value: "shanghai"
+    }, "\u4E0A\u6D77"), /*#__PURE__*/React.createElement(Button, {
+      type: "flat",
+      value: "guangzhou"
+    }, "\u5E7F\u5DDE"), /*#__PURE__*/React.createElement(Button, {
+      type: "flat",
+      value: "shenzhen"
     }, "\u6DF1\u5733")), /*#__PURE__*/React.createElement("p", null, "\u591A\u9009\u6309\u94AE\u7EC4"), /*#__PURE__*/React.createElement(ButtonGroup, {
       checkType: "checkbox",
       value: this.state.cities,

package/es/site/data/components/button/demos/icon/react.js

@@ -28,6 +28,12 @@ var Demo = /*#__PURE__*/function (_React$Component) {
       type: "none"
     }, /*#__PURE__*/React.createElement(Icon, {
       className: "ion-ios-search"
+    })), /*#__PURE__*/React.createElement(Button, {
+      icon: true,
+      circle: true,
+      type: "flat"
+    }, /*#__PURE__*/React.createElement(Icon, {
+      className: "ion-ios-search"
     })), /*#__PURE__*/React.createElement(Button, {
       type: "danger",
       size: "large",

package/es/site/data/components/copy/demos/basic/react.js

@@ -0,0 +1,23 @@
+import _inheritsLoose from "@babel/runtime-corejs3/helpers/inheritsLoose";
+import React from 'react';
+import { Copy } from '@king-design/react';
+
+var Demo = /*#__PURE__*/function (_React$Component) {
+  _inheritsLoose(Demo, _React$Component);
+
+  function Demo() {
+    return _React$Component.apply(this, arguments) || this;
+  }
+
+  var _proto = Demo.prototype;
+
+  _proto.render = function render() {
+    return /*#__PURE__*/React.createElement(Copy, {
+      text: "Hello King Desgin!"
+    });
+  };
+
+  return Demo;
+}(React.Component);
+
+export { Demo as default };

package/es/site/data/components/copy/demos/children/react.js

@@ -0,0 +1,44 @@
+import _inheritsLoose from "@babel/runtime-corejs3/helpers/inheritsLoose";
+import React from 'react';
+import { Copy, Button, Icon } from '@king-design/react';
+import './index.styl';
+
+var Demo = /*#__PURE__*/function (_React$Component) {
+  _inheritsLoose(Demo, _React$Component);
+
+  function Demo() {
+    return _React$Component.apply(this, arguments) || this;
+  }
+
+  var _proto = Demo.prototype;
+
+  _proto.render = function render() {
+    return /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement(Copy, {
+      text: "Hello King Desgin!"
+    }, "Copy"), /*#__PURE__*/React.createElement(Copy, {
+      text: "Hello King Desgin!"
+    }, /*#__PURE__*/React.createElement(Button, null, "Copy")), /*#__PURE__*/React.createElement(Copy, {
+      text: "Hello King Desgin!"
+    }, /*#__PURE__*/React.createElement(Button, {
+      type: "link",
+      size: "mini"
+    }, "Copy")), /*#__PURE__*/React.createElement(Copy, {
+      text: "Hello King Desgin!"
+    }, /*#__PURE__*/React.createElement(Icon, {
+      className: "ion-ios-copy",
+      size: "large",
+      hoverable: true
+    })), /*#__PURE__*/React.createElement(Copy, {
+      text: "Hello King Desgin!"
+    }, /*#__PURE__*/React.createElement(Button, {
+      icon: true,
+      circle: true
+    }, /*#__PURE__*/React.createElement(Icon, {
+      className: "ion-ios-copy-outline"
+    }))));
+  };
+
+  return Demo;
+}(React.Component);
+
+export { Demo as default };

package/es/site/data/components/copy/index.d.ts

@@ -0,0 +1,57 @@
+import { Component } from 'intact';
+import Article from '~/../src/components/article';
+export default class extends Article {
+    static sidebar: {
+        组件: {
+            title: string;
+            category: string;
+            order: number;
+            sidebar: string;
+            path: string;
+        }[];
+        undefined: ({
+            title: string;
+            order: number;
+            sidebar: string;
+            disabled: boolean;
+            path: string;
+        } | {
+            title: string;
+            order: number;
+            sidebar: string;
+            path: string;
+            disabled?: undefined;
+        })[];
+    };
+    static data: {
+        setting: {
+            title: string;
+            category: string;
+            order: number;
+            sidebar: string;
+        };
+        contents: string;
+        index: string;
+        catalogs: {
+            text: string;
+            level: number;
+            id: string;
+        }[];
+    };
+    static defaults: () => {
+        demos: Component<any, {}, {}, {}>[];
+        setting: {
+            title: string;
+            category: string;
+            order: number;
+            sidebar: string;
+        };
+        contents: string;
+        index: string;
+        catalogs: {
+            text: string;
+            level: number;
+            id: string;
+        }[];
+    };
+}