p-sw/pswui
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix: add className prop in LoadedCode to accept hidden class of TabContent

Browse Source
This commit is contained in:
p-sw 2024-06-03 14:08:10 +09:00
parent dc2c02a41b
commit 59d6e9aaa0
1 changed files with 58 additions and 55 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

113
packages/react/src/components/LoadedCode.tsx
View File

@ -2,67 +2,70 @@ import { useRef, useEffect, useState, forwardRef } from "react";
import hljs from "highlight.js"; import hljs from "highlight.js";
import { Button } from "@components/Button"; import { Button } from "@components/Button";
import { useToast } from "@components/Toast"; import { useToast } from "@components/Toast";
import { twMerge } from "tailwind-merge";
export const GITHUB = "https://raw.githubusercontent.com/p-sw/ui/main"; export const GITHUB = "https://raw.githubusercontent.com/p-sw/ui/main";
export const LoadedCode = forwardRef<HTMLPreElement, { from: string }>( export const LoadedCode = forwardRef<
({ from }, outRef) => { HTMLPreElement,
const [state, setState] = useState<string | undefined | null>(); { from: string; className?: string }
const { toast } = useToast(); >(({ from, className }, outRef) => {
const [state, setState] = useState<string | undefined | null>();
const { toast } = useToast();
useEffect(() => { useEffect(() => {
(async () => { (async () => {
const res = await fetch(from); const res = await fetch(from);
const text = await res.text(); const text = await res.text();
setState(text); setState(text);
})(); })();
}, [from]); }, [from]);
const ref = useRef<HTMLPreElement | null>(null); const ref = useRef<HTMLPreElement | null>(null);
useEffect(() => { useEffect(() => {
if (state && ref.current && !ref.current.dataset.highlighted) { if (state && ref.current && !ref.current.dataset.highlighted) {
hljs.configure({ ignoreUnescapedHTML: true }); hljs.configure({ ignoreUnescapedHTML: true });
hljs.highlightElement(ref.current); hljs.highlightElement(ref.current);
} }
}, [state]); }, [state]);
return ( return (
<pre <pre
className={`relative hljs w-full h-64 rounded-lg ${ className={twMerge(
!state ? "animate-pulse" : "" `relative hljs w-full h-64 rounded-lg ${!state ? "animate-pulse" : ""}`,
}`} className
ref={ref} )}
ref={ref}
>
<Button
preset="default"
size="icon"
className="sticky float-right top-0 text-black dark:text-white"
onClick={() => {
navigator.clipboard.writeText(state ?? "");
toast({
title: "Copied",
description: "The code has been copied to your clipboard.",
status: "success",
});
}}
> >
<Button <svg
preset="default" xmlns="http://www.w3.org/2000/svg"
size="icon" width="1.2em"
className="sticky float-right top-0 text-black dark:text-white" height="1.2em"
onClick={() => { viewBox="0 0 24 24"
navigator.clipboard.writeText(state ?? "");
toast({
title: "Copied",
description: "The code has been copied to your clipboard.",
status: "success",
});
}}
> >
<svg <path
xmlns="http://www.w3.org/2000/svg" fill="currentColor"
width="1.2em" d="M4 7v14h14v2H4c-1.1 0-2-.9-2-2V7zm16-4c1.1 0 2 .9 2 2v12c0 1.1-.9 2-2 2H8c-1.1 0-2-.9-2-2V5c0-1.1.9-2 2-2h3.18C11.6 1.84 12.7 1 14 1s2.4.84 2.82 2zm-6 0c-.55 0-1 .45-1 1s.45 1 1 1s1-.45 1-1s-.45-1-1-1m-4 4V5H8v12h12V5h-2v2z"
height="1.2em" />
viewBox="0 0 24 24" </svg>
> </Button>
<path <code className="language-tsx" ref={outRef}>
fill="currentColor" {state ?? null}
d="M4 7v14h14v2H4c-1.1 0-2-.9-2-2V7zm16-4c1.1 0 2 .9 2 2v12c0 1.1-.9 2-2 2H8c-1.1 0-2-.9-2-2V5c0-1.1.9-2 2-2h3.18C11.6 1.84 12.7 1 14 1s2.4.84 2.82 2zm-6 0c-.55 0-1 .45-1 1s.45 1 1 1s1-.45 1-1s-.45-1-1-1m-4 4V5H8v12h12V5h-2v2z" </code>
/> </pre>
</svg> );
</Button> });
<code className="language-tsx" ref={outRef}>
{state ?? null}
</code>
</pre>
);
}
);