@arcblock/ux 2.4.3 → 2.4.4

package/lib/Screenshot/BaseScreenshot/index.js

@@ -0,0 +1,84 @@
+"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 _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(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 _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; }
+
+const map = {
+  phone: _Phone.default
+};
+
+function Screenshot(_ref) {
+  let {
+    width,
+    children,
+    type,
+    sx
+  } = _ref,
+      rest = _objectWithoutProperties(_ref, _excluded);
+
+  const _type = type.toLowerCase();
+
+  const {
+    Shell,
+    ratio,
+    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", {
+    style: {
+      display: 'flex',
+      justifyContent: 'center'
+    },
+    children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(Root, _objectSpread(_objectSpread({}, rest), {}, {
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(Shell, {
+        className: "absolute-size"
+      }), /*#__PURE__*/(0, _jsxRuntime.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
+};
+Screenshot.defaultProps = {
+  width: 0,
+  type: 'phone',
+  sx: {}
+};
+var _default = Screenshot;
+exports.default = _default;

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

@@ -0,0 +1,57 @@
+"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; }
+
+const width = 268;
+exports.width = width;
+const height = 554;
+exports.height = height;
+
+function Shell(_ref) {
+  let rest = Object.assign({}, _ref);
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)("svg", _objectSpread(_objectSpread({
+    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", {
+      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 = 798 / 386;
+exports.ratio = ratio;
+const screenData = {
+  x: 15 / 384,
+  y: 15 / 794,
+  width: 354 / 384,
+  height: 764 / 794,
+  radius: '10% / 5%'
+};
+exports.screenData = screenData;
+var _default = {
+  Shell,
+  ratio,
+  screenData,
+  width,
+  height
+};
+exports.default = _default;

package/lib/Screenshot/index.js

@@ -13,13 +13,16 @@ var _Util = require("../Util");
 
 var _Theme = require("../Theme");
 
+var _BaseScreenshot = _interopRequireDefault(require("./BaseScreenshot"));
+
 require("./devices.css");
 
 var _jsxRuntime = require("react/jsx-runtime");
 
-var _templateObject;
+var _templateObject, _templateObject2;
 
-const _excluded = ["type", "children", "style", "className", "width", "height"];
+const _excluded = ["type", "children", "style", "className", "width", "height"],
+      _excluded2 = ["type", "src", "children", "style", "sx"];
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
@@ -143,8 +146,8 @@ const findChildren = function findChildren(children) {
 // If neither of them are found, the whole child tree is rendered
 
 
-function Screenshot(props) {
-  const newProps = (0, _Util.mergeProps)(props, Screenshot, ['style', 'width', 'height']);
+function OldScreenshot(props) {
+  const newProps = (0, _Util.mergeProps)(props, OldScreenshot, ['style', 'width', 'height']);
 
   const {
     type,
@@ -189,7 +192,7 @@ function Screenshot(props) {
 }
 
 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);
-Screenshot.propTypes = {
+OldScreenshot.propTypes = {
   type: _propTypes.default.oneOf(Object.keys(types)),
   children: _propTypes.default.any.isRequired,
   className: _propTypes.default.string,
@@ -197,12 +200,123 @@ Screenshot.propTypes = {
   height: _propTypes.default.number,
   style: _propTypes.default.oneOfType([_propTypes.default.object, _propTypes.default.string])
 };
-Screenshot.defaultProps = {
+OldScreenshot.defaultProps = {
   type: 'iphone-x',
   className: '',
   style: '{}',
   width: 0,
   height: 0
 };
+/**
+ * 用于修正旧版 Screenshot 无法匹配尺寸的问题
+ * @param {*} props params to OldScreenshot
+ * @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)(() => {
+    let resizeObs;
+
+    const fixSize = () => {
+      const {
+        clientWidth
+      } = screenEl.current; // 获取内部元素的宽高
+
+      const {
+        clientWidth: targetWidth,
+        clientHeight: targetHeight
+      } = screenEl.current.children[0];
+      const realScale = clientWidth / targetWidth;
+
+      if (realScale < 1) {
+        setScale(realScale);
+        setHeight(realScale * targetHeight);
+      } else {
+        setScale(null);
+        setHeight(undefined);
+      }
+    };
+
+    if (screenEl.current) {
+      resizeObs = new ResizeObserver(fixSize);
+      resizeObs.observe(screenEl.current);
+    }
+
+    return () => {
+      if (resizeObs) {
+        resizeObs.disconnect();
+      }
+    }; // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [screenEl.current]);
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(ReScreen, {
+    ref: screenEl,
+    style: {
+      height
+    },
+    children: /*#__PURE__*/(0, _jsxRuntime.jsx)(OldScreenshot, _objectSpread(_objectSpread({}, props), {}, {
+      style: {
+        transform: scale ? "scale(".concat(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 _type = type.toLowerCase(); // 新版采用容器采用BaseScreenshot，svg集成，更容易拓展，响应式更好
+
+
+  if (['phone'].includes(_type)) {
+    return /*#__PURE__*/(0, _jsxRuntime.jsx)(_BaseScreenshot.default, _objectSpread(_objectSpread({
+      type: _type,
+      sx: _objectSpread(_objectSpread({}, sx), style)
+    }, rest), {}, {
+      children: children || (src ? /*#__PURE__*/(0, _jsxRuntime.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), {}, {
+      margin: 'auto'
+    }),
+    children: children || (src ? /*#__PURE__*/(0, _jsxRuntime.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
+};
+Screenshot.defaultProps = {
+  src: '',
+  children: null,
+  style: {},
+  sx: {}
+};
 var _default = Screenshot;
 exports.default = _default;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@arcblock/ux",
-  "version": "2.4.3",
+  "version": "2.4.4",
   "description": "Common used react components for arcblock products",
   "keywords": [
     "react",
@@ -47,10 +47,10 @@
     "react": ">=18.1.0",
     "react-ga": "^2.7.0"
   },
-  "gitHead": "a3c4e62917f630b62edccc064cfbb88e72b8407d",
+  "gitHead": "655d38787fa04e77a719601a46b93d49cde243e4",
   "dependencies": {
-    "@arcblock/icons": "^2.4.3",
-    "@arcblock/react-hooks": "^2.4.3",
+    "@arcblock/icons": "^2.4.4",
+    "@arcblock/react-hooks": "^2.4.4",
     "@babel/plugin-syntax-dynamic-import": "^7.8.3",
     "@emotion/react": "^11.10.0",
     "@emotion/styled": "^11.10.0",

package/src/Screenshot/BaseScreenshot/index.jsx

@@ -0,0 +1,77 @@
+import { styled } from '@arcblock/ux/lib/Theme';
+import PropTypes from 'prop-types';
+
+import phone from './shells/Phone';
+
+const map = {
+  phone,
+};
+
+function Screenshot({ width, children, type, sx, ...rest }) {
+  const _type = type.toLowerCase();
+
+  const { Shell, ratio, screenData, width: defaultWidth } = map[_type || 'phone'];
+
+  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 (
+    <div style={{ display: 'flex', justifyContent: 'center' }}>
+      <Root {...rest}>
+        <Shell className="absolute-size" />
+        <div className="screenshot--container">{children}</div>
+      </Root>
+    </div>
+  );
+}
+
+Screenshot.propTypes = {
+  width: PropTypes.number,
+  type: PropTypes.string,
+  children: PropTypes.node.isRequired,
+  sx: PropTypes.object,
+};
+Screenshot.defaultProps = {
+  width: 0,
+  type: 'phone',
+  sx: {},
+};
+
+export default Screenshot;

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

@@ -0,0 +1,33 @@
+export const width = 268;
+export const height = 554;
+
+export function Shell({ ...rest }) {
+  return (
+    <svg width="268" height="554" viewBox="0 0 268 554" fill="none" xmlns="http://www.w3.org/2000/svg" {...rest}>
+      <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"
+      />
+    </svg>
+  );
+}
+
+export const ratio = 798 / 386;
+
+export const screenData = {
+  x: 15 / 384,
+  y: 15 / 794,
+  width: 354 / 384,
+  height: 764 / 794,
+  radius: '10% / 5%',
+};
+
+export default {
+  Shell,
+  ratio,
+  screenData,
+  width,
+  height,
+};

package/src/Screenshot/index.js

@@ -1,8 +1,9 @@
-import { createElement, Children, cloneElement } from 'react';
+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';
 
@@ -116,8 +117,8 @@ const findChildren = (children, returnArgWhenNotFound = true) => {
 // This component is built upon the awesome device.css lib
 // 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 Screenshot(props) {
-  const newProps = mergeProps(props, Screenshot, ['style', 'width', 'height']);
+function OldScreenshot(props) {
+  const newProps = mergeProps(props, OldScreenshot, ['style', 'width', 'height']);
   const { type, children, style, className, width, height, ...rest } = newProps;
   const { zIndex = 0, borderRadius = 0 } = types[type] || {};
 
@@ -164,7 +165,7 @@ const Div = styled('div')`
   }
 `;
 
-Screenshot.propTypes = {
+OldScreenshot.propTypes = {
   type: PropTypes.oneOf(Object.keys(types)),
   children: PropTypes.any.isRequired,
   className: PropTypes.string,
@@ -173,7 +174,7 @@ Screenshot.propTypes = {
   style: PropTypes.oneOfType([PropTypes.object, PropTypes.string]),
 };
 
-Screenshot.defaultProps = {
+OldScreenshot.defaultProps = {
   type: 'iphone-x',
   className: '',
   style: '{}',
@@ -181,4 +182,95 @@ Screenshot.defaultProps = {
   height: 0,
 };
 
+/**
+ * 用于修正旧版 Screenshot 无法匹配尺寸的问题
+ * @param {*} props params to OldScreenshot
+ * @returns <OldScreenshot />
+ */
+function ScreenFixer(props) {
+  const screenEl = useRef(null);
+  const [height, setHeight] = useState(undefined);
+  const [scale, setScale] = useState(null);
+
+  useEffect(() => {
+    let resizeObs;
+
+    const fixSize = () => {
+      const { clientWidth } = screenEl.current;
+
+      // 获取内部元素的宽高
+      const { clientWidth: targetWidth, clientHeight: targetHeight } = screenEl.current.children[0];
+
+      const realScale = clientWidth / targetWidth;
+      if (realScale < 1) {
+        setScale(realScale);
+        setHeight(realScale * targetHeight);
+      } else {
+        setScale(null);
+        setHeight(undefined);
+      }
+    };
+
+    if (screenEl.current) {
+      resizeObs = new ResizeObserver(fixSize);
+      resizeObs.observe(screenEl.current);
+    }
+
+    return () => {
+      if (resizeObs) {
+        resizeObs.disconnect();
+      }
+    };
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [screenEl.current]);
+
+  return (
+    <ReScreen ref={screenEl} style={{ height }}>
+      <OldScreenshot {...props} style={{ transform: scale ? `scale(${scale})` : undefined }} />
+    </ReScreen>
+  );
+}
+
+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'].includes(_type)) {
+    return (
+      <BaseScreenshot type={_type} sx={{ ...sx, ...style }} {...rest}>
+        {children || (src ? <img src={src} alt="screenshot" /> : null)}
+      </BaseScreenshot>
+    );
+  }
+
+  // 旧版采用纯css制作，定制性欠缺，暂时保留使用
+  return (
+    <ScreenFixer type={type} {...rest} sx={{ ...sx, ...style, margin: 'auto' }}>
+      {children || (src ? <img src={src} alt="screenshot" /> : null)}
+    </ScreenFixer>
+  );
+}
+
+Screenshot.propTypes = {
+  type: PropTypes.string.isRequired,
+  src: PropTypes.string,
+  style: PropTypes.object,
+  sx: PropTypes.object,
+  children: PropTypes.any,
+};
+
+Screenshot.defaultProps = {
+  src: '',
+  children: null,
+  style: {},
+  sx: {},
+};
+
 export default Screenshot;