105 lines
3.2 KiB
JavaScript
105 lines
3.2 KiB
JavaScript
import React, { useState, useRef, useEffect } from 'react';
|
|
import Transition from '../utils/Transition';
|
|
|
|
function DropdownTransaction({ align, value, onChange }) {
|
|
const [dropdownOpen, setDropdownOpen] = useState(false);
|
|
|
|
const trigger = useRef(null);
|
|
const dropdown = useRef(null);
|
|
|
|
const changeValue = (val) => {
|
|
setDropdownOpen(false);
|
|
onChange(val);
|
|
};
|
|
|
|
// close on click outside
|
|
useEffect(() => {
|
|
const clickHandler = ({ target }) => {
|
|
if (!dropdown.current) return;
|
|
if (
|
|
!dropdownOpen ||
|
|
dropdown.current.contains(target) ||
|
|
trigger.current.contains(target)
|
|
)
|
|
return;
|
|
setDropdownOpen(false);
|
|
};
|
|
document.addEventListener('click', clickHandler);
|
|
return () => document.removeEventListener('click', clickHandler);
|
|
});
|
|
|
|
// close if the esc key is pressed
|
|
useEffect(() => {
|
|
const keyHandler = ({ keyCode }) => {
|
|
if (!dropdownOpen || keyCode !== 27) return;
|
|
setDropdownOpen(false);
|
|
};
|
|
document.addEventListener('keydown', keyHandler);
|
|
return () => document.removeEventListener('keydown', keyHandler);
|
|
});
|
|
|
|
return (
|
|
<div className="relative inline-flex">
|
|
<button
|
|
ref={trigger}
|
|
className="inline-flex justify-center items-center group"
|
|
aria-haspopup="true"
|
|
aria-expanded={dropdownOpen}
|
|
onClick={() => setDropdownOpen(!dropdownOpen)}
|
|
>
|
|
<div className="flex items-center truncate">
|
|
<span className="truncate font-medium text-indigo-500 group-hover:text-indigo-600">
|
|
{value}
|
|
</span>
|
|
<svg
|
|
className="w-3 h-3 shrink-0 ml-1 fill-current text-slate-400"
|
|
viewBox="0 0 12 12"
|
|
>
|
|
<path d="M5.9 11.4L.5 6l1.4-1.4 4 4 4-4L11.3 6z" />
|
|
</svg>
|
|
</div>
|
|
</button>
|
|
|
|
<Transition
|
|
className={`origin-top-right z-10 absolute top-full min-w-44 bg-white border border-slate-200 py-1.5 rounded shadow-lg overflow-hidden mt-1 ${
|
|
align === 'right' ? 'right-0' : 'left-0'
|
|
}`}
|
|
show={dropdownOpen}
|
|
enter="transition ease-out duration-200 transform"
|
|
enterStart="opacity-0 -translate-y-2"
|
|
enterEnd="opacity-100 translate-y-0"
|
|
leave="transition ease-out duration-200"
|
|
leaveStart="opacity-100"
|
|
leaveEnd="opacity-0"
|
|
>
|
|
<div
|
|
ref={dropdown}
|
|
onFocus={() => setDropdownOpen(true)}
|
|
onBlur={() => setDropdownOpen(false)}
|
|
>
|
|
<ul>
|
|
<li>
|
|
<span
|
|
className="font-medium text-sm text-slate-600 hover:text-slate-800 flex items-center py-1 px-3 cursor-pointer"
|
|
onClick={() => changeValue('Voiting')}
|
|
>
|
|
Voiting
|
|
</span>
|
|
</li>
|
|
<li>
|
|
<span
|
|
className="font-medium text-sm text-slate-600 hover:text-slate-800 flex items-center py-1 px-3 cursor-pointer"
|
|
onClick={() => changeValue('Unlocking')}
|
|
>
|
|
Unlocking
|
|
</span>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
</Transition>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
export default DropdownTransaction;
|