@arcblock/ux 2.4.40 → 2.4.41

package/lib/CodeBlock/LightBox.js

@@ -0,0 +1,18 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _styled = _interopRequireDefault(require("@emotion/styled"));
+
+var _templateObject;
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+function _taggedTemplateLiteral(strings, raw) { if (!raw) { raw = strings.slice(0); } return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); }
+
+const LightBox = (0, _styled.default)('div')(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  display: block;\n  pre code.hljs {\n    display: block;\n    overflow-x: auto;\n    padding: 1em;\n  }\n  code.hljs {\n    padding: 3px 5px;\n  }\n  .hljs {\n    color: #383a42;\n    background: #fafafa;\n  }\n  .hljs-comment,\n  .hljs-quote {\n    color: #a0a1a7;\n    font-style: italic;\n  }\n  .hljs-doctag,\n  .hljs-formula,\n  .hljs-keyword {\n    color: #a626a4;\n  }\n  .hljs-deletion,\n  .hljs-name,\n  .hljs-section,\n  .hljs-selector-tag,\n  .hljs-subst {\n    color: #e45649;\n  }\n  .hljs-literal {\n    color: #0184bb;\n  }\n  .hljs-addition,\n  .hljs-attribute,\n  .hljs-meta .hljs-string,\n  .hljs-regexp,\n  .hljs-string {\n    color: #50a14f;\n  }\n  .hljs-attr,\n  .hljs-number,\n  .hljs-selector-attr,\n  .hljs-selector-class,\n  .hljs-selector-pseudo,\n  .hljs-template-variable,\n  .hljs-type,\n  .hljs-variable {\n    color: #986801;\n  }\n  .hljs-bullet,\n  .hljs-link,\n  .hljs-meta,\n  .hljs-selector-id,\n  .hljs-symbol,\n  .hljs-title {\n    color: #4078f2;\n  }\n  .hljs-built_in,\n  .hljs-class .hljs-title,\n  .hljs-title.class_ {\n    color: #c18401;\n  }\n  .hljs-emphasis {\n    font-style: italic;\n  }\n  .hljs-strong {\n    font-weight: 700;\n  }\n  .hljs-link {\n    text-decoration: underline;\n  }\n\n  .copy-button {\n    > .default-text {\n      color: #222;\n    }\n  }\n"])));
+var _default = LightBox;
+exports.default = _default;

package/lib/CodeBlock/index.js

@@ -11,8 +11,6 @@ var _propTypes = _interopRequireDefault(require("prop-types"));
 
 var _copyToClipboard = _interopRequireDefault(require("copy-to-clipboard"));
 
-var _IconButton = _interopRequireDefault(require("@mui/material/IconButton"));
-
 var _useMountedState = _interopRequireDefault(require("react-use/lib/useMountedState"));
 
 var _core = _interopRequireDefault(require("highlight.js/lib/core"));
@@ -55,11 +53,13 @@ var _Colors = _interopRequireDefault(require("../Colors"));
 
 var _Theme = require("../Theme");
 
+var _LightBox = _interopRequireDefault(require("./LightBox"));
+
 var _jsxRuntime = require("react/jsx-runtime");
 
 var _templateObject;
 
-const _excluded = ["code", "language", "children"];
+const _excluded = ["code", "language", "children", "dark"];
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
@@ -131,7 +131,8 @@ function CodeBlock(_ref) {
   let {
     code,
     language,
-    children
+    children,
+    dark
   } = _ref,
       rest = _objectWithoutProperties(_ref, _excluded);
 
@@ -140,6 +141,10 @@ function CodeBlock(_ref) {
   const source = code || children;
 
   const onCopy = () => {
+    if (copied) {
+      return;
+    }
+
     (0, _copyToClipboard.default)(source);
     setCopied(true); // 恢复 copied 状态
 
@@ -150,7 +155,7 @@ function CodeBlock(_ref) {
     }, 1500);
   };
 
-  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(Pre, _objectSpread(_objectSpread({}, rest), {}, {
+  const originEl = /*#__PURE__*/(0, _jsxRuntime.jsxs)(Pre, _objectSpread(_objectSpread({}, rest), {}, {
     children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
       className: "codeblock__inner",
       children: /*#__PURE__*/(0, _jsxRuntime.jsx)("code", {
@@ -159,35 +164,53 @@ function CodeBlock(_ref) {
           __html: _core.default.highlightAuto(source, [language]).value
         }
       })
-    }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_IconButton.default, {
+    }), /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
       className: "copy-button",
       onClick: onCopy,
-      color: "primary",
-      disabled: copied,
-      children: [!copied && /*#__PURE__*/(0, _jsxRuntime.jsx)(_FileCopy.default, {
-        style: {
-          color: '#fff',
-          fontSize: 16
-        }
-      }), copied && /*#__PURE__*/(0, _jsxRuntime.jsx)(_Check.default, {
-        style: {
-          color: '#fff',
-          fontSize: 16
-        }
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
+        className: "default-text",
+        children: language
+      }), /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
+        className: "hover-text",
+        children: !copied ? /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
+          children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_FileCopy.default, {
+            className: "copy-icon"
+          }), /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
+            className: "button-lang-text",
+            children: "copy"
+          })]
+        }) : /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
+          children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_Check.default, {
+            className: "copy-icon"
+          }), /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
+            className: "button-lang-text",
+            children: "copied"
+          })]
+        })
       })]
     })]
   }));
+
+  if (!dark) {
+    return /*#__PURE__*/(0, _jsxRuntime.jsx)(_LightBox.default, {
+      children: originEl
+    });
+  }
+
+  return originEl;
 }
 
 CodeBlock.propTypes = {
   code: _propTypes.default.string,
   language: _propTypes.default.string,
-  children: _propTypes.default.any
+  children: _propTypes.default.any,
+  dark: _propTypes.default.bool
 };
 CodeBlock.defaultProps = {
   code: '',
   language: 'text',
-  children: null
+  children: null,
+  dark: true
 };
 const fontFamily = 'source-code-pro, Menlo, Monaco, Consolas, Courier New, monospace !important';
-const Pre = (0, _Theme.styled)('pre')(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  font-family: ", ";\n  display: block;\n  font-size: 14px;\n  line-height: 1.42857143;\n  margin: 0 0 32px;\n  word-break: break-word;\n  word-wrap: break-word;\n  text-align: left;\n  border-radius: 5px;\n  border: 1px solid #dedede;\n  background: #222;\n  color: #fff;\n  position: relative;\n\n  .codeblock__inner {\n    display: block;\n    width: 100%;\n    max-height: 46.25rem;\n    overflow: scroll;\n  }\n\n  .copy-button {\n    display: none;\n    position: absolute;\n    top: 8px;\n    right: 24px;\n    padding: 4px;\n    border-radius: 4px;\n\n    &,\n    &:hover,\n    &.Mui-disabled {\n      background: ", ";\n    }\n  }\n\n  &:hover {\n    .copy-button {\n      display: flex;\n    }\n  }\n\n  code {\n    counter-reset: line;\n    counter-increment: line;\n    padding: 16px;\n    font-family: ", ";\n    color: #fff;\n    * {\n      font-family: ", ";\n    }\n  }\n\n  .hljs * {\n    white-space: normal; // autowrap\n  }\n"])), fontFamily, _Colors.default.primary.main, fontFamily, fontFamily);
+const Pre = (0, _Theme.styled)('pre')(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  font-family: ", ";\n  display: block;\n  font-size: 14px;\n  line-height: 1.42857143;\n  margin: 0 0 32px;\n  word-break: break-word;\n  word-wrap: break-word;\n  text-align: left;\n  border-radius: 5px;\n  border: 1px solid #dedede;\n  background: #222;\n  color: ", ";\n  position: relative;\n\n  .codeblock__inner {\n    display: block;\n    width: 100%;\n    max-height: 46.25rem;\n    overflow: scroll;\n  }\n\n  .copy-button {\n    display: flex;\n    justify-content: center;\n    align-items: center;\n    position: absolute;\n    top: 8px;\n    right: 24px;\n    padding: 4px;\n    min-width: 72px;\n    height: 24px;\n    border-radius: 4px;\n    background: transparent;\n    cursor: pointer;\n    transition: all ease 0.2s;\n\n    .copy-icon {\n      font-size: 16px;\n      color: ", ";\n    }\n\n    .hover-text {\n      display: none;\n    }\n    .default-text {\n      font-size: 12px;\n      color: ", ";\n    }\n  }\n\n  &:hover {\n    .copy-button {\n      display: flex;\n      background: ", ";\n\n      .hover-text {\n        display: flex;\n        justify-content: center;\n        align-items: center;\n        color: ", ";\n      }\n      .default-text {\n        display: none;\n        font-size: 12px;\n      }\n    }\n  }\n\n  .button-lang-text {\n    margin-left: 4px;\n    font-size: 12px;\n    color: ", ";\n  }\n\n  code {\n    counter-reset: line;\n    counter-increment: line;\n    padding: 16px;\n    font-family: ", ";\n    * {\n      font-family: ", ";\n    }\n  }\n\n  .hljs * {\n    white-space: normal; // autowrap\n  }\n"])), fontFamily, _Colors.default.common.white, _Colors.default.common.white, _Colors.default.common.white, _Colors.default.primary.main, _Colors.default.common.white, _Colors.default.common.white, fontFamily, fontFamily);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@arcblock/ux",
-  "version": "2.4.40",
+  "version": "2.4.41",
   "description": "Common used react components for arcblock products",
   "keywords": [
     "react",
@@ -47,10 +47,10 @@
     "react": ">=18.1.0",
     "react-ga": "^2.7.0"
   },
-  "gitHead": "c26da2c4ed0c311c2dceab75db245f0290344860",
+  "gitHead": "87dcf0b0f05b1bc45038095f34cd236c739c6180",
   "dependencies": {
-    "@arcblock/icons": "^2.4.40",
-    "@arcblock/react-hooks": "^2.4.40",
+    "@arcblock/icons": "^2.4.41",
+    "@arcblock/react-hooks": "^2.4.41",
     "@babel/plugin-syntax-dynamic-import": "^7.8.3",
     "@emotion/react": "^11.10.4",
     "@emotion/styled": "^11.10.4",

package/src/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;
+  }
+
+  .copy-button {
+    > .default-text {
+      color: #222;
+    }
+  }
+`;
+
+export default LightBox;

package/src/CodeBlock/index.js

@@ -2,7 +2,6 @@
 import { useState } from 'react';
 import PropTypes from 'prop-types';
 import Copy from 'copy-to-clipboard';
-import Button from '@mui/material/IconButton';
 import useMountedState from 'react-use/lib/useMountedState';
 
 import hljs from 'highlight.js/lib/core';
@@ -27,6 +26,7 @@ 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';
 
 hljs.registerLanguage('javascript', javascript);
 hljs.registerLanguage('js', javascript);
@@ -55,12 +55,15 @@ hljs.registerLanguage('swift', swift);
 hljs.registerLanguage('objectivec', objectivec);
 hljs.registerLanguage('oc', objectivec);
 
-export default function CodeBlock({ code, language, children, ...rest }) {
+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 状态
@@ -71,7 +74,7 @@ export default function CodeBlock({ code, language, children, ...rest }) {
     }, 1500);
   };
 
-  return (
+  const originEl = (
     <Pre {...rest}>
       <span className="codeblock__inner">
         <code
@@ -79,24 +82,44 @@ export default function CodeBlock({ code, language, children, ...rest }) {
           dangerouslySetInnerHTML={{ __html: hljs.highlightAuto(source, [language]).value }}
         />
       </span>
-      <Button className="copy-button" onClick={onCopy} color="primary" disabled={copied}>
-        {!copied && <CopyIcon style={{ color: '#fff', fontSize: 16 }} />}
-        {copied && <CheckIcon style={{ color: '#fff', fontSize: 16 }} />}
-      </Button>
+      <div className="copy-button" onClick={onCopy}>
+        <span className="default-text">{language}</span>
+        <span className="hover-text">
+          {!copied ? (
+            <>
+              <CopyIcon className="copy-icon" />
+              <span className="button-lang-text">copy</span>
+            </>
+          ) : (
+            <>
+              <CheckIcon className="copy-icon" />
+              <span className="button-lang-text">copied</span>
+            </>
+          )}
+        </span>
+      </div>
     </Pre>
   );
+
+  if (!dark) {
+    return <LightBox>{originEl}</LightBox>;
+  }
+
+  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';
@@ -112,7 +135,7 @@ const Pre = styled('pre')`
   border-radius: 5px;
   border: 1px solid #dedede;
   background: #222;
-  color: #fff;
+  color: ${colors.common.white};
   position: relative;
 
   .codeblock__inner {
@@ -123,32 +146,63 @@ const Pre = styled('pre')`
   }
 
   .copy-button {
-    display: none;
+    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;
 
-    &,
-    &:hover,
-    &.Mui-disabled {
-      background: ${colors.primary.main};
+    .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: #fff;
     * {
       font-family: ${fontFamily};
     }