feat(AdvancedSearch): add onOutsideClick prop

softconstruct · Feb 9, 2024 · b54a6e1 · b54a6e1
1 parent 31bed35
commit b54a6e1
Show file tree

Hide file tree

Showing 2 changed files with 11 additions and 1 deletion.
diff --git a/src/lib/molecules/AdvancedSearch/index.js b/src/lib/molecules/AdvancedSearch/index.js
@@ -5,7 +5,7 @@ import dayjs from 'dayjs';
 
 // Helpers
 import { advancedSearchConfig } from 'configs';
-import { useDebounce, useKeyDown } from 'hooks';
+import { useDebounce, useKeyDown, useClickOutside } from 'hooks';
 import { noop } from 'utils';
 
 // Components
@@ -28,6 +28,7 @@ function AdvancedSearch({
     showMoreText,
     totalCountMax,
     totalCountText,
+    onOutsideClick,
     onShowMoreClick,
     isSearchLoading,
     openedInputWidth,
@@ -86,11 +87,14 @@ function AdvancedSearch({
         [popoverOpen]
     );
 
+    const handleOutsideClick = useClickOutside(() => onOutsideClick());
+
     return (
         <div
             className={classnames('advancedSearch', {
                 'advancedSearch-left': position === advancedSearchConfig.positions.left
             })}
+            ref={handleOutsideClick}
         >
             <div
                 className={classnames('advancedSearch__wrapper', {
@@ -220,6 +224,10 @@ AdvancedSearch.propTypes = {
      * Fires an event when input changes and returns value of input (used 300ms debounce)
      */
     onSearch: PropTypes.func, // Pass typed value using some debounce
+    /**
+     * Fires event when user clicks on outside of component.
+     */
+    onOutsideClick: PropTypes.func,
     /**
      * If search field is empty, initialDataDescription is describing witch data is showing by default for example (Recently modified data).
      */
@@ -324,6 +332,7 @@ AdvancedSearch.defaultProps = {
     onSearch: noop,
     openedInputWidth: 65,
     onShowMoreClick: noop,
+    onOutsideClick: noop,
     closedInputWidth: '200px',
     hasActiveShowMore: false,
     showMoreIsLoading: false,

diff --git a/stories/molecules/AdvancedSearch/AdvancedSearch.stories.jsx b/stories/molecules/AdvancedSearch/AdvancedSearch.stories.jsx
@@ -18,6 +18,7 @@ export default {
         noDataText: args({ control: 'text', category: category.content }),
         showMoreText: args({ control: 'text', category: category.content }),
         totalCount: args({ control: 'number', category: category.content }),
+        onOutsideClick: args({ control: false, category: category.action }),
         initialData: args({ control: 'object', category: category.content }),
         onShowMoreClick: args({ control: false, category: category.action }),
         totalCountText: args({ control: 'text', category: category.content }),