@arcblock/ux 2.9.90 → 2.10.0

package/es/Center/index.js

@@ -1,41 +0,0 @@
-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

@@ -1,72 +0,0 @@
-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

@@ -1,39 +0,0 @@
-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

@@ -1,92 +0,0 @@
-import PropTypes from 'prop-types';
-import { useSize } from 'ahooks';
-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 size = useSize(document.body);
-  const width = size?.width || 0;
-  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

@@ -1,85 +0,0 @@
-// 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

@@ -1,222 +0,0 @@
-/* eslint-disable react/no-danger */
-import { useState } from 'react';
-import PropTypes from 'prop-types';
-import Copy from 'copy-to-clipboard';
-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 source = code || children;
-  const onCopy = () => {
-    if (copied) {
-      return;
-    }
-    Copy(source);
-    setCopied(true);
-    // 恢复 copied 状态
-    setTimeout(() => {
-      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

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

package/es/Colors/themes/default.js

@@ -1,77 +0,0 @@
-/**
- * 默认 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;

package/es/Colors/themes/temp.js

@@ -1,41 +0,0 @@
-const colors = {
-  textMuted: 'rgba(18, 22, 24, 0.36)',
-  textSubtitle: 'rgba(18, 22, 24, 0.6)',
-  textBase: 'rgba(18, 22, 24, 1)',
-  textPrimaryBase: 'rgba(18, 22, 24, 1)',
-  primaryBase: 'rgba(19, 125, 250, 1)',
-  primary100: 'rgba(19, 125, 250, 1)',
-  gray6: 'rgba(17, 22, 24, 0.06)',
-  // surface
-  surfaceBgSubtitle: 'rgba(18, 22, 24, 0.03)',
-  surfacePrimarySubtitle: 'rgba(19, 125, 250, 0.06)',
-  surfaceSuccess: 'rgba(13, 202, 134, 1)',
-  // background
-  backgroundsBgSubtitle: 'rgba(249, 250, 251, 1)',
-  backgroundsBgComponent: 'rgba(241, 243, 245, 1)',
-  backgroundsBgField: 'rgba(249, 250, 251, 1)',
-  backgroundsBgSubtile: 'rgba(249, 250, 251, 1)',
-  backgroundsBgSubtileHover: 'rgba(243, 244, 246, 1)',
-  // foreground
-  foregroundsFgBase: 'rgba(3, 7, 18, 1)',
-  foregroundsFgSubtile: 'rgba(75, 85, 99, 1)',
-  foregroundsFgMuted: 'rgba(156, 163, 175, 1)',
-  foregroundsFgInteractiveTransparent: 'rgba(59, 130, 246, 0)',
-  foregroundsFgInteractive: 'rgba(59, 130, 246, 1)',
-  // border
-  strokeBorderBase: 'rgba(229, 231, 235, 1)',
-  strokeBorderStrong: 'rgba(209, 213, 219, 1)',
-  strokeSep: 'rgba(229, 231, 235, 1)',
-  lineStep: 'rgba(18, 22, 24, 0.06)',
-  lineBorderStrong: 'rgba(18, 22, 24, 0.12)',
-  lineBorderBase: 'rgba(18, 22, 24, 0.06)',
-  borderBase: 'rgba(18, 22, 24, 0.06)',
-  // button
-  buttonsButtonNeutral: 'rgba(255, 255, 255, 1)',
-  buttonsButtonNeutralHover: 'rgba(243, 244, 246, 1)',
-  buttonsButtonInverted: 'rgba(3, 7, 18, 1)',
-  buttonsButtonInvertedHover: 'rgba(17, 24, 39, 1)',
-  buttonsButtonDanger: 'rgba(225, 29, 72, 1)',
-  red: '#FF6369'
-};
-export default colors;