@abtnode/ux 1.16.23-beta-f85576a6 → 1.16.23-beta-aeb9f5bd

package/es/blocklet/agreement.js

@@ -4,12 +4,18 @@ import styled from '@emotion/styled';
 import { useLocaleContext } from '@arcblock/ux/lib/Locale/context';
 import ServerEula from '@blocklet/launcher-layout/lib/wizard/server-eula';
 import WizardDesc from '@blocklet/launcher-layout/lib/wizard/wizard-desc';
+import { Icon } from '@iconify/react';
+import { Box, Checkbox, FormControlLabel, IconButton } from '@mui/material';
+import { useState } from 'react';
 import AgreementApp from './agreement-app';
+import RelatedComponentsDialog from './component/related-components-dialog';
 
 // TODO: 加载 Blocklet 定义的 Agreement
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
 export default function Agreement({
+  installRelated,
+  onChangeInstallRelated,
   meta,
   onClickNext,
   handleDescEle
@@ -19,9 +25,16 @@ export default function Agreement({
     t,
     locale
   } = useLocaleContext();
+  const [showDependencies, setShowDependencies] = useState(false);
   const clickNext = onClickNext || (() => {
     navigate(`/launch-blocklet/install${window.location.search}`);
   });
+  const handleShowDependencies = () => {
+    setShowDependencies(true);
+  };
+  const handleHiddenDependencies = () => {
+    setShowDependencies(false);
+  };
   return /*#__PURE__*/_jsxs(Container, {
     children: [/*#__PURE__*/_jsx("div", {
       className: "app-content",
@@ -38,28 +51,71 @@ export default function Agreement({
           })
         })
       })
-    }), /*#__PURE__*/_jsx("div", {
-      className: "button-container",
-      "data-cy": "agree-all",
-      children: /*#__PURE__*/_jsx(ServerEula, {
-        onContinue: clickNext,
-        description: /*#__PURE__*/_jsx(AgreementApp, {}),
-        texts: {
-          listenName: t('launchBlocklet.license'),
-          buttonNext: t('launchBlocklet.next')
-        }
-      })
+    }), /*#__PURE__*/_jsxs("div", {
+      className: "agreement-bottom",
+      children: [onChangeInstallRelated && /*#__PURE__*/_jsxs(Box, {
+        sx: {
+          display: 'flex',
+          flexDirection: 'row',
+          justifyContent: 'flex-start',
+          alignItems: 'center'
+        },
+        children: [/*#__PURE__*/_jsx(FormControlLabel, {
+          sx: {
+            mr: 0.5
+          },
+          checked: installRelated,
+          onChange: e => onChangeInstallRelated(e.currentTarget.checked),
+          control: /*#__PURE__*/_jsx(Checkbox, {}),
+          label: /*#__PURE__*/_jsx("span", {
+            children: t('launchBlocklet.installRelatedComponents')
+          })
+        }), /*#__PURE__*/_jsx(Box, {
+          sx: {
+            '> button svg': {
+              color: 'primary.main'
+            }
+          },
+          children: /*#__PURE__*/_jsx(IconButton, {
+            size: "small",
+            onClick: handleShowDependencies,
+            children: /*#__PURE__*/_jsx(Icon, {
+              icon: "octicon:package-dependencies-16"
+            })
+          })
+        })]
+      }), /*#__PURE__*/_jsx("div", {
+        className: "button-container",
+        "data-cy": "agree-all",
+        children: /*#__PURE__*/_jsx(ServerEula, {
+          onContinue: clickNext,
+          description: /*#__PURE__*/_jsx(AgreementApp, {}),
+          texts: {
+            listenName: t('launchBlocklet.license'),
+            buttonNext: t('launchBlocklet.next')
+          }
+        })
+      })]
+    }), /*#__PURE__*/_jsx(RelatedComponentsDialog, {
+      installRelated: installRelated,
+      meta: meta,
+      show: showDependencies,
+      onClose: handleHiddenDependencies
     })]
   });
 }
 Agreement.propTypes = {
   meta: PropTypes.object.isRequired,
   onClickNext: PropTypes.func,
-  handleDescEle: PropTypes.node
+  handleDescEle: PropTypes.node,
+  installRelated: PropTypes.bool,
+  onChangeInstallRelated: PropTypes.func
 };
 Agreement.defaultProps = {
   onClickNext: null,
-  handleDescEle: ''
+  handleDescEle: '',
+  installRelated: true,
+  onChangeInstallRelated: null
 };
 const Container = styled.div`
   display: flex;
@@ -112,11 +168,24 @@ const Container = styled.div`
       }
     }
   }
+  .agreement-bottom {
+    display: flex;
+    width: 100%;
+    padding: 24px;
+    ${props => props.theme.breakpoints.up('md')} {
+      flex-direction: row;
+      align-items: center;
+      margin-left: auto;
+    }
+    ${props => props.theme.breakpoints.down('md')} {
+      flex-direction: column;
+      align-items: center;
+      padding-top: 0;
+      padding-bottom: 16px;
+    }
+  }
   .button-container {
-    padding-top: 24px;
-    padding-bottom: 34px;
     ${props => props.theme.breakpoints.up('md')} {
-      padding-right: 24px;
       margin-left: auto;
     }
     ${props => props.theme.breakpoints.down('md')} {

package/es/blocklet/component/add-component-button.js

@@ -0,0 +1,50 @@
+/* eslint-disable react/no-unstable-nested-components */
+import { useState } from 'react';
+import PropTypes from 'prop-types';
+import MenuItem from '@mui/material/MenuItem';
+import AddIcon from '@mui/icons-material/Link';
+import { useLocaleContext } from '@arcblock/ux/lib/Locale/context';
+import AddComponentDialog from './add-component-dialog';
+import { jsx as _jsx } from "react/jsx-runtime";
+import { jsxs as _jsxs } from "react/jsx-runtime";
+import { Fragment as _Fragment } from "react/jsx-runtime";
+export default function AddComponentButton({
+  blocklet,
+  children
+}) {
+  const {
+    t
+  } = useLocaleContext();
+  const [showDialog, setShowDialog] = useState(false);
+  const onMenuItemClick = e => {
+    e.stopPropagation();
+    // eslint-disable-next-line no-unused-expressions
+    setShowDialog(true);
+  };
+  return /*#__PURE__*/_jsxs(_Fragment, {
+    children: [typeof children === 'function' ? children({
+      open: onMenuItemClick
+    }) : /*#__PURE__*/_jsxs(MenuItem, {
+      onClick: onMenuItemClick,
+      className: "component-action",
+      "data-cy": "action-add-component",
+      children: [/*#__PURE__*/_jsx(AddIcon, {
+        style: {
+          fontSize: 18,
+          marginRight: 5
+        }
+      }), t('blocklet.component.add')]
+    }), /*#__PURE__*/_jsx(AddComponentDialog, {
+      showDialog: showDialog,
+      setShowDialog: setShowDialog,
+      blocklet: blocklet
+    })]
+  });
+}
+AddComponentButton.propTypes = {
+  children: PropTypes.any,
+  blocklet: PropTypes.object.isRequired
+};
+AddComponentButton.defaultProps = {
+  children: null
+};

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

@@ -155,7 +155,8 @@ export default function AddComponentCore({
   resourceType,
   resourceDid,
   storageKey,
-  inDialog
+  inDialog,
+  selectedMeta
 }) {
   const {
     t,
@@ -206,13 +207,10 @@ export default function AddComponentCore({
   const purchaseRef = useRef({});
   const isMobile = useMediaQuery(theme => theme.breakpoints.down('md'));
   const routerParams = useParams();
+  const [installRelated, setInstallRelated] = useState(true);
   const {
     meta
   } = component.current;
-  // eslint-disable-next-line no-unused-vars
-  const {
-    setActiveStepByIndex
-  } = stepRef.current || {};
   const isServerlessMode = nodeInfo.mode === NODE_MODES.SERVERLESS;
   const updateParams = obj => setParams(x => ({
     ...x,
@@ -349,6 +347,7 @@ export default function AddComponentCore({
       title,
       name: componentName,
       did: componentDid,
+      onlyRequired: !installRelated,
       // if blocklet has config, provide the configs
       ...(params.hasEnvironmentsStep && configs.length > 0 ? {
         configs: configs.map(item => {
@@ -438,10 +437,10 @@ export default function AddComponentCore({
     if (activeStep === steps.length - 2) {
       await onInstall(payload);
     }
-    setActiveStepByIndex(x => x + 1);
+    stepRef.current?.setActiveStepByIndex?.(x => x + 1);
   };
   const onCancel = () => {
-    setActiveStepByIndex(x => x - 1);
+    stepRef.current?.setActiveStepByIndex?.(x => x - 1);
   };
   const onGeneratePurchaseData = () => {
     const {
@@ -660,6 +659,26 @@ export default function AddComponentCore({
       onGeneratePurchaseData();
     }
   };
+  useEffect(() => {
+    if (!selectedMeta || activeStep !== 0) {
+      return;
+    }
+    setConfigValue({
+      chooseParams: {
+        blocklets: [selectedMeta],
+        meta: selectedMeta,
+        registryUrl: selectedMeta.homepage,
+        inStore: true
+      },
+      isInit: true
+    });
+    updateParams({
+      showFromUrlDialog: false
+    });
+    onNext();
+
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [selectedMeta, activeStep]);
   const steps = [{
     key: 'selectComponent',
     name: t('blocklet.component.selectComponent'),
@@ -797,6 +816,8 @@ export default function AddComponentCore({
       }), /*#__PURE__*/_jsx(Agreement, {
         meta: meta,
         onClickNext: onNext,
+        installRelated: installRelated,
+        onChangeInstallRelated: setInstallRelated,
         handleDescEle: /*#__PURE__*/_jsxs(_Fragment, {
           children: [/*#__PURE__*/_jsx("p", {
             children: /*#__PURE__*/_jsx("div", {
@@ -813,9 +834,9 @@ export default function AddComponentCore({
         })
       })]
     }),
-    cancel: t('common.pre'),
+    cancel: selectedMeta ? t('common.cancel') : t('common.pre'),
     confirm: t('launchBlocklet.next'),
-    onCancel,
+    onCancel: selectedMeta ? onOver : onCancel,
     onConfirm: () => {
       setIsWaitingPurchase(false);
       onNext();
@@ -1117,7 +1138,8 @@ AddComponentCore.propTypes = {
   stores: PropTypes.arrayOf(PropTypes.string),
   resourceType: PropTypes.string,
   resourceDid: PropTypes.string,
-  storageKey: PropTypes.string
+  storageKey: PropTypes.string,
+  selectedMeta: PropTypes.object
 };
 AddComponentCore.defaultProps = {
   onClose: () => {},
@@ -1126,7 +1148,8 @@ AddComponentCore.defaultProps = {
   resourceType: '',
   resourceDid: '',
   storageKey: '',
-  inDialog: true
+  inDialog: true,
+  selectedMeta: null
 };
 const Wrapper = styled(Box)`
   .action-bar {
@@ -1244,7 +1267,7 @@ const ContentWrapper = styled(Box)`
             &:last-child {
               padding-top: 0;
               padding-right: 0px;
-              overflow-y: auto;
+              overflow-y: hidden;
               .app-content {
                 padding: 0 0 24px 0;
               }

package/es/blocklet/component/add-component-dialog.js

@@ -0,0 +1,78 @@
+/* eslint-disable react/no-unstable-nested-components */
+import PropTypes from 'prop-types';
+import Dialog from '@arcblock/ux/lib/Dialog';
+import useMediaQuery from '@mui/material/useMediaQuery';
+import styled from '@emotion/styled';
+import { useLocaleContext } from '@arcblock/ux/lib/Locale/context';
+import { getDisplayName } from '@blocklet/meta/lib/util';
+import { STORAGE_KEY_STORE_BLOCKLET, STORAGE_KEY_STORE_SERVER } from '../../util/constants';
+import { useNodeContext } from '../../contexts/node';
+import AddComponentCore from './add-component-core';
+import { jsx as _jsx } from "react/jsx-runtime";
+export default function AddComponentDialog({
+  blocklet,
+  showDialog,
+  setShowDialog,
+  selectedMeta
+}) {
+  const {
+    t
+  } = useLocaleContext();
+  const isMobile = useMediaQuery(theme => theme.breakpoints.down('md'));
+  const {
+    inService
+  } = useNodeContext();
+  const onClose = () => {
+    setShowDialog(false);
+  };
+  if (!showDialog) {
+    return null;
+  }
+  return /*#__PURE__*/_jsx(DialogWrapper, {
+    title: t('blocklet.component.addWithName', {
+      name: getDisplayName(blocklet)
+    }),
+    maxWidth: false,
+    fullWidth: false,
+    PaperProps: {
+      style: isMobile ? {
+        width: '100%',
+        height: window.innerHeight
+      } : {
+        maxWidth: 1350,
+        minWidth: 930,
+        width: '80%'
+      }
+    }
+    // eslint-disable-next-line no-unused-vars
+    ,
+    onClose: (event, reason) => {
+      // disable backdropClick
+      if (reason === 'backdropClick') {
+        return;
+      }
+      onClose();
+    },
+    showCloseButton: true,
+    disableEscapeKeyDown: true,
+    open: true,
+    children: /*#__PURE__*/_jsx(AddComponentCore, {
+      selectedMeta: selectedMeta,
+      onClose: onClose,
+      storageKey: inService ? STORAGE_KEY_STORE_BLOCKLET : STORAGE_KEY_STORE_SERVER
+    })
+  });
+}
+AddComponentDialog.propTypes = {
+  selectedMeta: PropTypes.object,
+  showDialog: PropTypes.bool.isRequired,
+  setShowDialog: PropTypes.func.isRequired,
+  blocklet: PropTypes.object.isRequired
+};
+AddComponentDialog.defaultProps = {
+  selectedMeta: null
+};
+const DialogWrapper = styled(Dialog)`
+  .MuiDialogContent-root {
+  }
+`;