123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235 |
- import _objectSpread from "@babel/runtime/helpers/esm/objectSpread2";
- import _extends from "@babel/runtime/helpers/esm/extends";
- import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
- import _toConsumableArray from "@babel/runtime/helpers/esm/toConsumableArray";
- import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
- import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
- var _excluded = ["autoComplete", "onChange", "onFocus", "onBlur", "onPressEnter", "onKeyDown", "onKeyUp", "prefixCls", "disabled", "htmlSize", "className", "maxLength", "suffix", "showCount", "count", "type", "classes", "classNames", "styles", "onCompositionStart", "onCompositionEnd"];
- import clsx from 'classnames';
- import useMergedState from "rc-util/es/hooks/useMergedState";
- import omit from "rc-util/es/omit";
- import React, { forwardRef, useEffect, useImperativeHandle, useRef, useState } from 'react';
- import BaseInput from "./BaseInput";
- import useCount from "./hooks/useCount";
- import { resolveOnChange, triggerFocus } from "./utils/commonUtils";
- var Input = /*#__PURE__*/forwardRef(function (props, ref) {
- var autoComplete = props.autoComplete,
- onChange = props.onChange,
- onFocus = props.onFocus,
- onBlur = props.onBlur,
- onPressEnter = props.onPressEnter,
- onKeyDown = props.onKeyDown,
- onKeyUp = props.onKeyUp,
- _props$prefixCls = props.prefixCls,
- prefixCls = _props$prefixCls === void 0 ? 'rc-input' : _props$prefixCls,
- disabled = props.disabled,
- htmlSize = props.htmlSize,
- className = props.className,
- maxLength = props.maxLength,
- suffix = props.suffix,
- showCount = props.showCount,
- count = props.count,
- _props$type = props.type,
- type = _props$type === void 0 ? 'text' : _props$type,
- classes = props.classes,
- classNames = props.classNames,
- styles = props.styles,
- _onCompositionStart = props.onCompositionStart,
- onCompositionEnd = props.onCompositionEnd,
- rest = _objectWithoutProperties(props, _excluded);
- var _useState = useState(false),
- _useState2 = _slicedToArray(_useState, 2),
- focused = _useState2[0],
- setFocused = _useState2[1];
- var compositionRef = useRef(false);
- var keyLockRef = useRef(false);
- var inputRef = useRef(null);
- var holderRef = useRef(null);
- var focus = function focus(option) {
- if (inputRef.current) {
- triggerFocus(inputRef.current, option);
- }
- };
- // ====================== Value =======================
- var _useMergedState = useMergedState(props.defaultValue, {
- value: props.value
- }),
- _useMergedState2 = _slicedToArray(_useMergedState, 2),
- value = _useMergedState2[0],
- setValue = _useMergedState2[1];
- var formatValue = value === undefined || value === null ? '' : String(value);
- // =================== Select Range ===================
- var _useState3 = useState(null),
- _useState4 = _slicedToArray(_useState3, 2),
- selection = _useState4[0],
- setSelection = _useState4[1];
- // ====================== Count =======================
- var countConfig = useCount(count, showCount);
- var mergedMax = countConfig.max || maxLength;
- var valueLength = countConfig.strategy(formatValue);
- var isOutOfRange = !!mergedMax && valueLength > mergedMax;
- // ======================= Ref ========================
- useImperativeHandle(ref, function () {
- var _holderRef$current;
- return {
- focus: focus,
- blur: function blur() {
- var _inputRef$current;
- (_inputRef$current = inputRef.current) === null || _inputRef$current === void 0 || _inputRef$current.blur();
- },
- setSelectionRange: function setSelectionRange(start, end, direction) {
- var _inputRef$current2;
- (_inputRef$current2 = inputRef.current) === null || _inputRef$current2 === void 0 || _inputRef$current2.setSelectionRange(start, end, direction);
- },
- select: function select() {
- var _inputRef$current3;
- (_inputRef$current3 = inputRef.current) === null || _inputRef$current3 === void 0 || _inputRef$current3.select();
- },
- input: inputRef.current,
- nativeElement: ((_holderRef$current = holderRef.current) === null || _holderRef$current === void 0 ? void 0 : _holderRef$current.nativeElement) || inputRef.current
- };
- });
- useEffect(function () {
- if (keyLockRef.current) {
- keyLockRef.current = false;
- }
- setFocused(function (prev) {
- return prev && disabled ? false : prev;
- });
- }, [disabled]);
- var triggerChange = function triggerChange(e, currentValue, info) {
- var cutValue = currentValue;
- if (!compositionRef.current && countConfig.exceedFormatter && countConfig.max && countConfig.strategy(currentValue) > countConfig.max) {
- cutValue = countConfig.exceedFormatter(currentValue, {
- max: countConfig.max
- });
- if (currentValue !== cutValue) {
- var _inputRef$current4, _inputRef$current5;
- setSelection([((_inputRef$current4 = inputRef.current) === null || _inputRef$current4 === void 0 ? void 0 : _inputRef$current4.selectionStart) || 0, ((_inputRef$current5 = inputRef.current) === null || _inputRef$current5 === void 0 ? void 0 : _inputRef$current5.selectionEnd) || 0]);
- }
- } else if (info.source === 'compositionEnd') {
- // Avoid triggering twice
- // https://github.com/ant-design/ant-design/issues/46587
- return;
- }
- setValue(cutValue);
- if (inputRef.current) {
- resolveOnChange(inputRef.current, e, onChange, cutValue);
- }
- };
- useEffect(function () {
- if (selection) {
- var _inputRef$current6;
- (_inputRef$current6 = inputRef.current) === null || _inputRef$current6 === void 0 || _inputRef$current6.setSelectionRange.apply(_inputRef$current6, _toConsumableArray(selection));
- }
- }, [selection]);
- var onInternalChange = function onInternalChange(e) {
- triggerChange(e, e.target.value, {
- source: 'change'
- });
- };
- var onInternalCompositionEnd = function onInternalCompositionEnd(e) {
- compositionRef.current = false;
- triggerChange(e, e.currentTarget.value, {
- source: 'compositionEnd'
- });
- onCompositionEnd === null || onCompositionEnd === void 0 || onCompositionEnd(e);
- };
- var handleKeyDown = function handleKeyDown(e) {
- if (onPressEnter && e.key === 'Enter' && !keyLockRef.current) {
- keyLockRef.current = true;
- onPressEnter(e);
- }
- onKeyDown === null || onKeyDown === void 0 || onKeyDown(e);
- };
- var handleKeyUp = function handleKeyUp(e) {
- if (e.key === 'Enter') {
- keyLockRef.current = false;
- }
- onKeyUp === null || onKeyUp === void 0 || onKeyUp(e);
- };
- var handleFocus = function handleFocus(e) {
- setFocused(true);
- onFocus === null || onFocus === void 0 || onFocus(e);
- };
- var handleBlur = function handleBlur(e) {
- if (keyLockRef.current) {
- keyLockRef.current = false;
- }
- setFocused(false);
- onBlur === null || onBlur === void 0 || onBlur(e);
- };
- var handleReset = function handleReset(e) {
- setValue('');
- focus();
- if (inputRef.current) {
- resolveOnChange(inputRef.current, e, onChange);
- }
- };
- // ====================== Input =======================
- var outOfRangeCls = isOutOfRange && "".concat(prefixCls, "-out-of-range");
- var getInputElement = function getInputElement() {
- // Fix https://fb.me/react-unknown-prop
- var otherProps = omit(props, ['prefixCls', 'onPressEnter', 'addonBefore', 'addonAfter', 'prefix', 'suffix', 'allowClear',
- // Input elements must be either controlled or uncontrolled,
- // specify either the value prop, or the defaultValue prop, but not both.
- 'defaultValue', 'showCount', 'count', 'classes', 'htmlSize', 'styles', 'classNames', 'onClear']);
- return /*#__PURE__*/React.createElement("input", _extends({
- autoComplete: autoComplete
- }, otherProps, {
- onChange: onInternalChange,
- onFocus: handleFocus,
- onBlur: handleBlur,
- onKeyDown: handleKeyDown,
- onKeyUp: handleKeyUp,
- className: clsx(prefixCls, _defineProperty({}, "".concat(prefixCls, "-disabled"), disabled), classNames === null || classNames === void 0 ? void 0 : classNames.input),
- style: styles === null || styles === void 0 ? void 0 : styles.input,
- ref: inputRef,
- size: htmlSize,
- type: type,
- onCompositionStart: function onCompositionStart(e) {
- compositionRef.current = true;
- _onCompositionStart === null || _onCompositionStart === void 0 || _onCompositionStart(e);
- },
- onCompositionEnd: onInternalCompositionEnd
- }));
- };
- var getSuffix = function getSuffix() {
- // Max length value
- var hasMaxLength = Number(mergedMax) > 0;
- if (suffix || countConfig.show) {
- var dataCount = countConfig.showFormatter ? countConfig.showFormatter({
- value: formatValue,
- count: valueLength,
- maxLength: mergedMax
- }) : "".concat(valueLength).concat(hasMaxLength ? " / ".concat(mergedMax) : '');
- return /*#__PURE__*/React.createElement(React.Fragment, null, countConfig.show && /*#__PURE__*/React.createElement("span", {
- className: clsx("".concat(prefixCls, "-show-count-suffix"), _defineProperty({}, "".concat(prefixCls, "-show-count-has-suffix"), !!suffix), classNames === null || classNames === void 0 ? void 0 : classNames.count),
- style: _objectSpread({}, styles === null || styles === void 0 ? void 0 : styles.count)
- }, dataCount), suffix);
- }
- return null;
- };
- // ====================== Render ======================
- return /*#__PURE__*/React.createElement(BaseInput, _extends({}, rest, {
- prefixCls: prefixCls,
- className: clsx(className, outOfRangeCls),
- handleReset: handleReset,
- value: formatValue,
- focused: focused,
- triggerFocus: focus,
- suffix: getSuffix(),
- disabled: disabled,
- classes: classes,
- classNames: classNames,
- styles: styles,
- ref: holderRef
- }), getInputElement());
- });
- export default Input;
|