@synerise/ds-search 0.6.2 → 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 +8 -0
- package/dist/Elements/SearchInput/SearchInput.js +112 -134
- package/dist/Elements/SearchItems/SearchItems.js +3 -3
- package/dist/Search.js +380 -414
- package/dist/Search.styles.js +4 -4
- package/package.json +7 -7
package/CHANGELOG.md
CHANGED
|
@@ -3,6 +3,14 @@
|
|
|
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
|
+
|
|
6
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)
|
|
7
15
|
|
|
8
16
|
**Note:** Version bump only for package @synerise/ds-search
|
|
@@ -1,26 +1,10 @@
|
|
|
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) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = _getPrototypeOf(Derived), result; if (hasNativeReflectConstruct) { 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; } else if (call !== void 0) { throw new TypeError("Derived constructors may only return object or undefined"); } 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';
|
|
@@ -32,20 +16,16 @@ import * as S from '../../Search.styles';
|
|
|
32
16
|
import SearchButton from '../SearchButton/SearchButton';
|
|
33
17
|
|
|
34
18
|
var SearchInput = /*#__PURE__*/function (_React$Component) {
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
var _super = _createSuper(SearchInput);
|
|
19
|
+
_inheritsLoose(SearchInput, _React$Component);
|
|
38
20
|
|
|
39
21
|
function SearchInput(props) {
|
|
40
22
|
var _this;
|
|
41
23
|
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
_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
|
|
45
25
|
|
|
46
|
-
_this
|
|
26
|
+
_defineProperty(_assertThisInitialized(_this), "inputRef", React.createRef());
|
|
47
27
|
|
|
48
|
-
_this
|
|
28
|
+
_defineProperty(_assertThisInitialized(_this), "componentDidUpdate", function () {
|
|
49
29
|
var _this$props = _this.props,
|
|
50
30
|
moveCursorToEnd = _this$props.moveCursorToEnd,
|
|
51
31
|
value = _this$props.value;
|
|
@@ -55,13 +35,13 @@ var SearchInput = /*#__PURE__*/function (_React$Component) {
|
|
|
55
35
|
input.current.input.selectionStart = value.length || 0;
|
|
56
36
|
input.current.input.selectionEnd = value.length || 0;
|
|
57
37
|
}
|
|
58
|
-
};
|
|
38
|
+
});
|
|
59
39
|
|
|
60
|
-
_this
|
|
40
|
+
_defineProperty(_assertThisInitialized(_this), "focusInput", function () {
|
|
61
41
|
_this.inputRef.current && _this.inputRef.current.focus();
|
|
62
|
-
};
|
|
42
|
+
});
|
|
63
43
|
|
|
64
|
-
_this
|
|
44
|
+
_defineProperty(_assertThisInitialized(_this), "toggleOpen", function () {
|
|
65
45
|
var onToggle = _this.props.onToggle;
|
|
66
46
|
var isInputOpen = _this.state.isInputOpen;
|
|
67
47
|
onToggle && onToggle(!isInputOpen);
|
|
@@ -71,9 +51,9 @@ var SearchInput = /*#__PURE__*/function (_React$Component) {
|
|
|
71
51
|
isInputOpen: !prevState.isInputOpen
|
|
72
52
|
};
|
|
73
53
|
});
|
|
74
|
-
};
|
|
54
|
+
});
|
|
75
55
|
|
|
76
|
-
_this
|
|
56
|
+
_defineProperty(_assertThisInitialized(_this), "handleSearchButtonClick", function () {
|
|
77
57
|
var _this$props2 = _this.props,
|
|
78
58
|
alwaysExpanded = _this$props2.alwaysExpanded,
|
|
79
59
|
onButtonClick = _this$props2.onButtonClick;
|
|
@@ -85,9 +65,9 @@ var SearchInput = /*#__PURE__*/function (_React$Component) {
|
|
|
85
65
|
|
|
86
66
|
onButtonClick && onButtonClick();
|
|
87
67
|
}
|
|
88
|
-
};
|
|
68
|
+
});
|
|
89
69
|
|
|
90
|
-
_this
|
|
70
|
+
_defineProperty(_assertThisInitialized(_this), "handleClearValue", function () {
|
|
91
71
|
var onClear = _this.props.onClear;
|
|
92
72
|
|
|
93
73
|
_this.setState({
|
|
@@ -98,9 +78,9 @@ var SearchInput = /*#__PURE__*/function (_React$Component) {
|
|
|
98
78
|
_this.focusInput();
|
|
99
79
|
|
|
100
80
|
onClear();
|
|
101
|
-
};
|
|
81
|
+
});
|
|
102
82
|
|
|
103
|
-
_this
|
|
83
|
+
_defineProperty(_assertThisInitialized(_this), "handleChangeValue", function (_ref) {
|
|
104
84
|
var value = _ref.target.value;
|
|
105
85
|
var onChange = _this.props.onChange;
|
|
106
86
|
onChange(value);
|
|
@@ -108,22 +88,22 @@ var SearchInput = /*#__PURE__*/function (_React$Component) {
|
|
|
108
88
|
_this.setState({
|
|
109
89
|
isResultChosen: false
|
|
110
90
|
});
|
|
111
|
-
};
|
|
91
|
+
});
|
|
112
92
|
|
|
113
|
-
_this
|
|
93
|
+
_defineProperty(_assertThisInitialized(_this), "handleSearchInputContentClick", function () {
|
|
114
94
|
var onClick = _this.props.onClick;
|
|
115
95
|
onClick && onClick();
|
|
116
96
|
|
|
117
97
|
_this.focusInput();
|
|
118
|
-
};
|
|
98
|
+
});
|
|
119
99
|
|
|
120
|
-
_this
|
|
100
|
+
_defineProperty(_assertThisInitialized(_this), "handleOffsetWithFilter", function (ref) {
|
|
121
101
|
ref && _this.setState({
|
|
122
102
|
inputOffset: ref.getBoundingClientRect().width
|
|
123
103
|
});
|
|
124
|
-
};
|
|
104
|
+
});
|
|
125
105
|
|
|
126
|
-
_this
|
|
106
|
+
_defineProperty(_assertThisInitialized(_this), "handleClickOutside", function () {
|
|
127
107
|
var _this$props3 = _this.props,
|
|
128
108
|
closeOnClickOutside = _this$props3.closeOnClickOutside,
|
|
129
109
|
onToggle = _this$props3.onToggle,
|
|
@@ -136,7 +116,7 @@ var SearchInput = /*#__PURE__*/function (_React$Component) {
|
|
|
136
116
|
|
|
137
117
|
onToggle && onToggle(false);
|
|
138
118
|
}
|
|
139
|
-
};
|
|
119
|
+
});
|
|
140
120
|
|
|
141
121
|
_this.state = {
|
|
142
122
|
inputOffset: 0,
|
|
@@ -147,102 +127,100 @@ var SearchInput = /*#__PURE__*/function (_React$Component) {
|
|
|
147
127
|
return _this;
|
|
148
128
|
}
|
|
149
129
|
|
|
150
|
-
|
|
151
|
-
key: "getSnapshotBeforeUpdate",
|
|
152
|
-
value: function getSnapshotBeforeUpdate(prevProps) {
|
|
153
|
-
var _this2 = this;
|
|
130
|
+
var _proto = SearchInput.prototype;
|
|
154
131
|
|
|
155
|
-
|
|
156
|
-
|
|
157
|
-
toggleTrigger = _this$props4.toggleTrigger;
|
|
132
|
+
_proto.getSnapshotBeforeUpdate = function getSnapshotBeforeUpdate(prevProps) {
|
|
133
|
+
var _this2 = this;
|
|
158
134
|
|
|
159
|
-
|
|
160
|
-
|
|
161
|
-
|
|
162
|
-
}, 0);
|
|
163
|
-
}
|
|
135
|
+
var _this$props4 = this.props,
|
|
136
|
+
focusTrigger = _this$props4.focusTrigger,
|
|
137
|
+
toggleTrigger = _this$props4.toggleTrigger;
|
|
164
138
|
|
|
165
|
-
|
|
166
|
-
|
|
167
|
-
|
|
168
|
-
|
|
169
|
-
return null;
|
|
139
|
+
if (prevProps.focusTrigger !== focusTrigger) {
|
|
140
|
+
setTimeout(function () {
|
|
141
|
+
_this2.focusInput();
|
|
142
|
+
}, 0);
|
|
170
143
|
}
|
|
171
|
-
|
|
172
|
-
|
|
173
|
-
|
|
174
|
-
var _this3 = this;
|
|
175
|
-
|
|
176
|
-
var _this$props5 = this.props,
|
|
177
|
-
alwaysExpanded = _this$props5.alwaysExpanded,
|
|
178
|
-
alwaysHighlight = _this$props5.alwaysHighlight,
|
|
179
|
-
clearTooltip = _this$props5.clearTooltip,
|
|
180
|
-
filterLabel = _this$props5.filterLabel,
|
|
181
|
-
filterLookupKey = _this$props5.filterLookupKey,
|
|
182
|
-
onKeyDown = _this$props5.onKeyDown,
|
|
183
|
-
placeholder = _this$props5.placeholder,
|
|
184
|
-
textLookupKey = _this$props5.textLookupKey,
|
|
185
|
-
value = _this$props5.value,
|
|
186
|
-
disableInput = _this$props5.disableInput,
|
|
187
|
-
_this$props5$inputPro = _this$props5.inputProps,
|
|
188
|
-
inputProps = _this$props5$inputPro === void 0 ? {} : _this$props5$inputPro;
|
|
189
|
-
var _this$state = this.state,
|
|
190
|
-
isInputOpen = _this$state.isInputOpen,
|
|
191
|
-
inputOffset = _this$state.inputOffset,
|
|
192
|
-
isResultChosen = _this$state.isResultChosen,
|
|
193
|
-
isInputFocused = _this$state.isInputFocused;
|
|
194
|
-
return /*#__PURE__*/React.createElement(S.SearchInputWrapper, null, /*#__PURE__*/React.createElement(S.SearchInputContent, {
|
|
195
|
-
className: isInputOpen || !!value || !!filterLabel ? 'is-open search-input-wrapper' : 'search-input-wrapper',
|
|
196
|
-
offset: inputOffset,
|
|
197
|
-
filterLabel: filterLabel,
|
|
198
|
-
onClick: this.handleSearchInputContentClick
|
|
199
|
-
}, /*#__PURE__*/React.createElement(S.LeftSide, {
|
|
200
|
-
isOpen: isInputOpen
|
|
201
|
-
}, filterLabel && /*#__PURE__*/React.createElement(S.Filter, {
|
|
202
|
-
ref: this.handleOffsetWithFilter
|
|
203
|
-
}, filterLabel.icon && !isResultChosen && /*#__PURE__*/React.createElement(Icon, {
|
|
204
|
-
component: filterLabel.icon
|
|
205
|
-
}), /*#__PURE__*/React.createElement("span", null, filterLabel[filterLookupKey || ''] || filterLabel[textLookupKey || '']))), /*#__PURE__*/React.createElement(S.SearchInner, {
|
|
206
|
-
hasValue: !!value,
|
|
207
|
-
alwaysHighlight: alwaysHighlight
|
|
208
|
-
}, /*#__PURE__*/React.createElement(Input, _extends({
|
|
209
|
-
placeholder: placeholder,
|
|
210
|
-
ref: this.inputRef,
|
|
211
|
-
value: value,
|
|
212
|
-
onChange: this.handleChangeValue,
|
|
213
|
-
onKeyDown: onKeyDown,
|
|
214
|
-
onFocus: function onFocus() {
|
|
215
|
-
_this3.setState({
|
|
216
|
-
isInputFocused: true
|
|
217
|
-
});
|
|
218
|
-
},
|
|
219
|
-
onBlur: function onBlur() {
|
|
220
|
-
_this3.setState({
|
|
221
|
-
isInputFocused: false
|
|
222
|
-
});
|
|
223
|
-
},
|
|
224
|
-
autoComplete: "off",
|
|
225
|
-
autoFocus: true,
|
|
226
|
-
disabled: disableInput
|
|
227
|
-
}, inputProps)))), /*#__PURE__*/React.createElement(SearchButton, {
|
|
228
|
-
inputOpen: isInputOpen,
|
|
229
|
-
hidden: !!value || !!filterLabel,
|
|
230
|
-
inputFocused: isInputFocused,
|
|
231
|
-
clickable: !alwaysExpanded,
|
|
232
|
-
onClick: this.handleSearchButtonClick
|
|
233
|
-
}), /*#__PURE__*/React.createElement(S.ClearButton, {
|
|
234
|
-
hidden: !value && !filterLabel
|
|
235
|
-
}, /*#__PURE__*/React.createElement(Icon, {
|
|
236
|
-
"data-testid": "clear",
|
|
237
|
-
onClick: this.handleClearValue,
|
|
238
|
-
component: /*#__PURE__*/React.createElement(Tooltip, {
|
|
239
|
-
title: clearTooltip
|
|
240
|
-
}, /*#__PURE__*/React.createElement(Close3M, null)),
|
|
241
|
-
color: theme.palette['red-600'],
|
|
242
|
-
size: 18
|
|
243
|
-
})));
|
|
144
|
+
|
|
145
|
+
if (prevProps.toggleTrigger !== toggleTrigger) {
|
|
146
|
+
this.toggleOpen();
|
|
244
147
|
}
|
|
245
|
-
|
|
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
|
+
};
|
|
246
224
|
|
|
247
225
|
return SearchInput;
|
|
248
226
|
}(React.Component);
|
|
@@ -1,6 +1,6 @@
|
|
|
1
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); }
|
|
2
2
|
|
|
3
|
-
function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly)
|
|
3
|
+
function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); keys.push.apply(keys, symbols); } return keys; }
|
|
4
4
|
|
|
5
5
|
function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
|
|
6
6
|
|
|
@@ -26,9 +26,9 @@ var rowRenderer = function rowRenderer(_ref) {
|
|
|
26
26
|
var itemReturnedFromRenderer = data.itemRender(item);
|
|
27
27
|
var rendererCustomStyles = itemReturnedFromRenderer && itemReturnedFromRenderer.props && itemReturnedFromRenderer.props.style || {};
|
|
28
28
|
|
|
29
|
-
var mergedStyles = _objectSpread(
|
|
29
|
+
var mergedStyles = _objectSpread({}, rendererCustomStyles, {}, style);
|
|
30
30
|
|
|
31
|
-
return
|
|
31
|
+
return React.cloneElement(itemReturnedFromRenderer, _objectSpread({}, itemReturnedFromRenderer.props, {
|
|
32
32
|
style: mergedStyles,
|
|
33
33
|
highlight: data.highlight,
|
|
34
34
|
onClick: function onClick() {
|
package/dist/Search.js
CHANGED
|
@@ -1,30 +1,12 @@
|
|
|
1
|
-
function
|
|
2
|
-
|
|
3
|
-
function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) { symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); } keys.push.apply(keys, symbols); } return keys; }
|
|
1
|
+
function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); keys.push.apply(keys, symbols); } return keys; }
|
|
4
2
|
|
|
5
3
|
function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
|
|
6
4
|
|
|
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; }
|
|
8
|
-
|
|
9
|
-
function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
|
|
10
|
-
|
|
11
|
-
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); } }
|
|
12
|
-
|
|
13
|
-
function _createClass(Constructor, protoProps, staticProps) { if (protoProps) _defineProperties(Constructor.prototype, protoProps); if (staticProps) _defineProperties(Constructor, staticProps); return Constructor; }
|
|
14
|
-
|
|
15
|
-
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); }
|
|
16
|
-
|
|
17
|
-
function _setPrototypeOf(o, p) { _setPrototypeOf = Object.setPrototypeOf || function _setPrototypeOf(o, p) { o.__proto__ = p; return o; }; return _setPrototypeOf(o, p); }
|
|
18
|
-
|
|
19
|
-
function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = _getPrototypeOf(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = _getPrototypeOf(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return _possibleConstructorReturn(this, result); }; }
|
|
20
|
-
|
|
21
|
-
function _possibleConstructorReturn(self, call) { if (call && (_typeof(call) === "object" || typeof call === "function")) { return call; } else if (call !== void 0) { throw new TypeError("Derived constructors may only return object or undefined"); } return _assertThisInitialized(self); }
|
|
22
|
-
|
|
23
5
|
function _assertThisInitialized(self) { if (self === void 0) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return self; }
|
|
24
6
|
|
|
25
|
-
function
|
|
7
|
+
function _inheritsLoose(subClass, superClass) { subClass.prototype = Object.create(superClass.prototype); subClass.prototype.constructor = subClass; subClass.__proto__ = superClass; }
|
|
26
8
|
|
|
27
|
-
function
|
|
9
|
+
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; }
|
|
28
10
|
|
|
29
11
|
import * as React from 'react';
|
|
30
12
|
import onClickOutside from 'react-onclickoutside';
|
|
@@ -47,20 +29,16 @@ var getParametersScrollTop = function getParametersScrollTop(_ref) {
|
|
|
47
29
|
};
|
|
48
30
|
|
|
49
31
|
var Search = /*#__PURE__*/function (_React$PureComponent) {
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
var _super = _createSuper(Search);
|
|
32
|
+
_inheritsLoose(Search, _React$PureComponent);
|
|
53
33
|
|
|
54
34
|
function Search(props) {
|
|
55
35
|
var _this;
|
|
56
36
|
|
|
57
|
-
|
|
37
|
+
_this = _React$PureComponent.call(this, props) || this; // eslint-disable-next-line react/state-in-constructor
|
|
58
38
|
|
|
59
|
-
_this
|
|
39
|
+
_defineProperty(_assertThisInitialized(_this), "wrapperRef", React.createRef());
|
|
60
40
|
|
|
61
|
-
_this
|
|
62
|
-
|
|
63
|
-
_this.handleClickOutside = function () {
|
|
41
|
+
_defineProperty(_assertThisInitialized(_this), "handleClickOutside", function () {
|
|
64
42
|
var _this$state = _this.state,
|
|
65
43
|
isInputOpen = _this$state.isInputOpen,
|
|
66
44
|
label = _this$state.label,
|
|
@@ -77,9 +55,9 @@ var Search = /*#__PURE__*/function (_React$PureComponent) {
|
|
|
77
55
|
isListVisible: false,
|
|
78
56
|
scrollbarScrollTop: 0
|
|
79
57
|
});
|
|
80
|
-
};
|
|
58
|
+
});
|
|
81
59
|
|
|
82
|
-
_this
|
|
60
|
+
_defineProperty(_assertThisInitialized(_this), "handleClearValue", function () {
|
|
83
61
|
var _this$props = _this.props,
|
|
84
62
|
parameters = _this$props.parameters,
|
|
85
63
|
recent = _this$props.recent,
|
|
@@ -94,7 +72,7 @@ var Search = /*#__PURE__*/function (_React$PureComponent) {
|
|
|
94
72
|
filteredSuggestions: suggestions,
|
|
95
73
|
isResultChosen: false
|
|
96
74
|
});
|
|
97
|
-
};
|
|
75
|
+
});
|
|
98
76
|
|
|
99
77
|
_this.state = {
|
|
100
78
|
isInputOpen: !!props.value || !!props.parameterValue,
|
|
@@ -115,422 +93,410 @@ var Search = /*#__PURE__*/function (_React$PureComponent) {
|
|
|
115
93
|
return _this;
|
|
116
94
|
}
|
|
117
95
|
|
|
118
|
-
|
|
119
|
-
key: "componentDidUpdate",
|
|
120
|
-
value: function componentDidUpdate(prevProps) {
|
|
121
|
-
var _prevProps$suggestion;
|
|
122
|
-
|
|
123
|
-
var _this$props2 = this.props,
|
|
124
|
-
recent = _this$props2.recent,
|
|
125
|
-
suggestions = _this$props2.suggestions,
|
|
126
|
-
parameters = _this$props2.parameters,
|
|
127
|
-
value = _this$props2.value,
|
|
128
|
-
textLookupConfig = _this$props2.textLookupConfig,
|
|
129
|
-
hideLabel = _this$props2.hideLabel,
|
|
130
|
-
parameterValue = _this$props2.parameterValue;
|
|
131
|
-
|
|
132
|
-
if (prevProps.value !== value && !value || prevProps.parameterValue && !parameterValue) {
|
|
133
|
-
this.handleChange(value); // eslint-disable-next-line react/no-did-update-set-state
|
|
134
|
-
|
|
135
|
-
this.setState({
|
|
136
|
-
isResultChosen: false
|
|
137
|
-
});
|
|
138
|
-
}
|
|
96
|
+
var _proto = Search.prototype;
|
|
139
97
|
|
|
140
|
-
|
|
141
|
-
|
|
142
|
-
this.setState({
|
|
143
|
-
filteredRecent: getAllElementsFiltered(recent, value, textLookupConfig.recent)
|
|
144
|
-
});
|
|
145
|
-
}
|
|
98
|
+
_proto.componentDidUpdate = function componentDidUpdate(prevProps) {
|
|
99
|
+
var _prevProps$suggestion;
|
|
146
100
|
|
|
147
|
-
|
|
148
|
-
|
|
149
|
-
|
|
150
|
-
|
|
151
|
-
|
|
152
|
-
|
|
101
|
+
var _this$props2 = this.props,
|
|
102
|
+
recent = _this$props2.recent,
|
|
103
|
+
suggestions = _this$props2.suggestions,
|
|
104
|
+
parameters = _this$props2.parameters,
|
|
105
|
+
value = _this$props2.value,
|
|
106
|
+
textLookupConfig = _this$props2.textLookupConfig,
|
|
107
|
+
hideLabel = _this$props2.hideLabel,
|
|
108
|
+
parameterValue = _this$props2.parameterValue;
|
|
153
109
|
|
|
154
|
-
|
|
155
|
-
|
|
156
|
-
this.setState({
|
|
157
|
-
filteredSuggestions: getAllElementsFiltered(suggestions, value, textLookupConfig.suggestions)
|
|
158
|
-
});
|
|
159
|
-
}
|
|
110
|
+
if (prevProps.value !== value && !value || prevProps.parameterValue && !parameterValue) {
|
|
111
|
+
this.handleChange(value); // eslint-disable-next-line react/no-did-update-set-state
|
|
160
112
|
|
|
161
|
-
|
|
162
|
-
|
|
163
|
-
|
|
164
|
-
label: null,
|
|
165
|
-
isResultChosen: false
|
|
166
|
-
});
|
|
167
|
-
}
|
|
113
|
+
this.setState({
|
|
114
|
+
isResultChosen: false
|
|
115
|
+
});
|
|
168
116
|
}
|
|
169
|
-
}, {
|
|
170
|
-
key: "onKeyDown",
|
|
171
|
-
value: function onKeyDown(e) {
|
|
172
|
-
var _this$props3 = this.props,
|
|
173
|
-
value = _this$props3.value,
|
|
174
|
-
onParameterValueChange = _this$props3.onParameterValueChange,
|
|
175
|
-
recent = _this$props3.recent;
|
|
176
|
-
var isInputOpen = this.state.isInputOpen;
|
|
177
|
-
|
|
178
|
-
if (e.key === 'Backspace' && value === '' && isInputOpen) {
|
|
179
|
-
this.setState({
|
|
180
|
-
label: null,
|
|
181
|
-
filteredRecent: recent
|
|
182
|
-
});
|
|
183
|
-
onParameterValueChange('', null);
|
|
184
|
-
return;
|
|
185
|
-
}
|
|
186
|
-
|
|
187
|
-
if (e.key === 'Enter' && isInputOpen) {
|
|
188
|
-
this.setState({
|
|
189
|
-
isResultChosen: !!value
|
|
190
|
-
});
|
|
191
|
-
}
|
|
192
117
|
|
|
118
|
+
if (prevProps.recent.length !== recent.length) {
|
|
119
|
+
// eslint-disable-next-line react/no-did-update-set-state
|
|
193
120
|
this.setState({
|
|
194
|
-
|
|
121
|
+
filteredRecent: getAllElementsFiltered(recent, value, textLookupConfig.recent)
|
|
195
122
|
});
|
|
196
123
|
}
|
|
197
|
-
}, {
|
|
198
|
-
key: "getSearchWrapperWidth",
|
|
199
|
-
value: function getSearchWrapperWidth() {
|
|
200
|
-
var width = this.props.width;
|
|
201
|
-
|
|
202
|
-
if (width) {
|
|
203
|
-
return width - MENU_WIDTH_OFFSET;
|
|
204
|
-
}
|
|
205
124
|
|
|
206
|
-
|
|
207
|
-
|
|
208
|
-
|
|
209
|
-
|
|
210
|
-
|
|
211
|
-
}
|
|
212
|
-
|
|
213
|
-
}, {
|
|
214
|
-
key: "handleChange",
|
|
215
|
-
value: function handleChange(currentValue) {
|
|
216
|
-
var _this$props4 = this.props,
|
|
217
|
-
parameterValue = _this$props4.parameterValue,
|
|
218
|
-
recent = _this$props4.recent,
|
|
219
|
-
suggestions = _this$props4.suggestions,
|
|
220
|
-
parameters = _this$props4.parameters,
|
|
221
|
-
onValueChange = _this$props4.onValueChange,
|
|
222
|
-
textLookupConfig = _this$props4.textLookupConfig;
|
|
223
|
-
var isAnythingToShow;
|
|
224
|
-
onValueChange(currentValue);
|
|
225
|
-
|
|
226
|
-
if (parameterValue) {
|
|
227
|
-
var matchingSuggestions = getAllElementsFiltered(suggestions, currentValue, textLookupConfig.suggestions);
|
|
228
|
-
this.setState({
|
|
229
|
-
filteredSuggestions: matchingSuggestions
|
|
230
|
-
});
|
|
231
|
-
isAnythingToShow = matchingSuggestions.length > 0;
|
|
232
|
-
} else {
|
|
233
|
-
var matchingRecent = getAllElementsFiltered(recent, currentValue, textLookupConfig.recent);
|
|
234
|
-
var matchingParameters = getAllElementsFiltered(parameters, currentValue, textLookupConfig.parameters);
|
|
235
|
-
this.setState({
|
|
236
|
-
filteredParameters: matchingParameters,
|
|
237
|
-
filteredRecent: matchingRecent
|
|
238
|
-
});
|
|
239
|
-
isAnythingToShow = matchingRecent.length > 0 || matchingParameters.length > 0;
|
|
240
|
-
}
|
|
125
|
+
if (prevProps.parameters.length !== parameters.length) {
|
|
126
|
+
// eslint-disable-next-line react/no-did-update-set-state
|
|
127
|
+
this.setState({
|
|
128
|
+
filteredParameters: parameterValue ? parameters : getAllElementsFiltered(parameters, value, textLookupConfig.parameters)
|
|
129
|
+
});
|
|
130
|
+
}
|
|
241
131
|
|
|
132
|
+
if (suggestions && ((_prevProps$suggestion = prevProps.suggestions) == null ? void 0 : _prevProps$suggestion.length) !== suggestions.length) {
|
|
133
|
+
// eslint-disable-next-line react/no-did-update-set-state
|
|
242
134
|
this.setState({
|
|
243
|
-
|
|
244
|
-
isListVisible: isAnythingToShow
|
|
135
|
+
filteredSuggestions: getAllElementsFiltered(suggestions, value, textLookupConfig.suggestions)
|
|
245
136
|
});
|
|
246
137
|
}
|
|
247
|
-
}, {
|
|
248
|
-
key: "isListItemRendered",
|
|
249
|
-
value: function isListItemRendered() {
|
|
250
|
-
var _this$props5 = this.props,
|
|
251
|
-
suggestions = _this$props5.suggestions,
|
|
252
|
-
recent = _this$props5.recent,
|
|
253
|
-
parameters = _this$props5.parameters,
|
|
254
|
-
value = _this$props5.value,
|
|
255
|
-
parameterValue = _this$props5.parameterValue,
|
|
256
|
-
textLookupConfig = _this$props5.textLookupConfig;
|
|
257
|
-
var isAnythingToShow;
|
|
258
|
-
|
|
259
|
-
if (parameterValue) {
|
|
260
|
-
isAnythingToShow = hasSomeElementFiltered(suggestions, value, textLookupConfig.suggestions);
|
|
261
|
-
} else {
|
|
262
|
-
var anyRecentItem = hasSomeElementFiltered(recent, value, textLookupConfig.recent);
|
|
263
|
-
var anyFilter = hasSomeElementFiltered(parameters, value, textLookupConfig.parameters);
|
|
264
|
-
isAnythingToShow = anyFilter || anyRecentItem;
|
|
265
|
-
}
|
|
266
138
|
|
|
267
|
-
|
|
139
|
+
if (hideLabel && prevProps.hideLabel !== hideLabel) {
|
|
140
|
+
// eslint-disable-next-line react/no-did-update-set-state
|
|
141
|
+
this.setState({
|
|
142
|
+
label: null,
|
|
143
|
+
isResultChosen: false
|
|
144
|
+
});
|
|
268
145
|
}
|
|
269
|
-
}
|
|
270
|
-
|
|
271
|
-
|
|
272
|
-
|
|
273
|
-
|
|
274
|
-
|
|
146
|
+
};
|
|
147
|
+
|
|
148
|
+
_proto.onKeyDown = function onKeyDown(e) {
|
|
149
|
+
var _this$props3 = this.props,
|
|
150
|
+
value = _this$props3.value,
|
|
151
|
+
onParameterValueChange = _this$props3.onParameterValueChange,
|
|
152
|
+
recent = _this$props3.recent;
|
|
153
|
+
var isInputOpen = this.state.isInputOpen;
|
|
154
|
+
|
|
155
|
+
if (e.key === 'Backspace' && value === '' && isInputOpen) {
|
|
275
156
|
this.setState({
|
|
276
|
-
|
|
277
|
-
|
|
157
|
+
label: null,
|
|
158
|
+
filteredRecent: recent
|
|
278
159
|
});
|
|
279
|
-
|
|
160
|
+
onParameterValueChange('', null);
|
|
161
|
+
return;
|
|
280
162
|
}
|
|
281
|
-
|
|
282
|
-
key
|
|
283
|
-
value: function selectFilter(item) {
|
|
284
|
-
var _this$props7 = this.props,
|
|
285
|
-
onValueChange = _this$props7.onValueChange,
|
|
286
|
-
onParameterValueChange = _this$props7.onParameterValueChange,
|
|
287
|
-
filterLookupKey = _this$props7.filterLookupKey,
|
|
288
|
-
textLookupConfig = _this$props7.textLookupConfig;
|
|
289
|
-
onValueChange('');
|
|
163
|
+
|
|
164
|
+
if (e.key === 'Enter' && isInputOpen) {
|
|
290
165
|
this.setState({
|
|
291
|
-
|
|
292
|
-
moveCursorToEnd: true
|
|
166
|
+
isResultChosen: !!value
|
|
293
167
|
});
|
|
168
|
+
}
|
|
294
169
|
|
|
295
|
-
|
|
296
|
-
|
|
297
|
-
|
|
170
|
+
this.setState({
|
|
171
|
+
moveCursorToEnd: false
|
|
172
|
+
});
|
|
173
|
+
};
|
|
298
174
|
|
|
299
|
-
|
|
300
|
-
|
|
301
|
-
|
|
302
|
-
|
|
303
|
-
|
|
304
|
-
// eslint-disable-next-line @typescript-eslint/ban-ts-ignore
|
|
305
|
-
// @ts-ignore
|
|
306
|
-
onParameterValueChange(item[textLookupConfig.parameters], item);
|
|
307
|
-
}
|
|
175
|
+
_proto.getSearchWrapperWidth = function getSearchWrapperWidth() {
|
|
176
|
+
var width = this.props.width;
|
|
177
|
+
|
|
178
|
+
if (width) {
|
|
179
|
+
return width - MENU_WIDTH_OFFSET;
|
|
308
180
|
}
|
|
309
|
-
|
|
310
|
-
|
|
311
|
-
|
|
312
|
-
var _this2 = this;
|
|
313
|
-
|
|
314
|
-
var _this$props8 = this.props,
|
|
315
|
-
recent = _this$props8.recent,
|
|
316
|
-
recentDisplayProps = _this$props8.recentDisplayProps,
|
|
317
|
-
value = _this$props8.value;
|
|
318
|
-
var _this$state2 = this.state,
|
|
319
|
-
label = _this$state2.label,
|
|
320
|
-
filteredRecent = _this$state2.filteredRecent,
|
|
321
|
-
itemsListWidth = _this$state2.itemsListWidth;
|
|
322
|
-
var title = recentDisplayProps.title,
|
|
323
|
-
tooltip = recentDisplayProps.tooltip,
|
|
324
|
-
rowHeight = recentDisplayProps.rowHeight,
|
|
325
|
-
itemRender = recentDisplayProps.itemRender;
|
|
326
|
-
return recent && !label && hasSomeElement(filteredRecent) && /*#__PURE__*/React.createElement(React.Fragment, null, !!title && /*#__PURE__*/React.createElement(SearchHeader, {
|
|
327
|
-
headerText: title,
|
|
328
|
-
tooltip: tooltip
|
|
329
|
-
}), /*#__PURE__*/React.createElement(SearchItems, {
|
|
330
|
-
data: filteredRecent,
|
|
331
|
-
highlight: value,
|
|
332
|
-
itemRender: itemRender,
|
|
333
|
-
onItemClick: function onItemClick(item) {
|
|
334
|
-
return _this2.selectResult(item, SelectResultDataKeys.RECENT);
|
|
335
|
-
},
|
|
336
|
-
rowHeight: rowHeight,
|
|
337
|
-
width: itemsListWidth
|
|
338
|
-
}));
|
|
181
|
+
|
|
182
|
+
if (this.wrapperRef !== null && this.wrapperRef.current && this.wrapperRef.current.clientWidth > MENU_WIDTH_OFFSET) {
|
|
183
|
+
return this.wrapperRef.current.clientWidth - MENU_WIDTH_OFFSET;
|
|
339
184
|
}
|
|
340
|
-
|
|
341
|
-
|
|
342
|
-
|
|
343
|
-
|
|
344
|
-
|
|
345
|
-
|
|
346
|
-
|
|
347
|
-
|
|
348
|
-
|
|
349
|
-
|
|
350
|
-
|
|
351
|
-
|
|
352
|
-
|
|
353
|
-
|
|
354
|
-
|
|
355
|
-
|
|
356
|
-
|
|
357
|
-
var
|
|
358
|
-
|
|
359
|
-
|
|
360
|
-
|
|
361
|
-
|
|
362
|
-
|
|
363
|
-
|
|
364
|
-
|
|
365
|
-
|
|
366
|
-
|
|
367
|
-
|
|
368
|
-
|
|
369
|
-
|
|
370
|
-
onItemClick: function onItemClick(item) {
|
|
371
|
-
return _this3.selectFilter(item);
|
|
372
|
-
},
|
|
373
|
-
rowHeight: rowHeight,
|
|
374
|
-
width: itemsListWidth,
|
|
375
|
-
listProps: _objectSpread({
|
|
376
|
-
scrollTop: getParametersScrollTop({
|
|
377
|
-
scrollTop: scrollbarScrollTop,
|
|
378
|
-
recent: filteredRecent,
|
|
379
|
-
rowHeight: recentDisplayProps.rowHeight
|
|
380
|
-
})
|
|
381
|
-
}, listProps || {})
|
|
382
|
-
}));
|
|
185
|
+
|
|
186
|
+
return 0;
|
|
187
|
+
} // This handler is used for onClickOutside HOC
|
|
188
|
+
;
|
|
189
|
+
|
|
190
|
+
_proto.handleChange = function handleChange(currentValue) {
|
|
191
|
+
var _this$props4 = this.props,
|
|
192
|
+
parameterValue = _this$props4.parameterValue,
|
|
193
|
+
recent = _this$props4.recent,
|
|
194
|
+
suggestions = _this$props4.suggestions,
|
|
195
|
+
parameters = _this$props4.parameters,
|
|
196
|
+
onValueChange = _this$props4.onValueChange,
|
|
197
|
+
textLookupConfig = _this$props4.textLookupConfig;
|
|
198
|
+
var isAnythingToShow;
|
|
199
|
+
onValueChange(currentValue);
|
|
200
|
+
|
|
201
|
+
if (parameterValue) {
|
|
202
|
+
var matchingSuggestions = getAllElementsFiltered(suggestions, currentValue, textLookupConfig.suggestions);
|
|
203
|
+
this.setState({
|
|
204
|
+
filteredSuggestions: matchingSuggestions
|
|
205
|
+
});
|
|
206
|
+
isAnythingToShow = matchingSuggestions.length > 0;
|
|
207
|
+
} else {
|
|
208
|
+
var matchingRecent = getAllElementsFiltered(recent, currentValue, textLookupConfig.recent);
|
|
209
|
+
var matchingParameters = getAllElementsFiltered(parameters, currentValue, textLookupConfig.parameters);
|
|
210
|
+
this.setState({
|
|
211
|
+
filteredParameters: matchingParameters,
|
|
212
|
+
filteredRecent: matchingRecent
|
|
213
|
+
});
|
|
214
|
+
isAnythingToShow = matchingRecent.length > 0 || matchingParameters.length > 0;
|
|
383
215
|
}
|
|
384
|
-
|
|
385
|
-
|
|
386
|
-
|
|
387
|
-
|
|
388
|
-
|
|
389
|
-
|
|
390
|
-
|
|
391
|
-
|
|
392
|
-
|
|
393
|
-
|
|
394
|
-
|
|
395
|
-
|
|
396
|
-
|
|
397
|
-
|
|
398
|
-
|
|
399
|
-
|
|
400
|
-
|
|
401
|
-
|
|
402
|
-
|
|
403
|
-
|
|
404
|
-
|
|
405
|
-
|
|
406
|
-
|
|
407
|
-
itemRender: suggestionsDisplayProps.itemRender,
|
|
408
|
-
onItemClick: function onItemClick(item) {
|
|
409
|
-
return _this4.selectResult(item, SelectResultDataKeys.SUGGESTIONS);
|
|
410
|
-
},
|
|
411
|
-
rowHeight: suggestionsDisplayProps.rowHeight,
|
|
412
|
-
width: itemsListWidth,
|
|
413
|
-
listProps: _objectSpread({
|
|
414
|
-
scrollTop: scrollbarScrollTop
|
|
415
|
-
}, suggestionsDisplayProps.listProps || {})
|
|
416
|
-
}));
|
|
216
|
+
|
|
217
|
+
this.setState({
|
|
218
|
+
isResultChosen: false,
|
|
219
|
+
isListVisible: isAnythingToShow
|
|
220
|
+
});
|
|
221
|
+
};
|
|
222
|
+
|
|
223
|
+
_proto.isListItemRendered = function isListItemRendered() {
|
|
224
|
+
var _this$props5 = this.props,
|
|
225
|
+
suggestions = _this$props5.suggestions,
|
|
226
|
+
recent = _this$props5.recent,
|
|
227
|
+
parameters = _this$props5.parameters,
|
|
228
|
+
value = _this$props5.value,
|
|
229
|
+
parameterValue = _this$props5.parameterValue,
|
|
230
|
+
textLookupConfig = _this$props5.textLookupConfig;
|
|
231
|
+
var isAnythingToShow;
|
|
232
|
+
|
|
233
|
+
if (parameterValue) {
|
|
234
|
+
isAnythingToShow = hasSomeElementFiltered(suggestions, value, textLookupConfig.suggestions);
|
|
235
|
+
} else {
|
|
236
|
+
var anyRecentItem = hasSomeElementFiltered(recent, value, textLookupConfig.recent);
|
|
237
|
+
var anyFilter = hasSomeElementFiltered(parameters, value, textLookupConfig.parameters);
|
|
238
|
+
isAnythingToShow = anyFilter || anyRecentItem;
|
|
417
239
|
}
|
|
418
|
-
}, {
|
|
419
|
-
key: "renderInputWrapper",
|
|
420
|
-
value: function renderInputWrapper() {
|
|
421
|
-
var _this5 = this;
|
|
422
|
-
|
|
423
|
-
var _this$props11 = this.props,
|
|
424
|
-
placeholder = _this$props11.placeholder,
|
|
425
|
-
clearTooltip = _this$props11.clearTooltip,
|
|
426
|
-
value = _this$props11.value,
|
|
427
|
-
textLookupConfig = _this$props11.textLookupConfig,
|
|
428
|
-
filterLookupKey = _this$props11.filterLookupKey,
|
|
429
|
-
disableInput = _this$props11.disableInput,
|
|
430
|
-
inputProps = _this$props11.inputProps;
|
|
431
|
-
var _this$state5 = this.state,
|
|
432
|
-
label = _this$state5.label,
|
|
433
|
-
focusInputTrigger = _this$state5.focusInputTrigger,
|
|
434
|
-
toggleInputTrigger = _this$state5.toggleInputTrigger,
|
|
435
|
-
moveCursorToEnd = _this$state5.moveCursorToEnd;
|
|
436
|
-
return /*#__PURE__*/React.createElement(SearchInput, {
|
|
437
|
-
alwaysHighlight: true,
|
|
438
|
-
clearTooltip: clearTooltip,
|
|
439
|
-
filterLookupKey: filterLookupKey,
|
|
440
|
-
textLookupKey: textLookupConfig.parameters,
|
|
441
|
-
filterLabel: label,
|
|
442
|
-
focusTrigger: focusInputTrigger,
|
|
443
|
-
onButtonClick: function onButtonClick() {
|
|
444
|
-
return _this5.setState({
|
|
445
|
-
focusInputTrigger: !focusInputTrigger
|
|
446
|
-
});
|
|
447
|
-
},
|
|
448
|
-
onChange: function onChange(newValue) {
|
|
449
|
-
return _this5.handleChange(newValue);
|
|
450
|
-
},
|
|
451
|
-
onClear: this.handleClearValue,
|
|
452
|
-
onClick: function onClick() {
|
|
453
|
-
return _this5.setState({
|
|
454
|
-
isListVisible: true,
|
|
455
|
-
itemsListWidth: _this5.getSearchWrapperWidth()
|
|
456
|
-
});
|
|
457
|
-
},
|
|
458
|
-
onKeyDown: function onKeyDown(e) {
|
|
459
|
-
return _this5.onKeyDown(e);
|
|
460
|
-
},
|
|
461
|
-
onToggle: function onToggle(toggle) {
|
|
462
|
-
_this5.setState({
|
|
463
|
-
isListVisible: toggle,
|
|
464
|
-
isInputOpen: toggle
|
|
465
|
-
});
|
|
466
240
|
|
|
467
|
-
|
|
468
|
-
|
|
469
|
-
|
|
470
|
-
|
|
471
|
-
|
|
472
|
-
|
|
473
|
-
|
|
474
|
-
|
|
475
|
-
|
|
476
|
-
|
|
477
|
-
|
|
478
|
-
|
|
241
|
+
return isAnythingToShow;
|
|
242
|
+
};
|
|
243
|
+
|
|
244
|
+
_proto.selectResult = function selectResult(item, dataKey) {
|
|
245
|
+
var _this$props6 = this.props,
|
|
246
|
+
onValueChange = _this$props6.onValueChange,
|
|
247
|
+
textLookupConfig = _this$props6.textLookupConfig;
|
|
248
|
+
this.setState({
|
|
249
|
+
isResultChosen: true,
|
|
250
|
+
moveCursorToEnd: true
|
|
251
|
+
});
|
|
252
|
+
onValueChange(item[textLookupConfig[dataKey]]);
|
|
253
|
+
};
|
|
254
|
+
|
|
255
|
+
_proto.selectFilter = function selectFilter(item) {
|
|
256
|
+
var _this$props7 = this.props,
|
|
257
|
+
onValueChange = _this$props7.onValueChange,
|
|
258
|
+
onParameterValueChange = _this$props7.onParameterValueChange,
|
|
259
|
+
filterLookupKey = _this$props7.filterLookupKey,
|
|
260
|
+
textLookupConfig = _this$props7.textLookupConfig;
|
|
261
|
+
onValueChange('');
|
|
262
|
+
this.setState({
|
|
263
|
+
label: item,
|
|
264
|
+
moveCursorToEnd: true
|
|
265
|
+
});
|
|
266
|
+
|
|
267
|
+
if (filterLookupKey && item[filterLookupKey]) {
|
|
268
|
+
onValueChange(item[textLookupConfig.parameters]); // eslint-disable-next-line @typescript-eslint/ban-ts-ignore
|
|
269
|
+
// @ts-ignore
|
|
270
|
+
|
|
271
|
+
onParameterValueChange(item[filterLookupKey], item);
|
|
272
|
+
this.setState({
|
|
273
|
+
isResultChosen: true
|
|
479
274
|
});
|
|
275
|
+
} else {
|
|
276
|
+
// eslint-disable-next-line @typescript-eslint/ban-ts-ignore
|
|
277
|
+
// @ts-ignore
|
|
278
|
+
onParameterValueChange(item[textLookupConfig.parameters], item);
|
|
480
279
|
}
|
|
481
|
-
}
|
|
482
|
-
|
|
483
|
-
|
|
484
|
-
|
|
485
|
-
|
|
486
|
-
|
|
487
|
-
|
|
488
|
-
|
|
489
|
-
|
|
490
|
-
|
|
491
|
-
|
|
492
|
-
|
|
493
|
-
|
|
494
|
-
|
|
495
|
-
|
|
496
|
-
|
|
497
|
-
|
|
498
|
-
|
|
499
|
-
|
|
500
|
-
|
|
501
|
-
|
|
502
|
-
|
|
503
|
-
|
|
504
|
-
|
|
505
|
-
|
|
506
|
-
|
|
507
|
-
|
|
508
|
-
|
|
280
|
+
};
|
|
281
|
+
|
|
282
|
+
_proto.renderRecentItems = function renderRecentItems() {
|
|
283
|
+
var _this2 = this;
|
|
284
|
+
|
|
285
|
+
var _this$props8 = this.props,
|
|
286
|
+
recent = _this$props8.recent,
|
|
287
|
+
recentDisplayProps = _this$props8.recentDisplayProps,
|
|
288
|
+
value = _this$props8.value;
|
|
289
|
+
var _this$state2 = this.state,
|
|
290
|
+
label = _this$state2.label,
|
|
291
|
+
filteredRecent = _this$state2.filteredRecent,
|
|
292
|
+
itemsListWidth = _this$state2.itemsListWidth;
|
|
293
|
+
var title = recentDisplayProps.title,
|
|
294
|
+
tooltip = recentDisplayProps.tooltip,
|
|
295
|
+
rowHeight = recentDisplayProps.rowHeight,
|
|
296
|
+
itemRender = recentDisplayProps.itemRender;
|
|
297
|
+
return recent && !label && hasSomeElement(filteredRecent) && /*#__PURE__*/React.createElement(React.Fragment, null, !!title && /*#__PURE__*/React.createElement(SearchHeader, {
|
|
298
|
+
headerText: title,
|
|
299
|
+
tooltip: tooltip
|
|
300
|
+
}), /*#__PURE__*/React.createElement(SearchItems, {
|
|
301
|
+
data: filteredRecent,
|
|
302
|
+
highlight: value,
|
|
303
|
+
itemRender: itemRender,
|
|
304
|
+
onItemClick: function onItemClick(item) {
|
|
305
|
+
return _this2.selectResult(item, SelectResultDataKeys.RECENT);
|
|
306
|
+
},
|
|
307
|
+
rowHeight: rowHeight,
|
|
308
|
+
width: itemsListWidth
|
|
309
|
+
}));
|
|
310
|
+
};
|
|
311
|
+
|
|
312
|
+
_proto.renderParameters = function renderParameters() {
|
|
313
|
+
var _this3 = this;
|
|
314
|
+
|
|
315
|
+
var _this$props9 = this.props,
|
|
316
|
+
parameters = _this$props9.parameters,
|
|
317
|
+
parametersDisplayProps = _this$props9.parametersDisplayProps,
|
|
318
|
+
value = _this$props9.value,
|
|
319
|
+
dropdownMaxHeight = _this$props9.dropdownMaxHeight,
|
|
320
|
+
recentDisplayProps = _this$props9.recentDisplayProps;
|
|
321
|
+
var _this$state3 = this.state,
|
|
322
|
+
label = _this$state3.label,
|
|
323
|
+
filteredParameters = _this$state3.filteredParameters,
|
|
324
|
+
itemsListWidth = _this$state3.itemsListWidth,
|
|
325
|
+
scrollbarScrollTop = _this$state3.scrollbarScrollTop,
|
|
326
|
+
filteredRecent = _this$state3.filteredRecent;
|
|
327
|
+
var title = parametersDisplayProps.title,
|
|
328
|
+
tooltip = parametersDisplayProps.tooltip,
|
|
329
|
+
rowHeight = parametersDisplayProps.rowHeight,
|
|
330
|
+
itemRender = parametersDisplayProps.itemRender,
|
|
331
|
+
listProps = parametersDisplayProps.listProps;
|
|
332
|
+
return parameters && !label && hasSomeElement(filteredParameters) && /*#__PURE__*/React.createElement(React.Fragment, null, !!title && /*#__PURE__*/React.createElement(SearchHeader, {
|
|
333
|
+
headerText: title,
|
|
334
|
+
tooltip: tooltip
|
|
335
|
+
}), /*#__PURE__*/React.createElement(SearchItems, {
|
|
336
|
+
data: filteredParameters,
|
|
337
|
+
height: dropdownMaxHeight,
|
|
338
|
+
highlight: value,
|
|
339
|
+
itemRender: itemRender,
|
|
340
|
+
onItemClick: function onItemClick(item) {
|
|
341
|
+
return _this3.selectFilter(item);
|
|
342
|
+
},
|
|
343
|
+
rowHeight: rowHeight,
|
|
344
|
+
width: itemsListWidth,
|
|
345
|
+
listProps: _objectSpread({
|
|
346
|
+
scrollTop: getParametersScrollTop({
|
|
347
|
+
scrollTop: scrollbarScrollTop,
|
|
348
|
+
recent: filteredRecent,
|
|
349
|
+
rowHeight: recentDisplayProps.rowHeight
|
|
350
|
+
})
|
|
351
|
+
}, listProps || {})
|
|
352
|
+
}));
|
|
353
|
+
};
|
|
354
|
+
|
|
355
|
+
_proto.renderSuggestions = function renderSuggestions() {
|
|
356
|
+
var _this4 = this;
|
|
357
|
+
|
|
358
|
+
var _this$props10 = this.props,
|
|
359
|
+
suggestions = _this$props10.suggestions,
|
|
360
|
+
parameterValue = _this$props10.parameterValue,
|
|
361
|
+
suggestionsDisplayProps = _this$props10.suggestionsDisplayProps,
|
|
362
|
+
value = _this$props10.value,
|
|
363
|
+
dropdownMaxHeight = _this$props10.dropdownMaxHeight;
|
|
364
|
+
var _this$state4 = this.state,
|
|
365
|
+
isResultChosen = _this$state4.isResultChosen,
|
|
366
|
+
itemsListWidth = _this$state4.itemsListWidth,
|
|
367
|
+
filteredSuggestions = _this$state4.filteredSuggestions,
|
|
368
|
+
scrollbarScrollTop = _this$state4.scrollbarScrollTop;
|
|
369
|
+
return suggestions && suggestionsDisplayProps && parameterValue && !isResultChosen && filteredSuggestions && hasSomeElement(filteredSuggestions) && /*#__PURE__*/React.createElement(React.Fragment, null, !!suggestionsDisplayProps.title && /*#__PURE__*/React.createElement(SearchHeader, {
|
|
370
|
+
headerText: suggestionsDisplayProps.title,
|
|
371
|
+
tooltip: suggestionsDisplayProps.tooltip
|
|
372
|
+
}), /*#__PURE__*/React.createElement(SearchItems, {
|
|
373
|
+
data: filteredSuggestions,
|
|
374
|
+
height: dropdownMaxHeight,
|
|
375
|
+
highlight: value,
|
|
376
|
+
itemRender: suggestionsDisplayProps.itemRender,
|
|
377
|
+
onItemClick: function onItemClick(item) {
|
|
378
|
+
return _this4.selectResult(item, SelectResultDataKeys.SUGGESTIONS);
|
|
379
|
+
},
|
|
380
|
+
rowHeight: suggestionsDisplayProps.rowHeight,
|
|
381
|
+
width: itemsListWidth,
|
|
382
|
+
listProps: _objectSpread({
|
|
383
|
+
scrollTop: scrollbarScrollTop
|
|
384
|
+
}, suggestionsDisplayProps.listProps || {})
|
|
385
|
+
}));
|
|
386
|
+
};
|
|
387
|
+
|
|
388
|
+
_proto.renderInputWrapper = function renderInputWrapper() {
|
|
389
|
+
var _this5 = this;
|
|
390
|
+
|
|
391
|
+
var _this$props11 = this.props,
|
|
392
|
+
placeholder = _this$props11.placeholder,
|
|
393
|
+
clearTooltip = _this$props11.clearTooltip,
|
|
394
|
+
value = _this$props11.value,
|
|
395
|
+
textLookupConfig = _this$props11.textLookupConfig,
|
|
396
|
+
filterLookupKey = _this$props11.filterLookupKey,
|
|
397
|
+
disableInput = _this$props11.disableInput,
|
|
398
|
+
inputProps = _this$props11.inputProps;
|
|
399
|
+
var _this$state5 = this.state,
|
|
400
|
+
label = _this$state5.label,
|
|
401
|
+
focusInputTrigger = _this$state5.focusInputTrigger,
|
|
402
|
+
toggleInputTrigger = _this$state5.toggleInputTrigger,
|
|
403
|
+
moveCursorToEnd = _this$state5.moveCursorToEnd;
|
|
404
|
+
return /*#__PURE__*/React.createElement(SearchInput, {
|
|
405
|
+
alwaysHighlight: true,
|
|
406
|
+
clearTooltip: clearTooltip,
|
|
407
|
+
filterLookupKey: filterLookupKey,
|
|
408
|
+
textLookupKey: textLookupConfig.parameters,
|
|
409
|
+
filterLabel: label,
|
|
410
|
+
focusTrigger: focusInputTrigger,
|
|
411
|
+
onButtonClick: function onButtonClick() {
|
|
412
|
+
return _this5.setState({
|
|
413
|
+
focusInputTrigger: !focusInputTrigger
|
|
414
|
+
});
|
|
415
|
+
},
|
|
416
|
+
onChange: function onChange(newValue) {
|
|
417
|
+
return _this5.handleChange(newValue);
|
|
418
|
+
},
|
|
419
|
+
onClear: this.handleClearValue,
|
|
420
|
+
onClick: function onClick() {
|
|
421
|
+
return _this5.setState({
|
|
422
|
+
isListVisible: true,
|
|
423
|
+
itemsListWidth: _this5.getSearchWrapperWidth()
|
|
424
|
+
});
|
|
425
|
+
},
|
|
426
|
+
onKeyDown: function onKeyDown(e) {
|
|
427
|
+
return _this5.onKeyDown(e);
|
|
428
|
+
},
|
|
429
|
+
onToggle: function onToggle(toggle) {
|
|
430
|
+
_this5.setState({
|
|
431
|
+
isListVisible: toggle,
|
|
432
|
+
isInputOpen: toggle
|
|
433
|
+
});
|
|
434
|
+
|
|
435
|
+
setTimeout(function () {
|
|
436
|
+
_this5.setState({
|
|
437
|
+
itemsListWidth: _this5.getSearchWrapperWidth()
|
|
509
438
|
});
|
|
510
|
-
},
|
|
511
|
-
|
|
512
|
-
|
|
513
|
-
|
|
439
|
+
}, INPUT_EXPAND_ANIMATION_DURATION);
|
|
440
|
+
},
|
|
441
|
+
placeholder: placeholder,
|
|
442
|
+
toggleTrigger: toggleInputTrigger,
|
|
443
|
+
value: value,
|
|
444
|
+
moveCursorToEnd: moveCursorToEnd,
|
|
445
|
+
disableInput: disableInput,
|
|
446
|
+
inputProps: inputProps
|
|
447
|
+
});
|
|
448
|
+
};
|
|
449
|
+
|
|
450
|
+
_proto.render = function render() {
|
|
451
|
+
var _this6 = this;
|
|
452
|
+
|
|
453
|
+
var _this$props12 = this.props,
|
|
454
|
+
divider = _this$props12.divider,
|
|
455
|
+
dropdownMaxHeight = _this$props12.dropdownMaxHeight,
|
|
456
|
+
width = _this$props12.width,
|
|
457
|
+
style = _this$props12.style;
|
|
458
|
+
var _this$state6 = this.state,
|
|
459
|
+
isInputOpen = _this$state6.isInputOpen,
|
|
460
|
+
label = _this$state6.label,
|
|
461
|
+
isListVisible = _this$state6.isListVisible,
|
|
462
|
+
focusInputTrigger = _this$state6.focusInputTrigger,
|
|
463
|
+
isResultChosen = _this$state6.isResultChosen,
|
|
464
|
+
filteredParameters = _this$state6.filteredParameters,
|
|
465
|
+
filteredRecent = _this$state6.filteredRecent;
|
|
466
|
+
return /*#__PURE__*/React.createElement(S.SearchWrapper, {
|
|
467
|
+
ref: this.wrapperRef,
|
|
468
|
+
className: "SearchWrapper",
|
|
469
|
+
inputOpen: isInputOpen,
|
|
470
|
+
width: width,
|
|
471
|
+
onKeyDown: function onKeyDown(e) {
|
|
472
|
+
focusWithArrowKeys(e, 'ds-search-item', function () {
|
|
514
473
|
_this6.setState({
|
|
515
474
|
focusInputTrigger: !focusInputTrigger
|
|
516
475
|
});
|
|
517
|
-
}
|
|
518
|
-
},
|
|
519
|
-
|
|
520
|
-
|
|
521
|
-
|
|
522
|
-
|
|
523
|
-
|
|
524
|
-
|
|
525
|
-
|
|
526
|
-
|
|
527
|
-
|
|
528
|
-
|
|
529
|
-
|
|
530
|
-
|
|
531
|
-
|
|
532
|
-
|
|
533
|
-
|
|
476
|
+
});
|
|
477
|
+
},
|
|
478
|
+
style: style
|
|
479
|
+
}, this.renderInputWrapper(), isListVisible && /*#__PURE__*/React.createElement(S.SearchDropdownWrapper, {
|
|
480
|
+
onClick: function onClick() {
|
|
481
|
+
_this6.setState({
|
|
482
|
+
focusInputTrigger: !focusInputTrigger
|
|
483
|
+
});
|
|
484
|
+
}
|
|
485
|
+
}, /*#__PURE__*/React.createElement(S.SearchDropdownContent, {
|
|
486
|
+
maxHeight: dropdownMaxHeight,
|
|
487
|
+
className: isInputOpen && !isResultChosen && this.isListItemRendered() ? 'search-list-open' : ''
|
|
488
|
+
}, /*#__PURE__*/React.createElement(Scrollbar, {
|
|
489
|
+
absolute: true,
|
|
490
|
+
maxHeight: dropdownMaxHeight - SCROLLBAR_HEIGHT_OFFSET,
|
|
491
|
+
onScroll: function onScroll(_ref2) {
|
|
492
|
+
var currentTarget = _ref2.currentTarget;
|
|
493
|
+
|
|
494
|
+
_this6.setState({
|
|
495
|
+
scrollbarScrollTop: currentTarget.scrollTop
|
|
496
|
+
});
|
|
497
|
+
}
|
|
498
|
+
}, this.renderRecentItems(), !!(filteredParameters != null && filteredParameters.length) && !!(filteredRecent != null && filteredRecent.length) && !label && divider, this.renderParameters(), this.renderSuggestions()))));
|
|
499
|
+
};
|
|
534
500
|
|
|
535
501
|
return Search;
|
|
536
502
|
}(React.PureComponent);
|
package/dist/Search.styles.js
CHANGED
|
@@ -12,7 +12,7 @@ export var SearchWrapper = styled.div.withConfig({
|
|
|
12
12
|
displayName: "Searchstyles__SearchWrapper",
|
|
13
13
|
componentId: "sc-1w8jj1b-1"
|
|
14
14
|
})(["", ";position:relative;direction:rtl;"], function (props) {
|
|
15
|
-
return !!props.width && "\n "
|
|
15
|
+
return !!props.width && "\n " + (props.inputOpen ? "width:" + props.width + "px;" : "width:32px") + ";\n ";
|
|
16
16
|
});
|
|
17
17
|
export var LeftSide = styled.span.withConfig({
|
|
18
18
|
displayName: "Searchstyles__LeftSide",
|
|
@@ -54,7 +54,7 @@ export var SearchInner = styled.div.withConfig({
|
|
|
54
54
|
displayName: "Searchstyles__SearchInner",
|
|
55
55
|
componentId: "sc-1w8jj1b-7"
|
|
56
56
|
})(["direction:ltr;margin-bottom:0;", " input::placeholder{line-height:1.29;}"], function (props) {
|
|
57
|
-
return (props.hasValue || props.alwaysHighlight) && "\n input, input:hover{\n box-shadow: inset 0 0 0 1px "
|
|
57
|
+
return (props.hasValue || props.alwaysHighlight) && "\n input, input:hover{\n box-shadow: inset 0 0 0 1px " + props.theme.palette['blue-600'] + ";\n border-color: " + props.theme.palette['blue-600'] + ";\n background-color: " + props.theme.palette['blue-050'] + ";\n }\n \n ";
|
|
58
58
|
});
|
|
59
59
|
export var SearchInputContent = styled.div.withConfig({
|
|
60
60
|
displayName: "Searchstyles__SearchInputContent",
|
|
@@ -62,7 +62,7 @@ export var SearchInputContent = styled.div.withConfig({
|
|
|
62
62
|
})(["overflow:hidden;direction:rtl;transition:width ", "s ease-in-out;width:0;input{opacity:0;height:32px;}input.ant-input{transition:padding-left 0s ease-in-out !important;}&.is-open{width:100%;overflow:visible;input{color:", ";padding-left:", ";padding-right:30px;opacity:1;}}"], ANIMATION_DURATION, function (props) {
|
|
63
63
|
return props.theme.palette['grey-700'];
|
|
64
64
|
}, function (props) {
|
|
65
|
-
return props.filterLabel && props.offset ?
|
|
65
|
+
return props.filterLabel && props.offset ? Math.round(props.offset + LABEL_LEFT_OFFSET) + "px" : '12px';
|
|
66
66
|
});
|
|
67
67
|
export var ClearButton = styled.div.withConfig({
|
|
68
68
|
displayName: "Searchstyles__ClearButton",
|
|
@@ -74,7 +74,7 @@ export var SearchDropdownContent = styled.div.withConfig({
|
|
|
74
74
|
})(["position:absolute;top:40px;background:", ";max-height:", ";direction:ltr;opacity:0;display:none;border-radius:3px;box-shadow:0 16px 32px 0 rgba(35,41,54,0.1);box-sizing:border-box;transition:opacity 0.5s ease-in-out,width 0.5s ease-in-out;.ps__rail-y{.ps__thumb-y{transform:translateX(1px) !important;}}"], function (props) {
|
|
75
75
|
return props.theme.palette.white;
|
|
76
76
|
}, function (props) {
|
|
77
|
-
return
|
|
77
|
+
return props.maxHeight + "px";
|
|
78
78
|
});
|
|
79
79
|
export var MenuHeader = styled.div.withConfig({
|
|
80
80
|
displayName: "Searchstyles__MenuHeader",
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@synerise/ds-search",
|
|
3
|
-
"version": "0.6.
|
|
3
|
+
"version": "0.6.3",
|
|
4
4
|
"description": "Search UI Component for the Synerise Design System",
|
|
5
5
|
"license": "ISC",
|
|
6
6
|
"repository": "Synerise/synerise-design",
|
|
@@ -32,11 +32,11 @@
|
|
|
32
32
|
],
|
|
33
33
|
"types": "dist/index.d.ts",
|
|
34
34
|
"dependencies": {
|
|
35
|
-
"@synerise/ds-button": "^0.16.
|
|
36
|
-
"@synerise/ds-dropdown": "^0.17.
|
|
37
|
-
"@synerise/ds-menu": "^0.11.
|
|
38
|
-
"@synerise/ds-scrollbar": "^0.4.
|
|
39
|
-
"@synerise/ds-typography": "^0.12.
|
|
35
|
+
"@synerise/ds-button": "^0.16.2",
|
|
36
|
+
"@synerise/ds-dropdown": "^0.17.3",
|
|
37
|
+
"@synerise/ds-menu": "^0.11.2",
|
|
38
|
+
"@synerise/ds-scrollbar": "^0.4.2",
|
|
39
|
+
"@synerise/ds-typography": "^0.12.2",
|
|
40
40
|
"@synerise/ds-utils": "^0.19.0",
|
|
41
41
|
"react-onclickoutside": "^6.9.0",
|
|
42
42
|
"react-window": "^1.8.5"
|
|
@@ -49,5 +49,5 @@
|
|
|
49
49
|
"@types/react-onclickoutside": "^6.7.3",
|
|
50
50
|
"@types/react-window": "^1.8.2"
|
|
51
51
|
},
|
|
52
|
-
"gitHead": "
|
|
52
|
+
"gitHead": "2468359677783819939fb9f1ef5acc36667ecd1a"
|
|
53
53
|
}
|