@abtnode/ux 1.16.27-beta-d1555a79 → 1.16.27-beta-f109b207

package/lib/blocklet/component/add-component/add-component-core.js

@@ -2,10 +2,8 @@
 import PropTypes from 'prop-types';
 import { useEffect, useRef, useState } from 'react';
 import { useParams } from 'react-router-dom';
-import semver from 'semver';
 import { isInServerlessMode } from '@abtnode/util/lib/serverless';
 import Alert from '@arcblock/ux/lib/Alert';
-import { useTheme } from '@arcblock/ux/lib/Theme';
 import AnimationWaiter from '@arcblock/ux/lib/AnimationWaiter';
 import Button from '@arcblock/ux/lib/Button';
 import { useLocaleContext } from '@arcblock/ux/lib/Locale/context';
@@ -15,7 +13,6 @@ import ResultMessage from '@blocklet/launcher-layout/lib/launch-result-message';
 import PageHeader from '@blocklet/launcher-layout/lib/page-header';
 import styled from '@emotion/styled';
 import CheckIcon from '@mui/icons-material/Check';
-import UpgradeIcon from '@mui/icons-material/Upgrade';
 import AddIcon from '@mui/icons-material/Link';
 import Box from '@mui/material/Box';
 import Spinner from '@mui/material/CircularProgress';
@@ -106,9 +103,9 @@ export default function AddComponentCore({
   selectedMeta,
   showResourcesSwitch,
   showFromUrl,
-  enableRunBackground
+  enableRunBackground,
+  showCategory
 }) {
-  const theme = useTheme();
   const {
     t,
     locale
@@ -633,23 +630,6 @@ export default function AddComponentCore({
 
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [selectedMeta, activeStep]);
-  const getInstallOrUpgrade = item => {
-    const exist = (blocklet?.children || []).find(x => x.meta.bundleDid === item.did);
-    if (exist) {
-      try {
-        const currentVersion = exist.meta.version;
-        const targetVersion = item.version;
-        if (semver.gt(targetVersion, currentVersion)) {
-          return 'upgrade';
-        }
-      } catch {
-        // 如果比对版本报错，则还是允许安装
-        return 'install';
-      }
-      return 'disable';
-    }
-    return 'install';
-  };
   const steps = [{
     key: 'selectComponent',
     name: t('blocklet.component.selectComponent'),
@@ -728,6 +708,7 @@ export default function AddComponentCore({
         }) => {
           return /*#__PURE__*/_jsx(BlockletList, {
             showResourcesSwitch: showResourcesSwitch,
+            showCategory: showCategory,
             serverVersion: nodeInfo?.version,
             style: isMobile ? {
               // should remove other dom height/margin
@@ -752,36 +733,8 @@ export default function AddComponentCore({
               defaultRender
             }) => {
               const isChosen = params?.bundleDid && params?.bundleDid === blockletItem?.did;
-              const actionType = getInstallOrUpgrade(blockletItem);
-              if (actionType === 'disable') {
-                return /*#__PURE__*/_jsxs(StoreBlockletItemWrapper, {
-                  style: {
-                    cursor: 'not-allowed',
-                    backgroundColor: theme.palette.grey['100']
-                  },
-                  title: t('blocklet.component.installed'),
-                  children: [/*#__PURE__*/_jsx("div", {
-                    className: "install-container",
-                    children: /*#__PURE__*/_jsx(CheckIcon, {
-                      className: "install-icon"
-                    })
-                  }), /*#__PURE__*/_jsx("div", {
-                    className: "installed-blocklet",
-                    style: {
-                      marginLeft: 16,
-                      pointerEvents: 'none'
-                    },
-                    children: defaultRender
-                  })]
-                });
-              }
               return /*#__PURE__*/_jsxs(StoreBlockletItemWrapper, {
-                children: [actionType === 'upgrade' ? /*#__PURE__*/_jsx("div", {
-                  className: "upgrade-container",
-                  children: /*#__PURE__*/_jsx(UpgradeIcon, {
-                    className: "upgrade-icon"
-                  })
-                }) : null, isChosen && /*#__PURE__*/_jsx("div", {
+                children: [isChosen && /*#__PURE__*/_jsx("div", {
                   className: "check-container",
                   children: /*#__PURE__*/_jsx(CheckIcon, {
                     className: "check-icon"
@@ -1151,7 +1104,8 @@ AddComponentCore.propTypes = {
   selectedMeta: PropTypes.object,
   showResourcesSwitch: PropTypes.bool,
   showFromUrl: PropTypes.bool,
-  enableRunBackground: PropTypes.bool
+  enableRunBackground: PropTypes.bool,
+  showCategory: PropTypes.bool
 };
 AddComponentCore.defaultProps = {
   onClose: () => {},
@@ -1164,7 +1118,8 @@ AddComponentCore.defaultProps = {
   selectedMeta: null,
   showResourcesSwitch: true,
   showFromUrl: true,
-  enableRunBackground: true
+  enableRunBackground: true,
+  showCategory: true
 };
 const Wrapper = styled(Box)`
   .action-bar {
@@ -1230,63 +1185,6 @@ const StoreBlockletItemWrapper = styled.div`
       transition: all ease 0.2s;
     }
   }
-  .install-container {
-    position: absolute;
-    right: 0;
-    bottom: 0;
-    display: flex;
-    justify-content: flex-end;
-    align-items: flex-end;
-    width: 30px;
-    height: 30px;
-    border-radius: 0 0 8px 0;
-    color: ${props => props.theme.palette.common.white};
-    overflow: hidden;
-    transition: all ease 0.3s;
-    &:after {
-      position: absolute;
-      z-index: 0;
-      display: block;
-      width: 0;
-      height: 0;
-      border-top: transparent solid 15px;
-      border-left: transparent solid 15px;
-      border-bottom: ${props => props.theme.palette.grey['300']} solid 15px;
-      border-right: ${props => props.theme.palette.grey['300']} solid 15px;
-      transition: all ease 0.1s;
-      content: '';
-    }
-
-    .install-icon {
-      position: relative;
-      z-index: 2;
-      margin: 0 1px 1px 0;
-      font-size: 16px;
-      transition: all ease 0.2s;
-    }
-  }
-  .upgrade-container {
-    position: absolute;
-    right: 6px;
-    top: 0;
-    display: flex;
-    justify-content: flex-end;
-    align-items: flex-end;
-    width: 30px;
-    height: 30px;
-    border-radius: 0 0 8px 0;
-    color: ${props => props.theme.palette.primary.main};
-    overflow: hidden;
-    transition: all ease 0.3s;
-
-    .upgrade-icon {
-      position: relative;
-      z-index: 2;
-      margin: 0 1px 1px 0;
-      font-size: 24px;
-      transition: all ease 0.2s;
-    }
-  }
 `;
 const MessageDiv = styled.div`
   color: ${props => props.theme.palette.primary.main};

package/lib/blocklet/component/store-blocklet-list.js

@@ -8,13 +8,16 @@ import Link from '@mui/material/Link';
 import { ErrorFallback } from '@arcblock/ux/lib/ErrorBoundary';
 import { ErrorBoundary } from 'react-error-boundary';
 import InnerList from '@blocklet/list';
+import UpgradeIcon from '@mui/icons-material/Upgrade';
 import { useLocaleContext } from '@arcblock/ux/lib/Locale/context';
 import Blocklet, { ActionButton } from '@arcblock/ux/lib/Blocklet';
 import Spinner from '@mui/material/CircularProgress';
 import Button from '@arcblock/ux/lib/Button';
+import semver from 'semver';
 import { isFreeBlocklet } from '@blocklet/meta/lib/util';
 import Toast from '@arcblock/ux/lib/Toast';
 import { formatRegistryLogoPath } from '../../util';
+import { useBlockletContext } from '../../contexts/blocklet';
 import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
 const getStoreDetail = (meta, endpoint) => {
   return joinUrl(endpoint, `/blocklets/${meta.did}`);
@@ -55,7 +58,6 @@ function BlockletItem({
     }
     return true;
   };
-  const btnTxt = requirePurchase(blocklet) ? t('common.purchase') : t('blocklet.component.choose');
   const onAction = async e => {
     e.preventDefault();
     e.stopPropagation();
@@ -72,6 +74,40 @@ function BlockletItem({
       setLoading(false);
     }
   };
+  const {
+    blocklet: pageBlocklet
+  } = useBlockletContext();
+  const getCurrentVersion = () => {
+    const exist = (pageBlocklet?.children || []).find(x => x.meta.bundleDid === blocklet.did);
+    const currentVersion = exist.meta.version;
+    return currentVersion;
+  };
+  const getInstallOrUpgrade = () => {
+    const exist = (pageBlocklet?.children || []).find(x => x.meta.bundleDid === blocklet.did);
+    if (exist) {
+      try {
+        const currentVersion = exist.meta.version;
+        const targetVersion = blocklet.version;
+        if (semver.gt(targetVersion, currentVersion)) {
+          return 'upgrade';
+        }
+      } catch {
+        // 如果比对版本报错，则还是允许安装
+        return 'install';
+      }
+      return 'disable';
+    }
+    return 'install';
+  };
+  const actionType = getInstallOrUpgrade();
+  let btnTxt = t('blocklet.component.choose');
+  if (actionType === 'upgrade') {
+    btnTxt = t('blocklet.component.upgrade');
+  } else if (actionType === 'disable') {
+    btnTxt = t('blocklet.component.installed');
+  } else if (requirePurchase(blocklet)) {
+    btnTxt = t('common.purchase');
+  }
   return /*#__PURE__*/_jsx(Link, {
     href: getStoreDetail(blocklet, endpoint),
     style: {
@@ -100,21 +136,26 @@ function BlockletItem({
           alignItems: 'center'
         },
         children: /*#__PURE__*/_jsx(ActionButton, {
-          children: /*#__PURE__*/_jsx(Button, {
+          children: /*#__PURE__*/_jsxs(Button, {
             onClick: onAction,
             size: "small",
-            disabled: loading,
+            disabled: loading || actionType === 'disable',
             variant: "outlined",
             color: "primary",
             "data-cy": "install-blocklet",
-            children: loading ? /*#__PURE__*/_jsxs(_Fragment, {
+            title: actionType === 'upgrade' ? `${getCurrentVersion()} -> ${blocklet.version}` : '',
+            children: [loading ? /*#__PURE__*/_jsxs(_Fragment, {
               children: [/*#__PURE__*/_jsx(Spinner, {
                 size: 16,
                 style: {
                   marginRight: 3
                 }
               }), btnTxt]
-            }) : btnTxt
+            }) : btnTxt, actionType === 'upgrade' ? /*#__PURE__*/_jsx(UpgradeIcon, {
+              style: {
+                fontSize: '1.2rem'
+              }
+            }) : null]
           }, blocklet.did)
         })
       })
@@ -142,6 +183,7 @@ export default function BlockletList({
   resourceType,
   resourceDid,
   showResourcesSwitch,
+  showCategory,
   ...rest
 }) {
   const {
@@ -175,6 +217,7 @@ export default function BlockletList({
     children: /*#__PURE__*/_jsx("div", {
       ...rest,
       children: initialized && /*#__PURE__*/_jsx(InnerList, {
+        showCategory: showCategory,
         showResourcesSwitch: showResourcesSwitch,
         blockletRender: blockletRenderProps => {
           const defaultProps = {
@@ -211,7 +254,8 @@ BlockletList.propTypes = {
   serverVersion: PropTypes.string,
   resourceType: PropTypes.string,
   resourceDid: PropTypes.string,
-  showResourcesSwitch: PropTypes.bool
+  showResourcesSwitch: PropTypes.bool,
+  showCategory: PropTypes.bool
 };
 BlockletList.defaultProps = {
   handleButtonClick: null,
@@ -221,7 +265,8 @@ BlockletList.defaultProps = {
   serverVersion: '',
   resourceType: '',
   resourceDid: '',
-  showResourcesSwitch: true
+  showResourcesSwitch: true,
+  showCategory: true
 };
 const StyledBlocklet = styled(Blocklet)`
   .ms-highlight {

package/lib/locales/ar.js

@@ -613,7 +613,8 @@ export default {
       relatedComponents: 'النماذج المرتبطة',
       required: 'مطلوب',
       installed: 'مثبت',
-      installingTip: 'جاري تثبيت المكون، الرجاء الانتظار...'
+      installingTip: 'جاري تثبيت المكون، الرجاء الانتظار...',
+      upgrade: 'ترقية'
     },
     router: {
       urlPath: 'مسار عنوان URL',

package/lib/locales/de.js

@@ -613,7 +613,8 @@ export default {
       relatedComponents: 'Verwandte Blocklets',
       required: 'Erforderlich',
       installed: 'Installiert',
-      installingTip: 'Komponente wird installiert, bitte warten...'
+      installingTip: 'Komponente wird installiert, bitte warten...',
+      upgrade: 'Upgrade'
     },
     router: {
       urlPath: 'URL Pfad',

package/lib/locales/en.js

@@ -582,6 +582,7 @@ export default {
         requiredBy: 'The Blocklet is required by {name}'
       },
       choose: 'Choose',
+      upgrade: 'Upgrade',
       addWithName: 'Add Blocklet To {name}',
       relatedComponents: 'Related Blocklets',
       required: 'Required',

package/lib/locales/es.js

@@ -613,7 +613,8 @@ export default {
       relatedComponents: 'Bloques relacionados',
       required: 'Requerido',
       installed: 'Instalado',
-      installingTip: 'Instalando componente, por favor espere...'
+      installingTip: 'Instalando componente, por favor espere...',
+      upgrade: 'Mejorar'
     },
     router: {
       urlPath: 'URL Path',

package/lib/locales/fr.js

@@ -613,7 +613,8 @@ export default {
       relatedComponents: 'Blocklets associés',
       required: 'Obligatoire',
       installed: 'Installé',
-      installingTip: 'Installation du composant, veuillez patienter...'
+      installingTip: 'Installation du composant, veuillez patienter...',
+      upgrade: 'Mise à niveau'
     },
     router: {
       urlPath: "Chemin d'URL",

package/lib/locales/hi.js

@@ -613,7 +613,8 @@ export default {
       relatedComponents: 'संबंधित ब्लॉकलेट्स',
       required: 'आवश्यक',
       installed: 'स्थापित',
-      installingTip: 'घटक स्थापित हो रहा है, कृपया प्रतीक्षा करें...'
+      installingTip: 'घटक स्थापित हो रहा है, कृपया प्रतीक्षा करें...',
+      upgrade: 'अपग्रेड'
     },
     router: {
       urlPath: 'URL पथ',

package/lib/locales/id.js

@@ -613,7 +613,8 @@ export default {
       relatedComponents: 'Blocklet Terkait',
       required: 'Dibutuhkan',
       installed: 'Terpasang',
-      installingTip: 'Sedang menginstal komponen, harap tunggu...'
+      installingTip: 'Sedang menginstal komponen, harap tunggu...',
+      upgrade: 'Tingkatkan'
     },
     router: {
       urlPath: 'URL Path',

package/lib/locales/ja.js

@@ -613,7 +613,8 @@ export default {
       relatedComponents: '関連するブロック',
       required: '必要',
       installed: 'インストール',
-      installingTip: 'コンポーネントをインストールしています、お待ちください...'
+      installingTip: 'コンポーネントをインストールしています、お待ちください...',
+      upgrade: 'アップグレード'
     },
     router: {
       urlPath: 'URLパス',

package/lib/locales/ko.js

@@ -613,7 +613,8 @@ export default {
       relatedComponents: '관련된 블록',
       required: '필요한',
       installed: '설치됨',
-      installingTip: '컴포넌트를 설치하는 중입니다. 기다려 주세요...'
+      installingTip: '컴포넌트를 설치하는 중입니다. 기다려 주세요...',
+      upgrade: '업그레이드'
     },
     router: {
       urlPath: 'URL 경로',

package/lib/locales/pt.js

@@ -613,7 +613,8 @@ export default {
       relatedComponents: 'Blocos Relacionados',
       required: 'Obrigatório',
       installed: 'Instalado',
-      installingTip: 'A instalar o componente, aguarde...'
+      installingTip: 'A instalar o componente, aguarde...',
+      upgrade: 'Atualizar'
     },
     router: {
       urlPath: 'URL Path',

package/lib/locales/ru.js

@@ -613,7 +613,8 @@ export default {
       relatedComponents: 'Связанные блоклеты',
       required: 'Требуется',
       installed: 'Установлено',
-      installingTip: 'Устанавливается компонент, пожалуйста, подождите...'
+      installingTip: 'Устанавливается компонент, пожалуйста, подождите...',
+      upgrade: 'Обновление'
     },
     router: {
       urlPath: 'Путь URL',

package/lib/locales/th.js

@@ -613,7 +613,8 @@ export default {
       relatedComponents: 'บล็อกเล็ตที่เกี่ยวข้อง',
       required: 'ต้องการ',
       installed: 'ติดตั้ง',
-      installingTip: 'กำลังติดตั้งส่วนประกอบ โปรดรอสักครู่... '
+      installingTip: 'กำลังติดตั้งส่วนประกอบ โปรดรอสักครู่... ',
+      upgrade: 'อัพเกรด'
     },
     router: {
       urlPath: 'URL Path',

package/lib/locales/vi.js

@@ -613,7 +613,8 @@ export default {
       relatedComponents: 'Các khối liên quan',
       required: 'Cần thiết',
       installed: 'Đã cài đặt',
-      installingTip: 'Đang cài đặt thành phần, vui lòng chờ...'
+      installingTip: 'Đang cài đặt thành phần, vui lòng chờ...',
+      upgrade: 'Nâng cấp'
     },
     router: {
       urlPath: 'URL Path',

package/lib/locales/zh-tw.js

@@ -613,7 +613,8 @@ export default {
       relatedComponents: '相關區塊',
       required: '需要',
       installed: '已安裝',
-      installingTip: '安裝元件，請稍後...'
+      installingTip: '安裝元件，請稍後...',
+      upgrade: '升級'
     },
     router: {
       urlPath: 'URL路徑',

package/lib/locales/zh.js

@@ -591,6 +591,7 @@ export default {
         requiredBy: '{name} 需要该 Blocklet'
       },
       choose: '选择',
+      upgrade: '升级',
       addWithName: '将 Blocklet 添加到 {name}',
       installed: '已安装',
       installingTip: '正在安装 Blocklet 中, 请等待安装结束',

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@abtnode/ux",
-  "version": "1.16.27-beta-d1555a79",
+  "version": "1.16.27-beta-f109b207",
   "description": "UX components shared across abtnode packages",
   "publishConfig": {
     "access": "public"
@@ -26,23 +26,23 @@
   "author": "linchen <linchen1987@foxmail.com> (http://github.com/linchen1987)",
   "license": "Apache-2.0",
   "dependencies": {
-    "@abtnode/auth": "1.16.27-beta-d1555a79",
-    "@abtnode/constant": "1.16.27-beta-d1555a79",
-    "@abtnode/util": "1.16.27-beta-d1555a79",
+    "@abtnode/auth": "1.16.27-beta-f109b207",
+    "@abtnode/constant": "1.16.27-beta-f109b207",
+    "@abtnode/util": "1.16.27-beta-f109b207",
     "@ahooksjs/use-url-state": "^3.5.1",
     "@arcblock/did": "^1.18.121",
-    "@arcblock/did-connect": "^2.9.82",
+    "@arcblock/did-connect": "^2.9.85",
     "@arcblock/did-motif": "^1.1.13",
-    "@arcblock/icons": "^2.9.82",
-    "@arcblock/nft-display": "2.9.82",
-    "@arcblock/react-hooks": "^2.9.82",
-    "@arcblock/terminal": "^2.9.82",
-    "@arcblock/ux": "^2.9.82",
-    "@blocklet/constant": "1.16.27-beta-d1555a79",
+    "@arcblock/icons": "^2.9.85",
+    "@arcblock/nft-display": "2.9.85",
+    "@arcblock/react-hooks": "^2.9.85",
+    "@arcblock/terminal": "^2.9.85",
+    "@arcblock/ux": "^2.9.85",
+    "@blocklet/constant": "1.16.27-beta-f109b207",
     "@blocklet/launcher-layout": "2.3.19",
-    "@blocklet/list": "^0.12.97",
-    "@blocklet/meta": "1.16.27-beta-d1555a79",
-    "@blocklet/ui-react": "^2.9.82",
+    "@blocklet/list": "^0.12.99",
+    "@blocklet/meta": "1.16.27-beta-f109b207",
+    "@blocklet/ui-react": "^2.9.85",
     "@blocklet/uploader": "^0.1.6",
     "@emotion/react": "^11.10.4",
     "@emotion/styled": "^11.10.4",
@@ -107,5 +107,5 @@
     "jest": "^29.7.0",
     "jest-environment-jsdom": "^29.7.0"
   },
-  "gitHead": "10055507ae6190a13ee83e2f6446fd64523dd298"
+  "gitHead": "1c1ba090d312cb41894d7c4bb7f1a1067f84c39a"
 }