@bitrise/bitkit 13.10.0 → 13.10.1-alpha.1

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@bitrise/bitkit",
   "description": "Bitrise React component library",
-  "version": "13.10.0",
+  "version": "13.10.1-alpha.1",
   "repository": {
     "type": "git",
     "url": "git+ssh://git@github.com/bitrise-io/bitkit.git"

package/src/Components/Filter/Filter.storyData.ts

@@ -92,7 +92,7 @@ export const FILTER_STORY_DATA: FilterData = {
 export const FILTER_STORY_INIT_STATE: FilterState = {
   app: ['46b6b9a78a418ee8'],
   cache_type: ['gradle'],
-  pipeline: ['ipsum', 'dolor'],
+  pipeline: ['ipsum'],
 };
 
 export const FILTER_STORY_CONTEXT: FilterContextType = {

package/src/Components/Filter/Filter.tsx

@@ -1,5 +1,6 @@
-import { useEffect, useMemo, useRef, useState } from 'react';
+import { useMemo, useRef, useState } from 'react';
 import { Modal, ModalOverlay, useMultiStyleConfig } from '@chakra-ui/react';
+import { isEqual } from '../../utils/utils';
 import Box, { BoxProps } from '../Box/Box';
 import Button from '../Button/Button';
 import Divider from '../Divider/Divider';
@@ -45,8 +46,6 @@ const Filter = (props: FilterProps) => {
     ...rest
   } = props;
 
-  const isInited = useRef<boolean>(false);
-
   const filterStyle = useMultiStyleConfig('Filter') as FilterStyle;
 
   const cleanState: FilterState = {};
@@ -60,6 +59,8 @@ const Filter = (props: FilterProps) => {
     }
   });
 
+  const initialState = useRef<FilterState>(cleanState);
+
   const [isPopoverOpen, setPopoverOpen] = useState<boolean>(false);
 
   const deleteFromState = (category: string, stateProp: FilterState): FilterState => {
@@ -76,9 +77,6 @@ const Filter = (props: FilterProps) => {
   };
 
   const onFilterChange = (category: string, value: FilterValue) => {
-    if (isInited.current === false) {
-      return;
-    }
     let newState = { ...cleanState };
     if (value && value.length > 0) {
       newState[category] = value;
@@ -99,7 +97,7 @@ const Filter = (props: FilterProps) => {
   };
 
   const onClearFilters = () => {
-    onChange({});
+    onChange(initialState.current || {});
   };
 
   const filters = {
@@ -114,9 +112,7 @@ const Filter = (props: FilterProps) => {
     filters[value.type || 'tag'][category] = value;
   });
 
-  const stateCategories = Object.keys(cleanState).filter((c) => !['date_range', 'search'].includes(c));
-
-  const showClearFilters = stateCategories.length > 0 || (cleanState.search && cleanState.search.length > 0);
+  const showClearFilters = !isEqual(initialState.current, state);
 
   const contextValue: FilterContextType = useMemo(
     () => ({
@@ -131,12 +127,6 @@ const Filter = (props: FilterProps) => {
     [data, filtersDependOn, isLoading, onFilterChange, onFilterClear, setPopoverOpen, cleanState],
   );
 
-  useEffect(() => {
-    if (isInited.current === false) {
-      isInited.current = true;
-    }
-  }, [isInited.current]);
-
   return (
     <FilterContext value={contextValue}>
       <Box sx={filterStyle.container} {...rest}>
@@ -183,7 +173,7 @@ const Filter = (props: FilterProps) => {
             {showSearch && (
               <>
                 <Divider flexShrink="0" orientation="vertical" size="1" variant="solid" />
-                <FilterSearch onChange={onFilterChange} value={(cleanState.search && cleanState.search[0]) || ''} />
+                <FilterSearch onChange={onFilterChange} value={cleanState.search?.length ? cleanState.search[0] : ''} />
               </>
             )}
           </Box>

package/src/Components/Filter/FilterSearch/FilterSearch.tsx

@@ -7,7 +7,6 @@ import {
   InputRightElement,
   useMultiStyleConfig,
 } from '@chakra-ui/react';
-import { useDebounce } from '../../../utils/utils';
 import Icon from '../../Icon/Icon';
 import IconButton from '../../IconButton/IconButton';
 import { FilterStyle } from '../Filter.theme';
@@ -23,7 +22,6 @@ const FilterSearch = (props: FilterSearchProps) => {
   const filterStyle = useMultiStyleConfig('Filter') as FilterStyle;
 
   const [searchValue, setSearchValue] = useState(value);
-  const debouncedSearchValue = useDebounce<string>(searchValue, 500);
 
   const onInputChange = (event: ChangeEvent<HTMLInputElement>) => {
     setSearchValue(event.currentTarget.value);
@@ -34,8 +32,11 @@ const FilterSearch = (props: FilterSearchProps) => {
   };
 
   useEffect(() => {
-    onChange('search', debouncedSearchValue.length ? [debouncedSearchValue] : []);
-  }, [debouncedSearchValue]);
+    const delayInputTimeoutId = setTimeout(() => {
+      onChange('search', searchValue.length ? [searchValue] : []);
+    }, 500);
+    return () => clearTimeout(delayInputTimeoutId);
+  }, [searchValue]);
 
   useEffect(() => {
     setSearchValue(value);

package/src/utils/utils.ts

@@ -15,10 +15,24 @@ export function useObjectMemo<T extends object>(obj: T): T {
   }, Object.values(obj));
 }
 
-export function isEqual(a: number | string | number[] | string[], b: number | string | number[] | string[]) {
+export function isEqual(a: any, b: any) {
   if (Array.isArray(a) && Array.isArray(b)) {
     return a.length === b.length && [...a].every((val) => [...b].includes(val));
   }
+  if (typeof a === 'object' && typeof b === 'object') {
+    let isEqualObjects = true;
+    Object.keys(a).forEach((key: any) => {
+      if (!isEqual(a[key], b[key])) {
+        isEqualObjects = false;
+      }
+    });
+    Object.keys(b).forEach((key: any) => {
+      if (!isEqual(b[key], a[key])) {
+        isEqualObjects = false;
+      }
+    });
+    return isEqualObjects;
+  }
   return a === b;
 }