@abtnode/ux 1.16.14-beta-ab7f615e → 1.16.14-beta-cb53c14b

package/es/blocklet/component/navigation/simple-select.js

@@ -0,0 +1,124 @@
+import PropTypes from 'prop-types';
+import Box from '@mui/material/Box';
+import Chip from '@mui/material/Chip';
+import FormControl from '@mui/material/FormControl';
+import FormHelperText from '@mui/material/FormHelperText';
+import InputLabel from '@mui/material/InputLabel';
+import ListItemText from '@mui/material/ListItemText';
+import MenuItem from '@mui/material/MenuItem';
+import OutlinedInput from '@mui/material/OutlinedInput';
+import Select from '@mui/material/Select';
+import Typography from '@mui/material/Typography';
+import { jsx as _jsx } from "react/jsx-runtime";
+import { jsxs as _jsxs } from "react/jsx-runtime";
+function SimpleSelect({
+  fullWidth,
+  multiple,
+  required,
+  label,
+  placeholer,
+  options,
+  helperText,
+  error,
+  margin,
+  ...rest
+}) {
+  const defaultOption = options.find(item => item.value === rest.value);
+  const defaultValue = defaultOption?.title;
+  return /*#__PURE__*/_jsxs(FormControl, {
+    margin: margin,
+    fullWidth: fullWidth,
+    error: error,
+    children: [/*#__PURE__*/_jsx(InputLabel, {
+      children: `${label}${required ? '*' : ''}`
+    }), /*#__PURE__*/_jsxs(Select, {
+      multiple: multiple,
+      input: /*#__PURE__*/_jsx(OutlinedInput, {
+        defaultValue: defaultValue,
+        sx: {
+          flex: 1
+        },
+        required: required,
+        label: label,
+        inputProps: {
+          margin
+        }
+      }),
+      renderValue: selected => {
+        if (multiple) {
+          return /*#__PURE__*/_jsx(Box, {
+            sx: {
+              display: 'flex',
+              flexWrap: 'wrap',
+              gap: 0.5
+            },
+            children: selected.map(value => {
+              const option = options.find(item => item.value === value);
+              return option && option.title && /*#__PURE__*/_jsx(Chip, {
+                size: "small",
+                label: option.title
+              }, value);
+            })
+          });
+        }
+        const option = options.find(item => item.value === selected);
+        return option && option.title && /*#__PURE__*/_jsxs(Box, {
+          children: [/*#__PURE__*/_jsx(Typography, {
+            component: "span",
+            children: option.title
+          }), /*#__PURE__*/_jsx(Typography, {
+            marginLeft: 1,
+            component: "span",
+            variant: "body2",
+            color: "text.secondary",
+            children: option.description
+          })]
+        });
+      },
+      ...rest,
+      children: [/*#__PURE__*/_jsx(MenuItem, {
+        disabled: true,
+        children: /*#__PURE__*/_jsx("em", {
+          children: placeholer
+        })
+      }), !multiple && /*#__PURE__*/_jsx(MenuItem, {
+        value: "",
+        children: "None"
+      }), options.map(option => option && option.value && /*#__PURE__*/_jsxs(MenuItem, {
+        value: option.value,
+        children: [/*#__PURE__*/_jsx(ListItemText, {
+          children: option.title
+        }), option.description && /*#__PURE__*/_jsx(Typography, {
+          variant: "body2",
+          color: "text.secondary",
+          children: option.description
+        })]
+      }, option.value))]
+    }), /*#__PURE__*/_jsx(FormHelperText, {
+      children: helperText
+    })]
+  });
+}
+SimpleSelect.propTypes = {
+  error: PropTypes.bool,
+  required: PropTypes.bool,
+  multiple: PropTypes.bool,
+  fullWidth: PropTypes.bool,
+  label: PropTypes.string,
+  placeholer: PropTypes.string,
+  options: PropTypes.array,
+  helperText: PropTypes.string,
+  margin: PropTypes.string
+};
+SimpleSelect.defaultProps = {
+  error: false,
+  required: false,
+  multiple: false,
+  fullWidth: false,
+  label: '',
+  placeholer: '',
+  options: [],
+  helperText: '',
+  margin: ''
+};
+export default SimpleSelect;

package/es/blocklet/component/select-store.js

@@ -0,0 +1,155 @@
+import { useState, useRef } from 'react';
+import PropTypes from 'prop-types';
+import styled from '@emotion/styled';
+import { useLocaleContext } from '@arcblock/ux/lib/Locale/context';
+import TextField from '@mui/material/TextField';
+import MenuItem from '@mui/material/MenuItem';
+import { NODE_MODES } from '@abtnode/constant';
+import Button from '@arcblock/ux/lib/Button';
+import ArrowDropDownIcon from '@mui/icons-material/ArrowDropDown';
+import Typography from '@mui/material/Typography';
+import useLocalStorage from 'react-use/lib/useLocalStorage';
+import { STORAGE_KEY_STORE_BLOCKLET, STORAGE_KEY_STORE_SERVER } from '../../util/constants';
+import { useNodeContext } from '../../contexts/node';
+import { useBlockletContext } from '../../contexts/blocklet';
+import AddStore from '../../store/add';
+import StoreItem from '../../store/item';
+import { getStoreList } 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";
+export default function SelectStore({
+  onChange,
+  loading,
+  children,
+  extra
+}) {
+  const {
+    t
+  } = useLocaleContext();
+  const {
+    info: nodeInfo,
+    inService
+  } = useNodeContext();
+  const {
+    blocklet
+  } = useBlockletContext();
+  const [open, setOpen] = useState(false);
+  const storeSelectRef = useRef(null);
+  const storageKey = inService ? STORAGE_KEY_STORE_BLOCKLET : STORAGE_KEY_STORE_SERVER;
+  const [storeUrl, setStoreUrl] = useLocalStorage(storageKey);
+  const {
+    storeList,
+    teamDid
+  } = getStoreList({
+    fromBlocklet: inService,
+    blocklet,
+    nodeInfo
+  });
+  const currentRegistry = storeUrl && storeList.find(x => storeUrl === x.url) || storeList[0];
+  const isServerlessMode = nodeInfo.mode === NODE_MODES.SERVERLESS;
+  return /*#__PURE__*/_jsxs(_Fragment, {
+    children: [/*#__PURE__*/_jsxs(SelectStoreTitle, {
+      children: [/*#__PURE__*/_jsx(Button, {
+        ref: storeSelectRef,
+        color: "secondary",
+        "data-cy": "add-component-select-store",
+        endIcon: /*#__PURE__*/_jsx(ArrowDropDownIcon, {
+          color: "secondary"
+        }),
+        onClick: () => {
+          setOpen(true);
+        },
+        style: {
+          padding: '0 2px'
+        },
+        children: /*#__PURE__*/_jsx(Typography, {
+          color: "secondary",
+          children: currentRegistry.name
+        })
+      }), /*#__PURE__*/_jsx(Typography, {
+        color: "secondary",
+        children: extra
+      })]
+    }), /*#__PURE__*/_jsxs(TextField, {
+      id: "mui-registry-select",
+      select: true,
+      autoComplete: "off",
+      variant: "outlined",
+      name: "did",
+      helperText: t('blocklet.component.selectRegistryTip'),
+      "data-cy": "component-registry-select",
+      fullWidth: true,
+      value: currentRegistry,
+      autoFocus: true,
+      onChange: e => {
+        const newRegistry = e.target.value;
+        setStoreUrl(newRegistry.url);
+        onChange(newRegistry);
+      },
+      SelectProps: {
+        open,
+        MenuProps: {
+          anchorEl: storeSelectRef.current
+        },
+        renderValue: item => {
+          return item?.name;
+        },
+        onClose: () => {
+          setOpen(false);
+        }
+      },
+      style: {
+        display: 'none'
+      },
+      margin: "normal",
+      children: [storeList?.map(x => {
+        return /*#__PURE__*/_jsx(MenuItem, {
+          value: x,
+          "data-cy": x.url,
+          children: /*#__PURE__*/_jsx(StoreItem, {
+            teamDid: teamDid,
+            store: x,
+            onDelete: () => {
+              if (storeUrl === x.url) {
+                setStoreUrl(storeList[0]?.url);
+              }
+            }
+          })
+        }, x.url);
+      }), !isServerlessMode && /*#__PURE__*/_jsx(AddStore, {
+        disabled: loading,
+        storeList: storeList,
+        teamDid: teamDid,
+        onAdd: url => {
+          setStoreUrl(url);
+        }
+      })]
+    }), children({
+      currentRegistry
+    })]
+  });
+}
+SelectStore.propTypes = {
+  onChange: PropTypes.func,
+  loading: PropTypes.bool,
+  children: PropTypes.any.isRequired,
+  extra: PropTypes.node
+};
+SelectStore.defaultProps = {
+  onChange: () => {},
+  loading: false,
+  extra: ''
+};
+const SelectStoreTitle = styled.div`
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin-bottom: 16px;
+
+  span {
+    font-size: 16px;
+    color: ${props => props.theme.palette.common.black};
+    // font-weight: bold;
+  }
+`;

package/es/blocklet/component/setting.js

@@ -0,0 +1,109 @@
+import { useState } from 'react';
+import styled from '@emotion/styled';
+import PropTypes from 'prop-types';
+import Box from '@mui/material/Box';
+import { useLocaleContext } from '@arcblock/ux/lib/Locale/context';
+import urlPathFriendly from '@blocklet/meta/lib/url-path-friendly';
+import Toast from '@arcblock/ux/lib/Toast';
+import FormTextInput from '../../form/form-text-input';
+import { useNodeContext } from '../../contexts/node';
+import { withPermission } from '../../permission';
+import { isInstalling, formatError, BlockletAdminRoles, formatMountPoint } from '../../util';
+import { jsx as _jsx } from "react/jsx-runtime";
+function ComponentSetting({
+  blocklet,
+  ancestors,
+  hasPermission,
+  ...rest
+}) {
+  const {
+    t
+  } = useLocaleContext();
+  const {
+    api
+  } = useNodeContext();
+  const isRoot = !ancestors.length;
+  const rootDid = isRoot ? blocklet.meta.did : ancestors.map(x => x.meta.did)[0];
+  const [loading, setLoading] = useState('');
+  const [mountPointHelperText, setMountPointHelperText] = useState('');
+  const disabled = loading || !hasPermission;
+  if (!rootDid) {
+    return null;
+  }
+  if (blocklet.status === 'unknown' && isInstalling(blocklet.status)) {
+    return null;
+  }
+  const onSubmitMountPoint = async value => {
+    setLoading(true);
+    try {
+      const input = {
+        rootDid,
+        mountPoint: urlPathFriendly(value)
+      };
+      if (!isRoot) {
+        input.did = blocklet.meta.did;
+      }
+      await api.updateComponentMountPoint({
+        input
+      });
+      setLoading(false);
+      return true;
+    } catch (err) {
+      setLoading(false);
+      err.message = formatError(err);
+      Toast.error(err.message);
+      throw err;
+    }
+  };
+  const handleMountPointChange = value => {
+    setMountPointHelperText(t('common.slugifyHint', {
+      value: formatMountPoint(value)
+    }));
+  };
+  return /*#__PURE__*/_jsx(Div, {
+    component: "div",
+    ...rest,
+    children: /*#__PURE__*/_jsx(Box, {
+      mt: 3,
+      children: /*#__PURE__*/_jsx(FormTextInput, {
+        label: t('blocklet.component.mountPoint'),
+        style: {
+          marginTop: -24
+        },
+        disabled: loading || disabled,
+        loading: loading,
+        required: true,
+        initialValue: blocklet.mountPoint,
+        onSubmit: onSubmitMountPoint,
+        onChange: handleMountPointChange,
+        helperText: mountPointHelperText,
+        formatterBeforeSubmit: value => urlPathFriendly(value)
+      })
+    })
+  });
+}
+const ComponentSettingInDaemon = withPermission(ComponentSetting, 'mutate_blocklets');
+const ComponentSettingInService = withPermission(ComponentSetting, '', BlockletAdminRoles);
+export default function ComponentSettingWithPermission(props) {
+  const {
+    inService
+  } = useNodeContext();
+  if (inService) {
+    return /*#__PURE__*/_jsx(ComponentSettingInService, {
+      ...props
+    });
+  }
+  return /*#__PURE__*/_jsx(ComponentSettingInDaemon, {
+    ...props
+  });
+}
+ComponentSetting.propTypes = {
+  blocklet: PropTypes.object.isRequired,
+  ancestors: PropTypes.array,
+  hasPermission: PropTypes.bool
+};
+ComponentSetting.defaultProps = {
+  ancestors: [],
+  hasPermission: false
+};
+const Div = styled.div``;

package/es/blocklet/component/sortable-tree.js

@@ -0,0 +1,126 @@
+import { isValidElement } from 'react';
+import PropTypes from 'prop-types';
+import { SortableTreeWithoutDndContext as ReactSortableTree } from 'react-sortable-tree';
+import MaterialTheme from 'react-sortable-tree-theme-material-ui';
+import { Icon } from '@iconify/react';
+import isObject from 'lodash/isObject';
+import isEqual from 'lodash/isEqual';
+import { useLocaleContext } from '@arcblock/ux/lib/Locale/context';
+import Box from '@mui/material/Box';
+import Typography from '@mui/material/Typography';
+import { HTML5Backend } from 'react-dnd-html5-backend';
+import { DndProvider } from 'react-dnd';
+import { jsx as _jsx } from "react/jsx-runtime";
+import { jsxs as _jsxs } from "react/jsx-runtime";
+import { Fragment as _Fragment } from "react/jsx-runtime";
+function checkCanDrop({
+  prevPath,
+  nextPath
+}) {
+  const prevLen = prevPath.length;
+  const nextLen = nextPath.length;
+  if (prevLen === nextLen) {
+    if (isEqual(prevPath.slice(0, prevLen - 1), nextPath.slice(0, nextLen - 1))) {
+      return true;
+    }
+  }
+  return false;
+}
+function TreeTitle({
+  treeNode
+}) {
+  const {
+    locale
+  } = useLocaleContext();
+  function renderTitle() {
+    const {
+      title,
+      subtitle
+    } = treeNode;
+    let titleShow = title;
+    let subtitleShow = subtitle;
+    if (isObject(title)) {
+      titleShow = title[locale];
+    }
+    if (! /*#__PURE__*/isValidElement(subtitle) && isObject(subtitle)) {
+      subtitleShow = subtitle[locale];
+    }
+    return /*#__PURE__*/_jsxs(Box, {
+      display: "flex",
+      alignItems: "center",
+      children: [/*#__PURE__*/_jsx(Typography, {
+        variant: "subtitle1",
+        fontSize: 16,
+        children: titleShow
+      }), subtitle && /*#__PURE__*/_jsx(Typography, {
+        variant: "body2",
+        color: "gray",
+        ml: 1.5,
+        children: subtitleShow
+      })]
+    });
+  }
+  return /*#__PURE__*/_jsxs(_Fragment, {
+    children: [treeNode.icon && /*#__PURE__*/_jsx(Icon, {
+      style: {
+        marginRight: 4
+      },
+      icon: treeNode.icon
+    }), renderTitle()]
+  });
+}
+TreeTitle.propTypes = {
+  treeNode: PropTypes.object.isRequired
+};
+function SortableTree({
+  treeData,
+  setTreeData,
+  renderActions
+}) {
+  const expandedData = treeData.map(item => ({
+    ...item,
+    expanded: true
+  }));
+
+  // HACK: 兼容 mui-datatables 中的 react-dnd 使用
+  const dndProps = {};
+  if (typeof window !== 'undefined') {
+    dndProps.context = window;
+  }
+  return /*#__PURE__*/_jsx(DndProvider, {
+    backend: HTML5Backend,
+    ...dndProps,
+    children: /*#__PURE__*/_jsx(ReactSortableTree, {
+      generateNodeProps: rowInfo => {
+        return {
+          buttons: renderActions({
+            data: rowInfo.node,
+            className: 'list-item-actions'
+          }),
+          icons: /*#__PURE__*/_jsx(Icon, {
+            icon: "ic:round-drag-indicator"
+          }),
+          title: /*#__PURE__*/_jsx(TreeTitle, {
+            treeNode: rowInfo.node
+          })
+        };
+      },
+      maxDepth: 2,
+      isVirtualized: false,
+      treeData: expandedData,
+      onChange: setTreeData,
+      canDrop: checkCanDrop,
+      theme: MaterialTheme
+    })
+  });
+}
+SortableTree.propTypes = {
+  treeData: PropTypes.object.isRequired,
+  setTreeData: PropTypes.func,
+  renderActions: PropTypes.func
+};
+SortableTree.defaultProps = {
+  setTreeData: () => {},
+  renderActions: () => {}
+};
+export default SortableTree;