@kdcloudjs/kdesign 1.7.23 → 1.7.25

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 (58) hide show
  1. package/CHANGELOG.md +64 -0
  2. package/dist/kdesign-complete.less +31 -18
  3. package/dist/kdesign.css +59 -18
  4. package/dist/kdesign.css.map +1 -1
  5. package/dist/kdesign.js +522 -213
  6. package/dist/kdesign.js.map +1 -1
  7. package/dist/kdesign.min.css +4 -4
  8. package/dist/kdesign.min.js +8 -8
  9. package/dist/kdesign.min.js.map +1 -1
  10. package/es/_utils/usePopper.d.ts +1 -0
  11. package/es/_utils/usePopper.js +40 -21
  12. package/es/city-picker/city-picker.js +36 -25
  13. package/es/city-picker/interface.d.ts +1 -0
  14. package/es/city-picker/option.js +2 -2
  15. package/es/city-picker/style/index.css +14 -10
  16. package/es/city-picker/style/index.less +9 -6
  17. package/es/city-picker/style/token.less +4 -5
  18. package/es/input-number/inputNumber.js +20 -5
  19. package/es/input-number/useSelectionRange.d.ts +4 -0
  20. package/es/input-number/useSelectionRange.js +22 -0
  21. package/es/locale/locale.d.ts +4 -4
  22. package/es/locale/zh-CN.d.ts +4 -2
  23. package/es/locale/zh-CN.js +4 -2
  24. package/es/radio/style/index.css +2 -0
  25. package/es/radio/style/index.less +2 -0
  26. package/es/search/search.js +2 -1
  27. package/es/select/select.js +6 -5
  28. package/es/select/style/index.css +6 -3
  29. package/es/select/style/index.less +10 -4
  30. package/es/select/style/token.less +1 -1
  31. package/es/style/core/motion/slide.less +5 -2
  32. package/es/style/index.css +36 -4
  33. package/es/table/api.js +19 -3
  34. package/lib/_utils/usePopper.d.ts +1 -0
  35. package/lib/_utils/usePopper.js +40 -21
  36. package/lib/city-picker/city-picker.js +36 -25
  37. package/lib/city-picker/interface.d.ts +1 -0
  38. package/lib/city-picker/option.js +2 -2
  39. package/lib/city-picker/style/index.css +14 -10
  40. package/lib/city-picker/style/index.less +9 -6
  41. package/lib/city-picker/style/token.less +4 -5
  42. package/lib/input-number/inputNumber.js +19 -4
  43. package/lib/input-number/useSelectionRange.d.ts +4 -0
  44. package/lib/input-number/useSelectionRange.js +29 -0
  45. package/lib/locale/locale.d.ts +4 -4
  46. package/lib/locale/zh-CN.d.ts +4 -2
  47. package/lib/locale/zh-CN.js +4 -2
  48. package/lib/radio/style/index.css +2 -0
  49. package/lib/radio/style/index.less +2 -0
  50. package/lib/search/search.js +2 -1
  51. package/lib/select/select.js +6 -5
  52. package/lib/select/style/index.css +6 -3
  53. package/lib/select/style/index.less +10 -4
  54. package/lib/select/style/token.less +1 -1
  55. package/lib/style/core/motion/slide.less +5 -2
  56. package/lib/style/index.css +36 -4
  57. package/lib/table/api.js +19 -3
  58. package/package.json +2 -2
@@ -25,6 +25,7 @@ export interface PopperProps {
25
25
  onVisibleChange?: (visible: boolean) => void;
26
26
  getTriggerElement?: (locatorNode: HTMLElement) => HTMLElement;
27
27
  getPopupContainer?: (locatorNode: HTMLElement) => HTMLElement;
28
+ onTransitionEnd?: (e: React.TransitionEvent) => void;
28
29
  }
29
30
  declare function usePopper(locatorElement: React.ReactElement, popperElement: React.ReactElement, props: PopperProps): JSX.Element;
30
31
  export default usePopper;
@@ -100,6 +100,19 @@ var getScrollDist = function getScrollDist(el, container) {
100
100
  }
101
101
  return elScroll;
102
102
  };
103
+ var getRealDom = function getRealDom(locatorRef, locatorElement) {
104
+ var _a;
105
+ if (!locatorRef.current) return locatorRef.current;
106
+ var REF_NAME_OBJ = {
107
+ Input: 'input',
108
+ InputNumber: 'input',
109
+ Select: 'select',
110
+ Upload: 'input'
111
+ };
112
+ if (locatorRef.current.tagName) return locatorRef.current;
113
+ var name = REF_NAME_OBJ[(_a = locatorElement === null || locatorElement === void 0 ? void 0 : locatorElement.type) === null || _a === void 0 ? void 0 : _a.displayName];
114
+ return locatorRef === null || locatorRef === void 0 ? void 0 : locatorRef.current[name];
115
+ };
103
116
  function usePopper(locatorElement, popperElement, props) {
104
117
  var _context3, _context4, _arrowStyle;
105
118
  var prefixCls = props.prefixCls,
@@ -140,7 +153,8 @@ function usePopper(locatorElement, popperElement, props) {
140
153
  _props$getPopupContai = props.getPopupContainer,
141
154
  getPopupContainer = _props$getPopupContai === void 0 ? function () {
142
155
  return document.body;
143
- } : _props$getPopupContai;
156
+ } : _props$getPopupContai,
157
+ onTransitionEnd = props.onTransitionEnd;
144
158
  var arrowWidth = Math.sqrt(2 * Math.pow(arrowSize, 2));
145
159
  var componentName = (prefixCls === null || prefixCls === void 0 ? void 0 : prefixCls.split('-')[1]) || '';
146
160
  devWarning(Placements.indexOf(placement) === -1, componentName, _concatInstanceProperty(_context3 = "cannot found ".concat(componentName, " placement '")).call(_context3, placement, "'"));
@@ -152,10 +166,11 @@ function usePopper(locatorElement, popperElement, props) {
152
166
  var popperEl = useRef();
153
167
  var locatorRef = locatorElement.ref || locatorEl;
154
168
  var popperRef = popperElement.ref || popperEl;
155
- var container = getPopupContainer(locatorRef.current || document.body);
169
+ var container = getPopupContainer(getRealDom(locatorRef, locatorElement) || document.body);
156
170
  _Promise.resolve().then(function () {
157
- var triggerNode = getTriggerElement(locatorRef.current);
158
- var container = getPopupContainer(locatorRef.current);
171
+ var realDom = getRealDom(locatorRef, locatorElement);
172
+ var triggerNode = getTriggerElement(realDom);
173
+ var container = getPopupContainer(realDom);
159
174
  devWarning(!triggerNode, componentName, "getTriggerElement() must return a HTMLElement, but now it does not return anything");
160
175
  devWarning(!container, componentName, "getPopupContainer() must return a HTMLElement, but now it does not return anything");
161
176
  });
@@ -218,30 +233,31 @@ function usePopper(locatorElement, popperElement, props) {
218
233
  nextPlacement = _useState18[0],
219
234
  setNextPlacement = _useState18[1];
220
235
  var alignPopper = useCallback(function () {
221
- if ((locatorRef === null || locatorRef === void 0 ? void 0 : locatorRef.current) && (popperRef === null || popperRef === void 0 ? void 0 : popperRef.current)) {
236
+ var realDom = getRealDom(locatorRef, locatorElement);
237
+ if (realDom && (popperRef === null || popperRef === void 0 ? void 0 : popperRef.current)) {
222
238
  var _popperRef$current$ge = popperRef.current.getBoundingClientRect(),
223
239
  popperWidth = _popperRef$current$ge.width,
224
240
  popperHeight = _popperRef$current$ge.height;
225
- var _locatorRef$current$g = locatorRef.current.getBoundingClientRect(),
226
- top = _locatorRef$current$g.top,
227
- bottom = _locatorRef$current$g.bottom,
228
- left = _locatorRef$current$g.left,
229
- right = _locatorRef$current$g.right,
230
- height = _locatorRef$current$g.height,
231
- width = _locatorRef$current$g.width;
241
+ var _realDom$getBoundingC = realDom.getBoundingClientRect(),
242
+ top = _realDom$getBoundingC.top,
243
+ bottom = _realDom$getBoundingC.bottom,
244
+ left = _realDom$getBoundingC.left,
245
+ right = _realDom$getBoundingC.right,
246
+ height = _realDom$getBoundingC.height,
247
+ width = _realDom$getBoundingC.width;
232
248
  var _getOffsetPos = getOffsetPos(container),
233
249
  containerTop = _getOffsetPos.top,
234
250
  containerLeft = _getOffsetPos.left;
235
- var _getOffsetPos2 = getOffsetPos(locatorRef.current),
251
+ var _getOffsetPos2 = getOffsetPos(realDom),
236
252
  locatorTop = _getOffsetPos2.top,
237
253
  locatorLeft = _getOffsetPos2.left;
238
- var _getTranslatePos = getTranslatePos(locatorRef.current),
254
+ var _getTranslatePos = getTranslatePos(realDom),
239
255
  translateTop = _getTranslatePos.top,
240
256
  translateLeft = _getTranslatePos.left;
241
- var _getBorderWidth = getBorderWidth(locatorRef.current),
257
+ var _getBorderWidth = getBorderWidth(realDom),
242
258
  borderTop = _getBorderWidth.top,
243
259
  borderLeft = _getBorderWidth.left;
244
- var _getScrollDist = getScrollDist(locatorRef.current.parentElement, container),
260
+ var _getScrollDist = getScrollDist(realDom.parentElement, container),
245
261
  scrollTop = _getScrollDist.top,
246
262
  scrollLeft = _getScrollDist.left;
247
263
  var locatorPos = {
@@ -424,10 +440,11 @@ function usePopper(locatorElement, popperElement, props) {
424
440
  className: classNames(prefixCls, popperClassName, nextPlacement, _defineProperty({
425
441
  arrow: arrow,
426
442
  hidden: !visible
427
- }, "".concat(nextPlacement, "-active"), active))
443
+ }, "".concat(nextPlacement, "-active"), active)),
444
+ onTransitionEnd: typeof onTransitionEnd === 'function' ? onTransitionEnd : undefined
428
445
  };
429
446
  var popperNode = popperRef.current;
430
- var locatorNode = locatorRef.current;
447
+ var locatorNode = getRealDom(locatorRef, locatorElement);
431
448
  useResizeObserver(popperNode || document.body, alignPopper);
432
449
  useResizeObserver(locatorNode || document.body, alignPopper);
433
450
  var showPopper = useCallback(function (evType) {
@@ -458,7 +475,8 @@ function usePopper(locatorElement, popperElement, props) {
458
475
  useEffect(function () {
459
476
  if (exist && visible) {
460
477
  var mouseleaveTimer;
461
- var triggerNode = getTriggerElement(locatorRef.current);
478
+ var realDom = getRealDom(locatorRef, locatorElement);
479
+ var triggerNode = getTriggerElement(realDom);
462
480
  var handleHidePopper = function handleHidePopper(e) {
463
481
  var triggerRect = triggerNode.getBoundingClientRect();
464
482
  var popperRect = popperRef.current.getBoundingClientRect();
@@ -532,8 +550,9 @@ function usePopper(locatorElement, popperElement, props) {
532
550
  };
533
551
  }
534
552
  }, [alignPopper, exist, onVisibleChange, popperNode, props.visible, scrollHidden, locatorNode, visible, popperRef]);
535
- React.useEffect(function () {
536
- var triggerNode = getTriggerElement(locatorRef.current);
553
+ useEffect(function () {
554
+ var realDom = getRealDom(locatorRef, locatorElement);
555
+ var triggerNode = getTriggerElement(realDom);
537
556
  if (triggerNode) {
538
557
  var mouseenterTimer;
539
558
  var clearMouseLeave = function clearMouseLeave() {
@@ -14,20 +14,17 @@ import { Icon, Tabs, Spin } from '../index';
14
14
  import usePopper from '../_utils/usePopper';
15
15
  import Option from './option';
16
16
  import escapeRegExp from 'lodash/escapeRegExp';
17
- var tabsData = [{
18
- id: 'domestic',
19
- name: '国内'
20
- }, {
21
- id: 'foreign',
22
- name: '国际/中国港澳台'
23
- }];
24
17
  var InternalSelect = function InternalSelect(props, ref) {
25
18
  var _context, _classNames3, _classNames5;
26
19
  var _useContext = useContext(ConfigContext),
27
20
  getPrefixCls = _useContext.getPrefixCls,
28
21
  prefixCls = _useContext.prefixCls,
29
- userDefaultProps = _useContext.compDefaultProps;
22
+ userDefaultProps = _useContext.compDefaultProps,
23
+ locale = _useContext.locale;
30
24
  var selectProps = getCompProps('CityPicker', userDefaultProps, props);
25
+ var cityPickerLangMsg = locale.getCompLangMsg({
26
+ componentName: 'CityPicker'
27
+ });
31
28
  var type = selectProps.type,
32
29
  size = selectProps.size,
33
30
  value = selectProps.value,
@@ -63,7 +60,8 @@ var InternalSelect = function InternalSelect(props, ref) {
63
60
  domesticList = _selectProps$domestic === void 0 ? [] : _selectProps$domestic,
64
61
  _selectProps$foreignL = selectProps.foreignList,
65
62
  foreignList = _selectProps$foreignL === void 0 ? [] : _selectProps$foreignL,
66
- itemRender = selectProps.itemRender;
63
+ itemRender = selectProps.itemRender,
64
+ onTabPaneChange = selectProps.onTabPaneChange;
67
65
  var _useMergedState = useMergedState(undefined, {
68
66
  value: value,
69
67
  defaultValue: defaultValue
@@ -71,6 +69,13 @@ var InternalSelect = function InternalSelect(props, ref) {
71
69
  _useMergedState2 = _slicedToArray(_useMergedState, 2),
72
70
  initValue = _useMergedState2[0],
73
71
  setInitValue = _useMergedState2[1];
72
+ var tabsData = [{
73
+ id: 'domestic',
74
+ name: cityPickerLangMsg === null || cityPickerLangMsg === void 0 ? void 0 : cityPickerLangMsg.tabsDomestic
75
+ }, {
76
+ id: 'foreign',
77
+ name: cityPickerLangMsg === null || cityPickerLangMsg === void 0 ? void 0 : cityPickerLangMsg.tabsInternation
78
+ }];
74
79
  var innerRef = useRef();
75
80
  var selectRef = ref || innerRef;
76
81
  var searchRef = useRef(null); // 搜索框ref
@@ -120,11 +125,6 @@ var InternalSelect = function InternalSelect(props, ref) {
120
125
  setOptionShow(props.visible);
121
126
  }
122
127
  }, [props.visible]);
123
- useEffect(function () {
124
- if (optionShow === false) {
125
- handleClear();
126
- }
127
- }, [optionShow]);
128
128
  var handleFocus = useCallback(function (e) {
129
129
  e.stopPropagation();
130
130
  setFocusd(true);
@@ -221,6 +221,7 @@ var InternalSelect = function InternalSelect(props, ref) {
221
221
  }
222
222
  };
223
223
  var renderNodeList = function renderNodeList(data, notContent) {
224
+ var isCommon = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : false;
224
225
  if (!data.length) {
225
226
  return renderNotContent(notContent);
226
227
  }
@@ -231,7 +232,9 @@ var InternalSelect = function InternalSelect(props, ref) {
231
232
  key: item.id,
232
233
  value: initValue,
233
234
  city: item,
234
- renderCityInfo: renderCityInfo,
235
+ renderCityInfo: function renderCityInfo(data, flag) {
236
+ return _renderCityInfo(data, isCommon, flag);
237
+ },
235
238
  onChangeSelect: handleOption,
236
239
  itemRender: itemRender
237
240
  }, searchValue ? getHighlightText(item === null || item === void 0 ? void 0 : item.name, (item === null || item === void 0 ? void 0 : item[optionHighlightProps]) || searchValue) : item === null || item === void 0 ? void 0 : item.name);
@@ -246,6 +249,7 @@ var InternalSelect = function InternalSelect(props, ref) {
246
249
  };
247
250
  var toggleTabPane = function toggleTabPane(type) {
248
251
  setTabsValue(type);
252
+ onTabPaneChange === null || onTabPaneChange === void 0 ? void 0 : onTabPaneChange(type);
249
253
  };
250
254
  // 渲染下拉列表框
251
255
  var renderContent = function renderContent() {
@@ -258,22 +262,24 @@ var InternalSelect = function InternalSelect(props, ref) {
258
262
  key: item.id,
259
263
  tab: item.name
260
264
  }, item);
261
- })), tabsValue === 'domestic' ? renderNodeList(domesticList, '暂无数据') : renderNodeList(foreignList, '暂无数据')) : /*#__PURE__*/React.createElement(React.Fragment, null, !!commonList.length && /*#__PURE__*/React.createElement("div", {
265
+ })), tabsValue === 'domestic' ? renderNodeList(domesticList, cityPickerLangMsg === null || cityPickerLangMsg === void 0 ? void 0 : cityPickerLangMsg.emptyText) : renderNodeList(foreignList, cityPickerLangMsg === null || cityPickerLangMsg === void 0 ? void 0 : cityPickerLangMsg.emptyText)) : /*#__PURE__*/React.createElement(React.Fragment, null, !!commonList.length && /*#__PURE__*/React.createElement("div", {
262
266
  className: "".concat(selectPrefixCls, "-dropdown-common")
263
- }, "\u5E38\u7528"), renderNodeList(commonList, '无常用城市')));
267
+ }, cityPickerLangMsg === null || cityPickerLangMsg === void 0 ? void 0 : cityPickerLangMsg.common), renderNodeList(commonList, cityPickerLangMsg === null || cityPickerLangMsg === void 0 ? void 0 : cityPickerLangMsg.commonEmptyText, true)));
264
268
  };
265
- var renderCityInfo = useCallback(function (data) {
266
- var flag = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : false;
267
- var symbol = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : ', ';
269
+ var _renderCityInfo = useCallback(function (data) {
270
+ var isCommon = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : false;
271
+ var flag = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : false;
272
+ var symbol = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : ', ';
268
273
  if (!data) return null;
269
274
  if (isDomestic(type)) {
270
275
  var _context3;
271
- return _concatInstanceProperty(_context3 = "".concat(flag && (data === null || data === void 0 ? void 0 : data.province) ? symbol : '')).call(_context3, data === null || data === void 0 ? void 0 : data.province);
276
+ var curVal = tabsValue === 'domestic' || isCommon ? data === null || data === void 0 ? void 0 : data.province : data === null || data === void 0 ? void 0 : data.country;
277
+ return _concatInstanceProperty(_context3 = "".concat(flag && curVal ? symbol : '')).call(_context3, curVal);
272
278
  } else {
273
279
  var _context4, _context5, _context6;
274
- return _concatInstanceProperty(_context4 = _concatInstanceProperty(_context5 = _concatInstanceProperty(_context6 = "".concat(flag && (data === null || data === void 0 ? void 0 : data.province) ? symbol : '')).call(_context6, data === null || data === void 0 ? void 0 : data.province)).call(_context5, (data === null || data === void 0 ? void 0 : data.country) ? symbol : '')).call(_context4, data === null || data === void 0 ? void 0 : data.country);
280
+ return _concatInstanceProperty(_context4 = _concatInstanceProperty(_context5 = _concatInstanceProperty(_context6 = "".concat(flag && (data === null || data === void 0 ? void 0 : data.province) ? symbol : '')).call(_context6, data === null || data === void 0 ? void 0 : data.province)).call(_context5, (data === null || data === void 0 ? void 0 : data.country) && (data === null || data === void 0 ? void 0 : data.province) ? symbol : '')).call(_context4, data === null || data === void 0 ? void 0 : data.country);
275
281
  }
276
- }, [type]);
282
+ }, [type, tabsValue]);
277
283
  var renderSingle = function renderSingle() {
278
284
  var hiddenStyle = !!searchValue || (initValue !== null && initValue !== void 0 ? initValue : '') !== '' ? {
279
285
  visibility: 'hidden'
@@ -298,7 +304,7 @@ var InternalSelect = function InternalSelect(props, ref) {
298
304
  title: seletedCity === null || seletedCity === void 0 ? void 0 : seletedCity.name
299
305
  }, seletedCity === null || seletedCity === void 0 ? void 0 : seletedCity.name)), !searchValue && /*#__PURE__*/React.createElement("span", {
300
306
  className: "".concat(selectPrefixCls, "-content-info")
301
- }, renderCityInfo(seletedCity))), /*#__PURE__*/React.createElement("span", {
307
+ }, _renderCityInfo(seletedCity))), /*#__PURE__*/React.createElement("span", {
302
308
  className: "".concat(selectPrefixCls, "-placeholder"),
303
309
  style: hiddenStyle
304
310
  }, placeholder), /*#__PURE__*/React.createElement("span", {
@@ -370,7 +376,12 @@ var InternalSelect = function InternalSelect(props, ref) {
370
376
  defaultVisible: optionShow,
371
377
  visible: optionShow,
372
378
  onVisibleChange: handleVisibleChange,
373
- clickToClose: !searchValue
379
+ clickToClose: !searchValue,
380
+ onTransitionEnd: function onTransitionEnd() {
381
+ if (optionShow === false) {
382
+ handleClear();
383
+ }
384
+ }
374
385
  });
375
386
  return usePopper(renderCityPicker(), renderContent(), popperProps);
376
387
  };
@@ -43,6 +43,7 @@ export interface CityPickerProps {
43
43
  onSearch?: (value: string) => void;
44
44
  onClear?: () => void;
45
45
  itemRender?: (city: City) => React.ReactNode;
46
+ onTabPaneChange?: (id: Type) => void;
46
47
  }
47
48
  export interface ICityPickerOptionProps {
48
49
  disabled?: boolean;
@@ -31,9 +31,9 @@ var InternalOption = function InternalOption(props, ref) {
31
31
  className: optionCls,
32
32
  title: name,
33
33
  onClick: handleClick
34
- }, typeof itemRender === 'function' ? itemRender(city) : /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("div", {
34
+ }, typeof itemRender === 'function' ? itemRender(city) : /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("span", {
35
35
  className: "".concat(selectOptionPrefixCls, "-content")
36
- }, children), /*#__PURE__*/React.createElement("div", {
36
+ }, children), /*#__PURE__*/React.createElement("span", {
37
37
  className: "".concat(selectOptionPrefixCls, "-info")
38
38
  }, renderCityInfo === null || renderCityInfo === void 0 ? void 0 : renderCityInfo(city, true)))));
39
39
  };
@@ -264,6 +264,12 @@
264
264
  padding: 0 12px;
265
265
  font-size: 12px;
266
266
  }
267
+ .kd-city-picker-dropdown .kd-tabs-tab-list .kd-tab-pane-type-line .kd-tab-pane-text {
268
+ overflow: hidden;
269
+ white-space: nowrap;
270
+ text-overflow: ellipsis;
271
+ width: 100%;
272
+ }
267
273
  .kd-city-picker-dropdown .kd-tabs-noContainer {
268
274
  height: unset;
269
275
  }
@@ -307,8 +313,13 @@
307
313
  padding: 8px 0;
308
314
  max-height: 320px;
309
315
  overflow-y: auto;
316
+ -webkit-box-sizing: content-box;
317
+ box-sizing: content-box;
310
318
  }
311
319
  .kd-city-picker-list-item {
320
+ overflow: hidden;
321
+ white-space: nowrap;
322
+ text-overflow: ellipsis;
312
323
  position: relative;
313
324
  display: block;
314
325
  font-weight: normal;
@@ -317,16 +328,8 @@
317
328
  padding: 5px 12px;
318
329
  color: var(--kd-c-city-picker-footer-color-text, var(--kd-g-color-text-primary, #212121));
319
330
  line-height: var(--kd-c-city-picker-dropdown-line-height, 22px);
320
- display: -webkit-box;
321
- display: -ms-flexbox;
322
- display: flex;
323
331
  cursor: pointer;
324
332
  }
325
- .kd-city-picker-list-item-content {
326
- overflow: hidden;
327
- white-space: nowrap;
328
- text-overflow: ellipsis;
329
- }
330
333
  .kd-city-picker-list-item-info {
331
334
  color: var(--kd-c-city-picker-placeholder-color-text, #b2b2b2);
332
335
  white-space: nowrap;
@@ -335,7 +338,8 @@
335
338
  background-color: var(--kd-c-city-picker-color-background, #f5f5f5);
336
339
  }
337
340
  .kd-city-picker-list-item-selected:not(.kd-city-picker-list-item-disabled) {
338
- background-color: var(--kd-c-city-picker-color-background-selected, #f2f6ff);
341
+ background-color: var(--kd-c-city-picker-color-background-selected, var(--kd-g-color-theme-3, #e3eeff));
342
+ color: var(--kd-c-city-picker-list-item-color-text-selected, var(--kd-g-color-theme, #5582f3));
339
343
  }
340
344
  .kd-city-picker-list-item-disabled {
341
345
  color: var(--kd-c-city-picker-item-color-text-disabled, var(--kd-g-color-disabled, #b2b2b2));
@@ -343,7 +347,7 @@
343
347
  background-color: var(--kd-c-city-picker-item-color-background-disabled, #fff);
344
348
  }
345
349
  .kd-city-picker-highlight {
346
- color: #5582f3;
350
+ color: var(--kd-c-city-picker-highlight-color-text, var(--kd-g-color-theme, #5582f3));
347
351
  }
348
352
  .kd-city-picker-size-small {
349
353
  min-height: var(--kd-c-city-picker-sizing-height-small, 24px);
@@ -159,6 +159,11 @@
159
159
  &-type-line {
160
160
  padding: 0 12px;
161
161
  font-size: 12px;
162
+
163
+ .@{kd-prefix}-tab-pane-text {
164
+ .over();
165
+ width: 100%;
166
+ }
162
167
  }
163
168
  }
164
169
  }
@@ -200,17 +205,14 @@
200
205
  padding: 8px 0;
201
206
  max-height: 320px;
202
207
  overflow-y: auto;
208
+ box-sizing: content-box;
203
209
 
204
210
  // 下拉列表选项
205
211
  &-item {
212
+ .over();
206
213
  .item();
207
- display: flex;
208
214
  cursor: pointer;
209
215
 
210
- &-content {
211
- .over();
212
- }
213
-
214
216
  &-info {
215
217
  color: @city-picker-placeholder-color;
216
218
  white-space: nowrap;
@@ -222,6 +224,7 @@
222
224
 
223
225
  &-selected:not(&-disabled) {
224
226
  background-color: @city-picker-item-selected-bg;
227
+ color: @city-picker-list-item-color-selected;
225
228
  }
226
229
 
227
230
  &-disabled {
@@ -233,7 +236,7 @@
233
236
  }
234
237
 
235
238
  &-highlight {
236
- color: #5582f3;
239
+ color: @city-picker-highlight-color;
237
240
  }
238
241
 
239
242
  // 选择器框大小
@@ -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); // 下拉列表文字大小
@@ -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,
@@ -49,7 +51,8 @@ var InternalInputNumber = function InternalInputNumber(props, ref) {
49
51
  suffix = inputNumberProps.suffix,
50
52
  formatter = inputNumberProps.formatter,
51
53
  className = inputNumberProps.className,
52
- others = __rest(inputNumberProps, ["value", "defaultValue", "mustInScope", "decimalLength", "mustInPrecisionScope", "digitLength", "onChange", "symbol", "zeroShow", "showDecimalTailZero", "code", "roundMethod", "mask", "stepOption", "min", "minMark", "max", "maxMark", "numberMode", "prefix", "suffix", "formatter", "className"]);
54
+ onKeyDown = inputNumberProps.onKeyDown,
55
+ others = __rest(inputNumberProps, ["value", "defaultValue", "mustInScope", "decimalLength", "mustInPrecisionScope", "digitLength", "onChange", "symbol", "zeroShow", "showDecimalTailZero", "code", "roundMethod", "mask", "stepOption", "min", "minMark", "max", "maxMark", "numberMode", "prefix", "suffix", "formatter", "className", "onKeyDown"]);
53
56
  var initVal = value === undefined ? defaultValue : value;
54
57
  var _useState = useState(serialization(initVal !== undefined ? initVal + '' : '')),
55
58
  _useState2 = _slicedToArray(_useState, 2),
@@ -109,6 +112,7 @@ var InternalInputNumber = function InternalInputNumber(props, ref) {
109
112
  if (legalNumber === false) {
110
113
  return false;
111
114
  }
115
+ updateSelectionRangePosition(event);
112
116
  value === undefined && setInputValue(legalNumber);
113
117
  onChange && onChange(handleEventAttachValue(event, numberMode ? Number(legalNumber) : legalNumber));
114
118
  };
@@ -173,12 +177,13 @@ var InternalInputNumber = function InternalInputNumber(props, ref) {
173
177
  return resultNumerical;
174
178
  };
175
179
  var handleStepChang = function handleStepChang(type) {
180
+ var _a, _b;
176
181
  var step = stepOption.step === undefined ? 1 : parseFloat(stepOption.step);
177
182
  if (typeof step !== 'number') {
178
183
  devWarning(true, 'inputNumber', "stepOption.step\u5FC5\u987B\u4E3A\u4E00\u4E2A\u6570\u503C");
179
184
  return false;
180
185
  }
181
- var startingNumber = parseFloat(inputNumberRef.current.value) || 0;
186
+ var startingNumber = parseFloat((_b = (_a = inputNumberRef.current) === null || _a === void 0 ? void 0 : _a.input) === null || _b === void 0 ? void 0 : _b.value) || 0;
182
187
  var calculationResults = new Big(startingNumber)[type](step).valueOf();
183
188
  var legalNumber = verifiValue(calculationResults);
184
189
  if (legalNumber === false) {
@@ -193,6 +198,7 @@ var InternalInputNumber = function InternalInputNumber(props, ref) {
193
198
  };
194
199
  var handleKeyDown = function handleKeyDown(event) {
195
200
  var _context11;
201
+ onKeyDown === null || onKeyDown === void 0 ? void 0 : onKeyDown(event);
196
202
  if (!stepOption || props.disabled || props.readOnly) {
197
203
  return;
198
204
  }
@@ -222,10 +228,12 @@ var InternalInputNumber = function InternalInputNumber(props, ref) {
222
228
  // 还原最小值
223
229
  if (typeof min === 'number' && bigValue.lt(min)) {
224
230
  _inputValue = min.toString();
231
+ onChange === null || onChange === void 0 ? void 0 : onChange(handleEventAttachValue(event, numberMode ? Number(_inputValue) : _inputValue));
225
232
  }
226
233
  // 还原最大值
227
- if (typeof min === 'number' && bigValue.gt(max)) {
234
+ if (typeof max === 'number' && bigValue.gt(max)) {
228
235
  _inputValue = max.toString();
236
+ onChange === null || onChange === void 0 ? void 0 : onChange(handleEventAttachValue(event, numberMode ? Number(_inputValue) : _inputValue));
229
237
  }
230
238
  // 超过精度位数直接截断
231
239
  _inputValue = handleNumericalAccuracy(_inputValue);
@@ -297,9 +305,16 @@ var InternalInputNumber = function InternalInputNumber(props, ref) {
297
305
  }
298
306
  };
299
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
+ });
300
315
  return /*#__PURE__*/React.createElement(Input, _extends({}, others, {
301
316
  ref: inputNumberRef,
302
- value: inputValue ? (formatter === null || formatter === void 0 ? void 0 : formatter(inputValue)) || inputValue : inputValue,
317
+ value: displayedInputValue,
303
318
  prefix: prefix,
304
319
  suffix: suffix,
305
320
  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,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
+ }
@@ -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[];
@@ -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.noData': '暂无数据',
43
+ 'CityPicker.emptyText': '暂无数据',
44
+ 'CityPicker.commonEmptyText': '无常用城市',
45
+ 'CityPicker.tabsDomestic': '国内',
46
+ 'CityPicker.tabsInternation': '国际/中国港澳台',
45
47
  'ColorPicker.followFunctionalColor': '跟随功能色',
46
48
  'Search.placeholder': '请输入需要搜索的内容',
47
49
  'Search.desc': ['空格代表"或",回车代表"且"'],
@@ -127,6 +127,7 @@
127
127
  font-size: var(--kd-c-radio-font-size, var(--kd-g-font-size-small, 12px));
128
128
  max-width: var(--kd-c-radio-default-label-max-width);
129
129
  overflow: hidden;
130
+ min-height: var(--kd-c-radio-square-sizing-width-height, 14px);
130
131
  }
131
132
  .kd-radio::before {
132
133
  position: absolute;
@@ -168,6 +169,7 @@
168
169
  .kd-radio-input {
169
170
  position: absolute;
170
171
  opacity: 0;
172
+ left: 0;
171
173
  }
172
174
  .kd-radio > span {
173
175
  padding: 0 6px 0 var(--kd-c-radio-spacing-padding-left, 4px);
@@ -24,6 +24,7 @@
24
24
  font-size: @radio-font-size;
25
25
  max-width: @radio-default-label-max-width;
26
26
  overflow: hidden;
27
+ min-height: @radio-circle-size;
27
28
 
28
29
  &::before {
29
30
  position: absolute;
@@ -59,6 +60,7 @@
59
60
  &-input {
60
61
  position: absolute;
61
62
  opacity: 0;
63
+ left: 0;
62
64
  }
63
65
 
64
66
  &>span {
@@ -59,7 +59,8 @@ var InternalSearch = function InternalSearch(props, ref) {
59
59
  onSearch && (onSearch === null || onSearch === void 0 ? void 0 : onSearch(event));
60
60
  }, [onSearch]);
61
61
  var handlePressEnter = useCallback(function (_, event) {
62
- onPressEnter && (onPressEnter === null || onPressEnter === void 0 ? void 0 : onPressEnter(searchRef.current.value, event));
62
+ var _a, _b;
63
+ onPressEnter && (onPressEnter === null || onPressEnter === void 0 ? void 0 : onPressEnter((_b = (_a = searchRef.current) === null || _a === void 0 ? void 0 : _a.input) === null || _b === void 0 ? void 0 : _b.value, event));
63
64
  }, [onPressEnter, searchRef]);
64
65
  var handleFocus = useCallback(function (event) {
65
66
  setFocused(true);