@king-design/intact 2.0.2 → 2.0.5

package/es/components/skeleton/item.d.ts

@@ -0,0 +1,16 @@
+import { Component, TypeDefs } from 'intact';
+declare type ItemType = 'text' | 'avator' | 'image' | 'button' | 'input';
+export declare const ItemTypeMap: ItemType[];
+export interface SkeletonItemProps {
+    type?: ItemType;
+}
+export interface SkeletonItemEvents {
+}
+export interface SkeletonItemBlocks {
+}
+export declare class SkeletonItem extends Component<SkeletonItemProps, SkeletonItemEvents, SkeletonItemBlocks> {
+    static template: string | import("intact").Template<any>;
+    static typeDefs: Required<TypeDefs<SkeletonItemProps>>;
+    static defaults: () => Partial<SkeletonItemProps>;
+}
+export {};

package/es/components/skeleton/item.js

@@ -0,0 +1,26 @@
+import _inheritsLoose from "@babel/runtime-corejs3/helpers/inheritsLoose";
+import { Component } from 'intact';
+import template from './item.vdt';
+export var ItemTypeMap = ['text', 'avator', 'image', 'button', 'input'];
+var typeDefs = {
+  type: ItemTypeMap
+};
+
+var defaults = function defaults() {
+  return {
+    type: 'text'
+  };
+};
+
+export var SkeletonItem = /*#__PURE__*/function (_Component) {
+  _inheritsLoose(SkeletonItem, _Component);
+
+  function SkeletonItem() {
+    return _Component.apply(this, arguments) || this;
+  }
+
+  return SkeletonItem;
+}(Component);
+SkeletonItem.template = template;
+SkeletonItem.typeDefs = typeDefs;
+SkeletonItem.defaults = defaults;

package/es/components/skeleton/item.vdt.js

@@ -0,0 +1,35 @@
+import _extends from "@babel/runtime-corejs3/helpers/extends";
+import { createVNode as _$cv, className as _$cn, createElementVNode as _$ce } from 'intact';
+import { makeItemStyles } from './style';
+import { getRestProps } from '../utils';
+var _$tmp0 = {
+  'd': 'M64 896V128h896v768H64z m64-128l192-192 116.352 116.352L640 448l256 307.2V192H128v576z m224-480a96 96 0 1 1-0.064 192.064A96 96 0 0 1 352 288z'
+};
+var _$tmp1 = {
+  'viewBox': '0 0 1024 1024',
+  'xmlns': 'http://www.w3.org/2000/svg'
+};
+export default function ($props, $blocks, $__proto__) {
+  var _classNameObj, _ItemklsObj;
+
+  $blocks || ($blocks = {});
+  $props || ($props = {});
+  var $this = this;
+
+  var _this$get = this.get(),
+      type = _this$get.type;
+
+  var classNameObj = (_classNameObj = {
+    'k-skeleton-item': true
+  }, _classNameObj[makeItemStyles()] = true, _classNameObj);
+  var ItemklsObj = (_ItemklsObj = {
+    'k-skeleton-item-box': true
+  }, _ItemklsObj["skeleton-item-" + type] = true, _ItemklsObj);
+
+  var skeletonItem = _$cv('div', _extends({
+    'className': _$cn(ItemklsObj)
+  }, getRestProps(this)), type === 'image' ? _$ce(512, 'svg', _$ce(2, 'path', null, 1, null, _$tmp0), 2, null, _$tmp1) : undefined);
+
+  return _$ce(2, 'div', skeletonItem, 0, _$cn(classNameObj));
+}
+;

package/es/components/skeleton/skeleton.d.ts

@@ -0,0 +1,17 @@
+import { Component, TypeDefs } from 'intact';
+export interface SkeletonProps {
+    loading: boolean;
+    animated?: boolean;
+    rows?: number;
+    avator?: boolean;
+    size?: string;
+}
+export interface SkeletonEvents {
+}
+export interface SkeletonBlocks {
+}
+export declare class Skeleton extends Component<SkeletonProps, SkeletonEvents, SkeletonBlocks> {
+    static template: string | import("intact").Template<any>;
+    static typeDefs: Required<TypeDefs<SkeletonProps>>;
+    static defaults: () => Partial<SkeletonProps>;
+}

package/es/components/skeleton/skeleton.js

@@ -0,0 +1,30 @@
+import _inheritsLoose from "@babel/runtime-corejs3/helpers/inheritsLoose";
+import { Component } from 'intact';
+import template from './skeleton.vdt';
+var typeDefs = {
+  loading: Boolean,
+  animated: Boolean,
+  rows: Number,
+  avator: Boolean,
+  size: String
+};
+
+var defaults = function defaults() {
+  return {
+    rows: 2,
+    size: 'large'
+  };
+};
+
+export var Skeleton = /*#__PURE__*/function (_Component) {
+  _inheritsLoose(Skeleton, _Component);
+
+  function Skeleton() {
+    return _Component.apply(this, arguments) || this;
+  }
+
+  return Skeleton;
+}(Component);
+Skeleton.template = template;
+Skeleton.typeDefs = typeDefs;
+Skeleton.defaults = defaults;

package/es/components/skeleton/skeleton.vdt.js

@@ -0,0 +1,37 @@
+import _fillInstanceProperty from "@babel/runtime-corejs3/core-js/instance/fill";
+import { map as _$ma, createUnknownComponentVNode as _$cc, createElementVNode as _$ce, className as _$cn } from 'intact';
+import { SkeletonItem } from './item';
+import { makeStyles, kls } from './style';
+var _$tmp0 = {
+  'type': 'avator'
+};
+export default function ($props, $blocks, $__proto__) {
+  var _context, _classNameObj;
+
+  $blocks || ($blocks = {});
+  $props || ($props = {});
+  var $this = this;
+
+  var _this$get = this.get(),
+      rows = _this$get.rows,
+      avator = _this$get.avator,
+      animated = _this$get.animated,
+      children = _this$get.children,
+      loading = _this$get.loading,
+      size = _this$get.size;
+
+  var targetRows = typeof rows !== 'number' ? 3 : rows < 1 ? 1 : parseInt(rows);
+
+  var skeletonList = _fillInstanceProperty(_context = Array(targetRows + 2)).call(_context);
+
+  var skeletonItems = _$ma(skeletonList, function ($value, $key) {
+    return _$cc(SkeletonItem);
+  }, $this);
+
+  var classNameObj = (_classNameObj = {
+    'k-skeleton': true,
+    'k-animated': animated
+  }, _classNameObj[makeStyles(size)] = true, _classNameObj);
+  return loading ? _$ce(2, 'div', children ? _$ce(2, 'div', children, 0) : avator ? _$ce(2, 'div', [_$cc(SkeletonItem, _$tmp0), _$ce(2, 'div', skeletonItems, 0, 'k-skeleton-items')], 4, _$cn(kls('avator-box'))) : _$ce(2, 'div', skeletonItems, 0, 'k-skeleton-items'), 2, _$cn(classNameObj)) : undefined;
+}
+;

package/es/components/skeleton/style.d.ts

@@ -0,0 +1,6 @@
+import '../../styles/global';
+export declare const kls: (className: string) => string;
+declare type ItemSize = 'default' | 'large' | 'small' | 'mini';
+export declare function makeStyles(size: ItemSize): string;
+export declare function makeItemStyles(): string;
+export {};

package/es/components/skeleton/style.js

@@ -0,0 +1,35 @@
+function _EMOTION_STRINGIFIED_CSS_ERROR__() { return "You have tried to stringify object returned from `css` function. It isn't supposed to be used directly (e.g. as value of the `className` prop), but rather handed to emotion so it can handle it (e.g. as value of `css` prop)."; }
+
+import { deepDefaults } from '../../styles/utils';
+import { theme, setDefault } from '../../styles/theme';
+import { css, keyframes } from '@emotion/css';
+import '../../styles/global';
+export var kls = function kls(className) {
+  return "k-skeleton-" + className;
+};
+var defaults = {
+  item: {
+    bgColor: '#dcdde0'
+  }
+};
+var skeleton;
+setDefault(function () {
+  skeleton = deepDefaults(theme, {
+    skeleton: defaults
+  }).skeleton;
+});
+export function makeStyles(size) {
+  return /*#__PURE__*/css("&.k-animated{.", kls('item'), "{&>.k-skeleton-item-box{background:linear-gradient(90deg, #f2f2f2 25%, #e6e6e6 37%, #f2f2f2 63%);background-size:400% 100%;animation:", skeletonLoading, " 1.4s ease infinite;}}}.k-skeleton-items{.", kls('item'), ":first-child{.skeleton-item-text{width:33%;}}.", kls('item'), ":last-child{.skeleton-item-text{width:61%;}}}.", kls('avator-box'), "{display:flex;&>div:last-child{flex-grow:1;padding-left:20px;}}.skeleton-item-button,.skeleton-item-input{height:", theme[size].height, ";}");
+}
+var skeletonLoading = /*#__PURE__*/keyframes(process.env.NODE_ENV === "production" ? {
+  name: "1jmexzm",
+  styles: "0%{background-position:100% 50%;}to{background-position:0 50%;}"
+} : {
+  name: "1jmexzm",
+  styles: "0%{background-position:100% 50%;}to{background-position:0 50%;}",
+  toString: _EMOTION_STRINGIFIED_CSS_ERROR__
+});
+export function makeItemStyles() {
+  var skeletonItem = skeleton.item;
+  return /*#__PURE__*/css("&>div{background:", skeletonItem.bgColor, ";}.skeleton-item-text{width:100%;height:16px;border-radius:4px;margin-top:16px;}.skeleton-item-avator{width:40px;height:40px;border-radius:50%;}.skeleton-item-image{display:flex;justify-content:center;align-items:center;width:200px;height:200px;&>svg{width:48px;height:48px;fill:", skeletonItem.bgColor, ";}}.skeleton-item-button{width:64px;background:", skeletonItem.bgColor, ";}.skeleton-item-input{width:160px;background:", skeletonItem.bgColor, ";}");
+}

package/es/components/table/cell.js

@@ -20,6 +20,11 @@ export var TableCell = /*#__PURE__*/function (_Component) {
         isSame = false;
         break;
       }
+
+      if (key === 'props' && nextProps.props.$blocks) {
+        isSame = false;
+        break;
+      }
     }
 
     if (!isSame) {

package/es/components/table/index.spec.js

@@ -988,56 +988,80 @@ describe('Table', function () {
         }
       }
     }, _callee21);
-  }))); // it('should render dropdown in header of fixed table correctly in Vue', async () => {
-  // const Demo = {
-  // template: `
-  // <Table :data="data" style="width: 800px;">
-  // <TableColumn key="a" width="300" fixed="left" />
-  // <TableColumn key="b" width="300">
-  // <template slot="title">
-  // <Dropdown trigger="click" :container="dom => dom.parentElement.closest('.k-table')">
-  // <Icon class="ion-ios-arrow-down" style="margin-left: 100px;" />
-  // <DropdownMenu>
-  // <DropdownItem>1</DropdownItem>
-  // <DropdownItem>2</DropdownItem>
-  // <DropdownItem>3</DropdownItem>
-  // </DropdownMenu>
-  // </Dropdown>
-  // </template>
-  // </TableColumn>
-  // <TableColumn key="c" width="300" fixed="right" />
-  // </Table>
-  // `,
-  // components: {
-  // Table,
-  // TableColumn,
-  // Dropdown,
-  // DropdownMenu,
-  // DropdownItem,
-  // Icon,
-  // },
-  // data() {
-  // return {
-  // data: [
-  // {a: 1, b: 1, c: 1},
-  // {a: 2, b: 2, c: 2},
-  // ],
-  // };
-  // }
-  // };
-  // const container = document.createElement('div');
-  // document.body.appendChild(container);
-  // const app = new Vue({
-  // render: h => h('Demo'),
-  // components: {
-  // Demo
-  // }
-  // }).$mount(container);
-  // // should show the first dropdown menu
-  // app.$el.querySelector('.k-icon').click();
-  // const dropdownMenu = app.$el.querySelectorAll('.k-dropdown-menu')[0];
-  // expect(dropdownMenu.style.display).to.eql('');
-  // app.$destroy();
-  // document.body.removeChild(app.$el);
-  // });
+  })));
+  it('should update children in TableCell', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee22() {
+    var update, Test, Demo, _mount24, instance, element;
+
+    return _regeneratorRuntime.wrap(function _callee22$(_context25) {
+      while (1) {
+        switch (_context25.prev = _context25.next) {
+          case 0:
+            update = sinon.spy();
+
+            Test = /*#__PURE__*/function (_Component3) {
+              _inheritsLoose(Test, _Component3);
+
+              function Test() {
+                return _Component3.apply(this, arguments) || this;
+              }
+
+              var _proto = Test.prototype;
+
+              _proto.beforeUpdate = function beforeUpdate() {
+                update();
+              };
+
+              return Test;
+            }(Component);
+
+            Test.template = "<div>test</div>";
+
+            Demo = /*#__PURE__*/function (_Component4) {
+              _inheritsLoose(Demo, _Component4);
+
+              function Demo() {
+                var _context24;
+
+                var _this3;
+
+                for (var _len3 = arguments.length, args = new Array(_len3), _key3 = 0; _key3 < _len3; _key3++) {
+                  args[_key3] = arguments[_key3];
+                }
+
+                _this3 = _Component4.call.apply(_Component4, _concatInstanceProperty(_context24 = [this]).call(_context24, args)) || this;
+                _this3.Table = Table;
+                _this3.TableColumn = TableColumn;
+                _this3.Test = Test;
+                return _this3;
+              }
+
+              Demo.defaults = function defaults() {
+                return {
+                  data: [{
+                    a: 1
+                  }, {
+                    a: 2
+                  }]
+                };
+              };
+
+              return Demo;
+            }(Component);
+
+            Demo.template = "\n                const {Table, TableColumn, Test} = this;\n                <Table data={this.get('data')} ref=\"table\">\n                    <TableColumn key=\"a\">\n                        <b:template>\n                            <Test />\n                        </b:template>\n                    </TableColumn>\n                </Table>\n            ";
+            _mount24 = mount(Demo), instance = _mount24[0], element = _mount24[1];
+            element.querySelector('tbody tr').click();
+            _context25.next = 9;
+            return wait();
+
+          case 9:
+            expect(update.callCount).to.eql(1);
+
+          case 10:
+          case "end":
+            return _context25.stop();
+        }
+      }
+    }, _callee22);
+  })));
 });

package/es/components/table/useChecked.js

@@ -211,7 +211,7 @@ export function useChecked(getEnableKeys, getAllKeys, isDisabledKey, getGrid, lo
 
   instance.on('$change:data', updateAllCheckedStatus);
   instance.on('clickRow', function (data, index, key) {
-    if (instance.get('rowCheckable')) {
+    if (instance.get('rowCheckable') && instance.get('checkType') !== 'none') {
       toggleChecked(key, index);
     }
   });

package/es/components/tree/useFilter.js

@@ -43,10 +43,9 @@ export function useFilter(getNodes, getExpandedKeys) {
   }
 
   function updateFilterUpward(node) {
-    if (!node) return; // should expand the node 
+    if (!node || _filterInstanceProperty(node)) return; // should expand the node 
 
     getExpandedKeys().add(node.key);
-    if (_filterInstanceProperty(node)) return;
     node.filter = true;
     updateFilterUpward(node.parent);
   }

package/es/index.d.ts

@@ -1,5 +1,5 @@
 /*!
- * @king-design v2.0.2
+ * @king-design v2.0.5
  *
  * Copyright (c) Kingsoft Cloud
  * Released under the MIT License
@@ -38,6 +38,7 @@ export * from './components/radio';
 export * from './components/rate';
 export * from './components/scrollSelect';
 export * from './components/select';
+export * from './components/skeleton';
 export * from './components/slider';
 export * from './components/spin';
 export * from './components/spinner';
@@ -56,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.2";
+export declare const version = "2.0.5";

package/es/index.js

@@ -1,5 +1,5 @@
 /*!
- * @king-design v2.0.2
+ * @king-design v2.0.5
  *
  * Copyright (c) Kingsoft Cloud
  * Released under the MIT License
@@ -40,6 +40,7 @@ export * from './components/radio';
 export * from './components/rate';
 export * from './components/scrollSelect';
 export * from './components/select';
+export * from './components/skeleton';
 export * from './components/slider';
 export * from './components/spin';
 export * from './components/spinner';
@@ -58,5 +59,5 @@ export * from './components/tree';
 export * from './components/treeSelect';
 export * from './components/upload';
 export * from './components/wave';
-export var version = '2.0.2';
+export var version = '2.0.5';
 /* generate end */

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

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

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

@@ -0,0 +1,46 @@
+import _asyncToGenerator from "@babel/runtime-corejs3/helpers/asyncToGenerator";
+import _regeneratorRuntime from "@babel/runtime-corejs3/regenerator";
+import React from 'react';
+import * as ReactDOM from 'react-dom';
+import { Tooltip, Form, FormItem } from '../../';
+import { getElement, wait, dispatchEvent } from '../../../../test/utils';
+describe('Form', function () {
+  it('should show Tooltip in append slot', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee() {
+    var click, container, trigger;
+    return _regeneratorRuntime.wrap(function _callee$(_context) {
+      while (1) {
+        switch (_context.prev = _context.next) {
+          case 0:
+            click = sinon.spy(function () {
+              return console.log(1);
+            });
+            container = document.createElement('div');
+            document.body.appendChild(container);
+            ReactDOM.render( /*#__PURE__*/React.createElement(Form, null, /*#__PURE__*/React.createElement(FormItem, {
+              label: "\u6D4B\u8BD5",
+              value: "1",
+              slotAppend: /*#__PURE__*/React.createElement(Tooltip, {
+                content: "\u6D4B\u8BD5"
+              }, /*#__PURE__*/React.createElement("i", {
+                className: "k-icon ion-ionic"
+              }))
+            })), container);
+            trigger = container.querySelector('.k-icon');
+            expect(trigger).to.be.exist;
+            dispatchEvent(trigger, 'mouseover');
+            _context.next = 9;
+            return wait();
+
+          case 9:
+            expect(getElement('.k-tooltip-content')).to.be.exist;
+            ReactDOM.unmountComponentAtNode(container);
+            document.body.removeChild(container);
+
+          case 12:
+          case "end":
+            return _context.stop();
+        }
+      }
+    }, _callee);
+  })));
+});

package/es/site/data/components/skeleton/demos/animate/index.d.ts

@@ -0,0 +1,11 @@
+export { default as data } from './index.json';
+import { Component } from 'intact';
+interface Props {
+    showSkeleton?: boolean;
+}
+export default class extends Component<Props> {
+    static template: string | import("intact").Template<any>;
+    static defaults(): {
+        showSkeleton: boolean;
+    };
+}

package/es/site/data/components/skeleton/demos/animate/index.js

@@ -0,0 +1,23 @@
+import _inheritsLoose from "@babel/runtime-corejs3/helpers/inheritsLoose";
+export { default as data } from './index.json';
+import { Component } from 'intact';
+import template from './index.vdt';
+
+var default_1 = /*#__PURE__*/function (_Component) {
+  _inheritsLoose(default_1, _Component);
+
+  function default_1() {
+    return _Component.apply(this, arguments) || this;
+  }
+
+  default_1.defaults = function defaults() {
+    return {
+      showSkeleton: true
+    };
+  };
+
+  return default_1;
+}(Component);
+
+default_1.template = template;
+export { default_1 as default };

package/es/site/data/components/skeleton/demos/animate/react.d.ts

@@ -0,0 +1,11 @@
+import React from 'react';
+interface Props {
+    showSkeleton?: boolean;
+}
+export default class Demo extends React.Component<{}, Props> {
+    state: {
+        showSkeleton: boolean;
+    };
+    render(): JSX.Element;
+}
+export {};

package/es/site/data/components/skeleton/demos/animate/react.js

@@ -0,0 +1,38 @@
+import _inheritsLoose from "@babel/runtime-corejs3/helpers/inheritsLoose";
+import _concatInstanceProperty from "@babel/runtime-corejs3/core-js/instance/concat";
+import React from 'react';
+import { Skeleton } from '@king-design/react';
+
+var Demo = /*#__PURE__*/function (_React$Component) {
+  _inheritsLoose(Demo, _React$Component);
+
+  function Demo() {
+    var _context;
+
+    var _this;
+
+    for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
+      args[_key] = arguments[_key];
+    }
+
+    _this = _React$Component.call.apply(_React$Component, _concatInstanceProperty(_context = [this]).call(_context, args)) || this;
+    _this.state = {
+      showSkeleton: true
+    };
+    return _this;
+  }
+
+  var _proto = Demo.prototype;
+
+  _proto.render = function render() {
+    return /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement(Skeleton, {
+      loading: this.state.showSkeleton,
+      avator: true,
+      animated: true
+    }));
+  };
+
+  return Demo;
+}(React.Component);
+
+export { Demo as default };

package/es/site/data/components/skeleton/demos/avator/index.d.ts

@@ -0,0 +1,11 @@
+export { default as data } from './index.json';
+import { Component } from 'intact';
+interface Props {
+    showSkeleton?: boolean;
+}
+export default class extends Component<Props> {
+    static template: string | import("intact").Template<any>;
+    static defaults(): {
+        showSkeleton: boolean;
+    };
+}

package/es/site/data/components/skeleton/demos/avator/index.js

@@ -0,0 +1,23 @@
+import _inheritsLoose from "@babel/runtime-corejs3/helpers/inheritsLoose";
+export { default as data } from './index.json';
+import { Component } from 'intact';
+import template from './index.vdt';
+
+var default_1 = /*#__PURE__*/function (_Component) {
+  _inheritsLoose(default_1, _Component);
+
+  function default_1() {
+    return _Component.apply(this, arguments) || this;
+  }
+
+  default_1.defaults = function defaults() {
+    return {
+      showSkeleton: true
+    };
+  };
+
+  return default_1;
+}(Component);
+
+default_1.template = template;
+export { default_1 as default };

package/es/site/data/components/skeleton/demos/avator/react.d.ts

@@ -0,0 +1,11 @@
+import React from 'react';
+interface Props {
+    showSkeleton?: boolean;
+}
+export default class Demo extends React.Component<{}, Props> {
+    state: {
+        showSkeleton: boolean;
+    };
+    render(): JSX.Element;
+}
+export {};

package/es/site/data/components/skeleton/demos/avator/react.js

@@ -0,0 +1,37 @@
+import _inheritsLoose from "@babel/runtime-corejs3/helpers/inheritsLoose";
+import _concatInstanceProperty from "@babel/runtime-corejs3/core-js/instance/concat";
+import React from 'react';
+import { Skeleton } from '@king-design/react';
+
+var Demo = /*#__PURE__*/function (_React$Component) {
+  _inheritsLoose(Demo, _React$Component);
+
+  function Demo() {
+    var _context;
+
+    var _this;
+
+    for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
+      args[_key] = arguments[_key];
+    }
+
+    _this = _React$Component.call.apply(_React$Component, _concatInstanceProperty(_context = [this]).call(_context, args)) || this;
+    _this.state = {
+      showSkeleton: true
+    };
+    return _this;
+  }
+
+  var _proto = Demo.prototype;
+
+  _proto.render = function render() {
+    return /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement(Skeleton, {
+      loading: this.state.showSkeleton,
+      avator: true
+    }));
+  };
+
+  return Demo;
+}(React.Component);
+
+export { Demo as default };