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

package/es/blocklet/version.js

@@ -0,0 +1,141 @@
+import { useContext, useEffect, useState } from 'react';
+import PropTypes from 'prop-types';
+import Spinner from '@mui/material/CircularProgress';
+import Button from '@mui/material/IconButton';
+import UpgradeIcon from '@mui/icons-material/ArrowUpward';
+import Tooltip from '@mui/material/Tooltip';
+import Toast from '@arcblock/ux/lib/Toast';
+import { LocaleContext } from '@arcblock/ux/lib/Locale/context';
+import { BLOCKLET_MODES } from '@blocklet/constant';
+import { getDisplayName, isInProgress } from '@blocklet/meta/lib/util';
+import Tag from '../tag';
+import Confirm from '../confirm';
+import { useNodeContext } from '../contexts/node';
+import { sleep, formatError, BlockletAdminRoles } from '../util';
+import { withPermission } from '../permission';
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Fragment as _Fragment } from "react/jsx-runtime";
+import { jsxs as _jsxs } from "react/jsx-runtime";
+function Version({
+  blocklet,
+  checkUpgrade,
+  hasPermission,
+  ...rest
+}) {
+  const {
+    api
+  } = useNodeContext();
+  const {
+    t
+  } = useContext(LocaleContext);
+  const [loading, setLoading] = useState(false);
+  const [error, setError] = useState('');
+  const [newVersionBlocklet, setNewVersionBlocklet] = useState(null);
+  const [confirmSetting, setConfirmSetting] = useState(null);
+  useEffect(() => {
+    setNewVersionBlocklet(null);
+    if (checkUpgrade && blocklet.mode !== BLOCKLET_MODES.DEVELOPMENT) {
+      // The implementation was removed and will be restore in the further
+    }
+  }, [blocklet, checkUpgrade]); // eslint-disable-line
+
+  const onCancel = () => {
+    setLoading(false);
+    setConfirmSetting(null);
+  };
+  const onConfirm = async () => {
+    setLoading(true);
+    try {
+      const input = {
+        did: blocklet.meta.did,
+        version: newVersionBlocklet.version,
+        storeUrl: newVersionBlocklet.registryUrl || ''
+      };
+      await sleep(2000);
+      await api.upgradeBlocklet({
+        input
+      });
+    } catch (err) {
+      Toast.error(`Blocklet upgrade failed: ${formatError(err)}`);
+    } finally {
+      setLoading(false);
+      setConfirmSetting(null);
+    }
+  };
+  const setting = {
+    title: `${t('common.upgrade')} ${t('common.blocklet')} ${getDisplayName(blocklet)}`,
+    description: t('blocklet.action.upgradeDescription'),
+    confirm: t('blocklet.action.confirmUpgrade'),
+    cancel: t('common.cancel'),
+    onConfirm,
+    onCancel
+  };
+  if (hasPermission && newVersionBlocklet && !isInProgress(blocklet.status)) {
+    return /*#__PURE__*/_jsxs(_Fragment, {
+      children: [/*#__PURE__*/_jsx(Tag, {
+        ...rest,
+        children: blocklet.meta.version
+      }), /*#__PURE__*/_jsx(Tooltip, {
+        title: t('common.updateAvailable', {
+          version: newVersionBlocklet.version
+        }),
+        children: /*#__PURE__*/_jsx(Button, {
+          size: "small",
+          style: {
+            marginLeft: 8
+          },
+          disabled: loading,
+          onClick: () => setConfirmSetting(setting),
+          children: loading ? /*#__PURE__*/_jsx(Spinner, {
+            size: 16
+          }) : /*#__PURE__*/_jsx(UpgradeIcon, {
+            style: {
+              fontSize: 16,
+              color: 'red'
+            }
+          })
+        })
+      }), !!error && /*#__PURE__*/_jsx(Toast, {
+        variant: "error",
+        message: error,
+        onClose: () => setError('')
+      }), confirmSetting && /*#__PURE__*/_jsx(Confirm, {
+        title: confirmSetting.title,
+        description: confirmSetting.description,
+        confirm: confirmSetting.confirm,
+        cancel: confirmSetting.cancel,
+        params: confirmSetting.params,
+        onConfirm: confirmSetting.onConfirm,
+        onCancel: confirmSetting.onCancel
+      })]
+    });
+  }
+  return /*#__PURE__*/_jsx(Tag, {
+    ...rest,
+    children: blocklet.meta.version
+  });
+}
+Version.propTypes = {
+  blocklet: PropTypes.object.isRequired,
+  checkUpgrade: PropTypes.bool,
+  hasPermission: PropTypes.bool
+};
+Version.defaultProps = {
+  checkUpgrade: false,
+  hasPermission: false
+};
+const BlockletVersionInDaemon = withPermission(Version, 'mutate_blocklets');
+const BlockletVersionInService = withPermission(Version, '', BlockletAdminRoles);
+export default function BlockletVersion(props) {
+  const {
+    inService
+  } = useNodeContext();
+  if (inService) {
+    return /*#__PURE__*/_jsx(BlockletVersionInService, {
+      ...props
+    });
+  }
+  return /*#__PURE__*/_jsx(BlockletVersionInDaemon, {
+    ...props
+  });
+}

package/es/card-selector.js

@@ -0,0 +1,134 @@
+/* eslint-disable react/no-danger */
+/* eslint-disable jsx-a11y/alt-text */
+import { useState, useEffect, useRef } from 'react';
+import styled from '@emotion/styled';
+import PropTypes from 'prop-types';
+import { jsx as _jsx } from "react/jsx-runtime";
+export default function CardSelector({
+  list,
+  width,
+  height,
+  cardSpace,
+  onSelect,
+  defaultIndex
+}) {
+  const [selectedId, setSelectedId] = useState(0);
+  const [translateX, setTranslateX] = useState(0);
+  const outerCon = useRef(null);
+
+  // 选择卡片
+  const selectedItem = i => {
+    if (i < 0 || i > list.length - 1) {
+      return;
+    }
+    setSelectedId(i);
+
+    // 外部容器大小
+    const outerWidth = outerCon.current.clientWidth;
+    setTranslateX(i * (width + cardSpace) - (outerWidth - width) / 2 + cardSpace * 0.5);
+    onSelect(i);
+  };
+  useEffect(() => {
+    selectedItem(defaultIndex);
+    const func = e => e.preventDefault();
+    outerCon.current.addEventListener('touchmove', func, {
+      passive: false
+    });
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
+  let startX;
+  const touchstart = e => {
+    const point = e.touches[0];
+    startX = point.clientX;
+  };
+  const touchend = e => {
+    const point = e.changedTouches[0];
+    const diffX = startX - point.clientX;
+    if (Math.abs(diffX) > 60) {
+      if (diffX > 0) {
+        selectedItem(selectedId + 1);
+      } else {
+        selectedItem(selectedId - 1);
+      }
+    }
+  };
+  return /*#__PURE__*/_jsx(Container, {
+    ref: outerCon,
+    onTouchStart: touchstart,
+    onTouchEnd: touchend,
+    children: /*#__PURE__*/_jsx("div", {
+      className: "card-container",
+      style: {
+        transform: `translate(${-translateX}px, 0)`
+      },
+      children: list.map((x, i) => {
+        return /*#__PURE__*/_jsx("div", {
+          className: `card-item ${i === selectedId ? 'selected' : ''}`,
+          style: {
+            width,
+            height,
+            margin: cardSpace / 2
+          },
+          onClick: () => selectedItem(i),
+          children: /*#__PURE__*/_jsx("div", {
+            className: "card-content",
+            dangerouslySetInnerHTML: {
+              __html: x.src
+            }
+          })
+        }, x.id);
+      })
+    })
+  });
+}
+const Container = styled.div`
+  overflow: hidden;
+  mask-image: linear-gradient(to left, transparent, black 3%, black 97%, transparent);
+  overflow: hidden;
+  .card-container {
+    display: flex;
+    white-space: nowrap;
+    width: max-content;
+    transition: all ease 0.3s;
+  }
+  .card-item {
+    display: inline-flex;
+    justify-content: center;
+    align-items: center;
+    flex-shrink: 0;
+    cursor: pointer;
+
+    .card-content {
+      pointer-events: none;
+      max-width: 100%;
+      max-height: 100%;
+      width: auto;
+      height: auto;
+      outline: #526ded solid 0;
+      transition: all ease 0.2s;
+      box-shadow: rgba(0, 0, 0, 0.2) 0 0 10px;
+    }
+    &.selected {
+      cursor: default;
+      .card-content {
+        outline: #526ded solid 5px;
+      }
+    }
+  }
+`;
+CardSelector.propTypes = {
+  list: PropTypes.array,
+  width: PropTypes.number,
+  height: PropTypes.number,
+  cardSpace: PropTypes.number,
+  onSelect: PropTypes.func,
+  defaultIndex: PropTypes.number
+};
+CardSelector.defaultProps = {
+  list: '',
+  width: 300,
+  height: 400,
+  cardSpace: 40,
+  onSelect: () => {},
+  defaultIndex: 0
+};

package/es/certificate.js

@@ -0,0 +1,105 @@
+import { useState } from 'react';
+import PropTypes from 'prop-types';
+import get from 'lodash/get';
+import HttpsIcon from '@mui/icons-material/Https';
+import Popover from '@mui/material/Popover';
+import Card from '@mui/material/Card';
+import CardContent from '@mui/material/CardContent';
+import Typography from '@mui/material/Typography';
+import { useLocaleContext } from '@arcblock/ux/lib/Locale/context';
+import { formatToDate } from './util';
+import { useNodeContext } from './contexts/node';
+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 Certificate({
+  certificate
+}) {
+  const [anchorEl, setAnchorEl] = useState(null);
+  const node = useNodeContext();
+  const {
+    t,
+    locale
+  } = useLocaleContext();
+  const handlePopoverOpen = event => {
+    setAnchorEl(event.currentTarget);
+  };
+  const handlePopoverClose = () => {
+    setAnchorEl(null);
+  };
+  const open = Boolean(anchorEl);
+  return /*#__PURE__*/_jsxs(_Fragment, {
+    children: [/*#__PURE__*/_jsx(HttpsIcon, {
+      "aria-owns": open ? 'mouse-over-popover' : undefined,
+      onMouseEnter: handlePopoverOpen,
+      onMouseLeave: handlePopoverClose,
+      style: {
+        color: '#44cdc6',
+        fontSize: 20,
+        marginLeft: 8,
+        cursor: 'pointer'
+      }
+    }), /*#__PURE__*/_jsx(Popover, {
+      id: "mouse-over-popover",
+      style: {
+        pointerEvents: 'none'
+      },
+      open: open,
+      anchorEl: anchorEl,
+      anchorOrigin: {
+        vertical: 'bottom',
+        horizontal: 'left'
+      },
+      transformOrigin: {
+        vertical: 'top',
+        horizontal: 'left'
+      },
+      onClose: handlePopoverClose,
+      disableRestoreFocus: true,
+      children: /*#__PURE__*/_jsx(Card, {
+        children: /*#__PURE__*/_jsxs(CardContent, {
+          style: {
+            display: 'flex'
+          },
+          children: [/*#__PURE__*/_jsx("div", {
+            children: /*#__PURE__*/_jsx("img", {
+              src: `${node.imgPrefix}/https-certificate-icon.png`,
+              alt: "certificate icon",
+              style: {
+                maxHeight: '100%',
+                maxWidth: '100%'
+              }
+            })
+          }), /*#__PURE__*/_jsxs(Typography, {
+            component: "div",
+            style: {
+              marginLeft: '16px'
+            },
+            children: [/*#__PURE__*/_jsx(Typography, {
+              component: "div",
+              style: {
+                fontWeight: 'bold'
+              },
+              children: certificate.domain
+            }), /*#__PURE__*/_jsx(Typography, {
+              component: "div",
+              children: `${t('common.issuer')}: ${get(certificate, 'issuer.commonName', '')}`
+            }), /*#__PURE__*/_jsx(Typography, {
+              component: "div",
+              children: `${t('router.cert.issuedOn')}: ${formatToDate(certificate.validFrom, locale)}`
+            }), /*#__PURE__*/_jsx(Typography, {
+              component: "div",
+              children: `${t('router.cert.expiryOn')}: ${formatToDate(certificate.validTo, locale)}`
+            })]
+          })]
+        })
+      })
+    })]
+  });
+}
+Certificate.propTypes = {
+  certificate: PropTypes.object
+};
+Certificate.defaultProps = {
+  certificate: {}
+};

package/es/chain.js

@@ -0,0 +1,13 @@
+import OcapClient from '@ocap/client/dist/lite';
+const clients = {};
+export default function getChainClient(endpoint) {
+  if (!endpoint) {
+    return null;
+  }
+  if (clients[endpoint]) {
+    return clients[endpoint];
+  }
+  const client = new OcapClient(endpoint);
+  clients[endpoint] = client;
+  return client;
+}

package/es/click-to-copy.js

@@ -0,0 +1,22 @@
+import { useContext } from 'react';
+import PropTypes from 'prop-types';
+import Copy from '@arcblock/ux/lib/ClickToCopy';
+import { LocaleContext } from '@arcblock/ux/lib/Locale/context';
+import { jsx as _jsx } from "react/jsx-runtime";
+export default function ClickToCopy({
+  children,
+  ...rest
+}) {
+  const {
+    t
+  } = useContext(LocaleContext);
+  return /*#__PURE__*/_jsx(Copy, {
+    tip: t('common.copyTip'),
+    copiedTip: t('common.copiedTip'),
+    ...rest,
+    children: children
+  });
+}
+ClickToCopy.propTypes = {
+  children: PropTypes.any.isRequired
+};

package/es/confirm.js

@@ -0,0 +1,149 @@
+import { useState } from 'react';
+import PropTypes from 'prop-types';
+import styled from '@emotion/styled';
+import Dialog from '@mui/material/Dialog';
+import Spinner from '@mui/material/CircularProgress';
+import DialogActions from '@mui/material/DialogActions';
+import DialogContent from '@mui/material/DialogContent';
+import DialogContentText from '@mui/material/DialogContentText';
+import DialogTitle from '@mui/material/DialogTitle';
+import Alert from '@mui/material/Alert';
+import useTheme from '@mui/material/styles/useTheme';
+import useMediaQuery from '@mui/material/useMediaQuery';
+import { useLocaleContext } from '@arcblock/ux/lib/Locale/context';
+import Button from '@arcblock/ux/lib/Button';
+import { formatError } from './util';
+import useMobileWidth from './hooks/mobile-width';
+import { jsx as _jsx } from "react/jsx-runtime";
+import { jsxs as _jsxs } from "react/jsx-runtime";
+export default function ConfirmDialog({
+  title,
+  description,
+  showCancel,
+  cancel,
+  confirm,
+  color,
+  params: initialParams,
+  onCancel,
+  onConfirm,
+  loading: inputLoading
+}) {
+  const [params, setParams] = useState(initialParams);
+  const [open, setOpen] = useState(true);
+  const [loading, setLoading] = useState(false);
+  const [error, setError] = useState('');
+  const {
+    t: changeLocale
+  } = useLocaleContext();
+  const theme = useTheme();
+  const onCallback = async cb => {
+    if (typeof cb === 'function') {
+      setLoading(true);
+      try {
+        await cb(params);
+        setOpen(false);
+      } catch (err) {
+        setError(formatError(err));
+        console.error(err);
+      } finally {
+        setLoading(false);
+      }
+    } else {
+      setOpen(false);
+    }
+  };
+  const t = typeof title === 'function' ? title() : title;
+  const d = typeof description === 'function' ? description(params, setParams, setError) : description;
+  const isBreakpointsDownSm = useMediaQuery(theme.breakpoints.down('md'));
+  const handleClick = e => {
+    e.stopPropagation();
+  };
+  const {
+    minWidth
+  } = useMobileWidth();
+  return /*#__PURE__*/_jsxs(StyledDialog, {
+    onClick: handleClick,
+    fullScreen: isBreakpointsDownSm,
+    open: open,
+    style: {
+      minWidth
+    },
+    children: [/*#__PURE__*/_jsx(DialogTitle, {
+      children: t
+    }), /*#__PURE__*/_jsxs(DialogContent, {
+      style: {
+        minWidth
+      },
+      children: [/*#__PURE__*/_jsx(DialogContentText, {
+        component: "div",
+        children: d
+      }), !!error && /*#__PURE__*/_jsx(Alert, {
+        severity: "error",
+        style: {
+          width: '100%',
+          marginTop: 8
+        },
+        children: error
+      })]
+    }), /*#__PURE__*/_jsxs(DialogActions, {
+      className: "delete-actions",
+      style: {
+        padding: '8px 24px 24px'
+      },
+      children: [showCancel && /*#__PURE__*/_jsx(Button, {
+        onClick: e => {
+          e.stopPropagation();
+          onCallback(onCancel);
+        },
+        color: "inherit",
+        "data-cy": "cancel-confirm-dialog",
+        children: cancel || changeLocale('common.cancel')
+      }), /*#__PURE__*/_jsxs(Button, {
+        onClick: e => {
+          e.stopPropagation();
+          onCallback(onConfirm);
+        },
+        color: color
+        // eslint-disable-next-line no-underscore-dangle
+        ,
+        disabled: params.__disableConfirm || loading || inputLoading,
+        variant: "contained",
+        "data-cy": "submit-confirm-dialog",
+        autoFocus: true,
+        children: [(loading || inputLoading) && /*#__PURE__*/_jsx(Spinner, {
+          size: 16
+        }), confirm]
+      })]
+    })]
+  });
+}
+ConfirmDialog.propTypes = {
+  title: PropTypes.any.isRequired,
+  description: PropTypes.any.isRequired,
+  // can be a function that renders different content based on params
+  showCancel: PropTypes.bool,
+  cancel: PropTypes.string,
+  color: PropTypes.string,
+  confirm: PropTypes.string,
+  params: PropTypes.object,
+  // This object holds states managed in the dialog
+  onCancel: PropTypes.func,
+  onConfirm: PropTypes.func.isRequired,
+  loading: PropTypes.bool
+};
+ConfirmDialog.defaultProps = {
+  onCancel: () => {},
+  showCancel: true,
+  cancel: '',
+  confirm: 'Confirm',
+  color: 'error',
+  params: {},
+  loading: false
+};
+const StyledDialog = styled(Dialog)`
+  .delete-actions .Mui-disabled {
+    color: rgba(0, 0, 0, 0.26) !important;
+    box-shadow: none;
+    background-color: rgba(0, 0, 0, 0.12) !important;
+  }
+`;