Skip to content

Commit

Permalink
Merge pull request #151 from shashankcoc/feature/new-feature
Browse files Browse the repository at this point in the history 
Fixed Scroll view to Search
  • Loading branch information
@lazycoder1
lazycoder1 authored Jun 24, 2024
2 parents 1aa3f91 + 870a2bc commit 36772d2
Show file tree
Hide file tree
Showing 3 changed files with 101 additions and 50 deletions.
78 changes: 51 additions & 27 deletions src/components/common/chip/ChipDropdown.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -26,11 +26,24 @@ function ChipDropdown(props: ChipProps) {

const color = isMoreSelected ? 'dark-700' : 'white';
const [icon, setIcon] = useState<string | null>(NETWORK_ICON_MAP[selectedNetwork]);
const [searchTerm, setSearchTerm] = useState<string>('');
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 (
<div className="text-sm">
<Menu as="div" className="relative inline-block text-left ">
Expand Down Expand Up @@ -61,35 +74,46 @@ function ChipDropdown(props: ChipProps) {
leaveFrom="transform opacity-100 scale-100"
leaveTo="transform opacity-0 scale-95"
>
<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">
<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">
<div className='max-h-56 overflow-y-auto rounded-md p-2'>
<div className="flex flex-col py-1">
{dropdownNetworkList.map(({ name, key, iconPath }, index) => (
<Menu.Item key={key}>
{({ active }) => (
<a
onClick={() => {
setIsMoreSelected(true);
onClickFcn(key);
setIcon(iconPath);
}}
className={`
${active ? 'bg-gray-100 text-gray-900' : 'text-gray-700'} +
'block flex items-center gap-3 px-4 py-2 text-sm'
`}
>
<img
src={iconPath}
alt=""
style={{
height: '12px',
width: '12px',
<input
type="text"
className="px-3 py-1 rounded-md mb-2 focus:outline-none focus:border-primary-400 w-40 text-sm"
placeholder="Search Chains..."
value={searchTerm}
onChange={(e) => setSearchTerm(e.target.value)}
/>

{/* Rendering filtered network items */}
{filteredNetworks.map(({ name, key, iconPath }, index) => (
<Menu.Item key={key}>
{({ active }) => (
<a
onClick={() => {
setIsMoreSelected(true);
onClickFcn(key);
setIcon(iconPath);
}}
/>
{name}
</a>
)}
</Menu.Item>
))}
className={`
${active ? 'bg-gray-100 text-gray-900' : 'text-gray-700'}
block flex items-center gap-3 px-4 py-2 text-sm
`}
>
<img
src={iconPath}
alt=""
style={{
height: '12px',
width: '12px',
}}
/>
{name}
</a>
)}
</Menu.Item>
))}
</div>
</div>
</Menu.Items>
</Transition>
Expand Down
66 changes: 43 additions & 23 deletions src/components/global/searchblock/Options.tsx
View file
Original file line number Diff line number Diff line change
@@ -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<boolean>(false);
const toggler = () => setOpen((v) => !v);
const [searchTerm, setSearchTerm] = useState<string>('');
const [filteredNetworks, setFilteredNetworks] = useState<any[]>(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<HTMLInputElement>) => {
setSearchTerm(e.target.value);
};
return (
<div className="relative z-0">
<div className="py-3 px-4 border-r border-dark-200 bg-white flex items-center gap-1 text-md" role="button" onClick={toggler}>
Expand All @@ -22,29 +41,30 @@ function Options({ networkValue, setNetworkValue }: { networkValue: number; setN
{open && (
<div className="">
<div onClick={toggler} className="fixed inset-0 z-100 bg-transparent" />
<div className="absolute left-0 bg-white w-[200%] py-1 border-dark-200 shadow-200">
<div className="absolute left-0 bg-white py-1 border-dark-200 shadow-200 w-52">
<div className="flex flex-col">
<div
onClick={() => handleValue(-1)}
className="flex items-center whitespace-no-wrap gap-2 py-2 px-3 hover:bg-dark-600/10 text-md"
role="button"

>
<img src={"/zap2.svg"} alt="" style={{ width: '20px', height: 'auto' }} />
<span>Quick search</span>
</div>
{NETWORK_LIST.map(({ name, key, iconPath, iconPathInverted }, index) => (
<div
onClick={() => 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}
>
<img src={iconPath} alt="" style={{ width: '20px', height: 'auto' }} />
<span>{name}</span>
<div className="flex items-center gap-2 py-2 px-3 hover:bg-dark-600/10 text-md">
<input
type="text"
className="px-0.5 py-0.5 rounded-md focus:outline-none focus:border-primary-400"
placeholder="Search Chains..."
value={searchTerm}
onChange={handleSearchChange}
/>
</div>
))}

<div className='max-h-40 overflow-y-auto rounded-md p-2'>
{filteredNetworks.map(({ name, iconPath }, index) => (
<div
onClick={() => 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}
>
<img src={iconPath} alt="" style={{ width: '20px', height: 'auto' }} />
<span>{name}</span>
</div>
))}
</div>
</div>
</div>
</div>
Expand Down
7 changes: 7 additions & 0 deletions src/styles/main.sass
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand Down

0 comments on commit 36772d2

Please sign in to comment.