m/metamask-extension
1
0
Fork 0
mirror of https://github.com/kremalicious/metamask-extension.git synced 2024-12-23 09:52:26 +01:00
Code

Merge pull request #9702 from darkwing/swaps-keyboard-dropdown

Browse Source 
Swaps keyboard dropdown
This commit is contained in:
David Walsh 2020-10-26 11:10:19 -05:00 committed by GitHub
commit a111702f28
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
4 changed files with 18 additions and 7 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

15
ui/app/pages/swaps/dropdown-search-list/dropdown-search-list.js
View File

@ -29,12 +29,16 @@ export default function DropdownSearchList ({
const t = useContext(I18nContext) const t = useContext(I18nContext)
const [isOpen, setIsOpen] = useState(false) const [isOpen, setIsOpen] = useState(false)
const [selectedItem, setSelectedItem] = useState(startingItem) const [selectedItem, setSelectedItem] = useState(startingItem)
const close = useCallback(() => {
setIsOpen(false)
onClose && onClose()
}, [onClose])
const onClickItem = useCallback((item) => { const onClickItem = useCallback((item) => {
onSelect && onSelect(item) onSelect && onSelect(item)
setSelectedItem(item) setSelectedItem(item)
setIsOpen(false) close()
onClose && onClose() }, [onSelect, close])
}, [onClose, onSelect])
const onClickSelector = useCallback(() => { const onClickSelector = useCallback(() => {
if (!isOpen) { if (!isOpen) {
@ -58,9 +62,10 @@ export default function DropdownSearchList ({
}, [externallySelectedItem, selectedItem, prevExternallySelectedItem]) }, [externallySelectedItem, selectedItem, prevExternallySelectedItem])
return ( return (
<div <button
className={classnames('dropdown-search-list', className)} className={classnames('dropdown-search-list', className)}
onClick={onClickSelector} onClick={onClickSelector}
onKeyUp={(e) => e.key === 'Escape' && close()}
> >
{!isOpen && ( {!isOpen && (
<div <div
@ -124,7 +129,7 @@ export default function DropdownSearchList ({
/> />
</> </>
)} )}
</div> </button>
) )
} }

2
ui/app/pages/swaps/dropdown-search-list/index.scss
View File

@ -1,6 +1,8 @@
.dropdown-search-list { .dropdown-search-list {
flex-flow: column; flex-flow: column;
border: none; border: none;
background: unset;
padding: 0;
&__search-list-open { &__search-list-open {
margin: 24px; margin: 24px;

3
ui/app/pages/swaps/searchable-item-list/index.scss
View File

@ -66,7 +66,8 @@
border-bottom: 1px solid $Grey-100; border-bottom: 1px solid $Grey-100;
} }
&:hover { &:hover,
&:focus {
background: $Grey-000; background: $Grey-000;
} }

5
ui/app/pages/swaps/searchable-item-list/item-list/item-list.component.js
View File

@ -34,6 +34,7 @@ export default function ItemList ({
return null return null
} }
const onClick = () => onClickItem && onClickItem(result)
const { const {
iconUrl, iconUrl,
identiconAddress, identiconAddress,
@ -47,11 +48,13 @@ export default function ItemList ({
} = result } = result
return ( return (
<div <div
tabIndex="0"
className={classnames('searchable-item-list__item', { className={classnames('searchable-item-list__item', {
'searchable-item-list__item--selected': selected, 'searchable-item-list__item--selected': selected,
'searchable-item-list__item--disabled': disabled, 'searchable-item-list__item--disabled': disabled,
})} })}
onClick={() => onClickItem && onClickItem(result)} onClick={onClick}
onKeyUp={(e) => e.key === 'Enter' && onClick()}
key={`searchable-item-list-item-${i}`} key={`searchable-item-list-item-${i}`}
> >
{(iconUrl || primaryLabel) && (<UrlIcon url={iconUrl} name={primaryLabel} />)} {(iconUrl || primaryLabel) && (<UrlIcon url={iconUrl} name={primaryLabel} />)}