@antv/dumi-theme-antv 0.1.0

package/es/antv/utils.js

@@ -0,0 +1,49 @@
+export var ping = function ping(callback) {
+  var url = 'https://private-a' + 'lipay' + 'objects.alip' + 'ay.com/alip' + 'ay-rmsdeploy-image/rmsportal/RKuAiriJqrUhyqW.png';
+  var img = new Image();
+  var done = false;
+
+  var finish = function finish(status) {
+    if (!done) {
+      done = true;
+      img.src = '';
+      callback(status);
+    }
+  };
+
+  img.onload = function () {
+    return finish('responded');
+  };
+
+  img.onerror = function () {
+    return finish('error');
+  };
+
+  img.src = url;
+  return setTimeout(function () {
+    return finish('timeout');
+  }, 1500);
+};
+export var capitalize = function capitalize(s) {
+  if (typeof s !== 'string') {
+    return '';
+  }
+
+  return s.charAt(0).toUpperCase() + s.slice(1);
+};
+export var getChinaMirrorHost = function getChinaMirrorHost(host) {
+  var 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
+
+
+  var match = hostString.match(/(.*)\.antv\.vision/);
+
+  if (match && match[1]) {
+    return "antv-".concat(match[1], ".gitee.io");
+  }
+
+  return hostString;
+};

package/es/builtins/API.js

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

package/es/builtins/Alert.js

@@ -0,0 +1,9 @@
+function _extends() { _extends = Object.assign || 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); }
+
+import React from 'react';
+import './Alert.less';
+export default (function (props) {
+  return /*#__PURE__*/React.createElement("div", _extends({
+    className: "__dumi-default-alert"
+  }, props));
+});

package/es/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/es/builtins/Badge.js

@@ -0,0 +1,9 @@
+function _extends() { _extends = Object.assign || 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); }
+
+import React from 'react';
+import './Badge.less';
+export default (function (props) {
+  return /*#__PURE__*/React.createElement("span", _extends({
+    className: "__dumi-default-badge"
+  }, props));
+});

package/es/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/es/builtins/Example.js

@@ -0,0 +1,48 @@
+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, { useRef, useEffect, useState } from 'react';
+import './Example.less';
+export default (function (props) {
+  var elm = useRef();
+
+  var _useState = useState(0),
+      _useState2 = _slicedToArray(_useState, 2),
+      height = _useState2[0],
+      setHeight = _useState2[1];
+
+  useEffect(function () {
+    setHeight(elm.current.contentWindow.document.documentElement.scrollHeight);
+  }, [elm]);
+  return props.route.meta.examplePath && /*#__PURE__*/React.createElement("div", {
+    className: "__dumi-default-example-wrapper"
+  }, /*#__PURE__*/React.createElement("div", {
+    className: "__dumi-default-example-wrapper-toolbar"
+  }, props.route.meta.description || props.route.meta.title, /*#__PURE__*/React.createElement("span", null, /*#__PURE__*/React.createElement("button", {
+    className: "__dumi-default-icon",
+    onClick: function onClick() {
+      return elm.current.contentWindow.location.reload();
+    }
+  }), /*#__PURE__*/React.createElement("a", {
+    target: "_blank",
+    rel: "noopener noreferrer",
+    href: props.route.meta.examplePath,
+    className: "__dumi-default-icon"
+  }))), /*#__PURE__*/React.createElement("iframe", {
+    src: props.route.meta.examplePath,
+    ref: elm,
+    style: {
+      height: height
+    },
+    title: "dumi"
+  }));
+});

package/es/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/es/builtins/Previewer.js

@@ -0,0 +1,225 @@
+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, { useState, useContext, useRef, useEffect } from 'react';
+import Tabs, { TabPane } from 'rc-tabs'; // @ts-ignore
+
+import { history } from 'dumi';
+import { context, useCodeSandbox, useRiddle, useMotions, useCopy, useLocaleProps, useDemoUrl, useTSPlaygroundUrl, Link, AnchorLink, usePrefersColor } from 'dumi/theme';
+import SourceCode from './SourceCode';
+import './Previewer.less';
+/**
+ * get source code type for file
+ * @param file    file path
+ * @param source  file source object
+ */
+
+function getSourceType(file, source) {
+  var _file$match;
+
+  // use file extension as source type first
+  var type = (_file$match = file.match(/\.(\w+)$/)) === null || _file$match === void 0 ? void 0 : _file$match[1];
+
+  if (!type) {
+    type = source.tsx ? 'tsx' : 'jsx';
+  }
+
+  return type;
+}
+
+var Previewer = function Previewer(oProps) {
+  var _props$hideActions, _props$hideActions2, _props$hideActions3;
+
+  var demoRef = useRef();
+
+  var _useContext = useContext(context),
+      locale = _useContext.locale;
+
+  var props = useLocaleProps(locale, oProps);
+  var builtinDemoUrl = useDemoUrl(props.identifier);
+  var demoUrl = props.demoUrl || builtinDemoUrl;
+  var isActive = (history === null || history === void 0 ? void 0 : history.location.hash) === "#".concat(props.identifier);
+  var isSingleFile = Object.keys(props.sources).length === 1;
+  var openCSB = useCodeSandbox(((_props$hideActions = props.hideActions) === null || _props$hideActions === void 0 ? void 0 : _props$hideActions.includes('CSB')) ? null : props);
+  var openRiddle = useRiddle(((_props$hideActions2 = props.hideActions) === null || _props$hideActions2 === void 0 ? void 0 : _props$hideActions2.includes('RIDDLE')) ? null : props);
+
+  var _useMotions = useMotions(props.motions || [], demoRef.current),
+      _useMotions2 = _slicedToArray(_useMotions, 2),
+      execMotions = _useMotions2[0],
+      isMotionRunning = _useMotions2[1];
+
+  var _useCopy = useCopy(),
+      _useCopy2 = _slicedToArray(_useCopy, 2),
+      copyCode = _useCopy2[0],
+      copyStatus = _useCopy2[1];
+
+  var _useState = useState(function () {
+    return props.sources._ ? '_' : Object.keys(props.sources)[0];
+  }),
+      _useState2 = _slicedToArray(_useState, 2),
+      currentFile = _useState2[0],
+      setCurrentFile = _useState2[1];
+
+  var _useState3 = useState(getSourceType(currentFile, props.sources[currentFile])),
+      _useState4 = _slicedToArray(_useState3, 2),
+      sourceType = _useState4[0],
+      setSourceType = _useState4[1];
+
+  var _useState5 = useState(Boolean(props.defaultShowCode)),
+      _useState6 = _slicedToArray(_useState5, 2),
+      showSource = _useState6[0],
+      setShowSource = _useState6[1];
+
+  var _useState7 = useState(Math.random()),
+      _useState8 = _slicedToArray(_useState7, 2),
+      iframeKey = _useState8[0],
+      setIframeKey = _useState8[1];
+
+  var currentFileCode = props.sources[currentFile][sourceType] || props.sources[currentFile].content;
+  var playgroundUrl = useTSPlaygroundUrl(locale, currentFileCode);
+  var iframeRef = useRef();
+
+  var _usePrefersColor = usePrefersColor(),
+      _usePrefersColor2 = _slicedToArray(_usePrefersColor, 1),
+      color = _usePrefersColor2[0];
+
+  var _props$actionBarRende = props.actionBarRender,
+      actionBarRender = _props$actionBarRende === void 0 ? function (o) {
+    return o;
+  } : _props$actionBarRende; // re-render iframe if prefers color changed
+
+  useEffect(function () {
+    setIframeKey(Math.random());
+  }, [color]);
+
+  function handleFileChange(filename) {
+    setCurrentFile(filename);
+    setSourceType(getSourceType(filename, props.sources[filename]));
+  }
+
+  return /*#__PURE__*/React.createElement("div", {
+    style: props.style,
+    className: [props.className, '__dumi-default-previewer', isActive ? '__dumi-default-previewer-target' : ''].filter(Boolean).join(' '),
+    id: props.identifier,
+    "data-debug": props.debug || undefined,
+    "data-iframe": props.iframe || undefined
+  }, props.iframe && /*#__PURE__*/React.createElement("div", {
+    className: "__dumi-default-previewer-browser-nav"
+  }), /*#__PURE__*/React.createElement("div", {
+    ref: demoRef,
+    className: "__dumi-default-previewer-demo",
+    style: {
+      transform: props.transform ? 'translate(0, 0)' : undefined,
+      padding: props.compact || props.iframe && props.compact !== false ? '0' : undefined,
+      background: props.background
+    }
+  }, props.iframe ? /*#__PURE__*/React.createElement("iframe", {
+    title: "dumi-previewer",
+    style: {
+      // both compatible with unit or non-unit, such as 100, 100px, 100vh
+      height: String(props.iframe).replace(/(\d)$/, '$1px')
+    },
+    key: iframeKey,
+    src: demoUrl,
+    ref: iframeRef
+  }) : props.children), /*#__PURE__*/React.createElement("div", {
+    className: "__dumi-default-previewer-desc",
+    "data-title": props.title
+  }, props.title && /*#__PURE__*/React.createElement(AnchorLink, {
+    to: "#".concat(props.identifier)
+  }, props.title), props.description && /*#__PURE__*/React.createElement("div", {
+    // eslint-disable-next-line
+    dangerouslySetInnerHTML: {
+      __html: props.description
+    }
+  })), /*#__PURE__*/React.createElement("div", {
+    className: "__dumi-default-previewer-actions"
+  }, actionBarRender( /*#__PURE__*/React.createElement(React.Fragment, null, openCSB && /*#__PURE__*/React.createElement("button", {
+    title: "Open demo on CodeSandbox.io",
+    className: "__dumi-default-icon",
+    role: "codesandbox",
+    onClick: openCSB
+  }), openRiddle && /*#__PURE__*/React.createElement("button", {
+    title: "Open demo on Riddle",
+    className: "__dumi-default-icon",
+    role: "riddle",
+    onClick: openRiddle
+  }), props.motions && /*#__PURE__*/React.createElement("button", {
+    title: "Execute motions",
+    className: "__dumi-default-icon",
+    role: "motions",
+    disabled: isMotionRunning,
+    onClick: function onClick() {
+      return execMotions();
+    }
+  }), props.iframe && /*#__PURE__*/React.createElement("button", {
+    title: "Reload demo iframe page",
+    className: "__dumi-default-icon",
+    role: "refresh",
+    onClick: function onClick() {
+      return setIframeKey(Math.random());
+    }
+  }), !((_props$hideActions3 = props.hideActions) === null || _props$hideActions3 === void 0 ? void 0 : _props$hideActions3.includes('EXTERNAL')) && /*#__PURE__*/React.createElement(Link, {
+    target: "_blank",
+    to: demoUrl
+  }, /*#__PURE__*/React.createElement("button", {
+    title: "Open demo in new tab",
+    className: "__dumi-default-icon",
+    role: "open-demo",
+    type: "button"
+  })), /*#__PURE__*/React.createElement("span", null), /*#__PURE__*/React.createElement("button", {
+    title: "Copy source code",
+    className: "__dumi-default-icon",
+    role: "copy",
+    "data-status": copyStatus,
+    onClick: function onClick() {
+      return copyCode(currentFileCode);
+    }
+  }), sourceType === 'tsx' && showSource && /*#__PURE__*/React.createElement(Link, {
+    target: "_blank",
+    to: playgroundUrl
+  }, /*#__PURE__*/React.createElement("button", {
+    title: "Get JSX via TypeScript Playground",
+    className: "__dumi-default-icon",
+    role: "change-tsx",
+    type: "button"
+  })), /*#__PURE__*/React.createElement("button", {
+    title: "Toggle source code panel",
+    className: "__dumi-default-icon".concat(showSource ? ' __dumi-default-btn-expand' : ''),
+    role: "source",
+    type: "button",
+    onClick: function onClick() {
+      return setShowSource(!showSource);
+    }
+  })))), showSource && /*#__PURE__*/React.createElement("div", {
+    className: "__dumi-default-previewer-source-wrapper"
+  }, !isSingleFile && /*#__PURE__*/React.createElement(Tabs, {
+    className: "__dumi-default-previewer-source-tab",
+    prefixCls: "__dumi-default-tabs",
+    moreIcon: "\xB7\xB7\xB7",
+    defaultActiveKey: currentFile,
+    onChange: handleFileChange
+  }, Object.keys(props.sources).map(function (filename) {
+    return /*#__PURE__*/React.createElement(TabPane, {
+      tab: filename === '_' ? "index.".concat(getSourceType(filename, props.sources[filename])) : filename,
+      key: filename
+    });
+  })), /*#__PURE__*/React.createElement("div", {
+    className: "__dumi-default-previewer-source"
+  }, /*#__PURE__*/React.createElement(SourceCode, {
+    code: currentFileCode,
+    lang: sourceType,
+    showCopy: false
+  }))));
+};
+
+export default Previewer;