Press n or j to go to the next uncovered block, b, p or k for the previous block.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 | import styled from "styled-components"; import { Flex } from "rimble-ui"; const DidPart1 = styled.span` overflow: hidden; text-overflow: ellipsis; white-space: nowrap; `; const DidPart2 = styled.span` flex-shrink: 0; `; export interface DidTruncateProps { did: string; alignRight?: boolean; endLength?: number; } export const DidTruncate: React.FunctionComponent<DidTruncateProps> = (props) => { const endLength = props.endLength || 6; const slice = props.did.length - endLength; const didPart1 = props.did.slice(0, slice); const didPart2 = props.did.slice(slice); return ( <Flex justifyContent={props.alignRight ? "flex-end" : "flex-start"} minWidth={0} flexShrink={0} width="100%"> <DidPart1>{didPart1}</DidPart1> <DidPart2>{didPart2}</DidPart2> </Flex> ); }; |