Implement Search View More and View less props (#149)

GetDKAN · Jun 8, 2021 · 7bb85c8 · 7bb85c8
1 parent 0a9a329
commit 7bb85c8
Show file tree

Hide file tree

Showing 3 changed files with 26 additions and 2 deletions.
diff --git a/src/components/SearchFacets/SearchFacet/index.jsx b/src/components/SearchFacets/SearchFacet/index.jsx
@@ -26,6 +26,8 @@ const SearchFacet = ({
   },
   selectedFacets,
   inputType,
+  onMore,
+  onLess
 }) => {
 
   let myLabel = '';
@@ -139,6 +141,8 @@ const SearchFacet = ({
           container="div"
           items={choices}
           limit={10}
+          onMore={onMore}
+          onLess={onLess}
         />
       </ToggleBlock>
     </div>
@@ -169,6 +173,8 @@ SearchFacet.propTypes = {
     icon: PropTypes.func,
   }),
   inputType: PropTypes.string,
+  onMore: PropTypes.func,
+  onLess: PropTypes.func
 };
 
 export default SearchFacet;
diff --git a/src/components/SearchFacets/index.jsx b/src/components/SearchFacets/index.jsx
@@ -10,6 +10,8 @@ const SearchFacets = ({
   className,
   toggleClasses,
   InputComponent,
+  onMore,
+  onLess
 }) => {
   const facetList = Object.entries(facetsConfig);
   const facetComponents = facetList.map(
@@ -33,6 +35,8 @@ const SearchFacets = ({
           reset={facetInfo[1].reset}
           selectedFacets={selectedFacets}
           inputType={facetInfo[1].inputType}
+          onMore={onMore}
+          onLess={onLess}
         />
       );
     },
@@ -60,6 +64,8 @@ SearchFacets.propTypes = {
   className: PropTypes.string,
   toggleClasses: PropTypes.string,
   InputComponent: PropTypes.func,
+  onMore: PropTypes.func,
+  onLess: PropTypes.func
 };
 
 export default SearchFacets;
diff --git a/src/components/ShowMoreContainer/index.jsx b/src/components/ShowMoreContainer/index.jsx
@@ -9,14 +9,21 @@ export default function ShowMoreContainer({
   btnClosedText,
   containerClasses,
   wrapperClasses,
+  onMore,
+  onLess
 }) {
   const [showMore, toggleShowMore] = useState(false);
 
   let showMoreButton = (
     <button
       type="button"
       className="showmore-button"
-      onClick={() => toggleShowMore(!showMore)}
+      onClick={() => {
+        if (onLess){
+          onLess()
+        }
+        toggleShowMore(!showMore)
+      }}
     >
       {btnOpenText || 'Show less'}
     </button>
@@ -35,7 +42,12 @@ export default function ShowMoreContainer({
       <button
         type="button"
         className="showmore-button"
-        onClick={() => toggleShowMore(!showMore)}
+        onClick={() => {
+          if (onMore){
+            onMore()
+          }
+          toggleShowMore(!showMore)
+        }}
       >
         {btnText}
       </button>