@king-design/react 2.0.0 → 2.0.3

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (43) hide show
  1. package/__tests__/__snapshots__/React Demos.md +10 -10
  2. package/__tests__/components/form.spec.tsx +37 -0
  3. package/components/cascader/index.spec.js +88 -0
  4. package/components/cascader/index.vdt.js +4 -4
  5. package/components/cascader/useLabel.js +8 -12
  6. package/components/datepicker/index.vdt.js +10 -5
  7. package/components/diagram/index.d.ts +1 -1
  8. package/components/dropdown/dropdown.js +8 -7
  9. package/components/form/index.spec.js +2 -4
  10. package/components/menu/index.spec.js +13 -6
  11. package/components/menu/item.d.ts +0 -1
  12. package/components/menu/item.js +6 -4
  13. package/components/menu/item.vdt.js +4 -4
  14. package/components/menu/menu.d.ts +3 -0
  15. package/components/menu/menu.js +4 -0
  16. package/components/menu/useExpanded.d.ts +1 -4
  17. package/components/menu/useHighlight.d.ts +5 -8
  18. package/components/menu/useHighlight.js +44 -33
  19. package/components/portal.js +1 -1
  20. package/components/skeleton/index.d.ts +2 -0
  21. package/components/skeleton/index.js +2 -0
  22. package/components/skeleton/item.d.ts +16 -0
  23. package/components/skeleton/item.js +26 -0
  24. package/components/skeleton/item.vdt.js +35 -0
  25. package/components/skeleton/skeleton.d.ts +17 -0
  26. package/components/skeleton/skeleton.js +30 -0
  27. package/components/skeleton/skeleton.vdt.js +37 -0
  28. package/components/skeleton/style.d.ts +6 -0
  29. package/components/skeleton/style.js +35 -0
  30. package/components/steps/context.d.ts +2 -2
  31. package/components/tooltip/index.spec.js +4 -1
  32. package/components/transfer/styles.js +2 -6
  33. package/components/tree/useFilter.js +1 -2
  34. package/i18n/en-US.d.ts +1 -0
  35. package/i18n/en-US.js +1 -0
  36. package/index.d.ts +3 -2
  37. package/index.js +3 -2
  38. package/package.json +2 -2
  39. package/components/cascader/index.d.ts +0 -34
  40. package/components/datepicker/index.d.ts +0 -63
  41. package/components/select/select.d.ts +0 -33
  42. package/components/timepicker/panelPicker.d.ts +0 -54
  43. package/components/treeSelect/index.d.ts +0 -27
@@ -39,14 +39,14 @@ describe('Menu', function () {
39
39
  }, _callee);
40
40
  })));
41
41
  it('select', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee2() {
42
- var _mount2, instance, element, menu, _element$querySelecto, title, disabledTitle, subTitle;
42
+ var _mount2, instance, element, _element$querySelecto, title, disabledTitle, subTitle;
43
43
 
44
44
  return _regeneratorRuntime.wrap(function _callee2$(_context2) {
45
45
  while (1) {
46
46
  switch (_context2.prev = _context2.next) {
47
47
  case 0:
48
48
  _mount2 = mount(CollapseDemo), instance = _mount2[0], element = _mount2[1];
49
- menu = instance.refs.__test;
49
+ expect(element.innerHTML).to.matchSnapshot();
50
50
  _element$querySelecto = element.querySelectorAll('.k-menu-title'), title = _element$querySelecto[0], disabledTitle = _element$querySelecto[1];
51
51
  title.click();
52
52
  _context2.next = 6;
@@ -54,14 +54,14 @@ describe('Menu', function () {
54
54
 
55
55
  case 6:
56
56
  expect(element.outerHTML).to.matchSnapshot();
57
- expect(menu.get('selectedKey')).to.eql('1');
57
+ expect(instance.get('selectedKey')).to.eql('1');
58
58
  disabledTitle.click();
59
59
  _context2.next = 11;
60
60
  return wait();
61
61
 
62
62
  case 11:
63
63
  expect(element.outerHTML).to.matchSnapshot();
64
- expect(menu.get('selectedKey')).to.eql('1');
64
+ expect(instance.get('selectedKey')).to.eql('1');
65
65
  subTitle = element.querySelector('.k-expanded .k-menu .k-menu-title');
66
66
  subTitle.click();
67
67
  _context2.next = 17;
@@ -69,9 +69,16 @@ describe('Menu', function () {
69
69
 
70
70
  case 17:
71
71
  expect(element.outerHTML).to.matchSnapshot();
72
- expect(menu.get('selectedKey')).to.eql('3-1');
72
+ expect(instance.get('selectedKey')).to.eql('3-1'); // clear
73
73
 
74
- case 19:
74
+ instance.set('selectedKey', '');
75
+ _context2.next = 22;
76
+ return wait();
77
+
78
+ case 22:
79
+ expect(element.querySelector('.k-highlighted')).to.be.null;
80
+
81
+ case 23:
75
82
  case "end":
76
83
  return _context2.stop();
77
84
  }
@@ -18,7 +18,6 @@ export declare class MenuItem extends Component<MenuItemProps, MenuItemEvents> {
18
18
  parentMenu: Menu<Key>;
19
19
  parentMenuItem: MenuItem | null;
20
20
  private expanded;
21
- private highlight;
22
21
  private dropdown;
23
22
  private router;
24
23
  init(): void;
@@ -5,10 +5,11 @@ import { Component, inject, provide } from 'intact-react';
5
5
  import { ROOT_MENU, MENU } from './menu';
6
6
  import template from './item.vdt';
7
7
  import { bind } from '../utils';
8
- import { useHighlight } from './useHighlight';
9
8
  import { useExpanded } from './useExpanded';
10
9
  import { useDropdown } from './useDropdown';
11
10
  import { useRouter, navigate } from '../../hooks/useRouter';
11
+ import { useRecordItem } from '../../hooks/useRecordComponent';
12
+ import { MENU_RECORD_KEY } from './useHighlight';
12
13
  var typeDefs = {
13
14
  key: {
14
15
  type: [String, Number],
@@ -36,7 +37,6 @@ export var MenuItem = /*#__PURE__*/function (_Component) {
36
37
  _this.parentMenu = inject(MENU);
37
38
  _this.parentMenuItem = inject(MENU_ITEM, null);
38
39
  _this.expanded = useExpanded(_this.rootMenu, _this.parentMenu);
39
- _this.highlight = useHighlight(_this.rootMenu, _this.parentMenuItem);
40
40
  _this.dropdown = useDropdown(_this.rootMenu, _this.parentMenu);
41
41
  _this.router = useRouter();
42
42
  return _this;
@@ -46,19 +46,21 @@ export var MenuItem = /*#__PURE__*/function (_Component) {
46
46
 
47
47
  _proto.init = function init() {
48
48
  provide(MENU_ITEM, this);
49
+ useRecordItem(MENU_RECORD_KEY);
49
50
  };
50
51
 
51
52
  _proto.onClick = function onClick(hasSubMenu, e) {
52
53
  var _this$get = this.get(),
53
54
  disabled = _this$get.disabled,
54
- to = _this$get.to;
55
+ to = _this$get.to,
56
+ key = _this$get.key;
55
57
 
56
58
  if (disabled) return;
57
59
 
58
60
  if (hasSubMenu) {
59
61
  this.expanded.toggle();
60
62
  } else {
61
- this.highlight.select();
63
+ this.rootMenu.highlight.select(key);
62
64
  }
63
65
 
64
66
  this.trigger('click', e);
@@ -32,9 +32,9 @@ export default function ($props, $blocks, $__proto__) {
32
32
  disabled = _this$get.disabled,
33
33
  dot = _this$get.dot;
34
34
 
35
- var _this$highlight = this.highlight,
36
- isHighlighted = _this$highlight.isHighlighted,
37
- isSelected = _this$highlight.isSelected;
35
+ var _rootMenu$highlight = rootMenu.highlight,
36
+ isHighlighted = _rootMenu$highlight.isHighlighted,
37
+ isSelected = _rootMenu$highlight.isSelected;
38
38
  var isExpandedKey = this.expanded.isExpanded;
39
39
  var isExpanded = isExpandedKey(key);
40
40
 
@@ -50,7 +50,7 @@ export default function ($props, $blocks, $__proto__) {
50
50
 
51
51
  var classNameObj = (_classNameObj = {
52
52
  'k-menu-item': true
53
- }, _classNameObj[className] = className, _classNameObj['k-expanded'] = isExpanded, _classNameObj['k-disabled'] = disabled, _classNameObj['k-active'] = isSelected(), _classNameObj['k-highlighted'] = isHighlighted(), _classNameObj[makeItemStyles()] = true, _classNameObj);
53
+ }, _classNameObj[className] = className, _classNameObj['k-expanded'] = isExpanded, _classNameObj['k-disabled'] = disabled, _classNameObj['k-active'] = isSelected(key), _classNameObj['k-highlighted'] = isHighlighted(key), _classNameObj[makeItemStyles()] = true, _classNameObj);
54
54
  var showDot = isTopItem && !iconVNode && isNullOrUndefined(dot) ? rootDot : dot;
55
55
 
56
56
  var title = function title(children) {
@@ -1,4 +1,5 @@
1
1
  import { Component, TypeDefs, Key } from 'intact-react';
2
+ import { useHighlight } from './useHighlight';
2
3
  export interface MenuProps<K extends Key = Key> {
3
4
  expandedKeys?: K[];
4
5
  selectedKey?: K;
@@ -22,5 +23,7 @@ export declare class Menu<K extends Key = Key> extends Component<MenuProps<K>, M
22
23
  static defaults: () => Partial<MenuProps<Key>>;
23
24
  rootMenu: Menu<Key> | null;
24
25
  parentMenu: Menu<Key> | null;
26
+ subExpandedKeys?: Set<K>;
27
+ highlight?: ReturnType<typeof useHighlight>;
25
28
  init(): void;
26
29
  }
@@ -2,6 +2,7 @@ import _inheritsLoose from "@babel/runtime-corejs3/helpers/inheritsLoose";
2
2
  import _concatInstanceProperty from "@babel/runtime-corejs3/core-js/instance/concat";
3
3
  import { Component, provide, inject } from 'intact-react';
4
4
  import template from './menu.vdt';
5
+ import { useHighlight } from './useHighlight';
5
6
  var typeDefs = {
6
7
  expandedKeys: Array,
7
8
  selectedKey: [String, Number],
@@ -39,6 +40,8 @@ export var Menu = /*#__PURE__*/function (_Component) {
39
40
  _this = _Component.call.apply(_Component, _concatInstanceProperty(_context = [this]).call(_context, args)) || this;
40
41
  _this.rootMenu = inject(ROOT_MENU, null);
41
42
  _this.parentMenu = inject(MENU, null);
43
+ _this.subExpandedKeys = void 0;
44
+ _this.highlight = void 0;
42
45
  return _this;
43
46
  }
44
47
 
@@ -49,6 +52,7 @@ export var Menu = /*#__PURE__*/function (_Component) {
49
52
 
50
53
  if (!this.rootMenu) {
51
54
  provide(ROOT_MENU, this);
55
+ this.highlight = useHighlight();
52
56
  }
53
57
  };
54
58
 
@@ -1,8 +1,5 @@
1
- import { Key } from 'intact-react';
2
1
  import type { Menu } from './';
3
- export declare function useExpanded(rootMenu: Menu, parentMenu: Menu & {
4
- subExpandedKeys?: Set<Key>;
5
- }): {
2
+ export declare function useExpanded(rootMenu: Menu, parentMenu: Menu): {
6
3
  isExpanded: () => boolean;
7
4
  expand: () => void;
8
5
  shrink: () => void;
@@ -1,10 +1,7 @@
1
1
  import { Key } from 'intact-react';
2
- import type { Menu, MenuItem } from './';
3
- export declare function useHighlight(rootMenu: Menu & {
4
- highlightedKeys?: Key[];
5
- }, parentMenuItem: MenuItem | null): {
6
- isHighlighted: () => boolean;
7
- updateStatus: (v: Key | undefined) => void;
8
- select: () => void;
9
- isSelected: () => boolean;
2
+ export declare const MENU_RECORD_KEY = "MenuKeys";
3
+ export declare function useHighlight(): {
4
+ isHighlighted: (key: Key) => boolean;
5
+ select: (key: Key) => void;
6
+ isSelected: (key: Key) => boolean;
10
7
  };
@@ -2,56 +2,67 @@ import _Set from "@babel/runtime-corejs3/core-js/set";
2
2
  import _mapInstanceProperty from "@babel/runtime-corejs3/core-js/instance/map";
3
3
  import _Array$from from "@babel/runtime-corejs3/core-js/array/from";
4
4
  import { useInstance } from 'intact-react';
5
- import { inArray } from '../table/useChecked'; // import {isEqualArray} from '../utils';
5
+ import { useRecordParent } from '../../hooks/useRecordComponent';
6
+ import { inArray } from '../table/useChecked';
7
+ import { useState } from '../../hooks/useState';
8
+ export var MENU_RECORD_KEY = 'MenuKeys';
9
+ export function useHighlight() {
10
+ var instance = useInstance();
11
+ var menuItems = useRecordParent(MENU_RECORD_KEY);
12
+ var highlightedKeys = useState([]);
13
+ instance.watch('selectedKey', updateStatus, {
14
+ presented: true
15
+ });
6
16
 
7
- export function useHighlight(rootMenu, parentMenuItem) {
8
- var instance = useInstance(); // we can not watch selectedKey on before initializing rootMenu
9
- // because rootMenu has initialized
10
- // so call updateStatus here
17
+ function updateStatus(newValue) {
18
+ var _loop = function _loop(i) {
19
+ var menuItem = menuItems[i];
20
+ var key = menuItem.get('key');
21
+ if (newValue !== key) return "continue";
22
+ var items = [];
23
+ var parentItem = menuItem.parentMenuItem;
11
24
 
12
- updateStatus(rootMenu.get('selectedKey'));
13
- rootMenu.watch('selectedKey', updateStatus);
25
+ while (parentItem) {
26
+ items.push(parentItem);
27
+ parentItem = parentItem.parentMenuItem;
28
+ }
14
29
 
15
- function updateStatus(v) {
16
- var _instance$get = instance.get(),
17
- key = _instance$get.key;
30
+ var expandedKeys = new _Set(instance.get('expandedKeys'));
31
+ highlightedKeys.set(_mapInstanceProperty(items).call(items, function (item) {
32
+ var key = item.get('key');
33
+ expandedKeys.add(key);
34
+ return key;
35
+ }));
36
+ instance.set('expandedKeys', _Array$from(expandedKeys));
37
+ return {
38
+ v: void 0
39
+ };
40
+ };
18
41
 
19
- if (v !== key) return;
20
- var items = [];
21
- var parentItem = parentMenuItem;
42
+ for (var i = 0; i < menuItems.length; i++) {
43
+ var _ret = _loop(i);
22
44
 
23
- while (parentItem) {
24
- items.push(parentItem);
25
- parentItem = parentItem.parentMenuItem;
45
+ if (_ret === "continue") continue;
46
+ if (typeof _ret === "object") return _ret.v;
26
47
  }
27
48
 
28
- var expandedKeys = new _Set(rootMenu.get('expandedKeys'));
29
-
30
- var highlightedKeys = _mapInstanceProperty(items).call(items, function (item) {
31
- var key = item.get('key');
32
- expandedKeys.add(key);
33
- return key;
34
- });
35
-
36
- rootMenu.highlightedKeys = highlightedKeys;
37
- rootMenu.set('expandedKeys', _Array$from(expandedKeys));
49
+ highlightedKeys.set([]);
38
50
  }
39
51
 
40
- function isHighlighted() {
41
- return inArray(rootMenu.highlightedKeys, instance.get('key'));
52
+ function isHighlighted(key) {
53
+ return inArray(highlightedKeys.value, key);
42
54
  }
43
55
 
44
- function select() {
45
- rootMenu.set('selectedKey', instance.get('key'));
56
+ function select(key) {
57
+ instance.set('selectedKey', key);
46
58
  }
47
59
 
48
- function isSelected() {
49
- return rootMenu.get('selectedKey') === instance.get('key');
60
+ function isSelected(key) {
61
+ return instance.get('selectedKey') === key;
50
62
  }
51
63
 
52
64
  return {
53
65
  isHighlighted: isHighlighted,
54
- updateStatus: updateStatus,
55
66
  select: select,
56
67
  isSelected: isSelected
57
68
  };
@@ -81,7 +81,7 @@ export var Portal = /*#__PURE__*/function (_Component) {
81
81
  }
82
82
  } else {
83
83
  mountedQueue.push(function () {
84
- parentDom = _this2.$lastInput.dom.parentElement;
84
+ var parentDom = _this2.$lastInput.dom.parentElement;
85
85
 
86
86
  _this2.initContainer(nextProps.container, parentDom, anchor);
87
87
 
@@ -0,0 +1,2 @@
1
+ export * from './skeleton';
2
+ export * from './item';
@@ -0,0 +1,2 @@
1
+ export * from './skeleton';
2
+ export * from './item';
@@ -0,0 +1,16 @@
1
+ import { Component, TypeDefs } from 'intact-react';
2
+ declare type ItemType = 'text' | 'avator' | 'image' | 'button' | 'input';
3
+ export declare const ItemTypeMap: ItemType[];
4
+ export interface SkeletonItemProps {
5
+ type?: ItemType;
6
+ }
7
+ export interface SkeletonItemEvents {
8
+ }
9
+ export interface SkeletonItemBlocks {
10
+ }
11
+ export declare class SkeletonItem extends Component<SkeletonItemProps, SkeletonItemEvents, SkeletonItemBlocks> {
12
+ static template: string | import("intact").Template<any>;
13
+ static typeDefs: Required<TypeDefs<SkeletonItemProps>>;
14
+ static defaults: () => Partial<SkeletonItemProps>;
15
+ }
16
+ export {};
@@ -0,0 +1,26 @@
1
+ import _inheritsLoose from "@babel/runtime-corejs3/helpers/inheritsLoose";
2
+ import { Component } from 'intact-react';
3
+ import template from './item.vdt';
4
+ export var ItemTypeMap = ['text', 'avator', 'image', 'button', 'input'];
5
+ var typeDefs = {
6
+ type: ItemTypeMap
7
+ };
8
+
9
+ var defaults = function defaults() {
10
+ return {
11
+ type: 'text'
12
+ };
13
+ };
14
+
15
+ export var SkeletonItem = /*#__PURE__*/function (_Component) {
16
+ _inheritsLoose(SkeletonItem, _Component);
17
+
18
+ function SkeletonItem() {
19
+ return _Component.apply(this, arguments) || this;
20
+ }
21
+
22
+ return SkeletonItem;
23
+ }(Component);
24
+ SkeletonItem.template = template;
25
+ SkeletonItem.typeDefs = typeDefs;
26
+ SkeletonItem.defaults = defaults;
@@ -0,0 +1,35 @@
1
+ import _extends from "@babel/runtime-corejs3/helpers/extends";
2
+ import { createVNode as _$cv, className as _$cn, createElementVNode as _$ce } from 'intact-react';
3
+ import { makeItemStyles } from './style';
4
+ import { getRestProps } from '../utils';
5
+ var _$tmp0 = {
6
+ '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'
7
+ };
8
+ var _$tmp1 = {
9
+ 'viewBox': '0 0 1024 1024',
10
+ 'xmlns': 'http://www.w3.org/2000/svg'
11
+ };
12
+ export default function ($props, $blocks, $__proto__) {
13
+ var _classNameObj, _ItemklsObj;
14
+
15
+ $blocks || ($blocks = {});
16
+ $props || ($props = {});
17
+ var $this = this;
18
+
19
+ var _this$get = this.get(),
20
+ type = _this$get.type;
21
+
22
+ var classNameObj = (_classNameObj = {
23
+ 'k-skeleton-item': true
24
+ }, _classNameObj[makeItemStyles()] = true, _classNameObj);
25
+ var ItemklsObj = (_ItemklsObj = {
26
+ 'k-skeleton-item-box': true
27
+ }, _ItemklsObj["skeleton-item-" + type] = true, _ItemklsObj);
28
+
29
+ var skeletonItem = _$cv('div', _extends({
30
+ 'className': _$cn(ItemklsObj)
31
+ }, getRestProps(this)), type === 'image' ? _$ce(512, 'svg', _$ce(2, 'path', null, 1, null, _$tmp0), 2, null, _$tmp1) : undefined);
32
+
33
+ return _$ce(2, 'div', skeletonItem, 0, _$cn(classNameObj));
34
+ }
35
+ ;
@@ -0,0 +1,17 @@
1
+ import { Component, TypeDefs } from 'intact-react';
2
+ export interface SkeletonProps {
3
+ loading: boolean;
4
+ animated?: boolean;
5
+ rows?: number;
6
+ avator?: boolean;
7
+ size?: string;
8
+ }
9
+ export interface SkeletonEvents {
10
+ }
11
+ export interface SkeletonBlocks {
12
+ }
13
+ export declare class Skeleton extends Component<SkeletonProps, SkeletonEvents, SkeletonBlocks> {
14
+ static template: string | import("intact").Template<any>;
15
+ static typeDefs: Required<TypeDefs<SkeletonProps>>;
16
+ static defaults: () => Partial<SkeletonProps>;
17
+ }
@@ -0,0 +1,30 @@
1
+ import _inheritsLoose from "@babel/runtime-corejs3/helpers/inheritsLoose";
2
+ import { Component } from 'intact-react';
3
+ import template from './skeleton.vdt';
4
+ var typeDefs = {
5
+ loading: Boolean,
6
+ animated: Boolean,
7
+ rows: Number,
8
+ avator: Boolean,
9
+ size: String
10
+ };
11
+
12
+ var defaults = function defaults() {
13
+ return {
14
+ rows: 2,
15
+ size: 'large'
16
+ };
17
+ };
18
+
19
+ export var Skeleton = /*#__PURE__*/function (_Component) {
20
+ _inheritsLoose(Skeleton, _Component);
21
+
22
+ function Skeleton() {
23
+ return _Component.apply(this, arguments) || this;
24
+ }
25
+
26
+ return Skeleton;
27
+ }(Component);
28
+ Skeleton.template = template;
29
+ Skeleton.typeDefs = typeDefs;
30
+ Skeleton.defaults = defaults;
@@ -0,0 +1,37 @@
1
+ import _fillInstanceProperty from "@babel/runtime-corejs3/core-js/instance/fill";
2
+ import { map as _$ma, createUnknownComponentVNode as _$cc, createElementVNode as _$ce, className as _$cn } from 'intact-react';
3
+ import { SkeletonItem } from './item';
4
+ import { makeStyles, kls } from './style';
5
+ var _$tmp0 = {
6
+ 'type': 'avator'
7
+ };
8
+ export default function ($props, $blocks, $__proto__) {
9
+ var _context, _classNameObj;
10
+
11
+ $blocks || ($blocks = {});
12
+ $props || ($props = {});
13
+ var $this = this;
14
+
15
+ var _this$get = this.get(),
16
+ rows = _this$get.rows,
17
+ avator = _this$get.avator,
18
+ animated = _this$get.animated,
19
+ children = _this$get.children,
20
+ loading = _this$get.loading,
21
+ size = _this$get.size;
22
+
23
+ var targetRows = typeof rows !== 'number' ? 3 : rows < 1 ? 1 : parseInt(rows);
24
+
25
+ var skeletonList = _fillInstanceProperty(_context = Array(targetRows + 2)).call(_context);
26
+
27
+ var skeletonItems = _$ma(skeletonList, function ($value, $key) {
28
+ return _$cc(SkeletonItem);
29
+ }, $this);
30
+
31
+ var classNameObj = (_classNameObj = {
32
+ 'k-skeleton': true,
33
+ 'k-animated': animated
34
+ }, _classNameObj[makeStyles(size)] = true, _classNameObj);
35
+ 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;
36
+ }
37
+ ;
@@ -0,0 +1,6 @@
1
+ import '../../styles/global';
2
+ export declare const kls: (className: string) => string;
3
+ declare type ItemSize = 'default' | 'large' | 'small' | 'mini';
4
+ export declare function makeStyles(size: ItemSize): string;
5
+ export declare function makeItemStyles(): string;
6
+ export {};
@@ -0,0 +1,35 @@
1
+ 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)."; }
2
+
3
+ import { deepDefaults } from '../../styles/utils';
4
+ import { theme, setDefault } from '../../styles/theme';
5
+ import { css, keyframes } from '@emotion/css';
6
+ import '../../styles/global';
7
+ export var kls = function kls(className) {
8
+ return "k-skeleton-" + className;
9
+ };
10
+ var defaults = {
11
+ item: {
12
+ bgColor: '#dcdde0'
13
+ }
14
+ };
15
+ var skeleton;
16
+ setDefault(function () {
17
+ skeleton = deepDefaults(theme, {
18
+ skeleton: defaults
19
+ }).skeleton;
20
+ });
21
+ export function makeStyles(size) {
22
+ 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, ";}");
23
+ }
24
+ var skeletonLoading = /*#__PURE__*/keyframes(process.env.NODE_ENV === "production" ? {
25
+ name: "1jmexzm",
26
+ styles: "0%{background-position:100% 50%;}to{background-position:0 50%;}"
27
+ } : {
28
+ name: "1jmexzm",
29
+ styles: "0%{background-position:100% 50%;}to{background-position:0 50%;}",
30
+ toString: _EMOTION_STRINGIFIED_CSS_ERROR__
31
+ });
32
+ export function makeItemStyles() {
33
+ var skeletonItem = skeleton.item;
34
+ 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, ";}");
35
+ }
@@ -1,4 +1,4 @@
1
1
  export declare const context: {
2
- Provider: import("misstime").ComponentConstructor<import('intact-react').Component<import("../context").ProviderProps<any>, {}, {}, {}>>;
3
- Consumer: import("misstime").ComponentConstructor<import("intact").Component<import("../context").ConsumerProps<any>, {}, {}, {}>>;
2
+ Provider: import("vdt").ComponentConstructor<import('intact-react').Component<import("../context").ProviderProps<any>, {}, {}, {}>>;
3
+ Consumer: import("vdt").ComponentConstructor<import("intact").Component<import("../context").ConsumerProps<any>, {}, {}, {}>>;
4
4
  };
@@ -83,7 +83,10 @@ describe('Tooltip', function () {
83
83
  };
84
84
 
85
85
  eql = function eql(a, b) {
86
- return expect(Math.floor(a)).to.eql(Math.floor(b));
86
+ a = Math.floor(a);
87
+ b = Math.floor(b); // Don't be entangled with the difference of 1 to 2 pixels
88
+
89
+ expect(a >= b - 1 && a <= b + 1).to.be.true;
87
90
  };
88
91
 
89
92
  instance.set('position', 'left');
@@ -45,11 +45,7 @@ var defaults = {
45
45
 
46
46
  bgColor: '#fff',
47
47
  hoverBgColor: 'transparent',
48
- padding: '5px 16px',
49
-
50
- get height() {
51
- return theme.default.height;
52
- },
48
+ padding: '7px 16px',
53
49
 
54
50
  get descColor() {
55
51
  return theme.color.lightBlack;
@@ -67,5 +63,5 @@ setDefault(function () {
67
63
  }).transfer;
68
64
  });
69
65
  export function makeStyles() {
70
- return /*#__PURE__*/css("font-size:", transfer.fontSize, ";.k-transfer-panel,.k-transfer-arrows{display:inline-block;vertical-align:middle;}.k-transfer-panel{width:", transfer.panel.width, ";border:", transfer.panel.border, ";border-radius:", transfer.panel.borderRadius, ";height:", transfer.panel.height, ";display:inline-flex;flex-direction:column;}.k-transfer-title{line-height:", transfer.title.lineHeight, ";background:", transfer.title.bgColor, ";padding:", transfer.title.padding, ";.k-checkbox{color:", transfer.title.color, ";font-size:", transfer.title.fontSize, ";display:block;}}.k-transfer-count{float:right;margin-left:", transfer.title.countGap, ";}.k-transfer-list{overflow:auto;position:relative;flex:1;}.k-transfer-item{color:", transfer.item.color, ";background:", transfer.item.bgColor, ";user-select:none;display:table;width:100%;&:not(.k-disabled):hover{background:", transfer.item.hoverBgColor, ";color:", transfer.item.hoverColor, ";p{color:", transfer.item.hoverColor, ";}}.k-checkbox{padding:", transfer.item.padding, ";display:table-cell;height:", transfer.item.height, ";vertical-align:middle;white-space:nowrap;}p{margin:0;color:", transfer.item.descColor, ";}&.k-disabled{p{color:", theme.color.disabled, ";}}}.k-input{width:auto;margin:", transfer.searchGap, ";}.k-transfer-arrows{.k-btn{display:flex;margin:", transfer.arrow.gap, ";}}");
66
+ return /*#__PURE__*/css("font-size:", transfer.fontSize, ";.k-transfer-panel,.k-transfer-arrows{display:inline-block;vertical-align:middle;}.k-transfer-panel{width:", transfer.panel.width, ";border:", transfer.panel.border, ";border-radius:", transfer.panel.borderRadius, ";height:", transfer.panel.height, ";display:inline-flex;flex-direction:column;}.k-transfer-title{line-height:", transfer.title.lineHeight, ";background:", transfer.title.bgColor, ";padding:", transfer.title.padding, ";.k-checkbox{color:", transfer.title.color, ";font-size:", transfer.title.fontSize, ";}}.k-transfer-count{float:right;margin-left:", transfer.title.countGap, ";}.k-transfer-list{overflow:auto;position:relative;flex:1;}.k-transfer-item{color:", transfer.item.color, ";background:", transfer.item.bgColor, ";user-select:none;width:100%;&:not(.k-disabled):hover{background:", transfer.item.hoverBgColor, ";color:", transfer.item.hoverColor, ";p{color:", transfer.item.hoverColor, ";}}.k-checkbox{padding:", transfer.item.padding, ";display:flex;}p{margin:0;color:", transfer.item.descColor, ";}&.k-disabled{p{color:", theme.color.disabled, ";}}}.k-input{width:auto;margin:", transfer.searchGap, ";}.k-transfer-arrows{.k-btn{display:flex;margin:", transfer.arrow.gap, ";}}");
71
67
  }
@@ -43,10 +43,9 @@ export function useFilter(getNodes, getExpandedKeys) {
43
43
  }
44
44
 
45
45
  function updateFilterUpward(node) {
46
- if (!node) return; // should expand the node
46
+ if (!node || _filterInstanceProperty(node)) return; // should expand the node
47
47
 
48
48
  getExpandedKeys().add(node.key);
49
- if (_filterInstanceProperty(node)) return;
50
49
  node.filter = true;
51
50
  updateFilterUpward(node.parent);
52
51
  }
package/i18n/en-US.d.ts CHANGED
@@ -26,6 +26,7 @@ declare const i18n: {
26
26
  五: string;
27
27
  六: string;
28
28
  '{n}\u5E74': string;
29
+ '{start}\u5E74 - {end}\u5E74': string;
29
30
  今天: string;
30
31
  昨天: string;
31
32
  明天: string;
package/i18n/en-US.js CHANGED
@@ -27,6 +27,7 @@ var i18n = {
27
27
  '五': 'Fri',
28
28
  '六': 'Sat',
29
29
  '{n}年': '{n}',
30
+ '{start}年 - {end}年': '{start} - {end}',
30
31
  '今天': 'Today',
31
32
  '昨天': 'Yesterday',
32
33
  '明天': 'Tomorrow',
package/index.d.ts CHANGED
@@ -1,5 +1,5 @@
1
1
  /*!
2
- * @king-design v2.0.0
2
+ * @king-design v2.0.3
3
3
  *
4
4
  * Copyright (c) Kingsoft Cloud
5
5
  * Released under the MIT License
@@ -38,6 +38,7 @@ export * from './components/radio';
38
38
  export * from './components/rate';
39
39
  export * from './components/scrollSelect';
40
40
  export * from './components/select';
41
+ export * from './components/skeleton';
41
42
  export * from './components/slider';
42
43
  export * from './components/spin';
43
44
  export * from './components/spinner';
@@ -56,7 +57,7 @@ export * from './components/tree';
56
57
  export * from './components/treeSelect';
57
58
  export * from './components/upload';
58
59
  export * from './components/wave';
59
- export declare const version = "2.0.0";
60
+ export declare const version = "2.0.3";
60
61
 
61
62
 
62
63
  export {normalize} from 'intact-react';