@@ -2,9 +2,6 @@ import type {SandpackInitMode} from "@codesandbox/sandpack-react";
22
33import * as React from "react" ;
44import { FileTabs , useSandpack , useActiveCode , SandpackStack } from "@codesandbox/sandpack-react" ;
5- import { Button } from "@nextui-org/react" ;
6- import scrollIntoView from "scroll-into-view-if-needed" ;
7- import { clsx } from "@nextui-org/shared-utils" ;
85import { Language } from "prism-react-renderer" ;
96
107import { HighlightedLines } from "./types" ;
@@ -33,83 +30,42 @@ export interface CodeViewerProps {
3330 containerRef ?: React . RefObject < HTMLDivElement > ;
3431}
3532
36- const INITIAL_HEIGHT = "200px" ;
37-
3833export const SandpackCodeViewer = React . forwardRef < any , CodeViewerProps > (
39- ( { showTabs, code : propCode , defaultExpanded = false , highlightedLines, containerRef} , ref ) => {
34+ ( { showTabs, code : propCode , highlightedLines, containerRef} , ref ) => {
4035 const { sandpack} = useSandpack ( ) ;
4136 const { code} = useActiveCode ( ) ;
4237
4338 const { activeFile} = sandpack ;
4439
45- const [ isExpanded , setIsExpanded ] = React . useState ( defaultExpanded ) ;
46-
4740 // const id = React.useId();
4841 // hack to make sure we re-render the code editor and change current file
4942 // TODO: open an issue on sandpack-react
5043 // const [internalKey, setInternalKey] = React.useState(() => id);
51- const lineCountRef = React . useRef < { [ key : string ] : number } > ( { } ) ;
52-
53- if ( ! lineCountRef . current [ activeFile ] ) {
54- lineCountRef . current [ activeFile ] = code . split ( "\n" ) . length ;
55- }
5644
5745 const shouldShowTabs = showTabs ?? sandpack . visibleFilesFromProps . length > 1 ;
5846
59- const lineCount = lineCountRef . current [ activeFile ] ;
60- const isExpandable = lineCount > 7 || isExpanded ;
6147 const fileExt = activeFile . split ( "." ) . pop ( ) as Language ;
6248
6349 // const isAppFile = activeFile.includes("App");
6450
65- React . useEffect ( ( ) => {
66- if ( containerRef && containerRef ?. current !== null && isExpandable ) {
67- containerRef . current . style . height = INITIAL_HEIGHT ;
68- }
69- } , [ containerRef ] ) ;
70-
7151 // React.useEffect(() => {
7252 // setInternalKey(getId());
7353 // }, [propCode, code]);
7454
7555 React . useEffect ( ( ) => {
76- if ( defaultExpanded && containerRef && containerRef ? .current !== null ) {
77- const container = containerRef ? .current ;
56+ if ( containerRef && containerRef . current !== null ) {
57+ const container = containerRef . current ;
7858
7959 container . style . height = "auto" ;
8060 }
81- } , [ defaultExpanded ] ) ;
82-
83- const handleExpand = ( ) => {
84- const nextIsExpanded = ! isExpanded ;
85-
86- setIsExpanded ( nextIsExpanded ) ;
87- if ( containerRef && containerRef ?. current !== null ) {
88- const container = containerRef ?. current ;
89-
90- if ( nextIsExpanded ) {
91- container . style . height = "auto" ;
92- } else {
93- container . style . height = INITIAL_HEIGHT ;
94- scrollIntoView ( container , {
95- behavior : "smooth" ,
96- scrollMode : "if-needed" ,
97- block : "center" ,
98- } ) ;
99- }
100- }
101- } ;
61+ } , [ ] ) ;
10262
10363 return (
10464 < >
10565 < div className = "h-full" >
10666 < SandpackStack >
10767 { shouldShowTabs ? < FileTabs /> : null }
108- < div
109- className = { clsx ( "sp-code-viewer max-h-[600px] overflow-y-scroll" , {
110- "is-expanded" : isExpanded ,
111- } ) }
112- >
68+ < div className = "sp-code-viewer max-h-[600px] overflow-y-scroll" >
11369 { /*
11470 * Disabled in favor of Codeblock due to performance issues & font size on ios
11571 *
@@ -127,33 +83,14 @@ export const SandpackCodeViewer = React.forwardRef<any, CodeViewerProps>(
12783 /> */ }
12884 < Codeblock
12985 ref = { ref }
130- className = { isExpandable ? "pb-16" : "pb-2" }
86+ className = "pb-2"
13187 codeString = { propCode || code }
13288 language = { fileExt }
13389 metastring = { highlightedLines && `{${ highlightedLines } }
13490 />
13591 </ div >
13692 </ SandpackStack >
13793 </ div >
138- { isExpandable && (
139- < div
140- className = { clsx (
141- "w-full absolute z-10 py-1 px-4 flex items-center justify-center bg-gradient-to-t from-code-background to-code-background/10 dark:to-code-background/50" ,
142- { "h-10 bottom-0 pb-2" : isExpanded } ,
143- { "h-full inset-0" : ! isExpanded } ,
144- ) }
145- >
146- < Button
147- className = "bg-[#2a2838] shadow-md font-sans dark:bg-zinc-800 text-zinc-300 dark:text-zinc-400 hover:!text-zinc-200"
148- radius = "full"
149- size = "sm"
150- variant = "flat"
151- onClick = { handleExpand }
152- >
153- { isExpanded ? "Show less" : "Show more" }
154- </ Button >
155- </ div >
156- ) }
15794 </ >
15895 ) ;
15996 } ,
0 commit comments