@kdcloudjs/kdesign 1.6.27 → 1.6.28
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/dist/kdesign-complete.less +47 -0
- package/dist/kdesign.css +4 -1
- package/dist/kdesign.css.map +1 -1
- package/dist/kdesign.js +1630 -126
- package/dist/kdesign.js.map +1 -1
- package/dist/kdesign.min.css +2 -2
- package/dist/kdesign.min.js +8 -8
- package/dist/kdesign.min.js.map +1 -1
- package/es/_utils/numberUtil.js +1 -3
- package/es/config-provider/compDefaultProps.d.ts +1 -0
- package/es/config-provider/compDefaultProps.js +2 -1
- package/es/date-picker/date-picker.js +23 -22
- package/es/date-picker/range/input-range.js +2 -4
- package/es/date-picker/range-picker.d.ts +1 -0
- package/es/date-picker/range-picker.js +2 -0
- package/es/date-picker/single/input-date.js +2 -4
- package/es/dropdown/dropdown.js +8 -3
- package/es/form/Field.js +21 -25
- package/es/image/preview-group.js +6 -4
- package/es/image/preview.js +2 -1
- package/es/input/ClearableLabeledInput.d.ts +1 -0
- package/es/input/ClearableLabeledInput.js +9 -4
- package/es/input/TextArea.js +18 -4
- package/es/input/input.d.ts +1 -0
- package/es/input/input.js +47 -10
- package/es/input/style/index.css +3 -0
- package/es/input/style/index.less +47 -0
- package/es/input-number/inputNumber.d.ts +1 -0
- package/es/input-number/inputNumber.js +4 -3
- package/es/radio/index.js +1 -0
- package/es/select/select.js +23 -20
- package/es/upload/interface.d.ts +1 -0
- package/es/upload/upload.js +11 -6
- package/lib/_utils/numberUtil.js +1 -3
- package/lib/config-provider/compDefaultProps.d.ts +1 -0
- package/lib/config-provider/compDefaultProps.js +2 -1
- package/lib/date-picker/date-picker.js +23 -22
- package/lib/date-picker/range/input-range.js +2 -4
- package/lib/date-picker/range-picker.d.ts +1 -0
- package/lib/date-picker/range-picker.js +2 -0
- package/lib/date-picker/single/input-date.js +2 -4
- package/lib/dropdown/dropdown.js +8 -3
- package/lib/form/Field.js +22 -27
- package/lib/image/preview-group.js +6 -4
- package/lib/image/preview.js +3 -1
- package/lib/input/ClearableLabeledInput.d.ts +1 -0
- package/lib/input/ClearableLabeledInput.js +9 -4
- package/lib/input/TextArea.js +18 -4
- package/lib/input/input.d.ts +1 -0
- package/lib/input/input.js +46 -9
- package/lib/input/style/index.css +3 -0
- package/lib/input/style/index.less +47 -0
- package/lib/input-number/inputNumber.d.ts +1 -0
- package/lib/input-number/inputNumber.js +4 -3
- package/lib/radio/index.js +1 -0
- package/lib/select/select.js +23 -20
- package/lib/upload/interface.d.ts +1 -0
- package/lib/upload/upload.js +11 -6
- package/package.json +1 -1
package/es/_utils/numberUtil.js
CHANGED
|
@@ -147,9 +147,7 @@ export function getMaxNumberByPrecision(integerPrecision, decimalPrecision) {
|
|
|
147
147
|
*/
|
|
148
148
|
|
|
149
149
|
export function isExp(number) {
|
|
150
|
-
|
|
151
|
-
if (isNaN(number) || !isFinite(number)) return false;
|
|
152
|
-
return /^(?!-0(\.0+)?(e|$))-?(0|[1-9]\d*)(\.\d+)?(e-?(0|[1-9]\d*))?$/i.test(number.toString());
|
|
150
|
+
return /\d+\.?\d*e[+-]*\d+/i.test(number.toString());
|
|
153
151
|
}
|
|
154
152
|
/**
|
|
155
153
|
* 将科学计数法显示的数字格式化为正常浮点数
|
|
@@ -148,17 +148,18 @@ var InternalDatePicker = function InternalDatePicker(props, ref) {
|
|
|
148
148
|
var _format = getDefaultFormat(format, picker, showTime && !disabledTimePanel, use12Hours); // 面板展示日期
|
|
149
149
|
|
|
150
150
|
|
|
151
|
-
var
|
|
152
|
-
|
|
153
|
-
|
|
154
|
-
|
|
155
|
-
return date || newDate();
|
|
156
|
-
}
|
|
157
|
-
}),
|
|
158
|
-
_useMergedState4 = _slicedToArray(_useMergedState3, 2),
|
|
159
|
-
viewDate = _useMergedState4[0],
|
|
160
|
-
setViewDate = _useMergedState4[1]; // text
|
|
151
|
+
var _useState = useState(defaultPickerValue || dateValue || new Date()),
|
|
152
|
+
_useState2 = _slicedToArray(_useState, 2),
|
|
153
|
+
viewDate = _useState2[0],
|
|
154
|
+
setInnerViewDate = _useState2[1];
|
|
161
155
|
|
|
156
|
+
var setViewDate = function setViewDate(date) {
|
|
157
|
+
setInnerViewDate(date || new Date());
|
|
158
|
+
};
|
|
159
|
+
|
|
160
|
+
useEffect(function () {
|
|
161
|
+
setViewDate(dateValue);
|
|
162
|
+
}, [dateValue]); // text
|
|
162
163
|
|
|
163
164
|
var valueText = useValueTexts(selectedValue, {
|
|
164
165
|
format: _format
|
|
@@ -198,7 +199,7 @@ var InternalDatePicker = function InternalDatePicker(props, ref) {
|
|
|
198
199
|
onEnter = _useHoverValue2[1],
|
|
199
200
|
onLeave = _useHoverValue2[2];
|
|
200
201
|
|
|
201
|
-
var
|
|
202
|
+
var _useMergedState3 = useMergedState(false, {
|
|
202
203
|
value: open,
|
|
203
204
|
defaultValue: defaultOpen,
|
|
204
205
|
postState: function postState(postOpen) {
|
|
@@ -213,12 +214,12 @@ var InternalDatePicker = function InternalDatePicker(props, ref) {
|
|
|
213
214
|
|
|
214
215
|
}
|
|
215
216
|
}),
|
|
216
|
-
|
|
217
|
-
openValue =
|
|
218
|
-
triggerInnerOpen =
|
|
217
|
+
_useMergedState4 = _slicedToArray(_useMergedState3, 2),
|
|
218
|
+
openValue = _useMergedState4[0],
|
|
219
|
+
triggerInnerOpen = _useMergedState4[1]; // Save panel is changed from which panel
|
|
219
220
|
|
|
220
221
|
|
|
221
|
-
var
|
|
222
|
+
var _useMergedState5 = useMergedState(function () {
|
|
222
223
|
if (picker === 'time') {
|
|
223
224
|
return 'time';
|
|
224
225
|
}
|
|
@@ -227,14 +228,14 @@ var InternalDatePicker = function InternalDatePicker(props, ref) {
|
|
|
227
228
|
}, {
|
|
228
229
|
value: mode
|
|
229
230
|
}),
|
|
230
|
-
|
|
231
|
-
mergedMode =
|
|
232
|
-
setInnerMode =
|
|
231
|
+
_useMergedState6 = _slicedToArray(_useMergedState5, 2),
|
|
232
|
+
mergedMode = _useMergedState6[0],
|
|
233
|
+
setInnerMode = _useMergedState6[1];
|
|
233
234
|
|
|
234
|
-
var
|
|
235
|
-
|
|
236
|
-
innerPicker =
|
|
237
|
-
setInnerPicker =
|
|
235
|
+
var _useState3 = useState(undefined),
|
|
236
|
+
_useState4 = _slicedToArray(_useState3, 2),
|
|
237
|
+
innerPicker = _useState4[0],
|
|
238
|
+
setInnerPicker = _useState4[1];
|
|
238
239
|
|
|
239
240
|
useEffect(function () {
|
|
240
241
|
setInnerMode(picker);
|
|
@@ -110,12 +110,10 @@ function InputDate(props, ref) {
|
|
|
110
110
|
|
|
111
111
|
if (allowClear && (getValue(dateValue, 0) && !mergedDisabled[0] || getValue(dateValue, 1) && !mergedDisabled[1])) {
|
|
112
112
|
clearNode = /*#__PURE__*/React.createElement("span", {
|
|
113
|
-
|
|
114
|
-
e.preventDefault();
|
|
113
|
+
onMouseUp: function onMouseUp(e) {
|
|
115
114
|
e.stopPropagation();
|
|
116
115
|
},
|
|
117
|
-
|
|
118
|
-
e.preventDefault();
|
|
116
|
+
onClick: function onClick(e) {
|
|
119
117
|
e.stopPropagation();
|
|
120
118
|
var values = dateValue;
|
|
121
119
|
|
|
@@ -18,6 +18,7 @@ export interface RangePickerSharedProps {
|
|
|
18
18
|
separator?: React.ReactNode;
|
|
19
19
|
allowEmpty?: [boolean, boolean];
|
|
20
20
|
suffixIcon?: React.ReactNode;
|
|
21
|
+
clearIcon?: React.ReactNode;
|
|
21
22
|
mode?: [PanelMode, PanelMode];
|
|
22
23
|
onChange?: (values: RangeValue, formatString: [string | null, string | null]) => void;
|
|
23
24
|
onCalendarChange?: (values: RangeValue, formatString: [string | null, string | null], info: RangeInfo) => void;
|
|
@@ -105,6 +105,7 @@ var InternalRangePicker = function InternalRangePicker(props, ref) {
|
|
|
105
105
|
_datePickerProps$seco = datePickerProps.secondStep,
|
|
106
106
|
secondStep = _datePickerProps$seco === void 0 ? 1 : _datePickerProps$seco,
|
|
107
107
|
suffixIcon = datePickerProps.suffixIcon,
|
|
108
|
+
clearIcon = datePickerProps.clearIcon,
|
|
108
109
|
panelRender = datePickerProps.panelRender,
|
|
109
110
|
renderExtraFooter = datePickerProps.renderExtraFooter,
|
|
110
111
|
disabledHours = datePickerProps.disabledHours,
|
|
@@ -696,6 +697,7 @@ var InternalRangePicker = function InternalRangePicker(props, ref) {
|
|
|
696
697
|
endOpen: endOpen,
|
|
697
698
|
needConfirmButton: needConfirmButton,
|
|
698
699
|
suffixIcon: suffixIcon,
|
|
700
|
+
clearIcon: clearIcon,
|
|
699
701
|
format: _format,
|
|
700
702
|
open: mergedOpen,
|
|
701
703
|
readOnly: inputReadOnly,
|
|
@@ -91,12 +91,10 @@ function InputDate(props, ref) {
|
|
|
91
91
|
|
|
92
92
|
if (allowClear && dateValue && !disabled) {
|
|
93
93
|
clearNode = /*#__PURE__*/React.createElement("span", {
|
|
94
|
-
|
|
95
|
-
e.preventDefault();
|
|
94
|
+
onMouseUp: function onMouseUp(e) {
|
|
96
95
|
e.stopPropagation();
|
|
97
96
|
},
|
|
98
|
-
|
|
99
|
-
e.preventDefault();
|
|
97
|
+
onClick: function onClick(e) {
|
|
100
98
|
e.stopPropagation();
|
|
101
99
|
triggerChange(null);
|
|
102
100
|
triggerOpen(false);
|
package/es/dropdown/dropdown.js
CHANGED
|
@@ -19,7 +19,7 @@ var findItem = function findItem(element) {
|
|
|
19
19
|
};
|
|
20
20
|
|
|
21
21
|
var Dropdown = /*#__PURE__*/React.forwardRef(function (props, ref) {
|
|
22
|
-
var _a, _b, _c;
|
|
22
|
+
var _a, _b, _c, _d;
|
|
23
23
|
|
|
24
24
|
var _React$useContext = React.useContext(ConfigContext),
|
|
25
25
|
getPrefixCls = _React$useContext.getPrefixCls,
|
|
@@ -83,11 +83,16 @@ var Dropdown = /*#__PURE__*/React.forwardRef(function (props, ref) {
|
|
|
83
83
|
}
|
|
84
84
|
};
|
|
85
85
|
|
|
86
|
-
var
|
|
86
|
+
var cloneObj = /*#__PURE__*/React.cloneElement(menu, {
|
|
87
87
|
selectedKey: selectedKey,
|
|
88
88
|
onClick: handleItemClick,
|
|
89
89
|
selectable: menuSelectable
|
|
90
|
-
})
|
|
90
|
+
});
|
|
91
|
+
var menuElement = isMenu ? Array.isArray((_d = menu.props) === null || _d === void 0 ? void 0 : _d.children) ? cloneObj : /*#__PURE__*/React.createElement("ul", {
|
|
92
|
+
className: "".concat(prefixCls, "-menu"),
|
|
93
|
+
onClick: handleItemClick,
|
|
94
|
+
role: "menu"
|
|
95
|
+
}, menu.props.children) : /*#__PURE__*/React.createElement("ul", {
|
|
91
96
|
className: "".concat(prefixCls, "-menu"),
|
|
92
97
|
onClick: handleItemClick,
|
|
93
98
|
role: "menu"
|
package/es/form/Field.js
CHANGED
|
@@ -231,11 +231,15 @@ var Field = function Field(props) {
|
|
|
231
231
|
var validateMessage = getFieldError(name);
|
|
232
232
|
|
|
233
233
|
var getInputValueFormProp = function getInputValueFormProp(evt) {
|
|
234
|
+
var payload = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : undefined;
|
|
235
|
+
|
|
234
236
|
var _a;
|
|
235
237
|
|
|
236
238
|
var inputValue;
|
|
237
239
|
|
|
238
|
-
if (
|
|
240
|
+
if (innerDisplayName === 'RadioGroup' && payload) {
|
|
241
|
+
inputValue = payload[1];
|
|
242
|
+
} else if (Object.prototype.hasOwnProperty.call(evt, 'target') && _includesInstanceProperty(FormEventValuePropNames).call(FormEventValuePropNames, innerValuePropName)) {
|
|
239
243
|
inputValue = (_a = evt.target) === null || _a === void 0 ? void 0 : _a[innerValuePropName];
|
|
240
244
|
} else {
|
|
241
245
|
inputValue = evt;
|
|
@@ -244,14 +248,6 @@ var Field = function Field(props) {
|
|
|
244
248
|
return inputValue;
|
|
245
249
|
};
|
|
246
250
|
|
|
247
|
-
var handleValueChange = React.useCallback(function (evt) {
|
|
248
|
-
var inputValue = getInputValueFormProp(evt);
|
|
249
|
-
dispatch({
|
|
250
|
-
type: 'updateValue',
|
|
251
|
-
namePath: name,
|
|
252
|
-
value: inputValue
|
|
253
|
-
});
|
|
254
|
-
}, [name]);
|
|
255
251
|
var handleValueValidate = React.useCallback(function () {
|
|
256
252
|
dispatch({
|
|
257
253
|
type: 'validateField',
|
|
@@ -259,18 +255,14 @@ var Field = function Field(props) {
|
|
|
259
255
|
});
|
|
260
256
|
}, [name]);
|
|
261
257
|
|
|
262
|
-
var trigger = _extends(_defineProperty({}, DEFAULT_TRIGGER, handleValueChange), generateEventHandler(handleValueValidate, validateTrigger));
|
|
263
|
-
|
|
264
258
|
var mergeProps = function mergeProps(fa, ch) {
|
|
265
|
-
var
|
|
259
|
+
var _extends2;
|
|
266
260
|
|
|
267
261
|
if (!ch) {
|
|
268
262
|
return {};
|
|
269
263
|
}
|
|
270
264
|
|
|
271
|
-
var
|
|
272
|
-
faDisabled = fa.disabled,
|
|
273
|
-
faRest = __rest(fa, ["onChange", "disabled"]);
|
|
265
|
+
var faRest = __rest(fa, []);
|
|
274
266
|
|
|
275
267
|
var _ch$props = ch.props,
|
|
276
268
|
chChange = _ch$props.onChange,
|
|
@@ -279,16 +271,22 @@ var Field = function Field(props) {
|
|
|
279
271
|
chDefaultValue = _ch$props.defaultValue;
|
|
280
272
|
|
|
281
273
|
var onChange = function onChange() {
|
|
282
|
-
|
|
283
|
-
|
|
274
|
+
for (var _len = arguments.length, evt = new Array(_len), _key = 0; _key < _len; _key++) {
|
|
275
|
+
evt[_key] = arguments[_key];
|
|
284
276
|
}
|
|
285
277
|
|
|
286
|
-
if (
|
|
287
|
-
|
|
278
|
+
if (chValue === undefined) {
|
|
279
|
+
var iv = getInputValueFormProp(evt[0], evt);
|
|
280
|
+
setFieldValue(iv);
|
|
281
|
+
dispatch({
|
|
282
|
+
type: 'updateValue',
|
|
283
|
+
namePath: name,
|
|
284
|
+
value: iv
|
|
285
|
+
});
|
|
288
286
|
}
|
|
289
287
|
|
|
290
288
|
if (typeof chChange === 'function') {
|
|
291
|
-
chChange.apply(void 0,
|
|
289
|
+
chChange.apply(void 0, evt);
|
|
292
290
|
}
|
|
293
291
|
};
|
|
294
292
|
|
|
@@ -303,10 +301,10 @@ var Field = function Field(props) {
|
|
|
303
301
|
forceUpdate();
|
|
304
302
|
}
|
|
305
303
|
|
|
306
|
-
var mergeResult = _extends(_extends({}, faRest), (
|
|
304
|
+
var mergeResult = _extends(_extends({}, faRest), (_extends2 = {
|
|
307
305
|
onChange: onChange,
|
|
308
306
|
defaultValue: defaultValue
|
|
309
|
-
}, _defineProperty(
|
|
307
|
+
}, _defineProperty(_extends2, innerValuePropName, fieldValue), _defineProperty(_extends2, "disabled", chDisabled !== undefined ? chDisabled : disabled !== undefined ? disabled : formDisabled), _extends2));
|
|
310
308
|
|
|
311
309
|
var mergeEventArray = [];
|
|
312
310
|
|
|
@@ -348,9 +346,7 @@ var Field = function Field(props) {
|
|
|
348
346
|
width: wrapperWidth,
|
|
349
347
|
validateMessage: validateMessage
|
|
350
348
|
}, _mapInstanceProperty(childrenArray).call(childrenArray, function (child, index) {
|
|
351
|
-
var keys = mergeProps(_extends(_extends(
|
|
352
|
-
disabled: disabled
|
|
353
|
-
}, innerValuePropName, value), trigger), {
|
|
349
|
+
var keys = mergeProps(_extends(_extends({}, generateEventHandler(handleValueValidate, validateTrigger)), {
|
|
354
350
|
key: index,
|
|
355
351
|
id: customizeHtmlFor ? undefined : htmlFor
|
|
356
352
|
}), child);
|
|
@@ -15,18 +15,18 @@ var PreviewGroup = function PreviewGroup(_ref) {
|
|
|
15
15
|
var images = React.useMemo(function () {
|
|
16
16
|
var _context;
|
|
17
17
|
|
|
18
|
-
return
|
|
18
|
+
return Array.isArray(children) ? _mapInstanceProperty(_context = _filterInstanceProperty(children).call(children, function (image) {
|
|
19
19
|
return image.props.src;
|
|
20
20
|
})).call(_context, function (image) {
|
|
21
21
|
return image.props;
|
|
22
|
-
}) : [children ? children.props : {}];
|
|
22
|
+
}) : [children !== undefined ? children.props : {}];
|
|
23
23
|
}, [children]); // eslint-disable-next-line react-hooks/rules-of-hooks
|
|
24
24
|
|
|
25
25
|
var refs = _mapInstanceProperty(images).call(images, function () {
|
|
26
26
|
return React.useRef();
|
|
27
27
|
});
|
|
28
28
|
|
|
29
|
-
var _React$useState = React.useState(images[0]),
|
|
29
|
+
var _React$useState = React.useState(images[0] || {}),
|
|
30
30
|
_React$useState2 = _slicedToArray(_React$useState, 2),
|
|
31
31
|
image = _React$useState2[0],
|
|
32
32
|
setImage = _React$useState2[1];
|
|
@@ -45,7 +45,9 @@ var PreviewGroup = function PreviewGroup(_ref) {
|
|
|
45
45
|
exit && setVisible(true);
|
|
46
46
|
}, [exit]);
|
|
47
47
|
React.useEffect(function () {
|
|
48
|
-
|
|
48
|
+
if (images[current]) {
|
|
49
|
+
setImage(images[current]);
|
|
50
|
+
}
|
|
49
51
|
}, [current, images]);
|
|
50
52
|
|
|
51
53
|
var _React$useState7 = React.useState(false),
|
package/es/image/preview.js
CHANGED
|
@@ -9,6 +9,7 @@ import { getCompProps } from '../_utils';
|
|
|
9
9
|
import { ConfigContext } from '../config-provider';
|
|
10
10
|
import Icon from '../icon';
|
|
11
11
|
import throttle from 'lodash/throttle';
|
|
12
|
+
import findLast from 'lodash/findLast';
|
|
12
13
|
import Draggable from 'react-draggable';
|
|
13
14
|
|
|
14
15
|
var Preview = function Preview(props) {
|
|
@@ -90,7 +91,7 @@ var Preview = function Preview(props) {
|
|
|
90
91
|
}, [show, scale]);
|
|
91
92
|
|
|
92
93
|
var handleZoomOut = function handleZoomOut() {
|
|
93
|
-
var nextScale =
|
|
94
|
+
var nextScale = findLast(scales, function (s) {
|
|
94
95
|
return s / 100 < scale;
|
|
95
96
|
});
|
|
96
97
|
if (nextScale !== undefined) setScale(nextScale / 100);
|
|
@@ -20,6 +20,7 @@ interface ClearableInputProps {
|
|
|
20
20
|
addonBefore?: React.ReactNode;
|
|
21
21
|
addonAfter?: React.ReactNode;
|
|
22
22
|
numberMark?: React.ReactNode;
|
|
23
|
+
inputCount?: React.ReactNode;
|
|
23
24
|
}
|
|
24
25
|
declare const ClearableInput: React.FC<ClearableInputProps>;
|
|
25
26
|
export default ClearableInput;
|
|
@@ -7,7 +7,7 @@ import classNames from 'classnames';
|
|
|
7
7
|
import { tuple } from '../_utils/type';
|
|
8
8
|
var ClearableInputType = tuple('input', 'text');
|
|
9
9
|
export function hasPrefixSuffix(props) {
|
|
10
|
-
return !!(props.prefix || props.suffix || props.allowClear);
|
|
10
|
+
return !!(props.prefix || props.suffix || props.allowClear || !!props.inputCount);
|
|
11
11
|
}
|
|
12
12
|
|
|
13
13
|
var ClearableInput = function ClearableInput(props) {
|
|
@@ -27,7 +27,8 @@ var ClearableInput = function ClearableInput(props) {
|
|
|
27
27
|
addonBefore = props.addonBefore,
|
|
28
28
|
addonAfter = props.addonAfter,
|
|
29
29
|
focused = props.focused,
|
|
30
|
-
numberMark = props.numberMark
|
|
30
|
+
numberMark = props.numberMark,
|
|
31
|
+
inputCount = props.inputCount;
|
|
31
32
|
|
|
32
33
|
var _useState = useState(false),
|
|
33
34
|
_useState2 = _slicedToArray(_useState, 2),
|
|
@@ -60,10 +61,14 @@ var ClearableInput = function ClearableInput(props) {
|
|
|
60
61
|
};
|
|
61
62
|
|
|
62
63
|
var renderSuffix = function renderSuffix() {
|
|
63
|
-
if (suffix || !disabled && !!allowClear) {
|
|
64
|
+
if (suffix || !disabled && !!allowClear || inputCount) {
|
|
64
65
|
return /*#__PURE__*/React.createElement("span", {
|
|
65
66
|
className: "".concat(prefixCls, "-suffix")
|
|
66
|
-
}, renderClearIcon(),
|
|
67
|
+
}, renderClearIcon(), inputCount && /*#__PURE__*/React.createElement("span", {
|
|
68
|
+
style: {
|
|
69
|
+
marginRight: suffix ? 9 : 0
|
|
70
|
+
}
|
|
71
|
+
}, inputCount), /*#__PURE__*/React.createElement("span", null, suffix));
|
|
67
72
|
}
|
|
68
73
|
|
|
69
74
|
return null;
|
package/es/input/TextArea.js
CHANGED
|
@@ -78,8 +78,13 @@ var InternalTextarea = function InternalTextarea(props, ref) {
|
|
|
78
78
|
|
|
79
79
|
var _useState3 = useState(false),
|
|
80
80
|
_useState4 = _slicedToArray(_useState3, 2),
|
|
81
|
-
|
|
82
|
-
|
|
81
|
+
focused = _useState4[0],
|
|
82
|
+
setFocused = _useState4[1];
|
|
83
|
+
|
|
84
|
+
var _useState5 = useState(false),
|
|
85
|
+
_useState6 = _slicedToArray(_useState5, 2),
|
|
86
|
+
showNumberMark = _useState6[0],
|
|
87
|
+
setShowNumberMark = _useState6[1];
|
|
83
88
|
|
|
84
89
|
var resizeTextarea = useCallback(function () {
|
|
85
90
|
if (!autoSize || !textareaRef.current) {
|
|
@@ -112,12 +117,12 @@ var InternalTextarea = function InternalTextarea(props, ref) {
|
|
|
112
117
|
};
|
|
113
118
|
|
|
114
119
|
var handleFocus = function handleFocus(e) {
|
|
115
|
-
|
|
120
|
+
setFocused(true);
|
|
116
121
|
onFocus && onFocus(e);
|
|
117
122
|
};
|
|
118
123
|
|
|
119
124
|
var handleBlur = function handleBlur(e) {
|
|
120
|
-
|
|
125
|
+
setFocused(false);
|
|
121
126
|
onBlur && onBlur(e);
|
|
122
127
|
};
|
|
123
128
|
|
|
@@ -163,6 +168,15 @@ var InternalTextarea = function InternalTextarea(props, ref) {
|
|
|
163
168
|
setValue(propsValue);
|
|
164
169
|
}
|
|
165
170
|
}, [propsValue, setValue]);
|
|
171
|
+
useEffect(function () {
|
|
172
|
+
if (focused && !showNumberMark) {
|
|
173
|
+
setShowNumberMark(true);
|
|
174
|
+
}
|
|
175
|
+
|
|
176
|
+
if (!focused && showNumberMark) {
|
|
177
|
+
setShowNumberMark(false);
|
|
178
|
+
}
|
|
179
|
+
}, [focused]);
|
|
166
180
|
|
|
167
181
|
var renderTextArea = function renderTextArea(prefixCls) {
|
|
168
182
|
var _context, _classNames2, _context2;
|
package/es/input/input.d.ts
CHANGED
|
@@ -21,6 +21,7 @@ export interface InputProps extends Omit<React.InputHTMLAttributes<HTMLInputElem
|
|
|
21
21
|
onPressEnter?: (_: string, event: React.KeyboardEvent) => void;
|
|
22
22
|
value?: any;
|
|
23
23
|
readonly?: 'readonly';
|
|
24
|
+
count?: boolean;
|
|
24
25
|
}
|
|
25
26
|
declare const Input: React.ForwardRefExoticComponent<InputProps & React.RefAttributes<unknown>>;
|
|
26
27
|
export default Input;
|
package/es/input/input.js
CHANGED
|
@@ -17,7 +17,7 @@ var __rest = this && this.__rest || function (s, e) {
|
|
|
17
17
|
return t;
|
|
18
18
|
};
|
|
19
19
|
|
|
20
|
-
import React, { useContext,
|
|
20
|
+
import React, { useContext, useState, useRef, useEffect } from 'react';
|
|
21
21
|
import classNames from 'classnames';
|
|
22
22
|
import ConfigContext from '../config-provider/ConfigContext';
|
|
23
23
|
import { getCompProps } from '../_utils';
|
|
@@ -58,7 +58,9 @@ var InternalInput = function InternalInput(props, ref) {
|
|
|
58
58
|
defaultValue = inputProps.defaultValue,
|
|
59
59
|
propsValue = inputProps.value,
|
|
60
60
|
className = inputProps.className,
|
|
61
|
-
|
|
61
|
+
maxLength = inputProps.maxLength,
|
|
62
|
+
count = inputProps.count,
|
|
63
|
+
others = __rest(inputProps, ["type", "size", "disabled", "onPressEnter", "borderType", "prefixCls", "onFocus", "onBlur", "onChange", "placeholderTobeValue", "defaultValue", "value", "className", "maxLength", "count"]);
|
|
62
64
|
|
|
63
65
|
devWarning(InputSiteTypes.indexOf(size) === -1, 'input', "cannot found input size '".concat(size, "'"));
|
|
64
66
|
devWarning(BorderTypes.indexOf(borderType) === -1, 'input', "cannot found input borderType '".concat(borderType, "'"));
|
|
@@ -76,6 +78,11 @@ var InternalInput = function InternalInput(props, ref) {
|
|
|
76
78
|
focused = _useState2[0],
|
|
77
79
|
setFocused = _useState2[1];
|
|
78
80
|
|
|
81
|
+
var _useState3 = useState(true),
|
|
82
|
+
_useState4 = _slicedToArray(_useState3, 2),
|
|
83
|
+
showNumberMark = _useState4[0],
|
|
84
|
+
setShowNumberMark = _useState4[1];
|
|
85
|
+
|
|
79
86
|
var thisInputRef = useRef();
|
|
80
87
|
var inputRef = ref || thisInputRef;
|
|
81
88
|
var inputPrefixCls = getPrefixCls(prefixCls, 'input', customPrefixcls); // 按钮样式前缀
|
|
@@ -83,18 +90,21 @@ var InternalInput = function InternalInput(props, ref) {
|
|
|
83
90
|
var addonBefore = others.addonBefore,
|
|
84
91
|
addonAfter = others.addonAfter;
|
|
85
92
|
var inputClasses = classNames(inputPrefixCls, (_classNames = {}, _defineProperty(_classNames, _concatInstanceProperty(_context = "".concat(inputPrefixCls, "-size-")).call(_context, size), size), _defineProperty(_classNames, "".concat(inputPrefixCls, "-borderless"), borderType === 'none'), _defineProperty(_classNames, "".concat(inputPrefixCls, "-underline"), borderType === 'underline'), _defineProperty(_classNames, "".concat(inputPrefixCls, "-disabled"), disabled), _classNames), _defineProperty({}, className, className && !hasPrefixSuffix(inputProps) && !addonBefore && !addonAfter));
|
|
86
|
-
|
|
93
|
+
|
|
94
|
+
var handleFocus = function handleFocus(event) {
|
|
87
95
|
setFocused(true);
|
|
88
96
|
onFocus && onFocus(event);
|
|
89
|
-
}
|
|
90
|
-
|
|
97
|
+
};
|
|
98
|
+
|
|
99
|
+
var handleBlur = function handleBlur(event) {
|
|
91
100
|
setFocused(false);
|
|
92
101
|
onBlur && onBlur(event);
|
|
93
|
-
}
|
|
94
|
-
|
|
102
|
+
};
|
|
103
|
+
|
|
104
|
+
var handleChange = function handleChange(event) {
|
|
95
105
|
propsValue === undefined && setValue(event.target.value);
|
|
96
106
|
onChange && onChange(event);
|
|
97
|
-
}
|
|
107
|
+
};
|
|
98
108
|
|
|
99
109
|
var handleReset = function handleReset() {
|
|
100
110
|
setValue('');
|
|
@@ -130,13 +140,30 @@ var InternalInput = function InternalInput(props, ref) {
|
|
|
130
140
|
delete inputDomProps.addonBefore;
|
|
131
141
|
delete inputDomProps.className;
|
|
132
142
|
|
|
143
|
+
var renderCount = function renderCount() {
|
|
144
|
+
var enteredLength = value ? value.length : 0;
|
|
145
|
+
|
|
146
|
+
if (maxLength !== undefined && enteredLength >= maxLength) {
|
|
147
|
+
enteredLength = maxLength;
|
|
148
|
+
}
|
|
149
|
+
|
|
150
|
+
if (count && showNumberMark && !disabled) {
|
|
151
|
+
return /*#__PURE__*/React.createElement("div", {
|
|
152
|
+
className: classNames("".concat(inputPrefixCls, "-input-mark-inner"))
|
|
153
|
+
}, enteredLength, maxLength !== undefined ? "/".concat(maxLength) : null);
|
|
154
|
+
}
|
|
155
|
+
|
|
156
|
+
return null;
|
|
157
|
+
};
|
|
158
|
+
|
|
133
159
|
var renderInput = function renderInput() {
|
|
134
160
|
return /*#__PURE__*/React.createElement("input", _extends({
|
|
135
161
|
ref: inputRef,
|
|
136
162
|
type: type,
|
|
137
163
|
disabled: disabled,
|
|
138
164
|
className: inputClasses,
|
|
139
|
-
value: fixControlledValue(value)
|
|
165
|
+
value: fixControlledValue(value),
|
|
166
|
+
maxLength: maxLength
|
|
140
167
|
}, inputDomProps, {
|
|
141
168
|
onFocus: handleFocus,
|
|
142
169
|
onBlur: handleBlur,
|
|
@@ -145,13 +172,23 @@ var InternalInput = function InternalInput(props, ref) {
|
|
|
145
172
|
}));
|
|
146
173
|
};
|
|
147
174
|
|
|
175
|
+
useEffect(function () {
|
|
176
|
+
if (focused && !showNumberMark) {
|
|
177
|
+
setShowNumberMark(true);
|
|
178
|
+
}
|
|
179
|
+
|
|
180
|
+
if (!focused && showNumberMark) {
|
|
181
|
+
setShowNumberMark(false);
|
|
182
|
+
}
|
|
183
|
+
}, [focused]);
|
|
148
184
|
return /*#__PURE__*/React.createElement(ClearableInput, _extends({}, inputProps, {
|
|
149
185
|
handleReset: handleReset,
|
|
150
186
|
value: value,
|
|
151
187
|
inputType: "input",
|
|
152
188
|
prefixCls: inputPrefixCls,
|
|
153
189
|
element: renderInput(),
|
|
154
|
-
focused: focused
|
|
190
|
+
focused: focused,
|
|
191
|
+
inputCount: renderCount()
|
|
155
192
|
}));
|
|
156
193
|
};
|
|
157
194
|
|