@blaze-cms/react-page-builder 0.124.0-alpha.23 → 0.124.0-alpha.26

package/lib-es/components/SearchContent/SearchContentItems.js.map

@@ -1 +1 @@
-{"version":3,"file":"SearchContentItems.js","names":["React","BlazeLink","SearchContentItems","results","onClick","map","item","url","id","name","image"],"sources":["../../../src/components/SearchContent/SearchContentItems.js"],"sourcesContent":["import React from 'react';\nimport BlazeLink from '../BlazeLink';\n\nconst SearchContentItems = ({ results = [], onClick }) =>\n  results.map(item => {\n    if (!item.url) return null;\n\n    const { id, name, image, url } = item;\n\n    return (\n      <BlazeLink href={url} onClick={onClick} key={id}>\n        <div className=\"search-content--results__wrapper\">\n          {image?.url ? (\n            <img src={image.url} alt={name} className=\"search-content--results__image\" />\n          ) : null}\n          <span className=\"search-content--results__title\">{name}</span>\n        </div>\n      </BlazeLink>\n    );\n  });\n\nexport default SearchContentItems;\n"],"mappings":"AAAA,OAAOA,KAAP,MAAkB,OAAlB;AACA,OAAOC,SAAP,MAAsB,cAAtB;;AAEA,MAAMC,kBAAkB,GAAG,CAAC;EAAEC,OAAO,GAAG,EAAZ;EAAgBC;AAAhB,CAAD,KACzBD,OAAO,CAACE,GAAR,CAAYC,IAAI,IAAI;EAClB,IAAI,CAACA,IAAI,CAACC,GAAV,EAAe,OAAO,IAAP;EAEf,MAAM;IAAEC,EAAF;IAAMC,IAAN;IAAYC,KAAZ;IAAmBH;EAAnB,IAA2BD,IAAjC;EAEA,oBACE,oBAAC,SAAD;IAAW,IAAI,EAAEC,GAAjB;IAAsB,OAAO,EAAEH,OAA/B;IAAwC,GAAG,EAAEI;EAA7C,gBACE;IAAK,SAAS,EAAC;EAAf,GACGE,KAAK,SAAL,IAAAA,KAAK,WAAL,IAAAA,KAAK,CAAEH,GAAP,gBACC;IAAK,GAAG,EAAEG,KAAK,CAACH,GAAhB;IAAqB,GAAG,EAAEE,IAA1B;IAAgC,SAAS,EAAC;EAA1C,EADD,GAEG,IAHN,eAIE;IAAM,SAAS,EAAC;EAAhB,GAAkDA,IAAlD,CAJF,CADF,CADF;AAUD,CAfD,CADF;;AAkBA,eAAeP,kBAAf"}
+{"version":3,"file":"SearchContentItems.js","names":["React","BlazeLink","LazyImage","SearchContentItems","results","onClick","map","item","url","id","name","image"],"sources":["../../../src/components/SearchContent/SearchContentItems.js"],"sourcesContent":["import React from 'react';\nimport BlazeLink from '../BlazeLink';\nimport LazyImage from '../LazyImage';\n\nconst SearchContentItems = ({ results = [], onClick }) =>\n  results.map(item => {\n    if (!item.url) return null;\n\n    const { id, name, image, url } = item;\n\n    return (\n      <BlazeLink href={url} onClick={onClick} key={id}>\n        <div className=\"search-content--results__wrapper\">\n          {image?.url ? (\n            <LazyImage\n              src={image.url}\n              alt={name}\n              className=\"search-content--results__image\"\n              sizeKey=\"search-result\"\n            />\n          ) : null}\n          <span className=\"search-content--results__title\">{name}</span>\n        </div>\n      </BlazeLink>\n    );\n  });\n\nexport default SearchContentItems;\n"],"mappings":"AAAA,OAAOA,KAAP,MAAkB,OAAlB;AACA,OAAOC,SAAP,MAAsB,cAAtB;AACA,OAAOC,SAAP,MAAsB,cAAtB;;AAEA,MAAMC,kBAAkB,GAAG,CAAC;EAAEC,OAAO,GAAG,EAAZ;EAAgBC;AAAhB,CAAD,KACzBD,OAAO,CAACE,GAAR,CAAYC,IAAI,IAAI;EAClB,IAAI,CAACA,IAAI,CAACC,GAAV,EAAe,OAAO,IAAP;EAEf,MAAM;IAAEC,EAAF;IAAMC,IAAN;IAAYC,KAAZ;IAAmBH;EAAnB,IAA2BD,IAAjC;EAEA,oBACE,oBAAC,SAAD;IAAW,IAAI,EAAEC,GAAjB;IAAsB,OAAO,EAAEH,OAA/B;IAAwC,GAAG,EAAEI;EAA7C,gBACE;IAAK,SAAS,EAAC;EAAf,GACGE,KAAK,SAAL,IAAAA,KAAK,WAAL,IAAAA,KAAK,CAAEH,GAAP,gBACC,oBAAC,SAAD;IACE,GAAG,EAAEG,KAAK,CAACH,GADb;IAEE,GAAG,EAAEE,IAFP;IAGE,SAAS,EAAC,gCAHZ;IAIE,OAAO,EAAC;EAJV,EADD,GAOG,IARN,eASE;IAAM,SAAS,EAAC;EAAhB,GAAkDA,IAAlD,CATF,CADF,CADF;AAeD,CApBD,CADF;;AAuBA,eAAeP,kBAAf"}

package/lib-es/components/SearchContent/SearchContentToggleIcon.js

@@ -1,3 +1,5 @@
+import React from 'react';
+
 const SearchContentToggleIcon = ({
   results,
   onClear

package/lib-es/components/SearchContent/SearchContentToggleIcon.js.map

@@ -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"}
+{"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

@@ -1,6 +1,6 @@
 {
   "name": "@blaze-cms/react-page-builder",
-  "version": "0.124.0-alpha.23",
+  "version": "0.124.0-alpha.26",
   "description": "Blaze react page builder",
   "main": "lib/index.js",
   "module": "lib-es/index.js",
@@ -31,6 +31,7 @@
     "@blaze-cms/core-errors": "^0.118.0",
     "@blaze-cms/image-cdn-react": "^0.2.0",
     "@blaze-cms/nextjs-components": "^0.124.0-alpha.2",
+    "@blaze-cms/plugin-search-ui": "^0.121.0",
     "@blaze-cms/setup-ui": "^0.92.0",
     "@blaze-cms/utils": "^0.118.0",
     "@blaze-react/breadcrumb": "0.8.0-alpha.60",
@@ -84,5 +85,5 @@
     "lib/*",
     "lib-es/*"
   ],
-  "gitHead": "207c729a2dfe16f82383f93a3744c2feba8b55d3"
+  "gitHead": "34f60e6112d30488c5d0e60b9518df8c70cdf2fb"
 }

package/src/components/SearchContent/SearchContent.js

@@ -12,12 +12,13 @@ const SearchContent = ({
   searchInputWrapperDesktop,
   collapsible,
   isMobile,
-  placeholder
+  placeholder,
+  modifier
 }) => {
   const [collapsed, setCollapsed] = useState(false);
   const router = useRouter();
 
-  const { results, setSearchTerm, debouncedSearchTerm } = useDebounceSearch({
+  const { results, searchTerm, setSearchTerm, debouncedSearchTerm } = useDebounceSearch({
     entities,
     initialSearchTerm: '',
     resultKeys: 'id, name, image { url }, url'
@@ -45,8 +46,9 @@ const SearchContent = ({
     setSearchTerm('');
   };
 
+  const className = ['search-content', modifier, responsiveClasses].filter(Boolean).join(' ');
   return collapsed ? (
-    <div className={responsiveClasses}>
+    <div className={className}>
       <div className="search-content--collapse__wrapper">
         <label className="search-content--collapse__label">
           <span className="search-content--collapse__icon_wrapper">
@@ -70,7 +72,7 @@ const SearchContent = ({
     </div>
   ) : (
     <>
-      <div className={responsiveClasses}>
+      <div className={className}>
         <div className="search-content--expanded__wrapper">
           <label className="search-content--expanded__label">
             <span className="search-content--expanded__icon_wrapper">
@@ -83,6 +85,7 @@ const SearchContent = ({
               onKeyPress={handleKeyPress}
               className="search-content--expanded__input"
               placeholder={placeholder}
+              value={searchTerm}
               onBlur={handleOnBlur}
             />
           </label>
@@ -104,7 +107,8 @@ SearchContent.propTypes = {
   placeholder: PropTypes.string,
   isMobile: PropTypes.bool,
   collapsible: PropTypes.bool,
-  entities: PropTypes.array.isRequired
+  entities: PropTypes.array.isRequired,
+  modifier: PropTypes.string
 };
 
 SearchContent.defaultProps = {
@@ -113,7 +117,8 @@ SearchContent.defaultProps = {
   searchInputWrapperDesktop: '',
   placeholder: '',
   isMobile: false,
-  collapsible: false
+  collapsible: false,
+  modifier: ''
 };
 
 export default SearchContent;

package/src/components/SearchContent/SearchContentItems.js

@@ -1,5 +1,6 @@
 import React from 'react';
 import BlazeLink from '../BlazeLink';
+import LazyImage from '../LazyImage';
 
 const SearchContentItems = ({ results = [], onClick }) =>
   results.map(item => {
@@ -11,7 +12,12 @@ const SearchContentItems = ({ results = [], onClick }) =>
       <BlazeLink href={url} onClick={onClick} key={id}>
         <div className="search-content--results__wrapper">
           {image?.url ? (
-            <img src={image.url} alt={name} className="search-content--results__image" />
+            <LazyImage
+              src={image.url}
+              alt={name}
+              className="search-content--results__image"
+              sizeKey="search-result"
+            />
           ) : null}
           <span className="search-content--results__title">{name}</span>
         </div>

package/src/components/SearchContent/SearchContentToggleIcon.js

@@ -1,3 +1,5 @@
+import React from 'react';
+
 const SearchContentToggleIcon = ({ results, onClear }) => {
   if (results && results.length > 0) {
     return (