@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.
- package/CHANGELOG.md +64 -0
- package/dist/kdesign-complete.less +31 -18
- package/dist/kdesign.css +59 -18
- package/dist/kdesign.css.map +1 -1
- package/dist/kdesign.js +522 -213
- package/dist/kdesign.js.map +1 -1
- package/dist/kdesign.min.css +4 -4
- package/dist/kdesign.min.js +8 -8
- package/dist/kdesign.min.js.map +1 -1
- package/es/_utils/usePopper.d.ts +1 -0
- package/es/_utils/usePopper.js +40 -21
- package/es/city-picker/city-picker.js +36 -25
- package/es/city-picker/interface.d.ts +1 -0
- package/es/city-picker/option.js +2 -2
- package/es/city-picker/style/index.css +14 -10
- package/es/city-picker/style/index.less +9 -6
- package/es/city-picker/style/token.less +4 -5
- package/es/input-number/inputNumber.js +20 -5
- 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 +2 -0
- package/es/radio/style/index.less +2 -0
- package/es/search/search.js +2 -1
- package/es/select/select.js +6 -5
- package/es/select/style/index.css +6 -3
- package/es/select/style/index.less +10 -4
- package/es/select/style/token.less +1 -1
- package/es/style/core/motion/slide.less +5 -2
- package/es/style/index.css +36 -4
- package/es/table/api.js +19 -3
- package/lib/_utils/usePopper.d.ts +1 -0
- package/lib/_utils/usePopper.js +40 -21
- package/lib/city-picker/city-picker.js +36 -25
- package/lib/city-picker/interface.d.ts +1 -0
- package/lib/city-picker/option.js +2 -2
- package/lib/city-picker/style/index.css +14 -10
- package/lib/city-picker/style/index.less +9 -6
- package/lib/city-picker/style/token.less +4 -5
- package/lib/input-number/inputNumber.js +19 -4
- 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 +2 -0
- package/lib/radio/style/index.less +2 -0
- package/lib/search/search.js +2 -1
- package/lib/select/select.js +6 -5
- package/lib/select/style/index.css +6 -3
- package/lib/select/style/index.less +10 -4
- package/lib/select/style/token.less +1 -1
- package/lib/style/core/motion/slide.less +5 -2
- package/lib/style/index.css +36 -4
- package/lib/table/api.js +19 -3
- package/package.json +2 -2
package/es/_utils/usePopper.d.ts
CHANGED
|
@@ -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;
|
package/es/_utils/usePopper.js
CHANGED
|
@@ -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
|
|
169
|
+
var container = getPopupContainer(getRealDom(locatorRef, locatorElement) || document.body);
|
|
156
170
|
_Promise.resolve().then(function () {
|
|
157
|
-
var
|
|
158
|
-
var
|
|
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
|
-
|
|
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
|
|
226
|
-
top =
|
|
227
|
-
bottom =
|
|
228
|
-
left =
|
|
229
|
-
right =
|
|
230
|
-
height =
|
|
231
|
-
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(
|
|
251
|
+
var _getOffsetPos2 = getOffsetPos(realDom),
|
|
236
252
|
locatorTop = _getOffsetPos2.top,
|
|
237
253
|
locatorLeft = _getOffsetPos2.left;
|
|
238
|
-
var _getTranslatePos = getTranslatePos(
|
|
254
|
+
var _getTranslatePos = getTranslatePos(realDom),
|
|
239
255
|
translateTop = _getTranslatePos.top,
|
|
240
256
|
translateLeft = _getTranslatePos.left;
|
|
241
|
-
var _getBorderWidth = getBorderWidth(
|
|
257
|
+
var _getBorderWidth = getBorderWidth(realDom),
|
|
242
258
|
borderTop = _getBorderWidth.top,
|
|
243
259
|
borderLeft = _getBorderWidth.left;
|
|
244
|
-
var _getScrollDist = getScrollDist(
|
|
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
|
|
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
|
|
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
|
-
|
|
536
|
-
var
|
|
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,
|
|
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
|
-
},
|
|
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
|
|
266
|
-
var
|
|
267
|
-
var
|
|
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
|
-
|
|
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
|
-
},
|
|
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
|
};
|
package/es/city-picker/option.js
CHANGED
|
@@ -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("
|
|
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("
|
|
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, #
|
|
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:
|
|
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',
|
|
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
|
-
|
|
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
|
|
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:
|
|
317
|
+
value: displayedInputValue,
|
|
303
318
|
prefix: prefix,
|
|
304
319
|
suffix: suffix,
|
|
305
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
|
@@ -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 {
|
package/es/search/search.js
CHANGED
|
@@ -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
|
-
|
|
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);
|