feat: master diff (#34760)

* feat: master diff * fix: SSR support * feat: use controlled checkbox
ant-design · Mar 28, 2022 · 9f3773f · 9f3773f
1 parent 8489c59
commit 9f3773f
Show file tree

Hide file tree

Showing 2 changed files with 41 additions and 0 deletions.
diff --git a/site/theme/template/Layout/DynamicTheme/Diff.tsx b/site/theme/template/Layout/DynamicTheme/Diff.tsx
@@ -0,0 +1,33 @@
+import React, { FC } from 'react';
+
+type DiffProps = {
+  show: boolean;
+};
+
+const Diff: FC<DiffProps> = ({ show }) => {
+  if (typeof window === 'undefined') {
+    return null;
+  }
+
+  const src = window.location.href.replace(/(https?:\/\/)[^/]+/, '$1ant.design');
+
+  return (
+    <iframe
+      title="master-diff"
+      style={{
+        position: 'absolute',
+        width: '100vw',
+        height: document.body.scrollHeight,
+        top: 0,
+        left: 0,
+        pointerEvents: 'none',
+        opacity: show ? '30%' : '0',
+        zIndex: 10,
+      }}
+      src={src}
+      frameBorder={0}
+    />
+  );
+};
+
+export default Diff;
diff --git a/site/theme/template/Layout/DynamicTheme/index.tsx b/site/theme/template/Layout/DynamicTheme/index.tsx
@@ -3,10 +3,12 @@ import { TinyColor } from '@ctrl/tinycolor';
 import { Drawer, Form, Input, Button, InputNumber, Checkbox, Space } from 'antd';
 import { useIntl } from 'react-intl';
 import { BugOutlined, EyeOutlined } from '@ant-design/icons';
+import { useState } from 'react';
 import { SeedToken } from '../../../../../components/_util/theme';
 import defaultSeedToken from '../../../../../components/_util/theme/themes/default';
 import { PresetColors } from '../../../../../components/_util/theme/interface';
 import Preview from './Preview';
+import Diff from './Diff';
 
 export interface ThemeConfigProps {
   componentName: string;
@@ -19,6 +21,7 @@ export default ({ onChangeTheme, defaultToken, componentName }: ThemeConfigProps
   const [visible, setVisible] = React.useState(false);
   const [previewVisible, setPreviewVisible] = React.useState(false);
   const [form] = Form.useForm();
+  const [showDiff, setShowDiff] = useState(false);
 
   const keys = Object.keys(defaultSeedToken);
 
@@ -28,6 +31,8 @@ export default ({ onChangeTheme, defaultToken, componentName }: ThemeConfigProps
 
   return (
     <>
+      {/* FIXME: need to be removed before published */}
+      <Diff show={showDiff} />
       <div
         style={{
           position: 'fixed',
@@ -55,6 +60,9 @@ export default ({ onChangeTheme, defaultToken, componentName }: ThemeConfigProps
         title={formatMessage({ id: 'app.theme.switch.dynamic' })}
         extra={
           <Space>
+            <Checkbox checked={showDiff} onChange={e => setShowDiff(e.target.checked)}>
+              Diff
+            </Checkbox>
             <Button icon={<EyeOutlined />} onClick={() => setPreviewVisible(true)} />
             <Button onClick={form.submit} type="primary">
               Submit