@antv/dumi-theme-antv 0.3.0-beta.8 → 0.3.0

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

@@ -0,0 +1,26 @@
+import React from 'react';
+import { NotificationProps } from './Notification';
+import 'video-react/dist/video-react.css';
+declare type BannerButtonShape = 'round' | 'square';
+interface BannerButton {
+    text: string;
+    link: string;
+    style?: React.CSSProperties;
+    type?: string;
+    shape?: BannerButtonShape;
+}
+interface BannerProps {
+    coverImage?: React.ReactNode;
+    title: string;
+    description: string;
+    notifications?: NotificationProps[];
+    style?: React.CSSProperties;
+    className?: string;
+    video?: string;
+    showGithubStars?: boolean;
+    buttons?: BannerButton[];
+    onCloseVideo?: () => void;
+    onPlayVideo?: () => void;
+}
+declare const Banner: React.FC<BannerProps>;
+export default Banner;

package/dist/slots/Banner/index.js

@@ -0,0 +1,184 @@
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
+
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+
+function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
+
+function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
+
+function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
+
+function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
+
+function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
+
+function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) { arr2[i] = arr[i]; } return arr2; }
+
+function _iterableToArrayLimit(arr, i) { var _i = arr == null ? null : typeof Symbol !== "undefined" && arr[Symbol.iterator] || arr["@@iterator"]; if (_i == null) return; var _arr = []; var _n = true; var _d = false; var _s, _e; try { for (_i = _i.call(arr); !(_n = (_s = _i.next()).done); _n = true) { _arr.push(_s.value); if (i && _arr.length === i) break; } } catch (err) { _d = true; _e = err; } finally { try { if (!_n && _i["return"] != null) _i["return"](); } finally { if (_d) throw _e; } } return _arr; }
+
+function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
+
+import React, { useEffect, useState } from 'react';
+import { Modal } from 'antd';
+import { CaretRightOutlined } from '@ant-design/icons';
+import { FormattedMessage, Link, useLocale, useSiteData } from 'dumi';
+import classNames from 'classnames';
+import GitHubButton from 'react-github-button';
+import gh from 'parse-github-url';
+import { Player } from 'video-react';
+import Notification from "./Notification";
+import 'video-react/dist/video-react.css';
+import styles from "./index.module.less";
+var backLeftBottom = 'https://gw.alipayobjects.com/zos/basement_prod/441d5eaf-e623-47cd-b9b9-2a581d9ce1e3.svg';
+
+var Banner = function Banner(_ref) {
+  var coverImage = _ref.coverImage,
+      title = _ref.title,
+      description = _ref.description,
+      notifications = _ref.notifications,
+      _ref$style = _ref.style,
+      style = _ref$style === void 0 ? {} : _ref$style,
+      className = _ref.className,
+      video = _ref.video,
+      _ref$showGithubStars = _ref.showGithubStars,
+      showGithubStars = _ref$showGithubStars === void 0 ? true : _ref$showGithubStars,
+      _ref$buttons = _ref.buttons,
+      buttons = _ref$buttons === void 0 ? [] : _ref$buttons,
+      onCloseVideo = _ref.onCloseVideo,
+      onPlayVideo = _ref.onPlayVideo;
+  var locale = useLocale();
+  var lang = locale.id.includes('zh') ? 'zh' : 'en';
+  var notificationsUrl = "https://my-json-server.typicode.com/antvis/antvis-sites-data/notifications?lang=".concat(lang);
+
+  var _useState = useState([]),
+      _useState2 = _slicedToArray(_useState, 2),
+      remoteNews = _useState2[0],
+      setRemoteNews = _useState2[1];
+
+  var _useSiteData = useSiteData(),
+      themeConfig = _useSiteData.themeConfig;
+
+  var githubUrl = themeConfig.githubUrl;
+  useEffect(function () {
+    fetch(notificationsUrl).then(function (res) {
+      return res.json();
+    }).then(function (data) {
+      setRemoteNews(data);
+    });
+  }, [notificationsUrl]);
+  var notificationsNode = (notifications || remoteNews).slice(0, 2).map(function (notification, i) {
+    return /*#__PURE__*/React.createElement(Notification, _extends({
+      index: i,
+      key: i
+    }, notification));
+  });
+
+  var showVideo = function showVideo() {
+    if (onPlayVideo) {
+      onPlayVideo();
+    }
+
+    Modal.info({
+      title: 'This is a notification message',
+      className: styles.videoModal,
+      onCancel: onCloseVideo,
+      content: /*#__PURE__*/React.createElement(Player, {
+        className: styles.video,
+        autoPlay: true,
+        src: video
+      }),
+      width: '70%'
+    });
+  };
+
+  var renderButtons = buttons.map(function (button, i) {
+    var ButtonLink = button.link.startsWith('http') || button.link.startsWith('#') ? 'a' : Link;
+    var buttonProps = {};
+
+    if (button.link.startsWith('http')) {
+      buttonProps.target = '_blank';
+      buttonProps.rel = 'noopener noreferrer';
+    }
+
+    if (ButtonLink === 'a') {
+      buttonProps.href = button.link;
+    } else {
+      buttonProps.to = button.link;
+    }
+
+    var _button$shape = button.shape,
+        shape = _button$shape === void 0 ? 'round' : _button$shape;
+    return /*#__PURE__*/React.createElement(ButtonLink, _extends({}, buttonProps, {
+      className: classNames(styles.buttonLink, styles[button.type || ''], button.type === 'primary' ? 'primary-button' : 'common-button'),
+      key: i,
+      style: _objectSpread({
+        borderRadius: shape === 'round' ? '1000px' : '4px'
+      }, button.style)
+    }), /*#__PURE__*/React.createElement("span", {
+      className: styles.button
+    }, button.text));
+  });
+
+  if (video) {
+    renderButtons.push( /*#__PURE__*/React.createElement("div", {
+      key: "video",
+      onClick: showVideo,
+      className: styles.videoButtonWrapper
+    }, /*#__PURE__*/React.createElement("div", {
+      className: styles.videoButton
+    }, /*#__PURE__*/React.createElement(CaretRightOutlined, {
+      className: styles.videoButtonIcon
+    }), /*#__PURE__*/React.createElement("p", {
+      className: styles.videoButtonText,
+      style: {
+        fontSize: '14px',
+        lineHeight: '40px'
+      }
+    }, /*#__PURE__*/React.createElement(FormattedMessage, {
+      id: "\u77E5\u6E90\u30FB\u81F4\u8FDC"
+    })))));
+  }
+
+  if (showGithubStars) {
+    var githubObj = gh(githubUrl);
+
+    if (githubObj && githubObj.owner && githubObj.name) {
+      renderButtons.push( /*#__PURE__*/React.createElement("div", {
+        key: "github",
+        className: styles.githubWrapper
+      }, /*#__PURE__*/React.createElement(GitHubButton, {
+        type: "stargazers",
+        size: "large",
+        namespace: githubObj.owner,
+        repo: githubObj.name
+      })));
+    }
+  }
+
+  return /*#__PURE__*/React.createElement("section", {
+    className: classNames(styles.wrapper, className),
+    style: style
+  }, /*#__PURE__*/React.createElement("div", {
+    className: styles.content
+  }, /*#__PURE__*/React.createElement("div", {
+    className: styles.text
+  }, /*#__PURE__*/React.createElement("div", {
+    className: classNames(styles.title, 'banner-title')
+  }, title), /*#__PURE__*/React.createElement("p", {
+    className: classNames(styles.description, 'banner-description')
+  }, description), /*#__PURE__*/React.createElement("div", {
+    className: classNames(styles.buttons, 'banner-buttons')
+  }, renderButtons)), /*#__PURE__*/React.createElement("div", {
+    className: classNames(styles.notifications, 'notifications')
+  }, notificationsNode), /*#__PURE__*/React.createElement("div", {
+    className: classNames(styles.teaser, 'teaser')
+  }, /*#__PURE__*/React.createElement("div", {
+    className: classNames(styles.teaserimg, 'teaser-img')
+  }, coverImage)), /*#__PURE__*/React.createElement("img", {
+    className: styles.backLeftBottom,
+    src: backLeftBottom,
+    alt: "back"
+  })));
+};
+
+export default Banner;

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: 48px;
+      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.d.ts

@@ -1,7 +1,7 @@
 import React from 'react';
+import { IC } from '../../types';
 import 'slick-carousel/slick/slick.css';
 import 'slick-carousel/slick/slick-theme.css';
-import { IC } from '../../types';
 interface Case {
     logo?: string;
     isAppLogo?: boolean;