@blaze-cms/react-page-builder 0.124.0-alpha.22 → 0.124.0-alpha.25

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 CHANGED
@@ -3,6 +3,30 @@
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.25](https://byte9/thebyte9/blaze/compare/v0.124.0-alpha.24...v0.124.0-alpha.25) (2022-05-24)
7
+
8
+ **Note:** Version bump only for package @blaze-cms/react-page-builder
9
+
10
+
11
+
12
+
13
+
14
+ # [0.124.0-alpha.24](https://byte9/thebyte9/blaze/compare/v0.124.0-alpha.23...v0.124.0-alpha.24) (2022-05-24)
15
+
16
+ **Note:** Version bump only for package @blaze-cms/react-page-builder
17
+
18
+
19
+
20
+
21
+
22
+ # [0.124.0-alpha.23](https://byte9/thebyte9/blaze/compare/v0.124.0-alpha.22...v0.124.0-alpha.23) (2022-05-24)
23
+
24
+ **Note:** Version bump only for package @blaze-cms/react-page-builder
25
+
26
+
27
+
28
+
29
+
6
30
  # [0.124.0-alpha.22](https://byte9/thebyte9/blaze/compare/v0.124.0-alpha.21...v0.124.0-alpha.22) (2022-05-24)
7
31
 
8
32
  **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,11 @@ 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,
66
+ searchTerm = _useDebounceSearch.searchTerm,
65
67
  setSearchTerm = _useDebounceSearch.setSearchTerm,
66
68
  debouncedSearchTerm = _useDebounceSearch.debouncedSearchTerm;
67
69
 
68
- if (loading) return null;
69
70
  var responsiveClasses = isMobile ? searchInputWrapperMobile : searchInputWrapperDesktop;
70
71
 
71
72
  var handleClick = function handleClick(e, url) {
@@ -84,6 +85,10 @@ var SearchContent = function SearchContent(_ref) {
84
85
  if (!debouncedSearchTerm || debouncedSearchTerm === '') setCollapsed(true);
85
86
  };
86
87
 
88
+ var handleClearSearchResults = function handleClearSearchResults() {
89
+ setSearchTerm('');
90
+ };
91
+
87
92
  return collapsed ? /*#__PURE__*/_react["default"].createElement("div", {
88
93
  className: responsiveClasses
89
94
  }, /*#__PURE__*/_react["default"].createElement("div", {
@@ -117,14 +122,10 @@ var SearchContent = function SearchContent(_ref) {
117
122
  className: "search-content--expanded__label"
118
123
  }, /*#__PURE__*/_react["default"].createElement("span", {
119
124
  className: "search-content--expanded__icon_wrapper"
120
- }, /*#__PURE__*/_react["default"].createElement("svg", {
121
- className: "search-content--expanded__icon",
122
- viewBox: "0 0 20 20"
123
- }, /*#__PURE__*/_react["default"].createElement("path", {
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", {
125
+ }, /*#__PURE__*/_react["default"].createElement(_SearchContentToggleIcon["default"], {
126
+ results: results,
127
+ onClear: handleClearSearchResults
128
+ })), /*#__PURE__*/_react["default"].createElement("input", {
128
129
  type: "text",
129
130
  name: "search",
130
131
  onChange: function onChange(e) {
@@ -133,6 +134,7 @@ var SearchContent = function SearchContent(_ref) {
133
134
  onKeyPress: handleKeyPress,
134
135
  className: "search-content--expanded__input",
135
136
  placeholder: placeholder,
137
+ value: searchTerm,
136
138
  onBlur: handleOnBlur
137
139
  }))), /*#__PURE__*/_react["default"].createElement(_SearchContentResults["default"], {
138
140
  results: results,
@@ -1 +1 @@
1
- {"version":3,"file":"SearchContent.js","names":["SearchContent","entities","searchInputAlignment","searchInputWrapperMobile","searchInputWrapperDesktop","collapsible","isMobile","placeholder","collapsed","setCollapsed","router","initialSearchTerm","resultKeys","loading","results","setSearchTerm","debouncedSearchTerm","responsiveClasses","handleClick","e","url","preventDefault","push","handleKeyPress","key","target","value","handleOnBlur","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';\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 { loading, results, setSearchTerm, debouncedSearchTerm } = useDebounceSearch({\n entities,\n initialSearchTerm: '',\n resultKeys: 'id, name, image { url }, url'\n });\n\n if (loading) return null;\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 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 <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 </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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"}
1
+ {"version":3,"file":"SearchContent.js","names":["SearchContent","entities","searchInputAlignment","searchInputWrapperMobile","searchInputWrapperDesktop","collapsible","isMobile","placeholder","collapsed","setCollapsed","router","initialSearchTerm","resultKeys","results","searchTerm","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, searchTerm, 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 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 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,42 @@
1
+ "use strict";
2
+
3
+ require("core-js/modules/es.object.define-property.js");
4
+
5
+ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
6
+
7
+ Object.defineProperty(exports, "__esModule", {
8
+ value: true
9
+ });
10
+ exports["default"] = void 0;
11
+
12
+ var _react = _interopRequireDefault(require("react"));
13
+
14
+ var SearchContentToggleIcon = function SearchContentToggleIcon(_ref) {
15
+ var results = _ref.results,
16
+ onClear = _ref.onClear;
17
+
18
+ if (results && results.length > 0) {
19
+ return /*#__PURE__*/_react["default"].createElement("svg", {
20
+ className: "search-content--expanded__icon",
21
+ viewBox: "0 0 20 20",
22
+ onClick: onClear
23
+ }, /*#__PURE__*/_react["default"].createElement("path", {
24
+ fillRule: "evenodd",
25
+ 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",
26
+ clipRule: "evenodd"
27
+ }));
28
+ }
29
+
30
+ return /*#__PURE__*/_react["default"].createElement("svg", {
31
+ className: "search-content--expanded__icon",
32
+ viewBox: "0 0 20 20"
33
+ }, /*#__PURE__*/_react["default"].createElement("path", {
34
+ fillRule: "evenodd",
35
+ 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",
36
+ clipRule: "evenodd"
37
+ }));
38
+ };
39
+
40
+ var _default = SearchContentToggleIcon;
41
+ exports["default"] = _default;
42
+ //# 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":["import React from 'react';\n\nconst 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;;AAEA,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,8 +17,8 @@ const SearchContent = ({
16
17
  const [collapsed, setCollapsed] = useState(false);
17
18
  const router = useRouter();
18
19
  const {
19
- loading,
20
20
  results,
21
+ searchTerm,
21
22
  setSearchTerm,
22
23
  debouncedSearchTerm
23
24
  } = useDebounceSearch({
@@ -25,7 +26,6 @@ const SearchContent = ({
25
26
  initialSearchTerm: '',
26
27
  resultKeys: 'id, name, image { url }, url'
27
28
  });
28
- if (loading) return null;
29
29
  const responsiveClasses = isMobile ? searchInputWrapperMobile : searchInputWrapperDesktop;
30
30
 
31
31
  const handleClick = (e, url) => {
@@ -44,6 +44,10 @@ const SearchContent = ({
44
44
  if (!debouncedSearchTerm || debouncedSearchTerm === '') setCollapsed(true);
45
45
  };
46
46
 
47
+ const handleClearSearchResults = () => {
48
+ setSearchTerm('');
49
+ };
50
+
47
51
  return collapsed ? /*#__PURE__*/React.createElement("div", {
48
52
  className: responsiveClasses
49
53
  }, /*#__PURE__*/React.createElement("div", {
@@ -73,20 +77,17 @@ const SearchContent = ({
73
77
  className: "search-content--expanded__label"
74
78
  }, /*#__PURE__*/React.createElement("span", {
75
79
  className: "search-content--expanded__icon_wrapper"
76
- }, /*#__PURE__*/React.createElement("svg", {
77
- className: "search-content--expanded__icon",
78
- viewBox: "0 0 20 20"
79
- }, /*#__PURE__*/React.createElement("path", {
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", {
80
+ }, /*#__PURE__*/React.createElement(SearchContentToggleIcon, {
81
+ results: results,
82
+ onClear: handleClearSearchResults
83
+ })), /*#__PURE__*/React.createElement("input", {
84
84
  type: "text",
85
85
  name: "search",
86
86
  onChange: e => setSearchTerm(e.target.value),
87
87
  onKeyPress: handleKeyPress,
88
88
  className: "search-content--expanded__input",
89
89
  placeholder: placeholder,
90
+ value: searchTerm,
90
91
  onBlur: handleOnBlur
91
92
  }))), /*#__PURE__*/React.createElement(SearchContentResults, {
92
93
  results: results,
@@ -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","loading","results","setSearchTerm","debouncedSearchTerm","initialSearchTerm","resultKeys","responsiveClasses","handleClick","e","url","preventDefault","push","handleKeyPress","key","target","value","handleOnBlur","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';\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 { loading, results, setSearchTerm, debouncedSearchTerm } = useDebounceSearch({\n entities,\n initialSearchTerm: '',\n resultKeys: 'id, name, image { url }, url'\n });\n\n if (loading) return null;\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 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 <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 </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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"}
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","searchTerm","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, searchTerm, 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 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 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,30 @@
1
+ import React from 'react';
2
+
3
+ const SearchContentToggleIcon = ({
4
+ results,
5
+ onClear
6
+ }) => {
7
+ if (results && results.length > 0) {
8
+ return /*#__PURE__*/React.createElement("svg", {
9
+ className: "search-content--expanded__icon",
10
+ viewBox: "0 0 20 20",
11
+ onClick: onClear
12
+ }, /*#__PURE__*/React.createElement("path", {
13
+ fillRule: "evenodd",
14
+ 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",
15
+ clipRule: "evenodd"
16
+ }));
17
+ }
18
+
19
+ return /*#__PURE__*/React.createElement("svg", {
20
+ className: "search-content--expanded__icon",
21
+ viewBox: "0 0 20 20"
22
+ }, /*#__PURE__*/React.createElement("path", {
23
+ fillRule: "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
+ clipRule: "evenodd"
26
+ }));
27
+ };
28
+
29
+ export default SearchContentToggleIcon;
30
+ //# sourceMappingURL=SearchContentToggleIcon.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"SearchContentToggleIcon.js","names":["React","SearchContentToggleIcon","results","onClear","length"],"sources":["../../../src/components/SearchContent/SearchContentToggleIcon.js"],"sourcesContent":["import React from 'react';\n\nconst 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,OAAOA,KAAP,MAAkB,OAAlB;;AAEA,MAAMC,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.22",
3
+ "version": "0.124.0-alpha.25",
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": "56e507a5af76b31562bbb698b96944517a8aecda"
87
+ "gitHead": "0a82c9c83c1786b8d413c22d085eabe98494373b"
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 { loading, results, setSearchTerm, debouncedSearchTerm } = useDebounceSearch({
20
+ const { results, searchTerm, 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
- <svg className="search-content--expanded__icon" viewBox="0 0 20 20">
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"
@@ -86,6 +83,7 @@ const SearchContent = ({
86
83
  onKeyPress={handleKeyPress}
87
84
  className="search-content--expanded__input"
88
85
  placeholder={placeholder}
86
+ value={searchTerm}
89
87
  onBlur={handleOnBlur}
90
88
  />
91
89
  </label>
@@ -0,0 +1,27 @@
1
+ import React from 'react';
2
+
3
+ const SearchContentToggleIcon = ({ results, onClear }) => {
4
+ if (results && results.length > 0) {
5
+ return (
6
+ <svg className="search-content--expanded__icon" viewBox="0 0 20 20" onClick={onClear}>
7
+ <path
8
+ fillRule="evenodd"
9
+ 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"
10
+ clipRule="evenodd"
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
+ };
26
+
27
+ export default SearchContentToggleIcon;