@arcblock/ux 2.9.91 → 2.10.0

package/es/Screenshot/index.js

@@ -1,299 +0,0 @@
-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/SessionBlocklet/index.js

@@ -1,173 +0,0 @@
-import { useRef } from 'react';
-import PropTypes from 'prop-types';
-import { Box, ClickAwayListener, Fade, IconButton, List, ListItem, ListItemButton, Paper, Popper, Typography } from '@mui/material';
-import { Icon } from '@iconify/react';
-import DashboardOutlineRoundedIcon from 'iconify-icons-material-symbols-400/dashboard-outline-rounded';
-import WidgetsOutlineRoundedIcon from '@iconify-icons/material-symbols/widgets-outline-rounded';
-import { useMemoizedFn, useReactive } from 'ahooks';
-import Button from '../Button';
-import { temp as colors } from '../Colors';
-import { AUTH_SERVICE_PREFIX, NAVIGATION_URL } from '../Util/constant';
-import SessionPermission from '../SessionPermission';
-import { getTranslation } from '../Util';
-import { jsx as _jsx } from "react/jsx-runtime";
-import { jsxs as _jsxs } from "react/jsx-runtime";
-import { Fragment as _Fragment } from "react/jsx-runtime";
-export default function SessionBlocklet({
-  session,
-  locale,
-  size
-}) {
-  const blocklet = window?.blocklet || {};
-  const sessionMenuList = (blocklet.navigation || []
-  // HACK 过滤掉默认插入的 /sessionManager 菜单
-  ).filter(item => item.section === 'sessionManager' && !['/sessionManager'].includes(item.id)).filter(item => {
-    if ((item?.role || []).includes(session?.user?.role || 'guest')) {
-      return true;
-    }
-    return false;
-  }).map(item => {
-    const component = (blocklet?.componentMountPoints || []).find(x => item.component === x.name);
-    return {
-      ...item,
-      component
-    };
-  });
-  const popperAnchorRef = useRef(null);
-  const currentState = useReactive({
-    open: false
-  });
-  const onTogglePopper = useMemoizedFn((value = !currentState.open) => {
-    currentState.open = value;
-  });
-  if (sessionMenuList.length === 0 || !session?.user) {
-    return null;
-  }
-  return /*#__PURE__*/_jsxs(_Fragment, {
-    children: [/*#__PURE__*/_jsx(IconButton, {
-      size: "medium",
-      ref: popperAnchorRef,
-      onClick: () => onTogglePopper(),
-      children: /*#__PURE__*/_jsx(Icon, {
-        icon: DashboardOutlineRoundedIcon,
-        fontSize: size,
-        style: {
-          transform: 'scale(1.08)'
-        }
-      })
-    }), /*#__PURE__*/_jsx(Popper, {
-      open: currentState.open,
-      onClose: () => onTogglePopper(false),
-      anchorEl: popperAnchorRef.current,
-      transition: true,
-      placement: "bottom-end",
-      sx: {
-        zIndex: 1600
-      },
-      children: ({
-        TransitionProps
-      }) => /*#__PURE__*/_jsx(ClickAwayListener, {
-        onClickAway: e => {
-          e.preventDefault();
-          e.stopPropagation();
-          onTogglePopper(false);
-        },
-        children: /*#__PURE__*/_jsx(Fade, {
-          ...TransitionProps,
-          timeout: 350,
-          children: /*#__PURE__*/_jsxs(Paper, {
-            variant: "outlined",
-            sx: {
-              borderRadius: 3,
-              width: 350,
-              maxWidth: '90vw',
-              borderColor: colors.lineStep,
-              p: 2,
-              border: '0 !important',
-              boxShadow: `0px 8px 16px 0px ${colors.gray6}, 0px 0px 0px 1px ${colors.gray6}`
-            },
-            children: [/*#__PURE__*/_jsx(List, {
-              sx: {
-                display: 'grid',
-                gridTemplateColumns: 'repeat(auto-fill, 100px)',
-                gridAutoRows: 'minmax(100px, max-content)',
-                justifyContent: 'space-between',
-                maxHeight: 350,
-                overflowY: 'auto',
-                p: 0
-              },
-              children: sessionMenuList.map(item => /*#__PURE__*/_jsx(ListItem, {
-                disablePadding: true,
-                children: /*#__PURE__*/_jsxs(ListItemButton, {
-                  href: item.link,
-                  sx: {
-                    p: 1,
-                    display: 'flex',
-                    flexDirection: 'column',
-                    alignItems: 'center',
-                    gap: 1,
-                    width: '100%',
-                    height: '100%',
-                    borderRadius: 2,
-                    '&:hover': {
-                      backgroundColor: colors.surfacePrimarySubtitle
-                    }
-                  },
-                  children: [item?.component?.did ? /*#__PURE__*/_jsx(Box, {
-                    component: "img",
-                    src: `${AUTH_SERVICE_PREFIX}/blocklet/logo-bundle/${item.component.did}`,
-                    sx: {
-                      borderRadius: 2,
-                      width: 50,
-                      height: 50,
-                      objectFit: 'contain'
-                    }
-                  }) : /*#__PURE__*/_jsx(Icon, {
-                    fontSize: 50,
-                    icon: item.icon || WidgetsOutlineRoundedIcon,
-                    color: colors.textSubtitle
-                  }), /*#__PURE__*/_jsx(Typography, {
-                    sx: {
-                      fontSize: '12px',
-                      color: colors.textBase,
-                      textAlign: 'center',
-                      lineHeight: 'normal'
-                    },
-                    children: getTranslation(item.title, locale)
-                  })]
-                })
-              }, item.id))
-            }), /*#__PURE__*/_jsx(SessionPermission, {
-              session: session,
-              children: /*#__PURE__*/_jsx(Button, {
-                variant: "outlined",
-                fullWidth: true,
-                href: NAVIGATION_URL,
-                sx: {
-                  mt: 1,
-                  borderRadius: 2,
-                  color: colors.textBase,
-                  borderColor: colors.lineBorderStrong,
-                  '&:hover': {
-                    color: colors.primaryBase,
-                    borderColor: colors.primaryBase
-                  }
-                },
-                children: locale === 'zh' ? '管理' : 'Manage'
-              })
-            })]
-          })
-        })
-      })
-    })]
-  });
-}
-SessionBlocklet.propTypes = {
-  session: PropTypes.object.isRequired,
-  locale: PropTypes.string,
-  size: PropTypes.number
-};
-SessionBlocklet.defaultProps = {
-  locale: 'en',
-  size: 24
-};

package/es/SessionManager/index.js

@@ -1,2 +0,0 @@
-import SessionUser from '../SessionUser';
-export default SessionUser;

package/es/SessionPermission/index.js

@@ -1,28 +0,0 @@
-import PropTypes from 'prop-types';
-import { useCreation } from 'ahooks';
-const roleList = ['owner', 'admin', 'member', 'guest'];
-export default function SessionPermission({
-  session,
-  roles,
-  children
-}) {
-  const hasPermission = useCreation(() => {
-    return roles.includes(session?.user?.role || 'guest');
-  }, [session?.user?.role, roles]);
-  if (typeof children === 'function') {
-    return children({
-      hasPermission
-    });
-  }
-  if (hasPermission) {
-    return children;
-  }
-}
-SessionPermission.propTypes = {
-  children: PropTypes.any.isRequired,
-  session: PropTypes.object.isRequired,
-  roles: PropTypes.arrayOf(PropTypes.oneOf(roleList))
-};
-SessionPermission.defaultProps = {
-  roles: ['owner', 'admin']
-};