All files / src/components/elements/CopyableTruncatableText CopyableTruncatableText.tsx

0% Statements 0/2
0% Branches 0/14
0% Functions 0/1
0% Lines 0/2

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 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49                                                                                                 
import * as React from "react";
import { Box, Flex, Text, Link, Input } from "rimble-ui";
import { OpenInNew } from "@rimble/icons";
import { CopyToClipboard } from "../CopyToClipboard";
import { baseColors, colors } from "../../../themes/colors";
 
export interface CopyableTruncatableTextProps {
  text: string;
  fontFamily?: string;
  fontSize?: string | number;
  fontWeight?: string | number;
  size?: string;
  linkOutHref?: boolean;
  useInput?: boolean;
  copyButtonOverride?(copied: boolean): JSX.Element;
  linkOutButtonOverride?: JSX.Element;
}
 
export const CopyableTruncatableText: React.FunctionComponent<CopyableTruncatableTextProps> = (props) => {
  return (
    <Flex alignItems="center" justifyContent="start" width="100%" p={1}>
      {props.useInput ? (
        <Input value={props.text} readOnly width="100%" />
      ) : (
        <Text
          color={baseColors.black}
          fontFamily={props.fontFamily}
          fontSize={typeof props.fontSize === "undefined" ? 2 : props.fontSize}
          fontWeight={props.fontWeight || 3}
          lineHeight="solid"
          minHeight="14px"
          style={{ overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap" }}
        >
          {props.text}
        </Text>
      )}
 
      <Box pl={2}>
        <CopyToClipboard size={props.size || "24px"} text={props.text} buttonOverride={props.copyButtonOverride} />
      </Box>
      {props.linkOutHref && (
        <Link href={props.text} target="_blank" color={baseColors.black} hoverColor={colors.primary.base}>
          {props.linkOutButtonOverride || <OpenInNew size={props.size || "24px"} ml={2} />}
        </Link>
      )}
    </Flex>
  );
};