docs: removed show more from code example

heroui-inc · Jun 30, 2024 · ea97a3a · ea97a3a
1 parent 9daef56
commit ea97a3a
Show file tree

Hide file tree

Showing 3 changed files with 11 additions and 67 deletions.
diff --git a/apps/docs/components/docs/components/code-demo/code-demo.tsx b/apps/docs/components/docs/components/code-demo/code-demo.tsx
@@ -40,7 +40,6 @@ interface CodeDemoProps extends UseCodeDemoProps, WindowResizerProps {
   displayMode?: "always" | "visible";
   isGradientBox?: boolean;
   gradientColor?: GradientBoxProps["color"];
-  defaultExpanded?: boolean;
   previewHeight?: string | number;
   overflow?: "auto" | "visible" | "hidden";
   className?: string;
@@ -61,7 +60,6 @@ export const CodeDemo: React.FC<CodeDemoProps> = ({
   typescriptStrict = false,
   showOpenInCodeSandbox,
   isGradientBox = false,
-  defaultExpanded = false,
   previewHeight = "auto",
   overflow = "visible",
   displayMode = "always",
@@ -138,7 +136,6 @@ export const CodeDemo: React.FC<CodeDemoProps> = ({
 
     const content = (
       <DynamicSandpack
-        defaultExpanded={defaultExpanded}
         files={files}
         highlightedLines={highlightedLines}
         showEditor={showEditor}
@@ -155,7 +152,6 @@ export const CodeDemo: React.FC<CodeDemoProps> = ({
     isInView,
     files,
     highlightedLines,
-    defaultExpanded,
     showPreview,
     showSandpackPreview,
     showOpenInCodeSandbox,

diff --git a/apps/docs/components/sandpack/code-viewer.tsx b/apps/docs/components/sandpack/code-viewer.tsx
@@ -2,8 +2,6 @@ import type {SandpackInitMode} from "@codesandbox/sandpack-react";
 
 import * as React from "react";
 import {FileTabs, useSandpack, useActiveCode, SandpackStack} from "@codesandbox/sandpack-react";
-import {Button} from "@nextui-org/react";
-import scrollIntoView from "scroll-into-view-if-needed";
 import {clsx} from "@nextui-org/shared-utils";
 import {Language} from "prism-react-renderer";
 
@@ -33,17 +31,15 @@ export interface CodeViewerProps {
   containerRef?: React.RefObject<HTMLDivElement>;
 }
 
-const INITIAL_HEIGHT = "200px";
+// const INITIAL_HEIGHT = "200px";
 
 export const SandpackCodeViewer = React.forwardRef<any, CodeViewerProps>(
-  ({showTabs, code: propCode, defaultExpanded = false, highlightedLines, containerRef}, ref) => {
+  ({showTabs, code: propCode, highlightedLines, containerRef}, ref) => {
     const {sandpack} = useSandpack();
     const {code} = useActiveCode();
 
     const {activeFile} = sandpack;
 
-    const [isExpanded, setIsExpanded] = React.useState(defaultExpanded);
-
     // const id = React.useId();
     // hack to make sure we re-render the code editor and change current file
     // TODO: open an issue on sandpack-react
@@ -56,60 +52,34 @@ export const SandpackCodeViewer = React.forwardRef<any, CodeViewerProps>(
 
     const shouldShowTabs = showTabs ?? sandpack.visibleFilesFromProps.length > 1;
 
-    const lineCount = lineCountRef.current[activeFile];
-    const isExpandable = lineCount > 7 || isExpanded;
     const fileExt = activeFile.split(".").pop() as Language;
 
     // const isAppFile = activeFile.includes("App");
 
-    React.useEffect(() => {
-      if (containerRef && containerRef?.current !== null && isExpandable) {
-        containerRef.current.style.height = INITIAL_HEIGHT;
-      }
-    }, [containerRef]);
+    // React.useEffect(() => {
+    //   if (containerRef && containerRef?.current !== null) {
+    //     containerRef.current.style.height = INITIAL_HEIGHT;
+    //   }
+    // }, [containerRef]);
 
     // React.useEffect(() => {
     //   setInternalKey(getId());
     // }, [propCode, code]);
 
     React.useEffect(() => {
-      if (defaultExpanded && containerRef && containerRef?.current !== null) {
-        const container = containerRef?.current;
-
-        container.style.height = "auto";
-      }
-    }, [defaultExpanded]);
-
-    const handleExpand = () => {
-      const nextIsExpanded = !isExpanded;
-
-      setIsExpanded(nextIsExpanded);
       if (containerRef && containerRef?.current !== null) {
         const container = containerRef?.current;
 
-        if (nextIsExpanded) {
-          container.style.height = "auto";
-        } else {
-          container.style.height = INITIAL_HEIGHT;
-          scrollIntoView(container, {
-            behavior: "smooth",
-            scrollMode: "if-needed",
-            block: "center",
-          });
-        }
+        container.style.height = "auto";
       }
-    };
+    }, []);
 
     return (
       <>
         <div className="h-full">
           <SandpackStack>
             {shouldShowTabs ? <FileTabs /> : null}
-            <div
-              className={clsx("sp-code-viewer max-h-[600px] overflow-y-scroll", {
-                "is-expanded": isExpanded,
-              })}
-            >
+            <div className={clsx("sp-code-viewer max-h-[600px] overflow-y-scroll")}>
               {/*
                * Disabled in favor of Codeblock due to performance issues & font size on ios 
                *   
@@ -127,33 +97,14 @@ export const SandpackCodeViewer = React.forwardRef<any, CodeViewerProps>(
               /> */}
               <Codeblock
                 ref={ref}
-                className={isExpandable ? "pb-16" : "pb-2"}
+                className={"pb-2"}
                 codeString={propCode || code}
                 language={fileExt}
                 metastring={highlightedLines && `{${highlightedLines}}`}
               />
             </div>
           </SandpackStack>
         </div>
-        {isExpandable && (
-          <div
-            className={clsx(
-              "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",
-              {"h-10 bottom-0 pb-2": isExpanded},
-              {"h-full inset-0": !isExpanded},
-            )}
-          >
-            <Button
-              className="bg-[#2a2838] shadow-md font-sans dark:bg-zinc-800 text-zinc-300 dark:text-zinc-400 hover:!text-zinc-200"
-              radius="full"
-              size="sm"
-              variant="flat"
-              onClick={handleExpand}
-            >
-              {isExpanded ? "Show less" : "Show more"}
-            </Button>
-          </div>
-        )}
       </>
     );
   },

diff --git a/apps/docs/components/sandpack/sandpack.tsx b/apps/docs/components/sandpack/sandpack.tsx
@@ -17,7 +17,6 @@ export interface SandpackProps extends UseSandpackProps {
   showEditor?: boolean;
   showCopyCode?: boolean;
   showReportBug?: boolean;
-  defaultExpanded?: boolean;
   showOpenInCodeSandbox?: boolean;
   children?: React.ReactNode;
 }
@@ -29,7 +28,6 @@ export const Sandpack: FC<SandpackProps> = ({
   typescriptStrict = false,
   showPreview = false,
   showEditor = true,
-  defaultExpanded = false,
   showOpenInCodeSandbox = true,
   showReportBug = true,
   showCopyCode = true,
@@ -66,7 +64,6 @@ export const Sandpack: FC<SandpackProps> = ({
               <SandpackCodeViewer
                 containerRef={editorContainerRef}
                 decorators={decorators}
-                defaultExpanded={defaultExpanded}
                 highlightedLines={highlightedLines}
                 showTabs={showTabs}
               />