@blaze-cms/react-page-builder 0.124.0-alpha.22 → 0.124.0-alpha.23
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/lib/components/SearchContent/SearchContent.js +10 -10
- package/lib/components/SearchContent/SearchContent.js.map +1 -1
- package/lib/components/SearchContent/SearchContentToggleIcon.js +38 -0
- package/lib/components/SearchContent/SearchContentToggleIcon.js.map +1 -0
- package/lib-es/components/SearchContent/SearchContent.js +9 -10
- package/lib-es/components/SearchContent/SearchContent.js.map +1 -1
- package/lib-es/components/SearchContent/SearchContentToggleIcon.js +28 -0
- package/lib-es/components/SearchContent/SearchContentToggleIcon.js.map +1 -0
- package/package.json +2 -2
- package/src/components/SearchContent/SearchContent.js +7 -10
- package/src/components/SearchContent/SearchContentToggleIcon.js +25 -0
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.124.0-alpha.23](https://byte9/thebyte9/blaze/compare/v0.124.0-alpha.22...v0.124.0-alpha.23) (2022-05-24)
|
|
7
|
+
|
|
8
|
+
**Note:** Version bump only for package @blaze-cms/react-page-builder
|
|
9
|
+
|
|
10
|
+
|
|
11
|
+
|
|
12
|
+
|
|
13
|
+
|
|
6
14
|
# [0.124.0-alpha.22](https://byte9/thebyte9/blaze/compare/v0.124.0-alpha.21...v0.124.0-alpha.22) (2022-05-24)
|
|
7
15
|
|
|
8
16
|
**Note:** Version bump only for package @blaze-cms/react-page-builder
|
|
@@ -35,6 +35,8 @@ var _pluginSearchUi = require("@blaze-cms/plugin-search-ui");
|
|
|
35
35
|
|
|
36
36
|
var _SearchContentResults = _interopRequireDefault(require("./SearchContentResults"));
|
|
37
37
|
|
|
38
|
+
var _SearchContentToggleIcon = _interopRequireDefault(require("./SearchContentToggleIcon"));
|
|
39
|
+
|
|
38
40
|
function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
|
|
39
41
|
|
|
40
42
|
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; }
|
|
@@ -60,12 +62,10 @@ var SearchContent = function SearchContent(_ref) {
|
|
|
60
62
|
initialSearchTerm: '',
|
|
61
63
|
resultKeys: 'id, name, image { url }, url'
|
|
62
64
|
}),
|
|
63
|
-
loading = _useDebounceSearch.loading,
|
|
64
65
|
results = _useDebounceSearch.results,
|
|
65
66
|
setSearchTerm = _useDebounceSearch.setSearchTerm,
|
|
66
67
|
debouncedSearchTerm = _useDebounceSearch.debouncedSearchTerm;
|
|
67
68
|
|
|
68
|
-
if (loading) return null;
|
|
69
69
|
var responsiveClasses = isMobile ? searchInputWrapperMobile : searchInputWrapperDesktop;
|
|
70
70
|
|
|
71
71
|
var handleClick = function handleClick(e, url) {
|
|
@@ -84,6 +84,10 @@ var SearchContent = function SearchContent(_ref) {
|
|
|
84
84
|
if (!debouncedSearchTerm || debouncedSearchTerm === '') setCollapsed(true);
|
|
85
85
|
};
|
|
86
86
|
|
|
87
|
+
var handleClearSearchResults = function handleClearSearchResults() {
|
|
88
|
+
setSearchTerm('');
|
|
89
|
+
};
|
|
90
|
+
|
|
87
91
|
return collapsed ? /*#__PURE__*/_react["default"].createElement("div", {
|
|
88
92
|
className: responsiveClasses
|
|
89
93
|
}, /*#__PURE__*/_react["default"].createElement("div", {
|
|
@@ -117,14 +121,10 @@ var SearchContent = function SearchContent(_ref) {
|
|
|
117
121
|
className: "search-content--expanded__label"
|
|
118
122
|
}, /*#__PURE__*/_react["default"].createElement("span", {
|
|
119
123
|
className: "search-content--expanded__icon_wrapper"
|
|
120
|
-
}, /*#__PURE__*/_react["default"].createElement("
|
|
121
|
-
|
|
122
|
-
|
|
123
|
-
}, /*#__PURE__*/_react["default"].createElement("
|
|
124
|
-
fillRule: "evenodd",
|
|
125
|
-
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",
|
|
126
|
-
clipRule: "evenodd"
|
|
127
|
-
}))), /*#__PURE__*/_react["default"].createElement("input", {
|
|
124
|
+
}, /*#__PURE__*/_react["default"].createElement(_SearchContentToggleIcon["default"], {
|
|
125
|
+
results: results,
|
|
126
|
+
onClear: handleClearSearchResults
|
|
127
|
+
})), /*#__PURE__*/_react["default"].createElement("input", {
|
|
128
128
|
type: "text",
|
|
129
129
|
name: "search",
|
|
130
130
|
onChange: function onChange(e) {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"SearchContent.js","names":["SearchContent","entities","searchInputAlignment","searchInputWrapperMobile","searchInputWrapperDesktop","collapsible","isMobile","placeholder","collapsed","setCollapsed","router","initialSearchTerm","resultKeys","
|
|
1
|
+
{"version":3,"file":"SearchContent.js","names":["SearchContent","entities","searchInputAlignment","searchInputWrapperMobile","searchInputWrapperDesktop","collapsible","isMobile","placeholder","collapsed","setCollapsed","router","initialSearchTerm","resultKeys","results","setSearchTerm","debouncedSearchTerm","responsiveClasses","handleClick","e","url","preventDefault","push","handleKeyPress","key","target","value","handleOnBlur","handleClearSearchResults","propTypes","PropTypes","string","bool","array","isRequired","defaultProps"],"sources":["../../../src/components/SearchContent/SearchContent.js"],"sourcesContent":["import React, { useState } 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 collapsible,\n isMobile,\n placeholder\n}) => {\n const [collapsed, setCollapsed] = useState(false);\n const router = useRouter();\n\n const { results, setSearchTerm, debouncedSearchTerm } = useDebounceSearch({\n entities,\n initialSearchTerm: '',\n resultKeys: 'id, name, image { url }, url'\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 (!collapsible) return;\n if (!debouncedSearchTerm || debouncedSearchTerm === '') setCollapsed(true);\n };\n\n const handleClearSearchResults = () => {\n setSearchTerm('');\n };\n\n return collapsed ? (\n <div className={responsiveClasses}>\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={responsiveClasses}>\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 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 collapsible: PropTypes.bool,\n entities: PropTypes.array.isRequired\n};\n\nSearchContent.defaultProps = {\n searchInputAlignment: '',\n searchInputWrapperMobile: '',\n searchInputWrapperDesktop: '',\n placeholder: '',\n isMobile: false,\n collapsible: false\n};\n\nexport default SearchContent;\n"],"mappings":"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"}
|
|
@@ -0,0 +1,38 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
|
|
3
|
+
require("core-js/modules/es.object.define-property.js");
|
|
4
|
+
|
|
5
|
+
Object.defineProperty(exports, "__esModule", {
|
|
6
|
+
value: true
|
|
7
|
+
});
|
|
8
|
+
exports["default"] = void 0;
|
|
9
|
+
|
|
10
|
+
var SearchContentToggleIcon = function SearchContentToggleIcon(_ref) {
|
|
11
|
+
var results = _ref.results,
|
|
12
|
+
onClear = _ref.onClear;
|
|
13
|
+
|
|
14
|
+
if (results && results.length > 0) {
|
|
15
|
+
return /*#__PURE__*/React.createElement("svg", {
|
|
16
|
+
className: "search-content--expanded__icon",
|
|
17
|
+
viewBox: "0 0 20 20",
|
|
18
|
+
onClick: onClear
|
|
19
|
+
}, /*#__PURE__*/React.createElement("path", {
|
|
20
|
+
fillRule: "evenodd",
|
|
21
|
+
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",
|
|
22
|
+
clipRule: "evenodd"
|
|
23
|
+
}));
|
|
24
|
+
}
|
|
25
|
+
|
|
26
|
+
return /*#__PURE__*/React.createElement("svg", {
|
|
27
|
+
className: "search-content--expanded__icon",
|
|
28
|
+
viewBox: "0 0 20 20"
|
|
29
|
+
}, /*#__PURE__*/React.createElement("path", {
|
|
30
|
+
fillRule: "evenodd",
|
|
31
|
+
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",
|
|
32
|
+
clipRule: "evenodd"
|
|
33
|
+
}));
|
|
34
|
+
};
|
|
35
|
+
|
|
36
|
+
var _default = SearchContentToggleIcon;
|
|
37
|
+
exports["default"] = _default;
|
|
38
|
+
//# sourceMappingURL=SearchContentToggleIcon.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"SearchContentToggleIcon.js","names":["SearchContentToggleIcon","results","onClear","length"],"sources":["../../../src/components/SearchContent/SearchContentToggleIcon.js"],"sourcesContent":["const SearchContentToggleIcon = ({ results, onClear }) => {\n if (results && results.length > 0) {\n return (\n <svg className=\"search-content--expanded__icon\" viewBox=\"0 0 20 20\" onClick={onClear}>\n <path\n fillRule=\"evenodd\"\n 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\"\n clipRule=\"evenodd\"\n />\n </svg>\n );\n }\n\n return (\n <svg className=\"search-content--expanded__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 );\n};\n\nexport default SearchContentToggleIcon;\n"],"mappings":";;;;;;;;;AAAA,IAAMA,uBAAuB,GAAG,SAA1BA,uBAA0B,OAA0B;EAAA,IAAvBC,OAAuB,QAAvBA,OAAuB;EAAA,IAAdC,OAAc,QAAdA,OAAc;;EACxD,IAAID,OAAO,IAAIA,OAAO,CAACE,MAAR,GAAiB,CAAhC,EAAmC;IACjC,oBACE;MAAK,SAAS,EAAC,gCAAf;MAAgD,OAAO,EAAC,WAAxD;MAAoE,OAAO,EAAED;IAA7E,gBACE;MACE,QAAQ,EAAC,SADX;MAEE,CAAC,EAAC,oMAFJ;MAGE,QAAQ,EAAC;IAHX,EADF,CADF;EASD;;EAED,oBACE;IAAK,SAAS,EAAC,gCAAf;IAAgD,OAAO,EAAC;EAAxD,gBACE;IACE,QAAQ,EAAC,SADX;IAEE,CAAC,EAAC,kHAFJ;IAGE,QAAQ,EAAC;EAHX,EADF,CADF;AASD,CAtBD;;eAwBeF,uB"}
|
|
@@ -3,6 +3,7 @@ import PropTypes from 'prop-types';
|
|
|
3
3
|
import { useRouter } from 'next/router';
|
|
4
4
|
import { useDebounceSearch } from '@blaze-cms/plugin-search-ui';
|
|
5
5
|
import SearchContentResults from './SearchContentResults';
|
|
6
|
+
import SearchContentToggleIcon from './SearchContentToggleIcon';
|
|
6
7
|
|
|
7
8
|
const SearchContent = ({
|
|
8
9
|
entities,
|
|
@@ -16,7 +17,6 @@ const SearchContent = ({
|
|
|
16
17
|
const [collapsed, setCollapsed] = useState(false);
|
|
17
18
|
const router = useRouter();
|
|
18
19
|
const {
|
|
19
|
-
loading,
|
|
20
20
|
results,
|
|
21
21
|
setSearchTerm,
|
|
22
22
|
debouncedSearchTerm
|
|
@@ -25,7 +25,6 @@ const SearchContent = ({
|
|
|
25
25
|
initialSearchTerm: '',
|
|
26
26
|
resultKeys: 'id, name, image { url }, url'
|
|
27
27
|
});
|
|
28
|
-
if (loading) return null;
|
|
29
28
|
const responsiveClasses = isMobile ? searchInputWrapperMobile : searchInputWrapperDesktop;
|
|
30
29
|
|
|
31
30
|
const handleClick = (e, url) => {
|
|
@@ -44,6 +43,10 @@ const SearchContent = ({
|
|
|
44
43
|
if (!debouncedSearchTerm || debouncedSearchTerm === '') setCollapsed(true);
|
|
45
44
|
};
|
|
46
45
|
|
|
46
|
+
const handleClearSearchResults = () => {
|
|
47
|
+
setSearchTerm('');
|
|
48
|
+
};
|
|
49
|
+
|
|
47
50
|
return collapsed ? /*#__PURE__*/React.createElement("div", {
|
|
48
51
|
className: responsiveClasses
|
|
49
52
|
}, /*#__PURE__*/React.createElement("div", {
|
|
@@ -73,14 +76,10 @@ const SearchContent = ({
|
|
|
73
76
|
className: "search-content--expanded__label"
|
|
74
77
|
}, /*#__PURE__*/React.createElement("span", {
|
|
75
78
|
className: "search-content--expanded__icon_wrapper"
|
|
76
|
-
}, /*#__PURE__*/React.createElement(
|
|
77
|
-
|
|
78
|
-
|
|
79
|
-
}, /*#__PURE__*/React.createElement("
|
|
80
|
-
fillRule: "evenodd",
|
|
81
|
-
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",
|
|
82
|
-
clipRule: "evenodd"
|
|
83
|
-
}))), /*#__PURE__*/React.createElement("input", {
|
|
79
|
+
}, /*#__PURE__*/React.createElement(SearchContentToggleIcon, {
|
|
80
|
+
results: results,
|
|
81
|
+
onClear: handleClearSearchResults
|
|
82
|
+
})), /*#__PURE__*/React.createElement("input", {
|
|
84
83
|
type: "text",
|
|
85
84
|
name: "search",
|
|
86
85
|
onChange: e => setSearchTerm(e.target.value),
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"SearchContent.js","names":["React","useState","PropTypes","useRouter","useDebounceSearch","SearchContentResults","SearchContent","entities","searchInputAlignment","searchInputWrapperMobile","searchInputWrapperDesktop","collapsible","isMobile","placeholder","collapsed","setCollapsed","router","
|
|
1
|
+
{"version":3,"file":"SearchContent.js","names":["React","useState","PropTypes","useRouter","useDebounceSearch","SearchContentResults","SearchContentToggleIcon","SearchContent","entities","searchInputAlignment","searchInputWrapperMobile","searchInputWrapperDesktop","collapsible","isMobile","placeholder","collapsed","setCollapsed","router","results","setSearchTerm","debouncedSearchTerm","initialSearchTerm","resultKeys","responsiveClasses","handleClick","e","url","preventDefault","push","handleKeyPress","key","target","value","handleOnBlur","handleClearSearchResults","propTypes","string","bool","array","isRequired","defaultProps"],"sources":["../../../src/components/SearchContent/SearchContent.js"],"sourcesContent":["import React, { useState } 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 collapsible,\n isMobile,\n placeholder\n}) => {\n const [collapsed, setCollapsed] = useState(false);\n const router = useRouter();\n\n const { results, setSearchTerm, debouncedSearchTerm } = useDebounceSearch({\n entities,\n initialSearchTerm: '',\n resultKeys: 'id, name, image { url }, url'\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 (!collapsible) return;\n if (!debouncedSearchTerm || debouncedSearchTerm === '') setCollapsed(true);\n };\n\n const handleClearSearchResults = () => {\n setSearchTerm('');\n };\n\n return collapsed ? (\n <div className={responsiveClasses}>\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={responsiveClasses}>\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 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 collapsible: PropTypes.bool,\n entities: PropTypes.array.isRequired\n};\n\nSearchContent.defaultProps = {\n searchInputAlignment: '',\n searchInputWrapperMobile: '',\n searchInputWrapperDesktop: '',\n placeholder: '',\n isMobile: false,\n collapsible: false\n};\n\nexport default SearchContent;\n"],"mappings":"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"}
|
|
@@ -0,0 +1,28 @@
|
|
|
1
|
+
const SearchContentToggleIcon = ({
|
|
2
|
+
results,
|
|
3
|
+
onClear
|
|
4
|
+
}) => {
|
|
5
|
+
if (results && results.length > 0) {
|
|
6
|
+
return /*#__PURE__*/React.createElement("svg", {
|
|
7
|
+
className: "search-content--expanded__icon",
|
|
8
|
+
viewBox: "0 0 20 20",
|
|
9
|
+
onClick: onClear
|
|
10
|
+
}, /*#__PURE__*/React.createElement("path", {
|
|
11
|
+
fillRule: "evenodd",
|
|
12
|
+
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",
|
|
13
|
+
clipRule: "evenodd"
|
|
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
|
+
};
|
|
26
|
+
|
|
27
|
+
export default SearchContentToggleIcon;
|
|
28
|
+
//# sourceMappingURL=SearchContentToggleIcon.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"SearchContentToggleIcon.js","names":["SearchContentToggleIcon","results","onClear","length"],"sources":["../../../src/components/SearchContent/SearchContentToggleIcon.js"],"sourcesContent":["const SearchContentToggleIcon = ({ results, onClear }) => {\n if (results && results.length > 0) {\n return (\n <svg className=\"search-content--expanded__icon\" viewBox=\"0 0 20 20\" onClick={onClear}>\n <path\n fillRule=\"evenodd\"\n 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\"\n clipRule=\"evenodd\"\n />\n </svg>\n );\n }\n\n return (\n <svg className=\"search-content--expanded__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 );\n};\n\nexport default SearchContentToggleIcon;\n"],"mappings":"AAAA,MAAMA,uBAAuB,GAAG,CAAC;EAAEC,OAAF;EAAWC;AAAX,CAAD,KAA0B;EACxD,IAAID,OAAO,IAAIA,OAAO,CAACE,MAAR,GAAiB,CAAhC,EAAmC;IACjC,oBACE;MAAK,SAAS,EAAC,gCAAf;MAAgD,OAAO,EAAC,WAAxD;MAAoE,OAAO,EAAED;IAA7E,gBACE;MACE,QAAQ,EAAC,SADX;MAEE,CAAC,EAAC,oMAFJ;MAGE,QAAQ,EAAC;IAHX,EADF,CADF;EASD;;EAED,oBACE;IAAK,SAAS,EAAC,gCAAf;IAAgD,OAAO,EAAC;EAAxD,gBACE;IACE,QAAQ,EAAC,SADX;IAEE,CAAC,EAAC,kHAFJ;IAGE,QAAQ,EAAC;EAHX,EADF,CADF;AASD,CAtBD;;AAwBA,eAAeF,uBAAf"}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@blaze-cms/react-page-builder",
|
|
3
|
-
"version": "0.124.0-alpha.
|
|
3
|
+
"version": "0.124.0-alpha.23",
|
|
4
4
|
"description": "Blaze react page builder",
|
|
5
5
|
"main": "lib/index.js",
|
|
6
6
|
"module": "lib-es/index.js",
|
|
@@ -84,5 +84,5 @@
|
|
|
84
84
|
"lib/*",
|
|
85
85
|
"lib-es/*"
|
|
86
86
|
],
|
|
87
|
-
"gitHead": "
|
|
87
|
+
"gitHead": "207c729a2dfe16f82383f93a3744c2feba8b55d3"
|
|
88
88
|
}
|
|
@@ -3,6 +3,7 @@ import PropTypes from 'prop-types';
|
|
|
3
3
|
import { useRouter } from 'next/router';
|
|
4
4
|
import { useDebounceSearch } from '@blaze-cms/plugin-search-ui';
|
|
5
5
|
import SearchContentResults from './SearchContentResults';
|
|
6
|
+
import SearchContentToggleIcon from './SearchContentToggleIcon';
|
|
6
7
|
|
|
7
8
|
const SearchContent = ({
|
|
8
9
|
entities,
|
|
@@ -16,14 +17,12 @@ const SearchContent = ({
|
|
|
16
17
|
const [collapsed, setCollapsed] = useState(false);
|
|
17
18
|
const router = useRouter();
|
|
18
19
|
|
|
19
|
-
const {
|
|
20
|
+
const { results, setSearchTerm, debouncedSearchTerm } = useDebounceSearch({
|
|
20
21
|
entities,
|
|
21
22
|
initialSearchTerm: '',
|
|
22
23
|
resultKeys: 'id, name, image { url }, url'
|
|
23
24
|
});
|
|
24
25
|
|
|
25
|
-
if (loading) return null;
|
|
26
|
-
|
|
27
26
|
const responsiveClasses = isMobile ? searchInputWrapperMobile : searchInputWrapperDesktop;
|
|
28
27
|
|
|
29
28
|
const handleClick = (e, url) => {
|
|
@@ -42,6 +41,10 @@ const SearchContent = ({
|
|
|
42
41
|
if (!debouncedSearchTerm || debouncedSearchTerm === '') setCollapsed(true);
|
|
43
42
|
};
|
|
44
43
|
|
|
44
|
+
const handleClearSearchResults = () => {
|
|
45
|
+
setSearchTerm('');
|
|
46
|
+
};
|
|
47
|
+
|
|
45
48
|
return collapsed ? (
|
|
46
49
|
<div className={responsiveClasses}>
|
|
47
50
|
<div className="search-content--collapse__wrapper">
|
|
@@ -71,13 +74,7 @@ const SearchContent = ({
|
|
|
71
74
|
<div className="search-content--expanded__wrapper">
|
|
72
75
|
<label className="search-content--expanded__label">
|
|
73
76
|
<span className="search-content--expanded__icon_wrapper">
|
|
74
|
-
<
|
|
75
|
-
<path
|
|
76
|
-
fillRule="evenodd"
|
|
77
|
-
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"
|
|
78
|
-
clipRule="evenodd"
|
|
79
|
-
/>
|
|
80
|
-
</svg>
|
|
77
|
+
<SearchContentToggleIcon results={results} onClear={handleClearSearchResults} />
|
|
81
78
|
</span>
|
|
82
79
|
<input
|
|
83
80
|
type="text"
|
|
@@ -0,0 +1,25 @@
|
|
|
1
|
+
const SearchContentToggleIcon = ({ results, onClear }) => {
|
|
2
|
+
if (results && results.length > 0) {
|
|
3
|
+
return (
|
|
4
|
+
<svg className="search-content--expanded__icon" viewBox="0 0 20 20" onClick={onClear}>
|
|
5
|
+
<path
|
|
6
|
+
fillRule="evenodd"
|
|
7
|
+
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"
|
|
8
|
+
clipRule="evenodd"
|
|
9
|
+
/>
|
|
10
|
+
</svg>
|
|
11
|
+
);
|
|
12
|
+
}
|
|
13
|
+
|
|
14
|
+
return (
|
|
15
|
+
<svg className="search-content--expanded__icon" viewBox="0 0 20 20">
|
|
16
|
+
<path
|
|
17
|
+
fillRule="evenodd"
|
|
18
|
+
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"
|
|
19
|
+
clipRule="evenodd"
|
|
20
|
+
/>
|
|
21
|
+
</svg>
|
|
22
|
+
);
|
|
23
|
+
};
|
|
24
|
+
|
|
25
|
+
export default SearchContentToggleIcon;
|