site: add code-hide Button for CodePreviewer (#44449)

* site: add code-hide Button for CodePreviewer

* fix: fix style

* add token

* fix: fix css props

* fix

* fix: fix

* fix: fix

* Update .dumi/theme/builtins/Previewer/CodePreviewer.tsx

Co-authored-by: MadCcc <1075746765@qq.com>
Signed-off-by: lijianan <574980606@qq.com>

* fix: fix

---------

Signed-off-by: lijianan <574980606@qq.com>
Co-authored-by: MadCcc <1075746765@qq.com>

.dumi/theme/builtins/Previewer/CodePreviewer.tsx

@@ -1,17 +1,21 @@
+/* eslint-disable jsx-a11y/no-noninteractive-tabindex */
+import React, { useContext, useEffect, useRef, useState } from 'react';
 import {
   CheckOutlined,
   LinkOutlined,
   SnippetsOutlined,
   ThunderboltOutlined,
+  UpOutlined,
 } from '@ant-design/icons';
 import type { Project } from '@stackblitz/sdk';
 import stackblitzSdk from '@stackblitz/sdk';
+import { Alert, Badge, Space, Tooltip } from 'antd';
+import { createStyles, css } from 'antd-style';
 import classNames from 'classnames';
 import { FormattedMessage, useSiteData } from 'dumi';
 import LZString from 'lz-string';
-import React, { useContext, useEffect, useRef, useState } from 'react';
 import CopyToClipboard from 'react-copy-to-clipboard';
-import { Alert, Badge, Space, Tooltip } from 'antd';
+
 import type { AntdPreviewerProps } from '.';
 import useLocation from '../../../hooks/useLocation';
 import BrowserFrame from '../../common/BrowserFrame';
@@ -63,6 +67,31 @@ function useShowRiddleButton() {
   return showRiddleButton;
 }
 
+const useStyle = createStyles(({ token }) => {
+  const { borderRadius } = token;
+  return {
+    codeHideBtn: css`
+      width: 100%;
+      height: 40px;
+      display: flex;
+      justify-content: center;
+      align-items: center;
+      border-radius: 0 0 ${borderRadius}px ${borderRadius}px;
+      border-top: 1px solid ${token.colorSplit};
+      color: ${token.colorTextSecondary};
+      transition: all 0.2s ease-in-out;
+      background-color: ${token.colorBgElevated};
+      cursor: pointer;
+      &:hover {
+        color: ${token.colorPrimary};
+      }
+      span {
+        margin-right: ${token.marginXXS}px;
+      }
+    `,
+  };
+});
+
 const CodePreviewer: React.FC<AntdPreviewerProps> = (props) => {
   const {
     asset,
@@ -86,6 +115,8 @@ const CodePreviewer: React.FC<AntdPreviewerProps> = (props) => {
   const { pkg } = useSiteData();
   const location = useLocation();
 
+  const { styles } = useStyle();
+
   const entryCode = asset.dependencies['index.tsx'].value;
   const showRiddleButton = useShowRiddleButton();
 
@@ -509,8 +540,12 @@ createRoot(document.getElementById('container')).render(<Demo />);
             sourceCode={entryCode}
             jsxCode={jsx}
             styleCode={style}
-            onCodeTypeChange={(type) => setCodeType(type)}
+            onCodeTypeChange={setCodeType}
           />
+          <div tabIndex={0} className={styles.codeHideBtn} onClick={() => setCodeExpand(false)}>
+            <UpOutlined />
+            <FormattedMessage id="app.demo.code.hide.simplify" />
+          </div>
         </section>
       )}
     </section>

.dumi/theme/common/CodePreview.tsx

@@ -1,8 +1,8 @@
 import React, { useEffect, useMemo } from 'react';
-import Prism from 'prismjs';
+import { Tabs } from 'antd';
 import toReactElement from 'jsonml-to-react-element';
 import JsonML from 'jsonml.js/lib/utils';
-import { Tabs } from 'antd';
+import Prism from 'prismjs';
 
 const LANGS = {
   tsx: 'TypeScript',
@@ -17,22 +17,16 @@ interface CodePreviewProps {
   onCodeTypeChange?: (activeKey: string) => void;
 }
 
-function toReactComponent(jsonML: any) {
+function toReactComponent(jsonML: any[]) {
   return toReactElement(jsonML, [
     [
       (node: any) => JsonML.isElement(node) && JsonML.getTagName(node) === 'pre',
-      (node: any, index: any) => {
-        // ref: https://github.com/benjycui/bisheng/blob/master/packages/bisheng/src/bisheng-plugin-highlight/lib/browser.js#L7
+      (node: any, index: number) => {
         const attr = JsonML.getAttributes(node);
-        return React.createElement(
-          'pre',
-          {
-            key: index,
-            className: `language-${attr.lang}`,
-          },
-          React.createElement('code', {
-            dangerouslySetInnerHTML: { __html: attr.highlighted },
-          }),
+        return (
+          <pre key={index} className={`language-${attr.lang}`}>
+            <code dangerouslySetInnerHTML={{ __html: attr.highlighted }} />
+          </pre>
         );
       },
     ],

.dumi/theme/common/styles/Demo.tsx

@@ -1,5 +1,5 @@
-import { css, Global } from '@emotion/react';
 import React from 'react';
+import { css, Global } from '@emotion/react';
 import { useTheme } from 'antd-style';
 
 const GlobalDemoStyles: React.FC = () => {

.dumi/theme/locales/en-US.json

@@ -31,6 +31,7 @@
   "app.demo.copied": "Copied!",
   "app.demo.code.show": "Show code",
   "app.demo.code.hide": "Hide code",
+  "app.demo.code.hide.simplify": "Hide",
   "app.demo.codepen": "Open in CodePen",
   "app.demo.codesandbox": "Open in CodeSandbox",
   "app.demo.stackblitz": "Open in Stackblitz",

.dumi/theme/locales/zh-CN.json

@@ -31,6 +31,7 @@
   "app.demo.copied": "复制成功",
   "app.demo.code.show": "显示代码",
   "app.demo.code.hide": "收起代码",
+  "app.demo.code.hide.simplify": "收起",
   "app.demo.codepen": "在 CodePen 中打开",
   "app.demo.codesandbox": "在 CodeSandbox 中打开",
   "app.demo.stackblitz": "在 Stackblitz 中打开",