@kdcloudjs/kdesign 1.7.39 → 1.7.40
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 +16 -0
- package/dist/kdesign-complete.less +103 -9
- package/dist/kdesign.css +181 -3
- package/dist/kdesign.css.map +1 -1
- package/dist/kdesign.js +1342 -106
- package/dist/kdesign.js.map +1 -1
- package/dist/kdesign.min.css +3 -3
- package/dist/kdesign.min.js +13 -8
- package/dist/kdesign.min.js.map +1 -1
- package/es/alert/style/index.css +4 -2
- package/es/alert/style/index.less +3 -1
- package/es/config-provider/compDefaultProps.d.ts +9 -0
- package/es/config-provider/compDefaultProps.js +10 -1
- package/es/date-picker/context.d.ts +4 -2
- package/es/date-picker/date-picker.d.ts +9 -0
- package/es/date-picker/date-picker.js +4 -2
- package/es/date-picker/panel/month/month.js +14 -9
- package/es/date-picker/panel/quarter/quarter.js +12 -4
- package/es/date-picker/panel/time/time-column.d.ts +2 -0
- package/es/date-picker/panel/time/time-column.js +14 -5
- package/es/date-picker/panel/time/time.js +8 -4
- package/es/date-picker/panel/week/week.js +20 -10
- package/es/date-picker/panel/year/year.js +12 -4
- package/es/date-picker/range-picker.js +11 -4
- package/es/index.d.ts +1 -0
- package/es/index.js +2 -1
- package/es/modal/modal.d.ts +1 -0
- package/es/modal/modal.js +31 -5
- package/es/modal/style/index.css +21 -0
- package/es/modal/style/index.less +25 -9
- package/es/qr-code/index.d.ts +3 -0
- package/es/qr-code/index.js +3 -0
- package/es/qr-code/qr-code.d.ts +42 -0
- package/es/qr-code/qr-code.js +80 -0
- package/es/qr-code/style/css.js +2 -0
- package/es/qr-code/style/index.css +154 -0
- package/es/qr-code/style/index.d.ts +2 -0
- package/es/qr-code/style/index.js +2 -0
- package/es/qr-code/style/index.less +42 -0
- package/es/qr-code/style/mixin.less +6 -0
- package/es/qr-code/style/token.less +24 -0
- package/es/tree/tree.js +2 -2
- package/es/tree/treeHooks.d.ts +1 -1
- package/es/tree/treeHooks.js +2 -2
- package/lib/alert/style/index.css +4 -2
- package/lib/alert/style/index.less +3 -1
- package/lib/config-provider/compDefaultProps.d.ts +9 -0
- package/lib/config-provider/compDefaultProps.js +10 -1
- package/lib/date-picker/context.d.ts +4 -2
- package/lib/date-picker/date-picker.d.ts +9 -0
- package/lib/date-picker/date-picker.js +4 -2
- package/lib/date-picker/panel/month/month.js +14 -9
- package/lib/date-picker/panel/quarter/quarter.js +12 -4
- package/lib/date-picker/panel/time/time-column.d.ts +2 -0
- package/lib/date-picker/panel/time/time-column.js +14 -5
- package/lib/date-picker/panel/time/time.js +8 -4
- package/lib/date-picker/panel/week/week.js +20 -10
- package/lib/date-picker/panel/year/year.js +12 -4
- package/lib/date-picker/range-picker.js +11 -4
- package/lib/index.d.ts +1 -0
- package/lib/index.js +7 -0
- package/lib/modal/modal.d.ts +1 -0
- package/lib/modal/modal.js +31 -5
- package/lib/modal/style/index.css +21 -0
- package/lib/modal/style/index.less +25 -9
- package/lib/qr-code/index.d.ts +3 -0
- package/lib/qr-code/index.js +27 -0
- package/lib/qr-code/qr-code.d.ts +42 -0
- package/lib/qr-code/qr-code.js +96 -0
- package/lib/qr-code/style/css.js +4 -0
- package/lib/qr-code/style/index.css +154 -0
- package/lib/qr-code/style/index.d.ts +2 -0
- package/lib/qr-code/style/index.js +4 -0
- package/lib/qr-code/style/index.less +42 -0
- package/lib/qr-code/style/mixin.less +6 -0
- package/lib/qr-code/style/token.less +24 -0
- package/lib/style/components.less +1 -0
- package/lib/tree/tree.js +2 -2
- package/lib/tree/treeHooks.d.ts +1 -1
- package/lib/tree/treeHooks.js +2 -2
- package/package.json +4 -2
|
@@ -29,15 +29,13 @@
|
|
|
29
29
|
}
|
|
30
30
|
|
|
31
31
|
&-hidden {
|
|
32
|
-
display: none
|
|
32
|
+
display: none;
|
|
33
33
|
}
|
|
34
34
|
}
|
|
35
35
|
&-mask {
|
|
36
36
|
.overlay(@modal-mask-color-background, 0);
|
|
37
37
|
}
|
|
38
|
-
// &-mask + &-container-box {
|
|
39
38
|
|
|
40
|
-
// }
|
|
41
39
|
&-has-container-box {
|
|
42
40
|
position: fixed;
|
|
43
41
|
left: 50%;
|
|
@@ -116,16 +114,34 @@
|
|
|
116
114
|
color: @modal-footer-font-color;
|
|
117
115
|
flex-shrink: 0;
|
|
118
116
|
}
|
|
119
|
-
// each(@modal-footer-type-set, {
|
|
120
|
-
// .@{modal-prefix-cls}-@{key}-footer {
|
|
121
|
-
// justify-content: @value;
|
|
122
|
-
// }
|
|
123
|
-
// });
|
|
124
117
|
}
|
|
125
118
|
|
|
126
119
|
&-margin-btn {
|
|
127
120
|
margin-right: @modal-footer-button-spacing;
|
|
128
121
|
}
|
|
122
|
+
|
|
123
|
+
&-wrapper {
|
|
124
|
+
position: fixed;
|
|
125
|
+
top: 0;
|
|
126
|
+
right: 0;
|
|
127
|
+
bottom: 0;
|
|
128
|
+
left: 0;
|
|
129
|
+
overflow: auto;
|
|
130
|
+
text-align: center;
|
|
131
|
+
|
|
132
|
+
&::before {
|
|
133
|
+
display: inline-block;
|
|
134
|
+
width: 0;
|
|
135
|
+
height: 100%;
|
|
136
|
+
vertical-align: middle;
|
|
137
|
+
content: '';
|
|
138
|
+
}
|
|
139
|
+
}
|
|
140
|
+
&-dialog {
|
|
141
|
+
display: inline-block;
|
|
142
|
+
vertical-align: middle;
|
|
143
|
+
max-width: calc(100vw);
|
|
144
|
+
}
|
|
129
145
|
}
|
|
130
146
|
|
|
131
147
|
.@{modal-prefix-cls}-showline {
|
|
@@ -135,4 +151,4 @@
|
|
|
135
151
|
.@{modal-prefix-cls}-footer {
|
|
136
152
|
border-top: @modal-border-width solid @modal-border-color;
|
|
137
153
|
}
|
|
138
|
-
}
|
|
154
|
+
}
|
|
@@ -0,0 +1,42 @@
|
|
|
1
|
+
import React, { CSSProperties, FunctionComponentElement } from 'react';
|
|
2
|
+
export declare type QRPropsCanvas = QRProps & React.CanvasHTMLAttributes<HTMLCanvasElement>;
|
|
3
|
+
export declare type QRPropsSvg = QRProps & React.SVGAttributes<SVGSVGElement>;
|
|
4
|
+
export declare const QRCodeTypes: ["canvas", "svg"];
|
|
5
|
+
export declare type QRCodeType = typeof QRCodeTypes[number];
|
|
6
|
+
export declare const QRCodeStatus: ["active", "expired", "loading"];
|
|
7
|
+
export declare type QRCodeStatus = typeof QRCodeStatus[number];
|
|
8
|
+
export declare const QRCodeErrorLevels: ["L", "M", "Q", "H"];
|
|
9
|
+
export declare type QRCodeErrorLevel = typeof QRCodeErrorLevels[number];
|
|
10
|
+
interface ImageSettings {
|
|
11
|
+
src: string;
|
|
12
|
+
height: number;
|
|
13
|
+
width: number;
|
|
14
|
+
excavate: boolean;
|
|
15
|
+
x?: number;
|
|
16
|
+
y?: number;
|
|
17
|
+
}
|
|
18
|
+
export interface QRProps {
|
|
19
|
+
value: string;
|
|
20
|
+
type?: QRCodeType;
|
|
21
|
+
size?: number;
|
|
22
|
+
style?: CSSProperties;
|
|
23
|
+
color?: string;
|
|
24
|
+
bgColor?: string;
|
|
25
|
+
bordered?: boolean;
|
|
26
|
+
imageSettings?: ImageSettings;
|
|
27
|
+
}
|
|
28
|
+
export interface QRCodeProps extends QRProps {
|
|
29
|
+
className?: string;
|
|
30
|
+
prefixCls?: string;
|
|
31
|
+
icon?: string;
|
|
32
|
+
iconSize?: number;
|
|
33
|
+
status?: QRCodeStatus;
|
|
34
|
+
errorLevel?: QRCodeErrorLevel;
|
|
35
|
+
children?: React.ReactNode;
|
|
36
|
+
onRefresh?: () => void;
|
|
37
|
+
}
|
|
38
|
+
declare const QRCode: {
|
|
39
|
+
(props: QRCodeProps): FunctionComponentElement<QRCodeProps>;
|
|
40
|
+
displayName: string;
|
|
41
|
+
};
|
|
42
|
+
export default QRCode;
|
|
@@ -0,0 +1,80 @@
|
|
|
1
|
+
import _extends from "@babel/runtime-corejs3/helpers/extends";
|
|
2
|
+
import _defineProperty from "@babel/runtime-corejs3/helpers/defineProperty";
|
|
3
|
+
import React, { useContext } from 'react';
|
|
4
|
+
import classNames from 'classnames';
|
|
5
|
+
import ConfigContext from '../config-provider/ConfigContext';
|
|
6
|
+
import { getCompProps } from '../_utils';
|
|
7
|
+
import { QRCodeCanvas, QRCodeSVG } from 'qrcode.react';
|
|
8
|
+
import Spin from '../spin';
|
|
9
|
+
import Button from '../button';
|
|
10
|
+
import Icon from '../icon';
|
|
11
|
+
import devWarning from '../_utils/devwarning';
|
|
12
|
+
import { tuple } from '../_utils/type';
|
|
13
|
+
export var QRCodeTypes = tuple('canvas', 'svg');
|
|
14
|
+
export var QRCodeStatus = tuple('active', 'expired', 'loading');
|
|
15
|
+
export var QRCodeErrorLevels = tuple('L', 'M', 'Q', 'H');
|
|
16
|
+
var QRCode = function QRCode(props) {
|
|
17
|
+
var _useContext = useContext(ConfigContext),
|
|
18
|
+
getPrefixCls = _useContext.getPrefixCls,
|
|
19
|
+
prefixCls = _useContext.prefixCls,
|
|
20
|
+
userDefaultProps = _useContext.compDefaultProps;
|
|
21
|
+
var qrCodeProps = getCompProps('QRCode', userDefaultProps, props);
|
|
22
|
+
var value = qrCodeProps.value,
|
|
23
|
+
size = qrCodeProps.size,
|
|
24
|
+
status = qrCodeProps.status,
|
|
25
|
+
style = qrCodeProps.style,
|
|
26
|
+
type = qrCodeProps.type,
|
|
27
|
+
errorLevel = qrCodeProps.errorLevel,
|
|
28
|
+
color = qrCodeProps.color,
|
|
29
|
+
onRefresh = qrCodeProps.onRefresh,
|
|
30
|
+
icon = qrCodeProps.icon,
|
|
31
|
+
_qrCodeProps$iconSize = qrCodeProps.iconSize,
|
|
32
|
+
iconSize = _qrCodeProps$iconSize === void 0 ? 24 : _qrCodeProps$iconSize,
|
|
33
|
+
bgColor = qrCodeProps.bgColor,
|
|
34
|
+
_qrCodeProps$bordered = qrCodeProps.bordered,
|
|
35
|
+
bordered = _qrCodeProps$bordered === void 0 ? true : _qrCodeProps$bordered;
|
|
36
|
+
var className = qrCodeProps.className,
|
|
37
|
+
customPrefixcls = qrCodeProps.prefixCls;
|
|
38
|
+
var qrCodePrefixCls = getPrefixCls(prefixCls, 'qrcode', customPrefixcls);
|
|
39
|
+
var qrCodeClass = classNames(qrCodePrefixCls, className, _defineProperty({}, "".concat(qrCodePrefixCls, "-borderless"), !bordered));
|
|
40
|
+
var gap = 8;
|
|
41
|
+
var containerSize = size + gap * 2 + 2;
|
|
42
|
+
devWarning(!value === false, 'QRCode', 'need to receive `value` props');
|
|
43
|
+
devWarning(icon && errorLevel === 'L', 'QRCode', 'ErrorLevel `L` is not recommended to be used with `icon`, for scanning result would be affected by low level.');
|
|
44
|
+
var imageSettings = {
|
|
45
|
+
src: icon,
|
|
46
|
+
x: undefined,
|
|
47
|
+
y: undefined,
|
|
48
|
+
height: iconSize,
|
|
49
|
+
width: iconSize,
|
|
50
|
+
excavate: true
|
|
51
|
+
};
|
|
52
|
+
var codeProps = {
|
|
53
|
+
value: value,
|
|
54
|
+
size: size,
|
|
55
|
+
level: errorLevel,
|
|
56
|
+
fgColor: color,
|
|
57
|
+
imageSettings: icon ? imageSettings : undefined
|
|
58
|
+
};
|
|
59
|
+
return /*#__PURE__*/React.createElement("div", {
|
|
60
|
+
className: qrCodeClass,
|
|
61
|
+
style: _extends(_extends({}, style), {
|
|
62
|
+
width: "".concat(containerSize, "px"),
|
|
63
|
+
height: "".concat(containerSize, "px"),
|
|
64
|
+
backgroundColor: bgColor
|
|
65
|
+
})
|
|
66
|
+
}, status !== 'active' && /*#__PURE__*/React.createElement("div", {
|
|
67
|
+
className: "".concat(qrCodePrefixCls, "-mask")
|
|
68
|
+
}, status === 'loading' && /*#__PURE__*/React.createElement(Spin, null), status === 'expired' && /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("p", {
|
|
69
|
+
className: "".concat(qrCodePrefixCls, "-expired")
|
|
70
|
+
}, "\u4E8C\u7EF4\u7801\u8FC7\u671F"), onRefresh && /*#__PURE__*/React.createElement(Button, {
|
|
71
|
+
icon: /*#__PURE__*/React.createElement(Icon, {
|
|
72
|
+
type: "refresh"
|
|
73
|
+
}),
|
|
74
|
+
type: "text",
|
|
75
|
+
onClick: onRefresh,
|
|
76
|
+
size: "middle"
|
|
77
|
+
}, "\u70B9\u51FB\u5237\u65B0"))), type === 'canvas' ? /*#__PURE__*/React.createElement(QRCodeCanvas, _extends({}, codeProps)) : /*#__PURE__*/React.createElement(QRCodeSVG, _extends({}, codeProps)));
|
|
78
|
+
};
|
|
79
|
+
QRCode.displayName = 'QRCode';
|
|
80
|
+
export default QRCode;
|
|
@@ -0,0 +1,154 @@
|
|
|
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-qrcode {
|
|
107
|
+
position: relative;
|
|
108
|
+
-webkit-box-sizing: border-box;
|
|
109
|
+
box-sizing: border-box;
|
|
110
|
+
display: -webkit-box;
|
|
111
|
+
display: -ms-flexbox;
|
|
112
|
+
display: flex;
|
|
113
|
+
-webkit-box-pack: center;
|
|
114
|
+
-ms-flex-pack: center;
|
|
115
|
+
justify-content: center;
|
|
116
|
+
-webkit-box-align: center;
|
|
117
|
+
-ms-flex-align: center;
|
|
118
|
+
align-items: center;
|
|
119
|
+
margin: 0;
|
|
120
|
+
border-radius: var(--kd-c-qrcode-border-radius, 2px);
|
|
121
|
+
border: var(--kd-c-qrcode-size-border, 1px) solid var(--kd-c-qrcode-color-border, rgba(5, 5, 5, 0.06));
|
|
122
|
+
padding: var(--kd-c-qrcode-spacing-padding-horizontal, 8px);
|
|
123
|
+
font-size: var(--kd-c-qrcode-font-size, 12px);
|
|
124
|
+
list-style: none;
|
|
125
|
+
overflow: hidden;
|
|
126
|
+
}
|
|
127
|
+
.kd-qrcode-expired {
|
|
128
|
+
margin-bottom: var(--kd-c-qrcode-spacing-margin-vertical, 4px);
|
|
129
|
+
}
|
|
130
|
+
.kd-qrcode-mask {
|
|
131
|
+
position: absolute;
|
|
132
|
+
z-index: 10;
|
|
133
|
+
display: -webkit-box;
|
|
134
|
+
display: -ms-flexbox;
|
|
135
|
+
display: flex;
|
|
136
|
+
-webkit-box-orient: vertical;
|
|
137
|
+
-webkit-box-direction: normal;
|
|
138
|
+
-ms-flex-direction: column;
|
|
139
|
+
flex-direction: column;
|
|
140
|
+
-webkit-box-pack: center;
|
|
141
|
+
-ms-flex-pack: center;
|
|
142
|
+
justify-content: center;
|
|
143
|
+
-webkit-box-align: center;
|
|
144
|
+
-ms-flex-align: center;
|
|
145
|
+
align-items: center;
|
|
146
|
+
width: 100%;
|
|
147
|
+
height: 100%;
|
|
148
|
+
color: var(--kd-c-qrcode-color-text, #111111);
|
|
149
|
+
background: var(--kd-c-qrcode-color-background, rgba(255, 255, 255, 0.96));
|
|
150
|
+
text-align: center;
|
|
151
|
+
}
|
|
152
|
+
.kd-qrcode-borderless {
|
|
153
|
+
border: none;
|
|
154
|
+
}
|
|
@@ -0,0 +1,42 @@
|
|
|
1
|
+
@import '../../style/themes/index';
|
|
2
|
+
@import './mixin.less';
|
|
3
|
+
@qrcode-prefix-cls: ~'@{kd-prefix}-qrcode';
|
|
4
|
+
@qrcode-prefix-icon-cls: ~'@{kd-prefix}-icon';
|
|
5
|
+
@--kd-c-spin-page-dot-spin-sizing-square: 30px;
|
|
6
|
+
|
|
7
|
+
.@{qrcode-prefix-cls} {
|
|
8
|
+
.qrcode;
|
|
9
|
+
position: relative;
|
|
10
|
+
box-sizing: border-box;
|
|
11
|
+
display: flex;
|
|
12
|
+
justify-content: center;
|
|
13
|
+
align-items: center;
|
|
14
|
+
margin: 0;
|
|
15
|
+
border-radius: @qrcode-border-radius;
|
|
16
|
+
border: @qrcode-size-boder solid @qrcode-color-border;
|
|
17
|
+
padding: @qrcode-spacing-padding-horizontal;
|
|
18
|
+
font-size: @qrcode-font-size;
|
|
19
|
+
list-style: none;
|
|
20
|
+
overflow: hidden;
|
|
21
|
+
|
|
22
|
+
&-expired{
|
|
23
|
+
margin-bottom: @qrcode-spacing-margin-vertical;
|
|
24
|
+
}
|
|
25
|
+
|
|
26
|
+
&-mask{
|
|
27
|
+
position: absolute;
|
|
28
|
+
z-index: 10;
|
|
29
|
+
display: flex;
|
|
30
|
+
flex-direction: column;
|
|
31
|
+
justify-content: center;
|
|
32
|
+
align-items: center;
|
|
33
|
+
width: 100%;
|
|
34
|
+
height: 100%;
|
|
35
|
+
color: @qrcode-color-text;
|
|
36
|
+
background: @qrcode-color-background;
|
|
37
|
+
text-align: center;
|
|
38
|
+
}
|
|
39
|
+
&-borderless{
|
|
40
|
+
border: none;
|
|
41
|
+
}
|
|
42
|
+
}
|
|
@@ -0,0 +1,24 @@
|
|
|
1
|
+
@import '../../style/themes/token.less';
|
|
2
|
+
@qrcode-custom-prefix: ~'--@{kd-prefix}-c-qrcode';
|
|
3
|
+
// color
|
|
4
|
+
@qrcode-color-text: var(~'@{qrcode-custom-prefix}-color-text', #111111);
|
|
5
|
+
@qrcode-color-border: var(~'@{qrcode-custom-prefix}-color-border',rgba(5, 5, 5, 0.06));
|
|
6
|
+
@qrcode-color-background: var(~'@{qrcode-custom-prefix}-color-background',rgba(255, 255, 255, 0.96));
|
|
7
|
+
// font
|
|
8
|
+
@qrcode-font-size: var(~'@{qrcode-custom-prefix}-font-size', 12px); // 组件级token
|
|
9
|
+
|
|
10
|
+
// line-height
|
|
11
|
+
|
|
12
|
+
// motion
|
|
13
|
+
|
|
14
|
+
// radius
|
|
15
|
+
@qrcode-border-radius: var(~'@{qrcode-custom-prefix}-border-radius', 2px);
|
|
16
|
+
// shadow
|
|
17
|
+
|
|
18
|
+
// sizing
|
|
19
|
+
@qrcode-size-boder: var(~'@{qrcode-custom-prefix}-size-border',1px);
|
|
20
|
+
@qrcode-size-spin: var(--kd-c-spin-page-dot-spin-sizing-square,28px);
|
|
21
|
+
// spacing
|
|
22
|
+
@qrcode-spacing-padding-horizontal: var(~'@{qrcode-custom-prefix}-spacing-padding-horizontal', 8px);
|
|
23
|
+
@qrcode-spacing-margin-vertical: var(~'@{qrcode-custom-prefix}-spacing-margin-vertical',4px);
|
|
24
|
+
// z-index
|
package/es/tree/tree.js
CHANGED
|
@@ -142,7 +142,7 @@ var InternalTree = /*#__PURE__*/React.forwardRef(function (props, ref) {
|
|
|
142
142
|
setSearchStatus('NONE');
|
|
143
143
|
}
|
|
144
144
|
}, [filterValue]);
|
|
145
|
-
var _useExpand = useExpand(flattenAllData, expandedKeysProps, defaultExpandedKeys, defaultExpandAll, defaultExpandRoot, defaultExpandParent, scrollKey, isInit, filterTreeNode, isSearching, keysData, searchStatus),
|
|
145
|
+
var _useExpand = useExpand(flattenAllData, expandedKeysProps, defaultExpandedKeys, defaultExpandAll, defaultExpandRoot, defaultExpandParent, scrollKey, isInit, filterTreeNode, isSearching, keysData, searchStatus, filterValue),
|
|
146
146
|
_useExpand2 = _slicedToArray(_useExpand, 2),
|
|
147
147
|
expandedKeys = _useExpand2[0],
|
|
148
148
|
setExpandedKeys = _useExpand2[1];
|
|
@@ -159,7 +159,7 @@ var InternalTree = /*#__PURE__*/React.forwardRef(function (props, ref) {
|
|
|
159
159
|
setHalfCheckedKeys = _useChecked2[3];
|
|
160
160
|
var filterData = React.useMemo(function () {
|
|
161
161
|
return getFilterData(spreadAttrData, filterTreeNode, isSearching, posData, keysData);
|
|
162
|
-
}, [spreadAttrData, isSearching, posData, keysData]);
|
|
162
|
+
}, [spreadAttrData, isSearching, posData, keysData, filterValue]);
|
|
163
163
|
useEffect(function () {
|
|
164
164
|
var _a, _b;
|
|
165
165
|
if (typeof scrollKey === 'undefined') {
|
package/es/tree/treeHooks.d.ts
CHANGED
|
@@ -4,6 +4,6 @@ export declare const useViewportHeight: (height: number, listRef: React.RefObjec
|
|
|
4
4
|
export declare const useVisibleDataMemo: (virtual: boolean, filterData: TreeNodeData[], viewportHeight: number, estimatedItemSize: number, start: number) => TreeNodeData[][];
|
|
5
5
|
export declare const usePlantomHeightEffect: (plantomRef: React.RefObject<HTMLElement>, filterData: TreeNodeData[], estimatedItemSize: number) => void;
|
|
6
6
|
export declare const useChecked: (checkStrictly: boolean, checkedKeysProps: string[], defaultCheckedKeys: string[], _flattenAllData: any[], _maxLevel: number, checkable: boolean, keysData: KeysDataType) => readonly [string[], string[], React.Dispatch<React.SetStateAction<string[]>>, React.Dispatch<React.SetStateAction<string[]>>];
|
|
7
|
-
export declare const useExpand: (flattenAllData: any[], expandedKeysProps: string[], defaultExpandedKeys: string[], defaultExpandAll: boolean, defaultExpandRoot: boolean, defaultExpandParent: boolean, scrollKey: string, isInit: boolean, filterTreeNode: FunctionConstructor, isSearching: boolean, keysData: KeysDataType, searchStatus: SearchStatus) => readonly [string[], React.Dispatch<React.SetStateAction<string[]>>];
|
|
7
|
+
export declare const useExpand: (flattenAllData: any[], expandedKeysProps: string[], defaultExpandedKeys: string[], defaultExpandAll: boolean, defaultExpandRoot: boolean, defaultExpandParent: boolean, scrollKey: string, isInit: boolean, filterTreeNode: FunctionConstructor, isSearching: boolean, keysData: KeysDataType, searchStatus: SearchStatus, filterValue: string) => readonly [string[], React.Dispatch<React.SetStateAction<string[]>>];
|
|
8
8
|
export declare const useScrollToKey: (scrollKey: string, index: number, estimatedItemSize: number, scrollRef: any, viewportHeight: number, treeNodePrefixCls: string) => void;
|
|
9
9
|
export declare const useSelect: (selectedKeysProps: string[], defaultSelectedKeys: string[]) => readonly [string[], React.Dispatch<React.SetStateAction<string[]>>];
|
package/es/tree/treeHooks.js
CHANGED
|
@@ -59,7 +59,7 @@ export var useChecked = function useChecked(checkStrictly, checkedKeysProps, def
|
|
|
59
59
|
}, [nextHalfCheckedKeys]);
|
|
60
60
|
return [checkedKeys, halfCheckedKeys, setCheckedKeys, setHalfCheckedKeys];
|
|
61
61
|
};
|
|
62
|
-
export var useExpand = function useExpand(flattenAllData, expandedKeysProps, defaultExpandedKeys, defaultExpandAll, defaultExpandRoot, defaultExpandParent, scrollKey, isInit, filterTreeNode, isSearching, keysData, searchStatus) {
|
|
62
|
+
export var useExpand = function useExpand(flattenAllData, expandedKeysProps, defaultExpandedKeys, defaultExpandAll, defaultExpandRoot, defaultExpandParent, scrollKey, isInit, filterTreeNode, isSearching, keysData, searchStatus, filterValue) {
|
|
63
63
|
var expandScrollkeys = [];
|
|
64
64
|
if (scrollKey) {
|
|
65
65
|
var pos = getPos(flattenAllData, scrollKey);
|
|
@@ -74,7 +74,7 @@ export var useExpand = function useExpand(flattenAllData, expandedKeysProps, def
|
|
|
74
74
|
setExpandedKeys = _React$useState8[1];
|
|
75
75
|
React.useEffect(function () {
|
|
76
76
|
setExpandedKeys(initialExpandedKeys);
|
|
77
|
-
}, [flattenAllData, expandedKeysProps, defaultExpandAll, defaultExpandedKeys, defaultExpandRoot, defaultExpandParent, scrollKey, searchStatus]);
|
|
77
|
+
}, [flattenAllData, expandedKeysProps, defaultExpandAll, defaultExpandedKeys, defaultExpandRoot, defaultExpandParent, scrollKey, searchStatus, filterValue]);
|
|
78
78
|
return [expandedKeys, setExpandedKeys];
|
|
79
79
|
};
|
|
80
80
|
export var useScrollToKey = function useScrollToKey(scrollKey, index, estimatedItemSize, scrollRef, viewportHeight, treeNodePrefixCls) {
|
|
@@ -193,11 +193,13 @@
|
|
|
193
193
|
cursor: default;
|
|
194
194
|
}
|
|
195
195
|
.kd-alert-leave {
|
|
196
|
-
-webkit-transition:
|
|
197
|
-
transition:
|
|
196
|
+
-webkit-transition: padding var(--kd-g-duration, 0.3s) cubic-bezier(0.32, 0.94, 0.6, 1), opacity var(--kd-g-duration, 0.3s) cubic-bezier(0.32, 0.94, 0.6, 1), margin var(--kd-g-duration, 0.3s) cubic-bezier(0.32, 0.94, 0.6, 1), height var(--kd-g-duration, 0.3s) cubic-bezier(0.32, 0.94, 0.6, 1), line-height var(--kd-g-duration, 0.3s) cubic-bezier(0.32, 0.94, 0.6, 1);
|
|
197
|
+
transition: padding var(--kd-g-duration, 0.3s) cubic-bezier(0.32, 0.94, 0.6, 1), opacity var(--kd-g-duration, 0.3s) cubic-bezier(0.32, 0.94, 0.6, 1), margin var(--kd-g-duration, 0.3s) cubic-bezier(0.32, 0.94, 0.6, 1), height var(--kd-g-duration, 0.3s) cubic-bezier(0.32, 0.94, 0.6, 1), line-height var(--kd-g-duration, 0.3s) cubic-bezier(0.32, 0.94, 0.6, 1);
|
|
198
198
|
display: -webkit-box;
|
|
199
199
|
display: -ms-flexbox;
|
|
200
200
|
display: flex;
|
|
201
|
+
padding: 0 var(--kd-c-alert-sizing-padding-horizontal, 20px);
|
|
202
|
+
border-width: 0;
|
|
201
203
|
min-height: 0;
|
|
202
204
|
margin: 0 !important;
|
|
203
205
|
overflow: hidden;
|
|
@@ -81,10 +81,12 @@
|
|
|
81
81
|
cursor: default;
|
|
82
82
|
}
|
|
83
83
|
&-leave {
|
|
84
|
-
transition:
|
|
84
|
+
transition: padding @duration-promptly @alert-transition-fn, opacity @duration-promptly @alert-transition-fn,
|
|
85
85
|
margin @duration-promptly @alert-transition-fn, height @duration-promptly @alert-transition-fn,
|
|
86
86
|
line-height @duration-promptly @alert-transition-fn;
|
|
87
87
|
display: flex;
|
|
88
|
+
padding: 0 @alert-padding-horizontal;
|
|
89
|
+
border-width: 0;
|
|
88
90
|
min-height: 0;
|
|
89
91
|
margin: 0 !important;
|
|
90
92
|
overflow: hidden;
|
|
@@ -191,6 +191,7 @@ declare const compDefaultProps: {
|
|
|
191
191
|
cancelButtonProps: {};
|
|
192
192
|
okButtonProps: {};
|
|
193
193
|
showline: boolean;
|
|
194
|
+
overroll: boolean;
|
|
194
195
|
};
|
|
195
196
|
Menu: {
|
|
196
197
|
mode: string;
|
|
@@ -467,5 +468,13 @@ declare const compDefaultProps: {
|
|
|
467
468
|
disabled: boolean;
|
|
468
469
|
size: string;
|
|
469
470
|
};
|
|
471
|
+
QRCode: {
|
|
472
|
+
value: string;
|
|
473
|
+
size: number;
|
|
474
|
+
status: string;
|
|
475
|
+
type: string;
|
|
476
|
+
errorLevel: string;
|
|
477
|
+
color: string;
|
|
478
|
+
};
|
|
470
479
|
};
|
|
471
480
|
export default compDefaultProps;
|
|
@@ -206,7 +206,8 @@ var compDefaultProps = {
|
|
|
206
206
|
draggable: true,
|
|
207
207
|
cancelButtonProps: {},
|
|
208
208
|
okButtonProps: {},
|
|
209
|
-
showline: true
|
|
209
|
+
showline: true,
|
|
210
|
+
overroll: false
|
|
210
211
|
},
|
|
211
212
|
Menu: {
|
|
212
213
|
mode: 'vertical',
|
|
@@ -495,6 +496,14 @@ var compDefaultProps = {
|
|
|
495
496
|
action: 'copy',
|
|
496
497
|
disabled: false,
|
|
497
498
|
size: 'middle'
|
|
499
|
+
},
|
|
500
|
+
QRCode: {
|
|
501
|
+
value: 'https://www.kingdee.design/',
|
|
502
|
+
size: 86,
|
|
503
|
+
status: 'active',
|
|
504
|
+
type: 'canvas',
|
|
505
|
+
errorLevel: 'H',
|
|
506
|
+
color: '#000000'
|
|
498
507
|
}
|
|
499
508
|
};
|
|
500
509
|
var _default = compDefaultProps;
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import * as React from 'react';
|
|
2
2
|
import { DateType, InnerLocale, RangeValue, TimeUnit } from './interface';
|
|
3
|
-
import { IInnerPicker } from './date-picker';
|
|
3
|
+
import { CellRenderProp, IInnerPicker } from './date-picker';
|
|
4
4
|
export declare type ContextOperationRefProps = {
|
|
5
5
|
onKeyDown?: (e: React.KeyboardEvent<HTMLElement>) => boolean;
|
|
6
6
|
onClose?: () => void;
|
|
@@ -13,7 +13,7 @@ export interface SingleContextProps {
|
|
|
13
13
|
dateValue?: DateType | null;
|
|
14
14
|
rangeValue?: RangeValue;
|
|
15
15
|
hoverRangedValue?: RangeValue;
|
|
16
|
-
panelPosition?:
|
|
16
|
+
panelPosition?: 'right' | 'left';
|
|
17
17
|
open?: boolean;
|
|
18
18
|
originHour?: number;
|
|
19
19
|
minute?: number;
|
|
@@ -28,6 +28,8 @@ export interface SingleContextProps {
|
|
|
28
28
|
onDateMouseLeave: (arg?: boolean) => void;
|
|
29
29
|
innerPicker: IInnerPicker;
|
|
30
30
|
setInnerPicker: (p: IInnerPicker) => void;
|
|
31
|
+
cellRender?: CellRenderProp;
|
|
32
|
+
range?: 'start' | 'end';
|
|
31
33
|
}
|
|
32
34
|
declare const Context: React.Context<SingleContextProps>;
|
|
33
35
|
export default Context;
|
|
@@ -2,6 +2,14 @@ import React from 'react';
|
|
|
2
2
|
import { DateType } from './interface';
|
|
3
3
|
import { PickerPanelBaseProps, PickerPanelDateProps, PickerPanelTimeProps } from './date-panel';
|
|
4
4
|
import { BorderType, InputSiteType } from '../input/input';
|
|
5
|
+
export declare type CellRenderSubType = 'hour' | 'minute' | 'second' | '12Hours';
|
|
6
|
+
export declare type CellRenderProp = (current: DateType | number, info: {
|
|
7
|
+
originNode: React.ReactElement;
|
|
8
|
+
panelType: 'time' | 'date' | 'week' | 'month' | 'quarter' | 'year';
|
|
9
|
+
date?: DateType;
|
|
10
|
+
range?: 'start' | 'end';
|
|
11
|
+
subType?: CellRenderSubType;
|
|
12
|
+
}) => React.ReactNode;
|
|
5
13
|
export interface PickerSharedProps extends React.AriaAttributes {
|
|
6
14
|
dropdownClassName?: string;
|
|
7
15
|
popupStyle?: React.CSSProperties;
|
|
@@ -38,6 +46,7 @@ export interface PickerSharedProps extends React.AriaAttributes {
|
|
|
38
46
|
onClick?: React.MouseEventHandler<HTMLDivElement>;
|
|
39
47
|
onContextMenu?: React.MouseEventHandler<HTMLDivElement>;
|
|
40
48
|
status?: 'error';
|
|
49
|
+
cellRender?: CellRenderProp;
|
|
41
50
|
}
|
|
42
51
|
declare type OmitPanelProps<Props> = Omit<Props, 'onChange' | 'hideHeader' | 'pickerValue' | 'onPickerValueChange'>;
|
|
43
52
|
export interface PickerBaseProps extends PickerSharedProps, OmitPanelProps<PickerPanelBaseProps> {
|
|
@@ -93,7 +93,8 @@ var InternalDatePicker = function InternalDatePicker(props, ref) {
|
|
|
93
93
|
onContextMenu = datePickerProps.onContextMenu,
|
|
94
94
|
onClick = datePickerProps.onClick,
|
|
95
95
|
_onOk = datePickerProps.onOk,
|
|
96
|
-
status = datePickerProps.status
|
|
96
|
+
status = datePickerProps.status,
|
|
97
|
+
cellRender = datePickerProps.cellRender;
|
|
97
98
|
var inputDivRefDefault = _react.default.useRef(null);
|
|
98
99
|
var inputDivRef = ref || inputDivRefDefault;
|
|
99
100
|
var popperRefDefault = _react.default.useRef(null);
|
|
@@ -350,7 +351,8 @@ var InternalDatePicker = function InternalDatePicker(props, ref) {
|
|
|
350
351
|
onDateMouseEnter: onEnter,
|
|
351
352
|
onDateMouseLeave: onLeave,
|
|
352
353
|
innerPicker: innerPicker,
|
|
353
|
-
setInnerPicker: setInnerPicker
|
|
354
|
+
setInnerPicker: setInnerPicker,
|
|
355
|
+
cellRender: cellRender
|
|
354
356
|
}
|
|
355
357
|
}, panelNode, (extraFooter || rangesNode || todayNode) && innerPicker === undefined ? /*#__PURE__*/_react.default.createElement("div", {
|
|
356
358
|
className: "".concat(datePickerPrefixCls, "-footer")
|