From 8c5f37f179c8c3b35400b96fd75c8fd69d58b52d Mon Sep 17 00:00:00 2001 From: shashank Date: Sat, 22 Jun 2024 00:30:50 +0530 Subject: [PATCH 1/3] Fix(Options-menu) - Fixed options menu 147 --- src/components/common/chip/ChipDropdown.tsx | 2 ++ src/components/global/searchblock/Options.tsx | 3 ++- 2 files changed, 4 insertions(+), 1 deletion(-) diff --git a/src/components/common/chip/ChipDropdown.tsx b/src/components/common/chip/ChipDropdown.tsx index 36f836b9..53b3fe74 100644 --- a/src/components/common/chip/ChipDropdown.tsx +++ b/src/components/common/chip/ChipDropdown.tsx @@ -62,6 +62,7 @@ function ChipDropdown(props: ChipProps) { leaveTo="transform opacity-0 scale-95" > +
{dropdownNetworkList.map(({ name, key, iconPath }, index) => ( @@ -91,6 +92,7 @@ function ChipDropdown(props: ChipProps) { ))}
+
diff --git a/src/components/global/searchblock/Options.tsx b/src/components/global/searchblock/Options.tsx index f22a72d4..15228695 100644 --- a/src/components/global/searchblock/Options.tsx +++ b/src/components/global/searchblock/Options.tsx @@ -33,6 +33,7 @@ function Options({ networkValue, setNetworkValue }: { networkValue: number; setN Quick search +
{NETWORK_LIST.map(({ name, key, iconPath, iconPathInverted }, index) => (
handleValue(index)} @@ -44,7 +45,7 @@ function Options({ networkValue, setNetworkValue }: { networkValue: number; setN {name}
))} - +
From aa6c594cbfa2ab502fab9a32895ad50ccb6e1a4d Mon Sep 17 00:00:00 2001 From: shashank Date: Mon, 24 Jun 2024 11:41:45 +0530 Subject: [PATCH 2/3] Fix(Scroll-to-Search) - Fixed Scroll view to Search View #147 --- src/components/common/chip/ChipDropdown.tsx | 78 ++++++++++++------- src/components/global/searchblock/Options.tsx | 65 ++++++++++------ src/styles/main.sass | 7 ++ 3 files changed, 99 insertions(+), 51 deletions(-) diff --git a/src/components/common/chip/ChipDropdown.tsx b/src/components/common/chip/ChipDropdown.tsx index 53b3fe74..c5d031b9 100644 --- a/src/components/common/chip/ChipDropdown.tsx +++ b/src/components/common/chip/ChipDropdown.tsx @@ -26,11 +26,24 @@ function ChipDropdown(props: ChipProps) { const color = isMoreSelected ? 'dark-700' : 'white'; const [icon, setIcon] = useState(NETWORK_ICON_MAP[selectedNetwork]); + const [searchTerm, setSearchTerm] = useState(''); + const [filteredNetworks, setFilteredNetworks] = useState(props.dropdownNetworkList); useEffect(() => { setIcon(NETWORK_ICON_MAP[selectedNetwork]); },[selectedNetwork]); + // Filtering networks based on search term + useEffect(() => { + if (searchTerm.trim() === '') { + setFilteredNetworks(dropdownNetworkList); + } else { + const filtered = dropdownNetworkList.filter(network => + network.name.toLowerCase().includes(searchTerm.toLowerCase()) + ); + setFilteredNetworks(filtered); + } + }, [searchTerm, dropdownNetworkList]); return (
@@ -61,36 +74,45 @@ function ChipDropdown(props: ChipProps) { leaveFrom="transform opacity-100 scale-100" leaveTo="transform opacity-0 scale-95" > - -
+ + diff --git a/src/components/global/searchblock/Options.tsx b/src/components/global/searchblock/Options.tsx index 15228695..4ed215bf 100644 --- a/src/components/global/searchblock/Options.tsx +++ b/src/components/global/searchblock/Options.tsx @@ -1,15 +1,34 @@ -import React, { useState } from 'react'; +import React, { useEffect, useState } from 'react'; import { NETWORK_LIST } from '@/components/common/constants'; function Options({ networkValue, setNetworkValue }: { networkValue: number; setNetworkValue: (value: number) => void }) { const [open, setOpen] = useState(false); const toggler = () => setOpen((v) => !v); + const [searchTerm, setSearchTerm] = useState(''); + const [filteredNetworks, setFilteredNetworks] = useState(NETWORK_LIST); // Initialized with full list + // console.log(networkValue,setNetworkValue) const handleValue = (index: number) => { setNetworkValue(index); - toggler(); + // toggler(); + setOpen(false); // Close dropdown after selection + }; + // Filter networks based on search term + useEffect(() => { + if (searchTerm.trim() === '') { + setFilteredNetworks(NETWORK_LIST); // Reset to full list when search term is empty + } else { + const filtered = NETWORK_LIST.filter((network) => + network.name.toLowerCase().includes(searchTerm.toLowerCase()) + ); + setFilteredNetworks(filtered); + } + }, [searchTerm]); + const handleSearchChange = (e: React.ChangeEvent) => { + setSearchTerm(e.target.value); + }; return (
@@ -22,29 +41,29 @@ function Options({ networkValue, setNetworkValue }: { networkValue: number; setN {open && (
-
+
-
handleValue(-1)} - className="flex items-center whitespace-no-wrap gap-2 py-2 px-3 hover:bg-dark-600/10 text-md" - role="button" - - > - - Quick search -
-
- {NETWORK_LIST.map(({ name, key, iconPath, iconPathInverted }, index) => ( -
handleValue(index)} - className="flex items-center whitespace-no-wrap gap-2 py-2 px-3 hover:bg-dark-600/10 text-md" - role="button" - key={index} - > - - {name} +
+
- ))} +
+ {filteredNetworks.map(({ name, iconPath }, index) => ( +
handleValue(index)} + className="flex items-center whitespace-no-wrap gap-2 py-2 px-3 hover:bg-dark-600/10 text-md" + role="button" + key={index} + > + + {name} +
+ ))}
diff --git a/src/styles/main.sass b/src/styles/main.sass index f5c5edfc..e2dd83c5 100644 --- a/src/styles/main.sass +++ b/src/styles/main.sass @@ -54,7 +54,14 @@ body &:hover background: #555 +.no-scrollbar + scrollbar-width: none + -ms-overflow-style: none + overflow-y: scroll +.no-scrollbar::-webkit-scrollbar + display: none + .wordbrack word-break: break-all word-break: break-word From 870a2bccf18f97e7d56804e4592af4b7d83d3149 Mon Sep 17 00:00:00 2001 From: shashank Date: Mon, 24 Jun 2024 12:56:33 +0530 Subject: [PATCH 3/3] Code Improvement --- src/components/common/chip/ChipDropdown.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/common/chip/ChipDropdown.tsx b/src/components/common/chip/ChipDropdown.tsx index c5d031b9..672756cb 100644 --- a/src/components/common/chip/ChipDropdown.tsx +++ b/src/components/common/chip/ChipDropdown.tsx @@ -75,7 +75,7 @@ function ChipDropdown(props: ChipProps) { leaveTo="transform opacity-0 scale-95" > -
+