Skip to content

Minor overflow adjustments #2095

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

Merged
jacogr merged 6 commits into from
Jan 7, 2020
Merged

Minor overflow adjustments #2095

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
6 commits
Select commit Hold shift + click to select a range
d1351b6
Minor overflow adjustments
jacogr Jan 7, 2020
ef6b20f
Default names to uppercase
jacogr Jan 7, 2020
6f79484
s/normal/none/
jacogr Jan 7, 2020
632bb68
isAddress check for text formatting
jacogr Jan 7, 2020
73af3db
Adjust caching with isAddress info
jacogr Jan 7, 2020
c22ce2e
Overflow to bottom
jacogr Jan 7, 2020
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
38 changes: 23 additions & 15 deletions packages/react-components/src/AccountName.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -33,26 +33,28 @@ interface Props extends BareProps {
withShort?: boolean;
}

const nameCache: Map<string, React.ReactNode> = new Map();
const nameCache: Map<string, [boolean, React.ReactNode]> = new Map();

function defaultOrAddr (defaultName = '', _address: AccountId | AccountIndex | Address | string | Uint8Array, _accountIndex?: AccountIndex | null): [React.ReactNode, boolean] {
function defaultOrAddr (defaultName = '', _address: AccountId | AccountIndex | Address | string | Uint8Array, _accountIndex?: AccountIndex | null): [React.ReactNode, boolean, boolean] {
const accountId = _address.toString();
const cached = nameCache.get(accountId);

if (cached) {
return [cached, false];
const [isAddressCached, nameCached] = cached;

return [nameCached, false, isAddressCached];
}

const accountIndex = (_accountIndex || '').toString();
const [isAddress,, extracted] = getAddressName(accountId, null, defaultName);

if (isAddress && accountIndex) {
nameCache.set(accountId, accountIndex);
nameCache.set(accountId, [true, accountIndex]);

return [accountIndex, false];
return [accountIndex, false, true];
}

return [extracted, !isAddress];
return [extracted, !isAddress, isAddress];
}

function AccountName ({ children, className, defaultName, label, onClick, override, style, toggle, value, withShort }: Props): React.ReactElement<Props> {
Expand All @@ -70,17 +72,18 @@ function AccountName ({ children, className, defaultName, label, onClick, overri
const address = useMemo((): string => (value || '').toString(), [value]);

const _extractName = (accountId?: AccountId, accountIndex?: AccountIndex): React.ReactNode => {
const [name, isLocal] = defaultOrAddr(defaultName, accountId || address, withShort ? null : accountIndex);
const [name, isLocal, isAddress] = defaultOrAddr(defaultName, accountId || address, withShort ? null : accountIndex);

return (
<div className='via-identity'>
<div className={`name ${isLocal ? 'isLocal' : 'isAddress'}`}>{name}</div>
<span className={`name ${isLocal ? 'isLocal' : (isAddress ? 'isAddress' : '')}`}>{name}</span>
</div>
);
};

const [name, setName] = useState<React.ReactNode>((): React.ReactNode => _extractName());

// determine if we have a registrar or not - registrars are allowed to approve
useEffect((): void => {
if (allAccounts && registrars) {
setIsRegistrar(
Expand All @@ -95,6 +98,7 @@ function AccountName ({ children, className, defaultName, label, onClick, overri
}
}, [allAccounts, registrars]);

// find the id of our registrar in the list
useEffect((): void => {
if (registrars && judgementAccountId) {
setRegistrarIndex(
Expand All @@ -111,6 +115,7 @@ function AccountName ({ children, className, defaultName, label, onClick, overri
}
}, [judgementAccountId, registrars]);

// set the actual nickname, localname, accountIndex, accountId
useEffect((): void => {
const { accountId, accountIndex, identity, nickname } = info || {};

Expand Down Expand Up @@ -183,20 +188,18 @@ function AccountName ({ children, className, defaultName, label, onClick, overri
: 'gray'
}
/>
<div className={`name ${isGood && 'isGood'}`}>{displayName.toUpperCase()}</div>
<span className={`name ${isGood && 'isGood'}`}>{displayName}</span>
</div>
);

nameCache.set(address, displayName);
nameCache.set(address, [false, displayName]);
setName((): React.ReactNode => name);
} else {
setName((): React.ReactNode => _extractName(accountId, accountIndex));
}
} else if (nickname) {
const name = nickname.toUpperCase();

nameCache.set(address, name);
setName(name);
nameCache.set(address, [false, nickname]);
setName(nickname);
} else {
setName(defaultOrAddr(defaultName, accountId || address, withShort ? null : accountIndex));
}
Expand Down Expand Up @@ -274,15 +277,20 @@ function AccountName ({ children, className, defaultName, label, onClick, overri
export default styled(AccountName)`
.via-identity {
display: inline-block;
overflow: hidden;
text-overflow: ellipsis;
vertical-align: bottom;
width: 100%;

.name {
display: inline-block;
font-weight: normal !important;
filter: grayscale(100%);
opacity: 0.6;
text-transform: uppercase;

&.isAddress {
font-family: monospace;
text-transform: none;
}

&.isGood,
Expand Down
8 changes: 8 additions & 0 deletions packages/react-components/src/Table.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -125,6 +125,14 @@ export default styled(Table)`

&.top {
vertical-align: top;

>.ui--AddressMini.padded:first-child {
margin-top: -0.25rem;

.ui--AddressMini-label {
margin-bottom: 0.25rem;
}
}
}

&.toppad {
Expand Down