react-icons/fi#FiCopy JavaScript Examples

Copy = ({ id, version, latestVersion }) => {
  const [showingCheck, setShowingCheck] = useState(false);

  let str = `winget install --id=${id} ${version == latestVersion ? "" : `-v "${version}"`} -e`;
  
  return (
    <div
      className={`${styles.copy} ${showingCheck ? styles.active : ""}`}
      onClick={() => {
        navigator.clipboard.writeText(str);
        setShowingCheck(true);
        setTimeout(() => {
          setShowingCheck(false);
        }, 2000);
      }}
    >
      <FiTerminal size={20} />
      {!showingCheck && (
        <>
          <span className={styles.installCommand}>{str}</span>
          <FiCopy className={styles.clipboard} size={16} />
        </>
      )}
      {showingCheck && (
        <>
          <span className={styles.copiedText}>Copied!</span>
          <FiCheckCircle className={styles.clipboard} size={16} />
        </>
      )}
    </div>
  );
}

GenericExport = ({ fileContent, displayedCommand, fileExtension, prioritiseDownload=false, tip }) => {
    const [copyText, setCopyText] = useState("Copy to clipboard");
    const [textboxContent, setTextboxContent] = useState();
    const [downloadId, setDownloadId] = useState(Math.floor(1000 + Math.random() * 9000));

    useEffect(() => {
        setCopyText("Copy to clipboard");

        setTextboxContent(displayedCommand ? displayedCommand.replace("$fileName", `winstall-${downloadId}.json`) : fileContent);
    }, [fileContent, displayedCommand, downloadId])

    return (
        <div className={styles.generate}>
            <textarea
                value={ textboxContent }
                readOnly
                onFocus={(e) => e.target.select()}
                onClick={(e) => e.target.select()}
                spellCheck={false}
                data-gramm_editor={false} // disable grammarly from showing up
            />

            { tip && (
                <div className={styles.tipContainer}>
                    <FiInfo/>
                    <p>{tip}</p>
                </div>
            )}

            <div className={`box`}>
                { !prioritiseDownload && (
                    <button className={`button accent`} onClick={() => handleCopy(textboxContent, setCopyText)}>
                        <FiCopy />
                        {copyText}
                    </button>
                )}

                <button className={`button dl ${prioritiseDownload ? 'accent' : ''}`}  onClick={() => {
                    handleDownload(fileContent, fileExtension, downloadId);
                    setDownloadId(Math.floor(1000 + Math.random() * 9000));

                    if(prioritiseDownload){
                        handleCopy(textboxContent);
                    }
                }}>
                    <FiDownload />
                    Download {fileExtension} {prioritiseDownload ? " + Copy to clipboard" : ""}
                </button>
            </div>
        </div>
    )
}

LinkDisplay = ({ content }) => {
  const chatLink = content.absoluteLink
    ? content.absoluteLink
    : `${window.location.protocol}//${window.location.host}${content.link}`;
  const textAreaRef = useRef(null);
  const [buttonText, setButtonText] = useState('Copy');
  const [darkMode] = useContext(ThemeContext);

  const copyCodeToClipboard = () => {
    textAreaRef.current.select();
    document.execCommand('copy');
    setButtonText('Copied');
  };

  const selectText = () => {
    textAreaRef.current.select();
  };

  return (
    <div className={styles.fullWidth}>
      <div className={styles.divider} />
      <span className={styles.pinDisplayMsg}>
        Anyone with the PIN or the Link can join your chat
      </span>
      <div
        className={`${styles.copyToClipboardContainer}
        ${!darkMode && styles.lightModeContainer}`}
      >
        <span className={styles.labelLinkTextArea}>Share chat link: </span>
        <FiLink className={styles.linkIcon} />
        <div className={styles.textAreaContainer}>
          <input
            ref={textAreaRef}
            value={chatLink}
            onClick={selectText}
            className={`${styles.linkTextArea}
            ${!darkMode && styles.lightTextArea}`}
            readOnly
          />
        </div>
        <div>
          <button
            className={`${styles.copyButton}
            ${!darkMode && styles.lightModeButton}`}
            onClick={copyCodeToClipboard}
          >
            <FiCopy className={styles.copyIcon} /> {buttonText}
          </button>
        </div>
      </div>
      <div
        className={`${styles.pinDisplay} ${darkMode ? styles.darkOpenLink : styles.lightOpenLink}`}
      >
        <span className={styles.pinValidMsg}>PIN (valid for 30 minutes)</span>
        <PinDisplay content={content.pin} />
      </div>
      <div className={styles.divider} />
      <div
        className={`${styles.openLink}
      ${darkMode ? styles.darkOpenLink : styles.lightOpenLink}`}
      >
        <a href={`${chatLink}`} target="_blank" rel="noopener noreferrer">
          Open chat <FiExternalLink />
        </a>
      </div>
    </div>
  );
}

export default function Contact({
  pubKey,
  myID,
  selected,
  label,
  hideTools,
  onClick,
}) {
  const iconColor = selected ? '#FFF' : primary45;
  const [hoverRef, isHovered] = useHover();
  const dispatch = useDispatch();
  const isSmallScreen = useIsSmallScreen();

  const styles = {
    outer: {
      paddingTop: 4,
      paddingBottom: 4,
    },
    userBlock: {
      backgroundColor: isHovered ? primary2 : '#FFF',
      color: primary4,
      fontSize: 18,
      fontFamily: 'Open Sans',
      lineHeight: '16px',
      display: 'flex',
      justifyContent: 'space-between',
      alignItems: 'center',
      padding: 8,
      borderRadius: 4,
      cursor: 'pointer',
    },
    left: {
      display: 'flex',
      justifyContent: 'flex-start',
      alignItems: 'center',
    },
    right: {
      display: hideTools ? 'none' : 'block',
    },
    iconHolder: {
      marginRight: 8,
    },
    youText: {
      fontSize: 16,
      fontWeight: 600,
    },
    key: {
      fontSize: 13,
    },
  };

  return (
    <div style={styles.outer} ref={hoverRef} onClick={onClick ? onClick : null}>
      <div style={styles.userBlock}>
        <div style={styles.left}>
          <div style={styles.iconHolder}>
            <Jdenticon address={pubKey} size={34} style={styles.icon} />
          </div>
          <div style={styles.adminNameHolder}>
            <div>
              <span style={styles.youText}>
                {myID === pubKey ? 'You' : label ? label : 'Unnamed'}
              </span>
            </div>
            <div style={styles.key}>
              {isSmallScreen ? pubKey.substr(0, 20) + '...' : pubKey}
            </div>
          </div>
        </div>
        <div style={styles.right}>
          <ToolItem
            className={'contactCopy'}
            defaultColor={iconColor}
            iconComponent={FiCopy}
            tooltip={'Copy'}
            size={15}
            changeColor={primary}
            onClick={() => {
              copyToClipboard(pubKey);
              notify('Contact user ID copied!', dispatch);
            }}
          />
          {myID !== pubKey ? (
            <ToolItem
              className={'contactDelete'}
              defaultColor={iconColor}
              iconComponent={FiTrash}
              tooltip={'Delete'}
              size={15}
              changeColor={errorColor}
              onClick={() => {
                dispatch(deleteContact(pubKey));
              }}
            />
          ) : null}
        </div>
      </div>
    </div>
  );
}

Instance = ({
  data,
  selected,
  onClick,
  onDelete,
  instanceIndex,
  onAccess,
  displayOnly,
}) => {
  const {address, isEncrypted, label} = data;
  const dispatch = useDispatch();
  const [hoverRef, isHovered] = useHover();
  const [mobileActionsVisible, setMobileActionsVisible] = useState(false);
  const [isLabelDialogVisible, setIsLabelDialogVisible] = useState(false);
  const isTouchDevice = !hasMouse;

  let backgroundColor = selected ? primary3 : '#FFF';

  if (isHovered && !selected) {
    backgroundColor = primary15;
  }

  const iconColor = selected ? '#FFF' : primary45;
  const styles = {
    paddingContainer: {
      paddingTop: 3,
      paddingBottom: 3,
    },
    outer: {
      backgroundColor: backgroundColor,
      color: iconColor,
      padding: 6,
      paddingTop: 6,
      fontFamily: 'Open Sans',
      cursor: 'pointer',
      borderRadius: 4,
    },
    container: {
      display: 'flex',
      justifyContent: 'space-between',
      alignItems: 'center',
    },
    address: {
      fontSize: 14,
      overflow: 'hidden',
      width: '40%',
      textOverflow: 'ellipsis',
      whiteSpace: 'nowrap',
    },
    tools: {
      display: displayOnly ? 'none' : 'flex',
      justifyContent: 'flex-end',
    },
    name: {
      fontSize: 16,
      height: 38,
      lineHeight: '19px',
      display: 'flex',
      alignItems: 'center',
    },
    icon: {
      marginRight: 4,
      flexShrink: 0,
    },
    importedTxt: {
      marginLeft: 6,
      fontSize: 13,
    },
    label: {
      fontWeight: 600,
    },
    nameHolder: {
      display: 'flex',
      flexDirection: 'column',
      alignItems: 'flex-start',
      justifyContent: 'center',
      lineHeight: '18px',
      position: 'relative',
      top: label ? -2 : null,
    },
  };

  const handleAddressCopy = async () => {
    await copyToClipboard(address);
    notify('Drive address copied to clipboard', dispatch);
  };

  const mobileActionItems = [
    {
      title: 'Open',
      onClick: () => {
        setMobileActionsVisible(false);
        onClick();
      },
      iconComponent: FiHardDrive,
    },
    {
      title: 'Set nickname',
      onClick: () => {
        setIsLabelDialogVisible(true);
        setMobileActionsVisible(false);
      },
      iconComponent: FiEdit,
    },
    {
      title: 'Manage users',
      onClick: () => {
        onAccess();
        setMobileActionsVisible(false);
      },
      iconComponent: FiUsers,
    },
    {
      title: 'Copy address',
      onClick: () => {
        handleAddressCopy();
        setMobileActionsVisible(false);
      },
      iconComponent: FiCopy,
    },
    {
      title: 'Delete',
      onClick: () => {
        onDelete();
        setMobileActionsVisible(false);
      },
      iconComponent: FiTrash,
      forceColor: lightErrorColor,
    },
  ];

  const thisDriveName = driveName(address);

  return (
    <div style={styles.paddingContainer} ref={hoverRef}>
      <div
        className={'drive'}
        style={styles.outer}
        onClick={(event) => {
          if (mobileActionsVisible) {
            return;
          }

          if (isTouchDevice) {
            setMobileActionsVisible(true);
          } else {
            event.stopPropagation();
            onClick();
          }
        }}>
        <MobileActionsDialog
          isVisible={mobileActionsVisible}
          name={thisDriveName}
          onClose={() => setMobileActionsVisible(false)}
          items={mobileActionItems}
        />
        <div style={styles.container}>
          <div style={styles.name}>
            <FiHardDrive
              className={'shareIcon'}
              color={iconColor}
              size={18}
              style={styles.icon}
            />
            <Pill
              title={isEncrypted ? 'private' : 'public'}
              inverted={selected}
            />
            <div style={styles.nameHolder}>
              {thisDriveName}
              {label ? <div style={styles.label}>[{label}]</div> : null}
            </div>
            {isHovered && !displayOnly && !isTouchDevice ? (
              <ToolItem
                className={'instanceLabel'}
                iconComponent={FiEdit}
                defaultColor={isHovered && selected ? '#FFF' : primary45}
                changeColor={primary}
                tooltip={'Set nickname'}
                onClick={() => setIsLabelDialogVisible(true)}
              />
            ) : null}
          </div>
          {!isTouchDevice ? (
            <div style={styles.tools}>
              <ToolItem
                className={'instanceAccess'}
                defaultColor={iconColor}
                iconComponent={FiUsers}
                size={15}
                changeColor={primary}
                onClick={() => onAccess()}
                tooltip={'Manage users'}
              />
              <ToolItem
                className={'instanceAddressCopy'}
                defaultColor={iconColor}
                iconComponent={FiCopy}
                size={15}
                changeColor={primary}
                tooltip={'Copy'}
                onClick={handleAddressCopy}
              />
              <ToolItem
                className={'instanceDelete'}
                defaultColor={iconColor}
                iconComponent={FiTrash}
                tooltip={'Delete'}
                size={15}
                changeColor={errorColor}
                onClick={() => onDelete()}
              />
            </div>
          ) : null}
        </div>
      </div>
      <LabelDriveDialog
        isVisible={isLabelDialogVisible}
        onClose={() => setIsLabelDialogVisible(false)}
        instance={data}
        instanceIndex={instanceIndex}
      />
    </div>
  );
}