@blocklet/ui-react 2.9.14 → 2.9.16

package/src/ComponentInstaller/index.jsx

@@ -0,0 +1,305 @@
+import { Button, Box, ClickAwayListener, Fade, Paper } from '@mui/material';
+import { Icon } from '@iconify/react';
+import { temp as colors } from '@arcblock/ux/lib/Colors';
+import { SessionContext } from '@arcblock/did-connect/lib/Session';
+import { useContext } from 'react';
+import SessionPermission from '@arcblock/ux/lib/SessionPermission';
+import PropTypes from 'prop-types';
+import { useMemoizedFn } from 'ahooks';
+import { translate } from '@arcblock/ux/lib/Locale/util';
+import { useLocaleContext } from '@arcblock/ux/lib/Locale/context';
+import useComponentInstalled from './use-component-installed';
+import translations from './locales';
+
+function ComponentInstaller({
+  warnIcon,
+  did,
+  noPermissionMute,
+  onInstalled,
+  onError,
+  children,
+  closeByOutSize,
+  onClose,
+  fallback,
+  roles = ['owner', 'admin'],
+}) {
+  const { locale } = useLocaleContext();
+  const t = useMemoizedFn((key, data = {}) => {
+    return translate(translations, key, locale, 'en', data);
+  });
+  const { installed, optionalComponent, installUrl, storeUrl, installStatus, installStatusDone, definedInBlockletYML } =
+    useComponentInstalled({
+      did,
+      onInstalled,
+      onError,
+    });
+  const sessionCtx = useContext(SessionContext);
+
+  const handleInstall = () => {
+    window.open(installUrl, '_blank');
+  };
+
+  const handleClose = () => {
+    onClose?.(false);
+  };
+
+  const handleOpenStore = () => {
+    window.open(storeUrl, '_blank');
+  };
+
+  const handleRefresh = () => {
+    window.location.reload();
+  };
+
+  const size = 60;
+
+  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,
+                optionalComponent,
+                installStatus,
+                handleOpenStore,
+                handleInstall,
+                handleRefresh,
+              })}
+            </>
+          );
+        }
+        // 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: 3,
+                    width: 400,
+                    maxWidth: 400,
+                    borderColor: colors.lineStep,
+                    border: '0 !important',
+                    fontSize: '14px',
+                    textAlign: 'left',
+                    boxShadow: `0px 8px 16px 0px ${colors.gray6}, 0px 0px 0px 1px ${colors.gray6}`,
+                  }}>
+                  {!definedInBlockletYML ? (
+                    <Box sx={{ display: 'flex', flexDirection: 'column' }}>
+                      <Box
+                        sx={{
+                          padding: '20px 24px',
+                          marginLeft: 0,
+                          display: 'flex',
+                          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>
+                      <Box sx={{ width: '100%', height: '1px', backgroundColor: colors.gray6 }} />
+                      <Box sx={{ padding: '20px 24px', marginTop: 0 }}>
+                        {t('componentInstallerNoDefinedInBlockletYML')}: {did}
+                      </Box>
+                      <Box sx={{ padding: '0px 24px' }}>
+                        {onClose ? (
+                          <Button sx={{ marginBottom: 2 }} variant="outlined" className="button" onClick={handleClose}>
+                            {t('componentInstallerClose')}
+                          </Button>
+                        ) : null}
+                      </Box>
+                    </Box>
+                  ) : (
+                    <Box sx={{ display: 'flex', flexDirection: 'column' }}>
+                      <Box
+                        sx={{
+                          padding: '20px 24px',
+                          marginLeft: 0,
+                          display: 'flex',
+                          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>
+                      <Box sx={{ width: '100%', height: '1px', backgroundColor: colors.gray6 }} />
+                      <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.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: colors.primaryBase,
+                                  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: '#333' }}
+                                    startIcon={
+                                      <Icon icon="line-md:loading-loop" style={{ color: '#333', fontSize: 16 }} />
+                                    }
+                                    variant="contained">
+                                    {installStatus}
+                                  </Button>
+                                )}
+                              </Box>
+                            ) : (
+                              <Button
+                                key="install"
+                                sx={{ marginTop: 2 }}
+                                variant="contained"
+                                className="button"
+                                onClick={handleInstall}>
+                                {t('componentInstallerInstall')}
+                              </Button>
+                            )}
+                            {onClose ? (
+                              <Button sx={{ marginTop: 2 }} variant="outlined" className="button" onClick={handleClose}>
+                                {t('componentInstallerClose')}
+                              </Button>
+                            ) : null}
+                          </Box>
+                          {installStatusDone ? (
+                            <Box sx={{ marginTop: 2, opacity: 0.7 }}>{t('componentInstallerSuccessInstalled')}</Box>
+                          ) : null}
+                        </Box>
+                      </Box>
+
+                      {hasPermission ? null : (
+                        <>
+                          <Box sx={{ width: '100%', height: '1px', backgroundColor: colors.gray6 }} />
+                          <Box sx={{ padding: '20px 24px' }}>
+                            <Box sx={{ opacity: 1 }}>{t('componentInstallerSuggestions')}</Box>
+                            {onClose ? (
+                              <Button
+                                sx={{ marginTop: 2, alignSelf: 'flex-start' }}
+                                variant="outlined"
+                                className="button"
+                                onClick={handleClose}>
+                                {t('componentInstallerClose')}
+                              </Button>
+                            ) : null}
+                          </Box>
+                        </>
+                      )}
+                    </Box>
+                  )}
+                </Paper>
+              </Fade>
+            </ClickAwayListener>
+          </>
+        );
+      }}
+    </SessionPermission>
+  );
+}
+
+ComponentInstaller.propTypes = {
+  warnIcon: PropTypes.node,
+  did: 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,
+};
+
+ComponentInstaller.defaultProps = {
+  warnIcon: null,
+  noPermissionMute: false,
+  onInstalled: null,
+  onError: null,
+  closeByOutSize: false,
+  onClose: null,
+  fallback: null,
+  roles: ['owner', 'admin'],
+};
+
+export default ComponentInstaller;

package/src/ComponentInstaller/locales.js

@@ -0,0 +1,22 @@
+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

@@ -0,0 +1,68 @@
+import { AUTH_SERVICE_PREFIX } from '@arcblock/did-connect/lib/constant';
+import { useMemo, useRef, useState, useEffect } from 'react';
+
+function useComponentInstalled({ did, onInstalled, onError }) {
+  const { optionalComponents, componentMountPoints } = window.blocklet;
+  const onInstalledRef = useRef({ onInstalled, onError });
+  onInstalledRef.current = { onInstalled, onError };
+
+  const optionalComponent = useMemo(() => {
+    if (!optionalComponents || !optionalComponents.length) {
+      return null;
+    }
+    const component = optionalComponents.find((c) => c.meta.did === did);
+    (component ? onInstalledRef.current.onError : onInstalledRef.current.onInstalled)?.(component);
+    return component;
+  }, [did, optionalComponents]);
+
+  const definedInBlockletYML = useMemo(() => {
+    if (optionalComponent) {
+      return true;
+    }
+    return (componentMountPoints || []).find((item) => item.did === did);
+  }, [optionalComponent, componentMountPoints, did]);
+
+  const installUrl = `${window.blocklet.appUrl}/${AUTH_SERVICE_PREFIX}/admin/components?install-component=${did}`;
+  const storeUrl = optionalComponent ? `${optionalComponent.meta.homepage}/blocklets/${did}` : '';
+  const [installStatus, setInstallStatus] = useState('');
+
+  useEffect(() => {
+    const handle = (event) => {
+      if (event.origin !== window.blocklet.appUrl) {
+        return;
+      }
+
+      if (event.data?.kind === 'component-installer' && event.data?.blocklet?.children) {
+        let hasChild = false;
+        event.data?.blocklet?.children.forEach((item) => {
+          if (item.meta?.did === did) {
+            hasChild = true;
+            setInstallStatus(item.status || 'waiting');
+          }
+        });
+        if (!hasChild) {
+          setInstallStatus('');
+        }
+      }
+    };
+    window.addEventListener('message', handle);
+    return () => {
+      window.removeEventListener('message', handle);
+    };
+  }, [did]);
+
+  const installStatusDone = installStatus === 'stopped' || installStatus === 'running';
+
+  return {
+    optionalComponent,
+    installed: !optionalComponent && definedInBlockletYML,
+    installUrl,
+    storeUrl,
+    installStatus,
+    setInstallStatus,
+    installStatusDone,
+    definedInBlockletYML,
+  };
+}
+
+export default useComponentInstalled;

package/src/Footer/index.jsx

@@ -80,7 +80,7 @@ const StyledInternalFooter = styled(InternalFooter)`
   border-top: 1px solid #eee;
   color: ${(props) => props.theme.palette.grey[600]};
   ${({ $bgcolor }) => $bgcolor && `background-color: ${$bgcolor};`}
-  font-family: Lato, Avenir, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif,
+  font-family: Inter, Avenir, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif,
     'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol';
 `;
 

package/src/Header/index.jsx

@@ -138,7 +138,7 @@ Header.defaultProps = {
 
 const StyledUxHeader = styled(ResponsiveHeader)`
   ${({ $bgcolor }) => `background-color: ${$bgcolor || '#fff'};`}
-  font-family: Lato, Avenir, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif,
+  font-family: Inter, Avenir, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif,
     'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol';
   .header-logo {
     min-width: 44px;

package/src/UserCenter/components/passport.tsx

@@ -54,7 +54,7 @@ export default function Passport({ user, ...rest }: { user: User } & StackProps)
           width={200}
           color={window.blocklet.passportColor}
           createPassportSvg={createPassportSvg}
-          title={currentRole.role === x.role ? t('currentPassport') : ''}
+          title={currentRole && currentRole.role === x.role ? t('currentPassport') : ''}
           sx={{
             flexDirection: 'column',
             alignItems: 'center',
@@ -68,7 +68,7 @@ export default function Passport({ user, ...rest }: { user: User } & StackProps)
               justifyContent: 'center',
               backgroundColor: 'white',
               boxShadow:
-                currentRole.role === x.role
+                currentRole && currentRole.role === x.role
                   ? `0px 2px 4px 0px ${activeColor}, 0px 1px 2px -1px ${activeColor}, 0px 0px 0px 1px ${activeColor} !important`
                   : '0px 2px 4px 0px rgba(2, 7, 19, 0.04), 0px 1px 2px -1px rgba(2, 7, 19, 0.08), 0px 0px 0px 1px rgba(2, 7, 19, 0.08) !important',
             },

package/src/index.ts

@@ -6,4 +6,8 @@ export { default as Footer } from './Footer';
 export { default as Dashboard } from './Dashboard';
 // @ts-ignore
 export { default as Icon } from './Icon';
+// @ts-ignore
+export { default as ComponentInstaller } from './ComponentInstaller';
+// @ts-ignore
+export { default as useComponentInstaller } from './ComponentInstaller/use-component-installer';
 export * from './UserCenter';