@abtnode/ux 1.16.29-beta-0070353c → 1.16.29-beta-e04c6f40

package/lib/team/members/invite-member.js

@@ -1,18 +1,11 @@
-import { useState } from 'react';
 import PropTypes from 'prop-types';
-import styled from '@emotion/styled';
+import { Alert, Box, CircularProgress, DialogContentText, MenuItem, Select, TextField, InputLabel, FormControl } from '@mui/material';
+import { useReactive } from 'ahooks';
 import Dialog from '@arcblock/ux/lib/Dialog';
-import Spinner from '@mui/material/CircularProgress';
-import DialogContentText from '@mui/material/DialogContentText';
-import Typography from '@mui/material/Typography';
-import MenuItem from '@mui/material/MenuItem';
-import Select from '@mui/material/Select';
-import TextField from '@mui/material/TextField';
-import InputLabel from '@mui/material/InputLabel';
-import FormControl from '@mui/material/FormControl';
 import { useLocaleContext } from '@arcblock/ux/lib/Locale/context';
 import Button from '@arcblock/ux/lib/Button';
-import Alert from '@mui/material/Alert';
+import DID from '@arcblock/ux/lib/DID';
+import Avatar from '@arcblock/ux/lib/Avatar';
 import ClickToCopy from '../../click-to-copy';
 import { useNodeContext } from '../../contexts/node';
 import { formatError, getInviteLink, formatToDatetime } from '../../util';
@@ -20,6 +13,7 @@ import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-run
 export default function InviteMember({
   teamDid,
   roles,
+  apps,
   onCancel,
   onSuccess,
   onError,
@@ -28,64 +22,110 @@ export default function InviteMember({
   const {
     api
   } = useNodeContext();
-  const [loading, setLoading] = useState(false);
-  const [error, setError] = useState('');
   const {
     t,
     locale
   } = useLocaleContext();
-  const [activeStep, setActiveStep] = useState(0);
-  const [inviteInfo, setInviteInfo] = useState('');
-  const [role, setRole] = useState('');
-  const [remark, setRemark] = useState('');
+  const currentState = useReactive({
+    loading: false,
+    error: null,
+    activeStep: 0,
+    inviteInfo: null,
+    role: '',
+    remark: '',
+    sourceAppPid: apps.length > 0 ? apps[0].appId : null
+  });
   const onCreate = async () => {
-    if (!role) {
-      setError(t('team.member.error.passportEmpty'));
+    if (!currentState.role) {
+      currentState.error = t('team.member.error.passportEmpty');
       return;
     }
-    const trimRemark = remark.trim();
-    setError(null);
-    setLoading(true);
+    const trimRemark = currentState.remark.trim();
+    currentState.error = null;
+    currentState.loading = true;
     try {
       const {
-        inviteInfo: info
+        inviteInfo
       } = await api.createMemberInvitation({
         input: {
           teamDid,
-          role,
-          remark: trimRemark
+          role: currentState.role,
+          remark: trimRemark,
+          sourceAppPid: currentState.sourceAppPid
         }
       });
-      setInviteInfo(info);
-      setActiveStep(1);
+      currentState.inviteInfo = inviteInfo;
+      currentState.activeStep = 1;
     } catch (err) {
       const errMsg = formatError(err);
-      setError(errMsg);
+      currentState.error = errMsg;
       onError(err);
     } finally {
-      setLoading(false);
+      currentState.loading = false;
     }
   };
   const steps = [{
-    body: /*#__PURE__*/_jsxs(Typography, {
-      component: "div",
-      children: [/*#__PURE__*/_jsxs(FormControl, {
-        style: {
-          width: '100%'
-        },
+    body: /*#__PURE__*/_jsxs(Box, {
+      sx: {
+        display: 'flex',
+        flexDirection: 'column',
+        gap: 3
+      },
+      children: [apps.length > 1 ? /*#__PURE__*/_jsxs(FormControl, {
+        fullWidth: true,
+        children: [/*#__PURE__*/_jsx(InputLabel, {
+          children: t('common.sourceApp')
+        }), /*#__PURE__*/_jsx(Select, {
+          value: currentState.sourceAppPid,
+          onChange: e => {
+            currentState.error = null;
+            currentState.sourceAppPid = e.target.value;
+          },
+          fullWidth: true,
+          label: t('common.passport'),
+          disabled: currentState.loading,
+          children: apps.map(r => /*#__PURE__*/_jsx(MenuItem, {
+            value: r.appId,
+            children: /*#__PURE__*/_jsxs(Box, {
+              sx: {
+                display: 'flex',
+                justifyContent: 'space-between',
+                gap: 2,
+                width: '100%'
+              },
+              children: [/*#__PURE__*/_jsxs(Box, {
+                sx: {
+                  display: 'flex',
+                  alignItems: 'center',
+                  gap: 1
+                },
+                children: [/*#__PURE__*/_jsx(Avatar, {
+                  did: r.appId,
+                  size: 28
+                }), r.appName]
+              }), /*#__PURE__*/_jsx(DID, {
+                did: r.appId,
+                compact: true,
+                responsive: false
+              })]
+            })
+          }, r.appId))
+        })]
+      }) : null, /*#__PURE__*/_jsxs(FormControl, {
+        fullWidth: true,
         variant: "outlined",
         children: [/*#__PURE__*/_jsx(InputLabel, {
           children: t('common.passport')
         }), /*#__PURE__*/_jsx(Select, {
           "data-cy": "invite-member-select-role",
-          value: role,
+          value: currentState.role,
           onChange: e => {
-            setError(null);
-            setRole(e.target.value);
+            currentState.error = null;
+            currentState.role = e.target.value;
           },
           fullWidth: true,
           label: t('common.passport'),
-          disabled: loading,
+          disabled: currentState.loading,
           onKeyPress: e => {
             if (e.key === 'Enter') {
               e.preventDefault();
@@ -100,11 +140,6 @@ export default function InviteMember({
             })
           }, r.name))
         })]
-      }), /*#__PURE__*/_jsx("div", {
-        style: {
-          marginTop: 20,
-          marginBottom: 10
-        }
       }), /*#__PURE__*/_jsx(TextField, {
         label: t('common.remark'),
         autoComplete: "off",
@@ -113,18 +148,13 @@ export default function InviteMember({
         style: {
           marginBottom: 8
         },
-        value: remark,
+        value: currentState.remark,
         onChange: e => {
-          setError(null);
-          setRemark(e.target.value);
+          currentState.error = null;
+          currentState.remark = e.target.value;
         },
-        disabled: loading,
+        disabled: currentState.loading,
         "data-cy": "invite-member-input-remark"
-      }), /*#__PURE__*/_jsx("div", {
-        style: {
-          marginTop: 20,
-          marginBottom: 10
-        }
       })]
     }),
     cancel: t('common.cancel'),
@@ -135,13 +165,17 @@ export default function InviteMember({
     // eslint-disable-next-line react/no-unstable-nested-components
     body: () => {
       const link = getInviteLink({
-        inviteId: inviteInfo.inviteId,
+        inviteId: currentState.inviteInfo?.inviteId,
         endpoint
       });
       return /*#__PURE__*/_jsxs("div", {
-        children: [/*#__PURE__*/_jsx(Bold, {
+        children: [/*#__PURE__*/_jsx(Box, {
+          sx: {
+            fontSize: 16,
+            fontWeight: 'bold'
+          },
           children: t('team.member.inviteDialog.createSuccessTip', {
-            expireDate: formatToDatetime(inviteInfo.expireDate, locale)
+            expireDate: formatToDatetime(currentState.inviteInfo?.expireDate, locale)
           })
         }), /*#__PURE__*/_jsx("div", {
           style: {
@@ -155,7 +189,7 @@ export default function InviteMember({
     confirm: t('common.confirm'),
     onConfirm: onSuccess
   }];
-  const step = steps[activeStep];
+  const step = steps[currentState.activeStep];
   return /*#__PURE__*/_jsxs(Dialog, {
     title: t('common.invite'),
     fullWidth: true,
@@ -169,10 +203,10 @@ export default function InviteMember({
       }), /*#__PURE__*/_jsxs(Button, {
         onClick: step.onConfirm,
         color: "primary",
-        disabled: loading || !role,
+        disabled: currentState.loading || !currentState.role,
         variant: "contained",
         autoFocus: true,
-        children: [loading && /*#__PURE__*/_jsx(Spinner, {
+        children: [currentState.loading && /*#__PURE__*/_jsx(CircularProgress, {
           size: 16
         }), step.confirm]
       })]
@@ -180,10 +214,10 @@ export default function InviteMember({
     children: [/*#__PURE__*/_jsx(DialogContentText, {
       component: "div",
       children: typeof step.body === 'function' ? step.body() : step.body
-    }), !!error && /*#__PURE__*/_jsx(Alert, {
+    }), !!currentState.error && /*#__PURE__*/_jsx(Alert, {
       severity: "error",
       variant: "icon",
-      children: error
+      children: currentState.error
     })]
   });
 }
@@ -193,14 +227,12 @@ InviteMember.propTypes = {
   onSuccess: PropTypes.func.isRequired,
   onError: PropTypes.func,
   roles: PropTypes.array,
+  apps: PropTypes.array,
   endpoint: PropTypes.string
 };
 InviteMember.defaultProps = {
   onError: () => {},
   roles: [],
+  apps: [],
   endpoint: ''
-};
-const Bold = styled.div`
-  font-size: 16px;
-  font-weight: bold;
-`;
+};

package/lib/util/sdk.js

@@ -0,0 +1,3 @@
+import { BlockletSDK } from '@blocklet/js-sdk';
+const blockletSdk = new BlockletSDK();
+export default blockletSdk;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@abtnode/ux",
-  "version": "1.16.29-beta-0070353c",
+  "version": "1.16.29-beta-e04c6f40",
   "description": "UX components shared across abtnode packages",
   "publishConfig": {
     "access": "public"
@@ -25,9 +25,9 @@
   "author": "linchen <linchen1987@foxmail.com> (http://github.com/linchen1987)",
   "license": "Apache-2.0",
   "dependencies": {
-    "@abtnode/auth": "1.16.29-beta-0070353c",
-    "@abtnode/constant": "1.16.29-beta-0070353c",
-    "@abtnode/util": "1.16.29-beta-0070353c",
+    "@abtnode/auth": "1.16.29-beta-e04c6f40",
+    "@abtnode/constant": "1.16.29-beta-e04c6f40",
+    "@abtnode/util": "1.16.29-beta-e04c6f40",
     "@ahooksjs/use-url-state": "^3.5.1",
     "@arcblock/did": "^1.18.123",
     "@arcblock/did-connect": "^2.10.0",
@@ -37,10 +37,11 @@
     "@arcblock/react-hooks": "^2.10.0",
     "@arcblock/terminal": "^2.10.0",
     "@arcblock/ux": "^2.10.0",
-    "@blocklet/constant": "1.16.29-beta-0070353c",
+    "@blocklet/constant": "1.16.29-beta-e04c6f40",
+    "@blocklet/js-sdk": "1.16.29-beta-e04c6f40",
     "@blocklet/launcher-layout": "2.3.22",
     "@blocklet/list": "^0.12.114",
-    "@blocklet/meta": "1.16.29-beta-0070353c",
+    "@blocklet/meta": "1.16.29-beta-e04c6f40",
     "@blocklet/ui-react": "^2.10.0",
     "@blocklet/uploader": "^0.1.10",
     "@emotion/react": "^11.10.4",
@@ -107,5 +108,5 @@
     "jest": "^29.7.0",
     "jest-environment-jsdom": "^29.7.0"
   },
-  "gitHead": "7e3562be3a8af477749420cc022938a1059484d4"
+  "gitHead": "f3e8f2ce931215b95ada33e87aee997d8ae52a69"
 }