BaseInput.js 7.2 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130
  1. import _objectSpread from "@babel/runtime/helpers/esm/objectSpread2";
  2. import _extends from "@babel/runtime/helpers/esm/extends";
  3. import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
  4. import _typeof from "@babel/runtime/helpers/esm/typeof";
  5. import clsx from 'classnames';
  6. import React, { cloneElement, useRef } from 'react';
  7. import { hasAddon, hasPrefixSuffix } from "./utils/commonUtils";
  8. var BaseInput = /*#__PURE__*/React.forwardRef(function (props, ref) {
  9. var _props, _props2, _props3;
  10. var inputEl = props.inputElement,
  11. children = props.children,
  12. prefixCls = props.prefixCls,
  13. prefix = props.prefix,
  14. suffix = props.suffix,
  15. addonBefore = props.addonBefore,
  16. addonAfter = props.addonAfter,
  17. className = props.className,
  18. style = props.style,
  19. disabled = props.disabled,
  20. readOnly = props.readOnly,
  21. focused = props.focused,
  22. triggerFocus = props.triggerFocus,
  23. allowClear = props.allowClear,
  24. value = props.value,
  25. handleReset = props.handleReset,
  26. hidden = props.hidden,
  27. classes = props.classes,
  28. classNames = props.classNames,
  29. dataAttrs = props.dataAttrs,
  30. styles = props.styles,
  31. components = props.components,
  32. onClear = props.onClear;
  33. var inputElement = children !== null && children !== void 0 ? children : inputEl;
  34. var AffixWrapperComponent = (components === null || components === void 0 ? void 0 : components.affixWrapper) || 'span';
  35. var GroupWrapperComponent = (components === null || components === void 0 ? void 0 : components.groupWrapper) || 'span';
  36. var WrapperComponent = (components === null || components === void 0 ? void 0 : components.wrapper) || 'span';
  37. var GroupAddonComponent = (components === null || components === void 0 ? void 0 : components.groupAddon) || 'span';
  38. var containerRef = useRef(null);
  39. var onInputClick = function onInputClick(e) {
  40. var _containerRef$current;
  41. if ((_containerRef$current = containerRef.current) !== null && _containerRef$current !== void 0 && _containerRef$current.contains(e.target)) {
  42. triggerFocus === null || triggerFocus === void 0 || triggerFocus();
  43. }
  44. };
  45. var hasAffix = hasPrefixSuffix(props);
  46. var element = /*#__PURE__*/cloneElement(inputElement, {
  47. value: value,
  48. className: clsx((_props = inputElement.props) === null || _props === void 0 ? void 0 : _props.className, !hasAffix && (classNames === null || classNames === void 0 ? void 0 : classNames.variant)) || null
  49. });
  50. // ======================== Ref ======================== //
  51. var groupRef = useRef(null);
  52. React.useImperativeHandle(ref, function () {
  53. return {
  54. nativeElement: groupRef.current || containerRef.current
  55. };
  56. });
  57. // ================== Prefix & Suffix ================== //
  58. if (hasAffix) {
  59. // ================== Clear Icon ================== //
  60. var clearIcon = null;
  61. if (allowClear) {
  62. var needClear = !disabled && !readOnly && value;
  63. var clearIconCls = "".concat(prefixCls, "-clear-icon");
  64. var iconNode = _typeof(allowClear) === 'object' && allowClear !== null && allowClear !== void 0 && allowClear.clearIcon ? allowClear.clearIcon : '✖';
  65. clearIcon = /*#__PURE__*/React.createElement("button", {
  66. type: "button",
  67. tabIndex: -1,
  68. onClick: function onClick(event) {
  69. handleReset === null || handleReset === void 0 || handleReset(event);
  70. onClear === null || onClear === void 0 || onClear();
  71. }
  72. // Do not trigger onBlur when clear input
  73. // https://github.com/ant-design/ant-design/issues/31200
  74. ,
  75. onMouseDown: function onMouseDown(e) {
  76. return e.preventDefault();
  77. },
  78. className: clsx(clearIconCls, _defineProperty(_defineProperty({}, "".concat(clearIconCls, "-hidden"), !needClear), "".concat(clearIconCls, "-has-suffix"), !!suffix))
  79. }, iconNode);
  80. }
  81. var affixWrapperPrefixCls = "".concat(prefixCls, "-affix-wrapper");
  82. var affixWrapperCls = clsx(affixWrapperPrefixCls, _defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty({}, "".concat(prefixCls, "-disabled"), disabled), "".concat(affixWrapperPrefixCls, "-disabled"), disabled), "".concat(affixWrapperPrefixCls, "-focused"), focused), "".concat(affixWrapperPrefixCls, "-readonly"), readOnly), "".concat(affixWrapperPrefixCls, "-input-with-clear-btn"), suffix && allowClear && value), classes === null || classes === void 0 ? void 0 : classes.affixWrapper, classNames === null || classNames === void 0 ? void 0 : classNames.affixWrapper, classNames === null || classNames === void 0 ? void 0 : classNames.variant);
  83. var suffixNode = (suffix || allowClear) && /*#__PURE__*/React.createElement("span", {
  84. className: clsx("".concat(prefixCls, "-suffix"), classNames === null || classNames === void 0 ? void 0 : classNames.suffix),
  85. style: styles === null || styles === void 0 ? void 0 : styles.suffix
  86. }, clearIcon, suffix);
  87. element = /*#__PURE__*/React.createElement(AffixWrapperComponent, _extends({
  88. className: affixWrapperCls,
  89. style: styles === null || styles === void 0 ? void 0 : styles.affixWrapper,
  90. onClick: onInputClick
  91. }, dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.affixWrapper, {
  92. ref: containerRef
  93. }), prefix && /*#__PURE__*/React.createElement("span", {
  94. className: clsx("".concat(prefixCls, "-prefix"), classNames === null || classNames === void 0 ? void 0 : classNames.prefix),
  95. style: styles === null || styles === void 0 ? void 0 : styles.prefix
  96. }, prefix), element, suffixNode);
  97. }
  98. // ================== Addon ================== //
  99. if (hasAddon(props)) {
  100. var wrapperCls = "".concat(prefixCls, "-group");
  101. var addonCls = "".concat(wrapperCls, "-addon");
  102. var groupWrapperCls = "".concat(wrapperCls, "-wrapper");
  103. var mergedWrapperClassName = clsx("".concat(prefixCls, "-wrapper"), wrapperCls, classes === null || classes === void 0 ? void 0 : classes.wrapper, classNames === null || classNames === void 0 ? void 0 : classNames.wrapper);
  104. var mergedGroupClassName = clsx(groupWrapperCls, _defineProperty({}, "".concat(groupWrapperCls, "-disabled"), disabled), classes === null || classes === void 0 ? void 0 : classes.group, classNames === null || classNames === void 0 ? void 0 : classNames.groupWrapper);
  105. // Need another wrapper for changing display:table to display:inline-block
  106. // and put style prop in wrapper
  107. element = /*#__PURE__*/React.createElement(GroupWrapperComponent, {
  108. className: mergedGroupClassName,
  109. ref: groupRef
  110. }, /*#__PURE__*/React.createElement(WrapperComponent, {
  111. className: mergedWrapperClassName
  112. }, addonBefore && /*#__PURE__*/React.createElement(GroupAddonComponent, {
  113. className: addonCls
  114. }, addonBefore), element, addonAfter && /*#__PURE__*/React.createElement(GroupAddonComponent, {
  115. className: addonCls
  116. }, addonAfter)));
  117. }
  118. // `className` and `style` are always on the root element
  119. return /*#__PURE__*/React.cloneElement(element, {
  120. className: clsx((_props2 = element.props) === null || _props2 === void 0 ? void 0 : _props2.className, className) || null,
  121. style: _objectSpread(_objectSpread({}, (_props3 = element.props) === null || _props3 === void 0 ? void 0 : _props3.style), style),
  122. hidden: hidden
  123. });
  124. });
  125. export default BaseInput;