Isolate SearchBarSection. Hide delete button if querystring empty

rohberg · Feb 7, 2023 · 5f7cb74 · 5f7cb74
1 parent 378326a
commit 5f7cb74
Show file tree

Hide file tree

Showing 3 changed files with 57 additions and 37 deletions.
diff --git a/src/components/Searchkit/SearchBarSection.jsx b/src/components/Searchkit/SearchBarSection.jsx
@@ -0,0 +1,51 @@
+import { useIntl } from 'react-intl';
+import { Icon as IconSemantic } from 'semantic-ui-react';
+import { onQueryChanged, SearchBar, withState } from 'react-searchkit';
+
+import messages from '../../messages';
+
+const _SearchBarSection = (props) => {
+  const intl = useIntl();
+
+  const payloadOfReset = {
+    searchQuery: {
+      sortBy: 'bestmatch',
+      sortOrder: 'asc',
+      layout: 'list',
+      page: 1,
+      size: 10,
+      queryString: '',
+    },
+  };
+
+  const onResetHandler = (event) => {
+    onQueryChanged(payloadOfReset);
+  };
+
+  return (
+    <div className="searchbar-wrapper">
+      <SearchBar
+        placeholder={' '}
+        autofocus="false"
+        uiProps={{
+          icon: 'search',
+          iconPosition: 'left',
+        }}
+        actionProps={{
+          content: intl.formatMessage(messages.search),
+        }}
+      />
+      <IconSemantic
+        basic="true"
+        icon="true"
+        name="delete"
+        className={
+          props.currentQueryState.queryString.length ? 'selected' : 'unselected'
+        }
+        onClick={(event) => onResetHandler(event)}
+      />
+    </div>
+  );
+};
+
+export default withState(_SearchBarSection);
diff --git a/src/components/Views/FacetedSearch.jsx b/src/components/Views/FacetedSearch.jsx
@@ -44,6 +44,7 @@ import { CustomESRequestSerializer } from '../Searchkit/CustomESRequestSerialize
 import { CustomESResponseSerializer } from '../Searchkit/CustomESResponseSerializer';
 import { Results } from '../Searchkit/Results';
 import SectionsSearch from '../Searchkit/SectionsSearch';
+import SearchBarSection from '../Searchkit/SearchBarSection';
 
 import {
   flattenESUrlToPath,
@@ -655,48 +656,13 @@ const FacetedSearch = ({ data, overriddenComponents }) => {
                     document.querySelectorAll(relocation)[0]
                   }
                 >
-                  <div className="searchbar-wrapper">
-                    <SearchBar
-                      placeholder={intl.formatMessage(messages.search)}
-                      autofocus="false"
-                      uiProps={{
-                        icon: 'search',
-                        iconPosition: 'left',
-                        className: 'searchbarinput',
-                      }}
-                      actionProps={{
-                        content: intl.formatMessage(messages.search),
-                      }}
-                    />
-                    <IconSemantic
-                      name="delete"
-                      onClick={(event) => onResetHandler(event)}
-                    />
-                  </div>
+                  <SearchBarSection />
                 </Portal>
               ) : (
                 <Grid relaxed style={{ padding: '1em 0' }}>
                   <Grid.Row>
                     <Grid.Column width={12}>
-                      <div className="searchbar-wrapper">
-                        <SearchBar
-                          placeholder={intl.formatMessage(messages.search)}
-                          autofocus="false"
-                          uiProps={{
-                            icon: 'search',
-                            iconPosition: 'left',
-                          }}
-                          actionProps={{
-                            content: intl.formatMessage(messages.search),
-                          }}
-                        />
-                        <IconSemantic
-                          basic="true"
-                          icon="true"
-                          name="delete"
-                          onClick={(event) => onResetHandler(event)}
-                        />
-                      </div>
+                      <SearchBarSection />
                     </Grid.Column>
                   </Grid.Row>
                 </Grid>

diff --git a/src/components/Views/less/springisnow-volto-searchkit-block.less b/src/components/Views/less/springisnow-volto-searchkit-block.less
@@ -54,6 +54,9 @@
         color: #fff;
         font-size: 1.2rem;
         font-weight: 700;
+        &.unselected {
+            opacity: 0;
+        }
     }
 }