Search.js 5.6 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155
  1. "use client";
  2. var __rest = this && this.__rest || function (s, e) {
  3. var t = {};
  4. for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0) t[p] = s[p];
  5. if (s != null && typeof Object.getOwnPropertySymbols === "function") for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
  6. if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i])) t[p[i]] = s[p[i]];
  7. }
  8. return t;
  9. };
  10. import * as React from 'react';
  11. import SearchOutlined from "@ant-design/icons/es/icons/SearchOutlined";
  12. import classNames from 'classnames';
  13. import { composeRef } from "rc-util/es/ref";
  14. import { cloneElement } from '../_util/reactNode';
  15. import Button from '../button';
  16. import { ConfigContext } from '../config-provider';
  17. import useSize from '../config-provider/hooks/useSize';
  18. import { useCompactItemContext } from '../space/Compact';
  19. import Input from './Input';
  20. const Search = /*#__PURE__*/React.forwardRef((props, ref) => {
  21. const {
  22. prefixCls: customizePrefixCls,
  23. inputPrefixCls: customizeInputPrefixCls,
  24. className,
  25. size: customizeSize,
  26. suffix,
  27. enterButton = false,
  28. addonAfter,
  29. loading,
  30. disabled,
  31. onSearch: customOnSearch,
  32. onChange: customOnChange,
  33. onCompositionStart,
  34. onCompositionEnd,
  35. variant,
  36. onPressEnter: customOnPressEnter
  37. } = props,
  38. restProps = __rest(props, ["prefixCls", "inputPrefixCls", "className", "size", "suffix", "enterButton", "addonAfter", "loading", "disabled", "onSearch", "onChange", "onCompositionStart", "onCompositionEnd", "variant", "onPressEnter"]);
  39. const {
  40. getPrefixCls,
  41. direction
  42. } = React.useContext(ConfigContext);
  43. const composedRef = React.useRef(false);
  44. const prefixCls = getPrefixCls('input-search', customizePrefixCls);
  45. const inputPrefixCls = getPrefixCls('input', customizeInputPrefixCls);
  46. const {
  47. compactSize
  48. } = useCompactItemContext(prefixCls, direction);
  49. const size = useSize(ctx => {
  50. var _a;
  51. return (_a = customizeSize !== null && customizeSize !== void 0 ? customizeSize : compactSize) !== null && _a !== void 0 ? _a : ctx;
  52. });
  53. const inputRef = React.useRef(null);
  54. const onChange = e => {
  55. if ((e === null || e === void 0 ? void 0 : e.target) && e.type === 'click' && customOnSearch) {
  56. customOnSearch(e.target.value, e, {
  57. source: 'clear'
  58. });
  59. }
  60. customOnChange === null || customOnChange === void 0 ? void 0 : customOnChange(e);
  61. };
  62. const onMouseDown = e => {
  63. var _a;
  64. if (document.activeElement === ((_a = inputRef.current) === null || _a === void 0 ? void 0 : _a.input)) {
  65. e.preventDefault();
  66. }
  67. };
  68. const onSearch = e => {
  69. var _a, _b;
  70. if (customOnSearch) {
  71. customOnSearch((_b = (_a = inputRef.current) === null || _a === void 0 ? void 0 : _a.input) === null || _b === void 0 ? void 0 : _b.value, e, {
  72. source: 'input'
  73. });
  74. }
  75. };
  76. const onPressEnter = e => {
  77. if (composedRef.current || loading) {
  78. return;
  79. }
  80. customOnPressEnter === null || customOnPressEnter === void 0 ? void 0 : customOnPressEnter(e);
  81. onSearch(e);
  82. };
  83. const searchIcon = typeof enterButton === 'boolean' ? /*#__PURE__*/React.createElement(SearchOutlined, null) : null;
  84. const btnClassName = `${prefixCls}-button`;
  85. let button;
  86. const enterButtonAsElement = enterButton || {};
  87. const isAntdButton = enterButtonAsElement.type && enterButtonAsElement.type.__ANT_BUTTON === true;
  88. if (isAntdButton || enterButtonAsElement.type === 'button') {
  89. button = cloneElement(enterButtonAsElement, Object.assign({
  90. onMouseDown,
  91. onClick: e => {
  92. var _a, _b;
  93. (_b = (_a = enterButtonAsElement === null || enterButtonAsElement === void 0 ? void 0 : enterButtonAsElement.props) === null || _a === void 0 ? void 0 : _a.onClick) === null || _b === void 0 ? void 0 : _b.call(_a, e);
  94. onSearch(e);
  95. },
  96. key: 'enterButton'
  97. }, isAntdButton ? {
  98. className: btnClassName,
  99. size
  100. } : {}));
  101. } else {
  102. button = /*#__PURE__*/React.createElement(Button, {
  103. className: btnClassName,
  104. color: enterButton ? 'primary' : 'default',
  105. size: size,
  106. disabled: disabled,
  107. key: "enterButton",
  108. onMouseDown: onMouseDown,
  109. onClick: onSearch,
  110. loading: loading,
  111. icon: searchIcon,
  112. variant: variant === 'borderless' || variant === 'filled' || variant === 'underlined' ? 'text' : enterButton ? 'solid' : undefined
  113. }, enterButton);
  114. }
  115. if (addonAfter) {
  116. button = [button, cloneElement(addonAfter, {
  117. key: 'addonAfter'
  118. })];
  119. }
  120. const cls = classNames(prefixCls, {
  121. [`${prefixCls}-rtl`]: direction === 'rtl',
  122. [`${prefixCls}-${size}`]: !!size,
  123. [`${prefixCls}-with-button`]: !!enterButton
  124. }, className);
  125. const handleOnCompositionStart = e => {
  126. composedRef.current = true;
  127. onCompositionStart === null || onCompositionStart === void 0 ? void 0 : onCompositionStart(e);
  128. };
  129. const handleOnCompositionEnd = e => {
  130. composedRef.current = false;
  131. onCompositionEnd === null || onCompositionEnd === void 0 ? void 0 : onCompositionEnd(e);
  132. };
  133. const inputProps = Object.assign(Object.assign({}, restProps), {
  134. className: cls,
  135. prefixCls: inputPrefixCls,
  136. type: 'search',
  137. size,
  138. variant,
  139. onPressEnter,
  140. onCompositionStart: handleOnCompositionStart,
  141. onCompositionEnd: handleOnCompositionEnd,
  142. addonAfter: button,
  143. suffix,
  144. onChange,
  145. disabled
  146. });
  147. return /*#__PURE__*/React.createElement(Input, Object.assign({
  148. ref: composeRef(inputRef, ref)
  149. }, inputProps));
  150. });
  151. if (process.env.NODE_ENV !== 'production') {
  152. Search.displayName = 'Search';
  153. }
  154. export default Search;