@synerise/ds-search 0.5.54 → 0.6.3
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/CHANGELOG.md +32 -0
- package/dist/Elements/SearchButton/SearchButton.js +6 -7
- package/dist/Elements/SearchButton/SearchButton.types.js +1 -0
- package/dist/Elements/SearchHeader/SearchHeader.js +5 -6
- package/dist/Elements/SearchHeader/SearchHeader.types.js +1 -0
- package/dist/Elements/SearchInput/SearchInput.js +113 -136
- package/dist/Elements/SearchInput/SearchInput.types.js +1 -0
- package/dist/Elements/SearchItems/SearchItems.js +2 -2
- package/dist/Elements/SearchItems/SearchItems.types.js +1 -0
- package/dist/Search.js +379 -413
- package/dist/Search.styles.js +4 -4
- package/package.json +7 -7
package/CHANGELOG.md
CHANGED
|
@@ -3,6 +3,38 @@
|
|
|
3
3
|
All notable changes to this project will be documented in this file.
|
|
4
4
|
See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
|
|
5
5
|
|
|
6
|
+
## [0.6.3](https://github.com/Synerise/synerise-design/compare/@synerise/ds-search@0.6.2...@synerise/ds-search@0.6.3) (2021-11-22)
|
|
7
|
+
|
|
8
|
+
**Note:** Version bump only for package @synerise/ds-search
|
|
9
|
+
|
|
10
|
+
|
|
11
|
+
|
|
12
|
+
|
|
13
|
+
|
|
14
|
+
## [0.6.2](https://github.com/Synerise/synerise-design/compare/@synerise/ds-search@0.6.1...@synerise/ds-search@0.6.2) (2021-11-16)
|
|
15
|
+
|
|
16
|
+
**Note:** Version bump only for package @synerise/ds-search
|
|
17
|
+
|
|
18
|
+
|
|
19
|
+
|
|
20
|
+
|
|
21
|
+
|
|
22
|
+
## [0.6.1](https://github.com/Synerise/synerise-design/compare/@synerise/ds-search@0.5.54...@synerise/ds-search@0.6.1) (2021-11-09)
|
|
23
|
+
|
|
24
|
+
**Note:** Version bump only for package @synerise/ds-search
|
|
25
|
+
|
|
26
|
+
|
|
27
|
+
|
|
28
|
+
|
|
29
|
+
|
|
30
|
+
# [0.6.0](https://github.com/Synerise/synerise-design/compare/@synerise/ds-search@0.5.54...@synerise/ds-search@0.6.0) (2021-11-09)
|
|
31
|
+
|
|
32
|
+
**Note:** Version bump only for package @synerise/ds-search
|
|
33
|
+
|
|
34
|
+
|
|
35
|
+
|
|
36
|
+
|
|
37
|
+
|
|
6
38
|
## [0.5.54](https://github.com/Synerise/synerise-design/compare/@synerise/ds-search@0.5.53...@synerise/ds-search@0.5.54) (2021-11-05)
|
|
7
39
|
|
|
8
40
|
**Note:** Version bump only for package @synerise/ds-search
|
|
@@ -1,8 +1,7 @@
|
|
|
1
1
|
import * as React from 'react';
|
|
2
|
-
import Icon from '@synerise/ds-icon
|
|
2
|
+
import Icon, { SearchM } from '@synerise/ds-icon';
|
|
3
3
|
import Button from '@synerise/ds-button';
|
|
4
|
-
import
|
|
5
|
-
import * as S from "../../Search.styles";
|
|
4
|
+
import * as S from '../../Search.styles';
|
|
6
5
|
|
|
7
6
|
var SearchButton = function SearchButton(_ref) {
|
|
8
7
|
var inputOpen = _ref.inputOpen,
|
|
@@ -10,19 +9,19 @@ var SearchButton = function SearchButton(_ref) {
|
|
|
10
9
|
onClick = _ref.onClick,
|
|
11
10
|
inputFocused = _ref.inputFocused,
|
|
12
11
|
clickable = _ref.clickable;
|
|
13
|
-
return React.createElement(S.SearchButton, {
|
|
12
|
+
return /*#__PURE__*/React.createElement(S.SearchButton, {
|
|
14
13
|
isOpen: inputOpen,
|
|
15
14
|
hidden: hidden,
|
|
16
15
|
className: "SearchButton",
|
|
17
16
|
inputFocused: inputFocused,
|
|
18
17
|
clickable: clickable,
|
|
19
18
|
onClick: onClick
|
|
20
|
-
}, React.createElement(Button, {
|
|
19
|
+
}, /*#__PURE__*/React.createElement(Button, {
|
|
21
20
|
type: "ghost",
|
|
22
21
|
className: inputOpen ? 'btn-search-open' : 'btn-search',
|
|
23
22
|
"data-testid": "btn"
|
|
24
|
-
}, React.createElement(Icon, {
|
|
25
|
-
component: React.createElement(SearchM, null)
|
|
23
|
+
}, /*#__PURE__*/React.createElement(Icon, {
|
|
24
|
+
component: /*#__PURE__*/React.createElement(SearchM, null)
|
|
26
25
|
})));
|
|
27
26
|
};
|
|
28
27
|
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export {};
|
|
@@ -1,18 +1,17 @@
|
|
|
1
1
|
import * as React from 'react';
|
|
2
2
|
import Tooltip from '@synerise/ds-tooltip/dist/Tooltip';
|
|
3
|
-
import Icon from '@synerise/ds-icon
|
|
4
|
-
import
|
|
5
|
-
import * as S from "../../Search.styles";
|
|
3
|
+
import Icon, { InfoFillS } from '@synerise/ds-icon';
|
|
4
|
+
import * as S from '../../Search.styles';
|
|
6
5
|
|
|
7
6
|
var SearchHeader = function SearchHeader(_ref) {
|
|
8
7
|
var headerText = _ref.headerText,
|
|
9
8
|
tooltip = _ref.tooltip;
|
|
10
|
-
return React.createElement(S.MenuHeader, null, headerText, tooltip && React.createElement(Tooltip, {
|
|
9
|
+
return /*#__PURE__*/React.createElement(S.MenuHeader, null, headerText, tooltip && /*#__PURE__*/React.createElement(Tooltip, {
|
|
11
10
|
type: "default",
|
|
12
11
|
trigger: "hover",
|
|
13
12
|
title: tooltip || headerText
|
|
14
|
-
}, React.createElement(S.HeaderIconWrapper, null, React.createElement(Icon, {
|
|
15
|
-
component: React.createElement(InfoFillS, null)
|
|
13
|
+
}, /*#__PURE__*/React.createElement(S.HeaderIconWrapper, null, /*#__PURE__*/React.createElement(Icon, {
|
|
14
|
+
component: /*#__PURE__*/React.createElement(InfoFillS, null)
|
|
16
15
|
}))));
|
|
17
16
|
};
|
|
18
17
|
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export {};
|
|
@@ -1,52 +1,31 @@
|
|
|
1
|
-
function _typeof(obj) { "@babel/helpers - typeof"; if (typeof Symbol === "function" && typeof Symbol.iterator === "symbol") { _typeof = function _typeof(obj) { return typeof obj; }; } else { _typeof = function _typeof(obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }; } return _typeof(obj); }
|
|
2
|
-
|
|
3
1
|
function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
|
|
4
2
|
|
|
5
|
-
function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
|
|
6
|
-
|
|
7
|
-
function _defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } }
|
|
8
|
-
|
|
9
|
-
function _createClass(Constructor, protoProps, staticProps) { if (protoProps) _defineProperties(Constructor.prototype, protoProps); if (staticProps) _defineProperties(Constructor, staticProps); return Constructor; }
|
|
10
|
-
|
|
11
|
-
function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function"); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, writable: true, configurable: true } }); if (superClass) _setPrototypeOf(subClass, superClass); }
|
|
12
|
-
|
|
13
|
-
function _setPrototypeOf(o, p) { _setPrototypeOf = Object.setPrototypeOf || function _setPrototypeOf(o, p) { o.__proto__ = p; return o; }; return _setPrototypeOf(o, p); }
|
|
14
|
-
|
|
15
|
-
function _createSuper(Derived) { return function () { var Super = _getPrototypeOf(Derived), result; if (_isNativeReflectConstruct()) { var NewTarget = _getPrototypeOf(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return _possibleConstructorReturn(this, result); }; }
|
|
16
|
-
|
|
17
|
-
function _possibleConstructorReturn(self, call) { if (call && (_typeof(call) === "object" || typeof call === "function")) { return call; } return _assertThisInitialized(self); }
|
|
18
|
-
|
|
19
3
|
function _assertThisInitialized(self) { if (self === void 0) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return self; }
|
|
20
4
|
|
|
21
|
-
function
|
|
5
|
+
function _inheritsLoose(subClass, superClass) { subClass.prototype = Object.create(superClass.prototype); subClass.prototype.constructor = subClass; subClass.__proto__ = superClass; }
|
|
22
6
|
|
|
23
|
-
function
|
|
7
|
+
function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
|
|
24
8
|
|
|
25
9
|
import * as React from 'react';
|
|
26
10
|
import onClickOutside from 'react-onclickoutside';
|
|
27
11
|
import Input from 'antd/lib/input';
|
|
28
|
-
import Close3M from '@synerise/ds-icon/dist/icons/Close3M';
|
|
29
12
|
import Tooltip from '@synerise/ds-tooltip/dist/Tooltip';
|
|
30
13
|
import theme from '@synerise/ds-core/dist/js/DSProvider/ThemeProvider/theme';
|
|
31
|
-
import Icon from '@synerise/ds-icon
|
|
14
|
+
import Icon, { Close3M } from '@synerise/ds-icon';
|
|
32
15
|
import * as S from '../../Search.styles';
|
|
33
16
|
import SearchButton from '../SearchButton/SearchButton';
|
|
34
17
|
|
|
35
18
|
var SearchInput = /*#__PURE__*/function (_React$Component) {
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
var _super = _createSuper(SearchInput);
|
|
19
|
+
_inheritsLoose(SearchInput, _React$Component);
|
|
39
20
|
|
|
40
21
|
function SearchInput(props) {
|
|
41
22
|
var _this;
|
|
42
23
|
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
_this = _super.call(this, props); // eslint-disable-next-line react/state-in-constructor
|
|
24
|
+
_this = _React$Component.call(this, props) || this; // eslint-disable-next-line react/state-in-constructor
|
|
46
25
|
|
|
47
|
-
_this
|
|
26
|
+
_defineProperty(_assertThisInitialized(_this), "inputRef", React.createRef());
|
|
48
27
|
|
|
49
|
-
_this
|
|
28
|
+
_defineProperty(_assertThisInitialized(_this), "componentDidUpdate", function () {
|
|
50
29
|
var _this$props = _this.props,
|
|
51
30
|
moveCursorToEnd = _this$props.moveCursorToEnd,
|
|
52
31
|
value = _this$props.value;
|
|
@@ -56,13 +35,13 @@ var SearchInput = /*#__PURE__*/function (_React$Component) {
|
|
|
56
35
|
input.current.input.selectionStart = value.length || 0;
|
|
57
36
|
input.current.input.selectionEnd = value.length || 0;
|
|
58
37
|
}
|
|
59
|
-
};
|
|
38
|
+
});
|
|
60
39
|
|
|
61
|
-
_this
|
|
40
|
+
_defineProperty(_assertThisInitialized(_this), "focusInput", function () {
|
|
62
41
|
_this.inputRef.current && _this.inputRef.current.focus();
|
|
63
|
-
};
|
|
42
|
+
});
|
|
64
43
|
|
|
65
|
-
_this
|
|
44
|
+
_defineProperty(_assertThisInitialized(_this), "toggleOpen", function () {
|
|
66
45
|
var onToggle = _this.props.onToggle;
|
|
67
46
|
var isInputOpen = _this.state.isInputOpen;
|
|
68
47
|
onToggle && onToggle(!isInputOpen);
|
|
@@ -72,9 +51,9 @@ var SearchInput = /*#__PURE__*/function (_React$Component) {
|
|
|
72
51
|
isInputOpen: !prevState.isInputOpen
|
|
73
52
|
};
|
|
74
53
|
});
|
|
75
|
-
};
|
|
54
|
+
});
|
|
76
55
|
|
|
77
|
-
_this
|
|
56
|
+
_defineProperty(_assertThisInitialized(_this), "handleSearchButtonClick", function () {
|
|
78
57
|
var _this$props2 = _this.props,
|
|
79
58
|
alwaysExpanded = _this$props2.alwaysExpanded,
|
|
80
59
|
onButtonClick = _this$props2.onButtonClick;
|
|
@@ -86,9 +65,9 @@ var SearchInput = /*#__PURE__*/function (_React$Component) {
|
|
|
86
65
|
|
|
87
66
|
onButtonClick && onButtonClick();
|
|
88
67
|
}
|
|
89
|
-
};
|
|
68
|
+
});
|
|
90
69
|
|
|
91
|
-
_this
|
|
70
|
+
_defineProperty(_assertThisInitialized(_this), "handleClearValue", function () {
|
|
92
71
|
var onClear = _this.props.onClear;
|
|
93
72
|
|
|
94
73
|
_this.setState({
|
|
@@ -99,9 +78,9 @@ var SearchInput = /*#__PURE__*/function (_React$Component) {
|
|
|
99
78
|
_this.focusInput();
|
|
100
79
|
|
|
101
80
|
onClear();
|
|
102
|
-
};
|
|
81
|
+
});
|
|
103
82
|
|
|
104
|
-
_this
|
|
83
|
+
_defineProperty(_assertThisInitialized(_this), "handleChangeValue", function (_ref) {
|
|
105
84
|
var value = _ref.target.value;
|
|
106
85
|
var onChange = _this.props.onChange;
|
|
107
86
|
onChange(value);
|
|
@@ -109,22 +88,22 @@ var SearchInput = /*#__PURE__*/function (_React$Component) {
|
|
|
109
88
|
_this.setState({
|
|
110
89
|
isResultChosen: false
|
|
111
90
|
});
|
|
112
|
-
};
|
|
91
|
+
});
|
|
113
92
|
|
|
114
|
-
_this
|
|
93
|
+
_defineProperty(_assertThisInitialized(_this), "handleSearchInputContentClick", function () {
|
|
115
94
|
var onClick = _this.props.onClick;
|
|
116
95
|
onClick && onClick();
|
|
117
96
|
|
|
118
97
|
_this.focusInput();
|
|
119
|
-
};
|
|
98
|
+
});
|
|
120
99
|
|
|
121
|
-
_this
|
|
100
|
+
_defineProperty(_assertThisInitialized(_this), "handleOffsetWithFilter", function (ref) {
|
|
122
101
|
ref && _this.setState({
|
|
123
102
|
inputOffset: ref.getBoundingClientRect().width
|
|
124
103
|
});
|
|
125
|
-
};
|
|
104
|
+
});
|
|
126
105
|
|
|
127
|
-
_this
|
|
106
|
+
_defineProperty(_assertThisInitialized(_this), "handleClickOutside", function () {
|
|
128
107
|
var _this$props3 = _this.props,
|
|
129
108
|
closeOnClickOutside = _this$props3.closeOnClickOutside,
|
|
130
109
|
onToggle = _this$props3.onToggle,
|
|
@@ -137,7 +116,7 @@ var SearchInput = /*#__PURE__*/function (_React$Component) {
|
|
|
137
116
|
|
|
138
117
|
onToggle && onToggle(false);
|
|
139
118
|
}
|
|
140
|
-
};
|
|
119
|
+
});
|
|
141
120
|
|
|
142
121
|
_this.state = {
|
|
143
122
|
inputOffset: 0,
|
|
@@ -148,102 +127,100 @@ var SearchInput = /*#__PURE__*/function (_React$Component) {
|
|
|
148
127
|
return _this;
|
|
149
128
|
}
|
|
150
129
|
|
|
151
|
-
|
|
152
|
-
key: "getSnapshotBeforeUpdate",
|
|
153
|
-
value: function getSnapshotBeforeUpdate(prevProps) {
|
|
154
|
-
var _this2 = this;
|
|
130
|
+
var _proto = SearchInput.prototype;
|
|
155
131
|
|
|
156
|
-
|
|
157
|
-
|
|
158
|
-
toggleTrigger = _this$props4.toggleTrigger;
|
|
132
|
+
_proto.getSnapshotBeforeUpdate = function getSnapshotBeforeUpdate(prevProps) {
|
|
133
|
+
var _this2 = this;
|
|
159
134
|
|
|
160
|
-
|
|
161
|
-
|
|
162
|
-
|
|
163
|
-
}, 0);
|
|
164
|
-
}
|
|
135
|
+
var _this$props4 = this.props,
|
|
136
|
+
focusTrigger = _this$props4.focusTrigger,
|
|
137
|
+
toggleTrigger = _this$props4.toggleTrigger;
|
|
165
138
|
|
|
166
|
-
|
|
167
|
-
|
|
168
|
-
|
|
169
|
-
|
|
170
|
-
return null;
|
|
139
|
+
if (prevProps.focusTrigger !== focusTrigger) {
|
|
140
|
+
setTimeout(function () {
|
|
141
|
+
_this2.focusInput();
|
|
142
|
+
}, 0);
|
|
171
143
|
}
|
|
172
|
-
|
|
173
|
-
|
|
174
|
-
|
|
175
|
-
var _this3 = this;
|
|
176
|
-
|
|
177
|
-
var _this$props5 = this.props,
|
|
178
|
-
alwaysExpanded = _this$props5.alwaysExpanded,
|
|
179
|
-
alwaysHighlight = _this$props5.alwaysHighlight,
|
|
180
|
-
clearTooltip = _this$props5.clearTooltip,
|
|
181
|
-
filterLabel = _this$props5.filterLabel,
|
|
182
|
-
filterLookupKey = _this$props5.filterLookupKey,
|
|
183
|
-
onKeyDown = _this$props5.onKeyDown,
|
|
184
|
-
placeholder = _this$props5.placeholder,
|
|
185
|
-
textLookupKey = _this$props5.textLookupKey,
|
|
186
|
-
value = _this$props5.value,
|
|
187
|
-
disableInput = _this$props5.disableInput,
|
|
188
|
-
_this$props5$inputPro = _this$props5.inputProps,
|
|
189
|
-
inputProps = _this$props5$inputPro === void 0 ? {} : _this$props5$inputPro;
|
|
190
|
-
var _this$state = this.state,
|
|
191
|
-
isInputOpen = _this$state.isInputOpen,
|
|
192
|
-
inputOffset = _this$state.inputOffset,
|
|
193
|
-
isResultChosen = _this$state.isResultChosen,
|
|
194
|
-
isInputFocused = _this$state.isInputFocused;
|
|
195
|
-
return React.createElement(S.SearchInputWrapper, null, React.createElement(S.SearchInputContent, {
|
|
196
|
-
className: isInputOpen || !!value || !!filterLabel ? 'is-open search-input-wrapper' : 'search-input-wrapper',
|
|
197
|
-
offset: inputOffset,
|
|
198
|
-
filterLabel: filterLabel,
|
|
199
|
-
onClick: this.handleSearchInputContentClick
|
|
200
|
-
}, React.createElement(S.LeftSide, {
|
|
201
|
-
isOpen: isInputOpen
|
|
202
|
-
}, filterLabel && React.createElement(S.Filter, {
|
|
203
|
-
ref: this.handleOffsetWithFilter
|
|
204
|
-
}, filterLabel.icon && !isResultChosen && React.createElement(Icon, {
|
|
205
|
-
component: filterLabel.icon
|
|
206
|
-
}), React.createElement("span", null, filterLabel[filterLookupKey || ''] || filterLabel[textLookupKey || '']))), React.createElement(S.SearchInner, {
|
|
207
|
-
hasValue: !!value,
|
|
208
|
-
alwaysHighlight: alwaysHighlight
|
|
209
|
-
}, React.createElement(Input, _extends({
|
|
210
|
-
placeholder: placeholder,
|
|
211
|
-
ref: this.inputRef,
|
|
212
|
-
value: value,
|
|
213
|
-
onChange: this.handleChangeValue,
|
|
214
|
-
onKeyDown: onKeyDown,
|
|
215
|
-
onFocus: function onFocus() {
|
|
216
|
-
_this3.setState({
|
|
217
|
-
isInputFocused: true
|
|
218
|
-
});
|
|
219
|
-
},
|
|
220
|
-
onBlur: function onBlur() {
|
|
221
|
-
_this3.setState({
|
|
222
|
-
isInputFocused: false
|
|
223
|
-
});
|
|
224
|
-
},
|
|
225
|
-
autoComplete: "off",
|
|
226
|
-
autoFocus: true,
|
|
227
|
-
disabled: disableInput
|
|
228
|
-
}, inputProps)))), React.createElement(SearchButton, {
|
|
229
|
-
inputOpen: isInputOpen,
|
|
230
|
-
hidden: !!value || !!filterLabel,
|
|
231
|
-
inputFocused: isInputFocused,
|
|
232
|
-
clickable: !alwaysExpanded,
|
|
233
|
-
onClick: this.handleSearchButtonClick
|
|
234
|
-
}), React.createElement(S.ClearButton, {
|
|
235
|
-
hidden: !value && !filterLabel
|
|
236
|
-
}, React.createElement(Icon, {
|
|
237
|
-
"data-testid": "clear",
|
|
238
|
-
onClick: this.handleClearValue,
|
|
239
|
-
component: React.createElement(Tooltip, {
|
|
240
|
-
title: clearTooltip
|
|
241
|
-
}, React.createElement(Close3M, null)),
|
|
242
|
-
color: theme.palette['red-600'],
|
|
243
|
-
size: 18
|
|
244
|
-
})));
|
|
144
|
+
|
|
145
|
+
if (prevProps.toggleTrigger !== toggleTrigger) {
|
|
146
|
+
this.toggleOpen();
|
|
245
147
|
}
|
|
246
|
-
|
|
148
|
+
|
|
149
|
+
return null;
|
|
150
|
+
};
|
|
151
|
+
|
|
152
|
+
_proto.render = function render() {
|
|
153
|
+
var _this3 = this;
|
|
154
|
+
|
|
155
|
+
var _this$props5 = this.props,
|
|
156
|
+
alwaysExpanded = _this$props5.alwaysExpanded,
|
|
157
|
+
alwaysHighlight = _this$props5.alwaysHighlight,
|
|
158
|
+
clearTooltip = _this$props5.clearTooltip,
|
|
159
|
+
filterLabel = _this$props5.filterLabel,
|
|
160
|
+
filterLookupKey = _this$props5.filterLookupKey,
|
|
161
|
+
onKeyDown = _this$props5.onKeyDown,
|
|
162
|
+
placeholder = _this$props5.placeholder,
|
|
163
|
+
textLookupKey = _this$props5.textLookupKey,
|
|
164
|
+
value = _this$props5.value,
|
|
165
|
+
disableInput = _this$props5.disableInput,
|
|
166
|
+
_this$props5$inputPro = _this$props5.inputProps,
|
|
167
|
+
inputProps = _this$props5$inputPro === void 0 ? {} : _this$props5$inputPro;
|
|
168
|
+
var _this$state = this.state,
|
|
169
|
+
isInputOpen = _this$state.isInputOpen,
|
|
170
|
+
inputOffset = _this$state.inputOffset,
|
|
171
|
+
isResultChosen = _this$state.isResultChosen,
|
|
172
|
+
isInputFocused = _this$state.isInputFocused;
|
|
173
|
+
return /*#__PURE__*/React.createElement(S.SearchInputWrapper, null, /*#__PURE__*/React.createElement(S.SearchInputContent, {
|
|
174
|
+
className: isInputOpen || !!value || !!filterLabel ? 'is-open search-input-wrapper' : 'search-input-wrapper',
|
|
175
|
+
offset: inputOffset,
|
|
176
|
+
filterLabel: filterLabel,
|
|
177
|
+
onClick: this.handleSearchInputContentClick
|
|
178
|
+
}, /*#__PURE__*/React.createElement(S.LeftSide, {
|
|
179
|
+
isOpen: isInputOpen
|
|
180
|
+
}, filterLabel && /*#__PURE__*/React.createElement(S.Filter, {
|
|
181
|
+
ref: this.handleOffsetWithFilter
|
|
182
|
+
}, filterLabel.icon && !isResultChosen && /*#__PURE__*/React.createElement(Icon, {
|
|
183
|
+
component: filterLabel.icon
|
|
184
|
+
}), /*#__PURE__*/React.createElement("span", null, filterLabel[filterLookupKey || ''] || filterLabel[textLookupKey || '']))), /*#__PURE__*/React.createElement(S.SearchInner, {
|
|
185
|
+
hasValue: !!value,
|
|
186
|
+
alwaysHighlight: alwaysHighlight
|
|
187
|
+
}, /*#__PURE__*/React.createElement(Input, _extends({
|
|
188
|
+
placeholder: placeholder,
|
|
189
|
+
ref: this.inputRef,
|
|
190
|
+
value: value,
|
|
191
|
+
onChange: this.handleChangeValue,
|
|
192
|
+
onKeyDown: onKeyDown,
|
|
193
|
+
onFocus: function onFocus() {
|
|
194
|
+
_this3.setState({
|
|
195
|
+
isInputFocused: true
|
|
196
|
+
});
|
|
197
|
+
},
|
|
198
|
+
onBlur: function onBlur() {
|
|
199
|
+
_this3.setState({
|
|
200
|
+
isInputFocused: false
|
|
201
|
+
});
|
|
202
|
+
},
|
|
203
|
+
autoComplete: "off",
|
|
204
|
+
autoFocus: true,
|
|
205
|
+
disabled: disableInput
|
|
206
|
+
}, inputProps)))), /*#__PURE__*/React.createElement(SearchButton, {
|
|
207
|
+
inputOpen: isInputOpen,
|
|
208
|
+
hidden: !!value || !!filterLabel,
|
|
209
|
+
inputFocused: isInputFocused,
|
|
210
|
+
clickable: !alwaysExpanded,
|
|
211
|
+
onClick: this.handleSearchButtonClick
|
|
212
|
+
}), /*#__PURE__*/React.createElement(S.ClearButton, {
|
|
213
|
+
hidden: !value && !filterLabel
|
|
214
|
+
}, /*#__PURE__*/React.createElement(Icon, {
|
|
215
|
+
"data-testid": "clear",
|
|
216
|
+
onClick: this.handleClearValue,
|
|
217
|
+
component: /*#__PURE__*/React.createElement(Tooltip, {
|
|
218
|
+
title: clearTooltip
|
|
219
|
+
}, /*#__PURE__*/React.createElement(Close3M, null)),
|
|
220
|
+
color: theme.palette['red-600'],
|
|
221
|
+
size: 18
|
|
222
|
+
})));
|
|
223
|
+
};
|
|
247
224
|
|
|
248
225
|
return SearchInput;
|
|
249
226
|
}(React.Component);
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export {};
|
|
@@ -15,7 +15,7 @@ var listStyle = {
|
|
|
15
15
|
}; // eslint-disable-next-line @typescript-eslint/no-explicit-any
|
|
16
16
|
|
|
17
17
|
export function renderSearchList(props, children) {
|
|
18
|
-
return React.createElement(SearchItems, props, children);
|
|
18
|
+
return /*#__PURE__*/React.createElement(SearchItems, props, children);
|
|
19
19
|
}
|
|
20
20
|
|
|
21
21
|
var rowRenderer = function rowRenderer(_ref) {
|
|
@@ -72,7 +72,7 @@ var SearchItems = function SearchItems(_ref2) {
|
|
|
72
72
|
listRef.current.scrollTo(Math.max(0, listProps.scrollTop || 0));
|
|
73
73
|
}
|
|
74
74
|
}, [listProps]);
|
|
75
|
-
return React.createElement(Menu, null, data && React.createElement(List, _extends({
|
|
75
|
+
return /*#__PURE__*/React.createElement(Menu, null, data && /*#__PURE__*/React.createElement(List, _extends({
|
|
76
76
|
height: getHeight(),
|
|
77
77
|
itemCount: data.length,
|
|
78
78
|
itemData: {
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export {};
|