linkmore-design
Version:
π πlmη»δ»ΆεΊγπ
212 lines (201 loc) β’ 9.38 kB
JavaScript
import _extends from "@babel/runtime/helpers/esm/extends";
import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
import _typeof from "@babel/runtime/helpers/esm/typeof";
import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
var _excluded = ["prefixCls", "bordered", "status", "size", "disabled", "onBlur", "onFocus", "suffix", "allowClear", "addonAfter", "addonBefore", "className", "onChange"];
import classNames from 'classnames';
import RcInput from 'rc-input';
import { composeRef } from 'rc-util/lib/ref';
import React, { forwardRef, useContext, useEffect, useMemo, useRef } from 'react';
import { ConfigContext } from "../config-provider";
import DisabledContext from "../config-provider/DisabledContext";
import SizeContext from "../config-provider/SizeContext";
import { FormItemInputContext, NoFormStyle } from "../form/context";
import IconFont from "../icon-font";
import { NoCompactStyle, useCompactItemContext } from "../space/Compact";
import { getMergedStatus, getStatusClassNames } from "../_util/statusUtils";
import warning from "../_util/warning";
import useRemovePasswordTimeout from "./hooks/useRemovePasswordTimeout";
import { hasPrefixSuffix } from "./utils";
export function fixControlledValue(value) {
if (typeof value === 'undefined' || value === null) {
return '';
}
return String(value);
}
export function resolveOnChange(target, e, onChange, targetValue) {
if (!onChange) {
return;
}
var event = e;
if (e.type === 'click') {
// Clone a new target for event.
// Avoid the following usage, the setQuery method gets the original value.
//
// const [query, setQuery] = React.useState('');
// <Input
// allowClear
// value={query}
// onChange={(e)=> {
// setQuery((prevStatus) => e.target.value);
// }}
// />
var currentTarget = target.cloneNode(true);
// click clear icon
event = Object.create(e, {
target: {
value: currentTarget
},
currentTarget: {
value: currentTarget
}
});
currentTarget.value = '';
onChange(event);
return;
}
// Trigger by composition event, this means we need force change the input value
if (targetValue !== undefined) {
event = Object.create(e, {
target: {
value: target
},
currentTarget: {
value: target
}
});
target.value = targetValue;
onChange(event);
return;
}
onChange(event);
}
export function triggerFocus(element, option) {
if (!element) {
return;
}
element.focus(option);
// Selection content
var _ref = option || {},
cursor = _ref.cursor;
if (cursor) {
var len = element.value.length;
switch (cursor) {
case 'start':
element.setSelectionRange(0, 0);
break;
case 'end':
element.setSelectionRange(len, len);
break;
default:
element.setSelectionRange(0, len);
break;
}
}
}
var Input = /*#__PURE__*/forwardRef(function (props, ref) {
var _classNames, _classNames2, _classNames4;
var customizePrefixCls = props.prefixCls,
_props$bordered = props.bordered,
bordered = _props$bordered === void 0 ? true : _props$bordered,
customStatus = props.status,
customSize = props.size,
customDisabled = props.disabled,
onBlur = props.onBlur,
onFocus = props.onFocus,
suffix = props.suffix,
_props$allowClear = props.allowClear,
allowClear = _props$allowClear === void 0 ? true : _props$allowClear,
addonAfter = props.addonAfter,
addonBefore = props.addonBefore,
className = props.className,
onChange = props.onChange,
rest = _objectWithoutProperties(props, _excluded);
var _React$useContext = React.useContext(ConfigContext),
getPrefixCls = _React$useContext.getPrefixCls,
direction = _React$useContext.direction,
input = _React$useContext.input;
var prefixCls = getPrefixCls('input', customizePrefixCls);
var inputRef = useRef(null);
// ===================== Compact Item =====================
var _useCompactItemContex = useCompactItemContext(prefixCls, direction),
compactSize = _useCompactItemContex.compactSize,
compactItemClassnames = _useCompactItemContex.compactItemClassnames;
// ===================== Size =====================
var size = React.useContext(SizeContext);
var mergedSize = compactSize || customSize || size;
// ===================== Disabled =====================
var disabled = React.useContext(DisabledContext);
var mergedDisabled = customDisabled !== null && customDisabled !== void 0 ? customDisabled : disabled;
// ===================== Status =====================
var _useContext = useContext(FormItemInputContext),
contextStatus = _useContext.status,
hasFeedback = _useContext.hasFeedback,
feedbackIcon = _useContext.feedbackIcon;
var mergedStatus = getMergedStatus(contextStatus, customStatus);
// ===================== Focus warning =====================
var inputHasPrefixSuffix = hasPrefixSuffix(props) || !!hasFeedback;
var prevHasPrefixSuffix = useRef(inputHasPrefixSuffix);
useEffect(function () {
if (inputHasPrefixSuffix && !prevHasPrefixSuffix.current) {
var _inputRef$current;
warning(document.activeElement === ((_inputRef$current = inputRef.current) === null || _inputRef$current === void 0 ? void 0 : _inputRef$current.input), 'Input', "When Input is focused, dynamic add or remove prefix / suffix will make it lose focus caused by dom structure change. Read more: https://ant.design/components/input/#FAQ");
}
prevHasPrefixSuffix.current = inputHasPrefixSuffix;
}, [inputHasPrefixSuffix]);
// ===================== Remove Password value =====================
var removePasswordTimeout = useRemovePasswordTimeout(inputRef, true);
var handleBlur = function handleBlur(e) {
removePasswordTimeout();
onBlur === null || onBlur === void 0 ? void 0 : onBlur(e);
};
var handleFocus = function handleFocus(e) {
removePasswordTimeout();
onFocus === null || onFocus === void 0 ? void 0 : onFocus(e);
};
var handleChange = function handleChange(e) {
removePasswordTimeout();
onChange === null || onChange === void 0 ? void 0 : onChange(e);
};
var suffixNode = (hasFeedback || suffix) && /*#__PURE__*/React.createElement(React.Fragment, null, suffix, hasFeedback && feedbackIcon);
// Allow clear
var mergedAllowClear = useMemo(function () {
if (_typeof(allowClear) === 'object' && allowClear !== null && allowClear !== void 0 && allowClear.clearIcon) {
return allowClear;
}
if (allowClear) {
return {
clearIcon: /*#__PURE__*/React.createElement(IconFont, {
type: "icon-a-shidia0shanchu"
})
};
}
return undefined;
}, [allowClear]);
return /*#__PURE__*/React.createElement(RcInput, _extends({
ref: composeRef(ref, inputRef),
prefixCls: prefixCls,
autoComplete: input === null || input === void 0 ? void 0 : input.autoComplete
}, rest, {
disabled: mergedDisabled !== null && mergedDisabled !== void 0 ? mergedDisabled : undefined,
onBlur: handleBlur,
onFocus: handleFocus,
suffix: suffixNode,
allowClear: mergedAllowClear,
className: classNames(className, compactItemClassnames, 'lm_input'),
onChange: handleChange,
addonAfter: addonAfter && /*#__PURE__*/React.createElement(NoCompactStyle, null, /*#__PURE__*/React.createElement(NoFormStyle, {
override: true,
status: true
}, addonAfter)),
addonBefore: addonBefore && /*#__PURE__*/React.createElement(NoCompactStyle, null, /*#__PURE__*/React.createElement(NoFormStyle, {
override: true,
status: true
}, addonBefore)),
inputClassName: classNames((_classNames = {}, _defineProperty(_classNames, "".concat(prefixCls, "-sm"), mergedSize === 'small'), _defineProperty(_classNames, "".concat(prefixCls, "-lg"), mergedSize === 'large'), _defineProperty(_classNames, "".concat(prefixCls, "-rtl"), direction === 'rtl'), _defineProperty(_classNames, "".concat(prefixCls, "-borderless"), !bordered), _classNames), !inputHasPrefixSuffix && getStatusClassNames(prefixCls, mergedStatus)),
affixWrapperClassName: classNames((_classNames2 = {}, _defineProperty(_classNames2, "".concat(prefixCls, "-affix-wrapper-sm"), mergedSize === 'small'), _defineProperty(_classNames2, "".concat(prefixCls, "-affix-wrapper-lg"), mergedSize === 'large'), _defineProperty(_classNames2, "".concat(prefixCls, "-affix-wrapper-rtl"), direction === 'rtl'), _defineProperty(_classNames2, "".concat(prefixCls, "-affix-wrapper-borderless"), !bordered), _classNames2), getStatusClassNames("".concat(prefixCls, "-affix-wrapper"), mergedStatus, hasFeedback)),
wrapperClassName: classNames(_defineProperty({}, "".concat(prefixCls, "-group-rtl"), direction === 'rtl')),
groupClassName: classNames((_classNames4 = {}, _defineProperty(_classNames4, "".concat(prefixCls, "-group-wrapper-sm"), mergedSize === 'small'), _defineProperty(_classNames4, "".concat(prefixCls, "-group-wrapper-lg"), mergedSize === 'large'), _defineProperty(_classNames4, "".concat(prefixCls, "-group-wrapper-rtl"), direction === 'rtl'), _classNames4), getStatusClassNames("".concat(prefixCls, "-group-wrapper"), mergedStatus, hasFeedback))
}));
});
export default Input;