@arcblock/ux 2.9.90 → 2.10.0

package/lib/Screenshot/BaseScreenshot/index.js

@@ -1,37 +1,20 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = void 0;
-var _Theme = require("@arcblock/ux/lib/Theme");
-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;
-const _excluded = ["width", "children", "type", "sx"];
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
-function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
-function _defineProperty(obj, key, value) { key = _toPropertyKey(key); if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
-function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == typeof i ? i : String(i); }
-function _toPrimitive(t, r) { if ("object" != typeof t || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != typeof i) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
-function _taggedTemplateLiteral(strings, raw) { if (!raw) { raw = strings.slice(0); } return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); }
-function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
-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; }
+import { styled } from '@arcblock/ux/lib/Theme';
+import PropTypes from 'prop-types';
+import phone from './shells/Phone';
+import macbook from './shells/Macbook';
+import { jsx as _jsx } from "react/jsx-runtime";
+import { jsxs as _jsxs } from "react/jsx-runtime";
 const map = {
-  phone: _Phone.default,
-  macbook: _Macbook.default
+  phone,
+  macbook
 };
-function Screenshot(_ref) {
-  let {
-      width,
-      children,
-      type,
-      sx
-    } = _ref,
-    rest = _objectWithoutProperties(_ref, _excluded);
+function Screenshot({
+  width,
+  children,
+  type,
+  sx,
+  ...rest
+}) {
   const _type = type.toLowerCase();
   const {
     Shell,
@@ -39,31 +22,70 @@ function Screenshot(_ref) {
     screenData,
     width: defaultWidth
   } = map[_type || 'phone'];
-  const Root = (0, _Theme.styled)('div')(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n    position: relative;\n    display: inline-block;\n    width: ", ";\n    &:after {\n      display: block;\n      content: '';\n      padding-bottom: ", "%;\n    }\n    > svg {\n      display: block;\n    }\n\n    .screenshot--container {\n      position: absolute;\n      left: ", "%;\n      top: ", "%;\n      width: ", "%;\n      height: ", "%;\n      ", ";\n      background-color: #fff;\n      overflow: hidden;\n      > img {\n        display: block;\n        width: 100%;\n        height: 100%;\n        min-width: 100%;\n        min-height: 100%;\n      }\n    }\n\n    .absolute-size {\n      position: absolute;\n      left: 0;\n      top: 0;\n      width: 100%;\n      height: 100%;\n    }\n  "])), width || "".concat(defaultWidth, "px"), ratio * 100, screenData.x * 100, screenData.y * 100, screenData.width * 100, screenData.height * 100, screenData.radius ? "border-radius: ".concat(screenData.radius) : '');
-  return /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+  const Root = styled('div')`
+    position: relative;
+    display: inline-block;
+    width: ${width || `${defaultWidth}px`};
+    &:after {
+      display: block;
+      content: '';
+      padding-bottom: ${ratio * 100}%;
+    }
+    > svg {
+      display: block;
+    }
+
+    .screenshot--container {
+      position: absolute;
+      left: ${screenData.x * 100}%;
+      top: ${screenData.y * 100}%;
+      width: ${screenData.width * 100}%;
+      height: ${screenData.height * 100}%;
+      ${screenData.radius ? `border-radius: ${screenData.radius}` : ''};
+      background-color: #fff;
+      overflow: hidden;
+      > img {
+        display: block;
+        width: 100%;
+        height: 100%;
+        min-width: 100%;
+        min-height: 100%;
+      }
+    }
+
+    .absolute-size {
+      position: absolute;
+      left: 0;
+      top: 0;
+      width: 100%;
+      height: 100%;
+    }
+  `;
+  return /*#__PURE__*/_jsx("div", {
     style: {
       display: 'flex',
       justifyContent: 'center'
     },
-    children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(Root, _objectSpread(_objectSpread({}, rest), {}, {
-      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(Shell, {
+    children: /*#__PURE__*/_jsxs(Root, {
+      ...rest,
+      children: [/*#__PURE__*/_jsx(Shell, {
         className: "absolute-size"
-      }), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+      }), /*#__PURE__*/_jsx("div", {
         className: "screenshot--container",
         children: children
       })]
-    }))
+    })
   });
 }
 Screenshot.propTypes = {
-  width: _propTypes.default.number,
-  type: _propTypes.default.string,
-  children: _propTypes.default.node.isRequired,
-  sx: _propTypes.default.object
+  width: PropTypes.number,
+  type: PropTypes.string,
+  children: PropTypes.node.isRequired,
+  sx: PropTypes.object
 };
 Screenshot.defaultProps = {
   width: 0,
   type: 'phone',
   sx: {}
 };
-var _default = exports.default = Screenshot;
+export default Screenshot;

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

@@ -1,48 +1,38 @@
-"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(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
-function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
-function _defineProperty(obj, key, value) { key = _toPropertyKey(key); if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
-function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == typeof i ? i : String(i); }
-function _toPrimitive(t, r) { if ("object" != typeof t || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != typeof i) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
-function Shell(_ref) {
-  let rest = Object.assign({}, _ref);
-  return /*#__PURE__*/(0, _jsxRuntime.jsxs)("svg", _objectSpread(_objectSpread({
+import { jsx as _jsx } from "react/jsx-runtime";
+import { jsxs as _jsxs } from "react/jsx-runtime";
+export function Shell({
+  ...rest
+}) {
+  return /*#__PURE__*/_jsxs("svg", {
     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", {
+    xmlns: "http://www.w3.org/2000/svg",
+    ...rest,
+    children: [/*#__PURE__*/_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", {
+    }), /*#__PURE__*/_jsx("path", {
       fillRule: "evenodd",
       clipRule: "evenodd",
       d: "M62 28H847V466H62V28Z"
-    }), /*#__PURE__*/(0, _jsxRuntime.jsx)("path", {
+    }), /*#__PURE__*/_jsx("path", {
       d: "M0 490H909V493C909 506.255 898.255 517 885 517H24C10.7452 517 0 506.255 0 493V490Z",
       fill: "#282828"
     })]
-  }));
+  });
 }
 
 // 设备截图的实际尺寸
-const width = exports.width = 909;
-const height = exports.height = 517;
+export const width = 909;
+export const height = 517;
 
 // 屏幕的比例
-const ratio = exports.ratio = 438 / 785;
+export const ratio = 438 / 785;
 
 // 屏幕相关数据
-const screenData = exports.screenData = {
+export const screenData = {
   // 屏幕坐标轴相对图片的百分比
   x: 68 / 909,
   y: 28 / 517,
@@ -52,7 +42,7 @@ const screenData = exports.screenData = {
   // 是否有圆角
   radius: 'none'
 };
-var _default = exports.default = {
+export default {
   Shell,
   ratio,
   screenData,

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

@@ -1,44 +1,33 @@
-"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(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
-function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
-function _defineProperty(obj, key, value) { key = _toPropertyKey(key); if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
-function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == typeof i ? i : String(i); }
-function _toPrimitive(t, r) { if ("object" != typeof t || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != typeof i) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
-const width = exports.width = 268;
-const height = exports.height = 554;
-function Shell(_ref) {
-  let rest = Object.assign({}, _ref);
-  return /*#__PURE__*/(0, _jsxRuntime.jsx)("svg", _objectSpread(_objectSpread({
+import { jsx as _jsx } from "react/jsx-runtime";
+export const width = 268;
+export const height = 554;
+export function Shell({
+  ...rest
+}) {
+  return /*#__PURE__*/_jsx("svg", {
     width: "268",
     height: "554",
     viewBox: "0 0 268 554",
     fill: "none",
-    xmlns: "http://www.w3.org/2000/svg"
-  }, rest), {}, {
-    children: /*#__PURE__*/(0, _jsxRuntime.jsx)("path", {
+    xmlns: "http://www.w3.org/2000/svg",
+    ...rest,
+    children: /*#__PURE__*/_jsx("path", {
       d: "M37 7.5H230.929C247.222 7.5 260.429 20.7076 260.429 37V517C260.429 533.292 247.222 546.5 230.929 546.5H37C20.7076 546.5 7.5 533.292 7.5 517V37C7.5 20.7076 20.7076 7.5 37 7.5Z",
       fill: "#2F2F2F",
       stroke: "#2F2F2F",
       strokeWidth: "15"
     })
-  }));
+  });
 }
-const ratio = exports.ratio = 798 / 386;
-const screenData = exports.screenData = {
+export const ratio = 798 / 386;
+export const screenData = {
   x: 15 / 384,
   y: 15 / 794,
   width: 354 / 384,
   height: 764 / 794,
   radius: '10% / 5%'
 };
-var _default = exports.default = {
+export default {
   Shell,
   ratio,
   screenData,

package/lib/Screenshot/index.js

@@ -1,28 +1,11 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = void 0;
-var _react = require("react");
-var _propTypes = _interopRequireDefault(require("prop-types"));
-var _Util = require("../Util");
-var _Theme = require("../Theme");
-var _BaseScreenshot = _interopRequireDefault(require("./BaseScreenshot"));
-require("./devices.css");
-var _jsxRuntime = require("react/jsx-runtime");
-var _templateObject, _templateObject2;
-const _excluded = ["type", "children", "style", "className", "width", "height"],
-  _excluded2 = ["type", "src", "children", "style", "sx"];
-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) } })); }
-function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
-function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
-function _defineProperty(obj, key, value) { key = _toPropertyKey(key); if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
-function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == typeof i ? i : String(i); }
-function _toPrimitive(t, r) { if ("object" != typeof t || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != typeof i) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
-function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
-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; }
+import { createElement, Children, cloneElement, useEffect, useRef, useState } from 'react';
+import PropTypes from 'prop-types';
+import { mergeProps } from '../Util';
+import { styled } from '../Theme';
+import BaseScreenshot from './BaseScreenshot';
+import './devices.css';
+import { jsx as _jsx } from "react/jsx-runtime";
+import { jsxs as _jsxs } from "react/jsx-runtime";
 const types = {
   'iphone-x': {
     borderRadius: 32,
@@ -94,19 +77,18 @@ const childProps = {
   img: ['alt', 'title', 'src', 'srcSet', 'sizes', 'loading', 'key', 'children'],
   video: ['alt', 'title', 'muted', 'autoplay', 'loop', 'key', 'children']
 };
-const createChild = child => [/*#__PURE__*/(0, _react.createElement)(child.type, childProps[child.type].reduce((acc, x) => {
+const createChild = child => [/*#__PURE__*/createElement(child.type, childProps[child.type].reduce((acc, x) => {
   acc[x] = child.props[x];
   return acc;
 }, {}))];
-const findChildren = function findChildren(children) {
-  let returnArgWhenNotFound = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : true;
+const findChildren = (children, returnArgWhenNotFound = true) => {
   for (let i = 0; i < children.length; i++) {
     const child = children[i];
     if (['img', 'video'].includes(child.type)) {
       return createChild(child);
     }
     if (child.props && child.props.children) {
-      const subChildren = _react.Children.toArray(child.props.children);
+      const subChildren = Children.toArray(child.props.children);
       const result = findChildren(subChildren, false);
       if (result) {
         return result;
@@ -123,55 +105,74 @@ const findChildren = function findChildren(children) {
 // By default it will find and only render img/video tags in the children
 // If neither of them are found, the whole child tree is rendered
 function OldScreenshot(props) {
-  const newProps = (0, _Util.mergeProps)(props, OldScreenshot, ['style', 'width', 'height']);
+  const newProps = mergeProps(props, OldScreenshot, ['style', 'width', 'height']);
   const {
-      type,
-      children,
-      style,
-      className,
-      width,
-      height
-    } = newProps,
-    rest = _objectWithoutProperties(newProps, _excluded);
+    type,
+    children,
+    style,
+    className,
+    width,
+    height,
+    ...rest
+  } = newProps;
   const {
     zIndex = 0,
     borderRadius = 0
   } = types[type] || {};
-  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(Div, _objectSpread(_objectSpread({}, rest), {}, {
+  return /*#__PURE__*/_jsxs(Div, {
+    ...rest,
     type: type,
-    className: "device device-".concat(type, " ").concat(className).trim(),
+    className: `device device-${type} ${className}`.trim(),
     style: style,
     contentRadius: borderRadius,
     contentZIndex: zIndex,
-    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+    children: [/*#__PURE__*/_jsx("div", {
       className: "device-frame",
-      children: /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+      children: /*#__PURE__*/_jsx("div", {
         className: "device-content",
-        children: findChildren(_react.Children.toArray(children)).map((item, index) => /*#__PURE__*/(0, _react.cloneElement)(item, {
+        children: findChildren(Children.toArray(children)).map((item, index) => /*#__PURE__*/cloneElement(item, {
           key: index
         }))
       })
-    }), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+    }), /*#__PURE__*/_jsx("div", {
       className: "device-stripe"
-    }), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+    }), /*#__PURE__*/_jsx("div", {
       className: "device-header"
-    }), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+    }), /*#__PURE__*/_jsx("div", {
       className: "device-sensors"
-    }), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+    }), /*#__PURE__*/_jsx("div", {
       className: "device-btns"
-    }), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+    }), /*#__PURE__*/_jsx("div", {
       className: "device-power"
     })]
-  }));
+  });
 }
-const Div = (0, _Theme.styled)('div')(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  @media (max-width: ", "px) {\n    transform-origin: 0 0;\n    transform: scale(", ");\n  }\n  .device-content {\n    overflow: hidden;\n  }\n  .device-content video,\n  .device-content img {\n    border-radius: ", "px;\n    background-color: #fff;\n    background-position: center center;\n    background-size: cover;\n    object-fit: cover;\n    width: 100.1%;\n    height: 100.1%;\n  }\n"])), props => types[props.type].width, props => types[props.type].scale, props => props.contentRadius);
+const Div = styled('div')`
+  @media (max-width: ${props => types[props.type].width}px) {
+    transform-origin: 0 0;
+    transform: scale(${props => types[props.type].scale});
+  }
+  .device-content {
+    overflow: hidden;
+  }
+  .device-content video,
+  .device-content img {
+    border-radius: ${props => props.contentRadius}px;
+    background-color: #fff;
+    background-position: center center;
+    background-size: cover;
+    object-fit: cover;
+    width: 100.1%;
+    height: 100.1%;
+  }
+`;
 OldScreenshot.propTypes = {
-  type: _propTypes.default.oneOf(Object.keys(types)),
-  children: _propTypes.default.any.isRequired,
-  className: _propTypes.default.string,
-  width: _propTypes.default.number,
-  height: _propTypes.default.number,
-  style: _propTypes.default.oneOfType([_propTypes.default.object, _propTypes.default.string])
+  type: PropTypes.oneOf(Object.keys(types)),
+  children: PropTypes.any.isRequired,
+  className: PropTypes.string,
+  width: PropTypes.number,
+  height: PropTypes.number,
+  style: PropTypes.oneOfType([PropTypes.object, PropTypes.string])
 };
 OldScreenshot.defaultProps = {
   type: 'iphone-x',
@@ -187,10 +188,10 @@ OldScreenshot.defaultProps = {
  * @returns <OldScreenshot />
  */
 function ScreenFixer(props) {
-  const screenEl = (0, _react.useRef)(null);
-  const [height, setHeight] = (0, _react.useState)(undefined);
-  const [scale, setScale] = (0, _react.useState)(null);
-  (0, _react.useEffect)(() => {
+  const screenEl = useRef(null);
+  const [height, setHeight] = useState(undefined);
+  const [scale, setScale] = useState(null);
+  useEffect(() => {
     let resizeObs;
     const fixSize = () => {
       const {
@@ -222,62 +223,72 @@ function ScreenFixer(props) {
     };
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [screenEl.current]);
-  return /*#__PURE__*/(0, _jsxRuntime.jsx)(ReScreen, {
+  return /*#__PURE__*/_jsx(ReScreen, {
     ref: screenEl,
     style: {
       height
     },
-    children: /*#__PURE__*/(0, _jsxRuntime.jsx)(OldScreenshot, _objectSpread(_objectSpread({}, props), {}, {
+    children: /*#__PURE__*/_jsx(OldScreenshot, {
+      ...props,
       style: {
-        transform: scale ? "scale(".concat(scale, ")") : undefined
+        transform: scale ? `scale(${scale})` : undefined
       }
-    }))
+    })
   });
 }
-const ReScreen = (0, _Theme.styled)('div')(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  div[type] {\n    transform: scale(1);\n    transform-origin: 0 0;\n  }\n"])));
-function Screenshot(_ref) {
-  let {
-      type,
-      src,
-      children,
-      style,
-      sx
-    } = _ref,
-    rest = _objectWithoutProperties(_ref, _excluded2);
+const ReScreen = styled('div')`
+  div[type] {
+    transform: scale(1);
+    transform-origin: 0 0;
+  }
+`;
+function Screenshot({
+  type,
+  src,
+  children,
+  style,
+  sx,
+  ...rest
+}) {
   const _type = type.toLowerCase();
 
   // 新版采用容器采用BaseScreenshot，svg集成，更容易拓展，响应式更好
   if (['phone', 'macbook'].includes(_type)) {
-    return /*#__PURE__*/(0, _jsxRuntime.jsx)(_BaseScreenshot.default, _objectSpread(_objectSpread({
+    return /*#__PURE__*/_jsx(BaseScreenshot, {
       type: _type,
-      sx: _objectSpread(_objectSpread({}, sx), style)
-    }, rest), {}, {
-      children: children || (src ? /*#__PURE__*/(0, _jsxRuntime.jsx)("img", {
+      sx: {
+        ...sx,
+        ...style
+      },
+      ...rest,
+      children: children || (src ? /*#__PURE__*/_jsx("img", {
         src: src,
         alt: "screenshot"
       }) : null)
-    }));
+    });
   }
 
   // 旧版采用纯css制作，定制性欠缺，暂时保留使用
-  return /*#__PURE__*/(0, _jsxRuntime.jsx)(ScreenFixer, _objectSpread(_objectSpread({
-    type: type
-  }, rest), {}, {
-    sx: _objectSpread(_objectSpread(_objectSpread({}, sx), style), {}, {
+  return /*#__PURE__*/_jsx(ScreenFixer, {
+    type: type,
+    ...rest,
+    sx: {
+      ...sx,
+      ...style,
       margin: 'auto'
-    }),
-    children: children || (src ? /*#__PURE__*/(0, _jsxRuntime.jsx)("img", {
+    },
+    children: children || (src ? /*#__PURE__*/_jsx("img", {
       src: src,
       alt: "screenshot"
     }) : null)
-  }));
+  });
 }
 Screenshot.propTypes = {
-  type: _propTypes.default.string.isRequired,
-  src: _propTypes.default.string,
-  style: _propTypes.default.object,
-  sx: _propTypes.default.object,
-  children: _propTypes.default.any
+  type: PropTypes.string.isRequired,
+  src: PropTypes.string,
+  style: PropTypes.object,
+  sx: PropTypes.object,
+  children: PropTypes.any
 };
 Screenshot.defaultProps = {
   src: '',
@@ -285,4 +296,4 @@ Screenshot.defaultProps = {
   style: {},
   sx: {}
 };
-var _default = exports.default = Screenshot;
+export default Screenshot;