Search.js
4.47 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
import _defineProperty from "@babel/runtime/helpers/defineProperty";
import _extends from "@babel/runtime/helpers/extends";
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 classNames from 'classnames';
import { composeRef } from "rc-util/es/ref";
import SearchOutlined from '@ant-design/icons/SearchOutlined';
import Input from './Input';
import Button from '../button';
import SizeContext from '../config-provider/SizeContext';
import { ConfigContext } from '../config-provider';
import { cloneElement } from '../_util/reactNode';
var Search = /*#__PURE__*/React.forwardRef(function (props, ref) {
var _classNames;
var customizePrefixCls = props.prefixCls,
customizeInputPrefixCls = props.inputPrefixCls,
className = props.className,
customizeSize = props.size,
suffix = props.suffix,
_props$enterButton = props.enterButton,
enterButton = _props$enterButton === void 0 ? false : _props$enterButton,
addonAfter = props.addonAfter,
loading = props.loading,
disabled = props.disabled,
customOnSearch = props.onSearch,
customOnChange = props.onChange,
restProps = __rest(props, ["prefixCls", "inputPrefixCls", "className", "size", "suffix", "enterButton", "addonAfter", "loading", "disabled", "onSearch", "onChange"]);
var _React$useContext = React.useContext(ConfigContext),
getPrefixCls = _React$useContext.getPrefixCls,
direction = _React$useContext.direction;
var contextSize = React.useContext(SizeContext);
var size = customizeSize || contextSize;
var inputRef = React.useRef(null);
var onChange = function onChange(e) {
if (e && e.target && e.type === 'click' && customOnSearch) {
customOnSearch(e.target.value, e);
}
if (customOnChange) {
customOnChange(e);
}
};
var onMouseDown = function onMouseDown(e) {
var _a;
if (document.activeElement === ((_a = inputRef.current) === null || _a === void 0 ? void 0 : _a.input)) {
e.preventDefault();
}
};
var onSearch = function onSearch(e) {
var _a;
if (customOnSearch) {
customOnSearch((_a = inputRef.current) === null || _a === void 0 ? void 0 : _a.input.value, e);
}
};
var prefixCls = getPrefixCls('input-search', customizePrefixCls);
var inputPrefixCls = getPrefixCls('input', customizeInputPrefixCls);
var searchIcon = typeof enterButton === 'boolean' || typeof enterButton === 'undefined' ? /*#__PURE__*/React.createElement(SearchOutlined, null) : null;
var btnClassName = "".concat(prefixCls, "-button");
var button;
var enterButtonAsElement = enterButton || {};
var isAntdButton = enterButtonAsElement.type && enterButtonAsElement.type.__ANT_BUTTON === true;
if (isAntdButton || enterButtonAsElement.type === 'button') {
button = cloneElement(enterButtonAsElement, _extends({
onMouseDown: onMouseDown,
onClick: onSearch,
key: 'enterButton'
}, isAntdButton ? {
className: btnClassName,
size: size
} : {}));
} else {
button = /*#__PURE__*/React.createElement(Button, {
className: btnClassName,
type: enterButton ? 'primary' : undefined,
size: size,
disabled: disabled,
key: "enterButton",
onMouseDown: onMouseDown,
onClick: onSearch,
loading: loading,
icon: searchIcon
}, enterButton);
}
if (addonAfter) {
button = [button, cloneElement(addonAfter, {
key: 'addonAfter'
})];
}
var cls = classNames(prefixCls, (_classNames = {}, _defineProperty(_classNames, "".concat(prefixCls, "-rtl"), direction === 'rtl'), _defineProperty(_classNames, "".concat(prefixCls, "-").concat(size), !!size), _defineProperty(_classNames, "".concat(prefixCls, "-with-button"), !!enterButton), _classNames), className);
return /*#__PURE__*/React.createElement(Input, _extends({
ref: composeRef(inputRef, ref),
onPressEnter: onSearch
}, restProps, {
size: size,
prefixCls: inputPrefixCls,
addonAfter: button,
suffix: suffix,
onChange: onChange,
className: cls,
disabled: disabled
}));
});
Search.displayName = 'Search';
export default Search;