mirror/gradio
2
0
Fork 0
mirror of https://github.com/gradio-app/gradio.git synced 2024-12-09 02:00:44 +08:00
Code Issues Packages Projects Releases Wiki Activity

add copy functionality to json (#1205)

Browse Source 
* add copy functionality to json

* fix light mode
This commit is contained in:
pngwn 2022-05-10 18:02:06 +01:00 committed by GitHub
parent 4ca48284bb
commit 11740dd329
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
1 changed files with 35 additions and 2 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

37
ui/packages/json/src/JSON.svelte
View File

@ -1,14 +1,47 @@
<script lang="ts">
import { onDestroy } from "svelte";
import { fade } from "svelte/transition";
import JSONNode from "./JSONNode.svelte";
export let value: any = {};
export let style: string = "";
let copied = false;
let timer: NodeJS.Timeout;
function copy_feedback() {
copied = true;
if (timer) clearTimeout(timer);
timer = setTimeout(() => {
copied = false;
}, 1000);
}
async function handle_copy() {
if ("clipboard" in navigator) {
await navigator.clipboard.writeText(JSON.stringify(value, null, 2));
copy_feedback();
}
}
onDestroy(() => {
if (timer) clearTimeout(timer);
});
</script>
<button
class="font-sans absolute right-0 top-0 py-1 px-2 rounded-bl-lg shadow-sm text-xs text-gray-500 flex items-center pointer-events-none bg-white z-20 border-l border-b border-gray-100"
on:click={handle_copy}
class="transition-color overflow-hidden font-sans absolute right-0 top-0 rounded-bl-lg shadow-sm text-xs text-gray-500 flex items-center bg-white z-20 border-l border-b border-gray-100"
>
copy to clipboard
<span class="py-1 px-2">copy to clipboard</span>
{#if copied}
<span
in:fade={{ duration: 100 }}
out:fade={{ duration: 350 }}
class="font-bold dark:text-green-400 text-green-600 py-1 px-2 absolute block w-full text-left bg-white dark:bg-gray-900"
>COPIED</span
>
{/if}
</button>
<JSONNode {value} depth={0} />