feat(AdvancedSearch): add isOpen control possibility

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

Hide file tree

Showing 2 changed files with 21 additions and 5 deletions.
diff --git a/src/lib/molecules/AdvancedSearch/index.js b/src/lib/molecules/AdvancedSearch/index.js
@@ -20,6 +20,7 @@ import './index.scss';
 
 function AdvancedSearch({
     data,
+    isOpen,
     position,
     onSearch,
     totalCount,
@@ -43,10 +44,14 @@ function AdvancedSearch({
     const searchRef = useRef(null);
     const [popoverOpen, setPopoverOpen] = useState(false);
     const [initialDataState, setInitialDataState] = useState([]);
-
     const [searchValue, setSearchValue] = useState(null);
+    const [isOpenControlled, setIsOpenControlled] = useState(false);
     const debouncedSearchValue = useDebounce(searchValue, 300);
 
+    useEffect(() => {
+        setIsOpenControlled(isOpen !== undefined);
+    }, [isOpen]);
+
     useEffect(() => {
         if (debouncedSearchValue === null) return;
         onSearch(debouncedSearchValue);
@@ -82,9 +87,11 @@ function AdvancedSearch({
 
     const inputAndPopoverWidthVariable = useMemo(
         () => ({
-            '--advanced-search-width': popoverOpen ? `${openedInputWidth}vw` : closedInputWidth
+            '--advanced-search-width': (isOpenControlled ? isOpen : popoverOpen)
+                ? `${openedInputWidth}vw`
+                : closedInputWidth
         }),
-        [popoverOpen]
+        [popoverOpen, isOpenControlled, isOpen]
     );
 
     const handleOutsideClick = useClickOutside(() => onOutsideClick());
@@ -106,7 +113,7 @@ function AdvancedSearch({
                 <PopoverV2
                     position="bottom"
                     screenType="desktop"
-                    isOpen={popoverOpen}
+                    isOpen={isOpenControlled ? isOpen : popoverOpen}
                     scrollbarNeeded={false}
                     extendTargetWidth={false}
                     className="advancedSearch__popover"
@@ -325,7 +332,11 @@ AdvancedSearch.propTypes = {
     /**
      * text for no data to display
      */
-    noDataText: PropTypes.string
+    noDataText: PropTypes.string,
+    /**
+     * A boolean prop to control the popover's open and close states from outside the component.
+     */
+    isOpen: PropTypes.bool
 };
 
 AdvancedSearch.defaultProps = {

diff --git a/stories/molecules/AdvancedSearch/AdvancedSearch.stories.jsx b/stories/molecules/AdvancedSearch/AdvancedSearch.stories.jsx
@@ -23,6 +23,7 @@ export default {
         onShowMoreClick: args({ control: false, category: category.action }),
         totalCountText: args({ control: 'text', category: category.content }),
         showMoreIsLoading: args({ control: false, category: category.states }),
+        isOpen: args({ control: 'boolean', category: category.functionality }),
         primaryFilterData: args({ control: 'object', category: category.content }),
         closedInputWidth: args({ control: 'number', category: category.appearance }),
         openedInputWidth: args({ control: 'number', category: category.appearance }),
@@ -84,6 +85,7 @@ export const AdvancedSearch = ({ ...args }) => {
     const [byUserFiltered, setByUserFiltered] = useState([]);
     const [initialData, setInitialData] = useState([]);
     const [searchCharacter, setSearchCharacter] = useState('');
+    const [isOpen, setIsOpen] = useState(false);
 
     setTimeout(() => setLoading(false), 3000);
 
@@ -289,6 +291,9 @@ export const AdvancedSearch = ({ ...args }) => {
                 {...args}
                 onShowMoreClick={showMoreHandler}
                 onSearch={onSearchHandler}
+                isOpen={isOpen}
+                extendedInputConfigs={{ onFocus: () => setIsOpen(true) }}
+                onOutsideClick={() => setIsOpen(false)}
             />
             <Divider size={32} />
             <Time style={{ marginLeft: '10px' }} />