@abtnode/ux 1.16.23-beta-47ca27f8 → 1.16.23-beta-f25d8f54

package/es/blocklet/agreement.js

@@ -9,6 +9,7 @@ import { Box, Checkbox, FormControlLabel, IconButton } from '@mui/material';
 import { useState } from 'react';
 import AgreementApp from './agreement-app';
 import RelatedComponentsDialog from './component/related-components-dialog';
+import useComponentsByBlockletMetaUrl from '../hooks/use-components-by-blocklet-meta-url';
 
 // TODO: 加载 Blocklet 定义的 Agreement
 import { jsx as _jsx } from "react/jsx-runtime";
@@ -26,6 +27,10 @@ export default function Agreement({
     locale
   } = useLocaleContext();
   const [showDependencies, setShowDependencies] = useState(false);
+  const {
+    components,
+    loading
+  } = useComponentsByBlockletMetaUrl(meta);
   const clickNext = onClickNext || (() => {
     navigate(`/launch-blocklet/install${window.location.search}`);
   });
@@ -51,9 +56,21 @@ export default function Agreement({
           })
         })
       })
-    }), /*#__PURE__*/_jsxs("div", {
+    }), /*#__PURE__*/_jsxs(Box, {
       className: "agreement-bottom",
-      children: [onChangeInstallRelated && /*#__PURE__*/_jsxs(Box, {
+      sx: {
+        '> .agreement-loading': {
+          color: 'primary.main'
+        }
+      },
+      children: [loading ? /*#__PURE__*/_jsx(Icon, {
+        className: "agreement-loading",
+        icon: "line-md:loading-loop",
+        style: {
+          fontSize: 42,
+          transform: 'scale(0.6)'
+        }
+      }) : null, onChangeInstallRelated && components?.length ? /*#__PURE__*/_jsxs(Box, {
         sx: {
           display: 'flex',
           flexDirection: 'row',
@@ -84,7 +101,7 @@ export default function Agreement({
             })
           })
         })]
-      }), /*#__PURE__*/_jsx("div", {
+      }) : null, /*#__PURE__*/_jsx("div", {
         className: "button-container",
         "data-cy": "agree-all",
         children: /*#__PURE__*/_jsx(ServerEula, {
@@ -100,7 +117,9 @@ export default function Agreement({
       installRelated: installRelated,
       meta: meta,
       show: showDependencies,
-      onClose: handleHiddenDependencies
+      onClose: handleHiddenDependencies,
+      components: components,
+      loading: loading
     })]
   });
 }

package/es/blocklet/component/related-components-dialog.js

@@ -4,23 +4,23 @@ import { useLocaleContext } from '@arcblock/ux/lib/Locale/context';
 import { Box, useMediaQuery } from '@mui/material';
 import { Icon } from '@iconify/react';
 import { useMemo } from 'react';
-import useComponentsByBlockletMetaUrl from '../../hooks/use-components-by-blocklet-meta-url';
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
+function parseLogoUrl(component) {
+  return `${component.bundleSource?.store || component.meta.homepage}/assets/${component.meta?.did}/${component.meta?.logo || 'logo.png'}?v=${component.meta?.version}`;
+}
 export default function RelatedComponentsDialog({
   installRelated,
   meta,
   show,
-  onClose
+  onClose,
+  components,
+  loading
 }) {
   const {
     t
   } = useLocaleContext();
   const isMobile = useMediaQuery(theme => theme.breakpoints.down('md'));
-  const {
-    components,
-    loading
-  } = useComponentsByBlockletMetaUrl(meta);
   const requiredList = useMemo(() => {
     if (!meta || !meta.components) {
       return {};
@@ -119,7 +119,7 @@ export default function RelatedComponentsDialog({
               minWidth: size,
               minHeight: size
             },
-            src: `${component.meta.homepage}/assets/${meta.did}/logo.png?v=${meta.version}`,
+            src: parseLogoUrl(component),
             alt: component.meta.title
           }), /*#__PURE__*/_jsxs(Box, {
             sx: {
@@ -142,7 +142,7 @@ export default function RelatedComponentsDialog({
                 }
               },
               onClick: () => {
-                window.open(`${component.meta.homepage}/blocklets/${component.meta.did}`, '_blank');
+                window.open(`${component.bundleSource?.store || component.meta.homepage}/blocklets/${component.meta.did}`, '_blank');
               },
               children: [component.meta.title, /*#__PURE__*/_jsxs(Box, {
                 sx: {
@@ -180,7 +180,9 @@ RelatedComponentsDialog.propTypes = {
   meta: PropTypes.object,
   show: PropTypes.bool,
   onClose: PropTypes.func.isRequired,
-  installRelated: PropTypes.func
+  installRelated: PropTypes.func,
+  components: PropTypes.array.isRequired,
+  loading: PropTypes.bool.isRequired
 };
 RelatedComponentsDialog.defaultProps = {
   meta: null,

package/es/blocklet/publish/create-release.js

@@ -30,6 +30,7 @@ import EmptySpinner from '../../empty-spinner';
 import ClickToCopy from '../../click-to-copy';
 import { formatError } from '../../util';
 import Resource from './resource';
+import SelectComponents from './select-components';
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
 import { Fragment as _Fragment } from "react/jsx-runtime";
@@ -103,9 +104,21 @@ const addComponentTabs = ({
     value: key
   });
 };
-const pickParams = release => {
-  const params = pick(release, ['blockletVersion', 'blockletTitle', 'blockletDescription', 'blockletLogo', 'blockletIntroduction', 'blockletScreenshots', 'note']);
+const pickParams = (release, app) => {
+  const params = pick(release, ['blockletVersion', 'blockletTitle', 'blockletDescription', 'blockletLogo', 'blockletIntroduction', 'blockletScreenshots', 'blockletComponents', 'note']);
   params.blockletScreenshots ||= [];
+  if (!params.blockletComponents) {
+    params.blockletComponents = (app.children || []).map(x => ({
+      did: x.meta.did,
+      included: true,
+      required: true
+    }));
+  } else {
+    params.blockletComponents = params.blockletComponents.map(x => ({
+      ...x,
+      included: true
+    }));
+  }
   return params;
 };
 export default function CreateRelease({
@@ -170,7 +183,7 @@ export default function CreateRelease({
       } else if (semver.valid(data.blockletVersion)) {
         data.blockletVersion = semver.inc(data.blockletVersion, 'patch');
       }
-      setParams(pickParams(data));
+      setParams(pickParams(data, blocklet));
       setProjectType(data.type);
     }).catch(err => {
       setLoading(false);
@@ -186,7 +199,7 @@ export default function CreateRelease({
       }
     }).then(res => {
       setLoading(false);
-      setParams(pickParams(res?.release));
+      setParams(pickParams(res?.release, blocklet));
       setRelease(res?.release);
     }).catch(err => {
       setLoading(false);
@@ -237,6 +250,11 @@ export default function CreateRelease({
     _params.blockletDescription = (_params.blockletDescription || '').trim();
     _params.blockletIntroduction = (_params.blockletIntroduction || '').trim();
     _params.note = (_params.note || '').trim();
+    if (projectType === 'pack') {
+      _params.blockletComponents = (_params.blockletComponents || []).filter(x => x.included).map(x => pick(x, ['did', 'required'])).map(JSON.stringify);
+    } else {
+      delete _params.blockletComponents;
+    }
     setCreateLoading(status);
     setLoading(true);
     api.createRelease({
@@ -762,6 +780,31 @@ export default function CreateRelease({
             children: resourceContent
           })]
         })]
+      }), projectType === 'pack' && /*#__PURE__*/_jsxs(Box, {
+        display: "flex",
+        mt: 3,
+        className: "section full-width",
+        children: [/*#__PURE__*/_jsx(Box, {
+          className: "left",
+          children: /*#__PURE__*/_jsx(Typography, {
+            variant: "h3",
+            children: t('common.components')
+          })
+        }), /*#__PURE__*/_jsx(Box, {
+          sx: {
+            flex: 1
+          },
+          children: /*#__PURE__*/_jsx(SelectComponents, {
+            disabled: loading || readOnly,
+            app: blocklet,
+            value: params.blockletComponents,
+            onChange: data => {
+              setParams({
+                blockletComponents: data
+              });
+            }
+          })
+        })]
       })]
     })]
   });

package/es/blocklet/publish/select-components.js

@@ -0,0 +1,181 @@
+import { useMemo } from 'react';
+import PropTypes from 'prop-types';
+import styled from '@emotion/styled';
+import classnames from 'classnames';
+import pick from 'lodash/pick';
+import Checkbox from '@mui/material/Checkbox';
+import Box from '@mui/material/Box';
+import Datatable from '@arcblock/ux/lib/Datatable';
+import { useLocaleContext } from '@arcblock/ux/lib/Locale/context';
+import BlockletBundleAvatar from '../bundle-avatar';
+import { jsx as _jsx } from "react/jsx-runtime";
+import { jsxs as _jsxs } from "react/jsx-runtime";
+export default function SelectComponents({
+  value,
+  app,
+  onChange,
+  disabled
+}) {
+  const {
+    t,
+    locale
+  } = useLocaleContext();
+  const components = app.children || [];
+  const list = useMemo(() => app.children.map(component => {
+    const exist = value.find(item => item.did === component.meta.did);
+    return exist || {
+      did: component.meta.did
+    };
+  }), [app, value]);
+  const map = list.reduce((acc, curr) => {
+    acc[curr.did] = pick(curr, ['required', 'included']);
+    return acc;
+  }, {});
+  const toggleIncluded = did => {
+    const newValue = list.map(item => {
+      if (item.did === did) {
+        const included = !item.included;
+        return {
+          ...item,
+          included,
+          required: included
+        };
+      }
+      return item;
+    });
+    onChange(newValue);
+  };
+  const toggleRequired = did => {
+    const newValue = list.map(item => {
+      if (item.did === did) {
+        return {
+          ...item,
+          required: !item.required
+        };
+      }
+      return item;
+    });
+    onChange(newValue);
+  };
+  const columns = [{
+    label: t('common.name'),
+    name: 'meta.title',
+    width: 200,
+    options: {
+      // eslint-disable-next-line react/no-unstable-nested-components
+      customBodyRenderLite: rawIndex => {
+        const component = components[rawIndex];
+        const included = map[component.meta.did]?.included;
+        return /*#__PURE__*/_jsxs(Box, {
+          display: "flex",
+          alignItems: "center",
+          children: [/*#__PURE__*/_jsx(BlockletBundleAvatar, {
+            size: 24,
+            blocklet: component,
+            ancestors: [app]
+          }), /*#__PURE__*/_jsx(Box, {
+            ml: "4px",
+            className: classnames('text', {
+              excluded: !included
+            }),
+            children: /*#__PURE__*/_jsx(Box, {
+              children: component.meta.title
+            })
+          })]
+        });
+      }
+    }
+  }, {
+    label: t('blocklet.publish.componentIncluded'),
+    width: 100,
+    options: {
+      // eslint-disable-next-line react/no-unstable-nested-components
+      customBodyRenderLite: rawIndex => {
+        const component = components[rawIndex];
+        const included = map[component.meta.did]?.included;
+        return /*#__PURE__*/_jsx(Checkbox, {
+          size: "small",
+          checked: included,
+          onClick: () => toggleIncluded(component.meta.did),
+          disabled: disabled
+        });
+      }
+    }
+  }, {
+    label: t('blocklet.publish.componentForceRequired'),
+    width: 100,
+    options: {
+      // eslint-disable-next-line react/no-unstable-nested-components
+      customBodyRenderLite: rawIndex => {
+        const component = components[rawIndex];
+        const included = map[component.meta.did]?.included;
+        const required = map[component.meta.did]?.required;
+        return /*#__PURE__*/_jsx(Checkbox, {
+          disabled: disabled || !included,
+          size: "small",
+          checked: required && included,
+          onClick: () => toggleRequired(component.meta.did)
+        });
+      }
+    }
+  }];
+  return /*#__PURE__*/_jsx(Root, {
+    children: /*#__PURE__*/_jsx(Datatable, {
+      className: "main-table",
+      verticalKeyWidth: 100,
+      locale: locale,
+      data: components,
+      columns: columns,
+      options: {
+        sort: false,
+        download: false,
+        filter: false,
+        print: false,
+        search: false,
+        rowsPerPage: 100
+      }
+    })
+  });
+}
+SelectComponents.propTypes = {
+  app: PropTypes.object.isRequired,
+  value: PropTypes.arrayOf(PropTypes.shape({
+    did: PropTypes.string.isRequired,
+    required: PropTypes.bool,
+    included: PropTypes.bool
+  })),
+  onChange: PropTypes.func,
+  disabled: PropTypes.bool
+};
+SelectComponents.defaultProps = {
+  value: [],
+  onChange: () => {},
+  disabled: false
+};
+const Root = styled(Box)`
+  .main-table {
+    .text.excluded {
+      color: #999;
+    }
+    width: 400px;
+    ${({
+  theme
+}) => theme.breakpoints.down('md')} {
+      width: 100%;
+    }
+    > div:first-child {
+      display: none;
+    }
+    .MuiTableCell-head {
+      padding-top: 0;
+      padding-bottom: 0;
+    }
+    .MuiTableCell-body {
+      padding-top: 6px;
+      padding-bottom: 6px;
+    }
+    .datatable-footer {
+      display: none;
+    }
+  }
+`;

package/es/blocklet/router/rule-list.js

@@ -116,7 +116,11 @@ function RuleList({
         }), typeof avatar === 'object' ? avatar : /*#__PURE__*/_jsx(Avatar, {
           children: avatar
         }), /*#__PURE__*/_jsxs(Box, {
-          ml: 2,
+          sx: {
+            ml: 2,
+            flex: 1,
+            wordBreak: 'break-word'
+          },
           children: [/*#__PURE__*/_jsxs(Box, {
             style: {
               color: '#222',

package/es/hooks/blocklet.js

@@ -7,9 +7,9 @@ import { toSlotDomain, getBlockletUrlParams, getBlockletUrl } from '../util';
 import { fixBlocklet } from '../blocklet/util';
 import { useDomainsAccessibility } from './url-evaluation';
 import parseProgress from '../util/parse-progress';
+import { getStorageWithTTL, removeStorageTTL, setStorageWithTTL } from '../util/storage-ttl';
+const parseStatusKey = id => `blocklet-status-${id}`;
 const excludeDownloadingStatus = {
-  waiting: 1,
-  installing: 1,
   installed: 1,
   starting: 1,
   running: 1,
@@ -18,6 +18,26 @@ const excludeDownloadingStatus = {
   restarting: 1,
   deleting: 1
 };
+function rollbackSessionBlockletStatus(blocklet) {
+  if (blocklet) {
+    const children = blocklet.children || [];
+    let isExtracting = false;
+    children.forEach(item => {
+      if (item.status === 'downloading') {
+        const status = getStorageWithTTL(parseStatusKey(item.meta?.bundleDid));
+        item.status = status || item.status;
+        if (status === 'extracting') {
+          isExtracting = true;
+        }
+      } else if (excludeDownloadingStatus[blocklet.status]) {
+        removeStorageTTL(parseStatusKey(item.meta?.bundleDid));
+      }
+    });
+    if (isExtracting) {
+      blocklet.status = 'extracting';
+    }
+  }
+}
 
 // eslint-disable-next-line import/prefer-default-export
 export function useBlocklet({
@@ -62,6 +82,7 @@ export function useBlocklet({
       await fixBlocklet(data, {
         getIP
       });
+      rollbackSessionBlockletStatus(data);
       setBlocklet(data);
     } catch (err) {
       Toast.error(err.message);
@@ -116,12 +137,7 @@ export function useBlocklet({
             fixRuntime: 'merge-old',
             oldBlocklet
           });
-          if (oldBlocklet && excludeDownloadingStatus[data.status]) {
-            oldBlocklet?.children?.forEach(item => {
-              delete item.progress;
-            });
-            delete oldBlocklet.progress;
-          }
+          rollbackSessionBlockletStatus(data);
           return data;
         });
         setLoading(false);
@@ -167,21 +183,14 @@ export function useBlocklet({
         const children = oldBlocklet.children || [];
         children.forEach(x => {
           if (x.meta?.bundleDid === data.component?.did) {
+            setStorageWithTTL(parseStatusKey(x.meta?.bundleDid), data.status, 1000 * 60 * 5);
             x.status = data.status;
           }
         });
-
-        // 判断当前下载的 children 是否都处于 extracting
-        const extracting = children.every(x => {
-          if (excludeDownloadingStatus[x.status]) {
-            return true;
-          }
-          return x.status === 'extracting';
-        });
         return {
           ...oldBlocklet,
           children,
-          status: extracting ? 'extracting' : oldBlocklet.status
+          status: data.status
         };
       });
     }
@@ -193,14 +202,15 @@ export function useBlocklet({
 
         // keep largest files as progress
         const children = oldBlocklet.children || [];
-        let progress = 100;
+        let progress = oldBlocklet.progress || 0;
         children.forEach(item => {
           if (item.meta?.bundleDid === data.component?.did) {
             item.progress = parseProgress(data.current, data.total);
             item.status = data.status;
-            if (item.progress < progress) {
+            if (item.progress > progress) {
               progress = item.progress;
             }
+            removeStorageTTL(parseStatusKey(item.meta?.bundleDid));
           }
         });
         return {

package/es/hooks/use-components-by-blocklet-meta-url.js

@@ -2,7 +2,7 @@ import { useEffect, useState } from 'react';
 import { useSearchParams } from 'react-router-dom';
 import { useNodeContext } from '../contexts/node';
 function parseBlockletMetaUrl(meta) {
-  return meta && meta.homepage && meta.did ? `${meta?.homepage}/api/blocklets/${meta?.did}/blocklet.json` : '';
+  return meta && (meta.registryUrl || meta.homepage) && meta.did ? `${meta.registryUrl || meta.homepage}/api/blocklets/${meta?.did}/blocklet.json` : '';
 }
 function useComponentsByBlockletMetaUrl(meta) {
   const {

package/es/invitation/invitation-receive.js

@@ -14,7 +14,8 @@ function InvitationReceive({
   invitation,
   onLogin,
   onReceive,
-  inService
+  inService,
+  action
 }) {
   const {
     t,
@@ -30,13 +31,20 @@ function InvitationReceive({
   if (typeof window !== 'undefined') {
     componentId = window?.blocklet?.componentId;
   }
+  const passportId = getPassportId();
   const extraParams = {
-    passportId: getPassportId(),
-    inviteId: invitation.inviteId,
     // 生成 passport 信息需要 baseUrl 字段
     baseUrl: window.location.origin,
     componentId
   };
+  if (passportId) {
+    extraParams.passportId = passportId;
+  }
+  if (action === 'invite') {
+    extraParams.inviteId = invitation.inviteId;
+  } else if (action === 'issue-passport') {
+    extraParams.id = invitation.inviteId;
+  }
   const onClose = useCallback(() => {
     connectApi.close();
   }, [connectApi]);
@@ -51,9 +59,9 @@ function InvitationReceive({
     }
     if (inService) {
       connectApi.openPopup({
-        action: 'invite',
+        action,
         className: 'connect',
-        forceConnected: false,
+        forceConnected: invitation?.receiver?.did || false,
         autoConnect: false,
         locale,
         extraParams: {
@@ -75,9 +83,9 @@ function InvitationReceive({
       });
     } else {
       connectApi.open({
-        action: 'invite',
+        action,
         className: 'connect',
-        forceConnected: false,
+        forceConnected: invitation?.receiver?.did || false,
         autoConnect: false,
         locale,
         extraParams,
@@ -113,12 +121,14 @@ InvitationReceive.propTypes = {
   invitation: PropTypes.object.isRequired,
   onLogin: PropTypes.func,
   onReceive: PropTypes.func,
-  inService: PropTypes.bool
+  inService: PropTypes.bool,
+  action: PropTypes.oneOf(['invite', 'issue-passport'])
 };
 InvitationReceive.defaultProps = {
   onLogin: () => {},
   onReceive: null,
-  inService: false
+  inService: false,
+  action: 'invite'
 };
 const Root = styled.div`
   text-align: center;

package/es/invitation/invitation-success.js

@@ -59,7 +59,7 @@ function InvitationSuccess({
 }
 InvitationSuccess.propTypes = {
   invitation: PropTypes.object.isRequired,
-  type: PropTypes.oneOf('inviter', 'receiver')
+  type: PropTypes.oneOf(['inviter', 'receiver'])
 };
 InvitationSuccess.defaultProps = {
   type: 'inviter'