@arcblock/ux 2.6.9 → 2.7.0

package/es/Screenshot/index.js

@@ -0,0 +1,299 @@
+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,
+    width: 342,
+    scale: 0.78
+  },
+  'iphone-8': {
+    borderRadius: 0,
+    width: 336,
+    scale: 0.78
+  },
+  'ipad-pro': {
+    borderRadius: 0,
+    width: 560,
+    scale: 0.62
+  },
+  'imac-pro': {
+    borderRadius: 0,
+    width: 624,
+    scale: 0.56
+  },
+  macbook: {
+    borderRadius: 0,
+    width: 740,
+    scale: 0.47
+  },
+  'macbook-pro': {
+    borderRadius: 0,
+    width: 740,
+    scale: 0.47
+  },
+  'surface-pro': {
+    borderRadius: 0,
+    width: 561,
+    scale: 0.62
+  },
+  'surface-book': {
+    borderRadius: 0,
+    width: 728,
+    scale: 0.47
+  },
+  'surface-studio': {
+    borderRadius: 0,
+    width: 640,
+    scale: 0.55
+  },
+  'galaxy-s8': {
+    borderRadius: 0,
+    width: 321,
+    scale: 0.8
+  },
+  'google-pixel': {
+    borderRadius: 0,
+    width: 360,
+    scale: 0.72
+  },
+  'google-pixel-2-xl': {
+    borderRadius: 0,
+    width: 360,
+    scale: 0.72
+  },
+  '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;
+      }
+    }
+  }
+  if (returnArgWhenNotFound) {
+    return children;
+  }
+  return 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"
+    })]
+  });
+}
+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.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',
+  className: '',
+  style: '{}',
+  width: 0,
+  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 /*#__PURE__*/_jsx(ReScreen, {
+    ref: screenEl,
+    style: {
+      height
+    },
+    children: /*#__PURE__*/_jsx(OldScreenshot, {
+      ...props,
+      style: {
+        transform: scale ? `scale(${scale})` : undefined
+      }
+    })
+  });
+}
+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__*/_jsx(BaseScreenshot, {
+      type: _type,
+      sx: {
+        ...sx,
+        ...style
+      },
+      ...rest,
+      children: children || (src ? /*#__PURE__*/_jsx("img", {
+        src: src,
+        alt: "screenshot"
+      }) : null)
+    });
+  }
+
+  // 旧版采用纯css制作，定制性欠缺，暂时保留使用
+  return /*#__PURE__*/_jsx(ScreenFixer, {
+    type: type,
+    ...rest,
+    sx: {
+      ...sx,
+      ...style,
+      margin: 'auto'
+    },
+    children: children || (src ? /*#__PURE__*/_jsx("img", {
+      src: src,
+      alt: "screenshot"
+    }) : null)
+  });
+}
+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;

package/es/SessionManager/federated-login-detecter.js

@@ -0,0 +1,166 @@
+import PropTypes from 'prop-types';
+import { useCallback, useState } from 'react';
+import Box from '@mui/material/Box';
+import Chip from '@mui/material/Chip';
+import Divider from '@mui/material/Divider';
+import SvgIcon from '@mui/material/SvgIcon';
+import ShieldCheck from 'mdi-material-ui/ShieldCheck';
+import UserPopper from './user-popper';
+import DidAvatar from '../Avatar';
+import DidAddress from '../Address';
+import Button from '../Button';
+import Toast from '../Toast';
+import { getUserAvatar } from '../Util';
+import { Fragment as _Fragment } from "react/jsx-runtime";
+import { jsxs as _jsxs } from "react/jsx-runtime";
+import { jsx as _jsx } from "react/jsx-runtime";
+const translations = {
+  en: {
+    useToConnect({
+      master,
+      member
+    }) {
+      return /*#__PURE__*/_jsxs(_Fragment, {
+        children: ["Use ", master, " account to connect ", member]
+      });
+    },
+    connect: 'Connect Account',
+    loginFederatedFailed: 'Login federated account failed'
+  },
+  zh: {
+    useToConnect({
+      master,
+      member
+    }) {
+      return /*#__PURE__*/_jsxs(_Fragment, {
+        children: ["\u4F7F\u7528 ", master, " \u8D26\u53F7\u8FDE\u63A5 ", member]
+      });
+    },
+    connect: '连接账号',
+    loginFederatedFailed: '登录统一登录账号失败'
+  }
+};
+export default function FederatedLoginDetecter({
+  session,
+  anchorEl,
+  dark,
+  locale: _locale
+}) {
+  const [federatedLoginOpen, setFederatedLoginOpen] = useState(true);
+  const siteInfo = session.federatedMaster?.site;
+  const userInfo = session.federatedMaster?.user;
+  const localeList = Object.keys(translations);
+  const locale = localeList.includes(_locale) ? _locale : localeList[0];
+  const onLoginFederated = useCallback(() => {
+    session?.loginFederated(err => {
+      if (err) {
+        Toast.error(err || translations[_locale].loginFederatedFailed);
+      } else {
+        setFederatedLoginOpen(false);
+      }
+    }, {
+      mode: userInfo ? 'auto' : 'manual'
+    });
+  }, [session, userInfo, _locale]);
+  return siteInfo && /*#__PURE__*/_jsx(UserPopper, {
+    open: federatedLoginOpen,
+    anchorEl: anchorEl,
+    dark: dark,
+    onClose: () => setFederatedLoginOpen(false),
+    children: /*#__PURE__*/_jsxs(Box, {
+      p: 2,
+      children: [siteInfo && /*#__PURE__*/_jsxs(Box, {
+        display: "flex",
+        alignItems: "center",
+        children: [/*#__PURE__*/_jsx(Box, {
+          component: "img",
+          mr: 2,
+          src: `${siteInfo.appUrl}${siteInfo.appLogo}`,
+          alt: siteInfo.appName,
+          width: "30px",
+          height: "30px"
+        }), /*#__PURE__*/_jsx(Box, {
+          children: translations[locale].useToConnect({
+            master: /*#__PURE__*/_jsx(Box, {
+              component: "a",
+              href: siteInfo.appUrl,
+              target: "_blank",
+              sx: {
+                textDecoration: 'none',
+                fontWeight: 'bold',
+                color: 'primary.main',
+                fontSize: '1.2em'
+              },
+              children: siteInfo.appName
+            }),
+            member: window.blocklet.appName
+          })
+        })]
+      }), siteInfo && userInfo && /*#__PURE__*/_jsx(Divider, {
+        style: {
+          margin: '15px 0 10px 0'
+        }
+      }), userInfo && /*#__PURE__*/_jsxs(Box, {
+        display: "flex",
+        alignItems: "center",
+        children: [/*#__PURE__*/_jsx(DidAvatar, {
+          variant: "circle",
+          did: userInfo.did,
+          src: getUserAvatar(userInfo.avatar),
+          size: 28,
+          shape: "circle"
+        }), /*#__PURE__*/_jsxs(Box, {
+          ml: 2,
+          children: [/*#__PURE__*/_jsxs(Box, {
+            display: "flex",
+            justifyContent: "space-between",
+            alignItems: "center",
+            children: [/*#__PURE__*/_jsx(Box, {
+              fontSize: 18,
+              children: userInfo.fullName
+            }), userInfo.role?.toUpperCase() && /*#__PURE__*/_jsx(Chip, {
+              label: userInfo.role?.toUpperCase(),
+              size: "small",
+              variant: "outlined",
+              sx: {
+                height: 'auto',
+                marginRight: 0,
+                fontSize: 12
+              },
+              icon: /*#__PURE__*/_jsx(SvgIcon, {
+                component: ShieldCheck,
+                style: {
+                  fontSize: '14px'
+                }
+              })
+            })]
+          }), /*#__PURE__*/_jsx(DidAddress, {
+            responsive: false,
+            children: userInfo.did
+          })]
+        })]
+      }), siteInfo && /*#__PURE__*/_jsx(Box, {
+        display: "flex",
+        justifyContent: "center",
+        mt: 2,
+        children: /*#__PURE__*/_jsx(Button, {
+          variant: "contained",
+          size: "small",
+          onClick: onLoginFederated,
+          children: translations[locale].connect
+        })
+      })]
+    })
+  });
+}
+FederatedLoginDetecter.propTypes = {
+  session: PropTypes.object.isRequired,
+  anchorEl: PropTypes.instanceOf(Element),
+  dark: PropTypes.bool,
+  locale: PropTypes.string
+};
+FederatedLoginDetecter.defaultProps = {
+  dark: false,
+  anchorEl: null,
+  locale: 'en'
+};