@abtnode/ux 1.16.20 → 1.16.21-beta-edf184e1

package/es/blocklet/configuration.js

@@ -14,7 +14,7 @@ import { BLOCKLET_CONFIGURABLE_KEY, SUPPORTED_LANGUAGES } from '@blocklet/consta
 import { getWhoCanAccess } from '@blocklet/meta/lib/util';
 import Toast from '@arcblock/ux/lib/Toast';
 import FormTextInput from '../form/form-text-input';
-import FormSelectInput from '../form/form-select-input';
+import FormAutocompleteInput from '../form/form-autocomplete-input';
 import { useNodeContext } from '../contexts/node';
 import { isInstalling, isValidClusterSize, BlockletAdminRoles } from '../util';
 import { enableDebug } from '../util/mode';
@@ -28,8 +28,10 @@ import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
 const languages = Object.keys(SUPPORTED_LANGUAGES).map(x => ({
   code: x,
-  name: SUPPORTED_LANGUAGES[x].nativeName
+  name: SUPPORTED_LANGUAGES[x].nativeName,
+  enName: SUPPORTED_LANGUAGES[x].name
 }));
+const languagesFilterKeys = ['name', 'enName', 'code'];
 function BlockletEnvironment({
   blocklet,
   onUpdate,
@@ -351,16 +353,19 @@ function BlockletEnvironment({
         fontSize: 14,
         mb: 0,
         children: t('blocklet.config.languages')
-      }), /*#__PURE__*/_jsx(FormSelectInput, {
+      }), /*#__PURE__*/_jsx(FormAutocompleteInput, {
         style: {
           marginTop: 0
         },
         disabled: loading || disabled,
         loading: loading,
         options: languages,
+        noEmpty: true,
         initialValue: customLanguages ? customLanguages.value.split(',') : ['en', 'zh'],
         onSubmit: value => onSubmitConfig('BLOCKLET_APP_LANGUAGES', value),
-        helperText: t('blocklet.config.selectLanguagesTip')
+        helperText: t('blocklet.config.selectLanguagesTip'),
+        placeholder: t('common.search'),
+        filterKeys: languagesFilterKeys
       })]
     }), /*#__PURE__*/_jsx(Box, {
       className: "config-form",

package/es/blocklet/router/action/add-domain-alias.js

@@ -6,14 +6,15 @@ import MenuItem from '@mui/material/MenuItem';
 import PropTypes from 'prop-types';
 import useSetState from 'react-use/lib/useSetState';
 import Confirm from '../../../confirm';
+import { DomainProvider, useDomainContext } from '../../../contexts/domain';
 import { useNodeContext } from '../../../contexts/node';
 import { sleep } from '../../../util';
-import { parseDomainFromURL } from '../util';
 import AddDomain from '../add-domain';
+import { parseDomainFromURL } 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 AddDomainAlias({
+function AddDomainAliasComponent({
   id,
   children,
   title,
@@ -33,6 +34,7 @@ export default function AddDomainAlias({
     confirmSetting: null
   });
   const cnameDomain = systemDomains.find(item => isDidDomain(item));
+  const domainContext = useDomainContext();
   const onCancel = () => {
     setState({
       loading: false,
@@ -47,10 +49,16 @@ export default function AddDomainAlias({
       loading: true
     });
     try {
+      const domain = parseDomainFromURL(params.domain);
+      const validateResult = await domainContext.validateDomain(domain);
+      if (!validateResult) {
+        // eslint-disable-next-line consistent-return
+        return false;
+      }
       await api.addDomainAlias({
         input: {
           id,
-          domainAlias: parseDomainFromURL(params.domain),
+          domainAlias: domain,
           teamDid
         }
       });
@@ -58,6 +66,10 @@ export default function AddDomainAlias({
       setState({
         confirmSetting: null
       });
+    } catch (error) {
+      domainContext.setError(error.message);
+      // eslint-disable-next-line consistent-return
+      return false; // 防止 Dialog 关闭
     } finally {
       setState({
         loading: false
@@ -129,13 +141,14 @@ export default function AddDomainAlias({
       params: state.confirmSetting.params,
       onConfirm: state.confirmSetting.onConfirm,
       onCancel: state.confirmSetting.onCancel,
+      displayError: false,
       color: "primary",
       loading: state.loading,
       maxWidth: "lg"
     })]
   });
 }
-AddDomainAlias.propTypes = {
+AddDomainAliasComponent.propTypes = {
   id: PropTypes.string.isRequired,
   children: PropTypes.any,
   title: PropTypes.string,
@@ -144,9 +157,16 @@ AddDomainAlias.propTypes = {
   appId: PropTypes.string,
   appPk: PropTypes.string.isRequired
 };
-AddDomainAlias.defaultProps = {
+AddDomainAliasComponent.defaultProps = {
   children: null,
   title: '',
   teamDid: '',
   appId: null
-};
+};
+export default function AddDomainAlias(props) {
+  return /*#__PURE__*/_jsx(DomainProvider, {
+    children: /*#__PURE__*/_jsx(AddDomainAliasComponent, {
+      ...props
+    })
+  });
+}

package/es/blocklet/router/add-domain.js

@@ -1,23 +1,26 @@
 import Connect from '@arcblock/did-connect/lib/Connect';
 import Button from '@arcblock/ux/lib/Button';
 import { useLocaleContext } from '@arcblock/ux/lib/Locale/context';
+import IconInfo from '@mui/icons-material/InfoOutlined';
 import OpenInNewIcon from '@mui/icons-material/OpenInNew';
 import Box from '@mui/material/Box';
 import Link from '@mui/material/Link';
 import TextField from '@mui/material/TextField';
+import useTheme from '@mui/material/styles/useTheme';
 import noop from 'lodash/noop';
 import trim from 'lodash/trim';
 import PropTypes from 'prop-types';
 import useSetState from 'react-use/lib/useSetState';
 import joinURL from 'url-join';
+import { useDomainContext } from '../../contexts/domain';
 import { useNodeContext } from '../../contexts/node';
 import { sleep, validateDomain } from '../../util';
 import { axios } from '../../util/api';
 import DNSTip from './dns-tip';
 import { parseDomainFromURL } 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";
+import { Fragment as _Fragment } from "react/jsx-runtime";
 export default function AddDomain({
   siteId,
   teamDid,
@@ -40,11 +43,14 @@ export default function AddDomain({
     api,
     info
   } = useNodeContext();
+  const domainContext = useDomainContext();
+  const theme = useTheme();
   const [state, setState] = useSetState({
     domain: defaultCustomDomain,
     error: null,
     type: info?.nftDomainUrl ? 'nftDomain' : 'inputDomain',
-    showNFTDomainAuth: false
+    showNFTDomainAuth: false,
+    showDnsTip: false
   });
   let nftDomainURL = '';
   if (info.nftDomainUrl) {
@@ -85,24 +91,27 @@ export default function AddDomain({
       });
     }
   };
+  const error = state.error || domainContext.error; // TODO: state error 可能不需要了
+
   const domainTypes = {
     inputDomain: {
       name: t('router.domainAlias.inputDomain'),
       component: /*#__PURE__*/_jsxs(_Fragment, {
         children: [/*#__PURE__*/_jsx(TextField, {
           label: t('router.domainAlias.add.domainDescription'),
-          helperText: state.error || t('router.domainAlias.add.helperText'),
+          helperText: error || t('router.domainAlias.add.helperText'),
           inputProps: {
             'data-cy': 'domain-name-input'
           },
           fullWidth: true,
           disabled: disabled,
           value: state.domain,
+          size: "small",
+          variant: "outlined",
+          error: !!error,
           onChange: e => {
             const value = trim(e.target?.value);
-            setState({
-              domain: value
-            });
+            domainContext.setDomain(value);
             const errMessage = validateDomain(value, locale);
             setState({
               domain: value,
@@ -115,20 +124,35 @@ export default function AddDomain({
           },
           autoFocus: autoFocus,
           onBlur: () => {
-            if (!state.domain) {
+            if (!domainContext.domain) {
               setState({
                 error: null
               });
+              domainContext.setError(null);
             }
+          }
+        }), /*#__PURE__*/_jsxs(Box, {
+          sx: {
+            cursor: 'pointer',
+            fontSize: '14px',
+            display: 'flex',
+            alignItems: 'center',
+            gap: '4px',
+            marginTop: '8px',
+            lineHeight: 1,
+            color: theme.palette.primary.main
           },
-          size: "small",
-          variant: "outlined",
-          error: !!state.error
-        }), /*#__PURE__*/_jsx(DNSTip, {
+          onClick: () => setState({
+            showDnsTip: !state.showDnsTip
+          }),
+          children: [/*#__PURE__*/_jsx(IconInfo, {
+            fontSize: "1em"
+          }), t('router.domainAlias.showTipHint')]
+        }), state.showDnsTip && /*#__PURE__*/_jsx(DNSTip, {
           domain: state.domain,
           resolvedTarget: cnameDomain,
           style: {
-            marginTop: '8px'
+            marginTop: '4px'
           }
         })]
       })
@@ -220,6 +244,10 @@ export default function AddDomain({
       },
       children: inputDomainTypes.map((type, index) => /*#__PURE__*/_jsxs(Box, {
         children: [inputDomainTypes.length > 1 && /*#__PURE__*/_jsx(Box, {
+          sx: {
+            fontWeight: 700,
+            color: theme.palette.text.primary
+          },
           children: `${t(`optionsOrder.${index + 1}`)}: ${domainTypes[type]?.name}`
         }), /*#__PURE__*/_jsx(Box, {
           sx: {

package/es/confirm.js

@@ -27,6 +27,7 @@ export default function ConfirmDialog({
   onCancel,
   onConfirm,
   loading: inputLoading,
+  displayError,
   ...rest
 }) {
   const [params, setParams] = useState(initialParams);
@@ -41,7 +42,10 @@ export default function ConfirmDialog({
     if (typeof cb === 'function') {
       setLoading(true);
       try {
-        await cb(params);
+        const res = await cb(params);
+        if (res === false) {
+          return;
+        }
         setOpen(false);
       } catch (err) {
         setError(formatError(err));
@@ -79,7 +83,7 @@ export default function ConfirmDialog({
       children: [/*#__PURE__*/_jsx(DialogContentText, {
         component: "div",
         children: d
-      }), !!error && /*#__PURE__*/_jsx(Alert, {
+      }), !!error && displayError && /*#__PURE__*/_jsx(Alert, {
         severity: "error",
         style: {
           width: '100%',
@@ -134,7 +138,8 @@ ConfirmDialog.propTypes = {
   // This object holds states managed in the dialog
   onCancel: PropTypes.func,
   onConfirm: PropTypes.func.isRequired,
-  loading: PropTypes.bool
+  loading: PropTypes.bool,
+  displayError: PropTypes.bool
 };
 ConfirmDialog.defaultProps = {
   onCancel: () => {},
@@ -143,7 +148,8 @@ ConfirmDialog.defaultProps = {
   confirm: 'Confirm',
   color: 'error',
   params: {},
-  loading: false
+  loading: false,
+  displayError: true
 };
 const StyledDialog = styled(Dialog)`
   .delete-actions .Mui-disabled {

package/es/contexts/domain.js

@@ -0,0 +1,75 @@
+import { useLocaleContext } from '@arcblock/ux/lib/Locale/context';
+import trim from 'lodash/trim';
+import { createContext, useContext } from 'react';
+import useSetState from 'react-use/lib/useSetState';
+import { validateDomain } from '../util';
+import { useNodeContext } from './node';
+import { jsx as _jsx } from "react/jsx-runtime";
+const DomainContext = /*#__PURE__*/createContext({});
+const {
+  Provider,
+  Consumer
+} = DomainContext;
+
+// eslint-disable-next-line react/prop-types
+function DomainProvider({
+  children
+}) {
+  const [state, setState] = useSetState({
+    domain: '',
+    error: null
+  });
+  const {
+    locale,
+    t
+  } = useLocaleContext();
+  const {
+    api
+  } = useNodeContext();
+  const value = {
+    error: state.error,
+    domain: state.domain,
+    setError: error => {
+      setState({
+        error
+      });
+    },
+    setDomain: domain => {
+      const tmpDomain = trim(domain);
+      const errMessage = validateDomain(tmpDomain, locale);
+      setState({
+        domain: tmpDomain,
+        error: errMessage
+      });
+    },
+    validateDomain: async domain => {
+      if (!state.error) {
+        const result = await api.isDidDomain({
+          input: {
+            domain
+          }
+        });
+        if (result.value === true) {
+          setState({
+            error: t('router.domainAlias.add.isDidDomainError')
+          });
+          return false;
+        }
+      }
+      return true;
+    }
+  };
+  return /*#__PURE__*/_jsx(Provider, {
+    value: {
+      value
+    },
+    children: children
+  });
+}
+function useDomainContext() {
+  const {
+    value
+  } = useContext(DomainContext);
+  return value;
+}
+export { Consumer as DomainConsumer, DomainContext, DomainProvider, useDomainContext };

package/es/form/form-autocomplete-input.js

@@ -0,0 +1,282 @@
+import React, { useMemo, useState } from 'react';
+import PropTypes from 'prop-types';
+import Box from '@mui/material/Box';
+import CircularProgress from '@mui/material/CircularProgress';
+import CloseIcon from '@mui/icons-material/Close';
+import DoneIcon from '@mui/icons-material/Done';
+import IconButton from '@mui/material/IconButton';
+import Chip from '@mui/material/Chip';
+import FormHelperText from '@mui/material/FormHelperText';
+import Autocomplete, { autocompleteClasses } from '@mui/material/Autocomplete';
+import TextField from '@mui/material/TextField';
+import styled from '@emotion/styled';
+import Popper from '@mui/material/Popper';
+import Required from './required';
+import FormWrapper from './form-wrapper';
+import InputTriggers from './input-triggers';
+import { jsx as _jsx } from "react/jsx-runtime";
+import { createElement as _createElement } from "react";
+import { jsxs as _jsxs } from "react/jsx-runtime";
+import { Fragment as _Fragment } from "react/jsx-runtime";
+export default function FormAutocompleteInput({
+  label,
+  disabled,
+  required,
+  initialValue,
+  onChange,
+  style,
+  onSubmit,
+  triggers,
+  options,
+  formatterBeforeSubmit,
+  helperText,
+  placeholder,
+  renderImage,
+  filterKeys,
+  noEmpty,
+  ...rest
+}) {
+  const [editing, setEditing] = useState(false);
+  const [loading, setLoading] = useState(false);
+  const [inputValue, setInputValue] = React.useState('');
+  const [defaultValue, setDefaultValue] = useState(initialValue);
+  const [value, setValue] = useState(defaultValue);
+  const optionsMap = useMemo(() => {
+    if (!options) {
+      return {};
+    }
+    const cache = {};
+    options.forEach(v => {
+      cache[v.code] = v;
+    });
+    return cache;
+  }, [options]);
+  const filterOptions = () => {
+    if (!options) {
+      return [];
+    }
+    if (!inputValue) {
+      return options.map(v => v.code);
+    }
+    const reg = new RegExp(inputValue.toLowerCase());
+
+    // name 或者其他字段被检索到, 都可以被搜出
+    return options.filter(v => {
+      for (let i = 0; i < filterKeys.length; i++) {
+        const key = filterKeys[i];
+        if (reg.test(v[key]?.toLowerCase())) {
+          return true;
+        }
+      }
+      return false;
+    }).map(v => v.code);
+  };
+  const handleSubmit = async () => {
+    setLoading(true);
+    try {
+      const shouldUpdate = await onSubmit(typeof formatterBeforeSubmit === 'function' ? formatterBeforeSubmit(value) : value);
+      if (shouldUpdate === false) {
+        setValue(defaultValue);
+      } else if (noEmpty && !value.length) {
+        setValue(initialValue);
+        setDefaultValue(initialValue);
+      } else {
+        setValue(value);
+        setDefaultValue(value);
+      }
+    } catch (err) {
+      setValue(defaultValue);
+    } finally {
+      setLoading(false);
+      setEditing(false);
+    }
+  };
+  const onSelectChange = (_, newValue) => {
+    // 确保 newValue 是数组, 并且每个元素都在 options 中
+    if (!Array.isArray(newValue)) {
+      setValue([]);
+      onChange([]);
+      return;
+    }
+    const nextValue = newValue.filter(x => optionsMap[x]);
+    if (!nextValue.length) {
+      setValue([]);
+      onChange([]);
+      return;
+    }
+    setValue(nextValue);
+    onChange(nextValue);
+  };
+  const input = editing ? /*#__PURE__*/_jsx(Autocomplete, {
+    options: options,
+    value: value,
+    onChange: onSelectChange,
+    inputValue: inputValue,
+    onInputChange: (_, newInputValue) => {
+      setInputValue(newInputValue);
+    }
+    // eslint-disable-next-line no-use-before-define
+    ,
+    PopperComponent: StyledPopper,
+    fullWidth: true,
+    multiple: true,
+    variant: "outlined",
+    margin: "dense"
+    // size="small"
+    ,
+    filterOptions: filterOptions,
+    getOptionLabel: option => optionsMap[option]?.name,
+    renderInput: params => /*#__PURE__*/_jsx(TextField, {
+      ...params,
+      label: "",
+      placeholder: placeholder
+    }),
+    renderOption: (props, code) => {
+      const selected = value.indexOf(code) !== -1;
+      return /*#__PURE__*/_createElement(Row, {
+        component: "li",
+        ...props,
+        key: code
+      }, renderImage(optionsMap[code] || {}), /*#__PURE__*/_jsx(Box, {
+        sx: {
+          '& > img': {
+            mr: 2,
+            flexShrink: 0
+          }
+        },
+        style: {
+          flex: 1,
+          fontWeight: selected ? '700' : 'normal'
+        },
+        children: optionsMap[code]?.name
+      }), /*#__PURE__*/_jsx(Box, {
+        component: CloseIcon,
+        sx: {
+          opacity: 0.5,
+          width: 18,
+          height: 18
+        },
+        style: {
+          visibility: selected ? 'visible' : 'hidden'
+        }
+      }));
+    },
+    ...rest
+  }) : /*#__PURE__*/_jsx(Box, {
+    px: 1,
+    className: "form-item-input slot",
+    style: {
+      whiteSpace: 'pre-wrap'
+    },
+    children: value.filter(x => options.some(o => o.code === x)).map(x => /*#__PURE__*/_jsx(Chip, {
+      label: options.find(o => o.code === x).name,
+      style: {
+        marginRight: 8
+      },
+      size: "small"
+    }, x))
+  });
+  return /*#__PURE__*/_jsx(FormWrapper, {
+    className: "form",
+    style: style,
+    children: /*#__PURE__*/_jsxs(Box, {
+      className: "form-item",
+      children: [/*#__PURE__*/_jsxs(Box, {
+        className: "form-item-label",
+        children: [label, required && /*#__PURE__*/_jsx(Required, {})]
+      }), /*#__PURE__*/_jsxs(Box, {
+        className: "form-item-body",
+        children: [/*#__PURE__*/_jsx(Box, {
+          className: "form-item-input",
+          children: input
+        }), /*#__PURE__*/_jsx(Box, {
+          className: "form-item-action",
+          children: editing ? /*#__PURE__*/_jsxs(_Fragment, {
+            children: [/*#__PURE__*/_jsx(IconButton, {
+              "data-cy": "schema-form-item-confirm",
+              onClick: handleSubmit,
+              disabled: disabled || loading,
+              size: "large",
+              children: loading ? /*#__PURE__*/_jsx(CircularProgress, {
+                size: 24
+              }) : /*#__PURE__*/_jsx(DoneIcon, {})
+            }), /*#__PURE__*/_jsx(IconButton, {
+              "data-cy": "schema-form-item-cancel",
+              onClick: () => {
+                setValue(defaultValue);
+                setEditing(false);
+              },
+              disabled: disabled || loading,
+              size: "large",
+              children: /*#__PURE__*/_jsx(CloseIcon, {})
+            })]
+          }) : /*#__PURE__*/_jsx(InputTriggers, {
+            triggers: triggers,
+            onEnterEdit: () => setEditing(true),
+            disabled: disabled
+          })
+        })]
+      }), editing && helperText && /*#__PURE__*/_jsx(FormHelperText, {
+        children: helperText
+      })]
+    })
+  });
+}
+FormAutocompleteInput.propTypes = {
+  style: PropTypes.object,
+  onSubmit: PropTypes.func,
+  onChange: PropTypes.func,
+  label: PropTypes.string,
+  initialValue: PropTypes.string,
+  required: PropTypes.bool,
+  disabled: PropTypes.bool,
+  triggers: PropTypes.array,
+  options: PropTypes.array,
+  helperText: PropTypes.string,
+  formatterBeforeSubmit: PropTypes.func,
+  placeholder: PropTypes.string,
+  renderImage: PropTypes.func,
+  filterKeys: PropTypes.arrayOf(PropTypes.string),
+  noEmpty: PropTypes.bool
+};
+FormAutocompleteInput.defaultProps = {
+  style: {},
+  onSubmit: () => {},
+  onChange: () => {},
+  label: '',
+  initialValue: '',
+  required: false,
+  disabled: false,
+  triggers: [],
+  options: [],
+  helperText: '',
+  formatterBeforeSubmit: x => x.join(','),
+  placeholder: '',
+  filterKeys: ['name'],
+  renderImage: () => null,
+  noEmpty: false
+};
+const Row = styled.div`
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  height: 48px;
+  border-bottom: 1px solid rgba(0, 0, 0, 0.08);
+  font-size: 1.1em;
+`;
+const StyledPopper = styled(Popper)(() => ({
+  [`& .${autocompleteClasses.paper}`]: {
+    boxShadow: '0px 8px 12px rgba(92, 92, 92, 0.04), 0px -10px 12px rgba(92, 92, 92, 0.04)',
+    borderRadius: '6px',
+    width: '100%',
+    border: '1px solid rgba(0, 0, 0, 0.12)',
+    color: 'inherit',
+    fontSize: 13,
+    position: 'absolute',
+    left: 0,
+    top: 0
+  },
+  [`& .${autocompleteClasses.listbox}`]: {
+    padding: 0
+  }
+}));

package/es/hooks/use-snackbar.js

@@ -0,0 +1,2 @@
+import { useSnackbar } from 'notistack';
+export default useSnackbar;

package/es/hooks/use-width.js

@@ -0,0 +1,12 @@
+import { useTheme } from '@mui/styles';
+import useMediaQuery from '@mui/material/useMediaQuery';
+function useWidth() {
+  const theme = useTheme();
+  const keys = [...theme.breakpoints.keys].reverse();
+  return keys.reduce((output, key) => {
+    // eslint-disable-next-line
+    const matches = useMediaQuery(theme.breakpoints.up(key));
+    return !output && matches ? key : output;
+  }, null) || 'xs';
+}
+export default useWidth;