From 31ef2a5b16013f7f7c1474fdc9f6591754af484c Mon Sep 17 00:00:00 2001 From: Amit Amrutiya Date: Fri, 18 Oct 2024 18:03:31 +0530 Subject: [PATCH 1/5] feat: Refactor import paths in EmptyStateCard and style.tsx Signed-off-by: Amit Amrutiya --- src/custom/CustomCatalog/EmptyStateCard.tsx | 2 +- src/custom/CustomCatalog/style.tsx | 2 +- src/icons/index.ts | 1 + 3 files changed, 3 insertions(+), 2 deletions(-) diff --git a/src/custom/CustomCatalog/EmptyStateCard.tsx b/src/custom/CustomCatalog/EmptyStateCard.tsx index 014b0a551..256b193d3 100644 --- a/src/custom/CustomCatalog/EmptyStateCard.tsx +++ b/src/custom/CustomCatalog/EmptyStateCard.tsx @@ -1,5 +1,5 @@ import { FC } from 'react'; -import { EmptyStyleIcon } from '../../icons/EmptyStyle'; +import { EmptyStyleIcon } from '../../icons'; import { useTheme } from '../../theme'; import { CatalogEmptyStateDiv } from './style'; diff --git a/src/custom/CustomCatalog/style.tsx b/src/custom/CustomCatalog/style.tsx index a49cbebb2..38fb80054 100644 --- a/src/custom/CustomCatalog/style.tsx +++ b/src/custom/CustomCatalog/style.tsx @@ -349,7 +349,7 @@ export const CardBack = styled('div')(({ isCatalog }) => ({ })); const getBackground = (isLightMode: boolean) => { - const lightGradient = `linear-gradient(to left bottom, ${WHITESMOKE}, ${GRAY97},white, white, white, white, white, white, white,white, $, ${WHITESMOKE}, ${GRAY97})`; + const lightGradient = `linear-gradient(to left bottom, ${WHITESMOKE}, ${GRAY97},white, white, white, white, white, white, white, white, ${WHITESMOKE}, ${GRAY97})`; const darkGradient = `linear-gradient(to right top, ${DARK_PRIMARY_COLOR}, ${accentGrey[30]}, ${accentGrey[20]}, ${accentGrey[10]}, ${accentGrey[10]}, ${accentGrey[10]}, ${accentGrey[10]}, ${accentGrey[10]}, ${accentGrey[10]}, ${charcoal[20]}, ${charcoal[10]}, black)`; return isLightMode ? lightGradient : darkGradient; diff --git a/src/icons/index.ts b/src/icons/index.ts index 2a8522ad1..24daa8d79 100644 --- a/src/icons/index.ts +++ b/src/icons/index.ts @@ -45,6 +45,7 @@ export * from './Design'; export * from './Done'; export * from './Download'; export * from './Edit'; +export * from './EmptyStyle'; export * from './Environment'; export * from './ExternalLink'; export * from './Feedback'; From bc56366295de2d4c2d7611328b35e23ee3bd1e8d Mon Sep 17 00:00:00 2001 From: Amit Amrutiya Date: Sun, 20 Oct 2024 13:13:23 +0530 Subject: [PATCH 2/5] fix: debouncing not working on empty string Signed-off-by: Amit Amrutiya --- src/custom/CatalogFilterSection/index.tsx | 3 +- .../StyledSearchBar/StyledSearchBar.tsx | 49 ++++++++++++------- src/custom/index.tsx | 1 + 3 files changed, 33 insertions(+), 20 deletions(-) diff --git a/src/custom/CatalogFilterSection/index.tsx b/src/custom/CatalogFilterSection/index.tsx index bab5baf47..a79660b97 100644 --- a/src/custom/CatalogFilterSection/index.tsx +++ b/src/custom/CatalogFilterSection/index.tsx @@ -1,3 +1,4 @@ -import CatalogFilterSidebar from './CatalogFilterSidebar'; +import CatalogFilterSidebar, { FilterList } from './CatalogFilterSidebar'; export { CatalogFilterSidebar }; +export type { FilterList }; diff --git a/src/custom/StyledSearchBar/StyledSearchBar.tsx b/src/custom/StyledSearchBar/StyledSearchBar.tsx index da529de62..b8a3fe643 100644 --- a/src/custom/StyledSearchBar/StyledSearchBar.tsx +++ b/src/custom/StyledSearchBar/StyledSearchBar.tsx @@ -1,6 +1,6 @@ import { SxProps, Theme } from '@mui/material'; import { debounce } from 'lodash'; -import React, { useEffect, useState } from 'react'; +import React, { useEffect, useMemo, useState } from 'react'; import { InputAdornment } from '../../base'; import { SearchIcon } from '../../icons'; import { useTheme } from '../../theme'; @@ -33,7 +33,7 @@ interface SearchBarProps { */ function StyledSearchBar({ onChange, - value, + value = '', label, sx, placeholder, @@ -41,36 +41,47 @@ function StyledSearchBar({ debounceTime = 300 }: SearchBarProps): JSX.Element { const theme = useTheme(); - const [inputValue, setInputValue] = useState(value ?? ''); + const [inputValue, setInputValue] = useState(value); + // Update local state when controlled value changes useEffect(() => { - if (value !== undefined && value !== inputValue) { + if (value !== inputValue) { setInputValue(value); } - // eslint-disable-next-line react-hooks/exhaustive-deps }, [value]); - useEffect(() => { - const handler = debounce((newValue: string) => { - if (onChange) { - const syntheticEvent = { - target: { value: newValue }, - persist: () => {} - } as React.ChangeEvent; + // Create synthetic event helper + const createSyntheticEvent = (value: string): React.ChangeEvent => + ({ + target: { value }, + persist: () => {} + }) as React.ChangeEvent; - onChange(syntheticEvent); - } - }, debounceTime); + // Memoize the debounced handler + const debouncedOnChange = useMemo( + () => + debounce((newValue: string) => { + onChange?.(createSyntheticEvent(newValue)); + }, debounceTime), + [onChange, debounceTime] + ); - handler(inputValue); + useEffect(() => { + if (!onChange) return; + if (inputValue === '') { + onChange(createSyntheticEvent(inputValue)); + } else { + debouncedOnChange(inputValue); + } return () => { - handler.cancel(); + debouncedOnChange.cancel(); }; - }, [inputValue, onChange, debounceTime]); + }, [inputValue, onChange, debouncedOnChange]); const handleChange = (event: React.ChangeEvent) => { - setInputValue(event.target.value); + const newValue = event.target.value; + setInputValue(newValue); }; return ( diff --git a/src/custom/index.tsx b/src/custom/index.tsx index ca9ba32b9..a7505ea50 100644 --- a/src/custom/index.tsx +++ b/src/custom/index.tsx @@ -45,6 +45,7 @@ import { TransferListProps } from './TransferModal/TransferList/TransferList'; import UniversalFilter, { UniversalFilterProps } from './UniversalFilter'; export { CatalogCard } from './CatalogCard'; export { CatalogFilterSidebar } from './CatalogFilterSection'; +export type { FilterList } from './CatalogFilterSection'; export { StyledChartDialog } from './ChartDialog'; export { LearningContent } from './LearningContent'; export { NavigationNavbar } from './NavigationNavbar'; From 2f3626d53348b10e5363c738f5e685af6e055fb3 Mon Sep 17 00:00:00 2001 From: Amit Amrutiya Date: Sun, 20 Oct 2024 13:19:12 +0530 Subject: [PATCH 3/5] feat: add new expand and collapse all icons Signed-off-by: Amit Amrutiya --- src/icons/CollapseAll/CollapseAllIcon.tsx | 44 +++++++++++++++++++++++ src/icons/CollapseAll/index.tsx | 1 + src/icons/ExpandAll/ExpandAllIcon.tsx | 44 +++++++++++++++++++++++ src/icons/ExpandAll/index.tsx | 1 + src/icons/index.ts | 2 ++ 5 files changed, 92 insertions(+) create mode 100644 src/icons/CollapseAll/CollapseAllIcon.tsx create mode 100644 src/icons/CollapseAll/index.tsx create mode 100644 src/icons/ExpandAll/ExpandAllIcon.tsx create mode 100644 src/icons/ExpandAll/index.tsx diff --git a/src/icons/CollapseAll/CollapseAllIcon.tsx b/src/icons/CollapseAll/CollapseAllIcon.tsx new file mode 100644 index 000000000..66afdc313 --- /dev/null +++ b/src/icons/CollapseAll/CollapseAllIcon.tsx @@ -0,0 +1,44 @@ +import React from 'react'; + +interface CollapsAllIconProps { + height?: string; + width?: string; + fill?: string; + strokeWidth?: string; + style?: React.CSSProperties; +} + +const CollapsAllIcon: React.FC = ({ + height = '24', + width = '24', + fill = 'none', + strokeWidth = '2', + style +}) => ( + + + + +); + +export default CollapsAllIcon; diff --git a/src/icons/CollapseAll/index.tsx b/src/icons/CollapseAll/index.tsx new file mode 100644 index 000000000..23bdaea21 --- /dev/null +++ b/src/icons/CollapseAll/index.tsx @@ -0,0 +1 @@ +export { default as CollapseAll } from './CollapseAllIcon'; diff --git a/src/icons/ExpandAll/ExpandAllIcon.tsx b/src/icons/ExpandAll/ExpandAllIcon.tsx new file mode 100644 index 000000000..a74a4703a --- /dev/null +++ b/src/icons/ExpandAll/ExpandAllIcon.tsx @@ -0,0 +1,44 @@ +import React from 'react'; + +interface ExpandAllProps { + height?: string; + width?: string; + fill?: string; + strokeWidth?: string; + style?: React.CSSProperties; +} + +const ExpandAll: React.FC = ({ + height = '24', + width = '24', + fill = 'none', + strokeWidth = '2', + style +}) => ( + + + + +); + +export default ExpandAll; diff --git a/src/icons/ExpandAll/index.tsx b/src/icons/ExpandAll/index.tsx new file mode 100644 index 000000000..3e4fc19d9 --- /dev/null +++ b/src/icons/ExpandAll/index.tsx @@ -0,0 +1 @@ +export { default as ExpandAll } from './ExpandAllIcon'; diff --git a/src/icons/index.ts b/src/icons/index.ts index 24daa8d79..c7bf87e66 100644 --- a/src/icons/index.ts +++ b/src/icons/index.ts @@ -9,6 +9,7 @@ export * from './Circle'; export * from './Clone'; export * from './Close'; export * from './Cloud'; +export * from './CollapseAll'; export * from './Column'; export * from './Component'; export * from './Configuration'; @@ -25,6 +26,7 @@ export * from './Designer'; export * from './Detail'; export * from './DropDownIcon'; export * from './Error'; +export * from './ExpandAll'; export * from './Favorite'; export * from './Filter'; export * from './Fullscreen'; From dc6add6c539cf5362365c77902a3f49ce9fcf2ef Mon Sep 17 00:00:00 2001 From: Amit Amrutiya Date: Sun, 20 Oct 2024 19:26:48 +0530 Subject: [PATCH 4/5] chore: change icon name Signed-off-by: Amit Amrutiya --- src/icons/CollapseAll/index.tsx | 2 +- src/icons/ExpandAll/ExpandAllIcon.tsx | 6 +++--- src/icons/ExpandAll/index.tsx | 2 +- 3 files changed, 5 insertions(+), 5 deletions(-) diff --git a/src/icons/CollapseAll/index.tsx b/src/icons/CollapseAll/index.tsx index 23bdaea21..dd1fa97d4 100644 --- a/src/icons/CollapseAll/index.tsx +++ b/src/icons/CollapseAll/index.tsx @@ -1 +1 @@ -export { default as CollapseAll } from './CollapseAllIcon'; +export { default as CollapseAllIcon } from './CollapseAllIcon'; diff --git a/src/icons/ExpandAll/ExpandAllIcon.tsx b/src/icons/ExpandAll/ExpandAllIcon.tsx index a74a4703a..d9e790048 100644 --- a/src/icons/ExpandAll/ExpandAllIcon.tsx +++ b/src/icons/ExpandAll/ExpandAllIcon.tsx @@ -1,6 +1,6 @@ import React from 'react'; -interface ExpandAllProps { +interface ExpandAllIconProps { height?: string; width?: string; fill?: string; @@ -8,7 +8,7 @@ interface ExpandAllProps { style?: React.CSSProperties; } -const ExpandAll: React.FC = ({ +const ExpandAllIcon: React.FC = ({ height = '24', width = '24', fill = 'none', @@ -41,4 +41,4 @@ const ExpandAll: React.FC = ({ ); -export default ExpandAll; +export default ExpandAllIcon; diff --git a/src/icons/ExpandAll/index.tsx b/src/icons/ExpandAll/index.tsx index 3e4fc19d9..0f9a8c8f9 100644 --- a/src/icons/ExpandAll/index.tsx +++ b/src/icons/ExpandAll/index.tsx @@ -1 +1 @@ -export { default as ExpandAll } from './ExpandAllIcon'; +export { default as ExpandAllIcon } from './ExpandAllIcon'; From 1149a324332805023acd957212f721bec1df543a Mon Sep 17 00:00:00 2001 From: Amit Amrutiya Date: Sat, 19 Oct 2024 19:28:31 +0530 Subject: [PATCH 5/5] fix: lint failed issue Signed-off-by: Amit Amrutiya --- src/custom/StyledSearchBar/StyledSearchBar.tsx | 1 + 1 file changed, 1 insertion(+) diff --git a/src/custom/StyledSearchBar/StyledSearchBar.tsx b/src/custom/StyledSearchBar/StyledSearchBar.tsx index b8a3fe643..b608789c7 100644 --- a/src/custom/StyledSearchBar/StyledSearchBar.tsx +++ b/src/custom/StyledSearchBar/StyledSearchBar.tsx @@ -48,6 +48,7 @@ function StyledSearchBar({ if (value !== inputValue) { setInputValue(value); } + // eslint-disable-next-line react-hooks/exhaustive-deps }, [value]); // Create synthetic event helper