@blocklet/ui-react 3.4.14 → 3.5.0

package/src/ComponentInstaller/index.jsx

@@ -1,207 +0,0 @@
-import { SessionContext } from '@arcblock/did-connect-react/lib/Session';
-import { useLocaleContext } from '@arcblock/ux/lib/Locale/context';
-import { translate } from '@arcblock/ux/lib/Locale/util';
-import SessionPermission from '@arcblock/ux/lib/SessionPermission';
-import { Icon } from '@iconify/react';
-import { Close as CloseIcon } from '@mui/icons-material';
-import { Box, ClickAwayListener, Fade, IconButton, Paper } from '@mui/material';
-import { useMemoizedFn } from 'ahooks';
-import PropTypes from 'prop-types';
-import { use } from 'react';
-import InstallerItem from './installer-item';
-import translations from './locales';
-import useComponentInstalled from './use-component-installed';
-
-function ComponentInstaller({
-  warnIcon = null,
-  did,
-  noPermissionMute = false,
-  onInstalled = null,
-  onError = null,
-  children,
-  closeByOutSize = false,
-  onClose = null,
-  fallback = null,
-  disabled = false,
-  roles = ['owner', 'admin'],
-}) {
-  const { locale } = useLocaleContext();
-  const t = useMemoizedFn((key, data = {}) => {
-    return translate(translations, key, locale, 'en', data);
-  });
-  const { installed, optComponents, installStatus, definedInBlockletYML } = useComponentInstalled({
-    did,
-    onInstalled,
-    onError,
-  });
-  const sessionCtx = use(SessionContext);
-
-  const handleClose = () => {
-    onClose?.(false);
-  };
-
-  if (disabled) {
-    return children;
-  }
-
-  return (
-    <SessionPermission session={sessionCtx?.session} roles={roles}>
-      {({ hasPermission }) => {
-        if (installed) {
-          return children;
-        }
-        if (noPermissionMute && !hasPermission) {
-          return fallback || null;
-        }
-        if (typeof children === 'function') {
-          return (
-            <>
-              {fallback}
-              {children({
-                hasPermission,
-                optComponents,
-                installStatus,
-              })}
-            </>
-          );
-        }
-        // not installed, but has permission, can install directly
-        return (
-          <>
-            {fallback}
-            <ClickAwayListener
-              onClickAway={(e) => {
-                e.preventDefault();
-                e.stopPropagation();
-                if (closeByOutSize) {
-                  handleClose();
-                }
-              }}>
-              <Fade in timeout={350}>
-                <Paper
-                  variant="outlined"
-                  sx={{
-                    position: 'fixed',
-                    top: 20,
-                    right: 20,
-                    zIndex: 3000,
-                    borderRadius: 1.5,
-                    width: 400,
-                    maxWidth: '90vw',
-                    borderColor: 'divider',
-                    border: '0 !important',
-                    fontSize: '14px',
-                    textAlign: 'left',
-                    boxShadow: ({ palette }) =>
-                      `0px 8px 16px 0px ${palette.grey[100]}, 0px 0px 0px 1px ${palette.grey[100]}`,
-                  }}>
-                  {!definedInBlockletYML ? (
-                    <Box sx={{ display: 'flex', flexDirection: 'column' }}>
-                      <Box
-                        sx={{
-                          padding: '20px 24px',
-                          marginLeft: 0,
-                          display: 'flex',
-                          alignItems: 'center',
-                          flexDirection: 'row',
-                          justifyContent: 'flex-start',
-                        }}>
-                        {warnIcon || <Icon icon="mdi:warning-box" style={{ color: 'yellowgreen', fontSize: 24 }} />}
-                        <Box sx={{ marginLeft: 1, fontSize: '16px', fontWeight: 'bold' }}>
-                          {t('componentInstallerTitle')}
-                        </Box>
-                        <Box sx={{ flex: 1 }} />
-                        {onClose ? (
-                          <IconButton variant="outlined" className="button" onClick={handleClose}>
-                            <CloseIcon />
-                          </IconButton>
-                        ) : null}
-                      </Box>
-                      <Box sx={{ width: '100%', height: '1px', backgroundColor: 'grey.100' }} />
-                      <Box sx={{ padding: '20px 24px', marginTop: 0 }}>
-                        {t('componentInstallerNoDefinedInBlockletYML')}: {did}
-                      </Box>
-                    </Box>
-                  ) : (
-                    <Box sx={{ display: 'flex', flexDirection: 'column' }}>
-                      <Box
-                        sx={{
-                          padding: '20px 24px',
-                          marginLeft: 0,
-                          display: 'flex',
-                          flexDirection: 'row',
-                          alignItems: 'center',
-                          justifyContent: 'flex-start',
-                        }}>
-                        {warnIcon || <Icon icon="mdi:warning-box" style={{ color: 'yellowgreen', fontSize: 24 }} />}
-                        <Box sx={{ marginLeft: 1, fontSize: '16px', fontWeight: 'bold' }}>
-                          {t('componentInstallerTitle')}
-                        </Box>
-                        <Box sx={{ flex: 1 }} />
-                        {onClose ? (
-                          <IconButton variant="outlined" className="button" onClick={handleClose}>
-                            <CloseIcon />
-                          </IconButton>
-                        ) : null}
-                      </Box>
-                      <Box sx={{ width: '100%', height: '1px', backgroundColor: 'grey.100' }} />
-                      <Box sx={{ maxHeight: '70vh', overflowY: 'auto' }}>
-                        {optComponents.map((optionalComponent, index) => {
-                          return (
-                            <InstallerItem
-                              t={t}
-                              key={optionalComponent.meta?.did || index}
-                              hasPermission={hasPermission}
-                              index={index}
-                              optionalComponent={optionalComponent}
-                              installStatus={installStatus[optionalComponent.meta?.did]}
-                            />
-                          );
-                        })}
-                      </Box>
-                      {hasPermission ? null : (
-                        <>
-                          <Box sx={{ width: '100%', height: '1px', backgroundColor: 'grey.100' }} />
-                          <Box sx={{ padding: '20px 24px' }}>
-                            <Box sx={{ opacity: 1 }}>{t('componentInstallerSuggestions')}</Box>
-                          </Box>
-                        </>
-                      )}
-                    </Box>
-                  )}
-                </Paper>
-              </Fade>
-            </ClickAwayListener>
-          </>
-        );
-      }}
-    </SessionPermission>
-  );
-}
-
-ComponentInstaller.propTypes = {
-  disabled: PropTypes.bool,
-  warnIcon: PropTypes.node,
-  did: PropTypes.oneOfType([PropTypes.string, PropTypes.arrayOf(PropTypes.string)]).isRequired,
-  noPermissionMute: PropTypes.bool,
-  onInstalled: PropTypes.func,
-  onError: PropTypes.func,
-  children: PropTypes.any.isRequired,
-  closeByOutSize: PropTypes.bool,
-  onClose: PropTypes.func,
-  fallback: PropTypes.node,
-  roles: PropTypes.array,
-};
-
-export default function WrapComponentInstaller(props) {
-  if (window.blocklet) {
-    return <ComponentInstaller {...props} />;
-  }
-
-  return props.children;
-}
-
-WrapComponentInstaller.propTypes = {
-  ...ComponentInstaller.propTypes,
-  children: PropTypes.any.isRequired,
-};

package/src/ComponentInstaller/installer-item.jsx

@@ -1,129 +0,0 @@
-import { Icon } from '@iconify/react';
-import { Box, Button, useTheme } from '@mui/material';
-import PropTypes from 'prop-types';
-
-export default function InstallerItem({ optionalComponent, index, installStatus = '', hasPermission, t }) {
-  const { palette } = useTheme();
-  const handleInstall = () => {
-    // 这里是安全的
-    window.open(optionalComponent?.installUrl, '_blank');
-  };
-
-  const handleOpenStore = () => {
-    // 这里是安全的
-    window.open(optionalComponent?.storeUrl, '_blank');
-  };
-
-  const handleRefresh = () => {
-    window.location.reload();
-  };
-
-  const installStatusDone = installStatus === 'stopped' || installStatus === 'running';
-  const size = 60;
-
-  return (
-    <Box>
-      {index === 0 ? null : <Box sx={{ width: '100%', height: '1px', backgroundColor: 'grey.100' }} />}
-      <Box
-        sx={{
-          padding: '20px 24px',
-          paddingTop: 0.5,
-          marginTop: 2,
-          display: 'flex',
-          flexDirection: 'row',
-          justifyContent: 'start',
-          alignItems: 'flex-start',
-        }}>
-        <img
-          style={{ width: size, height: size, minWidth: size, minHeight: size }}
-          src={optionalComponent.logoUrl}
-          alt={optionalComponent.meta.title}
-        />
-        <Box
-          sx={{
-            display: 'flex',
-            flexDirection: 'column',
-            justifyContent: 'start',
-            alignItems: 'start',
-            marginLeft: 2,
-          }}>
-          <Box
-            sx={{
-              fontSize: '16px',
-              fontWeight: 'bold',
-              cursor: 'pointer',
-              '.link-icon': {
-                opacity: 0,
-              },
-              ':hover .link-icon': {
-                opacity: 1,
-              },
-            }}
-            onClick={() => handleOpenStore(optionalComponent.meta?.did)}>
-            {optionalComponent.meta.title}
-            <Box
-              sx={{
-                paddingLeft: 1,
-                fontSize: '13px',
-                fontWeight: '400',
-              }}
-              component="span">
-              {optionalComponent.meta.version}
-              <Icon
-                className="link-icon"
-                icon="fluent:open-20-filled"
-                style={{
-                  color: palette.primary.main,
-                  fontSize: 16,
-                  transform: 'translate(6px, 3px)',
-                  transition: 'all 0.3s',
-                }}
-              />
-            </Box>
-          </Box>
-          <Box sx={{ marginTop: 0, opacity: 0.7 }}>{optionalComponent.meta.description}</Box>
-          <Box sx={{ display: hasPermission ? 'flex' : 'none', flexDirection: 'row', gap: 1 }}>
-            {installStatus ? (
-              <Box sx={{ marginTop: 2, opacity: 0.7 }}>
-                {installStatusDone ? (
-                  <Button key="refresh" variant="contained" onClick={handleRefresh}>
-                    {t('componentInstallerRefresh')}
-                  </Button>
-                ) : (
-                  <Button
-                    key="status"
-                    disabled
-                    sx={{ color: 'text.primary' }}
-                    startIcon={<Icon icon="line-md:loading-loop" style={{ color: 'text.primary', fontSize: 16 }} />}
-                    variant="contained">
-                    {installStatus}
-                  </Button>
-                )}
-              </Box>
-            ) : (
-              <Button
-                key="install"
-                sx={{ marginTop: 2 }}
-                variant="contained"
-                className="button"
-                onClick={() => handleInstall(optionalComponent.meta?.did)}>
-                {t('componentInstallerInstall')}
-              </Button>
-            )}
-          </Box>
-          {installStatusDone ? (
-            <Box sx={{ marginTop: 2, opacity: 0.7 }}>{t('componentInstallerSuccessInstalled')}</Box>
-          ) : null}
-        </Box>
-      </Box>
-    </Box>
-  );
-}
-
-InstallerItem.propTypes = {
-  t: PropTypes.func.isRequired,
-  optionalComponent: PropTypes.object.isRequired,
-  index: PropTypes.number.isRequired,
-  installStatus: PropTypes.string,
-  hasPermission: PropTypes.bool.isRequired,
-};

package/src/ComponentInstaller/locales.js

@@ -1,22 +0,0 @@
-const translations = {
-  zh: {
-    componentInstallerTitle: '缺少组件',
-    componentInstallerInstall: '安装',
-    componentInstallerClose: '关闭',
-    componentInstallerRefresh: '重载页面',
-    componentInstallerSuccessInstalled: '安装成功，请重载页面查看变化。',
-    componentInstallerSuggestions: '请联系系统管理员安装该组件。',
-    componentInstallerNoDefinedInBlockletYML: '组件未在 blocklet.yml 中定义',
-  },
-  en: {
-    componentInstallerTitle: 'Missing component',
-    componentInstallerInstall: 'Install',
-    componentInstallerClose: 'Close',
-    componentInstallerRefresh: 'Refresh',
-    componentInstallerSuccessInstalled: 'Successfully installed, please refresh the page to see the changes.',
-    componentInstallerSuggestions: 'Please contact the system administrator to install the component.',
-    componentInstallerNoDefinedInBlockletYML: 'The component is not defined in blocklet.yml',
-  },
-};
-
-export default translations;

package/src/ComponentInstaller/use-component-installed.js

@@ -1,88 +0,0 @@
-import { BLOCKLET_SERVICE_PATH_PREFIX } from '@arcblock/did-connect-react/lib/constant';
-import { useEffect, useMemo, useRef, useState } from 'react';
-import { joinURL } from 'ufo';
-
-const parseDidToSet = (did) => {
-  if (typeof did === 'string') {
-    return new Set(did.split(';;'));
-  }
-  return new Set(did);
-};
-
-function useComponentInstalled({ did, onInstalled, onError }) {
-  const didKeys = Array.isArray(did) ? did.join(';;') : did;
-  const [installStatus, setInstallStatus] = useState({});
-  const onInstalledRef = useRef({ onInstalled, onError });
-  onInstalledRef.current = { onInstalled, onError };
-
-  const { optionalComponents, componentMountPoints } = window.blocklet;
-
-  const optComponents = useMemo(() => {
-    if (!optionalComponents || !optionalComponents.length) {
-      return [];
-    }
-    const didSet = parseDidToSet(didKeys);
-    const components = optionalComponents.filter((c) => didSet.has(c.meta.did));
-    (components ? onInstalledRef.current.onError : onInstalledRef.current.onInstalled)?.(components);
-    return components;
-  }, [didKeys, optionalComponents]);
-
-  const definedInBlockletYML = useMemo(() => {
-    if (optComponents.length) {
-      return true;
-    }
-    const didSet = parseDidToSet(didKeys);
-    return (componentMountPoints || []).find((item) => didSet.has(item.did));
-  }, [optComponents, componentMountPoints, didKeys]);
-
-  optComponents.forEach((item) => {
-    item.storeUrl = joinURL(item.meta.homepage, 'blocklets', item.meta.did);
-    item.installUrl = joinURL(
-      window.blocklet.appUrl,
-      BLOCKLET_SERVICE_PATH_PREFIX,
-      `/admin/components?install-component=${item.meta.did}`
-    );
-  });
-
-  useEffect(() => {
-    const handle = (event) => {
-      if (event.origin !== window.blocklet.appUrl) {
-        return;
-      }
-
-      if (event.data?.kind === 'component-installer' && event.data?.blocklet?.children) {
-        let hasChild = false;
-        const didSet = parseDidToSet(didKeys);
-        event.data?.blocklet?.children.forEach((item) => {
-          if (didSet.has(item.meta?.did)) {
-            hasChild = true;
-            setInstallStatus((value) => {
-              return {
-                ...value,
-                [item.meta?.did]: item.status || 'waiting',
-              };
-            });
-          }
-        });
-        if (!hasChild) {
-          setInstallStatus({});
-        }
-      }
-    };
-
-    window.addEventListener('message', handle);
-    return () => {
-      window.removeEventListener('message', handle);
-    };
-  }, [didKeys]);
-
-  return {
-    optComponents,
-    installed: !optComponents.length && definedInBlockletYML,
-    installStatus,
-    setInstallStatus,
-    definedInBlockletYML,
-  };
-}
-
-export default useComponentInstalled;

package/src/ComponentManager/components/add-component.tsx

@@ -1,136 +0,0 @@
-import { useEffect, ReactElement, useRef, use } from 'react';
-import Button from '@arcblock/ux/lib/Button';
-import { useLocaleContext } from '@arcblock/ux/lib/Locale/context';
-import { BLOCKLET_SERVICE_PATH_PREFIX } from '@arcblock/ux/lib/Util/constant';
-import { useMemoizedFn, useReactive } from 'ahooks';
-import { translate } from '@arcblock/ux/lib/Locale/util';
-import { joinURL, withQuery } from 'ufo';
-import { SessionContext } from '@arcblock/did-connect-react/lib/Session';
-import Toast from '@arcblock/ux/lib/Toast';
-
-import ResourceDialog from './resource-dialog';
-import { translations } from '../libs/locales';
-import type { SessionContext as TSessionContext } from '../../@types';
-
-export default function AddComponent({
-  componentDid,
-  resourceType = undefined,
-  resourceDid = undefined,
-  grantedRoles = ['admin', 'owner'],
-  autoClose = true,
-  selectedMeta = undefined,
-  storeUrl = undefined,
-  onComplete,
-  onClose,
-  render = undefined,
-}: {
-  componentDid: string;
-  resourceType?: string;
-  resourceDid?: string;
-  autoClose?: boolean;
-  selectedMeta?: any;
-  storeUrl?: string;
-  grantedRoles?: string[];
-  onComplete: () => void;
-  onClose: () => void;
-  render?: ({ onClick, loading }: { onClick: () => void; loading: boolean }) => ReactElement<any>;
-}) {
-  const { session } = use<TSessionContext>(SessionContext);
-  const { locale } = useLocaleContext();
-  const t = useMemoizedFn((key, data = {}) => {
-    return translate(translations, key, locale, 'en', data);
-  });
-  const refIframe = useRef<{ selectBlocklet: (meta: any) => void }>(null);
-
-  const currentState = useReactive({
-    loading: false,
-    showDialog: false,
-  });
-  const importUrl = withQuery(joinURL(BLOCKLET_SERVICE_PATH_PREFIX, 'embed/resources', componentDid, 'add'), {
-    resourceDid,
-    resourceType,
-    mode: 'dialog',
-    showFromUrl: 'false',
-    showResourcesSwitch: 'false',
-    enableRunBackground: 'false',
-    showCategory: 'false',
-  });
-
-  const handleClose = useMemoizedFn(() => {
-    currentState.showDialog = false;
-    onClose?.();
-  });
-  const handleComplete = useMemoizedFn(() => {
-    currentState.showDialog = false;
-    onComplete?.();
-  });
-  const handleOpen = useMemoizedFn(() => {
-    if (!session.user) {
-      Toast.warning(t('needLogin'));
-      return;
-    }
-    if (!grantedRoles.includes(session.user?.role as string)) {
-      Toast.warning(t('noPermission'));
-      return;
-    }
-    currentState.loading = true;
-    currentState.showDialog = true;
-  });
-  const handleLoad = useMemoizedFn(() => {
-    currentState.loading = false;
-    if (refIframe.current) {
-      refIframe.current?.selectBlocklet(selectedMeta);
-    }
-  });
-
-  const handleIframeMessage = useMemoizedFn((event: MessageEvent) => {
-    if (event?.data?.event === 'component.installed' && event.data.componentDid === componentDid) {
-      if (autoClose || event.data.manual) {
-        handleComplete();
-      }
-    }
-  });
-
-  useEffect(() => {
-    if (currentState.showDialog) {
-      window.addEventListener('message', handleIframeMessage);
-    } else {
-      window.removeEventListener('message', handleIframeMessage);
-    }
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [currentState.showDialog]);
-
-  return (
-    <>
-      {render ? (
-        render({ onClick: handleOpen, loading: currentState.loading })
-      ) : (
-        <Button
-          key="button"
-          variant="outlined"
-          color="secondary"
-          type="button"
-          className="submit"
-          onClick={handleOpen}
-          loading={currentState.loading}
-          sx={{ mr: 1, ml: 1 }}>
-          {t('importResource')}
-        </Button>
-      )}
-
-      {currentState.showDialog && (
-        <ResourceDialog
-          ref={refIframe}
-          src={importUrl}
-          storeUrl={storeUrl}
-          open
-          componentDid={componentDid}
-          loading={currentState.loading}
-          onClose={handleClose}
-          onComplete={handleComplete}
-          onLoad={handleLoad}
-        />
-      )}
-    </>
-  );
-}

package/src/ComponentManager/components/check-component.tsx

@@ -1,3 +0,0 @@
-import CheckComponent from '../../ComponentInstaller';
-
-export default CheckComponent;

package/src/ComponentManager/components/publish-component.tsx

@@ -1,90 +0,0 @@
-import { ReactElement, use } from 'react';
-import Button from '@arcblock/ux/lib/Button';
-import { useLocaleContext } from '@arcblock/ux/lib/Locale/context';
-import { BLOCKLET_SERVICE_PATH_PREFIX } from '@arcblock/ux/lib/Util/constant';
-import { useMemoizedFn, useReactive } from 'ahooks';
-import { translate } from '@arcblock/ux/lib/Locale/util';
-import { SessionContext } from '@arcblock/did-connect-react/lib/Session';
-import Toast from '@arcblock/ux/lib/Toast';
-
-import type { SessionContext as TSessionContext } from '../../@types';
-import ResourceDialog from './resource-dialog';
-import { translations } from '../libs/locales';
-
-export default function PublishComponent({
-  componentDid,
-  grantedRoles = undefined,
-  onClose,
-  render = undefined,
-}: {
-  componentDid: string;
-  grantedRoles?: string[];
-  onClose: () => void;
-  render?: ({ onClick, loading }: { onClick: () => void; loading: boolean }) => ReactElement<any>;
-}) {
-  const { session } = use<TSessionContext>(SessionContext);
-  const { locale } = useLocaleContext();
-  const t = useMemoizedFn((key, data = {}) => {
-    return translate(translations, key, locale, 'en', data);
-  });
-  const currentState = useReactive({
-    showDialog: false,
-    loading: false,
-  });
-
-  const exportUrl = `${BLOCKLET_SERVICE_PATH_PREFIX}/embed/resources/${componentDid}/publish?mode=dialog`;
-
-  const handleClose = useMemoizedFn(() => {
-    currentState.showDialog = false;
-    onClose?.();
-  });
-  const handleLoad = useMemoizedFn(() => {
-    currentState.loading = false;
-  });
-  const handleOpen = useMemoizedFn(() => {
-    if (!session.user) {
-      Toast.warning(t('needLogin'));
-      return;
-    }
-
-    if (grantedRoles && grantedRoles.length > 0) {
-      if (!grantedRoles?.includes(session.user?.role)) {
-        Toast.warning(t('noPermission'));
-        return;
-      }
-    }
-    currentState.loading = true;
-    currentState.showDialog = true;
-  });
-
-  return (
-    <>
-      {render ? (
-        render({ onClick: handleOpen, loading: currentState.loading })
-      ) : (
-        <Button
-          key="button"
-          variant="outlined"
-          color="secondary"
-          type="button"
-          className="submit"
-          loading={currentState.loading}
-          onClick={handleOpen}
-          sx={{ mr: 1, ml: 1 }}>
-          {t('exportResource')}
-        </Button>
-      )}
-
-      {currentState.showDialog && (
-        <ResourceDialog
-          src={exportUrl}
-          open
-          onClose={handleClose}
-          onLoad={handleLoad}
-          componentDid={componentDid}
-          loading={currentState.loading}
-        />
-      )}
-    </>
-  );
-}