@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.
Files changed (74) hide show
  1. package/CHANGELOG.md +46 -0
  2. package/dist/kdesign-complete.less +101 -43
  3. package/dist/kdesign.css +81 -37
  4. package/dist/kdesign.css.map +1 -1
  5. package/dist/kdesign.js +251 -132
  6. package/dist/kdesign.js.map +1 -1
  7. package/dist/kdesign.min.css +3 -3
  8. package/dist/kdesign.min.js +5 -5
  9. package/dist/kdesign.min.js.map +1 -1
  10. package/es/_utils/usePopper.d.ts +1 -0
  11. package/es/_utils/usePopper.js +4 -2
  12. package/es/cascader/cascader.js +64 -32
  13. package/es/cascader/style/index.css +40 -24
  14. package/es/cascader/style/index.less +49 -27
  15. package/es/cascader/style/token.less +4 -3
  16. package/es/city-picker/city-picker.js +33 -26
  17. package/es/city-picker/option.js +4 -3
  18. package/es/city-picker/style/index.css +24 -10
  19. package/es/city-picker/style/index.less +22 -6
  20. package/es/city-picker/style/token.less +4 -5
  21. package/es/collapse/panel.js +31 -18
  22. package/es/collapse/style/index.css +4 -1
  23. package/es/collapse/style/index.less +4 -1
  24. package/es/form/Field.d.ts +1 -0
  25. package/es/form/Field.js +5 -3
  26. package/es/form/FieldWrapper.d.ts +1 -0
  27. package/es/form/FieldWrapper.js +13 -5
  28. package/es/form/style/index.css +11 -1
  29. package/es/form/style/index.less +16 -1
  30. package/es/form/style/token.less +1 -0
  31. package/es/input-number/inputNumber.js +15 -3
  32. package/es/input-number/useSelectionRange.d.ts +4 -0
  33. package/es/input-number/useSelectionRange.js +22 -0
  34. package/es/locale/locale.d.ts +4 -4
  35. package/es/locale/zh-CN.d.ts +4 -2
  36. package/es/locale/zh-CN.js +4 -2
  37. package/es/radio/style/index.css +1 -0
  38. package/es/radio/style/index.less +1 -0
  39. package/es/select/select.js +3 -3
  40. package/es/tag/tag.d.ts +1 -0
  41. package/es/tree-select/tree-select.js +2 -1
  42. package/lib/_utils/usePopper.d.ts +1 -0
  43. package/lib/_utils/usePopper.js +4 -2
  44. package/lib/cascader/cascader.js +63 -31
  45. package/lib/cascader/style/index.css +40 -24
  46. package/lib/cascader/style/index.less +49 -27
  47. package/lib/cascader/style/token.less +4 -3
  48. package/lib/city-picker/city-picker.js +33 -26
  49. package/lib/city-picker/option.js +4 -3
  50. package/lib/city-picker/style/index.css +24 -10
  51. package/lib/city-picker/style/index.less +22 -6
  52. package/lib/city-picker/style/token.less +4 -5
  53. package/lib/collapse/panel.js +32 -19
  54. package/lib/collapse/style/index.css +4 -1
  55. package/lib/collapse/style/index.less +4 -1
  56. package/lib/form/Field.d.ts +1 -0
  57. package/lib/form/Field.js +5 -3
  58. package/lib/form/FieldWrapper.d.ts +1 -0
  59. package/lib/form/FieldWrapper.js +13 -5
  60. package/lib/form/style/index.css +11 -1
  61. package/lib/form/style/index.less +16 -1
  62. package/lib/form/style/token.less +1 -0
  63. package/lib/input-number/inputNumber.js +14 -2
  64. package/lib/input-number/useSelectionRange.d.ts +4 -0
  65. package/lib/input-number/useSelectionRange.js +29 -0
  66. package/lib/locale/locale.d.ts +4 -4
  67. package/lib/locale/zh-CN.d.ts +4 -2
  68. package/lib/locale/zh-CN.js +4 -2
  69. package/lib/radio/style/index.css +1 -0
  70. package/lib/radio/style/index.less +1 -0
  71. package/lib/select/select.js +3 -3
  72. package/lib/tag/tag.d.ts +1 -0
  73. package/lib/tree-select/tree-select.js +2 -1
  74. package/package.json +1 -1
@@ -20,6 +20,7 @@ var InternalOption = function InternalOption(props, ref) {
20
20
  var children = props.children,
21
21
  value = props.value,
22
22
  disabled = props.disabled,
23
+ className = props.className,
23
24
  onChangeSelect = props.onChangeSelect,
24
25
  _props$city = props.city,
25
26
  city = _props$city === void 0 ? {} : _props$city,
@@ -32,7 +33,7 @@ var InternalOption = function InternalOption(props, ref) {
32
33
  prefixCls = _useContext.prefixCls;
33
34
  var selectOptionPrefixCls = getPrefixCls(prefixCls, 'city-picker-list-item');
34
35
  var isSelected = id !== undefined ? id === value : false;
35
- var optionCls = (0, _classnames.default)(selectOptionPrefixCls, (_classNames = {}, (0, _defineProperty2.default)(_classNames, "".concat(selectOptionPrefixCls, "-selected"), isSelected), (0, _defineProperty2.default)(_classNames, "".concat(selectOptionPrefixCls, "-disabled"), disabled), _classNames));
36
+ var optionCls = (0, _classnames.default)(selectOptionPrefixCls, className, (_classNames = {}, (0, _defineProperty2.default)(_classNames, "".concat(selectOptionPrefixCls, "-selected"), isSelected), (0, _defineProperty2.default)(_classNames, "".concat(selectOptionPrefixCls, "-disabled"), disabled), _classNames));
36
37
  var handleClick = function handleClick(e) {
37
38
  e.preventDefault();
38
39
  if (disabled || id === undefined) return;
@@ -43,9 +44,9 @@ var InternalOption = function InternalOption(props, ref) {
43
44
  className: optionCls,
44
45
  title: name,
45
46
  onClick: handleClick
46
- }, typeof itemRender === 'function' ? itemRender(city) : /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement("div", {
47
+ }, typeof itemRender === 'function' ? itemRender(city) : /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement("span", {
47
48
  className: "".concat(selectOptionPrefixCls, "-content")
48
- }, children), /*#__PURE__*/_react.default.createElement("div", {
49
+ }, children), /*#__PURE__*/_react.default.createElement("span", {
49
50
  className: "".concat(selectOptionPrefixCls, "-info")
50
51
  }, renderCityInfo === null || renderCityInfo === void 0 ? void 0 : renderCityInfo(city, true)))));
51
52
  };
@@ -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, #f2f6ff);
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: #5582f3;
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', #f2f6ff);
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); // 下拉列表文字大小
@@ -8,9 +8,11 @@ Object.defineProperty(exports, "__esModule", {
8
8
  value: true
9
9
  });
10
10
  exports.default = void 0;
11
- var _includes = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/instance/includes"));
11
+ var _extends2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/extends"));
12
12
  var _defineProperty2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/defineProperty"));
13
13
  var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/slicedToArray"));
14
+ var _getOwnPropertySymbols = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/object/get-own-property-symbols"));
15
+ var _includes = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/instance/includes"));
14
16
  var _react = _interopRequireWildcard(require("react"));
15
17
  var _classnames = _interopRequireDefault(require("classnames"));
16
18
  var _ConfigContext = _interopRequireDefault(require("../config-provider/ConfigContext"));
@@ -18,27 +20,37 @@ var _utils = require("../_utils");
18
20
  var _icon = _interopRequireDefault(require("../icon"));
19
21
  function _getRequireWildcardCache(nodeInterop) { if (typeof _WeakMap !== "function") return null; var cacheBabelInterop = new _WeakMap(); var cacheNodeInterop = new _WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
20
22
  function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && _Object$getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? _Object$getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
23
+ var __rest = void 0 && (void 0).__rest || function (s, e) {
24
+ var t = {};
25
+ for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0) t[p] = s[p];
26
+ if (s != null && typeof _getOwnPropertySymbols.default === "function") for (var i = 0, p = (0, _getOwnPropertySymbols.default)(s); i < p.length; i++) {
27
+ if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i])) t[p[i]] = s[p[i]];
28
+ }
29
+ return t;
30
+ };
21
31
  var Panel = /*#__PURE__*/_react.default.forwardRef(function (props, ref) {
22
32
  var _classNames6, _classNames7, _classNames8;
23
33
  var _React$useContext = _react.default.useContext(_ConfigContext.default),
24
34
  getPrefixCls = _React$useContext.getPrefixCls,
25
35
  prefixCls = _React$useContext.prefixCls,
26
36
  userDefaultProps = _React$useContext.compDefaultProps;
27
- var _getCompProps = (0, _utils.getCompProps)('CollapsePanel', userDefaultProps, props),
28
- disabled = _getCompProps.disabled,
29
- extra = _getCompProps.extra,
30
- assist = _getCompProps.assist,
31
- header = _getCompProps.header,
32
- onChange = _getCompProps.onChange,
33
- panelKey = _getCompProps.panelKey,
34
- innerKey = _getCompProps.innerKey,
35
- bordered = _getCompProps.bordered,
36
- expandIcon = _getCompProps.expandIcon,
37
- expandIconPosition = _getCompProps.expandIconPosition,
38
- style = _getCompProps.style,
39
- className = _getCompProps.className,
40
- children = _getCompProps.children,
41
- customPrefixcls = _getCompProps.prefixCls;
37
+ var _a = (0, _utils.getCompProps)('CollapsePanel', userDefaultProps, props),
38
+ disabled = _a.disabled,
39
+ extra = _a.extra,
40
+ assist = _a.assist,
41
+ header = _a.header,
42
+ onChange = _a.onChange,
43
+ panelKey = _a.panelKey,
44
+ innerKey = _a.innerKey,
45
+ bordered = _a.bordered,
46
+ expandIcon = _a.expandIcon,
47
+ expandIconPosition = _a.expandIconPosition,
48
+ style = _a.style,
49
+ title = _a.title,
50
+ className = _a.className,
51
+ children = _a.children,
52
+ customPrefixcls = _a.prefixCls,
53
+ others = __rest(_a, ["disabled", "extra", "assist", "header", "onChange", "panelKey", "innerKey", "bordered", "expandIcon", "expandIconPosition", "style", "title", "className", "children", "prefixCls"]);
42
54
  var panelPrefixCls = getPrefixCls(prefixCls, 'collapse-panel', customPrefixcls); // 样式前缀
43
55
  var childrenRef = (0, _react.useRef)();
44
56
  var setHeightTimerRef = (0, _react.useRef)(null);
@@ -80,7 +92,8 @@ var Panel = /*#__PURE__*/_react.default.forwardRef(function (props, ref) {
80
92
  className: className,
81
93
  onClick: handleClick
82
94
  }, expandIconPosition === 'left' ? renderIcon() : null, header && /*#__PURE__*/_react.default.createElement("span", {
83
- className: headerClassName
95
+ className: headerClassName,
96
+ title: title
84
97
  }, renderReactNode(header)));
85
98
  };
86
99
  var renderRight = function renderRight() {
@@ -147,11 +160,11 @@ var Panel = /*#__PURE__*/_react.default.forwardRef(function (props, ref) {
147
160
  expand ? expandWidthoutAnimation(childrenRef.current) : runCollapseAnimation(childrenRef.current);
148
161
  }
149
162
  }, [childrenRef.current, expandAnimation, expand]);
150
- return /*#__PURE__*/_react.default.createElement("div", {
163
+ return /*#__PURE__*/_react.default.createElement("div", (0, _extends2.default)({
151
164
  className: rootClassName,
152
165
  style: style,
153
166
  ref: panelPrefixClsRef
154
- }, /*#__PURE__*/_react.default.createElement("span", {
167
+ }, others), /*#__PURE__*/_react.default.createElement("span", {
155
168
  className: topClassName
156
169
  }, renderLeft(), renderMiddle(), renderRight()), /*#__PURE__*/_react.default.createElement("div", {
157
170
  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;
@@ -17,6 +17,7 @@ export interface FormItemProps {
17
17
  validateTrigger?: string | string[];
18
18
  wrapperWidth?: string | number;
19
19
  valuePropName?: string;
20
+ extra?: React.ReactNode;
20
21
  }
21
22
  export declare const INNER_VALUE_PROPS_LIST: {
22
23
  name: string;
package/lib/form/Field.js CHANGED
@@ -114,7 +114,8 @@ var Field = function Field(props) {
114
114
  wrapperWidth = props.wrapperWidth,
115
115
  validateTrigger = props.validateTrigger,
116
116
  defaultValue = props.defaultValue,
117
- valuePropName = props.valuePropName;
117
+ valuePropName = props.valuePropName,
118
+ extra = props.extra;
118
119
  var htmlFor = customizeHtmlFor || (name ? (0, _concat.default)(_context = "form_".concat(name, "_")).call(_context, (Math.random() * 100).toFixed(0)) : undefined);
119
120
  var childrenNode = null;
120
121
  var innerValuePropName = 'value';
@@ -200,7 +201,7 @@ var Field = function Field(props) {
200
201
  };
201
202
  }, []);
202
203
  var formPrefixCls = getPrefixCls === null || getPrefixCls === void 0 ? void 0 : getPrefixCls(prefixCls, 'form', customizePrefixcls);
203
- var formItemClassName = (0, _classnames2.default)((_classnames = {}, (0, _defineProperty2.default)(_classnames, "".concat(formPrefixCls), true), (0, _defineProperty2.default)(_classnames, "".concat(formPrefixCls, "-field"), true), (0, _defineProperty2.default)(_classnames, "".concat(formPrefixCls, "-field-hidden"), hidden), (0, _defineProperty2.default)(_classnames, "".concat(formPrefixCls, "-field-vertical"), vertical), _classnames), className);
204
+ var formItemClassName = (0, _classnames2.default)((_classnames = {}, (0, _defineProperty2.default)(_classnames, "".concat(formPrefixCls), true), (0, _defineProperty2.default)(_classnames, "".concat(formPrefixCls, "-field"), true), (0, _defineProperty2.default)(_classnames, "".concat(formPrefixCls, "-field-hidden"), hidden), (0, _defineProperty2.default)(_classnames, "".concat(formPrefixCls, "-field-vertical"), vertical), (0, _defineProperty2.default)(_classnames, "".concat(formPrefixCls, "-field-extra"), extra), _classnames), className);
204
205
  var value = getFieldValue(name);
205
206
  var validateMessage = getFieldError(name);
206
207
  var getInputValueFormProp = function getInputValueFormProp(evt) {
@@ -295,7 +296,8 @@ var Field = function Field(props) {
295
296
  requiredMark: mergedRequired
296
297
  }), /*#__PURE__*/_react.default.createElement(_FieldWrapper.default, {
297
298
  width: wrapperWidth,
298
- validateMessage: validateMessage
299
+ validateMessage: validateMessage,
300
+ extra: extra
299
301
  }, (0, _map.default)(childrenArray).call(childrenArray, function (child, index) {
300
302
  var keys = mergeProps((0, _extends3.default)((0, _extends3.default)({}, generateEventHandler(handleValueValidate, validateTrigger)), {
301
303
  key: index,
@@ -1,5 +1,6 @@
1
1
  import React from 'react';
2
2
  export interface FieldWrapperProps {
3
+ extra?: React.ReactNode;
3
4
  children?: React.ReactNode;
4
5
  width?: string | number;
5
6
  validateMessage?: string;
@@ -23,19 +23,27 @@ var FieldWrapper = function FieldWrapper(props) {
23
23
  var children = wrapperProps.children,
24
24
  customizePrefixCls = wrapperProps.prefixCls,
25
25
  width = wrapperProps.width,
26
- validateMessage = wrapperProps.validateMessage;
26
+ validateMessage = wrapperProps.validateMessage,
27
+ extra = wrapperProps.extra;
27
28
  var wrapperPrefixCls = getPrefixCls === null || getPrefixCls === void 0 ? void 0 : getPrefixCls(prefixCls, 'form-field-wrapper', customizePrefixCls);
28
29
  var wrapperClassName = (0, _classnames.default)(["".concat(wrapperPrefixCls)]);
29
30
  var messageClassName = (0, _classnames.default)(["".concat(wrapperPrefixCls, "-message")]);
31
+ var validate = validateMessage ? /*#__PURE__*/_react.default.createElement("p", {
32
+ className: messageClassName,
33
+ title: validateMessage
34
+ }, validateMessage) : null;
30
35
  return /*#__PURE__*/_react.default.createElement("div", {
31
36
  className: wrapperClassName,
32
37
  style: {
33
38
  width: width
34
39
  }
35
- }, children, validateMessage && /*#__PURE__*/_react.default.createElement("p", {
36
- className: messageClassName,
37
- title: validateMessage
38
- }, validateMessage));
40
+ }, children, extra ? /*#__PURE__*/_react.default.createElement("div", {
41
+ className: "".concat(wrapperPrefixCls, "-extra")
42
+ }, /*#__PURE__*/_react.default.createElement("div", {
43
+ className: "".concat(wrapperPrefixCls, "-extra-message")
44
+ }, validateMessage), /*#__PURE__*/_react.default.createElement("div", {
45
+ className: "".concat(wrapperPrefixCls, "-extra-text")
46
+ }, extra)) : /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, validate));
39
47
  };
40
48
  var _default = FieldWrapper;
41
49
  exports.default = _default;
@@ -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
+ }
@@ -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
- &-message {
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
  }
@@ -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);
@@ -22,6 +22,7 @@ var _formatUtil = require("../_utils/formatUtil");
22
22
  var _devwarning = _interopRequireDefault(require("../_utils/devwarning"));
23
23
  var _big = _interopRequireDefault(require("big.js"));
24
24
  var _classnames = _interopRequireDefault(require("classnames"));
25
+ var _useSelectionRange = _interopRequireDefault(require("./useSelectionRange"));
25
26
  function _getRequireWildcardCache(nodeInterop) { if (typeof _WeakMap !== "function") return null; var cacheBabelInterop = new _WeakMap(); var cacheNodeInterop = new _WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
26
27
  function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && _Object$getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? _Object$getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
27
28
  var __rest = void 0 && (void 0).__rest || function (s, e) {
@@ -33,6 +34,7 @@ var __rest = void 0 && (void 0).__rest || function (s, e) {
33
34
  return t;
34
35
  };
35
36
  var InternalInputNumber = function InternalInputNumber(props, ref) {
37
+ var _a;
36
38
  var _useContext = (0, _react.useContext)(_ConfigContext.default),
37
39
  userDefaultProps = _useContext.compDefaultProps,
38
40
  getPrefixCls = _useContext.getPrefixCls,
@@ -122,6 +124,7 @@ var InternalInputNumber = function InternalInputNumber(props, ref) {
122
124
  if (legalNumber === false) {
123
125
  return false;
124
126
  }
127
+ updateSelectionRangePosition(event);
125
128
  value === undefined && setInputValue(legalNumber);
126
129
  onChange && onChange(handleEventAttachValue(event, numberMode ? Number(legalNumber) : legalNumber));
127
130
  };
@@ -237,10 +240,12 @@ var InternalInputNumber = function InternalInputNumber(props, ref) {
237
240
  // 还原最小值
238
241
  if (typeof min === 'number' && bigValue.lt(min)) {
239
242
  _inputValue = min.toString();
243
+ onChange === null || onChange === void 0 ? void 0 : onChange(handleEventAttachValue(event, numberMode ? Number(_inputValue) : _inputValue));
240
244
  }
241
245
  // 还原最大值
242
- if (typeof min === 'number' && bigValue.gt(max)) {
246
+ if (typeof max === 'number' && bigValue.gt(max)) {
243
247
  _inputValue = max.toString();
248
+ onChange === null || onChange === void 0 ? void 0 : onChange(handleEventAttachValue(event, numberMode ? Number(_inputValue) : _inputValue));
244
249
  }
245
250
  // 超过精度位数直接截断
246
251
  _inputValue = handleNumericalAccuracy(_inputValue);
@@ -312,9 +317,16 @@ var InternalInputNumber = function InternalInputNumber(props, ref) {
312
317
  }
313
318
  };
314
319
  });
320
+ var displayedInputValue = (0, _react.useMemo)(function () {
321
+ return formatter ? formatter(inputValue) : inputValue;
322
+ }, [inputValue, formatter]);
323
+ var updateSelectionRangePosition = (0, _useSelectionRange.default)({
324
+ inputElement: (_a = inputNumberRef.current) === null || _a === void 0 ? void 0 : _a.input,
325
+ inputValue: displayedInputValue
326
+ });
315
327
  return /*#__PURE__*/_react.default.createElement(_input.default, (0, _extends2.default)({}, others, {
316
328
  ref: inputNumberRef,
317
- value: inputValue ? (formatter === null || formatter === void 0 ? void 0 : formatter(inputValue)) || inputValue : inputValue,
329
+ value: displayedInputValue,
318
330
  prefix: prefix,
319
331
  suffix: suffix,
320
332
  onChange: handleChange,
@@ -0,0 +1,4 @@
1
+ export default function useSelectionRange({ inputElement, inputValue, }: {
2
+ inputElement: HTMLInputElement;
3
+ inputValue: string;
4
+ }): (event: any) => void;
@@ -0,0 +1,29 @@
1
+ "use strict";
2
+
3
+ var _interopRequireDefault = require("@babel/runtime-corejs3/helpers/interopRequireDefault");
4
+ Object.defineProperty(exports, "__esModule", {
5
+ value: true
6
+ });
7
+ exports.default = useSelectionRange;
8
+ var _react = require("react");
9
+ var _isNumber = _interopRequireDefault(require("lodash/isNumber"));
10
+ function useSelectionRange(_ref) {
11
+ var inputElement = _ref.inputElement,
12
+ inputValue = _ref.inputValue;
13
+ var refSelectionPosition = (0, _react.useRef)();
14
+ (0, _react.useLayoutEffect)(function () {
15
+ var position = refSelectionPosition.current;
16
+ if (inputElement && inputValue && (0, _isNumber.default)(position)) {
17
+ var start = Math.max(0, inputValue.length - position);
18
+ inputElement.setSelectionRange(start, start);
19
+ }
20
+ }, [inputValue]);
21
+ return function (event) {
22
+ var _event$target = event.target,
23
+ end = _event$target.selectionEnd,
24
+ value = _event$target.value;
25
+ if ((0, _isNumber.default)(end)) {
26
+ refSelectionPosition.current = value.length - end;
27
+ }
28
+ };
29
+ }
@@ -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.noData': string; /**
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[];
@@ -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.noData': string;
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[];
@@ -46,9 +46,11 @@ var locale = (0, _extends2.default)((0, _extends2.default)({
46
46
  'QuickSearch.emptyTip': '暂无数据',
47
47
  'QuickSearch.or': '或',
48
48
  'CityPicker.domestic': '国内',
49
- 'CityPicker.internation': '国际',
50
49
  'CityPicker.common': '常用',
51
- 'CityPicker.noData': '暂无数据',
50
+ 'CityPicker.emptyText': '暂无数据',
51
+ 'CityPicker.commonEmptyText': '无常用城市',
52
+ 'CityPicker.tabsDomestic': '国内',
53
+ 'CityPicker.tabsInternation': '国际/中国港澳台',
52
54
  'ColorPicker.followFunctionalColor': '跟随功能色',
53
55
  'Search.placeholder': '请输入需要搜索的内容',
54
56
  'Search.desc': ['空格代表"或",回车代表"且"'],
@@ -169,6 +169,7 @@
169
169
  .kd-radio-input {
170
170
  position: absolute;
171
171
  opacity: 0;
172
+ left: 0;
172
173
  }
173
174
  .kd-radio > span {
174
175
  padding: 0 6px 0 var(--kd-c-radio-spacing-padding-left, 4px);
@@ -60,6 +60,7 @@
60
60
  &-input {
61
61
  position: absolute;
62
62
  opacity: 0;
63
+ left: 0;
63
64
  }
64
65
 
65
66
  &>span {