Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Fixed Scroll view to Search #151

Merged
merged 3 commits into from
Jun 24, 2024
+101 −50
Merged

Fixed Scroll view to Search #151

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
8c5f37f
Fix(Options-menu) - Fixed options menu
shashankcoc Jun 21, 2024
aa6c594
Fix(Scroll-to-Search) - Fixed Scroll view to Search View
shashankcoc Jun 24, 2024
870a2bc
Code Improvement
shashankcoc Jun 24, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
78 changes: 51 additions & 27 deletions src/components/common/chip/ChipDropdown.tsx
View file
Open in desktop
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
Open in desktop
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
Open in desktop
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