@abtnode/ux 1.16.14-beta-c308dc3b → 1.16.14-beta-963cb583

package/es/store/add.js

@@ -0,0 +1,179 @@
+import { useState } from 'react';
+import PropTypes from 'prop-types';
+import { makeStyles } from '@mui/styles';
+import Spinner from '@mui/material/CircularProgress';
+import Dialog from '@arcblock/ux/lib/Dialog';
+import DialogContentText from '@mui/material/DialogContentText';
+import Typography from '@mui/material/Typography';
+import TextField from '@mui/material/TextField';
+import ListItem from '@mui/material/ListItem';
+import AddIcon from '@mui/icons-material/Add';
+import { useLocaleContext } from '@arcblock/ux/lib/Locale/context';
+import Button from '@arcblock/ux/lib/Button';
+import Alert from '@arcblock/ux/lib/Alert';
+import { useNodeContext } from '../contexts/node';
+import { formatError, isNewStoreUrl } from '../util';
+import { jsx as _jsx } from "react/jsx-runtime";
+import { jsxs as _jsxs } from "react/jsx-runtime";
+import { Fragment as _Fragment } from "react/jsx-runtime";
+const useStyles = makeStyles(theme => ({
+  addMenuItemRoot: {
+    justifyContent: 'center',
+    color: theme.palette.primary.main,
+    lineHeight: '3.2'
+  }
+}));
+export default function AddStore({
+  disabled,
+  storeList,
+  teamDid,
+  onAdd
+}) {
+  const {
+    api
+  } = useNodeContext();
+  const [loading, setLoading] = useState(false);
+  const [disable, setDisable] = useState(true);
+  const [open, setOpen] = useState(false);
+  const [url, setUrl] = useState('');
+  const [error, setError] = useState('');
+  const {
+    t
+  } = useLocaleContext();
+  const classes = useStyles();
+  const onConfirm = async () => {
+    setLoading(true);
+    try {
+      const {
+        isNew,
+        decoded
+      } = isNewStoreUrl(url, storeList);
+      if (!isNew) {
+        throw new Error(t('store.blockletRegistry.haveSameRegistry'));
+      }
+      await api.addBlockletStore({
+        input: {
+          teamDid,
+          url: decoded
+        }
+      });
+      onAdd(decoded);
+      setOpen(false);
+    } catch (err) {
+      const errMsg = `${t('store.blockletRegistry.addFailed')} ${formatError(err)}`;
+      setError(errMsg);
+    } finally {
+      setLoading(false);
+    }
+  };
+  return /*#__PURE__*/_jsxs(_Fragment, {
+    children: [/*#__PURE__*/_jsxs(ListItem, {
+      button: true,
+      disabled: disabled,
+      className: classes.addMenuItemRoot,
+      onClick: () => {
+        setOpen(true);
+      },
+      children: [/*#__PURE__*/_jsx(AddIcon, {
+        font: true
+      }), /*#__PURE__*/_jsx(Typography, {
+        variant: "inherit",
+        children: t('store.blockletRegistry.addRegistry')
+      })]
+    }), /*#__PURE__*/_jsxs(Dialog, {
+      title: t('store.blockletRegistry.addRegistry'),
+      fullWidth: true,
+      maxWidth: "md",
+      open: open,
+      onClose: () => setOpen(false),
+      PaperProps: {
+        style: {
+          minHeight: 'auto'
+        }
+      },
+      actions: /*#__PURE__*/_jsxs(_Fragment, {
+        children: [/*#__PURE__*/_jsx(Button, {
+          onClick: e => {
+            e.stopPropagation();
+            setOpen(false);
+          },
+          color: "inherit",
+          children: t('common.cancel')
+        }), /*#__PURE__*/_jsxs(Button, {
+          onClick: e => {
+            e.stopPropagation();
+            onConfirm();
+          },
+          color: "primary",
+          "data-cy": "install-blocklet-next-step",
+          disabled: loading || !url || disable,
+          variant: "contained",
+          autoFocus: true,
+          children: [loading && /*#__PURE__*/_jsx(Spinner, {
+            size: 16
+          }), t('common.confirm')]
+        })]
+      }),
+      children: [/*#__PURE__*/_jsx("div", {
+        style: {
+          paddingTop: 12,
+          overflowY: 'hidden'
+        },
+        children: /*#__PURE__*/_jsx(DialogContentText, {
+          component: "div",
+          children: /*#__PURE__*/_jsx(Typography, {
+            component: "div",
+            children: /*#__PURE__*/_jsx(TextField, {
+              label: t('store.blockletRegistry.registryUrl'),
+              autoComplete: "off",
+              variant: "outlined",
+              name: "url",
+              fullWidth: true,
+              value: url,
+              onChange: e => {
+                setError(null);
+                let isDisabled = false;
+                if (!e.target.value.trim()) {
+                  isDisabled = true;
+                }
+                if (!e.target.value.trim()) {
+                  setError(t('store.blockletRegistry.registryUrlEmpty'));
+                }
+                setUrl(e.target.value);
+                setDisable(isDisabled);
+              },
+              disabled: loading,
+              onKeyPress: e => {
+                if (e.key === 'Enter') {
+                  e.preventDefault();
+                  if (!e.target.value.trim()) {
+                    setError(t('store.blockletRegistry.registryUrlEmpty'));
+                  } else {
+                    onConfirm();
+                  }
+                }
+              }
+            })
+          })
+        })
+      }), !!error && /*#__PURE__*/_jsx(Alert, {
+        type: "error",
+        style: {
+          width: '100%'
+        },
+        children: error
+      })]
+    })]
+  });
+}
+AddStore.propTypes = {
+  teamDid: PropTypes.string.isRequired,
+  disabled: PropTypes.bool,
+  storeList: PropTypes.array,
+  onAdd: PropTypes.func
+};
+AddStore.defaultProps = {
+  disabled: false,
+  storeList: [],
+  onAdd: () => {}
+};

package/es/store/delete.js

@@ -0,0 +1,96 @@
+import { useState } from 'react';
+import PropTypes from 'prop-types';
+import IconButton from '@mui/material/IconButton';
+import useTheme from '@mui/material/styles/useTheme';
+import { useLocaleContext } from '@arcblock/ux/lib/Locale/context';
+import DeleteOutlineIcon from '@mui/icons-material/DeleteOutline';
+import Toast from '@arcblock/ux/lib/Toast';
+import { useNodeContext } from '../contexts/node';
+import DelConfirm from '../delete-confirm';
+import { formatError } from '../util';
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Fragment as _Fragment } from "react/jsx-runtime";
+import { jsxs as _jsxs } from "react/jsx-runtime";
+export default function DeleteStore({
+  store,
+  teamDid,
+  onDelete
+}) {
+  const {
+    api
+  } = useNodeContext();
+  const {
+    t
+  } = useLocaleContext();
+  const [loading, setLoading] = useState(false);
+  const [confirmSetting, setConfirmSetting] = useState(null);
+  const theme = useTheme();
+  const onCancel = () => {
+    setLoading(false);
+    setConfirmSetting(null);
+  };
+  const onConfirm = async () => {
+    try {
+      setLoading(true);
+      await api.deleteBlockletStore({
+        input: {
+          teamDid,
+          url: store.url
+        }
+      });
+      if (onDelete && typeof onDelete === 'function') {
+        onDelete();
+      }
+    } catch (err) {
+      Toast.error(`Remove Blocklet Store Error: ${formatError(err)}`);
+    } finally {
+      setLoading(false);
+      setConfirmSetting(null);
+    }
+  };
+  const setting = {
+    keyName: store.url,
+    title: t('store.blockletRegistry.deleteRegistry'),
+    description: t('store.blockletRegistry.deleteDesc', {
+      name: `<b>${store.url}</b>`,
+      color: theme.palette.error.main
+    }),
+    confirmPlaceholder: t('store.blockletRegistry.confirmDesc', {
+      name: store.url
+    }),
+    confirm: t('common.delConfirm'),
+    cancel: t('common.cancel'),
+    onConfirm,
+    onCancel
+  };
+  const onMenuItemClick = e => {
+    e.stopPropagation();
+    setConfirmSetting(setting);
+  };
+  return /*#__PURE__*/_jsxs(_Fragment, {
+    children: [/*#__PURE__*/_jsx(IconButton, {
+      disabled: loading,
+      onClick: onMenuItemClick,
+      size: "large",
+      children: /*#__PURE__*/_jsx(DeleteOutlineIcon, {})
+    }), confirmSetting && /*#__PURE__*/_jsx(DelConfirm, {
+      keyName: confirmSetting.keyName,
+      title: confirmSetting.title,
+      description: confirmSetting.description,
+      confirmPlaceholder: confirmSetting.confirmPlaceholder,
+      confirm: confirmSetting.confirm,
+      cancel: confirmSetting.cancel,
+      params: confirmSetting.params,
+      onConfirm: confirmSetting.onConfirm,
+      onCancel: confirmSetting.onCancel
+    })]
+  });
+}
+DeleteStore.propTypes = {
+  teamDid: PropTypes.string.isRequired,
+  store: PropTypes.object.isRequired,
+  onDelete: PropTypes.func
+};
+DeleteStore.defaultProps = {
+  onDelete: () => {}
+};

package/es/store/item.js

@@ -0,0 +1,76 @@
+/* eslint-disable react/jsx-one-expression-per-line */
+import { makeStyles } from '@mui/styles';
+import Typography from '@mui/material/Typography';
+import ListItemSecondaryAction from '@mui/material/ListItemSecondaryAction';
+import LaunchIcon from '@mui/icons-material/Launch';
+import IconButton from '@mui/material/IconButton';
+import PropTypes from 'prop-types';
+import DeleteStore from './delete';
+import { jsx as _jsx } from "react/jsx-runtime";
+import { jsxs as _jsxs } from "react/jsx-runtime";
+const useStyles = makeStyles(() => ({
+  buttonText: {
+    textTransform: 'none !important'
+  },
+  iconRoot: {
+    minWidth: 24
+  },
+  menuName: {
+    display: 'flex',
+    flexDirection: 'column',
+    marginRight: '100px',
+    '& span': {
+      overflow: 'hidden',
+      textOverflow: 'ellipsis',
+      whiteSpace: 'nowrap'
+    }
+  }
+}));
+export default function StoreItem({
+  teamDid,
+  store,
+  onDelete
+}) {
+  const classes = useStyles();
+  return /*#__PURE__*/_jsxs("div", {
+    className: classes.menuName,
+    children: [/*#__PURE__*/_jsx(Typography, {
+      component: "span",
+      variant: "subtitle1",
+      style: {
+        fontWeight: '400'
+      },
+      children: store.name
+    }), /*#__PURE__*/_jsx(Typography, {
+      className: "url",
+      component: "span",
+      variant: "inherit",
+      children: `${store.url}`
+    }), /*#__PURE__*/_jsxs(ListItemSecondaryAction, {
+      children: [/*#__PURE__*/_jsx(IconButton, {
+        onClick: e => {
+          e.stopPropagation();
+          window.open(store.url);
+        },
+        size: "large",
+        children: /*#__PURE__*/_jsx(LaunchIcon, {})
+      }), !store.protected && /*#__PURE__*/_jsx(DeleteStore, {
+        store: store,
+        onDelete: onDelete,
+        teamDid: teamDid
+      })]
+    })]
+  });
+}
+StoreItem.propTypes = {
+  teamDid: PropTypes.string.isRequired,
+  store: PropTypes.shape({
+    name: PropTypes.string.isRequired,
+    url: PropTypes.string.isRequired,
+    protected: PropTypes.bool
+  }).isRequired,
+  onDelete: PropTypes.func
+};
+StoreItem.defaultProps = {
+  onDelete: () => {}
+};

package/es/subscription.js

@@ -0,0 +1,144 @@
+import prettyMs from 'pretty-ms-i18n';
+import { useLocaleContext } from '@arcblock/ux/lib/Locale/context';
+import Chip from '@mui/material/Chip';
+import Box from '@mui/material/Box';
+import Popover from '@mui/material/Popover';
+import CircularProgress from '@mui/material/CircularProgress';
+import dayjs from '@abtnode/util/lib/dayjs';
+import PropTypes from 'prop-types';
+import { useRef } from 'react';
+import useAsyncRetry from 'react-use/lib/useAsyncRetry';
+import useSetState from 'react-use/lib/useSetState';
+import { formatPrettyMsLocale, getAsset, getAssetExpiration, getSubscriptionURL } from './util';
+import { jsx as _jsx } from "react/jsx-runtime";
+import { jsxs as _jsxs } from "react/jsx-runtime";
+import { Fragment as _Fragment } from "react/jsx-runtime";
+const ALERT_THRESHOLD_MS = 30 * 24 * 60 * 60 * 1000;
+function Subscription({
+  chainHost,
+  nftId,
+  retention,
+  ...props
+}) {
+  const {
+    t,
+    locale
+  } = useLocaleContext();
+  const [state, setState] = useSetState({
+    safeIframeRef: null,
+    popoverAnchorEl: null
+  });
+  const iframeRef = useRef(null);
+  const {
+    sx = {},
+    ...rest
+  } = props;
+  const assetState = useAsyncRetry(() => getAsset(chainHost, nftId));
+  if (assetState.loading) {
+    return /*#__PURE__*/_jsxs(Box, {
+      sx: {
+        display: 'flex',
+        alignItems: 'center',
+        color: 'grey',
+        gap: 1,
+        ...sx
+      },
+      ...rest,
+      children: [/*#__PURE__*/_jsx(CircularProgress, {
+        size: 16
+      }), t('expiration.loading')]
+    });
+  }
+  if (assetState.error) {
+    console.error(assetState.error);
+    return /*#__PURE__*/_jsx(Chip, {
+      label: t('expiration.loadFailed'),
+      color: "error",
+      variant: "success",
+      sx: {
+        cursor: 'pointer',
+        ...sx
+      },
+      ...rest,
+      onClick: () => assetState.retry()
+    });
+  }
+  const expirationDate = getAssetExpiration(assetState.value);
+  const launcherUrl = assetState.value?.data?.value?.launcherUrl;
+  const isExpired = dayjs(expirationDate).isBefore(dayjs());
+  const validityMs = dayjs(expirationDate).diff(dayjs(), 'ms');
+  let status = 'success';
+  if (validityMs <= ALERT_THRESHOLD_MS) {
+    status = 'warning';
+  }
+  if (isExpired) {
+    status = 'error';
+  }
+  const handlePopoverClick = event => {
+    setState({
+      popoverAnchorEl: event.currentTarget
+    });
+  };
+  const handlePopoverClose = () => {
+    setState({
+      popoverAnchorEl: null
+    });
+  };
+  return /*#__PURE__*/_jsxs(_Fragment, {
+    children: [/*#__PURE__*/_jsx(Chip, {
+      label: t(`expiration.tips.${status}`, {
+        validity: prettyMs(validityMs, {
+          locale: formatPrettyMsLocale(locale),
+          compact: true,
+          verbose: true
+        })
+      }),
+      color: status,
+      variant: status !== 'success' ? 'contained' : 'outlined',
+      sx: {
+        cursor: 'pointer',
+        ...sx
+      },
+      ...rest,
+      onClick: handlePopoverClick
+    }), /*#__PURE__*/_jsx(Popover, {
+      id: "popover-info",
+      open: Boolean(state.popoverAnchorEl),
+      anchorEl: state.popoverAnchorEl,
+      onClose: handlePopoverClose,
+      anchorOrigin: {
+        vertical: 'bottom',
+        horizontal: 'right'
+      },
+      transformOrigin: {
+        vertical: 'top',
+        horizontal: 'right'
+      },
+      children: /*#__PURE__*/_jsx("iframe", {
+        ref: iframeRef,
+        title: t('common.subscription'),
+        width: "360px",
+        height: "600px",
+        style: {
+          border: 0
+        },
+        src: getSubscriptionURL({
+          launcherUrl,
+          nftId,
+          locale
+        })
+      })
+    })]
+  });
+}
+Subscription.propTypes = {
+  chainHost: PropTypes.string.isRequired,
+  nftId: PropTypes.string.isRequired,
+  sx: PropTypes.object,
+  retention: PropTypes.number
+};
+Subscription.defaultProps = {
+  sx: {},
+  retention: 0
+};
+export default Subscription;

package/es/table-icons.js

@@ -0,0 +1,34 @@
+import Add from '@mui/icons-material/Add';
+import Check from '@mui/icons-material/Check';
+import Delete from '@mui/icons-material/Delete';
+import Clear from '@mui/icons-material/Clear';
+import Export from '@mui/icons-material/SaveAlt';
+import Edit from '@mui/icons-material/Edit';
+import Filter from '@mui/icons-material/Filter';
+import FirstPage from '@mui/icons-material/FirstPage';
+import LastPage from '@mui/icons-material/LastPage';
+import NextPage from '@mui/icons-material/ChevronRight';
+import PreviousPage from '@mui/icons-material/ChevronLeft';
+import Search from '@mui/icons-material/Search';
+import SortArrow from '@mui/icons-material/ArrowDropDown';
+import ThirdStateCheck from '@mui/icons-material/Remove';
+import ViewColumn from '@mui/icons-material/ViewColumn';
+export default {
+  Add,
+  Check,
+  Delete,
+  Edit,
+  Clear,
+  DetailPanel: NextPage,
+  Filter,
+  FirstPage,
+  LastPage,
+  NextPage,
+  PreviousPage,
+  Search,
+  ResetSearch: Clear,
+  SortArrow,
+  Export,
+  ThirdStateCheck,
+  ViewColumn
+};

package/es/table.js

@@ -0,0 +1,52 @@
+import styled from '@emotion/styled';
+const TableStyle = styled.div`
+  .MuiPaper-root {
+    box-shadow: none !important;
+    border: none !important;
+    border-radius: 0 !important;
+    background: transparent;
+  }
+  .MuiToolbar-root {
+    background: transparent;
+    padding-left: 0;
+    display: none;
+  }
+
+  &.show-pagination {
+    .MuiTablePagination-toolbar {
+      display: flex;
+    }
+  }
+
+  .MuiTableHead-root th {
+    min-width: 100px;
+    background: transparent;
+  }
+
+  .MuiTable-root {
+    overflow-y: hidden;
+  }
+  .MuiTableRow-root {
+    border: none !important;
+  }
+
+  .MuiTableCell-root {
+    padding-right: 16px;
+    &:last-of-type {
+      padding-right: 0;
+    }
+  }
+
+  /* @material-table/core@next 兼容 mui v5, 但 pagination 样式似乎有些问题, 暂地定制下面的样式修复, 后面考虑弃用 material-table  */
+  .MuiTablePagination-selectLabel,
+  .MuiTablePagination-displayedRows {
+    display: none;
+  }
+  .MuiTypography-caption {
+    display: inline-block;
+  }
+  .MuiTablePagination-selectLabel + .MuiInputBase-root {
+    margin-right: 8px;
+  }
+`;
+export default TableStyle;

package/es/tag.js

@@ -0,0 +1,21 @@
+import PropTypes from 'prop-types';
+import Tag from '@arcblock/ux/lib/Tag';
+import { jsx as _jsx } from "react/jsx-runtime";
+export default function Wrapped({
+  children,
+  style,
+  ...rest
+}) {
+  return /*#__PURE__*/_jsx(Tag, {
+    style: style,
+    ...rest,
+    children: children
+  });
+}
+Wrapped.propTypes = {
+  children: PropTypes.any.isRequired,
+  style: PropTypes.object
+};
+Wrapped.defaultProps = {
+  style: {}
+};

package/es/team/members/actions.js

@@ -0,0 +1,89 @@
+import { useState, useContext } from 'react';
+import PropTypes from 'prop-types';
+import MenuItem from '@mui/material/MenuItem';
+import AddIcon from '@mui/icons-material/Add';
+import ListItemIcon from '@mui/material/ListItemIcon';
+import ListItemText from '@mui/material/ListItemText';
+import { LocaleContext } from '@arcblock/ux/lib/Locale/context';
+import ForbidLoginIcon from '@arcblock/icons/lib/ForbidLoginIcon';
+import AllowLoginIcon from '@arcblock/icons/lib/AllowLoginIcon';
+import { getWalletDid } from '@blocklet/meta/lib/did-utils';
+import { useTeamContext } from '../../contexts/team';
+import Actions from '../../actions';
+import IssuePassport from './issue-passport';
+import ToggleUserApproval from './toggle-user-approval';
+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 MemberActions({
+  user,
+  onIssuePassport
+}) {
+  const {
+    teamDid,
+    roles
+  } = useTeamContext();
+  const {
+    t
+  } = useContext(LocaleContext);
+  const [enablePassportIssuance, setEnablePassportIssuance] = useState(false);
+  return /*#__PURE__*/_jsxs(_Fragment, {
+    children: [/*#__PURE__*/_jsx(Actions, {
+      "data-cy": "member-actions",
+      actions: [{
+        icon: /*#__PURE__*/_jsx(AddIcon, {
+          fontSize: "small"
+        }),
+        text: t('team.passport.issue'),
+        'data-cy': 'action-issue-passport',
+        onClick: e => {
+          e.stopPropagation();
+          setEnablePassportIssuance(true);
+        }
+      },
+      // eslint-disable-next-line react/no-unstable-nested-components
+      ({
+        close
+      }) => /*#__PURE__*/_jsx(ToggleUserApproval, {
+        user: user,
+        children: ({
+          open: o
+        }) => /*#__PURE__*/_jsxs(MenuItem, {
+          dense: true,
+          onClick: e => {
+            e.stopPropagation();
+            close();
+            o(e);
+          },
+          "data-cy": "action-toggle-block",
+          children: [/*#__PURE__*/_jsx(ListItemIcon, {
+            style: {
+              minWidth: 24,
+              marginRight: 8
+            },
+            children: user.approved ? /*#__PURE__*/_jsx(ForbidLoginIcon, {}) : /*#__PURE__*/_jsx(AllowLoginIcon, {})
+          }), /*#__PURE__*/_jsx(ListItemText, {
+            primary: user.approved ? t('team.member.forbidLogin') : t('team.member.allowLogin')
+          })]
+        })
+      }, "toggle-approval")]
+    }), enablePassportIssuance && /*#__PURE__*/_jsx(IssuePassport, {
+      teamDid: teamDid,
+      ownerDid: user.did,
+      needReceive: getWalletDid(user) === user.did,
+      roles: roles,
+      onCancel: () => setEnablePassportIssuance(false),
+      onSuccess: () => {
+        onIssuePassport();
+        setEnablePassportIssuance(false);
+      }
+    })]
+  });
+}
+MemberActions.propTypes = {
+  user: PropTypes.object.isRequired,
+  onIssuePassport: PropTypes.func
+};
+MemberActions.defaultProps = {
+  onIssuePassport: () => {}
+};