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

package/es/components/upload/index.vdt.js

@@ -10,13 +10,14 @@ import { _$ } from '../../i18n';
 import { Icon } from '../icon';
 import { UploadFileStatus } from './useUpload';
 var _$tmp0 = {
-  'className': 'ion-upload'
+  'className': 'k-icon-upload'
 };
 var _$tmp1 = {
-  'className': 'k-upload-picture-card k-upload-add ion-ios-plus-empty'
+  'className': 'k-icon-add-big'
 };
 var _$tmp2 = {
-  'className': 'k-upload-zoom ion-ios-eye-outline'
+  'className': 'k-icon-add-big',
+  'size': 'large'
 };
 var _$tmp3 = {
   'className': 'k-upload-file-icon ion-document'
@@ -28,7 +29,7 @@ var _$tmp5 = {
   'className': 'k-upload-status-icon ion-ios-close-outline'
 };
 export default function ($props, $blocks, $__proto__) {
-  var _classNameObj, _$cn3;
+  var _classNameObj, _$cn2;
 
   $blocks || ($blocks = {});
   $props || ($props = {});
@@ -75,9 +76,10 @@ export default function ($props, $blocks, $__proto__) {
 
       return block ? block.call($this, callBlock, data) : callBlock();
     }, __$blocks['children'](_$no)) : type !== 'gallery' ? type === 'select' ? _$cc(Button, {
-      'type': 'primary',
-      'children': _$('点击上传')
-    }) : _$ce(2, 'div', [_$cc(Icon, _$tmp0), _$ce(2, 'div', _$('将文件拖到此处，或点击上传'), 0)], 4, 'k-upload-area') : _$cc(Icon, _$tmp1);
+      'children': [_$cc(Icon, _$tmp0), _$('点击上传')]
+    }) : _$ce(2, 'div', [_$cc(Icon, _$tmp1), _$ce(2, 'div', null, 1, null, {
+      'innerHTML': _$('将文件拖到此处，或<a>点击上传</a>')
+    })], 4, 'k-upload-area') : _$ce(2, 'div', [_$cc(Icon, _$tmp2), _$ce(2, 'div', _$('上传图片'), 0)], 4, 'k-upload-picture-card k-upload-add');
   }, __$blocks['content'] = function ($super, data) {
     var block = $blocks['content'];
 
@@ -90,13 +92,9 @@ export default function ($props, $blocks, $__proto__) {
 
   var removeFile = this.files.removeFile;
 
-  var closeBtn = function closeBtn(value, index, icon) {
-    var _$cn2;
-
+  var closeBtn = function closeBtn(value, index) {
     return _$cc(Icon, {
-      'className': _$cn((_$cn2 = {
-        "k-upload-close": true
-      }, _$cn2[icon] = true, _$cn2)),
+      'className': 'k-upload-close k-icon-delete',
       'ev-click': function evClick() {
         return removeFile(value, index);
       },
@@ -129,10 +127,15 @@ export default function ($props, $blocks, $__proto__) {
           'percent': $value.percent,
           'size': 'mini',
           'className': 'k-upload-progress'
-        }), 2, 'k-upload-overlap', null, 'overlap') : _$ce(2, 'div', _$cc(Icon, _$tmp2), 2, 'k-upload-overlap k-upload-icons', {
-          'ev-click': linkEvent($value, show)
-        })
-      }), closeBtn($value, $key, 'ion-ios-close')], 0, _$cn({
+        }), 2, 'k-upload-overlap', null, 'overlap') : _$ce(2, 'div', [_$cc(Icon, {
+          'className': 'k-upload-zoom ion-ios-eye-outline',
+          'size': 'large',
+          'hoverable': true,
+          'ev-click': function evClick() {
+            return show($value);
+          }
+        }), closeBtn($value, $key)], 0, 'k-upload-overlap k-upload-icons')
+      })], 4, _$cn({
         "k-upload-picture k-upload-picture-card": true,
         'k-error': $value.status === UploadFileStatus.Error
       }), null, $value.uid);
@@ -149,13 +152,13 @@ export default function ($props, $blocks, $__proto__) {
     return block ? block.call($this, callBlock, data) : callBlock();
   }, __$blocks['tip'](_$no)), 0, 'k-upload-tip') : undefined, type !== 'gallery' ? _$ce(2, 'div', _$cc(TransitionGroup, _extends({}, expandAnimationCallbacks, {
     'children': _$ma(files, function ($value, $key) {
-      return _$ce(2, 'div', [_$ce(2, 'div', [_$cc(Icon, _$tmp3), _$ce(2, 'span', $value.name, 0, 'k-upload-file-name'), closeBtn($value, $key, 'ion-ios-close-empty'), $value.status === UploadFileStatus.Done ? _$cc(Icon, _$tmp4) : $value.status === UploadFileStatus.Error ? _$cc(Icon, _$tmp5) : undefined], 0, 'k-upload-name c-ellipsis'), _$cc(Transition, _extends({}, expandAnimationCallbacks, {
+      return _$ce(2, 'div', [_$ce(2, 'div', [_$ce(2, 'div', [_$cc(Icon, _$tmp3), _$ce(2, 'span', $value.name, 0, 'k-upload-file-name'), $value.status === UploadFileStatus.Done ? _$cc(Icon, _$tmp4) : $value.status === UploadFileStatus.Error ? _$cc(Icon, _$tmp5) : undefined], 0, 'k-upload-name c-ellipsis'), _$cc(Transition, _extends({}, expandAnimationCallbacks, {
         'children': $value.status === UploadFileStatus.Ready || $value.status === UploadFileStatus.Uploading ? _$cc(Progress, {
           'percent': $value.percent,
           'size': 'mini',
           'className': 'k-upload-progress'
         }) : undefined
-      }))], 4, _$cn({
+      }))], 4, 'k-upload-file-main'), closeBtn($value, $key)], 0, _$cn({
         "k-upload-file": true,
         'k-error': $value.status === UploadFileStatus.Error
       }), null, $value.uid);
@@ -165,9 +168,9 @@ export default function ($props, $blocks, $__proto__) {
     'key': 'dialog',
     'value': isShow.value,
     'ev-close': close,
-    'className': _$cn((_$cn3 = {
+    'className': _$cn((_$cn2 = {
       "k-upload-dialog": true
-    }, _$cn3[makeUploadDialogStyles()] = true, _$cn3)),
+    }, _$cn2[makeUploadDialogStyles()] = true, _$cn2)),
     'children': image.value ? _$ce(2, 'a', _$ce(2, 'img', null, 1, null, {
       'src': image.value.url
     }), 2, null, {

package/es/components/upload/styles.js

@@ -10,15 +10,14 @@ var defaults = {
   },
 
   fontSize: '12px',
-  tip: {
-    gap: '16px',
 
-    get color() {
-      return theme.color.lightBlack;
-    }
+  get color() {
+    return theme.color.lightBlack;
+  },
 
+  tip: {
+    gap: '8px'
   },
-  closeFontSize: '24px',
   // files list
   filesGap: '16px',
   file: {
@@ -45,12 +44,16 @@ var defaults = {
         return theme.color.success;
       },
 
-      gap: '8px',
-
       get errorColor() {
         return theme.color.danger;
-      }
+      },
 
+      offsetRight: '2px'
+    },
+    delete: {
+      width: '20px',
+      top: '7px',
+      right: '2px'
     },
 
     get errorColor() {
@@ -60,10 +63,6 @@ var defaults = {
   },
   // drag
   drag: {
-    get color() {
-      return theme.color.lightBlack;
-    },
-
     get border() {
       return "1px dashed " + theme.color.border;
     },
@@ -76,14 +75,14 @@ var defaults = {
       return theme.color.primary;
     },
 
-    padding: "20px 0 40px 0",
-    icon: {
-      fontSize: '80px',
-
-      get color() {
-        return theme.color.placeholder;
-      }
+    get bgColor() {
+      return theme.color.bg;
+    },
 
+    padding: "42px 0",
+    icon: {
+      fontSize: '40px',
+      gap: '16px'
     },
 
     get overBorderColor() {
@@ -112,18 +111,11 @@ var defaults = {
       return theme.color.danger;
     },
 
-    close: {
-      top: '-8px',
-      right: '-8px',
-      fontSize: '18px'
-    },
     add: {
       get border() {
         return "1px dashed " + theme.color.border;
       },
 
-      fontSize: '44px',
-
       get hoverBorderColor() {
         return theme.color.primary;
       }
@@ -132,9 +124,9 @@ var defaults = {
   },
   // overlap
   overlap: {
-    bgColor: 'rgba(0, 0, 0, .35)',
+    bgColor: 'rgba(21, 27, 30, .5)',
     color: '#fff',
-    zoomFontSize: '24px'
+    iconGap: '16px'
   }
 };
 var upload;
@@ -144,7 +136,7 @@ setDefault(function () {
   }).upload;
 });
 export function makeStyles() {
-  return /*#__PURE__*/css("font-size:", upload.fontSize, ";position:relative;.k-upload-handle,.k-upload-tip{display:inline-block;vertical-align:middle;}.k-upload-tip{margin-left:", upload.tip.gap, ";color:", upload.tip.color, ";}.k-upload-files{margin-top:", upload.filesGap, ";}.k-upload-file{margin:", upload.file.margin, ";padding:", upload.file.padding, ";border-radius:", upload.file.borderRadius, ";&:hover{background:", upload.file.bgColor, ";.k-upload-close{display:inline-flex;}}}.k-upload-name{display:flex;align-items:center;height:", upload.file.height, ";}.k-upload-file-icon{margin-right:", upload.file.fileIconGap, ";}.k-upload-file-name{flex:1;}.k-upload-status-icon{color:", upload.file.status.color, ";margin-left:", upload.file.status.gap, ";}.k-upload-close{display:none;.k-icon{font-size:", upload.closeFontSize, ";}}.k-upload-file.k-error{color:", upload.file.errorColor, ";.k-upload-status-icon{color:", upload.file.status.errorColor, ";}}.k-upload-progress{.k-progress-text{width:auto!important;}}&.k-drag{.k-upload-handle{color:", upload.drag.color, ";display:block;border:", upload.drag.border, ";border-radius:", upload.drag.borderRadius, ";cursor:pointer;text-align:center;transition:border-color ", upload.transition, ";&:hover{border-color:", upload.drag.hoverBorderColor, ";}}.k-upload-area{padding:", upload.drag.padding, ";.k-icon{font-size:", upload.drag.icon.fontSize, ";color:", upload.drag.icon.color, ";line-height:1;}}&.k-dragover{.k-upload-handle{border-color:", upload.drag.overBorderColor, ";}}}.k-upload-pictures{display:inline-block;vertical-align:middle;}.k-upload-picture{padding:", upload.gallery.padding, ";position:relative;vertical-align:middle;&.k-error{border-color:", upload.gallery.errorBorderColor, ";}&:hover{.k-upload-close{opacity:1;pointer-events:all;}}.k-upload-img{display:inline-block;width:100%;height:100%;}.k-upload-close{position:absolute;top:", upload.gallery.close.top, ";right:", upload.gallery.close.right, ";display:inline-block;opacity:0;transition:opacity ", upload.transition, ";pointer-events:none;.k-icon{font-size:", upload.gallery.close.fontSize, ";}}.k-upload-icons{opacity:0;transition:opacity ", upload.transition, ";}&:hover{.k-upload-icons{opacity:1;}}}.k-upload-picture-card{display:inline-block;width:", upload.gallery.width, ";height:", upload.gallery.height, ";border-radius:", upload.gallery.borderRadius, ";border:", upload.gallery.border, ";text-align:center;cursor:pointer;margin:", upload.gallery.margin, ";background:", upload.gallery.bgColor, ";}.k-upload-add{border:", upload.gallery.add.border, ";font-size:", upload.gallery.add.fontSize, ";line-height:calc(", upload.gallery.height, " - 2px);&:hover{border-color:", upload.gallery.add.hoverBorderColor, ";}}.k-upload-overlap{position:absolute;width:100%;height:100%;left:0;top:0;color:", upload.overlap.color, ";background:", upload.overlap.bgColor, ";.k-upload-progress{position:absolute;width:100%;top:50%;padding:", upload.gallery.padding, ";transform:translateY(-50%);}}.k-upload-zoom{display:inline-block;position:relative;top:50%;transform:translateY(-50%);font-size:", upload.overlap.zoomFontSize, ";}");
+  return /*#__PURE__*/css("font-size:", upload.fontSize, ";position:relative;.k-icon-upload{position:relative;top:-1px;}.k-upload-handle{display:inline-block;vertical-align:middle;color:", upload.color, ";}.k-upload-tip{margin-top:", upload.tip.gap, ";color:", upload.color, ";}.k-upload-files{margin-top:", upload.filesGap, ";}.k-upload-file{margin:", upload.file.margin, ";padding-right:", upload.file.delete.width, ";position:relative;&:hover{.k-upload-close{display:inline-flex;position:absolute;right:", upload.file.delete.right, ";top:", upload.file.delete.top, ";}.k-upload-file-main{background:", upload.file.bgColor, ";}}}.k-upload-file-main{padding:", upload.file.padding, ";border-radius:", upload.file.borderRadius, ";}.k-upload-name{display:flex;align-items:center;height:", upload.file.height, ";}.k-upload-file-icon{margin-right:", upload.file.fileIconGap, ";}.k-upload-file-name{flex:1;}.k-upload-status-icon{color:", upload.file.status.color, ";margin-right:", upload.file.status.offsetRight, ";}.k-upload-close{display:none;}.k-upload-file.k-error{color:", upload.file.errorColor, ";.k-upload-status-icon{color:", upload.file.status.errorColor, ";}}.k-upload-progress{.k-progress-text{width:auto!important;}}&.k-drag{.k-upload-handle{display:block;border:", upload.drag.border, ";border-radius:", upload.drag.borderRadius, ";cursor:pointer;text-align:center;transition:border-color ", upload.transition, ";background:", upload.drag.bgColor, ";&:hover{border-color:", upload.drag.hoverBorderColor, ";}}.k-upload-area{padding:", upload.drag.padding, ";.k-icon{display:inline-block;font-size:", upload.drag.icon.fontSize, ";margin-bottom:", upload.drag.icon.gap, ";}}&.k-dragover{.k-upload-handle{border-color:", upload.drag.overBorderColor, ";}}}.k-upload-pictures{display:inline-block;vertical-align:middle;}.k-upload-picture{padding:", upload.gallery.padding, ";position:relative;vertical-align:middle;&.k-error{border-color:", upload.gallery.errorBorderColor, ";}.k-upload-close{display:inline-flex;}&:hover{.k-upload-icons{opacity:1;}}.k-upload-img{display:inline-block;width:100%;height:100%;}.k-upload-icons{opacity:0;transition:opacity ", upload.transition, ";}}.k-upload-picture-card{display:inline-flex;width:", upload.gallery.width, ";height:", upload.gallery.height, ";border-radius:", upload.gallery.borderRadius, ";border:", upload.gallery.border, ";margin:", upload.gallery.margin, ";background:", upload.gallery.bgColor, ";align-items:center;justify-content:center;flex-direction:column;}.k-upload-add{border:", upload.gallery.add.border, ";cursor:pointer;&:hover{border-color:", upload.gallery.add.hoverBorderColor, ";}}.k-upload-overlap{position:absolute;width:100%;height:100%;left:0;top:0;background:", upload.overlap.bgColor, ";display:flex;align-items:center;justify-content:center;gap:", upload.overlap.iconGap, ";color:", upload.overlap.color, ";.k-icon:not(:hover){color:inherit;}.k-upload-progress{position:absolute;width:100%;top:50%;padding:", upload.gallery.padding, ";transform:translateY(-50%);}}");
 }
 export function makeUploadDialogStyles() {
   return /*#__PURE__*/css(process.env.NODE_ENV === "production" ? {

package/es/components/utils.d.ts

@@ -36,4 +36,6 @@ export declare const expandAnimationCallbacks: {
 export declare function throttle<T>(fn: (arg: T) => void, time: number, doAlways?: (arg: T) => void): (arg: T) => void;
 export declare function debounce(fn: Function, time: number, immediately?: boolean): () => any;
 export declare function nextFrame(fn: () => void): void;
+export declare function selectValue(elem: HTMLInputElement | HTMLTextAreaElement): void;
+export declare function swap(list: any[], from: number, to: number): any[];
 export {};

package/es/components/utils.js

@@ -183,12 +183,15 @@ export function findChildren(children, callback) {
 
         if (loop(vNode)) {
           found = vNode;
-          break;
+          return true;
         }
       }
-    } else {
-      return callback(children, ++index);
+    } else if (callback(children, ++index)) {
+      found = children;
+      return true;
     }
+
+    return false;
   };
 
   loop(children);
@@ -356,4 +359,22 @@ export function nextFrame(fn) {
   requestAnimationFrame(function () {
     requestAnimationFrame(fn);
   });
+}
+export function selectValue(elem) {
+  if (elem.select) {
+    elem.select();
+  } else if (elem.setSelectionRange) {
+    // mobile safari
+    elem.focus();
+    elem.setSelectionRange(0, elem.value.length);
+  }
+}
+export function swap(list, from, to) {
+  var newList = _sliceInstanceProperty(list).call(list, 0);
+
+  var item = _spliceInstanceProperty(newList).call(newList, from, 1)[0];
+
+  _spliceInstanceProperty(newList).call(newList, to, 0, item);
+
+  return newList;
 }

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;
@@ -82,11 +82,15 @@ declare const i18n: {
     请输入或选择: string;
     无数据: string;
     点击上传: string;
-    '\u5C06\u6587\u4EF6\u62D6\u5230\u6B64\u5904\uFF0C\u6216\u70B9\u51FB\u4E0A\u4F20': string;
+    '\u5C06\u6587\u4EF6\u62D6\u5230\u6B64\u5904\uFF0C\u6216<a>\u70B9\u51FB\u4E0A\u4F20</a>': string;
     查看图片: string;
+    上传图片: string;
     '\u8D85\u51FA\u6587\u4EF6\u6570\u91CF\u6700\u5927\u9650\u5236\uFF1A{limit}': string;
     '"{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
@@ -92,13 +92,18 @@ var i18n = {
   '无数据': 'No data',
   // upload
   '点击上传': 'Click to Upload',
-  '将文件拖到此处，或点击上传': 'Drag file to this area or click to upload',
+  '将文件拖到此处，或<a>点击上传</a>': 'Drag file to this area or <a>click to upload</a>',
   '查看图片': 'View Image',
+  '上传图片': 'Upload Image',
   '超出文件数量最大限制：{limit}': 'Exceed the maximum limit of the number of files: {limit}',
   '"{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 v2.1.1
+ * @king-design v3.0.0-beta.1
  *
  * Copyright (c) Kingsoft Cloud
  * Released under the MIT License
@@ -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 = "2.1.1";
+export declare const version = "3.0.0-beta.1";

package/es/index.js

@@ -1,5 +1,5 @@
 /*!
- * @king-design v2.1.1
+ * @king-design v3.0.0-beta.1
  *
  * Copyright (c) Kingsoft Cloud
  * Released under the MIT License
@@ -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 = '2.1.1';
+export var version = '3.0.0-beta.1';
 /* generate end */

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