@kdcloudjs/kdesign 1.7.45 → 1.7.47
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/CHANGELOG.md +292 -0
- package/dist/kdesign-complete.less +247 -0
- package/dist/kdesign.css +368 -1
- package/dist/kdesign.css.map +1 -1
- package/dist/kdesign.js +865 -237
- package/dist/kdesign.js.map +1 -1
- package/dist/kdesign.min.css +2 -2
- package/dist/kdesign.min.js +10 -10
- package/dist/kdesign.min.js.map +1 -1
- package/es/_utils/usePopper.js +1 -1
- package/es/breadcrumb/breadcrumb.d.ts +7 -0
- package/es/breadcrumb/breadcrumb.js +204 -0
- package/es/breadcrumb/breadcrumbItem.d.ts +4 -0
- package/es/breadcrumb/breadcrumbItem.js +53 -0
- package/es/breadcrumb/index.d.ts +3 -0
- package/es/breadcrumb/index.js +3 -0
- package/es/breadcrumb/interface.d.ts +33 -0
- package/es/breadcrumb/interface.js +2 -0
- package/es/breadcrumb/style/css.js +2 -0
- package/es/breadcrumb/style/index.css +174 -0
- package/es/breadcrumb/style/index.d.ts +2 -0
- package/es/breadcrumb/style/index.js +2 -0
- package/es/breadcrumb/style/index.less +71 -0
- package/es/breadcrumb/style/mixin.less +7 -0
- package/es/breadcrumb/style/token.less +27 -0
- package/es/city-picker/city-picker.js +3 -1
- package/es/config-provider/compDefaultProps.d.ts +11 -0
- package/es/config-provider/compDefaultProps.js +12 -1
- package/es/divider/divider.d.ts +22 -0
- package/es/divider/divider.js +66 -0
- package/es/divider/index.d.ts +3 -0
- package/es/divider/index.js +3 -0
- package/es/divider/style/css.js +2 -0
- package/es/divider/style/index.css +191 -0
- package/es/divider/style/index.d.ts +2 -0
- package/es/divider/style/index.js +2 -0
- package/es/divider/style/index.less +105 -0
- package/es/divider/style/mixin.less +19 -0
- package/es/divider/style/token.less +12 -0
- package/es/index.d.ts +2 -0
- package/es/index.js +3 -1
- package/es/select/select.js +81 -15
- package/es/tree/tree.d.ts +1 -0
- package/es/tree/tree.js +5 -4
- package/es/tree/treeHooks.d.ts +1 -1
- package/es/tree/treeHooks.js +3 -3
- package/es/tree/utils/treeUtils.d.ts +3 -3
- package/es/tree/utils/treeUtils.js +12 -4
- package/lib/_utils/usePopper.js +1 -1
- package/lib/breadcrumb/breadcrumb.d.ts +7 -0
- package/lib/breadcrumb/breadcrumb.js +217 -0
- package/lib/breadcrumb/breadcrumbItem.d.ts +4 -0
- package/lib/breadcrumb/breadcrumbItem.js +66 -0
- package/lib/breadcrumb/index.d.ts +3 -0
- package/lib/breadcrumb/index.js +27 -0
- package/lib/breadcrumb/interface.d.ts +33 -0
- package/lib/breadcrumb/interface.js +9 -0
- package/lib/breadcrumb/style/css.js +4 -0
- package/lib/breadcrumb/style/index.css +174 -0
- package/lib/breadcrumb/style/index.d.ts +2 -0
- package/lib/breadcrumb/style/index.js +4 -0
- package/lib/breadcrumb/style/index.less +71 -0
- package/lib/breadcrumb/style/mixin.less +7 -0
- package/lib/breadcrumb/style/token.less +27 -0
- package/lib/checkbox/group.js +0 -3
- package/lib/city-picker/city-picker.js +3 -1
- package/lib/config-provider/compDefaultProps.d.ts +11 -0
- package/lib/config-provider/compDefaultProps.js +12 -1
- package/lib/date-picker/utils/date-fns.js +1 -5
- package/lib/divider/divider.d.ts +22 -0
- package/lib/divider/divider.js +82 -0
- package/lib/divider/index.d.ts +3 -0
- package/lib/divider/index.js +27 -0
- package/lib/divider/style/css.js +4 -0
- package/lib/divider/style/index.css +191 -0
- package/lib/divider/style/index.d.ts +2 -0
- package/lib/divider/style/index.js +4 -0
- package/lib/divider/style/index.less +105 -0
- package/lib/divider/style/mixin.less +19 -0
- package/lib/divider/style/token.less +12 -0
- package/lib/index.d.ts +2 -0
- package/lib/index.js +14 -0
- package/lib/select/select.js +81 -15
- package/lib/style/components.less +2 -0
- package/lib/tree/tree.d.ts +1 -0
- package/lib/tree/tree.js +5 -4
- package/lib/tree/treeHooks.d.ts +1 -1
- package/lib/tree/treeHooks.js +3 -3
- package/lib/tree/utils/treeUtils.d.ts +3 -3
- package/lib/tree/utils/treeUtils.js +12 -4
- package/package.json +1 -1
|
@@ -15,6 +15,10 @@ var compDefaultProps = {
|
|
|
15
15
|
banner: false,
|
|
16
16
|
bannerOffset: [0, 0]
|
|
17
17
|
},
|
|
18
|
+
Breadcrumb: {
|
|
19
|
+
colorModel: 'emphasize',
|
|
20
|
+
separator: '/'
|
|
21
|
+
},
|
|
18
22
|
Button: {
|
|
19
23
|
type: 'second',
|
|
20
24
|
iconPlace: 'left',
|
|
@@ -119,6 +123,12 @@ var compDefaultProps = {
|
|
|
119
123
|
minuteStep: 1,
|
|
120
124
|
secondStep: 1
|
|
121
125
|
},
|
|
126
|
+
Divider: {
|
|
127
|
+
orientation: 'left',
|
|
128
|
+
orientationMargin: '74px',
|
|
129
|
+
type: 'horizontal',
|
|
130
|
+
borderStyle: 'solid'
|
|
131
|
+
},
|
|
122
132
|
Drawer: {
|
|
123
133
|
closable: true,
|
|
124
134
|
destroyOnClose: false,
|
|
@@ -351,7 +361,8 @@ var compDefaultProps = {
|
|
|
351
361
|
});
|
|
352
362
|
},
|
|
353
363
|
estimatedItemSize: 32,
|
|
354
|
-
expandOnClickNode: true
|
|
364
|
+
expandOnClickNode: true,
|
|
365
|
+
expandOnFilterNode: false
|
|
355
366
|
},
|
|
356
367
|
TreeNode: {},
|
|
357
368
|
ToolTip: {
|
|
@@ -0,0 +1,22 @@
|
|
|
1
|
+
import React, { FunctionComponentElement } from 'react';
|
|
2
|
+
export declare const DividerTypes: ["horizontal", "vertical"];
|
|
3
|
+
export declare type DividerType = typeof DividerTypes[number];
|
|
4
|
+
export declare const DividerOrientations: ["left", "center", "right"];
|
|
5
|
+
export declare type DividerOrientation = typeof DividerOrientations[number];
|
|
6
|
+
export declare const DividerBorderStyles: ["solid", "dashed", "dotted"];
|
|
7
|
+
export declare type DividerBorderStyle = typeof DividerBorderStyles[number];
|
|
8
|
+
export interface IDividerProps {
|
|
9
|
+
style?: Record<string, unknown>;
|
|
10
|
+
className?: string;
|
|
11
|
+
prefixCls?: string;
|
|
12
|
+
children?: React.ReactNode;
|
|
13
|
+
borderStyle?: DividerBorderStyle;
|
|
14
|
+
type?: DividerType;
|
|
15
|
+
orientation?: DividerOrientation;
|
|
16
|
+
orientationMargin?: number | string;
|
|
17
|
+
}
|
|
18
|
+
declare const Divider: {
|
|
19
|
+
(props: IDividerProps): FunctionComponentElement<IDividerProps>;
|
|
20
|
+
displayName: string;
|
|
21
|
+
};
|
|
22
|
+
export default Divider;
|
|
@@ -0,0 +1,66 @@
|
|
|
1
|
+
import _extends from "@babel/runtime-corejs3/helpers/extends";
|
|
2
|
+
import _defineProperty from "@babel/runtime-corejs3/helpers/defineProperty";
|
|
3
|
+
import _Object$getOwnPropertySymbols from "@babel/runtime-corejs3/core-js-stable/object/get-own-property-symbols";
|
|
4
|
+
import _concatInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/concat";
|
|
5
|
+
var __rest = this && this.__rest || function (s, e) {
|
|
6
|
+
var t = {};
|
|
7
|
+
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0) t[p] = s[p];
|
|
8
|
+
if (s != null && typeof _Object$getOwnPropertySymbols === "function") for (var i = 0, p = _Object$getOwnPropertySymbols(s); i < p.length; i++) {
|
|
9
|
+
if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i])) t[p[i]] = s[p[i]];
|
|
10
|
+
}
|
|
11
|
+
return t;
|
|
12
|
+
};
|
|
13
|
+
import React, { useContext, useEffect, useMemo } from 'react';
|
|
14
|
+
import classNames from 'classnames';
|
|
15
|
+
import ConfigContext from '../config-provider/ConfigContext';
|
|
16
|
+
import { getCompProps } from '../_utils';
|
|
17
|
+
import devWarning from '../_utils/devwarning';
|
|
18
|
+
import { tuple } from '../_utils/type';
|
|
19
|
+
export var DividerTypes = tuple('horizontal', 'vertical');
|
|
20
|
+
export var DividerOrientations = tuple('left', 'center', 'right');
|
|
21
|
+
export var DividerBorderStyles = tuple('solid', 'dashed', 'dotted');
|
|
22
|
+
var Divider = function Divider(props) {
|
|
23
|
+
var _context, _classNames;
|
|
24
|
+
var _useContext = useContext(ConfigContext),
|
|
25
|
+
getPrefixCls = _useContext.getPrefixCls,
|
|
26
|
+
prefixCls = _useContext.prefixCls,
|
|
27
|
+
userDefaultProps = _useContext.compDefaultProps;
|
|
28
|
+
var dividerProps = getCompProps('Divider', userDefaultProps, props);
|
|
29
|
+
var className = dividerProps.className,
|
|
30
|
+
customPrefixcls = dividerProps.prefixCls,
|
|
31
|
+
children = dividerProps.children,
|
|
32
|
+
type = dividerProps.type,
|
|
33
|
+
orientationMargin = dividerProps.orientationMargin,
|
|
34
|
+
orientation = dividerProps.orientation,
|
|
35
|
+
borderStyle = dividerProps.borderStyle,
|
|
36
|
+
others = __rest(dividerProps, ["className", "prefixCls", "children", "type", "orientationMargin", "orientation", "borderStyle"]);
|
|
37
|
+
var dividerPrefixCls = getPrefixCls(prefixCls, 'divider', customPrefixcls);
|
|
38
|
+
var orientationPrefix = orientation.length > 0 ? "-".concat(orientation) : orientation;
|
|
39
|
+
var hasChildren = !!children;
|
|
40
|
+
var isHorizontal = type === 'horizontal';
|
|
41
|
+
var isVertical = type === 'vertical';
|
|
42
|
+
var optimizedOrientationMargin = useMemo(function () {
|
|
43
|
+
if (/^[0-9]+$/.test(orientationMargin)) {
|
|
44
|
+
return orientationMargin + 'px';
|
|
45
|
+
}
|
|
46
|
+
return '';
|
|
47
|
+
}, [orientationMargin]);
|
|
48
|
+
var dividerClass = classNames(dividerPrefixCls, className, (_classNames = {}, _defineProperty(_classNames, "".concat(dividerPrefixCls, "-with-text"), hasChildren && isHorizontal), _defineProperty(_classNames, _concatInstanceProperty(_context = "".concat(dividerPrefixCls, "-with-text")).call(_context, orientationPrefix), hasChildren && isHorizontal), _defineProperty(_classNames, "".concat(dividerPrefixCls, "-solid"), borderStyle === 'solid'), _defineProperty(_classNames, "".concat(dividerPrefixCls, "-dashed"), borderStyle === 'dashed'), _defineProperty(_classNames, "".concat(dividerPrefixCls, "-dotted"), borderStyle === 'dotted'), _defineProperty(_classNames, "".concat(dividerPrefixCls, "-vertical"), isVertical), _defineProperty(_classNames, "".concat(dividerPrefixCls, "-margin-left"), isHorizontal && orientation === 'left' && optimizedOrientationMargin), _defineProperty(_classNames, "".concat(dividerPrefixCls, "-margin-right"), isHorizontal && orientation === 'right' && optimizedOrientationMargin), _classNames));
|
|
49
|
+
var innerTextClass = classNames("".concat(dividerPrefixCls, "-inner-text"));
|
|
50
|
+
var innerTextStyle = _extends(_extends({}, orientation === 'left' && {
|
|
51
|
+
marginLeft: optimizedOrientationMargin
|
|
52
|
+
}), orientation === 'right' && {
|
|
53
|
+
marginRight: optimizedOrientationMargin
|
|
54
|
+
});
|
|
55
|
+
useEffect(function () {
|
|
56
|
+
devWarning(isVertical && children, 'divider', '`children` not working in `vertical` mode.');
|
|
57
|
+
}, [children, isVertical]);
|
|
58
|
+
return /*#__PURE__*/React.createElement("div", _extends({
|
|
59
|
+
className: dividerClass
|
|
60
|
+
}, others), isHorizontal && hasChildren && /*#__PURE__*/React.createElement("div", {
|
|
61
|
+
className: innerTextClass,
|
|
62
|
+
style: innerTextStyle
|
|
63
|
+
}, children));
|
|
64
|
+
};
|
|
65
|
+
Divider.displayName = 'Divider';
|
|
66
|
+
export default Divider;
|
|
@@ -0,0 +1,191 @@
|
|
|
1
|
+
/* ----------- color ——————---- start */
|
|
2
|
+
/* ----------- color ——————---- end */
|
|
3
|
+
/* ----------- motion ——————---- start */
|
|
4
|
+
/* ----------- motion ——————---- end */
|
|
5
|
+
/* ----------- transition ——————---- start */
|
|
6
|
+
/* ----------- transition ——————---- end */
|
|
7
|
+
/* ----------- font ——————---- start */
|
|
8
|
+
/* ----------- font ——————---- end */
|
|
9
|
+
/* ----------- zIndex ——————---- start */
|
|
10
|
+
/*
|
|
11
|
+
普通组件内部自身层级应设置在0-100间
|
|
12
|
+
*/
|
|
13
|
+
/* ----------- zIndex ——————---- end */
|
|
14
|
+
/* ----------- Button ——————---- start */
|
|
15
|
+
/* ----------- Button ——————---- end */
|
|
16
|
+
/* ----------- Collapse ——————---- start */
|
|
17
|
+
/* ----------- Collapse ——————---- end */
|
|
18
|
+
/* ----------- Card ——————---- start */
|
|
19
|
+
/* ----------- Card ——————---- end */
|
|
20
|
+
/* ----------- Carousel ——————---- start */
|
|
21
|
+
/* ----------- Carousel ——————---- end */
|
|
22
|
+
/* ----------- Cascader ——————---- start */
|
|
23
|
+
/* ----------- Cascader ——————---- end */
|
|
24
|
+
/* ----------- Switch ——————---- start */
|
|
25
|
+
/* ----------- Switch ——————---- end */
|
|
26
|
+
/* ----------- Input ——————---- start */
|
|
27
|
+
/* ----------- Input ——————---- end */
|
|
28
|
+
/* ----------- InputNumber ——————---- start */
|
|
29
|
+
/* ----------- InputNumber ——————---- end */
|
|
30
|
+
/* ----------- checkbox ——————---- start */
|
|
31
|
+
/* ----------- checkbox ——————---- start */
|
|
32
|
+
/* ----------- checkbox ——————---- end */
|
|
33
|
+
/* ----------- Radio ——————---- start */
|
|
34
|
+
/* ----------- Radio ——————---- end */
|
|
35
|
+
/* ----------- icon ——————---- start */
|
|
36
|
+
/* ----------- icon ——————---- end */
|
|
37
|
+
/* ----------- Popconfirm ——————---- start */
|
|
38
|
+
/* ----------- Popconfirm ——————---- end */
|
|
39
|
+
/* ----------- Progress ——————---- start */
|
|
40
|
+
/* ----------- Progress ——————---- end */
|
|
41
|
+
/* ----------- Pagination ——————---- start */
|
|
42
|
+
/* ----------- Pagination ——————---- end */
|
|
43
|
+
/* ----------- Timeline ——————---- start */
|
|
44
|
+
/* ----------- Timeline ——————---- end */
|
|
45
|
+
/* ----------- Tabs ——————---- start */
|
|
46
|
+
/* ----------- Tabs ——————---- end */
|
|
47
|
+
/* ----------- Select ——————---- start */
|
|
48
|
+
/* ----------- Select ——————---- end */
|
|
49
|
+
/* ----------- Rate ——————---- start */
|
|
50
|
+
/* ----------- Rate ——————---- end */
|
|
51
|
+
/* ----------- Dropdown ——————---- start */
|
|
52
|
+
/* ----------- Dropdown ——————---- end */
|
|
53
|
+
/* ----------- Tooltip ——————---- start */
|
|
54
|
+
/* ----------- Tooltip ——————---- end */
|
|
55
|
+
/* ----------- Transfer ——————---- start */
|
|
56
|
+
/* ----------- Transfer ——————---- end */
|
|
57
|
+
/* ----------- DatePicker ——————---- start */
|
|
58
|
+
/* ----------- DatePicker ——————---- end */
|
|
59
|
+
/* ----------- ColorPicker ——————---- start */
|
|
60
|
+
/* ----------- ColorPicker ——————---- end */
|
|
61
|
+
/* ----------- Tree ——————---- start */
|
|
62
|
+
/* ----------- Tree ——————---- end */
|
|
63
|
+
/* ----------- Alert ——————---- start */
|
|
64
|
+
/* ----------- Alert ——————---- end */
|
|
65
|
+
/* ----------- Split-Panel ——————---- start */
|
|
66
|
+
/* ----------- Split-Panel ——————---- end */
|
|
67
|
+
/* ----------- Modal ——————---- start */
|
|
68
|
+
/* ----------- Modal ——————---- end */
|
|
69
|
+
/* ----------- Steps ——————---- start */
|
|
70
|
+
/* ----------- Steps ——————---- end */
|
|
71
|
+
/* ----------- Form ——————---- start */
|
|
72
|
+
/* ----------- Form ——————---- end */
|
|
73
|
+
/* ----------- Tag ——————---- start */
|
|
74
|
+
/* ----------- Tag ——————---- end */
|
|
75
|
+
/* ----------- Menu ——————---- start */
|
|
76
|
+
/* ----------- Menu ——————---- end */
|
|
77
|
+
/* ----------- notice ——————---- start */
|
|
78
|
+
/* ----------- message ——————---- end */
|
|
79
|
+
/* ----------- Spin ——————---- start */
|
|
80
|
+
/* ----------- Spin ——————---- end */
|
|
81
|
+
/* ----------- Spin ——————---- start */
|
|
82
|
+
/* ----------- Spin ——————---- end */
|
|
83
|
+
/* ----------- Layout ——————---- start */
|
|
84
|
+
/* ----------- Layout ——————---- end */
|
|
85
|
+
/* ----------- Typography ——————---- start */
|
|
86
|
+
/* ----------- Typography ——————---- start */
|
|
87
|
+
/* ----------- Search ——————---- start */
|
|
88
|
+
/* ----------- Search ——————---- start */
|
|
89
|
+
/* ----------- Badge ——————---- start */
|
|
90
|
+
/* ----------- Badge ——————---- end */
|
|
91
|
+
/* ----------- Anchor ——————---- start */
|
|
92
|
+
/* ----------- Anchor ——————---- end */
|
|
93
|
+
/* ----------- Avatar ——————---- start */
|
|
94
|
+
/* ----------- Avatar ——————---- end */
|
|
95
|
+
/* ----------- AdvancedSelector ——————---- start */
|
|
96
|
+
/* ----------- AdvancedSelector ——————---- end */
|
|
97
|
+
/* ----------- motion ——————---- start */
|
|
98
|
+
/* ----------- motion ——————---- end */
|
|
99
|
+
/* ----------- transition ——————---- start */
|
|
100
|
+
/* ----------- transition ——————---- end */
|
|
101
|
+
/* ----------- zIndex ——————---- start */
|
|
102
|
+
/*
|
|
103
|
+
普通组件内部自身层级应设置在0-100间
|
|
104
|
+
*/
|
|
105
|
+
/* ----------- zIndex ——————---- end */
|
|
106
|
+
.kd-divider {
|
|
107
|
+
color: var(--kd-c-divider-color-text, var(--kd-g-color-text-primary, #212121));
|
|
108
|
+
font-size: var(--kd-c-divider-font-size, var(--kd-g-font-size-small, 12px));
|
|
109
|
+
width: 900px;
|
|
110
|
+
padding: var(--kd-c-divider-spacing-padding-horizontal, 0px);
|
|
111
|
+
-webkit-border-before: 1px solid var(--kd-g-color-border-strong, #d9d9d9);
|
|
112
|
+
border-block-start: 1px solid var(--kd-g-color-border-strong, #d9d9d9);
|
|
113
|
+
}
|
|
114
|
+
.kd-divider-vertical {
|
|
115
|
+
display: inline-block;
|
|
116
|
+
-webkit-border-start: 1px solid var(--kd-g-color-border-strong, #d9d9d9);
|
|
117
|
+
border-inline-start: 1px solid var(--kd-g-color-border-strong, #d9d9d9);
|
|
118
|
+
width: 0;
|
|
119
|
+
height: 1em;
|
|
120
|
+
}
|
|
121
|
+
.kd-divider-solid {
|
|
122
|
+
border-block-start-style: solid;
|
|
123
|
+
border-inline-start-style: solid;
|
|
124
|
+
}
|
|
125
|
+
.kd-divider-solid .kd-divider-inner-text::before,
|
|
126
|
+
.kd-divider-solid .kd-divider-inner-text::after {
|
|
127
|
+
border-block-start-style: solid !important;
|
|
128
|
+
}
|
|
129
|
+
.kd-divider-dashed {
|
|
130
|
+
border-block-start-style: dashed;
|
|
131
|
+
border-inline-start-style: dashed;
|
|
132
|
+
}
|
|
133
|
+
.kd-divider-dashed .kd-divider-inner-text::before,
|
|
134
|
+
.kd-divider-dashed .kd-divider-inner-text::after {
|
|
135
|
+
border-block-start-style: dashed !important;
|
|
136
|
+
}
|
|
137
|
+
.kd-divider-dotted {
|
|
138
|
+
border-block-start-style: dotted;
|
|
139
|
+
border-inline-start-style: dotted;
|
|
140
|
+
}
|
|
141
|
+
.kd-divider-dotted .kd-divider-inner-text::before,
|
|
142
|
+
.kd-divider-dotted .kd-divider-inner-text::after {
|
|
143
|
+
border-block-start-style: dotted !important;
|
|
144
|
+
}
|
|
145
|
+
.kd-divider-with-text {
|
|
146
|
+
border: unset;
|
|
147
|
+
}
|
|
148
|
+
.kd-divider-with-text .kd-divider-inner-text {
|
|
149
|
+
display: -webkit-box;
|
|
150
|
+
display: -ms-flexbox;
|
|
151
|
+
display: flex;
|
|
152
|
+
-webkit-box-align: center;
|
|
153
|
+
-ms-flex-align: center;
|
|
154
|
+
align-items: center;
|
|
155
|
+
}
|
|
156
|
+
.kd-divider-with-text .kd-divider-inner-text::before {
|
|
157
|
+
content: '';
|
|
158
|
+
width: 74px;
|
|
159
|
+
margin-right: 8px;
|
|
160
|
+
-webkit-border-before: 1px solid var(--kd-g-color-border-strong, #d9d9d9);
|
|
161
|
+
border-block-start: 1px solid var(--kd-g-color-border-strong, #d9d9d9);
|
|
162
|
+
}
|
|
163
|
+
.kd-divider-with-text .kd-divider-inner-text::after {
|
|
164
|
+
content: '';
|
|
165
|
+
width: calc(100% - 74px);
|
|
166
|
+
margin-left: 8px;
|
|
167
|
+
-webkit-border-before: 1px solid var(--kd-g-color-border-strong, #d9d9d9);
|
|
168
|
+
border-block-start: 1px solid var(--kd-g-color-border-strong, #d9d9d9);
|
|
169
|
+
}
|
|
170
|
+
.kd-divider-with-text-center .kd-divider-inner-text::before,
|
|
171
|
+
.kd-divider-with-text-center .kd-divider-inner-text::after {
|
|
172
|
+
width: 50%;
|
|
173
|
+
}
|
|
174
|
+
.kd-divider-with-text-right .kd-divider-inner-text::before {
|
|
175
|
+
width: calc(100% - 74px);
|
|
176
|
+
}
|
|
177
|
+
.kd-divider-with-text-right .kd-divider-inner-text::after {
|
|
178
|
+
width: 74px;
|
|
179
|
+
}
|
|
180
|
+
.kd-divider-margin-left .kd-divider-inner-text::before {
|
|
181
|
+
width: 0;
|
|
182
|
+
}
|
|
183
|
+
.kd-divider-margin-left .kd-divider-inner-text::after {
|
|
184
|
+
width: 100%;
|
|
185
|
+
}
|
|
186
|
+
.kd-divider-margin-right .kd-divider-inner-text::before {
|
|
187
|
+
width: 100%;
|
|
188
|
+
}
|
|
189
|
+
.kd-divider-margin-right .kd-divider-inner-text::after {
|
|
190
|
+
width: 0;
|
|
191
|
+
}
|
|
@@ -0,0 +1,105 @@
|
|
|
1
|
+
@import '../../style/themes/index';
|
|
2
|
+
@import './mixin.less';
|
|
3
|
+
@divider-prefix-cls: ~'@{kd-prefix}-divider';
|
|
4
|
+
|
|
5
|
+
.@{divider-prefix-cls} {
|
|
6
|
+
.divider;
|
|
7
|
+
|
|
8
|
+
width: 900px;
|
|
9
|
+
padding: @divider-spacing-padding-horizontal;
|
|
10
|
+
border-block-start: 1px solid @color-border-strong;
|
|
11
|
+
|
|
12
|
+
&-vertical {
|
|
13
|
+
display: inline-block;
|
|
14
|
+
border-inline-start: 1px solid @color-border-strong;
|
|
15
|
+
width: 0;
|
|
16
|
+
height: 1em;
|
|
17
|
+
}
|
|
18
|
+
|
|
19
|
+
&-solid {
|
|
20
|
+
.borderStyle(solid)
|
|
21
|
+
}
|
|
22
|
+
|
|
23
|
+
&-dashed {
|
|
24
|
+
.borderStyle(dashed)
|
|
25
|
+
}
|
|
26
|
+
|
|
27
|
+
&-dotted {
|
|
28
|
+
.borderStyle(dotted)
|
|
29
|
+
}
|
|
30
|
+
|
|
31
|
+
&-with-text {
|
|
32
|
+
border: unset;
|
|
33
|
+
|
|
34
|
+
.@{divider-prefix-cls}-inner-text {
|
|
35
|
+
display: flex;
|
|
36
|
+
align-items: center;
|
|
37
|
+
|
|
38
|
+
&::before {
|
|
39
|
+
content: '';
|
|
40
|
+
width: 74px;
|
|
41
|
+
margin-right: 8px;
|
|
42
|
+
border-block-start: 1px solid @color-border-strong;
|
|
43
|
+
}
|
|
44
|
+
|
|
45
|
+
&::after {
|
|
46
|
+
content: '';
|
|
47
|
+
width: calc(100% - 74px);
|
|
48
|
+
margin-left: 8px;
|
|
49
|
+
border-block-start: 1px solid @color-border-strong;
|
|
50
|
+
}
|
|
51
|
+
}
|
|
52
|
+
}
|
|
53
|
+
|
|
54
|
+
&-with-text-center {
|
|
55
|
+
.@{divider-prefix-cls}-inner-text {
|
|
56
|
+
|
|
57
|
+
&::before,
|
|
58
|
+
&::after {
|
|
59
|
+
width: 50%;
|
|
60
|
+
}
|
|
61
|
+
}
|
|
62
|
+
}
|
|
63
|
+
|
|
64
|
+
&-with-text-right {
|
|
65
|
+
.@{divider-prefix-cls}-inner-text {
|
|
66
|
+
|
|
67
|
+
&::before {
|
|
68
|
+
width: calc(100% - 74px);
|
|
69
|
+
|
|
70
|
+
}
|
|
71
|
+
|
|
72
|
+
&::after {
|
|
73
|
+
width: 74px;
|
|
74
|
+
}
|
|
75
|
+
}
|
|
76
|
+
}
|
|
77
|
+
|
|
78
|
+
&-margin-left {
|
|
79
|
+
.@{divider-prefix-cls}-inner-text {
|
|
80
|
+
|
|
81
|
+
&::before {
|
|
82
|
+
width: 0;
|
|
83
|
+
|
|
84
|
+
}
|
|
85
|
+
|
|
86
|
+
&::after {
|
|
87
|
+
width: 100%;
|
|
88
|
+
}
|
|
89
|
+
}
|
|
90
|
+
}
|
|
91
|
+
|
|
92
|
+
&-margin-right {
|
|
93
|
+
.@{divider-prefix-cls}-inner-text {
|
|
94
|
+
|
|
95
|
+
&::before {
|
|
96
|
+
width: 100%;
|
|
97
|
+
|
|
98
|
+
}
|
|
99
|
+
|
|
100
|
+
&::after {
|
|
101
|
+
width: 0;
|
|
102
|
+
}
|
|
103
|
+
}
|
|
104
|
+
}
|
|
105
|
+
}
|
|
@@ -0,0 +1,19 @@
|
|
|
1
|
+
@import './token.less';
|
|
2
|
+
|
|
3
|
+
.divider() {
|
|
4
|
+
color: @divider-color-text;
|
|
5
|
+
font-size: @divider-font-size;
|
|
6
|
+
}
|
|
7
|
+
|
|
8
|
+
.borderStyle(@border-style) {
|
|
9
|
+
border-block-start-style: @border-style;
|
|
10
|
+
border-inline-start-style: @border-style;
|
|
11
|
+
|
|
12
|
+
.@{divider-prefix-cls}-inner-text {
|
|
13
|
+
|
|
14
|
+
&::before,
|
|
15
|
+
&::after {
|
|
16
|
+
border-block-start-style: @border-style !important
|
|
17
|
+
}
|
|
18
|
+
}
|
|
19
|
+
}
|
|
@@ -0,0 +1,12 @@
|
|
|
1
|
+
@import '../../style/themes/token.less';
|
|
2
|
+
|
|
3
|
+
@divider-custom-prefix: ~'--@{kd-prefix}-c-divider';
|
|
4
|
+
|
|
5
|
+
// color
|
|
6
|
+
@divider-color-text: var(~'@{divider-custom-prefix}-color-text', @color-text-primary);
|
|
7
|
+
|
|
8
|
+
// font
|
|
9
|
+
@divider-font-size: var(~'@{divider-custom-prefix}-font-size', @font-size-small);
|
|
10
|
+
|
|
11
|
+
// spacing
|
|
12
|
+
@divider-spacing-padding-horizontal: var(~'@{divider-custom-prefix}-spacing-padding-horizontal', 0px);
|
package/es/index.d.ts
CHANGED
|
@@ -57,3 +57,5 @@ export { default as TreeSelect } from './tree-select';
|
|
|
57
57
|
export { default as ColorPicker } from './color-picker';
|
|
58
58
|
export { default as Clipboard } from './clipboard';
|
|
59
59
|
export { default as QRCode } from './qr-code';
|
|
60
|
+
export { default as Divider } from './divider';
|
|
61
|
+
export { default as Breadcrumb } from './breadcrumb';
|
package/es/index.js
CHANGED
|
@@ -56,4 +56,6 @@ export { default as Link } from './link';
|
|
|
56
56
|
export { default as TreeSelect } from './tree-select';
|
|
57
57
|
export { default as ColorPicker } from './color-picker';
|
|
58
58
|
export { default as Clipboard } from './clipboard';
|
|
59
|
-
export { default as QRCode } from './qr-code';
|
|
59
|
+
export { default as QRCode } from './qr-code';
|
|
60
|
+
export { default as Divider } from './divider';
|
|
61
|
+
export { default as Breadcrumb } from './breadcrumb';
|
package/es/select/select.js
CHANGED
|
@@ -1,12 +1,20 @@
|
|
|
1
|
+
import _sliceInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/slice";
|
|
2
|
+
import _Array$from from "@babel/runtime-corejs3/core-js-stable/array/from";
|
|
3
|
+
import _Symbol from "@babel/runtime-corejs3/core-js-stable/symbol";
|
|
4
|
+
import _getIteratorMethod from "@babel/runtime-corejs3/core-js/get-iterator-method";
|
|
1
5
|
import _extends from "@babel/runtime-corejs3/helpers/extends";
|
|
2
6
|
import _toConsumableArray from "@babel/runtime-corejs3/helpers/toConsumableArray";
|
|
3
7
|
import _defineProperty from "@babel/runtime-corejs3/helpers/defineProperty";
|
|
4
8
|
import _slicedToArray from "@babel/runtime-corejs3/helpers/slicedToArray";
|
|
9
|
+
function _createForOfIteratorHelper(o, allowArrayLike) { var it = typeof _Symbol !== "undefined" && _getIteratorMethod(o) || o["@@iterator"]; if (!it) { if (Array.isArray(o) || (it = _unsupportedIterableToArray(o)) || allowArrayLike && o && typeof o.length === "number") { if (it) o = it; var i = 0; var F = function F() {}; return { s: F, n: function n() { if (i >= o.length) return { done: true }; return { done: false, value: o[i++] }; }, e: function e(_e) { throw _e; }, f: F }; } throw new TypeError("Invalid attempt to iterate non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); } var normalCompletion = true, didErr = false, err; return { s: function s() { it = it.call(o); }, n: function n() { var step = it.next(); normalCompletion = step.done; return step; }, e: function e(_e2) { didErr = true; err = _e2; }, f: function f() { try { if (!normalCompletion && it.return != null) it.return(); } finally { if (didErr) throw err; } } }; }
|
|
10
|
+
function _unsupportedIterableToArray(o, minLen) { var _context6; if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = _sliceInstanceProperty(_context6 = Object.prototype.toString.call(o)).call(_context6, 8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return _Array$from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
|
|
11
|
+
function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) arr2[i] = arr[i]; return arr2; }
|
|
5
12
|
import _concatInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/concat";
|
|
6
13
|
import _mapInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/map";
|
|
7
14
|
import _findInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/find";
|
|
8
15
|
import _includesInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/includes";
|
|
9
16
|
import _spliceInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/splice";
|
|
17
|
+
import _Set from "@babel/runtime-corejs3/core-js-stable/set";
|
|
10
18
|
import _findIndexInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/find-index";
|
|
11
19
|
import React, { useContext, useRef, useEffect, useState, useCallback, useLayoutEffect, useMemo, useImperativeHandle } from 'react';
|
|
12
20
|
import { useMergedState } from '../_utils/hooks';
|
|
@@ -327,7 +335,7 @@ var InternalSelect = function InternalSelect(props, ref) {
|
|
|
327
335
|
onDeselect && onDeselect(key); // 下拉项取消选中时调用,参数为选中项的value,多选模式下生效
|
|
328
336
|
}
|
|
329
337
|
} else {
|
|
330
|
-
|
|
338
|
+
handleVisibleChange(false);
|
|
331
339
|
initValue !== key && onChange && onChange(labelInValue ? {
|
|
332
340
|
value: key,
|
|
333
341
|
label: label
|
|
@@ -343,7 +351,7 @@ var InternalSelect = function InternalSelect(props, ref) {
|
|
|
343
351
|
setSingleVal(getOptionLabel(obj) || key);
|
|
344
352
|
multipleRef.current.selectedVal = key;
|
|
345
353
|
setInitValue(key);
|
|
346
|
-
|
|
354
|
+
handleVisibleChange(false);
|
|
347
355
|
initValue !== key && onChange && onChange(labelInValue ? {
|
|
348
356
|
value: key,
|
|
349
357
|
label: label
|
|
@@ -376,14 +384,39 @@ var InternalSelect = function InternalSelect(props, ref) {
|
|
|
376
384
|
setSearchValue('');
|
|
377
385
|
onSelect && onSelect(key); // 下拉项被选中时调用,参数为选中项value或key
|
|
378
386
|
};
|
|
387
|
+
|
|
388
|
+
var removeIntersection = function removeIntersection(selectedItems, filteredItems) {
|
|
389
|
+
var filteredValues = new _Set(_mapInstanceProperty(filteredItems).call(filteredItems, function (item) {
|
|
390
|
+
var _a;
|
|
391
|
+
return item.value || ((_a = item.props) === null || _a === void 0 ? void 0 : _a.value);
|
|
392
|
+
}));
|
|
393
|
+
var filteredSelectedItems = [];
|
|
394
|
+
var filteredSelectedValues = [];
|
|
395
|
+
var _iterator = _createForOfIteratorHelper(selectedItems),
|
|
396
|
+
_step;
|
|
397
|
+
try {
|
|
398
|
+
for (_iterator.s(); !(_step = _iterator.n()).done;) {
|
|
399
|
+
var item = _step.value;
|
|
400
|
+
if (!filteredValues.has(item.value)) {
|
|
401
|
+
filteredSelectedItems.push(item);
|
|
402
|
+
filteredSelectedValues.push(item.value);
|
|
403
|
+
}
|
|
404
|
+
}
|
|
405
|
+
} catch (err) {
|
|
406
|
+
_iterator.e(err);
|
|
407
|
+
} finally {
|
|
408
|
+
_iterator.f();
|
|
409
|
+
}
|
|
410
|
+
return [filteredSelectedValues, filteredSelectedItems];
|
|
411
|
+
};
|
|
379
412
|
// 多选模式下选中所有 与清除所有 (可以优化)
|
|
380
|
-
var handleSelectAll = function handleSelectAll() {
|
|
413
|
+
var handleSelectAll = function handleSelectAll(checked) {
|
|
381
414
|
var _multipleRef$current3 = multipleRef.current,
|
|
382
415
|
selectedVal = _multipleRef$current3.selectedVal,
|
|
383
416
|
selectMulOpts = _multipleRef$current3.selectMulOpts;
|
|
384
417
|
var newSelectedVal = _toConsumableArray(selectedVal);
|
|
385
418
|
var newSelectMulOpts = _toConsumableArray(selectMulOpts);
|
|
386
|
-
if (
|
|
419
|
+
if (!checked) {
|
|
387
420
|
_mapInstanceProperty(filledOptions).call(filledOptions, function (child) {
|
|
388
421
|
var _ref = child.props || child,
|
|
389
422
|
value = _ref.value;
|
|
@@ -402,23 +435,26 @@ var InternalSelect = function InternalSelect(props, ref) {
|
|
|
402
435
|
setSearchValue('');
|
|
403
436
|
}
|
|
404
437
|
} else {
|
|
405
|
-
|
|
406
|
-
|
|
438
|
+
;
|
|
439
|
+
var _removeIntersection = removeIntersection(newSelectMulOpts, filledOptions);
|
|
440
|
+
var _removeIntersection2 = _slicedToArray(_removeIntersection, 2);
|
|
441
|
+
newSelectedVal = _removeIntersection2[0];
|
|
442
|
+
newSelectMulOpts = _removeIntersection2[1];
|
|
407
443
|
if (typeof value === 'undefined') {
|
|
408
|
-
multipleRef.current.selectedVal =
|
|
409
|
-
multipleRef.current.selectMulOpts =
|
|
410
|
-
setMulOptions(
|
|
444
|
+
multipleRef.current.selectedVal = newSelectedVal;
|
|
445
|
+
multipleRef.current.selectMulOpts = newSelectMulOpts;
|
|
446
|
+
setMulOptions(_toConsumableArray(newSelectMulOpts));
|
|
411
447
|
}
|
|
412
448
|
}
|
|
413
449
|
onChange && onChange(labelInValue ? newSelectMulOpts : newSelectedVal, newSelectMulOpts);
|
|
414
450
|
};
|
|
415
451
|
// 输入框变化搜索内容
|
|
416
|
-
var handleSearchChange =
|
|
452
|
+
var handleSearchChange = function handleSearchChange(event) {
|
|
417
453
|
var val = event.currentTarget.value;
|
|
418
|
-
|
|
454
|
+
handleVisibleChange(true);
|
|
419
455
|
setSearchValue(val);
|
|
420
456
|
onSearch === null || onSearch === void 0 ? void 0 : onSearch(val);
|
|
421
|
-
}
|
|
457
|
+
};
|
|
422
458
|
// 清除搜索内容
|
|
423
459
|
var handleClear = useCallback(function () {
|
|
424
460
|
if (searchRef.current) {
|
|
@@ -528,6 +564,33 @@ var InternalSelect = function InternalSelect(props, ref) {
|
|
|
528
564
|
}
|
|
529
565
|
}, [isShowSearch, autoFocus, disabled]);
|
|
530
566
|
var optionsListRef = React.useRef(null);
|
|
567
|
+
var getCheckedState = function getCheckedState(selectedItems, filteredItems) {
|
|
568
|
+
var _a;
|
|
569
|
+
var valuesSet = new _Set(_mapInstanceProperty(selectedItems).call(selectedItems, function (item) {
|
|
570
|
+
return item.value;
|
|
571
|
+
}));
|
|
572
|
+
var number = 0;
|
|
573
|
+
var _iterator2 = _createForOfIteratorHelper(filteredItems),
|
|
574
|
+
_step2;
|
|
575
|
+
try {
|
|
576
|
+
for (_iterator2.s(); !(_step2 = _iterator2.n()).done;) {
|
|
577
|
+
var item = _step2.value;
|
|
578
|
+
if (valuesSet.has(item.value || ((_a = item.props) === null || _a === void 0 ? void 0 : _a.value))) {
|
|
579
|
+
number += 1;
|
|
580
|
+
}
|
|
581
|
+
}
|
|
582
|
+
} catch (err) {
|
|
583
|
+
_iterator2.e(err);
|
|
584
|
+
} finally {
|
|
585
|
+
_iterator2.f();
|
|
586
|
+
}
|
|
587
|
+
var checked = number > 0 && number === filteredItems.length;
|
|
588
|
+
var indeterminate = number > 0 && number < filteredItems.length;
|
|
589
|
+
return {
|
|
590
|
+
checked: checked,
|
|
591
|
+
indeterminate: indeterminate
|
|
592
|
+
};
|
|
593
|
+
};
|
|
531
594
|
// 渲染下拉列表框
|
|
532
595
|
var renderContent = function renderContent() {
|
|
533
596
|
var dropdownRender = selectProps.dropdownRender,
|
|
@@ -567,8 +630,9 @@ var InternalSelect = function InternalSelect(props, ref) {
|
|
|
567
630
|
height: '30px',
|
|
568
631
|
background: 'none'
|
|
569
632
|
};
|
|
570
|
-
var
|
|
571
|
-
|
|
633
|
+
var _getCheckedState = getCheckedState(mulOptions, filledOptions),
|
|
634
|
+
checked = _getCheckedState.checked,
|
|
635
|
+
indeterminate = _getCheckedState.indeterminate;
|
|
572
636
|
return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("div", {
|
|
573
637
|
className: dropDownCls,
|
|
574
638
|
style: dropdownStyle,
|
|
@@ -579,7 +643,9 @@ var InternalSelect = function InternalSelect(props, ref) {
|
|
|
579
643
|
style: checkboxStyle,
|
|
580
644
|
checked: checked,
|
|
581
645
|
indeterminate: indeterminate,
|
|
582
|
-
onChange:
|
|
646
|
+
onChange: function onChange() {
|
|
647
|
+
return handleSelectAll(checked);
|
|
648
|
+
}
|
|
583
649
|
}, selectLangMsg === null || selectLangMsg === void 0 ? void 0 : selectLangMsg.selectAll), /*#__PURE__*/React.createElement("span", {
|
|
584
650
|
className: "".concat(selectPrefixCls, "-multiple-footer-hadSelected")
|
|
585
651
|
}, locale.getLangMsg('Select', 'seleted', {
|