@arcblock/ux 2.13.70 → 3.0.1

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

@@ -1,36 +1,34 @@
-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__*/_jsx("path", {
+import { jsx as t } from "react/jsx-runtime";
+const e = 268, h = 554;
+function i({ ...o }) {
+  return /* @__PURE__ */ t("svg", { width: "268", height: "554", viewBox: "0 0 268 554", fill: "none", xmlns: "http://www.w3.org/2000/svg", ...o, children: /* @__PURE__ */ t(
+    "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"
-    })
-  });
+    }
+  ) });
 }
-export const ratio = 798 / 386;
-export const screenData = {
+const n = 798 / 386, s = {
   x: 15 / 384,
   y: 15 / 794,
   width: 354 / 384,
   height: 764 / 794,
-  radius: '10% / 5%'
+  radius: "10% / 5%"
+}, l = {
+  Shell: i,
+  ratio: n,
+  screenData: s,
+  width: e,
+  height: h
+};
+export {
+  i as Shell,
+  l as default,
+  h as height,
+  n as ratio,
+  s as screenData,
+  e as width
 };
-export default {
-  Shell,
-  ratio,
-  screenData,
-  width,
-  height
-};

package/lib/Screenshot/Screenshot.stories.d.ts

@@ -0,0 +1,13 @@
+import { default as Basic } from './demo/basic';
+declare namespace _default {
+    let title: string;
+    namespace parameters {
+        namespace docs {
+            namespace description {
+                let component: string;
+            }
+        }
+    }
+}
+export default _default;
+export { Basic };

package/lib/Screenshot/index.d.ts

@@ -1,5 +1,4 @@
-import { type SxProps } from '@mui/material';
-import './devices.css';
+import { SxProps } from '@mui/material';
 declare const types: {
     'iphone-x': {
         borderRadius: number;

package/lib/Screenshot/index.js

@@ -1,26 +1,27 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { createElement, Children, cloneElement, useEffect, useRef, useState } from 'react';
-import { mergeProps } from '../Util';
-import { styled } from '../Theme';
-import BaseScreenshot from './BaseScreenshot';
-import './devices.css';
-const types = {
-  'iphone-x': {
+import { jsx as s, jsxs as N } from "react/jsx-runtime";
+import { useRef as k, useState as v, useEffect as S, Children as g, cloneElement as $, createElement as z } from "react";
+import a from "lodash/isUndefined";
+import { mergeProps as C } from "../Util/index.js";
+import { styled as b } from "../Theme/index.js";
+import j from "./BaseScreenshot/index.js";
+/* empty css            */
+const u = {
+  "iphone-x": {
     borderRadius: 32,
     width: 342,
     scale: 0.78
   },
-  'iphone-8': {
+  "iphone-8": {
     borderRadius: 0,
     width: 336,
     scale: 0.78
   },
-  'ipad-pro': {
+  "ipad-pro": {
     borderRadius: 0,
     width: 560,
     scale: 0.62
   },
-  'imac-pro': {
+  "imac-pro": {
     borderRadius: 0,
     width: 624,
     scale: 0.56
@@ -30,138 +31,103 @@ const types = {
     width: 740,
     scale: 0.47
   },
-  'macbook-pro': {
+  "macbook-pro": {
     borderRadius: 0,
     width: 740,
     scale: 0.47
   },
-  'surface-pro': {
+  "surface-pro": {
     borderRadius: 0,
     width: 561,
     scale: 0.62
   },
-  'surface-book': {
+  "surface-book": {
     borderRadius: 0,
     width: 728,
     scale: 0.47
   },
-  'surface-studio': {
+  "surface-studio": {
     borderRadius: 0,
     width: 640,
     scale: 0.55
   },
-  'galaxy-s8': {
+  "galaxy-s8": {
     borderRadius: 0,
     width: 321,
     scale: 0.8
   },
-  'google-pixel': {
+  "google-pixel": {
     borderRadius: 0,
     width: 360,
     scale: 0.72
   },
-  'google-pixel-2-xl': {
+  "google-pixel-2-xl": {
     borderRadius: 0,
     width: 360,
     scale: 0.72
   },
-  'apple-watch': {
+  "apple-watch": {
     borderRadius: 0,
     width: 200,
     scale: 1
   }
-};
-const childProps = {
-  img: ['alt', 'title', 'src', 'srcSet', 'sizes', 'loading', 'key', 'children'],
-  video: ['alt', 'title', 'muted', 'autoplay', 'loop', 'key', 'children']
-};
-const createChild = child => [/*#__PURE__*/createElement(child.type, childProps[child.type].reduce((acc, x) => {
-  acc[x] = child.props[x];
-  return acc;
-}, {}))];
-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 = Children.toArray(child.props.children);
-      const result = findChildren(subChildren, false);
-      if (result) {
-        return result;
-      }
+}, E = {
+  img: ["alt", "title", "src", "srcSet", "sizes", "loading", "key", "children"],
+  video: ["alt", "title", "muted", "autoplay", "loop", "key", "children"]
+}, O = (t) => [
+  z(
+    t.type,
+    E[t.type].reduce((e, i) => (e[i] = t.props[i], e), {})
+  )
+], w = (t, e = !0) => {
+  for (let i = 0; i < t.length; i++) {
+    const r = t[i];
+    if (["img", "video"].includes(r.type))
+      return O(r);
+    if (r.props && r.props.children) {
+      const n = g.toArray(r.props.children), o = w(n, !1);
+      if (o)
+        return o;
     }
   }
-  if (returnArgWhenNotFound) {
-    return children;
-  }
-  return null;
+  return e ? t : null;
 };
-// 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 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] || {};
-  return /*#__PURE__*/_jsxs(Div, {
-    ...rest,
-    type: type,
-    className: `device device-${type} ${className}`.trim(),
-    style: style,
-    contentRadius: borderRadius,
-    contentZIndex: zIndex,
-    children: [/*#__PURE__*/_jsx("div", {
-      className: "device-frame",
-      children: /*#__PURE__*/_jsx("div", {
-        className: "device-content",
-        children: findChildren(Children.toArray(children))?.map((item, index) => /*#__PURE__*/cloneElement(item, {
-          key: index
-        }))
-      })
-    }), /*#__PURE__*/_jsx("div", {
-      className: "device-stripe"
-    }), /*#__PURE__*/_jsx("div", {
-      className: "device-header"
-    }), /*#__PURE__*/_jsx("div", {
-      className: "device-sensors"
-    }), /*#__PURE__*/_jsx("div", {
-      className: "device-btns"
-    }), /*#__PURE__*/_jsx("div", {
-      className: "device-power"
-    })]
-  });
+function y(t) {
+  var f;
+  const e = Object.assign({}, t);
+  a(e.type) && (e.type = "iphone-x"), a(e.className) && (e.className = ""), a(e.style) && (e.style = {}), a(e.width) && (e.width = 0), a(e.height) && (e.height = 0);
+  const i = C(e, y, ["style", "width", "height"]), { type: r, children: n, style: o, className: c, width: p, height: m, ...l } = i, { zIndex: h = 0, borderRadius: d = 0 } = u[r] || {};
+  return /* @__PURE__ */ N(
+    H,
+    {
+      ...l,
+      type: r,
+      className: `device device-${r} ${c}`.trim(),
+      style: o,
+      contentRadius: d,
+      contentZIndex: h,
+      children: [
+        /* @__PURE__ */ s("div", { className: "device-frame", children: /* @__PURE__ */ s("div", { className: "device-content", children: (f = w(g.toArray(n))) == null ? void 0 : f.map((R, x) => $(R, { key: x })) }) }),
+        /* @__PURE__ */ s("div", { className: "device-stripe" }),
+        /* @__PURE__ */ s("div", { className: "device-header" }),
+        /* @__PURE__ */ s("div", { className: "device-sensors" }),
+        /* @__PURE__ */ s("div", { className: "device-btns" }),
+        /* @__PURE__ */ s("div", { className: "device-power" })
+      ]
+    }
+  );
 }
-OldScreenshot.defaultProps = {
-  type: 'iphone-x',
-  className: '',
-  style: {},
-  width: 0,
-  height: 0
-};
-const Div = styled('div')`
-  @media (max-width: ${props => types[props.type].width}px) {
+const H = b("div")`
+  @media (max-width: ${(t) => u[t.type].width}px) {
     transform-origin: 0 0;
-    transform: scale(${props => types[props.type].scale});
+    transform: scale(${(t) => u[t.type].scale});
   }
   .device-content {
     overflow: hidden;
   }
   .device-content video,
   .device-content img {
-    border-radius: ${props => props.contentRadius}px;
+    border-radius: ${(t) => t.contentRadius}px;
     background-color: #fff;
     background-position: center center;
     background-size: cover;
@@ -170,100 +136,29 @@ const Div = styled('div')`
     height: 100.1%;
   }
 `;
-/**
- * 用于修正旧版 Screenshot 无法匹配尺寸的问题
- * @param {*} props params to OldScreenshot
- * @returns <OldScreenshot />
- */
-function ScreenFixer(props) {
-  const screenEl = useRef(null);
-  const [height, setHeight] = useState();
-  const [scale, setScale] = useState(null);
-  useEffect(() => {
-    let resizeObs = null;
-    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);
-      }
+function P(t) {
+  const e = k(null), [i, r] = v(), [n, o] = v(null);
+  return S(() => {
+    let c = null;
+    const p = () => {
+      const { clientWidth: m } = e.current, { clientWidth: l, clientHeight: h } = e.current.children[0], d = m / l;
+      d < 1 ? (o(d), r(d * h)) : (o(null), r(void 0));
     };
-    if (screenEl.current) {
-      resizeObs = new ResizeObserver(fixSize);
-      resizeObs.observe(screenEl.current);
-    }
-    return () => {
-      if (resizeObs) {
-        resizeObs.disconnect();
-      }
+    return e.current && (c = new ResizeObserver(p), c.observe(e.current)), () => {
+      c && c.disconnect();
     };
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [screenEl.current]);
-  return /*#__PURE__*/_jsx(ReScreen, {
-    ref: screenEl,
-    style: {
-      height
-    },
-    children: /*#__PURE__*/_jsx(OldScreenshot, {
-      ...props,
-      style: {
-        transform: scale ? `scale(${scale})` : undefined
-      }
-    })
-  });
+  }, [e.current]), /* @__PURE__ */ s(W, { ref: e, style: { height: i }, children: /* @__PURE__ */ s(y, { ...t, style: { transform: n ? `scale(${n})` : void 0 } }) });
 }
-const ReScreen = styled('div')`
+const W = b("div")`
   div[type] {
     transform: scale(1);
     transform-origin: 0 0;
   }
 `;
-function Screenshot({
-  type,
-  src = '',
-  children,
-  sx = {},
-  ...rest
-}) {
-  const _type = type.toLowerCase();
-
-  // 新版采用容器采用BaseScreenshot，svg集成，更容易拓展，响应式更好
-  if (['phone', 'macbook'].includes(_type)) {
-    return /*#__PURE__*/_jsx(BaseScreenshot, {
-      type: _type,
-      sx: sx,
-      ...rest,
-      children: children || (src ? /*#__PURE__*/_jsx("img", {
-        src: src,
-        alt: "screenshot"
-      }) : null)
-    });
-  }
-
-  // 旧版采用纯css制作，定制性欠缺，暂时保留使用
-  return /*#__PURE__*/_jsx(ScreenFixer, {
-    type: type,
-    sx: {
-      ...sx,
-      margin: 'auto'
-    },
-    ...rest,
-    children: children || (src ? /*#__PURE__*/_jsx("img", {
-      src: src,
-      alt: "screenshot"
-    }) : null)
-  });
+function _({ type: t, src: e = "", children: i, sx: r = {}, ...n }) {
+  const o = t.toLowerCase();
+  return ["phone", "macbook"].includes(o) ? /* @__PURE__ */ s(j, { type: o, sx: r, ...n, children: i || (e ? /* @__PURE__ */ s("img", { src: e, alt: "screenshot" }) : null) }) : /* @__PURE__ */ s(P, { type: t, sx: { ...r, margin: "auto" }, ...n, children: i || (e ? /* @__PURE__ */ s("img", { src: e, alt: "screenshot" }) : null) });
 }
-export default Screenshot;
+export {
+  _ as default
+};

package/lib/SessionBlocklet/index.d.ts

@@ -1,5 +1,5 @@
-import { type BoxProps } from '@mui/material';
-import type { Locale } from '../type';
+import { BoxProps } from '@mui/material';
+import { Locale } from '../type';
 export interface SessionBlockletProps extends Omit<BoxProps, 'onClick' | 'onMouseEnter' | 'onMouseLeave'> {
     session: Record<string, any>;
     locale?: Locale;