123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155 |
- "use client";
- var __rest = this && this.__rest || function (s, e) {
- var t = {};
- for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0) t[p] = s[p];
- if (s != null && typeof Object.getOwnPropertySymbols === "function") for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
- if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i])) t[p[i]] = s[p[i]];
- }
- return t;
- };
- import * as React from 'react';
- import SearchOutlined from "@ant-design/icons/es/icons/SearchOutlined";
- import classNames from 'classnames';
- import { composeRef } from "rc-util/es/ref";
- import { cloneElement } from '../_util/reactNode';
- import Button from '../button';
- import { ConfigContext } from '../config-provider';
- import useSize from '../config-provider/hooks/useSize';
- import { useCompactItemContext } from '../space/Compact';
- import Input from './Input';
- const Search = /*#__PURE__*/React.forwardRef((props, ref) => {
- const {
- prefixCls: customizePrefixCls,
- inputPrefixCls: customizeInputPrefixCls,
- className,
- size: customizeSize,
- suffix,
- enterButton = false,
- addonAfter,
- loading,
- disabled,
- onSearch: customOnSearch,
- onChange: customOnChange,
- onCompositionStart,
- onCompositionEnd,
- variant,
- onPressEnter: customOnPressEnter
- } = props,
- restProps = __rest(props, ["prefixCls", "inputPrefixCls", "className", "size", "suffix", "enterButton", "addonAfter", "loading", "disabled", "onSearch", "onChange", "onCompositionStart", "onCompositionEnd", "variant", "onPressEnter"]);
- const {
- getPrefixCls,
- direction
- } = React.useContext(ConfigContext);
- const composedRef = React.useRef(false);
- const prefixCls = getPrefixCls('input-search', customizePrefixCls);
- const inputPrefixCls = getPrefixCls('input', customizeInputPrefixCls);
- const {
- compactSize
- } = useCompactItemContext(prefixCls, direction);
- const size = useSize(ctx => {
- var _a;
- return (_a = customizeSize !== null && customizeSize !== void 0 ? customizeSize : compactSize) !== null && _a !== void 0 ? _a : ctx;
- });
- const inputRef = React.useRef(null);
- const onChange = e => {
- if ((e === null || e === void 0 ? void 0 : e.target) && e.type === 'click' && customOnSearch) {
- customOnSearch(e.target.value, e, {
- source: 'clear'
- });
- }
- customOnChange === null || customOnChange === void 0 ? void 0 : customOnChange(e);
- };
- const onMouseDown = e => {
- var _a;
- if (document.activeElement === ((_a = inputRef.current) === null || _a === void 0 ? void 0 : _a.input)) {
- e.preventDefault();
- }
- };
- const onSearch = e => {
- var _a, _b;
- if (customOnSearch) {
- customOnSearch((_b = (_a = inputRef.current) === null || _a === void 0 ? void 0 : _a.input) === null || _b === void 0 ? void 0 : _b.value, e, {
- source: 'input'
- });
- }
- };
- const onPressEnter = e => {
- if (composedRef.current || loading) {
- return;
- }
- customOnPressEnter === null || customOnPressEnter === void 0 ? void 0 : customOnPressEnter(e);
- onSearch(e);
- };
- const searchIcon = typeof enterButton === 'boolean' ? /*#__PURE__*/React.createElement(SearchOutlined, null) : null;
- const btnClassName = `${prefixCls}-button`;
- let button;
- const enterButtonAsElement = enterButton || {};
- const isAntdButton = enterButtonAsElement.type && enterButtonAsElement.type.__ANT_BUTTON === true;
- if (isAntdButton || enterButtonAsElement.type === 'button') {
- button = cloneElement(enterButtonAsElement, Object.assign({
- onMouseDown,
- onClick: e => {
- var _a, _b;
- (_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);
- onSearch(e);
- },
- key: 'enterButton'
- }, isAntdButton ? {
- className: btnClassName,
- size
- } : {}));
- } else {
- button = /*#__PURE__*/React.createElement(Button, {
- className: btnClassName,
- color: enterButton ? 'primary' : 'default',
- size: size,
- disabled: disabled,
- key: "enterButton",
- onMouseDown: onMouseDown,
- onClick: onSearch,
- loading: loading,
- icon: searchIcon,
- variant: variant === 'borderless' || variant === 'filled' || variant === 'underlined' ? 'text' : enterButton ? 'solid' : undefined
- }, enterButton);
- }
- if (addonAfter) {
- button = [button, cloneElement(addonAfter, {
- key: 'addonAfter'
- })];
- }
- const cls = classNames(prefixCls, {
- [`${prefixCls}-rtl`]: direction === 'rtl',
- [`${prefixCls}-${size}`]: !!size,
- [`${prefixCls}-with-button`]: !!enterButton
- }, className);
- const handleOnCompositionStart = e => {
- composedRef.current = true;
- onCompositionStart === null || onCompositionStart === void 0 ? void 0 : onCompositionStart(e);
- };
- const handleOnCompositionEnd = e => {
- composedRef.current = false;
- onCompositionEnd === null || onCompositionEnd === void 0 ? void 0 : onCompositionEnd(e);
- };
- const inputProps = Object.assign(Object.assign({}, restProps), {
- className: cls,
- prefixCls: inputPrefixCls,
- type: 'search',
- size,
- variant,
- onPressEnter,
- onCompositionStart: handleOnCompositionStart,
- onCompositionEnd: handleOnCompositionEnd,
- addonAfter: button,
- suffix,
- onChange,
- disabled
- });
- return /*#__PURE__*/React.createElement(Input, Object.assign({
- ref: composeRef(inputRef, ref)
- }, inputProps));
- });
- if (process.env.NODE_ENV !== 'production') {
- Search.displayName = 'Search';
- }
- export default Search;
|