@antv/dumi-theme-antv 0.1.0

package/src/antv/hooks.ts

@@ -0,0 +1,87 @@
+import { useEffect, useState } from "react";
+export interface NavigatorBannerProps {
+  post?: {
+    slug?: string;
+    title?: string;
+  };
+  type: "prev" | "next";
+}
+
+export const useChinaMirrorHost = (): [boolean] => {
+  const [isChinaMirrorHost, setIsChinaMirrorHost] = useState(false);
+  useEffect(() => {
+    if (
+      window.location.host.includes("gitee.io") &&
+      window.location.host.includes("antv")
+    ) {
+      setIsChinaMirrorHost(true);
+    }
+  }, []);
+  return [isChinaMirrorHost];
+};
+
+export const usePrevAndNext = (): NavigatorBannerProps["post"][] => {
+  const [prevAndNext, setPrevAndNext] = useState<
+    NavigatorBannerProps["post"][]
+  >([]);
+  useEffect(() => {
+    const menuNodes = document.querySelectorAll("aside .ant-menu-item a");
+    const currentMenuNode = document.querySelector(
+      "aside .ant-menu-item-selected a"
+    );
+    const currentIndex = Array.from(menuNodes).findIndex(
+      (node) => node === currentMenuNode
+    );
+    const prevNode =
+      currentIndex - 1 >= 0 ? menuNodes[currentIndex - 1] : undefined;
+    const nextNode =
+      currentIndex + 1 < menuNodes.length
+        ? menuNodes[currentIndex + 1]
+        : undefined;
+    const prev = prevNode
+      ? {
+          slug: prevNode.getAttribute("href") || undefined,
+          title: prevNode.textContent || undefined,
+        }
+      : undefined;
+    const next = nextNode
+      ? {
+          slug: nextNode.getAttribute("href") || undefined,
+          title: nextNode.textContent || undefined,
+        }
+      : undefined;
+    setPrevAndNext([prev, next]);
+  }, []);
+  return prevAndNext;
+};
+
+export const useLogoLink = ({
+  link = "",
+  siteUrl = "",
+  lang = "",
+}: {
+  link?: string;
+  siteUrl?: string;
+  lang?: string;
+}): [string] => {
+  let defaultLogoLink;
+  if (link) {
+    defaultLogoLink = link;
+  } else if (siteUrl === "https://antv.vision") {
+    defaultLogoLink = `/${lang}`;
+  } else {
+    defaultLogoLink = `https://antv.vision/${lang}`;
+  }
+
+  const [giteeLogoLink, setGiteeLogoLink] = useState("");
+  useEffect(() => {
+    if (
+      window.location.host.includes("gitee.io") &&
+      window.location.host.includes("antv")
+    ) {
+      setGiteeLogoLink(`https://antv.gitee.io/${lang}`);
+    }
+  }, []);
+
+  return [giteeLogoLink || defaultLogoLink];
+};

package/src/antv/mixins.less

@@ -0,0 +1,21 @@
+@import "~antd/es/style/themes/default.less";
+@primaryColor: #873bf4;
+
+.container1440() {
+  width: 1440px;
+  max-width: calc(100% - 80px);
+  margin-left: auto;
+  margin-right: auto;
+
+  @media only screen and (max-width: 931.99px) {
+    & {
+      max-width: calc(100% - 60px);
+    }
+  }
+
+  @media only screen and (max-width: 767.99px) {
+    & {
+      max-width: calc(100% - 32px);
+    }
+  }
+}

package/src/antv/utils.ts

@@ -0,0 +1,44 @@
+type Status = 'responded' | 'error' | 'timeout';
+
+export const ping = (callback: (status: Status) => void): NodeJS.Timeout => {
+  const url =
+    'https://private-a' +
+    'lipay' +
+    'objects.alip' +
+    'ay.com/alip' +
+    'ay-rmsdeploy-image/rmsportal/RKuAiriJqrUhyqW.png';
+  const img = new Image();
+  let done = false;
+  const finish = (status: Status) => {
+    if (!done) {
+      done = true;
+      img.src = '';
+      callback(status);
+    }
+  };
+  img.onload = () => finish('responded');
+  img.onerror = () => finish('error');
+  img.src = url;
+  return setTimeout(() => finish('timeout'), 1500);
+};
+
+export const capitalize = (s: string): string => {
+  if (typeof s !== 'string') {
+    return '';
+  }
+  return s.charAt(0).toUpperCase() + s.slice(1);
+};
+
+export const getChinaMirrorHost = (host?: string): string => {
+  const hostString = typeof host === 'undefined' ? window.location.host : host;
+  // antv.vision => antv.gitee.io
+  if (hostString === 'antv.vision') {
+    return 'antv.gitee.io';
+  }
+  // g2plot.antv.vision => antv-g2plot.gitee.io
+  const match = hostString.match(/(.*)\.antv\.vision/);
+  if (match && match[1]) {
+    return `antv-${match[1]}.gitee.io`;
+  }
+  return hostString;
+};

package/src/builtins/API.tsx

@@ -0,0 +1,57 @@
+import React, { useContext } from 'react';
+import type { IApiComponentProps} from 'dumi/theme';
+import { context, useApiData, AnchorLink } from 'dumi/theme';
+
+const LOCALE_TEXTS = {
+  'zh-CN': {
+    name: '属性名',
+    description: '描述',
+    type: '类型',
+    default: '默认值',
+    required: '(必选)',
+  },
+  'en-US': {
+    name: 'Name',
+    description: 'Description',
+    type: 'Type',
+    default: 'Default',
+    required: '(required)',
+  },
+};
+
+export default ({ identifier, export: expt }: IApiComponentProps) => {
+  const data = useApiData(identifier);
+  const { locale } = useContext(context);
+  const texts = /^zh|cn$/i.test(locale) ? LOCALE_TEXTS['zh-CN'] : LOCALE_TEXTS['en-US'];
+
+  return (
+    <>
+      {data && (
+        <table style={{ marginTop: 24 }}>
+          <thead>
+            <tr>
+              <th>{texts.name}</th>
+              <th>{texts.description}</th>
+              <th>{texts.type}</th>
+              <th>{texts.default}</th>
+            </tr>
+          </thead>
+          <tbody>
+            {data[expt].map(row => (
+              <tr key={row.identifier}>
+                <td>{row.identifier}</td>
+                <td>{row.description || '--'}</td>
+                <td>
+                  <code>{row.type}</code>
+                </td>
+                <td>
+                  <code>{row.default || (row.required && texts.required) || '--'}</code>
+                </td>
+              </tr>
+            ))}
+          </tbody>
+        </table>
+      )}
+    </>
+  );
+};

package/src/builtins/Alert.less

@@ -0,0 +1,62 @@
+@import (reference) '../style/variables.less';
+
+.@{prefix}-alert {
+  @s-border-right: 3px;
+
+  position: relative;
+  margin: 24px 0;
+  padding: 10px 20px;
+  color: @c-text;
+  font-size: 14px;
+  line-height: 20px;
+  border-left: 0;
+  background: #ffffff;
+  box-shadow: 0 6px 16px -2px rgba(0, 0, 0, 0.06);
+  border-radius: 1px;
+
+  [data-prefers-color=dark] & {
+    color: @c-text-dark;
+    background: @c-bg-dark;
+    box-shadow: 0 1px 2px -2px rgba(0,0,0,0.64), 0 3px 6px 0 rgba(0,0,0,0.48), 0 5px 12px 4px rgba(0,0,0,0.36);
+  }
+
+  &::after {
+    content: '';
+    position: absolute;
+    display: inline-block;
+    top: 0;
+    left: 0;
+    bottom: 0;
+    width: @s-border-right;
+    border-radius: 1px;
+  }
+
+  &:first-child {
+    margin-top: 0;
+  }
+
+  &:not([type]),
+  &[type='warning'] {
+    &::after {
+      background: #ffc121;
+    }
+  }
+
+  &[type='info'] {
+    &::after {
+      background: #69b9ff;
+    }
+  }
+
+  &[type='success'] {
+    &::after {
+      background: #8cd225;
+    }
+  }
+
+  &[type='error'] {
+    &::after {
+      background: #ff4646;
+    }
+  }
+}

package/src/builtins/Alert.tsx

@@ -0,0 +1,4 @@
+import React from 'react';
+import './Alert.less';
+
+export default (props: any) => <div className="__dumi-default-alert" {...props} />;

package/src/builtins/Badge.less

@@ -0,0 +1,31 @@
+@import (reference) '../style/variables.less';
+
+.@{prefix}-badge {
+  display: inline-block;
+  margin-left: 6px;
+  padding: 1px 7px;
+  color: #fff;
+  font-size: 13px;
+  line-height: 20px;
+  text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.1);
+  box-shadow: 0 6px 16px -2px rgba(0, 0, 0, 0.06);
+  border-radius: 1px;
+  vertical-align: top;
+
+  &:not([type]),
+  &[type='info'] {
+    background: #4569d4;
+  }
+
+  &[type='warning'] {
+    background: #ffc121;
+  }
+
+  &[type='success'] {
+    background: #8cd225;
+  }
+
+  &[type='error'] {
+    background: #ff4646;
+  }
+}

package/src/builtins/Badge.tsx

@@ -0,0 +1,4 @@
+import React from 'react';
+import './Badge.less';
+
+export default (props: any) => <span className="__dumi-default-badge" {...props} />;

package/src/builtins/Example.less

@@ -0,0 +1,47 @@
+@import (reference) '../style/variables.less';
+
+.@{prefix}-example-wrapper {
+  padding-top: 16px;
+  height: calc(100vh - @s-nav-height - 2px);
+
+  @media @mobile {
+    padding-top: 16px;
+  }
+
+  &-toolbar {
+    display: flex;
+    color: @c-heading;
+    font-size: 16px;
+    font-weight: 500;
+    justify-content: space-between;
+    margin-bottom: 16px;
+    border-bottom: 1px solid @c-border;
+
+    button,
+    a {
+      display: inline-block;
+      margin: 6px 0 6px 12px;
+      width: 16px;
+      height: 16px;
+      font-weight: 400;
+      border: 0;
+      outline: none;
+      vertical-align: middle;
+      cursor: pointer;
+
+      &:first-child {
+        background-position-x: -144px;
+      }
+
+      &:nth-child(2) {
+        background-position-x: -126px;
+      }
+    }
+  }
+
+  iframe {
+    width: 100%;
+    min-height: 100%;
+    border: 0;
+  }
+}

package/src/builtins/Example.tsx

@@ -0,0 +1,34 @@
+import React, { useRef, useEffect, useState } from 'react';
+import './Example.less';
+
+export default (props: { route: any }) => {
+  const elm = useRef<HTMLIFrameElement>();
+  const [height, setHeight] = useState(0);
+
+  useEffect(() => {
+    setHeight(elm.current.contentWindow.document.documentElement.scrollHeight);
+  }, [elm]);
+
+  return (
+    props.route.meta.examplePath && (
+      <div className="__dumi-default-example-wrapper">
+        <div className="__dumi-default-example-wrapper-toolbar">
+          {props.route.meta.description || props.route.meta.title}
+          <span>
+            <button
+              className="__dumi-default-icon"
+              onClick={() => elm.current.contentWindow.location.reload()}
+            />
+            <a
+              target="_blank"
+              rel="noopener noreferrer"
+              href={props.route.meta.examplePath}
+              className="__dumi-default-icon"
+            />
+          </span>
+        </div>
+        <iframe src={props.route.meta.examplePath} ref={elm} style={{ height }} title="dumi" />
+      </div>
+    )
+  );
+};