@abtnode/ux 1.16.17-beta-4f13d99d → 1.16.17-beta-5d4664f8

package/es/blocklet/component/add.js

@@ -1070,13 +1070,17 @@ export default function AddComponent({
             overflow: 'hidden',
             textOverflow: 'ellipsis',
             whiteSpace: 'nowrap',
+            minWidth: '140px',
             maxWidth: '280px',
-            display: 'inline-block'
+            textAlign: 'center'
           },
           children: /*#__PURE__*/_jsxs(Box, {
             display: "flex",
             alignItems: "center",
             children: [(typeof step.loading === 'boolean' ? step.loading : loading) && /*#__PURE__*/_jsx(Spinner, {
+              style: {
+                marginRight: 8
+              },
               size: 16
             }), step.confirm]
           })

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

@@ -16,8 +16,8 @@ import InputAdornment from '@mui/material/InputAdornment';
 import { useLocaleContext } from '@arcblock/ux/lib/Locale/context';
 import Button from '@arcblock/ux/lib/Button';
 import Toast from '@arcblock/ux/lib/Toast';
-import Tabs from '@arcblock/ux/lib/Tabs';
 import Empty from '@arcblock/ux/lib/Empty';
+import Tabs from '@arcblock/ux/lib/Tabs';
 import { PROJECT } from '@blocklet/constant';
 import { WELLKNOWN_SERVICE_PATH_PREFIX } from '@abtnode/constant';
 import BlockletBundleAvatar from '../bundle-avatar';
@@ -79,7 +79,6 @@ const addComponentTabs = ({
   const key = blocklet.meta.did;
   tabs.push({
     label: /*#__PURE__*/_jsxs(Box, {
-      ml: -4,
       display: "flex",
       alignItems: "center",
       justifyContent: "flex-start",
@@ -88,7 +87,7 @@ const addComponentTabs = ({
         blocklet: blocklet,
         ancestors: ancestors
       }), /*#__PURE__*/_jsx(Box, {
-        ml: "16px",
+        ml: "4px",
         className: "text",
         children: /*#__PURE__*/_jsx(Box, {
           children: blocklet.meta.title
@@ -129,7 +128,7 @@ export default function CreateRelease({
   const releaseId = inputReleaseId === 'create' ? '' : inputReleaseId;
   const mode = inputReleaseId === 'create' ? 'create' : 'edit';
   const tabs = [];
-  const resourceComponents = (blocklet?.children || []).filter(x => x.meta.capabilities.resourceExportPage);
+  const resourceComponents = (blocklet?.children || []).filter(x => x.meta.capabilities.resourceExportApi);
   resourceComponents.forEach(item => {
     addComponentTabs({
       tabs,
@@ -340,6 +339,7 @@ export default function CreateRelease({
             autoComplete: "off",
             variant: "outlined",
             fullWidth: true,
+            required: true,
             value: params.blockletTitle || '',
             onChange: e => {
               setParamsErrTip({
@@ -358,6 +358,7 @@ export default function CreateRelease({
               'data-cy': 'blocklet-description',
               readOnly
             },
+            required: true,
             autoComplete: "off",
             variant: "outlined",
             fullWidth: true,
@@ -420,6 +421,7 @@ export default function CreateRelease({
             flex: 1
           },
           children: [/*#__PURE__*/_jsx(TextField, {
+            required: true,
             label: `Blocklet ${t('common.version')}`,
             placeholder: `Blocklet ${t('common.version')}`,
             InputProps: {
@@ -455,6 +457,7 @@ export default function CreateRelease({
             fullWidth: true,
             multiline: true,
             minRows: 4,
+            required: true,
             value: params.note,
             onChange: e => {
               setParamsErrTip({
@@ -608,27 +611,27 @@ export default function CreateRelease({
         display: "flex",
         mt: 3,
         className: "section full-width",
-        children: [/*#__PURE__*/_jsxs(Box, {
+        children: [/*#__PURE__*/_jsx(Box, {
           className: "left",
-          children: [/*#__PURE__*/_jsx(Typography, {
+          children: /*#__PURE__*/_jsx(Typography, {
             variant: "h3",
             children: t('blocklet.publish.resourceTitle')
-          }), /*#__PURE__*/_jsx(Tabs, {
+          })
+        }), /*#__PURE__*/_jsxs(Box, {
+          sx: {
+            flex: 1
+          },
+          children: [/*#__PURE__*/_jsx(Tabs, {
             tabs: tabs,
             current: tab,
-            orientation: "vertical",
             onChange: onTabChange,
             sx: {
-              width: '100%'
+              ml: -2,
+              mt: -1.5
             }
-          })]
-        }), /*#__PURE__*/_jsx(Box, {
-          sx: {
-            flex: 1
-          },
-          children: /*#__PURE__*/_jsx(Box, {
+          }), /*#__PURE__*/_jsx(Box, {
             children: resourceContent
-          })
+          })]
         })]
       })]
     })]
@@ -694,20 +697,6 @@ const Main = styled.div`
       flex-shrink: 0;
       width: 140px;
     }
-    .MuiTabs-root {
-      margin-top: 8px;
-      transform: translateX(-16px);
-      .MuiButtonBase-root .text {
-        color: ${({
-  theme
-}) => theme.palette.text.primary};
-      }
-      .MuiButtonBase-root.Mui-selected .text {
-        color: ${({
-  theme
-}) => theme.palette.primary.main};
-      }
-    }
     .MuiTabs-indicator {
       display: none;
     }

package/es/blocklet/publish/resource.js

@@ -1,12 +1,35 @@
-/* eslint-disable no-unused-vars */
-/* eslint-disable react/no-unstable-nested-components */
-import { useState, useRef, useEffect } from 'react';
+import { useState, useEffect, useMemo } from 'react';
 import PropTypes from 'prop-types';
 import styled from '@emotion/styled';
-import Box from '@mui/material/Box';
+import difference from 'lodash/difference';
 import joinUrl from 'url-join';
+import Box from '@mui/material/Box';
 import { useLocaleContext } from '@arcblock/ux/lib/Locale/context';
+import Button from '@arcblock/ux/lib/Button';
+import Toast from '@arcblock/ux/lib/Toast';
+import Tree from './tree';
+import { useNodeContext } from '../../contexts/node';
+import { axios } from '../../util/api';
 import { jsx as _jsx } from "react/jsx-runtime";
+import { jsxs as _jsxs } from "react/jsx-runtime";
+const fillParent = (nodes, parentId) => {
+  nodes.forEach(node => {
+    if (parentId) {
+      node.parent = parentId;
+    }
+    (node.children || []).forEach(child => {
+      child.parent = node.id;
+      fillParent(child.children || [], child.id);
+    });
+  });
+  return nodes;
+};
+const checkDiff = (a, b) => {
+  if (a.length !== b.length) {
+    return true;
+  }
+  return !!difference(a, b || []).length;
+};
 export default function Resource({
   app,
   component,
@@ -17,20 +40,81 @@ export default function Resource({
     t,
     locale
   } = useLocaleContext();
-  const iframeRef = useRef(null);
+  const {
+    api
+  } = useNodeContext();
+  const [resources, setResources] = useState([]);
+  const [selectedResourceIds, setSelectedResourceIds] = useState([]);
+  const [savedResourceIds, setSavedResourceIds] = useState([]);
+  const [loading, setLoading] = useState(false);
   const releaseId = release.id;
   const readonly = release.status === 'published';
   const {
-    resourceExportPage = '/'
+    resourceExportApi = '/'
   } = component?.meta.capabilities || {};
-  const url = new URL(joinUrl('http://127.0.0.1', component.mountPoint, resourceExportPage).replace(/\/+/g, '/'));
-  url.searchParams.set('projectId', projectId);
-  url.searchParams.set('releaseId', releaseId);
-  url.searchParams.set('local', locale);
-  if (readonly) {
-    url.searchParams.set('readonly', '1');
-  }
-  const src = `${url.pathname}${url.search}`;
+  const hasDiff = useMemo(() => checkDiff(savedResourceIds, selectedResourceIds), [savedResourceIds, selectedResourceIds]);
+  const urlObj = new URL(joinUrl('http://127.0.0.1', component.mountPoint, resourceExportApi || '/').replace(/\/+/g, '/'));
+  urlObj.searchParams.set('projectId', projectId);
+  urlObj.searchParams.set('releaseId', releaseId);
+  urlObj.searchParams.set('local', locale);
+  const url = `${urlObj.pathname}${urlObj.search}`;
+  const saveSelected = async data => {
+    try {
+      await api.updateSelectedResources({
+        input: {
+          did: app.meta.did,
+          projectId,
+          releaseId,
+          componentDid: component.meta.did,
+          resources: data
+        }
+      });
+      setSavedResourceIds(data);
+    } catch (err) {
+      Toast.error(err.message);
+    }
+  };
+  const onSave = async () => {
+    const params = selectedResourceIds;
+    try {
+      setLoading(true);
+      await axios.post(url, {
+        resources: params,
+        projectId,
+        releaseId,
+        locale
+      });
+      Toast.success(t('common.saveSuccess'));
+      setLoading(false);
+      saveSelected(selectedResourceIds);
+    } catch (err) {
+      setLoading(false);
+      Toast.error(err.message);
+    }
+  };
+  useEffect(() => {
+    axios.get(url).then(res => {
+      const tree = fillParent(res.data?.resources || []);
+      setResources(tree);
+    }).catch(err => {
+      Toast.error(err.message);
+    });
+    api.getSelectedResources({
+      input: {
+        did: app.meta.did,
+        projectId,
+        releaseId,
+        componentDid: component.meta.did
+      }
+    }).then(res => {
+      const list = res?.resources || [];
+      setSelectedResourceIds(list);
+      setSavedResourceIds(list);
+    }).catch(err => {
+      Toast.error(err.message);
+    });
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [url]);
   if (component.status !== 'running') {
     return /*#__PURE__*/_jsx(Container, {
       children: /*#__PURE__*/_jsx(Box, {
@@ -42,12 +126,23 @@ export default function Resource({
     });
   }
   return /*#__PURE__*/_jsx(Container, {
-    children: /*#__PURE__*/_jsx("iframe", {
-      ref: iframeRef,
-      title: component.meta.title,
-      src: src,
-      width: "100%",
-      height: "600px"
+    children: /*#__PURE__*/_jsxs(Box, {
+      children: [/*#__PURE__*/_jsx(Tree, {
+        data: resources,
+        value: selectedResourceIds,
+        onChange: data => {
+          setSelectedResourceIds(data);
+        },
+        disabled: loading || readonly
+      }), !readonly && /*#__PURE__*/_jsx(Box, {
+        className: "footer",
+        children: /*#__PURE__*/_jsx(Button, {
+          variant: "contained",
+          disabled: loading || !hasDiff,
+          onClick: () => onSave(),
+          children: t('common.save')
+        })
+      })]
     })
   });
 }
@@ -66,7 +161,19 @@ Resource.defaultProps = {
   }
 };
 const Container = styled(Box)`
-  iframe {
-    border: none;
+  border: 1px solid #ccc;
+  border-radius: 4px;
+  padding: 16px;
+  padding-bottom: 0px;
+  max-height: 600px;
+  overflow-y: auto;
+  .footer {
+    border-top: 1px solid #ddd;
+    display: flex;
+    padding: 12px 0;
+    margin-top: 12px;
+    position: sticky;
+    bottom: 0;
+    background: #fff;
   }
 `;

package/es/blocklet/publish/tree.js

@@ -0,0 +1,235 @@
+import PropTypes from 'prop-types';
+import styled from '@emotion/styled';
+import classnames from 'classnames';
+import isUrl from 'is-url';
+import Box from '@mui/material/Box';
+import FormControlLabel from '@mui/material/FormControlLabel';
+import TreeView from '@mui/lab/TreeView';
+import TreeItem from '@mui/lab/TreeItem';
+import Checkbox from '@mui/material/Checkbox';
+import ExpandMoreIcon from '@mui/icons-material/ExpandMore';
+import ChevronRightIcon from '@mui/icons-material/ChevronRight';
+import OpenInNewIcon from '@mui/icons-material/OpenInNew';
+import { Icon } from '@iconify/react';
+
+// BFS algorithm to find node by his ID
+import { jsx as _jsx } from "react/jsx-runtime";
+import { jsxs as _jsxs } from "react/jsx-runtime";
+const bfsSearch = (graph, targetId) => {
+  const queue = [...graph];
+  while (queue.length > 0) {
+    const currNode = queue.shift();
+    if (currNode.id === targetId) {
+      return currNode;
+    }
+    if (currNode.children) {
+      queue.push(...currNode.children);
+    }
+  }
+  return []; // Target node not found
+};
+
+function ResourceIcon({
+  icon
+}) {
+  if (!icon) {
+    return null;
+  }
+  if (isUrl(icon)) {
+    return /*#__PURE__*/_jsx("img", {
+      className: "resource-icon",
+      src: icon,
+      alt: "icon"
+    });
+  }
+  return /*#__PURE__*/_jsx(Icon, {
+    className: "resource-icon",
+    icon: icon
+  });
+}
+ResourceIcon.propTypes = {
+  icon: PropTypes.string
+};
+ResourceIcon.defaultProps = {
+  icon: ''
+};
+export default function Tree({
+  disabled,
+  data,
+  onChange,
+  value
+}) {
+  const selectedNodes = value;
+
+  // Retrieve all ids from node to his children's
+  function getAllIds(node, idList = []) {
+    idList.push(node.id);
+    if (node.children) {
+      node.children.forEach(child => getAllIds(child, idList));
+    }
+    return idList;
+  }
+  // Get IDs of all children from specific node
+  const getAllChild = id => {
+    return getAllIds(bfsSearch(data, id));
+  };
+
+  // Get all father IDs from specific node
+  const getAllFathers = (id, list = []) => {
+    const node = bfsSearch(data, id);
+    if (node.parent) {
+      list.push(node.parent);
+      return getAllFathers(node.parent, list);
+    }
+    return list;
+  };
+  function isAllChildrenChecked(node, list) {
+    const allChild = getAllChild(node.id);
+    const nodeIdIndex = allChild.indexOf(node.id);
+    allChild.splice(nodeIdIndex, 1);
+    return allChild.every(nodeId => selectedNodes.concat(list).includes(nodeId));
+  }
+  const handleNodeSelect = (event, nodeId) => {
+    event.stopPropagation();
+    const allChild = getAllChild(nodeId);
+    const fathers = getAllFathers(nodeId);
+    if (selectedNodes.includes(nodeId)) {
+      // Need to de-check
+      const newValue = selectedNodes.filter(id => !allChild.concat(fathers).includes(id));
+      onChange(newValue);
+    } else {
+      // Need to check
+      const ToBeChecked = allChild;
+      for (let i = 0; i < fathers.length; ++i) {
+        if (isAllChildrenChecked(bfsSearch(data, fathers[i]), ToBeChecked)) {
+          ToBeChecked.push(fathers[i]);
+        }
+      }
+      onChange([...selectedNodes].concat(ToBeChecked));
+    }
+  };
+  const stopExpand = event => {
+    // prevent the click event from propagating to the checkbox
+    event.stopPropagation();
+  };
+  const hadChildren = data.some(node => node.children?.length > 0);
+  const renderTree = node => /*#__PURE__*/_jsx(TreeItem, {
+    nodeId: node.id,
+    label: /*#__PURE__*/_jsx(FormControlLabel, {
+      onClick: stopExpand,
+      control: /*#__PURE__*/_jsx(Checkbox, {
+        size: "small",
+        checked: selectedNodes.indexOf(node.id) !== -1,
+        tabIndex: -1,
+        disableRipple: true,
+        onClick: event => handleNodeSelect(event, node.id),
+        disabled: disabled
+      }),
+      label: /*#__PURE__*/_jsxs(Box, {
+        className: "content",
+        children: [/*#__PURE__*/_jsxs(Box, {
+          display: "flex",
+          alignItems: "center",
+          children: [node.icon && /*#__PURE__*/_jsx(ResourceIcon, {
+            icon: node.icon
+          }), /*#__PURE__*/_jsx(Box, {
+            className: "name",
+            children: node.name
+          }), node.url && /*#__PURE__*/_jsx("a", {
+            href: node.url,
+            target: "_blank",
+            rel: "noreferrer",
+            className: "link",
+            children: /*#__PURE__*/_jsx(OpenInNewIcon, {
+              className: "link-icon"
+            })
+          })]
+        }), !!node.description && /*#__PURE__*/_jsx(Box, {
+          className: "description",
+          children: node.description
+        })]
+      })
+    }),
+    children: Array.isArray(node.children) ? node.children.map(renderTree) : null
+  }, node.id);
+  return /*#__PURE__*/_jsx(StyledTreeView, {
+    className: classnames(!hadChildren && 'no-children'),
+    multiSelect: true,
+    defaultCollapseIcon: /*#__PURE__*/_jsx(ExpandMoreIcon, {}),
+    defaultExpandIcon: /*#__PURE__*/_jsx(ChevronRightIcon, {}),
+    selected: selectedNodes,
+    children: data.map(node => renderTree(node))
+  });
+}
+Tree.propTypes = {
+  data: PropTypes.array,
+  value: PropTypes.array,
+  onChange: PropTypes.func,
+  disabled: PropTypes.bool
+};
+Tree.defaultProps = {
+  data: [],
+  value: [],
+  onChange: () => {},
+  disabled: false
+};
+const StyledTreeView = styled(TreeView)`
+  &.no-children {
+    .MuiTreeItem-content {
+      padding: 0;
+      .MuiTreeItem-iconContainer {
+        display: none;
+      }
+      .MuiTreeItem-label {
+        padding-left: 0;
+      }
+    }
+  }
+  .MuiTreeItem-content {
+    align-items: flex-start;
+    .MuiTreeItem-iconContainer {
+      transform: translateY(10px);
+    }
+    &.Mui-selected {
+      background-color: transparent;
+    }
+  }
+  .MuiTreeItem-label {
+    cursor: default;
+  }
+  .MuiFormControlLabel-root {
+    align-items: flex-start;
+  }
+  .content {
+    padding-top: 6px;
+  }
+  .name {
+    font-size: 16px;
+    font-weight: 700;
+  }
+  .resource-icon {
+    margin-right: 2px;
+    font-size: 16px;
+  }
+  img.resource-icon {
+    width: 1rem;
+    height: 1rem;
+  }
+  .link {
+    margin-left: 8px;
+    font-size: 16px;
+    color: ${({
+  theme
+}) => theme.palette.primary.main};
+    display: flex;
+  }
+  .link-icon {
+    font-size: inherit;
+  }
+  .description {
+    font-size: 14px;
+    color: ${({
+  theme
+}) => theme.palette.text.secondary};
+  }
+`;

package/lib/blocklet/component/add.js

@@ -1078,13 +1078,17 @@ function AddComponent(_ref2) {
             overflow: 'hidden',
             textOverflow: 'ellipsis',
             whiteSpace: 'nowrap',
+            minWidth: '140px',
             maxWidth: '280px',
-            display: 'inline-block'
+            textAlign: 'center'
           },
           children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_Box.default, {
             display: "flex",
             alignItems: "center",
             children: [(typeof step.loading === 'boolean' ? step.loading : loading) && /*#__PURE__*/(0, _jsxRuntime.jsx)(_CircularProgress.default, {
+              style: {
+                marginRight: 8
+              },
               size: 16
             }), step.confirm]
           })

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

@@ -22,8 +22,8 @@ var _InputAdornment = _interopRequireDefault(require("@mui/material/InputAdornme
 var _context = require("@arcblock/ux/lib/Locale/context");
 var _Button = _interopRequireDefault(require("@arcblock/ux/lib/Button"));
 var _Toast = _interopRequireDefault(require("@arcblock/ux/lib/Toast"));
-var _Tabs = _interopRequireDefault(require("@arcblock/ux/lib/Tabs"));
 var _Empty = _interopRequireDefault(require("@arcblock/ux/lib/Empty"));
+var _Tabs = _interopRequireDefault(require("@arcblock/ux/lib/Tabs"));
 var _constant = require("@blocklet/constant");
 var _constant2 = require("@abtnode/constant");
 var _bundleAvatar = _interopRequireDefault(require("../bundle-avatar"));
@@ -95,7 +95,6 @@ const addComponentTabs = _ref => {
   const key = blocklet.meta.did;
   tabs.push({
     label: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_Box.default, {
-      ml: -4,
       display: "flex",
       alignItems: "center",
       justifyContent: "flex-start",
@@ -104,7 +103,7 @@ const addComponentTabs = _ref => {
         blocklet: blocklet,
         ancestors: ancestors
       }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_Box.default, {
-        ml: "16px",
+        ml: "4px",
         className: "text",
         children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Box.default, {
           children: blocklet.meta.title
@@ -145,7 +144,7 @@ function CreateRelease(_ref2) {
   const releaseId = inputReleaseId === 'create' ? '' : inputReleaseId;
   const mode = inputReleaseId === 'create' ? 'create' : 'edit';
   const tabs = [];
-  const resourceComponents = ((blocklet === null || blocklet === void 0 ? void 0 : blocklet.children) || []).filter(x => x.meta.capabilities.resourceExportPage);
+  const resourceComponents = ((blocklet === null || blocklet === void 0 ? void 0 : blocklet.children) || []).filter(x => x.meta.capabilities.resourceExportApi);
   resourceComponents.forEach(item => {
     addComponentTabs({
       tabs,
@@ -350,6 +349,7 @@ function CreateRelease(_ref2) {
             autoComplete: "off",
             variant: "outlined",
             fullWidth: true,
+            required: true,
             value: params.blockletTitle || '',
             onChange: e => {
               setParamsErrTip({
@@ -368,6 +368,7 @@ function CreateRelease(_ref2) {
               'data-cy': 'blocklet-description',
               readOnly
             },
+            required: true,
             autoComplete: "off",
             variant: "outlined",
             fullWidth: true,
@@ -430,6 +431,7 @@ function CreateRelease(_ref2) {
             flex: 1
           },
           children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_TextField.default, {
+            required: true,
             label: "Blocklet ".concat(t('common.version')),
             placeholder: "Blocklet ".concat(t('common.version')),
             InputProps: {
@@ -465,6 +467,7 @@ function CreateRelease(_ref2) {
             fullWidth: true,
             multiline: true,
             minRows: 4,
+            required: true,
             value: params.note,
             onChange: e => {
               setParamsErrTip({
@@ -619,27 +622,27 @@ function CreateRelease(_ref2) {
         display: "flex",
         mt: 3,
         className: "section full-width",
-        children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(_Box.default, {
+        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_Box.default, {
           className: "left",
-          children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_Typography.default, {
+          children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Typography.default, {
             variant: "h3",
             children: t('blocklet.publish.resourceTitle')
-          }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_Tabs.default, {
+          })
+        }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_Box.default, {
+          sx: {
+            flex: 1
+          },
+          children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_Tabs.default, {
             tabs: tabs,
             current: tab,
-            orientation: "vertical",
             onChange: onTabChange,
             sx: {
-              width: '100%'
+              ml: -2,
+              mt: -1.5
             }
-          })]
-        }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_Box.default, {
-          sx: {
-            flex: 1
-          },
-          children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Box.default, {
+          }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_Box.default, {
             children: resourceContent
-          })
+          })]
         })]
       })]
     })]
@@ -647,7 +650,7 @@ function CreateRelease(_ref2) {
 }
 CreateRelease.propTypes = {};
 CreateRelease.defaultProps = {};
-const Main = _styled.default.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  .sticky-header {\n    margin-top: -12px;\n    padding: 12px 0;\n    position: sticky;\n    top: 0;\n    z-index: 99;\n    display: flex;\n    align-items: center;\n    justify-content: space-between;\n    background-color: #fff;\n    padding-bottom: 12px;\n    border-bottom: ", ";\n  }\n  .screenshot {\n    margin-bottom: 16px;\n    max-width: 200px;\n    max-height: 140px;\n    width: 200px;\n    height: 140px;\n    overflow: hidden;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    background-color: #eee;\n    margin-right: 16px;\n    position: relative;\n    .action {\n      visibility: hidden;\n      position: absolute;\n      top: 0px;\n      right: 0px;\n      background-color: rgba(0, 0, 0, 0.2);\n      color: rgba(255, 255, 255, 0.8);\n    }\n    &:hover .action {\n      visibility: visible;\n    }\n  }\n  .screenshot img {\n    width: 100%; /* \u56FE\u50CF\u5BBD\u5EA6\u586B\u5145\u5BB9\u5668 */\n    height: auto; /* \u56FE\u50CF\u9AD8\u5EA6\u81EA\u9002\u5E94 */\n  }\n  .section {\n    max-width: 800px;\n    &.full-width {\n      max-width: 100%;\n    }\n    .MuiTypography-h3 {\n      font-size: 1.1rem;\n      font-weight: 700;\n    }\n    .left {\n      flex-shrink: 0;\n      width: 140px;\n    }\n    .MuiTabs-root {\n      margin-top: 8px;\n      transform: translateX(-16px);\n      .MuiButtonBase-root .text {\n        color: ", ";\n      }\n      .MuiButtonBase-root.Mui-selected .text {\n        color: ", ";\n      }\n    }\n    .MuiTabs-indicator {\n      display: none;\n    }\n    .MuiTypography-subtitle1 {\n      width: 120px;\n      font-weight: 700;\n      font-size: 1rem;\n      ", " {\n        width: 80px;\n      }\n    }\n  }\n  .MuiButtonBase-root {\n    a {\n      color: inherit;\n    }\n  }\n  .MuiInputBase-multiline .MuiInputAdornment-positionEnd {\n    align-self: flex-end;\n    .MuiTypography-root {\n      font-size: 0.8rem;\n    }\n    font-size: 0.8rem;\n  }\n"])), _ref3 => {
+const Main = _styled.default.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  .sticky-header {\n    margin-top: -12px;\n    padding: 12px 0;\n    position: sticky;\n    top: 0;\n    z-index: 99;\n    display: flex;\n    align-items: center;\n    justify-content: space-between;\n    background-color: #fff;\n    padding-bottom: 12px;\n    border-bottom: ", ";\n  }\n  .screenshot {\n    margin-bottom: 16px;\n    max-width: 200px;\n    max-height: 140px;\n    width: 200px;\n    height: 140px;\n    overflow: hidden;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    background-color: #eee;\n    margin-right: 16px;\n    position: relative;\n    .action {\n      visibility: hidden;\n      position: absolute;\n      top: 0px;\n      right: 0px;\n      background-color: rgba(0, 0, 0, 0.2);\n      color: rgba(255, 255, 255, 0.8);\n    }\n    &:hover .action {\n      visibility: visible;\n    }\n  }\n  .screenshot img {\n    width: 100%; /* \u56FE\u50CF\u5BBD\u5EA6\u586B\u5145\u5BB9\u5668 */\n    height: auto; /* \u56FE\u50CF\u9AD8\u5EA6\u81EA\u9002\u5E94 */\n  }\n  .section {\n    max-width: 800px;\n    &.full-width {\n      max-width: 100%;\n    }\n    .MuiTypography-h3 {\n      font-size: 1.1rem;\n      font-weight: 700;\n    }\n    .left {\n      flex-shrink: 0;\n      width: 140px;\n    }\n    .MuiTabs-indicator {\n      display: none;\n    }\n    .MuiTypography-subtitle1 {\n      width: 120px;\n      font-weight: 700;\n      font-size: 1rem;\n      ", " {\n        width: 80px;\n      }\n    }\n  }\n  .MuiButtonBase-root {\n    a {\n      color: inherit;\n    }\n  }\n  .MuiInputBase-multiline .MuiInputAdornment-positionEnd {\n    align-self: flex-end;\n    .MuiTypography-root {\n      font-size: 0.8rem;\n    }\n    font-size: 0.8rem;\n  }\n"])), _ref3 => {
   let {
     theme
   } = _ref3;
@@ -656,15 +659,5 @@ const Main = _styled.default.div(_templateObject || (_templateObject = _taggedTe
   let {
     theme
   } = _ref4;
-  return theme.palette.text.primary;
-}, _ref5 => {
-  let {
-    theme
-  } = _ref5;
-  return theme.palette.primary.main;
-}, _ref6 => {
-  let {
-    theme
-  } = _ref6;
   return theme.breakpoints.down('sm');
 });

package/lib/blocklet/publish/resource.js

@@ -7,15 +7,37 @@ exports.default = Resource;
 var _react = require("react");
 var _propTypes = _interopRequireDefault(require("prop-types"));
 var _styled = _interopRequireDefault(require("@emotion/styled"));
-var _Box = _interopRequireDefault(require("@mui/material/Box"));
+var _difference = _interopRequireDefault(require("lodash/difference"));
 var _urlJoin = _interopRequireDefault(require("url-join"));
+var _Box = _interopRequireDefault(require("@mui/material/Box"));
 var _context = require("@arcblock/ux/lib/Locale/context");
+var _Button = _interopRequireDefault(require("@arcblock/ux/lib/Button"));
+var _Toast = _interopRequireDefault(require("@arcblock/ux/lib/Toast"));
+var _tree = _interopRequireDefault(require("./tree"));
+var _node = require("../../contexts/node");
+var _api = require("../../util/api");
 var _jsxRuntime = require("react/jsx-runtime");
 var _templateObject;
-/* eslint-disable no-unused-vars */
-/* eslint-disable react/no-unstable-nested-components */
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 function _taggedTemplateLiteral(strings, raw) { if (!raw) { raw = strings.slice(0); } return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); }
+const fillParent = (nodes, parentId) => {
+  nodes.forEach(node => {
+    if (parentId) {
+      node.parent = parentId;
+    }
+    (node.children || []).forEach(child => {
+      child.parent = node.id;
+      fillParent(child.children || [], child.id);
+    });
+  });
+  return nodes;
+};
+const checkDiff = (a, b) => {
+  if (a.length !== b.length) {
+    return true;
+  }
+  return !!(0, _difference.default)(a, b || []).length;
+};
 function Resource(_ref) {
   let {
     app,
@@ -27,20 +49,82 @@ function Resource(_ref) {
     t,
     locale
   } = (0, _context.useLocaleContext)();
-  const iframeRef = (0, _react.useRef)(null);
+  const {
+    api
+  } = (0, _node.useNodeContext)();
+  const [resources, setResources] = (0, _react.useState)([]);
+  const [selectedResourceIds, setSelectedResourceIds] = (0, _react.useState)([]);
+  const [savedResourceIds, setSavedResourceIds] = (0, _react.useState)([]);
+  const [loading, setLoading] = (0, _react.useState)(false);
   const releaseId = release.id;
   const readonly = release.status === 'published';
   const {
-    resourceExportPage = '/'
+    resourceExportApi = '/'
   } = (component === null || component === void 0 ? void 0 : component.meta.capabilities) || {};
-  const url = new URL((0, _urlJoin.default)('http://127.0.0.1', component.mountPoint, resourceExportPage).replace(/\/+/g, '/'));
-  url.searchParams.set('projectId', projectId);
-  url.searchParams.set('releaseId', releaseId);
-  url.searchParams.set('local', locale);
-  if (readonly) {
-    url.searchParams.set('readonly', '1');
-  }
-  const src = "".concat(url.pathname).concat(url.search);
+  const hasDiff = (0, _react.useMemo)(() => checkDiff(savedResourceIds, selectedResourceIds), [savedResourceIds, selectedResourceIds]);
+  const urlObj = new URL((0, _urlJoin.default)('http://127.0.0.1', component.mountPoint, resourceExportApi || '/').replace(/\/+/g, '/'));
+  urlObj.searchParams.set('projectId', projectId);
+  urlObj.searchParams.set('releaseId', releaseId);
+  urlObj.searchParams.set('local', locale);
+  const url = "".concat(urlObj.pathname).concat(urlObj.search);
+  const saveSelected = async data => {
+    try {
+      await api.updateSelectedResources({
+        input: {
+          did: app.meta.did,
+          projectId,
+          releaseId,
+          componentDid: component.meta.did,
+          resources: data
+        }
+      });
+      setSavedResourceIds(data);
+    } catch (err) {
+      _Toast.default.error(err.message);
+    }
+  };
+  const onSave = async () => {
+    const params = selectedResourceIds;
+    try {
+      setLoading(true);
+      await _api.axios.post(url, {
+        resources: params,
+        projectId,
+        releaseId,
+        locale
+      });
+      _Toast.default.success(t('common.saveSuccess'));
+      setLoading(false);
+      saveSelected(selectedResourceIds);
+    } catch (err) {
+      setLoading(false);
+      _Toast.default.error(err.message);
+    }
+  };
+  (0, _react.useEffect)(() => {
+    _api.axios.get(url).then(res => {
+      var _res$data;
+      const tree = fillParent(((_res$data = res.data) === null || _res$data === void 0 ? void 0 : _res$data.resources) || []);
+      setResources(tree);
+    }).catch(err => {
+      _Toast.default.error(err.message);
+    });
+    api.getSelectedResources({
+      input: {
+        did: app.meta.did,
+        projectId,
+        releaseId,
+        componentDid: component.meta.did
+      }
+    }).then(res => {
+      const list = (res === null || res === void 0 ? void 0 : res.resources) || [];
+      setSelectedResourceIds(list);
+      setSavedResourceIds(list);
+    }).catch(err => {
+      _Toast.default.error(err.message);
+    });
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [url]);
   if (component.status !== 'running') {
     return /*#__PURE__*/(0, _jsxRuntime.jsx)(Container, {
       children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Box.default, {
@@ -52,12 +136,23 @@ function Resource(_ref) {
     });
   }
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(Container, {
-    children: /*#__PURE__*/(0, _jsxRuntime.jsx)("iframe", {
-      ref: iframeRef,
-      title: component.meta.title,
-      src: src,
-      width: "100%",
-      height: "600px"
+    children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_Box.default, {
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_tree.default, {
+        data: resources,
+        value: selectedResourceIds,
+        onChange: data => {
+          setSelectedResourceIds(data);
+        },
+        disabled: loading || readonly
+      }), !readonly && /*#__PURE__*/(0, _jsxRuntime.jsx)(_Box.default, {
+        className: "footer",
+        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Button.default, {
+          variant: "contained",
+          disabled: loading || !hasDiff,
+          onClick: () => onSave(),
+          children: t('common.save')
+        })
+      })]
     })
   });
 }
@@ -75,4 +170,4 @@ Resource.defaultProps = {
     id: ''
   }
 };
-const Container = (0, _styled.default)(_Box.default)(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  iframe {\n    border: none;\n  }\n"])));
+const Container = (0, _styled.default)(_Box.default)(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  border: 1px solid #ccc;\n  border-radius: 4px;\n  padding: 16px;\n  padding-bottom: 0px;\n  max-height: 600px;\n  overflow-y: auto;\n  .footer {\n    border-top: 1px solid #ddd;\n    display: flex;\n    padding: 12px 0;\n    margin-top: 12px;\n    position: sticky;\n    bottom: 0;\n    background: #fff;\n  }\n"])));

package/lib/blocklet/publish/tree.js

@@ -0,0 +1,199 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = Tree;
+var _propTypes = _interopRequireDefault(require("prop-types"));
+var _styled = _interopRequireDefault(require("@emotion/styled"));
+var _classnames = _interopRequireDefault(require("classnames"));
+var _isUrl = _interopRequireDefault(require("is-url"));
+var _Box = _interopRequireDefault(require("@mui/material/Box"));
+var _FormControlLabel = _interopRequireDefault(require("@mui/material/FormControlLabel"));
+var _TreeView = _interopRequireDefault(require("@mui/lab/TreeView"));
+var _TreeItem = _interopRequireDefault(require("@mui/lab/TreeItem"));
+var _Checkbox = _interopRequireDefault(require("@mui/material/Checkbox"));
+var _ExpandMore = _interopRequireDefault(require("@mui/icons-material/ExpandMore"));
+var _ChevronRight = _interopRequireDefault(require("@mui/icons-material/ChevronRight"));
+var _OpenInNew = _interopRequireDefault(require("@mui/icons-material/OpenInNew"));
+var _react = require("@iconify/react");
+var _jsxRuntime = require("react/jsx-runtime");
+var _templateObject; // BFS algorithm to find node by his ID
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+function _taggedTemplateLiteral(strings, raw) { if (!raw) { raw = strings.slice(0); } return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); }
+const bfsSearch = (graph, targetId) => {
+  const queue = [...graph];
+  while (queue.length > 0) {
+    const currNode = queue.shift();
+    if (currNode.id === targetId) {
+      return currNode;
+    }
+    if (currNode.children) {
+      queue.push(...currNode.children);
+    }
+  }
+  return []; // Target node not found
+};
+
+function ResourceIcon(_ref) {
+  let {
+    icon
+  } = _ref;
+  if (!icon) {
+    return null;
+  }
+  if ((0, _isUrl.default)(icon)) {
+    return /*#__PURE__*/(0, _jsxRuntime.jsx)("img", {
+      className: "resource-icon",
+      src: icon,
+      alt: "icon"
+    });
+  }
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_react.Icon, {
+    className: "resource-icon",
+    icon: icon
+  });
+}
+ResourceIcon.propTypes = {
+  icon: _propTypes.default.string
+};
+ResourceIcon.defaultProps = {
+  icon: ''
+};
+function Tree(_ref2) {
+  let {
+    disabled,
+    data,
+    onChange,
+    value
+  } = _ref2;
+  const selectedNodes = value;
+
+  // Retrieve all ids from node to his children's
+  function getAllIds(node) {
+    let idList = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : [];
+    idList.push(node.id);
+    if (node.children) {
+      node.children.forEach(child => getAllIds(child, idList));
+    }
+    return idList;
+  }
+  // Get IDs of all children from specific node
+  const getAllChild = id => {
+    return getAllIds(bfsSearch(data, id));
+  };
+
+  // Get all father IDs from specific node
+  const getAllFathers = function getAllFathers(id) {
+    let list = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : [];
+    const node = bfsSearch(data, id);
+    if (node.parent) {
+      list.push(node.parent);
+      return getAllFathers(node.parent, list);
+    }
+    return list;
+  };
+  function isAllChildrenChecked(node, list) {
+    const allChild = getAllChild(node.id);
+    const nodeIdIndex = allChild.indexOf(node.id);
+    allChild.splice(nodeIdIndex, 1);
+    return allChild.every(nodeId => selectedNodes.concat(list).includes(nodeId));
+  }
+  const handleNodeSelect = (event, nodeId) => {
+    event.stopPropagation();
+    const allChild = getAllChild(nodeId);
+    const fathers = getAllFathers(nodeId);
+    if (selectedNodes.includes(nodeId)) {
+      // Need to de-check
+      const newValue = selectedNodes.filter(id => !allChild.concat(fathers).includes(id));
+      onChange(newValue);
+    } else {
+      // Need to check
+      const ToBeChecked = allChild;
+      for (let i = 0; i < fathers.length; ++i) {
+        if (isAllChildrenChecked(bfsSearch(data, fathers[i]), ToBeChecked)) {
+          ToBeChecked.push(fathers[i]);
+        }
+      }
+      onChange([...selectedNodes].concat(ToBeChecked));
+    }
+  };
+  const stopExpand = event => {
+    // prevent the click event from propagating to the checkbox
+    event.stopPropagation();
+  };
+  const hadChildren = data.some(node => {
+    var _node$children;
+    return ((_node$children = node.children) === null || _node$children === void 0 ? void 0 : _node$children.length) > 0;
+  });
+  const renderTree = node => /*#__PURE__*/(0, _jsxRuntime.jsx)(_TreeItem.default, {
+    nodeId: node.id,
+    label: /*#__PURE__*/(0, _jsxRuntime.jsx)(_FormControlLabel.default, {
+      onClick: stopExpand,
+      control: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Checkbox.default, {
+        size: "small",
+        checked: selectedNodes.indexOf(node.id) !== -1,
+        tabIndex: -1,
+        disableRipple: true,
+        onClick: event => handleNodeSelect(event, node.id),
+        disabled: disabled
+      }),
+      label: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_Box.default, {
+        className: "content",
+        children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(_Box.default, {
+          display: "flex",
+          alignItems: "center",
+          children: [node.icon && /*#__PURE__*/(0, _jsxRuntime.jsx)(ResourceIcon, {
+            icon: node.icon
+          }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_Box.default, {
+            className: "name",
+            children: node.name
+          }), node.url && /*#__PURE__*/(0, _jsxRuntime.jsx)("a", {
+            href: node.url,
+            target: "_blank",
+            rel: "noreferrer",
+            className: "link",
+            children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_OpenInNew.default, {
+              className: "link-icon"
+            })
+          })]
+        }), !!node.description && /*#__PURE__*/(0, _jsxRuntime.jsx)(_Box.default, {
+          className: "description",
+          children: node.description
+        })]
+      })
+    }),
+    children: Array.isArray(node.children) ? node.children.map(renderTree) : null
+  }, node.id);
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(StyledTreeView, {
+    className: (0, _classnames.default)(!hadChildren && 'no-children'),
+    multiSelect: true,
+    defaultCollapseIcon: /*#__PURE__*/(0, _jsxRuntime.jsx)(_ExpandMore.default, {}),
+    defaultExpandIcon: /*#__PURE__*/(0, _jsxRuntime.jsx)(_ChevronRight.default, {}),
+    selected: selectedNodes,
+    children: data.map(node => renderTree(node))
+  });
+}
+Tree.propTypes = {
+  data: _propTypes.default.array,
+  value: _propTypes.default.array,
+  onChange: _propTypes.default.func,
+  disabled: _propTypes.default.bool
+};
+Tree.defaultProps = {
+  data: [],
+  value: [],
+  onChange: () => {},
+  disabled: false
+};
+const StyledTreeView = (0, _styled.default)(_TreeView.default)(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  &.no-children {\n    .MuiTreeItem-content {\n      padding: 0;\n      .MuiTreeItem-iconContainer {\n        display: none;\n      }\n      .MuiTreeItem-label {\n        padding-left: 0;\n      }\n    }\n  }\n  .MuiTreeItem-content {\n    align-items: flex-start;\n    .MuiTreeItem-iconContainer {\n      transform: translateY(10px);\n    }\n    &.Mui-selected {\n      background-color: transparent;\n    }\n  }\n  .MuiTreeItem-label {\n    cursor: default;\n  }\n  .MuiFormControlLabel-root {\n    align-items: flex-start;\n  }\n  .content {\n    padding-top: 6px;\n  }\n  .name {\n    font-size: 16px;\n    font-weight: 700;\n  }\n  .resource-icon {\n    margin-right: 2px;\n    font-size: 16px;\n  }\n  img.resource-icon {\n    width: 1rem;\n    height: 1rem;\n  }\n  .link {\n    margin-left: 8px;\n    font-size: 16px;\n    color: ", ";\n    display: flex;\n  }\n  .link-icon {\n    font-size: inherit;\n  }\n  .description {\n    font-size: 14px;\n    color: ", ";\n  }\n"])), _ref3 => {
+  let {
+    theme
+  } = _ref3;
+  return theme.palette.primary.main;
+}, _ref4 => {
+  let {
+    theme
+  } = _ref4;
+  return theme.palette.text.secondary;
+});

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@abtnode/ux",
-  "version": "1.16.17-beta-4f13d99d",
+  "version": "1.16.17-beta-5d4664f8",
   "description": "UX components shared across abtnode packages",
   "publishConfig": {
     "access": "public"
@@ -27,24 +27,24 @@
   "author": "linchen <linchen1987@foxmail.com> (http://github.com/linchen1987)",
   "license": "Apache-2.0",
   "dependencies": {
-    "@abtnode/auth": "1.16.17-beta-4f13d99d",
-    "@abtnode/constant": "1.16.17-beta-4f13d99d",
-    "@abtnode/util": "1.16.17-beta-4f13d99d",
+    "@abtnode/auth": "1.16.17-beta-5d4664f8",
+    "@abtnode/constant": "1.16.17-beta-5d4664f8",
+    "@abtnode/util": "1.16.17-beta-5d4664f8",
     "@ahooksjs/use-url-state": "^3.5.1",
     "@arcblock/did": "^1.18.92",
-    "@arcblock/did-connect": "^2.7.27",
+    "@arcblock/did-connect": "^2.7.29",
     "@arcblock/did-motif": "^1.1.13",
-    "@arcblock/icons": "^2.7.27",
-    "@arcblock/nft-display": "2.7.27",
-    "@arcblock/react-hooks": "^2.7.27",
-    "@arcblock/terminal": "^2.7.27",
-    "@arcblock/ux": "^2.7.27",
-    "@blocklet/constant": "1.16.17-beta-4f13d99d",
+    "@arcblock/icons": "^2.7.29",
+    "@arcblock/nft-display": "2.7.29",
+    "@arcblock/react-hooks": "^2.7.29",
+    "@arcblock/terminal": "^2.7.29",
+    "@arcblock/ux": "^2.7.29",
+    "@blocklet/constant": "1.16.17-beta-5d4664f8",
     "@blocklet/launcher-layout": "2.2.21",
     "@blocklet/list": "^0.12.45",
-    "@blocklet/meta": "1.16.17-beta-4f13d99d",
-    "@blocklet/ui-react": "^2.7.27",
-    "@blocklet/uploader": "^0.0.26",
+    "@blocklet/meta": "1.16.17-beta-5d4664f8",
+    "@blocklet/ui-react": "^2.7.29",
+    "@blocklet/uploader": "^0.0.29",
     "@emotion/react": "^11.10.4",
     "@emotion/styled": "^11.10.4",
     "@iconify/react": "^4.0.0",
@@ -100,7 +100,7 @@
     "babel-plugin-inline-react-svg": "^1.1.2",
     "glob": "^10.3.3"
   },
-  "gitHead": "005478c4b14448f2ae896ae363972afbde1d7e7b",
+  "gitHead": "e03febafae50406a3fb12706a2349e87ef2c1caa",
   "exports": {
     ".": {
       "import": "./es/index.js",