@arcblock/ux 2.6.9 → 2.7.0

package/es/Center/index.js

@@ -0,0 +1,41 @@
+import PropTypes from 'prop-types';
+import { styled } from '../Theme';
+
+/**
+ *
+ * @param {string} relative 容器相对尺寸，默认相对屏幕(screen)，可设置为父容器(parent)
+ * @returns react component element
+ */
+import { jsx as _jsx } from "react/jsx-runtime";
+export default function Center({
+  children,
+  relative
+}) {
+  let style = {};
+  if (relative === 'parent') {
+    style = {
+      width: '100%',
+      height: '100%'
+    };
+  }
+  return /*#__PURE__*/_jsx(Div, {
+    style: style,
+    children: children
+  });
+}
+const Div = styled('div')`
+  flex: 1;
+  width: 100vw;
+  height: 100vh;
+
+  display: flex;
+  justify-content: center;
+  align-items: center;
+`;
+Center.propTypes = {
+  children: PropTypes.any.isRequired,
+  relative: PropTypes.string
+};
+Center.defaultProps = {
+  relative: 'screen'
+};

package/es/ClickToCopy/copy-button.js

@@ -0,0 +1,72 @@
+import PropTypes from 'prop-types';
+import Tooltip from '@mui/material/Tooltip';
+import { green } from '@mui/material/colors';
+import CopyIcon from '@mui/icons-material/ContentCopy';
+import CheckIcon from '@mui/icons-material/Check';
+import useCopy from './hook';
+import { jsx as _jsx } from "react/jsx-runtime";
+export default function CopyButton({
+  content,
+  locale,
+  render,
+  showTooltip,
+  ...rest
+}) {
+  const {
+    containerRef,
+    copied,
+    copy,
+    texts
+  } = useCopy({
+    content,
+    locale
+  });
+  const iconStyle = {
+    fontSize: '1em'
+  };
+  const copyButton = /*#__PURE__*/_jsx("span", {
+    title: copied ? '' : texts.copy,
+    ...rest,
+    style: {
+      height: '1em',
+      ...rest.style
+    },
+    children: copied ? /*#__PURE__*/_jsx(Tooltip, {
+      title: texts.copied,
+      placement: "bottom",
+      arrow: true,
+      open: copied && showTooltip,
+      children: /*#__PURE__*/_jsx(CheckIcon, {
+        sx: {
+          ...iconStyle,
+          color: green[500]
+        }
+      })
+    }) : /*#__PURE__*/_jsx(CopyIcon, {
+      onClick: copy,
+      sx: {
+        ...iconStyle,
+        cursor: 'pointer'
+      }
+    })
+  });
+  if (render) {
+    return render({
+      copyButton,
+      containerRef
+    });
+  }
+  return copyButton;
+}
+CopyButton.propTypes = {
+  content: PropTypes.string,
+  locale: PropTypes.oneOf(['en', 'zh']),
+  render: PropTypes.func,
+  showTooltip: PropTypes.bool
+};
+CopyButton.defaultProps = {
+  content: '',
+  locale: 'en',
+  render: undefined,
+  showTooltip: true
+};

package/es/ClickToCopy/hook.js

@@ -0,0 +1,39 @@
+import { useState, useEffect, useRef } from 'react';
+import Copy from 'copy-to-clipboard';
+const translations = {
+  en: {
+    copy: 'Click To Copy',
+    copied: 'Copied!'
+  },
+  zh: {
+    copy: '点击复制',
+    copied: '已复制!'
+  }
+};
+export default function useCopy({
+  content,
+  locale = 'en'
+}) {
+  const [copied, setCopied] = useState(false);
+  const containerRef = useRef();
+  const copy = e => {
+    if (e) {
+      e.stopPropagation();
+    }
+    Copy(content || containerRef.current.textContent);
+    setCopied(true);
+  };
+  useEffect(() => {
+    let timer = null;
+    if (copied) {
+      timer = setTimeout(() => setCopied(false), 2000);
+    }
+    return () => clearTimeout(timer);
+  }, [copied]);
+  return {
+    containerRef,
+    copied,
+    copy,
+    texts: translations[locale] || translations.en
+  };
+}

package/es/ClickToCopy/index.js

@@ -0,0 +1,93 @@
+import PropTypes from 'prop-types';
+import useWindowSize from 'react-use/lib/useWindowSize';
+import Tooltip from '@mui/material/Tooltip';
+import useCopy from './hook';
+import Toast, { ToastProvider } from '../Toast';
+import { mergeProps } from '../Util';
+import { styled } from '../Theme';
+import { jsx as _jsx } from "react/jsx-runtime";
+export { default as CopyButton } from './copy-button';
+export default function ClickToCopy(props) {
+  const newProps = mergeProps(props, ClickToCopy, ['style']);
+  const {
+    children,
+    content,
+    tip,
+    copiedTip,
+    tipPlacement,
+    locale,
+    style,
+    unstyled,
+    ...rest
+  } = newProps;
+  const {
+    containerRef,
+    copied,
+    copy,
+    texts
+  } = useCopy({
+    content,
+    locale
+  });
+  const _tip = tip || texts.copy;
+  const _copiedTip = copiedTip || texts.copied;
+  const {
+    width
+  } = useWindowSize();
+  const onCopy = e => {
+    copy(e);
+    if (width < 600) {
+      Toast.success(_copiedTip);
+    }
+  };
+  const ContainerComponent = unstyled ? UnstyledContainer : Container;
+  return /*#__PURE__*/_jsx(ToastProvider, {
+    children: /*#__PURE__*/_jsx(Tooltip, {
+      title: copied ? _copiedTip : _tip,
+      ...rest,
+      placement: tipPlacement,
+      disableFocusListener: true,
+      children: /*#__PURE__*/_jsx(ContainerComponent, {
+        ref: containerRef,
+        style: style,
+        onClick: onCopy,
+        children: children || content
+      })
+    })
+  });
+}
+ClickToCopy.propTypes = {
+  children: PropTypes.any.isRequired,
+  content: PropTypes.string,
+  tip: PropTypes.string,
+  tipPlacement: PropTypes.string,
+  copiedTip: PropTypes.string,
+  locale: PropTypes.oneOf(['en', 'zh']),
+  style: PropTypes.object,
+  // 仅提供点击复制功能, 不提供样式
+  unstyled: PropTypes.bool
+};
+ClickToCopy.defaultProps = {
+  content: '',
+  tip: '',
+  copiedTip: '',
+  tipPlacement: 'right',
+  locale: 'en',
+  style: {},
+  unstyled: false
+};
+const Container = styled('span')`
+  display: inline;
+  white-space: pre-wrap;
+  word-wrap: break-word;
+  overflow-wrap: break-word;
+  align-items: center;
+  justify-content: start;
+  border-radius: 15px;
+  padding: 1px 12px;
+  background-color: rgba(0, 0, 0, 0.08);
+  cursor: pointer;
+`;
+const UnstyledContainer = styled('span')`
+  cursor: pointer;
+`;

package/es/CodeBlock/LightBox.js

@@ -0,0 +1,85 @@
+// highlight.js/styles/atom-one-light.css
+import styled from '@emotion/styled';
+const LightBox = styled('div')`
+  display: block;
+  pre code.hljs {
+    display: block;
+    overflow-x: auto;
+    padding: 1em;
+  }
+  code.hljs {
+    padding: 3px 5px;
+  }
+  .hljs {
+    color: #383a42;
+    background: #fafafa;
+  }
+  .hljs-comment,
+  .hljs-quote {
+    color: #a0a1a7;
+    font-style: italic;
+  }
+  .hljs-doctag,
+  .hljs-formula,
+  .hljs-keyword {
+    color: #a626a4;
+  }
+  .hljs-deletion,
+  .hljs-name,
+  .hljs-section,
+  .hljs-selector-tag,
+  .hljs-subst {
+    color: #e45649;
+  }
+  .hljs-literal {
+    color: #0184bb;
+  }
+  .hljs-addition,
+  .hljs-attribute,
+  .hljs-meta .hljs-string,
+  .hljs-regexp,
+  .hljs-string {
+    color: #50a14f;
+  }
+  .hljs-attr,
+  .hljs-number,
+  .hljs-selector-attr,
+  .hljs-selector-class,
+  .hljs-selector-pseudo,
+  .hljs-template-variable,
+  .hljs-type,
+  .hljs-variable {
+    color: #986801;
+  }
+  .hljs-bullet,
+  .hljs-link,
+  .hljs-meta,
+  .hljs-selector-id,
+  .hljs-symbol,
+  .hljs-title {
+    color: #4078f2;
+  }
+  .hljs-built_in,
+  .hljs-class .hljs-title,
+  .hljs-title.class_ {
+    color: #c18401;
+  }
+  .hljs-emphasis {
+    font-style: italic;
+  }
+  .hljs-strong {
+    font-weight: 700;
+  }
+  .hljs-link {
+    text-decoration: underline;
+  }
+
+  pre {
+    .copy-button {
+      > .default-text {
+        color: #222;
+      }
+    }
+  }
+`;
+export default LightBox;

package/es/CodeBlock/index.js

@@ -0,0 +1,226 @@
+/* eslint-disable react/no-danger */
+import { useState } from 'react';
+import PropTypes from 'prop-types';
+import Copy from 'copy-to-clipboard';
+import useMountedState from 'react-use/lib/useMountedState';
+import hljs from 'highlight.js/lib/core';
+import javascript from 'highlight.js/lib/languages/javascript';
+import typescript from 'highlight.js/lib/languages/typescript';
+import json from 'highlight.js/lib/languages/json';
+import elixir from 'highlight.js/lib/languages/elixir';
+import java from 'highlight.js/lib/languages/java';
+import swift from 'highlight.js/lib/languages/swift';
+import objectivec from 'highlight.js/lib/languages/objectivec';
+import kotlin from 'highlight.js/lib/languages/kotlin';
+import protobuf from 'highlight.js/lib/languages/protobuf';
+import python from 'highlight.js/lib/languages/python';
+import yaml from 'highlight.js/lib/languages/yaml';
+import shell from 'highlight.js/lib/languages/shell';
+import diff from 'highlight.js/lib/languages/diff';
+import plaintext from 'highlight.js/lib/languages/plaintext';
+import markdown from 'highlight.js/lib/languages/markdown';
+import 'highlight.js/styles/atom-one-dark.css';
+import CopyIcon from '@mui/icons-material/FileCopy';
+import CheckIcon from '@mui/icons-material/Check';
+import colors from '../Colors';
+import { styled } from '../Theme';
+import LightBox from './LightBox';
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Fragment as _Fragment } from "react/jsx-runtime";
+import { jsxs as _jsxs } from "react/jsx-runtime";
+hljs.registerLanguage('javascript', javascript);
+hljs.registerLanguage('js', javascript);
+hljs.registerLanguage('jsx', javascript);
+hljs.registerLanguage('typescript', typescript);
+hljs.registerLanguage('ts', typescript);
+hljs.registerLanguage('tsx', typescript);
+hljs.registerLanguage('json', json);
+hljs.registerLanguage('elixir', elixir);
+hljs.registerLanguage('java', java);
+hljs.registerLanguage('kotlin', kotlin);
+hljs.registerLanguage('kt', kotlin);
+hljs.registerLanguage('protobuf', protobuf);
+hljs.registerLanguage('protobuffer', protobuf);
+hljs.registerLanguage('python', python);
+hljs.registerLanguage('py', python);
+hljs.registerLanguage('yaml', yaml);
+hljs.registerLanguage('yml', yaml);
+hljs.registerLanguage('shell', shell);
+hljs.registerLanguage('sh', shell);
+hljs.registerLanguage('plaintext', plaintext);
+hljs.registerLanguage('text', plaintext);
+hljs.registerLanguage('patch', diff);
+hljs.registerLanguage('diff', diff);
+hljs.registerLanguage('swift', swift);
+hljs.registerLanguage('objectivec', objectivec);
+hljs.registerLanguage('oc', objectivec);
+hljs.registerLanguage('markdown', markdown);
+export default function CodeBlock({
+  code,
+  language,
+  children,
+  dark,
+  ...rest
+}) {
+  const [copied, setCopied] = useState(false);
+  const isMounted = useMountedState();
+  const source = code || children;
+  const onCopy = () => {
+    if (copied) {
+      return;
+    }
+    Copy(source);
+    setCopied(true);
+    // 恢复 copied 状态
+    setTimeout(() => {
+      if (isMounted()) {
+        setCopied(false);
+      }
+    }, 1500);
+  };
+  const originEl = /*#__PURE__*/_jsxs(Pre, {
+    ...rest,
+    children: [/*#__PURE__*/_jsx("span", {
+      className: "codeblock__inner",
+      children: /*#__PURE__*/_jsx("code", {
+        className: `hljs ${language}`,
+        dangerouslySetInnerHTML: {
+          __html: hljs.highlightAuto(source, [language]).value
+        }
+      })
+    }), /*#__PURE__*/_jsxs("div", {
+      className: "copy-button",
+      onClick: onCopy,
+      children: [/*#__PURE__*/_jsx("span", {
+        className: "default-text",
+        children: language
+      }), /*#__PURE__*/_jsx("span", {
+        className: "hover-text",
+        children: !copied ? /*#__PURE__*/_jsxs(_Fragment, {
+          children: [/*#__PURE__*/_jsx(CopyIcon, {
+            className: "copy-icon"
+          }), /*#__PURE__*/_jsx("span", {
+            className: "button-lang-text",
+            children: "copy"
+          })]
+        }) : /*#__PURE__*/_jsxs(_Fragment, {
+          children: [/*#__PURE__*/_jsx(CheckIcon, {
+            className: "copy-icon"
+          }), /*#__PURE__*/_jsx("span", {
+            className: "button-lang-text",
+            children: "copied"
+          })]
+        })
+      })]
+    })]
+  });
+  if (!dark) {
+    return /*#__PURE__*/_jsx(LightBox, {
+      children: originEl
+    });
+  }
+  return originEl;
+}
+CodeBlock.propTypes = {
+  code: PropTypes.string,
+  language: PropTypes.string,
+  children: PropTypes.any,
+  dark: PropTypes.bool
+};
+CodeBlock.defaultProps = {
+  code: '',
+  language: 'text',
+  children: null,
+  dark: true
+};
+const fontFamily = 'source-code-pro, Menlo, Monaco, Consolas, Courier New, monospace !important';
+const Pre = styled('pre')`
+  font-family: ${fontFamily};
+  display: block;
+  font-size: 14px;
+  line-height: 1.42857143;
+  margin: 0 0 32px;
+  word-break: break-word;
+  word-wrap: break-word;
+  text-align: left;
+  border-radius: 5px;
+  border: 1px solid #dedede;
+  background: #222;
+  color: ${colors.common.white};
+  position: relative;
+
+  .codeblock__inner {
+    display: block;
+    width: 100%;
+    max-height: 46.25rem;
+    overflow: scroll;
+  }
+
+  .copy-button {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    position: absolute;
+    top: 8px;
+    right: 24px;
+    padding: 4px;
+    min-width: 72px;
+    height: 24px;
+    border-radius: 4px;
+    background: transparent;
+    cursor: pointer;
+    transition: all ease 0.2s;
+
+    .copy-icon {
+      font-size: 16px;
+      color: ${colors.common.white};
+    }
+
+    .hover-text {
+      display: none;
+    }
+    .default-text {
+      font-size: 12px;
+      color: ${colors.common.white};
+    }
+  }
+
+  &:hover {
+    .copy-button {
+      display: flex;
+      background: ${colors.primary.main};
+
+      .hover-text {
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        color: ${colors.common.white};
+      }
+      .default-text {
+        display: none;
+        font-size: 12px;
+      }
+    }
+  }
+
+  .button-lang-text {
+    margin-left: 4px;
+    font-size: 12px;
+    color: ${colors.common.white};
+  }
+
+  code {
+    counter-reset: line;
+    counter-increment: line;
+    padding: 16px;
+    font-family: ${fontFamily};
+    color: ${colors.common.white};
+    * {
+      font-family: ${fontFamily};
+    }
+  }
+
+  .hljs * {
+    white-space: normal; // autowrap
+  }
+`;

package/es/Colors/index.js

@@ -0,0 +1,2 @@
+// eslint-disable-next-line no-restricted-exports
+export { default } from './themes/default';

package/es/Colors/themes/default.js

@@ -0,0 +1,78 @@
+/**
+ * 默认 colors, ABT 系列
+ *
+ * - colors object 结构是在 mui theme#palette object 基础上调整后的结构
+ * - 色值在 mui default theme 基础上将 figma 中常用的 colors 进行覆盖
+ * - 扩展一些常用色值 (如 DID 系列)
+ * - figma: https://www.figma.com/file/1qHyMF137EXOQpSFVByszG/UX-Library?node-id=295%3A1518
+ */
+const colors = {
+  common: {
+    black: '#000',
+    white: '#fff'
+  },
+  primary: {
+    main: '#3773F2',
+    contrastText: '#fff'
+  },
+  // override
+  secondary: {
+    main: '#16CED1',
+    contrastText: '#fff'
+  },
+  // override
+  error: {
+    main: '#F16E6E',
+    contrastText: '#fff'
+  },
+  // override
+  warning: {
+    main: '#DE9E37',
+    contrastText: '#fff'
+  },
+  // override
+  info: {
+    main: '#0775F8',
+    contrastText: '#fff'
+  },
+  // override
+  success: {
+    main: '#34BE74',
+    contrastText: '#fff'
+  },
+  // override
+  grey: {
+    50: '#fafafa',
+    100: '#f5f5f5',
+    200: '#eeeeee',
+    300: '#e0e0e0',
+    400: '#bdbdbd',
+    500: '#9e9e9e',
+    600: '#757575',
+    700: '#616161',
+    800: '#424242',
+    900: '#212121',
+    A100: '#d5d5d5',
+    A200: '#aaaaaa',
+    A400: '#303030',
+    A700: '#616161'
+  },
+  text: {
+    primary: 'rgba(0, 0, 0, 0.87)',
+    secondary: 'rgba(0, 0, 0, 0.54)',
+    disabled: 'rgba(0, 0, 0, 0.38)',
+    hint: 'rgba(0, 0, 0, 0.38)'
+  },
+  divider: 'rgba(0, 0, 0, 0.12)',
+  background: {
+    default: '#fff'
+  },
+  // 扩展色值, 适用于 did 相关的组件, 如果某些产品整体风格是 did 系列, 可以扩展出一个 did 系列的 theme
+  did: {
+    primary: '#4598FA',
+    secondary: '#49C3AD'
+  }
+  // TODO: 等设计规范稳定后, 考虑扩展 trade 相关的常用颜色 (send/receive/exchange/transfer)
+};
+
+export default colors;