@antv/dumi-theme-antv 0.3.0-beta.12 → 0.3.0-beta.14

package/dist/slots/Banner/index.module.less

@@ -0,0 +1,449 @@
+@import '../_.less';
+
+.wrapper {
+  min-height: 650px;
+  max-height: 803px;
+  background: linear-gradient(225deg, #ffffff, #f0f5ff);
+  height: calc(94vh);
+  position: relative;
+  overflow: hidden;
+
+  .content {
+    .container1440;
+    height: 100%;
+    position: relative;
+  }
+
+  .text {
+    position: relative;
+    top: 26%;
+    z-index: 1;
+    margin-left: 4.5%;
+
+    .title {
+      font-size: 3.4em; //2.875em;
+      font-weight: 800;
+      color: rgba(0, 0, 0, 1);
+      position: relative;
+    }
+
+    .description {
+      margin-top: 0.83%; //12px;
+      margin-bottom: 0px;
+      color: rgba(106, 123, 140, 1);
+      font-size: 1.14em;
+      font-weight: 200;
+      position: relative;
+      width: 40%;
+      max-width: 700px;
+    }
+
+    .buttons {
+      display: flex;
+      margin-top: 5.56%;
+
+      .buttonLink+.buttonLink {
+        margin-left: 16px;
+      }
+
+      .buttonLink {
+        cursor: pointer;
+        border-radius: 50px;
+        min-width: 134px;
+        padding-left: 15px;
+        padding-right: 15px;
+        height: 40px;
+        z-index: 10;
+        position: relative;
+        transition: all 0.3s;
+        border: 1px solid @primary-color;
+        color: @primary-color;
+        background: transparent;
+        text-align: center;
+        font-size: 1.14em;
+        line-height: 40px;
+
+        &:hover {
+          color: tint(@primary-color, 25%);
+          border: 1px solid tint(@primary-color, 25%);
+          background-color: fade(@primary-color, 3%);
+        }
+
+        &.primary {
+          border: none;
+          outline: none;
+          color: #fff;
+          background: linear-gradient(60deg,
+              fade(@primary-color, 70%),
+              shade(@primary-color, 20%));
+          opacity: 0.8;
+          box-shadow: 0 8px 10px fade(@primary-color, 20%);
+
+          &:hover {
+            opacity: 1;
+          }
+        }
+      }
+
+      .videoButtonWrapper {
+        margin-left: 16px;
+        width: fit-content;
+        height: fit-content;
+
+        .videoButton {
+          width: 40px;
+          height: 40px;
+          background-size: contain;
+          border: 1px solid @primary-color;
+          border-radius: 20px;
+          transition: all 0.15s;
+          display: flex;
+          cursor: pointer;
+          overflow: hidden;
+
+          .videoButtonIcon {
+            margin-left: 12px;
+            font-size: 16px;
+            color: @primary-color;
+            line-height: 44px;
+          }
+
+          .videoButtonText {
+            line-height: 40px;
+            margin-left: 10px;
+            color: @primary-color;
+          }
+
+          &:hover {
+            width: 134px;
+          }
+        }
+      }
+
+      .githubWrapper {
+        margin-left: 16px;
+        display: flex;
+
+        :global {
+          .gh-btn {
+            width: 40px;
+            height: 40px;
+            border-radius: 20px;
+            padding: 9px;
+            border: 1px solid #ced4d9;
+            background: transparent;
+            text-decoration: none;
+            white-space: nowrap;
+            display: flex;
+            cursor: pointer;
+            float: left;
+            transition: all 0.15s;
+
+            &:hover {
+              background: #f2f4f5;
+            }
+
+            .gh-ico {
+              width: 16px;
+              height: 16px;
+              margin-left: 2px;
+              margin-top: 2px;
+              background-image: url(https://gw.alipayobjects.com/mdn/rms_f8c6a0/afts/img/A*Nk9mQ48ZoZMAAAAAAAAAAABkARQnAQ);
+              background-size: 100% 100%;
+              background-repeat: no-repeat;
+              box-sizing: border-box;
+              cursor: pointer;
+              color: #333;
+            }
+
+            .gh-text {
+              display: none;
+            }
+          }
+
+          .gh-count {
+            position: relative;
+            display: none;
+            /* hidden to start */
+            margin-left: 52px;
+            margin-top: 7px;
+            border: 1px solid #d4d4d4;
+            padding: 2px 10px;
+            font-weight: 700;
+            height: 65%;
+            border-radius: 5px;
+            color: rgb(49, 70, 89);
+
+            &:hover {
+              background: #f2f4f5;
+              transition: all 0.15s;
+            }
+          }
+
+          .gh-count:hover,
+          .gh-count:focus {
+            color: #4183c4;
+          }
+
+          .gh-count:before,
+          .gh-count:after {
+            content: '';
+            position: absolute;
+            display: inline-block;
+            width: 0;
+            height: 0;
+            border-color: transparent;
+            border-style: solid;
+          }
+
+          .gh-count:before {
+            top: 50%;
+            left: -3px;
+            margin-top: -5px;
+            border-width: 4px 4px 4px 0;
+            border-right-color: #fafafa;
+          }
+
+          .gh-count:after {
+            top: 50%;
+            border-width: 5px 5px 5px 0;
+            border-right-color: #d4d4d4;
+            left: -5px;
+            z-index: -1;
+            margin-top: -6px;
+          }
+        }
+      }
+    }
+  }
+
+  .notifications {
+    width: 80%;
+    display: flex;
+    bottom: 40px;
+    position: absolute;
+    z-index: 3;
+    margin-left: 4.5%;
+  }
+
+  .teaser {
+    display: flex;
+    position: absolute;
+    right: 0;
+    margin-top: -300px;
+    width: 52%;
+    max-width: 598px;
+    height: 324px;
+    margin: auto;
+    margin-top: 0;
+    top: 0;
+    bottom: 0;
+
+    .teaserimg {
+      width: 100%;
+      height: auto;
+      position: relative;
+    }
+  }
+
+  .backLeftBottom {
+    position: absolute;
+    left: -8%;
+    bottom: -20px;
+  }
+}
+
+.videoModal {
+  :global {
+    .video-react-big-play-button {
+      display: none !important;
+    }
+
+    .video-react-control-bar {
+      border-radius: 0 0 4px 4px;
+    }
+
+    .video-react {
+      border-radius: 4px;
+
+      .video-react-video {
+        border-radius: 4px;
+      }
+    }
+
+    .ant-modal-close {
+      right: -50px;
+      top: -12px;
+      color: #fff;
+    }
+
+    .anticon-info-circle {
+      display: none !important;
+    }
+
+    .ant-modal-confirm-btns {
+      display: none !important;
+    }
+
+    .ant-modal-confirm-title {
+      display: none !important;
+    }
+
+    .ant-modal-close {
+      display: block !important;
+    }
+
+    .ant-modal-body {
+      padding: 0 !important;
+
+      .ant-modal-confirm-content {
+        margin: 0 !important;
+      }
+    }
+  }
+}
+
+@media (max-width: 1144px) {
+  .wrapper {
+    .teaser {
+      transition: 0.3s all;
+      margin: auto;
+      margin-top: 0;
+      top: 0;
+      bottom: 0;
+    }
+  }
+}
+
+@media (max-width: 900px) {
+  .wrapper {
+    .content {
+      width: 91.46%;
+      margin-left: 4.27%;
+      margin-bottom: 5%;
+      position: relative;
+    }
+
+    .text {
+      top: 16.7%;
+      text-align: center;
+      margin-left: 0;
+
+      .title {
+        font-size: 2.857em;
+        margin-left: 0;
+      }
+
+      .description {
+        width: 100%;
+        max-width: 100%;
+        margin-left: 0;
+        font-size: 1em;
+      }
+
+      .buttons {
+        display: inline-flex;
+
+        .more {
+          font-size: 1em;
+        }
+
+        .githubIframe {
+          height: 40px;
+        }
+
+        .videoButtonWrapper {
+          width: fit-content;
+          height: fit-content;
+        }
+      }
+    }
+
+    .notifications {
+      width: 100%;
+      display: block;
+      bottom: 20px;
+      height: 44px;
+      overflow: hidden;
+    }
+
+    .teaser {
+      width: 100%;
+      max-width: 1200px;
+      margin-top: auto;
+      margin-left: unset;
+      margin-right: unset;
+      right: unset;
+      top: 30%;
+      display: flex;
+      justify-content: center;
+
+      .teaserimg {
+        width: 40%;
+        margin-left: unset;
+        margin-right: unset;
+      }
+    }
+  }
+}
+
+@media (max-width: 786px) {
+  .wrapper {
+    .text {
+      .buttons {
+        .videoButtonWrapper {
+          display: none;
+        }
+      }
+    }
+  }
+}
+
+@media (max-width: 510px) {
+  .wrapper {
+    .text {
+      .buttons {
+        margin-top: 70%;
+
+        .githubWrapper {
+          display: none;
+        }
+      }
+    }
+
+    .teaser {
+      width: 100%;
+      top: 5%;
+
+      .teaserimg {
+        width: 100%;
+      }
+    }
+
+    .backLeftBottom {
+      display: none;
+    }
+  }
+}
+
+@media (max-width: 480px) {
+  .wrapper {
+    .text {
+      height: 70%;
+
+      .buttons {
+        bottom: 10px;
+        margin-top: unset;
+        z-index: 1;
+        position: absolute;
+        left: 0;
+        width: 100%;
+        justify-content: center;
+      }
+    }
+
+    .teaser {
+      top: 14%;
+    }
+  }
+}

package/dist/slots/Cases/index.js

@@ -2,12 +2,12 @@ function _extends() { _extends = Object.assign ? Object.assign.bind() : function
 
 import React from 'react';
 import { ArrowLeftOutlined, ArrowRightOutlined } from '@ant-design/icons';
-import { Link } from 'dumi';
+import { Link, FormattedMessage } from 'dumi';
 import Slider from 'react-slick';
 import cx from 'classnames';
 import 'slick-carousel/slick/slick.css';
 import 'slick-carousel/slick/slick-theme.css';
-import { useT, ic } from "../hooks";
+import { ic } from "../hooks";
 import styles from "./index.module.less";
 export var Cases = function Cases(_ref) {
   var _ref$cases = _ref.cases,
@@ -68,10 +68,14 @@ export var Cases = function Cases(_ref) {
         href: app.link,
         target: "_blank",
         rel: "noopener noreferrer"
-      }, useT('查看详情')) : /*#__PURE__*/React.createElement(Link, {
+      }, /*#__PURE__*/React.createElement(FormattedMessage, {
+        id: "\u67E5\u770B\u8BE6\u60C5"
+      })) : /*#__PURE__*/React.createElement(Link, {
         className: styles.detail,
         to: app.link ? app.link : ''
-      }, useT('查看详情')));
+      }, /*#__PURE__*/React.createElement(FormattedMessage, {
+        id: "\u67E5\u770B\u8BE6\u60C5"
+      })));
       return /*#__PURE__*/React.createElement("div", {
         className: styles.appWrapper,
         key: ic(app.title)

package/dist/slots/CodeEditor/Toolbar.js

@@ -21,12 +21,11 @@ function _typeof(obj) { "@babel/helpers - typeof"; return _typeof = "function" =
 import React, { useEffect, useState } from 'react';
 import { CodeSandboxOutlined, PlayCircleOutlined, ThunderboltOutlined } from '@ant-design/icons';
 import { Typography, Tooltip } from 'antd';
-import { useLocale } from 'dumi';
+import { useLocale, FormattedMessage } from 'dumi';
 import { getParameters } from 'codesandbox/lib/api/define';
 import stackblitzSdk from '@stackblitz/sdk';
 import { ping } from "../utils";
 import { extractImportDeps, getCodeSandboxConfig, getStackblitzConfig, getRiddleConfig } from "./utils";
-import { useT } from "../hooks";
 import styles from "./Toolbar.module.less";
 var Paragraph = Typography.Paragraph;
 export var EDITOR_TABS;
@@ -93,20 +92,26 @@ export var Toolbar = function Toolbar(_ref) {
     name: "data",
     value: JSON.stringify(riddlePrefillConfig)
   }), /*#__PURE__*/React.createElement(Tooltip, {
-    title: useT('在 Riddle 中打开')
+    title: /*#__PURE__*/React.createElement(FormattedMessage, {
+      id: "\u5728 Riddle \u4E2D\u6253\u5F00"
+    })
   }, /*#__PURE__*/React.createElement("input", {
     type: "submit",
     value: "Create New Riddle with Prefilled Data",
     className: styles.riddle
   }))) : null, /*#__PURE__*/React.createElement(Tooltip, {
-    title: useT('在 StackBlitz 中打开')
+    title: /*#__PURE__*/React.createElement(FormattedMessage, {
+      id: "\u5728 StackBlitz \u4E2D\u6253\u5F00"
+    })
   }, /*#__PURE__*/React.createElement(ThunderboltOutlined, {
     className: styles.stackblitz,
     onClick: function onClick() {
       stackblitzSdk.openProject(stackblitzPrefillConfig);
     }
   })), /*#__PURE__*/React.createElement(Tooltip, {
-    title: useT('在 CodeSandbox 中打开')
+    title: /*#__PURE__*/React.createElement(FormattedMessage, {
+      id: "\u5728 CodeSandbox \u4E2D\u6253\u5F00"
+    })
   }, /*#__PURE__*/React.createElement("form", {
     action: "https://codesandbox.io/api/v1/sandboxes/define",
     method: "POST",
@@ -130,7 +135,9 @@ export var Toolbar = function Toolbar(_ref) {
       marginLeft: 6
     }
   }), /*#__PURE__*/React.createElement(Tooltip, {
-    title: useT('执行代码')
+    title: /*#__PURE__*/React.createElement(FormattedMessage, {
+      id: "\u6267\u884C\u4EE3\u7801"
+    })
   }, /*#__PURE__*/React.createElement(PlayCircleOutlined, {
     onClick: onExecuteCode,
     style: {

package/dist/slots/CodeEditor/index.js

@@ -133,10 +133,12 @@ export var CodeEditor = function CodeEditor(_ref) {
 
 
     execute(compiled, containerId, playground === null || playground === void 0 ? void 0 : playground.container, replaceId);
-  }, 300), [containerId, currentEditorTab]);
+  }, 300), [exampleId, currentEditorTab]); // 案例变化的时候，修改期待吗
+
   useEffect(function () {
     setCode(source);
-  }, [source]);
+  }, [exampleId]); // 代码变化的时候，运行代码
+
   useEffect(function () {
     executeCode(code);
   }, [code]);
@@ -149,6 +151,12 @@ export var CodeEditor = function CodeEditor(_ref) {
       }, 100));
     }
 
+    return function () {
+      dom && clear(dom);
+    };
+  }, []); // 生命周期
+
+  useEffect(function () {
     onReady();
 
     if (playground !== null && playground !== void 0 && playground.playgroundDidMount) {
@@ -156,7 +164,6 @@ export var CodeEditor = function CodeEditor(_ref) {
     }
 
     return function () {
-      dom && clear(dom);
       onDestroy();
 
       if (playground !== null && playground !== void 0 && playground.playgroundWillUnmount) {
@@ -175,16 +182,22 @@ export var CodeEditor = function CodeEditor(_ref) {
         setEditorTabs([EDITOR_TABS.JAVASCRIPT, EDITOR_TABS.DATA]);
         setData(data);
       });
+    } else {
+      setEditorTabs([EDITOR_TABS.JAVASCRIPT]);
     }
-  }, []);
-  useEffect(function () {
-    if (monacoRef.current) {
-      var v = currentEditorTab === EDITOR_TABS.JAVASCRIPT ? code : JSON.stringify(data, null, 2);
-      monacoRef.current.setValue(v);
-    }
-  }, [currentEditorTab]);
-  var onCodeChange = useCallback(function (value) {
-    if (currentEditorTab === EDITOR_TABS.JAVASCRIPT) {
+  }, [exampleId]); // 切换 tab
+
+  var onTabChange = useCallback(function (tab) {
+    setCurrentEditorTab(tab);
+  }, [exampleId]); // useEffect(() => {
+  //   if (monacoRef.current) {
+  //     const v = currentEditorTab === EDITOR_TABS.JAVASCRIPT ? code : JSON.stringify(data, null, 2);
+  //     monacoRef.current.setValue(v);
+  //   }
+  // }, [currentEditorTab]);
+
+  var onCodeChange = useCallback(function (value, event) {
+    if (!event.isFlush && currentEditorTab === EDITOR_TABS.JAVASCRIPT) {
       setCode(value);
     }
   }, [currentEditorTab]);
@@ -202,7 +215,7 @@ export var CodeEditor = function CodeEditor(_ref) {
     onExecuteCode: function onExecuteCode() {
       return executeCode(code);
     },
-    onEditorTabChange: setCurrentEditorTab,
+    onEditorTabChange: onTabChange,
     onToggleFullscreen: onFullscreen
   }), /*#__PURE__*/React.createElement("div", {
     className: styles.monaco,
@@ -210,9 +223,9 @@ export var CodeEditor = function CodeEditor(_ref) {
       height: 'calc(100% - 36px)'
     }
   }, /*#__PURE__*/React.createElement(MonacoEditor, {
-    language: currentEditorTab === EDITOR_TABS.JAVASCRIPT ? 'javascript' : 'json' // value={currentEditorTab === EDITOR_TABS.JAVASCRIPT ? code : JSON.stringify(data, null, 2)}
+    language: currentEditorTab === EDITOR_TABS.JAVASCRIPT ? 'javascript' : 'json',
+    value: currentEditorTab === EDITOR_TABS.JAVASCRIPT ? code : JSON.stringify(data, null, 2) // defaultValue={code}
     ,
-    defaultValue: code,
     path: relativePath,
     loading: /*#__PURE__*/React.createElement(Loading, null),
     options: {

package/dist/slots/CodePreview/CodeHeader.js

@@ -12,7 +12,7 @@ export var CodeHeader = function CodeHeader(_ref) {
     ghost: false,
     title: title // todo 编辑地址各种各样，需要有单独的配置，暂时关闭！
     // subTitle={
-    //   <Tooltip title={useT('在 GitHub 上编辑')}>
+    //   <Tooltip title={<FormattedMessage id="在 GitHub 上编辑" />}>
     //     <a
     //       href={getGithubSourceURL(githubUrl, relativePath, 'examples')}
     //       target="_blank"

package/dist/slots/CodePreview/index.js

@@ -1,6 +1,6 @@
 import React from 'react';
 import { Result } from 'antd';
-import { useT } from "../hooks";
+import { FormattedMessage } from 'dumi';
 import styles from "./index.module.less";
 
 function getErrorMessage(e) {
@@ -30,7 +30,9 @@ export var CodePreview = function CodePreview(_ref) {
   }), error ? /*#__PURE__*/React.createElement(Result, {
     className: styles.result,
     status: "error",
-    title: useT('演示代码报错，请检查'),
+    title: /*#__PURE__*/React.createElement(FormattedMessage, {
+      id: "\u6F14\u793A\u4EE3\u7801\u62A5\u9519\uFF0C\u8BF7\u68C0\u67E5"
+    }),
     subTitle: /*#__PURE__*/React.createElement("pre", null, getErrorMessage(error))
   }) : null));
 };

package/dist/slots/CodeRunner/index.js

@@ -19,6 +19,7 @@ import { CodePreview } from "../CodePreview";
 import { CodeHeader } from "../CodePreview/CodeHeader";
 import { getDemoInfo } from "./utils";
 import { NotFound } from "../404";
+import { ic } from "../hooks";
 
 /**
  * 代码编辑器 + 代码预览区域
@@ -58,7 +59,7 @@ export var CodeRunner = function CodeRunner(_ref) {
 
   var locale = useLocale();
   var header = /*#__PURE__*/React.createElement(CodeHeader, {
-    title: title[locale.id],
+    title: ic(title),
     relativePath: relativePath,
     githubUrl: githubUrl
   });

package/dist/slots/Companies/index.d.ts

@@ -4,7 +4,7 @@ declare type Company = {
     img: string;
 };
 interface CompaniesProps {
-    title: string;
+    title: any;
     companies: Company[];
     className?: string;
     style?: React.CSSProperties;