@arcblock/ux 2.9.91 → 2.10.1

package/es/Blocklet/blocklet.js

@@ -1,298 +0,0 @@
-/* eslint-disable react/no-danger */
-import { isValidElement } from 'react';
-import PropTypes from 'prop-types';
-import Typography from '@mui/material/Typography';
-import CircularProgress from '@mui/material/CircularProgress';
-import useMediaQuery from '@mui/material/useMediaQuery';
-import Avatar from '../Avatar';
-import Button from '../Button';
-import Img from '../Img';
-import { useTheme, styled } from '../Theme';
-import { strippedString } from './utils';
-import { jsx as _jsx } from "react/jsx-runtime";
-import { jsxs as _jsxs } from "react/jsx-runtime";
-const Div = styled('div')`
-  &.arcblock-blocklet {
-    padding: ${props => props.theme.spacing(2)} ${props => props.theme.spacing(2)} 0
-      ${props => props.theme.spacing(2)};
-  }
-  .arcblock-blocklet__content {
-    cursor: pointer;
-    display: flex;
-    ${props => props.theme.breakpoints.up('sm')} {
-      align-items: center;
-    }
-  }
-  .arcblock-blocklet__cover {
-    width: 64px;
-    height: 64px;
-    margin-right: ${props => props.theme.spacing(2)};
-    overflow: hidden;
-    border-radius: 12px;
-    /* see: https://stackoverflow.com/questions/49066011/overflow-hidden-with-border-radius-not-working-on-safari */
-    transform: translateZ(0);
-    ${props => props.theme.breakpoints.up('sm')} {
-      width: 80px;
-      height: 80px;
-      margin-bottom: 12px;
-    }
-  }
-  .arcblock-blocklet__button--hover {
-    &:not(.Mui-disabled) {
-      position: relative;
-      z-index: 1;
-      &::before {
-        content: '';
-        position: absolute;
-        height: 100%;
-        width: 100%;
-        left: 0;
-        top: 0;
-        transition: opacity 0.3s;
-      }
-      &:hover::before {
-        opacity: 0;
-      }
-      &::after {
-        content: '';
-        position: absolute;
-        height: 100%;
-        width: 100%;
-        background-color: ${props => props.theme.palette.primary.main};
-        transform: scale(0.1);
-        opacity: 0;
-        z-index: -1;
-        transition: transform 0.3s, opacity 0.3s, background-color 0.3s;
-      }
-      &:hover::after {
-        opacity: 1;
-        transform-origin: center;
-        transform: scale(1);
-      }
-    }
-
-    &:not(.Mui-disabled) {
-      background-color: transparent !important;
-      color: ${props => props.theme.palette.primary.main};
-    }
-    &:not(.Mui-disabled) {
-      &:hover {
-        color: ${props => props.theme.palette.common.white};
-      }
-    }
-  }
-  .arcblock-blocklet__info {
-    flex: 1;
-    overflow: hidden;
-    border-bottom: 1px solid ${props => props.theme.palette.divider};
-    padding-bottom: ${props => props.theme.spacing(2)};
-  }
-  .arcblock-blocklet__text {
-    height: 57px;
-    overflow: hidden;
-  }
-  /* 设置多行文本溢出显示省略号 兼容fireFox、safari */
-  .arcblock-blocklet__title {
-    margin: 0;
-    font-size: 16px;
-    font-weight: 500;
-    overflow: hidden;
-    text-overflow: ellipsis;
-    white-space: nowrap;
-  }
-  .arcblock-blocklet__describe {
-    margin-top: ${props => props.theme.spacing(0.5)};
-    color: ${props => props.theme.palette.grey[600]};
-    font-size: 14px;
-    font-weight: 500;
-    line-height: 17px;
-    max-height: 34px;
-    overflow: hidden;
-    text-overflow: ellipsis;
-    display: -webkit-box;
-    -webkit-line-clamp: 2;
-    -webkit-box-orient: vertical;
-    word-break: break-word;
-  }
-  .arcblock-blocklet__version {
-    color: ${props => props.theme.palette.grey[600]};
-    font-size: 12px;
-  }
-`;
-
-/**
- * BlockletStore component
- * @typedef {{
- *  title?: string | JSX.Element;
- *  did?: string;
- *  description?: string | JSX.Element;
- *  cover?: string;
- *  version?: string;
- *  buttonText?: string;
- *  buttonDisabled?: boolean;
- *  buttonLoading?: boolean;
- *  button?: JSX.Element;
- *  onButtonClick?: Function;
- *  onMainClick?: Function;
- *  className?: string;
- * } & import('react').ComponentPropsWithoutRef<"div"> } BlockletStoreProps
- */
-
-/**
- * BlockletStore component
- * @param {BlockletStoreProps} props
- * @returns {JSX.Element}
- */
-export default function BlockletStore({
-  title,
-  did,
-  description,
-  cover,
-  version,
-  button,
-  buttonText,
-  buttonDisabled,
-  buttonLoading,
-  onButtonClick,
-  onMainClick,
-  className,
-  ...rest
-}) {
-  const wrapHandler = (handler, stopFn = () => false) => (e, ...args) => {
-    if (stopFn()) {
-      e.preventDefault();
-      e.stopPropagation();
-    } else if (handler instanceof Function) {
-      e.preventDefault();
-      e.stopPropagation();
-      handler(...args);
-    }
-  };
-  const _onButtonClick = wrapHandler(onButtonClick, () => {
-    // stop click while custom button or buttonDisabled or buttondLoading
-    if (button || buttonDisabled || buttonLoading) {
-      return true;
-    }
-    return false;
-  });
-  const theme = useTheme();
-  const isUpSm = useMediaQuery(theme.breakpoints.up('sm'));
-  const _onMainClick = wrapHandler(onMainClick);
-  const didAvatarSize = isUpSm ? 80 : 64;
-  return /*#__PURE__*/_jsx(Div, {
-    className: `${className} arcblock-blocklet`,
-    ...rest,
-    children: /*#__PURE__*/_jsxs("div", {
-      className: "arcblock-blocklet__content",
-      onClick: _onMainClick,
-      children: [cover ? /*#__PURE__*/_jsx("div", {
-        className: "arcblock-blocklet__cover",
-        children: /*#__PURE__*/_jsx(Img, {
-          src: cover
-        })
-      }) : did && /*#__PURE__*/_jsx("div", {
-        className: "arcblock-blocklet__cover",
-        children: /*#__PURE__*/_jsx(Avatar, {
-          did: did,
-          size: didAvatarSize
-        })
-      }), /*#__PURE__*/_jsxs("div", {
-        className: "arcblock-blocklet__info",
-        children: [/*#__PURE__*/_jsxs("div", {
-          className: "arcblock-blocklet__text",
-          children: [/*#__PURE__*/isValidElement(title) ? /*#__PURE__*/_jsx(Typography, {
-            component: "h3",
-            variant: "h3",
-            className: "arcblock-blocklet__title",
-            children: title
-          }) : /*#__PURE__*/_jsx(Typography, {
-            component: "h3",
-            variant: "h3",
-            className: "arcblock-blocklet__title",
-            title: strippedString(title),
-            dangerouslySetInnerHTML: {
-              __html: title
-            }
-          }), /*#__PURE__*/isValidElement(description) ? /*#__PURE__*/_jsx(Typography, {
-            component: "div",
-            variant: "body2",
-            className: "arcblock-blocklet__describe",
-            children: description
-          }) : /*#__PURE__*/_jsx(Typography, {
-            component: "div",
-            variant: "body2",
-            className: "arcblock-blocklet__describe",
-            title: strippedString(description),
-            dangerouslySetInnerHTML: {
-              __html: description
-            }
-          })]
-        }), /*#__PURE__*/_jsxs("div", {
-          style: {
-            display: 'flex',
-            alignItems: 'center',
-            marginTop: '10px',
-            flexFlow: 'wrap'
-          },
-          children: [/*#__PURE__*/_jsx("div", {
-            onClick: _onButtonClick,
-            style: {
-              marginRight: '12px'
-            },
-            children: button || onButtonClick && /*#__PURE__*/_jsxs(Button, {
-              className: "arcblock-blocklet__button--hover",
-              variant: "outlined",
-              color: "primary",
-              size: "small",
-              disabled: buttonDisabled || buttonLoading,
-              style: {
-                padding: '3px 6px',
-                fontSize: '14px',
-                minWidth: '92px',
-                textAlign: 'center'
-              },
-              children: [buttonLoading && /*#__PURE__*/_jsx(CircularProgress, {
-                size: 15,
-                style: {
-                  marginRight: 3,
-                  color: 'inherit'
-                }
-              }), buttonText]
-            })
-          }), /*#__PURE__*/_jsx("div", {
-            className: "arcblock-blocklet__version",
-            children: version && `v${version}`
-          })]
-        })]
-      })]
-    })
-  });
-}
-BlockletStore.propTypes = {
-  title: PropTypes.string || PropTypes.node,
-  did: PropTypes.string,
-  description: PropTypes.string || PropTypes.node,
-  cover: PropTypes.string,
-  buttonText: PropTypes.string,
-  buttonDisabled: PropTypes.bool,
-  buttonLoading: PropTypes.bool,
-  button: PropTypes.element,
-  version: PropTypes.string,
-  onButtonClick: PropTypes.func,
-  onMainClick: PropTypes.func,
-  className: PropTypes.string
-};
-BlockletStore.defaultProps = {
-  title: '',
-  description: '',
-  cover: null,
-  did: null,
-  buttonText: 'Install',
-  buttonDisabled: false,
-  buttonLoading: false,
-  button: null,
-  version: null,
-  onButtonClick: null,
-  onMainClick: null,
-  className: null
-};

package/es/Blocklet/index.js

@@ -1,4 +0,0 @@
-import ActionButton, { strippedString } from './utils';
-import Blocklet from './blocklet';
-export { ActionButton, strippedString };
-export default Blocklet;

package/es/Blocklet/utils.js

@@ -1,52 +0,0 @@
-import { styled } from '../Theme';
-const ActionButton = styled('div')`
-  background-color: transparent !important;
-  & > :not(.Mui-disabled) {
-    position: relative;
-    z-index: 1;
-    &::before {
-      content: '';
-      position: absolute;
-      height: 100%;
-      width: 100%;
-      left: 0;
-      top: 0;
-      transition: opacity 0.3s;
-    }
-    &:hover::before {
-      opacity: 0;
-    }
-    &::after {
-      content: '';
-      position: absolute;
-      height: 100%;
-      width: 100%;
-      top: 0;
-      left: 0;
-      border-radius: 2px;
-      background-color: ${props => props.theme.palette.primary.main};
-      transform: scale(0.1);
-      opacity: 0;
-      z-index: -1;
-      transition: transform 0.3s, opacity 0.3s, background-color 0.3s;
-    }
-    &:hover::after {
-      opacity: 1;
-      transform-origin: center;
-      transform: scale(1);
-    }
-  }
-  & > :not(.Mui-disabled) {
-    background-color: transparent !important;
-    color: ${props => props.theme.palette.primary.main}!important;
-  }
-  & > :not(.Mui-disabled) {
-    &:hover {
-      color: ${props => props.theme.palette.common.white}!important;
-    }
-  }
-`;
-export default ActionButton;
-export const strippedString = (originalString = '') => {
-  return originalString.replace(/(<([^>]+)>)/gi, '').trim();
-};

package/es/BlockletContext/index.js

@@ -1,65 +0,0 @@
-import PropTypes from 'prop-types';
-import { useMemoizedFn, useAsyncEffect } from 'ahooks';
-import { createContext, useContext, useState } from 'react';
-import { jsx as _jsx } from "react/jsx-runtime";
-const BlockletContext = /*#__PURE__*/createContext();
-const {
-  Provider,
-  Consumer
-} = BlockletContext;
-
-/**
- *
- * @param {object} props
- * @param {string} props.baseUrl baseUrl 为 blocklet origin + blocklet prefix
- * @param {any} props.children
- * @returns
- */
-function BlockletProvider({
-  children,
-  baseUrl,
-  loading
-}) {
-  const [blockletData, setBlockletData] = useState(null);
-  const getBlockleData = useMemoizedFn(async () => {
-    if (!baseUrl || window.location.href.startsWith(baseUrl)) {
-      throw new Error('no blocklet data');
-    }
-    const url = new URL('__blocklet__.js', baseUrl);
-    url.searchParams.set('type', 'json');
-    const res = await fetch(url.href);
-    const jsonData = await res.json();
-    return jsonData;
-  });
-  useAsyncEffect(async () => {
-    try {
-      const data = await getBlockleData();
-      setBlockletData(data);
-    } catch {
-      // NOTICE: 如果获取指定 blockletData 失败，则使用 window.blocklet
-      const data = globalThis.blocklet || globalThis.env;
-      setBlockletData(data);
-    }
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [baseUrl]);
-  return /*#__PURE__*/_jsx(Provider, {
-    value: blockletData,
-    children: blockletData ? children : loading || null
-  });
-}
-function useBlockletContext() {
-  const blocklet = useContext(BlockletContext);
-  return {
-    blocklet
-  };
-}
-BlockletProvider.propTypes = {
-  baseUrl: PropTypes.string,
-  children: PropTypes.any.isRequired,
-  loading: PropTypes.any
-};
-BlockletProvider.defaultProps = {
-  baseUrl: '',
-  loading: null
-};
-export { BlockletContext, BlockletProvider, Consumer as BlockletConsumer, useBlockletContext };