GlcoinCore/jam
1
0
Fork 0
mirror of https://github.com/joinmarket-webui/jam.git synced 2026-08-20 13:28:21 +02:00
Code Issues Projects Releases Packages Wiki Activity Actions 3

fix: spacing in jar overlay header and onKeyDown (#421)

Browse source 
* fix: spacing in jar overlay header

* fix: onKeyDown handling in jar overlay
This commit is contained in:
Thebora Kompanioni 2022-07-22 11:55:47 +02:00 • committed by GitHub
parent ad50747818
commit 24c0107036
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
2 changed files with 27 additions and 24 deletions
Download patch file Download diff file Expand all files Collapse all files

4
src/components/DisplayAccountsOverlay.module.css
View file

@ -16,8 +16,8 @@
.accounts-overlay-header-title {
display: inline-flex;
justify-content: space-between;
width: 8ch;
justify-content: center;
min-width: 8ch;
margin: 0 0.5rem;
}

47
src/components/DisplayAccountsOverlay.tsx
View file

@ -1,4 +1,4 @@
import React, { useEffect, useMemo, useState } from 'react'
import React, { useEffect, useMemo, useState, useCallback } from 'react'
import * as rb from 'react-bootstrap'
import { useTranslation } from 'react-i18next'
import { DisplayBranchHeader, DisplayBranchBody } from './DisplayBranch'
@ -26,33 +26,36 @@ export function DisplayAccountsOverlay({ accounts, selectedAccountIndex = 0, sho
setAccountIndex(selectedAccountIndex)
}, [selectedAccountIndex])
const nextAccount = () => {
const currentIndex = account === null ? 0 : accounts.indexOf(account)
setAccountIndex(currentIndex + 1 >= accounts.length ? 0 : currentIndex + 1)
}
const previousAccount = () => {
const currentIndex = account === null ? 0 : accounts.indexOf(account)
setAccountIndex(currentIndex - 1 < 0 ? accounts.length - 1 : currentIndex - 1)
}
const nextAccount = useCallback(
() => setAccountIndex((current) => (current + 1 >= accounts.length ? 0 : current + 1)),
[accounts]
)
const previousAccount = useCallback(
() => setAccountIndex((current) => (current - 1 < 0 ? accounts.length - 1 : current - 1)),
[accounts]
)
const onKeyDown = (e: KeyboardEvent) => {
if (e.code === 'ArrowLeft') previousAccount()
else if (e.code === 'ArrowRight') nextAccount()
}
const onKeyDown = useCallback(
(e: KeyboardEvent) => {
if (e.code === 'ArrowLeft') previousAccount()
else if (e.code === 'ArrowRight') nextAccount()
},
[previousAccount, nextAccount]
)
useEffect(() => {
if (!show) return
document.addEventListener('keydown', onKeyDown)
return () => document.removeEventListener('keydown', onKeyDown)
}, [show, onKeyDown])
if (!account) {
return <></>
}
return (
<rb.Offcanvas
className={styles['accounts-overlay']}
show={show}
onHide={onHide}
placement="bottom"
tabIndex={-1}
onKeyDown={onKeyDown}
>
<rb.Offcanvas className={styles['accounts-overlay']} show={show} onHide={onHide} placement="bottom" tabIndex={-1}>
<rb.Offcanvas.Header className={styles['accounts-overlay-header']}>
<div className="d-flex flex-1">
<rb.Col>
@ -70,7 +73,7 @@ export function DisplayAccountsOverlay({ accounts, selectedAccountIndex = 0, sho
<Sprite symbol="caret-left" width="24" height="24" />
</rb.Button>
<div className={`${styles['accounts-overlay-header-title']}`}>
{t('current_wallet_advanced.account')} <span className="ml-1">{account.account}</span>
{t('current_wallet_advanced.account')} <span className="ms-1">#{account.account}</span>
</div>
<rb.Button
variant="link"