BaseInput.js 8.9 KB

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