@kdcloudjs/kdesign 1.7.24 → 1.7.26
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 +46 -0
- package/dist/kdesign-complete.less +101 -43
- package/dist/kdesign.css +81 -37
- package/dist/kdesign.css.map +1 -1
- package/dist/kdesign.js +251 -132
- package/dist/kdesign.js.map +1 -1
- package/dist/kdesign.min.css +3 -3
- package/dist/kdesign.min.js +5 -5
- package/dist/kdesign.min.js.map +1 -1
- package/es/_utils/usePopper.d.ts +1 -0
- package/es/_utils/usePopper.js +4 -2
- package/es/cascader/cascader.js +64 -32
- package/es/cascader/style/index.css +40 -24
- package/es/cascader/style/index.less +49 -27
- package/es/cascader/style/token.less +4 -3
- package/es/city-picker/city-picker.js +33 -26
- package/es/city-picker/option.js +4 -3
- package/es/city-picker/style/index.css +24 -10
- package/es/city-picker/style/index.less +22 -6
- package/es/city-picker/style/token.less +4 -5
- package/es/collapse/panel.js +31 -18
- package/es/collapse/style/index.css +4 -1
- package/es/collapse/style/index.less +4 -1
- package/es/form/Field.d.ts +1 -0
- package/es/form/Field.js +5 -3
- package/es/form/FieldWrapper.d.ts +1 -0
- package/es/form/FieldWrapper.js +13 -5
- package/es/form/style/index.css +11 -1
- package/es/form/style/index.less +16 -1
- package/es/form/style/token.less +1 -0
- package/es/input-number/inputNumber.js +15 -3
- package/es/input-number/useSelectionRange.d.ts +4 -0
- package/es/input-number/useSelectionRange.js +22 -0
- package/es/locale/locale.d.ts +4 -4
- package/es/locale/zh-CN.d.ts +4 -2
- package/es/locale/zh-CN.js +4 -2
- package/es/radio/style/index.css +1 -0
- package/es/radio/style/index.less +1 -0
- package/es/select/select.js +3 -3
- package/es/tag/tag.d.ts +1 -0
- package/es/tree-select/tree-select.js +2 -1
- package/lib/_utils/usePopper.d.ts +1 -0
- package/lib/_utils/usePopper.js +4 -2
- package/lib/cascader/cascader.js +63 -31
- package/lib/cascader/style/index.css +40 -24
- package/lib/cascader/style/index.less +49 -27
- package/lib/cascader/style/token.less +4 -3
- package/lib/city-picker/city-picker.js +33 -26
- package/lib/city-picker/option.js +4 -3
- package/lib/city-picker/style/index.css +24 -10
- package/lib/city-picker/style/index.less +22 -6
- package/lib/city-picker/style/token.less +4 -5
- package/lib/collapse/panel.js +32 -19
- package/lib/collapse/style/index.css +4 -1
- package/lib/collapse/style/index.less +4 -1
- package/lib/form/Field.d.ts +1 -0
- package/lib/form/Field.js +5 -3
- package/lib/form/FieldWrapper.d.ts +1 -0
- package/lib/form/FieldWrapper.js +13 -5
- package/lib/form/style/index.css +11 -1
- package/lib/form/style/index.less +16 -1
- package/lib/form/style/token.less +1 -0
- package/lib/input-number/inputNumber.js +14 -2
- package/lib/input-number/useSelectionRange.d.ts +4 -0
- package/lib/input-number/useSelectionRange.js +29 -0
- package/lib/locale/locale.d.ts +4 -4
- package/lib/locale/zh-CN.d.ts +4 -2
- package/lib/locale/zh-CN.js +4 -2
- package/lib/radio/style/index.css +1 -0
- package/lib/radio/style/index.less +1 -0
- package/lib/select/select.js +3 -3
- package/lib/tag/tag.d.ts +1 -0
- package/lib/tree-select/tree-select.js +2 -1
- package/package.json +1 -1
package/es/city-picker/option.js
CHANGED
|
@@ -8,6 +8,7 @@ var InternalOption = function InternalOption(props, ref) {
|
|
|
8
8
|
var children = props.children,
|
|
9
9
|
value = props.value,
|
|
10
10
|
disabled = props.disabled,
|
|
11
|
+
className = props.className,
|
|
11
12
|
onChangeSelect = props.onChangeSelect,
|
|
12
13
|
_props$city = props.city,
|
|
13
14
|
city = _props$city === void 0 ? {} : _props$city,
|
|
@@ -20,7 +21,7 @@ var InternalOption = function InternalOption(props, ref) {
|
|
|
20
21
|
prefixCls = _useContext.prefixCls;
|
|
21
22
|
var selectOptionPrefixCls = getPrefixCls(prefixCls, 'city-picker-list-item');
|
|
22
23
|
var isSelected = id !== undefined ? id === value : false;
|
|
23
|
-
var optionCls = classNames(selectOptionPrefixCls, (_classNames = {}, _defineProperty(_classNames, "".concat(selectOptionPrefixCls, "-selected"), isSelected), _defineProperty(_classNames, "".concat(selectOptionPrefixCls, "-disabled"), disabled), _classNames));
|
|
24
|
+
var optionCls = classNames(selectOptionPrefixCls, className, (_classNames = {}, _defineProperty(_classNames, "".concat(selectOptionPrefixCls, "-selected"), isSelected), _defineProperty(_classNames, "".concat(selectOptionPrefixCls, "-disabled"), disabled), _classNames));
|
|
24
25
|
var handleClick = function handleClick(e) {
|
|
25
26
|
e.preventDefault();
|
|
26
27
|
if (disabled || id === undefined) return;
|
|
@@ -31,9 +32,9 @@ var InternalOption = function InternalOption(props, ref) {
|
|
|
31
32
|
className: optionCls,
|
|
32
33
|
title: name,
|
|
33
34
|
onClick: handleClick
|
|
34
|
-
}, typeof itemRender === 'function' ? itemRender(city) : /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("
|
|
35
|
+
}, typeof itemRender === 'function' ? itemRender(city) : /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("span", {
|
|
35
36
|
className: "".concat(selectOptionPrefixCls, "-content")
|
|
36
|
-
}, children), /*#__PURE__*/React.createElement("
|
|
37
|
+
}, children), /*#__PURE__*/React.createElement("span", {
|
|
37
38
|
className: "".concat(selectOptionPrefixCls, "-info")
|
|
38
39
|
}, renderCityInfo === null || renderCityInfo === void 0 ? void 0 : renderCityInfo(city, true)))));
|
|
39
40
|
};
|
|
@@ -121,6 +121,9 @@
|
|
|
121
121
|
-ms-flex-direction: column;
|
|
122
122
|
flex-direction: column;
|
|
123
123
|
}
|
|
124
|
+
.kd-city-picker-selector {
|
|
125
|
+
width: 100%;
|
|
126
|
+
}
|
|
124
127
|
.kd-city-picker-selector:hover .kd-city-picker-icon-active {
|
|
125
128
|
color: #3761ca;
|
|
126
129
|
}
|
|
@@ -264,6 +267,12 @@
|
|
|
264
267
|
padding: 0 12px;
|
|
265
268
|
font-size: 12px;
|
|
266
269
|
}
|
|
270
|
+
.kd-city-picker-dropdown .kd-tabs-tab-list .kd-tab-pane-type-line .kd-tab-pane-text {
|
|
271
|
+
overflow: hidden;
|
|
272
|
+
white-space: nowrap;
|
|
273
|
+
text-overflow: ellipsis;
|
|
274
|
+
width: 100%;
|
|
275
|
+
}
|
|
267
276
|
.kd-city-picker-dropdown .kd-tabs-noContainer {
|
|
268
277
|
height: unset;
|
|
269
278
|
}
|
|
@@ -311,6 +320,9 @@
|
|
|
311
320
|
box-sizing: content-box;
|
|
312
321
|
}
|
|
313
322
|
.kd-city-picker-list-item {
|
|
323
|
+
overflow: hidden;
|
|
324
|
+
white-space: nowrap;
|
|
325
|
+
text-overflow: ellipsis;
|
|
314
326
|
position: relative;
|
|
315
327
|
display: block;
|
|
316
328
|
font-weight: normal;
|
|
@@ -319,16 +331,8 @@
|
|
|
319
331
|
padding: 5px 12px;
|
|
320
332
|
color: var(--kd-c-city-picker-footer-color-text, var(--kd-g-color-text-primary, #212121));
|
|
321
333
|
line-height: var(--kd-c-city-picker-dropdown-line-height, 22px);
|
|
322
|
-
display: -webkit-box;
|
|
323
|
-
display: -ms-flexbox;
|
|
324
|
-
display: flex;
|
|
325
334
|
cursor: pointer;
|
|
326
335
|
}
|
|
327
|
-
.kd-city-picker-list-item-content {
|
|
328
|
-
overflow: hidden;
|
|
329
|
-
white-space: nowrap;
|
|
330
|
-
text-overflow: ellipsis;
|
|
331
|
-
}
|
|
332
336
|
.kd-city-picker-list-item-info {
|
|
333
337
|
color: var(--kd-c-city-picker-placeholder-color-text, #b2b2b2);
|
|
334
338
|
white-space: nowrap;
|
|
@@ -337,15 +341,25 @@
|
|
|
337
341
|
background-color: var(--kd-c-city-picker-color-background, #f5f5f5);
|
|
338
342
|
}
|
|
339
343
|
.kd-city-picker-list-item-selected:not(.kd-city-picker-list-item-disabled) {
|
|
340
|
-
background-color: var(--kd-c-city-picker-color-background-selected, #
|
|
344
|
+
background-color: var(--kd-c-city-picker-color-background-selected, var(--kd-g-color-theme-3, #e3eeff));
|
|
345
|
+
color: var(--kd-c-city-picker-list-item-color-text-selected, var(--kd-g-color-theme, #5582f3));
|
|
346
|
+
}
|
|
347
|
+
.kd-city-picker-list-item-selected:not(.kd-city-picker-list-item-disabled) .kd-city-picker-list-item-info {
|
|
348
|
+
color: var(--kd-c-city-picker-list-item-color-text-selected, var(--kd-g-color-theme, #5582f3));
|
|
341
349
|
}
|
|
342
350
|
.kd-city-picker-list-item-disabled {
|
|
343
351
|
color: var(--kd-c-city-picker-item-color-text-disabled, var(--kd-g-color-disabled, #b2b2b2));
|
|
344
352
|
cursor: not-allowed;
|
|
345
353
|
background-color: var(--kd-c-city-picker-item-color-background-disabled, #fff);
|
|
346
354
|
}
|
|
355
|
+
.kd-city-picker-list > .kd-city-picker-list-item-match {
|
|
356
|
+
color: var(--kd-c-city-picker-footer-color-text, var(--kd-g-color-text-primary, #212121));
|
|
357
|
+
}
|
|
358
|
+
.kd-city-picker-list > .kd-city-picker-list-item-match .kd-city-picker-list-item-info {
|
|
359
|
+
color: var(--kd-c-city-picker-placeholder-color-text, #b2b2b2);
|
|
360
|
+
}
|
|
347
361
|
.kd-city-picker-highlight {
|
|
348
|
-
color: #5582f3;
|
|
362
|
+
color: var(--kd-c-city-picker-highlight-color-text, var(--kd-g-color-theme, #5582f3));
|
|
349
363
|
}
|
|
350
364
|
.kd-city-picker-size-small {
|
|
351
365
|
min-height: var(--kd-c-city-picker-sizing-height-small, 24px);
|
|
@@ -14,6 +14,9 @@
|
|
|
14
14
|
display: flex;
|
|
15
15
|
flex-direction: column;
|
|
16
16
|
|
|
17
|
+
&-selector {
|
|
18
|
+
width: 100%;
|
|
19
|
+
}
|
|
17
20
|
&-selector:hover {
|
|
18
21
|
.@{city-picker-prefix-cls}-icon-active {
|
|
19
22
|
color: #3761ca;
|
|
@@ -159,6 +162,11 @@
|
|
|
159
162
|
&-type-line {
|
|
160
163
|
padding: 0 12px;
|
|
161
164
|
font-size: 12px;
|
|
165
|
+
|
|
166
|
+
.@{kd-prefix}-tab-pane-text {
|
|
167
|
+
.over();
|
|
168
|
+
width: 100%;
|
|
169
|
+
}
|
|
162
170
|
}
|
|
163
171
|
}
|
|
164
172
|
}
|
|
@@ -204,14 +212,10 @@
|
|
|
204
212
|
|
|
205
213
|
// 下拉列表选项
|
|
206
214
|
&-item {
|
|
215
|
+
.over();
|
|
207
216
|
.item();
|
|
208
|
-
display: flex;
|
|
209
217
|
cursor: pointer;
|
|
210
218
|
|
|
211
|
-
&-content {
|
|
212
|
-
.over();
|
|
213
|
-
}
|
|
214
|
-
|
|
215
219
|
&-info {
|
|
216
220
|
color: @city-picker-placeholder-color;
|
|
217
221
|
white-space: nowrap;
|
|
@@ -223,6 +227,11 @@
|
|
|
223
227
|
|
|
224
228
|
&-selected:not(&-disabled) {
|
|
225
229
|
background-color: @city-picker-item-selected-bg;
|
|
230
|
+
color: @city-picker-list-item-color-selected;
|
|
231
|
+
|
|
232
|
+
.@{city-picker-prefix-cls}-list-item-info {
|
|
233
|
+
color: @city-picker-list-item-color-selected;
|
|
234
|
+
}
|
|
226
235
|
}
|
|
227
236
|
|
|
228
237
|
&-disabled {
|
|
@@ -231,10 +240,17 @@
|
|
|
231
240
|
background-color: @city-picker-disabled-option-bg;
|
|
232
241
|
}
|
|
233
242
|
}
|
|
243
|
+
|
|
244
|
+
& > .@{city-picker-prefix-cls}-list-item-match {
|
|
245
|
+
color: @city-picker-font-color;
|
|
246
|
+
.@{city-picker-prefix-cls}-list-item-info {
|
|
247
|
+
color: @city-picker-placeholder-color;
|
|
248
|
+
}
|
|
249
|
+
}
|
|
234
250
|
}
|
|
235
251
|
|
|
236
252
|
&-highlight {
|
|
237
|
-
color:
|
|
253
|
+
color: @city-picker-highlight-color;
|
|
238
254
|
}
|
|
239
255
|
|
|
240
256
|
// 选择器框大小
|
|
@@ -6,7 +6,7 @@
|
|
|
6
6
|
@city-picker-dropdown-bg: var(~'@{city-picker-custom-prefix}-dropdown-color-background', @color-background);
|
|
7
7
|
@city-picker-disabled-option-bg: var(~'@{city-picker-custom-prefix}-item-color-background-disabled', #fff);
|
|
8
8
|
@city-picker-item-active-bg: var(~'@{city-picker-custom-prefix}-color-background', #f5f5f5);
|
|
9
|
-
@city-picker-item-selected-bg: var(~'@{city-picker-custom-prefix}-color-background-selected',
|
|
9
|
+
@city-picker-item-selected-bg: var(~'@{city-picker-custom-prefix}-color-background-selected', @color-theme-3);
|
|
10
10
|
@city-picker-g-color-border: var(~'@{city-picker-custom-prefix}-color-border', @color-input);
|
|
11
11
|
@city-picker-g-color-border-foucs: var(~'@{city-picker-custom-prefix}-color-border-foucs', @color-theme);
|
|
12
12
|
@city-picker-g-color-border-hover: var(~'@{city-picker-custom-prefix}-color-border-hover', @color-theme);
|
|
@@ -16,12 +16,11 @@
|
|
|
16
16
|
@city-picker-g-item-text-color-disabled: var(~'@{city-picker-custom-prefix}-item-color-text-disabled', @color-disabled);
|
|
17
17
|
@city-picker-color-background-disabled: var(~'@{city-picker-custom-prefix}-color-background-disabled', #fff);
|
|
18
18
|
@city-picker-color-text-disabled: var(~'@{city-picker-custom-prefix}-color-text-disabled', @color-disabled);
|
|
19
|
-
@city-picker-arrow-icon-color-text-disabled: var(
|
|
20
|
-
~'@{city-picker-custom-prefix}-arrow-icon-color-text-disabled',
|
|
21
|
-
#b2b2b2
|
|
22
|
-
);
|
|
19
|
+
@city-picker-arrow-icon-color-text-disabled: var(~'@{city-picker-custom-prefix}-arrow-icon-color-text-disabled', #b2b2b2);
|
|
23
20
|
@city-picker-clear-color: var(~'@{city-picker-custom-prefix}-icon-clear-color-text', #d9d9d9);
|
|
24
21
|
@city-picker-clear-color-hover: var(~'@{city-picker-custom-prefix}-icon-clear-color-text-hover', #999);
|
|
22
|
+
@city-picker-list-item-color-selected: var(~'@{city-picker-custom-prefix}-list-item-color-text-selected', @color-theme);
|
|
23
|
+
@city-picker-highlight-color: var(~'@{city-picker-custom-prefix}-highlight-color-text', @color-theme);
|
|
25
24
|
|
|
26
25
|
// font
|
|
27
26
|
@city-picker-list-font-size: var(~'@{city-picker-custom-prefix}-dropdown-font-size', 12px); // 下拉列表文字大小
|
package/es/collapse/panel.js
CHANGED
|
@@ -1,6 +1,16 @@
|
|
|
1
|
+
import _extends from "@babel/runtime-corejs3/helpers/extends";
|
|
1
2
|
import _defineProperty from "@babel/runtime-corejs3/helpers/defineProperty";
|
|
2
3
|
import _slicedToArray from "@babel/runtime-corejs3/helpers/slicedToArray";
|
|
4
|
+
import _Object$getOwnPropertySymbols from "@babel/runtime-corejs3/core-js-stable/object/get-own-property-symbols";
|
|
3
5
|
import _includesInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/includes";
|
|
6
|
+
var __rest = this && this.__rest || function (s, e) {
|
|
7
|
+
var t = {};
|
|
8
|
+
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0) t[p] = s[p];
|
|
9
|
+
if (s != null && typeof _Object$getOwnPropertySymbols === "function") for (var i = 0, p = _Object$getOwnPropertySymbols(s); i < p.length; i++) {
|
|
10
|
+
if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i])) t[p[i]] = s[p[i]];
|
|
11
|
+
}
|
|
12
|
+
return t;
|
|
13
|
+
};
|
|
4
14
|
import React, { useEffect, useRef, useState } from 'react';
|
|
5
15
|
import classNames from 'classnames';
|
|
6
16
|
import ConfigContext from '../config-provider/ConfigContext';
|
|
@@ -12,21 +22,23 @@ var Panel = /*#__PURE__*/React.forwardRef(function (props, ref) {
|
|
|
12
22
|
getPrefixCls = _React$useContext.getPrefixCls,
|
|
13
23
|
prefixCls = _React$useContext.prefixCls,
|
|
14
24
|
userDefaultProps = _React$useContext.compDefaultProps;
|
|
15
|
-
var
|
|
16
|
-
disabled =
|
|
17
|
-
extra =
|
|
18
|
-
assist =
|
|
19
|
-
header =
|
|
20
|
-
onChange =
|
|
21
|
-
panelKey =
|
|
22
|
-
innerKey =
|
|
23
|
-
bordered =
|
|
24
|
-
expandIcon =
|
|
25
|
-
expandIconPosition =
|
|
26
|
-
style =
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
25
|
+
var _a = getCompProps('CollapsePanel', userDefaultProps, props),
|
|
26
|
+
disabled = _a.disabled,
|
|
27
|
+
extra = _a.extra,
|
|
28
|
+
assist = _a.assist,
|
|
29
|
+
header = _a.header,
|
|
30
|
+
onChange = _a.onChange,
|
|
31
|
+
panelKey = _a.panelKey,
|
|
32
|
+
innerKey = _a.innerKey,
|
|
33
|
+
bordered = _a.bordered,
|
|
34
|
+
expandIcon = _a.expandIcon,
|
|
35
|
+
expandIconPosition = _a.expandIconPosition,
|
|
36
|
+
style = _a.style,
|
|
37
|
+
title = _a.title,
|
|
38
|
+
className = _a.className,
|
|
39
|
+
children = _a.children,
|
|
40
|
+
customPrefixcls = _a.prefixCls,
|
|
41
|
+
others = __rest(_a, ["disabled", "extra", "assist", "header", "onChange", "panelKey", "innerKey", "bordered", "expandIcon", "expandIconPosition", "style", "title", "className", "children", "prefixCls"]);
|
|
30
42
|
var panelPrefixCls = getPrefixCls(prefixCls, 'collapse-panel', customPrefixcls); // 样式前缀
|
|
31
43
|
var childrenRef = useRef();
|
|
32
44
|
var setHeightTimerRef = useRef(null);
|
|
@@ -68,7 +80,8 @@ var Panel = /*#__PURE__*/React.forwardRef(function (props, ref) {
|
|
|
68
80
|
className: className,
|
|
69
81
|
onClick: handleClick
|
|
70
82
|
}, expandIconPosition === 'left' ? renderIcon() : null, header && /*#__PURE__*/React.createElement("span", {
|
|
71
|
-
className: headerClassName
|
|
83
|
+
className: headerClassName,
|
|
84
|
+
title: title
|
|
72
85
|
}, renderReactNode(header)));
|
|
73
86
|
};
|
|
74
87
|
var renderRight = function renderRight() {
|
|
@@ -135,11 +148,11 @@ var Panel = /*#__PURE__*/React.forwardRef(function (props, ref) {
|
|
|
135
148
|
expand ? expandWidthoutAnimation(childrenRef.current) : runCollapseAnimation(childrenRef.current);
|
|
136
149
|
}
|
|
137
150
|
}, [childrenRef.current, expandAnimation, expand]);
|
|
138
|
-
return /*#__PURE__*/React.createElement("div", {
|
|
151
|
+
return /*#__PURE__*/React.createElement("div", _extends({
|
|
139
152
|
className: rootClassName,
|
|
140
153
|
style: style,
|
|
141
154
|
ref: panelPrefixClsRef
|
|
142
|
-
}, /*#__PURE__*/React.createElement("span", {
|
|
155
|
+
}, others), /*#__PURE__*/React.createElement("span", {
|
|
143
156
|
className: topClassName
|
|
144
157
|
}, renderLeft(), renderMiddle(), renderRight()), /*#__PURE__*/React.createElement("div", {
|
|
145
158
|
className: childrenClassName,
|
|
@@ -116,9 +116,12 @@
|
|
|
116
116
|
.kd-collapse-panel:last-child {
|
|
117
117
|
border-top: none;
|
|
118
118
|
}
|
|
119
|
-
.kd-collapse-panel:first-child {
|
|
119
|
+
.kd-collapse-panel-border.kd-collapse-panel:first-child {
|
|
120
120
|
border-top: var(--kd-c-collapse-border-width, 1px) solid var(--kd-c-collapse-color-border-strong-2, var(--kd-g-color-border-strong-2, #d9d9d9));
|
|
121
121
|
}
|
|
122
|
+
.kd-collapse-panel-border.kd-collapse-panel:not(:nth-child(1)) {
|
|
123
|
+
border-top: none;
|
|
124
|
+
}
|
|
122
125
|
.kd-collapse-panel {
|
|
123
126
|
display: -webkit-inline-box;
|
|
124
127
|
display: -ms-inline-flexbox;
|
|
@@ -9,9 +9,12 @@
|
|
|
9
9
|
&-panel:last-child {
|
|
10
10
|
border-top: none;
|
|
11
11
|
}
|
|
12
|
-
&-panel:first-child {
|
|
12
|
+
&-panel-border&-panel:first-child {
|
|
13
13
|
border-top: @collapse-border-width solid @collapse-border-color;
|
|
14
14
|
}
|
|
15
|
+
&-panel-border&-panel:not(:nth-child(1)) {
|
|
16
|
+
border-top: none;
|
|
17
|
+
}
|
|
15
18
|
&-panel {
|
|
16
19
|
display: inline-flex;
|
|
17
20
|
flex-direction: column;
|
package/es/form/Field.d.ts
CHANGED
package/es/form/Field.js
CHANGED
|
@@ -101,7 +101,8 @@ var Field = function Field(props) {
|
|
|
101
101
|
wrapperWidth = props.wrapperWidth,
|
|
102
102
|
validateTrigger = props.validateTrigger,
|
|
103
103
|
defaultValue = props.defaultValue,
|
|
104
|
-
valuePropName = props.valuePropName
|
|
104
|
+
valuePropName = props.valuePropName,
|
|
105
|
+
extra = props.extra;
|
|
105
106
|
var htmlFor = customizeHtmlFor || (name ? _concatInstanceProperty(_context = "form_".concat(name, "_")).call(_context, (Math.random() * 100).toFixed(0)) : undefined);
|
|
106
107
|
var childrenNode = null;
|
|
107
108
|
var innerValuePropName = 'value';
|
|
@@ -187,7 +188,7 @@ var Field = function Field(props) {
|
|
|
187
188
|
};
|
|
188
189
|
}, []);
|
|
189
190
|
var formPrefixCls = getPrefixCls === null || getPrefixCls === void 0 ? void 0 : getPrefixCls(prefixCls, 'form', customizePrefixcls);
|
|
190
|
-
var formItemClassName = classnames((_classnames = {}, _defineProperty(_classnames, "".concat(formPrefixCls), true), _defineProperty(_classnames, "".concat(formPrefixCls, "-field"), true), _defineProperty(_classnames, "".concat(formPrefixCls, "-field-hidden"), hidden), _defineProperty(_classnames, "".concat(formPrefixCls, "-field-vertical"), vertical), _classnames), className);
|
|
191
|
+
var formItemClassName = classnames((_classnames = {}, _defineProperty(_classnames, "".concat(formPrefixCls), true), _defineProperty(_classnames, "".concat(formPrefixCls, "-field"), true), _defineProperty(_classnames, "".concat(formPrefixCls, "-field-hidden"), hidden), _defineProperty(_classnames, "".concat(formPrefixCls, "-field-vertical"), vertical), _defineProperty(_classnames, "".concat(formPrefixCls, "-field-extra"), extra), _classnames), className);
|
|
191
192
|
var value = getFieldValue(name);
|
|
192
193
|
var validateMessage = getFieldError(name);
|
|
193
194
|
var getInputValueFormProp = function getInputValueFormProp(evt) {
|
|
@@ -282,7 +283,8 @@ var Field = function Field(props) {
|
|
|
282
283
|
requiredMark: mergedRequired
|
|
283
284
|
}), /*#__PURE__*/React.createElement(FieldWrapper, {
|
|
284
285
|
width: wrapperWidth,
|
|
285
|
-
validateMessage: validateMessage
|
|
286
|
+
validateMessage: validateMessage,
|
|
287
|
+
extra: extra
|
|
286
288
|
}, _mapInstanceProperty(childrenArray).call(childrenArray, function (child, index) {
|
|
287
289
|
var keys = mergeProps(_extends(_extends({}, generateEventHandler(handleValueValidate, validateTrigger)), {
|
|
288
290
|
key: index,
|
package/es/form/FieldWrapper.js
CHANGED
|
@@ -11,18 +11,26 @@ var FieldWrapper = function FieldWrapper(props) {
|
|
|
11
11
|
var children = wrapperProps.children,
|
|
12
12
|
customizePrefixCls = wrapperProps.prefixCls,
|
|
13
13
|
width = wrapperProps.width,
|
|
14
|
-
validateMessage = wrapperProps.validateMessage
|
|
14
|
+
validateMessage = wrapperProps.validateMessage,
|
|
15
|
+
extra = wrapperProps.extra;
|
|
15
16
|
var wrapperPrefixCls = getPrefixCls === null || getPrefixCls === void 0 ? void 0 : getPrefixCls(prefixCls, 'form-field-wrapper', customizePrefixCls);
|
|
16
17
|
var wrapperClassName = classnames(["".concat(wrapperPrefixCls)]);
|
|
17
18
|
var messageClassName = classnames(["".concat(wrapperPrefixCls, "-message")]);
|
|
19
|
+
var validate = validateMessage ? /*#__PURE__*/React.createElement("p", {
|
|
20
|
+
className: messageClassName,
|
|
21
|
+
title: validateMessage
|
|
22
|
+
}, validateMessage) : null;
|
|
18
23
|
return /*#__PURE__*/React.createElement("div", {
|
|
19
24
|
className: wrapperClassName,
|
|
20
25
|
style: {
|
|
21
26
|
width: width
|
|
22
27
|
}
|
|
23
|
-
}, children,
|
|
24
|
-
className:
|
|
25
|
-
|
|
26
|
-
|
|
28
|
+
}, children, extra ? /*#__PURE__*/React.createElement("div", {
|
|
29
|
+
className: "".concat(wrapperPrefixCls, "-extra")
|
|
30
|
+
}, /*#__PURE__*/React.createElement("div", {
|
|
31
|
+
className: "".concat(wrapperPrefixCls, "-extra-message")
|
|
32
|
+
}, validateMessage), /*#__PURE__*/React.createElement("div", {
|
|
33
|
+
className: "".concat(wrapperPrefixCls, "-extra-text")
|
|
34
|
+
}, extra)) : /*#__PURE__*/React.createElement(React.Fragment, null, validate));
|
|
27
35
|
};
|
|
28
36
|
export default FieldWrapper;
|
package/es/form/style/index.css
CHANGED
|
@@ -152,6 +152,9 @@
|
|
|
152
152
|
.kd-form-field-hidden {
|
|
153
153
|
display: none !important;
|
|
154
154
|
}
|
|
155
|
+
.kd-form-field-extra {
|
|
156
|
+
margin-bottom: calc(var(--kd-c-form-field-spacing-margin-bottom, 22px) * 2);
|
|
157
|
+
}
|
|
155
158
|
.kd-form-field-label {
|
|
156
159
|
font-size: var(--kd-c-form-field-label-font-size, 12px);
|
|
157
160
|
line-height: var(--kd-c-form-field-label-line-height, 18px);
|
|
@@ -178,7 +181,8 @@
|
|
|
178
181
|
.kd-form-field-wrapper {
|
|
179
182
|
position: relative;
|
|
180
183
|
}
|
|
181
|
-
.kd-form-field-wrapper-message
|
|
184
|
+
.kd-form-field-wrapper-message,
|
|
185
|
+
.kd-form-field-wrapper-extra {
|
|
182
186
|
position: absolute;
|
|
183
187
|
left: -7px;
|
|
184
188
|
right: 0;
|
|
@@ -191,3 +195,9 @@
|
|
|
191
195
|
white-space: nowrap;
|
|
192
196
|
text-overflow: ellipsis;
|
|
193
197
|
}
|
|
198
|
+
.kd-form-field-wrapper-extra-message {
|
|
199
|
+
color: var(--kd-c-form-error-color, var(--kd-g-color-error, #fb2323));
|
|
200
|
+
}
|
|
201
|
+
.kd-form-field-wrapper-extra-text {
|
|
202
|
+
color: var(--kd-c-form-extra-color, var(--kd-g-color-text-third, #999));
|
|
203
|
+
}
|
package/es/form/style/index.less
CHANGED
|
@@ -46,6 +46,10 @@
|
|
|
46
46
|
&-hidden {
|
|
47
47
|
display: none !important;
|
|
48
48
|
}
|
|
49
|
+
|
|
50
|
+
&-extra {
|
|
51
|
+
margin-bottom: calc(@form-field-spacing-margin-bottom * 2);
|
|
52
|
+
}
|
|
49
53
|
}
|
|
50
54
|
|
|
51
55
|
.@{field-label-cls} {
|
|
@@ -76,7 +80,8 @@
|
|
|
76
80
|
|
|
77
81
|
.@{field-wrapper-cls} {
|
|
78
82
|
position: relative;
|
|
79
|
-
|
|
83
|
+
|
|
84
|
+
&-message, &-extra {
|
|
80
85
|
position: absolute;
|
|
81
86
|
left: -7px;
|
|
82
87
|
right: 0;
|
|
@@ -89,4 +94,14 @@
|
|
|
89
94
|
white-space: nowrap;
|
|
90
95
|
text-overflow: ellipsis;
|
|
91
96
|
}
|
|
97
|
+
|
|
98
|
+
&-extra {
|
|
99
|
+
&-message {
|
|
100
|
+
color: @form-error-color;
|
|
101
|
+
}
|
|
102
|
+
|
|
103
|
+
&-text {
|
|
104
|
+
color: @form-extra-color;
|
|
105
|
+
}
|
|
106
|
+
}
|
|
92
107
|
}
|
package/es/form/style/token.less
CHANGED
|
@@ -5,6 +5,7 @@
|
|
|
5
5
|
// color
|
|
6
6
|
@form-field-color: var(~'@{form-prefix}-field-color', @color-text-secondary);
|
|
7
7
|
@form-error-color: var(~'@{form-prefix}-error-color', @color-error);
|
|
8
|
+
@form-extra-color: var(~'@{form-prefix}-extra-color', @color-text-third);
|
|
8
9
|
|
|
9
10
|
// font
|
|
10
11
|
@form-field-label-font-size: var(~'@{form-prefix}-field-label-font-size',12px);
|
|
@@ -11,7 +11,7 @@ var __rest = this && this.__rest || function (s, e) {
|
|
|
11
11
|
}
|
|
12
12
|
return t;
|
|
13
13
|
};
|
|
14
|
-
import React, { useContext, useState, useEffect, useRef, useCallback, useImperativeHandle } from 'react';
|
|
14
|
+
import React, { useContext, useState, useEffect, useRef, useCallback, useImperativeHandle, useMemo } from 'react';
|
|
15
15
|
import Input from '../input';
|
|
16
16
|
import ConfigContext from '../config-provider/ConfigContext';
|
|
17
17
|
import { getCompProps } from '../_utils';
|
|
@@ -20,7 +20,9 @@ import { formatEditNumber, formatNumber } from '../_utils/formatUtil';
|
|
|
20
20
|
import devWarning from '../_utils/devwarning';
|
|
21
21
|
import Big from 'big.js';
|
|
22
22
|
import classNames from 'classnames';
|
|
23
|
+
import useSelectionRange from './useSelectionRange';
|
|
23
24
|
var InternalInputNumber = function InternalInputNumber(props, ref) {
|
|
25
|
+
var _a;
|
|
24
26
|
var _useContext = useContext(ConfigContext),
|
|
25
27
|
userDefaultProps = _useContext.compDefaultProps,
|
|
26
28
|
getPrefixCls = _useContext.getPrefixCls,
|
|
@@ -110,6 +112,7 @@ var InternalInputNumber = function InternalInputNumber(props, ref) {
|
|
|
110
112
|
if (legalNumber === false) {
|
|
111
113
|
return false;
|
|
112
114
|
}
|
|
115
|
+
updateSelectionRangePosition(event);
|
|
113
116
|
value === undefined && setInputValue(legalNumber);
|
|
114
117
|
onChange && onChange(handleEventAttachValue(event, numberMode ? Number(legalNumber) : legalNumber));
|
|
115
118
|
};
|
|
@@ -225,10 +228,12 @@ var InternalInputNumber = function InternalInputNumber(props, ref) {
|
|
|
225
228
|
// 还原最小值
|
|
226
229
|
if (typeof min === 'number' && bigValue.lt(min)) {
|
|
227
230
|
_inputValue = min.toString();
|
|
231
|
+
onChange === null || onChange === void 0 ? void 0 : onChange(handleEventAttachValue(event, numberMode ? Number(_inputValue) : _inputValue));
|
|
228
232
|
}
|
|
229
233
|
// 还原最大值
|
|
230
|
-
if (typeof
|
|
234
|
+
if (typeof max === 'number' && bigValue.gt(max)) {
|
|
231
235
|
_inputValue = max.toString();
|
|
236
|
+
onChange === null || onChange === void 0 ? void 0 : onChange(handleEventAttachValue(event, numberMode ? Number(_inputValue) : _inputValue));
|
|
232
237
|
}
|
|
233
238
|
// 超过精度位数直接截断
|
|
234
239
|
_inputValue = handleNumericalAccuracy(_inputValue);
|
|
@@ -300,9 +305,16 @@ var InternalInputNumber = function InternalInputNumber(props, ref) {
|
|
|
300
305
|
}
|
|
301
306
|
};
|
|
302
307
|
});
|
|
308
|
+
var displayedInputValue = useMemo(function () {
|
|
309
|
+
return formatter ? formatter(inputValue) : inputValue;
|
|
310
|
+
}, [inputValue, formatter]);
|
|
311
|
+
var updateSelectionRangePosition = useSelectionRange({
|
|
312
|
+
inputElement: (_a = inputNumberRef.current) === null || _a === void 0 ? void 0 : _a.input,
|
|
313
|
+
inputValue: displayedInputValue
|
|
314
|
+
});
|
|
303
315
|
return /*#__PURE__*/React.createElement(Input, _extends({}, others, {
|
|
304
316
|
ref: inputNumberRef,
|
|
305
|
-
value:
|
|
317
|
+
value: displayedInputValue,
|
|
306
318
|
prefix: prefix,
|
|
307
319
|
suffix: suffix,
|
|
308
320
|
onChange: handleChange,
|
|
@@ -0,0 +1,22 @@
|
|
|
1
|
+
import { useRef, useLayoutEffect } from 'react';
|
|
2
|
+
import isNumber from 'lodash/isNumber';
|
|
3
|
+
export default function useSelectionRange(_ref) {
|
|
4
|
+
var inputElement = _ref.inputElement,
|
|
5
|
+
inputValue = _ref.inputValue;
|
|
6
|
+
var refSelectionPosition = useRef();
|
|
7
|
+
useLayoutEffect(function () {
|
|
8
|
+
var position = refSelectionPosition.current;
|
|
9
|
+
if (inputElement && inputValue && isNumber(position)) {
|
|
10
|
+
var start = Math.max(0, inputValue.length - position);
|
|
11
|
+
inputElement.setSelectionRange(start, start);
|
|
12
|
+
}
|
|
13
|
+
}, [inputValue]);
|
|
14
|
+
return function (event) {
|
|
15
|
+
var _event$target = event.target,
|
|
16
|
+
end = _event$target.selectionEnd,
|
|
17
|
+
value = _event$target.value;
|
|
18
|
+
if (isNumber(end)) {
|
|
19
|
+
refSelectionPosition.current = value.length - end;
|
|
20
|
+
}
|
|
21
|
+
};
|
|
22
|
+
}
|
package/es/locale/locale.d.ts
CHANGED
|
@@ -61,11 +61,11 @@ declare class LocaleCache {
|
|
|
61
61
|
'QuickSearch.emptyTip': string;
|
|
62
62
|
'QuickSearch.or': string;
|
|
63
63
|
'CityPicker.domestic': string;
|
|
64
|
-
'CityPicker.internation': string;
|
|
65
64
|
'CityPicker.common': string;
|
|
66
|
-
'CityPicker.
|
|
67
|
-
|
|
68
|
-
|
|
65
|
+
'CityPicker.emptyText': string;
|
|
66
|
+
'CityPicker.commonEmptyText': string;
|
|
67
|
+
'CityPicker.tabsDomestic': string;
|
|
68
|
+
'CityPicker.tabsInternation': string;
|
|
69
69
|
'ColorPicker.followFunctionalColor': string;
|
|
70
70
|
'Search.placeholder': string;
|
|
71
71
|
'Search.desc': string[];
|
package/es/locale/zh-CN.d.ts
CHANGED
|
@@ -35,9 +35,11 @@ declare const locale: {
|
|
|
35
35
|
'QuickSearch.emptyTip': string;
|
|
36
36
|
'QuickSearch.or': string;
|
|
37
37
|
'CityPicker.domestic': string;
|
|
38
|
-
'CityPicker.internation': string;
|
|
39
38
|
'CityPicker.common': string;
|
|
40
|
-
'CityPicker.
|
|
39
|
+
'CityPicker.emptyText': string;
|
|
40
|
+
'CityPicker.commonEmptyText': string;
|
|
41
|
+
'CityPicker.tabsDomestic': string;
|
|
42
|
+
'CityPicker.tabsInternation': string;
|
|
41
43
|
'ColorPicker.followFunctionalColor': string;
|
|
42
44
|
'Search.placeholder': string;
|
|
43
45
|
'Search.desc': string[];
|
package/es/locale/zh-CN.js
CHANGED
|
@@ -39,9 +39,11 @@ var locale = _extends(_extends({
|
|
|
39
39
|
'QuickSearch.emptyTip': '暂无数据',
|
|
40
40
|
'QuickSearch.or': '或',
|
|
41
41
|
'CityPicker.domestic': '国内',
|
|
42
|
-
'CityPicker.internation': '国际',
|
|
43
42
|
'CityPicker.common': '常用',
|
|
44
|
-
'CityPicker.
|
|
43
|
+
'CityPicker.emptyText': '暂无数据',
|
|
44
|
+
'CityPicker.commonEmptyText': '无常用城市',
|
|
45
|
+
'CityPicker.tabsDomestic': '国内',
|
|
46
|
+
'CityPicker.tabsInternation': '国际/中国港澳台',
|
|
45
47
|
'ColorPicker.followFunctionalColor': '跟随功能色',
|
|
46
48
|
'Search.placeholder': '请输入需要搜索的内容',
|
|
47
49
|
'Search.desc': ['空格代表"或",回车代表"且"'],
|
package/es/radio/style/index.css
CHANGED
package/es/select/select.js
CHANGED
|
@@ -766,7 +766,7 @@ var InternalSelect = function InternalSelect(props, ref) {
|
|
|
766
766
|
// open
|
|
767
767
|
if (which === KeyCode.ENTER || which === KeyCode.UP || which === KeyCode.DOWN) {
|
|
768
768
|
e.preventDefault();
|
|
769
|
-
|
|
769
|
+
handleVisibleChange(true);
|
|
770
770
|
}
|
|
771
771
|
// backspace
|
|
772
772
|
var _multipleRef$current5 = multipleRef.current,
|
|
@@ -810,10 +810,10 @@ var InternalSelect = function InternalSelect(props, ref) {
|
|
|
810
810
|
}));
|
|
811
811
|
}
|
|
812
812
|
if (!isMultiple) {
|
|
813
|
-
|
|
813
|
+
handleVisibleChange(false);
|
|
814
814
|
}
|
|
815
815
|
} else if (which === KeyCode.ESC) {
|
|
816
|
-
|
|
816
|
+
handleVisibleChange(false);
|
|
817
817
|
}
|
|
818
818
|
if (offset !== 0) {
|
|
819
819
|
var nextActiveIndex = getActiveIndex(activeIndex + offset, offset);
|
package/es/tag/tag.d.ts
CHANGED
|
@@ -19,6 +19,7 @@ export interface ITagProps {
|
|
|
19
19
|
onClick?: React.MouseEventHandler<HTMLElement>;
|
|
20
20
|
onClose?: React.MouseEventHandler<HTMLElement>;
|
|
21
21
|
children?: React.ReactNode;
|
|
22
|
+
title?: string;
|
|
22
23
|
}
|
|
23
24
|
declare const Tag: React.ForwardRefExoticComponent<ITagProps & React.RefAttributes<unknown>>;
|
|
24
25
|
export default Tag;
|
|
@@ -444,7 +444,8 @@ var InternalTreeSelect = function InternalTreeSelect(props, ref) {
|
|
|
444
444
|
onClose: function onClose(e) {
|
|
445
445
|
return handleRemove(e, key);
|
|
446
446
|
},
|
|
447
|
-
"data-tag": key
|
|
447
|
+
"data-tag": key,
|
|
448
|
+
title: label
|
|
448
449
|
}, label));
|
|
449
450
|
}), maxTagCount && selectTreeNodes.length > maxTagCount ? maxTagPlaceholder ? handleMaxTagHolder() : /*#__PURE__*/React.createElement("span", {
|
|
450
451
|
className: itemCls
|