Radish alpha
r
radicle-desktop
rad:z4D5UCArafTzTQpDZNQRuqswh3ury
Radicle desktop app
Radicle
Git
Commits › dc930ca
Add `Clipboard` component
Sebastian Martinez committed 1 year ago
commit dc930cafdd069cd10734327edd3984b08b395d6d
parent 10b055c
2 files changed +46 -24
added src/components/Clipboard.svelte
@@ -0,0 +1,41 @@
+ 
<script lang="ts">
+ 
  import debounce from "lodash/debounce";
+
+ 
  import Icon from "@app/components/Icon.svelte";
+ 
  import { writeToClipboard } from "@app/lib/invoke";
+
+ 
  interface Props {
+ 
    text: string;
+ 
  }
+
+ 
  const { text }: Props = $props();
+
+ 
  let icon: "copy" | "checkmark" = $state("copy");
+
+ 
  const restoreIcon = debounce(() => {
+ 
    icon = "copy";
+ 
  }, 800);
+
+ 
  export async function copy() {
+ 
    await writeToClipboard(text);
+ 
    icon = "checkmark";
+ 
    restoreIcon();
+ 
  }
+ 
</script>
+
+ 
<style>
+ 
  .clipboard {
+ 
    width: 1.5rem;
+ 
    height: 1.5rem;
+ 
    cursor: pointer;
+ 
    display: inline-flex;
+ 
    justify-content: center;
+ 
    align-items: center;
+ 
    user-select: none;
+ 
  }
+ 
</style>
+
+ 
<!-- svelte-ignore a11y_click_events_have_key_events -->
+ 
<span role="button" tabindex="0" class="clipboard" onclick={copy}>
+ 
  <Icon name={icon} />
+ 
</span>
modified src/components/CopyableId.svelte
@@ -1,28 +1,9 @@
<script lang="ts">
- 
  import type { ComponentProps } from "svelte";
+ 
  import Clipboard from "./Clipboard.svelte";
- 
  import debounce from "lodash/debounce";
- 
  import { writeText } from "@tauri-apps/plugin-clipboard-manager";
+ 
  const { id }: { id: string } = $props();
- 
  import Icon from "./Icon.svelte";
-
- 
  const {
- 
    id,
- 
  }: {
- 
    id: string;
- 
  } = $props();
-
- 
  let icon: ComponentProps<typeof Icon>["name"] = $state("copy");
-
- 
  const restoreIcon = debounce(() => {
- 
    icon = "copy";
- 
  }, 1000);
-
- 
  async function copy() {
- 
    await writeText(id);
- 
    icon = "checkmark";
- 
    restoreIcon();
- 
  }
+ 
  let clipboard: Clipboard;

</script>



<style>
@@ -40,8 +21,8 @@
<div

  role="button"

  tabindex="0"
- 
  onclick={copy}
+ 
  onclick={() => clipboard.copy()}

  class="copyable-id global-flex txt-small txt-monospace">

  {id}
- 
  <Icon name={icon} />
+ 
  <Clipboard bind:this={clipboard} text={id} />

</div>