Input.js 8.8 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190
  1. "use strict";
  2. "use client";
  3. var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
  4. var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
  5. Object.defineProperty(exports, "__esModule", {
  6. value: true
  7. });
  8. exports.default = void 0;
  9. Object.defineProperty(exports, "triggerFocus", {
  10. enumerable: true,
  11. get: function () {
  12. return _commonUtils.triggerFocus;
  13. }
  14. });
  15. var _react = _interopRequireWildcard(require("react"));
  16. var _classnames = _interopRequireDefault(require("classnames"));
  17. var _rcInput = _interopRequireDefault(require("rc-input"));
  18. var _commonUtils = require("rc-input/lib/utils/commonUtils");
  19. var _ref = require("rc-util/lib/ref");
  20. var _ContextIsolator = _interopRequireDefault(require("../_util/ContextIsolator"));
  21. var _getAllowClear = _interopRequireDefault(require("../_util/getAllowClear"));
  22. var _statusUtils = require("../_util/statusUtils");
  23. var _warning = require("../_util/warning");
  24. var _context = require("../config-provider/context");
  25. var _DisabledContext = _interopRequireDefault(require("../config-provider/DisabledContext"));
  26. var _useCSSVarCls = _interopRequireDefault(require("../config-provider/hooks/useCSSVarCls"));
  27. var _useSize = _interopRequireDefault(require("../config-provider/hooks/useSize"));
  28. var _context2 = require("../form/context");
  29. var _useVariants = _interopRequireDefault(require("../form/hooks/useVariants"));
  30. var _Compact = require("../space/Compact");
  31. var _useRemovePasswordTimeout = _interopRequireDefault(require("./hooks/useRemovePasswordTimeout"));
  32. var _style = _interopRequireWildcard(require("./style"));
  33. var _utils = require("./utils");
  34. var __rest = void 0 && (void 0).__rest || function (s, e) {
  35. var t = {};
  36. for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0) t[p] = s[p];
  37. if (s != null && typeof Object.getOwnPropertySymbols === "function") for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
  38. if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i])) t[p[i]] = s[p[i]];
  39. }
  40. return t;
  41. };
  42. const Input = /*#__PURE__*/(0, _react.forwardRef)((props, ref) => {
  43. const {
  44. prefixCls: customizePrefixCls,
  45. bordered = true,
  46. status: customStatus,
  47. size: customSize,
  48. disabled: customDisabled,
  49. onBlur,
  50. onFocus,
  51. suffix,
  52. allowClear,
  53. addonAfter,
  54. addonBefore,
  55. className,
  56. style,
  57. styles,
  58. rootClassName,
  59. onChange,
  60. classNames,
  61. variant: customVariant
  62. } = props,
  63. rest = __rest(props, ["prefixCls", "bordered", "status", "size", "disabled", "onBlur", "onFocus", "suffix", "allowClear", "addonAfter", "addonBefore", "className", "style", "styles", "rootClassName", "onChange", "classNames", "variant"]);
  64. if (process.env.NODE_ENV !== 'production') {
  65. const {
  66. deprecated
  67. } = (0, _warning.devUseWarning)('Input');
  68. deprecated(!('bordered' in props), 'bordered', 'variant');
  69. }
  70. const {
  71. getPrefixCls,
  72. direction,
  73. allowClear: contextAllowClear,
  74. autoComplete: contextAutoComplete,
  75. className: contextClassName,
  76. style: contextStyle,
  77. classNames: contextClassNames,
  78. styles: contextStyles
  79. } = (0, _context.useComponentConfig)('input');
  80. const prefixCls = getPrefixCls('input', customizePrefixCls);
  81. const inputRef = (0, _react.useRef)(null);
  82. // Style
  83. const rootCls = (0, _useCSSVarCls.default)(prefixCls);
  84. const [wrapSharedCSSVar, hashId, cssVarCls] = (0, _style.useSharedStyle)(prefixCls, rootClassName);
  85. const [wrapCSSVar] = (0, _style.default)(prefixCls, rootCls);
  86. // ===================== Compact Item =====================
  87. const {
  88. compactSize,
  89. compactItemClassnames
  90. } = (0, _Compact.useCompactItemContext)(prefixCls, direction);
  91. // ===================== Size =====================
  92. const mergedSize = (0, _useSize.default)(ctx => {
  93. var _a;
  94. return (_a = customSize !== null && customSize !== void 0 ? customSize : compactSize) !== null && _a !== void 0 ? _a : ctx;
  95. });
  96. // ===================== Disabled =====================
  97. const disabled = _react.default.useContext(_DisabledContext.default);
  98. const mergedDisabled = customDisabled !== null && customDisabled !== void 0 ? customDisabled : disabled;
  99. // ===================== Status =====================
  100. const {
  101. status: contextStatus,
  102. hasFeedback,
  103. feedbackIcon
  104. } = (0, _react.useContext)(_context2.FormItemInputContext);
  105. const mergedStatus = (0, _statusUtils.getMergedStatus)(contextStatus, customStatus);
  106. // ===================== Focus warning =====================
  107. const inputHasPrefixSuffix = (0, _utils.hasPrefixSuffix)(props) || !!hasFeedback;
  108. const prevHasPrefixSuffix = (0, _react.useRef)(inputHasPrefixSuffix);
  109. /* eslint-disable react-hooks/rules-of-hooks */
  110. if (process.env.NODE_ENV !== 'production') {
  111. const warning = (0, _warning.devUseWarning)('Input');
  112. (0, _react.useEffect)(() => {
  113. var _a;
  114. if (inputHasPrefixSuffix && !prevHasPrefixSuffix.current) {
  115. process.env.NODE_ENV !== "production" ? warning(document.activeElement === ((_a = inputRef.current) === null || _a === void 0 ? void 0 : _a.input), 'usage', `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`) : void 0;
  116. }
  117. prevHasPrefixSuffix.current = inputHasPrefixSuffix;
  118. }, [inputHasPrefixSuffix]);
  119. }
  120. /* eslint-enable */
  121. // ===================== Remove Password value =====================
  122. const removePasswordTimeout = (0, _useRemovePasswordTimeout.default)(inputRef, true);
  123. const handleBlur = e => {
  124. removePasswordTimeout();
  125. onBlur === null || onBlur === void 0 ? void 0 : onBlur(e);
  126. };
  127. const handleFocus = e => {
  128. removePasswordTimeout();
  129. onFocus === null || onFocus === void 0 ? void 0 : onFocus(e);
  130. };
  131. const handleChange = e => {
  132. removePasswordTimeout();
  133. onChange === null || onChange === void 0 ? void 0 : onChange(e);
  134. };
  135. const suffixNode = (hasFeedback || suffix) && (/*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, suffix, hasFeedback && feedbackIcon));
  136. const mergedAllowClear = (0, _getAllowClear.default)(allowClear !== null && allowClear !== void 0 ? allowClear : contextAllowClear);
  137. const [variant, enableVariantCls] = (0, _useVariants.default)('input', customVariant, bordered);
  138. return wrapSharedCSSVar(wrapCSSVar(/*#__PURE__*/_react.default.createElement(_rcInput.default, Object.assign({
  139. ref: (0, _ref.composeRef)(ref, inputRef),
  140. prefixCls: prefixCls,
  141. autoComplete: contextAutoComplete
  142. }, rest, {
  143. disabled: mergedDisabled,
  144. onBlur: handleBlur,
  145. onFocus: handleFocus,
  146. style: Object.assign(Object.assign({}, contextStyle), style),
  147. styles: Object.assign(Object.assign({}, contextStyles), styles),
  148. suffix: suffixNode,
  149. allowClear: mergedAllowClear,
  150. className: (0, _classnames.default)(className, rootClassName, cssVarCls, rootCls, compactItemClassnames, contextClassName),
  151. onChange: handleChange,
  152. addonBefore: addonBefore && (/*#__PURE__*/_react.default.createElement(_ContextIsolator.default, {
  153. form: true,
  154. space: true
  155. }, addonBefore)),
  156. addonAfter: addonAfter && (/*#__PURE__*/_react.default.createElement(_ContextIsolator.default, {
  157. form: true,
  158. space: true
  159. }, addonAfter)),
  160. classNames: Object.assign(Object.assign(Object.assign({}, classNames), contextClassNames), {
  161. input: (0, _classnames.default)({
  162. [`${prefixCls}-sm`]: mergedSize === 'small',
  163. [`${prefixCls}-lg`]: mergedSize === 'large',
  164. [`${prefixCls}-rtl`]: direction === 'rtl'
  165. }, classNames === null || classNames === void 0 ? void 0 : classNames.input, contextClassNames.input, hashId),
  166. variant: (0, _classnames.default)({
  167. [`${prefixCls}-${variant}`]: enableVariantCls
  168. }, (0, _statusUtils.getStatusClassNames)(prefixCls, mergedStatus)),
  169. affixWrapper: (0, _classnames.default)({
  170. [`${prefixCls}-affix-wrapper-sm`]: mergedSize === 'small',
  171. [`${prefixCls}-affix-wrapper-lg`]: mergedSize === 'large',
  172. [`${prefixCls}-affix-wrapper-rtl`]: direction === 'rtl'
  173. }, hashId),
  174. wrapper: (0, _classnames.default)({
  175. [`${prefixCls}-group-rtl`]: direction === 'rtl'
  176. }, hashId),
  177. groupWrapper: (0, _classnames.default)({
  178. [`${prefixCls}-group-wrapper-sm`]: mergedSize === 'small',
  179. [`${prefixCls}-group-wrapper-lg`]: mergedSize === 'large',
  180. [`${prefixCls}-group-wrapper-rtl`]: direction === 'rtl',
  181. [`${prefixCls}-group-wrapper-${variant}`]: enableVariantCls
  182. }, (0, _statusUtils.getStatusClassNames)(`${prefixCls}-group-wrapper`, mergedStatus, hasFeedback), hashId)
  183. })
  184. }))));
  185. });
  186. if (process.env.NODE_ENV !== 'production') {
  187. Input.displayName = 'Input';
  188. }
  189. var _default = exports.default = Input;