@blaze-cms/react-page-builder 0.139.0-core-styles.0 → 0.139.0-core-styles.2
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 +11 -0
- package/lib/components/SearchContent/SearchContent.js +55 -52
- package/lib/components/SearchContent/SearchContent.js.map +1 -1
- package/lib/components/SearchContent/SearchContentResults.js +16 -17
- package/lib/components/SearchContent/SearchContentResults.js.map +1 -1
- package/lib/components/SearchContent/SearchContentToggleIcon.js +8 -16
- package/lib/components/SearchContent/SearchContentToggleIcon.js.map +1 -1
- package/lib/components/SearchContent/constants.js +12 -0
- package/lib/components/SearchContent/constants.js.map +1 -0
- package/lib-es/components/SearchContent/SearchContent.js +53 -49
- package/lib-es/components/SearchContent/SearchContent.js.map +1 -1
- package/lib-es/components/SearchContent/SearchContentResults.js +16 -17
- package/lib-es/components/SearchContent/SearchContentResults.js.map +1 -1
- package/lib-es/components/SearchContent/SearchContentToggleIcon.js +13 -23
- package/lib-es/components/SearchContent/SearchContentToggleIcon.js.map +1 -1
- package/lib-es/components/SearchContent/constants.js +4 -0
- package/lib-es/components/SearchContent/constants.js.map +1 -0
- package/package.json +4 -3
- package/src/components/SearchContent/SearchContent.js +66 -52
- package/src/components/SearchContent/SearchContentResults.js +17 -17
- package/src/components/SearchContent/SearchContentToggleIcon.js +10 -23
- package/src/components/SearchContent/constants.js +6 -0
- package/tests/unit/src/components/SearchContent/SearchContent.test.js +32 -7
- package/tests/unit/src/components/SearchContent/__snapshots__/SearchContent.test.js.snap +66 -2
package/CHANGELOG.md
CHANGED
|
@@ -3,6 +3,17 @@
|
|
|
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.139.0-core-styles.2](https://github.com/thebyte9/blaze/compare/v0.139.0-core-styles.1...v0.139.0-core-styles.2) (2024-01-09)
|
|
7
|
+
|
|
8
|
+
|
|
9
|
+
### Bug Fixes
|
|
10
|
+
|
|
11
|
+
* search filter close bug ([#4160](https://github.com/thebyte9/blaze/issues/4160)) ([76bae35](https://github.com/thebyte9/blaze/commit/76bae35e6a4aa896f8966d3b8b99c87400363874))
|
|
12
|
+
|
|
13
|
+
|
|
14
|
+
|
|
15
|
+
|
|
16
|
+
|
|
6
17
|
# [0.139.0-core-styles.0](https://github.com/thebyte9/blaze/compare/v0.138.0...v0.139.0-core-styles.0) (2024-01-03)
|
|
7
18
|
|
|
8
19
|
|
|
@@ -26,17 +26,21 @@ function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "functio
|
|
|
26
26
|
function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { "default": obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj["default"] = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
|
|
27
27
|
var SearchContent = function SearchContent(_ref) {
|
|
28
28
|
var entities = _ref.entities,
|
|
29
|
-
searchInputAlignment = _ref.searchInputAlignment,
|
|
30
29
|
searchInputWrapperMobile = _ref.searchInputWrapperMobile,
|
|
31
30
|
searchInputWrapperDesktop = _ref.searchInputWrapperDesktop,
|
|
32
31
|
isMobile = _ref.isMobile,
|
|
33
32
|
placeholder = _ref.placeholder,
|
|
34
33
|
modifier = _ref.modifier,
|
|
35
34
|
collapsedSearch = _ref.collapsedSearch;
|
|
35
|
+
var searchContentRef = (0, _react.useRef)(null);
|
|
36
36
|
var _useState = (0, _react.useState)(collapsedSearch),
|
|
37
37
|
_useState2 = (0, _slicedToArray2["default"])(_useState, 2),
|
|
38
38
|
collapsed = _useState2[0],
|
|
39
39
|
setCollapsed = _useState2[1];
|
|
40
|
+
var _useState3 = (0, _react.useState)(false),
|
|
41
|
+
_useState4 = (0, _slicedToArray2["default"])(_useState3, 2),
|
|
42
|
+
showResults = _useState4[0],
|
|
43
|
+
setShowResults = _useState4[1];
|
|
40
44
|
var router = (0, _router.useRouter)();
|
|
41
45
|
var _useDebounceSearch = (0, _pluginSearchUi.useDebounceSearch)({
|
|
42
46
|
entities: entities,
|
|
@@ -49,15 +53,32 @@ var SearchContent = function SearchContent(_ref) {
|
|
|
49
53
|
debouncedSearchTerm = _useDebounceSearch.debouncedSearchTerm;
|
|
50
54
|
(0, _react.useEffect)(function () {
|
|
51
55
|
var handleRouteChange = function handleRouteChange() {
|
|
52
|
-
|
|
56
|
+
setSearchTerm('');
|
|
57
|
+
setShowResults(false);
|
|
58
|
+
if (collapsedSearch) setCollapsed(true);
|
|
53
59
|
};
|
|
54
60
|
router.events.on('routeChangeStart', handleRouteChange);
|
|
55
61
|
return function () {
|
|
56
62
|
router.events.off('routeChangeStart', handleRouteChange);
|
|
57
63
|
};
|
|
58
|
-
}, [router.events, setSearchTerm]);
|
|
64
|
+
}, [collapsedSearch, router.events, setSearchTerm]);
|
|
65
|
+
(0, _react.useEffect)(function () {
|
|
66
|
+
var handleClickOutside = function handleClickOutside(event) {
|
|
67
|
+
if (searchContentRef.current && !searchContentRef.current.contains(event.target)) {
|
|
68
|
+
setShowResults(false);
|
|
69
|
+
if (collapsedSearch) {
|
|
70
|
+
setCollapsed(true);
|
|
71
|
+
setSearchTerm('');
|
|
72
|
+
}
|
|
73
|
+
}
|
|
74
|
+
};
|
|
75
|
+
document.addEventListener('click', handleClickOutside);
|
|
76
|
+
return function () {
|
|
77
|
+
document.removeEventListener('click', handleClickOutside);
|
|
78
|
+
};
|
|
79
|
+
}, [collapsedSearch, setSearchTerm]);
|
|
59
80
|
var responsiveClasses = isMobile ? searchInputWrapperMobile : searchInputWrapperDesktop;
|
|
60
|
-
var
|
|
81
|
+
var handleNavigation = function handleNavigation(e, url) {
|
|
61
82
|
e.preventDefault();
|
|
62
83
|
router.push(url);
|
|
63
84
|
};
|
|
@@ -66,69 +87,52 @@ var SearchContent = function SearchContent(_ref) {
|
|
|
66
87
|
router.push("/search?search_term=".concat(e.target.value));
|
|
67
88
|
}
|
|
68
89
|
};
|
|
69
|
-
var
|
|
70
|
-
|
|
71
|
-
if (
|
|
72
|
-
|
|
73
|
-
|
|
74
|
-
|
|
90
|
+
var handleIconClick = function handleIconClick() {
|
|
91
|
+
var isCloseIcon = collapsedSearch ? !collapsed : debouncedSearchTerm;
|
|
92
|
+
if (collapsedSearch) setCollapsed(!collapsed);
|
|
93
|
+
if (isCloseIcon) {
|
|
94
|
+
setSearchTerm('');
|
|
95
|
+
setShowResults(false);
|
|
96
|
+
} else {
|
|
97
|
+
setShowResults(true);
|
|
98
|
+
}
|
|
75
99
|
};
|
|
76
100
|
var className = ['search-content', modifier, responsiveClasses].filter(Boolean).join(' ');
|
|
77
|
-
|
|
78
|
-
|
|
101
|
+
var searchModifier = collapsed ? 'search-content--collapse' : 'search-content--expanded';
|
|
102
|
+
return /*#__PURE__*/_react["default"].createElement("div", {
|
|
103
|
+
className: className,
|
|
104
|
+
ref: searchContentRef
|
|
79
105
|
}, /*#__PURE__*/_react["default"].createElement("div", {
|
|
80
|
-
className: "
|
|
106
|
+
className: "".concat(searchModifier, "__wrapper")
|
|
81
107
|
}, /*#__PURE__*/_react["default"].createElement("label", {
|
|
82
|
-
className: "
|
|
108
|
+
className: "".concat(searchModifier, "__label")
|
|
83
109
|
}, /*#__PURE__*/_react["default"].createElement("span", {
|
|
84
|
-
className: "
|
|
85
|
-
}, /*#__PURE__*/_react["default"].createElement("svg", {
|
|
86
|
-
className: "search-content--collapse__icon",
|
|
87
|
-
viewBox: "0 0 20 20"
|
|
88
|
-
}, /*#__PURE__*/_react["default"].createElement("path", {
|
|
89
|
-
fillRule: "evenodd",
|
|
90
|
-
d: "M8 4a4 4 0 100 8 4 4 0 000-8zM2 8a6 6 0 1110.89 3.476l4.817 4.817a1 1 0 01-1.414 1.414l-4.816-4.816A6 6 0 012 8z",
|
|
91
|
-
clipRule: "evenodd"
|
|
92
|
-
}))), /*#__PURE__*/_react["default"].createElement("input", {
|
|
93
|
-
onFocus: function onFocus() {
|
|
94
|
-
return setCollapsed(false);
|
|
95
|
-
},
|
|
96
|
-
onChange: function onChange(e) {
|
|
97
|
-
return setSearchTerm(e.target.value);
|
|
98
|
-
},
|
|
99
|
-
type: "text",
|
|
100
|
-
name: "search",
|
|
101
|
-
className: "search-content--collapse__input"
|
|
102
|
-
})))) : /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, /*#__PURE__*/_react["default"].createElement("div", {
|
|
103
|
-
className: className
|
|
104
|
-
}, /*#__PURE__*/_react["default"].createElement("div", {
|
|
105
|
-
className: "search-content--expanded__wrapper"
|
|
106
|
-
}, /*#__PURE__*/_react["default"].createElement("label", {
|
|
107
|
-
className: "search-content--expanded__label"
|
|
108
|
-
}, /*#__PURE__*/_react["default"].createElement("span", {
|
|
109
|
-
className: "search-content--expanded__icon_wrapper"
|
|
110
|
+
className: "".concat(searchModifier, "__icon_wrapper")
|
|
110
111
|
}, /*#__PURE__*/_react["default"].createElement(_SearchContentToggleIcon["default"], {
|
|
111
|
-
|
|
112
|
-
|
|
113
|
-
|
|
112
|
+
searchTerm: debouncedSearchTerm,
|
|
113
|
+
onClick: handleIconClick,
|
|
114
|
+
useCloseIcon: collapsedSearch ? !collapsed : debouncedSearchTerm
|
|
115
|
+
})), !collapsed && /*#__PURE__*/_react["default"].createElement("input", {
|
|
116
|
+
className: "".concat(searchModifier, "__input"),
|
|
114
117
|
type: "text",
|
|
115
118
|
name: "search",
|
|
119
|
+
placeholder: placeholder,
|
|
120
|
+
value: searchTerm,
|
|
116
121
|
onChange: function onChange(e) {
|
|
117
122
|
return setSearchTerm(e.target.value);
|
|
118
123
|
},
|
|
119
124
|
onKeyPress: handleKeyPress,
|
|
120
|
-
|
|
121
|
-
|
|
122
|
-
|
|
123
|
-
|
|
124
|
-
}))), /*#__PURE__*/_react["default"].createElement(_SearchContentResults["default"], {
|
|
125
|
+
onFocus: function onFocus() {
|
|
126
|
+
return setShowResults(true);
|
|
127
|
+
},
|
|
128
|
+
"data-testid": "search-content-input"
|
|
129
|
+
}))), showResults && /*#__PURE__*/_react["default"].createElement(_SearchContentResults["default"], {
|
|
125
130
|
results: results,
|
|
126
131
|
debouncedSearchTerm: debouncedSearchTerm,
|
|
127
|
-
handleClick:
|
|
128
|
-
}))
|
|
132
|
+
handleClick: handleNavigation
|
|
133
|
+
}));
|
|
129
134
|
};
|
|
130
135
|
SearchContent.propTypes = {
|
|
131
|
-
searchInputAlignment: _propTypes["default"].string,
|
|
132
136
|
searchInputWrapperMobile: _propTypes["default"].string,
|
|
133
137
|
searchInputWrapperDesktop: _propTypes["default"].string,
|
|
134
138
|
placeholder: _propTypes["default"].string,
|
|
@@ -138,7 +142,6 @@ SearchContent.propTypes = {
|
|
|
138
142
|
collapsedSearch: _propTypes["default"].bool
|
|
139
143
|
};
|
|
140
144
|
SearchContent.defaultProps = {
|
|
141
|
-
searchInputAlignment: '',
|
|
142
145
|
searchInputWrapperMobile: '',
|
|
143
146
|
searchInputWrapperDesktop: '',
|
|
144
147
|
placeholder: '',
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"SearchContent.js","names":["_react","_interopRequireWildcard","require","_propTypes","_interopRequireDefault","_router","_pluginSearchUi","_SearchContentResults","_SearchContentToggleIcon","_getRequireWildcardCache","nodeInterop","WeakMap","cacheBabelInterop","cacheNodeInterop","obj","__esModule","_typeof","cache","has","get","newObj","hasPropertyDescriptor","Object","defineProperty","getOwnPropertyDescriptor","key","prototype","hasOwnProperty","call","desc","set","SearchContent","_ref","entities","searchInputAlignment","searchInputWrapperMobile","searchInputWrapperDesktop","isMobile","placeholder","modifier","collapsedSearch","_useState","useState","_useState2","_slicedToArray2","collapsed","setCollapsed","router","useRouter","_useDebounceSearch","useDebounceSearch","initialSearchTerm","resultKeys","results","searchTerm","setSearchTerm","debouncedSearchTerm","useEffect","handleRouteChange","events","on","off","responsiveClasses","handleClick","e","url","preventDefault","push","handleKeyPress","target","value","concat","handleOnBlur","handleClearSearchResults","className","filter","Boolean","join","createElement","viewBox","fillRule","d","clipRule","onFocus","onChange","type","name","Fragment","onClear","onKeyPress","onBlur","propTypes","PropTypes","string","bool","array","isRequired","defaultProps","_default","exports"],"sources":["../../../src/components/SearchContent/SearchContent.js"],"sourcesContent":["import React, { useState, useEffect } from 'react';\nimport PropTypes from 'prop-types';\nimport { useRouter } from 'next/router';\nimport { useDebounceSearch } from '@blaze-cms/plugin-search-ui';\nimport SearchContentResults from './SearchContentResults';\nimport SearchContentToggleIcon from './SearchContentToggleIcon';\n\nconst SearchContent = ({\n entities,\n searchInputAlignment,\n searchInputWrapperMobile,\n searchInputWrapperDesktop,\n isMobile,\n placeholder,\n modifier,\n collapsedSearch\n}) => {\n const [collapsed, setCollapsed] = useState(collapsedSearch);\n const router = useRouter();\n\n const { results, searchTerm, setSearchTerm, debouncedSearchTerm } = useDebounceSearch({\n entities,\n initialSearchTerm: '',\n resultKeys: 'id, name, image { url }, url'\n });\n\n useEffect(\n () => {\n const handleRouteChange = () => setSearchTerm('');\n router.events.on('routeChangeStart', handleRouteChange);\n\n return () => {\n router.events.off('routeChangeStart', handleRouteChange);\n };\n },\n [router.events, setSearchTerm]\n );\n\n const responsiveClasses = isMobile ? searchInputWrapperMobile : searchInputWrapperDesktop;\n\n const handleClick = (e, url) => {\n e.preventDefault();\n router.push(url);\n };\n\n const handleKeyPress = e => {\n if (e.key === 'Enter' && e.target.value !== '') {\n router.push(`/search?search_term=${e.target.value}`);\n }\n };\n\n const handleOnBlur = () => {\n if (!collapsedSearch) return;\n if (!debouncedSearchTerm || debouncedSearchTerm === '') setCollapsed(true);\n };\n\n const handleClearSearchResults = () => {\n setSearchTerm('');\n };\n\n const className = ['search-content', modifier, responsiveClasses].filter(Boolean).join(' ');\n return collapsed ? (\n <div className={className}>\n <div className=\"search-content--collapse__wrapper\">\n <label className=\"search-content--collapse__label\">\n <span className=\"search-content--collapse__icon_wrapper\">\n <svg className=\"search-content--collapse__icon\" viewBox=\"0 0 20 20\">\n <path\n fillRule=\"evenodd\"\n d=\"M8 4a4 4 0 100 8 4 4 0 000-8zM2 8a6 6 0 1110.89 3.476l4.817 4.817a1 1 0 01-1.414 1.414l-4.816-4.816A6 6 0 012 8z\"\n clipRule=\"evenodd\"\n />\n </svg>\n </span>\n <input\n onFocus={() => setCollapsed(false)}\n onChange={e => setSearchTerm(e.target.value)}\n type=\"text\"\n name=\"search\"\n className=\"search-content--collapse__input\"\n />\n </label>\n </div>\n </div>\n ) : (\n <>\n <div className={className}>\n <div className=\"search-content--expanded__wrapper\">\n <label className=\"search-content--expanded__label\">\n <span className=\"search-content--expanded__icon_wrapper\">\n <SearchContentToggleIcon results={results} onClear={handleClearSearchResults} />\n </span>\n <input\n type=\"text\"\n name=\"search\"\n onChange={e => setSearchTerm(e.target.value)}\n onKeyPress={handleKeyPress}\n className=\"search-content--expanded__input\"\n placeholder={placeholder}\n value={searchTerm}\n onBlur={handleOnBlur}\n />\n </label>\n </div>\n <SearchContentResults\n results={results}\n debouncedSearchTerm={debouncedSearchTerm}\n handleClick={handleClick}\n />\n </div>\n </>\n );\n};\n\nSearchContent.propTypes = {\n searchInputAlignment: PropTypes.string,\n searchInputWrapperMobile: PropTypes.string,\n searchInputWrapperDesktop: PropTypes.string,\n placeholder: PropTypes.string,\n isMobile: PropTypes.bool,\n entities: PropTypes.array.isRequired,\n modifier: PropTypes.string,\n collapsedSearch: PropTypes.bool\n};\n\nSearchContent.defaultProps = {\n searchInputAlignment: '',\n searchInputWrapperMobile: '',\n searchInputWrapperDesktop: '',\n placeholder: '',\n isMobile: false,\n modifier: '',\n collapsedSearch: false\n};\n\nexport default SearchContent;\n"],"mappings":";;;;;;;;;;;;;;;;;;AAAA,IAAAA,MAAA,GAAAC,uBAAA,CAAAC,OAAA;AACA,IAAAC,UAAA,GAAAC,sBAAA,CAAAF,OAAA;AACA,IAAAG,OAAA,GAAAH,OAAA;AACA,IAAAI,eAAA,GAAAJ,OAAA;AACA,IAAAK,qBAAA,GAAAH,sBAAA,CAAAF,OAAA;AACA,IAAAM,wBAAA,GAAAJ,sBAAA,CAAAF,OAAA;AAAgE,SAAAO,yBAAAC,WAAA,eAAAC,OAAA,kCAAAC,iBAAA,OAAAD,OAAA,QAAAE,gBAAA,OAAAF,OAAA,YAAAF,wBAAA,YAAAA,yBAAAC,WAAA,WAAAA,WAAA,GAAAG,gBAAA,GAAAD,iBAAA,KAAAF,WAAA;AAAA,SAAAT,wBAAAa,GAAA,EAAAJ,WAAA,SAAAA,WAAA,IAAAI,GAAA,IAAAA,GAAA,CAAAC,UAAA,WAAAD,GAAA,QAAAA,GAAA,aAAAE,OAAA,CAAAF,GAAA,yBAAAA,GAAA,uCAAAA,GAAA,UAAAG,KAAA,GAAAR,wBAAA,CAAAC,WAAA,OAAAO,KAAA,IAAAA,KAAA,CAAAC,GAAA,CAAAJ,GAAA,YAAAG,KAAA,CAAAE,GAAA,CAAAL,GAAA,SAAAM,MAAA,WAAAC,qBAAA,GAAAC,MAAA,CAAAC,cAAA,IAAAD,MAAA,CAAAE,wBAAA,WAAAC,GAAA,IAAAX,GAAA,QAAAW,GAAA,kBAAAH,MAAA,CAAAI,SAAA,CAAAC,cAAA,CAAAC,IAAA,CAAAd,GAAA,EAAAW,GAAA,SAAAI,IAAA,GAAAR,qBAAA,GAAAC,MAAA,CAAAE,wBAAA,CAAAV,GAAA,EAAAW,GAAA,cAAAI,IAAA,KAAAA,IAAA,CAAAV,GAAA,IAAAU,IAAA,CAAAC,GAAA,KAAAR,MAAA,CAAAC,cAAA,CAAAH,MAAA,EAAAK,GAAA,EAAAI,IAAA,YAAAT,MAAA,CAAAK,GAAA,IAAAX,GAAA,CAAAW,GAAA,SAAAL,MAAA,cAAAN,GAAA,MAAAG,KAAA,IAAAA,KAAA,CAAAa,GAAA,CAAAhB,GAAA,EAAAM,MAAA,YAAAA,MAAA;AAEhE,IAAMW,aAAa,GAAG,SAAhBA,aAAaA,CAAAC,IAAA,EASb;EAAA,IARJC,QAAQ,GAAAD,IAAA,CAARC,QAAQ;IACRC,oBAAoB,GAAAF,IAAA,CAApBE,oBAAoB;IACpBC,wBAAwB,GAAAH,IAAA,CAAxBG,wBAAwB;IACxBC,yBAAyB,GAAAJ,IAAA,CAAzBI,yBAAyB;IACzBC,QAAQ,GAAAL,IAAA,CAARK,QAAQ;IACRC,WAAW,GAAAN,IAAA,CAAXM,WAAW;IACXC,QAAQ,GAAAP,IAAA,CAARO,QAAQ;IACRC,eAAe,GAAAR,IAAA,CAAfQ,eAAe;EAEf,IAAAC,SAAA,GAAkC,IAAAC,eAAQ,EAACF,eAAe,CAAC;IAAAG,UAAA,OAAAC,eAAA,aAAAH,SAAA;IAApDI,SAAS,GAAAF,UAAA;IAAEG,YAAY,GAAAH,UAAA;EAC9B,IAAMI,MAAM,GAAG,IAAAC,iBAAS,EAAC,CAAC;EAE1B,IAAAC,kBAAA,GAAoE,IAAAC,iCAAiB,EAAC;MACpFjB,QAAQ,EAARA,QAAQ;MACRkB,iBAAiB,EAAE,EAAE;MACrBC,UAAU,EAAE;IACd,CAAC,CAAC;IAJMC,OAAO,GAAAJ,kBAAA,CAAPI,OAAO;IAAEC,UAAU,GAAAL,kBAAA,CAAVK,UAAU;IAAEC,aAAa,GAAAN,kBAAA,CAAbM,aAAa;IAAEC,mBAAmB,GAAAP,kBAAA,CAAnBO,mBAAmB;EAM/D,IAAAC,gBAAS,EACP,YAAM;IACJ,IAAMC,iBAAiB,GAAG,SAApBA,iBAAiBA,CAAA;MAAA,OAASH,aAAa,CAAC,EAAE,CAAC;IAAA;IACjDR,MAAM,CAACY,MAAM,CAACC,EAAE,CAAC,kBAAkB,EAAEF,iBAAiB,CAAC;IAEvD,OAAO,YAAM;MACXX,MAAM,CAACY,MAAM,CAACE,GAAG,CAAC,kBAAkB,EAAEH,iBAAiB,CAAC;IAC1D,CAAC;EACH,CAAC,EACD,CAACX,MAAM,CAACY,MAAM,EAAEJ,aAAa,CAC/B,CAAC;EAED,IAAMO,iBAAiB,GAAGzB,QAAQ,GAAGF,wBAAwB,GAAGC,yBAAyB;EAEzF,IAAM2B,WAAW,GAAG,SAAdA,WAAWA,CAAIC,CAAC,EAAEC,GAAG,EAAK;IAC9BD,CAAC,CAACE,cAAc,CAAC,CAAC;IAClBnB,MAAM,CAACoB,IAAI,CAACF,GAAG,CAAC;EAClB,CAAC;EAED,IAAMG,cAAc,GAAG,SAAjBA,cAAcA,CAAGJ,CAAC,EAAI;IAC1B,IAAIA,CAAC,CAACvC,GAAG,KAAK,OAAO,IAAIuC,CAAC,CAACK,MAAM,CAACC,KAAK,KAAK,EAAE,EAAE;MAC9CvB,MAAM,CAACoB,IAAI,wBAAAI,MAAA,CAAwBP,CAAC,CAACK,MAAM,CAACC,KAAK,CAAE,CAAC;IACtD;EACF,CAAC;EAED,IAAME,YAAY,GAAG,SAAfA,YAAYA,CAAA,EAAS;IACzB,IAAI,CAAChC,eAAe,EAAE;IACtB,IAAI,CAACgB,mBAAmB,IAAIA,mBAAmB,KAAK,EAAE,EAAEV,YAAY,CAAC,IAAI,CAAC;EAC5E,CAAC;EAED,IAAM2B,wBAAwB,GAAG,SAA3BA,wBAAwBA,CAAA,EAAS;IACrClB,aAAa,CAAC,EAAE,CAAC;EACnB,CAAC;EAED,IAAMmB,SAAS,GAAG,CAAC,gBAAgB,EAAEnC,QAAQ,EAAEuB,iBAAiB,CAAC,CAACa,MAAM,CAACC,OAAO,CAAC,CAACC,IAAI,CAAC,GAAG,CAAC;EAC3F,OAAOhC,SAAS,gBACd7C,MAAA,YAAA8E,aAAA;IAAKJ,SAAS,EAAEA;EAAU,gBACxB1E,MAAA,YAAA8E,aAAA;IAAKJ,SAAS,EAAC;EAAmC,gBAChD1E,MAAA,YAAA8E,aAAA;IAAOJ,SAAS,EAAC;EAAiC,gBAChD1E,MAAA,YAAA8E,aAAA;IAAMJ,SAAS,EAAC;EAAwC,gBACtD1E,MAAA,YAAA8E,aAAA;IAAKJ,SAAS,EAAC,gCAAgC;IAACK,OAAO,EAAC;EAAW,gBACjE/E,MAAA,YAAA8E,aAAA;IACEE,QAAQ,EAAC,SAAS;IAClBC,CAAC,EAAC,kHAAkH;IACpHC,QAAQ,EAAC;EAAS,CACnB,CACE,CACD,CAAC,eACPlF,MAAA,YAAA8E,aAAA;IACEK,OAAO,EAAE,SAAAA,QAAA;MAAA,OAAMrC,YAAY,CAAC,KAAK,CAAC;IAAA,CAAC;IACnCsC,QAAQ,EAAE,SAAAA,SAAApB,CAAC;MAAA,OAAIT,aAAa,CAACS,CAAC,CAACK,MAAM,CAACC,KAAK,CAAC;IAAA,CAAC;IAC7Ce,IAAI,EAAC,MAAM;IACXC,IAAI,EAAC,QAAQ;IACbZ,SAAS,EAAC;EAAiC,CAC5C,CACI,CACJ,CACF,CAAC,gBAEN1E,MAAA,YAAA8E,aAAA,CAAA9E,MAAA,YAAAuF,QAAA,qBACEvF,MAAA,YAAA8E,aAAA;IAAKJ,SAAS,EAAEA;EAAU,gBACxB1E,MAAA,YAAA8E,aAAA;IAAKJ,SAAS,EAAC;EAAmC,gBAChD1E,MAAA,YAAA8E,aAAA;IAAOJ,SAAS,EAAC;EAAiC,gBAChD1E,MAAA,YAAA8E,aAAA;IAAMJ,SAAS,EAAC;EAAwC,gBACtD1E,MAAA,YAAA8E,aAAA,CAACtE,wBAAA,WAAuB;IAAC6C,OAAO,EAAEA,OAAQ;IAACmC,OAAO,EAAEf;EAAyB,CAAE,CAC3E,CAAC,eACPzE,MAAA,YAAA8E,aAAA;IACEO,IAAI,EAAC,MAAM;IACXC,IAAI,EAAC,QAAQ;IACbF,QAAQ,EAAE,SAAAA,SAAApB,CAAC;MAAA,OAAIT,aAAa,CAACS,CAAC,CAACK,MAAM,CAACC,KAAK,CAAC;IAAA,CAAC;IAC7CmB,UAAU,EAAErB,cAAe;IAC3BM,SAAS,EAAC,iCAAiC;IAC3CpC,WAAW,EAAEA,WAAY;IACzBgC,KAAK,EAAEhB,UAAW;IAClBoC,MAAM,EAAElB;EAAa,CACtB,CACI,CACJ,CAAC,eACNxE,MAAA,YAAA8E,aAAA,CAACvE,qBAAA,WAAoB;IACnB8C,OAAO,EAAEA,OAAQ;IACjBG,mBAAmB,EAAEA,mBAAoB;IACzCO,WAAW,EAAEA;EAAY,CAC1B,CACE,CACL,CACH;AACH,CAAC;AAEDhC,aAAa,CAAC4D,SAAS,GAAG;EACxBzD,oBAAoB,EAAE0D,qBAAS,CAACC,MAAM;EACtC1D,wBAAwB,EAAEyD,qBAAS,CAACC,MAAM;EAC1CzD,yBAAyB,EAAEwD,qBAAS,CAACC,MAAM;EAC3CvD,WAAW,EAAEsD,qBAAS,CAACC,MAAM;EAC7BxD,QAAQ,EAAEuD,qBAAS,CAACE,IAAI;EACxB7D,QAAQ,EAAE2D,qBAAS,CAACG,KAAK,CAACC,UAAU;EACpCzD,QAAQ,EAAEqD,qBAAS,CAACC,MAAM;EAC1BrD,eAAe,EAAEoD,qBAAS,CAACE;AAC7B,CAAC;AAED/D,aAAa,CAACkE,YAAY,GAAG;EAC3B/D,oBAAoB,EAAE,EAAE;EACxBC,wBAAwB,EAAE,EAAE;EAC5BC,yBAAyB,EAAE,EAAE;EAC7BE,WAAW,EAAE,EAAE;EACfD,QAAQ,EAAE,KAAK;EACfE,QAAQ,EAAE,EAAE;EACZC,eAAe,EAAE;AACnB,CAAC;AAAC,IAAA0D,QAAA,GAEanE,aAAa;AAAAoE,OAAA,cAAAD,QAAA"}
|
|
1
|
+
{"version":3,"file":"SearchContent.js","names":["_react","_interopRequireWildcard","require","_propTypes","_interopRequireDefault","_router","_pluginSearchUi","_SearchContentResults","_SearchContentToggleIcon","_getRequireWildcardCache","nodeInterop","WeakMap","cacheBabelInterop","cacheNodeInterop","obj","__esModule","_typeof","cache","has","get","newObj","hasPropertyDescriptor","Object","defineProperty","getOwnPropertyDescriptor","key","prototype","hasOwnProperty","call","desc","set","SearchContent","_ref","entities","searchInputWrapperMobile","searchInputWrapperDesktop","isMobile","placeholder","modifier","collapsedSearch","searchContentRef","useRef","_useState","useState","_useState2","_slicedToArray2","collapsed","setCollapsed","_useState3","_useState4","showResults","setShowResults","router","useRouter","_useDebounceSearch","useDebounceSearch","initialSearchTerm","resultKeys","results","searchTerm","setSearchTerm","debouncedSearchTerm","useEffect","handleRouteChange","events","on","off","handleClickOutside","event","current","contains","target","document","addEventListener","removeEventListener","responsiveClasses","handleNavigation","e","url","preventDefault","push","handleKeyPress","value","concat","handleIconClick","isCloseIcon","className","filter","Boolean","join","searchModifier","createElement","ref","onClick","useCloseIcon","type","name","onChange","onKeyPress","onFocus","handleClick","propTypes","PropTypes","string","bool","array","isRequired","defaultProps","_default","exports"],"sources":["../../../src/components/SearchContent/SearchContent.js"],"sourcesContent":["import React, { useState, useEffect, useRef } from 'react';\nimport PropTypes from 'prop-types';\nimport { useRouter } from 'next/router';\nimport { useDebounceSearch } from '@blaze-cms/plugin-search-ui';\nimport SearchContentResults from './SearchContentResults';\nimport SearchContentToggleIcon from './SearchContentToggleIcon';\n\nconst SearchContent = ({\n entities,\n searchInputWrapperMobile,\n searchInputWrapperDesktop,\n isMobile,\n placeholder,\n modifier,\n collapsedSearch\n}) => {\n const searchContentRef = useRef(null);\n const [collapsed, setCollapsed] = useState(collapsedSearch);\n const [showResults, setShowResults] = useState(false);\n const router = useRouter();\n\n const { results, searchTerm, setSearchTerm, debouncedSearchTerm } = useDebounceSearch({\n entities,\n initialSearchTerm: '',\n resultKeys: 'id, name, image { url }, url'\n });\n\n useEffect(\n () => {\n const handleRouteChange = () => {\n setSearchTerm('');\n setShowResults(false);\n if (collapsedSearch) setCollapsed(true);\n };\n router.events.on('routeChangeStart', handleRouteChange);\n\n return () => {\n router.events.off('routeChangeStart', handleRouteChange);\n };\n },\n [collapsedSearch, router.events, setSearchTerm]\n );\n\n useEffect(\n () => {\n const handleClickOutside = event => {\n if (searchContentRef.current && !searchContentRef.current.contains(event.target)) {\n setShowResults(false);\n if (collapsedSearch) {\n setCollapsed(true);\n setSearchTerm('');\n }\n }\n };\n\n document.addEventListener('click', handleClickOutside);\n\n return () => {\n document.removeEventListener('click', handleClickOutside);\n };\n },\n [collapsedSearch, setSearchTerm]\n );\n\n const responsiveClasses = isMobile ? searchInputWrapperMobile : searchInputWrapperDesktop;\n\n const handleNavigation = (e, url) => {\n e.preventDefault();\n router.push(url);\n };\n\n const handleKeyPress = e => {\n if (e.key === 'Enter' && e.target.value !== '') {\n router.push(`/search?search_term=${e.target.value}`);\n }\n };\n\n const handleIconClick = () => {\n const isCloseIcon = collapsedSearch ? !collapsed : debouncedSearchTerm;\n\n if (collapsedSearch) setCollapsed(!collapsed);\n\n if (isCloseIcon) {\n setSearchTerm('');\n setShowResults(false);\n } else {\n setShowResults(true);\n }\n };\n\n const className = ['search-content', modifier, responsiveClasses].filter(Boolean).join(' ');\n const searchModifier = collapsed ? 'search-content--collapse' : 'search-content--expanded';\n\n return (\n <div className={className} ref={searchContentRef}>\n <div className={`${searchModifier}__wrapper`}>\n <label className={`${searchModifier}__label`}>\n <span className={`${searchModifier}__icon_wrapper`}>\n <SearchContentToggleIcon\n searchTerm={debouncedSearchTerm}\n onClick={handleIconClick}\n useCloseIcon={collapsedSearch ? !collapsed : debouncedSearchTerm}\n />\n </span>\n {!collapsed && (\n <input\n className={`${searchModifier}__input`}\n type=\"text\"\n name=\"search\"\n placeholder={placeholder}\n value={searchTerm}\n onChange={e => setSearchTerm(e.target.value)}\n onKeyPress={handleKeyPress}\n onFocus={() => setShowResults(true)}\n data-testid=\"search-content-input\"\n />\n )}\n </label>\n </div>\n {showResults && (\n <SearchContentResults\n results={results}\n debouncedSearchTerm={debouncedSearchTerm}\n handleClick={handleNavigation}\n />\n )}\n </div>\n );\n};\n\nSearchContent.propTypes = {\n searchInputWrapperMobile: PropTypes.string,\n searchInputWrapperDesktop: PropTypes.string,\n placeholder: PropTypes.string,\n isMobile: PropTypes.bool,\n entities: PropTypes.array.isRequired,\n modifier: PropTypes.string,\n collapsedSearch: PropTypes.bool\n};\n\nSearchContent.defaultProps = {\n searchInputWrapperMobile: '',\n searchInputWrapperDesktop: '',\n placeholder: '',\n isMobile: false,\n modifier: '',\n collapsedSearch: false\n};\n\nexport default SearchContent;\n"],"mappings":";;;;;;;;;;;;;;;;;;AAAA,IAAAA,MAAA,GAAAC,uBAAA,CAAAC,OAAA;AACA,IAAAC,UAAA,GAAAC,sBAAA,CAAAF,OAAA;AACA,IAAAG,OAAA,GAAAH,OAAA;AACA,IAAAI,eAAA,GAAAJ,OAAA;AACA,IAAAK,qBAAA,GAAAH,sBAAA,CAAAF,OAAA;AACA,IAAAM,wBAAA,GAAAJ,sBAAA,CAAAF,OAAA;AAAgE,SAAAO,yBAAAC,WAAA,eAAAC,OAAA,kCAAAC,iBAAA,OAAAD,OAAA,QAAAE,gBAAA,OAAAF,OAAA,YAAAF,wBAAA,YAAAA,yBAAAC,WAAA,WAAAA,WAAA,GAAAG,gBAAA,GAAAD,iBAAA,KAAAF,WAAA;AAAA,SAAAT,wBAAAa,GAAA,EAAAJ,WAAA,SAAAA,WAAA,IAAAI,GAAA,IAAAA,GAAA,CAAAC,UAAA,WAAAD,GAAA,QAAAA,GAAA,aAAAE,OAAA,CAAAF,GAAA,yBAAAA,GAAA,uCAAAA,GAAA,UAAAG,KAAA,GAAAR,wBAAA,CAAAC,WAAA,OAAAO,KAAA,IAAAA,KAAA,CAAAC,GAAA,CAAAJ,GAAA,YAAAG,KAAA,CAAAE,GAAA,CAAAL,GAAA,SAAAM,MAAA,WAAAC,qBAAA,GAAAC,MAAA,CAAAC,cAAA,IAAAD,MAAA,CAAAE,wBAAA,WAAAC,GAAA,IAAAX,GAAA,QAAAW,GAAA,kBAAAH,MAAA,CAAAI,SAAA,CAAAC,cAAA,CAAAC,IAAA,CAAAd,GAAA,EAAAW,GAAA,SAAAI,IAAA,GAAAR,qBAAA,GAAAC,MAAA,CAAAE,wBAAA,CAAAV,GAAA,EAAAW,GAAA,cAAAI,IAAA,KAAAA,IAAA,CAAAV,GAAA,IAAAU,IAAA,CAAAC,GAAA,KAAAR,MAAA,CAAAC,cAAA,CAAAH,MAAA,EAAAK,GAAA,EAAAI,IAAA,YAAAT,MAAA,CAAAK,GAAA,IAAAX,GAAA,CAAAW,GAAA,SAAAL,MAAA,cAAAN,GAAA,MAAAG,KAAA,IAAAA,KAAA,CAAAa,GAAA,CAAAhB,GAAA,EAAAM,MAAA,YAAAA,MAAA;AAEhE,IAAMW,aAAa,GAAG,SAAhBA,aAAaA,CAAAC,IAAA,EAQb;EAAA,IAPJC,QAAQ,GAAAD,IAAA,CAARC,QAAQ;IACRC,wBAAwB,GAAAF,IAAA,CAAxBE,wBAAwB;IACxBC,yBAAyB,GAAAH,IAAA,CAAzBG,yBAAyB;IACzBC,QAAQ,GAAAJ,IAAA,CAARI,QAAQ;IACRC,WAAW,GAAAL,IAAA,CAAXK,WAAW;IACXC,QAAQ,GAAAN,IAAA,CAARM,QAAQ;IACRC,eAAe,GAAAP,IAAA,CAAfO,eAAe;EAEf,IAAMC,gBAAgB,GAAG,IAAAC,aAAM,EAAC,IAAI,CAAC;EACrC,IAAAC,SAAA,GAAkC,IAAAC,eAAQ,EAACJ,eAAe,CAAC;IAAAK,UAAA,OAAAC,eAAA,aAAAH,SAAA;IAApDI,SAAS,GAAAF,UAAA;IAAEG,YAAY,GAAAH,UAAA;EAC9B,IAAAI,UAAA,GAAsC,IAAAL,eAAQ,EAAC,KAAK,CAAC;IAAAM,UAAA,OAAAJ,eAAA,aAAAG,UAAA;IAA9CE,WAAW,GAAAD,UAAA;IAAEE,cAAc,GAAAF,UAAA;EAClC,IAAMG,MAAM,GAAG,IAAAC,iBAAS,EAAC,CAAC;EAE1B,IAAAC,kBAAA,GAAoE,IAAAC,iCAAiB,EAAC;MACpFtB,QAAQ,EAARA,QAAQ;MACRuB,iBAAiB,EAAE,EAAE;MACrBC,UAAU,EAAE;IACd,CAAC,CAAC;IAJMC,OAAO,GAAAJ,kBAAA,CAAPI,OAAO;IAAEC,UAAU,GAAAL,kBAAA,CAAVK,UAAU;IAAEC,aAAa,GAAAN,kBAAA,CAAbM,aAAa;IAAEC,mBAAmB,GAAAP,kBAAA,CAAnBO,mBAAmB;EAM/D,IAAAC,gBAAS,EACP,YAAM;IACJ,IAAMC,iBAAiB,GAAG,SAApBA,iBAAiBA,CAAA,EAAS;MAC9BH,aAAa,CAAC,EAAE,CAAC;MACjBT,cAAc,CAAC,KAAK,CAAC;MACrB,IAAIZ,eAAe,EAAEQ,YAAY,CAAC,IAAI,CAAC;IACzC,CAAC;IACDK,MAAM,CAACY,MAAM,CAACC,EAAE,CAAC,kBAAkB,EAAEF,iBAAiB,CAAC;IAEvD,OAAO,YAAM;MACXX,MAAM,CAACY,MAAM,CAACE,GAAG,CAAC,kBAAkB,EAAEH,iBAAiB,CAAC;IAC1D,CAAC;EACH,CAAC,EACD,CAACxB,eAAe,EAAEa,MAAM,CAACY,MAAM,EAAEJ,aAAa,CAChD,CAAC;EAED,IAAAE,gBAAS,EACP,YAAM;IACJ,IAAMK,kBAAkB,GAAG,SAArBA,kBAAkBA,CAAGC,KAAK,EAAI;MAClC,IAAI5B,gBAAgB,CAAC6B,OAAO,IAAI,CAAC7B,gBAAgB,CAAC6B,OAAO,CAACC,QAAQ,CAACF,KAAK,CAACG,MAAM,CAAC,EAAE;QAChFpB,cAAc,CAAC,KAAK,CAAC;QACrB,IAAIZ,eAAe,EAAE;UACnBQ,YAAY,CAAC,IAAI,CAAC;UAClBa,aAAa,CAAC,EAAE,CAAC;QACnB;MACF;IACF,CAAC;IAEDY,QAAQ,CAACC,gBAAgB,CAAC,OAAO,EAAEN,kBAAkB,CAAC;IAEtD,OAAO,YAAM;MACXK,QAAQ,CAACE,mBAAmB,CAAC,OAAO,EAAEP,kBAAkB,CAAC;IAC3D,CAAC;EACH,CAAC,EACD,CAAC5B,eAAe,EAAEqB,aAAa,CACjC,CAAC;EAED,IAAMe,iBAAiB,GAAGvC,QAAQ,GAAGF,wBAAwB,GAAGC,yBAAyB;EAEzF,IAAMyC,gBAAgB,GAAG,SAAnBA,gBAAgBA,CAAIC,CAAC,EAAEC,GAAG,EAAK;IACnCD,CAAC,CAACE,cAAc,CAAC,CAAC;IAClB3B,MAAM,CAAC4B,IAAI,CAACF,GAAG,CAAC;EAClB,CAAC;EAED,IAAMG,cAAc,GAAG,SAAjBA,cAAcA,CAAGJ,CAAC,EAAI;IAC1B,IAAIA,CAAC,CAACpD,GAAG,KAAK,OAAO,IAAIoD,CAAC,CAACN,MAAM,CAACW,KAAK,KAAK,EAAE,EAAE;MAC9C9B,MAAM,CAAC4B,IAAI,wBAAAG,MAAA,CAAwBN,CAAC,CAACN,MAAM,CAACW,KAAK,CAAE,CAAC;IACtD;EACF,CAAC;EAED,IAAME,eAAe,GAAG,SAAlBA,eAAeA,CAAA,EAAS;IAC5B,IAAMC,WAAW,GAAG9C,eAAe,GAAG,CAACO,SAAS,GAAGe,mBAAmB;IAEtE,IAAItB,eAAe,EAAEQ,YAAY,CAAC,CAACD,SAAS,CAAC;IAE7C,IAAIuC,WAAW,EAAE;MACfzB,aAAa,CAAC,EAAE,CAAC;MACjBT,cAAc,CAAC,KAAK,CAAC;IACvB,CAAC,MAAM;MACLA,cAAc,CAAC,IAAI,CAAC;IACtB;EACF,CAAC;EAED,IAAMmC,SAAS,GAAG,CAAC,gBAAgB,EAAEhD,QAAQ,EAAEqC,iBAAiB,CAAC,CAACY,MAAM,CAACC,OAAO,CAAC,CAACC,IAAI,CAAC,GAAG,CAAC;EAC3F,IAAMC,cAAc,GAAG5C,SAAS,GAAG,0BAA0B,GAAG,0BAA0B;EAE1F,oBACE9C,MAAA,YAAA2F,aAAA;IAAKL,SAAS,EAAEA,SAAU;IAACM,GAAG,EAAEpD;EAAiB,gBAC/CxC,MAAA,YAAA2F,aAAA;IAAKL,SAAS,KAAAH,MAAA,CAAKO,cAAc;EAAY,gBAC3C1F,MAAA,YAAA2F,aAAA;IAAOL,SAAS,KAAAH,MAAA,CAAKO,cAAc;EAAU,gBAC3C1F,MAAA,YAAA2F,aAAA;IAAML,SAAS,KAAAH,MAAA,CAAKO,cAAc;EAAiB,gBACjD1F,MAAA,YAAA2F,aAAA,CAACnF,wBAAA,WAAuB;IACtBmD,UAAU,EAAEE,mBAAoB;IAChCgC,OAAO,EAAET,eAAgB;IACzBU,YAAY,EAAEvD,eAAe,GAAG,CAACO,SAAS,GAAGe;EAAoB,CAClE,CACG,CAAC,EACN,CAACf,SAAS,iBACT9C,MAAA,YAAA2F,aAAA;IACEL,SAAS,KAAAH,MAAA,CAAKO,cAAc,YAAU;IACtCK,IAAI,EAAC,MAAM;IACXC,IAAI,EAAC,QAAQ;IACb3D,WAAW,EAAEA,WAAY;IACzB6C,KAAK,EAAEvB,UAAW;IAClBsC,QAAQ,EAAE,SAAAA,SAAApB,CAAC;MAAA,OAAIjB,aAAa,CAACiB,CAAC,CAACN,MAAM,CAACW,KAAK,CAAC;IAAA,CAAC;IAC7CgB,UAAU,EAAEjB,cAAe;IAC3BkB,OAAO,EAAE,SAAAA,QAAA;MAAA,OAAMhD,cAAc,CAAC,IAAI,CAAC;IAAA,CAAC;IACpC,eAAY;EAAsB,CACnC,CAEE,CACJ,CAAC,EACLD,WAAW,iBACVlD,MAAA,YAAA2F,aAAA,CAACpF,qBAAA,WAAoB;IACnBmD,OAAO,EAAEA,OAAQ;IACjBG,mBAAmB,EAAEA,mBAAoB;IACzCuC,WAAW,EAAExB;EAAiB,CAC/B,CAEA,CAAC;AAEV,CAAC;AAED7C,aAAa,CAACsE,SAAS,GAAG;EACxBnE,wBAAwB,EAAEoE,qBAAS,CAACC,MAAM;EAC1CpE,yBAAyB,EAAEmE,qBAAS,CAACC,MAAM;EAC3ClE,WAAW,EAAEiE,qBAAS,CAACC,MAAM;EAC7BnE,QAAQ,EAAEkE,qBAAS,CAACE,IAAI;EACxBvE,QAAQ,EAAEqE,qBAAS,CAACG,KAAK,CAACC,UAAU;EACpCpE,QAAQ,EAAEgE,qBAAS,CAACC,MAAM;EAC1BhE,eAAe,EAAE+D,qBAAS,CAACE;AAC7B,CAAC;AAEDzE,aAAa,CAAC4E,YAAY,GAAG;EAC3BzE,wBAAwB,EAAE,EAAE;EAC5BC,yBAAyB,EAAE,EAAE;EAC7BE,WAAW,EAAE,EAAE;EACfD,QAAQ,EAAE,KAAK;EACfE,QAAQ,EAAE,EAAE;EACZC,eAAe,EAAE;AACnB,CAAC;AAAC,IAAAqE,QAAA,GAEa7E,aAAa;AAAA8E,OAAA,cAAAD,QAAA"}
|
|
@@ -13,23 +13,22 @@ var SearchContentResults = function SearchContentResults(_ref) {
|
|
|
13
13
|
var results = _ref.results,
|
|
14
14
|
debouncedSearchTerm = _ref.debouncedSearchTerm,
|
|
15
15
|
onClick = _ref.onClick;
|
|
16
|
-
if (debouncedSearchTerm
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
}
|
|
32
|
-
return null;
|
|
16
|
+
if (!debouncedSearchTerm) return null;
|
|
17
|
+
var hasResults = results.length > 0;
|
|
18
|
+
return /*#__PURE__*/_react["default"].createElement("div", {
|
|
19
|
+
className: "search-content--results__wrapper"
|
|
20
|
+
}, /*#__PURE__*/_react["default"].createElement("div", {
|
|
21
|
+
className: "search-content--results__wrapper--message"
|
|
22
|
+
}, /*#__PURE__*/_react["default"].createElement("div", {
|
|
23
|
+
className: "search-content--results__content"
|
|
24
|
+
}, hasResults ? /*#__PURE__*/_react["default"].createElement(_SearchContentItems["default"], {
|
|
25
|
+
results: results,
|
|
26
|
+
onClick: onClick
|
|
27
|
+
}) : /*#__PURE__*/_react["default"].createElement("div", {
|
|
28
|
+
className: "search-content--results__message"
|
|
29
|
+
}, /*#__PURE__*/_react["default"].createElement(_BlazeLink["default"], {
|
|
30
|
+
href: "/search?search_term=".concat(debouncedSearchTerm)
|
|
31
|
+
}, "Search all results for: ".concat(debouncedSearchTerm))))));
|
|
33
32
|
};
|
|
34
33
|
var _default = SearchContentResults;
|
|
35
34
|
exports["default"] = _default;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"SearchContentResults.js","names":["_react","_interopRequireDefault","require","_BlazeLink","_SearchContentItems","SearchContentResults","_ref","results","debouncedSearchTerm","onClick","
|
|
1
|
+
{"version":3,"file":"SearchContentResults.js","names":["_react","_interopRequireDefault","require","_BlazeLink","_SearchContentItems","SearchContentResults","_ref","results","debouncedSearchTerm","onClick","hasResults","length","createElement","className","href","concat","_default","exports"],"sources":["../../../src/components/SearchContent/SearchContentResults.js"],"sourcesContent":["import React from 'react';\nimport BlazeLink from '../BlazeLink';\nimport SearchContentItems from './SearchContentItems';\n\nconst SearchContentResults = ({ results, debouncedSearchTerm, onClick }) => {\n if (!debouncedSearchTerm) return null;\n const hasResults = results.length > 0;\n return (\n <div className=\"search-content--results__wrapper\">\n <div className=\"search-content--results__wrapper--message\">\n <div className=\"search-content--results__content\">\n {hasResults ? (\n <SearchContentItems results={results} onClick={onClick} />\n ) : (\n <div className=\"search-content--results__message\">\n <BlazeLink href={`/search?search_term=${debouncedSearchTerm}`}>\n {`Search all results for: ${debouncedSearchTerm}`}\n </BlazeLink>\n </div>\n )}\n </div>\n </div>\n </div>\n );\n};\n\nexport default SearchContentResults;\n"],"mappings":";;;;;;;;AAAA,IAAAA,MAAA,GAAAC,sBAAA,CAAAC,OAAA;AACA,IAAAC,UAAA,GAAAF,sBAAA,CAAAC,OAAA;AACA,IAAAE,mBAAA,GAAAH,sBAAA,CAAAC,OAAA;AAEA,IAAMG,oBAAoB,GAAG,SAAvBA,oBAAoBA,CAAAC,IAAA,EAAkD;EAAA,IAA5CC,OAAO,GAAAD,IAAA,CAAPC,OAAO;IAAEC,mBAAmB,GAAAF,IAAA,CAAnBE,mBAAmB;IAAEC,OAAO,GAAAH,IAAA,CAAPG,OAAO;EACnE,IAAI,CAACD,mBAAmB,EAAE,OAAO,IAAI;EACrC,IAAME,UAAU,GAAGH,OAAO,CAACI,MAAM,GAAG,CAAC;EACrC,oBACEX,MAAA,YAAAY,aAAA;IAAKC,SAAS,EAAC;EAAkC,gBAC/Cb,MAAA,YAAAY,aAAA;IAAKC,SAAS,EAAC;EAA2C,gBACxDb,MAAA,YAAAY,aAAA;IAAKC,SAAS,EAAC;EAAkC,GAC9CH,UAAU,gBACTV,MAAA,YAAAY,aAAA,CAACR,mBAAA,WAAkB;IAACG,OAAO,EAAEA,OAAQ;IAACE,OAAO,EAAEA;EAAQ,CAAE,CAAC,gBAE1DT,MAAA,YAAAY,aAAA;IAAKC,SAAS,EAAC;EAAkC,gBAC/Cb,MAAA,YAAAY,aAAA,CAACT,UAAA,WAAS;IAACW,IAAI,yBAAAC,MAAA,CAAyBP,mBAAmB;EAAG,8BAAAO,MAAA,CAChCP,mBAAmB,CACtC,CACR,CAEJ,CACF,CACF,CAAC;AAEV,CAAC;AAAC,IAAAQ,QAAA,GAEaX,oBAAoB;AAAAY,OAAA,cAAAD,QAAA"}
|
|
@@ -7,27 +7,19 @@ Object.defineProperty(exports, "__esModule", {
|
|
|
7
7
|
});
|
|
8
8
|
exports["default"] = void 0;
|
|
9
9
|
var _react = _interopRequireDefault(require("react"));
|
|
10
|
+
var _constants = require("./constants");
|
|
10
11
|
var SearchContentToggleIcon = function SearchContentToggleIcon(_ref) {
|
|
11
|
-
var
|
|
12
|
-
|
|
13
|
-
if (results && results.length > 0) {
|
|
14
|
-
return /*#__PURE__*/_react["default"].createElement("svg", {
|
|
15
|
-
className: "search-content--expanded__icon",
|
|
16
|
-
viewBox: "0 0 20 20",
|
|
17
|
-
onClick: onClear
|
|
18
|
-
}, /*#__PURE__*/_react["default"].createElement("path", {
|
|
19
|
-
fillRule: "evenodd",
|
|
20
|
-
d: "M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z",
|
|
21
|
-
clipRule: "evenodd"
|
|
22
|
-
}));
|
|
23
|
-
}
|
|
12
|
+
var onClick = _ref.onClick,
|
|
13
|
+
useCloseIcon = _ref.useCloseIcon;
|
|
24
14
|
return /*#__PURE__*/_react["default"].createElement("svg", {
|
|
25
15
|
className: "search-content--expanded__icon",
|
|
26
|
-
viewBox: "0 0 20 20"
|
|
16
|
+
viewBox: "0 0 20 20",
|
|
17
|
+
onClick: onClick,
|
|
18
|
+
"data-testid": useCloseIcon ? 'search-content-icon-close' : 'search-content-icon'
|
|
27
19
|
}, /*#__PURE__*/_react["default"].createElement("path", {
|
|
28
20
|
fillRule: "evenodd",
|
|
29
|
-
|
|
30
|
-
|
|
21
|
+
clipRule: "evenodd",
|
|
22
|
+
d: useCloseIcon ? _constants.CLOSE_ICON : _constants.SEARCH_ICON
|
|
31
23
|
}));
|
|
32
24
|
};
|
|
33
25
|
var _default = SearchContentToggleIcon;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"SearchContentToggleIcon.js","names":["_react","_interopRequireDefault","require","
|
|
1
|
+
{"version":3,"file":"SearchContentToggleIcon.js","names":["_react","_interopRequireDefault","require","_constants","SearchContentToggleIcon","_ref","onClick","useCloseIcon","createElement","className","viewBox","fillRule","clipRule","d","CLOSE_ICON","SEARCH_ICON","_default","exports"],"sources":["../../../src/components/SearchContent/SearchContentToggleIcon.js"],"sourcesContent":["import React from 'react';\nimport { CLOSE_ICON, SEARCH_ICON } from './constants';\n\nconst SearchContentToggleIcon = ({ onClick, useCloseIcon }) => (\n <svg\n className=\"search-content--expanded__icon\"\n viewBox=\"0 0 20 20\"\n onClick={onClick}\n data-testid={useCloseIcon ? 'search-content-icon-close' : 'search-content-icon'}>\n <path fillRule=\"evenodd\" clipRule=\"evenodd\" d={useCloseIcon ? CLOSE_ICON : SEARCH_ICON} />\n </svg>\n);\n\nexport default SearchContentToggleIcon;\n"],"mappings":";;;;;;;;AAAA,IAAAA,MAAA,GAAAC,sBAAA,CAAAC,OAAA;AACA,IAAAC,UAAA,GAAAD,OAAA;AAEA,IAAME,uBAAuB,GAAG,SAA1BA,uBAAuBA,CAAAC,IAAA;EAAA,IAAMC,OAAO,GAAAD,IAAA,CAAPC,OAAO;IAAEC,YAAY,GAAAF,IAAA,CAAZE,YAAY;EAAA,oBACtDP,MAAA,YAAAQ,aAAA;IACEC,SAAS,EAAC,gCAAgC;IAC1CC,OAAO,EAAC,WAAW;IACnBJ,OAAO,EAAEA,OAAQ;IACjB,eAAaC,YAAY,GAAG,2BAA2B,GAAG;EAAsB,gBAChFP,MAAA,YAAAQ,aAAA;IAAMG,QAAQ,EAAC,SAAS;IAACC,QAAQ,EAAC,SAAS;IAACC,CAAC,EAAEN,YAAY,GAAGO,qBAAU,GAAGC;EAAY,CAAE,CACtF,CAAC;AAAA,CACP;AAAC,IAAAC,QAAA,GAEaZ,uBAAuB;AAAAa,OAAA,cAAAD,QAAA"}
|
|
@@ -0,0 +1,12 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
|
|
3
|
+
require("core-js/modules/es.object.define-property.js");
|
|
4
|
+
Object.defineProperty(exports, "__esModule", {
|
|
5
|
+
value: true
|
|
6
|
+
});
|
|
7
|
+
exports.SEARCH_ICON = exports.CLOSE_ICON = void 0;
|
|
8
|
+
var SEARCH_ICON = 'M8 4a4 4 0 100 8 4 4 0 000-8zM2 8a6 6 0 1110.89 3.476l4.817 4.817a1 1 0 01-1.414 1.414l-4.816-4.816A6 6 0 012 8z';
|
|
9
|
+
exports.SEARCH_ICON = SEARCH_ICON;
|
|
10
|
+
var CLOSE_ICON = 'M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z';
|
|
11
|
+
exports.CLOSE_ICON = CLOSE_ICON;
|
|
12
|
+
//# sourceMappingURL=constants.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"constants.js","names":["SEARCH_ICON","exports","CLOSE_ICON"],"sources":["../../../src/components/SearchContent/constants.js"],"sourcesContent":["const SEARCH_ICON =\n 'M8 4a4 4 0 100 8 4 4 0 000-8zM2 8a6 6 0 1110.89 3.476l4.817 4.817a1 1 0 01-1.414 1.414l-4.816-4.816A6 6 0 012 8z';\nconst CLOSE_ICON =\n 'M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z';\n\nexport { SEARCH_ICON, CLOSE_ICON };\n"],"mappings":";;;;;;;AAAA,IAAMA,WAAW,GACf,kHAAkH;AAACC,OAAA,CAAAD,WAAA,GAAAA,WAAA;AACrH,IAAME,UAAU,GACd,oMAAoM;AAACD,OAAA,CAAAC,UAAA,GAAAA,UAAA"}
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import React, { useState, useEffect } from 'react';
|
|
1
|
+
import React, { useState, useEffect, useRef } from 'react';
|
|
2
2
|
import PropTypes from 'prop-types';
|
|
3
3
|
import { useRouter } from 'next/router';
|
|
4
4
|
import { useDebounceSearch } from '@blaze-cms/plugin-search-ui';
|
|
@@ -6,7 +6,6 @@ import SearchContentResults from './SearchContentResults';
|
|
|
6
6
|
import SearchContentToggleIcon from './SearchContentToggleIcon';
|
|
7
7
|
const SearchContent = ({
|
|
8
8
|
entities,
|
|
9
|
-
searchInputAlignment,
|
|
10
9
|
searchInputWrapperMobile,
|
|
11
10
|
searchInputWrapperDesktop,
|
|
12
11
|
isMobile,
|
|
@@ -14,7 +13,9 @@ const SearchContent = ({
|
|
|
14
13
|
modifier,
|
|
15
14
|
collapsedSearch
|
|
16
15
|
}) => {
|
|
16
|
+
const searchContentRef = useRef(null);
|
|
17
17
|
const [collapsed, setCollapsed] = useState(collapsedSearch);
|
|
18
|
+
const [showResults, setShowResults] = useState(false);
|
|
18
19
|
const router = useRouter();
|
|
19
20
|
const {
|
|
20
21
|
results,
|
|
@@ -27,14 +28,33 @@ const SearchContent = ({
|
|
|
27
28
|
resultKeys: 'id, name, image { url }, url'
|
|
28
29
|
});
|
|
29
30
|
useEffect(() => {
|
|
30
|
-
const handleRouteChange = () =>
|
|
31
|
+
const handleRouteChange = () => {
|
|
32
|
+
setSearchTerm('');
|
|
33
|
+
setShowResults(false);
|
|
34
|
+
if (collapsedSearch) setCollapsed(true);
|
|
35
|
+
};
|
|
31
36
|
router.events.on('routeChangeStart', handleRouteChange);
|
|
32
37
|
return () => {
|
|
33
38
|
router.events.off('routeChangeStart', handleRouteChange);
|
|
34
39
|
};
|
|
35
|
-
}, [router.events, setSearchTerm]);
|
|
40
|
+
}, [collapsedSearch, router.events, setSearchTerm]);
|
|
41
|
+
useEffect(() => {
|
|
42
|
+
const handleClickOutside = event => {
|
|
43
|
+
if (searchContentRef.current && !searchContentRef.current.contains(event.target)) {
|
|
44
|
+
setShowResults(false);
|
|
45
|
+
if (collapsedSearch) {
|
|
46
|
+
setCollapsed(true);
|
|
47
|
+
setSearchTerm('');
|
|
48
|
+
}
|
|
49
|
+
}
|
|
50
|
+
};
|
|
51
|
+
document.addEventListener('click', handleClickOutside);
|
|
52
|
+
return () => {
|
|
53
|
+
document.removeEventListener('click', handleClickOutside);
|
|
54
|
+
};
|
|
55
|
+
}, [collapsedSearch, setSearchTerm]);
|
|
36
56
|
const responsiveClasses = isMobile ? searchInputWrapperMobile : searchInputWrapperDesktop;
|
|
37
|
-
const
|
|
57
|
+
const handleNavigation = (e, url) => {
|
|
38
58
|
e.preventDefault();
|
|
39
59
|
router.push(url);
|
|
40
60
|
};
|
|
@@ -43,63 +63,48 @@ const SearchContent = ({
|
|
|
43
63
|
router.push(`/search?search_term=${e.target.value}`);
|
|
44
64
|
}
|
|
45
65
|
};
|
|
46
|
-
const
|
|
47
|
-
|
|
48
|
-
if (
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
66
|
+
const handleIconClick = () => {
|
|
67
|
+
const isCloseIcon = collapsedSearch ? !collapsed : debouncedSearchTerm;
|
|
68
|
+
if (collapsedSearch) setCollapsed(!collapsed);
|
|
69
|
+
if (isCloseIcon) {
|
|
70
|
+
setSearchTerm('');
|
|
71
|
+
setShowResults(false);
|
|
72
|
+
} else {
|
|
73
|
+
setShowResults(true);
|
|
74
|
+
}
|
|
52
75
|
};
|
|
53
76
|
const className = ['search-content', modifier, responsiveClasses].filter(Boolean).join(' ');
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
}, /*#__PURE__*/React.createElement("label", {
|
|
59
|
-
className: "search-content--collapse__label"
|
|
60
|
-
}, /*#__PURE__*/React.createElement("span", {
|
|
61
|
-
className: "search-content--collapse__icon_wrapper"
|
|
62
|
-
}, /*#__PURE__*/React.createElement("svg", {
|
|
63
|
-
className: "search-content--collapse__icon",
|
|
64
|
-
viewBox: "0 0 20 20"
|
|
65
|
-
}, /*#__PURE__*/React.createElement("path", {
|
|
66
|
-
fillRule: "evenodd",
|
|
67
|
-
d: "M8 4a4 4 0 100 8 4 4 0 000-8zM2 8a6 6 0 1110.89 3.476l4.817 4.817a1 1 0 01-1.414 1.414l-4.816-4.816A6 6 0 012 8z",
|
|
68
|
-
clipRule: "evenodd"
|
|
69
|
-
}))), /*#__PURE__*/React.createElement("input", {
|
|
70
|
-
onFocus: () => setCollapsed(false),
|
|
71
|
-
onChange: e => setSearchTerm(e.target.value),
|
|
72
|
-
type: "text",
|
|
73
|
-
name: "search",
|
|
74
|
-
className: "search-content--collapse__input"
|
|
75
|
-
})))) : /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("div", {
|
|
76
|
-
className: className
|
|
77
|
+
const searchModifier = collapsed ? 'search-content--collapse' : 'search-content--expanded';
|
|
78
|
+
return /*#__PURE__*/React.createElement("div", {
|
|
79
|
+
className: className,
|
|
80
|
+
ref: searchContentRef
|
|
77
81
|
}, /*#__PURE__*/React.createElement("div", {
|
|
78
|
-
className:
|
|
82
|
+
className: `${searchModifier}__wrapper`
|
|
79
83
|
}, /*#__PURE__*/React.createElement("label", {
|
|
80
|
-
className:
|
|
84
|
+
className: `${searchModifier}__label`
|
|
81
85
|
}, /*#__PURE__*/React.createElement("span", {
|
|
82
|
-
className:
|
|
86
|
+
className: `${searchModifier}__icon_wrapper`
|
|
83
87
|
}, /*#__PURE__*/React.createElement(SearchContentToggleIcon, {
|
|
84
|
-
|
|
85
|
-
|
|
86
|
-
|
|
88
|
+
searchTerm: debouncedSearchTerm,
|
|
89
|
+
onClick: handleIconClick,
|
|
90
|
+
useCloseIcon: collapsedSearch ? !collapsed : debouncedSearchTerm
|
|
91
|
+
})), !collapsed && /*#__PURE__*/React.createElement("input", {
|
|
92
|
+
className: `${searchModifier}__input`,
|
|
87
93
|
type: "text",
|
|
88
94
|
name: "search",
|
|
89
|
-
onChange: e => setSearchTerm(e.target.value),
|
|
90
|
-
onKeyPress: handleKeyPress,
|
|
91
|
-
className: "search-content--expanded__input",
|
|
92
95
|
placeholder: placeholder,
|
|
93
96
|
value: searchTerm,
|
|
94
|
-
|
|
95
|
-
|
|
97
|
+
onChange: e => setSearchTerm(e.target.value),
|
|
98
|
+
onKeyPress: handleKeyPress,
|
|
99
|
+
onFocus: () => setShowResults(true),
|
|
100
|
+
"data-testid": "search-content-input"
|
|
101
|
+
}))), showResults && /*#__PURE__*/React.createElement(SearchContentResults, {
|
|
96
102
|
results: results,
|
|
97
103
|
debouncedSearchTerm: debouncedSearchTerm,
|
|
98
|
-
handleClick:
|
|
99
|
-
}))
|
|
104
|
+
handleClick: handleNavigation
|
|
105
|
+
}));
|
|
100
106
|
};
|
|
101
107
|
SearchContent.propTypes = {
|
|
102
|
-
searchInputAlignment: PropTypes.string,
|
|
103
108
|
searchInputWrapperMobile: PropTypes.string,
|
|
104
109
|
searchInputWrapperDesktop: PropTypes.string,
|
|
105
110
|
placeholder: PropTypes.string,
|
|
@@ -109,7 +114,6 @@ SearchContent.propTypes = {
|
|
|
109
114
|
collapsedSearch: PropTypes.bool
|
|
110
115
|
};
|
|
111
116
|
SearchContent.defaultProps = {
|
|
112
|
-
searchInputAlignment: '',
|
|
113
117
|
searchInputWrapperMobile: '',
|
|
114
118
|
searchInputWrapperDesktop: '',
|
|
115
119
|
placeholder: '',
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"SearchContent.js","names":["React","useState","useEffect","PropTypes","useRouter","useDebounceSearch","SearchContentResults","SearchContentToggleIcon","SearchContent","entities","
|
|
1
|
+
{"version":3,"file":"SearchContent.js","names":["React","useState","useEffect","useRef","PropTypes","useRouter","useDebounceSearch","SearchContentResults","SearchContentToggleIcon","SearchContent","entities","searchInputWrapperMobile","searchInputWrapperDesktop","isMobile","placeholder","modifier","collapsedSearch","searchContentRef","collapsed","setCollapsed","showResults","setShowResults","router","results","searchTerm","setSearchTerm","debouncedSearchTerm","initialSearchTerm","resultKeys","handleRouteChange","events","on","off","handleClickOutside","event","current","contains","target","document","addEventListener","removeEventListener","responsiveClasses","handleNavigation","e","url","preventDefault","push","handleKeyPress","key","value","handleIconClick","isCloseIcon","className","filter","Boolean","join","searchModifier","createElement","ref","onClick","useCloseIcon","type","name","onChange","onKeyPress","onFocus","handleClick","propTypes","string","bool","array","isRequired","defaultProps"],"sources":["../../../src/components/SearchContent/SearchContent.js"],"sourcesContent":["import React, { useState, useEffect, useRef } from 'react';\nimport PropTypes from 'prop-types';\nimport { useRouter } from 'next/router';\nimport { useDebounceSearch } from '@blaze-cms/plugin-search-ui';\nimport SearchContentResults from './SearchContentResults';\nimport SearchContentToggleIcon from './SearchContentToggleIcon';\n\nconst SearchContent = ({\n entities,\n searchInputWrapperMobile,\n searchInputWrapperDesktop,\n isMobile,\n placeholder,\n modifier,\n collapsedSearch\n}) => {\n const searchContentRef = useRef(null);\n const [collapsed, setCollapsed] = useState(collapsedSearch);\n const [showResults, setShowResults] = useState(false);\n const router = useRouter();\n\n const { results, searchTerm, setSearchTerm, debouncedSearchTerm } = useDebounceSearch({\n entities,\n initialSearchTerm: '',\n resultKeys: 'id, name, image { url }, url'\n });\n\n useEffect(\n () => {\n const handleRouteChange = () => {\n setSearchTerm('');\n setShowResults(false);\n if (collapsedSearch) setCollapsed(true);\n };\n router.events.on('routeChangeStart', handleRouteChange);\n\n return () => {\n router.events.off('routeChangeStart', handleRouteChange);\n };\n },\n [collapsedSearch, router.events, setSearchTerm]\n );\n\n useEffect(\n () => {\n const handleClickOutside = event => {\n if (searchContentRef.current && !searchContentRef.current.contains(event.target)) {\n setShowResults(false);\n if (collapsedSearch) {\n setCollapsed(true);\n setSearchTerm('');\n }\n }\n };\n\n document.addEventListener('click', handleClickOutside);\n\n return () => {\n document.removeEventListener('click', handleClickOutside);\n };\n },\n [collapsedSearch, setSearchTerm]\n );\n\n const responsiveClasses = isMobile ? searchInputWrapperMobile : searchInputWrapperDesktop;\n\n const handleNavigation = (e, url) => {\n e.preventDefault();\n router.push(url);\n };\n\n const handleKeyPress = e => {\n if (e.key === 'Enter' && e.target.value !== '') {\n router.push(`/search?search_term=${e.target.value}`);\n }\n };\n\n const handleIconClick = () => {\n const isCloseIcon = collapsedSearch ? !collapsed : debouncedSearchTerm;\n\n if (collapsedSearch) setCollapsed(!collapsed);\n\n if (isCloseIcon) {\n setSearchTerm('');\n setShowResults(false);\n } else {\n setShowResults(true);\n }\n };\n\n const className = ['search-content', modifier, responsiveClasses].filter(Boolean).join(' ');\n const searchModifier = collapsed ? 'search-content--collapse' : 'search-content--expanded';\n\n return (\n <div className={className} ref={searchContentRef}>\n <div className={`${searchModifier}__wrapper`}>\n <label className={`${searchModifier}__label`}>\n <span className={`${searchModifier}__icon_wrapper`}>\n <SearchContentToggleIcon\n searchTerm={debouncedSearchTerm}\n onClick={handleIconClick}\n useCloseIcon={collapsedSearch ? !collapsed : debouncedSearchTerm}\n />\n </span>\n {!collapsed && (\n <input\n className={`${searchModifier}__input`}\n type=\"text\"\n name=\"search\"\n placeholder={placeholder}\n value={searchTerm}\n onChange={e => setSearchTerm(e.target.value)}\n onKeyPress={handleKeyPress}\n onFocus={() => setShowResults(true)}\n data-testid=\"search-content-input\"\n />\n )}\n </label>\n </div>\n {showResults && (\n <SearchContentResults\n results={results}\n debouncedSearchTerm={debouncedSearchTerm}\n handleClick={handleNavigation}\n />\n )}\n </div>\n );\n};\n\nSearchContent.propTypes = {\n searchInputWrapperMobile: PropTypes.string,\n searchInputWrapperDesktop: PropTypes.string,\n placeholder: PropTypes.string,\n isMobile: PropTypes.bool,\n entities: PropTypes.array.isRequired,\n modifier: PropTypes.string,\n collapsedSearch: PropTypes.bool\n};\n\nSearchContent.defaultProps = {\n searchInputWrapperMobile: '',\n searchInputWrapperDesktop: '',\n placeholder: '',\n isMobile: false,\n modifier: '',\n collapsedSearch: false\n};\n\nexport default SearchContent;\n"],"mappings":"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"}
|
|
@@ -6,23 +6,22 @@ const SearchContentResults = ({
|
|
|
6
6
|
debouncedSearchTerm,
|
|
7
7
|
onClick
|
|
8
8
|
}) => {
|
|
9
|
-
if (debouncedSearchTerm
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
}
|
|
24
|
-
}
|
|
25
|
-
return null;
|
|
9
|
+
if (!debouncedSearchTerm) return null;
|
|
10
|
+
const hasResults = results.length > 0;
|
|
11
|
+
return /*#__PURE__*/React.createElement("div", {
|
|
12
|
+
className: "search-content--results__wrapper"
|
|
13
|
+
}, /*#__PURE__*/React.createElement("div", {
|
|
14
|
+
className: "search-content--results__wrapper--message"
|
|
15
|
+
}, /*#__PURE__*/React.createElement("div", {
|
|
16
|
+
className: "search-content--results__content"
|
|
17
|
+
}, hasResults ? /*#__PURE__*/React.createElement(SearchContentItems, {
|
|
18
|
+
results: results,
|
|
19
|
+
onClick: onClick
|
|
20
|
+
}) : /*#__PURE__*/React.createElement("div", {
|
|
21
|
+
className: "search-content--results__message"
|
|
22
|
+
}, /*#__PURE__*/React.createElement(BlazeLink, {
|
|
23
|
+
href: `/search?search_term=${debouncedSearchTerm}`
|
|
24
|
+
}, `Search all results for: ${debouncedSearchTerm}`)))));
|
|
26
25
|
};
|
|
27
26
|
export default SearchContentResults;
|
|
28
27
|
//# sourceMappingURL=SearchContentResults.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"SearchContentResults.js","names":["React","BlazeLink","SearchContentItems","SearchContentResults","results","debouncedSearchTerm","onClick","
|
|
1
|
+
{"version":3,"file":"SearchContentResults.js","names":["React","BlazeLink","SearchContentItems","SearchContentResults","results","debouncedSearchTerm","onClick","hasResults","length","createElement","className","href"],"sources":["../../../src/components/SearchContent/SearchContentResults.js"],"sourcesContent":["import React from 'react';\nimport BlazeLink from '../BlazeLink';\nimport SearchContentItems from './SearchContentItems';\n\nconst SearchContentResults = ({ results, debouncedSearchTerm, onClick }) => {\n if (!debouncedSearchTerm) return null;\n const hasResults = results.length > 0;\n return (\n <div className=\"search-content--results__wrapper\">\n <div className=\"search-content--results__wrapper--message\">\n <div className=\"search-content--results__content\">\n {hasResults ? (\n <SearchContentItems results={results} onClick={onClick} />\n ) : (\n <div className=\"search-content--results__message\">\n <BlazeLink href={`/search?search_term=${debouncedSearchTerm}`}>\n {`Search all results for: ${debouncedSearchTerm}`}\n </BlazeLink>\n </div>\n )}\n </div>\n </div>\n </div>\n );\n};\n\nexport default SearchContentResults;\n"],"mappings":"AAAA,OAAOA,KAAK,MAAM,OAAO;AACzB,OAAOC,SAAS,MAAM,cAAc;AACpC,OAAOC,kBAAkB,MAAM,sBAAsB;AAErD,MAAMC,oBAAoB,GAAGA,CAAC;EAAEC,OAAO;EAAEC,mBAAmB;EAAEC;AAAQ,CAAC,KAAK;EAC1E,IAAI,CAACD,mBAAmB,EAAE,OAAO,IAAI;EACrC,MAAME,UAAU,GAAGH,OAAO,CAACI,MAAM,GAAG,CAAC;EACrC,oBACER,KAAA,CAAAS,aAAA;IAAKC,SAAS,EAAC;EAAkC,gBAC/CV,KAAA,CAAAS,aAAA;IAAKC,SAAS,EAAC;EAA2C,gBACxDV,KAAA,CAAAS,aAAA;IAAKC,SAAS,EAAC;EAAkC,GAC9CH,UAAU,gBACTP,KAAA,CAAAS,aAAA,CAACP,kBAAkB;IAACE,OAAO,EAAEA,OAAQ;IAACE,OAAO,EAAEA;EAAQ,CAAE,CAAC,gBAE1DN,KAAA,CAAAS,aAAA;IAAKC,SAAS,EAAC;EAAkC,gBAC/CV,KAAA,CAAAS,aAAA,CAACR,SAAS;IAACU,IAAI,EAAG,uBAAsBN,mBAAoB;EAAE,GAC1D,2BAA0BA,mBAAoB,EACvC,CACR,CAEJ,CACF,CACF,CAAC;AAEV,CAAC;AAED,eAAeF,oBAAoB"}
|
|
@@ -1,27 +1,17 @@
|
|
|
1
1
|
import React from 'react';
|
|
2
|
+
import { CLOSE_ICON, SEARCH_ICON } from './constants';
|
|
2
3
|
const SearchContentToggleIcon = ({
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
}) => {
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
}));
|
|
16
|
-
}
|
|
17
|
-
return /*#__PURE__*/React.createElement("svg", {
|
|
18
|
-
className: "search-content--expanded__icon",
|
|
19
|
-
viewBox: "0 0 20 20"
|
|
20
|
-
}, /*#__PURE__*/React.createElement("path", {
|
|
21
|
-
fillRule: "evenodd",
|
|
22
|
-
d: "M8 4a4 4 0 100 8 4 4 0 000-8zM2 8a6 6 0 1110.89 3.476l4.817 4.817a1 1 0 01-1.414 1.414l-4.816-4.816A6 6 0 012 8z",
|
|
23
|
-
clipRule: "evenodd"
|
|
24
|
-
}));
|
|
25
|
-
};
|
|
4
|
+
onClick,
|
|
5
|
+
useCloseIcon
|
|
6
|
+
}) => /*#__PURE__*/React.createElement("svg", {
|
|
7
|
+
className: "search-content--expanded__icon",
|
|
8
|
+
viewBox: "0 0 20 20",
|
|
9
|
+
onClick: onClick,
|
|
10
|
+
"data-testid": useCloseIcon ? 'search-content-icon-close' : 'search-content-icon'
|
|
11
|
+
}, /*#__PURE__*/React.createElement("path", {
|
|
12
|
+
fillRule: "evenodd",
|
|
13
|
+
clipRule: "evenodd",
|
|
14
|
+
d: useCloseIcon ? CLOSE_ICON : SEARCH_ICON
|
|
15
|
+
}));
|
|
26
16
|
export default SearchContentToggleIcon;
|
|
27
17
|
//# sourceMappingURL=SearchContentToggleIcon.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"SearchContentToggleIcon.js","names":["React","
|
|
1
|
+
{"version":3,"file":"SearchContentToggleIcon.js","names":["React","CLOSE_ICON","SEARCH_ICON","SearchContentToggleIcon","onClick","useCloseIcon","createElement","className","viewBox","fillRule","clipRule","d"],"sources":["../../../src/components/SearchContent/SearchContentToggleIcon.js"],"sourcesContent":["import React from 'react';\nimport { CLOSE_ICON, SEARCH_ICON } from './constants';\n\nconst SearchContentToggleIcon = ({ onClick, useCloseIcon }) => (\n <svg\n className=\"search-content--expanded__icon\"\n viewBox=\"0 0 20 20\"\n onClick={onClick}\n data-testid={useCloseIcon ? 'search-content-icon-close' : 'search-content-icon'}>\n <path fillRule=\"evenodd\" clipRule=\"evenodd\" d={useCloseIcon ? CLOSE_ICON : SEARCH_ICON} />\n </svg>\n);\n\nexport default SearchContentToggleIcon;\n"],"mappings":"AAAA,OAAOA,KAAK,MAAM,OAAO;AACzB,SAASC,UAAU,EAAEC,WAAW,QAAQ,aAAa;AAErD,MAAMC,uBAAuB,GAAGA,CAAC;EAAEC,OAAO;EAAEC;AAAa,CAAC,kBACxDL,KAAA,CAAAM,aAAA;EACEC,SAAS,EAAC,gCAAgC;EAC1CC,OAAO,EAAC,WAAW;EACnBJ,OAAO,EAAEA,OAAQ;EACjB,eAAaC,YAAY,GAAG,2BAA2B,GAAG;AAAsB,gBAChFL,KAAA,CAAAM,aAAA;EAAMG,QAAQ,EAAC,SAAS;EAACC,QAAQ,EAAC,SAAS;EAACC,CAAC,EAAEN,YAAY,GAAGJ,UAAU,GAAGC;AAAY,CAAE,CACtF,CACN;AAED,eAAeC,uBAAuB"}
|
|
@@ -0,0 +1,4 @@
|
|
|
1
|
+
const SEARCH_ICON = 'M8 4a4 4 0 100 8 4 4 0 000-8zM2 8a6 6 0 1110.89 3.476l4.817 4.817a1 1 0 01-1.414 1.414l-4.816-4.816A6 6 0 012 8z';
|
|
2
|
+
const CLOSE_ICON = 'M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z';
|
|
3
|
+
export { SEARCH_ICON, CLOSE_ICON };
|
|
4
|
+
//# sourceMappingURL=constants.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"constants.js","names":["SEARCH_ICON","CLOSE_ICON"],"sources":["../../../src/components/SearchContent/constants.js"],"sourcesContent":["const SEARCH_ICON =\n 'M8 4a4 4 0 100 8 4 4 0 000-8zM2 8a6 6 0 1110.89 3.476l4.817 4.817a1 1 0 01-1.414 1.414l-4.816-4.816A6 6 0 012 8z';\nconst CLOSE_ICON =\n 'M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z';\n\nexport { SEARCH_ICON, CLOSE_ICON };\n"],"mappings":"AAAA,MAAMA,WAAW,GACf,kHAAkH;AACpH,MAAMC,UAAU,GACd,oMAAoM;AAEtM,SAASD,WAAW,EAAEC,UAAU"}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@blaze-cms/react-page-builder",
|
|
3
|
-
"version": "0.139.0-core-styles.
|
|
3
|
+
"version": "0.139.0-core-styles.2",
|
|
4
4
|
"description": "Blaze react page builder",
|
|
5
5
|
"main": "lib/index.js",
|
|
6
6
|
"module": "lib-es/index.js",
|
|
@@ -27,7 +27,7 @@
|
|
|
27
27
|
},
|
|
28
28
|
"license": "GPL-3.0",
|
|
29
29
|
"dependencies": {
|
|
30
|
-
"@blaze-cms/core-auth-ui": "0.139.0-core-styles.
|
|
30
|
+
"@blaze-cms/core-auth-ui": "0.139.0-core-styles.2",
|
|
31
31
|
"@blaze-cms/core-errors": "0.139.0-core-styles.0",
|
|
32
32
|
"@blaze-cms/core-errors-ui": "0.139.0-core-styles.0",
|
|
33
33
|
"@blaze-cms/image-cdn-react": "0.3.0-alpha.6",
|
|
@@ -88,5 +88,6 @@
|
|
|
88
88
|
"eslintIgnore": [
|
|
89
89
|
"lib/*",
|
|
90
90
|
"lib-es/*"
|
|
91
|
-
]
|
|
91
|
+
],
|
|
92
|
+
"gitHead": "19a50e947f969314b40706f864e106223237c63a"
|
|
92
93
|
}
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import React, { useState, useEffect } from 'react';
|
|
1
|
+
import React, { useState, useEffect, useRef } from 'react';
|
|
2
2
|
import PropTypes from 'prop-types';
|
|
3
3
|
import { useRouter } from 'next/router';
|
|
4
4
|
import { useDebounceSearch } from '@blaze-cms/plugin-search-ui';
|
|
@@ -7,7 +7,6 @@ import SearchContentToggleIcon from './SearchContentToggleIcon';
|
|
|
7
7
|
|
|
8
8
|
const SearchContent = ({
|
|
9
9
|
entities,
|
|
10
|
-
searchInputAlignment,
|
|
11
10
|
searchInputWrapperMobile,
|
|
12
11
|
searchInputWrapperDesktop,
|
|
13
12
|
isMobile,
|
|
@@ -15,7 +14,9 @@ const SearchContent = ({
|
|
|
15
14
|
modifier,
|
|
16
15
|
collapsedSearch
|
|
17
16
|
}) => {
|
|
17
|
+
const searchContentRef = useRef(null);
|
|
18
18
|
const [collapsed, setCollapsed] = useState(collapsedSearch);
|
|
19
|
+
const [showResults, setShowResults] = useState(false);
|
|
19
20
|
const router = useRouter();
|
|
20
21
|
|
|
21
22
|
const { results, searchTerm, setSearchTerm, debouncedSearchTerm } = useDebounceSearch({
|
|
@@ -26,19 +27,44 @@ const SearchContent = ({
|
|
|
26
27
|
|
|
27
28
|
useEffect(
|
|
28
29
|
() => {
|
|
29
|
-
const handleRouteChange = () =>
|
|
30
|
+
const handleRouteChange = () => {
|
|
31
|
+
setSearchTerm('');
|
|
32
|
+
setShowResults(false);
|
|
33
|
+
if (collapsedSearch) setCollapsed(true);
|
|
34
|
+
};
|
|
30
35
|
router.events.on('routeChangeStart', handleRouteChange);
|
|
31
36
|
|
|
32
37
|
return () => {
|
|
33
38
|
router.events.off('routeChangeStart', handleRouteChange);
|
|
34
39
|
};
|
|
35
40
|
},
|
|
36
|
-
[router.events, setSearchTerm]
|
|
41
|
+
[collapsedSearch, router.events, setSearchTerm]
|
|
42
|
+
);
|
|
43
|
+
|
|
44
|
+
useEffect(
|
|
45
|
+
() => {
|
|
46
|
+
const handleClickOutside = event => {
|
|
47
|
+
if (searchContentRef.current && !searchContentRef.current.contains(event.target)) {
|
|
48
|
+
setShowResults(false);
|
|
49
|
+
if (collapsedSearch) {
|
|
50
|
+
setCollapsed(true);
|
|
51
|
+
setSearchTerm('');
|
|
52
|
+
}
|
|
53
|
+
}
|
|
54
|
+
};
|
|
55
|
+
|
|
56
|
+
document.addEventListener('click', handleClickOutside);
|
|
57
|
+
|
|
58
|
+
return () => {
|
|
59
|
+
document.removeEventListener('click', handleClickOutside);
|
|
60
|
+
};
|
|
61
|
+
},
|
|
62
|
+
[collapsedSearch, setSearchTerm]
|
|
37
63
|
);
|
|
38
64
|
|
|
39
65
|
const responsiveClasses = isMobile ? searchInputWrapperMobile : searchInputWrapperDesktop;
|
|
40
66
|
|
|
41
|
-
const
|
|
67
|
+
const handleNavigation = (e, url) => {
|
|
42
68
|
e.preventDefault();
|
|
43
69
|
router.push(url);
|
|
44
70
|
};
|
|
@@ -49,71 +75,60 @@ const SearchContent = ({
|
|
|
49
75
|
}
|
|
50
76
|
};
|
|
51
77
|
|
|
52
|
-
const
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
78
|
+
const handleIconClick = () => {
|
|
79
|
+
const isCloseIcon = collapsedSearch ? !collapsed : debouncedSearchTerm;
|
|
80
|
+
|
|
81
|
+
if (collapsedSearch) setCollapsed(!collapsed);
|
|
56
82
|
|
|
57
|
-
|
|
58
|
-
|
|
83
|
+
if (isCloseIcon) {
|
|
84
|
+
setSearchTerm('');
|
|
85
|
+
setShowResults(false);
|
|
86
|
+
} else {
|
|
87
|
+
setShowResults(true);
|
|
88
|
+
}
|
|
59
89
|
};
|
|
60
90
|
|
|
61
91
|
const className = ['search-content', modifier, responsiveClasses].filter(Boolean).join(' ');
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
|
|
72
|
-
|
|
73
|
-
|
|
92
|
+
const searchModifier = collapsed ? 'search-content--collapse' : 'search-content--expanded';
|
|
93
|
+
|
|
94
|
+
return (
|
|
95
|
+
<div className={className} ref={searchContentRef}>
|
|
96
|
+
<div className={`${searchModifier}__wrapper`}>
|
|
97
|
+
<label className={`${searchModifier}__label`}>
|
|
98
|
+
<span className={`${searchModifier}__icon_wrapper`}>
|
|
99
|
+
<SearchContentToggleIcon
|
|
100
|
+
searchTerm={debouncedSearchTerm}
|
|
101
|
+
onClick={handleIconClick}
|
|
102
|
+
useCloseIcon={collapsedSearch ? !collapsed : debouncedSearchTerm}
|
|
103
|
+
/>
|
|
74
104
|
</span>
|
|
75
|
-
|
|
76
|
-
onFocus={() => setCollapsed(false)}
|
|
77
|
-
onChange={e => setSearchTerm(e.target.value)}
|
|
78
|
-
type="text"
|
|
79
|
-
name="search"
|
|
80
|
-
className="search-content--collapse__input"
|
|
81
|
-
/>
|
|
82
|
-
</label>
|
|
83
|
-
</div>
|
|
84
|
-
</div>
|
|
85
|
-
) : (
|
|
86
|
-
<>
|
|
87
|
-
<div className={className}>
|
|
88
|
-
<div className="search-content--expanded__wrapper">
|
|
89
|
-
<label className="search-content--expanded__label">
|
|
90
|
-
<span className="search-content--expanded__icon_wrapper">
|
|
91
|
-
<SearchContentToggleIcon results={results} onClear={handleClearSearchResults} />
|
|
92
|
-
</span>
|
|
105
|
+
{!collapsed && (
|
|
93
106
|
<input
|
|
107
|
+
className={`${searchModifier}__input`}
|
|
94
108
|
type="text"
|
|
95
109
|
name="search"
|
|
96
|
-
onChange={e => setSearchTerm(e.target.value)}
|
|
97
|
-
onKeyPress={handleKeyPress}
|
|
98
|
-
className="search-content--expanded__input"
|
|
99
110
|
placeholder={placeholder}
|
|
100
111
|
value={searchTerm}
|
|
101
|
-
|
|
112
|
+
onChange={e => setSearchTerm(e.target.value)}
|
|
113
|
+
onKeyPress={handleKeyPress}
|
|
114
|
+
onFocus={() => setShowResults(true)}
|
|
115
|
+
data-testid="search-content-input"
|
|
102
116
|
/>
|
|
103
|
-
|
|
104
|
-
</
|
|
117
|
+
)}
|
|
118
|
+
</label>
|
|
119
|
+
</div>
|
|
120
|
+
{showResults && (
|
|
105
121
|
<SearchContentResults
|
|
106
122
|
results={results}
|
|
107
123
|
debouncedSearchTerm={debouncedSearchTerm}
|
|
108
|
-
handleClick={
|
|
124
|
+
handleClick={handleNavigation}
|
|
109
125
|
/>
|
|
110
|
-
|
|
111
|
-
|
|
126
|
+
)}
|
|
127
|
+
</div>
|
|
112
128
|
);
|
|
113
129
|
};
|
|
114
130
|
|
|
115
131
|
SearchContent.propTypes = {
|
|
116
|
-
searchInputAlignment: PropTypes.string,
|
|
117
132
|
searchInputWrapperMobile: PropTypes.string,
|
|
118
133
|
searchInputWrapperDesktop: PropTypes.string,
|
|
119
134
|
placeholder: PropTypes.string,
|
|
@@ -124,7 +139,6 @@ SearchContent.propTypes = {
|
|
|
124
139
|
};
|
|
125
140
|
|
|
126
141
|
SearchContent.defaultProps = {
|
|
127
|
-
searchInputAlignment: '',
|
|
128
142
|
searchInputWrapperMobile: '',
|
|
129
143
|
searchInputWrapperDesktop: '',
|
|
130
144
|
placeholder: '',
|
|
@@ -3,25 +3,25 @@ import BlazeLink from '../BlazeLink';
|
|
|
3
3
|
import SearchContentItems from './SearchContentItems';
|
|
4
4
|
|
|
5
5
|
const SearchContentResults = ({ results, debouncedSearchTerm, onClick }) => {
|
|
6
|
-
if (debouncedSearchTerm
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
6
|
+
if (!debouncedSearchTerm) return null;
|
|
7
|
+
const hasResults = results.length > 0;
|
|
8
|
+
return (
|
|
9
|
+
<div className="search-content--results__wrapper">
|
|
10
|
+
<div className="search-content--results__wrapper--message">
|
|
11
|
+
<div className="search-content--results__content">
|
|
12
|
+
{hasResults ? (
|
|
13
|
+
<SearchContentItems results={results} onClick={onClick} />
|
|
14
|
+
) : (
|
|
15
|
+
<div className="search-content--results__message">
|
|
16
|
+
<BlazeLink href={`/search?search_term=${debouncedSearchTerm}`}>
|
|
17
|
+
{`Search all results for: ${debouncedSearchTerm}`}
|
|
18
|
+
</BlazeLink>
|
|
19
|
+
</div>
|
|
20
|
+
)}
|
|
20
21
|
</div>
|
|
21
22
|
</div>
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
return null;
|
|
23
|
+
</div>
|
|
24
|
+
);
|
|
25
25
|
};
|
|
26
26
|
|
|
27
27
|
export default SearchContentResults;
|
|
@@ -1,27 +1,14 @@
|
|
|
1
1
|
import React from 'react';
|
|
2
|
+
import { CLOSE_ICON, SEARCH_ICON } from './constants';
|
|
2
3
|
|
|
3
|
-
const SearchContentToggleIcon = ({
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
</svg>
|
|
13
|
-
);
|
|
14
|
-
}
|
|
15
|
-
|
|
16
|
-
return (
|
|
17
|
-
<svg className="search-content--expanded__icon" viewBox="0 0 20 20">
|
|
18
|
-
<path
|
|
19
|
-
fillRule="evenodd"
|
|
20
|
-
d="M8 4a4 4 0 100 8 4 4 0 000-8zM2 8a6 6 0 1110.89 3.476l4.817 4.817a1 1 0 01-1.414 1.414l-4.816-4.816A6 6 0 012 8z"
|
|
21
|
-
clipRule="evenodd"
|
|
22
|
-
/>
|
|
23
|
-
</svg>
|
|
24
|
-
);
|
|
25
|
-
};
|
|
4
|
+
const SearchContentToggleIcon = ({ onClick, useCloseIcon }) => (
|
|
5
|
+
<svg
|
|
6
|
+
className="search-content--expanded__icon"
|
|
7
|
+
viewBox="0 0 20 20"
|
|
8
|
+
onClick={onClick}
|
|
9
|
+
data-testid={useCloseIcon ? 'search-content-icon-close' : 'search-content-icon'}>
|
|
10
|
+
<path fillRule="evenodd" clipRule="evenodd" d={useCloseIcon ? CLOSE_ICON : SEARCH_ICON} />
|
|
11
|
+
</svg>
|
|
12
|
+
);
|
|
26
13
|
|
|
27
14
|
export default SearchContentToggleIcon;
|
|
@@ -0,0 +1,6 @@
|
|
|
1
|
+
const SEARCH_ICON =
|
|
2
|
+
'M8 4a4 4 0 100 8 4 4 0 000-8zM2 8a6 6 0 1110.89 3.476l4.817 4.817a1 1 0 01-1.414 1.414l-4.816-4.816A6 6 0 012 8z';
|
|
3
|
+
const CLOSE_ICON =
|
|
4
|
+
'M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z';
|
|
5
|
+
|
|
6
|
+
export { SEARCH_ICON, CLOSE_ICON };
|
|
@@ -4,7 +4,7 @@
|
|
|
4
4
|
import React from 'react';
|
|
5
5
|
import '@testing-library/jest-dom/extend-expect';
|
|
6
6
|
import { MockedProvider } from '@apollo/client/testing';
|
|
7
|
-
import { render } from '@testing-library/react';
|
|
7
|
+
import { render, fireEvent, waitFor } from '@testing-library/react';
|
|
8
8
|
import SearchContent from '../../../../../src/components/SearchContent';
|
|
9
9
|
|
|
10
10
|
jest.mock('@apollo/client', () => ({
|
|
@@ -13,20 +13,45 @@ jest.mock('@apollo/client', () => ({
|
|
|
13
13
|
}));
|
|
14
14
|
|
|
15
15
|
jest.mock('next/router', () => ({
|
|
16
|
-
useRouter: jest.fn(() => ({ asPath: 'test-url' }))
|
|
16
|
+
useRouter: jest.fn(() => ({ asPath: 'test-url', events: { on: jest.fn(), off: jest.fn() } }))
|
|
17
17
|
}));
|
|
18
18
|
|
|
19
|
-
|
|
20
|
-
jest.fn(() => <div>Mocked component</div>)
|
|
21
|
-
);
|
|
19
|
+
const SEARCH_INPUT_TEST_ID = 'search-content-input';
|
|
22
20
|
|
|
23
21
|
describe('SearchContent', () => {
|
|
22
|
+
const entities = [];
|
|
23
|
+
|
|
24
24
|
it('should match snapshot', async () => {
|
|
25
|
-
const { asFragment } = render(
|
|
25
|
+
const { asFragment, getByTestId, queryByTestId } = render(
|
|
26
|
+
<MockedProvider mocks={[]} addTypename={false}>
|
|
27
|
+
<SearchContent entities={entities} />
|
|
28
|
+
</MockedProvider>
|
|
29
|
+
);
|
|
30
|
+
expect(asFragment()).toMatchSnapshot();
|
|
31
|
+
const searchInput = getByTestId(SEARCH_INPUT_TEST_ID);
|
|
32
|
+
fireEvent.change(searchInput, { target: { value: 'search' } });
|
|
33
|
+
await waitFor(() => expect(queryByTestId('search-content-icon-close')).toBeTruthy());
|
|
34
|
+
const closeIcon = getByTestId('search-content-icon-close');
|
|
35
|
+
expect(closeIcon).toBeTruthy();
|
|
36
|
+
fireEvent.click(closeIcon);
|
|
37
|
+
expect(searchInput.value).toEqual('');
|
|
38
|
+
await waitFor(() => expect(queryByTestId('search-content-icon')).toBeTruthy());
|
|
39
|
+
});
|
|
40
|
+
|
|
41
|
+
it('should should be collapsed when collapsedSearch=true', async () => {
|
|
42
|
+
const { asFragment, getByTestId, queryByTestId } = render(
|
|
26
43
|
<MockedProvider mocks={[]} addTypename={false}>
|
|
27
|
-
<SearchContent />
|
|
44
|
+
<SearchContent collapsedSearch entities={entities} />
|
|
28
45
|
</MockedProvider>
|
|
29
46
|
);
|
|
47
|
+
expect(queryByTestId(SEARCH_INPUT_TEST_ID)).toBeNull();
|
|
30
48
|
expect(asFragment()).toMatchSnapshot();
|
|
49
|
+
|
|
50
|
+
const searchIcon = getByTestId('search-content-icon');
|
|
51
|
+
fireEvent.click(searchIcon);
|
|
52
|
+
await waitFor(() => expect(queryByTestId(SEARCH_INPUT_TEST_ID)).toBeTruthy());
|
|
53
|
+
const closeIcon = getByTestId('search-content-icon-close');
|
|
54
|
+
fireEvent.click(closeIcon);
|
|
55
|
+
await waitFor(() => expect(queryByTestId(SEARCH_INPUT_TEST_ID)).toBeNull());
|
|
31
56
|
});
|
|
32
57
|
});
|
|
@@ -2,8 +2,72 @@
|
|
|
2
2
|
|
|
3
3
|
exports[`SearchContent should match snapshot 1`] = `
|
|
4
4
|
<DocumentFragment>
|
|
5
|
-
<div
|
|
6
|
-
|
|
5
|
+
<div
|
|
6
|
+
class="search-content"
|
|
7
|
+
>
|
|
8
|
+
<div
|
|
9
|
+
class="search-content--expanded__wrapper"
|
|
10
|
+
>
|
|
11
|
+
<label
|
|
12
|
+
class="search-content--expanded__label"
|
|
13
|
+
>
|
|
14
|
+
<span
|
|
15
|
+
class="search-content--expanded__icon_wrapper"
|
|
16
|
+
>
|
|
17
|
+
<svg
|
|
18
|
+
class="search-content--expanded__icon"
|
|
19
|
+
data-testid="search-content-icon"
|
|
20
|
+
viewBox="0 0 20 20"
|
|
21
|
+
>
|
|
22
|
+
<path
|
|
23
|
+
clip-rule="evenodd"
|
|
24
|
+
d="M8 4a4 4 0 100 8 4 4 0 000-8zM2 8a6 6 0 1110.89 3.476l4.817 4.817a1 1 0 01-1.414 1.414l-4.816-4.816A6 6 0 012 8z"
|
|
25
|
+
fill-rule="evenodd"
|
|
26
|
+
/>
|
|
27
|
+
</svg>
|
|
28
|
+
</span>
|
|
29
|
+
<input
|
|
30
|
+
class="search-content--expanded__input"
|
|
31
|
+
data-testid="search-content-input"
|
|
32
|
+
name="search"
|
|
33
|
+
placeholder=""
|
|
34
|
+
type="text"
|
|
35
|
+
value=""
|
|
36
|
+
/>
|
|
37
|
+
</label>
|
|
38
|
+
</div>
|
|
39
|
+
</div>
|
|
40
|
+
</DocumentFragment>
|
|
41
|
+
`;
|
|
42
|
+
|
|
43
|
+
exports[`SearchContent should should be collapsed when collapsedSearch=true 1`] = `
|
|
44
|
+
<DocumentFragment>
|
|
45
|
+
<div
|
|
46
|
+
class="search-content"
|
|
47
|
+
>
|
|
48
|
+
<div
|
|
49
|
+
class="search-content--collapse__wrapper"
|
|
50
|
+
>
|
|
51
|
+
<label
|
|
52
|
+
class="search-content--collapse__label"
|
|
53
|
+
>
|
|
54
|
+
<span
|
|
55
|
+
class="search-content--collapse__icon_wrapper"
|
|
56
|
+
>
|
|
57
|
+
<svg
|
|
58
|
+
class="search-content--expanded__icon"
|
|
59
|
+
data-testid="search-content-icon"
|
|
60
|
+
viewBox="0 0 20 20"
|
|
61
|
+
>
|
|
62
|
+
<path
|
|
63
|
+
clip-rule="evenodd"
|
|
64
|
+
d="M8 4a4 4 0 100 8 4 4 0 000-8zM2 8a6 6 0 1110.89 3.476l4.817 4.817a1 1 0 01-1.414 1.414l-4.816-4.816A6 6 0 012 8z"
|
|
65
|
+
fill-rule="evenodd"
|
|
66
|
+
/>
|
|
67
|
+
</svg>
|
|
68
|
+
</span>
|
|
69
|
+
</label>
|
|
70
|
+
</div>
|
|
7
71
|
</div>
|
|
8
72
|
</DocumentFragment>
|
|
9
73
|
`;
|