@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.
- package/__tests__/__snapshots__/React Demos.md +10 -10
- package/__tests__/components/form.spec.tsx +37 -0
- package/components/cascader/index.spec.js +88 -0
- package/components/cascader/index.vdt.js +4 -4
- package/components/cascader/useLabel.js +8 -12
- package/components/datepicker/index.vdt.js +10 -5
- package/components/diagram/index.d.ts +1 -1
- package/components/dropdown/dropdown.js +8 -7
- package/components/form/index.spec.js +2 -4
- package/components/menu/index.spec.js +13 -6
- package/components/menu/item.d.ts +0 -1
- package/components/menu/item.js +6 -4
- package/components/menu/item.vdt.js +4 -4
- package/components/menu/menu.d.ts +3 -0
- package/components/menu/menu.js +4 -0
- package/components/menu/useExpanded.d.ts +1 -4
- package/components/menu/useHighlight.d.ts +5 -8
- package/components/menu/useHighlight.js +44 -33
- package/components/portal.js +1 -1
- package/components/skeleton/index.d.ts +2 -0
- package/components/skeleton/index.js +2 -0
- package/components/skeleton/item.d.ts +16 -0
- package/components/skeleton/item.js +26 -0
- package/components/skeleton/item.vdt.js +35 -0
- package/components/skeleton/skeleton.d.ts +17 -0
- package/components/skeleton/skeleton.js +30 -0
- package/components/skeleton/skeleton.vdt.js +37 -0
- package/components/skeleton/style.d.ts +6 -0
- package/components/skeleton/style.js +35 -0
- package/components/steps/context.d.ts +2 -2
- package/components/tooltip/index.spec.js +4 -1
- package/components/transfer/styles.js +2 -6
- package/components/tree/useFilter.js +1 -2
- package/i18n/en-US.d.ts +1 -0
- package/i18n/en-US.js +1 -0
- package/index.d.ts +3 -2
- package/index.js +3 -2
- package/package.json +2 -2
- package/components/cascader/index.d.ts +0 -34
- package/components/datepicker/index.d.ts +0 -63
- package/components/select/select.d.ts +0 -33
- package/components/timepicker/panelPicker.d.ts +0 -54
- 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,
|
|
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
|
-
|
|
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(
|
|
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(
|
|
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(
|
|
72
|
+
expect(instance.get('selectedKey')).to.eql('3-1'); // clear
|
|
73
73
|
|
|
74
|
-
|
|
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
|
}
|
package/components/menu/item.js
CHANGED
|
@@ -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
|
|
36
|
-
isHighlighted =
|
|
37
|
-
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
|
}
|
package/components/menu/menu.js
CHANGED
|
@@ -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
|
-
|
|
3
|
-
export declare function useHighlight(
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
|
|
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 {
|
|
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
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
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
|
-
|
|
13
|
-
|
|
25
|
+
while (parentItem) {
|
|
26
|
+
items.push(parentItem);
|
|
27
|
+
parentItem = parentItem.parentMenuItem;
|
|
28
|
+
}
|
|
14
29
|
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
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
|
-
|
|
20
|
-
|
|
21
|
-
var parentItem = parentMenuItem;
|
|
42
|
+
for (var i = 0; i < menuItems.length; i++) {
|
|
43
|
+
var _ret = _loop(i);
|
|
22
44
|
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
parentItem = parentItem.parentMenuItem;
|
|
45
|
+
if (_ret === "continue") continue;
|
|
46
|
+
if (typeof _ret === "object") return _ret.v;
|
|
26
47
|
}
|
|
27
48
|
|
|
28
|
-
|
|
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(
|
|
52
|
+
function isHighlighted(key) {
|
|
53
|
+
return inArray(highlightedKeys.value, key);
|
|
42
54
|
}
|
|
43
55
|
|
|
44
|
-
function select() {
|
|
45
|
-
|
|
56
|
+
function select(key) {
|
|
57
|
+
instance.set('selectedKey', key);
|
|
46
58
|
}
|
|
47
59
|
|
|
48
|
-
function isSelected() {
|
|
49
|
-
return
|
|
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
|
};
|
package/components/portal.js
CHANGED
|
@@ -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,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("
|
|
3
|
-
Consumer: import("
|
|
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
|
-
|
|
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: '
|
|
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, ";
|
|
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
package/i18n/en-US.js
CHANGED
package/index.d.ts
CHANGED
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
/*!
|
|
2
|
-
* @king-design v2.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.
|
|
60
|
+
export declare const version = "2.0.3";
|
|
60
61
|
|
|
61
62
|
|
|
62
63
|
export {normalize} from 'intact-react';
|