@blocklet/ui-react 2.9.29 → 2.9.30

package/src/ComponentInstaller/index.jsx

@@ -1,15 +1,17 @@
-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 { temp as colors } from '@arcblock/ux/lib/Colors';
+import { useLocaleContext } from '@arcblock/ux/lib/Locale/context';
+import { translate } from '@arcblock/ux/lib/Locale/util';
 import SessionPermission from '@arcblock/ux/lib/SessionPermission';
-import PropTypes from 'prop-types';
+import { Icon } from '@iconify/react';
+import CloseIcon from '@mui/icons-material/Close';
+import { Box, ClickAwayListener, Fade, IconButton, Paper } from '@mui/material';
 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 PropTypes from 'prop-types';
+import { useContext } from 'react';
+import InstallerItem from './installer-item';
 import translations from './locales';
+import useComponentInstalled from './use-component-installed';
 
 function ComponentInstaller({
   warnIcon,
@@ -28,32 +30,17 @@ function ComponentInstaller({
   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 { installed, optComponents, installStatus, 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;
-
   if (disabled) {
     return children;
   }
@@ -73,11 +60,8 @@ function ComponentInstaller({
               {fallback}
               {children({
                 hasPermission,
-                optionalComponent,
+                optComponents,
                 installStatus,
-                handleOpenStore,
-                handleInstall,
-                handleRefresh,
               })}
             </>
           );
@@ -104,7 +88,7 @@ function ComponentInstaller({
                     zIndex: 3000,
                     borderRadius: 3,
                     width: 400,
-                    maxWidth: 400,
+                    maxWidth: '90vw',
                     borderColor: colors.lineStep,
                     border: '0 !important',
                     fontSize: '14px',
@@ -118,6 +102,7 @@ function ComponentInstaller({
                           padding: '20px 24px',
                           marginLeft: 0,
                           display: 'flex',
+                          alignItems: 'center',
                           flexDirection: 'row',
                           justifyContent: 'flex-start',
                         }}>
@@ -125,18 +110,17 @@ function ComponentInstaller({
                         <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: 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' }}>
@@ -146,128 +130,40 @@ function ComponentInstaller({
                           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: 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 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: 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>
                         </>
                       )}
@@ -286,7 +182,7 @@ function ComponentInstaller({
 ComponentInstaller.propTypes = {
   disabled: PropTypes.bool,
   warnIcon: PropTypes.node,
-  did: PropTypes.string.isRequired,
+  did: PropTypes.oneOfType([PropTypes.string, PropTypes.arrayOf(PropTypes.string)]).isRequired,
   noPermissionMute: PropTypes.bool,
   onInstalled: PropTypes.func,
   onError: PropTypes.func,
@@ -318,5 +214,10 @@ export default function WrapComponentInstaller(props) {
 }
 
 WrapComponentInstaller.propTypes = {
+  ...ComponentInstaller.propTypes,
   children: PropTypes.any.isRequired,
 };
+
+WrapComponentInstaller.defaultProps = {
+  ...ComponentInstaller.defaultProps,
+};

package/src/ComponentInstaller/installer-item.jsx

@@ -0,0 +1,131 @@
+import { temp as colors } from '@arcblock/ux/lib/Colors';
+import { Icon } from '@iconify/react';
+import { Box, Button } from '@mui/material';
+import PropTypes from 'prop-types';
+
+export default function InstallerItem({ optionalComponent, index, installStatus, hasPermission, t }) {
+  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: 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?.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: 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(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,
+};
+
+InstallerItem.defaultProps = {
+  installStatus: '',
+};

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

@@ -1,32 +1,48 @@
 import { AUTH_SERVICE_PREFIX } from '@arcblock/did-connect/lib/constant';
-import { useMemo, useRef, useState, useEffect } from 'react';
+import { useEffect, useMemo, useRef, useState } from 'react';
 import urlJoin from 'url-join';
 
+const parseDidToSet = (did) => {
+  if (typeof did === 'string') {
+    return new Set(did.split(';;'));
+  }
+  return new Set(did);
+};
+
 function useComponentInstalled({ did, onInstalled, onError }) {
-  const [installStatus, setInstallStatus] = useState('');
+  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 optionalComponent = useMemo(() => {
+  const optComponents = 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 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 (optionalComponent) {
+    if (optComponents.length) {
       return true;
     }
-    return (componentMountPoints || []).find((item) => item.did === did);
-  }, [optionalComponent, componentMountPoints, did]);
+    const didSet = parseDidToSet(didKeys);
+    return (componentMountPoints || []).find((item) => didSet.has(item.did));
+  }, [optComponents, componentMountPoints, didKeys]);
 
-  const installUrl = urlJoin(window.blocklet.appUrl, AUTH_SERVICE_PREFIX, `/admin/components?install-component=${did}`);
-  const storeUrl = optionalComponent ? urlJoin(optionalComponent.meta.homepage, 'blocklets', did) : '';
+  optComponents.forEach((item) => {
+    item.storeUrl = urlJoin(item.meta.homepage, 'blocklets', item.meta.did);
+    item.installUrl = urlJoin(
+      window.blocklet.appUrl,
+      AUTH_SERVICE_PREFIX,
+      `/admin/components?install-component=${item.meta.did}`
+    );
+  });
 
   useEffect(() => {
     const handle = (event) => {
@@ -36,33 +52,35 @@ function useComponentInstalled({ did, onInstalled, onError }) {
 
       if (event.data?.kind === 'component-installer' && event.data?.blocklet?.children) {
         let hasChild = false;
+        const didSet = parseDidToSet(didKeys);
         event.data?.blocklet?.children.forEach((item) => {
-          if (item.meta?.did === did) {
+          if (didSet.has(item.meta?.did)) {
             hasChild = true;
-            setInstallStatus(item.status || 'waiting');
+            setInstallStatus((value) => {
+              return {
+                ...value,
+                [item.meta?.did]: item.status || 'waiting',
+              };
+            });
           }
         });
         if (!hasChild) {
-          setInstallStatus('');
+          setInstallStatus({});
         }
       }
     };
+
     window.addEventListener('message', handle);
     return () => {
       window.removeEventListener('message', handle);
     };
-  }, [did]);
-
-  const installStatusDone = installStatus === 'stopped' || installStatus === 'running';
+  }, [didKeys]);
 
   return {
-    optionalComponent,
-    installed: !optionalComponent && definedInBlockletYML,
-    installUrl,
-    storeUrl,
+    optComponents,
+    installed: !optComponents.length && definedInBlockletYML,
     installStatus,
     setInstallStatus,
-    installStatusDone,
     definedInBlockletYML,
   };
 }