fix: demo editor style and live re-render for mobile theme (#2025)

* fix: theme-mobile sorce code editor style * feat: move Tooltip to slots * refactor: make tooltip as internal component * chore: clear diff for pnpm-lock.yaml * fix: mobile live demo --------- Co-authored-by: PeachScript <scdzwyxst@gmail.com>
umijs · Mar 24, 2024 · e227b15 · e227b15
1 parent 1eea8b4
commit e227b15
Show file tree

Hide file tree

Showing 8 changed files with 122 additions and 22 deletions.
diff --git a/package.json b/package.json
@@ -120,6 +120,7 @@
     "raw-loader": "^4.0.2",
     "rc-motion": "^2.7.3",
     "rc-tabs": "^12.10.0",
+    "rc-tooltip": "^6.1.3",
     "rc-tree": "^5.7.9",
     "rc-util": "^5.37.0",
     "react-copy-to-clipboard": "^5.1.0",

diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
diff --git a/src/client/theme-api/types.ts b/src/client/theme-api/types.ts
@@ -50,6 +50,10 @@ export interface IPreviewerProps {
    * react node of current demo
    */
   children: ReactNode;
+  /**
+   * private field, do not use it in your code
+   */
+  _live_in_iframe: boolean;
   [key: string]: any;
 }
 

diff --git a/src/client/theme-default/builtins/Previewer/index.tsx b/src/client/theme-default/builtins/Previewer/index.tsx
@@ -16,7 +16,7 @@ const Previewer: FC<IPreviewerProps> = (props) => {
     loading: liveDemoLoading,
     setSource: setLiveDemoSource,
   } = useLiveDemo(props.asset.id, {
-    iframe: Boolean(props.iframe),
+    iframe: Boolean(props.iframe || props._live_in_iframe),
     containerRef: demoContainer,
   });
 

diff --git a/src/client/theme-default/slots/PreviewerActions/index.less b/src/client/theme-default/slots/PreviewerActions/index.less
@@ -268,3 +268,50 @@
     display: none;
   }
 }
+
+.dumi-theme-default-tooltip {
+  position: fixed;
+  min-width: 30px;
+  margin-bottom: 8px;
+  box-sizing: border-box;
+
+  &-hidden {
+    display: none;
+  }
+
+  &-arrow {
+    border: 4px solid transparent;
+    opacity: 0.7;
+  }
+
+  &-placement-top {
+    .dumi-theme-default-tooltip-arrow {
+      border-top-color: #000;
+      transform: translate(-50%, 100%);
+    }
+  }
+
+  &-bottom {
+    .dumi-theme-default-tooltip-arrow {
+      border-bottom-color: #000;
+      transform: translateY(-50%, -100%);
+    }
+  }
+
+  &-content {
+    padding: 5px 8px;
+    color: #fff;
+    font-size: 13px;
+    line-height: 1.1;
+    white-space: nowrap;
+    background-color: #000;
+    opacity: 0.7;
+    border-radius: 2px;
+    box-shadow: 0 4px 10px rgba(0, 0, 0, 10%);
+    box-sizing: border-box;
+
+    @{dark-selector} & {
+      background-color: #222;
+    }
+  }
+}
diff --git a/src/client/theme-default/slots/PreviewerActions/index.tsx b/src/client/theme-default/slots/PreviewerActions/index.tsx
@@ -17,8 +17,28 @@ import SourceCode from 'dumi/theme/builtins/SourceCode';
 import PreviewerActionsExtra from 'dumi/theme/slots/PreviewerActionsExtra';
 import SourceCodeEditor from 'dumi/theme/slots/SourceCodeEditor';
 import Tabs from 'rc-tabs';
+import RcTooltip from 'rc-tooltip';
+import type { TooltipProps as RcTooltipProps } from 'rc-tooltip/lib/Tooltip';
 import React, { useRef, useState, type FC, type ReactNode } from 'react';
 import './index.less';
+
+export interface TooltipProps extends Omit<RcTooltipProps, 'overlay'> {
+  placement?: 'top' | 'bottom';
+  title?: React.ReactNode;
+}
+
+const Tooltip: FC<TooltipProps> = (props) => {
+  const { title, placement = 'top', ...rest } = props;
+  return (
+    <RcTooltip
+      prefixCls="dumi-theme-default-tooltip"
+      placement={placement}
+      {...rest}
+      overlay={title}
+    />
+  );
+};
+
 export interface IPreviewerActionsProps extends IPreviewerProps {
   /**
    * disabled actions
@@ -209,15 +229,18 @@ const PreviewerActions: FC<IPreviewerActionsProps> = (props) => {
                         });
                       }}
                       extra={
-                        <button
-                          type="button"
-                          className="dumi-default-previewer-editor-tip-btn"
-                          data-dumi-tooltip={intl.formatMessage({
+                        <Tooltip
+                          title={intl.formatMessage({
                             id: 'previewer.actions.code.editable',
                           })}
                         >
-                          <IconEdit />
-                        </button>
+                          <button
+                            type="button"
+                            className="dumi-default-previewer-editor-tip-btn"
+                          >
+                            <IconEdit />
+                          </button>
+                        </Tooltip>
                       }
                     />
                   ) : (
@@ -227,17 +250,20 @@ const PreviewerActions: FC<IPreviewerActionsProps> = (props) => {
                         // only show readonly tip for non-entry files
                         // because readonly entry file means live compile is not available for this demo tech stack
                         i !== 0 && (
-                          <button
-                            type="button"
-                            className="dumi-default-previewer-editor-tip-btn"
-                            data-dumi-tooltip={intl.formatMessage({
+                          <Tooltip
+                            title={intl.formatMessage({
                               id: 'previewer.actions.code.readonly',
                             })}
-                            data-readonly
                           >
-                            <span></span>
-                            <IconEdit />
-                          </button>
+                            <button
+                              type="button"
+                              className="dumi-default-previewer-editor-tip-btn"
+                              data-readonly
+                            >
+                              <span></span>
+                              <IconEdit />
+                            </button>
+                          </Tooltip>
                         )
                       }
                     >

diff --git a/suites/theme-mobile/src/builtins/Previewer/index.less b/suites/theme-mobile/src/builtins/Previewer/index.less
@@ -49,6 +49,23 @@
         }
       }
 
+      &-sources {
+        flex: 1;
+        height: 0;
+      }
+
+      &-tabs {
+        height: 100%;
+
+        .dumi-default-tabs {
+          &-content,
+          &-tabpane,
+          &-content-holder {
+            height: 100%;
+          }
+        }
+      }
+
       &-action-btn > svg {
         width: 17px;
       }
@@ -73,10 +90,15 @@
     }
 
     .dumi-default-source-code {
+      height: 100%;
       flex: 1;
       min-height: 0;
       overflow: auto;
       border-bottom-right-radius: 0;
+
+      &-editor {
+        height: 100%;
+      }
     }
   }
 }
diff --git a/suites/theme-mobile/src/builtins/Previewer/index.tsx b/suites/theme-mobile/src/builtins/Previewer/index.tsx
@@ -38,6 +38,7 @@ const MobilePreviewer: FC<IPreviewerProps> = (props) => {
           ? `${themeConfig.deviceWidth}px`
           : undefined,
       }}
+      _live_in_iframe={mobile}
     >
       {mobile && (
         <Device