Skip to content

Commit aa6c594

Browse files
shashankcocshashankcoc
committed
Fix(Scroll-to-Search) - Fixed Scroll view to Search View
#147
1 parent 8c5f37f commit aa6c594

File tree

3 files changed

+99
-51
lines changed

3 files changed

+99
-51
lines changed

‎src/components/common/chip/ChipDropdown.tsx‎

Lines changed: 50 additions & 28 deletions
Original file line numberDiff line numberDiff line change
@@ -26,11 +26,24 @@ function ChipDropdown(props: ChipProps) {
2626

2727
const color = isMoreSelected ? 'dark-700' : 'white';
2828
const [icon, setIcon] = useState<string | null>(NETWORK_ICON_MAP[selectedNetwork]);
29+
const [searchTerm, setSearchTerm] = useState<string>('');
30+
const [filteredNetworks, setFilteredNetworks] = useState(props.dropdownNetworkList);
2931

3032
useEffect(() => {
3133
setIcon(NETWORK_ICON_MAP[selectedNetwork]);
3234
},[selectedNetwork]);
3335

36+
// Filtering networks based on search term
37+
useEffect(() => {
38+
if (searchTerm.trim() === '') {
39+
setFilteredNetworks(dropdownNetworkList);
40+
} else {
41+
const filtered = dropdownNetworkList.filter(network =>
42+
network.name.toLowerCase().includes(searchTerm.toLowerCase())
43+
);
44+
setFilteredNetworks(filtered);
45+
}
46+
}, [searchTerm, dropdownNetworkList]);
3447
return (
3548
<div className="text-sm">
3649
<Menu as="div" className="relative inline-block text-left ">
@@ -61,36 +74,45 @@ function ChipDropdown(props: ChipProps) {
6174
leaveFrom="transform opacity-100 scale-100"
6275
leaveTo="transform opacity-0 scale-95"
6376
>
64-
<Menu.Items className="absolute right-0 z-10 mt-2 origin-top-right bg-white rounded-md shadow-lg w-36 ring-1 ring-black ring-opacity-5 focus:outline-none">
65-
<div className='max-h-40 overflow-y-auto rounded-md p-2'>
77+
<Menu.Items className="absolute right-0 z-10 mt-2 origin-top-right bg-white rounded-md shadow-lg w-52 ring-1 ring-black ring-opacity-5 focus:outline-none">
78+
<div className='max-h-44 overflow-y-auto rounded-md p-2'>
6679
<div className="flex flex-col py-1">
67-
{dropdownNetworkList.map(({ name, key, iconPath }, index) => (
68-
<Menu.Item key={key}>
69-
{({ active }) => (
70-
<a
71-
onClick={() => {
72-
setIsMoreSelected(true);
73-
onClickFcn(key);
74-
setIcon(iconPath);
75-
}}
76-
className={`
77-
${active ? 'bg-gray-100 text-gray-900' : 'text-gray-700'} +
78-
'block flex items-center gap-3 px-4 py-2 text-sm'
79-
`}
80-
>
81-
<img
82-
src={iconPath}
83-
alt=""
84-
style={{
85-
height: '12px',
86-
width: '12px',
80+
<input
81+
type="text"
82+
className="px-3 py-1 rounded-md mb-2 focus:outline-none focus:border-primary-400 w-40 text-sm"
83+
placeholder="Search Chains..."
84+
value={searchTerm}
85+
onChange={(e) => setSearchTerm(e.target.value)}
86+
/>
87+
88+
{/* Rendering filtered network items */}
89+
{filteredNetworks.map(({ name, key, iconPath }, index) => (
90+
<Menu.Item key={key}>
91+
{({ active }) => (
92+
<a
93+
onClick={() => {
94+
setIsMoreSelected(true);
95+
onClickFcn(key);
96+
setIcon(iconPath);
8797
}}
88-
/>
89-
{name}
90-
</a>
91-
)}
92-
</Menu.Item>
93-
))}
98+
className={`
99+
${active ? 'bg-gray-100 text-gray-900' : 'text-gray-700'}
100+
block flex items-center gap-3 px-4 py-2 text-sm
101+
`}
102+
>
103+
<img
104+
src={iconPath}
105+
alt=""
106+
style={{
107+
height: '12px',
108+
width: '12px',
109+
}}
110+
/>
111+
{name}
112+
</a>
113+
)}
114+
</Menu.Item>
115+
))}
94116
</div>
95117
</div>
96118
</Menu.Items>

‎src/components/global/searchblock/Options.tsx‎

Lines changed: 42 additions & 23 deletions
Original file line numberDiff line numberDiff line change
@@ -1,15 +1,34 @@
1-
import React, { useState } from 'react';
1+
import React, { useEffect, useState } from 'react';
22
import { NETWORK_LIST } from '@/components/common/constants';
33

44
function Options({ networkValue, setNetworkValue }: { networkValue: number; setNetworkValue: (value: number) => void }) {
55
const [open, setOpen] = useState<boolean>(false);
66
const toggler = () => setOpen((v) => !v);
7+
const [searchTerm, setSearchTerm] = useState<string>('');
8+
const [filteredNetworks, setFilteredNetworks] = useState<any[]>(NETWORK_LIST); // Initialized with full list
79

10+
// console.log(networkValue,setNetworkValue)
811
const handleValue = (index: number) => {
912
setNetworkValue(index);
10-
toggler();
13+
// toggler();
14+
setOpen(false); // Close dropdown after selection
15+
1116
};
1217

18+
// Filter networks based on search term
19+
useEffect(() => {
20+
if (searchTerm.trim() === '') {
21+
setFilteredNetworks(NETWORK_LIST); // Reset to full list when search term is empty
22+
} else {
23+
const filtered = NETWORK_LIST.filter((network) =>
24+
network.name.toLowerCase().includes(searchTerm.toLowerCase())
25+
);
26+
setFilteredNetworks(filtered);
27+
}
28+
}, [searchTerm]);
29+
const handleSearchChange = (e: React.ChangeEvent<HTMLInputElement>) => {
30+
setSearchTerm(e.target.value);
31+
};
1332
return (
1433
<div className="relative z-0">
1534
<div className="py-3 px-4 border-r border-dark-200 bg-white flex items-center gap-1 text-md" role="button" onClick={toggler}>
@@ -22,29 +41,29 @@ function Options({ networkValue, setNetworkValue }: { networkValue: number; setN
2241
{open && (
2342
<div className="">
2443
<div onClick={toggler} className="fixed inset-0 z-100 bg-transparent" />
25-
<div className="absolute left-0 bg-white w-[200%] py-1 border-dark-200 shadow-200">
44+
<div className="absolute left-0 bg-white py-1 border-dark-200 shadow-200 w-52">
2645
<div className="flex flex-col">
27-
<div
28-
onClick={() => handleValue(-1)}
29-
className="flex items-center whitespace-no-wrap gap-2 py-2 px-3 hover:bg-dark-600/10 text-md"
30-
role="button"
31-
32-
>
33-
<img src={"/zap2.svg"} alt="" style={{ width: '20px', height: 'auto' }} />
34-
<span>Quick search</span>
35-
</div>
36-
<div className='max-h-40 overflow-y-auto rounded-md p-2'>
37-
{NETWORK_LIST.map(({ name, key, iconPath, iconPathInverted }, index) => (
38-
<div
39-
onClick={() => handleValue(index)}
40-
className="flex items-center whitespace-no-wrap gap-2 py-2 px-3 hover:bg-dark-600/10 text-md"
41-
role="button"
42-
key={index}
43-
>
44-
<img src={iconPath} alt="" style={{ width: '20px', height: 'auto' }} />
45-
<span>{name}</span>
46+
<div className="flex items-center gap-2 py-2 px-3 hover:bg-dark-600/10 text-md">
47+
<input
48+
type="text"
49+
className="px-0.5 py-0.5 rounded-md focus:outline-none focus:border-primary-400"
50+
placeholder="Search Chains..."
51+
value={searchTerm}
52+
onChange={handleSearchChange}
53+
/>
4654
</div>
47-
))}
55+
<div className='max-h-40 overflow-y-auto rounded-md p-2'>
56+
{filteredNetworks.map(({ name, iconPath }, index) => (
57+
<div
58+
onClick={() => handleValue(index)}
59+
className="flex items-center whitespace-no-wrap gap-2 py-2 px-3 hover:bg-dark-600/10 text-md"
60+
role="button"
61+
key={index}
62+
>
63+
<img src={iconPath} alt="" style={{ width: '20px', height: 'auto' }} />
64+
<span>{name}</span>
65+
</div>
66+
))}
4867
</div>
4968
</div>
5069
</div>

‎src/styles/main.sass‎

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -54,7 +54,14 @@ body
5454
&:hover
5555
background: #555
5656

57+
.no-scrollbar
58+
scrollbar-width: none
59+
-ms-overflow-style: none
60+
overflow-y: scroll
5761

62+
.no-scrollbar::-webkit-scrollbar
63+
display: none
64+
5865
.wordbrack
5966
word-break: break-all
6067
word-break: break-word

0 commit comments

Comments
 (0)