Skip to content

Commit 36772d2

Browse files
lazycoder1lazycoder1
authored
Merge pull request #151 from shashankcoc/feature/new-feature
Fixed Scroll view to Search
2 parents 1aa3f91 + 870a2bc commit 36772d2

File tree

3 files changed

+101
-50
lines changed

3 files changed

+101
-50
lines changed

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

Lines changed: 51 additions & 27 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,35 +74,46 @@ 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">
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-56 overflow-y-auto rounded-md p-2'>
6579
<div className="flex flex-col py-1">
66-
{dropdownNetworkList.map(({ name, key, iconPath }, index) => (
67-
<Menu.Item key={key}>
68-
{({ active }) => (
69-
<a
70-
onClick={() => {
71-
setIsMoreSelected(true);
72-
onClickFcn(key);
73-
setIcon(iconPath);
74-
}}
75-
className={`
76-
${active ? 'bg-gray-100 text-gray-900' : 'text-gray-700'} +
77-
'block flex items-center gap-3 px-4 py-2 text-sm'
78-
`}
79-
>
80-
<img
81-
src={iconPath}
82-
alt=""
83-
style={{
84-
height: '12px',
85-
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);
8697
}}
87-
/>
88-
{name}
89-
</a>
90-
)}
91-
</Menu.Item>
92-
))}
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+
))}
116+
</div>
93117
</div>
94118
</Menu.Items>
95119
</Transition>

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

Lines changed: 43 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,30 @@ 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-
{NETWORK_LIST.map(({ name, key, iconPath, iconPathInverted }, index) => (
37-
<div
38-
onClick={() => handleValue(index)}
39-
className="flex items-center whitespace-no-wrap gap-2 py-2 px-3 hover:bg-dark-600/10 text-md"
40-
role="button"
41-
key={index}
42-
>
43-
<img src={iconPath} alt="" style={{ width: '20px', height: 'auto' }} />
44-
<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+
/>
4554
</div>
46-
))}
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+
))}
67+
</div>
4868
</div>
4969
</div>
5070
</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)