@arcblock/ux 2.4.20 → 2.4.23

package/lib/ClickToCopy/copy-button.js

@@ -19,7 +19,7 @@ var _hook = _interopRequireDefault(require("./hook"));
 
 var _jsxRuntime = require("react/jsx-runtime");
 
-const _excluded = ["content", "locale", "render"];
+const _excluded = ["content", "locale", "render", "showTooltip"];
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
@@ -37,7 +37,8 @@ function CopyButton(_ref) {
   let {
     content,
     locale,
-    render
+    render,
+    showTooltip
   } = _ref,
       rest = _objectWithoutProperties(_ref, _excluded);
 
@@ -63,7 +64,7 @@ function CopyButton(_ref) {
       title: texts.copied,
       placement: "bottom",
       arrow: true,
-      open: copied,
+      open: copied && showTooltip,
       children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Check.default, {
         sx: _objectSpread(_objectSpread({}, iconStyle), {}, {
           color: _colors.green[500]
@@ -90,10 +91,12 @@ function CopyButton(_ref) {
 CopyButton.propTypes = {
   content: _propTypes.default.string,
   locale: _propTypes.default.oneOf(['en', 'zh']),
-  render: _propTypes.default.func
+  render: _propTypes.default.func,
+  showTooltip: _propTypes.default.bool
 };
 CopyButton.defaultProps = {
   content: '',
   locale: 'en',
-  render: undefined
+  render: undefined,
+  showTooltip: true
 };

package/lib/Screenshot/BaseScreenshot/index.js

@@ -11,6 +11,8 @@ var _propTypes = _interopRequireDefault(require("prop-types"));
 
 var _Phone = _interopRequireDefault(require("./shells/Phone"));
 
+var _Macbook = _interopRequireDefault(require("./shells/Macbook"));
+
 var _jsxRuntime = require("react/jsx-runtime");
 
 var _templateObject;
@@ -32,7 +34,8 @@ function _objectWithoutProperties(source, excluded) { if (source == null) return
 function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
 
 const map = {
-  phone: _Phone.default
+  phone: _Phone.default,
+  macbook: _Macbook.default
 };
 
 function Screenshot(_ref) {

package/lib/Screenshot/BaseScreenshot/shells/Macbook.js

@@ -0,0 +1,67 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.Shell = Shell;
+exports.width = exports.screenData = exports.ratio = exports.height = exports.default = void 0;
+
+var _jsxRuntime = require("react/jsx-runtime");
+
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
+
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+
+function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
+
+function Shell(_ref) {
+  let rest = Object.assign({}, _ref);
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)("svg", _objectSpread(_objectSpread({
+    width: "909",
+    height: "517",
+    viewBox: "0 0 909 517",
+    fill: "none",
+    xmlns: "http://www.w3.org/2000/svg"
+  }, rest), {}, {
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("path", {
+      d: "M48 16C48 7.16343 55.1634 0 64 0H845C853.837 0 861 7.16344 861 16V490H48V16Z",
+      fill: "black"
+    }), /*#__PURE__*/(0, _jsxRuntime.jsx)("path", {
+      fillRule: "evenodd",
+      clipRule: "evenodd",
+      d: "M62 28H847V466H62V28Z"
+    }), /*#__PURE__*/(0, _jsxRuntime.jsx)("path", {
+      d: "M0 490H909V493C909 506.255 898.255 517 885 517H24C10.7452 517 0 506.255 0 493V490Z",
+      fill: "#282828"
+    })]
+  }));
+} // 设备截图的实际尺寸
+
+
+const width = 909;
+exports.width = width;
+const height = 517; // 屏幕的比例
+
+exports.height = height;
+const ratio = 438 / 785; // 屏幕相关数据
+
+exports.ratio = ratio;
+const screenData = {
+  // 屏幕坐标轴相对图片的百分比
+  x: 68 / 909,
+  y: 28 / 517,
+  // 屏幕尺寸相对图片尺寸的百分比
+  width: 773 / 909,
+  height: 438 / 517,
+  // 是否有圆角
+  radius: 'none'
+};
+exports.screenData = screenData;
+var _default = {
+  Shell,
+  ratio,
+  screenData,
+  width,
+  height
+};
+exports.default = _default;

package/lib/Screenshot/index.js

@@ -279,7 +279,7 @@ function Screenshot(_ref) {
   const _type = type.toLowerCase(); // 新版采用容器采用BaseScreenshot，svg集成，更容易拓展，响应式更好
 
 
-  if (['phone'].includes(_type)) {
+  if (['phone', 'macbook'].includes(_type)) {
     return /*#__PURE__*/(0, _jsxRuntime.jsx)(_BaseScreenshot.default, _objectSpread(_objectSpread({
       type: _type,
       sx: _objectSpread(_objectSpread({}, sx), style)

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@arcblock/ux",
-  "version": "2.4.20",
+  "version": "2.4.23",
   "description": "Common used react components for arcblock products",
   "keywords": [
     "react",
@@ -19,11 +19,11 @@
     "lint": "eslint src tests",
     "build": "babel src --out-dir lib --copy-files --no-copy-ignored",
     "watch": "babel src --out-dir lib -w --copy-files --no-copy-ignored",
-    "precommit": "CI=1 yarn test",
-    "prepush": "CI=1 yarn test",
+    "precommit": "CI=1 npm run lint",
+    "prepush": "CI=1 npm run lint",
     "prepublish": "npm run build",
-    "test": "npm run lint && node tools/jest.js",
-    "coverage": "npm run lint && yarn test -- --coverage"
+    "test": "node tools/jest.js",
+    "coverage": "npm run test -- --coverage"
   },
   "bugs": {
     "url": "https://github.com/ArcBlock/ux/issues"
@@ -39,7 +39,7 @@
     "@babel/preset-react": "^7.18.6",
     "babel-plugin-inline-react-svg": "^1.1.2",
     "eslint-plugin-react-hooks": "^4.6.0",
-    "jest": "^24.9.0",
+    "jest": "^28.1.3",
     "moment-timezone": "^0.5.34"
   },
   "peerDependencies": {
@@ -47,10 +47,10 @@
     "react": ">=18.1.0",
     "react-ga": "^2.7.0"
   },
-  "gitHead": "bdb1f508cab04693766e9cea4aec7edf42f64129",
+  "gitHead": "2a53c85d0567c3534060d8f38ab05279d7e39d15",
   "dependencies": {
-    "@arcblock/icons": "^2.4.20",
-    "@arcblock/react-hooks": "^2.4.20",
+    "@arcblock/icons": "^2.4.23",
+    "@arcblock/react-hooks": "^2.4.23",
     "@babel/plugin-syntax-dynamic-import": "^7.8.3",
     "@emotion/react": "^11.10.0",
     "@emotion/styled": "^11.10.0",

package/src/ClickToCopy/copy-button.js

@@ -5,7 +5,7 @@ import CopyIcon from '@mui/icons-material/ContentCopy';
 import CheckIcon from '@mui/icons-material/Check';
 import useCopy from './hook';
 
-export default function CopyButton({ content, locale, render, ...rest }) {
+export default function CopyButton({ content, locale, render, showTooltip, ...rest }) {
   const { containerRef, copied, copy, texts } = useCopy({ content, locale });
   const iconStyle = {
     fontSize: '1em',
@@ -14,7 +14,7 @@ export default function CopyButton({ content, locale, render, ...rest }) {
   const copyButton = (
     <span title={copied ? '' : texts.copy} {...rest} style={{ height: '1em', ...rest.style }}>
       {copied ? (
-        <Tooltip title={texts.copied} placement="bottom" arrow open={copied}>
+        <Tooltip title={texts.copied} placement="bottom" arrow open={copied && showTooltip}>
           <CheckIcon sx={{ ...iconStyle, color: green[500] }} />
         </Tooltip>
       ) : (
@@ -33,10 +33,12 @@ 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/src/Screenshot/BaseScreenshot/index.jsx

@@ -2,9 +2,11 @@ import { styled } from '@arcblock/ux/lib/Theme';
 import PropTypes from 'prop-types';
 
 import phone from './shells/Phone';
+import macbook from './shells/Macbook';
 
 const map = {
   phone,
+  macbook,
 };
 
 function Screenshot({ width, children, type, sx, ...rest }) {

package/src/Screenshot/BaseScreenshot/shells/Macbook.jsx

@@ -0,0 +1,36 @@
+export function Shell({ ...rest }) {
+  return (
+    <svg width="909" height="517" viewBox="0 0 909 517" fill="none" xmlns="http://www.w3.org/2000/svg" {...rest}>
+      <path d="M48 16C48 7.16343 55.1634 0 64 0H845C853.837 0 861 7.16344 861 16V490H48V16Z" fill="black" />
+      <path fillRule="evenodd" clipRule="evenodd" d="M62 28H847V466H62V28Z" />
+      <path d="M0 490H909V493C909 506.255 898.255 517 885 517H24C10.7452 517 0 506.255 0 493V490Z" fill="#282828" />
+    </svg>
+  );
+}
+
+// 设备截图的实际尺寸
+export const width = 909;
+export const height = 517;
+
+// 屏幕的比例
+export const ratio = 438 / 785;
+
+// 屏幕相关数据
+export const screenData = {
+  // 屏幕坐标轴相对图片的百分比
+  x: 68 / 909,
+  y: 28 / 517,
+  // 屏幕尺寸相对图片尺寸的百分比
+  width: 773 / 909,
+  height: 438 / 517,
+  // 是否有圆角
+  radius: 'none',
+};
+
+export default {
+  Shell,
+  ratio,
+  screenData,
+  width,
+  height,
+};

package/src/Screenshot/index.js

@@ -242,7 +242,7 @@ function Screenshot({ type, src, children, style, sx, ...rest }) {
   const _type = type.toLowerCase();
 
   // 新版采用容器采用BaseScreenshot，svg集成，更容易拓展，响应式更好
-  if (['phone'].includes(_type)) {
+  if (['phone', 'macbook'].includes(_type)) {
     return (
       <BaseScreenshot type={_type} sx={{ ...sx, ...style }} {...rest}>
         {children || (src ? <img src={src} alt="screenshot" /> : null)}