<commit_before>/*
 *  This file is part of CoCalc: Copyright © 2020 Sagemath, Inc.
 *  License: AGPLv3 s.t. "Commons Clause" – see LICENSE.md for details
 */

import { CSSProperties, ReactNode, useEffect, useMemo, useState } from "react";
import { Button, Input, Tooltip } from "antd";
import { CopyToClipboard } from "react-copy-to-clipboard";
import { Icon } from "@cocalc/frontend/components/icon";

interface Props {
  value: string;
  style?: CSSProperties;
  label?: ReactNode;
  size?: "large" | "middle" | "small";
}

export default function CopyToClipBoard({ value, style, size, label }: Props) {
  console.log("size = ", size);
  const [copied, setCopied] = useState<boolean>(false);
  useEffect(() => {
    setCopied(false);
  }, [value]);

  let copy = useMemo(() => {
    const btn = (
      <CopyToClipboard text={value} onCopy={() => setCopied(true)}>
        <Button
          size={size}
          style={{
            margin:
              "-2px -12px" /* hack so doesn't conflict w/ style of Input below*/,
          }}
        >
          <Icon name={copied ? "clipboard-check" : "clipboard"} />
        </Button>
      </CopyToClipboard>
    );
    if (!copied) return btn;
    return (
      <Tooltip title="Copied!" defaultVisible>
        {btn}
      </Tooltip>
    );
  }, [value, copied, size]);

  const input = (
    <Input
      size={size}
      readOnly<commit_msg>get rid of log message<commit_after>/*
 *  This file is part of CoCalc: Copyright © 2020 Sagemath, Inc.
 *  License: AGPLv3 s.t. "Commons Clause" – see LICENSE.md for details
 */

import { CSSProperties, ReactNode, useEffect, useMemo, useState } from "react";
import { Button, Input, Tooltip } from "antd";
import { CopyToClipboard } from "react-copy-to-clipboard";
import { Icon } from "@cocalc/frontend/components/icon";

interface Props {
  value: string;
  style?: CSSProperties;
  label?: ReactNode;
  size?: "large" | "middle" | "small";
}

export default function CopyToClipBoard({ value, style, size, label }: Props) {
  const [copied, setCopied] = useState<boolean>(false);
  useEffect(() => {
    setCopied(false);
  }, [value]);

  let copy = useMemo(() => {
    const btn = (
      <CopyToClipboard text={value} onCopy={() => setCopied(true)}>
        <Button
          size={size}
          style={{
            margin:
              "-2px -12px" /* hack so doesn't conflict w/ style of Input below*/,
          }}
        >
          <Icon name={copied ? "clipboard-check" : "clipboard"} />
        </Button>
      </CopyToClipboard>
    );
    if (!copied) return btn;
    return (
      <Tooltip title="Copied!" defaultVisible>
        {btn}
      </Tooltip>
    );
  }, [value, copied, size]);

  const input = (
    <Input
      size={size}
      readOnly
{'fraction_non_alphanumeric': 0.15095702419646082, 'fraction_numerical': 0.00577825929938606, 'mean_word_length': 2.664021164021164, 'pattern_counts': {'":': 0, '<': 21, '<?xml version=': 0, '>': 25, 'https://': 0, 'lorem ipsum': 0, 'www.': 0, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 0, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '3310850', 'n_tokens_mistral': 892, 'n_tokens_neox': 885, 'n_words': 245}