@arcblock/ux 2.4.22 → 2.4.23

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.22",
+  "version": "2.4.23",
   "description": "Common used react components for arcblock products",
   "keywords": [
     "react",
@@ -47,10 +47,10 @@
     "react": ">=18.1.0",
     "react-ga": "^2.7.0"
   },
-  "gitHead": "a8e5f9c2a89b99064c6a085b6cc1a3042095ecf4",
+  "gitHead": "2a53c85d0567c3534060d8f38ab05279d7e39d15",
   "dependencies": {
-    "@arcblock/icons": "^2.4.22",
-    "@arcblock/react-hooks": "^2.4.22",
+    "@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/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)}